/* * ===== Teme de culoare + dimensiuni font ===== * Clasele theme-* si fs-* sunt aplicate pe din layout.php, pe baza preferintelor * din contul utilizatorului (admin.theme / admin.font_size). Tema implicita (Ocean, day) * este definita in :root din app.css — pagina de login o foloseste mereu, neschimbata. * Temele night seteaza si data-bs-theme="dark" pe (comutat tot din layout.php), * ceea ce intoarce automat componentele Bootstrap (modale, dropdown, formulare, tabele). */ /* ===== Trepte dimensiune font (normal = 100%, valoarea implicita a browserului) ===== */ html.fs-small { font-size: 87.5%; } html.fs-large { font-size: 112.5%; } /* ===== Day 1 — Indigo (fosta tema implicita, pastrata ca optiune) ===== */ html.theme-indigo { --brand: #4338ca; --brand-strong: #342c9e; --brand-rgb: 67, 56, 202; --brand-soft: #eef2ff; --brand-text: #4338ca; --navbar-bg: #4338ca; --surface-2: #fafafe; --surface-3: #f3f4fb; --surface-hover: #f7f8fd; --header-bg: #f8f8fd; --border-soft: #eceefa; --border-softer: #eef0f8; --border-strong: #e6e8f5; --text-heading: #363a5c; --text-soft: #6366a3; --text-soft-2: #4b4f7a; --accent-teal: #0891b2; } /* ===== Day 2 — Smarald (teal, aerisit) ===== */ html.theme-teal { --brand: #0f766e; --brand-strong: #0c5c56; --brand-rgb: 15, 118, 110; --brand-soft: #d6f5f0; --brand-text: #0f766e; --navbar-bg: #0f766e; --surface-2: #fafdfc; --surface-3: #eff7f4; --surface-hover: #f3faf8; --header-bg: #f5fbf9; --border-soft: #e2efeb; --border-softer: #e8f2ef; --border-strong: #dcebe6; --text-heading: #2f4a45; --text-soft: #5f7a74; --text-soft-2: #4a635e; --accent-teal: #0e7490; } /* ===== Day 3 — Grafit (fosta tema implicita, pastrata ca optiune) ===== */ html.theme-grafit { --brand: #111827; --brand-strong: #0a0e17; --brand-rgb: 17, 24, 39; --brand-soft: #e7e9ed; --brand-text: #111827; --navbar-bg: #111827; --surface-2: #f8fafc; --surface-3: #eef2f7; --surface-hover: #f1f5f9; --header-bg: #f8fafc; --border-soft: #e6eaf0; --border-softer: #edf0f4; --border-strong: #dde3ea; --text-heading: #131b2e; --text-soft: #5b6b85; --text-soft-2: #45536b; } /* ===== Day 4 — Roz (feminin, tonuri calde de pink) ===== */ html.theme-rose { --brand: #be185d; --brand-strong: #941349; --brand-rgb: 190, 24, 93; --brand-soft: #fce7f3; --brand-text: #be185d; --navbar-bg: #be185d; --surface-2: #fdfafc; --surface-3: #f9eff5; --surface-hover: #fbf4f8; --header-bg: #fcf6fa; --border-soft: #f3dfeb; --border-softer: #f5e5ee; --border-strong: #eed7e5; --text-heading: #53304a; --text-soft: #94687f; --text-soft-2: #6f4a63; --accent-teal: #0d9488; } /* ===== Day 5 — Lavanda (feminin, mov pastel) ===== */ html.theme-lavanda { --brand: #7e22ce; --brand-strong: #621ba1; --brand-rgb: 126, 34, 206; --brand-soft: #f3e8ff; --brand-text: #7e22ce; --navbar-bg: #7e22ce; --surface-2: #fbfafe; --surface-3: #f5f0fb; --surface-hover: #f8f5fc; --header-bg: #f9f6fd; --border-soft: #eae0f5; --border-softer: #ede5f7; --border-strong: #e4d8f2; --text-heading: #43305c; --text-soft: #7d6b94; --text-soft-2: #5f4b78; } /* ===== Day 6 — Chihlimbar (amber cald) ===== */ html.theme-amber { --brand: #b45309; --brand-strong: #92400e; --brand-rgb: 180, 83, 9; --brand-soft: #fef3c7; --brand-text: #b45309; --navbar-bg: #b45309; --surface-2: #fffdfa; --surface-3: #fef6ea; --surface-hover: #fef9f0; --header-bg: #fef8ee; --border-soft: #f5e6cc; --border-softer: #f7ecd9; --border-strong: #f0ddb8; --text-heading: #5c4419; --text-soft: #8a7250; --text-soft-2: #6b5636; } /* ===== Day 7 — Pădure (verde inchis) ===== */ html.theme-forest { --brand: #15803d; --brand-strong: #116932; --brand-rgb: 21, 128, 61; --brand-soft: #dcfce7; --brand-text: #15803d; --navbar-bg: #15803d; --surface-2: #fafdfb; --surface-3: #eef7f1; --surface-hover: #f2f9f4; --header-bg: #f4faf6; --border-soft: #dcece1; --border-softer: #e3f0e7; --border-strong: #d3e6da; --text-heading: #1f3d2b; --text-soft: #5b7a67; --text-soft-2: #446354; } /* ===== Day 8 — Rubin (rosu inchis) ===== */ html.theme-crimson { --brand: #b91c1c; --brand-strong: #991b1b; --brand-rgb: 185, 28, 28; --brand-soft: #fee2e2; --brand-text: #b91c1c; --navbar-bg: #b91c1c; --surface-2: #fffafa; --surface-3: #fbecec; --surface-hover: #fdf2f2; --header-bg: #fcefef; --border-soft: #f5dcdc; --border-softer: #f7e5e5; --border-strong: #f0d0d0; --text-heading: #5c1f1f; --text-soft: #8a5c5c; --text-soft-2: #6b4444; } /* ===== Night 1 — Slate (gri-albastru inchis, accente indigo) ===== */ html.theme-slate { --brand: #6366f1; --brand-strong: #4f46e5; --brand-rgb: 99, 102, 241; --brand-soft: #2b3358; --brand-text: #a5b4fc; --navbar-bg: #1e293b; --surface-1: #1e293b; --surface-2: #223049; --surface-3: #263752; --surface-hover: #24334e; --header-bg: #22304a; --border-soft: #2e3f5e; --border-softer: #2a3a57; --border-strong: #33456a; --card-border: rgba(255, 255, 255, .06); --card-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .3); --card-shadow-hover: 0 4px 8px rgba(0, 0, 0, .4), 0 12px 28px rgba(0, 0, 0, .45); --text-heading: #dbe3f0; --text-soft: #94a3b8; --text-soft-2: #a6b3c9; --bs-body-bg: #0f172a; --bs-body-color: #cbd5e1; --bs-border-color: #2e3f5e; } /* ===== Night 2 — Midnight (aproape negru, accente violet) ===== */ html.theme-midnight { --brand: #8b5cf6; --brand-strong: #7c3aed; --brand-rgb: 139, 92, 246; --brand-soft: #2b2344; --brand-text: #c4b5fd; --navbar-bg: #14141f; --surface-1: #15151f; --surface-2: #191925; --surface-3: #1e1e2c; --surface-hover: #1b1b28; --header-bg: #181824; --border-soft: #262637; --border-softer: #232332; --border-strong: #2c2c40; --card-border: rgba(255, 255, 255, .07); --card-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35); --card-shadow-hover: 0 4px 8px rgba(0, 0, 0, .45), 0 12px 28px rgba(0, 0, 0, .5); --text-heading: #e2e2ec; --text-soft: #8f8fa3; --text-soft-2: #a8a8bd; --bs-body-bg: #0a0a0f; --bs-body-color: #d4d4dd; --bs-border-color: #262637; } /* * ===== Night 3 — Oțel (albastru-oțel pe fundal intunecat) ===== * Navbar-ul foloseste un navy si mai inchis decat #111827 (tema de zi) - la fel ca la * celelalte teme night, --brand ramane un accent viu (albastru/cyan din logo), nu identic cu * --navbar-bg: pe fundal deja intunecat, un buton de aceeasi culoare cu navbar-ul s-ar * confunda cu fundalul (vezi de ce Slate/Midnight fac la fel). */ html.theme-otel { --brand: #4682b4; --brand-strong: #356287; --brand-rgb: 70, 130, 180; --brand-soft: #1c2b3a; --brand-text: #8ec1e8; --navbar-bg: #0a0e17; --surface-1: #0f1420; --surface-2: #141a2b; --surface-3: #182032; --surface-hover: #161c2e; --header-bg: #131829; --border-soft: #1f2740; --border-softer: #1c233a; --border-strong: #26304c; --card-border: rgba(255, 255, 255, .06); --card-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35); --card-shadow-hover: 0 4px 8px rgba(0, 0, 0, .45), 0 12px 28px rgba(0, 0, 0, .5); --text-heading: #dbe6f5; --text-soft: #8ea3c2; --text-soft-2: #a3b8d6; --accent-teal: #00d2ff; --bs-body-bg: #0a0e17; --bs-body-color: #cbd7ea; --bs-border-color: #1f2740; } /* .btn-primary (app.css) foloseste implicit o umbra colorata cu --brand-rgb ("glow") - pe fundal deja intunecat, cu un brand neutru gri, umbra colorata iese ciudat; o inlocuim cu o umbra neutra, discreta. */ html.theme-otel .btn-primary { box-shadow: 0 1px 3px rgba(0, 0, 0, .35); } html.theme-otel .btn-primary:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .4); } /* ===== Night 4 — Cărbune (verde smarald pe fundal negru-verzui) ===== */ html.theme-carbune { --brand: #10b981; --brand-strong: #059669; --brand-rgb: 16, 185, 129; --brand-soft: #0f2e26; --brand-text: #6ee7b7; --navbar-bg: #0b0f0d; --surface-1: #101614; --surface-2: #151d1a; --surface-3: #1a2420; --surface-hover: #182019; --header-bg: #161e1b; --border-soft: #223229; --border-softer: #1f2d25; --border-strong: #2a3d31; --card-border: rgba(255, 255, 255, .06); --card-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35); --card-shadow-hover: 0 4px 8px rgba(0, 0, 0, .45), 0 12px 28px rgba(0, 0, 0, .5); --text-heading: #dcf0e6; --text-soft: #8fae9d; --text-soft-2: #a3c2b1; --bs-body-bg: #0b0f0d; --bs-body-color: #cfe3d7; --bs-border-color: #223229; } /* ===== Night 5 — Vișiniu (rosu-visiniu pe fundal aproape negru) ===== */ html.theme-visiniu { --brand: #be123c; --brand-strong: #9f1239; --brand-rgb: 190, 18, 60; --brand-soft: #3a1220; --brand-text: #fb7185; --navbar-bg: #17090d; --surface-1: #170d10; --surface-2: #1d1216; --surface-3: #23161b; --surface-hover: #201419; --header-bg: #1c1115; --border-soft: #332026; --border-softer: #2c1b20; --border-strong: #3d2530; --card-border: rgba(255, 255, 255, .06); --card-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35); --card-shadow-hover: 0 4px 8px rgba(0, 0, 0, .45), 0 12px 28px rgba(0, 0, 0, .5); --text-heading: #f3dbe1; --text-soft: #b98d97; --text-soft-2: #cba3ac; --bs-body-bg: #17090d; --bs-body-color: #e8d2d7; --bs-border-color: #332026; } /* ===== Night 6 — Safir (albastru regal pe fundal navy inchis) ===== */ html.theme-safir { --brand: #2563eb; --brand-strong: #1d4ed8; --brand-rgb: 37, 99, 235; --brand-soft: #101a33; --brand-text: #93c5fd; --navbar-bg: #060b18; --surface-1: #0a1020; --surface-2: #0f1626; --surface-3: #141d2f; --surface-hover: #12192b; --header-bg: #101827; --border-soft: #1c2740; --border-softer: #182238; --border-strong: #22304d; --card-border: rgba(255, 255, 255, .06); --card-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35); --card-shadow-hover: 0 4px 8px rgba(0, 0, 0, .45), 0 12px 28px rgba(0, 0, 0, .5); --text-heading: #dbe6fb; --text-soft: #8fa3c4; --text-soft-2: #a3b8d9; --bs-body-bg: #060b18; --bs-body-color: #cddbf0; --bs-border-color: #1c2740; } /* ===== Ajustari comune pentru temele night ===== */ /* Antetele de tabel .table-light raman altfel albe pe fundal inchis. */ html[data-bs-theme="dark"] .table-light { --bs-table-bg: var(--surface-3); --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--border-strong); } html[data-bs-theme="dark"] .table { --bs-table-hover-bg: var(--surface-hover); --bs-table-hover-color: var(--bs-body-color); } /* Punctele colorate de stare au nevoie de contur deschis pe fundal inchis. */ html[data-bs-theme="dark"] .status-color-dot { border-color: rgba(255, 255, 255, .25); } /* ===== Pickerul de teme din Contul meu (tab "Temă" - buton simplu, aplicare instant prin JS, nu radio+label - vezi web/assets/js/account-theme.js) ===== */ .theme-option { display: block; width: 100%; font: inherit; color: inherit; cursor: pointer; background: var(--surface-1); border: 2px solid var(--border-soft); border-radius: .75rem; padding: .6rem .6rem .5rem; text-align: center; transition: border-color .12s ease, box-shadow .12s ease; } .theme-option:hover { border-color: var(--brand); } .theme-option.active { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .15); } .theme-option-name { font-size: .82rem; font-weight: 600; margin-top: .45rem; } .theme-option-mode { font-size: .7rem; color: var(--text-soft); } .theme-swatch { position: relative; display: block; width: 100%; height: 64px; border-radius: .55rem; border: 1px solid rgba(128, 128, 128, .25); overflow: hidden; background: var(--swatch-b); } /* Triunghi din colt in colt (clip-path), nu linear-gradient cu procente: procentele unui gradient sunt masurate pe axa gradientului, a carei lungime depinde de raportul latime/inaltime al cutiei la unghiul dat - pe un dreptunghi lat (100% x 64px) un stop fix la "45%" nu cade pe diagonala reala colt-in-colt, ceea ce lasa o fasie subtire din culoarea 1 vizibila la capatul dreptunghiului. clip-path e exact, indiferent de raport. */ .theme-swatch::before { content: ""; position: absolute; inset: 0; background: var(--swatch-a); clip-path: polygon(0 0, 100% 0, 0 100%); } /* Fiecare swatch arata culoarea barei de sus (--swatch-a) + fundalul paginii temei (--swatch-b). */ .theme-swatch-grafit { --swatch-a: #111827; --swatch-b: #ffffff; } .theme-swatch-indigo { --swatch-a: #4338ca; --swatch-b: #ffffff; } .theme-swatch-teal { --swatch-a: #0f766e; --swatch-b: #ffffff; } .theme-swatch-ocean { --swatch-a: #1e40af; --swatch-b: #ffffff; } .theme-swatch-rose { --swatch-a: #be185d; --swatch-b: #fdf7fa; } .theme-swatch-lavanda { --swatch-a: #7e22ce; --swatch-b: #fbf9fe; } .theme-swatch-amber { --swatch-a: #b45309; --swatch-b: #fffdfa; } .theme-swatch-forest { --swatch-a: #15803d; --swatch-b: #fafdfb; } .theme-swatch-crimson { --swatch-a: #b91c1c; --swatch-b: #fffafa; } .theme-swatch-slate { --swatch-a: #6366f1; --swatch-b: #0f172a; } .theme-swatch-midnight { --swatch-a: #8b5cf6; --swatch-b: #0a0a0f; } .theme-swatch-otel { --swatch-a: #4682b4; --swatch-b: #0a0e17; } .theme-swatch-carbune { --swatch-a: #10b981; --swatch-b: #0b0f0d; } .theme-swatch-visiniu { --swatch-a: #be123c; --swatch-b: #17090d; } .theme-swatch-safir { --swatch-a: #2563eb; --swatch-b: #060b18; }