diff --git a/css/style.css b/css/style.css index d339706..f57d989 100644 --- a/css/style.css +++ b/css/style.css @@ -1,187 +1,201 @@ -/* Header CSS */ -body { - background-color: aliceblue; -} - -.header { - background-color: #333; - color: #fff; - padding: 20px 0; -} - -.header-container { - width: 80%; - margin: 0 auto; - display: flex; - justify-content: space-between; - align-items: center; -} - -.header h1 { - margin: 0; -} - -.header nav ul { - list-style-type: none; - margin: 0; - padding: 0; -} - -.header nav ul li { - display: inline; - margin-right: 20px; -} - -.header nav ul li:last-child { - margin-right: 0; -} - -.header nav ul li a { - color: #fff; - text-decoration: none; -} - -/* Container CSS */ -.container { - width: 80%; - margin: 0 auto; - padding: 20px; - background-color: #333; - color: #fff; - border-radius: 5px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - margin-top: 40px; -} - -.welcome-container { - width: 50%; /* Breite des Containers */ - margin: 40px auto; /* Mittige Ausrichtung */ - padding: 20px; /* Innenabstand */ - background-color: rgb(237, 235, 233); /* Hintergrundfarbe */ - border: 2px solid #333; /* Rahmen */ - border-radius: 5px; /* Abrundung der Ecken */ - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Schatten */ - text-align: center; /* Text zentrieren */ -} - -.welcome-container img { - max-width: 100%; /* Bild auf die volle Breite des Containers skalieren */ - height: auto; - margin-bottom: 20px; -} - -.add-material-box { - width: 60%; /* Breite der Box */ - margin: 50px auto; /* Zentrierung der Box */ - padding: 10px; /* Innenabstand der Box */ - background-color: #fff; /* Hintergrundfarbe der Box */ - border-radius: 15px; /* Abrundung der Ecken */ - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Schatten */ -} - -.add-material-box h2 { - margin-top: 0; /* Abstand oben aufheben */ -} - -.form-group { - margin-bottom: 15px; /* Abstand zwischen Formularfeldern */ -} - -.form-group label { - display: block; /* Label als Blockelement anzeigen */ - margin-bottom: 5px; /* Abstand unterhalb des Labels */ -} - -.form-group input[type="text"], -.form-group input[type="number"], -.form-group input[type="date"], -.form-group input[type="file"] { - width: calc(100% - 10px); /* Breite der Eingabefelder */ - padding: 8px; /* Innenabstand der Eingabefelder */ - border: 1px solid #ccc; /* Randstil */ - border-radius: 3px; /* Abrundung der Ecken */ -} - -.form-group input[type="submit"] { - background-color: #007bff; /* Blaue Hintergrundfarbe */ - color: white; /* Weiße Textfarbe */ - border: none; /* Kein Rand */ - padding: 10px 20px; /* Innenabstand des Buttons */ - border-radius: 3px; /* Abrundung der Ecken */ - cursor: pointer; /* Mauszeiger-Form */ - transition: background-color 0.3s ease; /* Animierter Übergang für Hover */ -} - -.form-group input[type="submit"]:hover { - background-color: #0056b3; /* Dunkleres Blau bei Mouseover */ -} - -/* Fehlermeldung */ -#error-msg { - color: red; /* Rote Schriftfarbe */ -} - -.submit-button { - background-color: #4CAF50; - color: white; - border: none; - padding: 10px 20px; - border-radius: 5px; - cursor: pointer; -} - -.submit-button:hover { - background-color: #45a049; -} - -.table-container { - margin-top: 20px; -} - -table { - width: 100%; - border-collapse: collapse; -} - -/* Schriftfarbe für Tabellenüberschriften */ -th { - color: black; /* Schwarz für Tabellenüberschriften */ - background-color: #f2f2f2; - padding: 8px; - text-align: left; - border-bottom: 1px solid #ddd; -} - -/* Standardaussehen für Tabellenzellen */ -td { - color: white; /* Weiß für Tabellenzellen */ - border-bottom: 1px solid #ddd; - padding: 8px; - text-align: left; -} - -/* Hintergrundfarbe und Schriftfarbe der Zeile bei Hover */ -tr:hover { - background-color: white; /* Weiße Hintergrundfarbe bei Hover */ -} - -/* Schriftfarbe der markierten Zeile */ -tr:hover td { - color: black; /* Schwarze Schriftfarbe bei Hover */ -} - -a { - text-decoration: none; - color: black; -} - -a:hover { - opacity: 0.6; -} - -th, -td { - padding: 8px; - text-align: left; - border-bottom: 1px solid #ddd; -} +/* Header CSS */ +body { + background-color: aliceblue; +} + +.header { + background-color: #333; + color: #fff; + padding: 20px 0; +} + +.header-container { + width: 80%; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +.header h1 { + margin: 0; +} + +.header nav ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +.header nav ul li { + display: inline; + margin-right: 20px; +} + +.header nav ul li:last-child { + margin-right: 0; +} + +.header nav ul li a { + color: #fff; + text-decoration: none; +} + +/* Container CSS */ +.container { + width: 80%; + margin: 0 auto; + padding: 20px; + background-color: #333; + color: #fff; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + margin-top: 40px; +} + +.welcome-container { + width: 50%; /* Breite des Containers */ + margin: 40px auto; /* Mittige Ausrichtung */ + padding: 20px; /* Innenabstand */ + background-color: rgb(237, 235, 233); /* Hintergrundfarbe */ + border: 2px solid #333; /* Rahmen */ + border-radius: 5px; /* Abrundung der Ecken */ + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Schatten */ + text-align: center; /* Text zentrieren */ +} + +.welcome-container img { + max-width: 100%; /* Bild auf die volle Breite des Containers skalieren */ + height: auto; + margin-bottom: 20px; +} + +.add-material-box { + width: 60%; /* Breite der Box */ + margin: 50px auto; /* Zentrierung der Box */ + padding: 10px; /* Innenabstand der Box */ + background-color: #fff; /* Hintergrundfarbe der Box */ + border-radius: 15px; /* Abrundung der Ecken */ + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Schatten */ +} + +.add-material-box h2 { + margin-top: 0; /* Abstand oben aufheben */ +} + +.form-group { + margin-bottom: 15px; /* Abstand zwischen Formularfeldern */ +} + +.form-group label { + display: block; /* Label als Blockelement anzeigen */ + margin-bottom: 5px; /* Abstand unterhalb des Labels */ +} + +.form-group input[type="text"], +.form-group input[type="number"], +.form-group input[type="date"], +.form-group input[type="file"] { + width: calc(100% - 10px); /* Breite der Eingabefelder */ + padding: 8px; /* Innenabstand der Eingabefelder */ + border: 1px solid #ccc; /* Randstil */ + border-radius: 3px; /* Abrundung der Ecken */ +} + +.form-group input[type="submit"] { + background-color: #007bff; /* Blaue Hintergrundfarbe */ + color: white; /* Weiße Textfarbe */ + border: none; /* Kein Rand */ + padding: 10px 20px; /* Innenabstand des Buttons */ + border-radius: 3px; /* Abrundung der Ecken */ + cursor: pointer; /* Mauszeiger-Form */ + transition: background-color 0.3s ease; /* Animierter Übergang für Hover */ +} + +.form-group input[type="submit"]:hover { + background-color: #0056b3; /* Dunkleres Blau bei Mouseover */ +} + +/* Fehlermeldung */ +#error-msg { + color: red; /* Rote Schriftfarbe */ +} + +.submit-button { + background-color: #4CAF50; + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; +} + +.submit-button:hover { + background-color: #45a049; +} + +.table-container { + margin-top: 20px; +} + +table { + width: 100%; + border-collapse: collapse; +} + +/* Schriftfarbe für Tabellenüberschriften */ +th { + color: black; /* Schwarz für Tabellenüberschriften */ + background-color: #f2f2f2; + padding: 8px; + text-align: left; + border-bottom: 1px solid #ddd; +} + +/* Standardaussehen für Tabellenzellen */ +td { + color: white; /* Weiß für Tabellenzellen */ + border-bottom: 1px solid #ddd; + padding: 8px; + text-align: left; +} + +/* Hintergrundfarbe und Schriftfarbe der Zeile bei Hover */ +tr:hover { + background-color: white; /* Weiße Hintergrundfarbe bei Hover */ +} + +/* Schriftfarbe der markierten Zeile */ +tr:hover td { + color: black; /* Schwarze Schriftfarbe bei Hover */ +} + +a { + text-decoration: none; + color: black; +} + +a:hover { + opacity: 0.6; +} + +th, +td { + padding: 8px; + text-align: left; + border-bottom: 1px solid #ddd; +} + +.expiring { + background-color: red; +} + +.edit-form { + display: none; +} + +/* Mauszeigeränderung, wenn über das Bild gefahren wird */ +.edit-form img:hover, +.edit-form a:hover { + cursor: pointer; +} \ No newline at end of file