mirror of
https://github.com/EDeev/tablo.git
synced 2026-10-07 20:49:31 +03:00
107 lines
3.3 KiB
CSS
107 lines
3.3 KiB
CSS
/* ═══════════════════════════════════════════════════════════════════════════
|
||
EFFORT HOURS — трудозатраты
|
||
Акцент: #14b8a6 (teal)
|
||
|
||
gh-1: "X ч" крупно по центру, инпут компактно справа.
|
||
gh-2: число слева, бар прогресса + инпут справа.
|
||
gh-3/4: число огромное, бар толстый, инпут широкий.
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.t-ef-wrap {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
/* Левая часть — число */
|
||
.t-ef-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
flex-shrink: 0;
|
||
}
|
||
.t-ef-num {
|
||
font-size: 40px;
|
||
font-weight: 700;
|
||
font-family: var(--mono);
|
||
color: #14b8a6;
|
||
line-height: 1;
|
||
}
|
||
.t-ef-unit { font-size: 18px; color: #14b8a6; }
|
||
.t-ef-goal { font-size: 10px; color: var(--muted); margin-top: 2px; }
|
||
|
||
/* Правая часть — бар + инпут */
|
||
.t-ef-right {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
justify-content: center;
|
||
}
|
||
.t-ef-bar-wrap {
|
||
position: relative;
|
||
height: 18px;
|
||
background: var(--surface2);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
.t-ef-bar-fill {
|
||
height: 100%;
|
||
background: #14b8a6;
|
||
border-radius: 8px;
|
||
transition: width .35s cubic-bezier(.4,0,.2,1);
|
||
}
|
||
.t-ef-bar-pct {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
mix-blend-mode: overlay;
|
||
pointer-events: none;
|
||
}
|
||
.t-ef-input-row { display: flex; gap: 5px; }
|
||
.t-ef-input-row .t-input { flex: 1; min-width: 0; }
|
||
|
||
/* ── gh-1: число + инпут горизонтально ── */
|
||
@container metric (max-height: 119px) {
|
||
.t-metric-body { padding: 0 10px 8px; }
|
||
.t-ef-wrap { gap: 10px; }
|
||
.t-ef-num { font-size: 28px; }
|
||
.t-ef-unit { font-size: 14px; }
|
||
.t-ef-goal { display: none; }
|
||
.t-ef-bar-wrap { height: 14px; }
|
||
.t-ef-bar-pct { font-size: 9px; }
|
||
.t-ef-input-row .t-input { font-size: 11px; height: 26px; padding: 2px 6px; }
|
||
.t-ef-input-row .t-btn { height: 26px; padding: 0 8px; }
|
||
}
|
||
|
||
/* ── gh-2: стандарт ── */
|
||
@container metric (min-height: 120px) and (max-height: 239px) {
|
||
.t-ef-num { font-size: 36px; }
|
||
.t-ef-unit { font-size: 16px; }
|
||
}
|
||
|
||
/* ── gh-3/4 ── */
|
||
@container metric (min-height: 360px) {
|
||
.t-ef-wrap { flex-direction: column; align-items: center; gap: 14px; }
|
||
.t-ef-left { align-items: center; }
|
||
.t-ef-num { font-size: 64px; }
|
||
.t-ef-unit { font-size: 28px; }
|
||
.t-ef-goal { font-size: 12px; }
|
||
.t-ef-right { width: 100%; }
|
||
.t-ef-bar-wrap { height: 24px; border-radius: 12px; }
|
||
.t-ef-bar-pct { font-size: 11px; }
|
||
}
|
||
|
||
/* ── gw-2/3 ── */
|
||
@container metric (min-width: 280px) and (max-height: 359px) {
|
||
.t-ef-num { font-size: 48px; }
|
||
.t-ef-unit { font-size: 22px; }
|
||
}
|