/* ═══════════════════════════════════════════════════════════ themes.css — FieldOps · Sistema de Temas Aplicado via atributo data-theme="nome" no ═══════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════ TEMA 1 · SLATE — Padrão moderno (cinza-azulado profissional) ══════════════════════════════════════════════════════════ */ [data-theme="slate"] { --bg: #f0f2f5; --surface: #ffffff; --surface2: #f5f7fa; --surface3: #ebeef3; --text: #0f1923; --text2: #4a5568; --text3: #8a96a8; --border: rgba(15,25,35,0.10); --border2: rgba(15,25,35,0.055); --accent: #2563eb; --accent-bg: #dbeafe; --accent-text: #1d4ed8; --green: #059669; --green-bg: #d1fae5; --green-text: #065f46; --amber: #d97706; --amber-bg: #fef3c7; --amber-text: #92400e; --red: #dc2626; --red-bg: #fee2e2; --red-text: #991b1b; --purple: #7c3aed; --purple-bg: #ede9fe; --purple-text: #5b21b6; --sidebar-accent: #2563eb; --sidebar-bg: #ffffff; --sidebar-text: #0f1923; } [data-theme="slate"][data-dark="1"], [data-theme="slate"].dark { --bg: #0d1117; --surface: #161b22; --surface2:#1c2128; --surface3:#21262d; --text: #e6edf3; --text2: #8b949e; --text3: #484f58; --border: rgba(230,237,243,0.10); --border2: rgba(230,237,243,0.06); --accent-bg: #1a3a6e; --green-bg: #033a2c; --amber-bg: #3d2a00; --red-bg: #4a1212; --purple-bg: #2d1b6e; --sidebar-bg: #161b22; --sidebar-text:#e6edf3; } /* ══════════════════════════════════════════════════════════ TEMA 2 · OCEAN — Azul-petróleo / teal vibrante ══════════════════════════════════════════════════════════ */ [data-theme="ocean"] { --bg: #f0fafa; --surface: #ffffff; --surface2: #f0f9f9; --surface3: #e0f2f2; --text: #0d2626; --text2: #3d6666; --text3: #7aa3a3; --border: rgba(13,38,38,0.10); --border2: rgba(13,38,38,0.055); --accent: #0891b2; --accent-bg: #cffafe; --accent-text: #0e7490; --green: #059669; --green-bg: #d1fae5; --green-text: #065f46; --amber: #d97706; --amber-bg: #fef3c7; --amber-text: #92400e; --red: #e11d48; --red-bg: #ffe4e6; --red-text: #9f1239; --purple: #0e7490; --purple-bg: #cffafe; --purple-text: #155e75; --sidebar-accent: #0891b2; --sidebar-bg: #0d2626; --sidebar-text: #e0f2f2; } [data-theme="ocean"] .sidebar { background: #0d2626 !important; border-right-color: rgba(255,255,255,0.08) !important; } [data-theme="ocean"] .sidebar-logo-name, [data-theme="ocean"] .sidebar-logo-sub, [data-theme="ocean"] .user-name, [data-theme="ocean"] .user-role { color: #e0f2f2 !important; } [data-theme="ocean"] .nav-item { color: #7aa3a3 !important; } [data-theme="ocean"] .nav-item:hover { background: rgba(255,255,255,0.07) !important; color: #e0f2f2 !important; } [data-theme="ocean"] .nav-item.active { background: rgba(8,145,178,0.25) !important; color: #67e8f9 !important; } [data-theme="ocean"] .sidebar-footer { border-top-color: rgba(255,255,255,0.08) !important; } [data-theme="ocean"] .sidebar-logo-conn { color: #34d399 !important; } [data-theme="ocean"][data-dark="1"] { --bg: #061919; --surface: #0d2626; --surface2:#0f2e2e; --surface3:#143535; --text: #e0f2f2; --text2: #7aa3a3; --text3: #3d6666; --border: rgba(224,242,242,0.10); --border2: rgba(224,242,242,0.06); --accent-bg: #164e63; --green-bg: #033a2c; --amber-bg: #3d2a00; --red-bg: #4a1225; --purple-bg: #164e63; } /* ══════════════════════════════════════════════════════════ TEMA 3 · MIDNIGHT — Dark puro elegante ══════════════════════════════════════════════════════════ */ [data-theme="midnight"] { --bg: #09090b; --surface: #18181b; --surface2: #1e1e21; --surface3: #27272a; --text: #fafafa; --text2: #a1a1aa; --text3: #52525b; --border: rgba(255,255,255,0.10); --border2: rgba(255,255,255,0.055); --accent: #818cf8; --accent-bg: #1e1b4b; --accent-text: #a5b4fc; --green: #34d399; --green-bg: #022c22; --green-text: #6ee7b7; --amber: #fbbf24; --amber-bg: #2d1e00; --amber-text: #fcd34d; --red: #f87171; --red-bg: #2d0d0d; --red-text: #fca5a5; --purple: #c084fc; --purple-bg: #2d1541; --purple-text: #d8b4fe; --sidebar-bg: #09090b; --sidebar-text:#fafafa; } [data-theme="midnight"] .sidebar { background: #09090b !important; border-right-color: rgba(255,255,255,0.07) !important; } [data-theme="midnight"] .topbar { background: #18181b !important; border-bottom-color: rgba(255,255,255,0.07) !important; } /* ══════════════════════════════════════════════════════════ TEMA 4 · FOREST — Verde natureza / terra ══════════════════════════════════════════════════════════ */ [data-theme="forest"] { --bg: #f2f7f2; --surface: #ffffff; --surface2: #f0f5f0; --surface3: #e4ede4; --text: #0f2010; --text2: #3d6b40; --text3: #7aac7c; --border: rgba(15,32,16,0.10); --border2: rgba(15,32,16,0.055); --accent: #16a34a; --accent-bg: #dcfce7; --accent-text: #15803d; --green: #15803d; --green-bg: #dcfce7; --green-text: #14532d; --amber: #ca8a04; --amber-bg: #fef9c3; --amber-text: #854d0e; --red: #dc2626; --red-bg: #fee2e2; --red-text: #991b1b; --purple: #7e22ce; --purple-bg: #f3e8ff; --purple-text: #6b21a8; --sidebar-bg: #0f2010; --sidebar-text:#f0f5f0; } [data-theme="forest"] .sidebar { background: #0f2010 !important; border-right-color: rgba(255,255,255,0.08) !important; } [data-theme="forest"] .sidebar-logo-name, [data-theme="forest"] .sidebar-logo-sub, [data-theme="forest"] .user-name, [data-theme="forest"] .user-role { color: #f0f5f0 !important; } [data-theme="forest"] .nav-item { color: #7aac7c !important; } [data-theme="forest"] .nav-item:hover { background: rgba(255,255,255,0.07) !important; color: #f0f5f0 !important; } [data-theme="forest"] .nav-item.active { background: rgba(22,163,74,0.25) !important; color: #86efac !important; } [data-theme="forest"] .sidebar-footer { border-top-color: rgba(255,255,255,0.08) !important; } [data-theme="forest"] .sidebar-logo-conn { color: #86efac !important; } [data-theme="forest"][data-dark="1"] { --bg: #071208; --surface: #0f2010; --surface2:#142816; --surface3:#1a321c; --text: #f0f5f0; --text2: #7aac7c; --text3: #3d6b40; --border: rgba(240,245,240,0.10); --border2: rgba(240,245,240,0.06); --accent-bg: #14532d; --green-bg: #14532d; --amber-bg: #3d2a00; --red-bg: #4a1212; --purple-bg: #2d1541; } /* ══════════════════════════════════════════════════════════ TEMA 5 · FIRE — Laranja/vermelho corporativo ══════════════════════════════════════════════════════════ */ [data-theme="fire"] { --bg: #fff7f5; --surface: #ffffff; --surface2: #fff4f1; --surface3: #ffe8e3; --text: #1a0a06; --text2: #6b3020; --text3: #ac7060; --border: rgba(26,10,6,0.10); --border2: rgba(26,10,6,0.055); --accent: #ea580c; --accent-bg: #ffedd5; --accent-text: #c2410c; --green: #16a34a; --green-bg: #dcfce7; --green-text: #15803d; --amber: #d97706; --amber-bg: #fef3c7; --amber-text: #92400e; --red: #dc2626; --red-bg: #fee2e2; --red-text: #991b1b; --purple: #9333ea; --purple-bg: #f3e8ff; --purple-text: #7e22ce; --sidebar-bg: #1a0a06; --sidebar-text:#fff4f1; } [data-theme="fire"] .sidebar { background: #1a0a06 !important; border-right-color: rgba(255,255,255,0.08) !important; } [data-theme="fire"] .sidebar-logo-name, [data-theme="fire"] .sidebar-logo-sub, [data-theme="fire"] .user-name, [data-theme="fire"] .user-role { color: #fff4f1 !important; } [data-theme="fire"] .nav-item { color: #ac7060 !important; } [data-theme="fire"] .nav-item:hover { background: rgba(255,255,255,0.07) !important; color: #fff4f1 !important; } [data-theme="fire"] .nav-item.active { background: rgba(234,88,12,0.25) !important; color: #fb923c !important; } [data-theme="fire"] .sidebar-footer { border-top-color: rgba(255,255,255,0.08) !important; } [data-theme="fire"] .sidebar-logo-conn { color: #86efac !important; } [data-theme="fire"][data-dark="1"] { --bg: #130500; --surface: #1a0a06; --surface2:#211009; --surface3:#2a160e; --text: #fff4f1; --text2: #ac7060; --text3: #6b3020; --border: rgba(255,244,241,0.10); --border2: rgba(255,244,241,0.06); --accent-bg: #7c2d12; --green-bg: #14532d; --amber-bg: #3d2a00; --red-bg: #4a1212; --purple-bg: #2d1541; } /* ══════════════════════════════════════════════════════════ TRANSIÇÃO SUAVE ao trocar de tema ══════════════════════════════════════════════════════════ */ body, .sidebar, .topbar, .card, .kpi, table, th, td, .badge, .btn, .input, .modal, .nav-item, #fo-tooltip { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important; }