/* ========================================================================= SteelCRM — фирменный скин Steppe Steel (тёмный #0c0e12 + оранжевый #ff6b00) Один файл на два контекста: десктоп (app_include_css) и сайт/логин (web_include_css). Селекторы сверены с frappe v15 (ветка version-15): - тёмная тема = [data-theme="dark"] (desk/dark.scss) - .btn.btn-primary -> var(--btn-primary) (common/buttons.scss) - вкладки .nav-link.active -> var(--primary) (desk/form.scss) - канбан: --kanban-card-bg, .kanban-card-wrapper (desk/kanban.scss) - логин: body[data-path="login"] (templates/base.html), .page-card, .btn-login, .page-card-body (www/login.html + scss/login.bundle.scss) ========================================================================= */ /* ---------- A. Акцентная система: переменные (обе темы) ------------------ */ :root, [data-theme="light"] { --steel-accent: #ff6b00; --steel-accent-hover: #ff8c33; --primary: var(--steel-accent); /* вкладки, чекбоксы, прогресс-бары */ --btn-primary: var(--steel-accent); /* фон primary-кнопок desk */ } [data-theme="dark"] { --steel-accent: #ff6b00; --steel-accent-hover: #ff8c33; --primary: var(--steel-accent); --btn-primary: var(--steel-accent); /* в тёмной теме заливка чекбокса задана отдельным градиентом (dark.scss) */ --checkbox-gradient: linear-gradient(180deg, var(--steel-accent) -124.51%, var(--steel-accent) 100%); /* E. тёмные тонкие скроллбары (переменные из desk/scrollbar.scss) */ --scrollbar-thumb-color: #2a3240; --scrollbar-track-color: #141922; /* D. канбан: колонки и карточки в фирменных тёмных тонах */ --kanban-column-bg: #10141b; --kanban-card-bg: #161c26; } /* A. primary-кнопки: оранжевые, белый текст в обеих темах */ .btn.btn-primary { background-color: var(--steel-accent); color: #fff; } .btn.btn-primary:hover, .btn.btn-primary:focus { background-color: var(--steel-accent-hover); color: #fff; } /* A. чекбоксы: нативный акцент (кастомные закрашивает --checkbox-gradient) */ input[type="checkbox"] { accent-color: var(--steel-accent); } /* A. активный пункт бокового меню: оранжевая полоска слева */ .desk-sidebar .desk-sidebar-item.selected { box-shadow: inset 3px 0 0 0 var(--steel-accent); } /* A. выбранная вкладка формы: оранжевое подчёркивание 2px */ .form-tabs-list .form-tabs .nav-item .nav-link.active { border-bottom: 2px solid var(--steel-accent); } /* ---------- B. Шапка: тонкая фирменная линия снизу ---------------------- */ .navbar { border-bottom: 2px solid var(--steel-accent); } /* ---------- D. Канбан «как в amoCRM» ------------------------------------- Проблема: колонки залиты яркими сплошными цветами во всю высоту. Сверено с frappe v15 (ветка version-15): - views/kanban/kanban_column.html: яркий цвет — ИНЛАЙН-стиль на самой колонке
, а в заголовке УЖЕ есть цветной чип внутри .kanban-column-title (common/indicator.scss красит его тем же var(--bg-{цвет}) + точка ::before цветом var(--text-on-{цвет})); - CSS не знает цвет конкретной колонки (он только в inline-стиле), поэтому «цветная полоса сверху через ::before» невозможна. РЕШЕНИЕ: тело колонки гасим background-color !important (перебивает inline-стиль), цвет остаётся ТОЛЬКО чипом-точкой в заголовке — как в amoCRM. Чип оформляем аккуратным кругом (D2); - .add-new-column («+ Добавить колонку») исключена — у неё фон transparent из коробки и inline-цвета нет; - карточка: .kanban-cards .kanban-card-wrapper .kanban-card, заголовок .kanban-card-title, кнопка «+ Добавить Сделка» = .add-card (desk/kanban.scss). Всё заскоуплено .kanban. --------------------------- */ /* D1. Колонки: единый тёмный фон вместо яркой inline-заливки. var(--kanban-column-bg): секция A задаёт #10141b (тёмная тема), секция F переопределяет переменную на полупрозрачное «стекло» — var() подхватывает актуальное значение, glass-дизайн не ломается. В светлой теме переменная родная frappe (--gray-100) — тоже нейтральная */ .kanban .kanban-column:not(.add-new-column) { background-color: var(--kanban-column-bg, #10141b) !important; } /* D2. Цвет колонки — только точкой-чипом в заголовке (амо-стиль): штатный indicator-pill 20x20 с внутренней точкой превращаем в ровный круг 12px; фон чипа = тот же var(--bg-{цвет}), что был у колонки. Пилюли выбора цвета в дропдауне (.column-options) не трогаем */ .kanban .kanban-column .kanban-column-title .indicator-pill { width: 12px; height: 12px; min-width: 12px; padding: 0; border-radius: 50%; } .kanban .kanban-column .kanban-column-title .indicator-pill::before { content: none; } /* D3. Карточки: компактнее (снимаем min-height 100px и ужимаем отступы), скругление 10px, оранжевый акцент слева, заголовок жирнее */ .kanban .kanban-column .kanban-cards .kanban-card-wrapper .kanban-card { min-height: 0; border-radius: 10px; border: 1px solid var(--border-color); border-left: 3px solid var(--steel-accent); transition: box-shadow 0.15s ease, transform 0.15s ease; } .kanban .kanban-column .kanban-cards .kanban-card-wrapper .kanban-card .kanban-card-body { padding: 10px 12px; } .kanban .kanban-column .kanban-cards .kanban-card-wrapper .kanban-card .kanban-title-area { margin-bottom: 6px; } .kanban .kanban-card .kanban-card-title { font-weight: 600; line-height: 1.35; } /* D4. Тень при наведении на карточку (плюс едва заметный подъём) */ .kanban .kanban-column .kanban-cards .kanban-card-wrapper .kanban-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); transform: translateY(-1px); } /* D5. Кнопка «+ Добавить Сделка» — тише: прозрачный фон, серая пунктирная рамка, приглушённый текст; чуть заметнее при наведении */ .kanban .kanban-column .add-card { background-color: transparent; border: 1px dashed var(--border-color); border-radius: 8px; color: var(--text-muted); } .kanban .kanban-column .add-card:hover { background-color: rgba(255, 255, 255, 0.03); border-color: var(--gray-500); color: var(--text-color); } /* D6. Перетаскивание карточек: запрещаем выделение текста на всей доске — убирает серые «плашки» выделения на колонках при drag и серый экран при резком движении мышью (браузер выделял текст всей страницы). Поля ввода внутри канбана (композер «+ Добавить», имя новой колонки) возвращаем к обычному поведению, чтобы в них можно было выделять текст */ .kanban, .kanban * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .kanban input, .kanban textarea { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } /* D7. Пустые строки полей карточки не показываем (амо-стиль: без «Телефон:» с пустотой). Структура строки сверена с kanban_board.bundle.js get_doc_content(): .kanban-card-doc > div.text-muted.text-truncate > [Label: ] + значение; при отсутствии значения последний span пустой. @supports — страховка для старых браузеров без :has(): там правило просто не применится, канбан не пострадает */ @supports selector(:has(*)) { .kanban .kanban-card-doc > div:has(> span:last-child:empty) { display: none; } } /* D8. Страховка к D6: даже если выделение всё же случится (старый браузер, drag начат вне доски) — на досках оно НЕВИДИМО, серых плашек нет */ .kanban ::selection { background: transparent; } .kanban ::-moz-selection { background: transparent; } /* D9. Попапы обучения (driver.js) — всегда ПОВЕРХ стеклянных панелей: полупрозрачные колонки с backdrop-filter размывали текст попапа, когда тот оказывался за ними («призрак» за доской). Числа выше любых слоёв desk (модалки 1050, навбар 1030, welcome 2147480000 не конфликтует — он сам поверх всего и закрывается кликом) */ #driver-page-overlay { z-index: 100210 !important; } #driver-highlighted-element-stage { z-index: 100211 !important; } #driver-popover-item { z-index: 100212 !important; } /* D10. Перетаскивание карточки: «призрак»-заглушка на месте, откуда тащим. Штатный frappe (desk.bundle .sortable-ghost) делает её СПЛОШНЫМ серым box-ом с невидимым текстом (background: var(--fg-hover-color), color: transparent) — в тёмной теме это уродливый серый квадрат, а сама карточка едет за курсором (клон .sortable-fallback). Переопределяем заглушку в аккуратный «слот для сброса» как в amoCRM: прозрачный фон + оранжевый пунктир бренда, текст остаётся скрытым (это лишь метка «сюда»). forceFallback:true в kanban_board.bundle.js — за курсором идёт отдельный клон, его НЕ трогаем (карточка видна нормально). */ .kanban .sortable-ghost { background-color: transparent !important; border-color: transparent !important; } /* ЗАГЛУШКА = ТОНКАЯ ЛИНИЯ-УКАЗАТЕЛЬ (Trello-стиль, выбор владельца). Штатный frappe оставляет на месте карточки серый box с невидимым текстом — вместо него схлопываем карточку в тонкую оранжевую полоску: видно только «сюда упадёт», без второго квадрата. Селектор длиннее frappe-евского (совпадает по .kanban-column) → перебивает при равных !important, т.к. наш css грузится позже. */ .kanban .kanban-column .sortable-ghost > .kanban-card:not(.add-card) { height: 4px !important; min-height: 4px !important; max-height: 4px !important; padding: 0 !important; margin: 8px 4px !important; background: #ff6b00 !important; border: none !important; border-radius: 2px !important; box-shadow: 0 0 10px rgba(255, 107, 0, 0.6) !important; backdrop-filter: none !important; opacity: 1 !important; overflow: hidden !important; } /* всё содержимое призрака прячем — остаётся только линия */ .kanban .kanban-column .sortable-ghost > .kanban-card:not(.add-card) * { display: none !important; } /* клон, который тащим за курсором, — приподнимаем, чтобы читался «в руке» */ .kanban .sortable-fallback, .kanban .sortable-drag { opacity: 0.97 !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5) !important; } /* ---------- E. Выделение текста ----------------------------------------- */ html ::selection, body ::selection { background: var(--steel-accent); color: #fff; } /* ---------- C. Страница входа (жёстко заскоуплено body[data-path="login"], чтобы стили не протекали в остальной сайт). Селекторы сверены с frappe v15 (ветка version-15): - www/login.html: section.for-login > .page-card-head (img.app-logo + h4 «Login to {0}») стоит ВНЕ карточки .login-content.page-card; поля .email-field/.password-field > input.form-control + svg.field-icon (.email-icon/.password-icon) + .toggle-password; кнопка button.btn.btn-sm.btn-primary.btn-block.btn-login в .page-card-actions; - public/scss/login.bundle.scss: .page-card max-width 400px / padding 45px 10px; .field-icon left 9px top 5px; .page-card-head img max-height 42px; обёртка контента .page-content-wrapper; - шапка сайта: templates/base.html block navbar -> web_template standard_navbar -> templates/includes/navbar/navbar.html = nav.navbar.navbar-light.navbar-expand-lg. ---------------------------- */ /* C1. Фон: чистый тёмный сине-чёрный, без текстур; едва заметное тёплое свечение сверху за логотипом (как в макете) */ body[data-path="login"] { background-color: #0d1117; background-image: radial-gradient(90% 55% at 50% 0%, rgba(255, 107, 0, 0.07) 0%, rgba(13, 17, 23, 0) 60%); background-attachment: fixed; } /* C2. Шапку-navbar на логине скрыть полностью (в макете её нет) */ body[data-path="login"] header, body[data-path="login"] .navbar { display: none !important; } /* C3. Запас снизу под фиксированный копирайт (C9), чтобы карточка не наезжала на подпись на низких экранах */ body[data-path="login"] .page-content-wrapper { padding-bottom: 72px; } /* C4. Логотип: крупный, по центру, визуально над карточкой (page-card-head в login.html и так стоит вне .page-card — фон прозрачный, тёмная SVG-плашка /files/steelcrm-navbar.svg сливается с фоном = чистый логотип). max-height: none снимает штатный лимит 42px из login.bundle.scss */ body[data-path="login"] .page-card-head { background: transparent; padding: max(7vh, 40px) 0 20px; } body[data-path="login"] .page-card-head .app-logo { display: block; margin: 0 auto; width: 200px; max-width: 70vw; max-height: none; } /* C5. Заголовок «Добро пожаловать» — это перевод строки «Login to {0}» (translations/ru.csv); ниже серый подзаголовок через ::after, только на экране входа (.for-login — экраны forgot/signup без него) */ body[data-path="login"] .page-card-head h4 { margin-top: 18px; color: #f2f5f9; font-size: 26px; font-weight: 700; letter-spacing: 0.01em; } body[data-path="login"] .for-login .page-card-head h4::after { content: "Войдите в ваш аккаунт SteelCRM"; display: block; margin-top: 8px; color: #8b95a5; font-size: 14px; font-weight: 400; letter-spacing: 0; } /* C6. Карточка входа: ~420px по центру, скругление 14px, тёмная */ body[data-path="login"] .page-card { max-width: 420px; background-color: #12161d; border: 1px solid #232a35; border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 107, 0, 0.05); } /* C7. Поля: тёмные, выше штатных (42px), светлый текст, оранжевый фокус; штатные иконки .field-icon (20px) и «Показать» отцентрованы под 42px */ body[data-path="login"] .page-card .page-card-body input[type="text"], body[data-path="login"] .page-card .page-card-body input[type="email"], body[data-path="login"] .page-card .page-card-body input[type="password"] { height: 42px; background-color: #1a212b; color: #eef1f6; border: 1px solid #232a35; border-radius: 10px; padding-left: 38px; } body[data-path="login"] .page-card .page-card-body .field-icon { left: 12px; top: 11px; /* иконка 20px в поле 42px: (42-20)/2 = 11 */ } body[data-path="login"] .page-card .page-card-body .toggle-password { top: 13px; right: 12px; } body[data-path="login"] .page-card .page-card-body input:focus { border-color: var(--steel-accent); box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.25); outline: 0; } body[data-path="login"] .page-card .page-card-body ::placeholder { color: #8b95a5; opacity: 1; } body[data-path="login"] .page-card .page-card-body .form-label { color: #aeb7c4; } body[data-path="login"] .page-card .page-card-body .forgot-password-message > *, body[data-path="login"] .page-card .page-card-body .toggle-password { color: #8b95a5; } /* C8. Кнопка «Войти»: оранжевая, широкая, 44px, radius 10px (hover/active перекрывают bootstrap-состояния) */ body[data-path="login"] .page-card .btn-login.btn-primary { height: 44px; border-radius: 10px; background-color: var(--steel-accent); border-color: var(--steel-accent); color: #fff; font-size: 15px; font-weight: 600; } body[data-path="login"] .page-card .btn-login.btn-primary:hover, body[data-path="login"] .page-card .btn-login.btn-primary:focus { background-color: var(--steel-accent-hover) !important; border-color: var(--steel-accent-hover); color: #fff; } body[data-path="login"] .page-card .btn-login.btn-primary:not(:disabled):active { background-color: #e05f00 !important; color: #fff !important; } /* C8а. Кнопки LDAP / соцсетей (если включат) — тёмные, вписаны в карточку */ body[data-path="login"] .page-card .page-card-body .btn-login-option, body[data-path="login"] .page-card .btn-login.btn-default { background: #1a212b; color: #cdd5e0; border: 1px solid #232a35; } body[data-path="login"] .page-card .page-card-body .btn-login-option:hover, body[data-path="login"] .page-card .btn-login.btn-default:hover { background: #232a35; color: #eef1f6; } /* C8б. Подпись под карточкой ("Don't have an account? Sign up") */ body[data-path="login"] .sign-up-message { color: #8b95a5; } body[data-path="login"] .sign-up-message a { color: var(--steel-accent); } /* C9. Копирайт: мелкий серый, зафиксирован внизу по центру */ body[data-path="login"]::after { content: "© 2026 SteelCRM · Steppe Steel. Все права защищены."; position: fixed; left: 0; right: 0; bottom: 16px; text-align: center; color: #6a7280; font-size: 12px; pointer-events: none; z-index: 5; } /* ---------- F. Glass-дизайн (ночной город) — только тёмная тема desk ------ Референс владельца: дашборд amoCRM — фото ночного города на фоне, полупрозрачные тёмные карточки (glassmorphism), крупные цветные цифры. Селекторы сверены с frappe v15 (ветка version-15): - .widget, .number-widget-box > .widget-body .widget-content .number (scss/desk/desktop.scss) - .kanban .kanban-column; карточки берут фон из var(--kanban-card-bg) через @include card(...) (scss/desk/kanban.scss) - .desk-sidebar (scss/desk/desktop.scss) - .navbar { background: var(--navbar-bg) } (scss/desk/navbar.scss) - .page-head, .layout-main-section.frappe-card (scss/desk/page.scss) Атрибут темы стоит на (ui/theme_switcher.js), поэтому пишем [data-theme="dark"] ... . Страница логина исключена через body:not([data-path="login"]) — data-path есть только на сайте, у desk его нет (свои фон и стили логина — в секции C). Печать не трогаем: вся секция завёрнута в @media screen. Значения --kanban-* ниже сознательно перекрывают секцию A (позже в файле = приоритет при равной специфичности). */ @media screen { /* F1. Фон рабочего стола: ночной город + обязательное затемнение (градиент сверху — читаемость текста важнее красоты фото) */ [data-theme="dark"] body:not([data-path="login"]) { background-color: #090b0f; /* видно, пока фото не загрузилось */ background-image: linear-gradient(rgba(9, 11, 15, 0.55), rgba(9, 11, 15, 0.8)), url("/assets/factory_crm/images/bg-night.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } /* КРИТИЧНО: page-container в frappe красится непрозрачным var(--bg-color) (scss/desk/page.scss) и лежит поверх body — без этого правила фото города не видно вообще */ [data-theme="dark"] body:not([data-path="login"]) .content.page-container { background-color: transparent; } /* F2. Стеклянные поверхности: шапка и заголовок страницы (оба sticky — контент красиво «проплывает» под размытием) */ [data-theme="dark"] body:not([data-path="login"]) .navbar, [data-theme="dark"] .page-head { background-color: rgba(13, 17, 23, 0.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* F2. Карточки-виджеты дашборда/workspace, боковое меню, канбан-колонки */ [data-theme="dark"] .widget, [data-theme="dark"] .desk-sidebar, [data-theme="dark"] .kanban .kanban-column { background-color: rgba(13, 17, 23, 0.72); border: 1px solid rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } [data-theme="dark"] .desk-sidebar { border-radius: 12px; padding: 8px; } /* шапка колонки: полупрозрачная, чтобы не была глухой плашкой */ [data-theme="dark"] .kanban .kanban-column .kanban-column-header { background-color: rgba(13, 17, 23, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* F2/F5. Формы и таблицы-списки (list view): контейнер контента — лёгкая полупрозрачность, текст остаётся читаемым */ [data-theme="dark"] .layout-main-section.frappe-card { background-color: rgba(13, 17, 23, 0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* F2. Карточки канбана: фон через переменные frappe (без blur — карточек много, размытие на каждой било бы по производительности; они и так лежат на уже размытой колонке) */ [data-theme="dark"] { --kanban-column-bg: rgba(13, 17, 23, 0.72); --kanban-card-bg: rgba(22, 28, 38, 0.82); --kanban-new-card-bg: rgba(22, 28, 38, 0.6); --kanban-new-card-hover-bg: rgba(30, 38, 50, 0.92); } /* F3. Number Card: мягкое оранжевое свечение крупной цифры (сам цвет цифры задаёт фикстура 11_number_card.json, поле color) */ [data-theme="dark"] .widget.number-widget-box .widget-body .widget-content .number { text-shadow: 0 0 18px rgba(255, 107, 0, 0.35); } /* F4. Модальные окна — непрозрачные тёмные: диалог поверх фото обязан читаться идеально, стекло тут неуместно */ [data-theme="dark"] .modal .modal-content { background-color: #161c26; -webkit-backdrop-filter: none; backdrop-filter: none; } /* F6. Деградация: браузер без backdrop-filter (или с выключенным из-за производительности) получает почти непрозрачные поверхности — читаемость сохраняется, «стекло» просто отключается */ @supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) { [data-theme="dark"] body:not([data-path="login"]) .navbar, [data-theme="dark"] .page-head, [data-theme="dark"] .widget, [data-theme="dark"] .desk-sidebar, [data-theme="dark"] .kanban .kanban-column, [data-theme="dark"] .kanban .kanban-column .kanban-column-header, [data-theme="dark"] .layout-main-section.frappe-card { background-color: rgba(13, 17, 23, 0.94); } [data-theme="dark"] { --kanban-column-bg: rgba(13, 17, 23, 0.94); --kanban-card-bg: #161c26; --kanban-new-card-bg: #10141b; --kanban-new-card-hover-bg: #1e2632; } } } /* ---------- G. Полировка: убрать «сырые» элементы ERPNext (обе темы) ------ Селекторы сверены с frappe v15 (ветка version-15): - онбординг-виджет workspace: widgets/onboarding_widget.js -> this.widget.addClass("onboarding-widget-box"), база .widget (widgets/base_widget.js); - заголовок секции сайдбара («ОБЩЕСТВЕННОСТЬ» = Public, «МОИ» = приватные): views/workspace/workspace.js -> build_sidebar_section:
>