/* ======================================================== DIGITALNA SJEDNICA - 50 COLOR THEMES Svaka tema koristi CSS varijable za potpunu kontrolu boja. Aktivira se klasom na elementu: data-theme="naziv" ======================================================== */ /* === DEFAULT TEMA (Bootstrap Blue) === */ :root { --theme-primary: #0d6efd; --theme-primary-hover: #0b5ed7; --theme-primary-dark: #0a58ca; --theme-primary-light: rgba(13, 110, 253, 0.1); --theme-primary-shadow: rgba(13, 110, 253, 0.3); --theme-gradient-start: #667eea; --theme-gradient-end: #764ba2; --theme-gradient: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%); --theme-navbar-bg: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); --theme-navbar-border: #e9ecef; --theme-body-bg: #f8f9fa; --theme-card-bg: #ffffff; --theme-text: #212529; --theme-text-muted: #6c757d; --theme-border: #dee2e6; --theme-nav-btn-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); --theme-nav-btn-hover-bg: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); --theme-nav-btn-color: #495057; --theme-nav-btn-border: #dee2e6; --theme-active-bg: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-hover) 100%); --theme-active-shadow: var(--theme-primary-shadow); --theme-toggler-border: var(--theme-primary); --theme-footer-link: var(--theme-gradient-start); } /* ============================================ 1. OCEAN BLUE ============================================ */ [data-theme="ocean-blue"] { --theme-primary: #0077b6; --theme-primary-hover: #005f8f; --theme-primary-dark: #004e75; --theme-primary-light: rgba(0, 119, 182, 0.1); --theme-primary-shadow: rgba(0, 119, 182, 0.3); --theme-gradient-start: #0077b6; --theme-gradient-end: #00b4d8; --theme-footer-link: #0077b6; } /* ============================================ 2. EMERALD GREEN ============================================ */ [data-theme="emerald"] { --theme-primary: #2d6a4f; --theme-primary-hover: #1b4332; --theme-primary-dark: #143026; --theme-primary-light: rgba(45, 106, 79, 0.1); --theme-primary-shadow: rgba(45, 106, 79, 0.3); --theme-gradient-start: #2d6a4f; --theme-gradient-end: #52b788; --theme-footer-link: #2d6a4f; } /* ============================================ 3. SUNSET ORANGE ============================================ */ [data-theme="sunset"] { --theme-primary: #e85d04; --theme-primary-hover: #dc2f02; --theme-primary-dark: #c62b02; --theme-primary-light: rgba(232, 93, 4, 0.1); --theme-primary-shadow: rgba(232, 93, 4, 0.3); --theme-gradient-start: #e85d04; --theme-gradient-end: #f48c06; --theme-footer-link: #e85d04; } /* ============================================ 4. ROYAL PURPLE ============================================ */ [data-theme="royal-purple"] { --theme-primary: #7b2cbf; --theme-primary-hover: #5a189a; --theme-primary-dark: #4a1580; --theme-primary-light: rgba(123, 44, 191, 0.1); --theme-primary-shadow: rgba(123, 44, 191, 0.3); --theme-gradient-start: #7b2cbf; --theme-gradient-end: #c77dff; --theme-footer-link: #7b2cbf; } /* ============================================ 5. CRIMSON RED ============================================ */ [data-theme="crimson"] { --theme-primary: #a4133c; --theme-primary-hover: #800f2f; --theme-primary-dark: #590d22; --theme-primary-light: rgba(164, 19, 60, 0.1); --theme-primary-shadow: rgba(164, 19, 60, 0.3); --theme-gradient-start: #a4133c; --theme-gradient-end: #ff4d6d; --theme-footer-link: #a4133c; } /* ============================================ 6. TEAL ============================================ */ [data-theme="teal"] { --theme-primary: #0f9b8e; --theme-primary-hover: #0c7d73; --theme-primary-dark: #096660; --theme-primary-light: rgba(15, 155, 142, 0.1); --theme-primary-shadow: rgba(15, 155, 142, 0.3); --theme-gradient-start: #0f9b8e; --theme-gradient-end: #38d9a9; --theme-footer-link: #0f9b8e; } /* ============================================ 7. INDIGO ============================================ */ [data-theme="indigo"] { --theme-primary: #3d5a80; --theme-primary-hover: #2b4162; --theme-primary-dark: #1f3050; --theme-primary-light: rgba(61, 90, 128, 0.1); --theme-primary-shadow: rgba(61, 90, 128, 0.3); --theme-gradient-start: #3d5a80; --theme-gradient-end: #98c1d9; --theme-footer-link: #3d5a80; } /* ============================================ 8. GOLD ============================================ */ [data-theme="gold"] { --theme-primary: #b8860b; --theme-primary-hover: #9a7209; --theme-primary-dark: #7d5c07; --theme-primary-light: rgba(184, 134, 11, 0.1); --theme-primary-shadow: rgba(184, 134, 11, 0.3); --theme-gradient-start: #b8860b; --theme-gradient-end: #f0c040; --theme-footer-link: #b8860b; } /* ============================================ 9. DARK MODE ============================================ */ [data-theme="dark"] { --theme-primary: #6ea8fe; --theme-primary-hover: #3d8bfd; --theme-primary-dark: #0a6dfd; --theme-primary-light: rgba(110, 168, 254, 0.15); --theme-primary-shadow: rgba(110, 168, 254, 0.3); --theme-gradient-start: #6ea8fe; --theme-gradient-end: #9ec5fe; --theme-navbar-bg: linear-gradient(135deg, #1a1d23 0%, #212529 100%); --theme-navbar-border: #343a40; --theme-body-bg: #121418; --theme-card-bg: #1a1d23; --theme-text: #e9ecef; --theme-text-muted: #adb5bd; --theme-border: #343a40; --theme-nav-btn-bg: linear-gradient(135deg, #2b3035 0%, #212529 100%); --theme-nav-btn-hover-bg: linear-gradient(135deg, #343a40 0%, #2b3035 100%); --theme-nav-btn-color: #dee2e6; --theme-nav-btn-border: #495057; --theme-footer-link: #6ea8fe; } /* ============================================ 10. MIDNIGHT ============================================ */ [data-theme="midnight"] { --theme-primary: #818cf8; --theme-primary-hover: #6366f1; --theme-primary-dark: #4f46e5; --theme-primary-light: rgba(129, 140, 248, 0.15); --theme-primary-shadow: rgba(129, 140, 248, 0.3); --theme-gradient-start: #6366f1; --theme-gradient-end: #a78bfa; --theme-navbar-bg: linear-gradient(135deg, #1e1b4b 0%, #1e1e2e 100%); --theme-navbar-border: #312e81; --theme-body-bg: #0f0e1a; --theme-card-bg: #1e1b4b; --theme-text: #e0e7ff; --theme-text-muted: #a5b4fc; --theme-border: #312e81; --theme-nav-btn-bg: linear-gradient(135deg, #2e2a5e 0%, #1e1b4b 100%); --theme-nav-btn-hover-bg: linear-gradient(135deg, #3730a3 0%, #2e2a5e 100%); --theme-nav-btn-color: #c7d2fe; --theme-nav-btn-border: #4338ca; --theme-footer-link: #818cf8; } /* ============================================ 11. FOREST ============================================ */ [data-theme="forest"] { --theme-primary: #2b9348; --theme-primary-hover: #1a7431; --theme-primary-dark: #155d27; --theme-primary-light: rgba(43, 147, 72, 0.1); --theme-primary-shadow: rgba(43, 147, 72, 0.3); --theme-gradient-start: #2b9348; --theme-gradient-end: #80b918; --theme-footer-link: #2b9348; } /* ============================================ 12. ROSE ============================================ */ [data-theme="rose"] { --theme-primary: #e11d48; --theme-primary-hover: #be123c; --theme-primary-dark: #9f1239; --theme-primary-light: rgba(225, 29, 72, 0.1); --theme-primary-shadow: rgba(225, 29, 72, 0.3); --theme-gradient-start: #e11d48; --theme-gradient-end: #fb7185; --theme-footer-link: #e11d48; } /* ============================================ 13. SLATE ============================================ */ [data-theme="slate"] { --theme-primary: #475569; --theme-primary-hover: #334155; --theme-primary-dark: #1e293b; --theme-primary-light: rgba(71, 85, 105, 0.1); --theme-primary-shadow: rgba(71, 85, 105, 0.3); --theme-gradient-start: #475569; --theme-gradient-end: #94a3b8; --theme-footer-link: #475569; } /* ============================================ 14. CORAL ============================================ */ [data-theme="coral"] { --theme-primary: #f97316; --theme-primary-hover: #ea580c; --theme-primary-dark: #c2410c; --theme-primary-light: rgba(249, 115, 22, 0.1); --theme-primary-shadow: rgba(249, 115, 22, 0.3); --theme-gradient-start: #f97316; --theme-gradient-end: #fb923c; --theme-footer-link: #f97316; } /* ============================================ 15. SAPPHIRE ============================================ */ [data-theme="sapphire"] { --theme-primary: #1d4ed8; --theme-primary-hover: #1e40af; --theme-primary-dark: #1e3a8a; --theme-primary-light: rgba(29, 78, 216, 0.1); --theme-primary-shadow: rgba(29, 78, 216, 0.3); --theme-gradient-start: #1d4ed8; --theme-gradient-end: #60a5fa; --theme-footer-link: #1d4ed8; } /* ============================================ 16. LAVENDER ============================================ */ [data-theme="lavender"] { --theme-primary: #7c3aed; --theme-primary-hover: #6d28d9; --theme-primary-dark: #5b21b6; --theme-primary-light: rgba(124, 58, 237, 0.1); --theme-primary-shadow: rgba(124, 58, 237, 0.3); --theme-gradient-start: #7c3aed; --theme-gradient-end: #a78bfa; --theme-footer-link: #7c3aed; } /* ============================================ 17. MINT ============================================ */ [data-theme="mint"] { --theme-primary: #059669; --theme-primary-hover: #047857; --theme-primary-dark: #065f46; --theme-primary-light: rgba(5, 150, 105, 0.1); --theme-primary-shadow: rgba(5, 150, 105, 0.3); --theme-gradient-start: #059669; --theme-gradient-end: #34d399; --theme-footer-link: #059669; } /* ============================================ 18. BURGUNDY ============================================ */ [data-theme="burgundy"] { --theme-primary: #881337; --theme-primary-hover: #6d0f2b; --theme-primary-dark: #520b20; --theme-primary-light: rgba(136, 19, 55, 0.1); --theme-primary-shadow: rgba(136, 19, 55, 0.3); --theme-gradient-start: #881337; --theme-gradient-end: #f43f5e; --theme-footer-link: #881337; } /* ============================================ 19. STEEL ============================================ */ [data-theme="steel"] { --theme-primary: #4b6584; --theme-primary-hover: #3c526b; --theme-primary-dark: #2e3f52; --theme-primary-light: rgba(75, 101, 132, 0.1); --theme-primary-shadow: rgba(75, 101, 132, 0.3); --theme-gradient-start: #4b6584; --theme-gradient-end: #778ca3; --theme-footer-link: #4b6584; } /* ============================================ 20. AMBER ============================================ */ [data-theme="amber"] { --theme-primary: #d97706; --theme-primary-hover: #b45309; --theme-primary-dark: #92400e; --theme-primary-light: rgba(217, 119, 6, 0.1); --theme-primary-shadow: rgba(217, 119, 6, 0.3); --theme-gradient-start: #d97706; --theme-gradient-end: #fbbf24; --theme-footer-link: #d97706; } /* ============================================ 21. NORDIC ============================================ */ [data-theme="nordic"] { --theme-primary: #5e81ac; --theme-primary-hover: #4c6e96; --theme-primary-dark: #3b5b80; --theme-primary-light: rgba(94, 129, 172, 0.1); --theme-primary-shadow: rgba(94, 129, 172, 0.3); --theme-gradient-start: #5e81ac; --theme-gradient-end: #88c0d0; --theme-navbar-bg: linear-gradient(135deg, #eceff4 0%, #e5e9f0 100%); --theme-body-bg: #eceff4; --theme-footer-link: #5e81ac; } /* ============================================ 22. DRACULA ============================================ */ [data-theme="dracula"] { --theme-primary: #bd93f9; --theme-primary-hover: #a474e8; --theme-primary-dark: #8b55d7; --theme-primary-light: rgba(189, 147, 249, 0.15); --theme-primary-shadow: rgba(189, 147, 249, 0.3); --theme-gradient-start: #bd93f9; --theme-gradient-end: #ff79c6; --theme-navbar-bg: linear-gradient(135deg, #282a36 0%, #1e1f29 100%); --theme-navbar-border: #44475a; --theme-body-bg: #1a1b26; --theme-card-bg: #282a36; --theme-text: #f8f8f2; --theme-text-muted: #6272a4; --theme-border: #44475a; --theme-nav-btn-bg: linear-gradient(135deg, #383a4a 0%, #282a36 100%); --theme-nav-btn-hover-bg: linear-gradient(135deg, #44475a 0%, #383a4a 100%); --theme-nav-btn-color: #f8f8f2; --theme-nav-btn-border: #6272a4; --theme-footer-link: #bd93f9; } /* ============================================ 23. MONOKAI ============================================ */ [data-theme="monokai"] { --theme-primary: #a6e22e; --theme-primary-hover: #8cc418; --theme-primary-dark: #72a010; --theme-primary-light: rgba(166, 226, 46, 0.15); --theme-primary-shadow: rgba(166, 226, 46, 0.3); --theme-gradient-start: #a6e22e; --theme-gradient-end: #e6db74; --theme-navbar-bg: linear-gradient(135deg, #272822 0%, #1e1f1c 100%); --theme-navbar-border: #3e3d32; --theme-body-bg: #1a1b16; --theme-card-bg: #272822; --theme-text: #f8f8f2; --theme-text-muted: #75715e; --theme-border: #3e3d32; --theme-nav-btn-bg: linear-gradient(135deg, #3e3d32 0%, #272822 100%); --theme-nav-btn-hover-bg: linear-gradient(135deg, #49483e 0%, #3e3d32 100%); --theme-nav-btn-color: #f8f8f2; --theme-nav-btn-border: #49483e; --theme-footer-link: #a6e22e; } /* ============================================ 24. CHERRY BLOSSOM ============================================ */ [data-theme="cherry-blossom"] { --theme-primary: #d63384; --theme-primary-hover: #b52b6f; --theme-primary-dark: #94245b; --theme-primary-light: rgba(214, 51, 132, 0.1); --theme-primary-shadow: rgba(214, 51, 132, 0.3); --theme-gradient-start: #d63384; --theme-gradient-end: #f0a0c0; --theme-navbar-bg: linear-gradient(135deg, #fff5f9 0%, #fce4ec 100%); --theme-body-bg: #fef7fa; --theme-footer-link: #d63384; } /* ============================================ 25. OLIVE ============================================ */ [data-theme="olive"] { --theme-primary: #6b705c; --theme-primary-hover: #585c4a; --theme-primary-dark: #454838; --theme-primary-light: rgba(107, 112, 92, 0.1); --theme-primary-shadow: rgba(107, 112, 92, 0.3); --theme-gradient-start: #6b705c; --theme-gradient-end: #a5a58d; --theme-footer-link: #6b705c; } /* ============================================ 26. ELECTRIC BLUE ============================================ */ [data-theme="electric-blue"] { --theme-primary: #00b4d8; --theme-primary-hover: #0096c7; --theme-primary-dark: #0077b6; --theme-primary-light: rgba(0, 180, 216, 0.1); --theme-primary-shadow: rgba(0, 180, 216, 0.3); --theme-gradient-start: #00b4d8; --theme-gradient-end: #48cae4; --theme-footer-link: #00b4d8; } /* ============================================ 27. VOLCANO ============================================ */ [data-theme="volcano"] { --theme-primary: #c62828; --theme-primary-hover: #a52020; --theme-primary-dark: #841818; --theme-primary-light: rgba(198, 40, 40, 0.1); --theme-primary-shadow: rgba(198, 40, 40, 0.3); --theme-gradient-start: #c62828; --theme-gradient-end: #ef5350; --theme-footer-link: #c62828; } /* ============================================ 28. ARCTIC ============================================ */ [data-theme="arctic"] { --theme-primary: #4fc3f7; --theme-primary-hover: #29b6f6; --theme-primary-dark: #039be5; --theme-primary-light: rgba(79, 195, 247, 0.1); --theme-primary-shadow: rgba(79, 195, 247, 0.3); --theme-gradient-start: #4fc3f7; --theme-gradient-end: #81d4fa; --theme-navbar-bg: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); --theme-body-bg: #f0f9ff; --theme-footer-link: #039be5; } /* ============================================ 29. COPPER ============================================ */ [data-theme="copper"] { --theme-primary: #b87333; --theme-primary-hover: #9a6028; --theme-primary-dark: #7d4e20; --theme-primary-light: rgba(184, 115, 51, 0.1); --theme-primary-shadow: rgba(184, 115, 51, 0.3); --theme-gradient-start: #b87333; --theme-gradient-end: #d4a76a; --theme-footer-link: #b87333; } /* ============================================ 30. NEON GREEN ============================================ */ [data-theme="neon-green"] { --theme-primary: #00c853; --theme-primary-hover: #00a344; --theme-primary-dark: #007e35; --theme-primary-light: rgba(0, 200, 83, 0.1); --theme-primary-shadow: rgba(0, 200, 83, 0.3); --theme-gradient-start: #00c853; --theme-gradient-end: #69f0ae; --theme-footer-link: #00c853; } /* ============================================ 31. PLUM ============================================ */ [data-theme="plum"] { --theme-primary: #9c27b0; --theme-primary-hover: #7b1fa2; --theme-primary-dark: #6a1b9a; --theme-primary-light: rgba(156, 39, 176, 0.1); --theme-primary-shadow: rgba(156, 39, 176, 0.3); --theme-gradient-start: #9c27b0; --theme-gradient-end: #ce93d8; --theme-footer-link: #9c27b0; } /* ============================================ 32. MARINE ============================================ */ [data-theme="marine"] { --theme-primary: #1565c0; --theme-primary-hover: #0d47a1; --theme-primary-dark: #0a3880; --theme-primary-light: rgba(21, 101, 192, 0.1); --theme-primary-shadow: rgba(21, 101, 192, 0.3); --theme-gradient-start: #1565c0; --theme-gradient-end: #42a5f5; --theme-footer-link: #1565c0; } /* ============================================ 33. PEACH ============================================ */ [data-theme="peach"] { --theme-primary: #e07955; --theme-primary-hover: #d06040; --theme-primary-dark: #b5502e; --theme-primary-light: rgba(224, 121, 85, 0.1); --theme-primary-shadow: rgba(224, 121, 85, 0.3); --theme-gradient-start: #e07955; --theme-gradient-end: #f5b895; --theme-navbar-bg: linear-gradient(135deg, #fff8f5 0%, #ffeee5 100%); --theme-body-bg: #fffaf7; --theme-footer-link: #e07955; } /* ============================================ 34. CHARCOAL ============================================ */ [data-theme="charcoal"] { --theme-primary: #546e7a; --theme-primary-hover: #455a64; --theme-primary-dark: #37474f; --theme-primary-light: rgba(84, 110, 122, 0.1); --theme-primary-shadow: rgba(84, 110, 122, 0.3); --theme-gradient-start: #546e7a; --theme-gradient-end: #90a4ae; --theme-footer-link: #546e7a; } /* ============================================ 35. CYBER PURPLE ============================================ */ [data-theme="cyber-purple"] { --theme-primary: #9333ea; --theme-primary-hover: #7e22ce; --theme-primary-dark: #6b21a8; --theme-primary-light: rgba(147, 51, 234, 0.15); --theme-primary-shadow: rgba(147, 51, 234, 0.3); --theme-gradient-start: #9333ea; --theme-gradient-end: #c084fc; --theme-navbar-bg: linear-gradient(135deg, #1a0a2e 0%, #16082a 100%); --theme-navbar-border: #3b0764; --theme-body-bg: #0f0720; --theme-card-bg: #1a0a2e; --theme-text: #f3e8ff; --theme-text-muted: #a78bfa; --theme-border: #3b0764; --theme-nav-btn-bg: linear-gradient(135deg, #2e1065 0%, #1a0a2e 100%); --theme-nav-btn-hover-bg: linear-gradient(135deg, #3b0764 0%, #2e1065 100%); --theme-nav-btn-color: #e9d5ff; --theme-nav-btn-border: #581c87; --theme-footer-link: #c084fc; } /* ============================================ 36. SPRING ============================================ */ [data-theme="spring"] { --theme-primary: #16a34a; --theme-primary-hover: #15803d; --theme-primary-dark: #166534; --theme-primary-light: rgba(22, 163, 74, 0.1); --theme-primary-shadow: rgba(22, 163, 74, 0.3); --theme-gradient-start: #16a34a; --theme-gradient-end: #86efac; --theme-navbar-bg: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); --theme-body-bg: #f0fdf4; --theme-footer-link: #16a34a; } /* ============================================ 37. WINE ============================================ */ [data-theme="wine"] { --theme-primary: #7f1d1d; --theme-primary-hover: #6b1616; --theme-primary-dark: #570f0f; --theme-primary-light: rgba(127, 29, 29, 0.1); --theme-primary-shadow: rgba(127, 29, 29, 0.3); --theme-gradient-start: #7f1d1d; --theme-gradient-end: #dc2626; --theme-footer-link: #7f1d1d; } /* ============================================ 38. OCEAN DARK ============================================ */ [data-theme="ocean-dark"] { --theme-primary: #22d3ee; --theme-primary-hover: #06b6d4; --theme-primary-dark: #0891b2; --theme-primary-light: rgba(34, 211, 238, 0.15); --theme-primary-shadow: rgba(34, 211, 238, 0.3); --theme-gradient-start: #06b6d4; --theme-gradient-end: #22d3ee; --theme-navbar-bg: linear-gradient(135deg, #0c1929 0%, #0e2439 100%); --theme-navbar-border: #164e63; --theme-body-bg: #071318; --theme-card-bg: #0c1929; --theme-text: #cffafe; --theme-text-muted: #67e8f9; --theme-border: #164e63; --theme-nav-btn-bg: linear-gradient(135deg, #164e63 0%, #0c1929 100%); --theme-nav-btn-hover-bg: linear-gradient(135deg, #155e75 0%, #164e63 100%); --theme-nav-btn-color: #a5f3fc; --theme-nav-btn-border: #0e7490; --theme-footer-link: #22d3ee; } /* ============================================ 39. SAND ============================================ */ [data-theme="sand"] { --theme-primary: #a68a64; --theme-primary-hover: #8d7555; --theme-primary-dark: #746046; --theme-primary-light: rgba(166, 138, 100, 0.1); --theme-primary-shadow: rgba(166, 138, 100, 0.3); --theme-gradient-start: #a68a64; --theme-gradient-end: #d4b896; --theme-navbar-bg: linear-gradient(135deg, #fefcf3 0%, #faf3e3 100%); --theme-body-bg: #fefcf3; --theme-footer-link: #a68a64; } /* ============================================ 40. TURQUOISE ============================================ */ [data-theme="turquoise"] { --theme-primary: #0d9488; --theme-primary-hover: #0f766e; --theme-primary-dark: #115e59; --theme-primary-light: rgba(13, 148, 136, 0.1); --theme-primary-shadow: rgba(13, 148, 136, 0.3); --theme-gradient-start: #0d9488; --theme-gradient-end: #2dd4bf; --theme-footer-link: #0d9488; } /* ============================================ 41. RASPBERRY ============================================ */ [data-theme="raspberry"] { --theme-primary: #db2777; --theme-primary-hover: #be185d; --theme-primary-dark: #9d174d; --theme-primary-light: rgba(219, 39, 119, 0.1); --theme-primary-shadow: rgba(219, 39, 119, 0.3); --theme-gradient-start: #db2777; --theme-gradient-end: #f472b6; --theme-footer-link: #db2777; } /* ============================================ 42. NAVY ============================================ */ [data-theme="navy"] { --theme-primary: #1e3a5f; --theme-primary-hover: #162c49; --theme-primary-dark: #0f1f33; --theme-primary-light: rgba(30, 58, 95, 0.1); --theme-primary-shadow: rgba(30, 58, 95, 0.3); --theme-gradient-start: #1e3a5f; --theme-gradient-end: #4a7fb5; --theme-footer-link: #1e3a5f; } /* ============================================ 43. LIME ============================================ */ [data-theme="lime"] { --theme-primary: #65a30d; --theme-primary-hover: #4d7c0f; --theme-primary-dark: #3f6212; --theme-primary-light: rgba(101, 163, 13, 0.1); --theme-primary-shadow: rgba(101, 163, 13, 0.3); --theme-gradient-start: #65a30d; --theme-gradient-end: #a3e635; --theme-footer-link: #65a30d; } /* ============================================ 44. MAUVE ============================================ */ [data-theme="mauve"] { --theme-primary: #a855f7; --theme-primary-hover: #9333ea; --theme-primary-dark: #7e22ce; --theme-primary-light: rgba(168, 85, 247, 0.1); --theme-primary-shadow: rgba(168, 85, 247, 0.3); --theme-gradient-start: #a855f7; --theme-gradient-end: #d8b4fe; --theme-navbar-bg: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); --theme-body-bg: #faf5ff; --theme-footer-link: #a855f7; } /* ============================================ 45. GRAPHITE ============================================ */ [data-theme="graphite"] { --theme-primary: #6b7280; --theme-primary-hover: #4b5563; --theme-primary-dark: #374151; --theme-primary-light: rgba(107, 114, 128, 0.1); --theme-primary-shadow: rgba(107, 114, 128, 0.3); --theme-gradient-start: #6b7280; --theme-gradient-end: #9ca3af; --theme-footer-link: #6b7280; } /* ============================================ 46. COBALT ============================================ */ [data-theme="cobalt"] { --theme-primary: #2563eb; --theme-primary-hover: #1d4ed8; --theme-primary-dark: #1e40af; --theme-primary-light: rgba(37, 99, 235, 0.1); --theme-primary-shadow: rgba(37, 99, 235, 0.3); --theme-gradient-start: #2563eb; --theme-gradient-end: #93c5fd; --theme-footer-link: #2563eb; } /* ============================================ 47. AUTUMN ============================================ */ [data-theme="autumn"] { --theme-primary: #c2410c; --theme-primary-hover: #9a3412; --theme-primary-dark: #7c2d12; --theme-primary-light: rgba(194, 65, 12, 0.1); --theme-primary-shadow: rgba(194, 65, 12, 0.3); --theme-gradient-start: #c2410c; --theme-gradient-end: #f59e0b; --theme-navbar-bg: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); --theme-body-bg: #fffbeb; --theme-footer-link: #c2410c; } /* ============================================ 48. AQUAMARINE ============================================ */ [data-theme="aquamarine"] { --theme-primary: #0ea5e9; --theme-primary-hover: #0284c7; --theme-primary-dark: #0369a1; --theme-primary-light: rgba(14, 165, 233, 0.1); --theme-primary-shadow: rgba(14, 165, 233, 0.3); --theme-gradient-start: #0ea5e9; --theme-gradient-end: #7dd3fc; --theme-footer-link: #0ea5e9; } /* ============================================ 49. MAGENTA ============================================ */ [data-theme="magenta"] { --theme-primary: #c026d3; --theme-primary-hover: #a21caf; --theme-primary-dark: #86198f; --theme-primary-light: rgba(192, 38, 211, 0.1); --theme-primary-shadow: rgba(192, 38, 211, 0.3); --theme-gradient-start: #c026d3; --theme-gradient-end: #e879f9; --theme-footer-link: #c026d3; } /* ============================================ 50. HRVATSKA (Croatian colors) ============================================ */ [data-theme="hrvatska"] { --theme-primary: #cc0000; --theme-primary-hover: #aa0000; --theme-primary-dark: #880000; --theme-primary-light: rgba(204, 0, 0, 0.1); --theme-primary-shadow: rgba(204, 0, 0, 0.3); --theme-gradient-start: #cc0000; --theme-gradient-end: #003893; --theme-footer-link: #cc0000; } /* ======================================================== GLOBALNI THEME OVERRIDES Svi var() imaju fallback na default light vrijednosti ======================================================== */ /* Body */ body { background-color: var(--theme-body-bg, #f8f9fa); color: var(--theme-text, #212529); } /* Navbar */ [data-theme] .modern-navbar { background: var(--theme-navbar-bg, linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%)) !important; border-bottom-color: var(--theme-navbar-border, #e9ecef) !important; } /* Cards */ [data-theme] .card, [data-theme] .modern-simple-card { background-color: var(--theme-card-bg, #ffffff) !important; border-color: var(--theme-border, #dee2e6) !important; color: var(--theme-text, #212529) !important; } /* Links - samo specifični, ne SVE */ [data-theme] a.nav-link, [data-theme] .breadcrumb a, [data-theme] .pagination a { color: var(--theme-primary, #0d6efd); } [data-theme] a.nav-link:hover, [data-theme] .breadcrumb a:hover, [data-theme] .pagination a:hover { color: var(--theme-primary-hover, #0b5ed7); } /* Tables */ [data-theme] .table { color: var(--theme-text, #212529); } [data-theme] .table thead th { background-color: var(--theme-card-bg, #ffffff) !important; border-color: var(--theme-border, #dee2e6) !important; color: var(--theme-text, #212529) !important; } [data-theme] .table td { border-color: var(--theme-border, #dee2e6) !important; } /* Forms */ [data-theme] .form-control { background-color: var(--theme-card-bg, #ffffff); border-color: var(--theme-border, #dee2e6); color: var(--theme-text, #212529); } [data-theme] .form-control:focus { border-color: var(--theme-primary, #0d6efd); box-shadow: 0 0 0 0.25rem var(--theme-primary-light, rgba(13, 110, 253, 0.25)); } [data-theme] .form-select { background-color: var(--theme-card-bg, #ffffff); border-color: var(--theme-border, #dee2e6); color: var(--theme-text, #212529); } /* Buttons - primary */ [data-theme] .btn-primary, [data-theme] a.btn-primary { background-color: var(--theme-primary, #0d6efd) !important; border-color: var(--theme-primary, #0d6efd) !important; color: white !important; } [data-theme] .btn-primary:hover, [data-theme] a.btn-primary:hover { background-color: var(--theme-primary-hover, #0b5ed7) !important; border-color: var(--theme-primary-hover, #0b5ed7) !important; color: white !important; } [data-theme] .btn-outline-primary, [data-theme] a.btn-outline-primary { color: var(--theme-primary, #0d6efd) !important; border-color: var(--theme-primary, #0d6efd) !important; } [data-theme] .btn-outline-primary:hover, [data-theme] a.btn-outline-primary:hover { background-color: var(--theme-primary, #0d6efd) !important; color: white !important; } /* Ensure btn links always have correct text color */ [data-theme] a.btn-success, [data-theme] a.btn-danger, [data-theme] a.btn-warning, [data-theme] a.btn-info, [data-theme] a.btn-secondary { color: white !important; } /* Text muted */ [data-theme] .text-muted { color: var(--theme-text-muted, #6c757d) !important; } /* Borders */ [data-theme] .border, [data-theme] .border-bottom, [data-theme] .border-top { border-color: var(--theme-border, #dee2e6) !important; } /* Badges */ [data-theme] .badge.bg-primary { background-color: var(--theme-primary, #0d6efd) !important; } /* Footer links */ [data-theme] .footer-link, [data-theme] footer a { color: var(--theme-footer-link, #667eea) !important; } /* Pagination */ [data-theme] .page-link { color: var(--theme-primary, #0d6efd); } [data-theme] .page-item.active .page-link { background-color: var(--theme-primary, #0d6efd); border-color: var(--theme-primary, #0d6efd); } /* Modals */ [data-theme] .modal-content { background-color: var(--theme-card-bg, #ffffff); color: var(--theme-text, #212529); border-color: var(--theme-border, #dee2e6); } [data-theme] .modal-header { border-color: var(--theme-border, #dee2e6); } [data-theme] .modal-footer { border-color: var(--theme-border, #dee2e6); } /* Dropdown menus */ [data-theme] .dropdown-menu { background-color: var(--theme-card-bg, #ffffff); border-color: var(--theme-border, #dee2e6); color: var(--theme-text, #212529); } [data-theme] .dropdown-item { color: var(--theme-text, #212529); } [data-theme] .dropdown-item:hover { background-color: var(--theme-primary-light, rgba(13, 110, 253, 0.1)); color: var(--theme-primary, #0d6efd); } /* Scrollbar styling for dark themes */ [data-theme="dark"] ::-webkit-scrollbar, [data-theme="midnight"] ::-webkit-scrollbar, [data-theme="dracula"] ::-webkit-scrollbar, [data-theme="monokai"] ::-webkit-scrollbar, [data-theme="cyber-purple"] ::-webkit-scrollbar, [data-theme="ocean-dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track, [data-theme="midnight"] ::-webkit-scrollbar-track, [data-theme="dracula"] ::-webkit-scrollbar-track, [data-theme="monokai"] ::-webkit-scrollbar-track, [data-theme="cyber-purple"] ::-webkit-scrollbar-track, [data-theme="ocean-dark"] ::-webkit-scrollbar-track { background: var(--theme-body-bg); } [data-theme="dark"] ::-webkit-scrollbar-thumb, [data-theme="midnight"] ::-webkit-scrollbar-thumb, [data-theme="dracula"] ::-webkit-scrollbar-thumb, [data-theme="monokai"] ::-webkit-scrollbar-thumb, [data-theme="cyber-purple"] ::-webkit-scrollbar-thumb, [data-theme="ocean-dark"] ::-webkit-scrollbar-thumb { background: var(--theme-border); border-radius: 4px; } /* Info card */ [data-theme] .info-card { background: var(--theme-card-bg, #ffffff) !important; } /* ======================================================== DARK THEME SPECIFIC OVERRIDES Nav buttons, user button, logout - samo za dark teme koje definiraju --theme-nav-btn-bg ======================================================== */ [data-theme="dark"] .nav-btn, [data-theme="midnight"] .nav-btn, [data-theme="dracula"] .nav-btn, [data-theme="monokai"] .nav-btn, [data-theme="cyber-purple"] .nav-btn, [data-theme="ocean-dark"] .nav-btn { background: var(--theme-nav-btn-bg) !important; color: var(--theme-nav-btn-color) !important; border-color: var(--theme-nav-btn-border) !important; } [data-theme="dark"] .nav-btn:hover, [data-theme="midnight"] .nav-btn:hover, [data-theme="dracula"] .nav-btn:hover, [data-theme="monokai"] .nav-btn:hover, [data-theme="cyber-purple"] .nav-btn:hover, [data-theme="ocean-dark"] .nav-btn:hover { background: var(--theme-nav-btn-hover-bg) !important; color: var(--theme-primary) !important; border-color: var(--theme-primary) !important; } /* Dark theme: user and logout buttons keep their own gradients */ [data-theme="dark"] .nav-btn-user, [data-theme="midnight"] .nav-btn-user, [data-theme="dracula"] .nav-btn-user, [data-theme="monokai"] .nav-btn-user, [data-theme="cyber-purple"] .nav-btn-user, [data-theme="ocean-dark"] .nav-btn-user { background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important; color: white !important; border-color: #6c757d !important; } [data-theme="dark"] .nav-btn-logout, [data-theme="midnight"] .nav-btn-logout, [data-theme="dracula"] .nav-btn-logout, [data-theme="monokai"] .nav-btn-logout, [data-theme="cyber-purple"] .nav-btn-logout, [data-theme="ocean-dark"] .nav-btn-logout { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important; color: white !important; border-color: #dc3545 !important; } /* Dark theme: digital clock */ [data-theme="dark"] .digital-clock, [data-theme="midnight"] .digital-clock, [data-theme="dracula"] .digital-clock, [data-theme="monokai"] .digital-clock, [data-theme="cyber-purple"] .digital-clock, [data-theme="ocean-dark"] .digital-clock { background: var(--theme-nav-btn-bg) !important; border-color: var(--theme-nav-btn-border) !important; color: var(--theme-nav-btn-color) !important; } /* Dark theme: card-header */ [data-theme="dark"] .card-header, [data-theme="midnight"] .card-header, [data-theme="dracula"] .card-header, [data-theme="monokai"] .card-header, [data-theme="cyber-purple"] .card-header, [data-theme="ocean-dark"] .card-header { background-color: var(--theme-body-bg) !important; border-color: var(--theme-border) !important; color: var(--theme-text) !important; } /* Dark theme: bg-white and bg-light overrides */ [data-theme="dark"] .bg-white, [data-theme="midnight"] .bg-white, [data-theme="dracula"] .bg-white, [data-theme="monokai"] .bg-white, [data-theme="cyber-purple"] .bg-white, [data-theme="ocean-dark"] .bg-white { background-color: var(--theme-card-bg) !important; } [data-theme="dark"] .bg-light, [data-theme="midnight"] .bg-light, [data-theme="dracula"] .bg-light, [data-theme="monokai"] .bg-light, [data-theme="cyber-purple"] .bg-light, [data-theme="ocean-dark"] .bg-light { background-color: var(--theme-body-bg) !important; } /* Alert overrides for dark themes */ [data-theme="dark"] .alert-success, [data-theme="midnight"] .alert-success, [data-theme="dracula"] .alert-success, [data-theme="monokai"] .alert-success, [data-theme="cyber-purple"] .alert-success, [data-theme="ocean-dark"] .alert-success { background-color: rgba(25, 135, 84, 0.2) !important; border-color: rgba(25, 135, 84, 0.3) !important; color: #75d5a3 !important; } [data-theme="dark"] .alert-danger, [data-theme="midnight"] .alert-danger, [data-theme="dracula"] .alert-danger, [data-theme="monokai"] .alert-danger, [data-theme="cyber-purple"] .alert-danger, [data-theme="ocean-dark"] .alert-danger { background-color: rgba(220, 53, 69, 0.2) !important; border-color: rgba(220, 53, 69, 0.3) !important; color: #f5a3ad !important; } /* Dark theme: text-dark override (Bootstrap utility) */ [data-theme="dark"] .text-dark, [data-theme="midnight"] .text-dark, [data-theme="dracula"] .text-dark, [data-theme="monokai"] .text-dark, [data-theme="cyber-purple"] .text-dark, [data-theme="ocean-dark"] .text-dark { color: var(--theme-text) !important; } /* Dark theme: viewer badges (bg-light text-dark) */ [data-theme="dark"] .badge.bg-light, [data-theme="midnight"] .badge.bg-light, [data-theme="dracula"] .badge.bg-light, [data-theme="monokai"] .badge.bg-light, [data-theme="cyber-purple"] .badge.bg-light, [data-theme="ocean-dark"] .badge.bg-light { background-color: var(--theme-border) !important; color: var(--theme-text) !important; border-color: var(--theme-border) !important; } /* Dark theme: viewer badge hover */ [data-theme="dark"] .viewers-list .badge:hover, [data-theme="midnight"] .viewers-list .badge:hover, [data-theme="dracula"] .viewers-list .badge:hover, [data-theme="monokai"] .viewers-list .badge:hover, [data-theme="cyber-purple"] .viewers-list .badge:hover, [data-theme="ocean-dark"] .viewers-list .badge:hover { background-color: var(--theme-nav-btn-border) !important; } /* Dark theme: alert-info */ [data-theme="dark"] .alert-info, [data-theme="midnight"] .alert-info, [data-theme="dracula"] .alert-info, [data-theme="monokai"] .alert-info, [data-theme="cyber-purple"] .alert-info, [data-theme="ocean-dark"] .alert-info { background-color: rgba(13, 202, 240, 0.15) !important; border-color: rgba(13, 202, 240, 0.25) !important; color: #6edff6 !important; } /* Dark theme: alert-warning */ [data-theme="dark"] .alert-warning, [data-theme="midnight"] .alert-warning, [data-theme="dracula"] .alert-warning, [data-theme="monokai"] .alert-warning, [data-theme="cyber-purple"] .alert-warning, [data-theme="ocean-dark"] .alert-warning { background-color: rgba(255, 193, 7, 0.15) !important; border-color: rgba(255, 193, 7, 0.25) !important; color: #ffda6a !important; } /* Dark theme: btn-outline-secondary */ [data-theme="dark"] .btn-outline-secondary, [data-theme="midnight"] .btn-outline-secondary, [data-theme="dracula"] .btn-outline-secondary, [data-theme="monokai"] .btn-outline-secondary, [data-theme="cyber-purple"] .btn-outline-secondary, [data-theme="ocean-dark"] .btn-outline-secondary { color: var(--theme-text-muted) !important; border-color: var(--theme-border) !important; } [data-theme="dark"] .btn-outline-secondary:hover, [data-theme="midnight"] .btn-outline-secondary:hover, [data-theme="dracula"] .btn-outline-secondary:hover, [data-theme="monokai"] .btn-outline-secondary:hover, [data-theme="cyber-purple"] .btn-outline-secondary:hover, [data-theme="ocean-dark"] .btn-outline-secondary:hover { background-color: var(--theme-border) !important; color: var(--theme-text) !important; } /* Dark theme: btn-close (modals) */ [data-theme="dark"] .btn-close, [data-theme="midnight"] .btn-close, [data-theme="dracula"] .btn-close, [data-theme="monokai"] .btn-close, [data-theme="cyber-purple"] .btn-close, [data-theme="ocean-dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Dark theme: modal header gradient */ [data-theme="dark"] .modal-header, [data-theme="midnight"] .modal-header, [data-theme="dracula"] .modal-header, [data-theme="monokai"] .modal-header, [data-theme="cyber-purple"] .modal-header, [data-theme="ocean-dark"] .modal-header { background: var(--theme-body-bg) !important; } /* Dark theme: dropdown divider */ [data-theme="dark"] .dropdown-divider, [data-theme="midnight"] .dropdown-divider, [data-theme="dracula"] .dropdown-divider, [data-theme="monokai"] .dropdown-divider, [data-theme="cyber-purple"] .dropdown-divider, [data-theme="ocean-dark"] .dropdown-divider { border-color: var(--theme-border) !important; } /* Dark theme: form-check-input */ [data-theme="dark"] .form-check-input, [data-theme="midnight"] .form-check-input, [data-theme="dracula"] .form-check-input, [data-theme="monokai"] .form-check-input, [data-theme="cyber-purple"] .form-check-input, [data-theme="ocean-dark"] .form-check-input { background-color: var(--theme-body-bg); border-color: var(--theme-border); } /* Dark theme: form-check-label */ [data-theme="dark"] .form-check-label, [data-theme="midnight"] .form-check-label, [data-theme="dracula"] .form-check-label, [data-theme="monokai"] .form-check-label, [data-theme="cyber-purple"] .form-check-label, [data-theme="ocean-dark"] .form-check-label { color: var(--theme-text); } /* Dark theme: list-group */ [data-theme="dark"] .list-group-item, [data-theme="midnight"] .list-group-item, [data-theme="dracula"] .list-group-item, [data-theme="monokai"] .list-group-item, [data-theme="cyber-purple"] .list-group-item, [data-theme="ocean-dark"] .list-group-item { background-color: var(--theme-card-bg) !important; border-color: var(--theme-border) !important; color: var(--theme-text) !important; } /* Dark theme: search input placeholder */ [data-theme="dark"] .form-control::placeholder, [data-theme="midnight"] .form-control::placeholder, [data-theme="dracula"] .form-control::placeholder, [data-theme="monokai"] .form-control::placeholder, [data-theme="cyber-purple"] .form-control::placeholder, [data-theme="ocean-dark"] .form-control::placeholder { color: var(--theme-text-muted); } /* Dark theme: folder card border-top sections */ [data-theme="dark"] .folder-card .border-top, [data-theme="midnight"] .folder-card .border-top, [data-theme="dracula"] .folder-card .border-top, [data-theme="monokai"] .folder-card .border-top, [data-theme="cyber-purple"] .folder-card .border-top, [data-theme="ocean-dark"] .folder-card .border-top { border-color: var(--theme-border) !important; } /* Dark theme: folder card hover */ [data-theme="dark"] .folder-card:hover, [data-theme="midnight"] .folder-card:hover, [data-theme="dracula"] .folder-card:hover, [data-theme="monokai"] .folder-card:hover, [data-theme="cyber-purple"] .folder-card:hover, [data-theme="ocean-dark"] .folder-card:hover { border-color: var(--theme-primary) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } /* Dark theme: card body stats text */ [data-theme="dark"] .card-body .fw-bold, [data-theme="midnight"] .card-body .fw-bold, [data-theme="dracula"] .card-body .fw-bold, [data-theme="monokai"] .card-body .fw-bold, [data-theme="cyber-purple"] .card-body .fw-bold, [data-theme="ocean-dark"] .card-body .fw-bold { color: var(--theme-text); } /* Dark theme: h4, h5, h6 headings */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="midnight"] h1, [data-theme="midnight"] h2, [data-theme="midnight"] h3, [data-theme="midnight"] h4, [data-theme="midnight"] h5, [data-theme="midnight"] h6, [data-theme="dracula"] h1, [data-theme="dracula"] h2, [data-theme="dracula"] h3, [data-theme="dracula"] h4, [data-theme="dracula"] h5, [data-theme="dracula"] h6, [data-theme="monokai"] h1, [data-theme="monokai"] h2, [data-theme="monokai"] h3, [data-theme="monokai"] h4, [data-theme="monokai"] h5, [data-theme="monokai"] h6, [data-theme="cyber-purple"] h1, [data-theme="cyber-purple"] h2, [data-theme="cyber-purple"] h3, [data-theme="cyber-purple"] h4, [data-theme="cyber-purple"] h5, [data-theme="cyber-purple"] h6, [data-theme="ocean-dark"] h1, [data-theme="ocean-dark"] h2, [data-theme="ocean-dark"] h3, [data-theme="ocean-dark"] h4, [data-theme="ocean-dark"] h5, [data-theme="ocean-dark"] h6 { color: var(--theme-text); } /* Dark theme: simple-modern-table */ [data-theme="dark"] .simple-modern-table, [data-theme="midnight"] .simple-modern-table, [data-theme="dracula"] .simple-modern-table, [data-theme="monokai"] .simple-modern-table, [data-theme="cyber-purple"] .simple-modern-table, [data-theme="ocean-dark"] .simple-modern-table { background: var(--theme-card-bg) !important; } [data-theme="dark"] .simple-modern-table thead th, [data-theme="midnight"] .simple-modern-table thead th, [data-theme="dracula"] .simple-modern-table thead th, [data-theme="monokai"] .simple-modern-table thead th, [data-theme="cyber-purple"] .simple-modern-table thead th, [data-theme="ocean-dark"] .simple-modern-table thead th { background: var(--theme-body-bg) !important; color: var(--theme-text-muted) !important; border-bottom-color: var(--theme-border) !important; } [data-theme="dark"] .simple-modern-table td, [data-theme="midnight"] .simple-modern-table td, [data-theme="dracula"] .simple-modern-table td, [data-theme="monokai"] .simple-modern-table td, [data-theme="cyber-purple"] .simple-modern-table td, [data-theme="ocean-dark"] .simple-modern-table td { background: var(--theme-card-bg) !important; border-bottom-color: var(--theme-border) !important; color: var(--theme-text) !important; } [data-theme="dark"] .simple-modern-table tbody tr:nth-child(even) td, [data-theme="midnight"] .simple-modern-table tbody tr:nth-child(even) td, [data-theme="dracula"] .simple-modern-table tbody tr:nth-child(even) td, [data-theme="monokai"] .simple-modern-table tbody tr:nth-child(even) td, [data-theme="cyber-purple"] .simple-modern-table tbody tr:nth-child(even) td, [data-theme="ocean-dark"] .simple-modern-table tbody tr:nth-child(even) td { background: var(--theme-body-bg) !important; } [data-theme="dark"] .simple-modern-table tbody tr:hover td, [data-theme="midnight"] .simple-modern-table tbody tr:hover td, [data-theme="dracula"] .simple-modern-table tbody tr:hover td, [data-theme="monokai"] .simple-modern-table tbody tr:hover td, [data-theme="cyber-purple"] .simple-modern-table tbody tr:hover td, [data-theme="ocean-dark"] .simple-modern-table tbody tr:hover td { background: var(--theme-primary-light) !important; } [data-theme="dark"] .simple-modern-table tbody tr.row-selected td, [data-theme="midnight"] .simple-modern-table tbody tr.row-selected td, [data-theme="dracula"] .simple-modern-table tbody tr.row-selected td, [data-theme="monokai"] .simple-modern-table tbody tr.row-selected td, [data-theme="cyber-purple"] .simple-modern-table tbody tr.row-selected td, [data-theme="ocean-dark"] .simple-modern-table tbody tr.row-selected td { background: var(--theme-primary-light) !important; } /* Dark theme: auto-save indicator */ [data-theme="dark"] .auto-save-indicator, [data-theme="midnight"] .auto-save-indicator, [data-theme="dracula"] .auto-save-indicator, [data-theme="monokai"] .auto-save-indicator, [data-theme="cyber-purple"] .auto-save-indicator, [data-theme="ocean-dark"] .auto-save-indicator { background: var(--theme-card-bg); border-color: var(--theme-border); color: var(--theme-text); } /* Dark theme: upload zone */ [data-theme="dark"] .drop-area, [data-theme="midnight"] .drop-area, [data-theme="dracula"] .drop-area, [data-theme="monokai"] .drop-area, [data-theme="cyber-purple"] .drop-area, [data-theme="ocean-dark"] .drop-area { background: var(--theme-body-bg) !important; border-color: var(--theme-border) !important; } /* Dark theme: document number badge in folder_view */ [data-theme="dark"] .badge.document-number, [data-theme="midnight"] .badge.document-number, [data-theme="dracula"] .badge.document-number, [data-theme="monokai"] .badge.document-number, [data-theme="cyber-purple"] .badge.document-number, [data-theme="ocean-dark"] .badge.document-number { background-color: var(--theme-border) !important; color: var(--theme-text) !important; } /* Dark theme: breadcrumb */ [data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before, [data-theme="midnight"] .breadcrumb-item + .breadcrumb-item::before, [data-theme="dracula"] .breadcrumb-item + .breadcrumb-item::before, [data-theme="monokai"] .breadcrumb-item + .breadcrumb-item::before, [data-theme="cyber-purple"] .breadcrumb-item + .breadcrumb-item::before, [data-theme="ocean-dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--theme-text-muted); } /* Dark theme: generic white background areas */ [data-theme="dark"] .upload-zone-wrapper, [data-theme="dark"] .file-queue-container, [data-theme="midnight"] .upload-zone-wrapper, [data-theme="midnight"] .file-queue-container, [data-theme="dracula"] .upload-zone-wrapper, [data-theme="dracula"] .file-queue-container, [data-theme="monokai"] .upload-zone-wrapper, [data-theme="monokai"] .file-queue-container, [data-theme="cyber-purple"] .upload-zone-wrapper, [data-theme="cyber-purple"] .file-queue-container, [data-theme="ocean-dark"] .upload-zone-wrapper, [data-theme="ocean-dark"] .file-queue-container { background: var(--theme-card-bg) !important; border-color: var(--theme-border) !important; color: var(--theme-text) !important; } /* Dark theme: document viewer modal */ [data-theme="dark"] .modal-body, [data-theme="midnight"] .modal-body, [data-theme="dracula"] .modal-body, [data-theme="monokai"] .modal-body, [data-theme="cyber-purple"] .modal-body, [data-theme="ocean-dark"] .modal-body { background-color: var(--theme-card-bg); } /* Dark theme: stats-card and action-bar (users.php) */ [data-theme="dark"] .stats-card, [data-theme="midnight"] .stats-card, [data-theme="dracula"] .stats-card, [data-theme="monokai"] .stats-card, [data-theme="cyber-purple"] .stats-card, [data-theme="ocean-dark"] .stats-card { background: var(--theme-card-bg) !important; border-color: var(--theme-border) !important; color: var(--theme-text) !important; } [data-theme="dark"] .users-action-bar, [data-theme="midnight"] .users-action-bar, [data-theme="dracula"] .users-action-bar, [data-theme="monokai"] .users-action-bar, [data-theme="cyber-purple"] .users-action-bar, [data-theme="ocean-dark"] .users-action-bar { background: var(--theme-card-bg) !important; } /* Dark theme: user-table-container and any white bg containers */ [data-theme="dark"] .user-table-container, [data-theme="midnight"] .user-table-container, [data-theme="dracula"] .user-table-container, [data-theme="monokai"] .user-table-container, [data-theme="cyber-purple"] .user-table-container, [data-theme="ocean-dark"] .user-table-container { background: var(--theme-card-bg) !important; color: var(--theme-text) !important; } /* Dark theme: generic table (users page) */ [data-theme="dark"] .table-responsive, [data-theme="midnight"] .table-responsive, [data-theme="dracula"] .table-responsive, [data-theme="monokai"] .table-responsive, [data-theme="cyber-purple"] .table-responsive, [data-theme="ocean-dark"] .table-responsive { background: var(--theme-card-bg); } /* Dark theme: stat numbers color */ [data-theme="dark"] .stat-number, [data-theme="midnight"] .stat-number, [data-theme="dracula"] .stat-number, [data-theme="monokai"] .stat-number, [data-theme="cyber-purple"] .stat-number, [data-theme="ocean-dark"] .stat-number { color: var(--theme-text) !important; } /* Dark theme: stat label */ [data-theme="dark"] .stat-label, [data-theme="midnight"] .stat-label, [data-theme="dracula"] .stat-label, [data-theme="monokai"] .stat-label, [data-theme="cyber-purple"] .stat-label, [data-theme="ocean-dark"] .stat-label { color: var(--theme-text-muted) !important; } /* Dark theme: empty state */ [data-theme="dark"] .empty-simple, [data-theme="midnight"] .empty-simple, [data-theme="dracula"] .empty-simple, [data-theme="monokai"] .empty-simple, [data-theme="cyber-purple"] .empty-simple, [data-theme="ocean-dark"] .empty-simple { background: var(--theme-card-bg) !important; color: var(--theme-text) !important; } [data-theme="dark"] .empty-icon-simple, [data-theme="midnight"] .empty-icon-simple, [data-theme="dracula"] .empty-icon-simple, [data-theme="monokai"] .empty-icon-simple, [data-theme="cyber-purple"] .empty-icon-simple, [data-theme="ocean-dark"] .empty-icon-simple { color: var(--theme-border) !important; } /* Dark theme: info-card, welcome sections */ [data-theme="dark"] .info-card h5, [data-theme="dark"] .info-card p, [data-theme="midnight"] .info-card h5, [data-theme="midnight"] .info-card p, [data-theme="dracula"] .info-card h5, [data-theme="dracula"] .info-card p, [data-theme="monokai"] .info-card h5, [data-theme="monokai"] .info-card p, [data-theme="cyber-purple"] .info-card h5, [data-theme="cyber-purple"] .info-card p, [data-theme="ocean-dark"] .info-card h5, [data-theme="ocean-dark"] .info-card p { color: var(--theme-text) !important; } /* Theme picker button */ .theme-picker-btn { background: linear-gradient(135deg, #f8f9fa, #e9ecef); color: #495057; border: 1px solid #dee2e6; border-radius: 8px; padding: 0.4rem 0.65rem; cursor: pointer; font-size: 1.1rem; height: 38px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; position: relative; } .theme-picker-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px var(--theme-primary-light, rgba(13,110,253,0.15)); border-color: var(--theme-primary, #0d6efd); color: var(--theme-primary, #0d6efd); } /* Theme picker - dark theme overrides */ [data-theme="dark"] .theme-picker-btn, [data-theme="midnight"] .theme-picker-btn, [data-theme="dracula"] .theme-picker-btn, [data-theme="monokai"] .theme-picker-btn, [data-theme="cyber-purple"] .theme-picker-btn, [data-theme="ocean-dark"] .theme-picker-btn { background: var(--theme-nav-btn-bg); color: var(--theme-nav-btn-color); border-color: var(--theme-nav-btn-border); } /* Theme dropdown panel */ .theme-panel { display: none; position: absolute; top: 100%; right: 0; z-index: 9999; width: 340px; max-height: 480px; overflow-y: auto; background: var(--theme-card-bg, #fff); border: 1px solid var(--theme-border, #dee2e6); border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); padding: 0.75rem; margin-top: 0.5rem; } .theme-panel.show { display: block; } .theme-panel-header { font-weight: 600; font-size: 0.8rem; color: var(--theme-text-muted, #6c757d); text-transform: uppercase; letter-spacing: 0.5px; padding: 0.25rem 0.5rem 0.5rem; border-bottom: 1px solid var(--theme-border, #dee2e6); margin-bottom: 0.5rem; } .theme-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .theme-swatch { width: 100%; aspect-ratio: 1; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: all 0.2s ease; position: relative; overflow: hidden; } .theme-swatch:hover { transform: scale(1.15); z-index: 2; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .theme-swatch.active { border-color: var(--theme-text, #212529); box-shadow: 0 0 0 2px var(--theme-card-bg, #fff), 0 0 0 4px var(--theme-text, #212529); transform: scale(1.1); } .theme-swatch::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: inherit; filter: brightness(0.75); } .theme-swatch-name { font-size: 0.6rem; text-align: center; color: var(--theme-text-muted, #6c757d); margin-top: 2px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .theme-category { font-size: 0.7rem; font-weight: 600; color: var(--theme-text-muted, #6c757d); padding: 0.5rem 0.25rem 0.25rem; text-transform: uppercase; letter-spacing: 0.3px; } @media (max-width: 768px) { .theme-panel { width: 280px; max-height: 400px; right: -50px; } .theme-grid { grid-template-columns: repeat(5, 1fr); gap: 4px; } }