/* TEMA CLARO DO PAINEL — escolhido pelo dono, aparelho por aparelho. * * O painel inteiro pinta as cores em estilo inline (markup do Painel.dc.html e * HTML montado por afio-painel.js). Trocar isso por variáveis seria reescrever * milhares de linhas; em vez disso, este arquivo faz o que o afio-mobile.css * já faz há tempos: casa os fragmentos de estilo por atributo e sobrepõe. * * As duas grafias de cada cor, sempre: * - a compacta, como está no fonte e no innerHTML ("background:#141416", * "rgba(245,240,232,.10)") — o navegador NÃO reescreve atributo vindo de * innerHTML; * - a que o React serializa ao montar o markup da página e a que o próprio * navegador escreve quando o JS faz el.style.cor = '#9DD7BD' * ("background: rgb(20, 20, 22)", "rgba(245, 240, 232, 0.1)"). * Uma regra com uma grafia só pega metade da tela — foi a lição do mobile.css. * * Tudo vive atrás de html[data-tema="claro"]: sem o atributo, nenhuma regra * existe e o escuro continua exatamente como sempre foi. O atributo entra * antes do primeiro quadro por um script no do Painel, lendo * localStorage 'afio.painel.tema' — sem flash escuro para quem escolheu claro. * * A paleta clara é papel quente, não branco de laboratório: o produto é de * barbearia, o creme e o laranja continuam sendo a cara dele. */ /* ---------------------------------------------------------- o botão de tema */ /* Um span só; o ícone é ::before e mostra o MODO escolhido, não o tema atual: ◐ automático (segue o claro/escuro do aparelho — o padrão), ☀ claro fixo, ☾ escuro fixo. O atributo ganha valor no aplicaTema(); antes disso vale o ◐ de padrão. O \FE0E força o desenho de texto — sem ele alguns aparelhos pintam emoji colorido no meio do topo sóbrio. */ [data-tema-icone]::before { content: "◐\FE0E"; font-size: 15px; line-height: 1; } [data-tema-icone="claro"]::before { content: "☀\FE0E"; } [data-tema-icone="escuro"]::before { content: "☾\FE0E"; } html[data-tema="claro"] { color-scheme: light; } html[data-tema="claro"] body { background: #F3EDE3; color: #28221B; } /* ------------------------------------------------------------------ fundos */ /* página e faixas pretas (o #topo e a barra de setores usam o mesmo preto) */ html[data-tema="claro"] [style*="background:#0B0B0C"], html[data-tema="claro"] [style*="background: rgb(11, 11, 12)"] { background: #F3EDE3 !important; } /* o vidro do topo grudado */ html[data-tema="claro"] [style*="background:rgba(11,11,12,.9)"], html[data-tema="claro"] [style*="background: rgba(11, 11, 12, 0.9)"] { background: rgba(247, 242, 235, .92) !important; } /* cartões */ html[data-tema="claro"] [style*="background:#141416"], html[data-tema="claro"] [style*="background: rgb(20, 20, 22)"] { background: #FCF9F4 !important; } /* caixas rebaixadas, campos, listas */ html[data-tema="claro"] [style*="background:#0F0F10"], html[data-tema="claro"] [style*="background: rgb(15, 15, 16)"] { background: #F1EAE0 !important; } html[data-tema="claro"] [style*="background:#101011"], html[data-tema="claro"] [style*="background: rgb(16, 16, 17)"] { background: #F5EFE6 !important; } html[data-tema="claro"] [style*="background:#131313"], html[data-tema="claro"] [style*="background: rgb(19, 19, 19)"] { background: #F0E9DE !important; } html[data-tema="claro"] [style*="background:#0A0A0A"], html[data-tema="claro"] [style*="background: rgb(10, 10, 10)"] { background: #ECE4D8 !important; } /* barras flutuantes (aviso de atualização, convite de instalar) */ html[data-tema="claro"] [style*="background:#17161A"], html[data-tema="claro"] [style*="background: rgb(23, 22, 26)"] { background: #FCF9F4 !important; } /* véus creme por cima de fundo escuro viram véus de tinta */ html[data-tema="claro"] [style*="background:rgba(245,240,232,.03)"], html[data-tema="claro"] [style*="background: rgba(245, 240, 232, 0.03)"] { background: rgba(40, 34, 27, .04) !important; } html[data-tema="claro"] [style*="background:rgba(245,240,232,.04)"], html[data-tema="claro"] [style*="background: rgba(245, 240, 232, 0.04)"] { background: rgba(40, 34, 27, .05) !important; } html[data-tema="claro"] [style*="background:rgba(245,240,232,.06)"], html[data-tema="claro"] [style*="background: rgba(245, 240, 232, 0.06)"] { background: rgba(40, 34, 27, .06) !important; } html[data-tema="claro"] [style*="background:rgba(245,240,232,.07)"], html[data-tema="claro"] [style*="background: rgba(245, 240, 232, 0.07)"] { background: rgba(40, 34, 27, .07) !important; } html[data-tema="claro"] [style*="background:rgba(245,240,232,.08)"], html[data-tema="claro"] [style*="background: rgba(245, 240, 232, 0.08)"] { background: rgba(40, 34, 27, .08) !important; } html[data-tema="claro"] [style*="background:rgba(245,240,232,.10)"], html[data-tema="claro"] [style*="background: rgba(245, 240, 232, 0.1)"] { background: rgba(40, 34, 27, .09) !important; } html[data-tema="claro"] [style*="background:rgba(245,240,232,.12)"], html[data-tema="claro"] [style*="background: rgba(245, 240, 232, 0.12)"] { background: rgba(40, 34, 27, .10) !important; } html[data-tema="claro"] [style*="background:rgba(245,240,232,.14)"], html[data-tema="claro"] [style*="background: rgba(245, 240, 232, 0.14)"] { background: rgba(40, 34, 27, .12) !important; } html[data-tema="claro"] [style*="background:rgba(245,240,232,.16)"], html[data-tema="claro"] [style*="background: rgba(245, 240, 232, 0.16)"] { background: rgba(40, 34, 27, .13) !important; } /* ----------------------------------------------------------------- bordas */ /* mesma tinta, mesmo peso: só o sentido inverte (creme sobre preto vira marrom sobre papel). "solid …" e "dashed …" para não engolir um background por engano. */ html[data-tema="claro"] [style*="solid rgba(245,240,232,.03)"], html[data-tema="claro"] [style*="solid rgba(245, 240, 232, 0.03)"] { border-color: rgba(40, 34, 27, .06) !important; } html[data-tema="claro"] [style*="solid rgba(245,240,232,.06)"], html[data-tema="claro"] [style*="solid rgba(245, 240, 232, 0.06)"] { border-color: rgba(40, 34, 27, .08) !important; } html[data-tema="claro"] [style*="solid rgba(245,240,232,.07)"], html[data-tema="claro"] [style*="solid rgba(245, 240, 232, 0.07)"] { border-color: rgba(40, 34, 27, .09) !important; } html[data-tema="claro"] [style*="solid rgba(245,240,232,.08)"], html[data-tema="claro"] [style*="solid rgba(245, 240, 232, 0.08)"] { border-color: rgba(40, 34, 27, .10) !important; } html[data-tema="claro"] [style*="solid rgba(245,240,232,.10)"], html[data-tema="claro"] [style*="solid rgba(245, 240, 232, 0.1)"] { border-color: rgba(40, 34, 27, .12) !important; } html[data-tema="claro"] [style*="solid rgba(245,240,232,.12)"], html[data-tema="claro"] [style*="solid rgba(245, 240, 232, 0.12)"] { border-color: rgba(40, 34, 27, .14) !important; } html[data-tema="claro"] [style*="solid rgba(245,240,232,.14)"], html[data-tema="claro"] [style*="solid rgba(245, 240, 232, 0.14)"] { border-color: rgba(40, 34, 27, .16) !important; } html[data-tema="claro"] [style*="solid rgba(245,240,232,.16)"], html[data-tema="claro"] [style*="solid rgba(245, 240, 232, 0.16)"] { border-color: rgba(40, 34, 27, .18) !important; } html[data-tema="claro"] [style*="solid rgba(245,240,232,.18)"], html[data-tema="claro"] [style*="solid rgba(245, 240, 232, 0.18)"] { border-color: rgba(40, 34, 27, .20) !important; } html[data-tema="claro"] [style*="solid rgba(245,240,232,.24)"], html[data-tema="claro"] [style*="solid rgba(245, 240, 232, 0.24)"] { border-color: rgba(40, 34, 27, .26) !important; } html[data-tema="claro"] [style*="dashed rgba(245,240,232,.22)"], html[data-tema="claro"] [style*="dashed rgba(245, 240, 232, 0.22)"] { border-color: rgba(40, 34, 27, .28) !important; } html[data-tema="claro"] [style*="dashed rgba(245,240,232,.24)"], html[data-tema="claro"] [style*="dashed rgba(245, 240, 232, 0.24)"] { border-color: rgba(40, 34, 27, .28) !important; } html[data-tema="claro"] [style*="dashed rgba(245,240,232,.3)"], html[data-tema="claro"] [style*="dashed rgba(245, 240, 232, 0.3)"] { border-color: rgba(40, 34, 27, .32) !important; } /* ----------------------------------------------------------------- textos */ html[data-tema="claro"] [style*="color:#F5F0E8"], html[data-tema="claro"] [style*="color: rgb(245, 240, 232)"] { color: #28221B !important; } /* o creme meio apagado do "+ Abrir outra loja" — sem esta regra ele some no papel */ html[data-tema="claro"] [style*="color:rgba(245,240,232,.72)"], html[data-tema="claro"] [style*="color: rgba(245, 240, 232, 0.72)"] { color: rgba(40, 34, 27, .78) !important; } html[data-tema="claro"] [style*="color:#DCD6CC"], html[data-tema="claro"] [style*="color: rgb(220, 214, 204)"] { color: #453D33 !important; } html[data-tema="claro"] [style*="color:#B8AEA1"], html[data-tema="claro"] [style*="color: rgb(184, 174, 161)"] { color: #5C5347 !important; } html[data-tema="claro"] [style*="color:#8E867C"], html[data-tema="claro"] [style*="color: rgb(142, 134, 124)"] { color: #6E6355 !important; } html[data-tema="claro"] [style*="color:#A29A90"], html[data-tema="claro"] [style*="color: rgb(162, 154, 144)"] { color: #6E6355 !important; } html[data-tema="claro"] [style*="color:#6A645C"], html[data-tema="claro"] [style*="color: rgb(106, 100, 92)"] { color: #8B8071 !important; } /* laranjas de leitura escurecem para valer em cima de papel */ html[data-tema="claro"] [style*="color:#F08A4B"], html[data-tema="claro"] [style*="color: rgb(240, 138, 75)"] { color: #BC4D0F !important; } html[data-tema="claro"] [style*="color:#F5BC96"], html[data-tema="claro"] [style*="color: rgb(245, 188, 150)"] { color: #96430F !important; } html[data-tema="claro"] [style*="color:#F5A65B"], html[data-tema="claro"] [style*="color: rgb(245, 166, 91)"] { color: #AD5A12 !important; } html[data-tema="claro"] [style*="color:#E0B080"], html[data-tema="claro"] [style*="color: rgb(224, 176, 128)"] { color: #8A6018 !important; } /* o azul de "onde você está" (afio-cores.js) escurece em cima de papel */ html[data-tema="claro"] [style*="color:#7FB2FF"], html[data-tema="claro"] [style*="color: rgb(127, 178, 255)"] { color: #1F5FBF !important; } html[data-tema="claro"] a { color: #BC4D0F; } html[data-tema="claro"] a:hover { color: #96430F; } /* verde de "tudo certo" e vermelhos de atenção */ html[data-tema="claro"] [style*="color:#9DD7BD"], html[data-tema="claro"] [style*="color: rgb(157, 215, 189)"] { color: #20714C !important; } html[data-tema="claro"] [style*="color:#E8A0A8"], html[data-tema="claro"] [style*="color: rgb(232, 160, 168)"] { color: #AF3C46 !important; } html[data-tema="claro"] [style*="color:#E8A99A"], html[data-tema="claro"] [style*="color: rgb(232, 169, 154)"] { color: #A64830 !important; } html[data-tema="claro"] [style*="color:#E0876A"], html[data-tema="claro"] [style*="color: rgb(224, 135, 106)"] { color: #AC4A28 !important; } /* ------------------------------------------------------- gráficos em SVG */ /* fatia "vazia" do anel e bolinha de legenda: o cinza-fumaça vira palha */ html[data-tema="claro"] [stroke="#4A4640"] { stroke: #E2D9C9 !important; } html[data-tema="claro"] [fill="#4A4640"] { fill: #E2D9C9 !important; } html[data-tema="claro"] [style*="background:#4A4640"], html[data-tema="claro"] [style*="background: rgb(74, 70, 64)"] { background: #E2D9C9 !important; } /* textos desenhados dentro do SVG */ html[data-tema="claro"] [fill="#F5F0E8"] { fill: #28221B !important; } html[data-tema="claro"] [fill="#6A645C"] { fill: #8B8071 !important; } html[data-tema="claro"] [fill="#8E877E"] { fill: #6E6355 !important; } html[data-tema="claro"] [style*="fill:#3A3531"], html[data-tema="claro"] [style*="fill: rgb(58, 53, 49)"] { fill: #D8CFC0 !important; } html[data-tema="claro"] [style*="fill:#17161A"], html[data-tema="claro"] [style*="fill: rgb(23, 22, 26)"] { fill: #FCF9F4 !important; } /* --------------------------------------------- toques que não são cor pura */ /* o fio que some para a direita nos títulos de seção */ html[data-tema="claro"] [style*="linear-gradient(90deg,rgba(245,240,232,.14),transparent)"], html[data-tema="claro"] [style*="linear-gradient(90deg, rgba(245, 240, 232, 0.14), transparent)"] { background: linear-gradient(90deg, rgba(40, 34, 27, .16), transparent) !important; } /* o cartão-destaque com véu laranja sobre quase-preto */ html[data-tema="claro"] [style*="linear-gradient(155deg,rgba(232,101,26,.14),rgba(20,20,22,.96))"], html[data-tema="claro"] [style*="linear-gradient(155deg, rgba(232, 101, 26, 0.14), rgba(20, 20, 22, 0.96))"] { background: linear-gradient(155deg, rgba(232, 101, 26, .10), rgba(252, 249, 244, .97)) !important; } /* sombras pesadas de tela escura clareiam para não virar borrão no papel */ html[data-tema="claro"] [style*="box-shadow:0 18px 44px rgba(0,0,0,.55)"], html[data-tema="claro"] [style*="box-shadow: rgba(0, 0, 0, 0.55) 0px 18px 44px"] { box-shadow: 0 18px 44px rgba(74, 55, 35, .18) !important; } html[data-tema="claro"] [style*="box-shadow:0 8px 24px rgba(0,0,0,.35)"], html[data-tema="claro"] [style*="box-shadow: rgba(0, 0, 0, 0.35) 0px 8px 24px"] { box-shadow: 0 8px 24px rgba(74, 55, 35, .16) !important; } /* a logo é um PNG de letras creme: no papel ela sumia. brightness baixa escurece o traço sem trocar o arquivo nem mexer no escuro. */ html[data-tema="claro"] img[alt="AFIO"] { filter: brightness(.25); } /* ------------------------------------------------ cantos com cor própria */ /* célula do calendário do dono (o dia de hoje é laranja e fica igual) */ html[data-tema="claro"] [style*="background:#18181A"], html[data-tema="claro"] [style*="background: rgb(24, 24, 26)"] { background: #F1EAE0 !important; } /* a linha "é a vez" da agenda: o realce escuro-quente vira creme-quente */ html[data-tema="claro"] [style*="background:#1D1613"], html[data-tema="claro"] [style*="background: rgb(29, 22, 19)"] { background: #FDF3E7 !important; } /* bolinha de horário indisponível no quadro de horários */ html[data-tema="claro"] [style*="background:#3D3A36"], html[data-tema="claro"] [style*="background: rgb(61, 58, 54)"] { background: #DDD5C9 !important; } /* texto de opção desligada e o "Lembrar depois" da faixa */ html[data-tema="claro"] [style*="color:#4A453F"], html[data-tema="claro"] [style*="color: rgb(74, 69, 63)"] { color: #B9B0A3 !important; } html[data-tema="claro"] [style*="color:#6E675F"], html[data-tema="claro"] [style*="color: rgb(110, 103, 95)"] { color: #877D6F !important; } html[data-tema="claro"] [style*="color:#9D9488"], html[data-tema="claro"] [style*="color: rgb(157, 148, 136)"] { color: #6E6355 !important; } /* trilho fino de rolagem dentro das listas */ html[data-tema="claro"] [style*="scrollbar-color:#2A2724"] { scrollbar-color: #C9BFB2 transparent !important; } /* hover do menu da conta mora numa folha de estilo do Painel, não em inline */ html[data-tema="claro"] [data-m="conta-menu"] [role="menuitem"]:hover { background: rgba(40, 34, 27, .06); } /* a barra de setores fixa do celular (regra do afio-mobile.css, que este arquivo vem depois e com o mesmo peso) */ @media (max-width: 900px) { html[data-tema="claro"] [data-m="dash-setores"][data-m] { background: rgba(247, 242, 235, .96) !important; border-top-color: rgba(40, 34, 27, .14); } html[data-tema="claro"] [data-m="dash-setores"][data-m]::after { background: linear-gradient(90deg, rgba(247, 242, 235, 0), rgba(247, 242, 235, .96)); } }