/* =========================================================================
shared/styles/base.css
Базовые стили и дизайн-токены для всех подпрограмм Raschet.
Подключается в любой подпрограмме ПЕРЕД её собственным CSS:
Главное приложение (index.html) тоже подключает этот файл, чтобы
единая палитра и кнопки были во всех местах.
========================================================================= */
:root {
/* ===== Палитра ===== */
--rs-bg: #f4f5f7;
--rs-bg-card: #ffffff;
--rs-bg-soft: #f6f8fa;
--rs-bg-hover: #f0f0f0;
--rs-fg: #222222;
--rs-fg-muted: #6b7280;
--rs-fg-subtle: #9aa3b5;
--rs-border: #d0d0d0;
--rs-border-soft: #e0e3ea;
--rs-border-hair: #f0f0f0;
/* Акцентные цвета */
--rs-accent: #1976d2;
--rs-accent-hover: #1565c0;
--rs-accent-bg: #e3f2fd;
--rs-danger: #c62828;
--rs-danger-bg: #ffebee;
--rs-success: #2e7d32;
--rs-success-bg: #e8f5e9;
--rs-warn: #e65100;
--rs-warn-bg: #fff8e1;
/* ===== Типографика ===== */
--rs-font: -apple-system, "Segoe UI", Roboto, sans-serif;
--rs-font-mono: ui-monospace, Consolas, "SF Mono", monospace;
/* ===== Радиусы / тени ===== */
--rs-radius-sm: 4px;
--rs-radius: 6px;
--rs-radius-lg: 10px;
--rs-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
--rs-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.2);
}
/* ===== Reset + базовый фон ===== */
* { box-sizing: border-box; }
html, body {
font-family: var(--rs-font);
color: var(--rs-fg);
background: var(--rs-bg);
-webkit-font-smoothing: antialiased;
}
/* ===== Общие кнопки .btn-sm / .btn-danger =====
Используются и в главном приложении, и в подпрограммах.
Небольшие компактные кнопки для тулбаров и таблиц. */
.btn-sm {
font: inherit;
font-size: 12px;
padding: 4px 10px;
border-radius: var(--rs-radius-sm);
border: 1px solid var(--rs-border);
background: var(--rs-bg-card);
color: var(--rs-fg);
cursor: pointer;
transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.btn-sm:hover { background: var(--rs-bg-hover); }
.btn-sm:active { background: #e8e8e8; }
.btn-sm:disabled {
opacity: 0.55;
cursor: not-allowed;
background: var(--rs-bg-card);
}
.btn-sm.btn-primary {
background: var(--rs-accent);
border-color: var(--rs-accent);
color: #fff;
}
.btn-sm.btn-primary:hover { background: var(--rs-accent-hover); border-color: var(--rs-accent-hover); }
.btn-danger,
.btn-sm.btn-danger {
background: var(--rs-bg-card);
border-color: var(--rs-danger);
color: var(--rs-danger);
}
.btn-danger:hover,
.btn-sm.btn-danger:hover { background: var(--rs-danger-bg); }
/* Кнопка «Удалить» в строках таблиц — тот же стиль, мягкая подсветка */
.btn-sm.btn-del:hover {
background: var(--rs-danger-bg);
border-color: var(--rs-danger);
color: var(--rs-danger);
}
/* ===== Пустой state ===== */
.empty {
padding: 32px;
text-align: center;
color: var(--rs-fg-subtle);
font-size: 13px;
background: var(--rs-bg-card);
border: 1px dashed var(--rs-border);
border-radius: var(--rs-radius-lg);
}
/* ===== Флеш-уведомления (всплывающие подсказки после действий) ===== */
.flash {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
background: #323232;
color: #fff;
border-radius: var(--rs-radius);
font-size: 13px;
box-shadow: var(--rs-shadow-modal);
z-index: 10000;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.flash.show { opacity: 1; }
.flash.success { background: var(--rs-success); }
.flash.error { background: var(--rs-danger); }
/* ===== Утилитарные классы ===== */
.muted { color: var(--rs-fg-muted); }
.subtle { color: var(--rs-fg-subtle); }
/* =========================================================================
Phase 1.24.41 — единый полноэкранный дизайн всех модулей.
Отключает исторически сложившиеся max-width: 1200px / 1400px / 1600px
и centering (margin:0 auto) на обёртках подпрограмм. Модуль занимает
всю ширину вьюпорта, как «Конструктор схем» и «Подбор кабеля». Внутри
секций уже задаются нужные grid/flex-ограничения. Если какому-то окну
нужна узкая колонка для читаемости — оно использует inner-контейнер,
а не ограничивает внешнюю обёртку.
========================================================================= */
body > main,
.page-wrap, .sc-wrap, .rc-wrap, .cb-wrap, .mv-wrap, .pdu-wrap, .ups-wrap,
.xf-wrap, .el-wrap, .bat-wrap, .cat-wrap, .log-wrap, .mdc-wrap,
.psy-wrap, .sup-wrap, .pc-wrap, .tr-wrap, .app-wrap {
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: auto !important;
}
/* Единая типографика для всех модулей — фиксируем base font-size и line-height,
чтобы убрать плавающие 13/14/15px в подпрограммах. */
html { font-size: 14px; line-height: 1.45; }
body { font-family: var(--rs-font); }
code, kbd, samp, pre { font-family: var(--rs-font-mono); }
/* Единые стили для таблиц «справочного» типа (класс .rs-table опционально).
Однотипная информация — однотипный вид: sticky thead, hover строк,
выравнивание чисел вправо через .num. */
.rs-table {
width: 100%; border-collapse: collapse; font-size: 13px;
background: var(--rs-bg-card); border: 1px solid var(--rs-border-soft);
border-radius: var(--rs-radius);
}
.rs-table thead th {
position: sticky; top: 0; background: var(--rs-bg-soft);
text-align: left; font-weight: 600; padding: 6px 8px;
border-bottom: 1px solid var(--rs-border-soft);
}
.rs-table tbody td {
padding: 4px 8px; border-bottom: 1px solid var(--rs-border-hair);
}
.rs-table tbody tr:hover { background: var(--rs-bg-hover); }
.rs-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--rs-font-mono); }
/* =========================================================================
Phase 1.26.4-8 — единые токены для форм, заголовков, chip'ов,
статусов и breadcrumb'ов. Цель: во всех модулях однотипная
информация выглядит идентично. Старые модульные классы (.sc-field,
.rc-field, .field) остаются ради обратной совместимости, но новые
элементы используют rs-*.
========================================================================= */
/* ---- rs-field — единая форма «label + ввод» ---------------------------- */
.rs-field {
display: flex; flex-direction: column; gap: 3px;
font-size: 12px; color: var(--rs-fg-muted);
}
.rs-field > span:first-child { font-size: 11px; text-transform: none; letter-spacing: 0; }
.rs-field input, .rs-field select, .rs-field textarea {
font: inherit; color: var(--rs-fg);
padding: 4px 8px; min-height: 28px;
border: 1px solid var(--rs-border); border-radius: var(--rs-radius-sm);
background: var(--rs-bg-card);
transition: border-color .12s, box-shadow .12s;
}
.rs-field input:focus, .rs-field select:focus, .rs-field textarea:focus {
outline: none; border-color: var(--rs-accent);
box-shadow: 0 0 0 2px var(--rs-accent-bg);
}
.rs-field output {
font: inherit; padding: 4px 8px; min-height: 28px;
color: var(--rs-fg); background: var(--rs-bg-soft);
border: 1px solid var(--rs-border-soft); border-radius: var(--rs-radius-sm);
}
.rs-field.inline { flex-direction: row; align-items: center; gap: 8px; }
.rs-field.inline > span:first-child { font-size: 12px; }
/* ---- rs-section — единая «карточка-секция» ----------------------------- */
.rs-section {
background: var(--rs-bg-card);
border: 1px solid var(--rs-border-soft);
border-radius: var(--rs-radius);
padding: 12px 14px;
box-shadow: var(--rs-shadow-card);
}
.rs-section + .rs-section { margin-top: 10px; }
.rs-section > h2 { font-size: 15px; font-weight: 600; margin: 0 0 8px; color: var(--rs-fg); }
.rs-section > h3 { font-size: 13px; font-weight: 600; margin: 10px 0 6px; color: var(--rs-fg); }
.rs-section > p.hint, .rs-section > p.muted {
font-size: 12px; color: var(--rs-fg-muted); margin: 0 0 8px; line-height: 1.45;
}
/* ---- rs-chip — единые «чипы» для badge / статусов ---------------------- */
.rs-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 1px 7px; font-size: 11px; line-height: 1.4;
border-radius: 999px; background: var(--rs-bg-soft);
border: 1px solid var(--rs-border-soft); color: var(--rs-fg);
font-weight: 500; white-space: nowrap;
}
.rs-chip-info { background: var(--rs-accent-bg); border-color: var(--rs-accent); color: var(--rs-accent); }
.rs-chip-success { background: var(--rs-success-bg); border-color: var(--rs-success); color: var(--rs-success); }
.rs-chip-warn { background: var(--rs-warn-bg); border-color: var(--rs-warn); color: var(--rs-warn); }
.rs-chip-danger { background: var(--rs-danger-bg); border-color: var(--rs-danger); color: var(--rs-danger); }
.rs-chip-muted { background: var(--rs-bg-soft); border-color: var(--rs-border); color: var(--rs-fg-muted); }
/* ---- rs-status — единые «статусы» оборудования -------------------------
Используется везде (inventory, BOM, TCC, планы ТО). Набор зафиксирован,
иконки/цвета одинаковы в любом модуле. */
.rs-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.rs-status::before { display: inline-block; width: 8px; height: 8px; border-radius: 50%; content: ''; }
.rs-status-active { color: var(--rs-success); } .rs-status-active::before { background: var(--rs-success); }
.rs-status-standby { color: var(--rs-warn); } .rs-status-standby::before { background: var(--rs-warn); }
.rs-status-maint { color: var(--rs-accent); } .rs-status-maint::before { background: var(--rs-accent); }
.rs-status-decom { color: var(--rs-fg-subtle);} .rs-status-decom::before { background: var(--rs-fg-subtle); }
.rs-status-error { color: var(--rs-danger); } .rs-status-error::before { background: var(--rs-danger); }
/* ---- rs-breadcrumb — единая навигация между подстраницами модуля ------ */
.rs-breadcrumb {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; margin-bottom: 10px;
background: var(--rs-bg-soft);
border: 1px solid var(--rs-border-soft); border-radius: var(--rs-radius);
font-size: 13px;
}
.rs-breadcrumb a { color: var(--rs-accent); text-decoration: none; }
.rs-breadcrumb a:hover { text-decoration: underline; }
.rs-breadcrumb > .sep { color: var(--rs-fg-subtle); }
.rs-breadcrumb > strong { color: var(--rs-fg); font-weight: 600; }
.rs-breadcrumb > .spacer { flex: 1; }
/* =========================================================================
v0.59.180 — Универсальный resizable sidebar для всех подпрограмм.
Единая ширина по умолчанию (var --rs-sidebar-left-w / --rs-sidebar-right-w),
сохраняется в localStorage через shared/sidebar-resizer.js.
HTML:
========================================================================= */
:root {
--rs-sidebar-left-w: 240px;
--rs-sidebar-right-w: 360px;
--rs-sidebar-min-w: 180px;
--rs-sidebar-max-w: 560px;
}
.rs-sidebar {
/* v0.59.587: единый скролл для всех сайдбаров во всех модулях.
Сайдбар прилипает к верху viewport'а и имеет собственный overflow,
чтобы прокручиваться отдельно от основной области. До этого только
.sc-racks-side в scs-config имела свой скролл — на других модулях
(рacks-list, scs-design, schematic) сайдбар прокручивался вместе со
страницей, и при длинном содержимом терялся доступ к нижним пунктам.
Доступная высота = viewport − 16px (8px зазор сверху + 8px снизу). */
position: sticky;
top: 8px;
align-self: start;
min-width: 0;
max-height: calc(100vh - 16px);
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
}
.rs-sidebar-resizer {
position: absolute;
top: 0;
width: 6px;
height: 100%;
cursor: ew-resize;
background: transparent;
transition: background 0.15s;
z-index: 20;
}
.rs-sidebar-left .rs-sidebar-resizer { right: -3px; }
.rs-sidebar-right .rs-sidebar-resizer { left: -3px; }
.rs-sidebar-resizer:hover,
.rs-sidebar-resizer.rs-dragging { background: var(--rs-accent); }
body.rs-sidebar-resizing { cursor: ew-resize !important; user-select: none; }
/* =========================================================================
v0.59.182 — единые in-page диалоги (shared/dialog.js): rsToast/rsConfirm/
rsPrompt. Никаких нативных alert/confirm/prompt. Хост #rs-ui-host
создаётся лениво. Стили дублируют scToast/scModal из scs-config.
========================================================================= */
#rs-ui-host {
position: fixed; inset: 0; pointer-events: none; z-index: 10000;
}
.rs-toast {
position: absolute; right: 20px; bottom: 20px;
padding: 10px 14px; border-radius: 6px; font-size: 13px;
background: #0f172a; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.18);
pointer-events: auto; opacity: 0; transform: translateY(8px);
transition: opacity .2s, transform .2s; max-width: 420px;
}
.rs-toast + .rs-toast { bottom: 68px; }
.rs-toast-shown { opacity: 1; transform: translateY(0); }
.rs-toast-ok { background: #16a34a; }
.rs-toast-warn { background: #d97706; }
.rs-toast-err { background: #dc2626; }
.rs-toast-info { background: #334155; }
.rs-modal-back {
position: absolute; inset: 0; background: rgba(15,23,42,0.38);
display: flex; align-items: center; justify-content: center;
pointer-events: auto; opacity: 0; transition: opacity .15s;
}
.rs-modal-open { opacity: 1; }
.rs-modal-card {
background: #fff; border-radius: 8px; padding: 18px 20px;
min-width: 340px; max-width: 520px;
box-shadow: 0 10px 40px rgba(0,0,0,0.25);
border: 1px solid #e2e8f0;
}
.rs-modal-title { font-size: 15px; font-weight: 600; color: #0f172a; margin-bottom: 6px; }
.rs-modal-msg { font-size: 13px; color: #475569; margin-bottom: 12px; line-height: 1.45; }
.rs-modal-input {
width: 100%; padding: 6px 8px; font-size: 13px;
border: 1px solid #cbd5e1; border-radius: 4px; margin-bottom: 12px;
box-sizing: border-box;
}
.rs-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.rs-btn {
font-size: 13px; padding: 6px 14px; border: 1px solid #cbd5e1; background: #fff;
border-radius: 4px; cursor: pointer; color: #0f172a;
}
.rs-btn:hover { background: #f8fafc; }
.rs-btn-primary { border-color: #2563eb; color: #fff; background: #2563eb; }
.rs-btn-primary:hover { background: #1d4ed8; }