/* ============================================================================ cp.lv — вид панели HostBill в стиле сайта (шаблон Snowlake). ЧТО ЭТО. Панель идёт на своей теме 2019 (Bootstrap 4) и CSS сайта не подключает. Здесь её вид приводится к сайту БЕЗ правки разметки: файл подключён из templates/2019/custom/auth.tpl, а тот включён в header.tpl — значит, работает на ВСЕХ страницах панели сразу. Поменял правило здесь — изменилось везде: /panel/products/, /panel/clientarea/ccard/, корзина, тикеты, партнёрка. Именно поэтому вёрстку страниц трогать не нужно и не следует. ОТКУДА ЗНАЧЕНИЯ. Сняты с живых эталонов шаблона Snowlake (snowlake.tortoizthemes.com/elements/icon_box и /elements/tabs, секции «Icons with Background» и «Tabs with Icons in Box»), локальный исходник — template/elements/*.html и template/assets/css/{style,plugins}.css: бокс #fff, border 0, radius 4px, тень 0 5px 20px rgba(0,0,0,.04), тень при наведении 0 1px 2px rgba(0,0,0,.07) заголовок 20px/500 #404040, текст 16px/28px #606060 вкладка иконка НАД подписью, вкладки равной ширины, активная — белая плашка с той же тенью, обычная — прозрачная кнопка зелёная #9ccd7e, радиус 1.25rem Файл лежит в custom/ — папка в auto-upgrade exclude, стоковые файлы темы целы. Копия в репозитории: hostbill/panel-templates/cplv-panel.css ============================================================================ */ /* ============================================================================ ТОКЕНЫ И ДВЕ ТЕМЫ Тему выбирает УСТРОЙСТВО, а не клиент: переключателя в панели нет, всё решает системная настройка (prefers-color-scheme). Светлый режим — значения ниже, тёмный — переопределения в медиазапросе. ⚠️ Каждый цвет объявлен в базовом :root, а в медиазапросе только меняет значение. Цвет, у которого единственное объявление лежит внутри @media, в другой теме не применится — это классическая причина «белый на белом». ⚠️ Левое меню и шапка тёмные в ОБЕИХ темах (решение владельца 30.08.2026): это навигация, она не должна спорить с рабочей областью. Их цвета живут в теме и здесь не трогаются. ============================================================================ */ :root { /* --- поверхности и текст (светлый режим) --- */ --cplv-bg: #f6f7f9; /* полотно страницы */ --cplv-surface: #ffffff; /* блок: карточка, список, форма */ --cplv-surface-2: #eef0f4; /* вложенная плашка, неактивная вкладка, полоса */ --cplv-line: #e2e5ea; /* контур блока и разделители внутри него */ --cplv-line-strong: #cdd2da; /* контур под курсором */ --cplv-ink: #14181f; /* основной текст */ --cplv-muted: #6b7280; /* подписи и второстепенное */ /* --- действие --- ⚠️ Фирменный зелёный #9ccd7e кнопкой работает только на тёмном: на белом контраст с белым текстом ниже 3:1. Поэтому в светлом режиме действие — #3f8f57, а #9ccd7e остаётся индикатором состояния. */ --cplv-accent: #3f8f57; --cplv-accent-hover: #35784a; --cplv-on-accent: #ffffff; /* --- состояния (значение, а не украшение) --- */ --cplv-ok: #2f7a53; --cplv-warn: #8a6a15; --cplv-danger: #b3423a; /* --- форма блока --- */ --cplv-radius: 12px; --cplv-radius-sm: 8px; --cplv-shadow: 0 1px 2px rgba(16, 20, 28, .04); --cplv-shadow-hover: 0 6px 18px rgba(16, 20, 28, .08); --cplv-ink-shadow: 0 6px 16px rgba(0, 0, 0, .18); --cplv-glow: 0 0 0 3px rgba(63, 143, 87, .30); /* --- навигация --- ⚠️ Левое меню и шапка МЕНЯЮТСЯ ВМЕСТЕ С ТЕМОЙ (решение владельца 30.08.2026, после того как неизменно тёмное меню в светлом режиме было воспринято как поломка). Токены отдельные не потому, что цвет другой, а потому что у навигации свои роли: подложка, линия, активный пункт. */ --cplv-nav-bg: #ffffff; --cplv-nav-line: #e2e5ea; --cplv-nav-ink: #14181f; --cplv-nav-muted: #5c6472; /* подписи меню: темнее, чем общий muted — иначе бледнят */ --cplv-nav-active: #eef0f4; --cplv-nav-hover: #f3f4f7; /* --- совместимость со старыми правилами файла --- Имена ниже встречаются в правилах, написанных до перехода на две темы. Переписывать их все ради переименования смысла нет: пусть указывают на новые токены — тогда цвет остаётся один и меняется в одном месте. */ --cplv-green: var(--cplv-accent); --cplv-green-dark: var(--cplv-accent-hover); --cplv-dark: var(--cplv-ink); --cplv-text: var(--cplv-muted); --cplv-border: var(--cplv-line); } /* ---- ручной выбор темы ---- По умолчанию режим берётся у устройства, но человек может решить иначе: переключатель в шапке ставит на атрибут data-theme и запоминает выбор (localStorage, скрипт — в header.shared.tpl и custom/auth.tpl). Поэтому тёмные значения объявлены ДВАЖДЫ: в медиазапросе — со страховкой :root:not([data-theme="light"]), чтобы явно выбранная светлая тема побеждала тёмную систему, и отдельно для data-theme="dark", чтобы выбранная тёмная побеждала светлую систему. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cplv-bg: #0f1216; --cplv-surface: #171c22; --cplv-surface-2: #1e242c; --cplv-line: #262e37; --cplv-line-strong: #3a444f; --cplv-ink: #e6eaf0; --cplv-muted: #8b95a3; --cplv-accent: #9ccd7e; --cplv-accent-hover: #aed992; --cplv-on-accent: #0f1216; --cplv-ok: #9ccd7e; --cplv-warn: #c9a227; --cplv-danger: #e0736b; --cplv-shadow: 0 1px 2px rgba(0, 0, 0, .30); --cplv-shadow-hover: 0 6px 18px rgba(0, 0, 0, .45); --cplv-glow: 0 0 0 3px rgba(156, 205, 126, .30); --cplv-nav-bg: #0b0e11; --cplv-nav-line: #1e242c; --cplv-nav-ink: #e6eaf0; --cplv-nav-muted: #6f7c8b; --cplv-nav-active: #1a2129; --cplv-nav-hover: #151a20; } } :root[data-theme="dark"] { --cplv-bg: #0f1216; --cplv-surface: #171c22; --cplv-surface-2: #1e242c; --cplv-line: #262e37; --cplv-line-strong: #3a444f; --cplv-ink: #e6eaf0; --cplv-muted: #8b95a3; --cplv-accent: #9ccd7e; --cplv-accent-hover: #aed992; --cplv-on-accent: #0f1216; --cplv-ok: #9ccd7e; --cplv-warn: #c9a227; --cplv-danger: #e0736b; --cplv-shadow: 0 1px 2px rgba(0, 0, 0, .30); --cplv-shadow-hover: 0 6px 18px rgba(0, 0, 0, .45); --cplv-glow: 0 0 0 3px rgba(156, 205, 126, .30); --cplv-nav-bg: #0b0e11; --cplv-nav-line: #1e242c; --cplv-nav-ink: #e6eaf0; --cplv-nav-muted: #6f7c8b; --cplv-nav-active: #1a2129; --cplv-nav-hover: #151a20; } /* ============================================================================ 0. КНОПКИ И ПОЛЯ — без изменений с 13.08.2026 ============================================================================ */ /* ---- базовая форма кнопки: скругление и вес как на сайте ---- */ .btn, .btn.btn-sm, .btn.btn-lg { border-radius: 1.25rem; font-weight: 600; letter-spacing: .01em; transition: background-color .15s ease, box-shadow .15s ease, color .15s ease; } /* ---- главные действия: зелёные, как «Заказать» на сайте ---- */ .btn-primary, .btn-success, .btn-info { background-color: var(--cplv-green); border-color: var(--cplv-green); color: #fff; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-info:hover, .btn-info:focus, .btn-info:active { background-color: var(--cplv-green-dark); border-color: var(--cplv-green-dark); color: #fff; box-shadow: var(--cplv-glow); } /* «Оплатить сейчас!» и прочие ключевые действия в списках — тот же зелёный */ .btn_pay, .btn-paynow, .btn-paynow2 { background-color: var(--cplv-green); border-color: var(--cplv-green); border-radius: 1.25rem; color: #fff; } .btn_pay:hover, .btn-paynow:hover, .btn-paynow2:hover { background-color: var(--cplv-green-dark); color: #fff; } /* ---- второстепенные действия: светлая кнопка с рамкой ---- */ .btn-secondary, .btn-light, .btn-default { background-color: #fff; /* Рамка задаётся целиком, а не одним border-color: у кнопок темы ширина рамки нулевая, и белая кнопка на белой карточке читалась как простой текст — «Управление доменом» в карточке выглядело неактивным. */ border: 1px solid var(--cplv-border); color: var(--cplv-dark); } .btn-secondary:hover, .btn-secondary:focus, .btn-light:hover, .btn-light:focus, .btn-default:hover, .btn-default:focus { background-color: #f7f8fa; border-color: #cfd4dc; color: var(--cplv-dark); } .btn-dark { background-color: var(--cplv-dark); border-color: var(--cplv-dark); color: #fff; } .btn-dark:hover { background-color: #2b2b2b; border-color: #2b2b2b; color: #fff; } /* ---- контурные кнопки ---- */ .btn-outline-primary, .btn-outline-success { color: var(--cplv-green-dark); border-color: var(--cplv-green); background-color: transparent; } .btn-outline-primary:hover, .btn-outline-success:hover { background-color: var(--cplv-green); border-color: var(--cplv-green); color: #fff; } /* Опасные действия остаются красными — цвет здесь несёт смысл, меняем только форму */ .btn-danger, .btn-outline-danger { border-radius: 1.25rem; } /* ---- элементы, которые смотрятся вместе с кнопками ---- */ /* фокус полей — той же зелёной подсветкой, а не bootstrap-синим */ .form-control:focus, .custom-select:focus { border-color: var(--cplv-green); box-shadow: var(--cplv-glow); } /* ссылки-действия в таблицах и карточках */ a.btn-link, .btn-link { color: var(--cplv-green-dark); } a.btn-link:hover, .btn-link:hover { color: var(--cplv-dark); } /* статус счёта: зелёный «оплачен» в тон кнопкам */ .badge-Paid, .badge-Active { background-color: var(--cplv-green); color: #fff; } /* --------------------------------------------------------------------------- Ниже те же правила, но с приоритетом: файл подключается раньше основного CSS темы, поэтому без усиления селектора тема перебивала цвет и скругление. Область ограничена кнопками — на остальную вёрстку панели это не влияет. --------------------------------------------------------------------------- */ body .btn, body .btn.btn-sm, body .btn.btn-lg, body .btn_pay, body .btn-paynow, body .btn-paynow2 { border-radius: 1.25rem !important; font-weight: 600; } body .btn-primary, body .btn-success, body .btn-info, body .btn_pay, body .btn-paynow, body .btn-paynow2 { background-color: var(--cplv-green) !important; border-color: var(--cplv-green) !important; color: #fff !important; } body .btn-primary:hover, body .btn-success:hover, body .btn-info:hover, body .btn_pay:hover, body .btn-paynow:hover, body .btn-paynow2:hover { background-color: var(--cplv-green-dark) !important; border-color: var(--cplv-green-dark) !important; box-shadow: var(--cplv-glow); } body .btn-secondary, body .btn-light, body .btn-default { background-color: #fff !important; border: 1px solid var(--cplv-border) !important; color: var(--cplv-dark) !important; } body .btn-secondary:hover, body .btn-light:hover, body .btn-default:hover { background-color: #f7f8fa !important; color: var(--cplv-dark) !important; } body .btn-dark { background-color: var(--cplv-dark) !important; border-color: var(--cplv-dark) !important; color: #fff !important; } /* Контурные кнопки. Исключаем те, у которых уже есть цветовой класс темы сайта (.btn-green/.btn-red/.btn-dark/.btn-blue/.btn-sky): такими свёрстаны кнопки входа и соцсетей на страницах логина, регистрации и восстановления пароля — им нужен свой фон, а не прозрачный. */ body .btn-outline-primary:not(.btn-green):not(.btn-red):not(.btn-dark):not(.btn-blue):not(.btn-cobalt):not(.btn-sky), body .btn-outline-success:not(.btn-green):not(.btn-red):not(.btn-dark):not(.btn-blue):not(.btn-cobalt):not(.btn-sky) { color: var(--cplv-green-dark) !important; border-color: var(--cplv-green) !important; background-color: transparent !important; } body .btn-outline-primary:not(.btn-green):not(.btn-red):not(.btn-dark):not(.btn-blue):not(.btn-cobalt):not(.btn-sky):hover, body .btn-outline-success:not(.btn-green):not(.btn-red):not(.btn-dark):not(.btn-blue):not(.btn-cobalt):not(.btn-sky):hover { background-color: var(--cplv-green) !important; color: #fff !important; } /* ---- цветные кнопки темы сайта: вход и соцсети ---- Значения те же, что в sites/cp.lv/assets/css (--color-red/blue/sky/dark/green). */ body .btn-green { background-color: var(--cplv-green) !important; border-color: var(--cplv-green) !important; color: #fff !important; } body .btn-green:hover { background-color: var(--cplv-green-dark) !important; border-color: var(--cplv-green-dark) !important; color: #fff !important; } body .btn-red { background-color: #d75959 !important; border-color: #d75959 !important; color: #fff !important; } body .btn-red:hover { background-color: #c44e4e !important; border-color: #c44e4e !important; color: #fff !important; } body .btn-cobalt { background-color: #4267b2 !important; border-color: #4267b2 !important; color: #fff !important; } body .btn-cobalt:hover { background-color: #375593 !important; border-color: #375593 !important; color: #fff !important; } body .btn-blue { background-color: #5ca7db !important; border-color: #5ca7db !important; color: #fff !important; } body .btn-blue:hover { background-color: #4b95c8 !important; border-color: #4b95c8 !important; color: #fff !important; } body .btn-sky { background-color: #5f86be !important; border-color: #5f86be !important; color: #fff !important; } body .btn-sky:hover { background-color: #4f74a9 !important; border-color: #4f74a9 !important; color: #fff !important; } body .form-control:focus, body .custom-select:focus { border-color: var(--cplv-green) !important; box-shadow: var(--cplv-glow) !important; } body .badge-Paid, body .badge-Active { background-color: var(--cplv-green) !important; color: #fff !important; } /* Выбранный тариф в каталоге: тема красит его синим — переводим в фирменный зелёный, чтобы выделение совпадало с кнопкой заказа. */ body .cart-product.selected, body .card.cart-product.selected { background-color: var(--cplv-green) !important; border-color: var(--cplv-green) !important; } body .cart-product.selected * { color: #fff !important; } body .cart-product.selected .text-muted { color: rgba(255, 255, 255, .8) !important; } /* ---- полотно панели ---- Белое (решение владельца 30.08.2026). Сначала было наоборот: серое полотно #f3f4f7 под белыми боксами, как в эталонной секции Snowlake. Теперь роли поменялись — полотно белое, а блок держится не заливкой, а контуром в 1px и мягкой тенью (см. --cplv-line): цветных заливок в панели нет. Шапка, боковое меню и сами боксы красят себя сами и не затрагиваются. */ body.template_2019 { background-color: var(--cplv-bg); } /* ============================================================================ 1. БОКСЫ — один вид на всю панель ============================================================================ Эталон — «Icons with Background» шаблона Snowlake: белый блок без рамки, слабое скругление и мягкая тень. В теме 2019 «бокс» встречается под разными именами, поэтому перечислены все, а не переписана разметка страниц: .card — карточки Bootstrap (каталог /panel/products/, тикеты, кредитные карты, апгрейды, корзина); .table-responsive.table-borders — обёртка ЛЮБОГО списка-таблицы в панели (50 мест в шаблонах — все списки услуг, счетов, доменов, тикетов, контактов, партнёрки); .info-box .info-box-items — виджеты-сводки; .box — блоки страниц заказа; .cplv-card — наши карточки клиентской зоны. ⚠️ Рамку снимаем, а не перекрашиваем: в эталоне её нет, глубину даёт тень. Если оставить рамку и добавить тень — получается «двойная обводка», самый заметный признак чужеродного блока. */ .cplv-box, body .card, body .table-responsive.table-borders, body .info-box .info-box-items, body .box, body .cplv-card { background: var(--cplv-surface); /* ⚠️ Здесь рамка НУЖНА, хотя в эталоне Snowlake её нет. В эталоне белый бокс лежит на сером полотне, и границу рисует сам контраст; у нас полотно тоже белое, поэтому без линии блок теряет края и страница «разъезжается». */ border: 1px solid var(--cplv-line) !important; border-radius: var(--cplv-radius) !important; box-shadow: var(--cplv-shadow); } /* ⚠️ У бокса тень при наведении НЕ меняется: в эталоне правила `.shadow:hover` нет вовсе, тень одна и та же. Подсветку оставляем только там, где карточка целиком кликабельна, — там это не украшение, а единственный признак ссылки. */ /* Под курсором карточка не меняет цвет — темнеет только контур. В монохроме это единственный способ показать «сюда можно нажать», не вводя лишний цвет. */ body .cplv-card--link:hover { box-shadow: var(--cplv-shadow-hover); border-color: var(--cplv-line-strong) !important; } /* Внутренние линии карточки Bootstrap: в стоке это серые полосы во всю ширину, в эталоне их нет — оставляем только тонкий разделитель у подвала карточки. */ body .card > .card-header, body .card > .card-footer { background-color: transparent; border-color: var(--cplv-line); } body .card > .card-body { padding: 30px; } /* Каталог услуг /panel/products/: заголовок карточки в стоке синий и мелкий — приводим к типографике эталона (20px/500, тёмно-серый), описание — 16/28. */ body .section-product-card .card-title { color: var(--cplv-dark) !important; font-size: 20px; font-weight: 500; line-height: 1.35; } body .section-product-card .card-title:hover { color: var(--cplv-accent) !important; } body .section-product-card .card-text { color: var(--cplv-text); font-size: 15px; line-height: 1.6; } /* Таблицы внутри бокса: у бокса теперь своё скругление, поэтому у таблицы верхняя рамка не нужна — иначе она рисует линию поперёк скруглённого угла. */ body .table-responsive.table-borders > .table > thead > tr > th { border-top: 0; } /* ============================================================================ 2. ВКЛАДКИ РАЗДЕЛОВ — «Tabs with Icons in Box» ============================================================================ Эталон — одноимённая секция Snowlake: иконка НАД подписью, вкладки равной ширины, активная лежит белой плашкой с тенью, остальные — на фоне страницы. ⚠️ КОГО ТРОГАЕМ. Тем же классом .nav-tabs в теме свёрстаны ДВЕ разные вещи: а) навигация по разделам — биллинг, детали аккаунта, история, контакты, партнёрка, безопасность, вкладки услуг на главной. Их и переделываем; б) ФИЛЬТРЫ списков — «Все / Активные / Отменённые» в услугах, доменах, тикетах. У них у ссылки класс .nav-link-slider, href="#Active" и data-sorter. Это не разделы: иконки им не нужны, а крупные боксы вместо строки фильтров сделали бы список неудобным. Разделяем их по .nav-link-slider — единственному надёжному признаку в разметке. ⚠️ Область правил задана через :has(): ширину и отступы надо менять у того