/* ================================================================= QR-PIX — style.css Estilos compartilhados por todas as telas do app. Organização: 1. Tokens (variáveis CSS: temas, geometria) 2. Reset & Base 3. Top App Bar + Logo 4. Botão Instalar 5. Diálogo genérico 6. Botões de rodapé (compartilhados) 7. Material Symbols 8. Supressão de overlays 9. Home (index.html): layout e cards ================================================================= */ /* ================================================================= 1. TOKENS Como o ui.js aplica os temas: - tema "light" → removeAttribute("data-theme") (sem atributo no ) - tema "dark" → setAttribute("data-theme", "dark") - tema "system"→ igual dark ou nenhum atributo, dependendo do SO Portanto precisamos de 4 camadas de especificidade: a) :root → tokens claros (base) b) [data-theme="light"] → tokens claros explícitos (override final) c) [data-theme="dark"] → tokens escuros explícitos d) @media dark + :root:not([data-theme]) → sistema em dark sem toggle manual A camada (b) garante que, mesmo que (d) tenha alta especificidade, um [data-theme="light"] no sempre vence. ================================================================= */ /* ---- a) Tokens claros base ---- */ :root { --app-height: 100dvh; --topbar-height: 64px; --bottombar-height: 77px; /* Material You — Tema Azul (Light) */ --md-sys-color-primary: #006493; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #cde5ff; --md-sys-color-on-primary-container: #001e30; --md-sys-color-secondary: #4f616e; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #d2e5f5; --md-sys-color-on-secondary-container: #0b1d28; --md-sys-color-tertiary: #62597c; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #e8deff; --md-sys-color-on-tertiary-container: #1e1635; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #410002; --md-sys-color-background: #f6fafe; --md-sys-color-on-background: #181c20; --md-sys-color-surface: #f6fafe; --md-sys-color-on-surface: #181c20; --md-sys-color-on-surface-variant: #40484d; --md-sys-color-surface-variant: #dce4e9; --md-sys-color-outline: #70787d; --md-sys-color-outline-variant: #c0c8cd; --md-sys-color-surface-container-lowest: #f0f4f8; --md-sys-color-surface-container-low: #eaeff3; --md-sys-color-surface-container: #e4e9ed; --md-sys-color-surface-container-high: #dee3e7; --md-sys-color-surface-container-highest:#d9dee2; /* Geometria */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; } /* ---- b) Tokens claros explícitos (MAIOR especificidade que @media dark) ---- */ /* Necessário porque ui.js usa removeAttribute() para o tema light, */ /* mas o seletor de atributo [data-theme="light"] ainda pode ser injetado */ /* por scripts externos ou futuras versões do ui.js. */ /* Também serve de "escudo" contra o @media dark abaixo. */ [data-theme="light"] { --md-sys-color-primary: #006493; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #cde5ff; --md-sys-color-on-primary-container: #001e30; --md-sys-color-secondary: #4f616e; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #d2e5f5; --md-sys-color-on-secondary-container: #0b1d28; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #410002; --md-sys-color-background: #f6fafe; --md-sys-color-on-background: #181c20; --md-sys-color-surface: #f6fafe; --md-sys-color-on-surface: #181c20; --md-sys-color-on-surface-variant: #40484d; --md-sys-color-surface-variant: #dce4e9; --md-sys-color-outline: #70787d; --md-sys-color-outline-variant: #c0c8cd; --md-sys-color-surface-container-lowest: #f0f4f8; --md-sys-color-surface-container-low: #eaeff3; --md-sys-color-surface-container: #e4e9ed; --md-sys-color-surface-container-high: #dee3e7; --md-sys-color-surface-container-highest:#d9dee2; } /* ---- c) Tokens escuros explícitos ---- */ [data-theme="dark"] { --md-sys-color-primary: #90caf9; --md-sys-color-on-primary: #003353; --md-sys-color-primary-container: #004b76; --md-sys-color-on-primary-container: #cde5ff; --md-sys-color-secondary: #b6c9d8; --md-sys-color-on-secondary: #21323f; --md-sys-color-secondary-container: #374956; --md-sys-color-on-secondary-container: #d2e5f5; --md-sys-color-background: #101518; --md-sys-color-on-background: #e0e4e8; --md-sys-color-surface: #101518; --md-sys-color-on-surface: #e0e4e8; --md-sys-color-on-surface-variant: #c0c8cd; --md-sys-color-surface-variant: #40484d; --md-sys-color-outline: #8a9297; --md-sys-color-outline-variant: #40484d; --md-sys-color-surface-container-lowest: #0b1014; --md-sys-color-surface-container-low: #181c20; --md-sys-color-surface-container: #1c2024; --md-sys-color-surface-container-high: #262a2e; --md-sys-color-surface-container-highest:#303438; } /* ---- d) Preferência do sistema para dark (sem toggle manual) ---- */ /* Só aplica quando não tem nenhum data-theme (tema = "system" no ui.js) */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --md-sys-color-primary: #90caf9; --md-sys-color-on-primary: #003353; --md-sys-color-primary-container: #004b76; --md-sys-color-on-primary-container: #cde5ff; --md-sys-color-secondary: #b6c9d8; --md-sys-color-on-secondary: #21323f; --md-sys-color-secondary-container: #374956; --md-sys-color-on-secondary-container: #d2e5f5; --md-sys-color-background: #101518; --md-sys-color-on-background: #e0e4e8; --md-sys-color-surface: #101518; --md-sys-color-on-surface: #e0e4e8; --md-sys-color-on-surface-variant: #c0c8cd; --md-sys-color-surface-variant: #40484d; --md-sys-color-outline: #8a9297; --md-sys-color-outline-variant: #40484d; --md-sys-color-surface-container-lowest: #0b1014; --md-sys-color-surface-container-low: #181c20; --md-sys-color-surface-container: #1c2024; --md-sys-color-surface-container-high: #262a2e; --md-sys-color-surface-container-highest:#303438; } } /* Eye Care — Modo quente / noturno (Light) */ [data-eyecare="on"], [data-eyecare="night"] { --md-sys-color-primary: #8b5000; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #ffddb8; --md-sys-color-on-primary-container: #2c1600; --md-sys-color-secondary: #6e5b3e; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #f9deb9; --md-sys-color-on-secondary-container: #261a05; --md-sys-color-background: #fff8f0; --md-sys-color-on-background: #201b13; --md-sys-color-surface: #fff8f0; --md-sys-color-on-surface: #201b13; --md-sys-color-on-surface-variant: #504535; --md-sys-color-surface-variant: #eee0cb; --md-sys-color-surface-container-lowest: #fffbf5; --md-sys-color-surface-container-low: #f8f0e3; --md-sys-color-surface-container: #f2e9da; --md-sys-color-surface-container-high: #ece2d2; --md-sys-color-surface-container-highest:#e6dcc9; --md-sys-color-outline: #8a7360; --md-sys-color-outline-variant: #d4c4ad; } /* Eye Care — Modo quente / noturno (Dark) */ [data-theme="dark"][data-eyecare="on"], [data-theme="dark"][data-eyecare="night"] { --md-sys-color-primary: #ffb868; --md-sys-color-on-primary: #4a2800; --md-sys-color-primary-container: #6a3c00; --md-sys-color-on-primary-container: #ffddb8; --md-sys-color-secondary: #dbc3a0; --md-sys-color-on-secondary: #3d2e16; --md-sys-color-secondary-container: #55442a; --md-sys-color-on-secondary-container: #f9deb9; --md-sys-color-background: #191208; --md-sys-color-on-background: #ede0cf; --md-sys-color-surface: #191208; --md-sys-color-on-surface: #ede0cf; --md-sys-color-on-surface-variant: #d0bfa8; --md-sys-color-surface-variant: #4e3e2a; --md-sys-color-surface-container-lowest: #120d04; --md-sys-color-surface-container-low: #201810; --md-sys-color-surface-container: #271f15; --md-sys-color-surface-container-high: #31261a; --md-sys-color-surface-container-highest:#3c2f20; --md-sys-color-outline: #9e8870; --md-sys-color-outline-variant: #4e3e2a; } /* ================================================================= 2. RESET & BASE ================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } *:focus, *:focus-visible { outline: none !important; } html, body { height: 100%; overflow: hidden; background-color: var(--md-sys-color-background); color: var(--md-sys-color-on-surface); font-family: "Roboto", sans-serif; -webkit-font-smoothing: antialiased; } /* ================================================================= 3. TOP APP BAR + LOGO ================================================================= */ .top-app-bar { display: flex; align-items: center; justify-content: space-between; height: var(--topbar-height, 64px); padding: 0 4px 0 16px; background-color: var(--md-sys-color-background); border-bottom: 1px solid var(--md-sys-color-outline-variant); flex-shrink: 0; position: relative; z-index: 20; } .top-app-bar__start { display: flex; align-items: center; gap: 4px; } .top-app-bar__actions { display: flex; align-items: center; } .app-logo { display: flex; align-items: center; gap: 8px; height: 32px; pointer-events: none; user-select: none; -webkit-user-select: none; } .app-logo svg { height: 32px; width: auto; flex-shrink: 0; pointer-events: none; -webkit-user-drag: none; } .app-logo__name { font-size: 18px; font-weight: 700; letter-spacing: 0.04em; color: var(--md-sys-color-on-surface); line-height: 1; pointer-events: none; user-select: none; -webkit-user-select: none; } /* ================================================================= 4. BOTÃO INSTALAR (top app bar) ================================================================= */ .install-topbar-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; height: 36px; border-radius: var(--radius-full); background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-secondary-container); border: none; cursor: pointer; font-family: "Roboto", sans-serif; font-size: 13px; font-weight: 500; white-space: nowrap; transition: background-color 150ms; margin-right: 4px; } .install-topbar-btn:active { background-color: color-mix( in srgb, var(--md-sys-color-primary-container) 85%, var(--md-sys-color-on-secondary-container) ); } .install-topbar-btn .material-symbols-rounded { font-size: 18px; } .install-topbar-btn__label { font-size: 13px; font-weight: 500; } /* ================================================================= 5. DIÁLOGO GENÉRICO (compartilhado por todas as telas) ================================================================= */ .dialog-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 200ms ease; } .dialog-scrim.open { opacity: 1; pointer-events: all; } .dialog-container { background: var(--md-sys-color-surface-container-high); border-radius: var(--radius-xl); padding: 24px; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24); transform: scale(0.92); transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); } .dialog-scrim.open .dialog-container { transform: scale(1); } .dialog-title { font-size: 20px; font-weight: 500; color: var(--md-sys-color-on-surface); line-height: 1.3; } .dialog-body { font-size: 14px; color: var(--md-sys-color-on-surface-variant); line-height: 1.5; } .dialog-key-preview { font-family: "Roboto Mono", monospace; font-size: 13px; color: var(--md-sys-color-on-surface); word-break: break-all; } .dialog-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: nowrap; } .dialog-actions md-text-button, .dialog-actions md-filled-button { flex-shrink: 0; white-space: nowrap; --md-filled-button-container-height: 40px; --md-text-button-container-height: 40px; } .delete-confirm-btn { --md-filled-button-container-color: var(--md-sys-color-error, #b3261e); --md-filled-button-label-text-color: #fff; } /* ================================================================= 6. BOTÕES DE RODAPÉ (compartilhados entre telas) ================================================================= */ .save-btn, .confirm-btn, .home-btn { width: 100%; overflow: visible; --md-filled-button-container-height: 48px; --md-filled-button-icon-size: 20px; --md-filled-button-container-shape: var(--radius-lg); } md-filled-button md-icon, md-filled-tonal-button md-icon { font-size: 20px !important; width: 20px; height: 20px; overflow: visible; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; } /* ================================================================= 7. MATERIAL SYMBOLS (fonte de ícones) ================================================================= */ .material-symbols-rounded, md-icon { font-family: "Material Symbols Rounded" !important; font-weight: 400; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; } /* ================================================================= 8. SUPRESSÃO DE OVERLAYS / BARRAS DE PROGRESSO (elementos legados que não devem mais aparecer) ================================================================= */ #eyecare-overlay, .eyecare-overlay, .top-loading-bar, .loading-line, .page-loader, progress, md-linear-progress { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* ================================================================= 9. HOME (index.html) ================================================================= */ /* --- Layout principal --- */ .home-content { display: flex; flex-direction: column; gap: 12px; padding: 20px 16px 32px; max-width: 600px; margin: 0 auto; width: 100%; height: calc(var(--app-height, 100dvh) - var(--topbar-height, 64px)); overflow-y: auto; overflow-x: hidden; box-sizing: border-box; } @supports (padding-bottom: env(safe-area-inset-bottom)) { .home-content { padding-bottom: calc(32px + env(safe-area-inset-bottom)); } } /* --- Label de seção --- */ .home-section-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--md-sys-color-primary); padding: 8px 4px 0; } /* --- Cards de ação --- */ .action-card { display: flex; align-items: center; gap: 16px; padding: 18px 16px; border-radius: 24px; background-color: var(--md-sys-color-surface-container-low); border: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 62%, transparent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); cursor: pointer; text-decoration: none; color: inherit; transition: background-color 150ms ease, box-shadow 150ms ease; -webkit-tap-highlight-color: transparent; } .action-card:active { background-color: var(--md-sys-color-surface-container); box-shadow: none; } .action-card__icon-wrap { width: 52px; height: 52px; border-radius: 16px; background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .action-card__icon-wrap .material-symbols-rounded { font-size: 26px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .action-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .action-card__title { font-size: 16px; font-weight: 500; color: var(--md-sys-color-on-surface); line-height: 1.25; } .action-card__desc { font-size: 13px; color: var(--md-sys-color-on-surface-variant); line-height: 1.4; } .action-card__arrow { flex-shrink: 0; color: var(--md-sys-color-on-surface-variant); opacity: 0.5; } .action-card__arrow .material-symbols-rounded { font-size: 22px; } @media (max-width: 420px) { .home-content { padding: 16px 12px 28px; gap: 10px; } .action-card { padding: 16px 14px; border-radius: 20px; gap: 14px; } .action-card__icon-wrap { width: 48px; height: 48px; border-radius: 14px; } .action-card__title { font-size: 15px; } }