/** * Skin MultiCloud — derivada da Elastic (S15). * * --------------------------------------------------------------------- * POR QUE @import EM VEZ DE COPIAR O CSS DA ELASTIC * A Elastic é compilada de LESS, e a forma "correta" de trocar as cores * seria recompilar `colors.less`. Isso exigiria um build de LESS e * produziria uma CÓPIA completa do CSS do Roundcube — que precisaria ser * recompilada a cada atualização, sob pena de a skin ficar presa ao visual * de uma versão antiga enquanto o resto do webmail muda. * * Importar o CSS que a Elastic publicar e sobrescrever um punhado de * regras troca fidelidade total por manutenção quase nula: o * `docker compose pull` traz a Elastic nova e esta folha continua valendo. * O que está aqui é, deliberadamente, só o que carrega identidade — * logo, fundo da tela de login, barra de tarefas e botão primário. * * O @import é relativo a ESTE arquivo, então as URLs internas do CSS da * Elastic (fontes, ícones) continuam resolvendo a partir da pasta dela. * * `styles.min.css` ao lado é uma cópia idêntica: fora do modo de * desenvolvimento o Roundcube pede a versão minificada, e uma skin que só * traz `styles.css` carrega sem estilo nenhum. * --------------------------------------------------------------------- */ @import url("../../elastic/styles/styles.min.css"); /* --------------------------------------------------------------------- * Estes 7 tokens sao uma COPIA MANUAL do `:root` de * `public/assets/css/main.css`. O webmail roda noutro container e noutra * origem: nao ha como importar a folha do site, entao a unica coisa que * mantem as tres superficies na mesma cor e esta tabela -- e a disciplina * de mexer nas duas juntas. * * ⚠️ Ate a S34 elas tinham DIVERGIDO em silencio: `--mc-royal` era * `#0055ff` (o royal declarado no CLAUDE.md) enquanto o site ja usava * `#2563EB`/`#3B82F6` ha muitas sessoes, e `--mc-navy-800` e `--mc-ice` * nao tinham contrapartida nenhuma. O webmail era literalmente outro azul. * Alinhado ao SITE (decisao do usuario em 2026-09-15), que e a superficie * com contraste ja calculado e conferido em AA. * * origem de cada valor, em main.css: * --mc-navy-900 -> --bg-elev #0F172A * --mc-navy-800 -> --royal-600 #1D4ED8 (era #1e3a8a, sem par) * --mc-royal -> --royal #2563EB (era #0055ff) * --mc-sky -> --sky #38BDF8 * --mc-ice -> --text #E6ECF7 (era #f8fafc, sem par) * --mc-radius -> --radius 14px (entrou na S52) * --mc-radius-sm -> --radius-sm 9px (entrou na S52) * --------------------------------------------------------------------- */ :root { --mc-navy-900: #0f172a; --mc-navy-800: #1d4ed8; --mc-royal: #2563eb; --mc-sky: #38bdf8; --mc-ice: #e6ecf7; /* Geometria. Ate a S52 a skin nao tinha token de raio nenhum e os valores viviam soltos em px -- o botao de recuperacao carregava um `8px` literal onde o sistema diz 9px (divida registrada na S50). */ --mc-radius: 14px; --mc-radius-sm: 9px; } /* --- Tela de login: CLARO e ESCURO ---------------------------------- */ /* O Roundcube já resolve o modo sozinho, inclusive aqui: `color_mode_init()` (skins/elastic/ui.js) roda em toda página, lê o cookie `colorMode` e, na falta dele, `prefers-color-scheme`, e põe `dark-mode` no . O que o login não tem é o BOTÃO — ele mora no #taskmenu, que só existe depois de entrar; quem o repõe aqui é o plugin `multicloud_links`, gravando o MESMO cookie, para a escolha feita na porta valer dentro da sessão. Por isso o tema claro é a BASE desta folha e o escuro vem sob `html.dark-mode`: seguir o sistema do cliente é o comportamento do próprio Roundcube depois do login, e a tela de entrada não tem por que divergir. ⚠️ Até a S23 o login era escuro à força, e o CSS de marca vivia fora de `html.dark-mode` de propósito. Não é mais assim — regra de login sem tema declarado agora atinge OS DOIS. */ .task-login #layout, .task-login #layout-content { background: linear-gradient(160deg, #f8fafc 0%, #eef3fb 55%, #e2eaf7 100%); } html.dark-mode .task-login #layout, html.dark-mode .task-login #layout-content { background: linear-gradient(160deg, var(--mc-navy-900) 0%, #132043 55%, var(--mc-navy-800) 100%); } /* A marca é o que este webmail tem de diferente do webmail genérico do provedor — então ela aparece. A elastic limita o logo a 100px de altura e ainda o deixa em `opacity: .8`; a S15 apertou para 64px, e o resultado era um logo pequeno e apagado no meio da tela. Aqui quem manda é a LARGURA (o lockup é 214×52, ~4:1: limitar pela altura desperdiça a tela), com a opacidade de volta a 1. */ .task-login #logo { max-height: 120px; max-width: min(78vw, 360px); height: auto; top: 12vh; opacity: 1; margin-bottom: .85rem; } /* Tela baixa (notebook 768p com a barra do navegador, celular deitado): o logo cede espaço antes do formulário — abaixo de ~640px de altura o conjunto logo+cartão não cabia e a caixa saía da dobra. */ @media (max-height: 640px) { .task-login #logo { max-width: min(62vw, 260px); top: 6vh; margin-bottom: .5rem; } } /* O SRC do logo não é problema de CSS: o ui.js troca por `rcmail.env.additional_logos.dark`, alimentado pela chave `*[dark]` do `skin_logo`. O padrão (`*`) é a arte de FUNDO CLARO — wordmark navy. ⚠️ No brand kit o sufixo `-light` diz a PALETA (fundo claro) e no Roundcube o sufixo `-dark` diz o MODO: a tradução inverte o sufixo, e é por isso que quem copia os arquivos é o `gen_brand.php --icons`, não a mão. */ /* Cartão — claro */ .task-login #login-form { padding: 1.5rem 1.25rem 1.25rem; background: #fff; border: 1px solid rgba(15, 23, 42, .08); border-radius: var(--mc-radius); box-shadow: 0 18px 40px rgba(15, 23, 42, .14); color: var(--mc-navy-900); } /* Cartão — escuro (vidro navy) */ html.dark-mode .task-login #login-form { background: rgba(15, 23, 42, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(56, 189, 248, .18); box-shadow: 0 18px 40px rgba(2, 8, 23, .45); color: var(--mc-ice); } /* Sem `backdrop-filter` (navegador antigo) o fundo translúcido deixaria o degradê atravessar o cartão e o texto perderia contraste — fallback opaco. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html.dark-mode .task-login #login-form { background: #132043; } } html.dark-mode .task-login #login-form .propform .title, html.dark-mode .task-login #login-form label { color: rgba(248, 250, 252, .82); } html.dark-mode .task-login #login-form input.form-control, html.dark-mode .task-login #login-form select.form-control { background-color: rgba(2, 8, 23, .55); border-color: rgba(148, 163, 184, .35); color: var(--mc-ice); } html.dark-mode .task-login #login-form input.form-control::placeholder { color: rgba(248, 250, 252, .45); } html.dark-mode .task-login #login-form input.form-control:focus { background-color: rgba(2, 8, 23, .7); border-color: var(--mc-sky); box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .25); color: var(--mc-ice); } /* O autofill do Chrome pinta o campo de branco por dentro e ignora `background-color`; só o inset shadow o cobre. Sem isto, o cartão escuro aparece com dois campos brancos assim que o navegador preenche o login. */ html.dark-mode .task-login #login-form input.form-control:-webkit-autofill, html.dark-mode .task-login #login-form input.form-control:-webkit-autofill:hover, html.dark-mode .task-login #login-form input.form-control:-webkit-autofill:focus { -webkit-box-shadow: inset 0 0 0 1000px #132043; -webkit-text-fill-color: var(--mc-ice); caret-color: var(--mc-ice); } /* Rodapé e links da porta de entrada */ .task-login #layout-content > .footer, .task-login #layout > div > .footer { background: transparent; color: rgba(15, 23, 42, .6); } html.dark-mode .task-login #layout-content > .footer, html.dark-mode .task-login #layout > div > .footer { color: rgba(248, 250, 252, .7); } .task-login #login-form a, .task-login .multicloud-login-links a { color: var(--mc-royal); } html.dark-mode .task-login #login-form a, html.dark-mode .task-login .multicloud-login-links a { color: var(--mc-sky); } /* --- Seletor de tema no login --------------------------------------- */ /* Âncora, e não