/* =================================================================== */ /* SEZIONE DI NORMALIZZAZIONE E CONTROLLO GLOBALE */ /* (INSERIRE ALL'INIZIO DEL FILE) */ /* =================================================================== */ /* 1. Reset universale e box-sizing per un layout prevedibile */ /* =================================================================== */ /* SEZIONE DI NORMALIZZAZIONE E CONTROLLO GLOBALE */ /* (INSERIRE ALL'INIZIO DEL FILE) */ /* =================================================================== */ /* 1. Definiamo le nostre variabili globali */ :root { --font-main-stack: 'Fira Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono-stack: 'Fira Mono', "Courier New", Courier, monospace; } /* 2. Reset universale e box-sizing per un layout prevedibile */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* 3. Impostazioni base per */ html { /* Impedisce a iOS di ingrandire i font in orizzontale */ -webkit-text-size-adjust: 100%; } /* 4. Applica font, colore di base e anti-aliasing a */ body { /* Usa la variabile per il font principale */ font-family: var(--font-main-stack); /* Imposta il peso di default a 500 (Medium) per un look più "bold" */ font-weight: 400; /* Suggerimenti per un rendering del testo più pulito e omogeneo */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Imposta lo sfondo di base */ background-color: #f8f9fa; /* Migliora la leggibilità generale */ line-height: 1.5; } /* 5. Definisce il peso per il grassetto */ strong, b { font-weight: 700; } /* 6. Fix specifici per rimuovere l'aspetto nativo di iOS dai form */ input, button, textarea, select { font-family: inherit; /* Forza gli elementi del form a usare lo stesso font del resto della pagina */ font-weight: inherit; /* Eredita anche il peso */ -webkit-appearance: none; appearance: none; } /* 7. (Opzionale) Rimuove l'evidenziazione al tocco su mobile */ a, button, input[type="button"], input[type="submit"] { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* 8. Imposta il font per gli elementi monospaziati */ pre, code, kbd, samp { font-family: var(--font-mono-stack); font-size: 1em; /* Assicura una dimensione del font consistente */ } /* =================================================================== */ /* INIZIO DEL TUO CSS SPECIFICO (TUTTO IL RESTO) */ /* =================================================================== */ /* Stili personalizzati per l'applicazione */ body { min-height: 100vh; display: flex; flex-direction: column; } .container { flex: 1; } /* Stile per le tabelle */ .table-responsive { margin-top: 20px; } .table th { background-color: #f8f9fa; } /* Stile per i form */ .form-container { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f9f9f9; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .required-field::after { content: "*"; color: red; margin-left: 4px; } /* Stile per i pulsanti di azione */ .action-buttons { white-space: nowrap; } .action-buttons .btn { margin-right: 5px; } /* Stile per le notifiche flash */ .alert { margin-bottom: 20px; } /* Stile per il contenitore dell'app */ #app-container { padding: 20px; margin-top: 20px; border-radius: 5px; } /* Inizio Stili per pre_rist */ /* --- Inizio Stili Personalizzati per pre_rist --- */ /* --- Stili Generali Tabs --- */ .nav-tabs { border-bottom: 2px solid #dee2e6; /* Linea di base un po' più spessa */ margin-bottom: 0; /* Rimuovi margine inferiore di default */ } .nav-tabs .nav-link { border-bottom-width: 2px; /* Imposta spessore bordo inferiore per tutte */ margin-bottom: -2px; /* Sovrapponi leggermente alla linea di base */ /* --- Dimensione Font Tab --- */ font-size: 1.2rem; /* Dimensione testo tab (puoi aggiustare) */ padding: 0.75rem 1.25rem; /* Padding interno tab */ color: #495057; /* Colore testo standard tab inattiva */ border-top-left-radius: 0.35rem; /* Arrotonda angoli superiori */ border-top-right-radius: 0.35rem; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out; /* Transizioni */ display: flex; /* Per allineare icona, testo e totali */ align-items: center; /* Allinea verticalmente elementi nella tab */ } .nav-tabs .nav-link .bi { /* Stile per le icone Bootstrap nelle tab */ margin-right: 0.4rem; /* Spazio tra icona e testo */ font-size: 1.1rem; /* Dimensione icona */ vertical-align: middle; /* Miglior allineamento verticale */ } .nav-tabs .nav-link:hover { border-color: #e9ecef #e9ecef #dee2e6; /* Colore bordo hover */ background-color: #f8f9fa; /* Sfondo leggero su hover */ isolation: isolate; /* Necessario per z-index su hover in Bootstrap 5.3+ */ } /* --- Stili Tab Attiva (con sfondi colorati) --- */ .nav-tabs .nav-link.active { font-weight: 600; /* Testo più grassetto */ border-bottom-color: transparent !important; /* Nasconde bordo inferiore per fusione */ /* Mantiene bordi laterali e superiori */ border-left-color: #dee2e6; border-right-color: #dee2e6; border-top-color: #dee2e6; border-top-width: 1px; /* O 2px se preferisci bordo sup. più marcato */ } /* Colori e Sfondi SPECIFICI per Tab Attiva */ #pranzo-tab.active { color: #b02a37; /* Testo rosso scuro (contrasto su pesca/arancio) */ background-color: #ffe0cc; /* Sfondo pesca/arancio chiaro (abbinalo al gradiente sotto) */ } #cena-tab.active { color: #0551a7; /* Testo blu scuro (contrasto su azzurro) */ background-color: #ccebff; /* Sfondo azzurro chiaro (abbinalo al gradiente sotto) */ } /* --- Stili Contenuto Tab (Panes) --- */ .tab-content { border: none; /* Rimosso bordo esterno dal contenitore */ background-color: transparent; /* Sfondo trasparente */ padding: 0; /* Nessun padding sul contenitore */ position: relative; min-height: 300px; /* Altezza minima */ } .tab-pane { padding: 1.5rem; /* Padding interno del contenuto */ background: transparent; /* Sfondo di base trasparente (prende gradiente se active) */ /* Bordo e arrotondamento sui lati e sotto */ border: 1px solid #dee2e6; border-top: none; border-bottom-left-radius: 0.35rem; border-bottom-right-radius: 0.35rem; /* Ombra per staccare */ box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Aggiungi transizione fade se non già presente per .fade */ transition: opacity .15s linear; } /* Assicurati che .fade sia impostato correttamente da Bootstrap, altrimenti aggiungi: */ .tab-pane:not(.active) { display: none; } .tab-pane.fade { transition: opacity .15s linear; } @media (prefers-reduced-motion: reduce) { .tab-pane.fade { transition: none; } } .tab-pane.fade:not(.show) { opacity: 0; } /* --- Sfondi Gradienti per Tab Panes Attivi --- */ #pranzo-tab-pane.active { background: linear-gradient(to bottom, #fff0e6, #ffd1b3, #ffb380); /* Arancio/Pesca tramonto tenue -> più intenso */ } #cena-tab-pane.active { background: linear-gradient(to bottom, #e6f7ff, #b3e6ff, #80d4ff); /* Azzurro cielo tenue -> più intenso */ } /* --- Adattamenti Leggibilità su Sfondi Gradienti --- */ .tab-pane.active .zona-titolo { color: #212529; /* Testo scuro */ border-bottom-color: rgba(0, 0, 0, 0.1); /* Bordo leggermente più scuro */ } .tab-pane.active .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(254, 254, 254, 1) } .tab-pane.active .table-hover > tbody > tr:hover > * { background-color: rgba(255, 255, 255, 1); /* Bianco più trasparente per righe alternate */ } .tab-pane.active .table > thead.table-light > * > * { background-color: rgba(250, 250, 250, 0.6); /* Bianco più opaco su hover */ color: #343a40; /* Testo header scuro */ } .tab-pane.active .table td, .tab-pane.active .table th { color: #212529; /* Testo tabella scuro standard */ } /* --- Stili Titoli Zone e Tabelle --- */ .zona-titolo { font-size: 1.3rem; /* Dimensione titolo zona */ margin-bottom: 0.75rem; border-bottom: 1px solid #eee; /* Linea separatrice */ padding-bottom: 0.5rem; } .prenotazioni-table { font-size: 0.95rem; /* Dimensione testo tabella */ } .prenotazioni-table th { font-weight: 600; /* Grassetto header */ } .prenotazioni-table td, .prenotazioni-table th { vertical-align: middle; /* Allineamento verticale */ padding: 0.5rem 0.4rem; /* Padding celle (per table-sm) */ } .note-display { max-width: 180px; /* Larghezza massima colonna note */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Tronca con ... */ cursor: help; /* Cursore aiuto per tooltip */ display: inline-block; /* Necessario per max-width */ } .action-buttons button { padding: 0.2rem 0.4rem; /* Padding bottoni azione */ font-size: 0.8rem; /* Dimensione font bottoni */ } .action-buttons i { vertical-align: text-bottom; /* Allineamento icone */ } /* --- Stili Totali (con sfondo trasparente su tab attiva) --- */ .total-counts { font-size: 0.85em; /* Dimensione relativa alla tab */ font-weight: 500; /* Leggermente grassetto */ color: #6c757d; /* Colore default (grigio) */ margin-left: 8px; /* Spazio dal testo principale della tab */ background-color: transparent; /* Sfondo trasparente di default */ padding: 0.1rem 0.4rem; border-radius: 0.2rem; transition: color 0.2s ease-in-out; /* Transizione solo per colore testo */ } /* Colori TESTO specifici per totali su tab attive */ #pranzo-tab.active .total-counts { color: #0551a7; /* Blu scuro (contrasto su azzurro tab) */ } #cena-tab.active .total-counts { color: #a12331; /* Rosso scuro (contrasto su pesca tab) */ } /* TUTE LE TESTATE DEI MOPDAL */ .modal-header { background-color: white; /* Il tuo colore desiderato */ } .modal-header .modal-title { color:#0074FF; font-weight: bold } .modal-content { background-color: #f0f4f8; /* Il tuo colore desiderato */ } .modal-body { background-color: #f0f4f8; /* Il tuo colore desiderato */ } .presentation-wrapper { /* Definisce la larghezza massima e centra il blocco nella pagina */ max-width: 850px; /* RIDUCI QUESTO per rimpicciolire ancora di più */ width: 100%; margin: 2rem auto; /* Spazio sopra/sotto e centratura orizzontale */ } /* Applichiamo le proporzioni DIRETTAMENTE all'iframe */ .presentation-wrapper iframe { /* Forza il rapporto d'aspetto 16:9 in modo nativo */ aspect-ratio: 16 / 9; /* L'iframe deve occupare tutta la larghezza del suo contenitore */ width: 100%; /* L'altezza viene calcolata automaticamente da aspect-ratio */ height: auto; /* Stile pulito */ border: 0; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: block; /* Assicura che l'iframe sia trattato come un blocco */ }