/** * Stilurile proprii Arhivar, peste Bootstrap 5.3 (assets/bootstrap.min.css). * * Scris de mana, fara build step - se editeaza direct si se comite. * Cuprinde: tipografie, culorile temelor light/dark (valorile provin din * temele daisyUI folosite anterior), shell-ul de layout (sidebar + topbar, * pliere prin checkbox-uri, fara JS) si cateva clase-utilitare proprii. */ /* == Tipografie == */ :root { --bs-body-font-family: "Inclusive Sans", sans-serif; } strong { font-weight: 500; } .text-sm { font-size: 0.875rem; } .text-lg { font-size: 1.125rem; } /* == Teme (light implicit, dark prin data-bs-theme pe ) == */ :root, [data-bs-theme="light"] { --bs-body-bg: #fafbfc; --bs-body-color: #1e2328; --surface-bg: #ffffff; /* fundal card/sidebar/topbar (fost base-100) */ --hover-bg: #eef0f2; /* hover meniu si btn-ghost (fost base-200) */ --layout-border: #eef0f2; /* bordurile subtile ale shell-ului */ --layout-hover-strip: #dcdee0; /* banda de hover cand sidebar-ul e ascuns (fost base-300) */ --layout-sidebar-width: 256px; --layout-sidebar-background: var(--surface-bg); --layout-topbar-background: var(--surface-bg); } [data-bs-theme="dark"] { --bs-body-bg: #121416; --bs-body-color: #f0f4f8; --surface-bg: #181c20; --hover-bg: #22262a; --layout-border: #22262a; --layout-hover-strip: #2c3034; --layout-topbar-background: #181b1f; } .card { --bs-card-bg: var(--surface-bg); } /* == Layout: shell (sidebar + topbar + continut) == */ #layout-sidebar { position: relative; top: 0; bottom: 0; z-index: 10; display: flex; flex-direction: column; width: var(--layout-sidebar-width); min-width: var(--layout-sidebar-width); max-height: 100vh; background: var(--layout-sidebar-background); border-inline-end: 1px solid var(--layout-border); transition: margin 0.3s, top 0.3s, max-height 0.3s; } #layout-topbar { position: sticky; top: 0; z-index: 10; min-height: 4rem; max-height: 4rem; background: var(--layout-topbar-background); border-bottom: 1px solid var(--layout-border); transition: top 0.3s, margin 0.3s; } #layout-content { flex-grow: 1; padding: 0.75rem; } @media (min-width: 576px) { #layout-content { padding: 1rem; } } @media (min-width: 768px) { #layout-content { padding: 1.5rem; } } /* Antetul sidebar-ului (numele aplicatiei + butonul de ascundere densa). */ .sidebar-brand { display: flex; min-height: 4rem; align-items: center; justify-content: space-between; gap: 0.75rem; padding-inline: 1.25rem 1rem; } /* == Layout: pliere sidebar prin checkbox-uri (tiparul Nexus, fara JS) == */ #layout-sidebar-toggle-trigger:checked ~ #layout-sidebar { margin-inline-start: calc(var(--layout-sidebar-width) * -1); } /* Banda din marginea stanga care re-afiseaza sidebar-ul ascuns, la hover. */ #layout-sidebar-hover { position: fixed; top: 0; bottom: 0; left: 0; z-index: 11; display: none; width: 0.25rem; height: 100vh; background: var(--layout-hover-strip); } #layout-sidebar-hover-trigger:checked ~ #layout-sidebar { position: fixed; z-index: 12; margin-inline-start: calc(var(--layout-sidebar-width) * -1); } #layout-sidebar-hover-trigger:checked ~ #layout-sidebar-hover { display: block; } #layout-sidebar-hover:hover ~ #layout-sidebar, #layout-sidebar-hover-trigger:checked ~ #layout-sidebar:hover { z-index: 12; } @media (min-width: 992px) { #layout-sidebar-hover:hover ~ #layout-sidebar, #layout-sidebar-hover-trigger:checked ~ #layout-sidebar:hover { margin-inline-start: 0 !important; } } /* Pe ecrane mici sidebar-ul e ascuns implicit si se deschide peste continut. */ @media (max-width: 991.98px) { #layout-sidebar { position: fixed; z-index: 500; } #layout-sidebar-toggle-trigger:not(:checked) ~ #layout-sidebar { margin-inline-start: calc(var(--layout-sidebar-width) * -1); } #layout-sidebar-toggle-trigger:checked ~ #layout-sidebar { margin-inline-start: 0; } } /* == Layout: meniul din sidebar == */ .sidebar-menu .menu-section { display: flex; flex-direction: column; gap: 0.125rem; margin-bottom: 1rem; padding-inline: 0.625rem; } .sidebar-menu .menu-label { padding: 0.75rem 0.625rem 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--bs-secondary-color); } .sidebar-menu .menu-label:first-child { padding-top: 0; } .sidebar-menu .menu-item { display: flex; height: 2rem; align-items: center; gap: 0.5rem; padding-inline: 0.625rem; font-size: 0.875rem; border-radius: 0.25rem; color: inherit; text-decoration: none; cursor: pointer; } .sidebar-menu a.menu-item:hover { background: var(--hover-bg); } .sidebar-menu a.menu-item.active { background: var(--hover-bg); font-weight: 500; } /* == Componente proprii peste Bootstrap == */ /* Buton transparent, fara bordura (fost daisyUI btn-ghost). */ .btn-ghost { --bs-btn-color: var(--bs-body-color); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-bg: var(--hover-bg); --bs-btn-hover-border-color: transparent; --bs-btn-active-color: var(--bs-body-color); --bs-btn-active-bg: var(--hover-bg); --bs-btn-active-border-color: transparent; } /* Buton patrat pentru iconite (fost daisyUI btn-square / btn-circle). */ .btn-square { display: inline-flex; width: 2rem; height: 2rem; padding: 0; align-items: center; justify-content: center; } /* Link discret: subliniat doar la hover (fost daisyUI link link-hover). */ .link-hover { color: inherit; text-decoration: none; } .link-hover:hover { text-decoration: underline; } /* Toate celulele randului raman pe o singura linie (fost *:text-nowrap). */ .cells-nowrap > * { white-space: nowrap; } /* Bootstrap nu are utilitar pentru asta; necesar pe coloana principala a shell-ului ca tabelele late sa faca scroll in loc sa intinda pagina. */ .min-w-0 { min-width: 0; } /* Cardul paginilor standalone (login, inregistrare etc.). */ .auth-card { width: 100%; max-width: 28rem; } /* Logo: semnul are doua versiuni (fundal deschis / inchis), comutate de tema. */ .logo-mark { display: inline-flex; flex-shrink: 0; } .logo-mark img { display: block; } .logo-mark .logo-dark { display: none; } [data-bs-theme="dark"] .logo-mark .logo-light { display: none; } [data-bs-theme="dark"] .logo-mark .logo-dark { display: block; } /* Mesaje SPV (wireframe 04): eroare = chenar rosu + fundal; citit = estompat. */ .message-row-error { border-left: 3px solid var(--bs-danger); background: var(--bs-danger-bg-subtle); } .message-row-read { color: var(--bs-secondary-color); } .message-unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .filter-search { min-width: 180px; }