mirror of
https://github.com/EDeev/tablo.git
synced 2026-10-07 20:49:31 +03:00
88 lines
2.4 KiB
CSS
88 lines
2.4 KiB
CSS
/* ═══════════════════════════════════════════════════════════════════════════
|
||
GRADES — оценки
|
||
Акцент: #f97316 (orange)
|
||
|
||
gh-1: только мини-бары с названиями, инпуты скрыты.
|
||
gh-2+: бары + инпуты + кнопка сохранить.
|
||
gh-3/4: строки просторнее.
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.t-gr-list {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.t-gr-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
flex-shrink: 0;
|
||
}
|
||
.t-gr-name {
|
||
font-size: 10.5px;
|
||
color: var(--muted);
|
||
width: 36px;
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.t-gr-track {
|
||
flex: 1;
|
||
height: 5px;
|
||
background: var(--surface2);
|
||
border-radius: 99px;
|
||
overflow: hidden;
|
||
min-width: 0;
|
||
}
|
||
.t-gr-fill {
|
||
height: 100%;
|
||
background: #f97316;
|
||
border-radius: 99px;
|
||
transition: width .35s cubic-bezier(.4,0,.2,1);
|
||
}
|
||
.t-gr-input {
|
||
width: 46px;
|
||
flex-shrink: 0;
|
||
font-size: 11px !important;
|
||
}
|
||
|
||
/* Кнопка */
|
||
.t-gr-save {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ── gh-1: только бары без инпутов ── */
|
||
@container metric (max-height: 119px) {
|
||
.t-metric-body { padding: 0 10px 8px; }
|
||
.t-gr-input { display: none; }
|
||
.t-gr-save { display: none; }
|
||
.t-gr-name { font-size: 10px; }
|
||
.t-gr-track { height: 7px; }
|
||
.t-gr-row { gap: 8px; }
|
||
}
|
||
|
||
/* ── gh-2 ── */
|
||
@container metric (min-height: 120px) and (max-height: 239px) {
|
||
.t-gr-row { gap: 5px; }
|
||
.t-gr-name { font-size: 10px; width: 32px; }
|
||
.t-gr-input { width: 40px; }
|
||
}
|
||
|
||
/* ── gh-3/4 ── */
|
||
@container metric (min-height: 360px) {
|
||
.t-gr-row { gap: 8px; min-height: 30px; }
|
||
.t-gr-name { font-size: 12px; width: 48px; }
|
||
.t-gr-track { height: 7px; }
|
||
.t-gr-input { width: 54px; font-size: 12px !important; }
|
||
}
|
||
|
||
/* ── gw-2/3 ── */
|
||
@container metric (min-width: 300px) {
|
||
.t-gr-name { width: 52px; font-size: 11px; }
|
||
.t-gr-input { width: 52px; }
|
||
}
|