/* ========================================================================== SYSTEM OF THEMES — TAGS! This stylesheet overrides styles from stylehome.css and style.css based on the class applied to the or element. ========================================================================== */ /* ========================================================================== 1. LIQUID GLASS WHITE (CLARO / PASTEL) ========================================================================== */ html.theme-liquid-glass-white, html.theme-liquid-glass-white body { background-color: #f1f5f9 !important; color: #0f172a !important; } html.theme-liquid-glass-white .liquid-bg-container { background-color: #f1f5f9 !important; } html.theme-liquid-glass-white .liquid-blob { opacity: 0.18 !important; mix-blend-mode: multiply !important; } /* Redefinição dos gradientes dos blobs para tons pastel */ html.theme-liquid-glass-white .blob-1 { background: radial-gradient(circle, rgba(139, 92, 246, 0.5) 0%, rgba(99, 102, 241, 0.1) 100%) !important; } html.theme-liquid-glass-white .blob-2 { background: radial-gradient(circle, rgba(6, 182, 212, 0.45) 0%, rgba(59, 130, 246, 0.1) 100%) !important; } html.theme-liquid-glass-white .blob-3 { background: radial-gradient(circle, rgba(244, 63, 94, 0.4) 0%, rgba(232, 121, 249, 0.1) 100%) !important; } /* Glassmorphism White Cards */ html.theme-liquid-glass-white .navbar-inner, html.theme-liquid-glass-white .glass-sidebar, html.theme-liquid-glass-white .card, html.theme-liquid-glass-white .jumbotron, html.theme-liquid-glass-white .modal-content, html.theme-liquid-glass-white .terms-box { background: rgba(255, 255, 255, 0.55) !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; border-top: 1px solid rgba(255, 255, 255, 0.5) !important; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; color: #0f172a !important; } /* Hover e interações */ html.theme-liquid-glass-white .navbar-inner:hover { background: rgba(255, 255, 255, 0.65) !important; } /* Links da navbar */ html.theme-liquid-glass-white .navbar-inner a, html.theme-liquid-glass-white .navbar-inner span, html.theme-liquid-glass-white .navbar-inner p { color: #334155 !important; } html.theme-liquid-glass-white .navbar-inner a:hover { color: #0f172a !important; background: rgba(15, 23, 42, 0.05) !important; } /* Textos e Títulos */ html.theme-liquid-glass-white h1, html.theme-liquid-glass-white h2, html.theme-liquid-glass-white h3, html.theme-liquid-glass-white h4, html.theme-liquid-glass-white h5, html.theme-liquid-glass-white h6, html.theme-liquid-glass-white .font-bold.text-white, html.theme-liquid-glass-white .text-white { color: #0f172a !important; } html.theme-liquid-glass-white .text-white\/85, html.theme-liquid-glass-white .text-white\/80, html.theme-liquid-glass-white .text-white\/70, html.theme-liquid-glass-white .text-white\/60, html.theme-liquid-glass-white .text-white\/50, html.theme-liquid-glass-white .text-white\/45, html.theme-liquid-glass-white .text-white\/40, html.theme-liquid-glass-white .text-white\/30, html.theme-liquid-glass-white .sidebar-username, html.theme-liquid-glass-white .sidebar-bio { color: #475569 !important; } html.theme-liquid-glass-white strong { color: #1e293b !important; } /* Forms e Controles */ html.theme-liquid-glass-white .form-control { background: rgba(15, 23, 42, 0.04) !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; color: #0f172a !important; } html.theme-liquid-glass-white .form-control:focus { border-color: rgba(15, 23, 42, 0.2) !important; background: rgba(15, 23, 42, 0.06) !important; } html.theme-liquid-glass-white .form-control::placeholder { color: #94a3b8 !important; } /* Feed e Tags */ html.theme-liquid-glass-white .tags_post { background: rgba(255, 255, 255, 0.6) !important; border: 1px solid rgba(15, 23, 42, 0.06) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important; } html.theme-liquid-glass-white .tags_post .flex-1.min-w-0 p { color: #1e293b !important; } html.theme-liquid-glass-white .post-action-bar { border-top: 1px solid rgba(15, 23, 42, 0.05) !important; } html.theme-liquid-glass-white .post-action-btn { color: #64748b !important; } html.theme-liquid-glass-white .post-action-btn:hover { color: #0f172a !important; background: rgba(15, 23, 42, 0.04) !important; } /* Sidebar e botões de navegação lateral */ html.theme-liquid-glass-white .glass-nav-btn { color: #475569 !important; } html.theme-liquid-glass-white .glass-nav-btn:hover { background: rgba(15, 23, 42, 0.04) !important; color: #0f172a !important; } html.theme-liquid-glass-white .glass-nav-btn-highlight { background: rgba(15, 23, 42, 0.02) !important; border: 1px solid rgba(15, 23, 42, 0.05) !important; } /* Linhas divisórias */ html.theme-liquid-glass-white hr { border-color: rgba(15, 23, 42, 0.08) !important; } /* Mobile Navigation Bottom */ html.theme-liquid-glass-white .mobile-bottom-nav { background: rgba(255, 255, 255, 0.8) !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; } html.theme-liquid-glass-white .mobile-nav-lnk { color: #64748b !important; } html.theme-liquid-glass-white .mobile-nav-lnk.active { color: #4f46e5 !important; } /* Botões do Onboarding no Light Mode */ html.theme-liquid-glass-white .onboarding-scene .terms-box { background: rgba(15, 23, 42, 0.03) !important; border: 1px solid rgba(15, 23, 42, 0.06) !important; color: #334155 !important; } html.theme-liquid-glass-white .marquee-post { background: rgba(255, 255, 255, 0.8) !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; } html.theme-liquid-glass-white .feature-card { background: rgba(255, 255, 255, 0.7) !important; border: 1px solid rgba(15, 23, 42, 0.06) !important; } /* ========================================================================== 2. ABSOLUTE (FLAT BLACK / TWITTER/X STYLE) ========================================================================== */ html.theme-absolute, html.theme-absolute body { background-color: #000000 !important; color: #e7e9ea !important; } html.theme-absolute .liquid-bg-container, html.theme-absolute .liquid-blob { display: none !important; } /* Estruturas lineares sólidas */ html.theme-absolute .navbar-inner, html.theme-absolute .glass-sidebar, html.theme-absolute .card, html.theme-absolute .jumbotron, html.theme-absolute .modal-content, html.theme-absolute .terms-box, html.theme-absolute .tags_post { background: #000000 !important; border: 1px solid #2f3336 !important; border-radius: 16px !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.theme-absolute .navbar-inner { border-radius: 9999px !important; } /* Textos e Muted do Absolute */ html.theme-absolute .text-white\/85, html.theme-absolute .text-white\/80, html.theme-absolute .text-white\/70, html.theme-absolute .text-white\/60, html.theme-absolute .text-white\/50, html.theme-absolute .text-white\/45, html.theme-absolute .text-white\/40, html.theme-absolute .text-white\/30, html.theme-absolute .sidebar-username, html.theme-absolute .sidebar-bio { color: #71767b !important; } /* Botões do Twitter (Redondos em azul ou branco) */ html.theme-absolute .btn-custom { background: #1d9bf0 !important; color: #ffffff !important; border: none !important; border-radius: 9999px !important; font-weight: 700 !important; box-shadow: none !important; transition: background 0.2s !important; } html.theme-absolute .btn-custom:hover { background: #1a8cd8 !important; transform: none !important; } html.theme-absolute .btn-secondary { background: #16181c !important; color: #e7e9ea !important; border: 1px solid #536471 !important; border-radius: 9999px !important; box-shadow: none !important; } html.theme-absolute .btn-secondary:hover { background: rgba(255, 255, 255, 0.03) !important; transform: none !important; } /* Forms e Inputs */ html.theme-absolute .form-control { background: #000000 !important; border: 1px solid #2f3336 !important; border-radius: 8px !important; color: #e7e9ea !important; } html.theme-absolute .form-control:focus { border-color: #1d9bf0 !important; } /* Post Actions */ html.theme-absolute .post-action-bar { border-top: 1px solid #2f3336 !important; } html.theme-absolute .post-action-btn { color: #71767b !important; } html.theme-absolute .post-action-btn:hover { color: #1d9bf0 !important; background: rgba(29, 155, 240, 0.1) !important; } /* Sidebar Links */ html.theme-absolute .glass-nav-btn { color: #e7e9ea !important; border-radius: 9999px !important; } html.theme-absolute .glass-nav-btn:hover { background: rgba(255, 255, 255, 0.08) !important; } html.theme-absolute .glass-nav-btn-highlight { background: none !important; border: none !important; } /* Divisórias */ html.theme-absolute hr { border-color: #2f3336 !important; } /* Mobile Bottom Nav */ html.theme-absolute .mobile-bottom-nav { background: #000000 !important; border: 1px solid #2f3336 !important; border-radius: 0 !important; width: 100% !important; bottom: 0 !important; box-shadow: none !important; } html.theme-absolute .mobile-nav-lnk { color: #71767b !important; } html.theme-absolute .mobile-nav-lnk.active { color: #1d9bf0 !important; } /* ========================================================================== 3. PIXEL (ARCADE RETRO / 8-BIT) ========================================================================== */ html.theme-pixel * { font-family: 'VT323', monospace !important; } html.theme-pixel .material-icons, html.theme-pixel .material-icons-outlined, html.theme-pixel .material-icons-round, html.theme-pixel .material-icons-sharp, html.theme-pixel [class*="material-icons"] { font-family: 'Material Icons' !important; } html.theme-pixel { font-size: 19px !important; /* Aumenta a legibilidade da fonte VT323 */ } html.theme-pixel body { background-color: #0b0818 !important; color: #00ff00 !important; /* Verde hacker terminal */ /* CRT Scanline e Grade de Fundo */ background-image: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.3) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.04)) !important; background-size: 100% 4px, 6px 100% !important; } html.theme-pixel .liquid-bg-container, html.theme-pixel .liquid-blob { display: none !important; } /* Blocos retos e com bordas retro neon */ html.theme-pixel .navbar-inner, html.theme-pixel .glass-sidebar, html.theme-pixel .card, html.theme-pixel .jumbotron, html.theme-pixel .modal-content, html.theme-pixel .terms-box, html.theme-pixel .tags_post { background: #110d24 !important; border: 3px solid #ff00ff !important; /* Borda rosa retro */ border-radius: 0px !important; /* Totalmente quadrado */ box-shadow: 6px 6px 0px #00ffff !important; /* Sombra sólida azul retro */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: transform 0.1s, box-shadow 0.1s !important; } html.theme-pixel .navbar-inner { height: 72px !important; } /* Efeito Hover nos cards */ html.theme-pixel .tags_post:hover, html.theme-pixel .card:hover, html.theme-pixel .glass-sidebar:hover { transform: translate(-2px, -2px) !important; box-shadow: 8px 8px 0px #00ffff !important; } /* Botões do Pixel (Estilo botão de Fliperama) */ html.theme-pixel .btn, html.theme-pixel .btn-custom, html.theme-pixel .btn-secondary { background: #ffff00 !important; /* Amarelo retro */ color: #000000 !important; font-weight: bold !important; border: 3px solid #000000 !important; border-radius: 0px !important; box-shadow: 4px 4px 0px #ff00ff !important; font-size: 1.35rem !important; padding: 8px 16px !important; transition: all 0.1s ease !important; transform: none !important; } html.theme-pixel .btn:hover, html.theme-pixel .btn-custom:hover, html.theme-pixel .btn-secondary:hover { transform: translate(2px, 2px) !important; box-shadow: 2px 2px 0px #ff00ff !important; background: #e6e600 !important; } html.theme-pixel .btn-onboarding-next, html.theme-pixel #btn-onboarding-finish { background: #00ff00 !important; /* Verde neon */ } html.theme-pixel .btn-onboarding-next:hover, html.theme-pixel #btn-onboarding-finish:hover { background: #00cc00 !important; } /* Inputs Retro */ html.theme-pixel .form-control { background: #070514 !important; border: 3px solid #00ffff !important; border-radius: 0px !important; color: #ffff00 !important; font-size: 1.3rem !important; box-shadow: none !important; } html.theme-pixel .form-control:focus { border-color: #ff00ff !important; background: #0f0b26 !important; } html.theme-pixel .form-control::placeholder { color: rgba(0, 255, 255, 0.4) !important; } /* Cores de Texto do Pixel */ html.theme-pixel h1, html.theme-pixel h2, html.theme-pixel h3, html.theme-pixel h4, html.theme-pixel h5, html.theme-pixel h6, html.theme-pixel .font-bold.text-white, html.theme-pixel .text-white { color: #ff00ff !important; /* Títulos em Rosa Neon */ text-shadow: 2px 2px 0px #0b0818 !important; } html.theme-pixel p, html.theme-pixel span, html.theme-pixel div, html.theme-pixel li { color: #00ff00 !important; /* Texto comum em verde neon */ } html.theme-pixel .text-white\/85, html.theme-pixel .text-white\/80, html.theme-pixel .text-white\/70, html.theme-pixel .text-white\/60, html.theme-pixel .text-white\/50, html.theme-pixel .text-white\/45, html.theme-pixel .text-white\/40, html.theme-pixel .text-white\/30, html.theme-pixel .sidebar-username, html.theme-pixel .sidebar-bio { color: #00ffff !important; /* Muted e secundários em azul ciano */ } html.theme-pixel a { color: #ffff00 !important; text-decoration: underline !important; } html.theme-pixel a:hover { color: #ff00ff !important; } /* Navbar Interna links */ html.theme-pixel .navbar-inner a, html.theme-pixel .navbar-inner span, html.theme-pixel .navbar-inner p { color: #00ff00 !important; text-decoration: none !important; border-radius: 0px !important; } html.theme-pixel .navbar-inner a:hover { color: #ffff00 !important; background: #ff00ff !important; } /* Post Actions */ html.theme-pixel .post-action-bar { border-top: 2px solid #ff00ff !important; } html.theme-pixel .post-action-btn { color: #00ffff !important; border-radius: 0px !important; } html.theme-pixel .post-action-btn:hover { color: #000000 !important; background: #00ffff !important; } /* Sidebar Navigation */ html.theme-pixel .glass-nav-btn { color: #00ff00 !important; border-radius: 0px !important; border-bottom: 2px solid rgba(255,0,255,0.2) !important; } html.theme-pixel .glass-nav-btn:hover { background: #ff00ff !important; color: #000000 !important; } html.theme-pixel .glass-nav-btn i { color: inherit !important; } html.theme-pixel .glass-nav-btn-highlight { background: none !important; border: none !important; } /* Divisórias */ html.theme-pixel hr { border-color: #ff00ff !important; } /* Mobile Bottom Navigation */ html.theme-pixel .mobile-bottom-nav { background: #110d24 !important; border: 3px solid #ff00ff !important; border-radius: 0px !important; box-shadow: none !important; width: 100% !important; bottom: 0 !important; height: 60px !important; } html.theme-pixel .mobile-nav-lnk { color: #00ffff !important; } html.theme-pixel .mobile-nav-lnk.active { color: #ffff00 !important; } html.theme-pixel .mobile-nav-btn-add { background: #ff00ff !important; color: #000000 !important; border-radius: 0px !important; box-shadow: 2px 2px 0px #00ffff !important; } html.theme-pixel .mobile-nav-avatar { border-radius: 0px !important; border: 2px solid #00ff00 !important; } /* Onboarding Específico */ html.theme-pixel .terms-box { background: #070514 !important; border: 3px solid #ff00ff !important; } html.theme-pixel .terms-box li, html.theme-pixel .terms-box strong { color: #00ff00 !important; } html.theme-pixel .feature-card { border: 2px solid #ff00ff !important; box-shadow: 3px 3px 0px #00ffff !important; } html.theme-pixel .marquee-post { border: 2px solid #ff00ff !important; } html.theme-pixel .onboarding-scene img { border-radius: 0px !important; border: 2px solid #ff00ff !important; } /* ========================================================================== 4. VERY STRONG WITCH (CELestial / WICCA / NATURE) ========================================================================== */ html.theme-very-strong-witch body { background-color: #0d061a !important; color: #e9e3ff !important; background-image: radial-gradient(circle at 10% 20%, rgba(99, 10, 150, 0.28) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(6, 78, 59, 0.22) 0%, transparent 50%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M20 20 A 5 5 0 1 0 30 25 A 6 6 0 1 1 20 20 Z' fill='none' stroke='%23e5c158' stroke-opacity='0.08' stroke-width='0.8'/%3E%3Cpath d='M80 30 C75 25 70 35 65 30 C70 35 75 25 80 30 Z' fill='none' stroke='%23047857' stroke-opacity='0.09' stroke-width='0.7'/%3E%3Cpath d='M50 80 L52 84 L56 84 L53 87 L54 91 L50 89 L46 91 L47 87 L44 84 L48 84 Z' fill='%23e5c158' fill-opacity='0.08'/%3E%3Ccircle cx='100' cy='90' r='10' stroke='%23e5c158' stroke-opacity='0.05' stroke-width='0.5' fill='none'/%3E%3Cpath d='M90 90 L110 90 M100 80 L100 100' stroke='%23e5c158' stroke-opacity='0.04' stroke-width='0.5'/%3E%3Cpath d='M12 90 C 8 80, 20 75, 25 85 C 22 92, 10 95, 12 90 Z' fill='%23047857' fill-opacity='0.07'/%3E%3C/svg%3E") !important; background-attachment: fixed !important; } html.theme-very-strong-witch .navbar-inner, html.theme-very-strong-witch .glass-sidebar, html.theme-very-strong-witch .card, html.theme-very-strong-witch .jumbotron, html.theme-very-strong-witch .modal-content, html.theme-very-strong-witch .terms-box, html.theme-very-strong-witch .tags_post { background: rgba(22, 10, 42, 0.72) !important; border: 1px solid rgba(229, 193, 88, 0.22) !important; border-top: 1px solid rgba(229, 193, 88, 0.38) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(18px) saturate(140%) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important; color: #e2d7f5 !important; border-radius: 20px !important; } html.theme-very-strong-witch .card:hover, html.theme-very-strong-witch .tags_post:hover { border-color: rgba(229, 193, 88, 0.45) !important; box-shadow: 0 15px 40px rgba(139, 92, 246, 0.15), 0 5px 15px rgba(0, 0, 0, 0.4) !important; } html.theme-very-strong-witch h1, html.theme-very-strong-witch h2, html.theme-very-strong-witch h3, html.theme-very-strong-witch h4, html.theme-very-strong-witch h5, html.theme-very-strong-witch h6, html.theme-very-strong-witch .font-bold.text-white, html.theme-very-strong-witch .text-white { font-family: 'Cinzel', serif !important; color: #e5c158 !important; text-shadow: 0 2px 10px rgba(229, 193, 88, 0.12) !important; } html.theme-very-strong-witch h1::before, html.theme-very-strong-witch h2::before { content: "☾ " !important; color: #e5c158 !important; font-family: 'Cinzel', serif !important; } html.theme-very-strong-witch h1::after, html.theme-very-strong-witch h2::after { content: " ☽" !important; color: #e5c158 !important; font-family: 'Cinzel', serif !important; } html.theme-very-strong-witch p, html.theme-very-strong-witch span, html.theme-very-strong-witch div, html.theme-very-strong-witch li, html.theme-very-strong-witch td, html.theme-very-strong-witch th, html.theme-very-strong-witch label { font-family: 'Cormorant Garamond', serif !important; font-size: 1.18rem !important; line-height: 1.5 !important; } html.theme-very-strong-witch .material-icons, html.theme-very-strong-witch .material-icons-outlined, html.theme-very-strong-witch .material-icons-round, html.theme-very-strong-witch .material-icons-sharp, html.theme-very-strong-witch [class*="material-icons"] { font-family: 'Material Icons' !important; font-size: inherit; } html.theme-very-strong-witch .form-control { background: rgba(12, 5, 24, 0.8) !important; border: 1px solid rgba(229, 193, 88, 0.2) !important; color: #f1e9ff !important; border-radius: 10px !important; font-family: 'Cormorant Garamond', serif !important; font-size: 1.15rem !important; } html.theme-very-strong-witch .form-control:focus { border-color: #e5c158 !important; box-shadow: 0 0 12px rgba(229, 193, 88, 0.25) !important; background: rgba(18, 8, 35, 0.9) !important; } html.theme-very-strong-witch .form-control::placeholder { color: rgba(226, 215, 245, 0.4) !important; } html.theme-very-strong-witch .btn, html.theme-very-strong-witch .btn-custom, html.theme-very-strong-witch .btn-secondary { background: linear-gradient(135deg, #4c1d95 0%, #064e3b 100%) !important; color: #e5c158 !important; border: 1px solid rgba(229, 193, 88, 0.5) !important; border-radius: 20px !important; font-family: 'Cinzel', serif !important; font-weight: 700 !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; transition: all 0.3s ease !important; text-transform: uppercase !important; letter-spacing: 1px !important; } html.theme-very-strong-witch .btn:hover, html.theme-very-strong-witch .btn-custom:hover, html.theme-very-strong-witch .btn-secondary:hover { background: linear-gradient(135deg, #6d28d9 0%, #047857 100%) !important; border-color: #e5c158 !important; color: #ffffff !important; box-shadow: 0 6px 20px rgba(109, 40, 217, 0.4) !important; transform: translateY(-2px) !important; } html.theme-very-strong-witch a { color: #e5c158 !important; text-decoration: none !important; transition: color 0.2s ease !important; } html.theme-very-strong-witch a:hover { color: #fce788 !important; text-shadow: 0 0 8px rgba(252, 231, 136, 0.4) !important; } html.theme-very-strong-witch .navbar-inner a, html.theme-very-strong-witch .navbar-inner span, html.theme-very-strong-witch .navbar-inner p { color: #e2d7f5 !important; text-decoration: none !important; } html.theme-very-strong-witch .navbar-inner a:hover { color: #e5c158 !important; background: rgba(229, 193, 88, 0.08) !important; border-radius: 12px !important; } html.theme-very-strong-witch .post-action-bar { border-top: 1px solid rgba(229, 193, 88, 0.15) !important; } html.theme-very-strong-witch .post-action-btn { color: #e2d7f5 !important; font-family: 'Cinzel', serif !important; font-size: 0.9rem !important; } html.theme-very-strong-witch .post-action-btn:hover { color: #e5c158 !important; background: rgba(229, 193, 88, 0.08) !important; } html.theme-very-strong-witch .glass-nav-btn { color: #e2d7f5 !important; border-radius: 14px !important; } html.theme-very-strong-witch .glass-nav-btn:hover { background: rgba(229, 193, 88, 0.08) !important; color: #e5c158 !important; } html.theme-very-strong-witch .glass-nav-btn-highlight { background: rgba(229, 193, 88, 0.05) !important; border: 1px solid rgba(229, 193, 88, 0.2) !important; } html.theme-very-strong-witch hr { border-color: rgba(229, 193, 88, 0.15) !important; } html.theme-very-strong-witch .mobile-bottom-nav { background: rgba(18, 7, 33, 0.9) !important; border-top: 1px solid rgba(229, 193, 88, 0.25) !important; } html.theme-very-strong-witch .mobile-nav-lnk { color: #e2d7f5 !important; } html.theme-very-strong-witch .mobile-nav-lnk.active { color: #e5c158 !important; } html.theme-very-strong-witch .mobile-nav-btn-add { background: linear-gradient(135deg, #4c1d95 0%, #064e3b 100%) !important; border: 1px solid #e5c158 !important; } html.theme-very-strong-witch .terms-box { background: rgba(12, 5, 24, 0.8) !important; border: 1px solid rgba(229, 193, 88, 0.2) !important; } html.theme-very-strong-witch .feature-card { border: 1px solid rgba(229, 193, 88, 0.2) !important; } html.theme-very-strong-witch .marquee-post { border: 1px solid rgba(229, 193, 88, 0.15) !important; } /* ========================================================================== 5. INTERFACE DO COMUTADOR DE TEMAS (SWITCHER) ========================================================================== */ #theme-switcher-btn { position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4); z-index: 99999; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #ffffff; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #theme-switcher-btn:hover { transform: scale(1.1) rotate(15deg); box-shadow: 0 12px 40px rgba(99, 102, 241, 0.55); } #theme-switcher-panel { position: fixed; bottom: 90px; right: 20px; width: 290px; background: rgba(10, 10, 15, 0.9); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); z-index: 99999; padding: 18px; transform: translateY(20px) scale(0.95); opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #theme-switcher-panel.active { transform: translateY(0) scale(1); opacity: 1; pointer-events: all; } /* Scrollable Container and Custom scrollbar */ #theme-switcher-panel > div { max-height: 320px !important; overflow-y: auto !important; padding-right: 6px !important; } #theme-switcher-panel > div::-webkit-scrollbar { width: 4px; } #theme-switcher-panel > div::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); border-radius: 99px; } #theme-switcher-panel > div::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.35); border-radius: 99px; } #theme-switcher-panel > div::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.6); } .theme-option { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; } .theme-option:hover { background: rgba(255, 255, 255, 0.07); transform: translateX(2px); } .theme-option.active { background: rgba(99, 102, 241, 0.2); border-color: rgba(99, 102, 241, 0.45); } .theme-preview-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); flex-shrink: 0; } /* Previews dos temas */ .preview-original { background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%); } .preview-white { background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%); border: 1px solid rgba(0, 0, 0, 0.15) !important; } .preview-absolute { background: #000000; border-color: #2f3336 !important; } .preview-pixel { background: #110d24; border: 2px dashed #ff00ff !important; border-radius: 0% !important; } .preview-witch { background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 50%, #064e3b 100%); border: 1px solid #e5c158 !important; } .preview-windows-xp { background: linear-gradient(135deg, #245edb 0%, #7ca6e8 50%, #3c813c 100%) !important; border: 1px solid #003c74 !important; } .preview-windows-98 { background: #c0c0c0 !important; border-top: 1.5px solid #ffffff !important; border-left: 1.5px solid #ffffff !important; border-right: 1.5px solid #808080 !important; border-bottom: 1.5px solid #808080 !important; border-radius: 0px !important; } .preview-kittens { background: linear-gradient(135deg, #ffb6c1 0%, #ffdab9 100%); border: 1px solid #ffb3d9 !important; } .preview-windows-7 { background: linear-gradient(135deg, #87cefa 0%, #4682b4 100%); border: 1px solid rgba(255, 255, 255, 0.4) !important; } .preview-cyberpunk { background: linear-gradient(135deg, #00f0ff 0%, #fee715 100%); border: 1px solid #fee715 !important; } .preview-vaporwave { background: linear-gradient(135deg, #ff71ce 0%, #01cdfe 50%, #05ffa1 100%) !important; border: 1px solid #ffffff !important; } .preview-flamengo { background: linear-gradient(135deg, #e20e26 0%, #000000 100%); border: 1px solid #d4af37 !important; } .preview-platformer { background: linear-gradient(135deg, #5c94fc 0%, #b83400 100%); border: 1.5px solid #fcfc00 !important; border-radius: 0px !important; } .preview-shadow { background: linear-gradient(135deg, #000000 0%, #cc0000 50%, #d4a800 100%) !important; border: 1px solid #cc0000 !important; } .theme-name { font-size: 0.88rem; font-weight: 600; color: #ffffff; } /* Overrides específicos para o switcher no Light Mode */ html.theme-liquid-glass-white #theme-switcher-panel { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1) !important; } html.theme-liquid-glass-white .theme-name { color: #0f172a !important; } html.theme-liquid-glass-white .theme-option:hover { background: rgba(15, 23, 42, 0.04) !important; } html.theme-liquid-glass-white .theme-option.active { background: rgba(79, 70, 229, 0.1) !important; border-color: rgba(79, 70, 229, 0.2) !important; } /* Overrides específicos para o switcher no Absolute */ html.theme-absolute #theme-switcher-panel { background: #000000 !important; border: 1px solid #2f3336 !important; border-radius: 16px !important; box-shadow: 0 10px 40px rgba(255, 255, 255, 0.05) !important; } html.theme-absolute .theme-option.active { background: rgba(29, 155, 240, 0.1) !important; border-color: #1d9bf0 !important; } /* Overrides específicos para o switcher no Pixel */ html.theme-pixel #theme-switcher-btn { border-radius: 0px !important; background: #ffff00 !important; color: #000000 !important; border: 3px solid #000000 !important; box-shadow: 4px 4px 0px #ff00ff !important; } html.theme-pixel #theme-switcher-btn:hover { transform: translate(-2px, -2px) !important; box-shadow: 6px 6px 0px #ff00ff !important; } html.theme-pixel #theme-switcher-panel { border-radius: 0px !important; background: #110d24 !important; border: 3px solid #ff00ff !important; box-shadow: 5px 5px 0px #00ffff !important; bottom: 95px !important; } html.theme-pixel .theme-option { border-radius: 0px !important; } html.theme-pixel .theme-option.active { background: rgba(255, 0, 255, 0.15) !important; border: 2px dashed #00ffff !important; } html.theme-pixel .theme-preview-dot { border-radius: 0% !important; } html.theme-pixel .theme-name { color: #00ff00 !important; font-size: 1.1rem !important; } /* Overrides específicos para o switcher no Very Strong Witch */ html.theme-very-strong-witch #theme-switcher-btn { background: linear-gradient(135deg, #4c1d95 0%, #064e3b 100%) !important; border: 1px solid #e5c158 !important; box-shadow: 0 8px 32px rgba(109, 40, 217, 0.4) !important; } html.theme-very-strong-witch #theme-switcher-btn:hover { box-shadow: 0 12px 40px rgba(109, 40, 217, 0.6) !important; } html.theme-very-strong-witch #theme-switcher-panel { background: rgba(18, 7, 33, 0.95) !important; border: 1px solid rgba(229, 193, 88, 0.25) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important; } html.theme-very-strong-witch .theme-name { color: #e2d7f5 !important; } html.theme-very-strong-witch .theme-option:hover { background: rgba(229, 193, 88, 0.05) !important; } html.theme-very-strong-witch .theme-option.active { background: rgba(229, 193, 88, 0.1) !important; border-color: rgba(229, 193, 88, 0.3) !important; } /* ========================================================================== 6. SPLASH SCREEN & UNREAD BADGES OVERRIDES FOR THEMES ========================================================================== */ /* --- Glass White Theme Overrides --- */ html.theme-liquid-glass-white .badge-unread { background-color: #4f46e5 !important; color: #ffffff !important; } html.theme-liquid-glass-white .splash-container { background-color: #f1f5f9 !important; } html.theme-liquid-glass-white .splash-text { background: linear-gradient(135deg, #0f172a 0%, #312e81 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } html.theme-liquid-glass-white .splash-logo i { color: #4f46e5 !important; } /* --- Absolute Theme Overrides --- */ html.theme-absolute .badge-unread { background-color: #1d9bf0 !important; color: #ffffff !important; } html.theme-absolute .splash-container { background-color: #000000 !important; } html.theme-absolute .splash-text { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: initial !important; color: #1d9bf0 !important; } html.theme-absolute .splash-logo i { color: #1d9bf0 !important; } /* --- Pixel Theme Overrides --- */ html.theme-pixel .badge-unread { background-color: #ff00ff !important; color: #000000 !important; border-radius: 0px !important; box-shadow: 2px 2px 0px #00ffff !important; border: 2px solid #000000 !important; font-family: 'VT323', monospace !important; font-size: 14px !important; } html.theme-pixel .splash-container { background-color: #0b0818 !important; } html.theme-pixel .splash-text { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: initial !important; color: #ff00ff !important; text-shadow: 3px 3px 0px #00ffff !important; } html.theme-pixel .splash-logo i { color: #00ff00 !important; } /* --- Very Strong Witch Theme Overrides --- */ html.theme-very-strong-witch .badge-unread { background-color: #e5c158 !important; color: #0d061a !important; border: 1px solid rgba(229, 193, 88, 0.5) !important; font-family: 'Cinzel', serif !important; font-weight: bold !important; font-size: 11px !important; } html.theme-very-strong-witch .splash-container { background-color: #0d061a !important; background-image: radial-gradient(circle at center, rgba(99, 10, 150, 0.2) 0%, transparent 70%) !important; } html.theme-very-strong-witch .splash-text { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: initial !important; color: #e5c158 !important; text-shadow: 0 2px 10px rgba(229, 193, 88, 0.25) !important; } html.theme-very-strong-witch .splash-logo i { color: #e5c158 !important; } /* ========================================================================== CHARTS FULLSCREEN APP & WELCOME PANEL SPECIFIC THEME OVERRIDES ========================================================================== */ /* --- 1. Liquid Glass White Overrides --- */ html.theme-liquid-glass-white #chat_welcome_panel { background: rgba(255, 255, 255, 0.45) !important; } html.theme-liquid-glass-white .status-indicator { border-color: #f1f5f9 !important; } html.theme-liquid-glass-white #chat_welcome_panel h2 { color: #0f172a !important; } html.theme-liquid-glass-white #chat_welcome_panel p { color: #475569 !important; } html.theme-liquid-glass-white #chat_welcome_panel .bg-white\/5 { background: rgba(15, 23, 42, 0.03) !important; border-color: rgba(15, 23, 42, 0.06) !important; } html.theme-liquid-glass-white #chat_welcome_panel .text-white { color: #0f172a !important; } html.theme-liquid-glass-white #chat_welcome_panel .text-white\/40 { color: #64748b !important; } html.theme-liquid-glass-white #chat_welcome_panel .text-white\/30 { color: #94a3b8 !important; } html.theme-liquid-glass-white #chat_welcome_panel .text-white\/60 { color: #475569 !important; } /* --- 2. Absolute Theme Overrides --- */ html.theme-absolute #chat_welcome_panel { background: #000000 !important; border-left: 1px solid #2f3336 !important; } html.theme-absolute .status-indicator { border-color: #000000 !important; } html.theme-absolute .chat-contacts-panel { border-right: 1px solid #2f3336 !important; } html.theme-absolute .chat-contacts-header { border-bottom: 1px solid #2f3336 !important; } html.theme-absolute .chat-window-header { border-bottom: 1px solid #2f3336 !important; } html.theme-absolute .chat-input-container { border-top: 1px solid #2f3336 !important; } html.theme-absolute #chat_welcome_panel .bg-white\/5 { background: #16181c !important; border-color: #2f3336 !important; } /* --- 3. Pixel Theme Overrides --- */ html.theme-pixel #chat_welcome_panel { background: #110d24 !important; border: 3px solid #ff00ff !important; box-shadow: 6px 6px 0px #00ffff !important; margin: 30px !important; } html.theme-pixel .status-indicator { border-radius: 0px !important; border-color: #110d24 !important; width: 10px !important; height: 10px !important; } html.theme-pixel #chat_welcome_panel h2, html.theme-pixel #chat_welcome_panel p, html.theme-pixel #chat_welcome_panel span, html.theme-pixel #chat_welcome_panel div { font-family: 'VT323', monospace !important; } html.theme-pixel #chat_welcome_panel h2 { color: #ffff00 !important; font-size: 28px !important; text-shadow: 2px 2px 0px #ff00ff !important; } html.theme-pixel #chat_welcome_panel p { color: #ffffff !important; font-size: 18px !important; } html.theme-pixel #chat_welcome_panel .bg-white\/5 { background: #000000 !important; border: 2px solid #00ffff !important; border-radius: 0px !important; box-shadow: 3px 3px 0px #ff00ff !important; } html.theme-pixel #chat_welcome_panel .text-white { color: #00ff00 !important; font-size: 16px !important; } html.theme-pixel #chat_welcome_panel .text-white\/40 { color: #00ffff !important; font-size: 14px !important; } html.theme-pixel #chat_welcome_panel .text-white\/60 { color: #ffffff !important; font-size: 16px !important; } html.theme-pixel #chat_welcome_panel .welcome-content { gap: 12px !important; } /* --- 4. Very Strong Witch Theme Overrides --- */ html.theme-very-strong-witch #chat_welcome_panel { background: rgba(22, 10, 42, 0.52) !important; } html.theme-very-strong-witch .status-indicator { border-color: rgba(22, 10, 42, 0.95) !important; } html.theme-very-strong-witch #chat_welcome_panel h2, html.theme-very-strong-witch #chat_welcome_panel p, html.theme-very-strong-witch #chat_welcome_panel span, html.theme-very-strong-witch #chat_welcome_panel div { font-family: 'Cormorant Garamond', serif !important; } html.theme-very-strong-witch #chat_welcome_panel h2 { font-family: 'Cinzel', serif !important; color: #e5c158 !important; text-shadow: 0 2px 10px rgba(229, 193, 88, 0.2) !important; } html.theme-very-strong-witch #chat_welcome_panel .bg-white\/5 { background: rgba(12, 5, 24, 0.6) !important; border-color: rgba(229, 193, 88, 0.2) !important; } html.theme-very-strong-witch #chat_welcome_panel .text-white { color: #e2d7f5 !important; } html.theme-very-strong-witch #chat_welcome_panel .text-white\/40 { color: #a78bfa !important; } html.theme-very-strong-witch .liquid-bg-container { background-color: #0d061a !important; } /* Esconder botão flutuante de temas no celular */ @media (max-width: 767.98px) { #theme-switcher-btn { display: none !important; } } /* ========================================================================== 6. CLOVE DARK (PASTEL PINK & PURPLE / FOFO / KAWAII) ========================================================================== */ html.theme-clove-dark * { font-family: 'Quicksand', sans-serif !important; } /* Override Material Icons to restore icon fonts */ html.theme-clove-dark .material-icons, html.theme-clove-dark .material-icons-outlined, html.theme-clove-dark .material-icons-round, html.theme-clove-dark .material-icons-sharp, html.theme-clove-dark [class*="material-icons"] { font-family: 'Material Icons' !important; } html.theme-clove-dark body { background-color: #1a0f24 !important; color: #fce7f3 !important; background-image: radial-gradient(circle at 10% 20%, rgba(255, 179, 217, 0.16) 0%, transparent 45%), radial-gradient(circle at 90% 80%, rgba(179, 157, 219, 0.16) 0%, transparent 50%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M10 10 L12 14 L16 14 L13 17 L14 21 L10 19 L6 21 L7 17 L4 14 L8 14 Z' fill='%23ffb3d9' fill-opacity='0.04'/%3E%3Ccircle cx='50' cy='50' r='3' fill='%23d8b4fe' fill-opacity='0.05'/%3E%3Cpath d='M60 20 L62 23 L65 23 L63 25 L64 28 L61 27 L59 28 L60 25 L58 23 L61 23 Z' fill='%23d8b4fe' fill-opacity='0.04'/%3E%3C/svg%3E") !important; background-attachment: fixed !important; } /* Adapt liquid background container for Clove Dark */ html.theme-clove-dark .liquid-bg-container { background-color: #1a0f24 !important; } html.theme-clove-dark .liquid-blob { opacity: 0.35 !important; mix-blend-mode: screen !important; } html.theme-clove-dark .blob-1 { background: radial-gradient(circle, rgba(255, 179, 217, 0.45) 0%, rgba(255, 179, 217, 0) 100%) !important; } html.theme-clove-dark .blob-2 { background: radial-gradient(circle, rgba(216, 180, 254, 0.4) 0%, rgba(216, 180, 254, 0) 100%) !important; } html.theme-clove-dark .blob-3 { background: radial-gradient(circle, rgba(244, 63, 94, 0.2) 0%, rgba(244, 63, 94, 0) 100%) !important; } html.theme-clove-dark .navbar-inner, html.theme-clove-dark .glass-sidebar, html.theme-clove-dark .card, html.theme-clove-dark .jumbotron, html.theme-clove-dark .modal-content, html.theme-clove-dark .terms-box, html.theme-clove-dark .tags_post { background: rgba(40, 20, 55, 0.65) !important; border: 2px solid rgba(255, 179, 217, 0.22) !important; border-top: 2px solid rgba(255, 179, 217, 0.4) !important; box-shadow: 0 15px 35px rgba(255, 179, 217, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; color: #fce7f3 !important; border-radius: 28px !important; } html.theme-clove-dark .card:hover, html.theme-clove-dark .tags_post:hover { border-color: rgba(255, 179, 217, 0.45) !important; box-shadow: 0 15px 40px rgba(255, 179, 217, 0.15), 0 5px 15px rgba(0, 0, 0, 0.3) !important; transform: translateY(-2px) !important; transition: all 0.3s ease !important; } html.theme-clove-dark h1, html.theme-clove-dark h2, html.theme-clove-dark h3, html.theme-clove-dark h4, html.theme-clove-dark h5, html.theme-clove-dark h6, html.theme-clove-dark .font-bold.text-white, html.theme-clove-dark .text-white { color: #ffb3d9 !important; text-shadow: 0 2px 8px rgba(255, 179, 217, 0.2) !important; } html.theme-clove-dark h1::before, html.theme-clove-dark h2::before, html.theme-clove-dark h3::before { content: "✨ " !important; } html.theme-clove-dark h1::after, html.theme-clove-dark h2::after, html.theme-clove-dark h3::after { content: " ✨" !important; } html.theme-clove-dark p, html.theme-clove-dark span, html.theme-clove-dark div, html.theme-clove-dark li, html.theme-clove-dark td, html.theme-clove-dark th, html.theme-clove-dark label { color: #f3e5f5 !important; } html.theme-clove-dark .form-control { background: rgba(26, 15, 36, 0.8) !important; border: 2px solid rgba(179, 157, 219, 0.3) !important; color: #fff0f6 !important; border-radius: 16px !important; } html.theme-clove-dark .form-control:focus { border-color: #ffb3d9 !important; box-shadow: 0 0 12px rgba(255, 179, 217, 0.3) !important; background: rgba(40, 20, 55, 0.9) !important; } html.theme-clove-dark .btn, html.theme-clove-dark .btn-custom, html.theme-clove-dark .btn-secondary { background: linear-gradient(135deg, #ffb3d9 0%, #d8b4fe 100%) !important; color: #1a0f24 !important; border: 2px solid rgba(255, 255, 255, 0.4) !important; border-radius: 9999px !important; font-weight: 700 !important; box-shadow: 0 6px 20px rgba(255, 179, 217, 0.25) !important; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; } html.theme-clove-dark .btn:hover, html.theme-clove-dark .btn-custom:hover, html.theme-clove-dark .btn-secondary:hover { transform: scale(1.03) !important; box-shadow: 0 8px 25px rgba(255, 179, 217, 0.4) !important; filter: brightness(1.05) !important; } html.theme-clove-dark a { color: #d8b4fe !important; text-decoration: none !important; } html.theme-clove-dark a:hover { color: #ffb3d9 !important; text-shadow: 0 0 8px rgba(255, 179, 217, 0.3) !important; } html.theme-clove-dark .navbar-inner a, html.theme-clove-dark .navbar-inner span, html.theme-clove-dark .navbar-inner p { color: #f3e5f5 !important; } html.theme-clove-dark .navbar-inner a:hover { color: #ffb3d9 !important; background: rgba(255, 179, 217, 0.08) !important; border-radius: 16px !important; } html.theme-clove-dark .post-action-bar { border-top: 1px solid rgba(255, 179, 217, 0.15) !important; } html.theme-clove-dark .post-action-btn { color: #d8b4fe !important; } html.theme-clove-dark .post-action-btn:hover { color: #ffb3d9 !important; background: rgba(255, 179, 217, 0.08) !important; } html.theme-clove-dark .glass-nav-btn { color: #f3e5f5 !important; border-radius: 16px !important; } html.theme-clove-dark .glass-nav-btn:hover { background: rgba(255, 179, 217, 0.08) !important; color: #ffb3d9 !important; } html.theme-clove-dark .glass-nav-btn-highlight { background: rgba(255, 179, 217, 0.05) !important; border: 1px solid rgba(255, 179, 217, 0.2) !important; } html.theme-clove-dark hr { border-color: rgba(255, 179, 217, 0.15) !important; } html.theme-clove-dark .mobile-bottom-nav { background: rgba(26, 15, 36, 0.92) !important; border-top: 1px solid rgba(255, 179, 217, 0.2) !important; } html.theme-clove-dark .mobile-nav-lnk { color: #f3e5f5 !important; } html.theme-clove-dark .mobile-nav-lnk.active { color: #ffb3d9 !important; } html.theme-clove-dark .mobile-nav-btn-add { background: linear-gradient(135deg, #ffb3d9 0%, #d8b4fe 100%) !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; } html.theme-clove-dark .terms-box { background: rgba(26, 15, 36, 0.8) !important; border: 2px solid rgba(255, 179, 217, 0.2) !important; } /* ========================================================================== 7. CLOVE LIGHT (PASTEL PINK & PURPLE / FOFO / LIGHT STYLES) ========================================================================== */ html.theme-clove-light * { font-family: 'Quicksand', sans-serif !important; } /* Override Material Icons to restore icon fonts */ html.theme-clove-light .material-icons, html.theme-clove-light .material-icons-outlined, html.theme-clove-light .material-icons-round, html.theme-clove-light .material-icons-sharp, html.theme-clove-light [class*="material-icons"] { font-family: 'Material Icons' !important; } html.theme-clove-light body { background-color: #fff5f8 !important; color: #4a354f !important; background-image: radial-gradient(circle at 10% 20%, rgba(255, 179, 217, 0.22) 0%, transparent 45%), radial-gradient(circle at 90% 80%, rgba(179, 157, 219, 0.22) 0%, transparent 50%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M10 10 L12 14 L16 14 L13 17 L14 21 L10 19 L6 21 L7 17 L4 14 L8 14 Z' fill='%23ffb3d9' fill-opacity='0.15'/%3E%3Ccircle cx='50' cy='50' r='3' fill='%23d8b4fe' fill-opacity='0.18'/%3E%3Cpath d='M60 20 L62 23 L65 23 L63 25 L64 28 L61 27 L59 28 L60 25 L58 23 L61 23 Z' fill='%23d8b4fe' fill-opacity='0.15'/%3E%3C/svg%3E") !important; background-attachment: fixed !important; } /* Adapt liquid background container for Clove Light */ html.theme-clove-light .liquid-bg-container { background-color: #fff5f8 !important; } html.theme-clove-light .liquid-blob { opacity: 0.25 !important; mix-blend-mode: multiply !important; } html.theme-clove-light .blob-1 { background: radial-gradient(circle, rgba(255, 179, 217, 0.35) 0%, rgba(255, 179, 217, 0) 100%) !important; } html.theme-clove-light .blob-2 { background: radial-gradient(circle, rgba(216, 180, 254, 0.3) 0%, rgba(216, 180, 254, 0) 100%) !important; } html.theme-clove-light .blob-3 { background: radial-gradient(circle, rgba(244, 63, 94, 0.1) 0%, rgba(244, 63, 94, 0) 100%) !important; } html.theme-clove-light .navbar-inner, html.theme-clove-light .glass-sidebar, html.theme-clove-light .card, html.theme-clove-light .jumbotron, html.theme-clove-light .modal-content, html.theme-clove-light .terms-box, html.theme-clove-light .tags_post { background: rgba(255, 255, 255, 0.72) !important; border: 2px solid rgba(255, 179, 217, 0.3) !important; border-top: 2px solid rgba(255, 179, 217, 0.48) !important; box-shadow: 0 12px 30px rgba(255, 179, 217, 0.07) !important; backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; color: #4a354f !important; border-radius: 28px !important; } html.theme-clove-light .card:hover, html.theme-clove-light .tags_post:hover { border-color: rgba(255, 179, 217, 0.55) !important; box-shadow: 0 12px 35px rgba(255, 179, 217, 0.16) !important; transform: translateY(-2px) !important; transition: all 0.3s ease !important; } html.theme-clove-light h1, html.theme-clove-light h2, html.theme-clove-light h3, html.theme-clove-light h4, html.theme-clove-light h5, html.theme-clove-light h6, html.theme-clove-light .font-bold.text-white, html.theme-clove-light .text-white { color: #db2777 !important; text-shadow: 0 1px 4px rgba(255, 179, 217, 0.15) !important; } html.theme-clove-light h1::before, html.theme-clove-light h2::before, html.theme-clove-light h3::before { content: "🌸 " !important; } html.theme-clove-light h1::after, html.theme-clove-light h2::after, html.theme-clove-light h3::after { content: " 🌸" !important; } html.theme-clove-light p, html.theme-clove-light span, html.theme-clove-light div, html.theme-clove-light li, html.theme-clove-light td, html.theme-clove-light th, html.theme-clove-light label { color: #5b4660 !important; } html.theme-clove-light .form-control { background: rgba(255, 255, 255, 0.9) !important; border: 2px solid rgba(255, 179, 217, 0.3) !important; color: #4a354f !important; border-radius: 16px !important; } html.theme-clove-light .form-control:focus { border-color: #db2777 !important; box-shadow: 0 0 12px rgba(255, 179, 217, 0.2) !important; background: #ffffff !important; } html.theme-clove-light .btn, html.theme-clove-light .btn-custom, html.theme-clove-light .btn-secondary { background: linear-gradient(135deg, #ffb3d9 0%, #d8b4fe 100%) !important; color: #4a354f !important; border: 2px solid rgba(255, 255, 255, 0.6) !important; border-radius: 9999px !important; font-weight: 700 !important; box-shadow: 0 6px 20px rgba(255, 179, 217, 0.2) !important; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; } html.theme-clove-light .btn:hover, html.theme-clove-light .btn-custom:hover, html.theme-clove-light .btn-secondary:hover { transform: scale(1.03) !important; box-shadow: 0 8px 25px rgba(255, 179, 217, 0.35) !important; } html.theme-clove-light a { color: #9333ea !important; text-decoration: none !important; } html.theme-clove-light a:hover { color: #db2777 !important; } html.theme-clove-light .navbar-inner a, html.theme-clove-light .navbar-inner span, html.theme-clove-light .navbar-inner p { color: #5b4660 !important; } html.theme-clove-light .navbar-inner a:hover { color: #db2777 !important; background: rgba(255, 179, 217, 0.1) !important; border-radius: 16px !important; } html.theme-clove-light .post-action-bar { border-top: 1px solid rgba(255, 179, 217, 0.2) !important; } html.theme-clove-light .post-action-btn { color: #7c3aed !important; } html.theme-clove-light .post-action-btn:hover { color: #db2777 !important; background: rgba(255, 179, 217, 0.1) !important; } html.theme-clove-light .glass-nav-btn { color: #5b4660 !important; border-radius: 16px !important; } html.theme-clove-light .glass-nav-btn:hover { background: rgba(255, 179, 217, 0.1) !important; color: #db2777 !important; } html.theme-clove-light .glass-nav-btn-highlight { background: rgba(255, 179, 217, 0.05) !important; border: 1px solid rgba(255, 179, 217, 0.25) !important; } html.theme-clove-light hr { border-color: rgba(255, 179, 217, 0.2) !important; } html.theme-clove-light .mobile-bottom-nav { background: rgba(255, 255, 255, 0.94) !important; border-top: 1px solid rgba(255, 179, 217, 0.3) !important; box-shadow: 0 -4px 20px rgba(255, 179, 217, 0.06) !important; } html.theme-clove-light .mobile-nav-lnk { color: #5b4660 !important; } html.theme-clove-light .mobile-nav-lnk.active { color: #db2777 !important; } html.theme-clove-light .mobile-nav-btn-add { background: linear-gradient(135deg, #ffb3d9 0%, #d8b4fe 100%) !important; border: 1px solid rgba(255, 255, 255, 0.6) !important; } html.theme-clove-light .terms-box { background: rgba(255, 255, 255, 0.9) !important; border: 2px solid rgba(255, 179, 217, 0.25) !important; } /* Previews dos novos temas do Clove */ .preview-clove-dark { background: linear-gradient(135deg, #ffb3d9 0%, #b39ddb 100%) !important; } .preview-clove-light { background: linear-gradient(135deg, #fff0f6 0%, #f3e5f5 100%) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; } /* ========================================================================== 7. PC-ONLY FLOATING ACTION BUTTON (FAB) & GLOBAL MODAL ========================================================================== */ /* Esconder botão flutuante de ações no celular e tablet por padrão */ #pc-fab-btn { display: none; } #pc-fab-menu { display: none; } @media (min-width: 1024px) { /* Reposicionar botão de temas para abrir espaço para o FAB */ #theme-switcher-btn { bottom: 90px !important; } #theme-switcher-panel { bottom: 160px !important; } /* Botão de Ações Rápidas (+) */ #pc-fab-btn { display: flex !important; position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px rgba(168, 85, 247, 0.4); z-index: 99999; cursor: pointer; align-items: center; justify-content: center; color: #ffffff; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #pc-fab-btn:hover { transform: scale(1.1) rotate(90deg); box-shadow: 0 12px 40px rgba(168, 85, 247, 0.55); } #pc-fab-btn i { font-size: 28px; transition: transform 0.3s ease; } /* Ponto vermelho de notificações no FAB */ .badge-fab-dot { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; background-color: #ef4444; border: 2px solid #0f0f14; border-radius: 50%; z-index: 2; } /* Menu de opções do FAB */ #pc-fab-menu { display: block; position: fixed; bottom: 20px; right: 90px; width: 240px; background: rgba(15, 15, 20, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); z-index: 99999; padding: 12px; transform: translateX(20px) scale(0.95); opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #pc-fab-menu.active { transform: translateX(0) scale(1); opacity: 1; pointer-events: all; } .pc-fab-option { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; text-decoration: none; color: rgba(255, 255, 255, 0.8) !important; font-size: 14px; font-weight: 600; position: relative; } .pc-fab-option:hover { background: rgba(255, 255, 255, 0.05); color: #ffffff !important; } .pc-fab-option i { font-size: 20px; } .pc-fab-option .badge-count { background-color: #ef4444; color: white; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 10px; margin-left: auto; } } /* ================== OVERRIDES DE TEMAS PARA O FAB ================== */ /* Glass White Theme */ html.theme-liquid-glass-white #pc-fab-menu { background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1) !important; } html.theme-liquid-glass-white .pc-fab-option { color: rgba(15, 23, 42, 0.8) !important; } html.theme-liquid-glass-white .pc-fab-option:hover { background: rgba(0, 0, 0, 0.05) !important; color: rgba(15, 23, 42, 1) !important; } html.theme-liquid-glass-white #pc-fab-btn { background: linear-gradient(135deg, #4f46e5 0%, #0891b2 100%) !important; } html.theme-liquid-glass-white .badge-fab-dot { border: 2px solid #ffffff !important; } /* Absolute Black Theme */ html.theme-absolute #pc-fab-menu { background: #000000 !important; border: 1px solid #2f3336 !important; box-shadow: 0 20px 50px rgba(255, 255, 255, 0.03) !important; } html.theme-absolute .pc-fab-option:hover { background: rgba(255, 255, 255, 0.08) !important; } html.theme-absolute #pc-fab-btn { background: #1d9bf0 !important; border: 1px solid #2f3336 !important; } html.theme-absolute .badge-fab-dot { border: 2px solid #000000 !important; } /* Pixel Retro Theme */ html.theme-pixel #pc-fab-btn { border-radius: 0px !important; background: #00ffff !important; color: #000000 !important; border: 3px solid #000000 !important; box-shadow: 4px 4px 0px #ff00ff !important; } html.theme-pixel #pc-fab-btn:hover { transform: translate(-2px, -2px) !important; box-shadow: 6px 6px 0px #ff00ff !important; } html.theme-pixel #pc-fab-menu { font-family: 'VT323', monospace !important; border-radius: 0px !important; background: #110d24 !important; border: 3px solid #ff00ff !important; box-shadow: 5px 5px 0px #00ffff !important; } html.theme-pixel .pc-fab-option { border-radius: 0px !important; color: #00ff00 !important; font-size: 1.1rem !important; } html.theme-pixel .pc-fab-option:hover { background: rgba(255, 0, 255, 0.1) !important; color: #00ffff !important; } html.theme-pixel .badge-fab-dot { border-radius: 0px !important; border: 1px solid #110d24 !important; background-color: #ff00ff !important; } /* Witch Theme */ html.theme-very-strong-witch #pc-fab-menu { font-family: 'Cormorant Garamond', serif !important; background: rgba(22, 10, 42, 0.92) !important; border: 1px solid rgba(229, 193, 88, 0.35) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important; } html.theme-very-strong-witch .pc-fab-option { color: #e2d7f5 !important; } html.theme-very-strong-witch .pc-fab-option:hover { background: rgba(229, 193, 88, 0.1) !important; color: #fce7f3 !important; } html.theme-very-strong-witch #pc-fab-btn { background: linear-gradient(135deg, #7c3aed 0%, #059669 100%) !important; border: 1px solid #e5c158 !important; box-shadow: 0 8px 32px rgba(124, 58, 237, 0.4) !important; } html.theme-very-strong-witch #pc-fab-btn:hover { box-shadow: 0 12px 40px rgba(124, 58, 237, 0.6) !important; } html.theme-very-strong-witch .badge-fab-dot { border: 2px solid #160a2a !important; } /* Clove Dark Theme */ html.theme-clove-dark #pc-fab-menu { font-family: 'Quicksand', sans-serif !important; background: rgba(30, 20, 40, 0.92) !important; border: 1px solid rgba(255, 179, 217, 0.25) !important; } html.theme-clove-dark .pc-fab-option { color: #fce7f3 !important; } html.theme-clove-dark .pc-fab-option:hover { background: rgba(255, 179, 217, 0.1) !important; color: #db2777 !important; } html.theme-clove-dark #pc-fab-btn { background: linear-gradient(135deg, #db2777 0%, #7c3aed 100%) !important; border: 1px solid rgba(255, 179, 217, 0.3) !important; } html.theme-clove-dark .badge-fab-dot { border: 2px solid #1e1428 !important; } /* Clove Light Theme */ html.theme-clove-light #pc-fab-menu { font-family: 'Quicksand', sans-serif !important; background: rgba(255, 255, 255, 0.95) !important; border: 1px solid rgba(255, 179, 217, 0.3) !important; box-shadow: 0 20px 50px rgba(255, 179, 217, 0.08) !important; } html.theme-clove-light .pc-fab-option { color: #5b4660 !important; } html.theme-clove-light .pc-fab-option:hover { background: rgba(255, 179, 217, 0.08) !important; color: #db2777 !important; } html.theme-clove-light #pc-fab-btn { background: linear-gradient(135deg, #ffb3d9 0%, #d8b4fe 100%) !important; border: 1px solid rgba(255, 255, 255, 0.6) !important; color: #5b4660 !important; } html.theme-clove-light .badge-fab-dot { border: 2px solid #ffffff !important; } /* ================== GLOBAL TAG MODAL SPECIFIC THEME OVERRIDES ================== */ html.theme-liquid-glass-white #globalTagModal > div { background: rgba(255, 255, 255, 0.95) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1) !important; } html.theme-liquid-glass-white #globalTagModal h4, html.theme-liquid-glass-white #globalTagModal label { color: #0f172a !important; } html.theme-liquid-glass-white #globalTagModal textarea { background: rgba(0, 0, 0, 0.03) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; color: #0f172a !important; } html.theme-liquid-glass-white #globalTagModal textarea::placeholder { color: rgba(15, 23, 42, 0.4) !important; } html.theme-absolute #globalTagModal > div { background: #000000 !important; border: 1px solid #2f3336 !important; box-shadow: 0 20px 50px rgba(255, 255, 255, 0.03) !important; } html.theme-pixel #globalTagModal > div { font-family: 'VT323', monospace !important; border-radius: 0px !important; background: #110d24 !important; border: 3px solid #ff00ff !important; box-shadow: 5px 5px 0px #00ffff !important; } html.theme-pixel #globalTagModal h4, html.theme-pixel #globalTagModal label { color: #00ff00 !important; } html.theme-pixel #globalTagModal textarea { border-radius: 0px !important; background: #000000 !important; border: 2px solid #ff00ff !important; color: #00ff00 !important; } html.theme-pixel #globalTagModal #btn-global-tag-postar { border-radius: 0px !important; background: #00ffff !important; color: #000000 !important; border: 2px solid #000000 !important; box-shadow: 3px 3px 0px #ff00ff !important; } html.theme-very-strong-witch #globalTagModal > div { font-family: 'Cormorant Garamond', serif !important; background: rgba(22, 10, 42, 0.95) !important; border: 1px solid rgba(229, 193, 88, 0.35) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important; } html.theme-very-strong-witch #globalTagModal h4, html.theme-very-strong-witch #globalTagModal label { color: #e2d7f5 !important; } html.theme-very-strong-witch #globalTagModal textarea { background: rgba(0, 0, 0, 0.2) !important; border: 1px solid rgba(229, 193, 88, 0.2) !important; color: #e2d7f5 !important; } html.theme-very-strong-witch #globalTagModal #btn-global-tag-postar { background: linear-gradient(135deg, #4c1d95 0%, #064e3b 100%) !important; border: 1px solid #e5c158 !important; color: #ffffff !important; } html.theme-clove-dark #globalTagModal > div { font-family: 'Quicksand', sans-serif !important; background: rgba(30, 20, 40, 0.95) !important; border: 1px solid rgba(255, 179, 217, 0.3) !important; } html.theme-clove-dark #globalTagModal h4, html.theme-clove-dark #globalTagModal label { color: #fce7f3 !important; } html.theme-clove-dark #globalTagModal textarea { background: rgba(0, 0, 0, 0.15) !important; border: 1px solid rgba(255, 179, 217, 0.2) !important; color: #fce7f3 !important; } html.theme-clove-light #globalTagModal > div { font-family: 'Quicksand', sans-serif !important; background: rgba(255, 255, 255, 0.95) !important; border: 1px solid rgba(255, 179, 217, 0.3) !important; box-shadow: 0 20px 50px rgba(255, 179, 217, 0.1) !important; } html.theme-clove-light #globalTagModal h4, html.theme-clove-light #globalTagModal label { color: #5b4660 !important; } html.theme-clove-light #globalTagModal textarea { background: rgba(0, 0, 0, 0.03) !important; border: 1px solid rgba(255, 179, 217, 0.2) !important; color: #5b4660 !important; } html.theme-clove-light #btn-global-tag-postar { background: linear-gradient(135deg, #ffb3d9 0%, #d8b4fe 100%) !important; border: 1px solid rgba(255, 255, 255, 0.6) !important; color: #5b4660 !important; } /* ========================================================================== 8. WINDOWS XP (LUNA BLUE / NOSTALGIA 2001) ========================================================================== */ html.theme-windows-xp * { font-family: 'Tahoma', 'Segoe UI', system-ui, sans-serif !important; } html.theme-windows-xp .material-icons, html.theme-windows-xp .material-icons-outlined, html.theme-windows-xp .material-icons-round, html.theme-windows-xp .material-icons-sharp, html.theme-windows-xp [class*="material-icons"] { font-family: 'Material Icons' !important; } html.theme-windows-xp body { background-color: #5a8ae6 !important; background-image: linear-gradient(to bottom, #3a72df 0%, #7aa1e5 45%, #5da15c 70%, #347627 100%) !important; background-attachment: fixed !important; color: #000000 !important; } /* Adapt background container */ html.theme-windows-xp .liquid-bg-container { background-color: transparent !important; background-image: linear-gradient(to bottom, #3a72df 0%, #7aa1e5 45%, #5da15c 70%, #347627 100%) !important; background-attachment: fixed !important; } html.theme-windows-xp .liquid-blob { display: none !important; } /* XP Taskbar (Navbar) */ html.theme-windows-xp .navbar-glass { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.theme-windows-xp .navbar-inner { background: linear-gradient(to bottom, #245edb 0%, #397af2 10%, #245edb 50%, #0838b2 100%) !important; border: 1px solid #002e99 !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important; border-radius: 0px 0px 8px 8px !important; height: 60px !important; } html.theme-windows-xp .navbar-inner a, html.theme-windows-xp .navbar-inner span, html.theme-windows-xp .navbar-inner p { color: #ffffff !important; text-shadow: 1px 1px 1px rgba(0,0,0,0.6) !important; } /* XP Start button aesthetic for logo link */ html.theme-windows-xp .navbar-inner a:has(img) { background: linear-gradient(to bottom, #4fa34f 0%, #3c813c 15%, #2a632a 85%, #1d4b1d 100%) !important; border: 1px solid #1c521c !important; border-radius: 0 15px 15px 0 !important; box-shadow: inset 1px 1px 2px #98e698, 2px 2px 4px rgba(0,0,0,0.3) !important; padding: 2px 16px 2px 10px !important; } html.theme-windows-xp .navbar-inner a:hover { background: rgba(255, 255, 255, 0.15) !important; border-radius: 4px !important; } /* Cards styled as active XP Windows */ html.theme-windows-xp .card, html.theme-windows-xp .glass-sidebar, html.theme-windows-xp .jumbotron, html.theme-windows-xp .modal-content, html.theme-windows-xp .terms-box, html.theme-windows-xp .tags_post, html.theme-windows-xp #chat_welcome_panel { background: #f0f0ea !important; /* Silver/Light Gray */ border: 3px solid #0054e2 !important; /* Blue border */ border-radius: 8px 8px 4px 4px !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important; padding: 16px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: #000000 !important; } /* Add window title bar look to card titles */ html.theme-windows-xp .card h4, html.theme-windows-xp .card h5, html.theme-windows-xp .glass-sidebar h3, html.theme-windows-xp .modal-content h5, html.theme-windows-xp #chat_welcome_panel h2 { background: linear-gradient(to right, #0058e6 0%, #3a8df5 50%, #0058e6 100%) !important; color: #ffffff !important; padding: 8px 12px !important; margin: -16px -16px 16px -16px !important; font-family: 'Tahoma', sans-serif !important; font-weight: bold !important; font-size: 0.95rem !important; border-bottom: 2px solid #003c74 !important; border-top-left-radius: 5px !important; border-top-right-radius: 5px !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.6) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,0.3) !important; display: flex; justify-content: space-between; align-items: center; } /* XP Window decoration simulation on hover */ html.theme-windows-xp .card:hover, html.theme-windows-xp .tags_post:hover { border-color: #245edb !important; transform: none !important; } /* Texts and Titles */ html.theme-windows-xp p, html.theme-windows-xp span, html.theme-windows-xp div, html.theme-windows-xp li, html.theme-windows-xp td, html.theme-windows-xp th, html.theme-windows-xp label, html.theme-windows-xp small { color: #000000 !important; } html.theme-windows-xp strong { color: #000000 !important; font-weight: bold !important; } html.theme-windows-xp .text-white, html.theme-windows-xp .font-bold.text-white, html.theme-windows-xp .text-white\/90, html.theme-windows-xp .text-white\/85, html.theme-windows-xp .text-white\/80, html.theme-windows-xp .text-white\/70, html.theme-windows-xp .text-white\/60, html.theme-windows-xp .text-white\/50, html.theme-windows-xp .text-white\/45, html.theme-windows-xp .text-white\/40, html.theme-windows-xp .text-white\/30, html.theme-windows-xp .sidebar-username, html.theme-windows-xp .sidebar-bio { color: #333333 !important; } /* Forms and Controls */ html.theme-windows-xp .form-control { background: #ffffff !important; border: 2px solid #7f9db9 !important; /* Classical XP input border */ border-radius: 0px !important; color: #000000 !important; padding: 6px 10px !important; box-shadow: none !important; } html.theme-windows-xp .form-control:focus { border-color: #3a72df !important; outline: none !important; } html.theme-windows-xp .form-control::placeholder { color: #7f7f7f !important; } /* Classic XP Buttons (Luna Blue style) */ html.theme-windows-xp .btn, html.theme-windows-xp .btn-custom, html.theme-windows-xp .btn-secondary, html.theme-windows-xp #btn_tag, html.theme-windows-xp #btn-onboarding-finish { background: linear-gradient(to bottom, #ffffff 0%, #e1dfd3 100%) !important; color: #000000 !important; border: 1px solid #003c74 !important; border-radius: 3px !important; box-shadow: inset -1px -1px 2px rgba(0,0,0,0.1), inset 1px 1px 1px #ffffff !important; padding: 6px 16px !important; font-weight: bold !important; transition: none !important; transform: none !important; } html.theme-windows-xp .btn:hover, html.theme-windows-xp .btn-custom:hover, html.theme-windows-xp .btn-secondary:hover { background: linear-gradient(to bottom, #f5f4ec 0%, #dcdad0 100%) !important; border-color: #003c74 !important; box-shadow: inset -1px -1px 2px rgba(0,0,0,0.15), inset 1px 1px 1px #ffffff, 0 0 2px #ff9c00 !important; } /* XP Shutdown style for logout/danger buttons */ html.theme-windows-xp .glass-nav-btn-danger, html.theme-windows-xp .btn-danger { background: linear-gradient(to bottom, #f37d57 0%, #e04314 100%) !important; color: #ffffff !important; border: 1px solid #7c1a00 !important; border-radius: 3px !important; text-shadow: 1px 1px 1px rgba(0,0,0,0.4) !important; } html.theme-windows-xp .glass-nav-btn-danger:hover, html.theme-windows-xp .btn-danger:hover { background: linear-gradient(to bottom, #fb9a7b 0%, #ef5c33 100%) !important; } /* Sidebar navigation */ html.theme-windows-xp .glass-nav-btn { color: #0054e2 !important; font-weight: bold !important; border-radius: 0px !important; border-bottom: 1px solid #dcdcdc !important; } html.theme-windows-xp .glass-nav-btn:hover { background: #e6eefc !important; color: #003099 !important; } html.theme-windows-xp .glass-nav-btn-highlight { background: transparent !important; border: none !important; } /* Links */ html.theme-windows-xp a { color: #0054e2 !important; text-decoration: underline !important; } html.theme-windows-xp a:hover { color: #003099 !important; } html.theme-windows-xp .navbar-inner a { text-decoration: none !important; } /* Post Styling adjustments */ html.theme-windows-xp .tags_post { margin-bottom: 16px !important; } html.theme-windows-xp .tags_post .flex-1.min-w-0 p { color: #000000 !important; } html.theme-windows-xp .post-action-bar { border-top: 1px solid #dcdcdc !important; } html.theme-windows-xp .post-action-btn { color: #0054e2 !important; } html.theme-windows-xp .post-action-btn:hover { color: #003099 !important; background: #e6eefc !important; border-radius: 4px !important; } /* Divider line */ html.theme-windows-xp hr { border-color: #dcdcdc !important; } /* Mobile adjustments */ html.theme-windows-xp .mobile-bottom-nav { background: linear-gradient(to bottom, #245edb 0%, #397af2 20%, #245edb 50%, #0838b2 100%) !important; border-top: 1px solid #002e99 !important; } html.theme-windows-xp .mobile-nav-lnk { color: rgba(255, 255, 255, 0.7) !important; } html.theme-windows-xp .mobile-nav-lnk.active { color: #ffffff !important; font-weight: bold !important; } html.theme-windows-xp .mobile-nav-btn-add { background: linear-gradient(to bottom, #4fa34f 0%, #3c813c 100%) !important; border: 1px solid #1c521c !important; } /* Badge unread */ html.theme-windows-xp .badge-unread { background-color: #ff9c00 !important; color: #ffffff !important; border: 1px solid #c27600 !important; font-weight: bold !important; } /* Floating themes panel custom styling inside XP */ html.theme-windows-xp #theme-switcher-btn { background: linear-gradient(to bottom, #245edb 0%, #397af2 10%, #245edb 50%, #0838b2 100%) !important; border: 1px solid #002e99 !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important; } html.theme-windows-xp #theme-switcher-btn:hover { background: linear-gradient(to bottom, #397af2 0%, #518ff5 10%, #397af2 50%, #0c43ca 100%) !important; transform: scale(1.1) !important; } html.theme-windows-xp #theme-switcher-panel { background: #f0f0ea !important; border: 3px solid #0054e2 !important; border-radius: 8px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; } html.theme-windows-xp .theme-name { color: #000000 !important; } html.theme-windows-xp .theme-option:hover { background: #e6eefc !important; } html.theme-windows-xp .theme-option.active { background: #cbdcf8 !important; border-color: #0054e2 !important; } /* Dot Previews styling for dropdown and onboarding */ .preview-windows-xp { background: linear-gradient(135deg, #245edb 0%, #7ca6e8 50%, #3c813c 100%) !important; border: 1.5px solid #003c74 !important; } /* Global modal XP override */ html.theme-windows-xp #globalTagModal > div { background: #f0f0ea !important; border: 3px solid #0054e2 !important; box-shadow: 0 15px 40px rgba(0,0,0,0.5) !important; border-radius: 8px !important; } html.theme-windows-xp #globalTagModal h4, html.theme-windows-xp #globalTagModal label { color: #000000 !important; } html.theme-windows-xp #globalTagModal textarea { background: #ffffff !important; border: 2px solid #7f9db9 !important; color: #000000 !important; border-radius: 0px !important; } html.theme-windows-xp #globalTagModal #btn-global-tag-postar { background: linear-gradient(to bottom, #ffffff 0%, #e1dfd3 100%) !important; color: #000000 !important; border: 1px solid #003c74 !important; } /* PC-only FAB */ html.theme-windows-xp #pc-fab-btn { background: linear-gradient(to bottom, #4fa34f 0%, #3c813c 100%) !important; border: 1px solid #1c521c !important; box-shadow: 0 6px 15px rgba(0,0,0,0.3) !important; } html.theme-windows-xp #pc-fab-menu { background: #f0f0ea !important; border: 3px solid #0054e2 !important; border-radius: 8px !important; } html.theme-windows-xp .pc-fab-option { color: #0054e2 !important; } html.theme-windows-xp .pc-fab-option:hover { background: #e6eefc !important; color: #003099 !important; } /* ========================================================================== 9. WINDOWS 98 (CLASSIC GRAY 3D / TEAL DESKTOP) ========================================================================== */ html.theme-windows-98 * { font-family: 'Tahoma', 'MS Sans Serif', system-ui, monospace !important; border-radius: 0px !important; /* Totalmente retangular */ text-shadow: none !important; box-shadow: none !important; } html.theme-windows-98 .material-icons, html.theme-windows-98 .material-icons-outlined, html.theme-windows-98 .material-icons-round, html.theme-windows-98 .material-icons-sharp, html.theme-windows-98 [class*="material-icons"] { font-family: 'Material Icons' !important; } html.theme-windows-98 body { background-color: #008080 !important; /* Classic Teal */ background-image: none !important; color: #000000 !important; } /* Adapt background container */ html.theme-windows-98 .liquid-bg-container { background-color: #008080 !important; background-image: none !important; } html.theme-windows-98 .liquid-blob { display: none !important; } /* 98 Taskbar (Navbar) */ html.theme-windows-98 .navbar-glass { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.theme-windows-98 .navbar-inner { background: #c0c0c0 !important; border-top: 2px solid #ffffff !important; border-left: 2px solid #ffffff !important; border-right: 2px solid #808080 !important; border-bottom: 2px solid #808080 !important; height: 48px !important; border-radius: 0px !important; } html.theme-windows-98 .navbar-inner a, html.theme-windows-98 .navbar-inner span, html.theme-windows-98 .navbar-inner p { color: #000000 !important; font-weight: bold !important; } /* 98 Start button style for logo link */ html.theme-windows-98 .navbar-inner a:has(img) { background: #c0c0c0 !important; border-top: 2px solid #ffffff !important; border-left: 2px solid #ffffff !important; border-right: 2px solid #808080 !important; border-bottom: 2px solid #808080 !important; padding: 2px 10px !important; margin-right: 12px !important; } html.theme-windows-98 .navbar-inner a:has(img):active { border-top: 2px solid #808080 !important; border-left: 2px solid #808080 !important; border-right: 2px solid #ffffff !important; border-bottom: 2px solid #ffffff !important; } html.theme-windows-98 .navbar-inner a:hover { background: #dcdcdc !important; } /* Cards styled as active Active 98 Windows */ html.theme-windows-98 .card, html.theme-windows-98 .glass-sidebar, html.theme-windows-98 .jumbotron, html.theme-windows-98 .modal-content, html.theme-windows-98 .terms-box, html.theme-windows-98 .tags_post, html.theme-windows-98 #chat_welcome_panel { background: #c0c0c0 !important; /* Solid light gray */ border-top: 2px solid #ffffff !important; border-left: 2px solid #ffffff !important; border-right: 2px solid #808080 !important; border-bottom: 2px solid #808080 !important; padding: 12px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: #000000 !important; border-radius: 0px !important; } /* Add active Navy Blue title bar look to card titles */ html.theme-windows-98 .card h4, html.theme-windows-98 .card h5, html.theme-windows-98 .glass-sidebar h3, html.theme-windows-98 .modal-content h5, html.theme-windows-98 #chat_welcome_panel h2 { background: #000080 !important; /* Active active window navy blue */ color: #ffffff !important; padding: 4px 8px !important; margin: -12px -12px 12px -12px !important; font-family: 'Tahoma', sans-serif !important; font-weight: bold !important; font-size: 0.85rem !important; border-bottom: none !important; border-radius: 0px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; } html.theme-windows-98 .card h4::after, html.theme-windows-98 .card h5::after, html.theme-windows-98 .glass-sidebar h3::after, html.theme-windows-98 .modal-content h5::after, html.theme-windows-98 #chat_welcome_panel h2::after { content: '✕' !important; display: inline-flex !important; width: 16px !important; height: 14px !important; background: #c0c0c0 !important; color: #000000 !important; border-top: 1.5px solid #ffffff !important; border-left: 1.5px solid #ffffff !important; border-right: 1.5px solid #808080 !important; border-bottom: 1.5px solid #808080 !important; font-size: 8px !important; font-weight: bold !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; border-radius: 0px !important; } /* 98 Window decoration simulation on hover */ html.theme-windows-98 .card:hover, html.theme-windows-98 .tags_post:hover { transform: none !important; } /* Texts and Titles */ html.theme-windows-98 p, html.theme-windows-98 span, html.theme-windows-98 div, html.theme-windows-98 li, html.theme-windows-98 td, html.theme-windows-98 th, html.theme-windows-98 label, html.theme-windows-98 small { color: #000000 !important; } html.theme-windows-98 strong { color: #000000 !important; font-weight: bold !important; } html.theme-windows-98 .text-white, html.theme-windows-98 .font-bold.text-white, html.theme-windows-98 .text-white\/90, html.theme-windows-98 .text-white\/85, html.theme-windows-98 .text-white\/80, html.theme-windows-98 .text-white\/70, html.theme-windows-98 .text-white\/60, html.theme-windows-98 .text-white\/50, html.theme-windows-98 .text-white\/45, html.theme-windows-98 .text-white\/40, html.theme-windows-98 .text-white\/30, html.theme-windows-98 .sidebar-username, html.theme-windows-98 .sidebar-bio { color: #000000 !important; } /* 3D Inset white textareas and inputs */ html.theme-windows-98 .form-control, html.theme-windows-98 textarea { background: #ffffff !important; border-top: 2px solid #808080 !important; border-left: 2px solid #808080 !important; border-right: 2px solid #ffffff !important; border-bottom: 2px solid #ffffff !important; border-radius: 0px !important; color: #000000 !important; padding: 4px 6px !important; } html.theme-windows-98 .form-control:focus { outline: none !important; } html.theme-windows-98 .form-control::placeholder { color: #808080 !important; } /* Classic 98 Buttons (Gray 3D style) */ html.theme-windows-98 .btn, html.theme-windows-98 .btn-custom, html.theme-windows-98 .btn-secondary, html.theme-windows-98 #btn_tag, html.theme-windows-98 #btn-onboarding-finish { background: #c0c0c0 !important; color: #000000 !important; border-top: 2px solid #ffffff !important; border-left: 2px solid #ffffff !important; border-right: 2px solid #808080 !important; border-bottom: 2px solid #808080 !important; border-radius: 0px !important; padding: 4px 14px !important; font-weight: bold !important; transition: none !important; transform: none !important; } html.theme-windows-98 .btn:hover, html.theme-windows-98 .btn-custom:hover, html.theme-windows-98 .btn-secondary:hover { background: #c0c0c0 !important; } html.theme-windows-98 .btn:active, html.theme-windows-98 .btn-custom:active, html.theme-windows-98 .btn-secondary:active, html.theme-windows-98 #btn_tag:active, html.theme-windows-98 #btn-onboarding-finish:active { border-top: 2px solid #808080 !important; border-left: 2px solid #808080 !important; border-right: 2px solid #ffffff !important; border-bottom: 2px solid #ffffff !important; } /* Sidebar navigation */ html.theme-windows-98 .glass-nav-btn { color: #000000 !important; font-weight: bold !important; border-radius: 0px !important; border-bottom: 1.5px solid #808080 !important; background: #c0c0c0 !important; border-top: 1px solid #ffffff !important; } html.theme-windows-98 .glass-nav-btn:hover { background: #dcdcdc !important; } html.theme-windows-98 .glass-nav-btn-highlight { background: transparent !important; border: none !important; } /* Links */ html.theme-windows-98 a { color: #000080 !important; text-decoration: underline !important; } html.theme-windows-98 a:hover { color: #0000ff !important; } html.theme-windows-98 .navbar-inner a { text-decoration: none !important; } /* Post Styling adjustments */ html.theme-windows-98 .tags_post { margin-bottom: 16px !important; } html.theme-windows-98 .tags_post .flex-1.min-w-0 p { color: #000000 !important; } html.theme-windows-98 .post-action-bar { border-top: 1.5px solid #808080 !important; } html.theme-windows-98 .post-action-btn { color: #000080 !important; } html.theme-windows-98 .post-action-btn:hover { color: #0000ff !important; background: #dcdcdc !important; } /* Divider line */ html.theme-windows-98 hr { border-color: #808080 !important; } /* Mobile adjustments */ html.theme-windows-98 .mobile-bottom-nav { background: #c0c0c0 !important; border-top: 2px solid #ffffff !important; } html.theme-windows-98 .mobile-nav-lnk { color: #808080 !important; } html.theme-windows-98 .mobile-nav-lnk.active { color: #000000 !important; font-weight: bold !important; } html.theme-windows-98 .mobile-nav-btn-add { background: #c0c0c0 !important; border-top: 2px solid #ffffff !important; border-left: 2px solid #ffffff !important; border-right: 2px solid #808080 !important; border-bottom: 2px solid #808080 !important; } /* Badge unread */ html.theme-windows-98 .badge-unread { background-color: #000080 !important; color: #ffffff !important; border: 1px solid #000000 !important; font-weight: bold !important; } /* Floating themes panel custom styling inside 98 */ html.theme-windows-98 #theme-switcher-panel { background: #c0c0c0 !important; border-top: 2px solid #ffffff !important; border-left: 2px solid #ffffff !important; border-right: 2px solid #808080 !important; border-bottom: 2px solid #808080 !important; border-radius: 0px !important; } html.theme-windows-98 .theme-name { color: #000000 !important; } html.theme-windows-98 .theme-option:hover { background: #dcdcdc !important; } html.theme-windows-98 .theme-option.active { background: #dcdcdc !important; border-top: 2px solid #808080 !important; border-left: 2px solid #808080 !important; border-right: 2px solid #ffffff !important; border-bottom: 2px solid #ffffff !important; } /* Dot Previews styling for dropdown and onboarding */ .preview-windows-98 { background: #c0c0c0 !important; border-top: 2px solid #ffffff !important; border-left: 2px solid #ffffff !important; border-right: 2px solid #808080 !important; border-bottom: 2px solid #808080 !important; border-radius: 0px !important; } /* Global modal 98 override */ html.theme-windows-98 #globalTagModal > div { background: #c0c0c0 !important; border-top: 2px solid #ffffff !important; border-left: 2px solid #ffffff !important; border-right: 2px solid #808080 !important; border-bottom: 2px solid #808080 !important; border-radius: 0px !important; } html.theme-windows-98 #globalTagModal h4, html.theme-windows-98 #globalTagModal label { color: #000000 !important; } html.theme-windows-98 #globalTagModal textarea { background: #ffffff !important; border-top: 2px solid #808080 !important; border-left: 2px solid #808080 !important; border-right: 2px solid #ffffff !important; border-bottom: 2px solid #ffffff !important; } html.theme-windows-98 #globalTagModal #btn-global-tag-postar { background: #c0c0c0 !important; color: #000000 !important; border-top: 2px solid #ffffff !important; border-left: 2px solid #ffffff !important; border-right: 2px solid #808080 !important; border-bottom: 2px solid #808080 !important; } /* PC-only FAB */ html.theme-windows-98 #pc-fab-btn { background: #c0c0c0 !important; color: #000000 !important; border-top: 2px solid #ffffff !important; border-left: 2px solid #ffffff !important; border-right: 2px solid #808080 !important; border-bottom: 2px solid #808080 !important; border-radius: 0px !important; } html.theme-windows-98 #pc-fab-btn:active { border-top: 2px solid #808080 !important; border-left: 2px solid #808080 !important; border-right: 2px solid #ffffff !important; border-bottom: 2px solid #ffffff !important; } html.theme-windows-98 #pc-fab-menu { background: #c0c0c0 !important; border-top: 2px solid #ffffff !important; border-left: 2px solid #ffffff !important; border-right: 2px solid #808080 !important; border-bottom: 2px solid #808080 !important; border-radius: 0px !important; } html.theme-windows-98 .pc-fab-option { color: #000000 !important; } html.theme-windows-98 .pc-fab-option:hover { background: #dcdcdc !important; } /* Floating themes switcher button inside 98 */ html.theme-windows-98 #theme-switcher-btn { border-radius: 0px !important; background: #c0c0c0 !important; color: #000000 !important; border-top: 2px solid #ffffff !important; border-left: 2px solid #ffffff !important; border-right: 2px solid #808080 !important; border-bottom: 2px solid #808080 !important; box-shadow: none !important; } html.theme-windows-98 #theme-switcher-btn:active { border-top: 2px solid #808080 !important; border-left: 2px solid #808080 !important; border-right: 2px solid #ffffff !important; border-bottom: 2px solid #ffffff !important; } /* ========================================================================== 10. GATINHOS KAWAII (PASTEL PINK & PEACH / PATINHAS / FOFO) ========================================================================== */ html.theme-kittens * { font-family: 'Quicksand', 'Nunito', sans-serif !important; } html.theme-kittens .material-icons, html.theme-kittens .material-icons-outlined, html.theme-kittens .material-icons-round, html.theme-kittens .material-icons-sharp, html.theme-kittens [class*="material-icons"] { font-family: 'Material Icons' !important; } html.theme-kittens body { background-color: #fff5f8 !important; background-image: radial-gradient(circle at 20% 30%, rgba(255, 182, 193, 0.2) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(255, 218, 185, 0.25) 0%, transparent 50%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M12 24 C14 20, 18 20, 20 24 C22 20, 26 20, 28 24 C26 28, 14 28, 12 24 Z' fill='%23ffb6c1' fill-opacity='0.08'/%3E%3Ccircle cx='45' cy='45' r='2' fill='%23ffdab9' fill-opacity='0.15'/%3E%3C/svg%3E") !important; background-attachment: fixed !important; color: #5d3f50 !important; } html.theme-kittens .liquid-bg-container { background-color: #fff5f8 !important; background-image: none !important; } html.theme-kittens .liquid-blob { display: none !important; } html.theme-kittens .navbar-inner, html.theme-kittens .glass-sidebar, html.theme-kittens .card, html.theme-kittens .jumbotron, html.theme-kittens .modal-content, html.theme-kittens .terms-box, html.theme-kittens .tags_post, html.theme-kittens #chat_welcome_panel { background: rgba(255, 255, 255, 0.95) !important; border: 2.5px solid #ffb3d9 !important; border-radius: 24px !important; box-shadow: 0 12px 25px rgba(255, 179, 217, 0.12) !important; color: #5d3f50 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.theme-kittens .card h4, html.theme-kittens .card h5, html.theme-kittens .glass-sidebar h3, html.theme-kittens .modal-content h5, html.theme-kittens #chat_welcome_panel h2 { color: #d25a90 !important; font-weight: 700 !important; display: flex; align-items: center; gap: 6px; border-bottom: none !important; background: transparent !important; margin: 0 0 12px 0 !important; padding: 0 !important; box-shadow: none !important; text-shadow: none !important; } html.theme-kittens .card h4::before, html.theme-kittens .glass-sidebar h3::before, html.theme-kittens #chat_welcome_panel h2::before { content: "🐱 " !important; } html.theme-kittens p, html.theme-kittens span, html.theme-kittens div, html.theme-kittens li, html.theme-kittens td, html.theme-kittens th, html.theme-kittens label, html.theme-kittens small { color: #7d5b6f !important; } html.theme-kittens strong { color: #5d3f50 !important; font-weight: bold !important; } html.theme-kittens .text-white, html.theme-kittens .font-bold.text-white, html.theme-kittens .text-white\/90, html.theme-kittens .text-white\/85, html.theme-kittens .text-white\/80, html.theme-kittens .text-white\/70, html.theme-kittens .text-white\/60, html.theme-kittens .text-white\/50, html.theme-kittens .text-white\/45, html.theme-kittens .text-white\/40, html.theme-kittens .text-white\/30, html.theme-kittens .sidebar-username, html.theme-kittens .sidebar-bio { color: #8c6a7e !important; } html.theme-kittens .navbar-inner a, html.theme-kittens .navbar-inner span, html.theme-kittens .navbar-inner p { color: #d25a90 !important; } html.theme-kittens .navbar-inner a:hover { background: #ffe6f2 !important; border-radius: 12px !important; } html.theme-kittens .form-control { background: #fffcfd !important; border: 2px solid #ffccd5 !important; border-radius: 16px !important; color: #5d3f50 !important; } html.theme-kittens .form-control:focus { border-color: #ffb3d9 !important; background: #ffffff !important; box-shadow: 0 0 8px rgba(255, 179, 217, 0.25) !important; } html.theme-kittens .btn, html.theme-kittens .btn-custom, html.theme-kittens .btn-secondary, html.theme-kittens #btn_tag, html.theme-kittens #btn-onboarding-finish { background: linear-gradient(to bottom, #ffc0cb 0%, #ffb3d9 100%) !important; color: #ffffff !important; border: none !important; border-radius: 99px !important; font-weight: bold !important; box-shadow: 0 4px 10px rgba(255, 179, 217, 0.35) !important; transform: none !important; } html.theme-kittens .btn:hover, html.theme-kittens .btn-custom:hover, html.theme-kittens .btn-secondary:hover { background: linear-gradient(to bottom, #ffd1dc 0%, #ffc0cb 100%) !important; box-shadow: 0 6px 15px rgba(255, 179, 217, 0.5) !important; } html.theme-kittens a { color: #d25a90 !important; text-decoration: none !important; } html.theme-kittens a:hover { color: #ff85b3 !important; } html.theme-kittens .post-action-bar { border-top: 1.5px solid #ffe6f2 !important; } html.theme-kittens .post-action-btn { color: #ffb3d9 !important; } html.theme-kittens .post-action-btn:hover { color: #d25a90 !important; background: #ffe6f2 !important; border-radius: 12px !important; } html.theme-kittens hr { border-color: #ffe6f2 !important; } html.theme-kittens .mobile-bottom-nav { background: #ffffff !important; border-top: 2px solid #ffb3d9 !important; } html.theme-kittens .mobile-nav-lnk { color: #a08493 !important; } html.theme-kittens .mobile-nav-lnk.active { color: #d25a90 !important; } html.theme-kittens .mobile-nav-btn-add { background: linear-gradient(to bottom, #ffc0cb 0%, #ffb3d9 100%) !important; } html.theme-kittens .badge-unread { background-color: #ff69b4 !important; color: #ffffff !important; } /* Switcher overrides Kittens */ html.theme-kittens #theme-switcher-panel { background: #ffffff !important; border: 2px solid #ffb3d9 !important; border-radius: 20px !important; } html.theme-kittens .theme-name { color: #5d3f50 !important; } html.theme-kittens .theme-option:hover { background: #ffe6f2 !important; } html.theme-kittens .theme-option.active { background: #ffd8ec !important; border-color: #ffb3d9 !important; } /* Global modal Kittens */ html.theme-kittens #globalTagModal > div { background: #ffffff !important; border: 2px solid #ffb3d9 !important; border-radius: 24px !important; } html.theme-kittens #globalTagModal textarea { background: #fffcfd !important; border: 2px solid #ffccd5 !important; border-radius: 16px !important; } html.theme-kittens #globalTagModal h4, html.theme-kittens #globalTagModal label { color: #d25a90 !important; } /* ========================================================================== 11. WINDOWS 7 AERO (GLASSMORPHISM / LIGHT BLUE GLOSS) ========================================================================== */ html.theme-windows-7 * { font-family: 'Segoe UI', 'Tahoma', system-ui, sans-serif !important; } html.theme-windows-7 .material-icons, html.theme-windows-7 .material-icons-outlined, html.theme-windows-7 .material-icons-round, html.theme-windows-7 .material-icons-sharp, html.theme-windows-7 [class*="material-icons"] { font-family: 'Material Icons' !important; } html.theme-windows-7 body { background-color: #1e5ba9 !important; background-image: linear-gradient(215deg, #18417c 0%, #1e5ba9 30%, #308ce3 55%, #76c3ee 75%, #aae4fd 100%) !important; background-attachment: fixed !important; color: #000000 !important; } html.theme-windows-7 .liquid-bg-container { background-color: transparent !important; background-image: linear-gradient(215deg, #18417c 0%, #1e5ba9 30%, #308ce3 55%, #76c3ee 75%, #aae4fd 100%) !important; background-attachment: fixed !important; } html.theme-windows-7 .liquid-blob { display: none !important; } /* Aero Glass Taskbar */ html.theme-windows-7 .navbar-glass { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.theme-windows-7 .navbar-inner { background: rgba(10, 45, 95, 0.3) !important; backdrop-filter: blur(20px) saturate(125%) !important; -webkit-backdrop-filter: blur(20px) saturate(125%) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-top: 1.5px solid rgba(255, 255, 255, 0.45) !important; border-radius: 0 0 10px 10px !important; height: 60px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important; } html.theme-windows-7 .navbar-inner a, html.theme-windows-7 .navbar-inner span, html.theme-windows-7 .navbar-inner p { color: #ffffff !important; text-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 1px 1px 2px rgba(0,0,0,0.5) !important; } html.theme-windows-7 .navbar-inner a:hover { background: rgba(255, 255, 255, 0.15) !important; border-radius: 6px !important; } /* Aero Glass Cards */ html.theme-windows-7 .card, html.theme-windows-7 .glass-sidebar, html.theme-windows-7 .jumbotron, html.theme-windows-7 .modal-content, html.theme-windows-7 .terms-box, html.theme-windows-7 .tags_post, html.theme-windows-7 #chat_welcome_panel { background: rgba(255, 255, 255, 0.55) !important; backdrop-filter: blur(25px) saturate(160%) !important; -webkit-backdrop-filter: blur(25px) saturate(160%) !important; border: 1px solid rgba(255, 255, 255, 0.45) !important; border-top: 1.5px solid rgba(255, 255, 255, 0.65) !important; border-radius: 8px !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important; color: #000000 !important; } /* Glossy Aero Titlebar */ html.theme-windows-7 .card h4, html.theme-windows-7 .card h5, html.theme-windows-7 .glass-sidebar h3, html.theme-windows-7 .modal-content h5, html.theme-windows-7 #chat_welcome_panel h2 { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(210, 235, 255, 0.25) 50%, rgba(170, 215, 250, 0.35) 51%, rgba(220, 240, 255, 0.45) 100%) !important; color: #092a54 !important; padding: 6px 12px !important; margin: -16px -16px 16px -16px !important; font-weight: bold !important; border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 7px 7px 0 0 !important; text-shadow: 0 0 10px rgba(255, 255, 255, 0.8) !important; display: flex; justify-content: space-between; align-items: center; box-shadow: none !important; } html.theme-windows-7 .card h4::after, html.theme-windows-7 .card h5::after, html.theme-windows-7 .glass-sidebar h3::after, html.theme-windows-7 .modal-content h5::after, html.theme-windows-7 #chat_welcome_panel h2::after { content: '✕' !important; display: inline-flex !important; width: 28px !important; height: 16px !important; background: linear-gradient(to bottom, #f3977c, #c92c00) !important; color: #ffffff !important; font-size: 9px !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; border-radius: 3px !important; border: 1px solid #7c1a00 !important; box-shadow: inset 0 1px 1px rgba(255,255,255,0.4) !important; text-shadow: none !important; } html.theme-windows-7 p, html.theme-windows-7 span, html.theme-windows-7 div, html.theme-windows-7 li, html.theme-windows-7 td, html.theme-windows-7 th, html.theme-windows-7 label, html.theme-windows-7 small { color: #1a2c42 !important; } html.theme-windows-7 strong { color: #000000 !important; font-weight: bold !important; } html.theme-windows-7 .text-white, html.theme-windows-7 .font-bold.text-white, html.theme-windows-7 .text-white\/90, html.theme-windows-7 .text-white\/85, html.theme-windows-7 .text-white\/80, html.theme-windows-7 .text-white\/70, html.theme-windows-7 .text-white\/60, html.theme-windows-7 .text-white\/50, html.theme-windows-7 .text-white\/45, html.theme-windows-7 .text-white\/40, html.theme-windows-7 .text-white\/30, html.theme-windows-7 .sidebar-username, html.theme-windows-7 .sidebar-bio { color: #3b4d61 !important; } /* Forms */ html.theme-windows-7 .form-control { background: rgba(255, 255, 255, 0.8) !important; border: 1px solid rgba(9, 42, 84, 0.4) !important; border-radius: 4px !important; color: #000000 !important; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important; } html.theme-windows-7 .form-control:focus { border-color: #308ce3 !important; box-shadow: 0 0 5px rgba(48, 140, 227, 0.5), inset 0 1px 3px rgba(0,0,0,0.1) !important; } /* Windows 7 Glossy Buttons */ html.theme-windows-7 .btn, html.theme-windows-7 .btn-custom, html.theme-windows-7 .btn-secondary, html.theme-windows-7 #btn_tag, html.theme-windows-7 #btn-onboarding-finish { background: linear-gradient(to bottom, #f2f7fc 0%, #dbe7f5 49%, #c3d7f0 50%, #d4e5f7 100%) !important; color: #1a2c42 !important; border: 1px solid #7090b0 !important; border-radius: 3px !important; font-weight: 600 !important; box-shadow: inset 0 1px 1px #ffffff, 0 1px 2px rgba(0,0,0,0.1) !important; transition: all 0.2s ease !important; transform: none !important; } html.theme-windows-7 .btn:hover, html.theme-windows-7 .btn-custom:hover, html.theme-windows-7 .btn-secondary:hover { background: linear-gradient(to bottom, #f7fbfd 0%, #e6f1fb 49%, #cee4f9 50%, #e0effc 100%) !important; border-color: #3c7fb1 !important; box-shadow: inset 0 1px 1px #ffffff, 0 0 5px rgba(48, 140, 227, 0.4) !important; } /* Sidebar navigation */ html.theme-windows-7 .glass-nav-btn { color: #1e5ba9 !important; font-weight: bold !important; border-radius: 4px !important; box-shadow: none !important; } html.theme-windows-7 .glass-nav-btn:hover { background: rgba(255, 255, 255, 0.25) !important; color: #0f376a !important; } html.theme-windows-7 .glass-nav-btn-highlight { background: transparent !important; border: none !important; } html.theme-windows-7 a { color: #1e5ba9 !important; text-decoration: none !important; } html.theme-windows-7 a:hover { text-decoration: underline !important; } html.theme-windows-7 .navbar-inner a { text-decoration: none !important; } html.theme-windows-7 .mobile-bottom-nav { background: rgba(230, 240, 255, 0.9) !important; backdrop-filter: blur(20px) !important; border-top: 1px solid rgba(255, 255, 255, 0.4) !important; box-shadow: none !important; } html.theme-windows-7 .mobile-nav-lnk.active { color: #1e5ba9 !important; font-weight: bold !important; } /* Switcher panel Aero */ html.theme-windows-7 #theme-switcher-panel { background: rgba(255, 255, 255, 0.6) !important; backdrop-filter: blur(25px) saturate(150%) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; border-radius: 8px !important; box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important; } html.theme-windows-7 .theme-name { color: #092a54 !important; } html.theme-windows-7 .theme-option:hover { background: rgba(255, 255, 255, 0.2) !important; } html.theme-windows-7 .theme-option.active { background: rgba(48, 140, 227, 0.2) !important; border-color: rgba(48, 140, 227, 0.4) !important; } /* Global modal Windows 7 */ html.theme-windows-7 #globalTagModal > div { background: rgba(255, 255, 255, 0.7) !important; backdrop-filter: blur(25px) saturate(160%) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; border-radius: 8px !important; box-shadow: 0 15px 40px rgba(0,0,0,0.3) !important; } /* ========================================================================== 12. CYBERPUNK 2077 (NEON YELLOW & PINK / GLITCH / SCI-FI) ========================================================================== */ html.theme-cyberpunk * { font-family: 'Courier New', 'Roboto Mono', system-ui, monospace !important; } html.theme-cyberpunk .material-icons, html.theme-cyberpunk .material-icons-outlined, html.theme-cyberpunk .material-icons-round, html.theme-cyberpunk .material-icons-sharp, html.theme-cyberpunk [class*="material-icons"] { font-family: 'Material Icons' !important; } html.theme-cyberpunk body { background-color: #0c0f12 !important; background-image: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.3) 50%), linear-gradient(90deg, rgba(255, 0, 127, 0.04), rgba(0, 240, 255, 0.02), rgba(254, 231, 21, 0.02)) !important; background-size: 100% 4px, 12px 100% !important; color: #fee715 !important; } html.theme-cyberpunk .liquid-bg-container { background-color: #0c0f12 !important; background-image: none !important; } html.theme-cyberpunk .liquid-blob { display: none !important; } html.theme-cyberpunk .navbar-inner, html.theme-cyberpunk .glass-sidebar, html.theme-cyberpunk .card, html.theme-cyberpunk .jumbotron, html.theme-cyberpunk .modal-content, html.theme-cyberpunk .terms-box, html.theme-cyberpunk .tags_post, html.theme-cyberpunk #chat_welcome_panel { background: #12181f !important; border: 2px solid #fee715 !important; border-radius: 0px !important; box-shadow: 4px 4px 0px #ff007f !important; color: #fee715 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.theme-cyberpunk .card h4, html.theme-cyberpunk .card h5, html.theme-cyberpunk .glass-sidebar h3, html.theme-cyberpunk .modal-content h5, html.theme-cyberpunk #chat_welcome_panel h2 { background: #fee715 !important; color: #0c0f12 !important; font-weight: 900 !important; padding: 6px 12px !important; margin: -12px -12px 12px -12px !important; border-radius: 0px !important; font-size: 0.9rem !important; text-transform: uppercase !important; box-shadow: inset -2px -2px 0px #ff007f !important; text-shadow: none !important; border-bottom: none !important; } html.theme-cyberpunk p, html.theme-cyberpunk span, html.theme-cyberpunk div, html.theme-cyberpunk li, html.theme-cyberpunk label, html.theme-cyberpunk small { color: #00f0ff !important; /* Tech Cyan */ } html.theme-cyberpunk td, html.theme-cyberpunk th { color: #fee715 !important; } html.theme-cyberpunk strong { color: #ffffff !important; text-shadow: 0 0 5px #ff007f !important; } html.theme-cyberpunk .text-white, html.theme-cyberpunk .font-bold.text-white, html.theme-cyberpunk .text-white\/90, html.theme-cyberpunk .text-white\/85, html.theme-cyberpunk .text-white\/80, html.theme-cyberpunk .text-white\/70, html.theme-cyberpunk .text-white\/60, html.theme-cyberpunk .text-white\/50, html.theme-cyberpunk .text-white\/45, html.theme-cyberpunk .text-white\/40, html.theme-cyberpunk .text-white\/30, html.theme-cyberpunk .sidebar-username, html.theme-cyberpunk .sidebar-bio { color: #00f0ff !important; } /* Inputs Cyber */ html.theme-cyberpunk .form-control { background: #080a0d !important; border: 2px solid #00f0ff !important; color: #fee715 !important; border-radius: 0px !important; } html.theme-cyberpunk .form-control:focus { border-color: #ff007f !important; outline: none !important; box-shadow: 0 0 8px rgba(255, 0, 127, 0.4) !important; } /* Glitch style buttons */ html.theme-cyberpunk .btn, html.theme-cyberpunk .btn-custom, html.theme-cyberpunk .btn-secondary, html.theme-cyberpunk #btn_tag, html.theme-cyberpunk #btn-onboarding-finish { background: #ff007f !important; color: #ffffff !important; border: 2px solid #fee715 !important; box-shadow: 3px 3px 0px #00f0ff !important; border-radius: 0px !important; font-weight: 700 !important; text-transform: uppercase !important; transition: all 0.1s ease !important; transform: none !important; } html.theme-cyberpunk .btn:hover, html.theme-cyberpunk .btn-custom:hover, html.theme-cyberpunk .btn-secondary:hover { background: #fee715 !important; color: #0c0f12 !important; border-color: #ff007f !important; box-shadow: -3px -3px 0px #ff007f !important; } html.theme-cyberpunk a { color: #ff007f !important; text-shadow: 0 0 2px rgba(255,0,127,0.3) !important; text-decoration: none !important; } html.theme-cyberpunk a:hover { color: #00f0ff !important; text-shadow: 0 0 5px #00f0ff !important; } html.theme-cyberpunk .navbar-inner a { text-decoration: none !important; } html.theme-cyberpunk .post-action-bar { border-top: 2px solid #ff007f !important; } html.theme-cyberpunk .post-action-btn { color: #00f0ff !important; } html.theme-cyberpunk .post-action-btn:hover { color: #fee715 !important; background: rgba(254, 231, 21, 0.1) !important; } html.theme-cyberpunk hr { border-color: #ff007f !important; } html.theme-cyberpunk .mobile-bottom-nav { background: #12181f !important; border-top: 2px solid #fee715 !important; box-shadow: none !important; } html.theme-cyberpunk .mobile-nav-lnk { color: #fee715 !important; } html.theme-cyberpunk .mobile-nav-lnk.active { color: #ff007f !important; } html.theme-cyberpunk .mobile-nav-btn-add { background: #ff007f !important; border: 1px solid #fee715 !important; } html.theme-cyberpunk .badge-unread { background-color: #ff007f !important; color: #ffffff !important; border: 1px solid #fee715 !important; } /* Switcher cyberpunk */ html.theme-cyberpunk #theme-switcher-panel { background: #12181f !important; border: 2px solid #fee715 !important; box-shadow: 5px 5px 0px #ff007f !important; border-radius: 0px !important; } html.theme-cyberpunk .theme-name { color: #00f0ff !important; } html.theme-cyberpunk .theme-option:hover { background: rgba(0, 240, 255, 0.1) !important; } html.theme-cyberpunk .theme-option.active { background: rgba(255, 0, 127, 0.15) !important; border: 1px dashed #fee715 !important; } /* Global modal Cyberpunk */ html.theme-cyberpunk #globalTagModal > div { background: #12181f !important; border: 2px solid #fee715 !important; box-shadow: 5px 5px 0px #ff007f !important; border-radius: 0px !important; } html.theme-cyberpunk #globalTagModal textarea { background: #080a0d !important; border: 2px solid #00f0ff !important; border-radius: 0px !important; color: #fee715 !important; } html.theme-cyberpunk #globalTagModal h4, html.theme-cyberpunk #globalTagModal label { color: #00f0ff !important; } html.theme-cyberpunk #globalTagModal #btn-global-tag-postar { background: #ff007f !important; color: #ffffff !important; border: 2px solid #fee715 !important; box-shadow: 3px 3px 0px #00f0ff !important; } /* ========================================================================== 13. VAPORWAVE (NEON PINK & TEAL / 80S RETRO-FUTURE GRID) ========================================================================== */ html.theme-vaporwave * { font-family: 'Cinzel', 'Georgia', serif !important; } html.theme-vaporwave .material-icons, html.theme-vaporwave .material-icons-outlined, html.theme-vaporwave .material-icons-round, html.theme-vaporwave .material-icons-sharp, html.theme-vaporwave [class*="material-icons"] { font-family: 'Material Icons' !important; } html.theme-vaporwave body { background-color: #1a0826 !important; background-image: linear-gradient(to bottom, #1a0826 0%, #2c0c4d 60%, #0d0414 100%), linear-gradient(rgba(255, 113, 206, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 113, 206, 0.12) 1px, transparent 1px) !important; background-size: 100% 100%, 40px 40px, 40px 40px !important; background-attachment: fixed !important; color: #01cdfe !important; /* Neon Cyan */ } html.theme-vaporwave .liquid-bg-container { background-color: transparent !important; background-image: none !important; } html.theme-vaporwave .liquid-blob { display: none !important; } html.theme-vaporwave .navbar-inner, html.theme-vaporwave .glass-sidebar, html.theme-vaporwave .card, html.theme-vaporwave .jumbotron, html.theme-vaporwave .modal-content, html.theme-vaporwave .terms-box, html.theme-vaporwave .tags_post, html.theme-vaporwave #chat_welcome_panel { background: rgba(26, 8, 38, 0.75) !important; border: 2px solid #ff71ce !important; /* Neon pink border */ border-top: 2px solid #01cdfe !important; /* Neon cyan top border */ border-radius: 12px !important; box-shadow: 0 10px 25px rgba(255, 113, 206, 0.2), 0 0 10px rgba(1, 205, 254, 0.15) !important; backdrop-filter: blur(12px) saturate(130%) !important; -webkit-backdrop-filter: blur(12px) saturate(130%) !important; color: #ffffff !important; } html.theme-vaporwave .card h4, html.theme-vaporwave .card h5, html.theme-vaporwave .glass-sidebar h3, html.theme-vaporwave .modal-content h5, html.theme-vaporwave #chat_welcome_panel h2 { font-family: 'Cinzel', serif !important; font-weight: 700 !important; color: #ff71ce !important; /* Hot Magenta */ text-shadow: 0 0 6px #ff71ce, 0 0 12px rgba(1, 205, 254, 0.5) !important; display: flex; justify-content: space-between; align-items: center; border-bottom: none !important; background: transparent !important; margin: -16px -16px 16px -16px !important; padding: 6px 12px !important; box-shadow: none !important; } html.theme-vaporwave .card h4::before, html.theme-vaporwave .glass-sidebar h3::before, html.theme-vaporwave #chat_welcome_panel h2::before { content: "🌴 🏛️ " !important; } html.theme-vaporwave .card h4::after, html.theme-vaporwave .glass-sidebar h3::after, html.theme-vaporwave #chat_welcome_panel h2::after { content: " 💾 📼" !important; } html.theme-vaporwave p, html.theme-vaporwave span, html.theme-vaporwave div, html.theme-vaporwave li, html.theme-vaporwave label, html.theme-vaporwave small { color: #e2e8f0 !important; } html.theme-vaporwave td, html.theme-vaporwave th { color: #ffffff !important; } html.theme-vaporwave strong { color: #01cdfe !important; text-shadow: 0 0 5px rgba(1, 205, 254, 0.6) !important; } html.theme-vaporwave .text-white, html.theme-vaporwave .font-bold.text-white, html.theme-vaporwave .text-white\/90, html.theme-vaporwave .text-white\/85, html.theme-vaporwave .text-white\/80, html.theme-vaporwave .text-white\/70, html.theme-vaporwave .text-white\/60, html.theme-vaporwave .text-white\/50, html.theme-vaporwave .text-white\/45, html.theme-vaporwave .text-white\/40, html.theme-vaporwave .text-white\/30, html.theme-vaporwave .sidebar-username, html.theme-vaporwave .sidebar-bio { color: #01cdfe !important; text-shadow: 0 0 4px rgba(1, 205, 254, 0.4) !important; } /* Forms */ html.theme-vaporwave .form-control { background: rgba(13, 4, 20, 0.8) !important; border: 2px solid #05ffa1 !important; /* Neon Green/Teal input border */ color: #ffffff !important; border-radius: 8px !important; } html.theme-vaporwave .form-control:focus { border-color: #ff71ce !important; box-shadow: 0 0 8px rgba(255, 113, 206, 0.5) !important; outline: none !important; } /* Neon Glow Buttons */ html.theme-vaporwave .btn, html.theme-vaporwave .btn-custom, html.theme-vaporwave .btn-secondary, html.theme-vaporwave #btn_tag, html.theme-vaporwave #btn-onboarding-finish { background: linear-gradient(135deg, #ff71ce 0%, #01cdfe 100%) !important; color: #1a0826 !important; border: 2px solid #ffffff !important; font-family: 'Cinzel', serif !important; font-weight: 700 !important; box-shadow: 0 5px 15px rgba(255, 113, 206, 0.4) !important; transform: none !important; border-radius: 99px !important; transition: all 0.2s ease !important; } html.theme-vaporwave .btn:hover, html.theme-vaporwave .btn-custom:hover, html.theme-vaporwave .btn-secondary:hover { box-shadow: 0 8px 25px rgba(1, 205, 254, 0.6) !important; transform: translateY(-2px) !important; } html.theme-vaporwave a { color: #05ffa1 !important; text-decoration: none !important; } html.theme-vaporwave a:hover { color: #01cdfe !important; text-shadow: 0 0 5px rgba(1, 205, 254, 0.5) !important; } html.theme-vaporwave .navbar-inner a { text-decoration: none !important; } html.theme-vaporwave .post-action-bar { border-top: 2px solid rgba(255, 113, 206, 0.3) !important; } html.theme-vaporwave .post-action-btn { color: #ff71ce !important; } html.theme-vaporwave .post-action-btn:hover { color: #01cdfe !important; background: rgba(1, 205, 254, 0.1) !important; } html.theme-vaporwave hr { border-color: rgba(255, 113, 206, 0.3) !important; } html.theme-vaporwave .mobile-bottom-nav { background: #1a0826 !important; border-top: 2px solid #ff71ce !important; box-shadow: none !important; } html.theme-vaporwave .badge-unread { background-color: #ff71ce !important; color: #ffffff !important; border: 1px solid #ffffff !important; } /* Switcher vaporwave */ html.theme-vaporwave #theme-switcher-panel { background: rgba(26, 8, 38, 0.95) !important; border: 2px solid #ff71ce !important; box-shadow: 0 10px 30px rgba(255, 113, 206, 0.3) !important; border-radius: 12px !important; } html.theme-vaporwave .theme-name { color: #ffffff !important; } html.theme-vaporwave .theme-option:hover { background: rgba(255, 113, 206, 0.15) !important; } html.theme-vaporwave .theme-option.active { background: rgba(1, 205, 254, 0.2) !important; border-color: #01cdfe !important; } /* Global modal Vaporwave */ html.theme-vaporwave #globalTagModal > div { background: rgba(26, 8, 38, 0.95) !important; border: 2px solid #ff71ce !important; box-shadow: 0 10px 30px rgba(255, 113, 206, 0.3) !important; border-radius: 12px !important; } html.theme-vaporwave #globalTagModal textarea { background: rgba(13, 4, 20, 0.8) !important; border: 2px solid #05ffa1 !important; color: #ffffff !important; } /* ========================================================================== 14. MANTO DO FLAMENGO (RED & BLACK STRIPES / CRF GOLD ACCENTS) ========================================================================== */ html.theme-flamengo * { font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif !important; } html.theme-flamengo .material-icons, html.theme-flamengo .material-icons-outlined, html.theme-flamengo .material-icons-round, html.theme-flamengo .material-icons-sharp, html.theme-flamengo [class*="material-icons"] { font-family: 'Material Icons' !important; } html.theme-flamengo body { background-color: #0c0c0c !important; background-image: linear-gradient(90deg, #121212 50%, transparent 50%) !important; background-size: 80px 100% !important; color: #ffffff !important; } html.theme-flamengo .liquid-bg-container { background-color: #0c0c0c !important; background-image: none !important; } html.theme-flamengo .liquid-blob { display: none !important; } /* Flamengo taskbar */ html.theme-flamengo .navbar-glass { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.theme-flamengo .navbar-inner { background: #c4122d !important; /* Flamengo Red */ border-bottom: 3px solid #d4af37 !important; /* Gold border */ border-radius: 0px !important; height: 60px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important; } html.theme-flamengo .navbar-inner a, html.theme-flamengo .navbar-inner span, html.theme-flamengo .navbar-inner p { color: #ffffff !important; font-weight: bold !important; } html.theme-flamengo .navbar-inner a:hover { background: rgba(0,0,0,0.2) !important; color: #d4af37 !important; } /* Flamengo Cards */ html.theme-flamengo .card, html.theme-flamengo .glass-sidebar, html.theme-flamengo .jumbotron, html.theme-flamengo .modal-content, html.theme-flamengo .terms-box, html.theme-flamengo .tags_post, html.theme-flamengo #chat_welcome_panel { background: #141414 !important; border: 2px solid #c4122d !important; border-radius: 8px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 6px rgba(212, 175, 55, 0.2) !important; color: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Striped red-black header with Gold Text */ html.theme-flamengo .card h4, html.theme-flamengo .card h5, html.theme-flamengo .glass-sidebar h3, html.theme-flamengo .modal-content h5, html.theme-flamengo #chat_welcome_panel h2 { background: linear-gradient(90deg, #c4122d 0%, #1c1c1c 100%) !important; color: #d4af37 !important; /* Gold Text */ padding: 8px 12px !important; margin: -16px -16px 16px -16px !important; border-radius: 6px 6px 0 0 !important; border-bottom: 2.5px solid #d4af37 !important; font-weight: 900 !important; font-size: 0.95rem !important; text-transform: uppercase !important; display: flex; justify-content: space-between; align-items: center; box-shadow: none !important; } html.theme-flamengo .card h4::before, html.theme-flamengo .glass-sidebar h3::before, html.theme-flamengo #chat_welcome_panel h2::before { content: "★ CRF " !important; color: #d4af37 !important; } html.theme-flamengo p, html.theme-flamengo span, html.theme-flamengo div, html.theme-flamengo li, html.theme-flamengo label, html.theme-flamengo small { color: #e5e5e5 !important; } html.theme-flamengo strong { color: #c4122d !important; } html.theme-flamengo .text-white, html.theme-flamengo .font-bold.text-white, html.theme-flamengo .text-white\/90, html.theme-flamengo .text-white\/85, html.theme-flamengo .text-white\/80, html.theme-flamengo .text-white\/70, html.theme-flamengo .text-white\/60, html.theme-flamengo .text-white\/50, html.theme-flamengo .text-white\/45, html.theme-flamengo .text-white\/40, html.theme-flamengo .text-white\/30, html.theme-flamengo .sidebar-username, html.theme-flamengo .sidebar-bio { color: #d4af37 !important; } /* Forms */ html.theme-flamengo .form-control { background: #1f1f1f !important; border: 2.5px solid #c4122d !important; color: #ffffff !important; } html.theme-flamengo .form-control:focus { border-color: #d4af37 !important; box-shadow: 0 0 8px rgba(212, 175, 55, 0.4) !important; } /* Flamengo Buttons */ html.theme-flamengo .btn, html.theme-flamengo .btn-custom, html.theme-flamengo .btn-secondary, html.theme-flamengo #btn_tag, html.theme-flamengo #btn-onboarding-finish { background: #c4122d !important; color: #ffffff !important; border: 2px solid #d4af37 !important; border-radius: 6px !important; font-weight: bold !important; transition: all 0.2s ease !important; transform: none !important; } html.theme-flamengo .btn:hover, html.theme-flamengo .btn-custom:hover, html.theme-flamengo .btn-secondary:hover { background: #111111 !important; color: #d4af37 !important; border-color: #c4122d !important; } html.theme-flamengo a { color: #c4122d !important; text-decoration: none !important; } html.theme-flamengo a:hover { color: #d4af37 !important; text-decoration: underline !important; } html.theme-flamengo .navbar-inner a { text-decoration: none !important; } html.theme-flamengo .post-action-bar { border-top: 1.5px solid #c4122d !important; } html.theme-flamengo .post-action-btn { color: #ffffff !important; } html.theme-flamengo .post-action-btn:hover { color: #d4af37 !important; background: rgba(196, 18, 45, 0.1) !important; } html.theme-flamengo hr { border-color: #c4122d !important; } html.theme-flamengo .mobile-bottom-nav { background: #141414 !important; border-top: 3px solid #c4122d !important; box-shadow: none !important; } html.theme-flamengo .mobile-nav-lnk { color: #ffffff !important; } html.theme-flamengo .mobile-nav-lnk.active { color: #d4af37 !important; } html.theme-flamengo .badge-unread { background-color: #d4af37 !important; color: #000000 !important; font-weight: bold !important; } /* Switcher flamengo */ html.theme-flamengo #theme-switcher-panel { background: #141414 !important; border: 2px solid #c4122d !important; box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 5px #d4af37 !important; border-radius: 8px !important; } html.theme-flamengo .theme-name { color: #ffffff !important; } html.theme-flamengo .theme-option:hover { background: rgba(196, 18, 45, 0.1) !important; } html.theme-flamengo .theme-option.active { background: rgba(196, 18, 45, 0.25) !important; border-color: #d4af37 !important; } /* Global modal Flamengo */ html.theme-flamengo #globalTagModal > div { background: #141414 !important; border: 2px solid #c4122d !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 6px rgba(212, 175, 55, 0.2) !important; border-radius: 8px !important; } html.theme-flamengo #globalTagModal textarea { background: #1f1f1f !important; border: 2.5px solid #c4122d !important; color: #ffffff !important; } /* ========================================================================== 15. RETRO PLATFORMER / MUNDO DOS BLOCOS (CLASSIC NES 8-BIT) ========================================================================== */ html.theme-retro-platformer * { font-family: 'VT323', monospace !important; font-size: 19px !important; border-radius: 0px !important; box-shadow: none !important; text-shadow: none !important; } html.theme-retro-platformer .material-icons, html.theme-retro-platformer .material-icons-outlined, html.theme-retro-platformer .material-icons-round, html.theme-retro-platformer .material-icons-sharp, html.theme-retro-platformer [class*="material-icons"] { font-family: 'Material Icons' !important; } html.theme-retro-platformer body { background-color: #5c94fc !important; /* Platformer sky blue */ background-image: radial-gradient(#ffffff 18%, transparent 19%), radial-gradient(#ffffff 18%, transparent 19%) !important; background-size: 80px 80px !important; background-position: 0 0, 40px 40px !important; color: #ffffff !important; } html.theme-retro-platformer .liquid-bg-container { background-color: #5c94fc !important; background-image: none !important; } html.theme-retro-platformer .liquid-blob { display: none !important; } /* Pipe design sidebar buttons and Brick blocks */ html.theme-retro-platformer .navbar-inner, html.theme-retro-platformer .glass-sidebar, html.theme-retro-platformer .card, html.theme-retro-platformer .jumbotron, html.theme-retro-platformer .modal-content, html.theme-retro-platformer .terms-box, html.theme-retro-platformer .tags_post, html.theme-retro-platformer #chat_welcome_panel { background: #b83400 !important; /* Brick Red/Brown */ border: 4px solid #000000 !important; box-shadow: 5px 5px 0px #000000 !important; color: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; image-rendering: pixelated !important; } html.theme-retro-platformer .card h4, html.theme-retro-platformer .card h5, html.theme-retro-platformer .glass-sidebar h3, html.theme-retro-platformer .modal-content h5, html.theme-retro-platformer #chat_welcome_panel h2 { background: #fc9838 !important; /* Yellow Block */ color: #000000 !important; font-weight: bold !important; padding: 6px 12px !important; margin: -12px -12px 12px -12px !important; border-bottom: 4px solid #000000 !important; display: flex; justify-content: space-between; align-items: center; font-size: 1.15rem !important; box-shadow: none !important; } html.theme-retro-platformer .card h4::before, html.theme-retro-platformer .glass-sidebar h3::before, html.theme-retro-platformer #chat_welcome_panel h2::before { content: "❓ " !important; } html.theme-retro-platformer p, html.theme-retro-platformer span, html.theme-retro-platformer div, html.theme-retro-platformer li, html.theme-retro-platformer label, html.theme-retro-platformer small { color: #ffffff !important; font-size: 1.15rem !important; } html.theme-retro-platformer strong { color: #fcfc00 !important; /* Coin Gold */ } html.theme-retro-platformer .text-white, html.theme-retro-platformer .font-bold.text-white, html.theme-retro-platformer .text-white\/90, html.theme-retro-platformer .text-white\/85, html.theme-retro-platformer .text-white\/80, html.theme-retro-platformer .text-white\/70, html.theme-retro-platformer .text-white\/60, html.theme-retro-platformer .text-white\/50, html.theme-retro-platformer .text-white\/45, html.theme-retro-platformer .text-white\/40, html.theme-retro-platformer .text-white\/30, html.theme-retro-platformer .sidebar-username, html.theme-retro-platformer .sidebar-bio { color: #fcfc00 !important; } /* Inputs black box style */ html.theme-retro-platformer .form-control { background: #000000 !important; border: 3px solid #ffffff !important; color: #fcfc00 !important; } /* Green Warp Pipes styled links and Gold Coin Buttons */ html.theme-retro-platformer .btn, html.theme-retro-platformer .btn-custom, html.theme-retro-platformer .btn-secondary, html.theme-retro-platformer #btn_tag, html.theme-retro-platformer #btn-onboarding-finish { background: #fcfc00 !important; /* Yellow Block */ color: #000000 !important; border: 3px solid #000000 !important; box-shadow: 3px 3px 0px #000000 !important; font-weight: bold !important; font-size: 1.2rem !important; transition: none !important; transform: none !important; } html.theme-retro-platformer .btn:hover, html.theme-retro-platformer .btn-custom:hover, html.theme-retro-platformer .btn-secondary:hover { background: #f8a400 !important; } html.theme-retro-platformer .btn:active, html.theme-retro-platformer .btn-custom:active, html.theme-retro-platformer .btn-secondary:active { box-shadow: 1px 1px 0px #000000 !important; transform: translate(2px, 2px) !important; } /* Green Pipe Navigation Links */ html.theme-retro-platformer .glass-nav-btn { background: #00a800 !important; /* Pipe Green */ border: 3px solid #000000 !important; color: #ffffff !important; margin-bottom: 8px !important; box-shadow: none !important; } html.theme-retro-platformer .glass-nav-btn:hover { background: #008800 !important; } html.theme-retro-platformer .glass-nav-btn-highlight { background: #00a800 !important; border: 3px solid #000000 !important; } html.theme-retro-platformer a { color: #fcfc00 !important; text-decoration: underline !important; } html.theme-retro-platformer a:hover { color: #fc9838 !important; } html.theme-retro-platformer .navbar-inner a { text-decoration: none !important; } html.theme-retro-platformer .post-action-bar { border-top: 3px solid #000000 !important; } html.theme-retro-platformer .post-action-btn { color: #fcfc00 !important; } html.theme-retro-platformer .post-action-btn:hover { color: #000000 !important; background: #ffffff !important; } html.theme-retro-platformer hr { border-color: #000000 !important; border-width: 3px !important; } html.theme-retro-platformer .mobile-bottom-nav { background: #b83400 !important; border-top: 4px solid #000000 !important; box-shadow: none !important; } html.theme-retro-platformer .mobile-nav-lnk { color: #ffffff !important; } html.theme-retro-platformer .mobile-nav-lnk.active { color: #fcfc00 !important; } html.theme-retro-platformer .badge-unread { background-color: #fc9838 !important; color: #000000 !important; border: 2px solid #000000 !important; } /* Switcher platformer */ html.theme-retro-platformer #theme-switcher-panel { background: #b83400 !important; border: 4px solid #000000 !important; box-shadow: 6px 6px 0px #000000 !important; border-radius: 0px !important; } html.theme-retro-platformer .theme-name { color: #ffffff !important; } html.theme-retro-platformer .theme-option:hover { background: rgba(0, 0, 0, 0.2) !important; } html.theme-retro-platformer .theme-option.active { background: rgba(252, 184, 0, 0.3) !important; border: 2px dashed #fcfc00 !important; } /* Global modal Retro Platformer */ html.theme-retro-platformer #globalTagModal > div { background: #b83400 !important; border: 4px solid #000000 !important; box-shadow: 5px 5px 0px #000000 !important; } html.theme-retro-platformer #globalTagModal textarea { background: #000000 !important; border: 3px solid #ffffff !important; color: #fcfc00 !important; } html.theme-retro-platformer #globalTagModal h4, html.theme-retro-platformer #globalTagModal label { color: #ffffff !important; } html.theme-retro-platformer #globalTagModal #btn-global-tag-postar { background: #fcfc00 !important; color: #000000 !important; border: 3px solid #000000 !important; } /* Custom platformer switcher trigger button */ html.theme-retro-platformer #theme-switcher-btn { border-radius: 0px !important; background: #00a800 !important; /* Green Pipe style */ color: #ffffff !important; border: 3px solid #000000 !important; box-shadow: 4px 4px 0px #000000 !important; } html.theme-retro-platformer #theme-switcher-btn:hover { background: #008800 !important; transform: scale(1.1) !important; } /* Custom platformer PC-only FAB */ html.theme-retro-platformer #pc-fab-btn { border-radius: 0px !important; background: #fcfc00 !important; color: #000000 !important; border: 3px solid #000000 !important; box-shadow: 4px 4px 0px #000000 !important; } html.theme-retro-platformer #pc-fab-menu { background: #b83400 !important; border: 4px solid #000000 !important; box-shadow: 5px 5px 0px #000000 !important; border-radius: 0px !important; } html.theme-retro-platformer .pc-fab-option { color: #ffffff !important; } html.theme-retro-platformer .pc-fab-option:hover { background: rgba(0, 0, 0, 0.2) !important; } /* Custom kittens switcher trigger button */ html.theme-kittens #theme-switcher-btn { background: linear-gradient(to bottom, #ffc0cb 0%, #ffb3d9 100%) !important; border: 2px solid #ffffff !important; box-shadow: 0 6px 15px rgba(255, 179, 217, 0.4) !important; } /* Custom kittens PC-only FAB */ html.theme-kittens #pc-fab-btn { background: linear-gradient(to bottom, #ffc0cb 0%, #ffb3d9 100%) !important; border: 2px solid #ffffff !important; box-shadow: 0 6px 15px rgba(255, 179, 217, 0.4) !important; border-radius: 50% !important; } html.theme-kittens #pc-fab-menu { background: #ffffff !important; border: 2px solid #ffb3d9 !important; border-radius: 20px !important; } html.theme-kittens .pc-fab-option { color: #5d3f50 !important; } html.theme-kittens .pc-fab-option:hover { background: #ffe6f2 !important; } /* Custom Windows 7 switcher trigger button */ html.theme-windows-7 #theme-switcher-btn { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.65) 0%, rgba(200, 230, 255, 0.35) 50%, rgba(160, 210, 250, 0.45) 51%, rgba(220, 240, 255, 0.55) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important; color: #092a54 !important; } /* Custom Windows 7 PC-only FAB */ html.theme-windows-7 #pc-fab-btn { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.65) 0%, rgba(200, 230, 255, 0.35) 50%, rgba(160, 210, 250, 0.45) 51%, rgba(220, 240, 255, 0.55) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; color: #092a54 !important; box-shadow: 0 6px 15px rgba(0,0,0,0.2) !important; border-radius: 50% !important; } html.theme-windows-7 #pc-fab-menu { background: rgba(255, 255, 255, 0.75) !important; backdrop-filter: blur(20px) !important; border: 1px solid rgba(255, 255, 255, 0.45) !important; border-radius: 8px !important; } html.theme-windows-7 .pc-fab-option { color: #1a2c42 !important; } html.theme-windows-7 .pc-fab-option:hover { background: rgba(255, 255, 255, 0.25) !important; } /* Custom Cyberpunk switcher trigger button */ html.theme-cyberpunk #theme-switcher-btn { background: #ff007f !important; color: #ffffff !important; border: 2px solid #fee715 !important; box-shadow: 3px 3px 0px #00f0ff !important; border-radius: 0px !important; } html.theme-cyberpunk #theme-switcher-btn:hover { background: #fee715 !important; color: #0c0f12 !important; transform: none !important; box-shadow: -3px -3px 0px #ff007f !important; } /* Custom Cyberpunk PC-only FAB */ html.theme-cyberpunk #pc-fab-btn { background: #ff007f !important; color: #ffffff !important; border: 2px solid #fee715 !important; box-shadow: 3px 3px 0px #00f0ff !important; border-radius: 0px !important; } html.theme-cyberpunk #pc-fab-btn:hover { background: #fee715 !important; color: #0c0f12 !important; box-shadow: -3px -3px 0px #ff007f !important; } html.theme-cyberpunk #pc-fab-menu { background: #12181f !important; border: 2px solid #fee715 !important; box-shadow: 4px 4px 0px #ff007f !important; border-radius: 0px !important; } html.theme-cyberpunk .pc-fab-option { color: #fee715 !important; } html.theme-cyberpunk .pc-fab-option:hover { background: rgba(0, 240, 255, 0.1) !important; } /* Custom Vaporwave switcher trigger button */ html.theme-vaporwave #theme-switcher-btn { background: linear-gradient(135deg, #ff71ce 0%, #01cdfe 100%) !important; border: 2px solid #ffffff !important; color: #1a0826 !important; box-shadow: 0 4px 15px rgba(255, 113, 206, 0.4) !important; } /* Custom Vaporwave PC-only FAB */ html.theme-vaporwave #pc-fab-btn { background: linear-gradient(135deg, #ff71ce 0%, #01cdfe 100%) !important; border: 2px solid #ffffff !important; color: #1a0826 !important; box-shadow: 0 4px 15px rgba(255, 113, 206, 0.4) !important; border-radius: 50% !important; } html.theme-vaporwave #pc-fab-menu { background: rgba(26, 8, 38, 0.95) !important; border: 2px solid #ff71ce !important; box-shadow: 0 10px 30px rgba(255, 113, 206, 0.3) !important; border-radius: 12px !important; } html.theme-vaporwave .pc-fab-option { color: #ffffff !important; } html.theme-vaporwave .pc-fab-option:hover { background: rgba(255, 113, 206, 0.15) !important; } /* Custom Flamengo switcher trigger button */ html.theme-flamengo #theme-switcher-btn { background: #c4122d !important; border: 2px solid #d4af37 !important; color: #ffffff !important; } /* Custom Flamengo PC-only FAB */ html.theme-flamengo #pc-fab-btn { background: #c4122d !important; border: 2px solid #d4af37 !important; color: #ffffff !important; border-radius: 50% !important; } html.theme-flamengo #pc-fab-menu { background: #141414 !important; border: 2px solid #c4122d !important; border-radius: 8px !important; } html.theme-flamengo .pc-fab-option { color: #ffffff !important; } html.theme-flamengo .pc-fab-option:hover { background: rgba(196, 18, 45, 0.1) !important; color: #d4af37 !important; } /* Theme-specific mobile navbar menu overrides */ html.theme-liquid-glass-white #navbar_menu:not(.hidden) { background: rgba(255, 255, 255, 0.98) !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; } html.theme-liquid-glass-white #navbar_menu:not(.hidden) a { color: #0f172a !important; } html.theme-liquid-glass-white #navbar_menu:not(.hidden) a:hover { background: rgba(15, 23, 42, 0.05) !important; } html.theme-absolute #navbar_menu:not(.hidden) { background: #000000 !important; border: 1px solid #2f3336 !important; border-radius: 16px !important; box-shadow: none !important; } html.theme-absolute #navbar_menu:not(.hidden) a { color: #e7e9ea !important; } html.theme-absolute #navbar_menu:not(.hidden) a:hover { background: rgba(255, 255, 255, 0.08) !important; } html.theme-pixel #navbar_menu:not(.hidden) { background: #110d24 !important; border: 3px solid #ff00ff !important; border-radius: 0px !important; box-shadow: 6px 6px 0px #00ffff !important; } html.theme-pixel #navbar_menu:not(.hidden) a { color: #00ff00 !important; border-radius: 0px !important; } html.theme-pixel #navbar_menu:not(.hidden) a:hover { background: #ff00ff !important; color: #ffff00 !important; } html.theme-very-strong-witch #navbar_menu:not(.hidden) { background: rgba(22, 10, 42, 0.96) !important; border: 1px solid rgba(229, 193, 88, 0.25) !important; border-radius: 20px !important; } html.theme-very-strong-witch #navbar_menu:not(.hidden) a { color: #e5c158 !important; } html.theme-very-strong-witch #navbar_menu:not(.hidden) a:hover { background: rgba(229, 193, 88, 0.08) !important; } html.theme-windows-98 #navbar_menu:not(.hidden) { background: #c0c0c0 !important; border-top: 1.5px solid #ffffff !important; border-left: 1.5px solid #ffffff !important; border-right: 1.5px solid #808080 !important; border-bottom: 1.5px solid #808080 !important; border-radius: 0px !important; box-shadow: none !important; } html.theme-windows-98 #navbar_menu:not(.hidden) a { color: #000000 !important; border-radius: 0px !important; } html.theme-windows-98 #navbar_menu:not(.hidden) a:hover { background: #000080 !important; color: #ffffff !important; } html.theme-windows-xp #navbar_menu:not(.hidden) { background: #f0f0ea !important; border: 2px solid #003c74 !important; border-radius: 4px !important; box-shadow: 2px 2px 10px rgba(0,0,0,0.3) !important; } html.theme-windows-xp #navbar_menu:not(.hidden) a { color: #000000 !important; border-radius: 0px !important; } html.theme-windows-xp #navbar_menu:not(.hidden) a:hover { background: #316ac5 !important; color: #ffffff !important; } /* ========================================================================== SHADOW THE HEDGEHOG — TEMA EXCLUSIVO Paleta: Base #000/#0a0a0a | Destaque #cc1100 (vermelho) | Hover #d4a800 (dourado) ========================================================================== */ /* --- Base --- */ html.theme-shadow, html.theme-shadow body { background-color: #000000 !important; color: #e2d8d8 !important; } html.theme-shadow .liquid-bg-container, html.theme-shadow .liquid-blob { display: none !important; } /* --- Containers e Cards --- */ html.theme-shadow .navbar-inner, html.theme-shadow .glass-sidebar, html.theme-shadow .card, html.theme-shadow .jumbotron, html.theme-shadow .modal-content, html.theme-shadow .terms-box, html.theme-shadow .tags_post { background: #0a0a0a !important; border: 1.5px solid #cc1100 !important; border-radius: 16px !important; box-shadow: 0 4px 24px rgba(204, 17, 0, 0.06) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: #e2d8d8 !important; } html.theme-shadow .navbar-inner { border-radius: 9999px !important; border: 1.5px solid #cc1100 !important; } html.theme-shadow .card:hover, html.theme-shadow .tags_post:hover, html.theme-shadow .card.active, html.theme-shadow .tags_post.active, html.theme-shadow .card:focus, html.theme-shadow .tags_post:focus, html.theme-shadow .card:active, html.theme-shadow .tags_post:active, html.theme-shadow .navbar-inner:hover, html.theme-shadow .glass-sidebar:hover, html.theme-shadow .modal-content:hover { border-color: #d4a800 !important; box-shadow: 0 6px 28px rgba(212, 168, 0, 0.14) !important; transition: all 0.3s ease !important; } /* --- Textos --- */ html.theme-shadow h1, html.theme-shadow h2, html.theme-shadow h3, html.theme-shadow h4, html.theme-shadow h5, html.theme-shadow h6, html.theme-shadow .font-bold.text-white, html.theme-shadow .text-white { color: #ffffff !important; } html.theme-shadow .text-white\/85, html.theme-shadow .text-white\/80, html.theme-shadow .text-white\/70, html.theme-shadow .text-white\/60, html.theme-shadow .text-white\/50, html.theme-shadow .text-white\/45, html.theme-shadow .text-white\/40, html.theme-shadow .text-white\/30, html.theme-shadow .sidebar-username, html.theme-shadow .sidebar-bio { color: #7a6a6a !important; } html.theme-shadow strong { color: #e2d8d8 !important; } /* --- Links --- */ html.theme-shadow a { color: #cc1100 !important; text-decoration: none !important; transition: color 0.2s ease !important; } html.theme-shadow a:hover { color: #d4a800 !important; } /* --- Navbar links --- */ html.theme-shadow .navbar-inner a, html.theme-shadow .navbar-inner span, html.theme-shadow .navbar-inner p { color: #e2d8d8 !important; text-decoration: none !important; } html.theme-shadow .navbar-inner a:hover { color: #d4a800 !important; background: rgba(212, 168, 0, 0.08) !important; border-radius: 9999px !important; } /* --- Botões --- */ html.theme-shadow .btn-custom { background: #cc1100 !important; color: #ffffff !important; border: none !important; border-radius: 9999px !important; font-weight: 700 !important; box-shadow: 0 4px 16px rgba(204, 17, 0, 0.35) !important; transition: all 0.25s ease !important; } html.theme-shadow .btn-custom:hover { background: #d4a800 !important; box-shadow: 0 6px 20px rgba(212, 168, 0, 0.4) !important; transform: translateY(-1px) !important; } html.theme-shadow .btn-secondary { background: #111111 !important; color: #e2d8d8 !important; border: 1.5px solid #cc1100 !important; border-radius: 9999px !important; box-shadow: none !important; transition: all 0.25s ease !important; } html.theme-shadow .btn-secondary:hover, html.theme-shadow .btn-secondary:focus, html.theme-shadow .btn-secondary:active, html.theme-shadow .btn-secondary.active { border-color: #d4a800 !important; color: #d4a800 !important; background: rgba(212, 168, 0, 0.06) !important; transform: none !important; } html.theme-shadow .btn { border-radius: 9999px !important; } html.theme-shadow .btn:hover { color: #d4a800 !important; } /* --- Forms e Inputs --- */ html.theme-shadow .form-control { background: #0a0a0a !important; border: 1.5px solid #cc1100 !important; border-radius: 10px !important; color: #e2d8d8 !important; transition: border-color 0.2s ease !important; } html.theme-shadow .form-control:focus, html.theme-shadow .form-control:active, html.theme-shadow .form-control.active { border-color: #d4a800 !important; box-shadow: 0 0 0 3px rgba(212, 168, 0, 0.15) !important; background: #0d0d0d !important; } html.theme-shadow .form-control::placeholder { color: #4a3a3a !important; } /* --- Post Actions --- */ html.theme-shadow .post-action-bar { border-top: 1px solid #1a0000 !important; } html.theme-shadow .post-action-btn { color: #7a6a6a !important; transition: all 0.2s ease !important; } html.theme-shadow .post-action-btn:hover { color: #d4a800 !important; background: rgba(212, 168, 0, 0.08) !important; } /* --- Sidebar Navigation --- */ html.theme-shadow .glass-nav-btn { color: #e2d8d8 !important; border-radius: 9999px !important; transition: all 0.2s ease !important; } html.theme-shadow .glass-nav-btn:hover { background: rgba(212, 168, 0, 0.07) !important; color: #d4a800 !important; } html.theme-shadow .glass-nav-btn.active, html.theme-shadow .glass-nav-btn[aria-current="page"] { color: #cc1100 !important; } html.theme-shadow .glass-nav-btn-highlight { background: none !important; border: 1px solid #2a0000 !important; } html.theme-shadow .glass-nav-btn i { transition: color 0.2s ease !important; } /* --- Divisórias --- */ html.theme-shadow hr { border-color: #1a0000 !important; } /* --- Badge de Não-lidos --- */ html.theme-shadow .badge-unread { background-color: #cc1100 !important; color: #ffffff !important; box-shadow: 0 0 8px rgba(204, 17, 0, 0.4) !important; } /* --- Mobile Bottom Nav --- */ html.theme-shadow .mobile-bottom-nav { background: #000000 !important; border: 1px solid #1a0000 !important; border-radius: 0 !important; width: 100% !important; bottom: 0 !important; box-shadow: 0 -4px 20px rgba(204, 17, 0, 0.08) !important; } html.theme-shadow .mobile-nav-lnk { color: #7a6a6a !important; } html.theme-shadow .mobile-nav-lnk.active { color: #cc1100 !important; } html.theme-shadow .mobile-nav-btn-add { background: #cc1100 !important; color: #ffffff !important; border-radius: 9999px !important; box-shadow: 0 4px 14px rgba(204, 17, 0, 0.4) !important; } html.theme-shadow .mobile-nav-avatar { border: 2px solid #cc1100 !important; } /* --- Splash Screen --- */ html.theme-shadow .splash-container { background-color: #000000 !important; } html.theme-shadow .splash-text { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: initial !important; color: #cc1100 !important; text-shadow: 0 0 30px rgba(204, 17, 0, 0.35) !important; } html.theme-shadow .splash-logo i { color: #cc1100 !important; } /* --- Chat Welcome Panel --- */ html.theme-shadow #chat_welcome_panel { background: #000000 !important; border-left: 1px solid #1a0000 !important; } html.theme-shadow .status-indicator { border-color: #000000 !important; } html.theme-shadow .chat-contacts-panel { border-right: 1px solid #1a0000 !important; } html.theme-shadow .chat-contacts-header { border-bottom: 1px solid #1a0000 !important; } html.theme-shadow .chat-window-header { border-bottom: 1px solid #1a0000 !important; } html.theme-shadow .chat-input-container { border-top: 1px solid #1a0000 !important; } html.theme-shadow #chat_welcome_panel .bg-white\/5 { background: #0d0d0d !important; border-color: #2a0000 !important; } html.theme-shadow #chat_welcome_panel h2 { color: #cc1100 !important; } html.theme-shadow #chat_welcome_panel p, html.theme-shadow #chat_welcome_panel span { color: #7a6a6a !important; } html.theme-shadow #chat_welcome_panel .text-white { color: #e2d8d8 !important; } html.theme-shadow #chat_welcome_panel .text-white\/40, html.theme-shadow #chat_welcome_panel .text-white\/30, html.theme-shadow #chat_welcome_panel .text-white\/60 { color: #7a6a6a !important; } /* --- Theme Switcher Panel Shadow Override --- */ html.theme-shadow #theme-switcher-btn { background: linear-gradient(135deg, #cc1100 0%, #800000 100%) !important; border: 1px solid #d4a800 !important; box-shadow: 0 8px 32px rgba(204, 17, 0, 0.45) !important; color: #ffffff !important; } html.theme-shadow #theme-switcher-btn:hover { box-shadow: 0 12px 40px rgba(212, 168, 0, 0.5) !important; border-color: #f0c800 !important; } html.theme-shadow #theme-switcher-panel { background: #050505 !important; border: 1px solid #2a0000 !important; border-radius: 16px !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(204, 17, 0, 0.08) !important; } html.theme-shadow .theme-name { color: #e2d8d8 !important; } html.theme-shadow .theme-option:hover { background: rgba(212, 168, 0, 0.06) !important; } html.theme-shadow .theme-option.active { background: rgba(204, 17, 0, 0.12) !important; border-color: rgba(204, 17, 0, 0.4) !important; } /* Preview dot do tema Shadow no switcher */ .preview-shadow { background: radial-gradient(circle, #cc1100 0%, #000000 100%) !important; border: 1px solid #d4a800 !important; } /* --- PC-only FAB --- */ html.theme-shadow #pc-fab-btn { background: linear-gradient(135deg, #cc1100 0%, #800000 100%) !important; border: 1px solid #d4a800 !important; box-shadow: 0 8px 32px rgba(204, 17, 0, 0.4) !important; color: #ffffff !important; border-radius: 50% !important; } html.theme-shadow #pc-fab-btn:hover { box-shadow: 0 12px 40px rgba(212, 168, 0, 0.45) !important; } html.theme-shadow #pc-fab-menu { background: #050505 !important; border: 1px solid #2a0000 !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 1px rgba(204, 17, 0, 0.2) !important; border-radius: 16px !important; } html.theme-shadow .pc-fab-option { color: #e2d8d8 !important; } html.theme-shadow .pc-fab-option:hover { background: rgba(212, 168, 0, 0.07) !important; color: #d4a800 !important; } html.theme-shadow .badge-fab-dot { border: 2px solid #000000 !important; background-color: #cc1100 !important; } /* --- Global Tag Modal --- */ html.theme-shadow #globalTagModal > div { background: #0a0a0a !important; border: 1px solid #2a0000 !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9) !important; } html.theme-shadow #globalTagModal h4, html.theme-shadow #globalTagModal label { color: #e2d8d8 !important; } html.theme-shadow #globalTagModal textarea { background: #050505 !important; border: 1px solid #2a0000 !important; color: #e2d8d8 !important; } html.theme-shadow #globalTagModal textarea:focus { border-color: #cc1100 !important; } html.theme-shadow #globalTagModal textarea::placeholder { color: #4a3a3a !important; } html.theme-shadow #globalTagModal #btn-global-tag-postar { background: #cc1100 !important; border: none !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(204, 17, 0, 0.35) !important; } html.theme-shadow #globalTagModal #btn-global-tag-postar:hover { background: #d4a800 !important; } /* --- Mobile Navbar Menu --- */ html.theme-shadow #navbar_menu:not(.hidden) { background: #050505 !important; border: 1px solid #2a0000 !important; border-radius: 16px !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85) !important; } html.theme-shadow #navbar_menu:not(.hidden) a { color: #e2d8d8 !important; } html.theme-shadow #navbar_menu:not(.hidden) a:hover { background: rgba(212, 168, 0, 0.07) !important; color: #d4a800 !important; } /* --- Termos / Feature Cards / Marquee --- */ html.theme-shadow .terms-box { background: #0a0a0a !important; border: 1px solid #2a0000 !important; } html.theme-shadow .feature-card { border: 1px solid #2a0000 !important; } html.theme-shadow .marquee-post { background: #0a0a0a !important; border: 1px solid #1a0000 !important; } /* --- Select/dropdown inputs --- */ html.theme-shadow select.form-control, html.theme-shadow select.admin-input { background: #0a0a0a !important; color: #e2d8d8 !important; } /* ============================================================ DECORAÇÕES EXCLUSIVAS SHADOW — AVATAR E CAPA ============================================================ */ /* Forçar exibição do avatar sem corte na borda do card */ .card.tags.overflow-visible { overflow: visible !important; } /* Decoração da Foto de Perfil: shadow.png atrás do avatar (CORRIGIDO) */ .avatar-overlap.dec-shadow { position: absolute !important; overflow: visible !important; display: inline-block !important; padding: 7px !important; background: transparent !important; border: none !important; isolation: isolate !important; z-index: 10 !important; } .profile-avatar-container.dec-shadow { position: relative !important; overflow: visible !important; display: inline-block !important; padding: 7px !important; background: transparent !important; border: none !important; isolation: isolate !important; /* Novo contexto de empilhamento */ z-index: 5 !important; } .profile-avatar-container.dec-shadow.avatar-small { padding: 4px !important; } .avatar-overlap.dec-shadow::before, .profile-avatar-container.dec-shadow::before { content: '' !important; position: absolute !important; inset: auto !important; /* Limpa o inset do avatar-small */ background: url('../imagens/shadow.png') center / contain no-repeat !important; width: 210% !important; height: 210% !important; top: -68% !important; left: -78% !important; right: auto !important; bottom: auto !important; z-index: 1 !important; pointer-events: none !important; filter: drop-shadow(0 0 10px rgba(204, 17, 0, 0.6)) !important; opacity: 0.95 !important; /* Reseta máscaras e animações de rotação herdadas */ -webkit-mask: none !important; mask: none !important; -webkit-mask-composite: source-over !important; mask-composite: accumulate !important; animation: none !important; } .profile-avatar-container.dec-shadow.avatar-small::before { inset: auto !important; width: 220% !important; height: 220% !important; top: -72% !important; left: -84% !important; right: auto !important; bottom: auto !important; } .cover-photo-container { border-top-left-radius: 24px !important; border-top-right-radius: 24px !important; overflow: hidden !important; } .avatar-overlap.dec-shadow::after, .profile-avatar-container.dec-shadow::after { content: '' !important; display: block !important; position: absolute !important; inset: 4px !important; border-radius: 50% !important; background: radial-gradient(circle, rgba(204, 17, 0, 0.6) 0%, rgba(212, 168, 0, 0.3) 70%, transparent 100%) !important; filter: blur(8px) !important; z-index: -1 !important; opacity: 0.85 !important; animation: avatar-pulse 3s ease-in-out infinite alternate !important; } .profile-avatar-container.dec-shadow.avatar-small::after { inset: 2px !important; filter: blur(4px) !important; } .avatar-overlap.dec-shadow .avatar-overlap-img-container, .profile-avatar-container.dec-shadow .avatar-overlap-img-container { position: relative !important; z-index: 2 !important; } .avatar-overlap.dec-shadow img, .profile-avatar-container.dec-shadow img { position: relative !important; z-index: 2 !important; border: 3.5px solid rgba(204, 17, 0, 0.95) !important; box-shadow: 0 0 0 3px rgba(212, 168, 0, 0.8), 0 8px 24px rgba(0,0,0,0.6) !important; } .profile-avatar-container.dec-shadow.avatar-small img { border-width: 2px !important; box-shadow: 0 0 0 1.5px rgba(212, 168, 0, 0.8) !important; } /* Efeito de Arcos Dourados do Shadow (shadow_rings) */ .shadow-rings-layer { position: absolute !important; inset: 0 !important; pointer-events: none !important; overflow: hidden !important; z-index: 5 !important; } .sonic-ring { position: absolute !important; width: 40px !important; height: 40px !important; border: 3.5px solid #d4a800 !important; border-radius: 50% !important; box-shadow: 0 0 10px #e5c158, inset 0 0 8px #e5c158 !important; pointer-events: none !important; transform-style: preserve-3d !important; animation: descend-ring 5s linear infinite !important; } /* Distribute positions and delay */ .sonic-ring.ring-1 { left: 15% !important; animation-delay: 0s !important; } .sonic-ring.ring-2 { left: 40% !important; animation-delay: 1.25s !important; } .sonic-ring.ring-3 { left: 65% !important; animation-delay: 2.5s !important; } .sonic-ring.ring-4 { left: 85% !important; animation-delay: 3.75s !important; } @keyframes descend-ring { 0% { transform: translateY(-50px) rotateY(0deg); opacity: 0; } 10% { opacity: 0.95; } 90% { opacity: 0.95; } 100% { transform: translateY(250px) rotateY(360deg); opacity: 0; } } /* Ícone do Tags: troca controlada via JS (ver themes.js) */ /* ========================================================================== FIM DO TEMA SHADOW THE HEDGEHOG ========================================================================== */