/* Шрифтова вісь теми (settings.php → вкладка «Тема», лише для адміна). Вмикається атрибутами data-cy-font-body / data-cy-font-headings на , значення беруться зі змінних --cy-font-body / --cy-font-heading. Іконкові шрифти навмисно виключені: Font Awesome і Material Design Icons мають власні гарнітури на елементі або його ::before, тож перекриття font-family перетворює іконки на квадратики чи робить їх порожніми. */ /* ========================================================================== 1) Основний текст ========================================================================== */ html[data-cy-font-body] body, html[data-cy-font-body] body button, html[data-cy-font-body] body input, html[data-cy-font-body] body select, html[data-cy-font-body] body textarea, html[data-cy-font-body] body optgroup, html[data-cy-font-body] body option, html[data-cy-font-body] body *:not(:where(i, [class*="fa-"], [class*="mdi"], [class*="material-icons"], [class*="material-symbols"], [data-lucide], code, kbd, pre, samp)) { font-family: var(--cy-font-body) !important; } /* Font Awesome ставить гарнітуру на сам контейнер, тому його псевдоелемент має успадкувати її, а не шрифт теми. */ html[data-cy-font-body] body .fa::before, html[data-cy-font-body] body [class*="fa-"]::before, html[data-cy-font-body] body [class*="material-icons"]::before, html[data-cy-font-body] body [class*="material-symbols"]::before { font-family: inherit; } /* Material Design Icons, навпаки, задає гарнітуру безпосередньо на ::before. `inherit` тут стирав іконку після ввімкнення власного шрифту: зникали подарунок, streak-вогник і мобільна кнопка відкриття leftbar. */ html[data-cy-font-body] body .mdi::before, html[data-cy-font-body] body .mdi-set { font-family: "Material Design Icons" !important; } /* Моноширинні місця лишаються моноширинними, який би шрифт не обрали. */ html[data-cy-font-body] body code, html[data-cy-font-body] body kbd, html[data-cy-font-body] body pre, html[data-cy-font-body] body samp { font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace !important; } /* Редактори коду. Ace ставить каретку арифметикою «номер колонки × ширина символу», тож пропорційний шрифт теми ламав саме позиціювання: текст був один, а каретка стояла між буквами й далі розʼїжджалася до кінця рядка. Тут гарнітура завжди моноширинна — незалежно від обраного шрифту теми. Селектори специфічніші за універсальне правило вище, тому виграють. */ html[data-cy-font-body] body .ace_editor, html[data-cy-font-body] body .ace_editor *, html[data-cy-font-body] body [class*="ace_"], html[data-cy-font-body] body #editor, html[data-cy-font-body] body .editor-mobile, html[data-cy-font-body] body .admin-code-area, html[data-cy-font-body] body .admin-sql-textarea, html[data-cy-font-body] body .CodeMirror, html[data-cy-font-body] body .CodeMirror * { font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace !important; } /* ========================================================================== 2) Заголовки ========================================================================== */ html[data-cy-font-headings] body h1, html[data-cy-font-headings] body h2, html[data-cy-font-headings] body h3, html[data-cy-font-headings] body h4, html[data-cy-font-headings] body h5, html[data-cy-font-headings] body h6, html[data-cy-font-headings] body .gold-title, html[data-cy-font-headings] body .gold-text, html[data-cy-font-headings] body .ana-title, html[data-cy-font-headings] body .page-title, html[data-cy-font-headings] body .section-title, html[data-cy-font-headings] body .monster-heading, html[data-cy-font-headings] body .welcome-title, html[data-cy-font-headings] body .welcome-title .name, html[data-cy-font-headings] body .welcome-title .welcome-greeting, html[data-cy-font-headings] body .elite-title, html[data-cy-font-headings] body .act-title, html[data-cy-font-headings] body .tc-title, html[data-cy-font-headings] body .fb-title, html[data-cy-font-headings] body .hw-title, html[data-cy-font-headings] body .tests-heading-title, html[data-cy-font-headings] body .achievement-heading-script, html[data-cy-font-headings] body .achievement-heading-main, html[data-cy-font-headings] body .ach-card-title, html[data-cy-font-headings] body .shop-card-title, html[data-cy-font-headings] body .course-card-title, html[data-cy-font-headings] body .profile-identity-name, html[data-cy-font-headings] body .stats-head-copy h4, html[data-cy-font-headings] body .luxe-card-head h4 { font-family: var(--cy-font-heading) !important; } /* ========================================================================== 3) Дрібні службові написи Кікери, лейбли й таблиці лишаються на шрифті основного тексту — інакше рукописна або антиквенна гарнітура в 9px стає нечитабельною. ========================================================================== */ html[data-cy-font-headings] body .ana-kicker, html[data-cy-font-headings] body .luxe-card-kicker, html[data-cy-font-headings] body .tests-heading-kicker, html[data-cy-font-headings] body .achievement-heading-kicker, html[data-cy-font-headings] body .form-label, html[data-cy-font-headings] body .menu-title, html[data-cy-font-headings] body table th { font-family: var(--cy-font-body, inherit) !important; }