/* ============================================================================ EuroNet — ТЕСТОВА темна тема адмін-інтерфейсу NoDeny УВАГА: це окремий файл від euronet-cabinet.css. Адмінка використовує інший шаблон (web/tmpl/base.html) і інший CSS (nody.css, 1445 рядків, 283 правила, ~198 жорстко зашитих кольорів) — стилі кабінету сюди не підключені взагалі. Підключати в web/tmpl/base.html ПІСЛЯ nody.css. Статус: перший прохід. Перевірено на головній сторінці адмінки — світлих блоків не лишилось. Інші екрани (тарифи, список абонентів, графіки, карта, PON, ВОЛЗ) можуть мати власні світлі місця: їх треба дивитись окремо. ============================================================================ */ /* ------------------------------------------------------------------ теми --- Три стани, так само як у кабінеті: 1) без атрибута на — слухаємо системне налаштування 2) — примусово світла (близька до стокової) 3) — примусово темна Атрибут виставляє euronet-admin-theme.js, вибір лежить у localStorage. --------------------------------------------------------------------------- */ :root { /* світла = максимально близько до стокових кольорів nody.css */ --a-canvas: #ededed; --a-surface: #ffffff; --a-surface-2: #f5f8fd; --a-ink: #000000; --a-soft: #303030; --a-muted: #666666; --a-border: #d2e3f5; --a-accent: #38a27d; --a-link: #3374b9; --a-link-hover: #4397f1; --a-on-accent: #ffffff; --a-danger: #d00000; --a-disabled-bg: #f0f0f0; --a-disabled-bd: #e0e0e0; --a-row2-bg: rgba(0,0,0,.022); --a-hover-bg: rgba(51,116,185,.07); --a-sel-bg: rgba(51,116,185,.14); --a-off-bg: #ffd7d7; --a-off-bg-hover:#ffc9c9; --a-off-bd: rgba(200,0,0,.25); --a-off-mark: #d00000; --a-overlay: rgba(238,238,238,.75); } /* системна темна — якщо користувач не обрав світлу вручну */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --a-canvas: #0e131d; --a-surface: #161d2b; --a-surface-2: #1c2434; --a-ink: #e8edf6; --a-soft: #b3bed1; --a-muted: #8794aa; --a-border: #2a3446; --a-accent: #3BDDBA; --a-link: #7fb2ea; --a-link-hover: #a8cef7; --a-on-accent: #0e131d; --a-danger: #ff7b80; --a-disabled-bg: #141a26; --a-disabled-bd: #222b3b; --a-row2-bg: rgba(255,255,255,.035); --a-hover-bg: rgba(127,178,234,.08); --a-sel-bg: rgba(127,178,234,.18); --a-off-bg: rgba(229,72,77,.13); --a-off-bg-hover:rgba(229,72,77,.21); --a-off-bd: rgba(229,72,77,.28); --a-off-mark: #e5484d; --a-overlay: rgba(8,12,20,.66); } } /* явний вибір темної — перебиває навіть системну світлу */ :root[data-theme="dark"] { --a-canvas: #0e131d; --a-surface: #161d2b; --a-surface-2: #1c2434; --a-ink: #e8edf6; --a-soft: #b3bed1; --a-muted: #8794aa; --a-border: #2a3446; --a-accent: #3BDDBA; --a-link: #7fb2ea; --a-link-hover: #a8cef7; --a-on-accent: #0e131d; --a-danger: #ff7b80; --a-disabled-bg: #141a26; --a-disabled-bd: #222b3b; --a-row2-bg: rgba(255,255,255,.035); --a-hover-bg: rgba(127,178,234,.08); --a-sel-bg: rgba(127,178,234,.18); --a-off-bg: rgba(229,72,77,.13); --a-off-bg-hover:rgba(229,72,77,.21); --a-off-bd: rgba(229,72,77,.28); --a-off-mark: #e5484d; --a-overlay: rgba(8,12,20,.66); } /* ---- база ---- */ html, body { background-color: var(--a-canvas) !important; color: var(--a-ink) !important; } a { color: var(--a-link) !important; } a:hover { color: var(--a-link-hover) !important; } /* ---- поля вводу (стокові: color:#660000, background:#fffff0) ---- */ input[type=text], input[type=password], textarea, select { color: var(--a-ink) !important; background-color: var(--a-surface-2) !important; border: 1px solid var(--a-border) !important; } input:disabled { color: var(--a-muted) !important; background-color: var(--a-disabled-bg) !important; border-color: var(--a-disabled-bd) !important; } /* ---- блоки ---- */ .box { background: var(--a-surface) !important; border: 1px solid var(--a-border) !important; border-radius: 10px !important; } /* скруглені кути малювались GIF-ами (box_tr.gif тощо) — на темному тлі це були світлі артефакти по кутах */ .box_tr, .box_tl, .box_t, .box_r, .box_l, .box_br, .box_bl, .box_b { background-image: none !important; min-height: 0 !important; } /* заголовок блоку малювався картинками box_title_l.png / box_title_r.png і мав color:#000000 */ .box_title { background-image: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } .box_title span { background-image: none !important; height: auto !important; min-width: 0 !important; padding: 12px 16px 6px !important; color: var(--a-ink) !important; font-size: 13px !important; font-weight: 600; } /* ---- таблиці ---- */ .row1, .row2, .rowoff, .rowoff2 { background-image: none !important; border-bottom: 1px solid var(--a-border) !important; } .row1 { background-color: transparent !important; } .row2 { background-color: var(--a-row2-bg) !important; } .row3, .row4 { border-bottom-color: var(--a-border) !important; } .head { color: var(--a-accent) !important; border-bottom: 1px solid var(--a-border) !important; } .head2 { background-color: var(--a-surface-2) !important; color: var(--a-ink) !important; } .head2 td { border-color: var(--a-border) transparent var(--a-border) transparent !important; } .head2 a { color: var(--a-link) !important; } table.pretty > thead > tr > td { background-color: var(--a-surface-2) !important; color: var(--a-ink) !important; } .bright_bg, table.bright_bg { background-color: var(--a-surface) !important; } /* ---- верхня панель ---- */ #adm_top, #adm_top_title_line { background-color: var(--a-surface) !important; color: var(--a-ink) !important; border-color: var(--a-border) !important; } #adm_top_info_line { background-color: var(--a-surface-2) !important; color: var(--a-soft) !important; border-color: var(--a-border) !important; } #top_block, #top_lines, #top_lines2, #left_block, #right_block { background-color: transparent !important; } /* ---- сповіщення й модалки ---- */ .small_msg, .small_info { background-color: var(--a-surface-2) !important; color: var(--a-soft) !important; border: 1px solid var(--a-border) !important; border-radius: 10px; } .small_msg a.close_button, .small_info a.close_button { background: var(--a-surface) !important; color: var(--a-muted) !important; border-color: var(--a-border) !important; text-shadow: none !important; } .modal_box { background: var(--a-surface) !important; border: 1px solid var(--a-border) !important; } /* ---- пагінація і бічне меню ------------------------------------------------ a.page (nody.css:637) мав background-color:#ffffff — єдиний світлий елемент, що лишався на сторінках зі списками (Історія платежів тощо). Активна сторінка в стоку відрізнялась лише кольором тексту (#d00000) — тут робимо її залитою, щоб було видно одразу. */ a.page { background-color: var(--a-surface-2) !important; border: 1px solid var(--a-border) !important; color: var(--a-soft) !important; } a.page:hover { background-color: var(--a-surface) !important; border-color: var(--a-link) !important; color: var(--a-link) !important; } a.page.active { background-color: var(--a-link) !important; border-color: transparent !important; color: var(--a-on-accent) !important; font-weight: 700; } .navmenu a { color: var(--a-link) !important; } /* ---- кнопки навігації (розділ «Абоненти» та ін.) -------------------------- Стокові a.nav / .nav_button мають color:#000000 !important (nody.css:578,584) плюс світлий градієнт background-image і text-shadow під світлий фон. Через !important на кольорі перебивати теж доводиться з !important. .page входить у ту саму градієнтну групу (nody.css:573) — тому тут скидається і background-image, інакше градієнт малювався б поверх фону. */ a.nav, .nav a, a.as_button, .as_button a, .nav_button, .dummy_nav_button, .page, a.page { background-image: none !important; background-color: var(--a-surface-2) !important; border-color: var(--a-border) !important; color: var(--a-soft) !important; text-shadow: none !important; } a.nav:hover, .nav a:hover, a.as_button:hover, .as_button a:hover, .nav_button:hover, .dummy_nav_button:hover { background-color: var(--a-surface) !important; border-color: var(--a-link) !important; color: var(--a-link) !important; } a.page.active { background-color: var(--a-link) !important; border-color: transparent !important; color: var(--a-on-accent) !important; font-weight: 700; } /* ---- верхня смуга-повідомлення в адмінці ---- */ .top_msg { background-color: var(--a-surface-2) !important; color: var(--a-soft) !important; border-color: var(--a-border) !important; } .top_msg > a.close_button:before { background: var(--a-surface) !important; color: var(--a-muted) !important; border-color: var(--a-border) !important; text-shadow: none !important; } /* лічильник «знайдено: N» — id саме add_top_info (друкарська помилка в стоковому коді, не adm_), задавав color:#000000 */ #add_top_info { color: var(--a-soft) !important; } /* ---- дрібніші поверхні й рамки --------------------------------------------- Це те, що не видно на око одразу: тонкі роздільники, рамки таблиць і блок фільтрів, який лежить прихованим (.filtrs_block.hidden) і світлішає лише в момент розкриття. */ /* блок фільтрів у списку абонентів — nody.css:1147, background:#ededed */ .filtrs_block { background-color: var(--a-surface) !important; } /* роздільна смуга під верхнім меню — nody.css:1329 */ .adm_top_line { background-color: var(--a-border) !important; border-color: transparent !important; } /* панель швидкого пошуку — nody.css:1099, background:#ffffff, color:#000000 */ .mUsers_search_info { background-color: var(--a-surface) !important; color: var(--a-ink) !important; border: 1px solid var(--a-border); } .mUsers_search_info .search_field a.pretty_select { border-color: var(--a-border) !important; } #adm_menu { border-top-color: var(--a-border) !important; } #adm_top_ed a, #adm_top_ed a.active { border-color: var(--a-border) !important; } /* рамки таблиць — nody.css:350, border-color:#e5eff6 */ table.border td, table.border .row1 td { border-color: var(--a-border) !important; } /* Від'ємні суми в стоку — чистий #ff0000. На темному тлі він «дзвенить» і гірше читається; пом'якшений відтінок лишається однозначно червоним. */ .error, .error a { color: var(--a-danger) !important; } /* ============================================================================ АДАПТИВНІСТЬ І ОФОРМЛЕННЯ Головна проблема: nody.css:9 задає html,body { width: fit-content }. Через це широка таблиця (у списку абонентів 12 колонок) розпирала ВЕСЬ документ — на екрані 790px сторінка мала ширину 1222px і вбік їхало все разом із верхнім меню. Тепер переповнення лишається всередині #main_block, а сторінка тримає ширину вікна. min-width:0 обовʼязковий: #main_block — flex-item у #content_block, а без цього flex-item не стискається менше за свій вміст і overflow не спрацює. ============================================================================ */ html, body { width: auto !important; min-width: 0 !important; overflow-x: hidden; } #content_block { min-width: 0; } #main_block { min-width: 0; overflow-x: auto; } #left_block, #right_block { min-width: 0; } /* ---- типографіка ---- */ html, body { font-family: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif !important; -webkit-font-smoothing: antialiased; } /* ---- поля вводу: у стоку padding 1.5pt і висота ~20px ---- */ input[type=text], input[type=password], textarea, select { padding: 6px 9px !important; border-radius: 6px !important; font-family: inherit !important; font-size: 12.5px !important; line-height: 1.3 !important; } input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus { outline: none; border-color: var(--a-accent) !important; } /* ---- кнопки ---- */ a.nav, .nav a, a.as_button, .as_button a, .nav_button, .dummy_nav_button, .page, a.page { border-radius: 6px !important; padding: 6px 11px !important; font-family: inherit !important; font-size: 12px !important; transition: background-color .13s ease, border-color .13s ease, color .13s ease; } /* ---- таблиці ---- */ .row1:hover, .row2:hover { background-color: var(--a-hover-bg) !important; } .td_wide td { padding-left: 8px !important; padding-right: 8px !important; } /* ---- скролбари ---- */ html { scrollbar-color: var(--a-border) var(--a-canvas); scrollbar-width: thin; } #main_block::-webkit-scrollbar, textarea::-webkit-scrollbar, select::-webkit-scrollbar { width: 10px; height: 10px; } #main_block::-webkit-scrollbar-track { background: var(--a-canvas); } #main_block::-webkit-scrollbar-thumb { background: var(--a-border); border-radius: 99px; } #main_block::-webkit-scrollbar-thumb:hover { background: var(--a-muted); } /* ============================================================================ ДЕРЕВО ПАПОК І ДОКУМЕНТІВ (розділ «Документи», бібліотека zTree) Окремий файл zTreeStyle.css, не входить у nody.css. Що ламало вигляд: .ztree color:#333 — темний текст на темному тлі .ztree li a color:#333 .curSelectedNode background:#FFE6B0 — жовте виділення зі світлого UI ul.line background:line_conn.gif — світлі лінії-звʼязки картинкою Іконки папок/документів НАВМИСНО лишені рідні (спрайт zTreeStandard.png): вони кольорові, на прозорому тлі й на темному читаються добре. Замінити їх на FontAwesome не вийде — адмінський шаблон (web/tmpl/base.html) підключає лише normalize.css і nody.css, FontAwesome там немає, тому гліфи рендерились би порожніми квадратами. ============================================================================ */ .ztree, .ztree * { font-family: inherit !important; } .ztree { color: var(--a-soft) !important; padding: 10px !important; } .ztree li { line-height: 20px !important; } .ztree li span { line-height: 20px !important; } .ztree li a { height: auto !important; padding: 3px 7px !important; line-height: 20px !important; border-radius: 5px; color: var(--a-soft) !important; } .ztree li a:hover { text-decoration: none !important; background: var(--a-hover-bg); color: var(--a-ink) !important; } .ztree li a.curSelectedNode, .ztree li a.curSelectedNode_Edit { height: auto !important; padding: 3px 7px !important; background-color: var(--a-sel-bg) !important; border: 1px solid var(--a-link) !important; color: var(--a-ink) !important; opacity: 1 !important; } /* лінії-звʼязки: картинка -> звичайна рамка */ .ztree li ul { padding-left: 20px !important; } .ztree li ul.line { background: none !important; margin-left: 9px !important; padding-left: 10px !important; border-left: 1px solid var(--a-border); } .ztree li span.button { vertical-align: middle !important; } /* перетягування вузлів */ ul.tmpTargetzTree { background-color: var(--a-sel-bg) !important; } ul.ztree.zTreeDragUL { background-color: var(--a-surface-2) !important; border-color: var(--a-link) !important; } /* ============================================================================ ONU В ОБРИВІ / ВІДКЛЮЧЕНІ РЯДКИ (.rowoff, .rowoff2, .rowover) Розділ PON-моніторингу: рядок ONU, що в обриві (напр. EPON0/0/3:40), отримує клас .rowoff. Стокові кольори розраховані на світлу тему: .rowoff { background-color: #ffd7d7 } nody.css:417 .rowoff2 { background-color: #ffd0d0 } .rowover { background-color: #ffd4d4 } На темній темі це давало яскраво-рожеву смугу, а текст лишався світлим — тобто майже білі літери на світло-рожевому. Виділення було, але читати рядок ставало важче за звичайний. Тут навпаки: приглушена червона підкладка (текст лишається контрастним) плюс суцільний червоний маркер ліворуч — око чіпляється за край рядка, а не за колір усього фону. ============================================================================ */ .rowoff, .rowoff2 { background-color: var(--a-off-bg) !important; } .rowoff:hover, .rowoff2:hover { background-color: var(--a-off-bg-hover) !important; } .rowover { background-color: var(--a-off-bg-hover) !important; } /* маркер ліворуч — inset-тінь, а не border: у таблиці з border-collapse рамка на tr не малюється стабільно */ tr.rowoff > td:first-child, tr.rowoff2 > td:first-child { box-shadow: inset 3px 0 0 var(--a-off-mark); } /* нижня межа теж злегка червона, щоб група обірваних читалась як блок */ tr.rowoff > td, tr.rowoff2 > td { border-bottom-color: var(--a-off-bd) !important; } /* ============================================================================ ГРАФІК ТРАФІКУ В АДМІНЦІ (Highcharts, картка абонента ?a=user) Той самий Highcharts, що і в кабінеті абонента, але тут інша тема — стилі з euronet-cabinet.css сюди не доходять, потрібні свої. Селектори НАВМИСНО без прив'язки до контейнера: у кабінеті графік лежить у #u_traf_graph, в адмінці — у #graph всередині #top_lines2. Загальні .highcharts-* спрацюють у будь-якому місці адмінки. Частину кольорів Highcharts задає атрибутом fill (перебивається легко), а підписи осей і легенду — інлайновим style="fill:#666666", тому там потрібен !important. ============================================================================ */ #graph, .highcharts-container { background: var(--a-surface) !important; border-radius: 10px; } #graph { margin: 4px 0; padding: 6px; border: 1px solid var(--a-border); } .highcharts-background { fill: var(--a-surface) !important; } .highcharts-plot-background { fill: none !important; } .highcharts-grid-line { stroke: var(--a-border) !important; } .highcharts-axis-line, .highcharts-tick { stroke: var(--a-border) !important; } .highcharts-axis-labels text, .highcharts-axis-labels text tspan { fill: var(--a-muted) !important; } .highcharts-axis-title, .highcharts-axis-title tspan { fill: var(--a-soft) !important; } .highcharts-legend-item text, .highcharts-legend-item text tspan { fill: var(--a-soft) !important; } .highcharts-title, .highcharts-title tspan { fill: var(--a-ink) !important; } .highcharts-credits { fill: var(--a-muted) !important; } .highcharts-tooltip-box { fill: var(--a-surface-2) !important; stroke: var(--a-border) !important; } .highcharts-tooltip text, .highcharts-tooltip text tspan { fill: var(--a-ink) !important; } /* ---- повзунок вибору періоду під графіком -------------------------------- .graph_slider описаний інлайновим