/* ========================================================================== site.css — base typography + theme-aware overrides Il tema di default e' dark (data-bs-theme su ); a runtime lo cambia Tabiot (theme.js) in base all'impostazione utente. Ogni colore passa da una variabile: --bs-* per le superfici Bootstrap, --tp-* per le nostre. I --tp-* che dipendono dal tema sono ridefiniti in fondo al file nel blocco :root[data-bs-theme="light"]. ========================================================================== */ :root { /* ----- Palette: tinte identiche nei due temi (fondi pieni, bordi e aloni accent) ----- */ --tp-accent: #7c5cff; /* viola/blu di accent (Postman-like) */ --tp-accent-soft: rgba(124, 92, 255, 0.15); --tp-accent-glow: rgba(124, 92, 255, 0.35); --tp-accent-line: rgba(124, 92, 255, 0.45); --tp-success: #2dd4a8; --tp-warning: #ffb547; --tp-warning-soft: rgba(255, 181, 71, 0.16); --tp-warning-glow: rgba(255, 181, 71, 0.32); --tp-danger: #ff6b6b; --tp-danger-soft: rgba(255, 107, 107, 0.16); --tp-danger-glow: rgba(255, 107, 107, 0.32); --tp-info: #4ec9f0; --tp-accent-hover: #8b6dff; /* ----- Testo colorato su fondo tenue: cambia con il tema, altrimenti su chiaro una tinta pastello su fondo al 12% diventa illeggibile. ----- */ --tp-accent-text: #b8a4ff; --tp-success-text: #6fe9c5; --tp-warning-text: #ffd089; --tp-danger-text: #ff9b9b; --tp-info-text: #92dcf5; /* ----- Superfici e bordi (valori dark) ----- Un solo posto per gli alpha di sovrapposizione: prima erano rgba(255,255,255,0.0x) riscritti a mano in ogni componente, con valori tutti diversi tra loro. Su tema chiaro gli stessi token diventano velature nere. */ --tp-surface-sunken: rgba(255, 255, 255, 0.02); --tp-surface-raised: rgba(255, 255, 255, 0.04); --tp-surface-hover: rgba(255, 255, 255, 0.07); --tp-border-subtle: rgba(255, 255, 255, 0.08); --tp-border-strong: rgba(255, 255, 255, 0.16); --tp-surface-1: var(--bs-tertiary-bg); --tp-surface-2: var(--bs-secondary-bg); /* ----- Scala di spaziatura (base 4px) ----- */ --tp-space-1: 0.25rem; --tp-space-2: 0.5rem; --tp-space-3: 0.75rem; --tp-space-4: 1rem; --tp-space-5: 1.5rem; --tp-space-6: 2rem; /* ----- Raggi ----- */ --tp-radius-sm: 4px; --tp-radius-md: 8px; --tp-radius-lg: 12px; --tp-radius-pill: 999px; /* ----- Scala tipografica ----- */ --tp-fs-xs: 0.6875rem; /* 11px — tag, micro-label maiuscole */ --tp-fs-sm: 0.8125rem; /* 13px — testo UI corrente */ --tp-fs-md: 0.875rem; /* 14px — body */ --tp-fs-lg: 1rem; /* 16px — titolo di sezione */ --tp-fs-xl: 1.25rem; /* 20px — titolo di pagina */ --tp-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace; /* ----- Layout ----- */ --tp-page-pad-x: 1.25rem; --tp-page-pad-y: 1rem; --tp-content-max: 72rem; /* larghezza utile di lettura per tabelle e form */ --tp-control-h: 2.25rem; /* altezza uniforme dei controlli in linea (send bar) */ /* ----- Ombre e scrollbar (valori dark) ----- */ --tp-elevation: 0 10px 26px rgba(0, 0, 0, 0.38); --tp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --tp-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.25); --tp-icon-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); --tp-scrollbar-thumb: rgba(255, 255, 255, 0.18); --tp-scrollbar-thumb-hover: rgba(255, 255, 255, 0.32); } /* ========================================================================== Tema chiaro — solo i token che dipendono dal tema. Le tinte accent/stato restano quelle di :root: cambiano le velature, le ombre e i testi su fondo tenue. ========================================================================== */ :root[data-bs-theme="light"] { --tp-accent-hover: #6a4ae0; --tp-accent-text: #5a3fd6; --tp-success-text: #0f7a60; --tp-warning-text: #8a5a00; --tp-danger-text: #b03030; --tp-info-text: #10627f; --tp-surface-sunken: rgba(0, 0, 0, 0.02); --tp-surface-raised: rgba(0, 0, 0, 0.04); --tp-surface-hover: rgba(0, 0, 0, 0.06); --tp-border-subtle: rgba(0, 0, 0, 0.10); --tp-border-strong: rgba(0, 0, 0, 0.22); --tp-elevation: 0 10px 26px rgba(15, 18, 32, 0.14); --tp-shadow-sm: 0 1px 2px rgba(15, 18, 32, 0.10); --tp-shadow-md: 0 2px 8px rgba(15, 18, 32, 0.10); --tp-icon-shadow: 0 1px 1px rgba(15, 18, 32, 0.18); --tp-scrollbar-thumb: rgba(0, 0, 0, 0.22); --tp-scrollbar-thumb-hover: rgba(0, 0, 0, 0.38); } /* ========================================================================== Collection Explorer a piena finestra — due interventi sulla shell di Oss.Layouts, entrambi legati a questa sola pagina da `:has()` perché sono antenati del componente e un .razor.css scoped non li raggiungerebbe. Le pagine CRUD non sono toccate: il respiro ai bordi ce l'hanno per disegno. 1) Via i margini. La shell avvolge ogni pagina in `.page.m-2` > `.content` > `.container-fluid`, che insieme mettono una ventina di pixel per lato prima ancora del padding delle viste: su una pagina che si comporta da applicazione sono spazio perso. 2) Una catena di altezze fino al componente. `.page` contiene solo un `
` in position:absolute, quindi non ha contenuto in flusso e collassa a zero: tutto le esce fuori, ed è quell'overflow a far scorrere il documento. Ancorare l'explorer al viewport con una calc() costringeva a indovinare l'altezza reale del menu orizzontale e del div del titolo, e qualche pixel di scroll restava sempre. Dando il viewport alla colonna che contiene menu e pagina, `.page` (che è già `flex-fill`) si prende da sé ciò che resta sotto il menu, quale che ne sia l'altezza. Sotto `main` la catena la shell ce l'ha già: assoluto stretto sui bordi, poi `flex-fill` con dentro un altro assoluto attorno al body. ========================================================================== */ /* dvh e non vh: su mobile la barra URL del browser si ritrae allo scroll e vh conta anche lei, spingendo il fondo pagina sotto la piega. */ .d-flex.flex-column:has(> .page .api-client-container) { height: 100dvh; } .page:has(.api-client-container) { /* .m-2 è una utility Bootstrap: porta già !important. */ margin: 0 !important; } /* Gli unici anelli che la shell lascia senza altezza propria. */ .page:has(.api-client-container) > main > .content, .page:has(.api-client-container) > main > .content > .container-fluid, .page:has(.api-client-container) > main > .content > .container-fluid > .d-flex { height: 100%; min-height: 0; } .page:has(.api-client-container) .container-fluid { padding-left: 0; padding-right: 0; } /* ========================================================================== Schermi stretti — solo i token di layout. Il padding di pagina desktop si mangia 40px sui 390 di un telefono in verticale: qui vale meno. La soglia 768px e' la stessa usata dai componenti dell'explorer. ========================================================================== */ @media (max-width: 768px) { :root { --tp-page-pad-x: var(--tp-space-2); --tp-page-pad-y: var(--tp-space-2); /* Controlli in linea piu' bassi: su un telefono la cornice (barra di contesto, testata, striscia dei tab) vale piu' dello spazio che resta al contenuto, e qui si guadagna su ogni banda insieme. */ --tp-control-h: 2rem; } } /* ========================================================================== Primitive condivise — definite una volta sola perché erano duplicate (o divergenti) in più componenti scoped. ========================================================================== */ /* Toggle del pannello collection: vive nella barra di contesto piena (via lo slot LeadingTools di WorkspaceHeader) oppure, su schermo stretto, nella barra compatta che rende CollectionExplorer. Due componenti diversi, quindi sta qui e non in uno scoped: nello scoped servirebbe un ::deep per lato e le due copie divergerebbero. */ .sidebar-toggle { background: transparent; border: 1px solid var(--tp-border-subtle); border-radius: var(--tp-radius-sm); color: var(--bs-secondary-color); width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; flex-shrink: 0; transition: color 0.15s ease, border-color 0.15s ease; } .sidebar-toggle:hover { color: var(--tp-accent); border-color: var(--tp-accent); } /* Bersaglio del pollice: e' l'unico modo di riaprire il drawer. */ @media (max-width: 768px) { .sidebar-toggle { width: var(--tp-control-h); height: var(--tp-control-h); } } /* Colori dei metodi HTTP: usati da tree, send bar, cronologia e runner. */ .m-get { color: var(--tp-success); } .m-post { color: var(--tp-warning); } .m-put { color: var(--tp-info); } .m-patch { color: var(--tp-accent); } .m-del { color: var(--tp-danger); } .m-other { color: var(--bs-secondary-color); } /* Micro-titolo di sezione (maiuscoletto spaziato) */ .tp-section-title { font-size: var(--tp-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--bs-secondary-color); margin: 0; } /* Stato vuoto: un solo design invece dei quattro precedenti. */ .tp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--tp-space-1); padding: var(--tp-space-6) var(--tp-space-4); text-align: center; color: var(--bs-secondary-color); } .tp-empty > i { font-size: 2rem; color: var(--tp-accent); opacity: 0.45; margin-bottom: var(--tp-space-2); } .tp-empty-title { font-size: var(--tp-fs-md); font-weight: 600; color: var(--bs-body-color); } .tp-empty-text { font-size: var(--tp-fs-sm); margin: 0; } /* Tabella chiave/valore editabile — condivisa da param, header e variabili della request, che sono componenti fratelli e non possono spartirsi un .razor.css scoped. */ .kv-table { width: 100%; border-collapse: collapse; font-size: var(--tp-fs-sm); } .kv-table th { text-align: left; font-weight: 600; font-size: var(--tp-fs-xs); letter-spacing: 0.5px; text-transform: uppercase; color: var(--bs-secondary-color); padding: var(--tp-space-1) var(--tp-space-2); border-bottom: 1px solid var(--tp-border-subtle); } .kv-col-act { width: 2.25rem; } .kv-table td { padding: 0.15rem var(--tp-space-1); border-bottom: 1px solid var(--tp-surface-raised); } .kv-input { width: 100%; background: transparent; border: 1px solid transparent; border-radius: var(--tp-radius-sm); color: var(--bs-body-color); font-family: var(--tp-font-mono); font-size: var(--tp-fs-sm); padding: var(--tp-space-1) var(--tp-space-2); } .kv-input:hover { border-color: var(--tp-border-subtle); } .kv-input:focus { outline: none; border-color: var(--tp-accent); background: var(--tp-surface-raised); } .kv-input::placeholder { color: var(--bs-secondary-color); opacity: 0.6; } .kv-del { background: transparent; border: none; cursor: pointer; color: var(--bs-secondary-color); padding: var(--tp-space-1); border-radius: var(--tp-radius-sm); } .kv-del:hover { color: var(--tp-danger); } .kv-add-row td { border-bottom: none; padding-top: var(--tp-space-2); } .kv-add { background: transparent; border: 1px dashed var(--tp-border-subtle); border-radius: var(--tp-radius-md); color: var(--bs-secondary-color); font-size: var(--tp-fs-sm); padding: var(--tp-space-1) var(--tp-space-3); cursor: pointer; } .kv-add:hover { color: var(--tp-accent); border-color: var(--tp-accent); } /* Riga configurata ma non inviata: resta leggibile, non deve sembrare attiva. */ .kv-row-off .kv-input { opacity: .5; } .kv-col-on { width: 2.25rem; text-align: center; } /* Checkbox di attivazione: disabilitata sulle righe che l'utente non possiede. */ .kv-check { cursor: pointer; } .kv-check:disabled { cursor: default; opacity: .45; } /* Select del tipo variabile: stessa cornice invisibile degli input. */ .kv-select { width: 100%; background: transparent; border: 1px solid transparent; border-radius: var(--tp-radius-sm); color: var(--bs-body-color); font-size: var(--tp-fs-sm); padding: var(--tp-space-1) var(--tp-space-2); } .kv-select:hover { border-color: var(--tp-border-subtle); } .kv-select:focus { outline: none; border-color: var(--tp-accent); background: var(--tp-surface-raised); } /* Senza questa regola la lista nativa eredita il fondo trasparente del select e in tema scuro diventa illeggibile. Stessa medicina della .method-pill nella barra dell'URL. */ .kv-select option { color: var(--bs-body-color); background: var(--bs-body-bg); } /* Tabella chiave/valore in sola lettura: la variante non editabile della .kv-table qui sopra. */ .tp-table { width: 100%; border-collapse: collapse; font-size: var(--tp-fs-sm); } .tp-table thead th { text-align: left; font-weight: 600; font-size: var(--tp-fs-xs); letter-spacing: 0.5px; text-transform: uppercase; color: var(--bs-secondary-color); padding: var(--tp-space-1) var(--tp-space-2); border-bottom: 1px solid var(--tp-border-subtle); white-space: nowrap; } .tp-table td { padding: var(--tp-space-2); border-bottom: 1px solid var(--tp-surface-raised); vertical-align: top; } .tp-table tbody tr { transition: background-color 0.15s ease; } .tp-table tbody tr:hover { background-color: var(--tp-surface-hover); } .tpt-key { font-family: var(--tp-font-mono); font-weight: 600; color: var(--tp-accent); white-space: nowrap; } .tpt-val { font-family: var(--tp-font-mono); color: var(--bs-body-color); overflow-wrap: anywhere; } .tp-table .tpt-actions { width: 3rem; text-align: right; white-space: nowrap; } .tp-table .tpt-empty { text-align: center; color: var(--bs-secondary-color); padding: var(--tp-space-5); } /* Righe di sola lettura: banda a sinistra che dice da dove viene il valore. */ .tpt-row-auth > td:first-child { box-shadow: inset 3px 0 0 var(--tp-warning); } .tpt-row-inherited > td:first-child { box-shadow: inset 3px 0 0 var(--tp-border-strong); } .tpt-row-auth > td, .tpt-row-inherited > td { color: var(--bs-secondary-color); } .tpt-row-auth .tpt-key, .tpt-row-inherited .tpt-key { color: var(--bs-secondary-color); } /* Etichetta di provenienza a fine riga. */ .tpt-origin { display: inline-flex; align-items: center; gap: var(--tp-space-1); font-size: var(--tp-fs-xs); text-transform: uppercase; letter-spacing: 0.4px; border-radius: var(--tp-radius-pill); padding: 0.1rem var(--tp-space-2); white-space: nowrap; } .tpt-origin-auth { color: var(--tp-warning-text); background: var(--tp-warning-soft); } .tpt-origin-inherited { color: var(--bs-secondary-color); background: var(--tp-surface-raised); } /* Corpo dei DxPopup: rendono in un portale fuori dal componente, quindi la spaziatura non può stare in un .razor.css scoped. */ .tp-popup-body { padding: var(--tp-space-4); } .tp-popup-body-fill { padding: var(--tp-space-4); height: 100%; } /* Footer standard dei popup (azioni allineate a destra). */ .tp-popup-actions { display: flex; justify-content: flex-end; gap: var(--tp-space-2); } html, body { font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } /* Outline + focus ring coerente con l'accent */ :focus-visible { outline: 2px solid var(--tp-accent); outline-offset: 2px; border-radius: 4px; } h1:focus { outline: none; } a { color: var(--bs-link-color); text-decoration: none; } a:hover { color: var(--bs-link-hover-color); text-decoration: underline; } /* Validation states */ .valid.modified:not([type=checkbox]) { outline: 1px solid var(--tp-success); } .invalid { outline: 1px solid var(--tp-danger) !important; --dxbl-text-edit-border-color: unset !important; } .validation-message { color: var(--tp-danger); } .wizardPopupWidth { min-width: 90%; } .tabiot-toast-container { z-index: 9999999 !important; } /* Navbar OSS — adatta al tema */ [oss-navmenu] .nav-link, [oss-navmenu] .navbar-brand, [oss-navmenu] .dropdown-item { color: var(--bs-body-color) !important; } [oss-navmenu] .nav-link:hover, [oss-navmenu] .dropdown-item:hover { color: var(--tp-accent) !important; background-color: var(--tp-accent-soft); } /* Pulsanti — ammorbidiamo con leggero glow su hover/focus */ .btn { transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .btn:hover:not(:disabled) { transform: translateY(-1px); } .btn:active:not(:disabled) { transform: translateY(0); } .btn-primary { background-color: var(--tp-accent); border-color: var(--tp-accent); } .btn-primary:hover:not(:disabled), .btn-primary:focus:not(:disabled) { background-color: var(--tp-accent-hover); border-color: var(--tp-accent-hover); box-shadow: 0 0 0 0.2rem var(--tp-accent-soft); } .btn-link { color: var(--bs-link-color); text-decoration: none; } /* Reset trasformazioni dei container quando il button è "card-like" */ .btn.card, .btn-card { text-align: left; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } /* Code monospace coerente */ code, pre, kbd { font-family: var(--tp-font-mono); } /* ========================================================================== EDITOR DI CODICE (Tabiot AceEditor) La classe arriva dal parametro CssClass e sta qui, non in un .razor.css: una regola scoped verrebbe riscritta con l'attributo di scope della pagina e non aggancerebbe la root di un componente figlio. Da globale vale per ogni editor della app senza un ::deep per pagina. ========================================================================== */ /* Toolbar piatta: i btn pieni di Bootstrap stonano con la palette. */ .tp-code-editor .btn { background-color: transparent; border-color: var(--tp-border-subtle); color: var(--bs-secondary-color); } .tp-code-editor .btn:hover:not(:disabled) { background-color: transparent; border-color: var(--tp-accent); color: var(--tp-accent); } /* A capo automatico attivo: l'unico stato "acceso" della toolbar. */ .tp-code-editor .btn-check:checked + .btn { background-color: var(--tp-accent-soft); border-color: var(--tp-accent); color: var(--tp-accent); }