/* ============================================================================ sage.css — БИБЛИОТЕКА КОМПОНЕНТОВ темы «Sage» для КАСТОМ-страниц. Всё заскоуплено под обёртку .sage (добавляется на корень каждой кастом- страницы — см. MIGRATION.md, раздел 0). Использует ТОЛЬКО токены из sage-tokens.css — собственных цветов/размеров не вводит. Без Tailwind-утилит, без CDN, без / и сбросов body. Интерактив — на CSS + уже подключённом Alpine (точечные data-атрибуты в разметке страниц; здесь — только переходы/состояния). Внешних библиотек нет. ============================================================================ */ .sage{ font-family:var(--font-sans); color:var(--text); font-size:var(--fs-body); line-height:var(--lh-base); -webkit-font-smoothing:antialiased; } .sage *{box-sizing:border-box;} .sage .material-symbols-outlined{ font-size:20px;line-height:1;vertical-align:middle; font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 20; } /* ───────────────────── Типографика страницы ─────────────────────────────── */ .sage-page-title{margin:0;font-size:var(--fs-page-title);font-weight:600; letter-spacing:-.01em;color:var(--base-900);} .sage-section-title{margin:0;font-size:var(--fs-section);font-weight:600;color:var(--text);} .sage-label{font-size:var(--fs-label);font-weight:600;letter-spacing:.04em; text-transform:uppercase;color:var(--text-3);} .sage-muted{color:var(--text-3);} /* ───────────────────── Кнопки ───────────────────────────────────────────── */ .sage-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px; height:var(--ctrl-h);padding:0 16px;border:1px solid transparent;border-radius:var(--r-8); font-family:inherit;font-size:var(--fs-secondary);font-weight:600;cursor:pointer; white-space:nowrap;box-shadow:var(--sh-card); transition:background .14s ease, border-color .14s ease, transform .08s ease, box-shadow .14s ease;} .sage-btn:active{transform:translateY(1px);} .sage-btn .material-symbols-outlined{font-size:18px;} .sage-btn--sm{height:var(--ctrl-h-sm);padding:0 12px;} .sage-btn--primary{background:var(--primary);color:#fff;} .sage-btn--primary:hover{background:var(--primary-hover);} .sage-btn--success{background:var(--success);color:#fff;} .sage-btn--danger{background:var(--danger);color:#fff;} .sage-btn--warning{background:var(--warning);color:#fff;} .sage-btn--success:hover,.sage-btn--danger:hover,.sage-btn--warning:hover{filter:brightness(.94);} .sage-btn--ghost{background:var(--surface);color:var(--text-2);border-color:var(--border-strong);box-shadow:none;} .sage-btn--ghost:hover{background:#f7f8f4;border-color:var(--muted);} .sage-icon-btn{display:inline-flex;align-items:center;justify-content:center; width:var(--ctrl-h);height:var(--ctrl-h);border:1px solid var(--border-strong); border-radius:var(--r-8);background:var(--surface);color:var(--text-2);cursor:pointer; transition:background .14s ease,border-color .14s ease,color .14s ease;} .sage-icon-btn:hover{background:#f7f8f4;color:var(--text);border-color:var(--muted);} /* ───────────────────── Поля / поиск / фильтр ────────────────────────────── */ .sage-field{display:flex;align-items:center;gap:9px;height:var(--ctrl-h);padding:0 13px; background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-8); transition:border-color .14s ease, box-shadow .14s ease;} .sage-field:focus-within{border-color:var(--primary);box-shadow:var(--sh-focus);} .sage-field .material-symbols-outlined{font-size:18px;color:var(--text-3);} .sage-field input,.sage-input{border:none;outline:none;background:none;font:inherit; font-size:var(--fs-body);color:var(--text);width:100%;} .sage-field input::placeholder,.sage-input::placeholder{color:var(--text-3);} .sage-input{height:var(--ctrl-h);padding:0 13px;border:1px solid var(--border-strong); border-radius:var(--r-8);transition:border-color .14s ease, box-shadow .14s ease;} .sage-input:focus{border-color:var(--primary);box-shadow:var(--sh-focus);} .sage-kbd{font:inherit;font-size:var(--fs-label);color:var(--text-2);background:var(--col-bg); border:1px solid var(--border);border-radius:5px;padding:1px 6px;} /* ───────────────────── Сегмент-переключатель (Список/Доска) ─────────────── */ .sage-seg{display:inline-flex;background:var(--col-bg);border:1px solid var(--border); border-radius:var(--r-8);padding:3px;} .sage-seg button,.sage-seg a{display:inline-flex;align-items:center;gap:6px; height:var(--ctrl-h-sm);padding:0 13px;border:none;background:none;border-radius:var(--r-6); font:inherit;font-size:var(--fs-secondary);font-weight:500;color:var(--text-2);cursor:pointer; text-decoration:none;transition:background .14s ease, color .14s ease, box-shadow .14s ease;} .sage-seg .is-active{background:var(--surface);color:var(--primary);font-weight:600;box-shadow:var(--sh-card);} .sage-seg .material-symbols-outlined{font-size:18px;} /* ───────────────────── Вкладки (анимированное подчёркивание) ────────────── */ .sage-tabs{display:flex;gap:4px;border-bottom:1px solid var(--divider);} .sage-tab{position:relative;display:inline-flex;align-items:center;gap:7px;height:40px; padding:0 14px;border:none;background:none;font:inherit;font-size:var(--fs-secondary); font-weight:500;color:var(--text-2);cursor:pointer;transition:color .14s ease;} .sage-tab::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px; border-radius:2px;background:var(--primary);transform:scaleX(0);transform-origin:center; transition:transform .18s cubic-bezier(.4,0,.2,1);} .sage-tab:hover{color:var(--text);} .sage-tab.is-active{color:var(--primary);font-weight:600;} .sage-tab.is-active::after{transform:scaleX(1);} /* ───────────────────── Бейджи (стадия / статус / тип) ───────────────────── */ .sage-badge{display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 10px; border-radius:var(--r-6);font-size:var(--fs-label);font-weight:600;white-space:nowrap; border:1px solid transparent;} .sage-badge i{width:6px;height:6px;border-radius:var(--r-pill);flex:0 0 auto;} .sage-badge--stage{background:var(--primary-softer);border-color:var(--primary-soft);color:var(--primary);} .sage-badge--success{background:var(--success-bg);color:var(--success);border-color:var(--success-border);} .sage-badge--danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border);} .sage-badge--warning{background:var(--warning-bg);color:var(--warning);border-color:var(--warning-border);} .sage-badge--info{background:var(--info-bg);color:var(--info);border-color:var(--info-border);} /* ───────────────────── Карточка / поверхность ───────────────────────────── */ .sage-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-12); box-shadow:var(--sh-card);} .sage-card--pad{padding:18px 20px;} /* интерактивная карточка — мягкий подъём по ховеру */ .sage-card--hover{transition:border-color .14s ease, box-shadow .18s ease, transform .12s ease;} .sage-card--hover:hover{border-color:var(--border-strong);box-shadow:var(--sh-lift);transform:translateY(-1px);} /* ───────────────────── Аватар-инициалы ──────────────────────────────────── */ .sage-avatar{display:inline-flex;align-items:center;justify-content:center; width:var(--avatar);height:var(--avatar);flex:0 0 auto;border-radius:var(--r-pill); background:var(--primary-soft);color:var(--primary);font-size:10.5px;font-weight:600;line-height:1;} .sage-avatar--dense{width:var(--avatar-dense);height:var(--avatar-dense);font-size:9.5px;} .sage-owner{display:inline-flex;align-items:center;gap:9px;min-width:0;} /* ───────────────────── Таблица ──────────────────────────────────────────── */ .sage-tablewrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-12); overflow:hidden;box-shadow:var(--sh-card);} .sage-table{width:100%;border-collapse:collapse;} .sage-table thead th{height:40px;background:#f7f8f4;border-bottom:1px solid var(--divider); font-size:var(--fs-micro);font-weight:600;letter-spacing:.04em;text-transform:uppercase; color:var(--text-2);text-align:left;padding:0 14px;white-space:nowrap;} .sage-table thead th.num{text-align:right;} .sage-table td.num{text-align:right;} .sage-table tbody td{padding:9px 14px;border-bottom:1px solid #f1f3ee;font-size:var(--fs-secondary); vertical-align:middle;} .sage-table tbody tr:last-child td{border-bottom:none;} .sage-table tbody tr{transition:background .12s ease;} .sage-table tbody tr:hover{background:#fafbf8;} .sage-num{font-variant-numeric:tabular-nums;white-space:nowrap;} /* ───────────────────── Пагинация ────────────────────────────────────────── */ .sage-pager{display:flex;align-items:center;gap:4px;} .sage-pager button{display:inline-flex;align-items:center;justify-content:center;min-width:34px; height:34px;padding:0 6px;border:1px solid var(--border);background:var(--surface); border-radius:var(--r-6);font:inherit;font-size:var(--fs-secondary);color:var(--text);cursor:pointer; transition:background .12s ease,border-color .12s ease;} .sage-pager button:hover{background:#f7f8f4;border-color:var(--muted);} .sage-pager button.is-active{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600;} .sage-pager .dots{padding:0 6px;color:var(--muted);} /* ───────────────────── Пустое состояние ─────────────────────────────────── */ .sage-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; min-height:160px;padding:28px;border:1.5px dashed var(--border-strong);border-radius:var(--r-12); color:var(--text-3);text-align:center;background:var(--surface);} .sage-empty .material-symbols-outlined{font-size:30px;color:var(--muted);} .sage-empty__t{font-size:var(--fs-body);} /* ───────────────────── KPI-плитка (дашборд) ─────────────────────────────── */ .sage-kpi{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:var(--surface); border:1px solid var(--border);border-radius:var(--r-12);box-shadow:var(--sh-card);} .sage-kpi__label{font-size:var(--fs-label);font-weight:600;letter-spacing:.04em; text-transform:uppercase;color:var(--text-3);} .sage-kpi__val{display:flex;align-items:baseline;gap:6px;font-size:28px;font-weight:600; letter-spacing:-.02em;color:var(--base-900);font-variant-numeric:tabular-nums;} .sage-kpi__val .cur{font-size:13px;font-weight:600;color:var(--text-3);} .sage-kpi__delta{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-secondary);font-weight:600;} .sage-kpi__delta--up{color:var(--success);} .sage-kpi__delta--down{color:var(--danger);} /* ───────────────────── RACE-BAR (план vs факт) ────────────────────────────── Разметка:

Цвет ступени (--good / --mid / --bad) выбирает шаблон/Alpine по проценту: ≥90% → good (зелёный) | ≥65% → mid (синий) | <65% → bad (красный). Рост: ширина едет от 0 → var(--pct) по transition при появлении класса .is-animated (вешает Alpine на load / при смене периода). Без класса — ширина сразу = --pct (graceful, если JS не успел). */ .sage-racebar{position:relative;height:8px;border-radius:var(--r-pill);background:var(--race-track); overflow:hidden;} .sage-racebar__fill{display:block;height:100%;width:var(--pct,0%);border-radius:var(--r-pill); background:var(--race-mid);transition:width .9s cubic-bezier(.22,1,.36,1);} .sage-racebar.is-animated .sage-racebar__fill{width:0;} .sage-racebar--good{background:var(--race-good);} .sage-racebar--mid{background:var(--race-mid);} .sage-racebar--bad{background:var(--race-bad);} /* подпись метрики над/под полосой */ .sage-race-row{display:flex;flex-direction:column;gap:6px;} .sage-race-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;} .sage-race-pct{font-size:var(--fs-secondary);font-weight:600;font-variant-numeric:tabular-nums;} .sage-race-pct--good{color:var(--success);} .sage-race-pct--mid{color:var(--info);} .sage-race-pct--bad{color:var(--danger);} /* ───────────────────── СПАРКЛАЙН (мини-тренд) ─────────────────────────────── Контейнер задаёт размер; SVG строит sage-spark.js из data-spark (см. sparkline.html + MIGRATION.md, раздел 3). Graceful: пустые данные → плоский приглушённый плейсхолдер. */ .sage-spark{display:block;width:108px;height:30px;color:var(--spark-line);} .sage-spark svg{display:block;width:100%;height:100%;overflow:visible;} .sage-spark__area{fill:var(--spark-area);stroke:none;} .sage-spark__line{fill:none;stroke:var(--spark-line);stroke-width:1.75; stroke-linejoin:round;stroke-linecap:round; /* мягкая отрисовка линии при появлении */ stroke-dasharray:var(--spark-len,0);stroke-dashoffset:var(--spark-len,0); animation:sage-spark-draw .9s ease forwards;} .sage-spark__dot{fill:var(--spark-dot);} .sage-spark--empty .sage-spark__line{stroke:var(--spark-empty);stroke-dasharray:3 4;animation:none; stroke-dashoffset:0;} .sage-spark--empty{color:var(--spark-empty);} .sage-spark__placeholder{font-size:11px;fill:var(--spark-empty);} @keyframes sage-spark-draw{to{stroke-dashoffset:0;}} /* уважение к prefers-reduced-motion: гасим анимации роста/отрисовки */ @media (prefers-reduced-motion: reduce){ .sage-racebar.is-animated .sage-racebar__fill{width:var(--pct,0%);} .sage-racebar__fill{transition:none;} .sage-spark__line{animation:none;stroke-dashoffset:0;} .sage-card--hover:hover{transform:none;} }