/* La proprietà 'font-family' è impostata su 'Inter' come richiesto. Se Inter non è disponibile, verranno utilizzati font generici sans-serif. */ html { font-family: 'Inter', sans-serif; background-color: #f8fafc; /* Tailwind: bg-slate-50 */ color: #1e293b; /* Tailwind: text-slate-800 */ line-height: 1.6; margin: 0; align-items: center; min-height: 100vh; box-sizing: border-box; /* Assicura che padding non aumenti la dimensione totale */ width: 100%; } body { font-family: 'Inter', sans-serif; background-color: #f8fafc; color: #1e293b; line-height: 1.6; margin: 0; padding: 0PX 20PX 0PX 30PX; /* Remove or reduce for full width */ min-height: 100vh; box-sizing: border-box; /* padding-top: 100px; Adjust this value to match the menu height */ width: 100vw; /* Make body full viewport width */ align-items: center; } .Table1 { /* max-width: 800px;*/ width: 100% auto; padding: 10px 10px 10px 10px; background-color: #ffffff; border-radius: 0.75rem; /* Tailwind: rounded-xl */ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Tailwind: shadow-lg */ font-size: 1rem; /* Dimensione base del font (equivalente a 1rem) */ } .Table1 th { } .Table1 td { padding: 2px 2px 2px 2px; vertical-align:top; } .Table1 td.nowrap { white-space: nowrap; } .container { /* max-width: 800px;*/ width: 100%; padding: 0.2rem; background-color: #ffffff; border-radius: 0.75rem; /* Tailwind: rounded-xl */ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Tailwind: shadow-lg */ } h1, h2, p { margin-bottom: 0rem; margin-top: 0rem; padding-top: 0rem; padding-bottom: 0.2rem; } /* 1. Utilizzo di REM per la dimensione base del font: REM (Root EM) è relativo alla dimensione del font dell'elemento HTML radice (). Questo rende la dimensione del font facile da gestire globalmente. Se l'utente modifica la dimensione del font nel browser, il sito si adatta. */ html { font-size: 16px; /* Dimensione base del font (equivalente a 1rem) */ } /* Esempio per h1, h2, p con unità REM */ h1 { font-size: 3rem; /* 3 volte la dimensione base (48px se html è 16px) */ font-weight: 700; /* Bold */ color: #0d9488; /* Tailwind: text-teal-600 */ text-align: center; } h2 { font-size: 2rem; /* 2.25 volte la dimensione base (36px se html è 16px) */ font-weight: 600; /* Semi-bold */ color: #0f766e; /* Tailwind: text-teal-700 */ } p { font-size: 1.125rem; /* 1.125 volte la dimensione base (18px se html è 16px) */ } /* 2. Utilizzo di VW (Viewport Width) per la tipografia fluida: VW (Viewport Width) è relativo alla larghezza del viewport (la finestra del browser). 1vw è uguale all'1% della larghezza del viewport. Questo rende il testo scalabile fluidamente. Spesso si combina con rem/em per avere un buon bilanciamento. Esempio: clamp(min-size, fluid-size, max-size) */ .fluid-text { /* La funzione clamp() è un'ottima soluzione moderna per la tipografia fluida. - Il primo valore (1.2rem) è la dimensione minima del font. - Il secondo valore (2vw) è la dimensione fluida, relativa alla larghezza del viewport. - Il terzo valore (1.8rem) è la dimensione massima del font. Il browser sceglierà un valore tra il minimo e il massimo, scalando in base a 2vw. */ font-size: clamp(1.2rem, 2vw, 1.8rem); line-height: 1.5; margin-top: 1.5rem; padding: 1rem; background-color: #ecfdf5; /* Tailwind: bg-emerald-50 */ border-left: 4px solid #10b981; /* Tailwind: border-emerald-500 */ border-radius: 0.25rem; /* Tailwind: rounded-md */ } /* 3. Utilizzo delle Media Queries: Le media queries ti permettono di applicare stili diversi in base a caratteristiche specifiche del dispositivo, come la larghezza dello schermo. Questo è fondamentale per adattare il layout e le dimensioni del font. */ /* Per schermi piccoli (es. mobile - breakpoint 'sm' di Tailwind, min-width: 640px) */ @media (min-width: 640px) { html { font-size: 17px; /* Aumenta leggermente la base font-size */ } h1 { font-size: 3rem; /* Aumenta h1 */ } p { font-size: 1.15rem; /* Aumenta p */ } } /* Per schermi medi (es. tablet - breakpoint 'md' di Tailwind, min-width: 768px) */ @media (min-width: 768px) { html { font-size: 18px; /* Aumenta ancora la base font-size */ } h1 { font-size: 3rem; /* Aumenta h1 ulteriormente */ } h2 { font-size: 2rem; /* Aumenta h2 */ } p { font-size: 1.25rem; /* Aumenta p ulteriormente */ } } /* Per schermi grandi (es. desktop - breakpoint 'lg' di Tailwind, min-width: 1024px) */ @media (min-width: 1024px) { html { font-size: 19px; /* Base più grande per desktop */ } h1 { font-size: 3rem; /* Massima dimensione per h1 */ } h2 { font-size: 2rem; /* Massima dimensione per h2 */ } p { font-size: 1.2rem; /* Massima dimensione per p */ } } /* Stili per il piè di pagina */ .footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; /* Tailwind: border-slate-200 */ text-align: center; font-size: 0.875rem; /* Tailwind: text-sm */ color: #64748b; /* Tailwind: text-slate-500 */ } #mainMenu { position: fixed; top: 0; left: 0; width: 100%; background: #333; z-index: 1000; } #mainMenu ul { margin: 0; padding: 0; list-style: none; display: flex; } #mainMenu li { margin: 0; } #mainMenu a { display: block; color: #fff; padding: 15px 20px; text-decoration: none; } #mainMenu a:hover { background: #444; } .menuLivelli { font-family: Arial, sans-serif; } .menuLivelli ul { list-style-type: none; padding: 0; margin: 0; display: flex; /* Imposta l'orientamento orizzontale */ } .menuLivelli li { position: relative; padding: 20px 10px; background-color: black; color: white; cursor: pointer; border-radius: 5px; } .menuLivelli li img { vertical-align: middle; margin-right: 8px; width: 25px; height: 25px; } .menuLivelli li:hover { background-color: dimgrey; color: aqua; } .menuLivelli ul li ul { display: none; position: absolute; top: 40px; /* Posizione del sottomenu */ left: 0; background-color: black; padding: 0; min-width: 150px; z-index: 9999; border-radius: 5px; } .menuLivelli ul li ul li { padding: 10px; white-space: nowrap; } .menuLivelli ul li ul li ul { display: none; position: absolute; left: 150px; /* Posizionamento del sub-sottomenu */ top: 0; background-color: black; border-radius: 5px; } .menuLivelli ul li:hover ul { display: block; /* Mostra il sottomenu al passaggio del mouse */ } .menuLivelli ul li ul li:hover ul { display: block; /* Mostra il sub-sottomenu al passaggio del mouse */ } .menuLivelli ul.static ul.static { display: none; position: absolute; z-index: 1000; } .fixed-top-center { position: fixed; top: 0; left: 0; transform: translateX(0%); width: 100%; /* Adjust as needed */ background-color: black; /* Adjust as needed */ z-index: 1000; /* Ensure it is above other elements */ box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Optional: Add some shadow for better visibility */ border: 1px solid #000; /* Optional: Add border */ border-radius: 5px; /* Optional: Add border radius */ } .Gridview { } /* Targeting all submit buttons */ input[type="submit"], /* Targeting all regular buttons (if you use them) */ input[type="button"] { background-color: #0f766e; /* Green */ color: white; padding: 5px 5px 5px 5px; border: none; border-radius: 5px; cursor: pointer; font-size: 1.2rem; text-align: center; text-decoration: none; display: inline-block; margin: 5px 5px 5px 5px; transition-duration: 0.4s; /* Smooth transition for hover effects */ } /* Hover effect */ input[type="submit"]:hover, input[type="button"]:hover { background-color: #0C5A54; /* Darker green on hover */ box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); } /* Active (clicked) state */ input[type="submit"]:active, input[type="button"]:active { background-color: #526E53; box-shadow: 0 5px #666; transform: translateY(2px); } /* Disabled state (important for ASP.NET buttons) */ input[type="submit"]:disabled, input[type="button"]:disabled { background-color: #cccccc; color: #666666; cursor: not-allowed; box-shadow: none; transform: none; } /* Styling for Textbox elements (corresponds to which renders as ) */ input[type="search"] { padding: 4px 4px 4px 4px; /* Comfortable padding */ border: 1px solid #d1d5db; /* Light gray border */ border-radius: 5px; /* Rounded corners */ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* Subtle inner shadow */ transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus */ font-size: 1.2rem; color: #4a4a4a; /* Text color */ outline: none; /* Remove default outline */ } /* Focus state for Textbox */ input[type="search"]:focus { border-color: #6366f1; /* Tailwind indigo-500 for focus border */ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); /* Light indigo glow */ } /* Styling for DropDownList elements (corresponds to which renders as ) */ input[type="text"] { padding: 4px 4px 4px 4px; /* Comfortable padding */ border: 1px solid #d1d5db; /* Light gray border */ border-radius: 5px; /* Rounded corners */ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* Subtle inner shadow */ transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus */ font-size: 1.2rem; color: #4a4a4a; /* Text color */ outline: none; /* Remove default outline */ } /* Focus state for Textbox */ input[type="text"]:focus { border-color: #6366f1; /* Tailwind indigo-500 for focus border */ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); /* Light indigo glow */ } /* Styling for Textbox elements (corresponds to which renders as ) */ input[type="password"] { padding: 4px 4px 4px 4px; /* Comfortable padding */ border: 1px solid #d1d5db; /* Light gray border */ border-radius: 5px; /* Rounded corners */ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* Subtle inner shadow */ transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus */ font-size: 1.2rem; color: #4a4a4a; /* Text color */ outline: none; /* Remove default outline */ } /* Focus state for Textbox */ input[type="password"]:focus { border-color: #6366f1; /* Tailwind indigo-500 for focus border */ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); /* Light indigo glow */ } /* Styling for Textbox elements (corresponds to which renders as ) */ input[type="date"] { padding: 4px 4px 4px 4px; /* Comfortable padding */ border: 1px solid #d1d5db; /* Light gray border */ border-radius: 5px; /* Rounded corners */ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* Subtle inner shadow */ transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus */ font-size: 1.2rem; color: #4a4a4a; /* Text color */ outline: none; /* Remove default outline */ } /* Focus state for Textbox */ input[type="date"]:focus { border-color: #6366f1; /* Tailwind indigo-500 for focus border */ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); /* Light indigo glow */ } /* Styling for Checkbox elements (corresponds to ) */ /* Hide the default checkbox */ input[type="checkbox"] { appearance: none; /* Remove default browser styling */ -webkit-appearance: none; /* For Safari */ -moz-appearance: none; /* For Firefox */ position: absolute; /* Take out of document flow */ opacity: 0; /* Make it invisible but accessible */ } /* Style the custom checkbox visual */ input[type="checkbox"] + label { display: inline-flex; /* Use flex to align checkbox and text */ align-items: center; /* Vertically center content */ position: relative; cursor: pointer; padding-left: 30px; /* Space for the custom checkbox */ font-weight: 400; /* Regular weight for checkbox labels */ color: #4a4a4a; /* Text color for label */ margin-bottom: 0; /* Reset margin from general label rule */ } /* Create the custom checkbox square */ input[type="checkbox"] + label::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 2px solid #d1d5db; /* Light gray border */ border-radius: 6px; /* Slightly rounded corners */ background-color: #f9fafb; /* Light background */ transition: all 0.2s ease; } /* Style for the checkmark inside the custom checkbox */ input[type="checkbox"] + label::after { content: '✔'; /* Unicode checkmark character */ position: absolute; left: 3px; /* Adjust for perfect centering */ top: 50%; transform: translateY(-50%) scale(0); /* Initially hidden */ font-size: 16px; color: #ffffff; /* White checkmark */ transition: transform 0.2s ease, opacity 0.2s ease; opacity: 0; font-weight: bold; /* Make checkmark bolder */ } /* Checked state for the custom checkbox */ input[type="checkbox"]:checked + label::before { background-color: #6366f1; /* Indigo background when checked */ border-color: #6366f1; /* Indigo border when checked */ } /* Show the checkmark when checked */ input[type="checkbox"]:checked + label::after { transform: translateY(-50%) scale(1); /* Scale up to show */ opacity: 1; } /* Focus state for accessibility */ input[type="checkbox"]:focus + label::before { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); /* Indigo glow on focus */ } /* Hover state for custom checkbox label */ input[type="checkbox"] + label:hover::before { border-color: #6366f1; /* Change border color on hover */ }