/* styles.css – kompletní vzhled startovací stránky. Barvy jsou řízeny CSS proměnnými, motiv se přepíná atributem data-theme na elementu . Žádný build proces ani preprocesor. */ /* ========================================================================== 1. MOTIVY (11 palet) ========================================================================== */ /* ========================================================================== 1. BAREVNÉ MOTIVY Tmavá a světlá sada jsou samostatné; přepínač v nastavení mezi nimi přepíná a nabídne vždy jen motivy dané sady. Každý motiv má tři stupně sytosti (data-intensity) – tlumené obměny vznikly smícháním barev se šedou o stejném jasu, takže kontrastní poměry zůstávají. Bloky jsou generované, ruční zásahy dělejte v seznamu THEMES v app.js. ========================================================================== */ /* ===================== TMAVÁ SADA ===================== */ /* Tmavá břidlice */ [data-theme="slate-dark"] { --bg-page: #020617; --bg-card: #0f172a; --bg-card-hover: #1e293b; --border-card: #1e293b; --border-hover: #6366f1; --text-main: #f8fafc; --text-sub: #cbd5e1; --text-muted: #94a3b8; --accent: #6366f1; --accent-hover: #4f46e5; --accent-soft: rgba(99, 102, 241, 0.15); --accent-text: #ffffff; --input-bg: #020617; --input-border: #334155; --tile-bg: #020617; --tile-hover: #1e1b4b; --tile-border: #1e293b; --modal-bg: #0f172a; --modal-header: #1e293b; --modal-border: #334155; --shadow-color: rgba(0, 0, 0, 0.5); --warm: #fbbf24; --warm-soft: rgba(251, 191, 36, 0.12); --good: #34d399; --bad: #fb7185; } [data-theme="slate-dark"][data-intensity="muted"] { --accent: #6d6ec6; --accent-hover: #5753b9; --accent-soft: rgba(109, 110, 198, 0.16); --border-hover: #6d6ec6; --warm: #edc277; --warm-soft: rgba(237, 194, 119, 0.12); --good: #73cca4; --bad: #e4808d; } [data-theme="slate-dark"][data-intensity="quiet"] { --accent: #7272a8; --accent-hover: #5b5999; --accent-soft: rgba(114, 114, 168, 0.16); --border-hover: #7272a8; --warm: #e3c494; --warm-soft: rgba(227, 196, 148, 0.12); --good: #8dc7ab; --bad: #d38a92; } /* Grafit */ [data-theme="graphite-dark"] { --bg-page: #0a0a0a; --bg-card: #161616; --bg-card-hover: #242424; --border-card: #2e2e2e; --border-hover: #cfcfcf; --text-main: #f6f6f6; --text-sub: #d1d1d1; --text-muted: #a8a8a8; --accent: #cfcfcf; --accent-hover: #bdbdbd; --accent-soft: rgba(207, 207, 207, 0.16); --accent-text: #0f0f0f; --input-bg: #0e0e0e; --input-border: #424242; --tile-bg: #111111; --tile-hover: #222222; --tile-border: #2b2b2b; --modal-bg: #161616; --modal-header: #111111; --modal-border: #2e2e2e; --shadow-color: rgba(0, 0, 0, 0.6); --warm: #fbbf24; --warm-soft: rgba(251, 191, 36, 0.12); --good: #34d399; --bad: #fbc471; } [data-theme="graphite-dark"][data-intensity="muted"] { --accent: #cfcfcf; --accent-hover: #bdbdbd; --accent-soft: rgba(207, 207, 207, 0.16); --border-hover: #cfcfcf; --warm: #edc277; --warm-soft: rgba(237, 194, 119, 0.12); --good: #73cca4; --bad: #eec795; } [data-theme="graphite-dark"][data-intensity="quiet"] { --accent: #cfcfcf; --accent-hover: #bdbdbd; --accent-soft: rgba(207, 207, 207, 0.16); --border-hover: #cfcfcf; --warm: #e3c494; --warm-soft: rgba(227, 196, 148, 0.12); --good: #8dc7ab; --bad: #e6c9a7; } /* Kobalt */ [data-theme="cobalt-dark"] { --bg-page: #152331; --bg-card: #193549; --bg-card-hover: #1f415a; --border-card: #0d2334; --border-hover: #ffc600; --text-main: #ffffff; --text-sub: #a5c2d7; --text-muted: #8fb0c7; --accent: #ffc600; --accent-hover: #e6b200; --accent-soft: rgba(255, 198, 0, 0.18); --accent-text: #152331; --input-bg: #111d29; --input-border: #234a68; --tile-bg: #122738; --tile-hover: #1e3a50; --tile-border: #234a68; --modal-bg: #193549; --modal-header: #122738; --modal-border: #234a68; --shadow-color: rgba(0, 0, 0, 0.6); --warm: #ffc600; --warm-soft: rgba(255, 198, 0, 0.12); --good: #00e8c6; --bad: #ff628c; } [data-theme="cobalt-dark"][data-intensity="muted"] { --accent: #ebca90; --accent-hover: #d3b581; --accent-soft: rgba(235, 202, 144, 0.16); --border-hover: #ebca90; --warm: #f2c877; --warm-soft: rgba(242, 200, 119, 0.12); --good: #77e1c8; --bad: #e77690; } [data-theme="cobalt-dark"][data-intensity="quiet"] { --accent: #deccb0; --accent-hover: #c8b79e; --accent-soft: rgba(222, 204, 176, 0.16); --border-hover: #deccb0; --warm: #e8ca97; --warm-soft: rgba(232, 202, 151, 0.12); --good: #97dcca; --bad: #d48193; } /* Jantar */ [data-theme="amber-dark"] { --bg-page: #050a0f; --bg-card: #0c151f; --bg-card-hover: #152332; --border-card: #1e2d3e; --border-hover: #db9941; --text-main: #f5f6f8; --text-sub: #cad1d8; --text-muted: #9da8b4; --accent: #db9941; --accent-hover: #d18828; --accent-soft: rgba(219, 153, 65, 0.16); --accent-text: #15100a; --input-bg: #070e15; --input-border: #2e4257; --tile-bg: #091018; --tile-hover: #142230; --tile-border: #1d2b3a; --modal-bg: #0c151f; --modal-header: #091018; --modal-border: #1e2d3e; --shadow-color: rgba(0, 0, 0, 0.6); --warm: #e4e5df; --warm-soft: rgba(228, 229, 223, 0.12); --good: #34d399; --bad: #d95232; } [data-theme="amber-dark"][data-intensity="muted"] { --accent: #c69f7c; --accent-hover: #ba8f6d; --accent-soft: rgba(198, 159, 124, 0.16); --border-hover: #c69f7c; --warm: #e4e5e1; --warm-soft: rgba(228, 229, 225, 0.12); --good: #73cca4; --bad: #c36252; } [data-theme="amber-dark"][data-intensity="quiet"] { --accent: #b8a291; --accent-hover: #ac9383; --accent-soft: rgba(184, 162, 145, 0.16); --border-hover: #b8a291; --warm: #e4e5e2; --warm-soft: rgba(228, 229, 226, 0.12); --good: #8dc7ab; --bad: #b36b62; } /* Smaragd */ [data-theme="emerald-dark"] { --bg-page: #080c0e; --bg-card: #10171d; --bg-card-hover: #17222b; --border-card: #1e2c37; --border-hover: #10b981; --text-main: #f3f4f6; --text-sub: #b6bcc4; --text-muted: #98a1ab; --accent: #10b981; --accent-hover: #059669; --accent-soft: rgba(16, 185, 129, 0.15); --accent-text: #042f2e; --input-bg: #0b1015; --input-border: #243542; --tile-bg: #0d1318; --tile-hover: #16222a; --tile-border: #1e2c37; --modal-bg: #10171d; --modal-header: #0d1318; --modal-border: #1e2c37; --shadow-color: rgba(0, 0, 0, 0.7); --warm: #fbbf24; --warm-soft: rgba(251, 191, 36, 0.12); --good: #34d399; --bad: #fb7185; } [data-theme="emerald-dark"][data-intensity="muted"] { --accent: #71af91; --accent-hover: #5b8e76; --accent-soft: rgba(113, 175, 145, 0.16); --border-hover: #71af91; --warm: #edc277; --warm-soft: rgba(237, 194, 119, 0.12); --good: #73cca4; --bad: #e4808d; } [data-theme="emerald-dark"][data-intensity="quiet"] { --accent: #8baa99; --accent-hover: #70897c; --accent-soft: rgba(139, 170, 153, 0.16); --border-hover: #8baa99; --warm: #e3c494; --warm-soft: rgba(227, 196, 148, 0.12); --good: #8dc7ab; --bad: #d38a92; } /* OLED limetka */ [data-theme="lime-dark"] { --bg-page: #050507; --bg-card: #111116; --bg-card-hover: #191920; --border-card: #22222b; --border-hover: #84cc16; --text-main: #ffffff; --text-sub: #b8b8bf; --text-muted: #9a9aa3; --accent: #84cc16; --accent-hover: #65a30d; --accent-soft: rgba(132, 204, 22, 0.18); --accent-text: #000000; --input-bg: #0a0a0e; --input-border: #2a2a35; --tile-bg: #0b0b0f; --tile-hover: #16161d; --tile-border: #22222b; --modal-bg: #111116; --modal-header: #0b0b0f; --modal-border: #22222b; --shadow-color: rgba(0, 0, 0, 0.9); --warm: #fbbf24; --warm-soft: rgba(251, 191, 36, 0.12); --good: #4ade80; --bad: #fb7185; } [data-theme="lime-dark"][data-intensity="muted"] { --accent: #9ec381; --accent-hover: #7c9c66; --accent-soft: rgba(158, 195, 129, 0.16); --border-hover: #9ec381; --warm: #edc277; --warm-soft: rgba(237, 194, 119, 0.12); --good: #7fd799; --bad: #e4808d; } [data-theme="lime-dark"][data-intensity="quiet"] { --accent: #abbf9d; --accent-hover: #87987d; --accent-soft: rgba(171, 191, 157, 0.16); --border-hover: #abbf9d; --warm: #e3c494; --warm-soft: rgba(227, 196, 148, 0.12); --good: #97d2a7; --bad: #d38a92; } /* Obsidián a zlato */ [data-theme="gold-dark"] { --bg-page: #0c0c0e; --bg-card: #16161a; --bg-card-hover: #202026; --border-card: #2c2b26; --border-hover: #f59e0b; --text-main: #f8fafc; --text-sub: #d4d4d8; --text-muted: #a5a5ad; --accent: #f59e0b; --accent-hover: #d97706; --accent-soft: rgba(245, 158, 11, 0.18); --accent-text: #000000; --input-bg: #101014; --input-border: #3d3b33; --tile-bg: #111114; --tile-hover: #1e1e24; --tile-border: #2b2a24; --modal-bg: #16161a; --modal-header: #111114; --modal-border: #2c2b26; --shadow-color: rgba(0, 0, 0, 0.8); --warm: #f59e0b; --warm-soft: rgba(245, 158, 11, 0.12); --good: #34d399; --bad: #fb7185; } [data-theme="gold-dark"][data-intensity="muted"] { --accent: #daa77b; --accent-hover: #bd8364; --accent-soft: rgba(218, 167, 123, 0.16); --border-hover: #daa77b; --warm: #e3a466; --warm-soft: rgba(227, 164, 102, 0.12); --good: #73cca4; --bad: #e4808d; } [data-theme="gold-dark"][data-intensity="quiet"] { --accent: #c9ab97; --accent-hover: #aa897a; --accent-soft: rgba(201, 171, 151, 0.16); --border-hover: #c9ab97; --warm: #d7a881; --warm-soft: rgba(215, 168, 129, 0.12); --good: #8dc7ab; --bad: #d38a92; } /* Ametyst */ [data-theme="amethyst-dark"] { --bg-page: #090510; --bg-card: #140b20; --bg-card-hover: #201334; --border-card: #2a1c3f; --border-hover: #d83f87; --text-main: #f6f4f8; --text-sub: #d0c9d9; --text-muted: #a69bb5; --accent: #d83f87; --accent-hover: #ca2975; --accent-soft: rgba(216, 63, 135, 0.16); --accent-text: #15090f; --input-bg: #0d0715; --input-border: #3e2c59; --tile-bg: #0f0819; --tile-hover: #1f1332; --tile-border: #281b3c; --modal-bg: #140b20; --modal-header: #0f0819; --modal-border: #2a1c3f; --shadow-color: rgba(0, 0, 0, 0.6); --warm: #fbbf24; --warm-soft: rgba(251, 191, 36, 0.12); --good: #a4b3b6; --bad: #e8674f; } [data-theme="amethyst-dark"][data-intensity="muted"] { --accent: #b66082; --accent-hover: #a95172; --accent-soft: rgba(182, 96, 130, 0.16); --border-hover: #b66082; --warm: #edc277; --warm-soft: rgba(237, 194, 119, 0.12); --good: #a8b2b4; --bad: #d27567; } [data-theme="amethyst-dark"][data-intensity="quiet"] { --accent: #9f6d7f; --accent-hover: #915f70; --accent-soft: rgba(159, 109, 127, 0.16); --border-hover: #9f6d7f; --warm: #e3c494; --warm-soft: rgba(227, 196, 148, 0.12); --good: #aab2b3; --bad: #c27d74; } /* Teplý písek */ [data-theme="sand-dark"] { --bg-page: #0d0b07; --bg-card: #1b1710; --bg-card-hover: #2c251b; --border-card: #373025; --border-hover: #d1600a; --text-main: #f7f6f5; --text-sub: #d5d2cd; --text-muted: #afaaa1; --accent: #d1600a; --accent-hover: #af5008; --accent-soft: rgba(209, 96, 10, 0.16); --accent-text: #120f0c; --input-bg: #120f0a; --input-border: #4e4536; --tile-bg: #15110c; --tile-hover: #2b241a; --tile-border: #342d23; --modal-bg: #1b1710; --modal-header: #15110c; --modal-border: #373025; --shadow-color: rgba(0, 0, 0, 0.6); --warm: #fbf524; --warm-soft: rgba(251, 245, 36, 0.12); --good: #34d399; --bad: #f8fb71; } [data-theme="sand-dark"][data-intensity="muted"] { --accent: #b37059; --accent-hover: #955e4a; --accent-soft: rgba(179, 112, 89, 0.16); --border-hover: #b37059; --warm: #f7f38e; --warm-soft: rgba(247, 243, 142, 0.12); --good: #73cca4; --bad: #f7f9a7; } [data-theme="sand-dark"][data-intensity="quiet"] { --accent: #9f786e; --accent-hover: #85645b; --accent-soft: rgba(159, 120, 110, 0.16); --border-hover: #9f786e; --warm: #f5f2b1; --warm-soft: rgba(245, 242, 177, 0.12); --good: #8dc7ab; --bad: #f6f7c1; } /* Máta */ [data-theme="mint-dark"] { --bg-page: #080c0a; --bg-card: #121916; --bg-card-hover: #1f2924; --border-card: #28332e; --border-hover: #05936a; --text-main: #f6f7f6; --text-sub: #cfd4d1; --text-muted: #a4aca8; --accent: #05936a; --accent-hover: #047051; --accent-soft: rgba(5, 147, 106, 0.16); --accent-text: #0d1110; --input-bg: #0c100e; --input-border: #3b4942; --tile-bg: #0e1311; --tile-hover: #1d2722; --tile-border: #26312b; --modal-bg: #121916; --modal-header: #0e1311; --modal-border: #28332e; --shadow-color: rgba(0, 0, 0, 0.6); --warm: #fbbf24; --warm-soft: rgba(251, 191, 36, 0.12); --good: #34b0d3; --bad: #fb7185; } [data-theme="mint-dark"][data-intensity="muted"] { --accent: #598b75; --accent-hover: #436a59; --accent-soft: rgba(89, 139, 117, 0.16); --border-hover: #598b75; --warm: #edc277; --warm-soft: rgba(237, 194, 119, 0.12); --good: #66acc6; --bad: #e4808d; } [data-theme="mint-dark"][data-intensity="quiet"] { --accent: #6d877b; --accent-hover: #53665d; --accent-soft: rgba(109, 135, 123, 0.16); --border-hover: #6d877b; --warm: #e3c494; --warm-soft: rgba(227, 196, 148, 0.12); --good: #7baabd; --bad: #d38a92; } /* Krémová limetka */ [data-theme="cream-dark"] { --bg-page: #0b0c08; --bg-card: #171912; --bg-card-hover: #26291f; --border-card: #313328; --border-hover: #598f11; --text-main: #f6f7f6; --text-sub: #d2d4cf; --text-muted: #aaaca4; --accent: #598f11; --accent-hover: #456f0d; --accent-soft: rgba(89, 143, 17, 0.16); --accent-text: #10110d; --input-bg: #0f100c; --input-border: #46493b; --tile-bg: #12130e; --tile-hover: #25271d; --tile-border: #2e3126; --modal-bg: #171912; --modal-header: #12130e; --modal-border: #313328; --shadow-color: rgba(0, 0, 0, 0.6); --warm: #fbbf24; --warm-soft: rgba(251, 191, 36, 0.12); --good: #34d399; --bad: #fb7185; } [data-theme="cream-dark"][data-intensity="muted"] { --accent: #6d895a; --accent-hover: #546a45; --accent-soft: rgba(109, 137, 90, 0.16); --border-hover: #6d895a; --warm: #edc277; --warm-soft: rgba(237, 194, 119, 0.12); --good: #73cca4; --bad: #e4808d; } [data-theme="cream-dark"][data-intensity="quiet"] { --accent: #76856d; --accent-hover: #5c6755; --accent-soft: rgba(118, 133, 109, 0.16); --border-hover: #76856d; --warm: #e3c494; --warm-soft: rgba(227, 196, 148, 0.12); --good: #8dc7ab; --bad: #d38a92; } /* Pudrová růžová */ [data-theme="rose-dark"] { --bg-page: #0d080a; --bg-card: #1b1115; --bg-card-hover: #2b1c22; --border-card: #36262d; --border-hover: #e5347e; --text-main: #f7f5f6; --text-sub: #d5cdd0; --text-muted: #afa2a7; --accent: #e5347e; --accent-hover: #d91c6b; --accent-soft: rgba(229, 52, 126, 0.16); --accent-text: #120d0f; --input-bg: #120a0d; --input-border: #4d3841; --tile-bg: #140d10; --tile-hover: #2a1b21; --tile-border: #33242a; --modal-bg: #1b1115; --modal-header: #140d10; --modal-border: #36262d; --shadow-color: rgba(0, 0, 0, 0.6); --warm: #fbbf24; --warm-soft: rgba(251, 191, 36, 0.12); --good: #34d399; --bad: #fb8b71; } [data-theme="rose-dark"][data-intensity="muted"] { --accent: #bf5e7e; --accent-hover: #b4516e; --accent-soft: rgba(191, 94, 126, 0.16); --border-hover: #bf5e7e; --warm: #edc277; --warm-soft: rgba(237, 194, 119, 0.12); --good: #73cca4; --bad: #e79585; } [data-theme="rose-dark"][data-intensity="quiet"] { --accent: #a66e7e; --accent-hover: #9a6170; --accent-soft: rgba(166, 110, 126, 0.16); --border-hover: #a66e7e; --warm: #e3c494; --warm-soft: rgba(227, 196, 148, 0.12); --good: #8dc7ab; --bad: #d89b91; } /* ===================== SVĚTLÁ SADA ===================== */ /* Břidlice */ [data-theme="slate-light"] { --bg-page: #f4f5f8; --bg-card: #ffffff; --bg-card-hover: #e6e9f2; --border-card: #d7ddea; --border-hover: #6063f1; --text-main: #10192d; --text-sub: #2a395a; --text-muted: #495c88; --accent: #6063f1; --accent-hover: #8183f4; --accent-soft: rgba(96, 99, 241, 0.16); --accent-text: #ffffff; --input-bg: #f0f2f7; --input-border: #b9c3da; --tile-bg: #fafbfc; --tile-hover: #e9ecf4; --tile-border: #dee2ed; --modal-bg: #ffffff; --modal-header: #f4f5f8; --modal-border: #d7ddea; --shadow-color: rgba(15, 15, 20, 0.12); --warm: #a16207; --warm-soft: rgba(161, 98, 7, 0.1); --good: #047857; --bad: #c2410c; } [data-theme="slate-light"][data-intensity="muted"] { --accent: #6a6cc6; --accent-hover: #8789cf; --accent-soft: rgba(106, 108, 198, 0.16); --border-hover: #6a6cc6; --warm: #95673f; --warm-soft: rgba(149, 103, 63, 0.12); --good: #3b745d; --bad: #ae513e; } [data-theme="slate-light"][data-intensity="quiet"] { --accent: #6f70a7; --accent-hover: #8b8bb5; --accent-soft: rgba(111, 112, 167, 0.16); --border-hover: #6f70a7; --warm: #8b6a51; --warm-soft: rgba(139, 106, 81, 0.12); --good: #4c7161; --bad: #9f5a4f; } /* Grafit */ [data-theme="graphite-light"] { --bg-page: #f6f6f6; --bg-card: #ffffff; --bg-card-hover: #ececec; --border-card: #e0e0e0; --border-hover: #767676; --text-main: #1f1f1f; --text-sub: #424242; --text-muted: #696969; --accent: #767676; --accent-hover: #888888; --accent-soft: rgba(118, 118, 118, 0.16); --accent-text: #ffffff; --input-bg: #f4f4f4; --input-border: #c9c9c9; --tile-bg: #fbfbfb; --tile-hover: #eeeeee; --tile-border: #e6e6e6; --modal-bg: #ffffff; --modal-header: #f6f6f6; --modal-border: #e0e0e0; --shadow-color: rgba(15, 15, 20, 0.12); --warm: #a16207; --warm-soft: rgba(161, 98, 7, 0.1); --good: #047857; --bad: #a2690a; } [data-theme="graphite-light"][data-intensity="muted"] { --accent: #767676; --accent-hover: #888888; --accent-soft: rgba(118, 118, 118, 0.16); --border-hover: #767676; --warm: #95673f; --warm-soft: rgba(149, 103, 63, 0.12); --good: #3b745d; --bad: #966d43; } [data-theme="graphite-light"][data-intensity="quiet"] { --accent: #767676; --accent-hover: #888888; --accent-soft: rgba(118, 118, 118, 0.16); --border-hover: #767676; --warm: #8b6a51; --warm-soft: rgba(139, 106, 81, 0.12); --good: #4c7161; --bad: #8e6f55; } /* Petra */ [data-theme="petra-light"] { --bg-page: #fbefef; --bg-card: #f9dfdf; --bg-card-hover: #f4e4e4; --border-card: #f5afaf; --border-hover: #fd7979; --text-main: #1c1f22; --text-sub: #3e4247; --text-muted: #60676d; --accent: #396d80; --accent-hover: #305b6b; --accent-soft: rgba(57, 109, 128, 0.16); --accent-text: #ffffff; --input-bg: #f7f0f0; --input-border: #e0b3b3; --tile-bg: #fcfafa; --tile-hover: #f5e8e8; --tile-border: #f0dbdb; --modal-bg: #fcfbfb; --modal-header: #f9f4f4; --modal-border: #edd4d4; --shadow-color: rgba(15, 15, 20, 0.12); --warm: #6f5a08; --warm-soft: rgba(111, 90, 8, 0.1); --good: #047454; --bad: #c22929; } [data-theme="petra-light"][data-intensity="muted"] { --accent: #516a75; --accent-hover: #445962; --accent-soft: rgba(81, 106, 117, 0.16); --border-hover: #da8d8d; --warm: #6a5b34; --warm-soft: rgba(106, 91, 52, 0.12); --good: #39705a; --bad: #ad4242; } [data-theme="petra-light"][data-intensity="quiet"] { --accent: #5c686f; --accent-hover: #4c575d; --accent-soft: rgba(92, 104, 111, 0.16); --border-hover: #c39797; --warm: #665b42; --warm-soft: rgba(102, 91, 66, 0.12); --good: #496d5d; --bad: #9d4e4e; } [data-theme="teal-light"] { --bg-page: #f6f6f6; --bg-card: #ffffff; --bg-card-hover: #ebeded; --border-card: #dfe1e2; --border-hover: #048373; --text-main: #1d2021; --text-sub: #3f4545; --text-muted: #646c6d; --accent: #048373; --accent-hover: #05a691; --accent-soft: rgba(4, 131, 115, 0.16); --accent-text: #ffffff; --input-bg: #f3f4f4; --input-border: #c7cbcc; --tile-bg: #fbfbfb; --tile-hover: #eeefef; --tile-border: #e4e6e7; --modal-bg: #ffffff; --modal-header: #f6f6f6; --modal-border: #dfe1e2; --shadow-color: rgba(15, 15, 20, 0.12); --warm: #a16207; --warm-soft: rgba(161, 98, 7, 0.1); --good: #044c78; --bad: #c2410c; } [data-theme="teal-light"][data-intensity="muted"] { --accent: #507d73; --accent-hover: #669e92; --accent-soft: rgba(80, 125, 115, 0.16); --border-hover: #507d73; --warm: #95673f; --warm-soft: rgba(149, 103, 63, 0.12); --good: #274b6c; --bad: #ae513e; } [data-theme="teal-light"][data-intensity="quiet"] { --accent: #627974; --accent-hover: #7d9993; --accent-soft: rgba(98, 121, 116, 0.16); --border-hover: #627974; --warm: #8b6a51; --warm-soft: rgba(139, 106, 81, 0.12); --good: #334a64; --bad: #9f5a4f; } /* Smaragd */ [data-theme="emerald-light"] { --bg-page: #f5f7f7; --bg-card: #ffffff; --bg-card-hover: #e9edef; --border-card: #dce2e5; --border-hover: #0c865e; --text-main: #172126; --text-sub: #36474f; --text-muted: #586e79; --accent: #0c865e; --accent-hover: #0fa775; --accent-soft: rgba(12, 134, 94, 0.16); --accent-text: #ffffff; --input-bg: #f2f4f5; --input-border: #c1ccd2; --tile-bg: #fbfbfc; --tile-hover: #eceff1; --tile-border: #e1e7ea; --modal-bg: #ffffff; --modal-header: #f5f7f7; --modal-border: #dce2e5; --shadow-color: rgba(15, 15, 20, 0.12); --warm: #a16207; --warm-soft: rgba(161, 98, 7, 0.1); --good: #045f78; --bad: #c2410c; } [data-theme="emerald-light"][data-intensity="muted"] { --accent: #517f69; --accent-hover: #669e83; --accent-soft: rgba(81, 127, 105, 0.16); --border-hover: #517f69; --warm: #95673f; --warm-soft: rgba(149, 103, 63, 0.12); --good: #305d6f; --bad: #ae513e; } [data-theme="emerald-light"][data-intensity="quiet"] { --accent: #647b6f; --accent-hover: #7d998b; --accent-soft: rgba(100, 123, 111, 0.16); --border-hover: #647b6f; --warm: #8b6a51; --warm-soft: rgba(139, 106, 81, 0.12); --good: #3e5b69; --bad: #9f5a4f; } /* Limetka */ [data-theme="lime-light"] { --bg-page: #f6f6f6; --bg-card: #ffffff; --bg-card-hover: #ebebed; --border-card: #dfdfe2; --border-hover: #54810e; --text-main: #1c1c21; --text-sub: #3e3e46; --text-muted: #63636e; --accent: #54810e; --accent-hover: #69a111; --accent-soft: rgba(84, 129, 14, 0.16); --accent-text: #ffffff; --input-bg: #f3f3f4; --input-border: #c7c7cc; --tile-bg: #fbfbfb; --tile-hover: #eeeeef; --tile-border: #e4e4e7; --modal-bg: #ffffff; --modal-header: #f6f6f6; --modal-border: #dfdfe2; --shadow-color: rgba(15, 15, 20, 0.12); --warm: #a16207; --warm-soft: rgba(161, 98, 7, 0.1); --good: #047857; --bad: #c2410c; } [data-theme="lime-light"][data-intensity="muted"] { --accent: #647c51; --accent-hover: #7d9a65; --accent-soft: rgba(100, 124, 81, 0.16); --border-hover: #647c51; --warm: #95673f; --warm-soft: rgba(149, 103, 63, 0.12); --good: #3b745d; --bad: #ae513e; } [data-theme="lime-light"][data-intensity="quiet"] { --accent: #6c7863; --accent-hover: #87967c; --accent-soft: rgba(108, 120, 99, 0.16); --border-hover: #6c7863; --warm: #8b6a51; --warm-soft: rgba(139, 106, 81, 0.12); --good: #4c7161; --bad: #9f5a4f; } /* Teplý písek */ [data-theme="sand-light"] { --bg-page: #f5f2eb; --bg-card: #ffffff; --bg-card-hover: #f3eee3; --border-card: #e6e0d3; --border-hover: #d97706; --text-main: #1c1917; --text-sub: #44403c; --text-muted: #6b6157; --accent: #b45309; --accent-hover: #92400e; --accent-soft: #fef3c7; --accent-text: #ffffff; --input-bg: #eee9dc; --input-border: #c8bfab; --tile-bg: #faf8f3; --tile-hover: #f0eae0; --tile-border: #e0d8c8; --modal-bg: #ffffff; --modal-header: #f5f0e6; --modal-border: #d6cebe; --shadow-color: rgba(28, 25, 23, 0.12); --warm: #b45309; --warm-soft: rgba(180, 83, 9, 0.1); --good: #047857; --bad: #be123c; } [data-theme="sand-light"][data-intensity="muted"] { --accent: #9a614c; --accent-hover: #7c4c3d; --accent-soft: rgba(154, 97, 76, 0.16); --border-hover: #bd8364; --warm: #a35d3f; --warm-soft: rgba(163, 93, 63, 0.12); --good: #3b745d; --bad: #a93849; } [data-theme="sand-light"][data-intensity="quiet"] { --accent: #89685e; --accent-hover: #6e524b; --accent-soft: rgba(137, 104, 94, 0.16); --border-hover: #aa897a; --warm: #976250; --warm-soft: rgba(151, 98, 80, 0.12); --good: #4c7161; --bad: #984650; } /* Lososová */ [data-theme="salmon-light"] { --bg-page: #f7f7f5; --bg-card: #ffffff; --bg-card-hover: #efede9; --border-card: #e5e2dc; --border-hover: #e22f21; --text-main: #252118; --text-sub: #4d4737; --text-muted: #776e5a; --accent: #e22f21; --accent-hover: #e64d41; --accent-soft: rgba(226, 47, 33, 0.16); --accent-text: #ffffff; --input-bg: #f5f4f2; --input-border: #d1ccc2; --tile-bg: #fcfbfb; --tile-hover: #f1efec; --tile-border: #e9e7e2; --modal-bg: #ffffff; --modal-header: #f7f7f5; --modal-border: #e5e2dc; --shadow-color: rgba(15, 15, 20, 0.12); --warm: #92703f; --warm-soft: rgba(146, 112, 63, 0.1); --good: #047857; --bad: #8c1d18; } [data-theme="salmon-light"][data-intensity="muted"] { --accent: #bc5855; --accent-hover: #c26965; --accent-soft: rgba(188, 88, 85, 0.16); --border-hover: #bc5855; --warm: #8a7254; --warm-soft: rgba(138, 114, 84, 0.12); --good: #3b745d; --bad: #7c2f2d; } [data-theme="salmon-light"][data-intensity="quiet"] { --accent: #a16766; --accent-hover: #a97674; --accent-soft: rgba(161, 103, 102, 0.16); --border-hover: #a16766; --warm: #85735f; --warm-soft: rgba(133, 115, 95, 0.12); --good: #4c7161; --bad: #713736; } /* Korálová */ [data-theme="coral-light"] { --bg-page: #f6f6f7; --bg-card: #ffffff; --bg-card-hover: #ebebed; --border-card: #dfdfe2; --border-hover: #e72000; --text-main: #1c1c22; --text-sub: #3e3e47; --text-muted: #62626f; --accent: #e72000; --accent-hover: #ff2d0c; --accent-soft: rgba(231, 32, 0, 0.16); --accent-text: #ffffff; --input-bg: #f3f3f4; --input-border: #c6c6cd; --tile-bg: #fbfbfb; --tile-hover: #ededf0; --tile-border: #e4e4e7; --modal-bg: #ffffff; --modal-header: #f6f6f7; --modal-border: #dfdfe2; --shadow-color: rgba(15, 15, 20, 0.12); --warm: #9e6d07; --warm-soft: rgba(158, 109, 7, 0.1); --good: #047857; --bad: #8e7209; } [data-theme="coral-light"][data-intensity="muted"] { --accent: #bf5450; --accent-hover: #d3615c; --accent-soft: rgba(191, 84, 80, 0.16); --border-hover: #bf5450; --warm: #947043; --warm-soft: rgba(148, 112, 67, 0.12); --good: #3b745d; --bad: #877343; } [data-theme="coral-light"][data-intensity="quiet"] { --accent: #a36564; --accent-hover: #b57370; --accent-soft: rgba(163, 101, 100, 0.16); --border-hover: #a36564; --warm: #8c7256; --warm-soft: rgba(140, 114, 86, 0.12); --good: #4c7161; --bad: #827455; } /* Máta */ [data-theme="mint-light"] { --bg-page: #f4f7f5; --bg-card: #ffffff; --bg-card-hover: #e4eee7; --border-card: #d8e3dc; --border-hover: #059669; --text-main: #111827; --text-sub: #374151; --text-muted: #5b6470; --accent: #047857; --accent-hover: #065f46; --accent-soft: #d1fae5; --accent-text: #ffffff; --input-bg: #e1ebe4; --input-border: #b6c5bc; --tile-bg: #f4f8f5; --tile-hover: #e0ece4; --tile-border: #d0ded3; --modal-bg: #ffffff; --modal-header: #e6efe9; --modal-border: #c5d4cb; --shadow-color: rgba(16, 185, 129, 0.12); --warm: #b45309; --warm-soft: rgba(180, 83, 9, 0.1); --good: #047857; --bad: #be123c; } [data-theme="mint-light"][data-intensity="muted"] { --accent: #487260; --accent-hover: #385a4c; --accent-soft: rgba(72, 114, 96, 0.16); --border-hover: #5b8e76; --warm: #a35d3f; --warm-soft: rgba(163, 93, 63, 0.12); --good: #3b745d; --bad: #a93849; } [data-theme="mint-light"][data-intensity="quiet"] { --accent: #596e64; --accent-hover: #46574f; --accent-soft: rgba(89, 110, 100, 0.16); --border-hover: #70897c; --warm: #976250; --warm-soft: rgba(151, 98, 80, 0.12); --good: #4c7161; --bad: #984650; } /* Krémová limetka */ [data-theme="cream-light"] { --bg-page: #eaeee3; --bg-card: #ffffff; --bg-card-hover: #e2e8d8; --border-card: #d8ddd0; --border-hover: #4d7c0f; --text-main: #18181b; --text-sub: #3f3f46; --text-muted: #5d5d63; --accent: #4d7c0f; --accent-hover: #3f6212; --accent-soft: #ecfccb; --accent-text: #ffffff; --input-bg: #d9e0ce; --input-border: #b3bba7; --tile-bg: #f4f8ee; --tile-hover: #e2ebd6; --tile-border: #cfd6c5; --modal-bg: #ffffff; --modal-header: #e1e6d9; --modal-border: #c4ccb9; --shadow-color: rgba(101, 163, 13, 0.12); --warm: #b45309; --warm-soft: rgba(180, 83, 9, 0.1); --good: #15803d; --bad: #be123c; } [data-theme="cream-light"][data-intensity="muted"] { --accent: #5e774d; --accent-hover: #4c5e3e; --accent-soft: rgba(94, 119, 77, 0.16); --border-hover: #5e774d; --warm: #a35d3f; --warm-soft: rgba(163, 93, 63, 0.12); --good: #417b50; --bad: #a93849; } [data-theme="cream-light"][data-intensity="quiet"] { --accent: #67735f; --accent-hover: #525b4b; --accent-soft: rgba(103, 115, 95, 0.16); --border-hover: #67735f; --warm: #976250; --warm-soft: rgba(151, 98, 80, 0.12); --good: #52785a; --bad: #984650; } /* Pudrová růžová */ [data-theme="rose-light"] { --bg-page: #fdf6f9; --bg-card: #ffffff; --bg-card-hover: #fbeaf1; --border-card: #f2dde5; --border-hover: #be185d; --text-main: #3f2130; --text-sub: #5e3747; --text-muted: #7c5364; --accent: #be185d; --accent-hover: #9d174d; --accent-soft: #fce7f0; --accent-text: #ffffff; --input-bg: #fbf1f5; --input-border: #e6c6d4; --tile-bg: #fffbfd; --tile-hover: #fbe9f1; --tile-border: #f1d9e3; --modal-bg: #ffffff; --modal-header: #fdf2f7; --modal-border: #eed2de; --shadow-color: rgba(157, 23, 77, 0.1); --warm: #7d6800; --warm-soft: rgba(125, 104, 0, 0.1); --good: #047857; --bad: #c2410c; } [data-theme="rose-light"][data-intensity="muted"] { --accent: #9d4660; --accent-hover: #823a4f; --accent-soft: rgba(157, 70, 96, 0.16); --border-hover: #9d4660; --warm: #78683a; --warm-soft: rgba(120, 104, 58, 0.12); --good: #3b745d; --bad: #ae513e; } [data-theme="rose-light"][data-intensity="quiet"] { --accent: #875461; --accent-hover: #6f4650; --accent-soft: rgba(135, 84, 97, 0.16); --border-hover: #875461; --warm: #74694b; --warm-soft: rgba(116, 105, 75, 0.12); --good: #4c7161; --bad: #9f5a4f; } /* Barvy grafů a teplotních polí. Ve světlém režimu tmavší varianta, aby text na barevném podkladu splnil WCAG AA. */ [data-mode="dark"] { --info: #38bdf8; --chart-temp: #f97316; --chart-dew: #0ea5e9; --chart-wind: #6366f1; } [data-mode="light"] { --info: #0369a1; --chart-temp: #c2410c; --chart-dew: #0369a1; --chart-wind: #4338ca; } [data-mode="light"] .hourly__temp { font-weight: 700; } [data-mode="light"] .t-cold { background-color: rgba(6, 182, 212, 0.12); border-color: rgba(6, 182, 212, 0.45); color: #164e63; } [data-mode="light"] .t-cool { background-color: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.45); color: #0c4a6e; } [data-mode="light"] .t-mild { background-color: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.45); color: #713f12; } [data-mode="light"] .t-warm { background-color: rgba(249, 115, 22, 0.12); border-color: rgba(249, 115, 22, 0.45); color: #7c2d12; } [data-mode="light"] .t-hot { background-color: rgba(244, 63, 94, 0.12); border-color: rgba(244, 63, 94, 0.45); color: #881337; } /* ========================================================================== 1d. PÍSMO A JEHO VELIKOST Nabídka pro Nastavení → Vzhled. Volba se ukládá jako atribut na , takže nepotřebuje běhové nastavování stylů. Každá položka má systémovou náhradu pro případ, že se stránka otevře bez internetu. ========================================================================== */ html { --font-system: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-inter: "Inter", "Segoe UI", system-ui, sans-serif; --font-jakarta: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; --font-roboto: "Roboto", "Segoe UI", system-ui, sans-serif; --font-opensans: "Open Sans", "Segoe UI", system-ui, sans-serif; --font-montserrat: "Montserrat", "Segoe UI", system-ui, sans-serif; --font-nunito: "Nunito", "Segoe UI", system-ui, sans-serif; --font-poppins: "Poppins", "Segoe UI", system-ui, sans-serif; --font-dmsans: "DM Sans", "Segoe UI", system-ui, sans-serif; --font-spacegrotesk: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-oswald: "Oswald", "Segoe UI Condensed", "Arial Narrow", system-ui, sans-serif; --font-baskerville: "Libre Baskerville", Georgia, "Times New Roman", serif; --font-merriweather: "Merriweather", Georgia, "Times New Roman", serif; --font-patrickhand: "Patrick Hand", "Segoe Script", "Bradley Hand", cursive; --font-robotoslab: "Roboto Slab", Georgia, "Times New Roman", serif; --font-jetbrains: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --font-plexmono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --font-sourcecode: "Source Code Pro", ui-monospace, "Cascadia Mono", Consolas, monospace; --font-chakra: "Chakra Petch", "Segoe UI", system-ui, sans-serif; --font-orbitron: "Orbitron", "Segoe UI", system-ui, sans-serif; } html[data-font="system"] { --font-sans: var(--font-system); } .fontcard[data-font="system"] { font-family: var(--font-system); } html[data-font="inter"] { --font-sans: var(--font-inter); } .fontcard[data-font="inter"] { font-family: var(--font-inter); } html[data-font="jakarta"] { --font-sans: var(--font-jakarta); } .fontcard[data-font="jakarta"] { font-family: var(--font-jakarta); } html[data-font="roboto"] { --font-sans: var(--font-roboto); } .fontcard[data-font="roboto"] { font-family: var(--font-roboto); } html[data-font="opensans"] { --font-sans: var(--font-opensans); } .fontcard[data-font="opensans"] { font-family: var(--font-opensans); } html[data-font="montserrat"] { --font-sans: var(--font-montserrat); } .fontcard[data-font="montserrat"] { font-family: var(--font-montserrat); } html[data-font="nunito"] { --font-sans: var(--font-nunito); } .fontcard[data-font="nunito"] { font-family: var(--font-nunito); } html[data-font="poppins"] { --font-sans: var(--font-poppins); } .fontcard[data-font="poppins"] { font-family: var(--font-poppins); } html[data-font="dmsans"] { --font-sans: var(--font-dmsans); } .fontcard[data-font="dmsans"] { font-family: var(--font-dmsans); } html[data-font="spacegrotesk"] { --font-sans: var(--font-spacegrotesk); } .fontcard[data-font="spacegrotesk"] { font-family: var(--font-spacegrotesk); } html[data-font="oswald"] { --font-sans: var(--font-oswald); } .fontcard[data-font="oswald"] { font-family: var(--font-oswald); } html[data-font="baskerville"] { --font-sans: var(--font-baskerville); } .fontcard[data-font="baskerville"] { font-family: var(--font-baskerville); } html[data-font="merriweather"] { --font-sans: var(--font-merriweather); } .fontcard[data-font="merriweather"] { font-family: var(--font-merriweather); } html[data-font="patrickhand"] { --font-sans: var(--font-patrickhand); } .fontcard[data-font="patrickhand"] { font-family: var(--font-patrickhand); } html[data-font="robotoslab"] { --font-sans: var(--font-robotoslab); } .fontcard[data-font="robotoslab"] { font-family: var(--font-robotoslab); } html[data-font="jetbrains"] { --font-sans: var(--font-jetbrains); } .fontcard[data-font="jetbrains"] { font-family: var(--font-jetbrains); } html[data-font="plexmono"] { --font-sans: var(--font-plexmono); } .fontcard[data-font="plexmono"] { font-family: var(--font-plexmono); } html[data-font="sourcecode"] { --font-sans: var(--font-sourcecode); } .fontcard[data-font="sourcecode"] { font-family: var(--font-sourcecode); } html[data-font="chakra"] { --font-sans: var(--font-chakra); } .fontcard[data-font="chakra"] { font-family: var(--font-chakra); } html[data-font="orbitron"] { --font-sans: var(--font-orbitron); } .fontcard[data-font="orbitron"] { font-family: var(--font-orbitron); } /* Lupa celé stránky. Škáluje se , ne , aby zůstalo funkční plynulé rolování; pevně ukotvené prvky se přepočítávají v app.js. */ body { zoom: var(--page-zoom, 1); } html[data-zoom="75"] { --page-zoom: 0.75; } html[data-zoom="76"] { --page-zoom: 0.76; } html[data-zoom="77"] { --page-zoom: 0.77; } html[data-zoom="78"] { --page-zoom: 0.78; } html[data-zoom="79"] { --page-zoom: 0.79; } html[data-zoom="80"] { --page-zoom: 0.8; } html[data-zoom="81"] { --page-zoom: 0.81; } html[data-zoom="82"] { --page-zoom: 0.82; } html[data-zoom="83"] { --page-zoom: 0.83; } html[data-zoom="84"] { --page-zoom: 0.84; } html[data-zoom="85"] { --page-zoom: 0.85; } html[data-zoom="86"] { --page-zoom: 0.86; } html[data-zoom="87"] { --page-zoom: 0.87; } html[data-zoom="88"] { --page-zoom: 0.88; } html[data-zoom="89"] { --page-zoom: 0.89; } html[data-zoom="90"] { --page-zoom: 0.9; } html[data-zoom="91"] { --page-zoom: 0.91; } html[data-zoom="92"] { --page-zoom: 0.92; } html[data-zoom="93"] { --page-zoom: 0.93; } html[data-zoom="94"] { --page-zoom: 0.94; } html[data-zoom="95"] { --page-zoom: 0.95; } html[data-zoom="96"] { --page-zoom: 0.96; } html[data-zoom="97"] { --page-zoom: 0.97; } html[data-zoom="98"] { --page-zoom: 0.98; } html[data-zoom="99"] { --page-zoom: 0.99; } html[data-zoom="100"] { --page-zoom: 1; } html[data-zoom="101"] { --page-zoom: 1.01; } html[data-zoom="102"] { --page-zoom: 1.02; } html[data-zoom="103"] { --page-zoom: 1.03; } html[data-zoom="104"] { --page-zoom: 1.04; } html[data-zoom="105"] { --page-zoom: 1.05; } html[data-zoom="106"] { --page-zoom: 1.06; } html[data-zoom="107"] { --page-zoom: 1.07; } html[data-zoom="108"] { --page-zoom: 1.08; } html[data-zoom="109"] { --page-zoom: 1.09; } html[data-zoom="110"] { --page-zoom: 1.1; } html[data-zoom="111"] { --page-zoom: 1.11; } html[data-zoom="112"] { --page-zoom: 1.12; } html[data-zoom="113"] { --page-zoom: 1.13; } html[data-zoom="114"] { --page-zoom: 1.14; } html[data-zoom="115"] { --page-zoom: 1.15; } html[data-zoom="116"] { --page-zoom: 1.16; } html[data-zoom="117"] { --page-zoom: 1.17; } html[data-zoom="118"] { --page-zoom: 1.18; } html[data-zoom="119"] { --page-zoom: 1.19; } html[data-zoom="120"] { --page-zoom: 1.2; } html[data-zoom="121"] { --page-zoom: 1.21; } html[data-zoom="122"] { --page-zoom: 1.22; } html[data-zoom="123"] { --page-zoom: 1.23; } html[data-zoom="124"] { --page-zoom: 1.24; } html[data-zoom="125"] { --page-zoom: 1.25; } html[data-zoom="126"] { --page-zoom: 1.26; } html[data-zoom="127"] { --page-zoom: 1.27; } html[data-zoom="128"] { --page-zoom: 1.28; } html[data-zoom="129"] { --page-zoom: 1.29; } html[data-zoom="130"] { --page-zoom: 1.3; } html[data-zoom="131"] { --page-zoom: 1.31; } html[data-zoom="132"] { --page-zoom: 1.32; } html[data-zoom="133"] { --page-zoom: 1.33; } html[data-zoom="134"] { --page-zoom: 1.34; } html[data-zoom="135"] { --page-zoom: 1.35; } html[data-zoom="136"] { --page-zoom: 1.36; } html[data-zoom="137"] { --page-zoom: 1.37; } html[data-zoom="138"] { --page-zoom: 1.38; } html[data-zoom="139"] { --page-zoom: 1.39; } html[data-zoom="140"] { --page-zoom: 1.4; } html[data-zoom="141"] { --page-zoom: 1.41; } html[data-zoom="142"] { --page-zoom: 1.42; } html[data-zoom="143"] { --page-zoom: 1.43; } html[data-zoom="144"] { --page-zoom: 1.44; } html[data-zoom="145"] { --page-zoom: 1.45; } html[data-zoom="146"] { --page-zoom: 1.46; } html[data-zoom="147"] { --page-zoom: 1.47; } html[data-zoom="148"] { --page-zoom: 1.48; } html[data-zoom="149"] { --page-zoom: 1.49; } html[data-zoom="150"] { --page-zoom: 1.5; } /* ========================================================================== 2. ZÁKLAD ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { --page-zoom: 1; --font-sans: var(--font-jakarta); --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", "Consolas", "Liberation Mono", monospace; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 22px; /* Výška jedné řady widgetů. Původní obsahová výška byla ~240 px, tady je o čtvrtinu nižší a následně o desetinu zvýšená. Stačí změnit tuhle jednu hodnotu. */ --widget-h: 198px; background-color: var(--bg-page); color-scheme: dark; } html[data-mode="light"] { color-scheme: light; } body { margin: 0; min-height: 100vh; padding-bottom: 3rem; font-family: var(--font-sans); font-size: 15px; line-height: 1.5; background-color: var(--bg-page); color: var(--text-main); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; } p { margin: 0; } dl, dd { margin: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } img { display: block; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .icon-defs { display: none; } .icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Vlastní posuvník */ .scroll-thin { scrollbar-width: thin; scrollbar-color: var(--input-border) transparent; } .scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; } .scroll-thin::-webkit-scrollbar-track { background: transparent; } .scroll-thin::-webkit-scrollbar-thumb { background: var(--input-border); border-radius: 99px; } /* ========================================================================== 3. SPOLEČNÉ PRVKY ========================================================================== */ .card { background-color: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-lg); box-shadow: 0 10px 25px -5px var(--shadow-color); } .widget { display: flex; flex-direction: column; gap: 0.35rem; height: 100%; padding: 0.55rem 0.7rem; overflow: hidden; } .widget__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex: none; } .widget__title { display: flex; align-items: center; gap: 0.35rem; min-width: 0; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } /* U úzkého widgetu se raději zkrátí nadpis než aby vytlačil ovládání. */ .widget__title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .widget__title .icon { font-size: 0.95rem; color: var(--accent); } .widget__tools { display: flex; align-items: center; gap: 0.25rem; flex: none; } .widget__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex: none; font-size: 0.64rem; line-height: 1.4; color: var(--text-muted); } .widget__foot > :only-child { margin-left: auto; } /* Jednotný vzhled odkazů v patičkách widgetů */ .widget__foot-link { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0; font-size: 0.64rem; font-weight: 500; line-height: 1.4; color: var(--text-muted); transition: color 0.15s; } .widget__foot-link:hover { color: var(--accent); } .widget__foot-link .icon { font-size: 0.8rem; } /* Tlačítka */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border: 1px solid var(--border-card); border-radius: var(--radius); background-color: var(--bg-card-hover); color: var(--text-main); font-size: 0.78rem; font-weight: 600; transition: background-color 0.15s, border-color 0.15s, color 0.15s; } .btn:hover { border-color: var(--border-hover); } .btn .icon { font-size: 0.95rem; } .btn--primary { background-color: var(--accent); border-color: var(--accent); color: var(--accent-text); } .btn--primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); } .btn--danger { color: var(--bad); } .btn--danger:hover { border-color: var(--bad); } .btn--sm { padding: 0.28rem 0.6rem; font-size: 0.72rem; } .btn--icon { display: inline-flex; align-items: center; justify-content: center; padding: 0.28rem; border: 1px solid transparent; border-radius: var(--radius-sm); background-color: transparent; color: var(--text-muted); transition: background-color 0.15s, color 0.15s; } .btn--icon:hover { background-color: var(--bg-card-hover); color: var(--text-main); } .btn--icon .icon { font-size: 1rem; } /* Formulářové prvky */ .field { display: block; margin-bottom: 0.75rem; } .field__label { display: block; margin-bottom: 0.3rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .input, .select, .textarea { width: 100%; padding: 0.5rem 0.7rem; border: 1px solid var(--input-border); border-radius: var(--radius); background-color: var(--input-bg); color: var(--text-main); font: inherit; font-size: 0.82rem; transition: border-color 0.15s; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); } .input::placeholder, .textarea::placeholder { color: var(--text-muted); } .select { cursor: pointer; } .select--sm { padding: 0.2rem 0.4rem; font-size: 0.72rem; width: auto; max-width: 130px; } .row-gap { display: flex; gap: 0.5rem; } .row-gap .input { flex: 1; } .checkline { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.6rem; border: 1px solid var(--border-card); border-radius: var(--radius); background-color: var(--input-bg); font-size: 0.8rem; cursor: pointer; } .checkline input { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; flex: none; } .badge { display: inline-flex; align-items: center; padding: 0.1rem 0.45rem; border-radius: 99px; background-color: var(--bg-card-hover); color: var(--text-muted); font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; } .empty { padding: 2rem 1rem; border: 1px dashed var(--border-card); border-radius: var(--radius-lg); color: var(--text-muted); font-size: 0.78rem; font-style: italic; text-align: center; } .empty--slim { padding: 1rem; } .empty--full { grid-column: 1 / -1; } .muted { font-size: 0.72rem; color: var(--text-muted); } /* Bublinová nápověda – stejný vzhled u dlaždic i kalendáře */ .tip { z-index: 60; display: none; flex-direction: column; gap: 0.15rem; min-width: 200px; max-width: 300px; padding: 0.6rem 0.7rem; border: 1px solid var(--border-hover); border-radius: var(--radius); background-color: var(--modal-bg); box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.5); text-align: left; pointer-events: none; } .tip--anchored { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); } .tip--floating { position: fixed; top: 0; left: 0; } .tip--visible { display: flex; } .tip__title { padding-bottom: 0.25rem; border-bottom: 1px solid var(--border-card); font-size: 0.74rem; font-weight: 800; } .tip__sub { font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent); overflow-wrap: anywhere; } .tip__line { font-size: 0.7rem; color: var(--text-sub); } /* ========================================================================== 4. HLAVIČKA ========================================================================== */ .header { position: sticky; top: 0; z-index: 30; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border-card); background-color: var(--bg-card); box-shadow: 0 4px 16px -8px var(--shadow-color); } .header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1280px; margin: 0 auto; } .brand { display: flex; align-items: center; gap: 0.7rem; } .brand__mark { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--accent), var(--border-hover)); color: var(--accent-text); } .brand__mark .icon { font-size: 1.25rem; } .brand__title { display: flex; align-items: center; gap: 0.5rem; } .brand__title h1 { font-size: 1rem; } .brand__tag { padding: 0.1rem 0.5rem; border: 1px solid var(--accent); border-radius: 99px; color: var(--accent); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .brand__sub { font-size: 0.72rem; color: var(--text-muted); } .header__status { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .clockbox { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.8rem; border: 1px solid var(--border-card); border-radius: var(--radius-lg); background-color: var(--input-bg); } .clockbox .icon { font-size: 1rem; color: var(--accent); } .clockbox__time { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; line-height: 1.1; letter-spacing: 0.05em; } .clockbox__date { font-size: 0.7rem; color: var(--text-muted); } .namedaybox { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; border: 1px solid var(--warm); border-radius: var(--radius-lg); background-color: var(--warm-soft); color: var(--warm); } .namedaybox .icon { font-size: 1rem; } .namedaybox__label { display: block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; } .namedaybox__value { font-size: 0.78rem; font-weight: 700; } /* ========================================================================== 5. ROZVRŽENÍ ========================================================================== */ .main { max-width: 1280px; margin: 0 auto; padding: 1.1rem 1rem 0; display: flex; flex-direction: column; gap: 1.1rem; } /* Flexbox místo pevné mřížky: každý widget má základní podíl šířky (fifth/quarter/third/half/full) a k tomu flex-grow ve stejném poměru. Když se v řádku sejde nesouměrná kombinace (např. třetina + čtvrtina + pětina), zbylý prostor se rozpustí proporčně mezi widgety v řádku, takže se blok vždy dorovná na celou šířku aplikace beze mezery. */ .widget-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; } .widget-grid > * { flex: 100 1 100%; min-width: 0; } @media (min-width: 700px) { .widget-grid > * { height: var(--widget-h); } .widget-grid > [data-width="fifth"] { flex: 33 1 calc(33.333% - 0.5rem); } .widget-grid > [data-width="quarter"] { flex: 50 1 calc(50% - 0.375rem); } .widget-grid > [data-width="third"] { flex: 50 1 calc(50% - 0.375rem); } .widget-grid > [data-width="half"] { flex: 100 1 100%; } .widget-grid > [data-width="full"] { flex: 100 1 100%; } } @media (min-width: 1080px) { .widget-grid > [data-width="fifth"] { flex: 20 1 calc(20% - 0.6rem); } .widget-grid > [data-width="quarter"] { flex: 25 1 calc(25% - 0.5625rem); } .widget-grid > [data-width="third"] { flex: 33 1 calc(33.333% - 0.5rem); } .widget-grid > [data-width="half"] { flex: 50 1 calc(50% - 0.375rem); } .widget-grid > [data-width="full"] { flex: 100 1 100%; } } /* ========================================================================== 6. VYHLEDÁVÁNÍ ========================================================================== */ .search { display: flex; flex-direction: column; gap: 0.75rem; } .search__greeting { display: flex; align-items: center; gap: 0.5rem; font-size: 1.15rem; font-weight: 700; } .search__greeting .icon { font-size: 1.1rem; color: var(--accent); } .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border: 1px solid var(--border-card); border-radius: 99px; background-color: var(--bg-card); color: var(--text-sub); font-size: 0.74rem; font-weight: 600; transition: background-color 0.15s, color 0.15s, border-color 0.15s; } .chip:hover { color: var(--text-main); border-color: var(--border-hover); } .chip[aria-pressed="true"], .chip[aria-selected="true"] { background-color: var(--accent); border-color: var(--accent); color: var(--accent-text); } .search__row { display: flex; flex-wrap: wrap; gap: 0.6rem; } .search__main { position: relative; flex: 1 1 320px; display: flex; } .search__main .input { padding-left: 2.4rem; padding-right: 5.5rem; height: 46px; font-size: 0.9rem; } .search__icon { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); font-size: 1.05rem; color: var(--text-muted); pointer-events: none; } .search__actions { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 0.2rem; } .search__filter { position: relative; flex: 0 1 260px; display: flex; } .search__filter .input { padding-left: 2.2rem; height: 46px; } .search__history { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .search__history-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } /* ========================================================================== 7. WIDGET POČASÍ ========================================================================== */ .weather__now { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; flex: 1; min-height: 0; } .weather__main { min-width: 0; } .weather__temp { display: flex; align-items: baseline; gap: 0.45rem; font-size: 1.35rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; } .weather__emoji { font-size: 1.1rem; } .weather__desc { margin-top: 0.05rem; font-size: 0.72rem; font-weight: 600; line-height: 1.4; color: var(--accent); } .weather__meta { display: flex; flex-direction: column; gap: 0.08rem; padding-left: 0.55rem; border-left: 1px solid var(--border-card); } .weather__meta-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.64rem; line-height: 1.3; } .weather__meta-row dt { display: flex; align-items: center; gap: 0.3rem; color: var(--text-muted); } .weather__meta-row dt .icon { font-size: 0.85rem; } .weather__meta-row dd { font-weight: 700; font-variant-numeric: tabular-nums; } .weather__days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3rem; padding-top: 0.35rem; border-top: 1px solid var(--border-card); flex: none; } .weather__day { display: flex; flex-direction: column; align-items: center; gap: 0.02rem; min-width: 0; padding: 0.1rem 0.15rem; border: 1px solid var(--border-card); border-radius: var(--radius-sm); background-color: var(--input-bg); } .weather__day-name { font-size: 0.56rem; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .weather__day-icon { font-size: 0.85rem; line-height: 1.15; } .weather__day-temp { font-size: 0.72rem; font-weight: 800; line-height: 1.4; font-variant-numeric: tabular-nums; } .weather__day-min { margin-left: 0.2rem; font-size: 0.64rem; font-weight: 500; color: var(--text-muted); } .spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spin { animation: none; } } /* Předpověď v dialogu */ .forecast__days { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.3rem; } .forecast__day { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 78px; padding: 0.5rem; border: 1px solid var(--input-border); border-radius: var(--radius-lg); background-color: var(--input-bg); color: var(--text-sub); transition: background-color 0.15s, border-color 0.15s; } .forecast__day:hover { background-color: var(--bg-card-hover); } .forecast__day[aria-pressed="true"] { border-color: var(--warm); background-color: var(--warm-soft); color: var(--text-main); } .forecast__day-name { font-size: 0.7rem; font-weight: 800; } .forecast__day-icon { font-size: 1.35rem; } .forecast__day-temp { font-size: 0.74rem; font-weight: 800; } /* Hodinová tabulka a meteogram sdílejí jeden posuvník i šířku sloupců */ .forecast__scroll { overflow-x: auto; } .forecast__inner { min-width: 640px; max-width: 920px; margin: 0 auto; padding: 0.75rem 0.5rem; border: 1px solid var(--input-border); border-radius: var(--radius-lg); background-color: var(--input-bg); } .hourly { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); text-align: center; font-size: 0.72rem; } .hourly > * { padding: 0.15rem 0.1rem; min-width: 0; } .hourly__time { padding-bottom: 0.3rem; border-bottom: 1px solid var(--input-border); font-family: var(--font-mono); font-weight: 700; color: var(--text-sub); } .hourly__icon { font-size: 1.4rem; } .hourly__temp { margin: 0.1rem 0.25rem; padding: 0.25rem 0.1rem; border: 1px solid; border-radius: var(--radius-sm); font-family: var(--font-mono); font-weight: 600; } .t-cold { background-color: rgba(6, 182, 212, 0.15); border-color: rgba(6, 182, 212, 0.5); color: #22d3ee; } .t-cool { background-color: rgba(56, 189, 248, 0.15); border-color: rgba(56, 189, 248, 0.5); color: #38bdf8; } .t-mild { background-color: rgba(251, 191, 36, 0.15); border-color: rgba(251, 191, 36, 0.5); color: #fbbf24; } .t-warm { background-color: rgba(249, 115, 22, 0.18); border-color: rgba(249, 115, 22, 0.55); color: #fb923c; } .t-hot { background-color: rgba(244, 63, 94, 0.2); border-color: rgba(244, 63, 94, 0.55); color: #fb7185; } .hourly__val { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-sub); } .hourly__prob { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; color: var(--info); } .hourly__wind { font-size: 0.68rem; font-weight: 700; } .meteogram__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; } .meteogram__title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); } .meteogram__canvas { margin-top: 0.35rem; } .meteogram__canvas svg { display: block; width: 100%; height: auto; color: var(--text-muted); } .segmented { display: inline-flex; padding: 3px; border: 1px solid var(--input-border); border-radius: var(--radius); background-color: var(--bg-card); gap: 2px; } .segmented button { padding: 0.25rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.7rem; font-weight: 600; color: var(--text-sub); transition: background-color 0.15s, color 0.15s; } .segmented button:hover { color: var(--text-main); } /* Varianta bez popisků – tlačítka jsou čtvercová, text nese title */ .segmented--icons button { display: flex; align-items: center; justify-content: center; width: 24px; height: 22px; padding: 0; } .segmented--icons .icon { font-size: 0.85rem; } .segmented button[aria-pressed="true"] { background-color: var(--accent); color: var(--accent-text); font-weight: 700; } .city-list { display: flex; flex-direction: column; gap: 0.5rem; } .city-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border-card); border-radius: var(--radius-lg); background-color: var(--input-bg); } .city-row.is-active { border-color: var(--accent); background-color: var(--accent-soft); } .city-row__name { font-size: 0.8rem; font-weight: 700; } .city-row__country { font-size: 0.66rem; color: var(--text-muted); } /* ========================================================================== 8. WIDGET KALENDÁŘE ========================================================================== */ /* Navigace měsíců vedle nadpisu widgetu */ .cal__nav { display: flex; align-items: center; gap: 0.1rem; margin-right: auto; padding-left: 0.35rem; } .cal__month { font-size: 0.76rem; font-weight: 700; min-width: 6.6rem; text-align: center; font-variant-numeric: tabular-nums; } /* Rozvržení se řídí šířkou samotného widgetu, ne šířkou okna. Dřív se dva sloupce zapínaly podle okna, takže se u užšího widgetu nevešly a přehled událostí se ořízl. */ .calwidget { container-type: inline-size; container-name: calwidget; } .calwidget__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; flex: 1; min-height: 0; } /* Do zhruba třetiny šířky se přehled nevejde čitelně, proto zůstane jen měsíční mřížka a roztáhne se na celou plochu. */ .calwidget__body > .agenda { display: none; } @container calwidget (min-width: 340px) { .calwidget__body { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .calwidget__body > .agenda { display: flex; } } @container calwidget (min-width: 520px) { .calwidget__body { gap: 1rem; } } /* Řádky se roztáhnou podle dostupné výšky, aby se mřížka vešla do widgetu. */ .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(6, minmax(0, 1fr)); gap: 2px; min-height: 0; } .cal__dow { padding: 0; font-size: 0.58rem; line-height: 1.4; font-weight: 700; text-align: center; text-transform: uppercase; color: var(--text-muted); } .cal__dow--we { color: var(--bad); } .cal__day { position: relative; display: flex; align-items: center; justify-content: center; min-height: 17px; padding-bottom: 4px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 0.68rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-sub); transition: background-color 0.15s, border-color 0.15s; } .cal__day:hover { background-color: var(--bg-card-hover); } .cal__day--empty { pointer-events: none; } .cal__day--we { color: var(--text-muted); } .cal__day--holiday { color: var(--bad); font-weight: 700; } .cal__day--today { border-color: var(--accent); background-color: var(--accent-soft); color: var(--text-main); font-weight: 800; } .cal__dots { position: absolute; bottom: 1px; left: 0; right: 0; display: flex; justify-content: center; gap: 1.5px; pointer-events: none; } .cal__dot { width: 3px; height: 3px; border-radius: 50%; background-color: var(--warm); } /* Přehled dnešních a nejbližších událostí vedle kalendáře */ .agenda { display: flex; flex-direction: column; gap: 0.28rem; min-height: 0; overflow-y: auto; padding-right: 0.25rem; } .agenda__day { display: flex; flex-direction: column; gap: 0.1rem; } .agenda__day + .agenda__day { padding-top: 0.28rem; border-top: 1px solid var(--border-card); } .agenda__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.35rem; min-width: 0; } .agenda__day { min-width: 0; } .agenda__weekday { font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-sub); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .agenda__day--today .agenda__weekday { color: var(--accent); } .agenda__date { font-size: 0.64rem; font-family: var(--font-mono); color: var(--text-muted); flex: none; } .agenda__item { display: flex; align-items: flex-start; gap: 0.35rem; padding: 0.2rem 0.4rem; border: 1px solid var(--border-card); border-radius: var(--radius-sm); background-color: var(--input-bg); font-size: 0.7rem; min-width: 0; overflow-wrap: anywhere; } .agenda__item::before { content: ""; flex: none; width: 4px; height: 4px; margin-top: 0.4rem; border-radius: 50%; background-color: var(--warm); } /* Jmeniny a státní svátek u každého dne v přehledu */ .agenda__nameday { font-size: 0.66rem; color: var(--text-muted); overflow-wrap: anywhere; } .agenda__nameday b { font-weight: 700; color: var(--text-sub); } .agenda__holiday { font-size: 0.66rem; font-weight: 600; color: var(--bad); } /* Seznam událostí v dialogu dne */ .daylist { display: flex; flex-direction: column; gap: 0.4rem; } .daylist__item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.6rem; border: 1px solid var(--border-card); border-radius: var(--radius); background-color: var(--input-bg); font-size: 0.8rem; } /* ========================================================================== 9. WIDGET MINUTKY ========================================================================== */ .timer__limit { font-size: 0.64rem; color: var(--text-muted); } .timer__body { display: flex; align-items: center; justify-content: center; gap: 0.8rem; flex: 1; min-height: 0; } .timer__main { display: flex; align-items: center; gap: 0.6rem; } .timer__side { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; } .timer__dial { width: 104px; max-width: 34vw; flex: none; } .timer__dial svg { display: block; width: 100%; height: auto; } .timer__plate { fill: var(--input-bg); stroke: var(--border-card); stroke-width: 2; } .timer__tick { stroke: var(--text-muted); stroke-width: 1.5; stroke-linecap: round; opacity: 0.55; } .timer__tick--major { stroke: var(--text-sub); stroke-width: 2.5; opacity: 1; } .timer__num { fill: var(--text-sub); font-family: var(--font-sans); font-size: 13px; font-weight: 700; } .timer__wedge { fill: var(--accent); fill-opacity: 0.3; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; } .timer__wedge.is-done { fill: var(--bad); stroke: var(--bad); } .timer__hand { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; } .timer__hub { fill: var(--accent); } .timer__hand.is-done, .timer__hub.is-done { stroke: var(--bad); fill: var(--bad); } /* Digitální odpočet lze přepsat; za běhu se uzamkne jen ke čtení. */ .timer__readout { width: 5.2rem; padding: 0.1rem 0.2rem; border: 1px solid transparent; border-radius: var(--radius-sm); background-color: transparent; color: var(--text-main); font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; line-height: 1.1; text-align: center; font-variant-numeric: tabular-nums; } .timer__readout:hover { border-color: var(--input-border); } .timer__readout:focus { outline: none; border-color: var(--accent); background-color: var(--input-bg); } .timer__readout:read-only { border-color: transparent; background-color: transparent; color: var(--accent); cursor: default; } .timer__status { font-size: 0.66rem; color: var(--text-muted); } .timer__status.is-running { color: var(--accent); font-weight: 600; } .timer__status.is-done { color: var(--bad); font-weight: 700; } .timer__buttons { display: flex; gap: 0.35rem; } .timer__btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border-card); border-radius: var(--radius-sm); background-color: var(--input-bg); color: var(--text-sub); transition: background-color 0.15s, color 0.15s, border-color 0.15s; } .timer__btn:hover { border-color: var(--border-hover); color: var(--text-main); } .timer__btn .icon { font-size: 0.95rem; } .timer__btn--main { background-color: var(--accent); border-color: var(--accent); color: var(--accent-text); } .timer__btn--main:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); } .timer__btn--main .icon { fill: currentColor; stroke: currentColor; } /* Předvolby stojí svisle vedle ciferníku */ .timer__presets { display: flex; flex-direction: column; gap: 0.25rem; flex: none; padding-left: 0.6rem; border-left: 1px solid var(--border-card); } .timer__presets-label { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); } .timer__presets-list { display: flex; flex-direction: column; gap: 0.25rem; min-height: 0; overflow-y: auto; } .timer__presets-list .chip { justify-content: center; padding: 0.16rem 0.5rem; background-color: var(--input-bg); font-family: var(--font-mono); font-size: 0.66rem; } /* ========================================================================== 10. POZNÁMKY ========================================================================== */ .notes__form { display: flex; gap: 0.35rem; flex: none; } .notes__form .input { font-size: 0.74rem; padding: 0.32rem 0.5rem; } .notes__list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; padding-right: 0.2rem; } .note { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.28rem 0.5rem; border: 1px solid var(--border-card); border-radius: var(--radius-sm); background-color: var(--input-bg); font-size: 0.74rem; } .note__toggle { display: flex; align-items: center; gap: 0.45rem; flex: 1; min-width: 0; text-align: left; } .note__toggle .icon { font-size: 0.95rem; flex: none; } .note__toggle .icon.is-done { color: var(--good); } .note__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .note.is-done .note__text { text-decoration: line-through; color: var(--text-muted); } .note__del { color: var(--text-muted); padding: 0.15rem; } .note__del:hover { color: var(--bad); } /* ========================================================================== 11. KALKULAČKA MĚN ========================================================================== */ .cur__body { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; justify-content: center; } .cur__input-wrap { position: relative; } .cur__input-wrap .input { padding-right: 4.5rem; font-weight: 700; } .cur__unit { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); padding: 0.1rem 0.4rem; border: 1px solid var(--border-card); border-radius: var(--radius-sm); background-color: var(--bg-card); font-size: 0.65rem; font-weight: 800; color: var(--text-muted); pointer-events: none; } .cur__outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; } .cur__out { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; padding: 0.28rem 0.5rem; border: 1px solid var(--border-card); border-radius: var(--radius-sm); background-color: var(--input-bg); } .cur__out-code { font-size: 0.65rem; font-weight: 700; color: var(--text-muted); } .cur__out-val { font-size: 0.82rem; font-weight: 800; font-variant-numeric: tabular-nums; } .cur__out:first-child .cur__out-val { color: var(--good); } .cur__out:last-child .cur__out-val { color: var(--accent); } /* ========================================================================== 12. ROZCESTNÍK – ZÁLOŽKY A DLAŽDICE ========================================================================== */ .section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .section__head--plain { margin-bottom: 0; } .section__title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); } .section__title .icon { font-size: 1rem; color: var(--accent); } .section__tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .panel { padding: 1.25rem; } .tabstrip { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.6rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border-card); } .tabstrip .chip { flex: none; padding: 0.4rem 0.9rem; font-size: 0.75rem; font-weight: 700; } .tabstrip .chip[aria-selected="true"] .badge { background-color: rgba(0, 0, 0, 0.25); color: inherit; } .tilegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 66px; grid-auto-flow: row dense; gap: 0.6rem; } @media (min-width: 640px) { .tilegrid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (min-width: 900px) { .tilegrid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .tile { position: relative; display: flex; grid-column: span 2; grid-row: span 1; border: 1px solid var(--tile-border); border-radius: var(--radius-lg); background-color: var(--tile-bg); box-shadow: 0 4px 10px -6px var(--shadow-color); transition: background-color 0.15s, border-color 0.15s; } .tile:hover { background-color: var(--tile-hover); border-color: var(--border-hover); } .tile[data-size="1x1"] { grid-column: span 1; } .tile[data-size="1x2"] { grid-column: span 2; } .tile[data-size="1x3"] { grid-column: span 3; } .tile[data-size="1x4"] { grid-column: span 4; } .tile[data-size="1x5"] { grid-column: span 5; } .tile[data-size="1x6"] { grid-column: span 6; } .tile[data-size="2x1"] { grid-column: span 1; grid-row: span 2; } .tile[data-size="2x2"] { grid-column: span 2; grid-row: span 2; } .tile[data-size="2x3"] { grid-column: span 3; grid-row: span 2; } .tile[data-size="2x4"] { grid-column: span 4; grid-row: span 2; } .tile[data-size="2x5"] { grid-column: span 5; grid-row: span 2; } .tile[data-size="2x6"] { grid-column: span 6; grid-row: span 2; } /* Ikona vlevo, název nad adresou, obojí svisle na střed dlaždice */ .tile__link { display: flex; align-items: center; gap: 0.65rem; width: 100%; min-width: 0; padding: 0.5rem 0.7rem; } .tile[data-size="1x1"] .tile__link { justify-content: center; gap: 0; padding: 0.4rem; } /* Vysoká dlaždice je úzká, proto ikona nad názvem a bez adresy */ .tile[data-size="2x1"] .tile__link { flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.4rem 0.3rem; } .tile[data-size="2x1"] .tile__body { flex: none; width: 100%; text-align: center; } .tile[data-size="2x1"] .tile__name { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.76rem; line-height: 1.15; } .tile[data-size="2x1"] .tile__row { justify-content: center; } .tile__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; overflow: hidden; border: 1px solid var(--tile-border); border-radius: var(--radius); background-color: var(--bg-card); font-size: 0.95rem; font-weight: 800; color: var(--accent); /* Písmeno leží pod ikonou; když se obrázek nenačte, prostě prosvitne. */ position: relative; } .tile__icon img { position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); object-fit: contain; } .tile__body { display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; min-width: 0; flex: 1; } .tile__row { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; } .tile__name { font-size: 0.86rem; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tile:hover .tile__name { color: var(--accent); } .tile__host { font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.2; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tile__pin { font-size: 0.85rem; color: var(--warm); flex: none; } .tile__edit { position: absolute; right: 4px; bottom: 4px; display: none; padding: 0.2rem; border: 1px solid var(--border-card); border-radius: var(--radius-sm); background-color: var(--bg-card); color: var(--text-muted); } .tile:hover .tile__edit, .tile:focus-within .tile__edit { display: block; } .tile__edit:hover { color: var(--accent); } .tile:hover .tip--anchored, .tile:focus-within .tip--anchored { display: flex; } .tile:first-child .tip--anchored { left: 0; transform: none; } /* Tooltipy u odkazů lze v nastavení vzhledu úplně vypnout. */ html[data-tooltips="hidden"] .tile:hover .tip--anchored, html[data-tooltips="hidden"] .tile:focus-within .tip--anchored { display: none; } .catblock { margin-bottom: 1.5rem; } .catblock__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.4rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--border-card); } .catblock__title { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 700; } .panel__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; padding-top: 0.85rem; margin-top: 1rem; border-top: 1px solid var(--border-card); } /* ========================================================================== 12b. RYCHLÉ POZNÁMKY ========================================================================== */ .scratch__area { flex: 1; min-height: 0; width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--border-card); border-radius: var(--radius-sm); background-color: var(--input-bg); color: var(--text-main); font: inherit; font-size: 0.78rem; line-height: 1.45; resize: none; } .scratch__area:focus { outline: none; border-color: var(--accent); } .scratch__area::placeholder { color: var(--text-muted); } .scratch__state { font-size: 0.62rem; color: var(--text-muted); } /* ========================================================================== 12c. PITNÝ REŽIM ========================================================================== */ .drink { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; justify-content: center; } .drink__row { display: flex; align-items: center; gap: 0.5rem; } .drink__icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border: 1px solid var(--border-card); border-radius: var(--radius-sm); background-color: var(--input-bg); color: var(--accent); } .drink__icon .icon { font-size: 0.95rem; } .drink__main { display: flex; flex-direction: column; flex: 1; min-width: 0; } .drink__value { font-size: 1rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; } .drink__note { font-size: 0.64rem; line-height: 1.2; color: var(--text-muted); } .drink__buttons { display: flex; gap: 0.25rem; flex: none; } .drink__btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border-card); border-radius: var(--radius-sm); background-color: var(--input-bg); color: var(--text-sub); transition: background-color 0.15s, color 0.15s, border-color 0.15s; } .drink__btn:hover { border-color: var(--border-hover); color: var(--text-main); } .drink__btn .icon { font-size: 0.9rem; } .drink__btn--add { background-color: var(--accent-soft); border-color: var(--border-card); color: var(--text-main); } .drink__bar { position: relative; height: 6px; border-radius: 99px; background-color: var(--input-bg); border: 1px solid var(--border-card); overflow: hidden; } .drink__fill { display: block; height: 100%; border-radius: 99px; background-color: var(--accent); transition: width 0.2s; } .drink__fill.is-done { background-color: var(--good); } /* ========================================================================== 12d. SVĚTOVÝ ČAS ========================================================================== */ .clocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; flex: 1; align-content: center; } .clocks--single { grid-template-columns: minmax(0, 1fr); } .clock { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; padding: 0.35rem 0.5rem; border: 1px solid var(--border-card); border-radius: var(--radius-sm); background-color: var(--input-bg); } .clock__city { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clock__time { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; } .clock__meta { font-size: 0.6rem; color: var(--text-muted); } /* Analogová podoba */ .clocks--analog { grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); } .clock--analog { align-items: center; text-align: center; gap: 0.15rem; } .clock--analog svg { display: block; width: 100%; max-width: 62px; height: auto; margin: 0 auto; } .clock--analog .clock__city { width: 100%; } .clockface__plate { fill: var(--bg-card); stroke: var(--border-card); stroke-width: 3; } .clockface__tick { stroke: var(--text-muted); stroke-width: 3; stroke-linecap: round; opacity: 0.6; } .clockface__tick--major { stroke: var(--text-sub); stroke-width: 5; opacity: 1; } .clockface__hour { stroke: var(--text-main); stroke-width: 6; stroke-linecap: round; } .clockface__minute { stroke: var(--text-main); stroke-width: 4; stroke-linecap: round; } .clockface__second { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; } .clockface__hub { fill: var(--accent); } /* Puntík na špičce hodinové ručičky – čas jde odečíst na první pohled */ .clockface__hourdot { fill: var(--accent); stroke: var(--bg-card); stroke-width: 2; } .clock__meta.is-shift { color: var(--warm); } /* ========================================================================== 12e. RSS ČTEČKA ========================================================================== */ .feed { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.2rem; } .feed__item { display: flex; align-items: stretch; gap: 0.2rem; border: 1px solid var(--border-card); border-radius: var(--radius-sm); background-color: var(--input-bg); transition: background-color 0.15s, border-color 0.15s; } .feed__item:hover { background-color: var(--bg-card-hover); border-color: var(--border-hover); } .feed__link { display: flex; align-items: flex-start; gap: 0.4rem; flex: 1; min-width: 0; padding: 0.35rem 0 0.35rem 0.45rem; text-align: left; } .feed__hide { display: flex; align-items: center; justify-content: center; width: 26px; flex: none; padding: 0; border-left: 1px solid transparent; color: var(--text-muted); transition: color 0.15s, border-color 0.15s; } .feed__hide:hover { color: var(--bad); border-left-color: var(--border-card); } .feed__hide .icon { font-size: 0.85rem; } .feed__dot { flex: none; width: 5px; height: 5px; margin-top: 0.42rem; border-radius: 50%; background-color: var(--accent); } .feed__main { min-width: 0; flex: 1; } .feed__title { display: block; font-size: 0.74rem; font-weight: 600; line-height: 1.25; color: var(--text-main); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .feed__meta { display: block; font-size: 0.62rem; color: var(--text-muted); } /* ========================================================================== 12g. NEJPOUŽÍVANĚJŠÍ ODKAZY ========================================================================== */ .toplinks { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.2rem; } .toplink { display: flex; align-items: center; gap: 0.45rem; padding: 0.25rem 0.4rem; border: 1px solid var(--border-card); border-radius: var(--radius-sm); background-color: var(--input-bg); transition: background-color 0.15s, border-color 0.15s; } .toplink:hover { background-color: var(--bg-card-hover); border-color: var(--border-hover); } .toplink__icon { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; overflow: hidden; border: 1px solid var(--tile-border); border-radius: var(--radius-sm); background-color: var(--bg-card); font-size: 0.68rem; font-weight: 800; color: var(--accent); } .toplink__icon img { position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; transform: translate(-50%, -50%); object-fit: contain; } .toplink__main { min-width: 0; flex: 1; display: flex; flex-direction: column; } .toplink__name { font-size: 0.74rem; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toplink__host { font-family: var(--font-mono); font-size: 0.6rem; line-height: 1.2; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toplink__count { flex: none; padding: 0.05rem 0.35rem; border-radius: 99px; background-color: var(--accent-soft); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; } /* ========================================================================== 12f. ODPOČET K UDÁLOSTI ========================================================================== */ .countdown { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; justify-content: center; min-height: 0; } .countdown__main { display: flex; align-items: baseline; gap: 0.4rem; } .countdown__days { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: tabular-nums; } .countdown__unit { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); } .countdown__name { font-size: 0.82rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .countdown__date { font-size: 0.66rem; color: var(--text-muted); } .countdown__rest { display: flex; flex-direction: column; gap: 0.2rem; overflow-y: auto; min-height: 0; } .countdown__row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding-top: 0.25rem; border-top: 1px solid var(--border-card); font-size: 0.7rem; } .countdown__row-days { font-weight: 700; font-variant-numeric: tabular-nums; flex: none; } .countdown__row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================== 13. SKUPINY ODKAZŮ ========================================================================== */ /* Svislý seznam uvnitř widgetu; při větším počtu skupin se roluje. */ .groups__list { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.2rem; } .group { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.25rem 0.25rem 0.5rem; border: 1px solid var(--border-card); border-radius: var(--radius-sm); background-color: var(--input-bg); } .group__main { flex: 1; min-width: 0; } .group__name { font-size: 0.76rem; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .group__count { font-size: 0.62rem; line-height: 1.2; color: var(--text-muted); } .group__status { font-size: 0.64rem; line-height: 1.4; color: var(--text-muted); } .group__status.is-warn { color: var(--warm); } /* ========================================================================== 14. DIALOGY ========================================================================== */ dialog { width: min(100%, 980px); max-width: calc(100vw - 1.5rem); max-height: 92vh; padding: 0; border: 1px solid var(--modal-border); border-radius: var(--radius-xl); background-color: var(--modal-bg); color: var(--text-main); overflow: hidden; } dialog::backdrop { background-color: rgba(0, 0, 0, 0.65); } dialog.dialog--sm { width: min(100%, 560px); } .dialog__wrap { display: flex; flex-direction: column; max-height: 92vh; } .dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--modal-border); background-color: var(--modal-header); flex: none; } .dialog__head h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; } .dialog__head .icon { color: var(--accent); } .dialog__body { padding: 1.25rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 1rem; } .dialog__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1.25rem; border-top: 1px solid var(--modal-border); flex: none; } .dialog__foot-right { margin-left: auto; display: flex; gap: 0.5rem; } .dialog__hint { font-size: 0.72rem; color: var(--text-muted); } .dialog__nav { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.6rem 1.25rem; border-bottom: 1px solid var(--modal-border); flex: none; } .settings__pane { display: flex; flex-direction: column; gap: 1rem; } /* Nadpis oddílu a ovládání vedle sebe */ .settings__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; } .settings__head .segmented { flex: none; } .settings__switches { display: flex; flex-wrap: wrap; gap: 0.4rem; } .settings__group { display: flex; flex-direction: column; gap: 0.5rem; } .settings__indent { margin-left: 0.75rem; } .settings__legend { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); } .grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.5rem; } /* Předvolby minutky: čtyři kompaktní panely vedle sebe */ .presetgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem; } .preset { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.45rem 0.5rem; border: 1px solid var(--border-card); border-radius: var(--radius); background-color: var(--input-bg); } .preset__label { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .preset__row { display: flex; align-items: center; gap: 0.2rem; } .preset__row .input { width: 100%; min-width: 0; padding: 0.25rem 0.3rem; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; text-align: center; } .preset__colon { font-weight: 700; color: var(--text-muted); } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.6rem; } .theme-card { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem; border: 1px solid var(--border-card); border-radius: var(--radius); background-color: var(--input-bg); text-align: left; font-size: 0.76rem; font-weight: 600; } .theme-card:hover { border-color: var(--border-hover); } .theme-card[aria-pressed="true"] { border-color: var(--accent); background-color: var(--accent-soft); } .theme-card__dots { flex: none; width: 46px; height: 14px; } /* Náhled písma – ukázka je vysázená přímo tím písmem */ .fontgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 0.5rem; } .fontcard { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.6rem; border: 1px solid var(--border-card); border-radius: var(--radius); background-color: var(--input-bg); text-align: left; } .fontcard:hover { border-color: var(--border-hover); } .fontcard[aria-pressed="true"] { border-color: var(--accent); background-color: var(--accent-soft); } .fontcard__sample { font-size: 1.05rem; font-weight: 700; line-height: 1.25; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fontcard__name { font-family: var(--font-sans); font-size: 0.66rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Posuvník velikosti */ .sizerow { display: flex; align-items: center; gap: 0.75rem; } .sizerow input[type="range"] { flex: 1; min-width: 0; height: 22px; accent-color: var(--accent); background: transparent; cursor: pointer; } .sizerow__value { flex: none; min-width: 3.4rem; padding: 0.2rem 0.45rem; border: 1px solid var(--border-card); border-radius: var(--radius-sm); background-color: var(--input-bg); font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } .sizerow__hint { flex: none; font-size: 0.66rem; color: var(--text-muted); } .rowlist { display: flex; flex-direction: column; gap: 0.4rem; } .rowitem { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border: 1px solid var(--border-card); border-radius: var(--radius); background-color: var(--input-bg); font-size: 0.78rem; } .rowitem__main { flex: 1; min-width: 0; } .rowitem__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rowitem__sub { display: block; font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rowitem__tools { display: flex; align-items: center; gap: 0.15rem; flex: none; flex-wrap: wrap; } /* Úchyt pro přetažení myší/dotykem. Šipky v rowitem__tools zůstávají plně funkční alternativou pro ovládání klávesnicí. */ .rowitem__drag { display: flex; align-items: center; flex: none; color: var(--text-muted); cursor: grab; touch-action: none; } .rowitem__drag:active { cursor: grabbing; } .rowitem--dragging { opacity: 0.5; } .pickerlist { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem; border: 1px solid var(--border-card); border-radius: var(--radius); background-color: var(--input-bg); } .note-box { padding: 0.7rem 0.85rem; border: 1px solid var(--border-card); border-left: 3px solid var(--accent); border-radius: var(--radius); background-color: var(--input-bg); font-size: 0.74rem; color: var(--text-sub); } .note-box--warn { border-left-color: var(--bad); } /* ========================================================================== 15. LIŠTA NEULOŽENÝCH ZMĚN ========================================================================== */ .savebar { position: fixed; right: 1rem; bottom: 1rem; z-index: 70; display: flex; align-items: center; gap: 0.7rem; max-width: calc(100vw - 2rem); padding: 0.6rem 0.7rem; border: 1px solid var(--warm); border-radius: var(--radius-lg); background-color: var(--modal-bg); box-shadow: 0 18px 35px -12px rgba(0, 0, 0, 0.6); } .savebar__icon { font-size: 1.15rem; color: var(--warm); } .savebar__text { display: flex; flex-direction: column; } .savebar__title { font-size: 0.78rem; font-weight: 700; } .savebar__note { font-size: 0.68rem; color: var(--text-muted); } /* ========================================================================== 16. RESPONZIVITA ========================================================================== */ @media (max-width: 860px) { .namedaybox { display: none; } .brand__sub { display: none; } } @media (max-width: 560px) { body { font-size: 14px; } .header__inner { gap: 0.6rem; } .header__status { width: 100%; justify-content: space-between; } .main { padding: 1rem 0.75rem 0; gap: 1rem; } .panel { padding: 0.85rem; } .cur__outs { grid-template-columns: 1fr; } .dialog__body { padding: 0.85rem; } .dialog__head { padding: 0.85rem; } .dialog__nav { padding: 0.5rem 0.85rem; } .search__row { flex-direction: column; } .widget-grid { grid-auto-rows: auto; } .timer__dial { width: 96px; } .timer__readout { font-size: 1.2rem; } .weather__temp { font-size: 1.5rem; } .savebar { right: 0.5rem; bottom: 0.5rem; gap: 0.5rem; padding: 0.5rem; } .savebar__note { display: none; } } @media print { .header, .search, dialog { display: none; } } /* ========================================================================== 17. ATRIBUT HIDDEN Musí být až na konci: pravidla jako .widget { display: flex } mají stejnou specificitu, takže o vítězi rozhoduje pořadí v souboru. Bez toho by přepínače v nastavení nic neskryly. ========================================================================== */ [hidden] { display: none; }