/* Theme Name: Reactions Live Theme URI: https://github.com/gsgdigital/reactions-live Description: Tema de livestream com player do YouTube e chat em tempo real (Ably Chat), no estilo Twitch, com tema claro/escuro/sistema. Author: GSG Digital Version: 1.6.3 License: GPL-2.0-or-later Text Domain: reactions-live */ /* Paleta do tema em variáveis CSS (RGB puro, sem "rgb()"), consumidas pelo * Tailwind via "rgb(var(--rl-*) / )". O tema ativo é o atributo * data-rl-theme no : "light", "dark" ou "system" (padrão). */ :root { --rl-bg: 14 14 16; /* #0e0e10 */ --rl-panel: 24 24 27; /* #18181b */ --rl-input: 38 38 44; /* #26262c */ --rl-hover: 58 58 61; /* #3a3a3d */ --rl-text: 239 239 241; /* #efeff1 */ --rl-dim: 173 173 184; /* #adadb8 */ --rl-border: 47 47 53; /* #2f2f35 */ --rl-panel2: 31 31 35; /* #1f1f23 (fundo dos cards do chat) */ } /* Tema claro (seleção manual "Claro"). */ :root[data-rl-theme='light'] { --rl-bg: 244 244 245; /* #f4f4f5 */ --rl-panel: 255 255 255; /* #ffffff */ --rl-input: 228 228 231; /* #e4e4e7 */ --rl-hover: 212 212 216; /* #d4d4d8 */ --rl-text: 24 24 27; /* #18181b */ --rl-dim: 82 82 91; /* #52525b */ --rl-border: 212 212 216; /* #d4d4d8 */ --rl-panel2: 244 244 245; /* #f4f4f5 */ } /* "Sistema" (e ausência de preferência): segue o esquema do aparelho. */ @media (prefers-color-scheme: light) { :root:not([data-rl-theme='light']):not([data-rl-theme='dark']) { --rl-bg: 244 244 245; --rl-panel: 255 255 255; --rl-input: 228 228 231; --rl-hover: 212 212 216; --rl-text: 24 24 27; --rl-dim: 82 82 91; --rl-border: 212 212 216; --rl-panel2: 244 244 245; } } /* Estilos base mínimos (a maior parte do tema usa Tailwind CSS) */ body { background-color: rgb(var(--rl-bg)); color: rgb(var(--rl-text)); margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; transition: background-color 0.2s ease, color 0.2s ease; } a { color: inherit; } /* Esconde a barra de rolagem visual no chat, como na Twitch */ .rl-chat-scroll { scrollbar-width: thin; scrollbar-color: rgb(var(--rl-hover)) transparent; } .rl-chat-scroll::-webkit-scrollbar { width: 6px; } .rl-chat-scroll::-webkit-scrollbar-thumb { background-color: rgb(var(--rl-hover)); border-radius: 3px; } /* Emotes flutuantes (room reactions) */ @keyframes rl-float { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-320px) scale(1.6); opacity: 0; } } /* Bolinhas de navegação do carrossel do cronograma (!cronograma): inativa * derivada de --rl-text (visível nos temas claro e escuro); ativa na cor da * marca (#9147ff), legível sobre qualquer fundo. */ .rl-dot { background-color: rgb(var(--rl-text) / 0.25); } .rl-dot-active { background-color: #9147ff; } /* Itens assistidos do cronograma: verde translúcido por tema — dark usa o * antigo bg-green-800/40; claro usa rgb(90 223 140 / 40%). */ .rl-watched { background-color: rgb(22 101 52 / 0.4); } :root[data-rl-theme='light'] .rl-watched { background-color: rgb(90 223 140 / 40%); } @media (prefers-color-scheme: light) { :root:not([data-rl-theme='light']):not([data-rl-theme='dark']) .rl-watched { background-color: rgb(90 223 140 / 40%); } } /* Tags do cronograma (!cronograma) */ .schedule-item-tag { color: whitesmoke; background: #000000; padding: 1px 4px; border-radius: 4px; } .time-tag { font-weight: bold; } .anime-tag { background: #E80928; } .filme-tag { background: #097CE6; } .serie-tag { background: #1e821f; } .desenho-tag { background: #ae50f1; } .manga-tag { background: #E60AE8; } .video-tag { background: #17bdaa; } .livro-tag { background: #8f6033; } .manhwa-tag { background: #9f0020; } .manhua-tag { background: #7d00ff; } .webcomic-tag { background: #c55200; } .novel-tag { background: #d49600; } .novela-tag { background: #478cc8; } .dorama-tag { background: #00b075; } .k-drama-tag { background: #ec408f; } .donghua-tag { background: #ff6500; } .aeni-tag { background: #4100a5; } .musica-tag { background: #b26600; } .react-tag { background: #461684; } .live-tag { background: #00b2ff; } .post-tag { background: #a43c8c; } .gameplay-tag { background: #6ba82f; } /* Tags do card Reactions Pix (cores dedicadas por tipo de tag) */ .vaquinha-tag { background: #185690; } .novo-tag { background: #31ca33; } .atualizacao-tag { background: #F18E00; } .adiantado-tag { background: #ddbb00; } .rl-float { position: absolute; bottom: 0; font-size: 28px; line-height: 1; pointer-events: none; user-select: none; animation: rl-float 3s ease-out forwards; }