返回 DeepSeek-Reasonix
ManagementPageShell.css
根目录 / desktop / frontend / src / components / ManagementPageShell.css
1 .management-screen { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; flex-direction: column; overflow: hidden; background: var(--bg-soft); color: var(--fg); --reasonix-draggable: no-drag; }
2 .management-screen[hidden] { display: none; }
3 .management-screen__chrome { flex: 0 0 var(--management-titlebar-height, 44px); background: var(--bg-soft); --reasonix-draggable: drag; user-select: none; }
4 .management-screen__back { display: flex; align-items: center; gap: 10px; margin: 8px 14px 12px; padding: 12px; flex: 0 0 auto; border: 0; border-radius: 8px; background: transparent; color: var(--fg-dim); font: inherit; text-align: left; cursor: pointer; --reasonix-draggable: no-drag; }
5 .management-screen__back:hover { background: var(--bg-elev); color: var(--fg); }
6 .management-screen__back:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
7 .management-screen__top { display: flex; align-items: center; gap: 20px; padding: 0 24px 16px 0; }
8 .management-screen__heading { flex: 1; min-width: 0; }
9 .management-screen__heading h1 { margin: 0; font-size: 24px; }
10 .management-screen__heading p { margin: 8px 0 0; color: var(--fg-dim); }
11 .management-screen__actions { display: flex; gap: 8px; }
12 .management-screen__content { flex: 1; min-height: 0; margin: 0 16px 16px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; }
13 .management-screen:not([hidden]) ~ .windows-window-controls { z-index: var(--z-popover); }
14 .app--windows-frameless:has(.management-screen:not([hidden])) { --management-titlebar-height: 48px; }
15 .app--windows-frameless:has(.management-screen:not([hidden])) > .windows-window-controls,
16 :root[data-theme-style] .app--windows-frameless:has(.management-screen:not([hidden])) > .windows-window-controls { --windows-window-controls-height: var(--management-titlebar-height); --windows-window-control-width: 46px; --windows-window-controls-width: 138px; background: var(--bg-soft); border: 0; box-shadow: none; }
17 .management-notice { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--bg-soft); flex-wrap: wrap; }
18 .management-list-back { display: none; }
19 @media (max-width: 959px) { .management-list-back { display: inline-flex; } }
20 @media (max-width: 760px) { .management-screen__top { flex-wrap: wrap; gap: 8px; padding-right: 12px; }.management-screen__heading { flex-basis: 50%; }.management-screen__actions { margin-left: 16px; }.management-screen__content { margin: 0; border-radius: 0; border-inline: 0; border-bottom: 0; } }
21
21 lines CSS