From 3680f36105c2cdb12f58da557e2bd1cec1b49486 Mon Sep 17 00:00:00 2001 From: elisabetta Date: Wed, 29 Apr 2026 11:04:59 +0200 Subject: [PATCH] style --- backend/src/main/resources/get/style.css | 88 ++++++++++++++++++++++++ 1 file changed, 88 insertions(+) diff --git a/backend/src/main/resources/get/style.css b/backend/src/main/resources/get/style.css index 6f3ae61..03850b4 100644 --- a/backend/src/main/resources/get/style.css +++ b/backend/src/main/resources/get/style.css @@ -312,6 +312,94 @@ footer a { font-family: 'Courier New', monospace; color: #ffca28; /* Giallo per far risaltare le variabili/formule */ } +.main-wrapper { + display: flex; + max-width: 1200px; + margin: 100px auto 50px; /* Spazio per la navbar */ + gap: 30px; + padding: 0 20px; +} + +/* Sidebar Style */ +.sidebar { + flex: 0 0 250px; /* Larghezza fissa 250px */ + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); /* Effetto vetro sfocato */ + border-radius: 15px; + padding: 20px; + height: fit-content; + position: sticky; + top: 100px; /* Si blocca quando scendi */ + border: 1px solid rgba(77, 184, 255, 0.2); +} + +.sidebar h3 { + color: #4db8ff; + font-size: 1.2rem; + margin-bottom: 20px; + border-bottom: 1px solid rgba(77, 184, 255, 0.3); + padding-bottom: 10px; +} + +.sidebar nav { + display: flex; + flex-direction: column; + gap: 10px; +} + +/* Bottoni nella sidebar */ +.btn-appunto { + background: transparent; + color: white; + border: none; + text-align: left; + padding: 12px 15px; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; + font-size: 1rem; + display: flex; + align-items: center; + gap: 10px; +} + +.btn-appunto i { + width: 20px; /* Allinea le icone */ + color: #4db8ff; +} + +.btn-appunto:hover { + background: rgba(77, 184, 255, 0.1); + padding-left: 20px; /* Effetto movimento al passaggio */ +} + +.btn-appunto.active { + background: #4db8ff; + color: #0b0f19; +} + +.btn-appunto.active i { + color: #0b0f19; +} + +/* Area contenuto */ +.content-area { + flex: 1; /* Prende tutto lo spazio rimanente */ + min-width: 0; /* Evita bug di overflow con flex */ +} + +/* Responsive per cellulari */ +@media (max-width: 768px) { + .main-wrapper { + flex-direction: column; + margin-top: 80px; + } + .sidebar { + position: static; + flex: none; + width: 100%; + } +} /* --- SFONDO SPAZIALE ANIMATO --- */ .sfondo-spazio { position: fixed; /* Lo fissa allo schermo */