/* ============================================================ SX Modo Claro — Estilos do widget e override de tema claro Autor: Professor Guilherme Castelo ============================================================ */ /* ---------------------------------------------------------- VARIÁVEIS E RESET DO WIDGET ---------------------------------------------------------- */ :root { --sx-bg: #1e1e2e; --sx-bg-hover: #2d2d44; --sx-text: #f0f0f0; --sx-accent: #f5c842; --sx-radius: 10px; --sx-shadow: 0 4px 20px rgba(0,0,0,.45); --sx-transition: .25s ease; --sx-z: 99999; } /* ---------------------------------------------------------- BARRA FLUTUANTE ---------------------------------------------------------- */ .sx-barra { position: fixed; z-index: var(--sx-z); display: flex; align-items: center; gap: 4px; padding: 6px 10px; background: var(--sx-bg); border-radius: var(--sx-radius); box-shadow: var(--sx-shadow); font-family: system-ui, sans-serif; transition: opacity var(--sx-transition); opacity: .88; /* impede que o filtro do modo claro inverta a barra */ isolation: isolate; } .sx-barra:hover { opacity: 1; } /* Posicionamento */ .sx-pos-top-right { top: 16px; right: 16px; } .sx-pos-top-left { top: 16px; left: 16px; } .sx-pos-bottom-right { bottom: 16px; right: 16px; } .sx-pos-bottom-left { bottom: 16px; left: 16px; } /* ---------------------------------------------------------- BOTÕES ---------------------------------------------------------- */ .sx-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 6px; background: transparent; border: none; border-radius: 7px; color: var(--sx-text); font-size: 13px; font-weight: 700; letter-spacing: .02em; cursor: pointer; transition: background var(--sx-transition), color var(--sx-transition), transform .15s ease; line-height: 1; user-select: none; } .sx-btn:hover { background: var(--sx-bg-hover); transform: scale(1.08); } .sx-btn:active { transform: scale(.95); } .sx-btn:focus-visible { outline: 2px solid var(--sx-accent); outline-offset: 2px; } /* Botão de tema — ativo */ .sx-btn-tema.sx-ativo { color: var(--sx-accent); } /* Ícones sol/lua — alternância */ .sx-icone-lua { display: none; } .sx-icone-sol { display: flex; } .sx-btn-tema.sx-ativo .sx-icone-sol { display: none; } .sx-btn-tema.sx-ativo .sx-icone-lua { display: flex; } /* Botão de fonte ativo/selecionado */ .sx-btn-fonte.sx-fonte-ativa { background: var(--sx-bg-hover); color: var(--sx-accent); } /* Fonte normal — levemente menor */ .sx-fonte-normal { font-size: 11px; } /* ---------------------------------------------------------- DIVISOR ---------------------------------------------------------- */ .sx-divisor { width: 1px; height: 22px; background: rgba(255,255,255,.18); margin: 0 4px; border-radius: 1px; } /* ---------------------------------------------------------- GRUPO DE FONTE ---------------------------------------------------------- */ .sx-fonte-grupo { display: flex; align-items: center; gap: 2px; } /* ---------------------------------------------------------- MODO CLARO — OVERRIDE GLOBAL Usa filtro invert + hue-rotate no para inverter cores escuras em claras sem afetar imagens/vídeos. ---------------------------------------------------------- */ html.sx-modo-claro { filter: invert(1) hue-rotate(180deg); background-color: #fff; } /* Restaura imagens, vídeos, canvas e iframes */ html.sx-modo-claro img, html.sx-modo-claro video, html.sx-modo-claro canvas, html.sx-modo-claro iframe, html.sx-modo-claro embed, html.sx-modo-claro svg image, html.sx-modo-claro [style*="background-image"] { filter: invert(1) hue-rotate(180deg); } /* Restaura a própria barra (já isolada via isolation, mas reforçamos) */ html.sx-modo-claro .sx-barra { filter: invert(1) hue-rotate(180deg); } /* ---------------------------------------------------------- TAMANHOS DE FONTE ---------------------------------------------------------- */ html.sx-fonte-pequena { font-size: 13px !important; } html.sx-fonte-normal { font-size: 16px !important; } html.sx-fonte-grande { font-size: 20px !important; } html.sx-fonte-extragrande { font-size: 24px !important; } /* ---------------------------------------------------------- ANIMAÇÃO DE ENTRADA ---------------------------------------------------------- */ @keyframes sx-slide-in-right { from { opacity: 0; transform: translateX(30px); } to { opacity: .88; transform: translateX(0); } } @keyframes sx-slide-in-left { from { opacity: 0; transform: translateX(-30px); } to { opacity: .88; transform: translateX(0); } } .sx-pos-top-right, .sx-pos-bottom-right { animation: sx-slide-in-right .4s ease forwards; } .sx-pos-top-left, .sx-pos-bottom-left { animation: sx-slide-in-left .4s ease forwards; } /* ---------------------------------------------------------- RESPONSIVO — tela pequena ---------------------------------------------------------- */ @media (max-width: 480px) { .sx-barra { padding: 5px 8px; gap: 3px; } .sx-btn { min-width: 30px; height: 30px; font-size: 12px; } }