/* =============================== Скины под фото: Sage & Wood, Denim & Cardboard Подключение: Включение: или data-skin="denim-cardboard" =============================== */ /* ===== Общие утилиты для скинов ===== */ html[data-skin] body{ color: var(--text); } /* Небольшие косметические донастройки поверх базовых правил из index.html */ html[data-skin] .card{ border-radius: 14px; box-shadow: var(--shadow); } html[data-skin] dialog{ border-radius: 16px; box-shadow: var(--shadow); } html[data-skin] .btn{ color: inherit; border-radius: 10px; } html[data-skin] .chip{ border-radius: 999px; } /* -------------------------------------------------- SKIN 1: Sage & Wood — дерево, картон, зелень Тёплые нейтральные + шалфейный акцент -------------------------------------------------- */ /* Dark */ html[data-skin="sage-wood"][data-theme="dark"]{ --bg: #072018; /* фон страницы (почти чёрный с зелёным тоном) */ --bg2: #03110c; --panel: #061810ef; /* карточки/панели */ --muted: #1c2320e6; /* вторичный фон кнопок */ --text: #e7ece9; /* основной текст (молочный) */ --sub: #a8b6ad; /* вторичный текст */ --accent: #6fbf8eda; /* шалфейный */ --accent-2: #dda25ed2; /* янтарно-картонный (ссылки/второй акцент) */ --danger: #ef4444; --warning: #f59e0b; --border: #202823; /* границы */ --shadow: 0 12px 28px rgba(0,0,0,.45); --chip-bg: #121713; --chip-br: #202823; --input-bg: #0f1411; --input-br: #202823; --nav-bg: rgba(14,17,16,.52); --divider: #1a211e; } html[data-skin="sage-wood"][data-theme="dark"] body{ background: radial-gradient(900px 600px at 110% -10%, rgba(111,191,142,.10), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(221,161,94,.06), transparent 60%), var(--bg); } /* Светлая тема */ html[data-skin="sage-wood"][data-theme="light"]{ --bg: #f4f5f0; /* тёплый светлый фон */ --bg2: #e7ebe4; --panel: #ffffffe3; --muted: #eef2eed9; --text: #0f1512; --sub: #58655e; --accent: #2e7a56c9; /* шалфей+хвоя */ --accent-2: #dda15ec9; /* картон/дерево */ --danger: #b91c1c; --warning: #b45309; --border: #d9e3da; --shadow: 0 8px 22px rgba(0,0,0,.08); --chip-bg: #f3f6f3; --chip-br: #d9e3da; --input-bg: #ffffff; --input-br: #d9e3da; --nav-bg: rgba(255,255,255,.5); --divider: #e5efe6; } html[data-skin="sage-wood"][data-theme="light"] body{ background: radial-gradient(900px 600px at 110% -10%, rgba(46,122,87,.08), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(183,121,31,.06), transparent 60%), var(--bg); } /* Кнопки с акцентом/первичные */ html[data-skin="sage-wood"] .btn.primary{ background: linear-gradient(180deg, color-mix(in oklab, var(--accent), black 14%), color-mix(in oklab, var(--accent), black 24%)); border-color: color-mix(in oklab, var(--accent), black 30%); color: #fff; } html[data-skin="sage-wood"][data-theme="light"] .btn.primary{ background: var(--accent-2); border-color: color-mix(in oklab, var(--accent-2), black 20%); color:#000000; } html[data-skin="sage-wood"][data-theme="light"] .btn.accent{ background: var(--accent); border-color: color-mix(in oklab, var(--accent), black 20%); color:#000000; } html[data-skin="sage-wood"] .btn.accent{ background: linear-gradient(180deg, color-mix(in oklab, var(--accent-2), white 8%), var(--accent-2)); border-color: color-mix(in oklab, var(--accent-2), black 18%); color:#fff; } /* Фото-карточки: оверлеи под палитру */ html[data-skin="sage-wood"] .card.photo .titlebar{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.58); background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0) 65%); } html[data-skin="sage-wood"] .card.photo .actions.actions-icons .btn.icon{ background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.2); } html[data-skin="sage-wood"][data-theme="light"] .card.photo .actions.actions-icons .btn.icon{ background: rgba(31,36,33,.40); border-color: rgba(0,0,0,.14); } /* Скелет загрузки – оттенки шалфея/янтаря */ html[data-skin="sage-wood"] .thumb.skeleton::before{ background: linear-gradient(90deg, rgba(111,191,142,.12), rgba(221,161,94,.18), rgba(111,191,142,.12)); } /* -------------------------------------------------- SKIN 2: Denim & Cardboard — сталь/гараж + картон Холодный синий + тёплые янтарные акценты -------------------------------------------------- */ /* Dark */ html[data-skin="denim-cardboard"][data-theme="dark"]{ --bg: #0f1317; --bg2: #0c1014; --panel: #141a20; --muted: #1a212a; --text: #e8ecf1; --sub: #a7b0ba; --accent: #69a1ff; /* деним */ --accent-2: #d7a25a; /* картон */ --danger: #ef4444; --warning:#f59e0b; --border: #202833; --shadow: 0 12px 26px rgba(0,0,0,.45); --chip-bg: #11161c; --chip-br:#202833; --input-bg: #0f141a; --input-br:#202833; --nav-bg: rgba(15,19,23,.85); --divider: #1c2430; } html[data-skin="denim-cardboard"][data-theme="dark"] body{ background: radial-gradient(900px 600px at 110% -10%, rgba(105,161,255,.10), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(215,162,90,.06), transparent 60%), var(--bg); } /* Light */ html[data-skin="denim-cardboard"][data-theme="light"]{ --bg: #f5f7fb; --bg2: #e7eef9; --panel: #ffffff; --muted: #eef2f8; --text: #0f1418; --sub: #4b5565; --accent: #3b82f6; /* василёк */ --accent-2: #ca8a04; /* янтарь */ --danger: #b91c1c; --warning:#b45309; --border: #dbe4f0; --shadow: 0 8px 22px rgba(0,0,0,.06); --chip-bg: #f1f5f9; --chip-br:#dbe4f0; --input-bg: #ffffff; --input-br:#dbe4f0; --nav-bg: rgba(255,255,255,.9); --divider: #e5edf6; } html[data-skin="denim-cardboard"][data-theme="light"] body{ background: radial-gradient(900px 600px at 110% -10%, rgba(59,130,246,.08), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(202,138,4,.06), transparent 60%), var(--bg); } html[data-skin="denim-cardboard"] .btn.primary{ background: linear-gradient(180deg, color-mix(in oklab, var(--accent), black 16%), color-mix(in oklab, var(--accent), black 28%)); border-color: color-mix(in oklab, var(--accent), black 32%); color:#fff; } html[data-skin="denim-cardboard"][data-theme="light"] .btn.primary{ background: var(--accent); border-color: color-mix(in oklab, var(--accent), black 20%); } html[data-skin="denim-cardboard"] .btn.accent{ background: linear-gradient(180deg, color-mix(in oklab, var(--accent-2), white 8%), var(--accent-2)); border-color: color-mix(in oklab, var(--accent-2), black 18%); color:#fff; } html[data-skin="denim-cardboard"] .thumb.skeleton::before{ background: linear-gradient(90deg, rgba(105,161,255,.10), rgba(215,162,90,.18), rgba(105,161,255,.10)); }