+159
@@ -27,3 +27,162 @@ body.sidebar-collapsed #shell{grid-template-columns:64px 1fr}body.sidebar-collap
|
||||
@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}
|
||||
|
||||
Reference in New Issue
Block a user