/* ============================================================================ 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 ============================================================================ */ :root { --cplv-green: #9ccd7e; --cplv-green-dark: #86bb66; --cplv-dark: #404040; --cplv-text: #606060; --cplv-border: #dfe3e8; --cplv-glow: 0 0 0 5px rgba(156, 205, 126, .25); /* Бокс — единые значения на всю панель. Меняешь тут — меняется везде. */ /* Полотно белое (решение владельца 30.08.2026), поэтому контраст даёт не фон страницы, а форма блока: тонкая линия и очень мягкая тень. */ --cplv-bg: #ffffff; --cplv-radius: 4px; --cplv-shadow: 0 5px 20px rgba(0, 0, 0, .04); --cplv-shadow-hover: 0 1px 2px rgba(0, 0, 0, .07); --cplv-accent: #1d1d1f; /* бывший фиолетовый: в монохромной схеме — тот же чернильный */ /* ---- бело-чёрная схема (решение владельца 30.08.2026) ---- Пробовали цветные заливки блоков (сиреневый градиент из палитры Snowlake, тёплый — у счёта): владельцу не подошло. Схема монохромная: блок белый, форму ему даёт линия в 1px и мягкая тень, а единственное «чёрное» пятно на экране — активная вкладка. Цвет остаётся только там, где он несёт смысл: зелёная кнопка действия и цветные бейджи статусов. ⚠️ Не добавлять сюда фирменные оттенки «для красоты»: на белом полотне любой лишний цвет сразу спорит с бейджем статуса и кнопкой. */ --cplv-surface: #ffffff; /* поверхность блока */ --cplv-surface-2: #f5f5f7; /* неактивная вкладка, плашка иконки */ --cplv-line: #e3e4e8; /* контур блока и разделители внутри него */ --cplv-line-strong: #c9cbd2; /* контур под курсором */ --cplv-ink: #1d1d1f; /* активная вкладка: почти чёрный, не #000 */ --cplv-ink-shadow: 0 6px 16px rgba(0, 0, 0, .18); } /* ============================================================================ 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(): ширину и отступы надо менять у того