/* Тема New — новый дизайн (design_handoff_prostospec/README.md, палитра amber). Токены дизайна (--bg, --card, --ink …) — для шаблонов New; --site-* переназначены на те же цвета, чтобы страницы, взятые из Smmuzi, были в той же гамме. */ /* атрибут hidden сильнее display из классов: иначе скрытые скриптом элементы видны («Показать ещё» в финансах на smmurf) */ [hidden] { display: none !important; } :root { --bg:#faf7f3; --card:#ffffff; --ink:#1c1712; --ink-h:#4a3f35; --ink2:#43392f; --muted:#8d8173; --muted2:#a89c8e; --line:#ece5dc; --line2:#f0eae2; --line3:#f5f0ea; --dash:#d4c8b9; --hover:#f7f1ea; --chip:#f4eee6; --sel:#fff0e2; --zebra:rgba(200,140,70,0.03); --accent:#e5484d; --accent-hover:#c93a3f; --notice-bg:#fff5ea; --notice-line:#f6d3ad; --note-grad-v:linear-gradient(180deg, #f7ece0 0%, #f1d6bb 55%, #eab894 100%); --note-in:rgba(255,253,250,0.88); --sb:rgba(70,52,34,0.24); --sb-hover:rgba(70,52,34,0.42); --dim-tint:transparent; --shadow-card:inset 0 0 0 1px var(--line2), 0 16px 36px -30px rgba(40,30,20,0.4); --shadow-tile:3px 4px 12px -6px rgba(60,44,30,0.14); --shadow-tile-hover:4px 6px 16px -6px rgba(60,44,30,0.18); --modal-dim:rgba(28,24,20,0.32); --od-head:#ffffff6b; --od-line:rgba(21,20,15,0.08); --ease:cubic-bezier(0.22,1,0.36,1); --font:"Manrope","Apple Color Emoji","Noto Color Emoji",sans-serif; color-scheme: light; /* системные выпадающие списки, поля и полосы прокрутки — в цвет темы */ } :root[data-theme="dark"] { --bg:#24221f; --card:#1c1a18; --ink:#efebe5; --ink-h:#e4e1da; --ink2:#cec8bf; --muted:#a49c91; --muted2:#8d867c; --line:#38342f; --line2:#34302b; --line3:#2f2b27; --dash:#57514a; --hover:#302c28; --chip:#2f2b27; --sel:#3a2d22; --zebra:rgba(255,255,255,0.022); --accent:#cf6a24; --accent-hover:#de7f3a; --notice-bg:#2b2723; --notice-line:#4a4238; --note-grad-v:linear-gradient(180deg, #3d3540 0%, #5a4436 55%, #7a5034 100%); --note-in:rgba(30,28,26,0.86); --sb:rgba(255,255,255,0.16); --sb-hover:rgba(255,255,255,0.3); --dim-tint:rgba(46,36,26,0.34); --shadow-card:inset 0 0 0 1px var(--line2), 0 16px 36px -30px rgba(0,0,0,0.5); --shadow-tile:3px 4px 12px -6px rgba(0,0,0,0.4); --shadow-tile-hover:4px 6px 16px -6px rgba(0,0,0,0.5); --modal-dim:rgba(8,7,6,0.55); --od-head:rgba(36,34,31,0.5); --od-line:rgba(255,255,255,0.055); color-scheme: dark; } /* =========================================================================== Набор цветов темы «Smmuzi». Здесь собраны все цвета сайта. Файл подключается первым, до остальных стилей, поэтому значения отсюда действуют на всех страницах — и на широком экране, и на телефоне. Два набора значений: :root — светлое оформление (по умолчанию) :root[data-theme="dark"] — тёмное, посетитель включает его сам Имя всегда занято одной ролью. Имя поверхности (фон, граница, тень) не используется для текста, и наоборот: иначе при переключении на тёмное оформление текст и фон поехали бы в одну сторону и слились. Чтобы сделать новую тему: скопируйте папку темы целиком и меняйте значения здесь — остальные файлы трогать не нужно. =========================================================================== */ :root { /* --- Поверхности ---------------------------------------------------- */ --site-bg: #faf7f3; /* фон страницы */ --site-card: #ffffff; /* карточки, таблицы, выпадающие списки */ --site-surface: #f4eee6; /* мягкий фон блоков внутри карточек */ --site-surface-soft: #fcfaf7; /* ещё светлее: строки таблиц, поля */ --site-surface-mute: #ece5dc; /* приглушённый: выключенные элементы */ --site-overlay: rgba(45, 42, 42, 0.902); /* подложка под окнами */ --site-veil: rgba(255, 255, 255, 0.85);/* полупрозрачная плёнка */ /* --- Границы -------------------------------------------------------- */ --site-border-soft: #f0eae2; /* еле заметная */ --site-border-mute: #ece5dc; /* разделители */ --site-border-strong: #d4c8b9; /* заметная: поля ввода в фокусе */ --site-border-cool: #e9eef3; /* холодная, в блоках со сводкой */ /* --- Текст ---------------------------------------------------------- */ --site-title: #1c1712; /* заголовки */ --site-title-soft: #4a3f35; /* подзаголовки */ --site-ink-strong: #1c1712; /* самый тёмный текст */ --site-text: #43392f; /* основной текст */ --site-text-soft: #43392f; /* пояснения */ --site-text-dim: #8d8173; /* второстепенное */ --site-text-mute: #a89c8e; /* подсказки, placeholder */ --site-text-faint: #c4b8aa; /* самое бледное */ --site-text-on-accent: #ffffff; /* текст на цветной кнопке */ --site-text-on-dark: #ffffff; /* текст на тёмной подложке */ /* --- Главный акцент: жёлтый (кнопки действия) ----------------------- */ --site-accent: #e5484d; --site-accent-hover: #c93a3f; /* наведение */ --site-accent-press: #b8363b; /* нажатие */ --site-accent-soft: #fde3e3; /* бледная заливка */ --site-accent-softer: #f7b9bb; /* промежуточная */ --site-accent-ink: #e5484d; /* текст акцентного цвета */ /* --- Второй акцент: оранжево-красный (ссылки, выделения) ------------ */ --site-mark: #e5484d; --site-mark-soft: #ec6e72; --site-mark-bg: #fff0e2; /* бледная заливка */ /* --- Состояния ------------------------------------------------------ */ --site-ok: #198754; /* успех */ --site-ok-bg: #d1e7dd; --site-ok-text: #0f5132; --site-ok-border: #badbcc; --site-warn: #ffc107; /* предупреждение */ --site-warn-bg: #fff3cd; --site-warn-text: #664d03; --site-warn-border: #ffecb5; --site-error: #dc3545; /* ошибка */ --site-error-soft: #f89797; --site-error-text: #c83c3c; --site-info: #0dcaf0; /* подсказка */ --site-info-bg: #cff4fc; --site-info-text: #055160; --site-info-border: #b6effb; /* --- Служебные цвета библиотеки (кнопки, ссылки Bootstrap) ---------- */ --site-link: #e5484d; --site-link-hover: #c93a3f; --site-link-press: #b8363b; --site-link-bg: #cfe2ff; --site-link-border: #b6d4fe; --site-link-text: #084298; --site-neutral: #6c757d; /* серая кнопка */ --site-neutral-hover: #5c636a; --site-neutral-dark: #565e64; --site-neutral-bg: #e2e3e5; --site-neutral-text: #41464b; /* --- Тени ----------------------------------------------------------- */ --site-shadow: rgba(149, 157, 165, 0.20); /* обычная тень блока */ --site-shadow-soft: rgba(0, 0, 0, 0.08); /* еле заметная */ --site-shadow-deep: rgba(0, 0, 0, 0.30); /* под окнами */ --site-glow-link: rgba(49, 132, 253, 0.50); /* обводка в фокусе */ --site-glow-neutral: rgba(130, 138, 145, 0.50); /* --- Дополнения: редкие, но свои цвета ------------------------------ */ --site-ink-black: #000000; /* самый чёрный текст */ --site-text-pale: #c2c2c2; /* очень бледный текст */ --site-text-gray: #7e7e7e; /* серый текст */ --site-link-dim: #7296b2; /* приглушённая голубая */ --site-accent-fg: #ffbe40; /* жёлтый значок на светлом */ --site-accent-deep: #ffab07; /* жёлтый в нажатии */ --site-accent-ink-2: #e17812; /* оранжевый текст */ --site-mark-fill: #fd5a3c; /* оранжевая заливка */ --site-mark-deep: #ff371b; /* насыщенная оранжевая */ --site-mark-warm: #ec7d63; /* тёплая оранжевая заливка */ --site-ok-fill: #84d184; /* зелёная заливка */ --site-fill-dark: #000000; /* чёрная заливка */ --site-border-gray: #a1a1a1; /* серая граница */ --site-border-dark: #333333; /* тёмная граница */ --site-border-shade: rgba(0, 0, 0, 0.20); /* граница на просвет */ --site-glow-link-soft: rgba(13, 110, 253, 0.25);/* мягкая обводка фокуса */ --site-icon-mute: #dbd4d9; /* бледный значок */ --site-teal-fill: #46aab5; /* бирюзовая заливка */ --site-link-text-deep: #06357a; /* тёмно-синий текст */ --site-warn-text-deep: #523e02; /* тёмно-жёлтый текст */ /* --- Точные оттенки: чтобы вид не поехал ---------------------------- */ --site-title-dim: #4a3f35; /* заголовок потемнее */ --site-text-ink: #43392f; /* тёплый тёмный текст */ --site-text-mid: #4e4e4e; /* средний серый текст */ --site-text-mid-2: #5d5d5d; --site-text-mid-3: #5e5e5e; --site-text-mid-4: #606060; --site-text-slate: #34383c; /* холодный тёмный текст */ --site-text-gray-2: #777777; --site-text-gray-3: #787878; --site-text-silver: #cccccc; --site-text-silver-2: #d3d3d3; --site-mark-bright: #ff6059; /* яркий красно-оранжевый текст */ --site-accent-text: #fda617; /* оранжевый текст */ --site-accent-orange: #fda617; /* оранжевая заливка */ --site-accent-amber: #fdc861; /* тёплая янтарная заливка */ --site-accent-gold: #fbb835; /* золотистая заливка */ --site-accent-bright: #ffb82f; /* яркая жёлтая заливка */ --site-accent-warm: #ff9a1b; /* тёплая оранжевая заливка */ --site-surface-warm: #e9dcda; /* тёплая светлая подложка */ --site-surface-ink: #212529; /* очень тёмная подложка */ --site-surface-slate: #343a40; /* тёмная холодная подложка */ --site-border-warm: #aeadac; /* тёплая серая граница */ --site-border-blue: #c3daeb; /* голубоватая граница */ --site-border-cool-2: #bcbebf; /* холодная серая граница */ --site-link-border-2: #0a53be; /* тёмно-синяя граница */ --site-ok-text-deep: #0c4128; /* тёмно-зелёный текст */ --site-info-text-deep: #04414d; /* тёмно-бирюзовый текст */ /* --- Текст на фирменной плашке -------------------------------------- */ /* Жёлтый и оранжевый не меняются между оформлениями, поэтому текст на них тоже обязан оставаться тёмным — иначе в тёмном он слился бы. */ --site-on-accent: #ffffff; --site-on-accent-soft: #ffffff; --site-on-accent-dim: #ffffff; --site-on-accent-mid: #ffffff; --site-on-accent-black: #ffffff; --site-on-accent-text: #ffffff; /* текст на жёлтой плашке, помягче */ /* Цвет текста самой страницы. Раньше его не было вовсе, и текст без своего цвета брал чёрный из браузера — в тёмном он переставал читаться. В светлом оформлении значение то же, что давал браузер. */ --site-base-text: #000000; --site-icon: #43392f; /* значок-маска: это цвет самого значка */ --site-menu-ink: #43392f; /* пункты меню в шапке */ --site-link-on-veil: #e5484d; /* ссылка в объявлении */ --site-border-light: #cccccc; /* рамка загрузчика файлов */ --site-border-warm-light: #e0dddd; /* рамка предпросмотра */ --site-text-quiet: #a0a0a0; /* служебная приписка в заказах */ --site-title-deep: #232323; /* заголовок в списке заказов */ --site-text-strong: #414141; /* описание услуги */ /* --- Всплывающие уведомления ---------------------------------------- */ /* У них насыщенный фон и светлый текст, поэтому читаются одинаково в светлом и тёмном — значения между оформлениями не меняются. */ --site-toast-bg: #444444; --site-toast-text: #eeeeee; --site-toast-ok-bg: #3c763d; --site-toast-ok-text: #dff0d8; --site-toast-ok-border: #d6e9c6; --site-toast-err-bg: #a94442; --site-toast-err-text: #f2dede; --site-toast-err-border:#ebccd1; --site-toast-warn-bg: #8a6d3b; --site-toast-warn-text: #fcf8e3; --site-toast-warn-border:#faebcc; --site-toast-info-bg: #31708f; --site-toast-info-text: #d9edf7; --site-loader: #9ec600; /* полоса загрузки во всплывающем окне */ --site-field-error: #dc143c; /* рамка поля с неверным значением */ --site-close-icon: #000000; /* крестик в окне подтверждения */ --site-remove: #ff0000; /* крестик удаления в списке городов */ --site-toast-line: #ffffff; /* разделитель в уведомлении */ --site-toast-loader: #ff0000; /* полоса обратного отсчёта */ /* Ссылка без своего класса. В светлом — тот же синий, что рисовал браузер, в тёмном он бы слился с подложкой. */ --site-anchor: #e5484d; /* Текст в блоке, которому администратор задал светлый фон. */ --site-on-light: #222222; --site-ok-bright: #20a347; /* зелёная отметка «выполнено» */ --site-toast-info-border:#bce8f1; /* рамка уведомления-подсказки */ } /* =========================================================================== Тёмное оформление той же темы. Включает посетитель сам, выбор запоминается в его браузере. Фирменные цвета (жёлтый и оранжевый) не меняются — по ним сайт узнаётся. Меняются поверхности, текст, границы и приглушаются бледные заливки, которые на тёмном фоне светились бы пятнами. =========================================================================== */ :root[data-theme="dark"] { --site-accent: #cf6a24; --site-accent-hover: #de7f3a; --site-accent-press: #b85b1c; --site-accent-softer: #5a3a22; --site-accent-ink: #de7f3a; --site-mark: #cf6a24; --site-mark-soft: #de7f3a; --site-on-accent: #ffffff; --site-on-accent-soft: #ffffff; --site-on-accent-dim: #ffffff; --site-on-accent-mid: #ffffff; --site-on-accent-black: #ffffff; --site-on-accent-text: #ffffff; /* --- Поверхности ---------------------------------------------------- */ --site-bg: #24221f; --site-card: #1c1a18; --site-surface: #2f2b27; --site-surface-soft: #2a2723; --site-surface-mute: #38342f; --site-overlay: rgba(10, 9, 11, 0.94); --site-veil: rgba(31, 29, 33, 0.88); --site-surface-warm: #2a2426; --site-surface-ink: #0d0c0e; --site-surface-slate: #15181c; /* --- Границы (на тёмном они светлее фона) --------------------------- */ --site-border-soft: #34302b; --site-border-mute: #38342f; --site-border-strong: #57514a; --site-border-cool: #2e343d; --site-border-gray: #595362; --site-border-dark: #4e4956; --site-border-shade: rgba(255, 255, 255, 0.14); --site-border-warm: #514b52; --site-border-blue: #35414f; --site-border-cool-2: #474249; /* --- Текст ---------------------------------------------------------- */ --site-title: #efebe5; --site-title-soft: #e4e1da; --site-title-dim: #e4e1da; --site-ink-strong: #efebe5; --site-ink-black: #ffffff; --site-base-text: #e4e0e6; --site-icon: #cec8bf; --site-menu-ink: #cec8bf; --site-accent-gold: #6b5420; /* в паре с приглушённой жёлтой заливкой */ --site-accent-orange: #6b4a1c; /* в паре с приглушённой оранжевой */ --site-text: #cec8bf; --site-text-ink: #cec8bf; --site-text-soft: #cec8bf; --site-text-mid: #c4bfc8; --site-text-mid-2: #bab5bf; --site-text-mid-3: #b9b4be; --site-text-mid-4: #b7b2bc; --site-text-slate: #d4d0d8; --site-text-dim: #a49c91; --site-text-mute: #8d867c; --site-text-gray: #948f99; --site-text-gray-2: #9a959f; --site-text-gray-3: #99949e; --site-text-faint: #6f685f; --site-text-pale: #6f6a75; --site-text-silver: #625d68; --site-text-silver-2: #5d5863; --site-text-on-accent: #ffffff; --site-text-on-dark: #ffffff; /* --- Бледные заливки: приглушаем, иначе светятся пятнами ------------ */ --site-accent-soft: #4a3020; --site-mark-bg: #3a2d22; --site-icon-mute: #5a555f; --site-fill-dark: #0a0a0b; /* --- Состояния ------------------------------------------------------ */ --site-ok: #2ea36a; --site-ok-bg: #17301f; --site-ok-text: #86d6a4; --site-ok-text-deep: #7fc99a; --site-ok-border: #2a4a35; --site-ok-fill: #3f7a4f; --site-warn-bg: #332a10; --site-warn-text: #f2d08a; --site-warn-text-deep: #e8c77a; --site-warn-border: #4a3d18; --site-error: #e45c6a; --site-error-soft: #9c3a3f; --site-error-text: #f0a0a6; --site-info-bg: #10323a; --site-info-text: #8fdcea; --site-info-text-deep: #7fcdda; --site-info-border: #22505c; --site-teal-fill: #2d5f66; /* --- Ссылки и серые кнопки библиотеки -------------------------------- */ --site-link: #de7f3a; --site-link-hover: #e8955a; --site-link-press: #cf6a24; --site-link-bg: #16283f; --site-link-border: #2a4668; --site-link-border-2: #3a6bb5; --site-link-text: #a8c8ff; --site-link-text-deep: #9ec4ff; --site-link-on-veil: #de7f3a; --site-link-dim: #8fadc4; --site-neutral: #8b949e; --site-neutral-hover: #9aa3ad; --site-neutral-dark: #767f88; --site-neutral-bg: #2a2d30; --site-neutral-text: #c4c9ce; /* --- Тени ----------------------------------------------------------- */ --site-shadow: rgba(0, 0, 0, 0.50); --site-shadow-soft: rgba(0, 0, 0, 0.30); --site-shadow-deep: rgba(0, 0, 0, 0.65); --site-glow-link: rgba(90, 155, 255, 0.50); --site-glow-neutral: rgba(140, 148, 158, 0.45); --site-glow-link-soft: rgba(90, 155, 255, 0.28); --site-border-light: #46414c; --site-border-warm-light: #433d44; --site-text-quiet: #8b868f; --site-title-deep: #e8e4ea; --site-text-strong: #cfcad4; --site-close-icon: #e4e0e6; --site-anchor: #de7f3a; --site-ok-bright: #4ec47a; /* --- Полоса прокрутки ------------------------------------------------ */ /* Оформляется только в тёмном: в светлом она остаётся такой, какой её рисует система, и менять этот вид не просили. */ --site-scroll-track: #1a181c; --site-scroll-thumb: #3e3942; --site-scroll-hover: #4e4852; } /* пункты системного списка: фон и текст из темы (иначе в тёмной теме — светлый текст на белом) */ select option { background: var(--card); color: var(--ink); }