67 lines
7.7 KiB
CSS
67 lines
7.7 KiB
CSS
/* Native Deck dashboard: one DOM, one typography and surface system. */
|
|
#deck-dashboard-host{--db-line:var(--deck-tone-303a37, #303a37);--db-muted:var(--deck-tone-97a79e, #97a79e);--db-accent:var(--deck-tone-c5edaf, #c5edaf);--db-danger:var(--deck-tone-e9aaa0, #e9aaa0);min-width:0;color:var(--deck-tone-e9edea, #e9edea)}
|
|
#deck-dashboard-host *{box-sizing:border-box}
|
|
#deck-dashboard-host .top{display:flex;align-items:end;justify-content:space-between;gap:22px;margin-bottom:28px}
|
|
#deck-dashboard-host .top h1{margin:12px 0 6px}
|
|
#deck-dashboard-host .top p{margin:0}
|
|
#deck-dashboard-host .live{display:flex;align-items:center;gap:9px;color:var(--db-muted);font-size:12px;white-space:nowrap}
|
|
#deck-dashboard-host .dot{width:8px;height:8px;border-radius:50%;background:var(--deck-tone-bdeba4, #bdeba4);box-shadow:0 0 0 4px #bdeba41c}
|
|
#deck-dashboard-host .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;margin:0}
|
|
#deck-dashboard-host .card{background:var(--deck-tone-181f21, #181f21);border:1px solid var(--db-line);border-radius:13px;padding:24px;min-width:0}
|
|
#deck-dashboard-host .span3{grid-column:span 3}#deck-dashboard-host .span4{grid-column:span 4}#deck-dashboard-host .span6{grid-column:span 6}#deck-dashboard-host .span12{grid-column:span 12}
|
|
#deck-dashboard-host .label{color:var(--deck-tone-95a69b, #95a69b);font-size:11px;letter-spacing:1px;text-transform:uppercase}
|
|
#deck-dashboard-host .value{font-size:27px;font-weight:550;letter-spacing:-.7px;margin:14px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--deck-tone-e4f1de, #e4f1de)}
|
|
#deck-dashboard-host .sub{font-size:12px;line-height:1.55;color:var(--db-muted);margin-top:5px}
|
|
#deck-dashboard-host .section-title{grid-column:1/-1;color:var(--deck-tone-c5edaf, #c5edaf);font-size:11px;letter-spacing:2px;text-transform:uppercase;margin:20px 0 -4px;padding-bottom:12px;border-bottom:1px solid var(--db-line)}
|
|
#deck-dashboard-host .bar-label{display:flex;justify-content:space-between;gap:10px;color:var(--db-muted);font-size:11px;margin-top:15px}
|
|
#deck-dashboard-host .bar{height:7px;background:var(--deck-tone-101718, #101718);border-radius:20px;overflow:hidden;margin-top:7px}
|
|
#deck-dashboard-host .fill{height:100%;width:0;background:var(--deck-tone-bdeba4, #bdeba4);transition:width .45s}
|
|
#deck-dashboard-host .fill.gpu-load{background:var(--deck-tone-7fc8b6, #7fc8b6)}
|
|
#deck-dashboard-host .gpu-title,#deck-dashboard-host .row,#deck-dashboard-host .slot-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
|
|
#deck-dashboard-host .gpu-title .value{font-size:19px;white-space:normal;line-height:1.35}
|
|
#deck-dashboard-host .badge{border:1px solid var(--deck-tone-3a493f, #3a493f);border-radius:20px;padding:5px 9px;color:var(--deck-tone-c5edaf, #c5edaf);font-size:11px;white-space:nowrap}
|
|
#deck-dashboard-host .metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px}
|
|
#deck-dashboard-host .metric{min-width:0}
|
|
#deck-dashboard-host .metric b{display:block;font-size:17px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
#deck-dashboard-host .metric span{display:block;color:var(--db-muted);font-size:11px;line-height:1.45;margin-top:4px}
|
|
#deck-dashboard-host .span4 .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
|
|
#deck-dashboard-host .status{color:var(--deck-tone-bdeba4, #bdeba4)}#deck-dashboard-host .status.bad,#deck-dashboard-host .error{color:var(--db-danger)}
|
|
#deck-dashboard-host table{border-collapse:collapse;width:100%;margin-top:15px;font-size:12px}
|
|
#deck-dashboard-host th,#deck-dashboard-host td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--db-line);vertical-align:top}
|
|
#deck-dashboard-host th{font-weight:500;color:var(--db-muted)}
|
|
#deck-dashboard-host .scroll{max-height:330px;overflow:auto}
|
|
#deck-dashboard-host .scroll th{position:sticky;top:0;background:var(--deck-tone-181f21, #181f21)}
|
|
#deck-dashboard-host .slot-list,#deck-dashboard-host .usage-list{display:grid;gap:12px;margin-top:17px}
|
|
#deck-dashboard-host .slot,#deck-dashboard-host .profile-item{background:var(--deck-tone-151b1c, #151b1c);border:1px solid var(--db-line);border-radius:10px;padding:16px}
|
|
#deck-dashboard-host .slot-head b,#deck-dashboard-host .usage-head b{font-size:14px;font-weight:550}
|
|
#deck-dashboard-host .profiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:15px}
|
|
#deck-dashboard-host .profile-item.active{border-color:var(--deck-tone-9acb88, #9acb88)}
|
|
#deck-dashboard-host .profile-item b{display:block;font-weight:550}
|
|
#deck-dashboard-host .profile-item span{color:var(--db-muted);font-size:11px}
|
|
#deck-dashboard-host .event{padding:10px 0;border-bottom:1px solid var(--db-line)}
|
|
#deck-dashboard-host .event:last-child{border:0}
|
|
#deck-dashboard-host .event time{color:var(--db-muted);font-size:11px;margin-right:8px}
|
|
#deck-dashboard-host .history-controls{display:flex;flex-wrap:wrap;gap:6px;margin:0}
|
|
#deck-dashboard-host .history-controls button,#deck-dashboard-host .chart-legend button{border:1px solid var(--deck-tone-3a493f, #3a493f);background:var(--deck-tone-151b1c, #151b1c);color:var(--deck-tone-c5d2c9, #c5d2c9);border-radius:7px;padding:7px 11px;font:inherit;font-size:11px;cursor:pointer}
|
|
#deck-dashboard-host .history-controls button:hover,#deck-dashboard-host .chart-legend button:hover{background:var(--deck-tone-253229, #253229)}
|
|
#deck-dashboard-host .history-controls button.active{background:var(--deck-tone-28362b, #28362b);color:var(--deck-tone-d3efc5, #d3efc5);border-color:var(--deck-tone-668659, #668659)}
|
|
#deck-dashboard-host .chart-legend{display:flex;flex-wrap:wrap;gap:7px;margin:17px 0 6px}
|
|
#deck-dashboard-host .chart-legend button::before{content:'';display:inline-block;width:10px;height:3px;background:var(--series);margin:0 7px 3px 0}
|
|
#deck-dashboard-host .chart-legend button.off{opacity:.45}
|
|
#deck-dashboard-host .chart{display:block;width:100%;height:250px}
|
|
#deck-dashboard-host .token-total{font-size:25px;font-weight:550;color:var(--deck-tone-e4f1de, #e4f1de);margin-top:12px}
|
|
#deck-dashboard-host .history-note{font-size:11px;color:var(--db-muted);margin-top:9px}
|
|
#deck-dashboard-host .usage-head,#deck-dashboard-host .usage-meta{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
|
|
#deck-dashboard-host .usage-head span,#deck-dashboard-host .usage-meta{color:var(--db-muted)}
|
|
#deck-dashboard-host .usage-meta{font-size:11px;margin-top:7px}
|
|
#deck-dashboard-host .download{display:inline-block;border:1px solid var(--deck-tone-668659, #668659);color:var(--deck-tone-c5edaf, #c5edaf);border-radius:7px;padding:6px 10px;text-decoration:none}
|
|
#deck-dashboard-host .hash{font:11px ui-monospace,SFMono-Regular,monospace;color:var(--db-muted);word-break:break-all}
|
|
#deck-dashboard-host .footer{font-size:11px;color:var(--db-muted);margin-top:22px;text-align:right}
|
|
#deck-dashboard-host .error{white-space:pre-wrap}
|
|
@media(max-width:1180px){#deck-dashboard-host .span3{grid-column:span 6}#deck-dashboard-host .span4{grid-column:span 6}#deck-dashboard-host .row{align-items:flex-start;flex-direction:column}}
|
|
@media(max-width:800px){#deck-dashboard-host .span3,#deck-dashboard-host .span4,#deck-dashboard-host .span6{grid-column:span 12}#deck-dashboard-host .top{align-items:flex-start;flex-direction:column}#deck-dashboard-host .profiles{grid-template-columns:1fr}}
|
|
@media(max-width:500px){#deck-dashboard-host .card{padding:18px}#deck-dashboard-host .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}#deck-dashboard-host .gpu-title{align-items:flex-start;flex-direction:column}#deck-dashboard-host .usage-meta{flex-direction:column;gap:3px}}
|
|
|
|
/* Per-profile history colors are applied through CSSOM under the strict CSP. */
|
|
#deck-dashboard-host .usage-row .fill{background:var(--usage-color,var(--db-accent))}
|