/* ========================================================== theme.css — Central do Expositor 2026 CSS custom properties for light and dark themes. Light is the default (:root). Dark is activated via data-theme="dark" on , toggled by JS in default.ctp and persisted in localStorage under "ec-theme". Usage patterns: Solid colors → var(--ec-bg), var(--ec-success), etc. Opacity tints → rgba(var(--ec-ink), .12) auto-adapts per theme ========================================================== */ /* ---- Light theme (default) -------------------------------- */ :root { color-scheme: light; /* Base RGB for opacity tints. Light mode: dark ink on light paper. Use as: rgba(var(--ec-ink), .12) */ --ec-ink: 28,20,12; /* Backgrounds */ --ec-bg: #F3F4F6; /* page / content area */ --ec-bg-elevated: #F5F4F2; /* table headers, tabs */ --ec-bg-surface: #ffffff; /* modals, card bodies */ --ec-bg-input: #FBFAF8; /* form inputs */ /* Text */ --ec-text-strong: #1c1410; --ec-text-body: #374151; --ec-text-muted: #78716c; --ec-text-placeholder: #9ca3af; --ec-nav-text: #44403c; /* Brand accent (unchanged across themes) */ --ec-accent: #F97316; --ec-accent-bg: rgba(255,78,0,.10); --ec-accent-border: rgba(255,78,0,.30); --ec-accent-shadow: rgba(255,78,0,.12); /* Status — success */ --ec-success: #16a34a; --ec-success-bg: rgba(22,163,74,.12); --ec-success-border: rgba(22,163,74,.30); /* Status — danger */ --ec-danger: #dc2626; --ec-danger-bg: rgba(220,38,38,.08); --ec-danger-border: rgba(220,38,38,.25); /* Status — warning */ --ec-warning: #d97706; --ec-warning-bg: rgba(217,119,6,.12); --ec-warning-border: rgba(217,119,6,.30); /* Status — neutral / secondary */ --ec-neutral: #6b7280; --ec-neutral-bg: rgba(107,114,128,.10); --ec-neutral-border: rgba(107,114,128,.25); /* Info / blue */ --ec-info: #3b82f6; --ec-info-bg: rgba(59,130,246,.08); --ec-info-border: rgba(59,130,246,.22); /* Tables */ --ec-table-row-hover: rgba(28,20,12,.025); --ec-table-cell-border: rgba(28,20,12,.05); /* Switch — unchecked state (mirrors Bootstrap 5 defaults) */ --ec-switch-bg: #fff; --ec-switch-border: rgba(0,0,0,.25); --ec-switch-thumb: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,.25)'/%3e%3c/svg%3e"); } /* ---- Dark theme ------------------------------------------- */ [data-theme="dark"] { /* Ink now becomes light on dark */ --ec-ink: 245,235,220; /* Backgrounds */ --ec-bg: #120C09; --ec-bg-elevated: #161210; --ec-bg-surface: #1A1310; --ec-bg-input: #120C09; /* Text */ --ec-text-strong: #f0ece7; --ec-text-body: #f0ece7; --ec-text-muted: #7a7268; --ec-text-placeholder: #5a5248; --ec-nav-text: #BDBAB6; /* Brand accent tints shift slightly */ --ec-accent-bg: rgba(255,78,0,.13); --ec-accent-border: rgba(255,78,0,.35); /* Status — success */ --ec-success: #4ade80; --ec-success-bg: rgba(22,163,74,.18); --ec-success-border: rgba(22,163,74,.35); /* Status — danger */ --ec-danger: #f87171; --ec-danger-bg: rgba(220,38,38,.12); --ec-danger-border: rgba(220,38,38,.28); /* Status — warning */ --ec-warning: #fde68a; --ec-warning-bg: rgba(217,119,6,.18); --ec-warning-border: rgba(217,119,6,.25); /* Status — neutral */ --ec-neutral: #d1d5db; --ec-neutral-bg: rgba(107,114,128,.15); --ec-neutral-border: rgba(107,114,128,.30); /* Info / blue */ --ec-info: #93c5fd; --ec-info-bg: rgba(59,130,246,.12); --ec-info-border: rgba(59,130,246,.25); /* Tables */ --ec-table-row-hover: rgba(245,235,220,.03); --ec-table-cell-border: rgba(245,235,220,.05); /* Switch — unchecked state */ --ec-switch-bg: rgba(245,235,220,.10); --ec-switch-border: rgba(245,235,220,.30); --ec-switch-thumb: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(245,235,220,0.65)'/%3e%3c/svg%3e"); } /* ========================================================== Theme Selection Modal ========================================================== */ .ec-theme-modal .modal-content { background: var(--ec-bg-surface); border: 1px solid rgba(var(--ec-ink), .10); border-radius: 16px; } .ec-theme-modal .modal-title { color: var(--ec-text-strong); } .ec-theme-modal__subtitle { color: var(--ec-text-muted); font-size: .875rem; margin-bottom: 1.25rem; } .ec-theme-cards { display: flex; gap: 1rem; } .ec-theme-card { flex: 1; border: 2px solid rgba(var(--ec-ink), .12); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color .2s, box-shadow .2s; } .ec-theme-card:hover { border-color: var(--ec-accent); box-shadow: 0 0 0 3px rgba(var(--ec-ink), .06); } .ec-theme-card.active { border-color: var(--ec-accent); box-shadow: 0 0 0 3px rgba(249,115,22,.18); } .ec-theme-card__preview { display: flex; height: 90px; } .ec-theme-card__preview--light { background: #FBFAF8; } .ec-theme-card__preview--dark { background: #120C09; } .ec-theme-card__preview-sidebar { width: 30%; height: 100%; } .ec-theme-card__preview--light .ec-theme-card__preview-sidebar { background: #F0EDE8; } .ec-theme-card__preview--dark .ec-theme-card__preview-sidebar { background: #1E1410; } .ec-theme-card__preview-content { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 5px; justify-content: center; } .ec-theme-card__preview-bar { height: 8px; border-radius: 4px; } .ec-theme-card__preview--light .ec-theme-card__preview-bar { background: #E5E0D8; } .ec-theme-card__preview--dark .ec-theme-card__preview-bar { background: #2E2420; } .ec-theme-card__preview-bar--short { width: 60%; } .ec-theme-card__label { padding: .5rem .75rem; font-size: .85rem; font-weight: 500; color: var(--ec-text-strong); background: var(--ec-bg-elevated); display: flex; align-items: center; gap: .4rem; } .ec-theme-card__check { margin-left: auto; color: var(--ec-accent); opacity: 0; transition: opacity .15s; } .ec-theme-card.active .ec-theme-card__check { opacity: 1; } /* Botão de confirmação do modal de tema — definido aqui para garantir disponibilidade global, independente de qual CSS de página está carregado */ .ec-theme-confirm-btn { display: inline-flex; align-items: center; justify-content: center; background: #F97316; border: none; color: #ffffff; font-weight: 600; border-radius: 0.5rem; padding: .45rem 2rem; font-size: .9rem; cursor: pointer; transition: background .15s; white-space: nowrap; } .ec-theme-confirm-btn:hover { background: #e06510; }