197 lines
43 KiB
CSS
197 lines
43 KiB
CSS
:root{--bg:#0d1017;--side:#0a0d13;--panel:#121722;--panel2:#171d29;--panel3:#1c2330;--line:#252d3b;--line2:#303a4a;--text:#e9edf5;--muted:#8994a6;--green:#34d399;--green2:#183c34;--red:#fb7185;--red2:#44212a;--amber:#fbbf24;--amber2:#463818;--blue:#60a5fa;--purple:#a78bfa;--shadow:0 16px 44px #0005;--radius:9px}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:13px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;height:100%}button,input,select,textarea{font:inherit}button{cursor:pointer}#shell{min-height:100%;display:grid;grid-template-columns:218px 1fr}.sidebar{background:var(--side);border-right:1px solid var(--line);position:fixed;left:0;top:0;bottom:0;width:218px;display:flex;flex-direction:column;z-index:10}.brand{height:64px;padding:13px 16px;display:flex;gap:11px;align-items:center;border-bottom:1px solid var(--line)}.brandmark{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(145deg,#6d5dfc,#8b5cf6);font-size:11px;font-weight:900;box-shadow:0 0 24px #7c3aed40}.brand strong{display:block;font-size:15px;letter-spacing:.1px}.brand small,.usertext small{color:var(--muted);display:block;font-size:11px}.environment{margin:11px 10px 5px;padding:8px 9px;background:var(--panel);border:1px solid var(--line);border-radius:7px;display:flex;gap:8px;align-items:center}.environment .pulse{width:7px;height:7px;background:var(--green);border-radius:99px;box-shadow:0 0 0 4px #34d39918}.environment>div{min-width:0;flex:1}.environment small{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.environment select{padding:0;margin:0;border:0;background:transparent;color:var(--text);width:100%;outline:0;font-size:12px}nav{padding:4px 8px;overflow:auto;flex:1}.navlabel{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#556174;padding:15px 9px 5px}nav button{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:#a9b1c0;border-radius:6px;padding:7px 9px;text-align:left;margin:1px 0;transition:.15s}nav button span{width:16px;text-align:center;color:#69778d;font-size:15px}nav button em{font-style:normal;margin-left:auto;background:#1c2330;color:#7e8ba0;border-radius:9px;padding:0 6px;font-size:10px}nav button:hover{background:#141923;color:#fff}nav button.active{background:#1b2030;color:#fff}nav button.active span{color:var(--purple)}.sidebarFooter{min-height:56px;border-top:1px solid var(--line);display:flex;align-items:center;padding:9px 11px;gap:9px}.avatar{width:30px;height:30px;background:#242b3b;border:1px solid #343e50;border-radius:7px;display:grid;place-items:center;font-weight:700}.usertext{flex:1;min-width:0}.usertext b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.sidebarFooter button{border:0;background:transparent;color:#738096;font-size:18px}main{grid-column:2;min-width:0}.topbar{height:48px;border-bottom:1px solid var(--line);background:#0d1017e8;backdrop-filter:blur(10px);position:sticky;top:0;z-index:7;display:flex;align-items:center;justify-content:space-between;padding:0 20px}.crumb{font-size:12px;color:#b7c0ce}.topactions{display:flex;align-items:center;gap:10px}.iconbtn{width:30px;height:30px;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:6px}.dirty{font-size:11px;color:var(--amber)}#content{padding:18px 20px 34px;max-width:1800px;margin:auto}.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:15px}.pagehead h1{font-size:19px;margin:0 0 2px}.pagehead p{margin:0;color:var(--muted);font-size:11px}.toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.btn{border:1px solid var(--line2);background:#171d29;color:#d5dbe5;padding:6px 10px;border-radius:6px;min-height:30px}.btn:hover{background:#202838;border-color:#3a465b}.btn.primary{background:#6d5dfc;border-color:#7667ff;color:white}.btn.danger{color:#ff9aaa;background:#2b171e;border-color:#592733}.btn.success{color:#8df0c7;background:#14312a;border-color:#245444}.btn.tiny{padding:3px 7px;min-height:24px;font-size:11px}.search{background:#10151e;border:1px solid var(--line);border-radius:6px;color:var(--text);padding:6px 9px;outline:0}.search:focus,input:focus,textarea:focus,select:focus{border-color:#6658d8;box-shadow:0 0 0 2px #6d5dfc18}.stats{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:10px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:13px 14px}.stat small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}.stat strong{font-size:24px;display:block;margin:5px 0 1px}.stat .trend{font-size:11px;color:var(--muted)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.panelhead{min-height:42px;padding:10px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.panelhead h2{font-size:12px;margin:0}.twocol{display:grid;grid-template-columns:1.15fr .85fr;gap:10px;margin-top:10px}.table{width:100%;border-collapse:collapse}.table th{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#657187;font-weight:600;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);background:#10151e}.table td{padding:9px 10px;border-bottom:1px solid #202735;vertical-align:middle}.table tr:last-child td{border-bottom:0}.table tbody tr:hover{background:#151b26}.table .clickrow{cursor:pointer}.namecell{display:flex;align-items:center;gap:8px}.cube{width:23px;height:23px;border-radius:5px;background:#202839;border:1px solid #313c50;display:grid;place-items:center;font-size:10px;color:#9dabbd}.status{display:inline-flex;align-items:center;gap:5px;font-size:10px;text-transform:capitalize}.status:before{content:"";width:6px;height:6px;border-radius:50%;background:#667085}.status.running,.status.up{color:#75e3ba}.status.running:before,.status.up:before{background:var(--green);box-shadow:0 0 8px #34d39966}.status.down,.status.exited{color:#ff8999}.status.down:before,.status.exited:before{background:var(--red)}.status.pending,.status.unknown{color:#aab4c3}.status.paused{color:#aab4c3}.status.paused:before{background:#7b8799}.status.maintenance{color:#ffd86a}.status.maintenance:before{background:var(--amber)}.tag{display:inline-block;padding:2px 6px;border:1px solid #384257;border-radius:5px;background:#202736;color:#9ba7b9;font-size:10px}.muted{color:var(--muted)}.green{color:var(--green)}.red{color:var(--red)}.amber{color:var(--amber)}.splitview{display:grid;grid-template-columns:310px minmax(0,1fr);gap:10px;min-height:680px}.listpanel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.listhead{padding:9px;border-bottom:1px solid var(--line);display:flex;gap:6px}.listhead input{width:100%;background:#0e131b;border:1px solid var(--line);color:var(--text);border-radius:5px;padding:6px 8px}.stackitem,.monitoritem{padding:10px;border-bottom:1px solid #202735;cursor:pointer}.stackitem:hover,.monitoritem:hover{background:#171e2a}.stackitem.active,.monitoritem.active{background:#1b2230;border-left:2px solid var(--purple);padding-left:8px}.itemtop{display:flex;align-items:center;justify-content:space-between;gap:8px}.itemsub{font-size:10px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);min-width:0;overflow:hidden}.detailhead{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}.detailtitle{display:flex;align-items:center;gap:10px}.detailtitle h2{font-size:15px;margin:0}.detailtitle small{color:var(--muted)}.actions{display:flex;gap:5px;flex-wrap:wrap}.tabs{display:flex;align-items:center;border-bottom:1px solid var(--line);padding:0 10px;background:#10151e;overflow:auto}.tabs button{border:0;background:transparent;color:#7f8b9e;padding:9px 10px;border-bottom:2px solid transparent;white-space:nowrap;font-size:11px}.tabs button.active{color:#fff;border-color:var(--purple)}.tabbody{padding:12px}.editorgrid{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:10px}.codebox{position:relative}.codebox textarea{width:100%;min-height:530px;resize:vertical;background:#0b0f15;border:1px solid var(--line);color:#c7d1df;border-radius:6px;padding:12px 13px;font:12px/1.6 "Cascadia Code","SFMono-Regular",Consolas,monospace;tab-size:2;outline:0}.editoraside{background:#10151e;border:1px solid var(--line);border-radius:6px;padding:10px}.editoraside h3{font-size:11px;margin:0 0 8px}.tip{padding:8px;border-radius:5px;background:#151c28;border:1px solid #252f40;color:#8f9caf;font-size:10px;margin-bottom:7px}.fieldgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.field{display:flex;flex-direction:column;gap:5px}.field.full{grid-column:1/-1}.field label{font-size:10px;color:#8c98aa}.field input,.field select,.field textarea{background:#0e131b;border:1px solid var(--line);border-radius:5px;color:var(--text);padding:7px 8px;outline:0}.field textarea{min-height:90px;resize:vertical}.secretrow{display:grid;grid-template-columns:190px 1fr auto;gap:7px;margin-bottom:7px}.secretrow input{background:#0e131b;border:1px solid var(--line);color:var(--text);padding:7px;border-radius:5px}.servicecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}.servicecard{padding:11px;background:#10151e;border:1px solid var(--line);border-radius:7px}.servicecard .svcmeta{display:grid;grid-template-columns:70px 1fr;gap:4px;font-size:10px;margin-top:8px}.terminal{background:#080b10;border:1px solid #202837;border-radius:6px;min-height:420px;color:#c7d1dc;font:11px/1.55 "Cascadia Code",Consolas,monospace;padding:10px;white-space:pre-wrap;overflow:auto;max-height:600px}.consolebar{display:flex;gap:6px;margin-bottom:8px}.consolebar select,.consolebar input{background:#0d121a;border:1px solid var(--line);color:var(--text);border-radius:5px;padding:6px 8px}.consolebar input{flex:1}.hb{height:28px;display:flex;align-items:flex-end;gap:2px;margin:10px 0}.hb span{flex:1;min-width:2px;height:100%;background:#283141;border-radius:2px}.hb span.up{background:#256c54}.hb span.down{background:#7b2835}.hb span.maintenance{background:#725c19}.hb span.paused{background:#3b4554}.monitorhero{padding:14px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:15px}.uptimebig{font-size:26px;font-weight:700}.chart{height:150px;border:1px solid var(--line);background:#0d1219;border-radius:6px;position:relative;overflow:hidden}.chart svg{width:100%;height:100%}.monitorstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}.mini{background:#10151e;border:1px solid var(--line);padding:9px;border-radius:6px}.mini small{display:block;color:var(--muted);font-size:9px;text-transform:uppercase}.mini b{font-size:15px}.empty{padding:55px 20px;text-align:center;color:var(--muted)}.empty .big{font-size:30px;margin-bottom:7px}.modalback{position:fixed;inset:0;background:#0009;z-index:30;display:grid;place-items:center;padding:20px}.modal{width:min(680px,100%);max-height:90vh;overflow:auto;background:var(--panel);border:1px solid #344055;border-radius:10px;box-shadow:var(--shadow)}.modalhead{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}.modalhead h2{margin:0;font-size:14px}.modalbody{padding:14px}.modalfoot{display:flex;justify-content:flex-end;gap:7px;padding:10px 14px;border-top:1px solid var(--line)}.closex{border:0;background:transparent;color:var(--muted);font-size:18px}.switch{display:flex;align-items:center;gap:7px}.switch input{accent-color:#7565ff}.notice{padding:8px 10px;border:1px solid #473b1d;background:#211c10;color:#d9bf67;border-radius:6px;font-size:10px}.draftnotice{margin-bottom:8px;padding:8px 10px;background:#201b10;border:1px solid #4c3d18;color:#e7ca67;border-radius:6px;display:flex;justify-content:space-between;align-items:center}.placeholderGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.placeholder{height:160px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);display:grid;place-items:center;color:#5d687a}#toast{position:fixed;right:18px;bottom:18px;z-index:50;background:#1b2230;border:1px solid #3b465b;box-shadow:var(--shadow);padding:10px 13px;border-radius:7px;display:none;max-width:440px}code{font-family:"Cascadia Code",Consolas,monospace;color:#c7d5e8}@media(max-width:1050px){#shell{grid-template-columns:1fr}.sidebar{display:none}main{grid-column:1}.stats,.monitorstats{grid-template-columns:repeat(2,1fr)}.splitview{grid-template-columns:1fr}.listpanel{max-height:300px}.twocol,.editorgrid{grid-template-columns:1fr}.editoraside{display:none}}@media(max-width:650px){#content{padding:12px}.stats,.monitorstats,.fieldgrid,.placeholderGrid{grid-template-columns:1fr}.detailhead,.pagehead{align-items:flex-start;flex-direction:column}.secretrow{grid-template-columns:1fr}.topbar{padding:0 12px}}
|
||
.graphbox{min-height:420px;background:#0b0f15;border:1px solid var(--line);border-radius:7px;overflow:auto;padding:8px}.graphbox svg{min-width:760px;width:100%;height:auto}.edge{fill:none;stroke:#475569;stroke-width:1.5}.edge.depends_on{stroke:#a78bfa}.edge.network{stroke:#60a5fa;stroke-dasharray:5 4}.edge.volume{stroke:#34d399;stroke-dasharray:3 3}.edgelabel{fill:#667085;font-size:9px}.gnode rect{fill:#151c28;stroke:#303a4a;stroke-width:1}.gnode.service rect{fill:#1b2030;stroke:#5b50bd}.gnode.network rect{stroke:#315d85}.gnode.volume rect{stroke:#2e6a55}.gnode circle{fill:#657187}.gnode circle.ok{fill:#34d399}.glabel{fill:#e9edf5;font-size:12px;font-weight:600}.gsub{fill:#8994a6;font-size:9px}.terminal.interactive{outline:none;cursor:text;user-select:text;white-space:pre-wrap;overflow-wrap:anywhere;min-height:460px}.terminal.interactive:focus{border-color:#6658d8;box-shadow:0 0 0 2px #6d5dfc18}.digest{font:10px/1.4 "Cascadia Code",Consolas,monospace;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.right{text-align:right}.full{grid-column:1/-1}
|
||
.compose-livebar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;margin-bottom:8px;background:#10151e;border:1px solid var(--line);border-radius:6px}.compose-livebar b{margin-right:10px}.compose-livegrid{display:grid;grid-template-columns:minmax(420px,1.05fr) minmax(380px,.95fr);gap:10px;align-items:start}.editorlabel{height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;background:#10151e;border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0;font-size:10px;text-transform:uppercase;letter-spacing:.05em}.compose-livegrid .codebox textarea{border-radius:0 0 6px 6px;min-height:680px}.visualcompose{border-radius:6px;min-width:0}.visualcompose>#composeVisual{max-height:680px;overflow:auto;padding-right:2px}.compose-service{background:#10151e;border:1px solid var(--line);border-radius:7px;margin-bottom:8px;overflow:hidden}.compose-service-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-bottom:1px solid var(--line);background:#131a25}.compose-service-head>div{display:flex;align-items:center;gap:8px}.compose-service .fieldgrid{padding:10px}.compose-service textarea{min-height:72px;font:11px/1.5 "Cascadia Code",Consolas,monospace}.compose-service input:disabled,.compose-service textarea:disabled{opacity:.65;cursor:not-allowed;border-style:dashed}.compose-preserved{padding:7px 10px;border-top:1px solid #40391f;background:#1c190f;color:#cdbb72;font-size:10px}.compose-parseerror{padding:18px;border:1px solid #572633;background:#29161c;color:#f3a1af;border-radius:6px}.compose-parseerror p{margin:5px 0;color:#d58d99}.compose-help{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.compose-help span{font-size:10px;color:var(--muted);background:#10151e;border:1px solid var(--line);border-radius:5px;padding:5px 7px}@media(max-width:1250px){.compose-livegrid{grid-template-columns:1fr}.visualcompose>#composeVisual{max-height:none}.compose-livegrid .codebox textarea{min-height:500px}}
|
||
.compose-fullgrid{grid-template-columns:minmax(440px,1fr) minmax(520px,1.15fr)}
|
||
.compose-sections{display:flex;gap:4px;flex-wrap:wrap;padding:6px 0 8px}.compose-sections button{border:1px solid var(--line);background:#10151e;color:var(--muted);padding:5px 8px;border-radius:5px;font-size:10px;cursor:pointer}.compose-sections button.active{color:var(--text);border-color:#3d6ea8;background:#152235}
|
||
.compose-object{border:1px solid var(--line);border-radius:7px;background:#10151e;margin-bottom:8px;overflow:hidden}.compose-object>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;padding:8px 10px;background:#131a25;list-style:none}.compose-object>summary::-webkit-details-marker{display:none}.compose-object-body{padding:9px}
|
||
.compose-fieldrow{border:1px solid #202a38;border-radius:6px;padding:7px;margin-bottom:7px;background:#0d121a}.compose-fieldrow.complex{background:#0f151e}.compose-fieldhead{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px}.compose-fieldhead>div:first-child{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.compose-fieldhead small{display:block;width:100%;color:var(--muted);font-size:9px}.summary-actions{display:flex;align-items:center;gap:5px}.typepill{font-size:9px;color:var(--muted);border:1px solid var(--line);padding:2px 5px;border-radius:999px}.iconbtn{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:15px;line-height:1}.iconbtn:hover{color:#ff7b8a}
|
||
.compose-scalar{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:start}.compose-scalar textarea{min-height:82px;font:11px/1.45 "Cascadia Code",Consolas,monospace}.typeswitch{width:88px}.nullvalue{display:flex;align-items:center;height:32px;color:var(--muted);font-family:monospace}
|
||
.compose-array{display:flex;flex-direction:column;gap:6px}.compose-arrayitem{border-left:2px solid #26364c;padding-left:8px}.arrayindex{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:9px;margin-bottom:4px}.compose-map{display:flex;flex-direction:column;gap:0}.compose-addrow{display:grid;grid-template-columns:minmax(120px,1fr) 90px auto;gap:5px;margin-top:6px}.compose-addrow input,.compose-addrow select{min-width:0}.compose-named>.compose-object-body>.compose-map{padding-top:0}
|
||
@media(max-width:1450px){.compose-fullgrid{grid-template-columns:1fr}.visualcompose>#composeVisual{max-height:none}}
|
||
|
||
/* v9 UX refinements */
|
||
:root[data-theme="light"]{--bg:#f5f7fb;--side:#ffffff;--panel:#ffffff;--panel2:#f6f8fc;--panel3:#eef2f8;--line:#dfe5ee;--line2:#cbd5e1;--text:#18202c;--muted:#667085;--green2:#e7f7f0;--red2:#fff0f2;--amber2:#fff7df;--shadow:0 16px 44px #22304a18}
|
||
:root[data-theme="light"] .topbar{background:#f5f7fbe8}:root[data-theme="light"] .table th{background:#f7f9fc}:root[data-theme="light"] .environment,:root[data-theme="light"] .listhead input,:root[data-theme="light"] .search{background:#f8fafc}:root[data-theme="light"] .terminal{background:#10151d;color:#e8edf5}
|
||
.brandcopy{min-width:0;flex:1}.collapseBtn{border:0;background:transparent;color:var(--muted);font-size:20px;width:24px;height:30px;border-radius:6px}.collapseBtn:hover{background:var(--panel2);color:var(--text)}.sidebarMeta{padding:5px 12px;color:var(--muted);font-size:10px;border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.apiState{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:10px}.apiState i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px #34d39966}.apiState.offline{color:var(--red)}.apiState.offline i{background:var(--red);box-shadow:none}.btn[disabled],.iconbtn[disabled]{opacity:.55;cursor:wait}.btn.busy:after{content:"";display:inline-block;width:9px;height:9px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;margin-left:7px;vertical-align:-1px;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
|
||
.stats{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}.consolebar .spacer{flex:1}.logstate{font-size:10px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}.logstate:before{content:"";width:6px;height:6px;border-radius:50%;background:#667085}.logstate.live:before{background:var(--green)}.logstate.reconnecting:before{background:var(--amber)}.logstate.paused:before{background:var(--amber)}.resourcebar{display:flex;gap:8px;align-items:center;padding:9px 10px;border-bottom:1px solid var(--line)}.resourcebar input{max-width:360px;width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:6px;padding:6px 9px}.healthDetail{font-size:10px;color:var(--muted);margin-top:3px}.keyboardHint{font-size:10px;color:var(--muted)}kbd{font:10px ui-monospace,SFMono-Regular,Consolas,monospace;border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;padding:1px 4px;background:var(--panel2)}
|
||
body.sidebar-collapsed #shell{grid-template-columns:64px 1fr}body.sidebar-collapsed .sidebar{width:64px}body.sidebar-collapsed .brand{padding:13px 14px}body.sidebar-collapsed .brandcopy,body.sidebar-collapsed .environment>div,body.sidebar-collapsed .navlabel,body.sidebar-collapsed nav button:not(.active) em,body.sidebar-collapsed nav button em,body.sidebar-collapsed nav button{font-size:0}body.sidebar-collapsed nav button{justify-content:center;padding:8px}body.sidebar-collapsed nav button span{font-size:16px;width:auto}body.sidebar-collapsed .environment{justify-content:center;padding:10px;margin:10px}body.sidebar-collapsed .usertext,body.sidebar-collapsed .sidebarFooter #logout,body.sidebar-collapsed .sidebarMeta{display:none}body.sidebar-collapsed .sidebarFooter{justify-content:center}body.sidebar-collapsed .collapseBtn{position:absolute;left:52px;top:16px;background:var(--panel);border:1px solid var(--line);font-size:0;width:22px;height:26px}body.sidebar-collapsed .collapseBtn:after{content:"›";font-size:18px}body.sidebar-collapsed main{grid-column:2}
|
||
@media(max-width:860px){#shell{display:block}.sidebar{transform:translateX(-100%);transition:transform .18s;width:218px;box-shadow:var(--shadow)}body.sidebar-mobile-open .sidebar{transform:translateX(0)}main{grid-column:auto}.topbar{padding-left:50px}.topbar:before{content:"☰";position:absolute;left:14px;font-size:19px;color:var(--muted);cursor:pointer}.splitview{grid-template-columns:1fr}.listpanel{max-height:300px}.twocol{grid-template-columns:1fr}.compose-livegrid{grid-template-columns:1fr!important}}
|
||
.topLeft{display:flex;align-items:center;gap:8px}.mobileMenu{display:none}@media(max-width:860px){.topbar{padding-left:12px}.topbar:before{display:none}.mobileMenu{display:inline-grid;place-items:center}}
|
||
.serviceProbeList{max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:7px;padding:6px;background:var(--panel2)}.serviceProbeList .switch{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;padding:7px;border-radius:5px}.serviceProbeList .switch:hover{background:var(--panel3)}
|
||
/* v9.2 host/container identity diagnostics */
|
||
.mono{font:11px/1.45 "Cascadia Code","SFMono-Regular",Consolas,monospace}.warn{color:var(--amber)}.compactList{margin:8px 0 0;padding-left:18px;color:var(--muted)}.compactList li{margin:6px 0}.panel.inset{padding:12px;background:var(--panel2);overflow:visible}.panel.inset h3{margin:0;font-size:12px}.dangerNotice{border-color:#592733!important;background:#2b171e!important;color:#f1bcc5!important}.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:7px}.tablewrap .table{min-width:720px}
|
||
|
||
/* Host Security layer */
|
||
.securityHero{display:flex;justify-content:space-between;align-items:center;gap:20px;border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin-bottom:12px;background:linear-gradient(135deg,var(--panel),var(--panel2))}.securityHero.securityManage{border-color:#24533f}.securityHero.securityAudit{border-color:#5f512b}.securityHero.securityOff{opacity:.78}.securityHero small{font-size:9px;letter-spacing:.12em;color:var(--muted)}.securityHero p{margin:5px 0 0;color:var(--muted);font-size:11px}.securityScore{font-size:38px;font-weight:750;line-height:1;margin-top:4px}.securityScore span{font-size:13px;color:var(--muted);font-weight:500}.securityCaps{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.tag.oktag{border-color:#2b5f49;color:#74d7aa;background:#13261f}.securityGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.securityCard{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:14px;min-width:0}.securityCardHead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.securityCardHead>div:first-child{display:flex;gap:10px;align-items:flex-start;min-width:0}.securityCardHead h2{font-size:13px;margin:0}.securityCardHead p{font-size:10px;color:var(--muted);line-height:1.45;margin:4px 0 0}.securityIcon{width:30px;height:30px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);display:grid;place-items:center;font-size:15px;flex:0 0 auto}.securityFacts{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:13px}.securityFacts span{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:7px;min-width:0}.securityFacts small{display:block;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.06em}.securityFacts b{font-size:10px;display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.securityVersion{font:9px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.securityDetail{font:9px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;background:var(--panel2);border:1px solid var(--line);padding:8px;border-radius:6px;max-height:100px;overflow:auto;white-space:pre-wrap}.securityActions{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px}.securityFindings{display:flex;flex-direction:column}.securityFinding{display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;padding:10px;border-top:1px solid var(--line)}.securityFinding:first-child{border-top:0}.securityFinding>span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);font-weight:700}.securityFinding b{font-size:11px}.securityFinding p{font-size:10px;color:var(--muted);margin:3px 0}.securityFinding small{font-size:9px;color:var(--text)}.securityFinding.sev-high>span{background:var(--red2);color:var(--red)}.securityFinding.sev-medium>span{background:var(--amber2);color:var(--amber)}.securityFinding.sev-ok>span{background:var(--green2);color:var(--green)}.securitySafety{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px}.securitySafety>div{border:1px solid var(--line);border-radius:7px;padding:10px;background:var(--panel2)}.securitySafety b{font-size:10px}.securitySafety p{font-size:9px;color:var(--muted);line-height:1.45;margin:4px 0 0}.warnNotice{border-color:#5e4a20!important;background:#2a2414!important;color:#e6ca7c!important}.fwRule{display:grid;grid-template-columns:90px 80px 140px minmax(150px,1fr) minmax(120px,1fr) 28px 28px 28px;gap:6px;margin-bottom:6px;align-items:center}.fwRule input,.fwRule select{min-width:0}.fwRuntime{margin-top:12px}.fwExisting{font-size:9px;line-height:1.45;white-space:pre-wrap}.securityFormRow{display:grid;grid-template-columns:110px 130px 100px 100px 105px minmax(140px,1fr) 90px 28px;gap:6px;align-items:center;margin-bottom:6px}.securityFormRow.audit{grid-template-columns:minmax(240px,1fr) 80px minmax(120px,200px) 28px}.securityChecks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.securityCountdown{display:flex;align-items:flex-end;justify-content:space-between;margin:20px 0;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}.securityCountdown small{color:var(--muted)}.securityCountdown strong{font-size:32px}.notice code{font:10px ui-monospace,SFMono-Regular,Consolas,monospace}
|
||
@media(max-width:1300px){.securityGrid{grid-template-columns:1fr}.securityFacts{grid-template-columns:repeat(4,1fr)}}
|
||
@media(max-width:860px){.securityHero{align-items:flex-start;flex-direction:column}.securityCaps{justify-content:flex-start}.securityFacts{grid-template-columns:repeat(2,1fr)}.securitySafety{grid-template-columns:1fr}.fwRule{grid-template-columns:1fr 1fr}.fwRule .fwPort,.fwRule .fwSource,.fwRule .fwComment{grid-column:span 2}.securityFormRow{grid-template-columns:1fr 1fr}.securityFormRow .f2bLog{grid-column:span 2}.securityFormRow.audit{grid-template-columns:1fr}.securityChecks{grid-template-columns:1fr}}
|
||
.volume-reconcile{margin-bottom:14px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
|
||
.volume-reconcile .panelhead{align-items:flex-start;margin-bottom:10px}.volume-reconcile .panelhead h3{margin:0 0 3px;font-size:13px}.volume-reconcile .panelhead p{margin:0;max-width:720px}.table.compact th,.table.compact td{padding:7px 8px;font-size:11px}.volume-unused{margin-top:10px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}.volume-note{margin-top:8px}.tagx{border:0;background:transparent;color:inherit;padding:0 0 0 5px;cursor:pointer;font:inherit}.compose-subsection{border-top:1px solid var(--line);padding-top:12px}.empty.small{padding:12px}
|
||
|
||
/* v9.5.1 UI polish: stable compose controls, readable service metadata, inventory tables */
|
||
.compose-scalar input,.compose-scalar select,.compose-scalar textarea,.compose-addrow input,.compose-addrow select{
|
||
width:100%;min-width:0;background:#0e131b;border:1px solid var(--line);color:var(--text);border-radius:5px;padding:6px 8px;outline:0;
|
||
}
|
||
.compose-scalar input:focus,.compose-scalar select:focus,.compose-scalar textarea:focus,.compose-addrow input:focus,.compose-addrow select:focus{
|
||
border-color:#6658d8;box-shadow:0 0 0 2px #6d5dfc18;
|
||
}
|
||
.compose-scalar .typeswitch{width:88px}.compose-arrayitem>.compose-scalar{min-width:0}.compose-arrayitem input{min-width:0}
|
||
:root[data-theme="light"] .compose-scalar input,:root[data-theme="light"] .compose-scalar select,:root[data-theme="light"] .compose-scalar textarea,:root[data-theme="light"] .compose-addrow input,:root[data-theme="light"] .compose-addrow select{background:#fff;color:var(--text)}
|
||
|
||
.servicecards{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),460px));justify-content:start;align-items:start}
|
||
.servicecard{min-width:0}.servicecard .svcmeta{grid-template-columns:68px minmax(0,1fr);align-items:start;row-gap:6px}.servicecard .svcmeta>span,.servicecard .svcmeta>code{min-width:0}
|
||
.svcvalue{display:block;color:#c7d5e8;white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.4}
|
||
:root[data-theme="light"] .svcvalue{color:#334155}
|
||
|
||
.inventory-tablewrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;scrollbar-gutter:stable}
|
||
.inventory-table{min-width:920px;table-layout:fixed}
|
||
.inventory-table th,.inventory-table td{min-width:0}
|
||
.inventory-table [data-col="Name"],.inventory-table [data-col="Names"],.inventory-table [data-col="Repository"]{width:220px}
|
||
.inventory-table [data-col="Driver"],.inventory-table [data-col="Tag"],.inventory-table [data-col="State"],.inventory-table [data-col="Scope"],.inventory-table [data-col="IPv6"],.inventory-table [data-col="Internal"]{width:95px}
|
||
.inventory-table [data-col="Mountpoint"]{width:250px}
|
||
.inventory-table [data-col="Size"],.inventory-table [data-col="CreatedSince"]{width:110px}
|
||
.inventory-table [data-col="ID"]{width:180px}
|
||
.inventory-table [data-col="Image"]{width:230px}
|
||
.inventory-table [data-col="Status"]{width:210px}
|
||
.inventory-table [data-col="Ports"]{width:260px}
|
||
.inventory-table [data-col="Labels"]{width:auto;min-width:300px}
|
||
.inventory-ellipsis{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
.inventory-labels{font:10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace}
|
||
.inventory-actions-cell{width:155px;min-width:155px;position:sticky;right:0;z-index:2;background:var(--panel);box-shadow:-10px 0 16px -14px #000}
|
||
.inventory-table thead .inventory-actions-cell{z-index:3;background:#10151e}
|
||
.inventory-table tbody tr:hover .inventory-actions-cell{background:#151b26}
|
||
.inventory-actions{display:flex;justify-content:flex-end;align-items:center;gap:5px;flex-wrap:wrap;white-space:nowrap}
|
||
.inventory-containers{min-width:1260px}.inventory-containers .inventory-actions-cell{width:380px;min-width:380px}
|
||
.inventory-images .inventory-actions-cell,.inventory-networks .inventory-actions-cell,.inventory-volumes .inventory-actions-cell{width:155px;min-width:155px}
|
||
:root[data-theme="light"] .inventory-actions-cell{background:var(--panel)}:root[data-theme="light"] .inventory-table thead .inventory-actions-cell{background:#f7f9fc}:root[data-theme="light"] .inventory-table tbody tr:hover .inventory-actions-cell{background:#f3f6fb}
|
||
|
||
@media(max-width:1050px){.inventory-tablewrap{margin:0}.inventory-table{min-width:880px}.servicecards{grid-template-columns:1fr}}
|
||
.right{white-space:nowrap}
|
||
|
||
/* v9.5.2 UI polish: firewall overflow + complete light-theme surfaces */
|
||
.modal-wide{width:min(1040px,calc(100vw - 40px))}
|
||
.modal-firewall{overflow-x:hidden}
|
||
.modal-firewall .modalbody,.modal-firewall .panel,.modal-firewall .panel.inset,.modal-firewall .fwRuntime{min-width:0;max-width:100%}
|
||
.modal-firewall .notice,.modal-firewall .fwExisting,.modal-firewall code,.modal-firewall .muted{overflow-wrap:anywhere;word-break:break-word}
|
||
.modal-firewall .fwExisting{max-width:100%;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
|
||
.modal-firewall #fwRules{min-width:0;max-width:100%}
|
||
.modal-firewall .fwRule{
|
||
grid-template-columns:minmax(84px,.8fr) minmax(72px,.7fr) minmax(112px,.95fr) minmax(150px,1.35fr) minmax(130px,1.1fr) 30px 30px 30px;
|
||
width:100%;max-width:100%;min-width:0;
|
||
}
|
||
.modal-firewall .fwRule>*{min-width:0;max-width:100%}
|
||
.modal-firewall .fwRule input,.modal-firewall .fwRule select{width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis}
|
||
.modal-firewall .fwRule .iconbtn{width:30px;min-width:30px;max-width:30px}
|
||
|
||
@media(max-width:900px){
|
||
.modalback{padding:10px}
|
||
.modal-wide{width:min(100%,calc(100vw - 20px))}
|
||
.modal-firewall .fwRule{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 30px 30px 30px;grid-template-areas:"action proto up down remove" "port port port port port" "source source source source source" "comment comment comment comment comment";padding:8px;border:1px solid var(--line);border-radius:7px;background:var(--panel2)}
|
||
.modal-firewall .fwAction{grid-area:action}.modal-firewall .fwProto{grid-area:proto}.modal-firewall .fwPort{grid-area:port}.modal-firewall .fwSource{grid-area:source}.modal-firewall .fwComment{grid-area:comment}.modal-firewall .fwUp{grid-area:up}.modal-firewall .fwDown{grid-area:down}.modal-firewall .fwRemove{grid-area:remove}
|
||
}
|
||
|
||
/* Make arbitrary long security/provider output stay inside its card/modal. */
|
||
.securityCard,.securityCardHead,.securityFinding,.securityFinding>div,.securityDetail,.securityVersion,.notice,.tip,.panelhead{min-width:0;max-width:100%}
|
||
.securityCardHead p,.securityFinding p,.securityFinding small,.securityDetail,.securityVersion,.notice,.tip{overflow-wrap:anywhere;word-break:break-word}
|
||
.securityDetail{white-space:pre-wrap;overflow-x:auto}
|
||
|
||
/* Light theme: replace the remaining dark-only hard-coded surfaces. */
|
||
:root[data-theme="light"] body{color:var(--text)}
|
||
:root[data-theme="light"] .topbar{background:#f8fafce8}
|
||
:root[data-theme="light"] .crumb{color:#475569}
|
||
:root[data-theme="light"] nav button{color:#475569}
|
||
:root[data-theme="light"] nav button span{color:#64748b}
|
||
:root[data-theme="light"] nav button em{background:#eef2f7;color:#64748b}
|
||
:root[data-theme="light"] nav button:hover{background:#f1f5f9;color:#0f172a}
|
||
:root[data-theme="light"] nav button.active{background:#ede9fe;color:#312e81}
|
||
:root[data-theme="light"] nav button.active span{color:#6d5dfc}
|
||
:root[data-theme="light"] .avatar{background:#eef2f7;border-color:#d7dee9;color:#334155}
|
||
:root[data-theme="light"] .iconbtn{background:#fff;color:#64748b;border-color:#d7dee9}
|
||
:root[data-theme="light"] .iconbtn:hover{background:#f8fafc;color:#334155}
|
||
:root[data-theme="light"] .btn{background:#fff;color:#334155;border-color:#cbd5e1}
|
||
:root[data-theme="light"] .btn:hover{background:#f8fafc;border-color:#94a3b8}
|
||
:root[data-theme="light"] .btn.primary{background:#6d5dfc;border-color:#6d5dfc;color:#fff}
|
||
:root[data-theme="light"] .btn.success{background:#ecfdf5;border-color:#a7f3d0;color:#047857}
|
||
:root[data-theme="light"] .btn.danger{background:#fff1f2;border-color:#fecdd3;color:#be123c}
|
||
:root[data-theme="light"] .search,
|
||
:root[data-theme="light"] .listhead input,
|
||
:root[data-theme="light"] .field input,
|
||
:root[data-theme="light"] .field select,
|
||
:root[data-theme="light"] .field textarea,
|
||
:root[data-theme="light"] .secretrow input,
|
||
:root[data-theme="light"] .consolebar input,
|
||
:root[data-theme="light"] .consolebar select,
|
||
:root[data-theme="light"] .resourcebar input,
|
||
:root[data-theme="light"] .fwRule input,
|
||
:root[data-theme="light"] .fwRule select,
|
||
:root[data-theme="light"] .securityFormRow input,
|
||
:root[data-theme="light"] .securityFormRow select{background:#fff;color:#1e293b;border-color:#cbd5e1}
|
||
:root[data-theme="light"] input::placeholder,:root[data-theme="light"] textarea::placeholder{color:#94a3b8}
|
||
:root[data-theme="light"] .table th{background:#f8fafc;color:#64748b}
|
||
:root[data-theme="light"] .table td{border-bottom-color:#e5eaf1}
|
||
:root[data-theme="light"] .table tbody tr:hover{background:#f8fafc}
|
||
:root[data-theme="light"] .cube{background:#f1f5f9;border-color:#d8e0ea;color:#64748b}
|
||
:root[data-theme="light"] .tag{background:#f1f5f9;border-color:#d8e0ea;color:#64748b}
|
||
:root[data-theme="light"] .stackitem,:root[data-theme="light"] .monitoritem{border-bottom-color:#e5eaf1}
|
||
:root[data-theme="light"] .stackitem:hover,:root[data-theme="light"] .monitoritem:hover{background:#f8fafc}
|
||
:root[data-theme="light"] .stackitem.active,:root[data-theme="light"] .monitoritem.active{background:#f1efff}
|
||
:root[data-theme="light"] .tabs{background:#f8fafc}
|
||
:root[data-theme="light"] .tabs button{color:#64748b}
|
||
:root[data-theme="light"] .tabs button.active{color:#312e81}
|
||
:root[data-theme="light"] .codebox textarea{background:#fbfdff;color:#243247;border-color:#d8e0ea}
|
||
:root[data-theme="light"] .editoraside,:root[data-theme="light"] .servicecard,:root[data-theme="light"] .mini{background:#f8fafc}
|
||
:root[data-theme="light"] .tip{background:#f1f5f9;border-color:#d8e0ea;color:#64748b}
|
||
:root[data-theme="light"] .chart{background:#fbfdff}
|
||
:root[data-theme="light"] .notice{background:#fffbeb;border-color:#fde68a;color:#92400e}
|
||
:root[data-theme="light"] .draftnotice{background:#fffbeb;border-color:#fde68a;color:#92400e}
|
||
:root[data-theme="light"] .dangerNotice{background:#fff1f2!important;border-color:#fecdd3!important;color:#9f1239!important}
|
||
:root[data-theme="light"] .warnNotice{background:#fffbeb!important;border-color:#fde68a!important;color:#92400e!important}
|
||
:root[data-theme="light"] .modalback{background:#0f172a66}
|
||
:root[data-theme="light"] .modal{background:#fff;border-color:#cbd5e1}
|
||
:root[data-theme="light"] .modalhead,:root[data-theme="light"] .modalfoot{background:#fff}
|
||
:root[data-theme="light"] .panel.inset,:root[data-theme="light"] .securitySafety>div,:root[data-theme="light"] .securityFacts span,:root[data-theme="light"] .securityIcon,:root[data-theme="light"] .securityDetail,:root[data-theme="light"] .securityCountdown,:root[data-theme="light"] .volume-reconcile{background:#f8fafc}
|
||
:root[data-theme="light"] .securityHero{background:linear-gradient(135deg,#fff,#f8fafc)}
|
||
:root[data-theme="light"] .tag.oktag{background:#ecfdf5;border-color:#a7f3d0;color:#047857}
|
||
:root[data-theme="light"] .securityFinding.sev-high>span{background:#fff1f2;color:#be123c}
|
||
:root[data-theme="light"] .securityFinding.sev-medium>span{background:#fffbeb;color:#b45309}
|
||
:root[data-theme="light"] .securityFinding.sev-ok>span{background:#ecfdf5;color:#047857}
|
||
:root[data-theme="light"] #toast{background:#fff;border-color:#cbd5e1;color:#1e293b}
|
||
:root[data-theme="light"] code{color:#334155}
|
||
:root[data-theme="light"] kbd{background:#f1f5f9;border-color:#cbd5e1;color:#334155}
|
||
:root[data-theme="light"] .inventory-actions-cell{box-shadow:-10px 0 16px -14px #64748b55}
|
||
:root[data-theme="light"] .modal-firewall .fwRule{background:#f8fafc}
|
||
|
||
/* v9.5.2 light-mode contrast + compose designer surfaces */
|
||
:root[data-theme="light"]{--green:#059669;--red:#e11d48;--amber:#b45309;--blue:#2563eb;--purple:#6d5dfc}
|
||
.modalhead h2,.modalfoot,.switch,.fieldgrid>*{min-width:0}
|
||
.modalhead h2{overflow-wrap:anywhere}.modalfoot{flex-wrap:wrap}.switch{flex-wrap:wrap}
|
||
:root[data-theme="light"] .status.running,:root[data-theme="light"] .status.up{color:#047857}
|
||
:root[data-theme="light"] .status.down,:root[data-theme="light"] .status.exited{color:#be123c}
|
||
:root[data-theme="light"] .status.maintenance{color:#b45309}
|
||
:root[data-theme="light"] .status.pending,:root[data-theme="light"] .status.unknown,:root[data-theme="light"] .status.paused{color:#64748b}
|
||
:root[data-theme="light"] .compose-livebar,
|
||
:root[data-theme="light"] .compose-service,
|
||
:root[data-theme="light"] .compose-object,
|
||
:root[data-theme="light"] .compose-help span,
|
||
:root[data-theme="light"] .compose-sections button{background:#f8fafc}
|
||
:root[data-theme="light"] .compose-service-head,
|
||
:root[data-theme="light"] .compose-object>summary{background:#f1f5f9}
|
||
:root[data-theme="light"] .compose-fieldrow{background:#fff;border-color:#dbe3ed}
|
||
:root[data-theme="light"] .compose-fieldrow.complex{background:#fbfdff}
|
||
:root[data-theme="light"] .compose-sections button.active{background:#eef2ff;border-color:#818cf8;color:#3730a3}
|
||
:root[data-theme="light"] .compose-arrayitem{border-left-color:#cbd5e1}
|
||
:root[data-theme="light"] .compose-preserved{background:#fffbeb;border-color:#fde68a;color:#92400e}
|
||
:root[data-theme="light"] .compose-parseerror{background:#fff1f2;border-color:#fecdd3;color:#9f1239}
|
||
:root[data-theme="light"] .compose-parseerror p{color:#be123c}
|
||
:root[data-theme="light"] .placeholder{background:#f8fafc;color:#94a3b8}
|
||
:root[data-theme="light"] .environment{background:#fff}
|
||
:root[data-theme="light"] .sidebarFooter{background:#fff}
|
||
|
||
/* v9.6.0 system package updates */
|
||
.packageHero{display:flex;justify-content:space-between;align-items:center;gap:20px;border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin-bottom:12px;background:linear-gradient(135deg,var(--panel),var(--panel2))}.packageHero small{font-size:9px;letter-spacing:.12em;color:var(--muted)}.packageHero p{margin:5px 0 0;color:var(--muted);font-size:11px}.packageCount{font-size:38px;font-weight:750;line-height:1;margin-top:4px}.packageCount span{font-size:13px;color:var(--muted);font-weight:500}.packageActions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.packageTable{width:100%;border-collapse:collapse;min-width:720px}.packageTable th,.packageTable td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);font-size:10px}.packageTable th{background:var(--panel2);color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.05em}.packageTable tbody tr:last-child td{border-bottom:0}.packageTable td:first-child b{display:block;font-size:11px}.packageTable td:first-child small{display:block;color:var(--muted);margin-top:2px}.packageTable tbody tr:hover{background:var(--panel2)}
|
||
@media(max-width:860px){.packageHero{align-items:flex-start;flex-direction:column}.packageActions{justify-content:flex-start;width:100%}}
|
||
:root[data-theme="light"] .packageHero{background:linear-gradient(135deg,#fff,#f8fafc)}
|
||
:root[data-theme="light"] .packageTable th{background:#f8fafc;color:#64748b}
|
||
:root[data-theme="light"] .packageTable td{border-bottom-color:#e5eaf1}
|
||
:root[data-theme="light"] .packageTable tbody tr:hover{background:#f8fafc}
|