/** * Tmavy rezim (Dark Mode) pro ChainBreak * Aktivuje se pridanim tridy .dark-mode na * Glassmorphism design s tmavym pozadim */ /* Tmave pozadi stranky */ body.dark-mode { background: linear-gradient(135deg, #1a2340 0%, #2c3e6b 40%, #1c264a 100%); color: rgba(255, 255, 255, 0.9); } /* Navbar - uz je tmava, jen jemne upravy */ body.dark-mode .navbar { background-color: rgba(20, 28, 58, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* Profile card / hlavni kontejnery */ body.dark-mode .profile-card, body.dark-mode .welcome-card, body.dark-mode .card, body.dark-mode .content-section { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); border-top-color: rgba(247, 147, 30, 0.4); } body.dark-mode .profile-card h1, body.dark-mode .welcome-card h2, body.dark-mode .card h3, body.dark-mode .content-section h2, body.dark-mode .content-section h3, body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4 { color: #ffffff; } body.dark-mode p, body.dark-mode .profile-basic p, body.dark-mode .card p, body.dark-mode .welcome-card p, body.dark-mode .content-section p, body.dark-mode .feature-list li { color: rgba(255, 255, 255, 0.8); } /* Statistiky */ body.dark-mode .stat-item { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); } body.dark-mode .stat-label { color: rgba(255, 255, 255, 0.9); } body.dark-mode .stat-value { color: #ffffff; } /* Info rows na profilu */ body.dark-mode .info-row { border-bottom-color: rgba(255, 255, 255, 0.1); } body.dark-mode .info-label { color: rgba(255, 255, 255, 0.9); } body.dark-mode .info-value { color: rgba(255, 255, 255, 0.9); } /* Profile header border */ body.dark-mode .profile-header { border-bottom-color: rgba(255, 255, 255, 0.1); } /* Bio */ body.dark-mode .profile-basic .bio { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); } /* Addiction cards na profilu */ body.dark-mode .addiction-card { background: rgba(255, 255, 255, 0.08); border-left-color: var(--color-secondary); } body.dark-mode .addiction-card h4 { color: #ffffff; } body.dark-mode .addiction-card .days-info { color: rgba(255, 255, 255, 0.8); } /* Profil addictions section border */ body.dark-mode .profile-addictions-section { border-top-color: rgba(255, 255, 255, 0.1); } /* Form section kontejner (create-article.php apod.) */ body.dark-mode .form-section { background: rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); } /* Formularove prvky */ body.dark-mode .form-group label { color: rgba(255, 255, 255, 0.9); } body.dark-mode .form-group input[type="text"], body.dark-mode .form-group input[type="date"], body.dark-mode .form-group input[type="number"], body.dark-mode .form-group input[type="email"], body.dark-mode .form-group input[type="password"], body.dark-mode .form-group textarea, body.dark-mode .form-group select { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: #ffffff; } body.dark-mode .form-group input:focus, body.dark-mode .form-group textarea:focus, body.dark-mode .form-group select:focus { border-color: var(--color-secondary); } body.dark-mode .form-group small { color: rgba(255, 255, 255, 0.85); } /* Checkbox group */ body.dark-mode .checkbox-group label { color: rgba(255, 255, 255, 0.9); } /* Select options */ body.dark-mode .form-group select option { background: #2c3e50; color: #ffffff; } /* Toggle kontejnery */ body.dark-mode .anonymous-toggle-container { background: rgba(52, 152, 219, 0.1); border-color: rgba(52, 152, 219, 0.25); } body.dark-mode .anonymous-toggle-label { color: rgba(255, 255, 255, 0.9); } body.dark-mode .anonymous-toggle-description { color: rgba(255, 255, 255, 0.9); } /* Footer */ body.dark-mode .user-footer { color: rgba(255, 255, 255, 0.9); } body.dark-mode .user-footer:hover { color: #ffffff; } body.dark-mode .user-footer strong { color: rgba(255, 255, 255, 0.95); } body.dark-mode .user-footer:hover strong { color: #ffffff; } /* Actions border */ body.dark-mode .actions { border-top-color: rgba(255, 255, 255, 0.1); } /* Addiction item (my-addictions) */ body.dark-mode .addiction-item { background: rgba(255, 255, 255, 0.08); border-left-color: var(--color-secondary); } body.dark-mode .addiction-item h3 { color: #ffffff; } body.dark-mode .addiction-item p { color: rgba(255, 255, 255, 0.8); } /* Tabulky a listy */ body.dark-mode table { border-color: rgba(255, 255, 255, 0.1); } body.dark-mode th { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.1); } body.dark-mode td { color: rgba(255, 255, 255, 0.8); border-color: rgba(255, 255, 255, 0.1); } /* Admin panel */ body.dark-mode .admin-card { background: rgba(255, 255, 255, 0.1); border-color: rgba(247, 147, 30, 0.3); } body.dark-mode .admin-note { background: rgba(255, 193, 7, 0.1); color: rgba(255, 255, 255, 0.8); } /* Admin articles list */ body.dark-mode .article-list-item { background: rgba(0, 0, 0, 0.4) !important; border-left-color: rgba(52, 152, 219, 0.8) !important; backdrop-filter: blur(8px); } body.dark-mode .article-list-item h4 { color: #ffffff !important; } body.dark-mode .article-list-item .meta { color: rgba(255, 255, 255, 0.7) !important; } body.dark-mode .article-list-item .actions .btn { background: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.2) !important; } body.dark-mode .article-list-item .actions .btn:hover { background: rgba(255, 255, 255, 0.25) !important; } body.dark-mode .article-list-item .actions .btn-primary { background: rgba(52, 152, 219, 0.6) !important; border-color: rgba(52, 152, 219, 0.8) !important; } body.dark-mode .article-list-item .actions .btn-danger { background: rgba(231, 76, 60, 0.6) !important; border-color: rgba(231, 76, 60, 0.8) !important; } body.dark-mode .pending-section { border-left-color: rgba(231, 76, 60, 0.8) !important; } body.dark-mode .empty-message { color: rgba(255, 255, 255, 0.6) !important; } body.dark-mode .pending-count { background: rgba(231, 76, 60, 0.8) !important; } /* Admin themes list */ body.dark-mode .theme-item { background: rgba(0, 0, 0, 0.4) !important; backdrop-filter: blur(8px); } body.dark-mode .theme-item strong { color: #ffffff !important; } body.dark-mode .theme-item small { color: rgba(255, 255, 255, 0.7) !important; } body.dark-mode .theme-actions .btn { background: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.2) !important; } body.dark-mode .theme-actions .btn:hover { background: rgba(255, 255, 255, 0.25) !important; } body.dark-mode .theme-actions .btn-danger { background: rgba(231, 76, 60, 0.6) !important; border-color: rgba(231, 76, 60, 0.8) !important; } body.dark-mode .addiction-type-item { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); } body.dark-mode .addiction-type-info strong { color: rgba(255, 255, 255, 0.9); } body.dark-mode .addiction-type-info small { color: rgba(255, 255, 255, 0.9); } /* Links v dark mode */ body.dark-mode a { color: #5dade2; } body.dark-mode a:hover { color: var(--color-secondary); } /* Hexagonova navigace (articles-hexagon) */ body.dark-mode .hexagon-grid-container { background: rgba(255, 255, 255, 0.08); } /* Dashboard - article-card (tri sekce "Cist vice") */ body.dark-mode .article-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); } body.dark-mode .article-card h3 { color: #ffffff; } body.dark-mode .article-card p { color: rgba(255, 255, 255, 0.9); } body.dark-mode .article-card a { color: #ffffff; } /* Darkmode toggle specialni barva */ body.dark-mode .darkmode-toggle-container { background: rgba(100, 100, 200, 0.1); border-color: rgba(100, 100, 200, 0.25); } /* Alerts */ body.dark-mode .alert-success { background: rgba(39, 174, 96, 0.15); color: #2ecc71; border-color: rgba(39, 174, 96, 0.3); } body.dark-mode .alert-error { background: rgba(231, 76, 60, 0.15); color: #e74c3c; border-color: rgba(231, 76, 60, 0.3); } /* ============================================ ARTICLES.PHP - dark mode overrides ============================================ */ /* Filtr sekce */ body.dark-mode .articles-filter { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.15); } body.dark-mode .articles-filter h2 { color: #ffffff; } body.dark-mode .filter-btn { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.9); } /* Nadpisova karta */ body.dark-mode .articles-container .profile-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } body.dark-mode .articles-container .profile-card h1 { color: #ffffff; } /* Clankove karty - glassmorphism */ body.dark-mode .articles-container .article-card { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(16px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.15); } body.dark-mode .articles-container .article-card::before { background: rgba(243, 156, 18, 0.3); } body.dark-mode .articles-container .article-card:hover::before { background: rgba(243, 156, 18, 0.6); } body.dark-mode .articles-container .article-card:hover { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35); border-color: rgba(243, 156, 18, 0.4); background: rgba(255, 255, 255, 0.18); } body.dark-mode .article-title { color: #ffffff; } body.dark-mode .article-card .article-meta { color: rgba(255, 255, 255, 0.9); } body.dark-mode .article-type.main { background: rgba(39, 174, 96, 0.2); color: #2ecc71; border-color: rgba(39, 174, 96, 0.3); } body.dark-mode .article-type.story { background: rgba(243, 156, 18, 0.2); color: #f39c12; border-color: rgba(243, 156, 18, 0.3); } body.dark-mode .article-author { color: rgba(255, 255, 255, 0.9); } body.dark-mode .article-date { color: rgba(255, 255, 255, 0.85); } body.dark-mode .article-excerpt { color: rgba(255, 255, 255, 0.9); } /* Detail clanku v dark mode */ body.dark-mode .article-detail { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(16px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.15); } body.dark-mode .article-detail h1 { color: #ffffff; } body.dark-mode .article-detail .article-meta { color: rgba(255, 255, 255, 0.9); border-bottom-color: rgba(255, 255, 255, 0.15); } body.dark-mode .article-detail .article-content { color: rgba(255, 255, 255, 0.9); } body.dark-mode .article-detail .article-content h1, body.dark-mode .article-detail .article-content h2, body.dark-mode .article-detail .article-content h3 { color: #ffffff; } body.dark-mode .article-detail .article-content blockquote { color: rgba(255, 255, 255, 0.85); } body.dark-mode .article-source { background: rgba(52, 152, 219, 0.1); color: rgba(255, 255, 255, 0.9); } body.dark-mode .article-source a { color: #5dade2; } /* Prazdny stav */ body.dark-mode .empty-state { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.15); } body.dark-mode .empty-state h3 { color: #ffffff; } body.dark-mode .empty-state p { color: rgba(255, 255, 255, 0.9); } /* ============================================ CALENDAR.PHP - dark mode overrides ============================================ */ /* Hlavni kontejnery */ body.dark-mode .calendar-header h1 { color: #ffffff; } body.dark-mode .calendar-header h2 { color: #ffffff; } body.dark-mode .calendar-sidebar { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, 0.15); } body.dark-mode .calendar-controls { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, 0.15); } body.dark-mode .calendar-controls h3 { color: #ffffff; } /* Nazvy dnu v tydnu (Po, Ut, St, Ct, Pa, So, Ne) */ body.dark-mode .calendar-day-header { color: #ffffff; } /* Grid kalendare */ body.dark-mode .calendar-grid { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); } /* Dny v kalendari - zachovat barevne gradienty, jen uprava future */ body.dark-mode .calendar-day.future { background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); color: rgba(255, 255, 255, 0.5); } /* Legenda */ body.dark-mode .calendar-legend { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, 0.15); } body.dark-mode .calendar-legend h3 { color: #ffffff; } body.dark-mode .legend-title { color: #ffffff; } body.dark-mode .legend-text { color: rgba(255, 255, 255, 0.9); } body.dark-mode .legend-item span { color: rgba(255, 255, 255, 0.9); } body.dark-mode .legend-box.future { background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%); } /* Statistiky */ body.dark-mode .calendar-stats h3 { color: #ffffff; } body.dark-mode .month-stats h4 { color: #ffffff; } body.dark-mode .stats-toggle-btn { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.2); } body.dark-mode .stats-toggle-btn:hover { background: rgba(255, 255, 255, 0.2); } body.dark-mode .stats-toggle-btn.active { background: var(--color-secondary); color: white; } body.dark-mode .stat-label { color: rgba(255, 255, 255, 0.9); } body.dark-mode .stat-value { color: #ffffff; } body.dark-mode .stat-divider { background: rgba(255, 255, 255, 0.15); } body.dark-mode .no-data-message { color: rgba(255, 255, 255, 0.7); } body.dark-mode .no-stats-message { color: rgba(255, 255, 255, 0.7); } body.dark-mode .no-stats { color: rgba(255, 255, 255, 0.7); } /* Navigace mesicu */ body.dark-mode .month-navigation h2 { color: #ffffff; } /* ============================================ QUESTIONNAIRE.PHP - dark mode overrides ============================================ */ /* Hlavni karta dotazniku */ body.dark-mode .questionnaire-card { background: rgba(0, 0, 0, 0.4) !important; backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); border-top-color: rgba(247, 147, 30, 0.4); } body.dark-mode .questionnaire-card h1 { color: #ffffff !important; } body.dark-mode .questionnaire-subtitle { color: rgba(255, 255, 255, 0.9) !important; } body.dark-mode .questionnaire-subtitle strong { color: var(--color-secondary) !important; } body.dark-mode .late-badge { background: #fbbf24; color: #1a1a1a; } /* Formularove skupiny v dotazniku */ body.dark-mode .questionnaire-card .form-group label { color: rgba(255, 255, 255, 0.95) !important; } body.dark-mode .questionnaire-card .form-group small { color: rgba(255, 255, 255, 0.7) !important; } body.dark-mode .questionnaire-card .required { color: #ff6b6b !important; } /* Radio buttons */ body.dark-mode .radio-group .radio-label { color: rgba(255, 255, 255, 0.9) !important; } body.dark-mode .radio-group .radio-label span { color: rgba(255, 255, 255, 0.9) !important; } body.dark-mode .radio-label input[type="radio"] { accent-color: var(--color-secondary); } /* Number selector buttons (mood, craving) */ body.dark-mode .number-btn { background: rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } body.dark-mode .number-btn:hover { background: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3); } body.dark-mode .number-btn.active { background: linear-gradient(135deg, var(--color-secondary) 0%, #9333ea 100%) !important; color: #ffffff !important; border-color: var(--color-secondary); } /* Textarea v dotazniku */ body.dark-mode .questionnaire-card textarea { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; } body.dark-mode .questionnaire-card textarea::placeholder { color: rgba(255, 255, 255, 0.5); } body.dark-mode .questionnaire-card textarea:focus { border-color: var(--color-secondary) !important; } /* Daily article section */ body.dark-mode .daily-article-section { background: rgba(255, 255, 255, 0.08) !important; border-left-color: var(--color-secondary); } body.dark-mode .daily-article-section h3 { color: #ffffff !important; } body.dark-mode .article-intro { color: rgba(255, 255, 255, 0.85) !important; } body.dark-mode .article-intro strong { color: var(--color-secondary) !important; } /* Daily article card */ body.dark-mode .daily-article-card { background: rgba(255, 255, 255, 0.1) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } body.dark-mode .daily-article-card .article-content { color: rgba(255, 255, 255, 0.9); } body.dark-mode .daily-article-card .article-content h4 { color: #ffffff !important; } body.dark-mode .daily-article-card .article-excerpt { color: rgba(255, 255, 255, 0.85) !important; } body.dark-mode .daily-article-card .article-meta { color: rgba(255, 255, 255, 0.7); } body.dark-mode .daily-article-card .article-meta span { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); } body.dark-mode .no-article-message { color: rgba(255, 255, 255, 0.85) !important; } body.dark-mode .no-article-message a { color: var(--color-secondary) !important; } /* Alert info v dotazniku */ body.dark-mode .alert-info { background: rgba(52, 152, 219, 0.15) !important; border-color: rgba(52, 152, 219, 0.3) !important; color: #5dade2 !important; } body.dark-mode .alert-info p { color: #5dade2 !important; } /* Tlacitko pro cteni clanku */ body.dark-mode .btn-article { background: var(--color-secondary) !important; color: #ffffff !important; } body.dark-mode .btn-article:hover { background: #e68a1a !important; }