/* ═══════════════════════════════════════════════════════════════
ГОЛИБАС — общий слой оформления
ЕДИНСТВЕННЫЙ ИСТОЧНИК. Править только здесь:
/root/golibas-ui/ui.css
и разнести по всем программам:
bash /root/golibas-ui/sync.sh
Подключается ПОСЛЕДНИМ, после собственных стилей программы.
Иначе его правила наведения проигрывают цветным вариантам карточек
(.stat-card.green и подобным): вес селекторов одинаковый, и решает
порядок. Программа при необходимости перекрывает общий слой более
весомым селектором, а не порядком.
За образец взят AI-Auth. Здесь лежит то, что одинаково везде:
цвета и ОТКЛИК на действия — наведение, нажатие, фокус. Внешний
вид кнопок (форма, заливка, градиент) остаётся за программой:
у Финансов своя система имён классов, и сведение её к общей —
отдельная работа.
═══════════════════════════════════════════════════════════════ */
/* ── Цвета ──────────────────────────────────────────────────────
Значения по умолчанию. Если программа объявляет своё, её
объявление идёт позже и побеждает. */
:root {
--hover: #14b8a6; /* отклик на курсор */
--hover-rgb: 20, 184, 166;
--hover-bg: rgba(20, 184, 166, .12);
--hover-bg2: rgba(20, 184, 166, .20);
--red: #ef4444; /* ошибка, удаление */
--red-rgb: 239, 68, 68;
--green: #10b981; /* успех, «в порядке» */
/* Софт-жёлтый — «новое, ещё не обкатано». Отдельный от --yellow
(#f59e0b): тот янтарный и занят средней важностью инцидентов,
перекрашивать его нельзя. Решение владельца 06.09.2026. */
--soft-yellow: #facc15;
--soft-yellow-rgb: 250, 204, 21;
--soft-yellow-bg: rgba(250, 204, 21, .20);
--soft-yellow-br: rgba(250, 204, 21, .38);
}
/* ── Плавность ──────────────────────────────────────────────────
Без перехода подсветка возникает рывком и читается как подёргивание. */
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-icon, .btn-link, .btn-login,
.stat-card, .hoverable, .app-tile, input, select, textarea {
transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
/* ── Кнопки: отклик формой ──────────────────────────────────────
Цвет подсветки задаёт сама программа (у всех он уже бирюзовый).
Здесь только то, что одинаково при любой заливке: приподнятость
под курсором и нажатие. */
.btn:hover, .btn-primary:hover, .btn-secondary:hover,
.btn-icon:hover, .btn-link:hover {
box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}
.btn:active, .btn-primary:active, .btn-secondary:active,
.btn-danger:active, .btn-icon:active, .btn-link:active {
transform: translateY(1px);
box-shadow: none;
}
/* ── Карточки со сводкой ────────────────────────────────────────
«Продажи», «Закупки» и прочие плитки дашборда никак не отзывались
и выглядели картинкой, а не частью интерфейса. Отклик тот же, что
у часов на главной AI-Auth: спокойный фон и бирюзовая рамка. */
.stat-card:hover {
border-color: var(--hover);
background: var(--hover-bg);
}
/* Нажимаемая карточка ведёт себя как кнопка. */
.stat-card[onclick]:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
.stat-card[onclick]:active { transform: translateY(1px); box-shadow: none; }
/* ── Прочие отзывчивые области ──────────────────────────────────
Прозрачная рамка в покое — чтобы при наведении ничего не прыгало
на пиксель, когда рамка появляется. */
.hoverable {
border: 1px solid transparent;
border-radius: 10px;
padding: 6px 10px;
}
.hoverable:hover { background: var(--hover-bg); border-color: var(--hover); }
/* ── Поля ввода и списки ────────────────────────────────────────
Раньше они не отзывались нигде: понять, куда попал, можно было
только по курсору. Цвет тот же, что у кнопок, — отклик читается
одинаково по всей системе. */
input:not(:disabled):not([readonly]):hover,
select:not(:disabled):hover,
textarea:not(:disabled):not([readonly]):hover {
border-color: var(--hover);
}
input:not(:disabled):not([readonly]):focus,
select:not(:disabled):focus,
textarea:not(:disabled):not([readonly]):focus {
outline: none;
border-color: var(--hover);
box-shadow: 0 0 0 3px rgba(var(--hover-rgb), .18);
}
/* Заблокированное поле честно показывает, что его не тронуть. */
input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .8; }
/* ── ЕДИНЫЙ ВИД КНОПОК (образец — AI-Auth) ──────────────────────
До этого слой задавал только отклик, а форму и заливку каждая
программа рисовала сама: у Финансов кнопки были синие 13px/600,
у остальных — сине-серый градиент. Здесь — один вид на всех.
Роли:
.btn-primary — главное действие: серый градиент, белый текст
.btn-secondary — обычное действие: спокойная плашка (как .btn без
уточнения)
.btn-danger — опасное действие: всегда красное, и под курсором
.btn-success — подтверждение: зелёное
Специальные кнопки программ (.btn-logout, .btn.act-add, .row-actions
.btn и т. п.) заданы более весомыми селекторами и остаются как были. */
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-success {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 8px 16px;
border: 1px solid transparent; border-radius: 9px;
font-family: inherit; font-weight: 700; font-size: .85rem;
cursor: pointer;
}
/* Без уточнения кнопка — обычная. */
.btn, .btn-secondary {
background: var(--card2, var(--blue-light, #202020));
border-color: var(--border, #333333);
color: var(--text, #E8E8E8);
}
/* Главное действие. Цвета прописаны литералами намеренно: это и есть
один вид на все программы (в Auth и восьми программах --accent те же
#777/#999, а у Финансов свой — литерал снимает расхождение). */
.btn-primary {
background: linear-gradient(135deg, #777777, #999999);
border-color: transparent;
color: #fff;
}
.btn-danger {
background: rgba(var(--red-rgb), .12);
border-color: rgba(var(--red-rgb), .3);
color: var(--red);
}
.btn-success {
background: rgba(16, 185, 129, .12);
border-color: rgba(16, 185, 129, .3);
color: var(--green);
}
.btn-sm { padding: 6px 12px; font-size: .78rem; }
.btn-icon {
padding: 8px; border-radius: 8px;
background: var(--card2, var(--blue-light, #202020));
border: 1px solid var(--border, #333333);
color: var(--muted, #888888);
cursor: pointer;
}
/* Наведение: бирюза, как во всей системе. У главной кнопки гасим
градиент — под ним подсветки не видно. */
.btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-icon:hover {
background-image: none;
background-color: var(--hover-bg);
border-color: var(--hover);
color: var(--hover);
}
.btn:active, .btn-primary:active, .btn-secondary:active { background-color: var(--hover-bg2); }
/* Опасное и подтверждающее остаются в своём цвете и под курсором:
удаление не должно выглядеть безобидной кнопкой. */
.btn-danger:hover {
background: rgba(var(--red-rgb), .22);
border-color: rgba(var(--red-rgb), .5);
color: var(--red);
}
.btn-danger:active { background: rgba(var(--red-rgb), .3); }
.btn-success:hover {
background: rgba(16, 185, 129, .22);
border-color: var(--green);
color: var(--green);
}
/* ── СПЕЦ-КНОПКИ И СТРАНИЦА ВХОДА ───────────────────────────────
Кнопка входа — та же главная кнопка, только во всю ширину; ширину
и поля ей оставляет страница, здесь — вид и отклик. */
.btn-login {
background: linear-gradient(135deg, #777777, #999999);
color: #fff;
border: 1px solid transparent;
}
.btn-login:hover {
background-image: none;
background-color: var(--hover-bg);
border-color: var(--hover);
color: var(--hover);
opacity: 1; /* у страниц входа был свой ховер прозрачностью */
}
.btn-login:active { background-color: var(--hover-bg2); }
/* Кнопки в строках таблиц носили серую плашку с белым ховером —
единственное место, выбивавшееся из системы. Теперь как у всех. */
.row-actions .btn {
background: var(--card2, var(--blue-light, #202020));
border-color: var(--border, #333333);
color: var(--text, #E8E8E8);
}
.row-actions .btn:hover {
background: var(--hover-bg);
border-color: var(--hover);
color: var(--hover);
}
/* «Выйти» — опасное действие, при наведении оно везде краснеет
одинаково. Основной цвет кнопки задаёт программа: в шапке Auth она
красная всегда, в боковых меню программ — приглушённая до наведения. */
.btn-logout:hover {
border-color: var(--red);
color: var(--red);
background: rgba(var(--red-rgb), .08);
}
.btn-logout:active { background: rgba(var(--red-rgb), .16); }
/* Заголовок панели-превью — кнопка: ведёт в свой раздел. Отрицательные
поля возвращают текст на прежнее место, чтобы заголовки-кнопки и
заголовки-надписи стояли по одной линии. */
.panel-title-btn {
display: inline-block;
padding: 3px 9px; margin: -3px -9px;
border-radius: 8px; cursor: pointer;
transition: background-color .15s, color .15s;
}
.panel-title-btn:hover { background: var(--hover-bg); color: var(--hover); }
/* ── Значок состояния подключения ───────────────────────────────
Один вид на все программы: зелёный «Подключён», красный «Не подключён»
(или «Ошибка», когда доступ есть, а сервис не отвечает).
Использование: ✅ Подключён */
.st-badge {
display: inline-flex; align-items: center; gap: 5px;
font-size: .72rem; font-weight: 700;
padding: 2px 10px; border-radius: 99px;
white-space: nowrap; vertical-align: middle;
}
.st-on { background: rgba(16,185,129,.15); border: 1px solid var(--green, #10b981); color: var(--green, #10b981); }
.st-off { background: rgba(239,68,68,.12); border: 1px solid var(--red, #ef4444); color: var(--red, #ef4444); }
/* ── Работа с клавиатуры ────────────────────────────────────────
:focus-visible не появляется от щелчка мышью, поэтому обычную
работу эта обводка не загромождает. */
.btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible,
.btn-danger:focus-visible, .btn-icon:focus-visible, .btn-link:focus-visible, .btn-login:focus-visible,
.stat-card[onclick]:focus-visible, .app-tile:focus-visible {
outline: 2px solid var(--hover);
outline-offset: 2px;
}
/* ── Роль в сайдбаре — бейджем, как «Роль компании» в AI-Auth (29.08.2026).
Цвета те же: Владелец янтарный, Администратор зелёный, Директор сиреневый. */
.user-role-badge { display:inline-block; padding:2px 9px; border-radius:99px;
font-size:.68rem; font-weight:700; border:1px solid var(--border); margin-top:3px; }
.user-role-badge.role-owner { background:rgba(245,158,11,.18); border-color:#f59e0b; color:#f59e0b; }
.user-role-badge.role-admin { background:rgba(16,185,129,.18); border-color:#10b981; color:#10b981; }
.user-role-badge.role-director { background:rgba(176,124,199,.18); border-color:#b07cc7; color:#b07cc7; }
/* ── Название программы в сайдбаре — кнопкой в стиле кнопок AI-Auth. */
.app-home-btn { display:block; width:100%; padding:10px 12px; background:var(--card);
border:1px solid var(--border); border-radius:10px; color:var(--text);
font-weight:700; font-size:.95rem; cursor:pointer; text-align:center;
font-family:inherit; transition:background-color .15s, border-color .15s; }
.app-home-btn:hover { background:rgba(20,184,166,.12); border-color:#14b8a6; }
/* ── Единая гамма кнопок-действий (29.08.2026). Одно правило на все
программы: зелёный — получение/создание, красный — удаление и всё
необратимое. Цвета утверждённые: #10b981 и #ef4444. !important нужен —
этот файл грузится последним и обязан перебить точечные inline-стили. */
.btn-green { background:#10b981 !important; color:#fff !important; border:none !important; text-decoration:none !important; }
.btn-red { background:#ef4444 !important; color:#fff !important; border:none !important; }
.btn-green:hover, .btn-red:hover { filter:brightness(1.12); }
/* Режим «на весь экран»: кнопка ⛶ в шапке страницы прячет меню */
body.page-max .sidebar{display:none!important}
/* ═══════════════════════════════════════════════════════════════
Кнопки без теней
Серость под кнопками шла от постоянной тени у .btn-primary в каждой
программе плюс общей тени при наведении. Отклик остаётся — он и так
есть цветом рамки и фона, тень для этого не нужна.
═══════════════════════════════════════════════════════════════ */
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-icon, .btn-link, .btn-login,
.btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-danger:hover,
.btn-icon:hover, .btn-link:hover, .btn-login:hover,
.stat-card, .stat-card:hover, .stat-card[onclick]:hover {
box-shadow: none;
}
/* Нажатие остаётся заметным — сдвигом, а не тенью. */
.btn:active, .btn-primary:active, .btn-secondary:active,
.btn-danger:active, .btn-icon:active, .btn-link:active,
.stat-card[onclick]:active { transform: translateY(1px); }
/* ═══════════════════════════════════════════════════════════════
Плитки без объёма
У плитки при наведении была крупная тень 0 8px 24px — вместе с
наклоном за курсором она и читалась как «3D». Подъём оставляем:
он показывает, что плитка живая, и серости не даёт.
═══════════════════════════════════════════════════════════════ */
.app-tile, .app-tile:hover, .panel, .card { box-shadow: none; }
/* ═══════════════════════════════════════════════════════════════
Чат сбоку (04.09.2026). Скрипт /chat-dock.js переносит узел
#page-teamchat в правую колонку