/* ========================================================================== Tmavý režim pro Twenty Seventeen – Restaurace U Volejníků Aktivuje se třídou .dark-mode na (přepínač v dark-mode.js) ========================================================================== */ /* --- Barevné proměnné --- */ body.dark-mode { --dm-bg: #1a1a1c; /* hlavní pozadí */ --dm-bg-alt: #232326; /* panely, hlavička, patička */ --dm-bg-soft: #2c2c30; /* tabulky – sudé řádky, vstupy */ --dm-text: #e6e2da; /* základní text – teplá bílá */ --dm-text-muted: #a8a49c; /* popisky, meta údaje */ --dm-heading: #f2efe8; /* nadpisy */ --dm-accent: #d9a15b; /* odkazy – teplá jantarová (hodí se k restauraci) */ --dm-accent-hover: #e8b878; --dm-border: #3a3a3e; /* linky a rámečky */ } /* --- Základ --- */ body.dark-mode, body.dark-mode .site-content-contain, body.dark-mode .site-content, body.dark-mode #page { background-color: var(--dm-bg); color: var(--dm-text); } body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6, body.dark-mode .entry-title, body.dark-mode .entry-title a, body.dark-mode .page-title { color: var(--dm-heading); } body.dark-mode p, body.dark-mode li, body.dark-mode .entry-content, body.dark-mode .entry-summary { color: var(--dm-text); } /* --- Odkazy --- */ body.dark-mode a { color: var(--dm-accent); } body.dark-mode a:hover, body.dark-mode a:focus { color: var(--dm-accent-hover); } /* Twenty Seventeen podtrhává odkazy pomocí box-shadow */ body.dark-mode .entry-content a, body.dark-mode .comment-content a, body.dark-mode .widget a { -webkit-box-shadow: inset 0 -1px 0 var(--dm-accent); box-shadow: inset 0 -1px 0 var(--dm-accent); } body.dark-mode .entry-content a:hover, body.dark-mode .entry-content a:focus { color: var(--dm-bg); background: var(--dm-accent); -webkit-box-shadow: inset 0 0 0 var(--dm-accent); box-shadow: inset 0 0 0 var(--dm-accent); } /* --- Hlavička a horní menu --- */ body.dark-mode .site-header, body.dark-mode .navigation-top { background-color: var(--dm-bg-alt); border-color: var(--dm-border); } body.dark-mode .site-title, body.dark-mode .site-title a, body.dark-mode .site-description { color: var(--dm-heading); } body.dark-mode .navigation-top a, body.dark-mode .main-navigation a { color: var(--dm-text); } body.dark-mode .navigation-top a:hover, body.dark-mode .navigation-top a:focus, body.dark-mode .main-navigation a:hover { color: var(--dm-accent); } body.dark-mode .main-navigation ul ul { background-color: var(--dm-bg-alt); border-color: var(--dm-border); } body.dark-mode .menu-toggle, body.dark-mode .dropdown-toggle { color: var(--dm-text); background: transparent; } /* --- Tabulky (menu, jídelní a nápojový lístek, otevírací doba) --- */ body.dark-mode table, body.dark-mode th, body.dark-mode td { border-color: var(--dm-border); color: var(--dm-text); } body.dark-mode thead th { background-color: var(--dm-bg-alt); color: var(--dm-heading); } body.dark-mode tbody tr:nth-child(even) { background-color: var(--dm-bg-soft); } /* --- Oddělovače a rámečky --- */ body.dark-mode hr { background-color: var(--dm-border); } body.dark-mode .entry-footer, body.dark-mode .site-footer, body.dark-mode .single-featured-image-header, body.dark-mode .page .panel-content, body.dark-mode .panel-content .wrap { background-color: var(--dm-bg); border-color: var(--dm-border); color: var(--dm-text); } /* Střídání panelů na úvodní stránce (Twenty Seventeen front page sections) */ body.dark-mode .twentyseventeen-front-page .panel-content:nth-of-type(even), body.dark-mode .panel-image-prop { background-color: var(--dm-bg-alt); } /* --- Patička --- */ body.dark-mode .site-footer { background-color: var(--dm-bg-alt); } body.dark-mode .site-info, body.dark-mode .site-info a { color: var(--dm-text-muted); } /* --- Widgety, formuláře, tlačítka --- */ body.dark-mode .widget, body.dark-mode .widget-title { color: var(--dm-text); border-color: var(--dm-border); } body.dark-mode input[type="text"], body.dark-mode input[type="email"], body.dark-mode input[type="search"], body.dark-mode input[type="tel"], body.dark-mode input[type="url"], body.dark-mode textarea, body.dark-mode select { background-color: var(--dm-bg-soft); border-color: var(--dm-border); color: var(--dm-text); } body.dark-mode button, body.dark-mode input[type="submit"], body.dark-mode .button { background-color: var(--dm-accent); color: #1a1a1c; border: none; } body.dark-mode button:hover, body.dark-mode input[type="submit"]:hover { background-color: var(--dm-accent-hover); } /* --- Galerie a obrázky --- */ body.dark-mode .wp-caption, body.dark-mode .wp-caption-text, body.dark-mode .gallery-caption { color: var(--dm-text-muted); } body.dark-mode img { opacity: 0.92; /* mírně ztlumit fotky, aby nesvítily */ } /* --- Plynulý přechod mezi režimy --- */ body, body .site-content-contain, body .site-header, body .navigation-top, body .site-footer, body table, body tbody tr { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* --- Přepínač tmavého režimu --- */ .dm-toggle { -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); /* nekolidovat s lištou iPhonu */ z-index: 9999; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); background: #ffffff; color: #222; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; padding: 0; } .dm-toggle, body.dark-mode .dm-toggle { border-radius: 50% !important; overflow: hidden; } body.dark-mode .dm-toggle { background: var(--dm-bg-soft); color: var(--dm-accent); border-color: var(--dm-border); } .dm-toggle { transition: transform 0.15s ease, background-color 0.3s ease; } .dm-toggle:active { transform: scale(0.92); } @media (hover: hover) { .dm-toggle:hover { transform: scale(1.05); } } .dm-toggle:focus-visible { outline: 2px solid #d9a15b; outline-offset: 2px; } .dm-toggle:focus { outline: none; } @media (prefers-reduced-motion: reduce) { body, body * { transition: none !important; } } /* --- Oprava: text s pevně nastavenou tmavou barvou --- */ body.dark-mode .entry-content p, body.dark-mode .entry-content span, body.dark-mode .entry-content strong, body.dark-mode .entry-content em, body.dark-mode .entry-content li, body.dark-mode .entry-content td, body.dark-mode .panel-content p, body.dark-mode .panel-content span, body.dark-mode .panel-content strong { color: var(--dm-text) !important; } body.dark-mode img[src*="logo.png"] { filter: invert(1) hue-rotate(180deg); opacity: 1; } body.dark-mode hr, body.dark-mode .entry-content hr { background-color: var(--dm-border) !important; border: 0 !important; color: var(--dm-border) !important; } /* --- Tabulky: řádek při najetí myší --- */ body.dark-mode tr:hover, body.dark-mode tr:hover td, body.dark-mode tbody tr:hover, body.dark-mode table tr:hover { background-color: #35353a !important; color: var(--dm-text) !important; }