/* assets/css/stile.css */
/*
echo '
';
*/
/* Imposta un layout a colonna su schermi piccoli */
@media screen and (max-width: 600px) {
.input-container {
flex-direction: column; /* Cambia la direzione del flex a colonna */
align-items: flex-start; /* Allinea gli elementi all'inizio */
}
.input-container .small-input {
width: 100%; /* Ogni campo occuperà il 100% della larghezza */
max-width: 100%;
}
}
/* Assicura che l'etichetta e il campo di input siano allineati sulla stessa riga */
.input-container {
display: flex; /* Usa il layout flexbox per allineare gli elementi */
gap: 10px; /* Spazio tra i campi */
align-items: center; /* Allinea verticalmente al centro */
}
.input-container .w3-label {
width: 120px; /* Larghezza fissa per le etichette */
text-align: right; /* Allinea il testo a destra per un aspetto più pulito */
}
.input-container .small-input {
flex: 1; /* Fa sì che entrambi i campi occupino lo stesso spazio */
max-width: 40%; /* Riduce la larghezza dei campi per essere più stretti */
min-width: 120px; /* Imposta una larghezza minima per evitare che i campi diventino troppo piccoli */
}
/* Rimuove il margine delle colonne per garantire l'allineamento */
.w3-col.l6 {
margin-right: 0; /* Aggiustato per evitare spazi indesiderati */
}
/* Usa il flexbox per garantire che i campi siano allineati correttamente */
.input-container .small-input select {
width: 100%; /* Assicura che il select occupi tutta la larghezza del contenitore */
}
/* Stile per la tabella degli eventi */
.events-table {
width: 100%; /* Occupa tutta la larghezza disponibile */
border-collapse: collapse; /* Rimuove gli spazi tra le celle */
}
/* Stile per le intestazioni della tabella */
.events-table th {
background-color: #f2f2f2; /* Colore di sfondo per le intestazioni */
padding: 8px; /* Spazio interno delle intestazioni */
border: 1px solid #ddd; /* Bordo sottile intorno alle intestazioni */
text-align: left;
}
/* Stile per le celle di orario */
.events-table td:first-child {
background-color: #f9f9f9; /* Colore di sfondo per la colonna oraria */
padding: 8px; /* Spazio interno per la colonna oraria */
border: 1px solid #ddd; /* Bordo sottile intorno alla colonna oraria */
text-align: left;
width: 80px; /* Larghezza fissa per la colonna oraria */
}
/* Stile per le celle degli eventi */
.events-table td {
padding: 8px; /* Spazio interno per le celle degli eventi */
border: 1px solid #ddd; /* Linea orizzontale per delimitare gli slot orari */
}
/* Stile per le celle con eventi */
.events-table td.event {
background-color: #e0e0e0; /* Colore di sfondo per le celle con eventi */
padding-left: 10px; /* Spazio bianco a sinistra */
padding-right: 10px; /* Spazio bianco a destra */
border-left: 2px solid #ffffff; /* Rimuove il bordo sinistro per un effetto di spazio bianco */
border-right: 2px solid #ffffff;/* Rimuove il bordo destro per un effetto di spazio bianco */
}
/* Stile per le celle vuote */
.events-table td:not(.event) {
background-color: #fff; /* Colore di sfondo bianco per le celle vuote */
border-left: none; /* Rimuove il bordo sinistro per un effetto di spazio bianco */
border-right: none; /* Rimuove il bordo destro per un effetto di spazio bianco */
}
/* Per gli eventi cliccabili */
.event {
cursor: pointer;
}
/* Per gli slot liberi (o celle vuote) */
.hour {
cursor: default;
}
/* Stili per il blocco giorno */
#dayBlock {
display: flex;
flex-direction: column;
height: 100%;
}
#schedule {
display: flex;
flex-direction: column;
}
/* Aggiungi o modifica queste regole per migliorare l'aspetto delle lezioni */
#schedule {
max-height: 600px;
overflow-y: auto;
}
#schedule .w3-row {
border-bottom: 1px solid #ddd;
padding: 10px 0;
}
#schedule .w3-col.s4 {
font-weight: bold;
}
#schedule .w3-col.s8 {
padding-left: 10px;
}
#schedule .w3-round-large {
margin: 5px 0;
}
.schedule-row {
display: flex;
align-items: center;
margin-bottom: 4px;
}
.hour {
font-size: 14px;
text-align: right;
padding-right: 10px;
}
.line {
height: 1px;
background-color: #ddd;
flex: 1;
}
/* Griglia oraria */
.calendar-container {
display: flex;
flex-direction: column;
width: 100%;
border-right: 1px solid #ddd;
}
.hour {
height: 50px; /* Altezza di ogni ora */
border-bottom: 1px solid #ddd;
position: relative;
padding: 2px;
box-sizing: border-box;
}
/* Modal */
.modal {
display: none; /* Nascondi il modal per impostazione predefinita */
position: fixed; /* Rimane fisso sulla pagina */
z-index: 1; /* Assicurati che il modal sia sopra altri contenuti */
left: 0;
top: 0;
width: 100%; /* Larghezza completa della pagina */
height: 100%; /* Altezza completa della pagina */
overflow: auto; /* Consente lo scorrimento se il contenuto è troppo lungo */
background-color: rgb(0,0,0); /* Colore di sfondo del modal */
background-color: rgba(0,0,0,0.4); /* Sfondo semitrasparente */
}
/* Contenuto del Modal */
.modal-content {
background-color: #fefefe;
margin: 10% auto; /* Margine dall'alto e centrato orizzontalmente */
padding: 20px;
border: 1px solid #888;
width: 33%; /* Larghezza del modal (un terzo della pagina) */
max-width: 600px; /* Larghezza massima del modal */
}
/* Modulo */
.modal-content form {
width: 100%; /* Assicura che il modulo occupi tutta la larghezza del modal */
box-sizing: border-box; /* Include padding e border nella larghezza totale */
}
/* Responsività */
@media screen and (max-width: 600px) {
.modal-content {
width: 90%; /* Riduce la larghezza del modal sui dispositivi più piccoli */
}
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.w3-text-red {
color: #f44336 !important;
}