/* |-------------------------------------------------------------------------- | Solve Demo — Modern Institutional UI |-------------------------------------------------------------------------- | Ispirazione: | - EUIPO: autorevolezza, contrasto bianco/blu, gerarchie nette; | - Stripe Dashboard: densità controllata, form precisi, micro-interazioni; | - Chakra UI: token semantici, focus accessibile, light/dark coerenti. | | Uso: | sostituire il link a overriderDemo.css con questo file. Il foglio importa | la palette demo originale e ne ridefinisce il linguaggio visivo. | | Le classi prefissate ".demo-" sono opzionali e possono essere aggiunte | progressivamente all'HTML senza essere necessarie per usare il tema. |-------------------------------------------------------------------------- */ @import url("./overriderDemo.css"); /* -------------------------------------------------------------------------- Design tokens semantici — palette EUIPO + approccio Chakra UI -------------------------------------------------------------------------- */ :root { /* * Palette rilevata dall'interfaccia pubblica EUIPO. * I nomi istituzionali sottostanti permettono di cambiare brand senza * dover riscrivere i singoli componenti. */ --euipo-blue-950: #001c50; --euipo-blue-800: #164194; --euipo-blue-700: #2859b6; --euipo-blue-600: #3f73d8; --euipo-yellow-500: #ffc900; --euipo-gray-700: #474f54; --euipo-gray-600: #5a6368; --euipo-gray-100: #f2f5f7; /* Riallinea anche i componenti ereditati dal CSS demo originale */ --demo-navy-950: var(--euipo-blue-950); --demo-navy-900: var(--euipo-blue-950); --demo-navy-800: var(--euipo-blue-800); --demo-blue-700: var(--euipo-blue-800); --demo-blue-600: var(--euipo-blue-700); --demo-teal-700: var(--euipo-blue-700); --demo-teal-600: var(--euipo-blue-600); --demo-gold-500: var(--euipo-yellow-500); --institutional-navy: var(--euipo-blue-950); --institutional-ink: var(--euipo-blue-800); --institutional-blue: var(--euipo-blue-800); --institutional-blue-hover: #0e3277; --institutional-teal: var(--euipo-blue-700); --institutional-gold: var(--euipo-yellow-500); --institutional-accent: var(--euipo-blue-600); --institutional-accent-strong: var(--euipo-blue-700); --institutional-accent-soft: #edf3ff; --institutional-gold-soft: #fff7d6; /* ---------------------------------------------------------------------- Scala tipografica Sei gradini su base 15px (il font-size di impostato sotto). Prima il tema usava venti dimensioni distinte fra 0.66 e 1.7rem: fra 0.66 e 0.72 l'occhio non distingue nulla, resta solo l'incoerenza. I tre formati display di h1, h2 e titolo pagina restano in clamp(): sono fluidi per scelta e non appartengono alla scala dell'interfaccia. ---------------------------------------------------------------------- */ --ts-2xs: 0.7rem; /* 10.5px - micro etichette, badge, kicker */ --ts-xs: 0.8rem; /* 12px - meta, intestazioni tabella, breadcrumb */ --ts-sm: 0.875rem; /* 13.1px - pulsanti, menu, interfaccia secondaria */ --ts-md: 1rem; /* 15px - corpo del testo */ --ts-lg: 1.2rem; /* 18px - titoli di sezione, testo di apertura */ --ts-xl: 1.6rem; /* 24px - h3, nome applicazione, valori statistici */ /* ---------------------------------------------------------------------- Pesi Tre gradini al posto di dodici. La gerarchia si costruisce con dimensione, colore e spazio; il peso resta trattenuto. 600 e' il massimo: oltre, un'interfaccia documentale inizia a urlare. ---------------------------------------------------------------------- */ --tw-normal: 400; --tw-medium: 500; --tw-semibold: 600; /* Token semantici */ --ui-bg: var(--euipo-gray-100); --ui-bg-subtle: #f8f9fa; --ui-bg-muted: #e9edf0; --ui-panel: #ffffff; --ui-panel-raised: #ffffff; --ui-fg: var(--euipo-gray-700); --ui-fg-muted: var(--euipo-gray-600); --ui-fg-subtle: #6e777d; --ui-border: #d6dce0; --ui-border-emphasized: #c3cace; --ui-focus: var(--euipo-blue-600); --ui-success: #287454; --ui-success-soft: #eaf5ef; --ui-warning: #725900; --ui-warning-soft: var(--institutional-gold-soft); --ui-danger: #b54747; --ui-danger-soft: #fbecec; --ui-info: var(--institutional-blue); --ui-info-soft: var(--institutional-accent-soft); /* Geometria e profondità */ --ui-radius-xs: 3px; --ui-radius-sm: 5px; --ui-radius-md: 16px; --ui-radius-lg: 10px; --ui-shadow-xs: 0 1px 2px rgb(7 24 43 / 0.05); --ui-shadow-sm: 0 1px 2px rgb(7 24 43 / 0.04), 0 2px 5px rgb(7 24 43 / 0.045); --ui-shadow-md: 0 8px 20px -8px rgb(7 24 43 / 0.2), 0 2px 6px rgb(7 24 43 / 0.06); --ui-shadow-overlay: 0 20px 48px rgb(7 24 43 / 0.2); --ui-ring: 0 0 0 3px rgb(63 115 216 / 0.22); /* Sostituisce i token geometrici del primo demo */ --demo-page: var(--ui-bg); --demo-surface: var(--ui-panel); --demo-surface-soft: var(--ui-bg-subtle); --demo-line: var(--ui-border); --demo-text: var(--ui-fg); --demo-muted: var(--ui-fg-muted); --demo-radius-sm: var(--ui-radius-sm); --demo-radius-md: var(--ui-radius-md); --demo-radius-lg: var(--ui-radius-lg); --demo-shadow-sm: var(--ui-shadow-sm); --demo-shadow-md: var(--ui-shadow-md); --demo-focus: var(--ui-ring); } /* -------------------------------------------------------------------------- Base, tipografia e pagina -------------------------------------------------------------------------- */ /* * Radice tipografica del tema. * * Le misure di questo foglio sono in rem, che si calcolano sul font-size di * , non su quello di body. Finche' nessuno impostava il root, restava * ai 16px di default del browser mentre il tema era progettato su una base * di 15: ogni componente rendeva circa il 7% piu' grande del previsto. * * Questa e' la leva unica per la scala tipografica dell'intero tema, e vale * solo per demo perche' solo demo carica questo foglio. */ html { font-size: 15px; } html, body { font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ui-fg); background: var(--ui-bg); } body { font-size: var(--ts-md); line-height: 1.55; letter-spacing: -0.006em; text-rendering: optimizeLegibility; } ::selection { color: var(--euipo-blue-950); background: #ffeca3; } .content { background: var(--ui-bg) !important; background-image: none !important; background-attachment: initial; } .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { color: var(--institutional-ink); font-weight: var(--tw-semibold); letter-spacing: -0.025em; } .content h1 { font-size: clamp(1.8rem, 2.4vw, 2.35rem); line-height: 1.15; } .content h2 { font-size: clamp(1.4rem, 1.8vw, 1.75rem); line-height: 1.2; } .content h3 { font-size: var(--ts-xl); line-height: 1.3; } .content p { color: inherit; } .text-muted { color: var(--ui-fg-muted) !important; } hr { border-color: var(--ui-border); opacity: 1; } /* -------------------------------------------------------------------------- Top bar — sottile, stabile, simile a una console professionale -------------------------------------------------------------------------- */ .content > .navbar, .top-admin-bar { position: sticky; top: 0; z-index: 1020; /*background: rgb(255 255 255 / 0.96) !important;*/ border-bottom: 1px solid var(--ui-border) !important; box-shadow: 0 1px 0 rgb(7 24 43 / 0.025); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .content > .navbar .container-fluid { padding-inline: 1.25rem; } .content > .navbar .nav-link, .top-admin-bar .nav-link { color: #405466 !important; border-radius: var(--ui-radius-sm); transition: color 140ms ease, background-color 140ms ease; } .content > .navbar .nav-link:hover, .top-admin-bar .nav-link:hover { color: var(--institutional-blue) !important; background: var(--institutional-accent-soft); } .content > .navbar .nav-link .ph, .top-admin-bar .nav-link .ph { color: currentColor; } .content > .navbar .border-end { border-color: var(--ui-border) !important; } /* -------------------------------------------------------------------------- Sidebar — rail istituzionale moderno -------------------------------------------------------------------------- */ .sidebar { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.22) transparent; background: linear-gradient( 165deg, var(--euipo-blue-950) 0%, var(--euipo-blue-800) 58%, var(--euipo-blue-700) 100% ) !important; border-right: 1px solid rgb(0 28 80 / 0.58); box-shadow: 4px 0 16px rgb(0 28 80 / 0.14); } .sidebar::-webkit-scrollbar { width: 5px; } .sidebar::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.2); border-radius: 99px; } .sidebar::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 1; background: linear-gradient(90deg, var(--euipo-yellow-500) 0 3px, transparent 3px), radial-gradient(circle at 105% 0%, rgb(63 115 216 / 0.32), transparent 19rem); } .logo-form { position: relative; z-index: 1; filter: brightness(0) invert(1); opacity: 0.96; } .app-name { position: relative; z-index: 1; } .app-name h4 { padding: 1.5rem 1.5rem 1.15rem; margin: 0 0 0.75rem; color: #fff !important; font-size: var(--ts-xl) !important; line-height: 1.15 !important; font-weight: var(--tw-semibold) !important; letter-spacing: -0.035em; border-bottom: 1px solid rgb(255 255 255 / 0.1); } .app-name h4 span { color: rgb(255 255 255 / 0.68) !important; } .payoff { margin-top: 0.5rem; color: rgb(255 255 255 / 0.68) !important; font-size: var(--ts-xs) !important; line-height: 1.45 !important; font-weight: var(--tw-normal) !important; letter-spacing: 0.01em; } .app-navigation { position: relative; z-index: 1; padding: 0.25rem 0.85rem 5.5rem; } .btn-white-app, .btn-white-app:first-child, .btn-white-app.unselected { position: relative; width: 100%; margin: 2px 0; background: transparent !important; border: 1px solid transparent; border-radius: var(--ui-radius-sm); box-shadow: none; transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease; } .btn-white-app:hover, .btn-white-app.unselected:hover { background: rgb(255 255 255 / 0.075) !important; border-color: rgb(255 255 255 / 0.06); } .btn-white-app:not(.unselected) { background: rgb(255 255 255 / 0.13) !important; border-color: rgb(255 255 255 / 0.12); } .btn-white-app:not(.unselected)::before { content: ""; position: absolute; top: 0.5rem; bottom: 0.5rem; left: -0.85rem; width: 3px; background: var(--euipo-yellow-500); border-radius: 0 3px 3px 0; box-shadow: 0 0 12px rgb(255 201 0 / 0.3); } .sidebar .btn-white-app a, .sidebar .btn-white-app.unselected a { display: flex; align-items: center; min-height: 42px; padding: 0.62rem 0.75rem; color: rgb(255 255 255 / 0.76) !important; font-size: var(--ts-sm) !important; line-height: 1.25; font-weight: var(--tw-medium) !important; letter-spacing: 0; } .sidebar .btn-white-app:not(.unselected) a { color: #fff; font-weight: var(--tw-semibold) !important; } .sidebar .btn-white-app a:hover { color: #fff !important; } .sidebar .btn-white-app a .ph { flex: 0 0 1.25rem; margin-inline: 0 0.65rem !important; color: #a9c4f5; font-size: var(--ts-lg); text-align: center; } .sidebar .btn-white-app:not(.unselected) a .ph { color: #fff; } .btn-white-app small { display: block; margin: -0.25rem 0 0; padding: 0 0.75rem 0.7rem 2.7rem; color: rgb(255 255 255 / 0.54); font-size: var(--ts-2xs); line-height: 1.35; font-weight: var(--tw-normal); } .powered { z-index: 2; color: rgb(255 255 255 / 0.48); font-size: var(--ts-2xs); letter-spacing: 0.04em; text-transform: uppercase; } .powered img { opacity: 0.72; } /* Classi opzionali per raggruppare il menu senza cambiare il tema */ .app-navigation-section { margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid rgb(255 255 255 / 0.1); } .app-navigation-label { display: block; padding: 0.25rem 0.75rem 0.45rem; color: rgb(255 255 255 / 0.44); font-size: var(--ts-2xs); line-height: 1; font-weight: var(--tw-semibold); letter-spacing: 0.085em; text-transform: uppercase; } /* -------------------------------------------------------------------------- Link, pulsanti e stati interattivi — precisione Stripe -------------------------------------------------------------------------- */ a { text-underline-offset: 0.18em; } /* I controlli della tab Actions sono link solo semanticamente: il loro colore comunica lo stato attivo e deve restare gestito dalle classi del componente. */ a:not(.btn):not(.nav-link):not(.ce-view):not(.ce-chip) { color: var(--institutional-blue); } a:not(.btn):not(.nav-link):not(.ce-view):not(.ce-chip):hover { color: var(--institutional-teal) !important; } .btn { min-height: 38px; padding: 0.48rem 0.9rem; border-radius: var(--ui-radius-sm); font-size: var(--ts-sm); line-height: 1.35; font-weight: var(--tw-semibold); letter-spacing: -0.005em; box-shadow: var(--ui-shadow-xs); transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; } .btn:hover { transform: translateY(-1px); box-shadow: var(--ui-shadow-sm); } .btn:active { transform: translateY(0); box-shadow: none; } .btn-primary { background: var(--institutional-blue) !important; border-color: var(--institutional-blue) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus { background: var(--institutional-blue-hover) !important; border-color: var(--institutional-blue-hover) !important; } .btn-secondary { background: var(--institutional-teal) !important; border-color: var(--institutional-teal) !important; color: #fff !important; } .btn-secondary:hover, .btn-secondary:focus { background: #1f4896 !important; border-color: #1f4896 !important; } .btn-outline-primary { background: #fff; color: var(--institutional-blue); border-color: #aebbd2; } .btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--institutional-accent-soft); color: var(--institutional-blue); border-color: var(--institutional-blue); } .btn-light, .btn-white, .top-admin-bar .btn-white { background: #fff; color: #405466; border: 1px solid var(--ui-border-emphasized); box-shadow: var(--ui-shadow-xs); } .btn-light:hover, .btn-white:hover, .top-admin-bar .btn-white:hover { background: var(--ui-bg-subtle); border-color: #aebbc7; } .btn:focus, .btn:focus-visible, button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--ui-ring) !important; } .btn-success, .bg-success { background: var(--ui-success) !important; border-color: var(--ui-success) !important; } /* -------------------------------------------------------------------------- Card e pannelli — istituzionali, non “app bubble” -------------------------------------------------------------------------- */ .card, .card2, .party-box, .party-box-small, .payment-feed-card, .payment-card, .mediation-compact-card, .party-mini-summary, .docs-block, .question-white-box { background: var(--ui-panel); border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-md) !important; box-shadow: var(--ui-shadow-xs); } .card, .card2 { padding: 1.25rem !important; overflow: hidden; } .card:hover, .card2:hover { border-color: var(--ui-border-emphasized) !important; box-shadow: var(--ui-shadow-sm); transform: none; } .card-header, .card2-header, .mediation-compact-head { background: var(--ui-panel); color: var(--institutional-ink); border-bottom: 1px solid var(--ui-border) !important; border-radius: 0 !important; box-shadow: none; } .card2-header { margin: -1.25rem -1.25rem 1.15rem; padding: 0.9rem 1.25rem; } .card2-footer, .mediation-compact-foot { background: var(--ui-bg-subtle); border-top: 1px solid var(--ui-border); border-radius: 0 !important; } .card2-footer { margin: 1.15rem -1.25rem -1.25rem; padding: 0.75rem 1.25rem; } .card h4, .card2 h4 { color: var(--institutional-ink); font-weight: var(--tw-semibold); letter-spacing: -0.01em; text-transform: none; } .question-white-box { padding: clamp(1.25rem, 2.5vw, 2rem); } .mediation-detail, .party-detail, .fake-field, .legal-recap { background: var(--ui-bg-subtle); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); } .custom-modal, .infoModal, .infoModal-content, .drawer-panel, .meeting-drawer, .payment-drawer, .participation-drawer { background: var(--ui-panel-raised); border: 1px solid var(--ui-border-emphasized); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-overlay); } /* Barra di accento opzionale, utile per pannelli importanti */ .demo-accent-panel { position: relative; overflow: hidden; background: var(--ui-panel); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-xs); } .demo-accent-panel::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--institutional-accent); } .demo-accent-panel--gold::before { background: var(--institutional-gold); } /* -------------------------------------------------------------------------- Form — campi Stripe-like, stati Chakra-like -------------------------------------------------------------------------- */ .form-label, label:not(.form-check-label) { color: var(--euipo-gray-700); font-size: var(--ts-sm); font-weight: var(--tw-semibold); } .form-control, .form-select, .dt-container .dt-input, div.dt-container .dt-input, .choices__inner { min-height: 42px; background: #fff !important; color: var(--ui-fg); border: 1px solid var(--ui-border-emphasized) !important; border-radius: var(--ui-radius-sm) !important; box-shadow: 0 1px 2px rgb(7 24 43 / 0.03), inset 0 1px 0 rgb(255 255 255 / 0.7); transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease; } .form-control:hover, .form-select:hover, .dt-container .dt-input:hover, div.dt-container .dt-input:hover, .choices__inner:hover { border-color: #98a8b6 !important; } .form-control:focus, .form-select:focus, .dt-container .dt-input:focus, div.dt-container .dt-input:focus, .choices.is-focused .choices__inner, .choices.is-open .choices__inner { background: #fff !important; border-color: var(--ui-focus) !important; box-shadow: var(--ui-ring) !important; } .form-control::placeholder { color: #98a4af; opacity: 1; } .form-control:disabled, .form-select:disabled, .form-control[readonly] { background: var(--ui-bg-muted) !important; color: var(--ui-fg-muted); cursor: not-allowed; } .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-select ~ label::after { background: #fff; } .form-floating:focus-within label { color: var(--institutional-blue); } .form-check-input { border-color: #9eacb9; } .form-check-input:checked { background-color: var(--institutional-blue); border-color: var(--institutional-blue); } .form-check-input:focus { border-color: var(--ui-focus); box-shadow: var(--ui-ring); } .input-group-text { background: var(--ui-bg-subtle); color: var(--ui-fg-muted); border-color: var(--ui-border-emphasized); } .upload-area { background: var(--ui-bg-subtle); border: 1px dashed #9fb0bf; border-radius: var(--ui-radius-md); } .upload-area:hover, .upload-area.dragging { background: var(--institutional-accent-soft); border-color: var(--institutional-accent); } /* -------------------------------------------------------------------------- Tabelle e DataTables -------------------------------------------------------------------------- */ .table-responsive { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); } .table { --bs-table-bg: var(--ui-panel); --bs-table-striped-bg: #f8fafc; --bs-table-hover-bg: #eef6fb; margin-bottom: 0; color: var(--ui-fg); } thead tr th { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; background: var(--ui-bg-muted) !important; color: #526577; border-bottom: 1px solid var(--ui-border-emphasized) !important; font-size: var(--ts-2xs); font-weight: var(--tw-semibold); letter-spacing: 0.055em; text-transform: uppercase; white-space: nowrap; } .table > :not(caption) > * > * { padding: 0.75rem 0.85rem; border-bottom-color: var(--ui-border); vertical-align: middle; } .table tbody tr:last-child > * { border-bottom-width: 0; } .dt-container { color: var(--ui-fg); font-size: var(--ts-sm); } .dt-container .dt-info, .dt-container .dt-length { color: var(--ui-fg-muted); font-size: var(--ts-xs); } .dt-container .dt-paging .dt-paging-button { min-width: 34px; min-height: 34px; margin: 0 2px; border: 1px solid transparent !important; border-radius: var(--ui-radius-sm) !important; } .dt-container .dt-paging .dt-paging-button:hover { background: var(--institutional-accent-soft) !important; color: var(--institutional-blue) !important; border-color: var(--ui-border) !important; } .dt-container .dt-paging .dt-paging-button.current { background: var(--institutional-blue) !important; color: #fff !important; border-color: var(--institutional-blue) !important; } /* -------------------------------------------------------------------------- Tab, dropdown, badge, alert e breadcrumb -------------------------------------------------------------------------- */ .dropdown-menu { padding: 0.35rem; background: var(--ui-panel-raised); border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-md); } .dropdown-item { padding: 0.55rem 0.7rem; border-radius: var(--ui-radius-sm); color: var(--ui-fg); font-size: var(--ts-sm); } .dropdown-item:hover, .dropdown-item:focus { background: var(--institutional-accent-soft); color: var(--institutional-ink); } .dropdown-divider { border-color: var(--ui-border); } .my-tabs { gap: 0; padding: 0; background: transparent; border-bottom: 1px solid var(--ui-border-emphasized); } .my-tabs .tab-item { position: relative; margin: 0 1.25rem -1px 0; padding-inline: 0; background: transparent; color: var(--ui-fg-muted); border-radius: 0; box-shadow: none; } .my-tabs .tab-item::after, .my-tabs .tab-item.active::after { right: 0; bottom: 0; left: 0; height: 2px; background: var(--institutional-blue); } .my-tabs .tab-item:hover { color: var(--institutional-blue); } .my-tabs .tab-item.active { background: transparent; color: var(--institutional-ink); font-weight: var(--tw-semibold); } .tab-content { background: var(--ui-panel); border-top: 0; border-radius: 0 0 var(--ui-radius-md) var(--ui-radius-md); } .badge, .badge-glossary, .label, .criteria { border-radius: 999px; font-size: var(--ts-2xs); line-height: 1.3; font-weight: var(--tw-semibold); letter-spacing: 0.01em; } .badge-glossary, .label { background: var(--institutional-ink); } .breadcrumb { color: var(--ui-fg-muted); font-size: var(--ts-xs); letter-spacing: 2px; } .breadcrumb a { font-weight: var(--tw-medium); } .alert { border-width: 1px; border-radius: var(--ui-radius-md); } .alert-info { background: var(--ui-info-soft); color: var(--euipo-blue-800); border-color: #b8c9ec; } .alert-success { background: var(--ui-success-soft); color: #1e6044; border-color: #b9ddc8; } .alert-warning { background: var(--ui-warning-soft); color: #725900; border-color: #ead67e; } .alert-danger { background: var(--ui-danger-soft); color: #873838; border-color: #e8bcbc; } /* -------------------------------------------------------------------------- Dashboard e callout -------------------------------------------------------------------------- */ .button-dashboard { position: relative; overflow: hidden; background: var(--institutional-blue); border: 1px solid rgb(255 255 255 / 0.12); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-sm); } .button-dashboard::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--euipo-yellow-500); } .button-dashboard:hover { background: var(--institutional-blue-hover); box-shadow: var(--ui-shadow-md); } .button-dashboard h2 { font-weight: var(--tw-medium) !important; } /* -------------------------------------------------------------------------- AZIONI IN TESTA ALLA DASHBOARD Dal CSS di base i tre riquadri arrivano come superfici piene e sature, con il testo bianco, l'icona in una pastiglia traslucida da 58px, il titolo a peso 800 e un sollevamento al passaggio del mouse. In un contesto istituzionale europeo quel linguaggio e' fuori registro: tre blocchi colorati in cima alla pagina pesano piu' del contenuto che introducono, e il terzo - il tour - era il piu' vistoso pur essendo la voce meno importante. Qui diventano tre schede bianche con un filo di bordo, distinte soltanto dal colore dell'icona. Il raggio resta quello del tema, per coerenza con le schede che stanno sotto nella dashboard. Due scelte che vale la pena spiegare: - Il filo di bordo e' disegnato con un'ombra interna e non con `border`, perche' due dei tre riquadri portano la classe Bootstrap `.border-0`, che imposta `border: 0 !important` e vincerebbe. - L'icona del tour usa l'oro istituzionale e non un grigio. Con il grigio la terza scheda sembrava disattivata: grigio su grigio e' il linguaggio di cio' che non si puo' premere. L'oro appartiene alla tavolozza europea, si legge come una scelta e non come un errore, e non compete con i due blu per il ruolo di azione principale. Niente sollevamento al passaggio del mouse: l'interfaccia risponde, non si muove. -------------------------------------------------------------------------- */ .user-dashboard-sql .dashboard-action-card { --action-accent: var(--euipo-blue-800); --action-accent-soft: var(--institutional-accent-soft); background: var(--ui-panel) !important; background-image: none !important; color: var(--ui-fg) !important; border-radius: var(--ui-radius-md); padding: 16px 18px; min-height: 92px; box-shadow: inset 0 0 0 1px var(--ui-border); transition: box-shadow .15s ease, background-color .15s ease; } .user-dashboard-sql .dashboard-action-card:hover, .user-dashboard-sql .dashboard-action-card:focus { transform: none; background: var(--ui-bg-subtle) !important; color: var(--ui-fg) !important; box-shadow: inset 0 0 0 1px var(--ui-border-emphasized), var(--ui-shadow-xs); } .user-dashboard-sql .dashboard-action-card:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--ui-border-emphasized), var(--ui-ring); } /* Il colore dell'icona e' l'unica cosa che distingue i tre riquadri */ .user-dashboard-sql .fintech-primary { background: var(--ui-panel) !important; --action-accent: var(--euipo-blue-800); --action-accent-soft: var(--institutional-accent-soft); } .user-dashboard-sql .fintech-secondary { background: var(--ui-panel) !important; --action-accent: var(--euipo-blue-600); --action-accent-soft: var(--institutional-accent-soft); } /* * Solo il tour dentro la dashboard. La classe .app-tour da sola serve anche al * pulsante nel dettaglio della procedura, che resta come e'. */ .user-dashboard-sql .dashboard-action-card.app-tour { background: var(--ui-panel) !important; background-image: none !important; border: 0; --action-accent: var(--ui-warning); --action-accent-soft: var(--institutional-gold-soft); } .user-dashboard-sql .dashboard-action-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--ui-radius-xs); background: var(--action-accent-soft); color: var(--action-accent); font-size: 1.2rem; margin-right: 14px; } .user-dashboard-sql .dashboard-action-title { color: var(--ui-fg); font-size: var(--ts-md); font-weight: var(--tw-semibold); line-height: 1.25; margin-bottom: 2px; } .user-dashboard-sql .dashboard-action-sub { color: var(--ui-fg-muted); font-size: var(--ts-sm); line-height: 1.35; opacity: 1; } /* * Il CSS di base impone il bianco con !important sui link-scheda: senza questo * il secondo riquadro resterebbe bianco su bianco. */ .user-dashboard-sql .dash-card-link, .user-dashboard-sql .dash-card-link:link, .user-dashboard-sql .dash-card-link:visited, .user-dashboard-sql .dash-card-link:hover, .user-dashboard-sql .dash-card-link:focus, .user-dashboard-sql .dash-card-link:active { color: var(--ui-fg) !important; text-decoration: none !important; } /* * Scuro. Le pastiglie chiare del tema chiaro diventerebbero tre macchie * luminose sul fondo navy: qui la pastiglia si scurisce e l'icona si schiarisce. */ [data-bs-theme="dark"] .user-dashboard-sql .dashboard-action-card { --action-accent: #8fb3f2; --action-accent-soft: #14243a; } [data-bs-theme="dark"] .user-dashboard-sql .fintech-secondary { --action-accent: #b6cdf8; --action-accent-soft: #14243a; } [data-bs-theme="dark"] .user-dashboard-sql .dashboard-action-card.app-tour { --action-accent: #e0b93a; --action-accent-soft: #2a2415; } /* .fintech-dark non risulta usata da nessun markup del tool: resta come era. */ .user-dashboard-sql .fintech-dark { background: var(--institutional-ink); } .app-tour, .app-tour-large { background: var(--institutional-ink); border: 1px solid rgb(255 255 255 / 0.12); border-radius: var(--ui-radius-md); } .hepdesk { background: var(--institutional-blue); border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm); box-shadow: var(--ui-shadow-md); } .ai-meter-bar { background: linear-gradient( 90deg, var(--institutional-teal), var(--institutional-accent) ); } /* -------------------------------------------------------------------------- Classi opzionali per modernizzare nuove pagine -------------------------------------------------------------------------- */ .demo-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; margin: 0 0 1.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--ui-border); } .demo-page-header__content { min-width: 0; } .demo-page-header__title { margin: 0; color: var(--institutional-ink); font-size: clamp(1.65rem, 2vw, 2.1rem); line-height: 1.15; font-weight: var(--tw-semibold); letter-spacing: -0.035em; } .demo-page-header__description { max-width: 68ch; margin: 0.45rem 0 0; color: var(--ui-fg-muted); font-size: var(--ts-md); } .demo-page-header__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; } .demo-section-kicker { display: block; margin-bottom: 0.45rem; color: var(--institutional-blue); font-size: var(--ts-2xs); line-height: 1; font-weight: var(--tw-semibold); letter-spacing: 0.09em; text-transform: uppercase; } .demo-section-title { margin: 0 0 1rem; color: var(--institutional-ink); font-size: var(--ts-lg); font-weight: var(--tw-semibold); letter-spacing: -0.02em; } .demo-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; overflow: hidden; background: var(--ui-border); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); } .demo-stat { position: relative; min-width: 0; padding: 1.15rem 1.25rem; background: var(--ui-panel); } .demo-stat__label { color: var(--ui-fg-muted); font-size: var(--ts-xs); font-weight: var(--tw-medium); } .demo-stat__value { margin-top: 0.3rem; color: var(--institutional-ink); font-size: var(--ts-xl); line-height: 1.15; font-weight: var(--tw-semibold); letter-spacing: -0.035em; } .demo-stat__meta { margin-top: 0.35rem; color: var(--ui-fg-subtle); font-size: var(--ts-2xs); } .demo-status { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.55rem; color: #405466; background: var(--ui-bg-muted); border: 1px solid var(--ui-border); border-radius: 999px; font-size: var(--ts-2xs); line-height: 1.25; font-weight: var(--tw-semibold); } .demo-status::before { content: ""; width: 0.42rem; height: 0.42rem; background: currentColor; border-radius: 50%; } .demo-status--success { color: var(--ui-success); background: var(--ui-success-soft); border-color: #b9ddc8; } .demo-status--warning { color: var(--ui-warning); background: var(--ui-warning-soft); border-color: #e7d29b; } .demo-status--danger { color: var(--ui-danger); background: var(--ui-danger-soft); border-color: #e8bcbc; } .demo-status--info { color: var(--institutional-blue); background: var(--ui-info-soft); border-color: #b8dcec; } .demo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem; background: var(--ui-bg-subtle); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); } .demo-toolbar__group { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } /* -------------------------------------------------------------------------- Dark mode -------------------------------------------------------------------------- */ [data-bs-theme="dark"] { /* * Superfici: grigio freddo molto scuro, non piu' navy. * * Prima il fondo era #071f45, con 62 punti di scarto fra il canale blu e * quello rosso: il blu invadeva ogni superficie. Ora lo scarto e' 16, il * fondo e' piu' scuro, e il blu torna a essere un accento. */ --ui-bg: #0c1014; --ui-bg-subtle: #131922; --ui-bg-muted: #1b2430; --ui-panel: #151c25; --ui-panel-raised: #1d2632; --ui-fg: #e7ebf0; --ui-fg-muted: #a9b4c0; --ui-fg-subtle: #7c8794; --ui-border: #27313c; --ui-border-emphasized: #3a4552; /* * I colori di stato erano definiti solo per il tema chiaro: negli avvisi * restava l'inchiostro scuro su fondo scuro, 2.31:1 per il giallo e * 2.06:1 per il rosso. */ --ui-success: #5cc999; --ui-warning: #e8c15a; --ui-danger: #f08b8b; --ui-info: #7fb0f5; --ui-success-soft: #12251d; --ui-warning-soft: #2a2415; --ui-danger-soft: #2c1c1d; --ui-info-soft: #14243a; --ui-focus: #7fb0f5; --ui-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3); --ui-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.28), 0 4px 10px rgb(0 0 0 / 0.22); --ui-shadow-md: 0 10px 28px rgb(0 0 0 / 0.4); --ui-ring: 0 0 0 3px rgb(127 176 245 / 0.25); } [data-bs-theme="dark"] body, [data-bs-theme="dark"] .content { color: var(--ui-fg); background: var(--ui-bg) !important; background-image: none !important; } [data-bs-theme="dark"] .content h1, [data-bs-theme="dark"] .content h2, [data-bs-theme="dark"] .content h3, [data-bs-theme="dark"] .content h4, [data-bs-theme="dark"] .content h5, [data-bs-theme="dark"] .content h6 { color: #eef4f8; } [data-bs-theme="dark"] .content > .navbar, [data-bs-theme="dark"] .top-admin-bar { background: rgb(0 28 80 / 0.96) !important; border-bottom-color: var(--ui-border) !important; } [data-bs-theme="dark"] .content > .navbar .nav-link, [data-bs-theme="dark"] .top-admin-bar .nav-link { color: #bdcbd7 !important; } [data-bs-theme="dark"] .content > .navbar .nav-link:hover, [data-bs-theme="dark"] .top-admin-bar .nav-link:hover { color: #fff !important; background: #0b2c63; } [data-bs-theme="dark"] .card, [data-bs-theme="dark"] .card2, [data-bs-theme="dark"] .party-box, [data-bs-theme="dark"] .party-box-small, [data-bs-theme="dark"] .payment-feed-card, [data-bs-theme="dark"] .payment-card, [data-bs-theme="dark"] .mediation-compact-card, [data-bs-theme="dark"] .party-mini-summary, [data-bs-theme="dark"] .docs-block, [data-bs-theme="dark"] .question-white-box, [data-bs-theme="dark"] .demo-accent-panel, [data-bs-theme="dark"] .demo-stat { background: var(--ui-panel); border-color: var(--ui-border) !important; } [data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .card2-header, [data-bs-theme="dark"] .mediation-compact-head { background: var(--ui-panel) !important; color: var(--ui-fg); border-color: var(--ui-border) !important; } [data-bs-theme="dark"] .card2-footer, [data-bs-theme="dark"] .mediation-compact-foot, [data-bs-theme="dark"] .mediation-detail, [data-bs-theme="dark"] .party-detail, [data-bs-theme="dark"] .fake-field, [data-bs-theme="dark"] .legal-recap { background: var(--ui-bg-subtle) !important; border-color: var(--ui-border); } [data-bs-theme="dark"] .btn-outline-primary, [data-bs-theme="dark"] .btn-light, [data-bs-theme="dark"] .btn-white, [data-bs-theme="dark"] .top-admin-bar .btn-white { background: var(--ui-panel); color: #9ccce7; border-color: var(--ui-border-emphasized); } [data-bs-theme="dark"] .form-label, [data-bs-theme="dark"] label:not(.form-check-label) { color: #bdcbd7; } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .dt-container .dt-input, [data-bs-theme="dark"] div.dt-container .dt-input, [data-bs-theme="dark"] .choices__inner { background: var(--ui-panel) !important; color: var(--ui-fg) !important; border-color: var(--ui-border-emphasized) !important; } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus, [data-bs-theme="dark"] .dt-container .dt-input:focus, [data-bs-theme="dark"] div.dt-container .dt-input:focus, [data-bs-theme="dark"] .choices.is-focused .choices__inner, [data-bs-theme="dark"] .choices.is-open .choices__inner { background: #0b2c63 !important; border-color: var(--ui-focus) !important; box-shadow: var(--ui-ring) !important; } [data-bs-theme="dark"] .form-floating > .form-control:focus ~ label::after, [data-bs-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label::after, [data-bs-theme="dark"] .form-floating > .form-control-plaintext ~ label::after, [data-bs-theme="dark"] .form-floating > .form-select ~ label::after { background: var(--ui-panel) !important; } [data-bs-theme="dark"] .table { --bs-table-bg: var(--ui-panel); --bs-table-striped-bg: #0a2755; --bs-table-hover-bg: #0b2c63; color: var(--ui-fg); } [data-bs-theme="dark"] thead tr th { background: var(--ui-bg-muted) !important; color: #b8c7d4; } [data-bs-theme="dark"] .dropdown-menu { background: var(--ui-panel-raised); border-color: var(--ui-border) !important; } [data-bs-theme="dark"] .dropdown-item { color: var(--ui-fg); } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background: #0b2c63; color: #fff; } [data-bs-theme="dark"] .my-tabs .tab-item { background: transparent; color: var(--ui-fg-muted); } [data-bs-theme="dark"] .my-tabs .tab-item.active { background: transparent; color: #fff; } [data-bs-theme="dark"] .tab-content { background: var(--ui-panel) !important; color: var(--ui-fg); } [data-bs-theme="dark"] .demo-page-header__title, [data-bs-theme="dark"] .demo-section-title, [data-bs-theme="dark"] .demo-stat__value { color: #eef4f8; } .btn-send-convocation { color: #FFF !important; } .dt-container { padding: 0px 10px; } [data-bs-theme="dark"] .text-bg-light { color: #FFF !important; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 1100px) { .sidebar { box-shadow: 0 4px 16px rgb(7 24 43 / 0.16); } } @media (max-width: 768px) { /* Su mobile si riduce la radice, non il solo body: altrimenti il corpo scenderebbe e i componenti in rem resterebbero fermi. */ html { font-size: 14px; } body { font-size: var(--ts-md); } .content > .navbar .container-fluid { padding-inline: 0.75rem; } .sidebar { border-radius: var(--ui-radius-md); } .app-name h4 { padding: 1.15rem; /* La dimensione non serve piu' qui: su mobile la radice scende a 14px e var(--ts-xl) si riduce di conseguenza. */ } .app-navigation { padding-inline: 0.6rem; } .question-white-box { padding: 1rem; background: transparent; border: 0 !important; box-shadow: none; } .demo-page-header { display: block; } .demo-page-header__actions { justify-content: flex-start; margin-top: 1rem; } .demo-toolbar { align-items: stretch; flex-direction: column; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ========================================================================== TEMA SCURO: SUPERFICI E LEGGIBILITA' Due problemi distinti, con due cause diverse. 1. Il fondo era navy molto saturo (#071f45, con 62 punti di scarto fra blu e rosso). Qui diventa un grigio freddo molto scuro, con appena 16 punti di scarto: piu' scuro, e il blu resta agli accenti invece di invadere tutte le superfici. E' il registro dei temi scuri istituzionali. 2. Restavano riquadri chiari e testi illeggibili. Non per distrazione, ma per due motivi strutturali: a) Bootstrap 5.3 NON ridefinisce --bs-light-rgb, --bs-dark-rgb e --bs-white-rgb sotto [data-bs-theme="dark"]. Quindi .bg-white resta bianco, .table-light resta #f8f9fa con testo nero, e restano tali in scuro. Nel markup del tool ci sono 29 bg-light, 31 text-dark, 4 bg-white e una table-light. b) Il CSS di base ha superfici chiare scritte a mano che il foglio scuro condiviso non copre tutte. Le correzioni sono state trovate misurando: una pagina d'ispezione con le combinazioni di classi reali prese dal markup, e il browser che calcola per ogni elemento il fondo effettivo e il contrasto. Prima: 18 fondi chiari e 16 testi sotto 4.5:1. Tutto e' dentro il tema demo: Dubai e Solve non sono toccati, e hanno gli stessi problemi se un domani vorrai sistemarli. ========================================================================== */ /* -------------------------------------------------------------------------- Utility di Bootstrap che in scuro non si girano da sole -------------------------------------------------------------------------- */ /* * .bg-white va su una tinta piu' alta del pannello, non sul pannello stesso: * un blocco "bianco" dentro un pannello dello stesso colore sparirebbe. */ [data-bs-theme="dark"] .bg-white { background-color: var(--ui-panel-raised) !important; } [data-bs-theme="dark"] .bg-light { background-color: var(--ui-bg-muted) !important; } [data-bs-theme="dark"] .table-light { --bs-table-bg: var(--ui-bg-muted); --bs-table-color: var(--ui-fg); --bs-table-border-color: var(--ui-border); --bs-table-striped-bg: var(--ui-bg-subtle); --bs-table-striped-color: var(--ui-fg); --bs-table-hover-bg: var(--ui-panel-raised); --bs-table-hover-color: var(--ui-fg); color: var(--ui-fg); border-color: var(--ui-border); } [data-bs-theme="dark"] .border-light { border-color: var(--ui-border) !important; } /* * Attenzione al caso opposto: su un badge giallo o azzurro il testo DEVE * restare scuro. La regola che schiariva .text-dark in scuro lo rendeva * illeggibile (1.24:1 sul giallo, 1.03:1 sull'azzurro): qui si rimette * l'inchiostro dove la superficie e' chiara per definizione. */ [data-bs-theme="dark"] .badge.bg-warning, [data-bs-theme="dark"] .badge.bg-info, [data-bs-theme="dark"] .badge.text-bg-warning, [data-bs-theme="dark"] .badge.text-bg-info { color: #1b2027 !important; } /* * .bg-light qui sopra e' stata scurita, quindi la sua etichetta va schiarita: * il caso e' opposto a quello del giallo e dell'azzurro. */ [data-bs-theme="dark"] .badge.bg-light, [data-bs-theme="dark"] .badge.text-bg-light { color: var(--ui-fg) !important; } /* * .text-secondary non si gira da sola: --bs-secondary-rgb resta quello del * tema chiaro e il testo esce a 3.66:1. */ [data-bs-theme="dark"] .text-secondary { color: var(--ui-fg-muted) !important; } /* -------------------------------------------------------------------------- Superfici del CSS di base che il foglio scuro condiviso non copriva -------------------------------------------------------------------------- */ [data-bs-theme="dark"] .user-dashboard-sql .dashboard-section-shell { background: var(--ui-panel); border-color: var(--ui-border); } /* Campi dei moduli: erano #f0f3f7, cioe' quasi bianchi */ [data-bs-theme="dark"] .form-floating input, [data-bs-theme="dark"] .form-floating select, [data-bs-theme="dark"] .form-floating textarea, [data-bs-theme="dark"] .form-floating input:focus, [data-bs-theme="dark"] .form-floating select:focus, [data-bs-theme="dark"] .form-floating textarea:focus, [data-bs-theme="dark"] .form-floating input[type="password"], [data-bs-theme="dark"] .form-floating input[type="email"], [data-bs-theme="dark"] .form-floating input[type="password"]:focus, [data-bs-theme="dark"] .form-floating input[type="email"]:focus, [data-bs-theme="dark"] .timezoneSelect, [data-bs-theme="dark"] .timezoneSelect:focus { background-color: var(--ui-bg-subtle) !important; color: var(--ui-fg); border-color: var(--ui-border); } [data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .infoModal, [data-bs-theme="dark"] .infoModal-content, [data-bs-theme="dark"] .modal-invite-to-mediation { background-color: var(--ui-panel) !important; color: var(--ui-fg); border-color: var(--ui-border); } [data-bs-theme="dark"] #ods-alert { background: var(--ui-info-soft) !important; color: var(--ui-fg); border-color: var(--ui-border); } [data-bs-theme="dark"] .agenda-item, [data-bs-theme="dark"] .single-file, [data-bs-theme="dark"] .partRecap-main, [data-bs-theme="dark"] .party-mini-metric, [data-bs-theme="dark"] .spoken-languages-section { background: var(--ui-panel) !important; background-color: var(--ui-panel) !important; color: var(--ui-fg); border-color: var(--ui-border); } [data-bs-theme="dark"] .ticketId, [data-bs-theme="dark"] .ai-meter { background: var(--ui-bg-muted) !important; background-color: var(--ui-bg-muted) !important; color: var(--ui-fg); } [data-bs-theme="dark"] .motivo-btn { background-color: var(--ui-bg-muted) !important; color: var(--ui-fg); border-color: var(--ui-border); } [data-bs-theme="dark"] .motivo-btn:hover { background-color: var(--ui-panel-raised) !important; } [data-bs-theme="dark"] .scheduledCallDone { background: var(--ui-success-soft) !important; color: var(--ui-fg); } [data-bs-theme="dark"] .infoAlreadyStart { background: var(--ui-success-soft) !important; color: var(--ui-fg); } [data-bs-theme="dark"] .social-btn, [data-bs-theme="dark"] .social-icon-btn, [data-bs-theme="dark"] .btn-white-app, [data-bs-theme="dark"] .btn-white-app:first-child { background: var(--ui-panel) !important; background-color: var(--ui-panel) !important; color: var(--ui-fg) !important; border-color: var(--ui-border) !important; } [data-bs-theme="dark"] .social-btn:hover, [data-bs-theme="dark"] .social-icon-btn:hover { background-color: var(--ui-panel-raised) !important; } [data-bs-theme="dark"] .hover-bg-light:hover { background-color: var(--ui-bg-muted) !important; } [data-bs-theme="dark"] .low-amount-box, [data-bs-theme="dark"] .low-amount-icon { background: var(--ui-warning-soft) !important; color: var(--ui-warning) !important; } [data-bs-theme="dark"] .mediation-card-draft .mediation-compact-head { background: var(--ui-bg-subtle) !important; } /* * Gli avvisi: nel tema demo il testo e il bordo sono scritti come colori * letterali, non come token, quindi ridefinire --ui-warning non li raggiunge. * Restavano a 2.31:1 il giallo e 2.06:1 il rosso. */ [data-bs-theme="dark"] .alert-info { background: var(--ui-info-soft); color: var(--ui-info); border-color: var(--ui-border); } [data-bs-theme="dark"] .alert-success { background: var(--ui-success-soft); color: var(--ui-success); border-color: var(--ui-border); } [data-bs-theme="dark"] .alert-warning { background: var(--ui-warning-soft); color: var(--ui-warning); border-color: var(--ui-border); } [data-bs-theme="dark"] .alert-danger { background: var(--ui-danger-soft); color: var(--ui-danger); border-color: var(--ui-border); } [data-bs-theme="dark"] .alert-secondary, [data-bs-theme="dark"] .alert-light { background: var(--ui-bg-muted); color: var(--ui-fg); border-color: var(--ui-border); } /* * .single-file impone color:#333 con !important, anche sul link interno. */ [data-bs-theme="dark"] .single-file, [data-bs-theme="dark"] .single-file a, [data-bs-theme="dark"] .single-file small { color: var(--ui-fg) !important; } /* ========================================================================== TEMA SCURO: I BLOCCHI