115 lines
3.0 KiB
CSS
115 lines
3.0 KiB
CSS
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Stesso font dashboard */
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Stesso sfondo dashboard */
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
padding: 20px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #2c3e50;
|
|
display: block;
|
|
padding: 40px;
|
|
}
|
|
.controls {
|
|
background: white;
|
|
padding: 25px;
|
|
border-radius: 15px;
|
|
border: none;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
/* Esempio di combinatore figlio diretto (>) */
|
|
.controls > div {
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.controls > div:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
input[type="text"] {
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
background: #f9f9f9;
|
|
}
|
|
|
|
button {
|
|
padding: 10px 20px;
|
|
background-color: #007bff; /* Blu base */
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: separate; /* Necessario per border-radius sulla tabella */
|
|
border-spacing: 0;
|
|
margin-top: 20px;
|
|
background: white;
|
|
border-radius: 15px;
|
|
overflow: hidden; /* Taglia gli angoli */
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
th {
|
|
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
|
|
color: white;
|
|
padding: 15px;
|
|
text-transform: uppercase;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 1px;
|
|
border: none;
|
|
}
|
|
|
|
td {
|
|
border-bottom: 1px solid #eee;
|
|
padding: 15px;
|
|
color: #555;
|
|
}
|
|
|
|
tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/************************************************************/
|
|
/* ESERCIZI CSS: "RECUPERA GLI STILI PERSI" */
|
|
/* Usa solo selettori di TAG, ID (#), CLASSI (.) */
|
|
/* e combinatori di SPAZIO (discendente) */
|
|
/************************************************************/
|
|
|
|
/* LIVELLO 1: Il bottone Elimina (Discendenza)
|
|
Il bottone "Elimina" non ha classi, ma sappiamo che sta DENTRO il tbody.
|
|
Seleziona tutti i button che sono dentro il #tabella-corpo.
|
|
|
|
Obiettivo: Sfondo rosso (#ff4444), testo bianco, nessun bordo.
|
|
*/
|
|
|
|
|
|
/* LIVELLO 2: Interattività (Hover su discendente)
|
|
Vogliamo che il bottone elimina diventi più scuro quando ci passi sopra.
|
|
|
|
Obiettivo: Cambia il background-color in #cc0000 al passaggio del mouse.
|
|
Suggerimento: usa lo stesso selettore di prima + :hover
|
|
*/
|
|
|
|
|
|
/* LIVELLO 3: Leggibilità Riga (Hover su riga)
|
|
Vogliamo evidenziare tutta la riga (tr) della tabella quando il mouse ci passa sopra.
|
|
ATTENZIONE: Deve succedere solo nel corpo della tabella, non nell'intestazione!
|
|
|
|
Obiettivo: Background-color grigio chiaro (#f1f1f1) al passaggio del mouse sulla riga.
|
|
*/
|
|
|
|
|
|
/* LIVELLO 4 (Extra): Focus sugli Input
|
|
Vogliamo evidenziare gli input di testo quando l'utente ci clicca dentro (:focus).
|
|
Ma solo quelli dentro la zona .controls!
|
|
|
|
Obiettivo: Bordo blu (2px solid blue) e sfondo giallo chiaro (#ffffe0).
|
|
*/
|
|
|