/* Темы оформления ТДС. * * Всё держится на переменных из shell.css. Тема — это набор их значений, а не * отдельная копия стилей: копия неизбежно отстаёт, и однажды кнопка, * добавленная в тёмной теме, оказывается невидимой в светлой. * * Тема ставится атрибутом на , поэтому переключение мгновенное и не * требует перезагрузки. Значения по умолчанию (тёмная тема) живут в :root, а * здесь — то, что от них отличается. */ /* ------------------------------- светлая ------------------------------- */ html[data-theme="light"] { --bg: #ffffff; --panel: #f7f7f9; --surface: #f1f1f4; --surface-raised: #ffffff; --surface-hover: #ebebef; --line: #e3e3e8; --line-strong: #d2d2da; --text: #16161a; --text-dim: #5c5c68; --text-faint: #8e8e9a; --blue: #2f7bf6; --blue-hover: #1f6ae5; --danger: #d33a35; --bubble-in: #ffffff; --bubble-in-text: #16161a; --bubble-out: #d6e6ff; --bubble-out-text: #12243d; --accent-soft: #2f6ac4; /* Тень вместо затемнения: на белом фоне полупрозрачный чёрный даёт грязно-серый, а не мягкую подложку. */ --reaction-bg: #0000000f; } /* Светлая тема — единственная, где тёмные тени и подсветки читаются иначе. Собраны здесь, чтобы не искать их по всему файлу. */ html[data-theme="light"] .bubble { box-shadow: 0 1px 2px rgba(0, 0, 0, .06); } html[data-theme="light"] .sidebar__letter { color: #9a9aa8; } html[data-theme="light"] .gate__submit:not(:disabled) { background: #16161a; color: #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, .16); } html[data-theme="light"] .choice__option[data-active="true"] { background: #16161a; color: #ffffff; border-color: #16161a; } html[data-theme="light"] .tabbar { background: rgba(255, 255, 255, .92); box-shadow: 0 10px 30px rgba(0, 0, 0, .14); } html[data-theme="light"] .phone__picker, html[data-theme="light"] .modal { background: #ffffff; } html[data-theme="light"] .fab { background: #16161a; color: #ffffff; } /* ------------------------------ приглушённая --------------------------- */ /* Не чёрная, а тёмно-синяя: чистый чёрный на матрице OLED даёт резкую границу со светлым текстом, от которой к ночи устают глаза. */ html[data-theme="dim"] { --bg: #0f1419; --panel: #131920; --surface: #182028; --surface-raised: #1e2732; --surface-hover: #243040; --line: #232e3a; --line-strong: #31404f; --text: #e8edf2; --text-dim: #93a3b3; --text-faint: #647485; --bubble-in: #1e2732; --bubble-in-text: #e8edf2; --bubble-out: #2b4257; --bubble-out-text: #eaf2fa; --accent-soft: #8fb8e8; } /* --------------------------- цвета пузырьков --------------------------- */ /* Отдельно от темы: человек может хотеть светлую тему и зелёные пузырьки. Задаётся вторым атрибутом, поэтому наборы не размножаются по числу тем. */ html[data-bubble="blue"] { --bubble-out: #1d2836; --bubble-out-text: #f4f4f6; } html[data-theme="light"][data-bubble="blue"] { --bubble-out: #d6e6ff; --bubble-out-text: #12243d; } html[data-bubble="green"] { --bubble-out: #1e3226; --bubble-out-text: #eaf5ee; } html[data-theme="light"][data-bubble="green"] { --bubble-out: #d8f0e0; --bubble-out-text: #12301f; } html[data-bubble="violet"] { --bubble-out: #2a2440; --bubble-out-text: #f0ecfa; } html[data-theme="light"][data-bubble="violet"] { --bubble-out: #e4dcfa; --bubble-out-text: #241a3d; } html[data-bubble="amber"] { --bubble-out: #3a2f1c; --bubble-out-text: #faf1e0; } html[data-theme="light"][data-bubble="amber"] { --bubble-out: #fbecd0; --bubble-out-text: #3a2a0c; } html[data-bubble="rose"] { --bubble-out: #3a2029; --bubble-out-text: #fae8ee; } html[data-theme="light"][data-bubble="rose"] { --bubble-out: #fbdce6; --bubble-out-text: #3d1424; } html[data-bubble="graphite"] { --bubble-out: #2a2a2e; --bubble-out-text: #f2f2f4; } html[data-theme="light"][data-bubble="graphite"] { --bubble-out: #e6e6ea; --bubble-out-text: #1a1a1e; } /* -------------------------------- обои --------------------------------- */ /* Рисуются на подложке, а не на самом контейнере: фон под прокручиваемым списком иначе уезжает вместе с сообщениями. */ .thread { position: relative; } .thread::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--wallpaper); background-size: var(--wallpaper-size); background-position: center; opacity: var(--wallpaper-opacity, 1); } .thread__inner { position: relative; z-index: 1; } /* Готовые обои. Все нарисованы средствами браузера, без картинок: файл в двести килобайт на каждую тему — это лишняя секунда загрузки на телефоне ради фона, который человек перестаёт замечать через день. */ html[data-wallpaper="none"] { --wallpaper: none; } /* Сетка — то, что было на экране входа. */ html[data-wallpaper="grid"] { --wallpaper: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); --wallpaper-size: 44px 44px; } html[data-theme="light"][data-wallpaper="grid"] { --wallpaper: linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px); } /* Мягкое свечение по углам. */ html[data-wallpaper="aurora"] { --wallpaper: radial-gradient(60% 50% at 15% 10%, rgba(64,110,190,.20), transparent 70%), radial-gradient(55% 45% at 85% 85%, rgba(150,80,170,.16), transparent 70%); --wallpaper-size: cover; } html[data-theme="light"][data-wallpaper="aurora"] { --wallpaper: radial-gradient(60% 50% at 15% 10%, rgba(64,110,190,.14), transparent 70%), radial-gradient(55% 45% at 85% 85%, rgba(150,80,170,.10), transparent 70%); } html[data-wallpaper="dots"] { --wallpaper: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); --wallpaper-size: 22px 22px; } html[data-theme="light"][data-wallpaper="dots"] { --wallpaper: radial-gradient(rgba(0,0,0,.07) 1px, transparent 1px); } /* Диагональные полосы. */ html[data-wallpaper="stripes"] { --wallpaper: repeating-linear-gradient( 135deg, rgba(255,255,255,.022) 0 2px, transparent 2px 16px); --wallpaper-size: auto; } html[data-theme="light"][data-wallpaper="stripes"] { --wallpaper: repeating-linear-gradient( 135deg, rgba(0,0,0,.032) 0 2px, transparent 2px 16px); } /* Тёплый закат: единственный, где фон заметен, — для тех, кто хочет, чтобы переписка не выглядела как терминал. */ html[data-wallpaper="sunset"] { --wallpaper: radial-gradient(70% 60% at 20% 100%, rgba(200,90,60,.22), transparent 72%), radial-gradient(60% 50% at 90% 0%, rgba(90,60,140,.20), transparent 70%); --wallpaper-size: cover; } html[data-theme="light"][data-wallpaper="sunset"] { --wallpaper: radial-gradient(70% 60% at 20% 100%, rgba(240,150,110,.22), transparent 72%), radial-gradient(60% 50% at 90% 0%, rgba(150,120,200,.18), transparent 70%); } /* Ночь: тёмно-синее небо с редкими точками-звёздами. Точки расставлены вручную несимметрично — равномерная сетка сразу читается как узор, а не как небо. */ html[data-wallpaper="night"] { --wallpaper: radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.45), transparent 100%), radial-gradient(1px 1px at 31% 62%, rgba(255,255,255,.34), transparent 100%), radial-gradient(1.4px 1.4px at 58% 24%, rgba(255,255,255,.40), transparent 100%), radial-gradient(1px 1px at 74% 71%, rgba(255,255,255,.30), transparent 100%), radial-gradient(1.1px 1.1px at 88% 38%, rgba(255,255,255,.38), transparent 100%), radial-gradient(1px 1px at 44% 88%, rgba(255,255,255,.26), transparent 100%), linear-gradient(180deg, #0b1020 0%, #0a0d18 60%, #080a12 100%); --wallpaper-size: 320px 320px, 320px 320px, 320px 320px, 320px 320px, 320px 320px, 320px 320px, cover; } html[data-theme="light"][data-wallpaper="night"] { --wallpaper: linear-gradient(180deg, #dfe6f5 0%, #eef1f8 100%); --wallpaper-size: cover; } /* Хвоя: спокойный зелёный с мягкими пятнами света. */ html[data-wallpaper="forest"] { --wallpaper: radial-gradient(50% 40% at 25% 20%, rgba(90,150,110,.18), transparent 70%), radial-gradient(45% 40% at 80% 70%, rgba(60,110,90,.16), transparent 70%), linear-gradient(160deg, #0d1712 0%, #101a14 100%); --wallpaper-size: cover; } html[data-theme="light"][data-wallpaper="forest"] { --wallpaper: radial-gradient(50% 40% at 25% 20%, rgba(120,180,140,.28), transparent 70%), radial-gradient(45% 40% at 80% 70%, rgba(150,200,170,.26), transparent 70%), linear-gradient(160deg, #eef5f0 0%, #e6efe9 100%); } /* Глубина: холодная синева, как вода на глубине. */ html[data-wallpaper="sea"] { --wallpaper: radial-gradient(70% 55% at 50% -10%, rgba(70,130,190,.22), transparent 72%), linear-gradient(180deg, #0a1420 0%, #08101a 100%); --wallpaper-size: cover; } html[data-theme="light"][data-wallpaper="sea"] { --wallpaper: radial-gradient(70% 55% at 50% -10%, rgba(120,180,230,.35), transparent 72%), linear-gradient(180deg, #eaf2fa 0%, #e2ecf6 100%); } /* Угли: тёплый низ, тёмный верх. */ html[data-wallpaper="ember"] { --wallpaper: radial-gradient(80% 45% at 50% 108%, rgba(200,90,45,.28), transparent 70%), radial-gradient(50% 35% at 15% 92%, rgba(220,140,60,.16), transparent 72%), linear-gradient(180deg, #0d0b0a 0%, #14100d 100%); --wallpaper-size: cover; } html[data-theme="light"][data-wallpaper="ember"] { --wallpaper: radial-gradient(80% 45% at 50% 108%, rgba(240,160,110,.32), transparent 70%), linear-gradient(180deg, #fbf3ed 0%, #f7ece3 100%); } /* Плетение: две сетки под разными углами дают ткань, а не миллиметровку. */ html[data-wallpaper="mesh"] { --wallpaper: repeating-linear-gradient(45deg, rgba(255,255,255,.020) 0 1px, transparent 1px 12px), repeating-linear-gradient(-45deg, rgba(255,255,255,.020) 0 1px, transparent 1px 12px); --wallpaper-size: auto; } html[data-theme="light"][data-wallpaper="mesh"] { --wallpaper: repeating-linear-gradient(45deg, rgba(0,0,0,.030) 0 1px, transparent 1px 12px), repeating-linear-gradient(-45deg, rgba(0,0,0,.030) 0 1px, transparent 1px 12px); } /* Круги: расходящиеся кольца. Шаг крупный — мелкий рябит в глазах при прокрутке списка сообщений. */ html[data-wallpaper="rings"] { --wallpaper: repeating-radial-gradient( circle at 50% 50%, rgba(255,255,255,.028) 0 1px, transparent 1px 46px); --wallpaper-size: cover; } html[data-theme="light"][data-wallpaper="rings"] { --wallpaper: repeating-radial-gradient( circle at 50% 50%, rgba(0,0,0,.040) 0 1px, transparent 1px 46px); } /* Карбон: мелкая ёлочка, знакомая по чехлам для техники. */ html[data-wallpaper="carbon"] { --wallpaper: repeating-linear-gradient(45deg, rgba(255,255,255,.030) 0 2px, transparent 2px 4px), repeating-linear-gradient(-45deg, rgba(0,0,0,.20) 0 2px, transparent 2px 4px); --wallpaper-size: 8px 8px; } html[data-theme="light"][data-wallpaper="carbon"] { --wallpaper: repeating-linear-gradient(45deg, rgba(0,0,0,.045) 0 2px, transparent 2px 4px), repeating-linear-gradient(-45deg, rgba(0,0,0,.025) 0 2px, transparent 2px 4px); } /* Снег: точки трёх размеров на трёх сетках разного шага. Одна сетка даёт ровные ряды, три накладываются и выглядят случайно. */ html[data-wallpaper="snow"] { --wallpaper: radial-gradient(1.6px 1.6px at 20% 30%, rgba(255,255,255,.30), transparent 100%), radial-gradient(1.2px 1.2px at 70% 60%, rgba(255,255,255,.22), transparent 100%), radial-gradient(2px 2px at 45% 80%, rgba(255,255,255,.16), transparent 100%); --wallpaper-size: 90px 90px, 140px 140px, 210px 210px; } html[data-theme="light"][data-wallpaper="snow"] { --wallpaper: radial-gradient(1.6px 1.6px at 20% 30%, rgba(60,90,130,.22), transparent 100%), radial-gradient(1.2px 1.2px at 70% 60%, rgba(60,90,130,.16), transparent 100%), radial-gradient(2px 2px at 45% 80%, rgba(60,90,130,.12), transparent 100%); } /* Своя картинка. Значение --wallpaper-custom ставит wallpaper.js после того, как достанет фотографию из хранилища устройства. Пока картинки нет (например, человек открыл ТДС на другом устройстве, где её не выбирали), вместо неё показывается сетка — пустой чёрный экран выглядел бы поломкой. */ html[data-wallpaper="custom"] { --wallpaper: var(--wallpaper-custom, linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px)); --wallpaper-size: cover; } html[data-theme="light"][data-wallpaper="custom"] { --wallpaper: var(--wallpaper-custom, linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px)); } /* --------------------------- затемнение обоев --------------------------- */ /* Слой поверх фотографии, но под сообщениями. На светлом снимке белый текст пропадает совсем — а запрещать светлые фотографии значит решать за человека. Готовых обоев это не касается: они и так тусклые. */ .thread::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--wallpaper-dim, transparent); } /* Каждое правило привязано к custom явно, а не отменяется потом отдельной строкой «для всех остальных прозрачно». Так уже было написано, и в светлой теме отмена не срабатывала: у html[data-theme="light"][data-wallpaper-dim] вес выше, чем у html:not([data-wallpaper="custom"]), — и готовые обои белели без всякой причины. Готовые обои нарисованы уже приглушёнными, второй слой сверху сделал бы из них серый прямоугольник. */ html[data-wallpaper="custom"][data-wallpaper-dim="none"] { --wallpaper-dim: transparent; } html[data-wallpaper="custom"][data-wallpaper-dim="soft"] { --wallpaper-dim: rgba(0,0,0,.22); } html[data-wallpaper="custom"][data-wallpaper-dim="medium"] { --wallpaper-dim: rgba(0,0,0,.42); } html[data-wallpaper="custom"][data-wallpaper-dim="strong"] { --wallpaper-dim: rgba(0,0,0,.62); } /* В светлой теме затемнять нужно наоборот — осветлять, иначе тёмный текст на затемнённой фотографии становится нечитаемым вдвойне. */ html[data-theme="light"][data-wallpaper="custom"][data-wallpaper-dim="soft"] { --wallpaper-dim: rgba(255,255,255,.30); } html[data-theme="light"][data-wallpaper="custom"][data-wallpaper-dim="medium"] { --wallpaper-dim: rgba(255,255,255,.52); } html[data-theme="light"][data-wallpaper="custom"][data-wallpaper-dim="strong"] { --wallpaper-dim: rgba(255,255,255,.72); } /* ---------------------------- плотность списка ------------------------- */ /* Компактный режим: на большом экране в список помещается заметно больше, а на телефоне наоборот нужен просторный. Выбор за человеком. */ html[data-density="compact"] { --radius-xl: 22px; --radius-lg: 18px; --radius-md: 14px; } html[data-density="compact"] .row { padding-top: 8px; padding-bottom: 8px; } html[data-density="compact"] .bubble { padding: 7px 12px 6px; } html[data-density="compact"] .column__inner { padding-top: 14px; }