/* Body e font */ body { font-family: Arial, sans-serif; background-color: #f0f2f5; color: #333; margin: 0; padding: 20px; } /* Navbar */ .navbar { background-color: #2c3e50; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; color: #fff; border-radius: 0 0 10px 10px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .navbar a { color: #fff; text-decoration: none; margin-left: 15px; font-weight: bold; transition: color 0.2s; } .navbar a:hover { color: #f39c12; } .navbar .logo { font-size: 1.3em; font-weight: bold; } /* Dashboard container */ .dashboard { max-width: 800px; margin: 0 auto; text-align: center; background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .dashboard h1 { margin-bottom: 20px; color: #2c3e50; } .dashboard a { display: inline-block; margin: 10px; padding: 12px 25px; background-color: #1f618d; color: #fff; text-decoration: none; border-radius: 8px; transition: background-color 0.2s; } .dashboard a:hover { background-color: #f39c12; color: #fff; } /* Container principale */ .admin-container { max-width: 800px; margin: 0 auto; background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } /* Titolo */ .admin-container h1 { text-align: center; color: #2c3e50; margin-bottom: 20px; } /* Link ritorno */ .admin-container a.back-link { display: inline-block; margin-bottom: 15px; text-decoration: none; color: #1f618d; font-weight: bold; } .admin-container a.back-link:hover { color: #f39c12; } /* Form aggiungi classe */ .admin-container form { margin-bottom: 20px; text-align: center; } .admin-container input[type="text"] { padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px; width: 200px; margin-right: 10px; } .admin-container button { padding: 8px 15px; border: none; background-color: #1f618d; color: #fff; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; } .admin-container button:hover { background-color: #f39c12; } /* Tabella */ .admin-container table { width: 100%; border-collapse: collapse; } .admin-container th, .admin-container td { border: 1px solid #ccc; padding: 10px; text-align: center; } .admin-container th { background-color: #eee; } .admin-container tr:hover td { background-color: #f7f7f7; } .admin-container a.delete-link { color: #e74c3c; font-weight: bold; text-decoration: none; transition: color 0.2s; } .admin-container a.delete-link:hover { color: #c0392b; } /* Login container */ .login-container { max-width: 400px; margin: 80px auto; background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center; } /* Titolo */ .login-container h1 { margin-bottom: 20px; color: #2c3e50; } /* Input */ .login-container input[type="text"], .login-container input[type="password"] { width: 90%; padding: 10px; margin: 10px 0; border-radius: 6px; border: 1px solid #ccc; font-size: 1em; } /* Pulsante */ .login-container button { padding: 10px 20px; background-color: #1f618d; color: #fff; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; font-size: 1em; } .login-container button:hover { background-color: #f39c12; color: #fff; } /* Messaggio errore */ .login-container .error { color: #e74c3c; font-weight: bold; margin-bottom: 10px; } /* Navbar minima per login */ .navbar { background-color: #2c3e50; padding: 10px 20px; color: #fff; text-align: center; border-radius: 0 0 10px 10px; margin-bottom: 30px; } /* Riutilizziamo .admin-container, h1, navbar già definiti */ /* Form Gestione Materie */ .admin-container form input[type="text"] { padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px; margin: 5px; width: 200px; } .admin-container form button { padding: 8px 20px; background-color: #1f618d; color: #fff; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; } .admin-container form button:hover { background-color: #f39c12; color: #fff; } /* Tabella Materie */ .admin-container table { width: 100%; border-collapse: collapse; margin-top: 15px; } .admin-container th, .admin-container td { border: 1px solid #ccc; padding: 10px; text-align: center; } .admin-container th { background-color: #eee; } .admin-container tr:hover td { background-color: #f7f7f7; } .admin-container a.delete-link { color: #e74c3c; font-weight: bold; text-decoration: none; transition: color 0.2s; } .admin-container a.delete-link:hover { color: #c0392b; } /* Form gestione orario */ .admin-container form { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 20px; } .admin-container form select { padding: 8px 12px; border-radius: 6px; border: 1px solid #ccc; min-width: 120px; } .admin-container form button { padding: 8px 20px; background-color: #1f618d; color: #fff; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; } .admin-container form button:hover { background-color: #f39c12; color: #fff; } /* Titolo */ .admin-container h1 { text-align: center; color: #2c3e50; margin-bottom: 20px; } /* Link ritorno */ .admin-container a.back-link { display: inline-block; margin-bottom: 15px; text-decoration: none; color: #1f618d; font-weight: bold; } .admin-container a.back-link:hover { color: #f39c12; } /* Mobile responsive */ @media (max-width: 768px) { /* Form input gestione orario */ .admin-container form { flex-direction: column; align-items: stretch; } .admin-container form select, .admin-container form input[type="text"], .admin-container form button { width: 100%; margin: 5px 0; } /* Tabella */ .admin-container table, .admin-container thead, .admin-container tbody, .admin-container th, .admin-container td, .admin-container tr { display: block; width: 100%; } .admin-container thead { display: none; /* Nasconde intestazioni */ } .admin-container tr { margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px; padding: 10px; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,0.05); } .admin-container td { text-align: left; padding-left: 50%; position: relative; border: none; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; padding: 8px 10px; } .admin-container td::before { content: attr(data-label); position: absolute; left: 10px; width: 45%; font-weight: bold; white-space: nowrap; } .admin-container td:last-child { border-bottom: 0; } .admin-container a.delete-link { padding: 4px 8px; font-size: 0.9em; } } /* Extra piccolo schermo */ @media (max-width: 480px) { .admin-container td::before { width: 50%; font-size: 0.9em; } .admin-container td { font-size: 0.9em; padding: 6px 8px; } .admin-container form select, .admin-container form input[type="text"], .admin-container form button { font-size: 0.95em; } } .table-container { width: 100%; overflow-x: auto; } .responsive-table { width: 100%; border-collapse: collapse; } .responsive-table th, .responsive-table td { border: 1px solid #ccc; padding: 8px; text-align: left; } .responsive-table th { background: #f4f4f4; } /* Modalità mobile */ @media (max-width: 768px) { .responsive-table thead { display: none; /* nasconde l’intestazione */ } .responsive-table tr { display: block; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 8px; padding: 10px; background: #fff; } .responsive-table td { display: block; justify-content: space-between; padding: 8px 5px; padding-top: 30px; border: none; border-bottom: 1px solid #eee; word-wrap: break-word; white-space: normal; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .responsive-table td:last-child { border-bottom: none; } .responsive-table td::before { content: attr(data-label); font-weight: bold; margin-right: 10px; color: #333; position: absolute; left: 10px; top: 10px; width: 45%; white-space: normal; /* permette a "Materia" di andare a capo */ font-weight: bold; } .response-table td span { display: block; /* forza l'output del contenuto su una riga separata */ } }