/* ========================================================================== PlasticV2 App — reskin premium sopra AdminLTE/Bootstrap 4 (ripreso da plastic-vue-poc/static/css/app.css) ========================================================================== */ /* Palette ispirata al tema "modern" (sage green) del vero Plastic (plastic/static/css/themes/modern.css): --brand-500/600/700 ricalcano le sue --md-green-mid/--md-green-mid-scuro/--md-green-dark, --ink/ --muted le sue --md-text/--md-text-muted. */ :root { --brand-500: #27ae60; --brand-600: #1e8e4e; --brand-700: #136c3b; --brand-light: #71bf45; --brand-grad: linear-gradient(135deg, #136c3b 0%, #27ae60 100%); --ink: #1a2e1f; --ink-soft: #2f4a38; --muted: #5a7a64; --bg: #f4f8f5; --line: #dbe7e0; --surface: #ffffff; --surface-soft: #f7faf8; --card-radius: 16px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .03); --shadow-md: 0 10px 30px -12px rgba(19, 108, 59, .18), 0 2px 6px rgba(15, 23, 42, .04); } /* Tema scuro: attivato impostando data-theme="dark"|"light" su (vedi lo script in base.html - window.plasticTheme). Gran parte del resto del foglio usa gia' queste variabili invece di colori fissi, quindi la maggior parte dei componenti si adatta da sola; le eccezioni con colori hardcoded (form-control, tabelle, navbar, dropdown, select2) hanno una regola dedicata piu' sotto. Palette neutra (grigio/blu ardesia, non un verde scurito) con salti di luminosita' netti fra bg/surface/surface-soft: un tema tutto sfumature di verde molto scuro finiva per essere un'unica macchia indistinguibile (card, header e sfondo pagina tutti uguali) invece di leggersi come pannelli separati. Il verde resta solo sugli accenti (--brand-*, pulsanti, sidebar). */ html[data-theme="dark"] { --ink: #e9edf0; --ink-soft: #c2ccd1; --muted: #8b98a0; --bg: #0c1013; --line: #2b333a; --surface: #161b1f; --surface-soft: #1e252a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .4); --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .4); } html[data-theme="dark"] .card, html[data-theme="dark"] .stat-card { border: 1px solid var(--line); } html[data-theme="dark"] .content-wrapper, html[data-theme="dark"] .main-footer { background: transparent; } /* Componenti Bootstrap/AdminLTE/select2 con colori propri (non le variabili sopra): vanno reskinnati esplicitamente in tema scuro. */ html[data-theme="dark"] .dropdown-menu { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-md); } html[data-theme="dark"] .dropdown-item { color: var(--ink-soft); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background: var(--surface-soft); color: var(--ink); } html[data-theme="dark"] .dropdown-divider { border-color: var(--line); } html[data-theme="dark"] .page-link { background: var(--surface); border-color: var(--line); color: var(--ink-soft); } html[data-theme="dark"] .page-item.disabled .page-link { background: var(--surface-soft); color: var(--muted); } html[data-theme="dark"] .page-item:not(.disabled) .page-link:hover { background: var(--surface-soft); color: var(--ink); } html[data-theme="dark"] .select2-container--bootstrap4 .select2-selection { background: var(--surface); border-color: var(--line); color: var(--ink); } html[data-theme="dark"] .select2-container--bootstrap4 .select2-selection__rendered { color: var(--ink); } html[data-theme="dark"] .custom-control-label::before { background-color: var(--surface-soft); border-color: var(--line); } html[data-theme="dark"] .close { color: var(--ink); text-shadow: none; } /* AdminLTE definisce colore/sfondo di alcuni elementi (titolo pagina, card-title, header di tabella, label) con selettori piu' specifici delle nostre regole generiche piu' sotto (es. ".card .card-header .card-title"): senza !important quelle regole vincono sempre e il testo resta scuro-su-scuro anche con le variabili giuste. Qui si forza la leggibilita' sui punti che altrimenti restano illeggibili. */ html[data-theme="dark"] .content-header, html[data-theme="dark"] .content-header h1, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .card-title { background: transparent !important; color: var(--ink) !important; } html[data-theme="dark"] label { color: var(--ink-soft) !important; } html[data-theme="dark"] .table, html[data-theme="dark"] .table td { color: var(--ink) !important; } html[data-theme="dark"] .table thead th { color: var(--muted) !important; } html[data-theme="dark"] .text-muted, html[data-theme="dark"] small, html[data-theme="dark"] .card-body p { color: var(--muted) !important; } html[data-theme="dark"] .form-control { background: var(--surface) !important; color: var(--ink) !important; } /* Bug concreto trovato leggendo adminlte.min.css: .navbar-light .navbar-nav .nav-link ha 3 classi (specificita' 0,3,0) contro le 2 di .main-header .nav-link qui sopra (0,2,0) e vince sempre, imponendo rgba(0,0,0,.5) - nero semitrasparente - su hamburger e menu utente della topbar. Su sfondo scuro diventa invisibile: e' probabilmente la causa principale della topbar illeggibile. */ html[data-theme="dark"] .navbar-light .navbar-nav .nav-link, html[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover, html[data-theme="dark"] .navbar-light .navbar-nav .nav-link:focus { color: var(--ink-soft) !important; } * { box-sizing: border-box; } body, .content-wrapper, .small-box p { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* Causa reale del tema scuro illeggibile: adminlte.min.js rimuove la classe "hold-transition" dal subito dopo il caricamento (serve solo a evitare un flash di transizione CSS al primo render). Il selettore era quindi corretto nell'HTML statico ma smetteva di applicarsi appena la pagina finiva di caricare in un browser vero - invisibile a un controllo fatto con curl (non esegue JS), motivo per cui i controlli precedenti non l'avevano preso. Risultato: lo sfondo pagina restava bianco (default Bootstrap) mentre testo e card diventavano scuri, illeggibile. Qui non serve dipendere da quella classe: .login-page vive solo nel documento separato login.html, che ha gia' sotto la sua regola piu' specifica (body.login-page) che vince comunque. */ body { background: var(--bg); color: var(--ink); } h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: 700; letter-spacing: -0.01em; } a { color: var(--brand-600); } a:hover { color: var(--brand-700); } /* ---- Topbar ------------------------------------------------------------ */ .main-header.navbar { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: none; padding-left: .5rem; padding-right: 1.25rem; } .main-header .nav-link { color: var(--ink-soft); } .content-header { padding-top: 1.75rem; padding-bottom: .5rem; } .content-header h1 { font-size: 1.5rem; } /* ---- Sidebar ------------------------------------------------------------ */ .main-sidebar { background: linear-gradient(180deg, #0b1d12 0%, #1a4f2a 100%) !important; box-shadow: none; } html[data-theme="dark"] .main-sidebar { background: linear-gradient(180deg, #12181c 0%, #1b2227 100%) !important; } html[data-theme="dark"] .brand-link { border-bottom-color: var(--line); } .brand-link { border-bottom: 1px solid rgba(255, 255, 255, .08); display: flex; align-items: center; height: 64px; padding-left: 1.1rem; } .brand-link::before { content: ""; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-grad); display: inline-block; box-shadow: 0 6px 16px -4px rgba(19, 108, 59, .65); flex-shrink: 0; } .brand-link .brand-text { font-weight: 700; color: #fff; font-size: 1.15rem; letter-spacing: -0.01em; } .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link { color: #9ab6a3; border-radius: 10px; margin: 2px 12px; padding: .55rem .75rem; transition: background .15s ease, color .15s ease; } .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; } .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active { background: rgba(39, 174, 96, .22); color: #fff; box-shadow: inset 3px 0 0 0 #71bf45; } .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link .nav-icon { color: #7fa88c; width: 1.4rem; } .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active .nav-icon, .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover .nav-icon { color: #b8e0c4; } .nav-sidebar .nav-link p { font-weight: 500; font-size: .92rem; } /* ---- Cards / general surfaces ------------------------------------------ */ .card { background: var(--surface); color: var(--ink); border: none; border-radius: var(--card-radius); box-shadow: var(--shadow-sm); } .card.card-outline-tabs { box-shadow: var(--shadow-sm); } .card-header { background: transparent; border-bottom: 1px solid var(--line); border-top-left-radius: var(--card-radius) !important; border-top-right-radius: var(--card-radius) !important; padding: 1.1rem 1.4rem; } .card-body { padding: 1.4rem; } .card-title { font-weight: 700; color: var(--ink); } /* ---- Buttons ------------------------------------------------------------ */ .btn { border-radius: 10px; font-weight: 600; font-size: .875rem; padding: .5rem 1rem; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } .btn-primary { background: var(--brand-grad); border: none; box-shadow: 0 6px 16px -6px rgba(19, 108, 59, .45); } .btn-primary:hover, .btn-primary:focus { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgba(19, 108, 59, .5); } .btn-default { background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); } .btn-default:hover { background: var(--surface-soft); color: var(--ink); } .btn-block { border-radius: 10px; } /* ---- Forms --------------------------------------------------------------- */ .form-control { background: var(--surface); color: var(--ink); border-radius: 9px; border: 1px solid var(--line); font-size: .9rem; padding: .5rem .75rem; } .form-control::placeholder { color: var(--muted); opacity: .7; } .form-control:disabled, .form-control[readonly] { background: var(--surface-soft); } .custom-select, .custom-file-label { background-color: var(--surface); color: var(--ink); border-color: var(--line); } .form-control:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(39, 174, 96, .18); } label { font-weight: 600; font-size: .8rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .02em; } .input-group-text { border-radius: 9px; background: #eef4f0; border: 1px solid #d7e3da; color: var(--muted); } .form-section-title { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-600); margin: 1.5rem 0 .9rem; padding-bottom: .45rem; border-bottom: 1px solid var(--line); } .form-section-title:first-child { margin-top: 0; } /* ---- Progress bars ---------------------------------------------------------- */ .progress { background: #eef4f0; border-radius: 999px; overflow: hidden; } .progress-bar { background: var(--brand-grad); } .progress-bar.bg-danger { background: #dc3545; } /* ---- Badges --------------------------------------------------------------- */ .badge { font-weight: 600; font-size: .72rem; padding: .32em .65em; border-radius: 999px; letter-spacing: .01em; } .badge-success { background: #dcfce7; color: #15803d; } .badge-warning { background: #fef3c7; color: #b45309; } .badge-danger { background: #fee2e2; color: #b91c1c; } .badge-primary { background: #d7f0e0; color: #136c3b; } .badge-info { background: #d1ecf1; color: #0f7d8f; } .badge-secondary { background: #eef2ef; color: var(--muted); } /* ---- Tables --------------------------------------------------------------- */ .table thead th { border-top: none; border-bottom: 1px solid var(--line); color: var(--muted); text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; font-weight: 700; padding: .85rem 1rem; } .table { color: var(--ink); } .table td { padding: .85rem 1rem; vertical-align: middle; border-top: 1px solid var(--line); font-size: .9rem; } .table-hover tbody tr:hover { background-color: var(--surface-soft); color: var(--ink); } .row-clickable { cursor: pointer; } /* ---- Tabs (scheda cliente) ------------------------------------------------ */ .card-outline-tabs .card-header .nav-tabs { border-bottom: none; } .card-outline-tabs .nav-tabs .nav-link { border: none; color: var(--muted); font-weight: 600; font-size: .85rem; padding: 1rem 1.1rem; border-bottom: 2px solid transparent; } .card-outline-tabs .nav-tabs .nav-link.active { color: var(--brand-600); border-bottom: 2px solid var(--brand-500); background: transparent; } /* ---- Alerts --------------------------------------------------------------- */ .alert { border: none; border-radius: 12px; } .alert-success { background: #dcfce7; color: #15803d; } .alert-danger { background: #fee2e2; color: #b91c1c; } .alert-info { background: #d1ecf1; color: #0f7d8f; } .alert-warning { background: #fef3c7; color: #b45309; } /* ---- Footer --------------------------------------------------------------- */ .main-footer { background: transparent; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; } /* ---- Dashboard: stat cards ------------------------------------------------ */ .stat-card { background: var(--surface); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); padding: 1.3rem 1.4rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; height: 100%; transition: box-shadow .15s ease, transform .15s ease; } .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .stat-card .stat-value { font-size: 1.7rem; font-weight: 800; color: var(--ink); line-height: 1.15; } .stat-card .stat-label { color: var(--muted); font-size: .82rem; font-weight: 600; margin-top: .2rem; } .stat-card .stat-trend { font-size: .74rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; display: inline-block; margin-top: .6rem; } .stat-trend.up { background: #dcfce7; color: #15803d; } .stat-trend.down { background: #fee2e2; color: #b91c1c; } .stat-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } /* I nomi delle classi (violet/amber/rose/emerald/sky) sono rimasti quelli originali per non dover toccare i valori 'colore' già salvati in data/dashboard.py, data/documenti.py e routes/statistiche.py — qui sotto puntano però alla palette "modern" (sage green) del vero Plastic invece che a indaco/violetto. */ .stat-icon.violet { background: #dbeafe; color: #2e86de; } .stat-icon.amber { background: #fef3c7; color: #d97706; } .stat-icon.rose { background: #ffe4e9; color: #e11d48; } .stat-icon.emerald { background: #d7f0e0; color: #136c3b; } .stat-icon.sky { background: #d1ecf1; color: #17a2b8; } /* ---- Login ---------------------------------------------------------------- */ body.login-page { background: radial-gradient(circle at 15% 20%, #1a6e40 0%, transparent 45%), radial-gradient(circle at 85% 80%, #71bf45 0%, transparent 45%), linear-gradient(135deg, #0b1d12 0%, #123a22 55%, #1a4f2a 100%); font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; min-height: 100vh; } .login-box { width: 380px; } .login-logo { text-align: center; margin-bottom: 1.5rem; } .login-logo::before { content: ""; width: 52px; height: 52px; border-radius: 14px; background: var(--brand-grad); display: inline-block; box-shadow: 0 10px 26px -6px rgba(19, 108, 59, .75); margin-bottom: .75rem; } .login-logo b { display: block; color: #fff; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; } .login-logo-sub { color: #9ab6a3 !important; font-size: 13px; } .login-card-body { border-radius: var(--card-radius); padding: 2rem 1.9rem; } .login-box .card { border-radius: var(--card-radius); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); } .login-box-msg { font-weight: 700; color: var(--ink); font-size: 1.05rem; } /* ---- Chart card ------------------------------------------------------------ */ .chart-wrap { position: relative; height: 260px; } /* ---- Document type switcher (documenti) ------------------------------------ */ .doctype-switch .nav-link { border-radius: 999px; padding: .45rem 1rem; font-weight: 600; font-size: .85rem; color: var(--ink-soft); background: #fff; border: 1px solid var(--line); margin-right: .5rem; } .doctype-switch .nav-link.active { background: var(--brand-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 14px -6px rgba(19, 108, 59, .4); } /* Bug noto Bootstrap 4: .form-control-sm forza sulle presente o futuro nell'app, cosicché il problema non si ripresenti aggiungendo nuove select compatte altrove. Si rimuove l'altezza fissa e si lascia dimensionare la select dal padding. */ select.form-control-sm { height: auto !important; min-height: calc(1.5em + .75rem + 2px); padding-top: .375rem !important; padding-bottom: .375rem !important; line-height: 1.4 !important; } /* ---- Griglia righe documento (Tabulator.js) -------------------------------- Riallineata alla palette dell'app sopra il tema tabulator_bootstrap4. */ .tabulator { border: 1px solid var(--line); border-radius: 0 0 var(--card-radius) var(--card-radius); font-size: .85rem; background: #fff; } .tabulator .tabulator-header { background: #f0f7f2; border-bottom: 1px solid var(--line); } .tabulator .tabulator-col { background: transparent; border-right: 1px solid var(--line); } .tabulator .tabulator-col-title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); } .tabulator-row { border-bottom: 1px solid var(--line); } .tabulator-row.tabulator-row-even { background: #f9fbf9; } .tabulator-row:hover { background: #eaf5ee; } .tabulator .tabulator-cell { padding: .45rem .5rem; } .tabulator .tabulator-cell.tabulator-editing input, .tabulator .tabulator-cell.tabulator-editing select { border: 1px solid var(--brand-500); box-shadow: 0 0 0 .15rem rgba(39, 174, 96, .18); } .tabulator .riga-importo-cell { font-weight: 700; color: var(--ink); } .tabulator [field="elimina"] { cursor: pointer; color: var(--muted); } .tabulator [field="elimina"]:hover { color: #dc2626; } .tabulator .tabulator-placeholder { color: var(--muted); font-size: .85rem; } /* ---- Mobile ---------------------------------------------------------------- AdminLTE/Bootstrap 4 gia' gestiscono da soli sidebar a scomparsa e grid a colonne che si impilano; qui si sistemano solo i punti che restavano fissi/incoerenti su schermi stretti. */ /* Il contenitore per i pulsanti in page_actions: essendo un flex container, i figli con classe .float-right (usata ovunque nei template, un pulsante solo) smettono automaticamente di floattare (il float non si applica ai flex item) e si dispongono in riga con un gap regolare, andando a capo se non ci stanno — invece di sovrapporsi o accavallarsi come coi float puri quando in una pagina i pulsanti sono piu' di uno (es. Buoni di lavoro). */ .page-actions-row { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; } @media (max-width: 767.98px) { .page-actions-row { justify-content: flex-start; } .page-actions-row > .btn { flex: 1 1 auto; } .card-body { padding: 1rem; } .content-header { padding-top: 1.25rem; } /* Pattern ricorrente in tutta l'app (footer di paginazione, coppie di pulsanti nei form, header di card con azione a destra): due gruppi spinti agli estremi con justify-content-between, che su schermi stretti finiscono per accavallarsi o forzare scroll orizzontale invece di andare semplicemente a capo. */ .d-flex.justify-content-between { flex-wrap: wrap; row-gap: .5rem; } } /* Scroll orizzontale piu' fluido per le tabelle sotto .table-responsive quando sono piu' larghe dello schermo (dita invece di trackpad). */ .table-responsive { -webkit-overflow-scrolling: touch; } /* .login-box ha una larghezza fissa pensata per desktop: sotto quella soglia va ristretta al viewport (con un margine), altrimenti la pagina di login sborda in orizzontale sui telefoni piu' piccoli. */ .login-box { max-width: calc(100vw - 2rem); } /* Blocchi cantiere dell'inserimento multiplo buoni di lavoro: sotto md i due campi (cantiere/note) si impilano gia' da soli (col-md-8/col-md-4), ma il pulsante di rimozione blocco resterebbe schiacciato a fianco della colonna impilata; lo si sposta sotto, allineato a destra. */ @media (max-width: 767.98px) { .blocco-cantiere .card-header { flex-direction: column; align-items: stretch; } .blocco-cantiere .card-header .form-row { margin-right: 0; } .blocco-cantiere .btn-rimuovi-blocco { margin-top: .75rem; align-self: flex-end; } }