2e78c4befd
Delete confirmations already existed (d7514f4), so no behavior fix was
needed. Switch empty states to antd Empty (table + category tree) and
apply the 20-row pagination standard.
372 lines
6.7 KiB
CSS
372 lines
6.7 KiB
CSS
html, body {
|
||
margin: 0;
|
||
padding: 0;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
}
|
||
|
||
#root {
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Scrollbar */
|
||
::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
::-webkit-scrollbar-thumb {
|
||
background: rgba(0, 0, 0, 0.15);
|
||
border-radius: 3px;
|
||
}
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.ant-menu-dark {
|
||
background: transparent !important;
|
||
}
|
||
.ant-menu-dark .ant-menu-item-selected {
|
||
background-color: #2e3250 !important;
|
||
}
|
||
.ant-menu-dark .ant-menu-item:hover {
|
||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||
}
|
||
/* 二级菜单展开背景：与侧边栏 #1e2030 协调，用微暗叠加制造层次而非跳色 */
|
||
.ant-menu-dark .ant-menu-sub {
|
||
background: rgba(0, 0, 0, 0.15) !important;
|
||
}
|
||
.ant-menu-dark .ant-menu-submenu-title:hover {
|
||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||
}
|
||
.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title {
|
||
color: rgba(255, 255, 255, 0.9) !important;
|
||
}
|
||
|
||
/* editable-card Tabs 默认有 4px paddingTop，导致 TabBar 顶部出现空隙 */
|
||
.ant-tabs-editable-card > .ant-tabs-nav {
|
||
padding-top: 0 !important;
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
/*
|
||
* nav-only-tabs：Tabs 组件只用于渲染导航栏，内容区由外部 flex 子元素控制。
|
||
* 彻底绕开 Ant Design v5 CSS-in-JS 对内容高度的干扰。
|
||
*/
|
||
.ant-tabs.nav-only-tabs .ant-tabs-content-holder {
|
||
display: none !important;
|
||
}
|
||
|
||
/*
|
||
* flex-tabs（保留兼容，当前 Runs 页改用 nav-only-tabs）
|
||
*/
|
||
|
||
/* Run list row hover */
|
||
.run-row {
|
||
transition: background 0.12s;
|
||
}
|
||
.run-row:hover {
|
||
background: #fafafa;
|
||
}
|
||
|
||
/* Pulse dot for running indicators */
|
||
.pulse-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
flex-shrink: 0;
|
||
box-shadow: 0 0 0 0 rgba(22, 119, 255, 0.55);
|
||
animation: pulse-dot 1.6s ease-out infinite;
|
||
}
|
||
@keyframes pulse-dot {
|
||
0% { box-shadow: 0 0 0 0 rgba(22, 119, 255, 0.55); }
|
||
70% { box-shadow: 0 0 0 8px rgba(22, 119, 255, 0); }
|
||
100% { box-shadow: 0 0 0 0 rgba(22, 119, 255, 0); }
|
||
}
|
||
|
||
/* Typing dots for pending replies */
|
||
.typing-dots {
|
||
display: inline-flex;
|
||
gap: 4px;
|
||
padding: 2px 4px;
|
||
}
|
||
.typing-dots > span {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: #b7c0cd;
|
||
animation: typing-blink 1.2s infinite ease-in-out;
|
||
}
|
||
.typing-dots > span:nth-child(2) { animation-delay: 0.2s; }
|
||
.typing-dots > span:nth-child(3) { animation-delay: 0.4s; }
|
||
@keyframes typing-blink {
|
||
0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
|
||
40% { opacity: 1; transform: translateY(-2px); }
|
||
}
|
||
|
||
/* File management */
|
||
.files-layout {
|
||
display: grid;
|
||
grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
|
||
grid-template-rows: minmax(0, 1fr);
|
||
height: 100%;
|
||
min-height: 0;
|
||
background: #fff;
|
||
border-top: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.files-category-panel,
|
||
.files-list-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
}
|
||
|
||
.files-category-panel {
|
||
border-right: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.files-panel-header,
|
||
.files-list-header {
|
||
min-height: 48px;
|
||
padding: 8px 12px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
background: #fafafa;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.files-panel-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.files-category-scroll,
|
||
.files-table-scroll {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow: auto;
|
||
}
|
||
|
||
.files-category-scroll {
|
||
padding: 6px 4px;
|
||
}
|
||
|
||
.files-category-scroll .ant-tree,
|
||
.files-category-scroll .ant-tree-list,
|
||
.files-category-scroll .ant-tree-list-holder-inner {
|
||
min-width: 100%;
|
||
}
|
||
|
||
.files-category-scroll .ant-tree-node-content-wrapper {
|
||
min-width: 0;
|
||
flex: 1;
|
||
}
|
||
|
||
.files-category-scroll .ant-tree-title {
|
||
display: block;
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.cat-tree-node {
|
||
display: grid;
|
||
grid-template-columns: 16px minmax(0, 1fr) auto;
|
||
align-items: center;
|
||
gap: 6px;
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.cat-tree-node-all {
|
||
grid-template-columns: 16px minmax(0, 1fr);
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.cat-tree-icon {
|
||
color: #d48806;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.cat-tree-label {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.cat-actions {
|
||
display: inline-flex;
|
||
flex-shrink: 0;
|
||
opacity: 0;
|
||
transition: opacity 0.15s;
|
||
}
|
||
|
||
.cat-actions .ant-btn {
|
||
width: 24px;
|
||
height: 24px;
|
||
padding: 0;
|
||
}
|
||
|
||
.cat-tree-node:hover .cat-actions,
|
||
.cat-tree-node:focus-within .cat-actions {
|
||
opacity: 1;
|
||
}
|
||
|
||
.files-list-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.files-current-category {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
min-width: 0;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #262626;
|
||
}
|
||
|
||
.files-current-category span {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.files-stat {
|
||
flex-shrink: 0;
|
||
color: #8c8c8c;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.files-extension-stats {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.files-list-actions {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
gap: 8px;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.files-name-stack {
|
||
display: grid;
|
||
gap: 5px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.files-name-row {
|
||
display: grid;
|
||
grid-template-columns: 16px minmax(0, 1fr);
|
||
align-items: center;
|
||
gap: 8px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.files-name-cell {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.files-location-cell {
|
||
display: grid;
|
||
gap: 3px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.files-category-path {
|
||
display: grid;
|
||
grid-template-columns: 14px minmax(0, 1fr);
|
||
align-items: center;
|
||
gap: 5px;
|
||
min-width: 0;
|
||
color: #595959;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.files-category-path .anticon {
|
||
color: #d48806;
|
||
}
|
||
|
||
.files-category-path span,
|
||
.files-location-cell code {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.files-location-cell code {
|
||
display: block;
|
||
padding-left: 19px;
|
||
color: #8c8c8c;
|
||
font-size: 12px;
|
||
background: transparent;
|
||
}
|
||
|
||
.files-location-mobile {
|
||
display: none;
|
||
}
|
||
|
||
.files-upload-category {
|
||
display: grid;
|
||
grid-template-columns: auto minmax(0, 1fr);
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.files-layout {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
grid-template-rows: minmax(150px, 30%) minmax(0, 1fr);
|
||
}
|
||
|
||
.files-category-panel {
|
||
border-right: 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.files-list-header {
|
||
flex-wrap: wrap;
|
||
gap: 8px 12px;
|
||
}
|
||
|
||
.files-extension-stats {
|
||
display: none;
|
||
}
|
||
|
||
.files-list-actions {
|
||
margin-left: auto;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.files-location-mobile {
|
||
display: grid;
|
||
padding-left: 24px;
|
||
}
|
||
|
||
.files-location-mobile code {
|
||
padding-left: 19px;
|
||
}
|
||
}
|