2451 lines
64 KiB
CSS
2451 lines
64 KiB
CSS
#opsdash{
|
|
--fg:#0f172a;
|
|
--muted:#475569;
|
|
--bg:#ffffff;
|
|
--card:#ffffff;
|
|
--line:#e5e7eb;
|
|
--brand:#2563eb;
|
|
--soft:#f7f7f8;
|
|
--pos:#16a34a;
|
|
--neg:#ef4444;
|
|
--heatmap-low:#e0f2fe;
|
|
--heatmap-high:#7c3aed;
|
|
--pie-scale:0.85;
|
|
--stacked-scale:0.85;
|
|
--opsdash-sidebar-width:320px;
|
|
--opsdash-gap:16px;
|
|
--opsdash-radius:16px;
|
|
}
|
|
@media (prefers-color-scheme: dark){
|
|
#opsdash{
|
|
--fg:#e5e7eb;
|
|
--muted:#94a3b8;
|
|
--bg:#0b1220;
|
|
--card:#0f172a;
|
|
--line:#1f2937;
|
|
--brand:#60a5fa;
|
|
--soft:#0b2942;
|
|
--pos:#22c55e;
|
|
--neg:#f87171;
|
|
}
|
|
}
|
|
#opsdash.opsdash-theme-light{
|
|
--fg:#0f172a;
|
|
--muted:#475569;
|
|
--bg:#ffffff;
|
|
--card:#ffffff;
|
|
--line:#e5e7eb;
|
|
--brand:#2563eb;
|
|
--soft:#f7f7f8;
|
|
--pos:#16a34a;
|
|
--neg:#ef4444;
|
|
--heatmap-low:#e0f2fe;
|
|
--heatmap-high:#7c3aed;
|
|
}
|
|
#opsdash.opsdash-theme-light,
|
|
#opsdash.opsdash-theme-dark{
|
|
background:var(--bg) !important;
|
|
color:var(--fg) !important;
|
|
border-color:var(--line) !important;
|
|
}
|
|
#opsdash.opsdash-theme-dark{
|
|
--fg:#e5e7eb;
|
|
--muted:#94a3b8;
|
|
--bg:#0b1220;
|
|
--card:#0f172a;
|
|
--line:#1f2937;
|
|
--brand:#60a5fa;
|
|
--soft:#0b2942;
|
|
--pos:#22c55e;
|
|
--neg:#f87171;
|
|
--heatmap-low:#0b1a33;
|
|
--heatmap-high:#38bdf8;
|
|
}
|
|
#opsdash{
|
|
position:relative;
|
|
display:block;
|
|
width:100%;
|
|
max-width:100%;
|
|
min-height:100vh;
|
|
background:var(--bg);
|
|
color:var(--fg);
|
|
font:14px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
|
|
overflow-x:clip;
|
|
}
|
|
#opsdash.opsdash-theme-light{
|
|
background:#ffffff;
|
|
}
|
|
#content.app-opsdash{
|
|
max-width:none;
|
|
display:block;
|
|
}
|
|
#content.app-opsdash #app{
|
|
max-width:none;
|
|
width:100%;
|
|
}
|
|
#opsdash *, #opsdash *::before, #opsdash *::after{
|
|
box-sizing:border-box;
|
|
}
|
|
#opsdash a{
|
|
color:var(--brand);
|
|
}
|
|
#opsdash .app-content{
|
|
display:grid;
|
|
grid-template-columns:var(--opsdash-sidebar-width) minmax(0,1fr);
|
|
column-gap:var(--opsdash-gap);
|
|
row-gap:var(--opsdash-gap);
|
|
min-height:calc(100vh - 56px);
|
|
height:calc(100vh - 56px);
|
|
padding:16px;
|
|
align-items:start;
|
|
overflow:hidden;
|
|
}
|
|
#opsdash.is-nav-collapsed .app-content{
|
|
grid-template-columns:0 minmax(0,1fr);
|
|
}
|
|
#opsdash .app-content__navigation{
|
|
position:relative;
|
|
display:flex;
|
|
flex-direction:column;
|
|
width:var(--opsdash-sidebar-width);
|
|
max-width:var(--opsdash-sidebar-width);
|
|
height:100%;
|
|
background:transparent;
|
|
border:none;
|
|
border-radius:calc(var(--opsdash-radius) - 2px);
|
|
padding:0 !important;
|
|
overflow-x:hidden !important;
|
|
overflow-y:auto !important;
|
|
scrollbar-gutter:stable;
|
|
direction:rtl;
|
|
box-shadow:none;
|
|
transition:width .25s ease, max-width .25s ease, padding .25s ease, border .25s ease, box-shadow .25s ease, opacity .2s ease;
|
|
}
|
|
#opsdash .app-content__navigation[aria-hidden="true"]{
|
|
pointer-events:none;
|
|
}
|
|
#opsdash.is-nav-collapsed .app-content__navigation{
|
|
width:0;
|
|
max-width:0;
|
|
padding:0;
|
|
border:none;
|
|
box-shadow:none;
|
|
opacity:0;
|
|
}
|
|
@media (max-width: 1100px){
|
|
#opsdash .app-content{
|
|
grid-template-columns:minmax(0,1fr);
|
|
padding:12px;
|
|
}
|
|
#opsdash.is-nav-collapsed .app-content{
|
|
grid-template-columns:minmax(0,1fr);
|
|
}
|
|
#opsdash .app-content__navigation{
|
|
position:fixed;
|
|
left:12px;
|
|
top:72px;
|
|
height:calc(100vh - 88px);
|
|
box-shadow:0 12px 30px rgba(0,0,0,0.12);
|
|
transform:translateX(0);
|
|
opacity:1;
|
|
z-index:90;
|
|
}
|
|
#opsdash.is-nav-collapsed .app-content__navigation{
|
|
transform:translateX(-110%);
|
|
opacity:0;
|
|
box-shadow:none;
|
|
width:var(--opsdash-sidebar-width);
|
|
max-width:var(--opsdash-sidebar-width);
|
|
padding:14px;
|
|
border:1px solid var(--opsdash-border, var(--line));
|
|
}
|
|
}
|
|
#opsdash .app-navigation{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:8px;
|
|
flex:1 1 auto;
|
|
min-height:0;
|
|
overflow-y:visible !important;
|
|
overflow-x:visible;
|
|
padding:0;
|
|
margin:0;
|
|
scrollbar-gutter:stable;
|
|
}
|
|
|
|
#opsdash .app-navigation .sb-pane{
|
|
overflow-y:visible;
|
|
}
|
|
#opsdash .app-shell{
|
|
position:relative;
|
|
width:100%;
|
|
max-width:100%;
|
|
margin:0;
|
|
padding:0;
|
|
display:flex;
|
|
flex-direction:column;
|
|
flex:1 1 auto;
|
|
min-height:0;
|
|
height:100%;
|
|
}
|
|
#opsdash .app-content__main{
|
|
display:flex;
|
|
flex-direction:column;
|
|
flex:1 1 auto;
|
|
min-height:0;
|
|
height:100%;
|
|
overflow:hidden;
|
|
}
|
|
#opsdash .app-main{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:16px;
|
|
width:100%;
|
|
max-width:100%;
|
|
min-height:0;
|
|
flex:1 1 auto;
|
|
overflow-y:auto;
|
|
overflow-x:hidden;
|
|
}
|
|
#opsdash .app-container{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:16px;
|
|
width:100%;
|
|
flex:0 0 auto;
|
|
}
|
|
#opsdash .range-toolbar{
|
|
display:grid;
|
|
grid-template-columns:auto auto 1fr auto;
|
|
align-items:center;
|
|
gap:10px;
|
|
padding:10px 12px;
|
|
border:1px solid color-mix(in oklab, var(--brand), var(--line) 70%);
|
|
border-radius:14px;
|
|
background:color-mix(in oklab, var(--card), transparent 10%);
|
|
box-shadow:0 6px 16px rgba(15,23,42,0.12), inset 0 0 0 1px color-mix(in oklab, var(--brand), transparent 82%);
|
|
position:sticky;
|
|
top:12px;
|
|
z-index:8;
|
|
}
|
|
#opsdash .range-toolbar__group{
|
|
display:grid;
|
|
grid-template-columns:auto 1fr auto;
|
|
align-items:center;
|
|
gap:8px;
|
|
justify-items:center;
|
|
}
|
|
#opsdash .range-toolbar__btn{
|
|
appearance:none;
|
|
border:1px solid color-mix(in oklab, var(--brand), transparent 70%);
|
|
background:color-mix(in oklab, var(--brand), transparent 90%);
|
|
color:var(--brand);
|
|
padding:6px 12px;
|
|
border-radius:999px;
|
|
font-weight:600;
|
|
cursor:pointer;
|
|
transition:background .2s ease, color .2s ease, border .2s ease;
|
|
}
|
|
#opsdash .range-toolbar__btn--icon{
|
|
width:36px;
|
|
height:36px;
|
|
padding:0;
|
|
border-radius:12px;
|
|
border-color:color-mix(in oklab, var(--brand), transparent 55%);
|
|
background:color-mix(in oklab, var(--brand), transparent 86%);
|
|
box-shadow:0 6px 14px rgba(15,23,42,0.12);
|
|
font-size:16px;
|
|
}
|
|
#opsdash .range-toolbar__btn.sidebar-action-btn--icon{
|
|
width:38px;
|
|
height:38px;
|
|
border-radius:12px;
|
|
border-color:color-mix(in oklab, var(--brand), transparent 55%);
|
|
background:color-mix(in oklab, var(--brand), transparent 86%);
|
|
box-shadow:0 6px 14px rgba(15,23,42,0.12);
|
|
font-size:16px;
|
|
padding:0;
|
|
}
|
|
#opsdash .range-toolbar__btn.sidebar-action-btn--icon:not(:disabled):hover{
|
|
background:color-mix(in oklab, var(--brand), transparent 76%);
|
|
border-color:color-mix(in oklab, var(--brand), transparent 40%);
|
|
}
|
|
#opsdash .range-toolbar__btn--pill{
|
|
text-transform:uppercase;
|
|
letter-spacing:.04em;
|
|
font-size:11px;
|
|
font-weight:700;
|
|
}
|
|
#opsdash .range-toolbar__btn--refresh{
|
|
padding:6px 14px;
|
|
}
|
|
#opsdash .range-toolbar__btn:disabled{
|
|
cursor:not-allowed;
|
|
opacity:.6;
|
|
}
|
|
#opsdash .range-toolbar__btn:not(:disabled):hover{
|
|
background:color-mix(in oklab, var(--brand), transparent 80%);
|
|
}
|
|
#opsdash .range-toolbar__label{
|
|
font-weight:600;
|
|
min-width:140px;
|
|
text-align:center;
|
|
color:var(--muted);
|
|
padding:6px 12px;
|
|
border-radius:999px;
|
|
border:1px solid color-mix(in oklab, var(--line), transparent 30%);
|
|
background:color-mix(in oklab, var(--card), transparent 6%);
|
|
box-shadow:inset 0 1px 1px rgba(15,23,42,0.06);
|
|
}
|
|
#opsdash .range-toolbar__label--pill{
|
|
border:1px solid color-mix(in oklab, var(--brand), transparent 70%);
|
|
background:color-mix(in oklab, var(--brand), transparent 92%);
|
|
color:var(--brand);
|
|
font-weight:600;
|
|
font-variant-numeric:tabular-nums;
|
|
}
|
|
#opsdash .range-toolbar__btn.sidebar-action-btn{
|
|
border-radius:10px;
|
|
border-color:color-mix(in oklab, var(--brand), transparent 45%);
|
|
background:color-mix(in oklab, var(--brand), transparent 86%);
|
|
box-shadow:0 8px 18px rgba(37,99,235,0.18);
|
|
text-transform:uppercase;
|
|
letter-spacing:.05em;
|
|
font-size:14px;
|
|
font-weight:800;
|
|
padding:8px 14px;
|
|
}
|
|
#opsdash .range-toolbar__btn.sidebar-action-btn:not(:disabled):hover{
|
|
background:color-mix(in oklab, var(--brand), transparent 78%);
|
|
box-shadow:0 10px 22px rgba(37,99,235,0.22);
|
|
}
|
|
#opsdash .appbar{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:12px;
|
|
margin:8px 0;
|
|
}
|
|
#opsdash .title{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:10px;
|
|
font-weight:800;
|
|
font-size:20px;
|
|
}
|
|
#opsdash .app-icon{
|
|
width:28px;
|
|
height:28px;
|
|
border-radius:6px;
|
|
}
|
|
#opsdash .appbar-meta{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:8px;
|
|
}
|
|
#opsdash .chip{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
padding:2px 10px;
|
|
font-size:12px;
|
|
font-weight:700;
|
|
border-radius:999px;
|
|
background:color-mix(in oklab, var(--brand), transparent 80%);
|
|
color:var(--brand);
|
|
}
|
|
#opsdash .range-badge{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
gap:10px;
|
|
padding:8px 14px;
|
|
border-radius:999px;
|
|
background:color-mix(in oklab, var(--brand), var(--card) 85%);
|
|
border:1px solid color-mix(in oklab, var(--brand), transparent 25%);
|
|
color:var(--fg);
|
|
font-weight:700;
|
|
font-size:14px;
|
|
letter-spacing:0.02em;
|
|
}
|
|
#opsdash .range-badge__mode{
|
|
text-transform:uppercase;
|
|
font-size:12px;
|
|
letter-spacing:0.08em;
|
|
color:var(--brand);
|
|
}
|
|
#opsdash .range-badge__span{
|
|
font-weight:600;
|
|
font-size:13px;
|
|
color:var(--muted, #6b7280);
|
|
}
|
|
#opsdash .cards{
|
|
display:block;
|
|
margin:10px 0;
|
|
}
|
|
#opsdash .cards-loading{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:10px;
|
|
padding:16px;
|
|
border:1px dashed var(--line);
|
|
border-radius:12px;
|
|
color:var(--muted);
|
|
background:color-mix(in oklab, var(--card), transparent 35%);
|
|
}
|
|
#opsdash .cards-loading__label{
|
|
font-weight:600;
|
|
font-size:13px;
|
|
}
|
|
#opsdash .card{
|
|
background:var(--card);
|
|
border:1px solid color-mix(in oklab, var(--line), #ffffff 45%);
|
|
border-radius:calc(var(--opsdash-radius) * var(--widget-space, 1));
|
|
padding:var(--widget-pad, 16px);
|
|
box-shadow:
|
|
0 16px 32px rgba(0,0,0,0.22),
|
|
0 6px 16px rgba(0,0,0,0.18),
|
|
inset 0 1px 0 rgba(255,255,255,0.18),
|
|
inset 0 -1px 0 rgba(0,0,0,0.22);
|
|
font-size:var(--widget-font, 14px);
|
|
}
|
|
#opsdash .balance-card{
|
|
border:1px solid color-mix(in oklab, var(--line), #ffffff 45%);
|
|
box-shadow:
|
|
0 16px 32px rgba(0,0,0,0.22),
|
|
0 6px 16px rgba(0,0,0,0.18),
|
|
inset 0 1px 0 rgba(255,255,255,0.18),
|
|
inset 0 -1px 0 rgba(0,0,0,0.22);
|
|
}
|
|
#opsdash .card.full{
|
|
width:100%;
|
|
display:block;
|
|
}
|
|
#opsdash .card.full .card{
|
|
border:none;
|
|
box-shadow:none;
|
|
background:transparent;
|
|
padding:0;
|
|
}
|
|
#opsdash .card.full .card .chart{
|
|
background:var(--card);
|
|
border:1px solid var(--line);
|
|
border-radius:12px;
|
|
}
|
|
#opsdash .value{
|
|
font-size:30px;
|
|
font-weight:800;
|
|
}
|
|
#opsdash .sub{
|
|
font-size:12px;
|
|
color:var(--muted);
|
|
margin-top:4px;
|
|
}
|
|
#opsdash .tabs{
|
|
display:grid;
|
|
grid-auto-flow:column;
|
|
grid-auto-columns:1fr;
|
|
gap:16px;
|
|
margin:12px 0;
|
|
width:100%;
|
|
}
|
|
#opsdash .tabs a{
|
|
display:block;
|
|
color:var(--brand);
|
|
padding:10px 6px;
|
|
font-weight:600;
|
|
text-align:center;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
border-bottom:2px solid transparent;
|
|
}
|
|
#opsdash .tabs a.active{
|
|
border-color:var(--brand);
|
|
}
|
|
#opsdash table{
|
|
width:100%;
|
|
border-collapse:collapse;
|
|
table-layout:fixed;
|
|
background:var(--card);
|
|
}
|
|
#opsdash th,
|
|
#opsdash td{
|
|
border-top:1px solid var(--line);
|
|
padding:10px 12px;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
}
|
|
#opsdash th.num,
|
|
#opsdash td.num{
|
|
text-align:right;
|
|
font-variant-numeric:tabular-nums;
|
|
}
|
|
#opsdash th.mono,
|
|
#opsdash td.mono{
|
|
font-family:ui-monospace,Consolas,Menlo,monospace;
|
|
}
|
|
#opsdash th.nowrap,
|
|
#opsdash td.nowrap{
|
|
white-space:nowrap;
|
|
}
|
|
#opsdash td > .cell,
|
|
#opsdash th > .cell{
|
|
display:block;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
#opsdash th{
|
|
position:sticky;
|
|
top:0;
|
|
z-index:1;
|
|
background:var(--card);
|
|
}
|
|
#opsdash tr:nth-child(even) td{
|
|
background:color-mix(in oklab, var(--card), rgba(0,0,0,0.03));
|
|
}
|
|
#opsdash .mono{
|
|
font-family:ui-monospace,Consolas,Menlo,monospace;
|
|
}
|
|
#opsdash .nowrap{
|
|
white-space:nowrap;
|
|
}
|
|
#opsdash .grid2{
|
|
display:grid;
|
|
grid-template-columns:1fr 1fr;
|
|
gap:16px;
|
|
margin-top:12px;
|
|
}
|
|
#opsdash canvas.chart{
|
|
display:block;
|
|
width:100%;
|
|
height:360px;
|
|
border:1px solid var(--line);
|
|
border-radius:12px;
|
|
background:var(--card);
|
|
}
|
|
#opsdash .hint{
|
|
font-size:12px;
|
|
color:var(--muted);
|
|
}
|
|
#opsdash .footer{
|
|
text-align:center;
|
|
margin-top:16px;
|
|
}
|
|
#opsdash .tab-panel{
|
|
width:100%;
|
|
max-width:100%;
|
|
border:1px solid var(--line);
|
|
border-radius:var(--opsdash-radius);
|
|
background:var(--card);
|
|
padding:16px;
|
|
box-shadow:0 8px 24px rgba(0,0,0,0.08);
|
|
display:block;
|
|
min-height:420px;
|
|
}
|
|
#opsdash .tab-panel > *{
|
|
width:100%;
|
|
max-width:100%;
|
|
}
|
|
#opsdash .banner{
|
|
border-radius:12px;
|
|
padding:12px 16px;
|
|
font-weight:600;
|
|
}
|
|
#opsdash .banner.warn{
|
|
background:color-mix(in oklab, var(--brand), transparent 85%);
|
|
border:1px solid color-mix(in oklab, var(--brand), transparent 60%);
|
|
}
|
|
#opsdash .btn{
|
|
padding:8px 12px;
|
|
border-radius:10px;
|
|
border:1px solid var(--line);
|
|
background:var(--card);
|
|
color:var(--fg);
|
|
cursor:pointer;
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
gap:6px;
|
|
transition:background .12s ease, border-color .12s ease, color .12s ease;
|
|
}
|
|
#opsdash .btn.primary{
|
|
background:var(--brand);
|
|
color:#fff;
|
|
border-color:var(--brand);
|
|
}
|
|
#opsdash .btn.soft{
|
|
background:var(--soft);
|
|
}
|
|
#opsdash .btn.soft.nav-item.is-active,
|
|
#opsdash .btn.soft.nav-item[aria-pressed="true"]{
|
|
background:color-mix(in oklab, var(--brand), transparent 85%);
|
|
border-color:color-mix(in oklab, var(--brand), transparent 70%);
|
|
}
|
|
#opsdash .btn:disabled{
|
|
opacity:.6;
|
|
cursor:not-allowed;
|
|
}
|
|
#opsdash .rangebar{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:10px;
|
|
align-items:stretch;
|
|
position:relative;
|
|
margin:6px 0 12px;
|
|
padding:12px 14px;
|
|
border:1px solid color-mix(in oklab, var(--brand), var(--line) 70%);
|
|
border-radius:14px;
|
|
background:color-mix(in oklab, var(--card), transparent 10%);
|
|
box-shadow:0 6px 16px rgba(15, 23, 42, 0.12), inset 0 0 0 1px color-mix(in oklab, var(--brand), transparent 82%);
|
|
}
|
|
#opsdash .rangebar .range-actions{
|
|
display:flex;
|
|
gap:8px;
|
|
align-items:center;
|
|
justify-content:center;
|
|
}
|
|
#opsdash .rangebar .range-refresh{
|
|
display:flex;
|
|
justify-content:center;
|
|
}
|
|
#opsdash .rangebar .sidebar-action-btn{
|
|
appearance:none;
|
|
border-radius:999px;
|
|
border:1px solid color-mix(in oklab, var(--brand), transparent 70%);
|
|
background:color-mix(in oklab, var(--brand), transparent 90%);
|
|
color:var(--brand);
|
|
margin:0 !important;
|
|
padding:6px 12px;
|
|
font-weight:600;
|
|
cursor:pointer;
|
|
transition:background .2s ease, color .2s ease, border .2s ease;
|
|
}
|
|
#opsdash .rangebar .sidebar-action-btn:focus-visible{
|
|
outline:2px solid color-mix(in oklab, var(--brand), transparent 40%);
|
|
outline-offset:2px;
|
|
}
|
|
#opsdash .rangebar .sidebar-action-btn:disabled{
|
|
cursor:not-allowed;
|
|
opacity:.6;
|
|
}
|
|
#opsdash .rangebar .sidebar-action-btn:not(:disabled):hover{
|
|
background:color-mix(in oklab, var(--brand), transparent 80%);
|
|
}
|
|
#opsdash .rangebar .sidebar-action-btn--icon{
|
|
min-width:38px;
|
|
width:38px;
|
|
height:38px;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
padding:0;
|
|
border-radius:12px;
|
|
border-color:color-mix(in oklab, var(--brand), transparent 55%);
|
|
background:color-mix(in oklab, var(--brand), transparent 86%);
|
|
box-shadow:0 6px 14px rgba(15,23,42,0.12);
|
|
font-size:16px;
|
|
}
|
|
#opsdash .rangebar .sidebar-action-btn--icon:not(:disabled):hover{
|
|
background:color-mix(in oklab, var(--brand), transparent 76%);
|
|
border-color:color-mix(in oklab, var(--brand), transparent 40%);
|
|
}
|
|
#opsdash .rangebar .range-refresh .sidebar-action-btn{
|
|
width:100%;
|
|
justify-content:center;
|
|
padding:8px 12px;
|
|
margin:0 !important;
|
|
border-radius:10px;
|
|
border-color:color-mix(in oklab, var(--brand), transparent 45%);
|
|
background:color-mix(in oklab, var(--brand), transparent 86%);
|
|
box-shadow:0 8px 18px rgba(37,99,235,0.18);
|
|
text-transform:uppercase;
|
|
letter-spacing:.05em;
|
|
font-size:15px;
|
|
font-weight:800;
|
|
}
|
|
#opsdash .rangebar .range-refresh .sidebar-action-btn:not(:disabled):hover{
|
|
background:color-mix(in oklab, var(--brand), transparent 78%);
|
|
box-shadow:0 10px 22px rgba(37,99,235,0.22);
|
|
}
|
|
#opsdash .rangebar .range-toggle{
|
|
display:inline-flex;
|
|
align-self:center;
|
|
background:color-mix(in oklab, var(--soft), transparent 25%);
|
|
border:1px solid color-mix(in oklab, var(--line), transparent 20%);
|
|
border-radius:999px;
|
|
overflow:hidden;
|
|
box-shadow:inset 0 1px 2px rgba(15,23,42,0.08);
|
|
}
|
|
#opsdash .rangebar .range-toggle .nc-checkbox-radio-switch{
|
|
position:relative;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
min-width:96px;
|
|
cursor:pointer;
|
|
padding:0;
|
|
}
|
|
#opsdash .rangebar .range-toggle .nc-checkbox-radio-switch input{
|
|
position:absolute;
|
|
inset:0;
|
|
opacity:0;
|
|
cursor:pointer;
|
|
}
|
|
#opsdash .rangebar .range-toggle .nc-checkbox-radio-switch span{
|
|
display:block;
|
|
width:100%;
|
|
padding:8px 16px;
|
|
text-align:center;
|
|
font-weight:600;
|
|
font-size:12px;
|
|
letter-spacing:.03em;
|
|
text-transform:uppercase;
|
|
color:var(--muted);
|
|
transition:background .2s ease,color .2s ease;
|
|
}
|
|
#opsdash .rangebar .range-toggle .nc-checkbox-radio-switch input:focus-visible + span{
|
|
outline:2px solid color-mix(in oklab, var(--brand), transparent 50%);
|
|
outline-offset:2px;
|
|
}
|
|
#opsdash .rangebar .range-toggle .nc-checkbox-radio-switch input:checked + span{
|
|
background:color-mix(in oklab, var(--brand), transparent 82%);
|
|
color:var(--brand);
|
|
}
|
|
#opsdash .rangebar .range-nav{
|
|
display:grid;
|
|
grid-template-columns:auto 1fr auto;
|
|
align-items:center;
|
|
gap:10px;
|
|
width:100%;
|
|
}
|
|
#opsdash .rangebar .range-dates{
|
|
font-weight:600;
|
|
justify-self:center;
|
|
text-align:center;
|
|
padding:8px 14px;
|
|
border-radius:999px;
|
|
border:1px solid color-mix(in oklab, var(--brand), transparent 25%);
|
|
background:color-mix(in oklab, var(--brand), var(--card) 85%);
|
|
box-shadow:inset 0 1px 1px rgba(15,23,42,0.06);
|
|
font-size:13px;
|
|
letter-spacing:0.02em;
|
|
}
|
|
#opsdash .rangebar .nav-btn{
|
|
min-width:36px;
|
|
}
|
|
#opsdash .sb-actions{
|
|
display:flex;
|
|
gap:6px;
|
|
flex-wrap:wrap;
|
|
margin:8px 0;
|
|
}
|
|
#opsdash .sb-tabs{
|
|
display:flex;
|
|
gap:8px;
|
|
margin:12px 0;
|
|
}
|
|
#opsdash .sb-tabs--primary{ margin-bottom:8px; }
|
|
#opsdash .sb-tabs--secondary{
|
|
margin-top:0;
|
|
margin-bottom:16px;
|
|
}
|
|
#opsdash .sb-tabs--secondary .sb-tab{ flex:1 1 auto; }
|
|
#opsdash .sb-tab{
|
|
flex:1 1 auto;
|
|
padding:6px 10px;
|
|
border-radius:8px;
|
|
border:1px solid var(--line);
|
|
background:var(--card);
|
|
color:var(--muted);
|
|
font-weight:600;
|
|
cursor:pointer;
|
|
transition:background .15s ease, color .15s ease, border .15s ease;
|
|
}
|
|
#opsdash .sb-tab:hover,
|
|
#opsdash .sb-tab:focus-visible{
|
|
border-color:var(--brand);
|
|
color:var(--brand);
|
|
}
|
|
#opsdash .sb-tab.active{
|
|
border-color:var(--brand);
|
|
color:var(--brand);
|
|
background:color-mix(in oklab, var(--brand), transparent 85%);
|
|
}
|
|
#opsdash .sb-tab:focus-visible{
|
|
outline:2px solid color-mix(in oklab, var(--brand), transparent 60%);
|
|
outline-offset:2px;
|
|
}
|
|
#opsdash .sb-pane{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:12px;
|
|
min-height:0;
|
|
flex:1 1 auto;
|
|
overflow-y:auto;
|
|
}
|
|
#opsdash .sb-actions{
|
|
display:flex;
|
|
justify-content:center;
|
|
gap:8px;
|
|
margin-bottom:8px;
|
|
}
|
|
#opsdash .sb-title{
|
|
font-weight:700;
|
|
font-size:15px;
|
|
letter-spacing:0.01em;
|
|
margin-bottom:8px;
|
|
text-align:center;
|
|
text-decoration:underline;
|
|
text-decoration-thickness:2px;
|
|
text-underline-offset:3px;
|
|
}
|
|
#opsdash .mt-8{ margin-top:8px; }
|
|
#opsdash .card-divider{
|
|
margin-top:16px;
|
|
}
|
|
#opsdash .sb-hints{
|
|
font-size:12px;
|
|
color:var(--muted);
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:4px;
|
|
}
|
|
#opsdash .sb-hintline{
|
|
display:flex;
|
|
gap:4px;
|
|
justify-content:center;
|
|
flex-wrap:wrap;
|
|
}
|
|
#opsdash .sb-list{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:6px;
|
|
border-top:1px solid var(--line);
|
|
padding-top:8px;
|
|
}
|
|
#opsdash .cal-card{
|
|
border:1px solid var(--line);
|
|
border-radius:10px;
|
|
padding:10px;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:8px;
|
|
background:color-mix(in oklab, var(--card), var(--brand) 6%);
|
|
}
|
|
#opsdash .cal-card-head{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:10px;
|
|
cursor:pointer;
|
|
}
|
|
#opsdash .cal-card-head .color-dot{
|
|
width:12px;
|
|
height:12px;
|
|
border-radius:50%;
|
|
border:1px solid color-mix(in oklab, #000, transparent 80%);
|
|
}
|
|
#opsdash .cal-state{
|
|
font-size:12px;
|
|
color:var(--muted);
|
|
}
|
|
#opsdash .cal-state.on{
|
|
color:var(--brand);
|
|
font-weight:600;
|
|
}
|
|
#opsdash .cal-fields{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:8px;
|
|
}
|
|
#opsdash .cal-fields .field{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:4px;
|
|
}
|
|
#opsdash .cal-fields .label{
|
|
font-size:12px;
|
|
font-weight:600;
|
|
color:var(--muted);
|
|
}
|
|
#opsdash .sb-context{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:6px;
|
|
margin-bottom:12px;
|
|
}
|
|
#opsdash .sb-context .sb-title{
|
|
margin-bottom:0;
|
|
}
|
|
#opsdash .sb-context .sb-description{
|
|
font-size:12px;
|
|
color:var(--muted);
|
|
margin:0;
|
|
}
|
|
#opsdash select,
|
|
#opsdash input[type="number"],
|
|
#opsdash input[type="text"],
|
|
#opsdash input[type="checkbox"]{
|
|
font:inherit;
|
|
}
|
|
#opsdash select,
|
|
#opsdash input[type="number"],
|
|
#opsdash input[type="text"]{
|
|
width:100%;
|
|
padding:6px 8px;
|
|
border-radius:8px;
|
|
border:1px solid var(--line);
|
|
background:var(--card);
|
|
color:var(--fg);
|
|
font-size:13px;
|
|
}
|
|
#opsdash input[type="number"]{
|
|
-moz-appearance:textfield;
|
|
}
|
|
#opsdash input[type="number"]::-webkit-inner-spin-button,
|
|
#opsdash input[type="number"]::-webkit-outer-spin-button{
|
|
-webkit-appearance:none;
|
|
margin:0;
|
|
}
|
|
#opsdash .target-config{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:8px;
|
|
padding:8px 0;
|
|
}
|
|
#opsdash .toggle-grid{
|
|
display:grid;
|
|
grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
|
|
gap:8px 10px;
|
|
}
|
|
#opsdash .target-config .field{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:4px;
|
|
}
|
|
#opsdash .target-config .field.checkbox{
|
|
flex-direction:row;
|
|
align-items:center;
|
|
gap:6px;
|
|
}
|
|
#opsdash .target-config .color-field{
|
|
align-items:flex-start;
|
|
}
|
|
#opsdash .target-config .field.checkbox.toggle-field{
|
|
padding:6px 10px;
|
|
border-radius:8px;
|
|
border:1px solid color-mix(in oklab, var(--line), transparent 20%);
|
|
background:color-mix(in oklab, var(--card), transparent 10%);
|
|
gap:8px;
|
|
}
|
|
#opsdash .target-config .field.checkbox.toggle-field:hover{
|
|
border-color:color-mix(in oklab, var(--brand), transparent 70%);
|
|
}
|
|
#opsdash .toggle-field .toggle-copy{
|
|
display:flex;
|
|
flex-direction:column;
|
|
align-items:flex-start;
|
|
gap:2px;
|
|
}
|
|
#opsdash .toggle-field .toggle-title{
|
|
font-weight:600;
|
|
color:var(--fg);
|
|
}
|
|
#opsdash .toggle-field .toggle-desc{
|
|
font-size:11px;
|
|
color:var(--muted);
|
|
max-width:230px;
|
|
}
|
|
#opsdash .target-config .section-title{
|
|
font-weight:700;
|
|
margin-bottom:4px;
|
|
text-align:left;
|
|
flex:0 0 auto;
|
|
display:inline-flex;
|
|
align-items:center;
|
|
text-decoration:underline;
|
|
text-decoration-thickness:2px;
|
|
text-underline-offset:2px;
|
|
}
|
|
#opsdash .target-config .section-title-row{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:4px;
|
|
flex-wrap:nowrap;
|
|
margin-bottom:4px;
|
|
}
|
|
#opsdash .target-config .section-subtitle{
|
|
font-weight:600;
|
|
font-size:12px;
|
|
text-transform:uppercase;
|
|
letter-spacing:.04em;
|
|
color:var(--muted);
|
|
flex:0 0 auto;
|
|
display:inline-flex;
|
|
align-items:center;
|
|
text-decoration:underline;
|
|
text-decoration-thickness:1px;
|
|
text-underline-offset:2px;
|
|
}
|
|
#opsdash .target-config .subtitle{ margin-bottom:0; }
|
|
#opsdash .info-button{
|
|
width:16px;
|
|
height:16px;
|
|
border-radius:4px;
|
|
border:none;
|
|
background:transparent;
|
|
color:color-mix(in oklab, var(--brand), transparent 20%);
|
|
font-size:11px;
|
|
font-weight:600;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
cursor:pointer;
|
|
transition:color .15s ease;
|
|
flex:0 0 auto;
|
|
padding:0;
|
|
}
|
|
#opsdash .info-button span{
|
|
display:inline-block;
|
|
width:100%;
|
|
text-align:center;
|
|
}
|
|
#opsdash .info-button:hover,
|
|
#opsdash .info-button:focus-visible{
|
|
color:var(--brand);
|
|
}
|
|
#opsdash .info-button:focus-visible{
|
|
outline:2px solid color-mix(in oklab, var(--brand), transparent 60%);
|
|
outline-offset:1px;
|
|
}
|
|
#opsdash .target-config .section-hint{
|
|
margin:0 0 6px 0;
|
|
font-size:12px;
|
|
color:var(--muted);
|
|
}
|
|
#opsdash .field-grid{
|
|
display:grid;
|
|
grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
|
|
gap:8px 10px;
|
|
}
|
|
#opsdash .target-config .field .label{
|
|
font-size:12px;
|
|
font-weight:600;
|
|
color:var(--muted);
|
|
}
|
|
#opsdash .target-config .preset-buttons{
|
|
display:flex;
|
|
gap:6px;
|
|
flex-wrap:wrap;
|
|
}
|
|
#opsdash .target-config .target-category{
|
|
border:1px solid var(--line);
|
|
border-radius:8px;
|
|
padding:8px;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:8px;
|
|
background:color-mix(in srgb, var(--card) 94%, var(--brand) 6%);
|
|
}
|
|
#opsdash .target-config .target-category .cat-header{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:8px;
|
|
}
|
|
#opsdash .target-config .target-category .cat-name{
|
|
flex:1;
|
|
}
|
|
#opsdash .target-config .target-category .remove-cat{
|
|
border:none;
|
|
background:transparent;
|
|
color:var(--muted);
|
|
cursor:pointer;
|
|
padding:4px;
|
|
border-radius:6px;
|
|
font-size:14px;
|
|
}
|
|
#opsdash .target-config .target-category .remove-cat:hover{
|
|
color:var(--neg);
|
|
background:color-mix(in srgb, var(--neg) 12%, transparent);
|
|
}
|
|
#opsdash .target-config .target-category .cat-fields{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
gap:8px;
|
|
}
|
|
#opsdash .target-config .add-category{
|
|
align-self:flex-start;
|
|
}
|
|
#opsdash .target-config .target-section{
|
|
border-top:1px solid var(--line);
|
|
padding-top:8px;
|
|
margin-top:4px;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:6px;
|
|
}
|
|
#opsdash .target-config .target-section .section-title{
|
|
font-size:12px;
|
|
font-weight:700;
|
|
color:var(--muted);
|
|
text-decoration:underline;
|
|
text-decoration-thickness:1px;
|
|
text-underline-offset:2px;
|
|
}
|
|
#opsdash .target-config .field.checkbox input[type="checkbox"]{
|
|
margin:0;
|
|
}
|
|
#opsdash .summary-mode-toggle{
|
|
display:flex;
|
|
gap:6px;
|
|
flex-wrap:wrap;
|
|
}
|
|
#opsdash .chart-section{
|
|
margin-top:24px;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:16px;
|
|
}
|
|
#opsdash .chart-section .section-title{
|
|
font-size:16px;
|
|
font-weight:700;
|
|
color:var(--fg);
|
|
text-decoration:underline;
|
|
text-decoration-thickness:2px;
|
|
text-underline-offset:3px;
|
|
}
|
|
#opsdash .chart-card{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:12px;
|
|
min-height:220px;
|
|
}
|
|
#opsdash .chart-card__title{
|
|
font-size:12px;
|
|
font-weight:600;
|
|
color:var(--muted);
|
|
text-transform:uppercase;
|
|
letter-spacing:.08em;
|
|
}
|
|
#opsdash .category-chart-block{
|
|
border:1px solid var(--line);
|
|
border-radius:12px;
|
|
padding:14px;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:12px;
|
|
background:color-mix(in srgb, var(--card) 94%, var(--brand) 6%);
|
|
}
|
|
#opsdash .category-chart-header{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:8px;
|
|
font-weight:600;
|
|
color:var(--fg);
|
|
}
|
|
#opsdash .category-chart-header .dot{
|
|
width:10px;
|
|
height:10px;
|
|
border-radius:50%;
|
|
box-shadow:0 0 0 1px color-mix(in srgb, var(--fg) 12%, transparent);
|
|
}
|
|
#opsdash .mt-12{
|
|
margin-top:12px;
|
|
}
|
|
#opsdash .hint.footer{
|
|
margin-top:24px;
|
|
}
|
|
#opsdash .nav-item__icon{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
}
|
|
@keyframes spin{
|
|
from{ transform:rotate(0deg); }
|
|
to{ transform:rotate(360deg); }
|
|
}
|
|
#opsdash .section-title-row{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:6px;
|
|
}
|
|
#opsdash .section-title-row .info-button{
|
|
margin-left:4px;
|
|
}
|
|
#opsdash .cards-toolbar{
|
|
display:flex;
|
|
flex-direction:row;
|
|
align-items:center;
|
|
gap:12px;
|
|
margin:0;
|
|
width:100%;
|
|
justify-content:flex-start;
|
|
padding:10px 14px;
|
|
border:1px solid color-mix(in oklab, var(--brand), var(--line) 70%);
|
|
border-radius:16px;
|
|
background:linear-gradient(180deg, color-mix(in oklab, var(--card), #ffffff 4%) 0%, color-mix(in oklab, var(--card), transparent 8%) 100%);
|
|
box-shadow:0 10px 24px rgba(15,23,42,0.12), inset 0 0 0 1px color-mix(in oklab, var(--brand), transparent 84%);
|
|
}
|
|
#opsdash .cards-toolbar--editing{
|
|
flex-direction:column;
|
|
align-items:stretch;
|
|
gap:14px;
|
|
padding:14px 16px;
|
|
border-color:color-mix(in oklab, var(--brand), var(--line) 48%);
|
|
box-shadow:0 12px 28px rgba(15,23,42,0.14), inset 0 0 0 1px color-mix(in oklab, var(--brand), transparent 72%);
|
|
}
|
|
#opsdash .cards-toolbar__tabs{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:6px;
|
|
flex-wrap:nowrap;
|
|
flex:1 1 auto;
|
|
min-width:0;
|
|
overflow-x:auto;
|
|
overflow-y:hidden;
|
|
scrollbar-width:none;
|
|
border-bottom:0;
|
|
padding-bottom:0;
|
|
}
|
|
#opsdash .cards-toolbar__tabs::-webkit-scrollbar{ display:none; }
|
|
#opsdash .cards-toolbar--editing .cards-toolbar__tabs{
|
|
width:100%;
|
|
flex:0 0 auto;
|
|
flex-wrap:wrap;
|
|
overflow:visible;
|
|
border-bottom:1px solid color-mix(in oklab, var(--line), transparent 10%);
|
|
padding-bottom:8px;
|
|
}
|
|
#opsdash .tab-item{
|
|
display:inline-flex;
|
|
align-items:stretch;
|
|
flex:0 0 auto;
|
|
}
|
|
#opsdash .cards-toolbar__center{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:12px;
|
|
flex-wrap:nowrap;
|
|
flex:0 0 auto;
|
|
min-width:0;
|
|
}
|
|
#opsdash .cards-toolbar--editing .cards-toolbar__center{
|
|
display:grid;
|
|
grid-template-columns:auto minmax(0, 1fr);
|
|
align-items:center;
|
|
gap:12px;
|
|
width:100%;
|
|
}
|
|
#opsdash .cards-toolbar__mode{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:12px;
|
|
min-width:0;
|
|
flex:0 0 auto;
|
|
}
|
|
#opsdash .cards-toolbar__tools{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:10px;
|
|
flex-wrap:nowrap;
|
|
justify-content:flex-end;
|
|
flex:0 0 auto;
|
|
}
|
|
#opsdash .cards-toolbar__tools .range-badge{
|
|
margin-left:auto;
|
|
}
|
|
#opsdash .cards-toolbar--editing .cards-toolbar__tools{
|
|
flex-wrap:nowrap;
|
|
justify-content:flex-end;
|
|
width:100%;
|
|
min-width:0;
|
|
}
|
|
#opsdash .refresh-indicator{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
gap:6px;
|
|
padding:5px 10px;
|
|
border-radius:999px;
|
|
border:1px solid color-mix(in oklab, var(--line), transparent 18%);
|
|
background:color-mix(in oklab, var(--card), var(--soft) 24%);
|
|
color:var(--muted, #64748b);
|
|
font-size:12px;
|
|
font-weight:700;
|
|
letter-spacing:0.02em;
|
|
white-space:nowrap;
|
|
}
|
|
#opsdash .refresh-indicator::before{
|
|
content:'';
|
|
width:7px;
|
|
height:7px;
|
|
border-radius:50%;
|
|
background:var(--brand);
|
|
animation:opsdash-refresh-pulse 1.2s ease-in-out infinite;
|
|
}
|
|
@keyframes opsdash-refresh-pulse{
|
|
0%, 100%{
|
|
transform:scale(0.9);
|
|
opacity:0.55;
|
|
}
|
|
50%{
|
|
transform:scale(1.1);
|
|
opacity:1;
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce){
|
|
#opsdash .refresh-indicator::before{
|
|
animation:none;
|
|
}
|
|
}
|
|
#opsdash .tab-btn{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
gap:6px;
|
|
border:1px solid color-mix(in oklab, var(--line), transparent 10%);
|
|
border-bottom:0;
|
|
background:color-mix(in oklab, var(--card), var(--soft) 12%);
|
|
padding:6px 12px 5px;
|
|
border-radius:6px 6px 0 0;
|
|
font-weight:600;
|
|
cursor:pointer;
|
|
color:var(--muted);
|
|
position:relative;
|
|
box-shadow:0 1px 0 rgba(15,23,42,0.04);
|
|
}
|
|
#opsdash .cards-toolbar:not(.cards-toolbar--editing) .tab-btn{
|
|
padding:5px 10px 4px;
|
|
font-size:13px;
|
|
}
|
|
#opsdash .cards-toolbar:not(.cards-toolbar--editing) .tab-btn .tab-default{
|
|
font-size:9px;
|
|
}
|
|
#opsdash .tab-btn--with-menu{
|
|
border-radius:6px 0 0 0;
|
|
}
|
|
#opsdash .tab-btn.active{
|
|
color:var(--fg);
|
|
background:var(--card);
|
|
border-color:color-mix(in oklab, var(--brand), var(--line) 60%);
|
|
}
|
|
#opsdash .tab-btn.active::after{
|
|
content:'';
|
|
position:absolute;
|
|
left:6px;
|
|
right:6px;
|
|
bottom:-2px;
|
|
height:2px;
|
|
background:var(--brand);
|
|
border-radius:999px;
|
|
}
|
|
#opsdash .tab-btn.default{
|
|
color:var(--brand);
|
|
}
|
|
#opsdash .tab-btn .tab-default{
|
|
font-size:10px;
|
|
font-weight:700;
|
|
letter-spacing:0.02em;
|
|
text-transform:uppercase;
|
|
color:color-mix(in srgb, var(--brand) 80%, #0f172a 20%);
|
|
}
|
|
#opsdash .tab-btn--add{
|
|
border:1px dashed color-mix(in oklab, var(--line), transparent 20%);
|
|
color:var(--muted);
|
|
background:color-mix(in oklab, var(--card), transparent 40%);
|
|
box-shadow:none;
|
|
}
|
|
#opsdash .tab-menu-btn{
|
|
appearance:none;
|
|
border:1px solid color-mix(in oklab, var(--line), transparent 10%);
|
|
border-bottom:0;
|
|
border-left:0;
|
|
background:color-mix(in oklab, var(--card), var(--soft) 12%);
|
|
color:var(--muted);
|
|
padding:6px 8px 5px;
|
|
border-radius:0 6px 0 0;
|
|
font-weight:700;
|
|
cursor:pointer;
|
|
line-height:1;
|
|
min-width:28px;
|
|
}
|
|
#opsdash .tab-menu-btn:hover{
|
|
background:color-mix(in oklab, var(--brand), var(--card) 90%);
|
|
color:var(--fg);
|
|
}
|
|
#opsdash .tab-menu-btn.active{
|
|
background:var(--card);
|
|
border-color:color-mix(in oklab, var(--brand), var(--line) 60%);
|
|
color:var(--fg);
|
|
}
|
|
#opsdash .tab-input{
|
|
min-width:120px;
|
|
border:1px solid var(--line);
|
|
border-radius:8px;
|
|
padding:4px 8px;
|
|
font-weight:600;
|
|
}
|
|
#opsdash .cards-toolbar select{
|
|
min-width:180px;
|
|
}
|
|
#opsdash .cards-toolbar__actions{
|
|
display:flex;
|
|
gap:6px;
|
|
align-items:center;
|
|
padding:6px 8px;
|
|
border-radius:12px;
|
|
border:1px solid color-mix(in oklab, var(--line), transparent 4%);
|
|
background:color-mix(in oklab, var(--card), var(--soft) 18%);
|
|
}
|
|
#opsdash .cards-toolbar__actions select{
|
|
min-width:190px;
|
|
}
|
|
#opsdash .cards-toolbar:not(.cards-toolbar--editing) .ghost-btn--edit{
|
|
padding:5px 10px;
|
|
}
|
|
#opsdash .cards-toolbar:not(.cards-toolbar--editing) .range-badge{
|
|
padding:5px 10px;
|
|
}
|
|
#opsdash .ghost-btn--tight{
|
|
padding:5px 8px;
|
|
}
|
|
#opsdash .ghost-btn{
|
|
border:1px solid var(--color-border, #d1d5db);
|
|
background:color-mix(in srgb, var(--card) 92%, #ffffff 8%);
|
|
padding:6px 10px;
|
|
border-radius:8px;
|
|
cursor:pointer;
|
|
}
|
|
#opsdash .ghost-btn:disabled{
|
|
opacity:0.5;
|
|
cursor:not-allowed;
|
|
}
|
|
#opsdash .ghost-btn--edit{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
gap:6px;
|
|
font-weight:700;
|
|
color:#fff;
|
|
background:color-mix(in oklab, var(--brand) 70%, #1e293b 30%);
|
|
border-color:color-mix(in oklab, var(--brand), transparent 20%);
|
|
}
|
|
#opsdash .ghost-btn__icon{
|
|
font-size:12px;
|
|
opacity:0.9;
|
|
}
|
|
#opsdash.opsdash-theme-light .ghost-btn--edit{
|
|
color:#0f172a;
|
|
background:color-mix(in oklab, var(--brand) 20%, #ffffff 80%);
|
|
border-color:color-mix(in oklab, var(--brand), transparent 35%);
|
|
}
|
|
#opsdash.opsdash-theme-light .ghost-btn--edit .ghost-btn__icon{
|
|
color:#0f172a;
|
|
opacity:1;
|
|
}
|
|
#opsdash.opsdash-theme-dark .ghost-btn--edit{
|
|
color:#f8fafc;
|
|
background:#1d4ed8;
|
|
border-color:#1e40af;
|
|
box-shadow:0 0 0 1px rgba(96,165,250,0.35);
|
|
}
|
|
#opsdash.opsdash-theme-dark .ghost-btn--edit .ghost-btn__icon{
|
|
color:#f8fafc;
|
|
opacity:1;
|
|
}
|
|
#opsdash.opsdash-theme-dark .ghost-btn{
|
|
color:var(--opsdash-text);
|
|
background:#0f172a;
|
|
border-color:var(--opsdash-border);
|
|
}
|
|
#opsdash.opsdash-theme-dark .ghost-btn:hover{
|
|
background:#13203a;
|
|
border-color:color-mix(in oklab, var(--opsdash-accent), transparent 50%);
|
|
}
|
|
#opsdash.opsdash-theme-dark{
|
|
--opsdash-surface: #0b1220;
|
|
--opsdash-card: #0f172a;
|
|
--opsdash-border: #1e2a44;
|
|
--opsdash-accent: #3b82f6;
|
|
--opsdash-accent-soft: #1d4ed8;
|
|
--opsdash-text: #e2e8f0;
|
|
--opsdash-muted: #94a3b8;
|
|
}
|
|
#opsdash.opsdash-theme-dark .cards-toolbar__tabs{
|
|
border-bottom:1px solid var(--opsdash-border);
|
|
}
|
|
#opsdash.opsdash-theme-dark .cards-toolbar{
|
|
background:linear-gradient(180deg, rgba(15,23,42,0.96) 0%, rgba(10,18,33,0.96) 100%);
|
|
}
|
|
#opsdash.opsdash-theme-dark .tab-btn{
|
|
background:#0d1526;
|
|
border-color:var(--opsdash-border);
|
|
color:var(--opsdash-muted);
|
|
box-shadow:none;
|
|
}
|
|
#opsdash.opsdash-theme-dark .tab-menu-btn{
|
|
background:#0d1526;
|
|
border-color:var(--opsdash-border);
|
|
color:var(--opsdash-muted);
|
|
}
|
|
#opsdash.opsdash-theme-dark .tab-btn.active{
|
|
background:#13203a;
|
|
border-color:color-mix(in oklab, var(--opsdash-accent), transparent 20%);
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-dark .tab-menu-btn.active{
|
|
background:#13203a;
|
|
border-color:color-mix(in oklab, var(--opsdash-accent), transparent 20%);
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-dark .tab-btn.active::after{
|
|
background:#60a5fa;
|
|
}
|
|
#opsdash.opsdash-theme-dark .tab-btn--add{
|
|
background:#0f1a30;
|
|
border-color:var(--opsdash-border);
|
|
color:var(--opsdash-muted);
|
|
}
|
|
#opsdash.opsdash-theme-dark .cards-toolbar select{
|
|
background:#0f1a30;
|
|
color:var(--opsdash-text);
|
|
border-color:var(--opsdash-border);
|
|
}
|
|
#opsdash.opsdash-theme-dark .cards-toolbar__actions{
|
|
background:#0f1a30;
|
|
border-color:var(--opsdash-border);
|
|
}
|
|
#opsdash.opsdash-theme-dark .cards-toolbar select:focus{
|
|
outline:2px solid color-mix(in oklab, var(--opsdash-accent), transparent 40%);
|
|
outline-offset:1px;
|
|
}
|
|
#opsdash.opsdash-theme-dark .tab-context-menu{
|
|
background:#0f1a30;
|
|
border-color:var(--opsdash-border);
|
|
}
|
|
#opsdash.opsdash-theme-dark .tab-context-menu button:hover{
|
|
background:#162447;
|
|
}
|
|
#opsdash.opsdash-theme-light{
|
|
--opsdash-surface: #ffffff;
|
|
--opsdash-card: #ffffff;
|
|
--opsdash-border: #e5e7eb;
|
|
--opsdash-accent: #2563eb;
|
|
--opsdash-accent-soft: #f1f5f9;
|
|
--opsdash-text: #0f172a;
|
|
--opsdash-muted: #64748b;
|
|
}
|
|
#opsdash.opsdash-theme-light .cards-toolbar__tabs{
|
|
border-bottom:1px solid var(--opsdash-border);
|
|
}
|
|
#opsdash.opsdash-theme-light .cards-toolbar{
|
|
background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
|
|
}
|
|
#opsdash.opsdash-theme-light .tab-btn{
|
|
background:#ffffff;
|
|
border-color:var(--opsdash-border);
|
|
color:var(--opsdash-muted);
|
|
box-shadow:none;
|
|
}
|
|
#opsdash.opsdash-theme-light .tab-menu-btn{
|
|
background:#ffffff;
|
|
border-color:var(--opsdash-border);
|
|
color:var(--opsdash-muted);
|
|
}
|
|
#opsdash.opsdash-theme-light .tab-btn.active{
|
|
background:var(--opsdash-card);
|
|
border-color:var(--opsdash-border);
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-light .tab-menu-btn.active{
|
|
background:var(--opsdash-card);
|
|
border-color:var(--opsdash-border);
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-light .tab-btn.active::after{
|
|
background:var(--opsdash-accent);
|
|
}
|
|
#opsdash.opsdash-theme-light .tab-btn--add{
|
|
background:#ffffff;
|
|
border-color:var(--opsdash-border);
|
|
color:var(--opsdash-muted);
|
|
}
|
|
#opsdash.opsdash-theme-light .cards-toolbar select{
|
|
background:#ffffff;
|
|
color:var(--opsdash-text);
|
|
border-color:var(--opsdash-border);
|
|
}
|
|
#opsdash.opsdash-theme-light .cards-toolbar__actions{
|
|
background:#ffffff;
|
|
border-color:#dbe4f0;
|
|
}
|
|
#opsdash.opsdash-theme-light .ghost-btn--edit{
|
|
color:#ffffff;
|
|
background:var(--opsdash-accent);
|
|
border-color:#1d4ed8;
|
|
}
|
|
#opsdash.opsdash-theme-light .ghost-btn--edit .ghost-btn__icon{
|
|
color:#ffffff;
|
|
opacity:1;
|
|
}
|
|
#opsdash.opsdash-theme-light .tab-context-menu{
|
|
background:#ffffff;
|
|
border-color:var(--opsdash-border);
|
|
}
|
|
#opsdash.opsdash-theme-light .tab-context-menu button:hover{
|
|
background:#f1f5f9;
|
|
}
|
|
#opsdash.opsdash-theme-light .range-badge{
|
|
background:var(--opsdash-card);
|
|
border-color:var(--opsdash-border);
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-light .refresh-indicator{
|
|
background:color-mix(in oklab, var(--opsdash-card), #f8fafc 40%);
|
|
border-color:var(--opsdash-border);
|
|
color:var(--opsdash-muted);
|
|
}
|
|
#opsdash.opsdash-theme-light .range-badge__mode{
|
|
color:var(--opsdash-accent);
|
|
}
|
|
#opsdash.opsdash-theme-light .range-badge__span{
|
|
color:var(--opsdash-muted);
|
|
}
|
|
#opsdash.opsdash-theme-dark .refresh-indicator{
|
|
background:#0f1a30;
|
|
border-color:var(--opsdash-border);
|
|
color:var(--opsdash-muted);
|
|
}
|
|
#opsdash.opsdash-theme-dark .refresh-indicator::before{
|
|
background:#60a5fa;
|
|
}
|
|
#opsdash.opsdash-theme-light .layout-item{
|
|
background:var(--opsdash-card);
|
|
border:1px solid var(--opsdash-border);
|
|
box-shadow:0 2px 6px rgba(15,23,42,0.06);
|
|
}
|
|
#opsdash.opsdash-theme-light .card{
|
|
background:var(--opsdash-card);
|
|
border:1px solid color-mix(in oklab, var(--opsdash-border), #ffffff 75%);
|
|
box-shadow:
|
|
0 16px 30px rgba(15,23,42,0.14),
|
|
0 4px 12px rgba(15,23,42,0.1),
|
|
inset 0 1px 0 rgba(255,255,255,0.95),
|
|
inset 0 -1px 0 rgba(15,23,42,0.08);
|
|
}
|
|
#opsdash.opsdash-theme-light .balance-card{
|
|
border:1px solid color-mix(in oklab, var(--opsdash-border), #ffffff 75%);
|
|
box-shadow:
|
|
0 16px 30px rgba(15,23,42,0.14),
|
|
0 4px 12px rgba(15,23,42,0.1),
|
|
inset 0 1px 0 rgba(255,255,255,0.95),
|
|
inset 0 -1px 0 rgba(15,23,42,0.08);
|
|
}
|
|
#opsdash.opsdash-theme-dark .card{
|
|
border:1px solid color-mix(in oklab, var(--line), #ffffff 20%);
|
|
box-shadow:
|
|
0 18px 34px rgba(0,0,0,0.45),
|
|
0 6px 18px rgba(0,0,0,0.35),
|
|
inset 0 1px 0 rgba(255,255,255,0.08),
|
|
inset 0 -1px 0 rgba(0,0,0,0.4);
|
|
}
|
|
#opsdash.opsdash-theme-dark .balance-card{
|
|
border:1px solid color-mix(in oklab, var(--line), #ffffff 20%);
|
|
box-shadow:
|
|
0 18px 34px rgba(0,0,0,0.45),
|
|
0 6px 18px rgba(0,0,0,0.35),
|
|
inset 0 1px 0 rgba(255,255,255,0.08),
|
|
inset 0 -1px 0 rgba(0,0,0,0.4);
|
|
}
|
|
#opsdash.opsdash-theme-light .app-content__navigation{
|
|
background:var(--opsdash-surface);
|
|
border-color:var(--opsdash-border);
|
|
box-shadow:none !important;
|
|
outline:none;
|
|
}
|
|
#opsdash.opsdash-theme-light .widget-toolbar{
|
|
border:1px solid color-mix(in oklab, #2563eb, transparent 65%);
|
|
background:#ffffff;
|
|
box-shadow:0 10px 20px rgba(15,23,42,0.08);
|
|
}
|
|
#opsdash.opsdash-theme-light .widget-toolbar:hover{
|
|
background:#f8fafc;
|
|
box-shadow:0 12px 24px rgba(15,23,42,0.12);
|
|
}
|
|
#opsdash.opsdash-theme-light .toolbar-title{
|
|
color:#0f172a;
|
|
}
|
|
#opsdash.opsdash-theme-light .toolbar-field{
|
|
color:#0f172a;
|
|
}
|
|
#opsdash.opsdash-theme-light .toolbar-field span{
|
|
opacity:0.7;
|
|
}
|
|
#opsdash.opsdash-theme-light .toolbar-field input[type="text"],
|
|
#opsdash.opsdash-theme-light .toolbar-field select{
|
|
background:#ffffff;
|
|
color:#0f172a;
|
|
border-color:#d1d5db;
|
|
}
|
|
#opsdash.opsdash-theme-light .toolbar-field input[type="color"]{
|
|
border-color:#d1d5db;
|
|
}
|
|
#opsdash.opsdash-theme-light .widget-toolbar .ghost{
|
|
background:#ffffff;
|
|
border-color:#d1d5db;
|
|
color:#0f172a;
|
|
}
|
|
#opsdash.opsdash-theme-light .widget-toolbar .ghost:hover{
|
|
background:#eff6ff;
|
|
border-color:#60a5fa;
|
|
}
|
|
@media (max-width: 980px){
|
|
#opsdash .cards-toolbar--editing{
|
|
padding:12px 12px;
|
|
}
|
|
#opsdash .cards-toolbar--editing .cards-toolbar__center{
|
|
grid-template-columns:1fr;
|
|
align-items:stretch;
|
|
}
|
|
#opsdash .cards-toolbar--editing .cards-toolbar__mode{
|
|
align-items:flex-start;
|
|
}
|
|
#opsdash .cards-toolbar--editing .cards-toolbar__tools{
|
|
width:100%;
|
|
padding-top:8px;
|
|
border-top:1px solid color-mix(in oklab, var(--line), transparent 10%);
|
|
justify-content:flex-start;
|
|
flex-wrap:wrap;
|
|
}
|
|
#opsdash .cards-toolbar--editing .cards-toolbar__tools .range-badge{
|
|
margin-left:0;
|
|
}
|
|
}
|
|
@media (max-width: 760px){
|
|
#opsdash .cards-toolbar--editing .cards-toolbar__tools{
|
|
justify-content:flex-start;
|
|
align-items:flex-start;
|
|
}
|
|
#opsdash .cards-toolbar--editing .cards-toolbar__actions{
|
|
width:100%;
|
|
flex-wrap:wrap;
|
|
}
|
|
#opsdash .cards-toolbar--editing .cards-toolbar__actions select{
|
|
flex:1 1 180px;
|
|
min-width:0;
|
|
}
|
|
}
|
|
#opsdash.opsdash-theme-light .app-content,
|
|
#opsdash.opsdash-theme-light .app-content__main,
|
|
#opsdash.opsdash-theme-light .app-main,
|
|
#opsdash.opsdash-theme-light .app-container{
|
|
background:#ffffff !important;
|
|
}
|
|
#opsdash.opsdash-theme-light .app-shell{
|
|
background:#ffffff !important;
|
|
}
|
|
#app-content #opsdash.opsdash-theme-light{
|
|
background:#ffffff !important;
|
|
}
|
|
#opsdash.opsdash-theme-light .chart-widget__empty,
|
|
#opsdash.opsdash-theme-light .table-widget__empty,
|
|
#opsdash.opsdash-theme-light .deck-panel__subtitle,
|
|
#opsdash.opsdash-theme-light .deck-panel__count,
|
|
#opsdash.opsdash-theme-light .deck-panel__loading,
|
|
#opsdash.opsdash-theme-light .deck-panel__error,
|
|
#opsdash.opsdash-theme-light .deck-summary-card__subtitle,
|
|
#opsdash.opsdash-theme-light .deck-summary-card__meta,
|
|
#opsdash.opsdash-theme-light .deck-summary-card__loading,
|
|
#opsdash.opsdash-theme-light .deck-summary-card__error,
|
|
#opsdash.opsdash-theme-light .deck-summary-card__empty,
|
|
#opsdash.opsdash-theme-light .time-summary-row .label,
|
|
#opsdash.opsdash-theme-light .time-summary-row .hint,
|
|
#opsdash.opsdash-theme-light .time-summary-activity__line,
|
|
#opsdash.opsdash-theme-light .time-summary-activity__delta,
|
|
#opsdash.opsdash-theme-light .time-summary-delta,
|
|
#opsdash.opsdash-theme-light .activity-card__meta,
|
|
#opsdash.opsdash-theme-light .activity-card__hint,
|
|
#opsdash.opsdash-theme-light .dayoff-meta,
|
|
#opsdash.opsdash-theme-light .dayoff-tile__label,
|
|
#opsdash.opsdash-theme-light .dayoff-tile__meta,
|
|
#opsdash.opsdash-theme-light .mix-subtitle,
|
|
#opsdash.opsdash-theme-light .mix-column-label,
|
|
#opsdash.opsdash-theme-light .mix-label,
|
|
#opsdash.opsdash-theme-light .mix-badge,
|
|
#opsdash.opsdash-theme-light .hint,
|
|
#opsdash.opsdash-theme-light .empty{
|
|
color:var(--opsdash-muted);
|
|
}
|
|
#opsdash.opsdash-theme-light .notes-textarea{
|
|
background:#ffffff;
|
|
border-color:var(--opsdash-border);
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-light .note-card{
|
|
background:#ffffff;
|
|
border-color:var(--opsdash-border);
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-light .note{
|
|
background:#ffffff;
|
|
border-color:var(--opsdash-border);
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-light .note:read-only{
|
|
background:#f8fafc;
|
|
color:var(--opsdash-muted);
|
|
}
|
|
#opsdash.opsdash-theme-light .note-select,
|
|
#opsdash.opsdash-theme-light .note-card .btn{
|
|
background:#ffffff;
|
|
border-color:var(--opsdash-border);
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-light .note-card .btn--ghost{
|
|
background:transparent;
|
|
}
|
|
#opsdash.opsdash-theme-light .deck-summary-card__row{
|
|
background:#ffffff;
|
|
border-color:var(--opsdash-border);
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-light .deck-summary-card .bucket-count,
|
|
#opsdash.opsdash-theme-light .deck-summary-card .bucket-title{
|
|
background:#f8fafc;
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-light .notes-textarea:focus{
|
|
border-color:var(--opsdash-accent);
|
|
box-shadow:0 0 0 1px var(--opsdash-accent);
|
|
}
|
|
#opsdash.opsdash-theme-light .deck-panel__filters button{
|
|
background:#ffffff;
|
|
border-color:var(--opsdash-border);
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-light .deck-panel__filters button[aria-pressed="true"]{
|
|
background:var(--opsdash-accent-soft);
|
|
border-color:var(--opsdash-accent);
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-dark .chart-widget__empty,
|
|
#opsdash.opsdash-theme-dark .table-widget__empty,
|
|
#opsdash.opsdash-theme-dark .deck-panel__subtitle,
|
|
#opsdash.opsdash-theme-dark .deck-panel__count,
|
|
#opsdash.opsdash-theme-dark .deck-panel__loading,
|
|
#opsdash.opsdash-theme-dark .deck-panel__error,
|
|
#opsdash.opsdash-theme-dark .deck-summary-card__subtitle,
|
|
#opsdash.opsdash-theme-dark .deck-summary-card__meta,
|
|
#opsdash.opsdash-theme-dark .deck-summary-card__loading,
|
|
#opsdash.opsdash-theme-dark .deck-summary-card__error,
|
|
#opsdash.opsdash-theme-dark .deck-summary-card__empty,
|
|
#opsdash.opsdash-theme-dark .time-summary-row .label,
|
|
#opsdash.opsdash-theme-dark .time-summary-row .hint,
|
|
#opsdash.opsdash-theme-dark .time-summary-activity__line,
|
|
#opsdash.opsdash-theme-dark .time-summary-activity__delta,
|
|
#opsdash.opsdash-theme-dark .time-summary-delta,
|
|
#opsdash.opsdash-theme-dark .activity-card__meta,
|
|
#opsdash.opsdash-theme-dark .activity-card__hint,
|
|
#opsdash.opsdash-theme-dark .dayoff-meta,
|
|
#opsdash.opsdash-theme-dark .dayoff-tile__label,
|
|
#opsdash.opsdash-theme-dark .dayoff-tile__meta,
|
|
#opsdash.opsdash-theme-dark .mix-subtitle,
|
|
#opsdash.opsdash-theme-dark .mix-column-label,
|
|
#opsdash.opsdash-theme-dark .mix-label,
|
|
#opsdash.opsdash-theme-dark .mix-badge,
|
|
#opsdash.opsdash-theme-dark .hint,
|
|
#opsdash.opsdash-theme-dark .empty{
|
|
color:var(--opsdash-muted);
|
|
}
|
|
#opsdash.opsdash-theme-dark .targets-card .status-on{
|
|
background:color-mix(in oklab, var(--opsdash-accent), #0b1220 70%);
|
|
color:#dbeafe;
|
|
}
|
|
#opsdash.opsdash-theme-dark .targets-card .status-risk{
|
|
background:color-mix(in oklab, #f97316, #0b1220 70%);
|
|
color:#fdba74;
|
|
}
|
|
#opsdash.opsdash-theme-dark .targets-card .status-behind{
|
|
background:color-mix(in oklab, #ef4444, #0b1220 70%);
|
|
color:#fecaca;
|
|
}
|
|
#opsdash.opsdash-theme-dark .targets-card .status-done{
|
|
background:color-mix(in oklab, #22c55e, #0b1220 70%);
|
|
color:#bbf7d0;
|
|
}
|
|
#opsdash.opsdash-theme-dark .targets-card .status-none{
|
|
background:color-mix(in oklab, var(--opsdash-muted), #0b1220 70%);
|
|
color:var(--opsdash-muted);
|
|
}
|
|
#opsdash.opsdash-theme-dark .notes-textarea{
|
|
background:#0f2440;
|
|
border-color:#1f3a5d;
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-dark .note-card{
|
|
background:#0f172a;
|
|
border-color:#1f2937;
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-dark .notes-textarea:focus{
|
|
border-color:#60a5fa;
|
|
box-shadow:0 0 0 1px #60a5fa;
|
|
}
|
|
#opsdash.opsdash-theme-dark .notes-textarea:read-only{
|
|
background:#112949;
|
|
color:var(--opsdash-muted);
|
|
}
|
|
#opsdash.opsdash-theme-dark .note{
|
|
background:#0f2440;
|
|
border-color:#1f3a5d;
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-dark .note:read-only{
|
|
background:#112949;
|
|
color:var(--opsdash-muted);
|
|
}
|
|
#opsdash.opsdash-theme-dark .note-select{
|
|
background:#0f2440;
|
|
border-color:#1f3a5d;
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-dark .note-card .btn{
|
|
background:#0f1a30;
|
|
border-color:#1f3a5d;
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-dark .note-card .btn--ghost{
|
|
background:transparent;
|
|
}
|
|
#opsdash.opsdash-theme-dark .deck-summary-card__row{
|
|
background:#0f1a30;
|
|
border-color:#1e2a44;
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-dark .deck-summary-card .bucket-count,
|
|
#opsdash.opsdash-theme-dark .deck-summary-card .bucket-title{
|
|
background:#11213b;
|
|
}
|
|
#opsdash.opsdash-theme-dark .deck-panel__filters button{
|
|
background:#0f1a30;
|
|
border-color:var(--opsdash-border);
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-dark .deck-panel__filters button[aria-pressed="true"]{
|
|
background:#1d4ed8;
|
|
color:#f8fafc;
|
|
}
|
|
#opsdash.opsdash-theme-dark .deck-filter-btn{
|
|
background:#0f1a30;
|
|
border-color:#1e2a44;
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-dark .deck-filter-btn.active{
|
|
background:#1d4ed8;
|
|
border-color:#2563eb;
|
|
color:#f8fafc;
|
|
}
|
|
#opsdash.opsdash-theme-dark .deck-filter-count{
|
|
color:var(--opsdash-muted);
|
|
}
|
|
#opsdash.opsdash-theme-dark .deck-card{
|
|
background:#0f1a30;
|
|
border-color:#1e2a44;
|
|
box-shadow:0 10px 20px rgba(15,23,42,0.25);
|
|
}
|
|
#opsdash.opsdash-theme-dark .deck-card__status-row,
|
|
#opsdash.opsdash-theme-dark .deck-card__stack,
|
|
#opsdash.opsdash-theme-dark .deck-card__assignees-label{
|
|
color:var(--opsdash-muted);
|
|
}
|
|
#opsdash.opsdash-theme-dark .deck-card__title{
|
|
color:var(--opsdash-text);
|
|
}
|
|
#opsdash.opsdash-theme-dark .deck-card__meta{
|
|
color:#cbd5f5;
|
|
}
|
|
#opsdash .tab-context-menu{
|
|
position:fixed;
|
|
background:var(--card);
|
|
border:1px solid var(--line);
|
|
border-radius:10px;
|
|
box-shadow:0 10px 18px rgba(15,23,42,0.18);
|
|
padding:6px;
|
|
z-index:2147480002;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:4px;
|
|
}
|
|
#opsdash .tab-context-menu button{
|
|
border:none;
|
|
background:transparent;
|
|
padding:6px 10px;
|
|
text-align:left;
|
|
font-size:13px;
|
|
cursor:pointer;
|
|
border-radius:8px;
|
|
}
|
|
#opsdash .tab-context-menu button:hover{
|
|
background:color-mix(in oklab, var(--brand), var(--card) 85%);
|
|
}
|
|
#opsdash .tab-context-menu button:disabled{
|
|
opacity:0.4;
|
|
cursor:not-allowed;
|
|
}
|
|
|
|
#opsdash .app-content .app-content__navigation,
|
|
#opsdash .app-content__navigation{
|
|
overflow-x:hidden !important;
|
|
overflow-y:auto !important;
|
|
padding:0 !important;
|
|
direction:rtl;
|
|
}
|
|
|
|
#opsdash .app-content .app-content__navigation #opsdash-sidebar.app-navigation{
|
|
overflow-y:visible !important;
|
|
overflow-x:visible;
|
|
padding:14px;
|
|
direction:ltr;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
App bar — unified browse + edit surface (V3 hard split)
|
|
══════════════════════════════════════════════════════════ */
|
|
|
|
#opsdash .app-bar{
|
|
background:var(--card);
|
|
border:1px solid color-mix(in oklab, var(--brand), var(--line) 70%);
|
|
border-radius:16px;
|
|
box-shadow:0 4px 16px rgba(15,23,42,.10), 0 1px 3px rgba(15,23,42,.07);
|
|
overflow:visible;
|
|
position:relative;
|
|
}
|
|
#opsdash .app-bar--editing{
|
|
background:linear-gradient(180deg, color-mix(in oklab, var(--brand), transparent 96%), var(--card));
|
|
border-color:color-mix(in oklab, var(--brand), var(--line) 48%);
|
|
}
|
|
|
|
/* Floating widget config row only */
|
|
/* ── Bar rows ── */
|
|
#opsdash .bar-row{
|
|
display:flex !important;
|
|
flex-direction:row !important;
|
|
align-items:center;
|
|
gap:8px;
|
|
padding:9px 14px;
|
|
}
|
|
#opsdash .bar-row.sep{
|
|
border-top:1px solid var(--line);
|
|
background:color-mix(in oklab, var(--brand), transparent 97%);
|
|
}
|
|
#opsdash .itb-row{
|
|
padding:8px 14px;
|
|
overflow:visible;
|
|
position:relative;
|
|
background:color-mix(in oklab, var(--card), transparent 2%);
|
|
}
|
|
#opsdash .itb-row.itb-row--floating{
|
|
position:fixed;
|
|
top:calc(var(--header-height, 50px) + 12px);
|
|
left:calc(16px + var(--opsdash-nav-offset, 0px) + var(--opsdash-gap));
|
|
right:16px;
|
|
z-index:120;
|
|
border:1px solid color-mix(in oklab, var(--brand), var(--line) 62%);
|
|
border-radius:0 0 16px 16px;
|
|
box-shadow:0 12px 34px rgba(15,23,42,.18), 0 3px 10px rgba(15,23,42,.10);
|
|
backdrop-filter:blur(14px);
|
|
}
|
|
#opsdash.opsdash-theme-dark .itb-row.itb-row--floating{
|
|
box-shadow:0 12px 34px rgba(2,6,23,.62), 0 3px 10px rgba(2,6,23,.30);
|
|
}
|
|
#opsdash .bar-flex1{ flex:1 !important; min-width:0; }
|
|
|
|
@media (max-width: 1100px){
|
|
#opsdash .itb-row.itb-row--floating{
|
|
top:calc(var(--header-height, 50px) + 10px);
|
|
left:12px;
|
|
right:12px;
|
|
}
|
|
}
|
|
|
|
/* ── Show / hide sidebar buttons ── */
|
|
#opsdash .show-btn{
|
|
width:34px;height:34px;border-radius:10px;
|
|
border:1px solid color-mix(in oklab,var(--brand),transparent 80%);
|
|
background:color-mix(in oklab,var(--brand),transparent 93%);
|
|
color:var(--brand);
|
|
display:flex;align-items:center;justify-content:center;
|
|
cursor:pointer;appearance:none;flex-shrink:0;
|
|
}
|
|
#opsdash .show-btn:hover{ background:color-mix(in oklab,var(--brand),transparent 85%); }
|
|
|
|
/* ── Segmented pill toggle ── */
|
|
#opsdash .app-seg{
|
|
display:grid;gap:3px;padding:3px;
|
|
border-radius:999px;
|
|
background:rgba(0,0,0,.07);
|
|
flex-shrink:0;
|
|
}
|
|
#opsdash .app-seg.w2{ grid-template-columns:1fr 1fr; }
|
|
#opsdash .app-seg button{
|
|
appearance:none;height:29px;padding:0 13px;
|
|
display:flex;align-items:center;justify-content:center;
|
|
border-radius:999px;border:0;
|
|
font-size:12px;font-weight:800;color:var(--muted);
|
|
background:none;cursor:pointer;white-space:nowrap;
|
|
}
|
|
#opsdash .app-seg button.on{
|
|
color:#fff;background:var(--brand);
|
|
box-shadow:0 3px 8px color-mix(in oklab,var(--brand),transparent 70%);
|
|
}
|
|
#opsdash .app-seg button:disabled{ opacity:.45;cursor:default; }
|
|
|
|
/* ── Date nav container ── */
|
|
#opsdash .app-navc{
|
|
display:flex;align-items:center;
|
|
border-radius:999px;
|
|
border:1px solid var(--line);
|
|
background:var(--card);
|
|
overflow:hidden;flex:1;min-width:0;
|
|
box-shadow:0 1px 3px rgba(15,23,42,.07);
|
|
}
|
|
#opsdash .navc-btn{
|
|
width:36px;height:34px;color:var(--muted);flex-shrink:0;
|
|
display:flex;align-items:center;justify-content:center;
|
|
background:none;border:0;cursor:pointer;appearance:none;
|
|
}
|
|
#opsdash .navc-btn:disabled{ opacity:.4;cursor:default; }
|
|
#opsdash .navc-btn:hover:not(:disabled){ background:rgba(0,0,0,.04); }
|
|
#opsdash .navc-date{
|
|
flex:1;height:34px;display:flex;align-items:center;justify-content:center;
|
|
border-left:1px solid var(--line);border-right:1px solid var(--line);
|
|
padding:0 18px;overflow:hidden;text-overflow:ellipsis;
|
|
}
|
|
#opsdash .navc-title{
|
|
font-size:13px;font-weight:900;letter-spacing:-.03em;color:var(--brand);
|
|
line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
|
|
text-align:center;
|
|
}
|
|
#opsdash .navc-sub{
|
|
width:100%;
|
|
display:grid;
|
|
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
|
|
align-items:center;
|
|
gap:18px;
|
|
line-height:1;
|
|
min-width:0;
|
|
}
|
|
#opsdash .navc-date-start,
|
|
#opsdash .navc-date-end{
|
|
font-size:13px;
|
|
font-weight:800;
|
|
letter-spacing:-.02em;
|
|
color:color-mix(in oklab, var(--fg), var(--muted) 18%);
|
|
white-space:nowrap;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
}
|
|
#opsdash .navc-date-start{
|
|
text-align:left;
|
|
}
|
|
#opsdash .navc-date-end{
|
|
text-align:right;
|
|
}
|
|
|
|
/* ── Refresh button (in combined browse row) ── */
|
|
#opsdash .bar-btn-ref{
|
|
height:34px;border-radius:999px;padding:0 16px;
|
|
background:var(--brand);color:#fff;
|
|
font-size:12px;font-weight:800;border:0;cursor:pointer;
|
|
box-shadow:0 4px 12px color-mix(in oklab,var(--brand),transparent 74%);
|
|
flex-shrink:0;appearance:none;
|
|
}
|
|
#opsdash .bar-btn-ref:disabled{ opacity:.5;cursor:default; }
|
|
|
|
/* ── Tab strip (new) ── */
|
|
#opsdash .tab-strip{
|
|
display:flex !important;
|
|
flex-direction:row !important;
|
|
align-items:stretch;gap:3px;
|
|
flex:0 0 auto;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
|
|
}
|
|
#opsdash .tab-strip::-webkit-scrollbar{ display:none; }
|
|
#opsdash .tab-item{ display:inline-flex !important;align-items:stretch;flex:0 0 auto; }
|
|
|
|
#opsdash .tab{
|
|
height:30px;padding:0 12px;
|
|
border-radius:8px 8px 0 0;
|
|
border:1px solid var(--line);border-bottom:0;
|
|
font-size:12px;font-weight:800;color:var(--muted);
|
|
background:rgba(0,0,0,.02);
|
|
white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
|
|
flex-shrink:0;cursor:pointer;appearance:none;
|
|
}
|
|
#opsdash .tab.on{
|
|
color:var(--fg);background:var(--card);
|
|
border-color:color-mix(in oklab,var(--brand),transparent 78%);
|
|
box-shadow:inset 0 -2px 0 var(--brand);
|
|
}
|
|
#opsdash .tab--add{
|
|
border-radius:7px;border-bottom:1px solid var(--line);
|
|
padding:0 9px;font-size:16px;font-weight:400;
|
|
color:var(--brand);background:color-mix(in oklab,var(--brand),transparent 93%);
|
|
border-color:color-mix(in oklab,var(--brand),transparent 78%);line-height:1;
|
|
}
|
|
#opsdash .tab-default-badge{
|
|
opacity:.45;font-size:10px;font-weight:600;
|
|
}
|
|
#opsdash .tab-input{
|
|
border:0;background:none;font:inherit;color:inherit;
|
|
outline:none;width:80px;
|
|
}
|
|
#opsdash .tab-menu-btn{
|
|
appearance:none;border:0;background:none;font:inherit;
|
|
color:var(--muted);cursor:pointer;
|
|
padding:0 5px;display:inline-flex;align-items:center;font-size:14px;
|
|
}
|
|
|
|
/* ── Refresh badge ── */
|
|
#opsdash .refresh-badge{
|
|
font-size:11px;color:var(--muted);flex-shrink:0;
|
|
}
|
|
|
|
/* ── Ghost (Edit layout) button ── */
|
|
#opsdash .btn-ghost{
|
|
height:28px;border-radius:7px;padding:0 11px;
|
|
border:1px solid var(--line);color:var(--muted);
|
|
font-size:11px;font-weight:800;background:rgba(0,0,0,.02);
|
|
flex-shrink:0;cursor:pointer;appearance:none;
|
|
display:inline-flex;align-items:center;
|
|
}
|
|
#opsdash .btn-ghost:hover{ background:rgba(0,0,0,.05); }
|
|
#opsdash .btn-ghost--primary{
|
|
border-color:color-mix(in oklab,var(--brand),transparent 78%);
|
|
color:var(--brand);
|
|
background:color-mix(in oklab,var(--brand),transparent 92%);
|
|
}
|
|
#opsdash .btn-ghost--primary:hover{
|
|
background:color-mix(in oklab,var(--brand),transparent 86%);
|
|
}
|
|
|
|
/* ── Done editing button ── */
|
|
#opsdash .btn-done{
|
|
height:28px;border-radius:7px;padding:0 14px;
|
|
background:var(--brand);color:#fff;
|
|
font-size:12px;font-weight:900;flex-shrink:0;
|
|
border:0;cursor:pointer;appearance:none;
|
|
box-shadow:0 3px 10px color-mix(in oklab,var(--brand),transparent 72%);
|
|
display:inline-flex;align-items:center;
|
|
}
|
|
#opsdash .btn-done:hover{ filter:brightness(1.08); }
|
|
|
|
/* ── Mode band ── */
|
|
#opsdash .mode-hint{
|
|
font-size:11px;color:var(--brand);font-weight:600;
|
|
opacity:.7;white-space:nowrap;align-self:center;padding-left:10px;
|
|
}
|
|
#opsdash .bar-row--edit-actions{
|
|
gap:10px;
|
|
}
|
|
#opsdash .bar-row--edit-actions .mode-hint{
|
|
padding-left:0;
|
|
}
|
|
|
|
/* ── Inline toolbar ── */
|
|
#opsdash .itb{
|
|
display:flex !important;
|
|
flex-direction:row !important;
|
|
align-items:center;
|
|
gap:2px;
|
|
flex-wrap:nowrap !important;
|
|
flex:1;min-width:0;
|
|
overflow-x:auto !important;
|
|
overflow-y:visible;
|
|
scrollbar-width:none;
|
|
}
|
|
#opsdash .itb::-webkit-scrollbar{ display:none; }
|
|
#opsdash .vsep{
|
|
width:1px;height:24px;background:var(--line);flex-shrink:0;margin:0 6px;
|
|
}
|
|
|
|
/* Icon buttons — larger, more breathing room */
|
|
#opsdash .ic{
|
|
width:46px;height:46px;border-radius:10px;
|
|
background:transparent;color:var(--muted);
|
|
display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
|
|
gap:3px;font-size:9px;font-weight:900;flex-shrink:0;
|
|
border:0;cursor:pointer;appearance:none;
|
|
}
|
|
#opsdash .ic svg{ width:20px;height:20px; }
|
|
#opsdash .ic-group{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
gap:6px;
|
|
flex-shrink:0;
|
|
}
|
|
#opsdash .ic-group__trigger{
|
|
border:1px solid color-mix(in oklab,var(--brand),transparent 82%);
|
|
background:color-mix(in oklab,var(--brand),transparent 96%);
|
|
}
|
|
#opsdash .ic-group.open .ic-group__trigger{
|
|
background:color-mix(in oklab,var(--brand),transparent 90%);
|
|
color:var(--brand);
|
|
}
|
|
#opsdash .ic-group__rail{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
gap:4px;
|
|
padding:4px;
|
|
border-radius:12px;
|
|
border:1px solid color-mix(in oklab,var(--brand),transparent 82%);
|
|
background:color-mix(in oklab,var(--brand),transparent 96%);
|
|
box-shadow:0 4px 14px rgba(15,23,42,.08);
|
|
}
|
|
#opsdash .ic-sub{
|
|
width:40px;
|
|
height:40px;
|
|
border-radius:9px;
|
|
}
|
|
#opsdash .ic-sub svg{ width:18px;height:18px; }
|
|
|
|
/* Color group in toolbar */
|
|
#opsdash .ic-color-dot{
|
|
width:14px;height:14px;border-radius:50%;
|
|
border:1.5px solid rgba(0,0,0,.2);flex-shrink:0;
|
|
}
|
|
#opsdash .ic-group__rail--color{
|
|
gap:6px;padding:6px 8px;
|
|
}
|
|
#opsdash .ic-color-swatch{
|
|
width:24px;height:24px;min-width:24px;
|
|
border-radius:50%;
|
|
border:1.5px solid rgba(0,0,0,.18);
|
|
box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
|
|
padding:0;cursor:pointer;flex-shrink:0;
|
|
transition:transform .1s,box-shadow .1s;
|
|
}
|
|
#opsdash .ic-color-swatch:hover{ transform:scale(1.15); }
|
|
#opsdash .ic-color-swatch.on{
|
|
box-shadow:0 0 0 2.5px var(--brand),inset 0 0 0 1px rgba(255,255,255,.4);
|
|
}
|
|
#opsdash .ic-color-reset{
|
|
background:var(--card);
|
|
position:relative;overflow:hidden;
|
|
}
|
|
#opsdash .ic-color-reset::before,
|
|
#opsdash .ic-color-reset::after{
|
|
content:'';position:absolute;
|
|
width:140%;height:1.5px;background:#e11d48;
|
|
top:50%;left:-20%;transform-origin:center;
|
|
}
|
|
#opsdash .ic-color-reset::before{ transform:rotate(45deg); }
|
|
#opsdash .ic-color-reset::after{ transform:rotate(-45deg); }
|
|
#opsdash .ic-color-dot--none{
|
|
background: linear-gradient(135deg, var(--card) 45%, #e11d48 45%, #e11d48 55%, var(--card) 55%);
|
|
}
|
|
#opsdash .ic-color-custom{
|
|
width:24px;height:24px;min-width:24px;
|
|
display:inline-flex;align-items:center;justify-content:center;
|
|
border-radius:50%;
|
|
background:conic-gradient(#f44336,#ff9800,#ffeb3b,#4caf50,#2196f3,#9c27b0,#f44336);
|
|
border:1.5px solid rgba(0,0,0,.15);
|
|
cursor:pointer;position:relative;overflow:hidden;
|
|
transition:transform .1s;
|
|
}
|
|
#opsdash .ic-color-custom:hover{ transform:scale(1.15); }
|
|
#opsdash .ic-color-custom input[type="color"]{
|
|
opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer;border:0;padding:0;
|
|
}
|
|
#opsdash .ic:hover:not(:disabled){ background:rgba(0,0,0,.06); }
|
|
#opsdash .ic.on{
|
|
background:color-mix(in oklab,var(--brand),transparent 90%);
|
|
color:var(--brand);
|
|
}
|
|
#opsdash .ic:disabled{ opacity:.28;cursor:default; }
|
|
#opsdash .ic-danger:hover:not(:disabled){
|
|
background:rgba(220,38,38,.10);color:#dc2626;
|
|
}
|
|
#opsdash .ic-lbl{
|
|
font-size:9px;font-weight:900;letter-spacing:.02em;line-height:1;
|
|
}
|
|
|
|
/* Add widget button */
|
|
#opsdash .ic-add{
|
|
padding:0 14px;width:auto;height:46px;gap:6px;
|
|
border-radius:10px;
|
|
border:1px solid color-mix(in oklab,var(--brand),transparent 78%);
|
|
background:color-mix(in oklab,var(--brand),transparent 91%);
|
|
color:var(--brand);font-size:12px;font-weight:900;flex-shrink:0;
|
|
display:inline-flex;align-items:center;cursor:pointer;appearance:none;
|
|
}
|
|
#opsdash .ic-add svg{ width:13px;height:13px; }
|
|
#opsdash .ic-add:hover{ background:color-mix(in oklab,var(--brand),transparent 84%); }
|
|
|
|
/* Name input */
|
|
/* Selected widget chip */
|
|
#opsdash .sel-chip{
|
|
display:inline-flex;align-items:center;gap:6px;
|
|
height:28px;border-radius:7px;padding:0 10px;
|
|
border:1px solid color-mix(in oklab,var(--brand),transparent 78%);
|
|
background:color-mix(in oklab,var(--brand),transparent 93%);
|
|
color:var(--brand);font-size:11px;font-weight:900;
|
|
flex-shrink:0;
|
|
}
|
|
#opsdash .sel-chip--named{
|
|
height:auto;padding:5px 10px;align-items:center;
|
|
}
|
|
#opsdash .sel-chip__body{
|
|
display:flex;flex-direction:column;gap:1px;min-width:90px;max-width:160px;
|
|
}
|
|
#opsdash .sel-chip__type{
|
|
font-size:9.5px;font-weight:700;letter-spacing:.03em;
|
|
opacity:.55;line-height:1.2;pointer-events:none;
|
|
}
|
|
#opsdash .sel-chip__name{
|
|
border:0;background:none;font:inherit;color:inherit;
|
|
font-size:12px;font-weight:900;width:100%;outline:none;
|
|
line-height:1.3;padding:0;
|
|
}
|
|
#opsdash .sel-chip__name::placeholder{
|
|
color:color-mix(in oklab,var(--brand),transparent 55%);
|
|
font-style:italic;font-weight:700;
|
|
}
|
|
#opsdash .sel-chip--empty{
|
|
opacity:.4;
|
|
border-style:dashed;
|
|
background:transparent;
|
|
}
|
|
#opsdash .sel-dot{
|
|
width:7px;height:7px;border-radius:50%;
|
|
background:var(--brand);opacity:.75;flex-shrink:0;
|
|
}
|
|
#opsdash .sel-dot--empty{
|
|
background:var(--muted);opacity:.5;
|
|
}
|
|
|
|
/* WidgetOptionsMenu in inline toolbar — style the wrapper's ⚙ button */
|
|
#opsdash .ic-config-wrap .options-pop{
|
|
z-index:8000;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
Sidebar — Mission Control style (SIDEBAR_FINAL)
|
|
══════════════════════════════════════════════════════════ */
|
|
|
|
#opsdash .app-content .app-content__navigation #opsdash-sidebar .sb-inner{
|
|
padding:0 4px 4px;
|
|
display:flex;flex-direction:column;gap:8px;min-height:100%;
|
|
position:relative;
|
|
}
|
|
|
|
/* Ensure sidebar scrolls properly */
|
|
#opsdash .app-content .app-content__navigation #opsdash-sidebar{
|
|
display:flex;flex-direction:column;height:100%;
|
|
}
|
|
|
|
#opsdash .app-content .app-content__navigation #opsdash-sidebar.app-navigation,
|
|
#opsdash .app-content .app-content__navigation #opsdash-sidebar{
|
|
padding:0 4px 4px !important;
|
|
border-radius:24px;
|
|
border:none !important;
|
|
box-shadow:none !important;
|
|
background:transparent !important;
|
|
}
|