Dateien nach "public/css" hochladen
This commit is contained in:
parent
3f6bbacc65
commit
97bcd4df2a
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,230 @@
|
|||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f0f4f8; /* Helles Hintergrundfarbe */
|
||||
color: #333; /* Dunkle Schriftfarbe */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column; /* Flex-Kolonne für die gesamte Seite */
|
||||
align-items: center; /* Zentrieren der Inhalte */
|
||||
min-height: 100vh; /* Mindesthöhe auf 100% des Viewports setzen */
|
||||
overflow-x: hidden; /* Verhindert horizontales Scrollen */
|
||||
transition: background-color 0.3s, color 0.3s; /* Übergang für Farbänderungen */
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #4CAF50; /* Grüner Titel für die Anleitung */
|
||||
margin-bottom: 10px; /* Abstand unter dem Titel */
|
||||
}
|
||||
|
||||
ol {
|
||||
padding-left: 20px; /* Einrückung für die nummerierte Liste */
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 10px 0; /* Abstand zwischen den Listenelementen */
|
||||
}
|
||||
|
||||
body.dark-mode {
|
||||
background-color: #121212; /* Dunkler Hintergrund für den Darkmode */
|
||||
color: #f0f4f8; /* Helle Schriftfarbe im Darkmode */
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
margin: 0 10px; /* Reduziere den horizontalen Abstand */
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.navbar-link:hover {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: fixed; /* Fixiert die Position des Schalters */
|
||||
bottom: 20px; /* Abstand vom unteren Rand */
|
||||
right: 20px; /* Abstand vom rechten Rand */
|
||||
z-index: 1000; /* Sicherstellen, dass es über anderen Inhalten liegt */
|
||||
width: 50px; /* Breite des Umschalters */
|
||||
height: 24px; /* Höhe des Umschalters */
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0; /* Unsichtbar, um nur den Slider anzuzeigen */
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc; /* Hintergrundfarbe des Umschalters */
|
||||
transition: .4s; /* Übergang für den Umschalters */
|
||||
border-radius: 34px; /* Abgerundete Ecken für den Umschalters */
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 20px; /* Höhe des Schiebereglers */
|
||||
width: 20px; /* Breite des Schiebereglers */
|
||||
left: 2px; /* Abstand vom linken Rand */
|
||||
bottom: 2px; /* Abstand vom unteren Rand */
|
||||
background-color: white; /* Hintergrundfarbe des Schiebereglers */
|
||||
border-radius: 50%; /* Abgerundete Ecken für den Schieberegler */
|
||||
transition: .4s; /* Übergang für den Schieberegler */
|
||||
}
|
||||
|
||||
/* Zustand für den aktiven Schieberegler */
|
||||
input:checked + .slider {
|
||||
background-color: #3b82f6; /* Hintergrundfarbe des Umschalters bei Aktivierung */
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(26px); /* Bewege den Schieberegler nach rechts */
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 90%; /* Stelle sicher, dass es nicht mehr als 100% des Viewports einnimmt */
|
||||
max-width: 1200px; /* Maximale Breite für größere Bildschirme */
|
||||
margin: 0 auto; /* Zentrieren der Container */
|
||||
margin-top: 200px; /* Negativer Margin, um den Container nach unten zu verschieben */
|
||||
overflow: hidden; /* Verhindert Überlauf */
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
background-color: white; /* Weißer Hintergrund für den Hauptbereich */
|
||||
border-right: 1px solid #e0e0e0; /* Trennlinie zwischen Haupt- und Sidebar */
|
||||
transition: background-color 0.3s; /* Übergang für den Hintergrund */
|
||||
border: 4px solid #3b82f6;
|
||||
border-radius: 15px;
|
||||
margin-bottom: 130px;
|
||||
}
|
||||
|
||||
body.dark-mode main {
|
||||
background-color: #1e1e1e; /* Dunkler Hintergrund für den Hauptbereich im Darkmode */
|
||||
border: 4px solid #3b82f6;
|
||||
border-radius: 15px;
|
||||
margin-bottom: 130px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #3b82f6; /* Grüner Titel für die Filme */
|
||||
margin-bottom: 10px; /* Abstand unter dem Untertitel */
|
||||
}
|
||||
|
||||
/* Code-Stile */
|
||||
code {
|
||||
background-color: #424242; /* Dunkler Hintergrund für den Code */
|
||||
border-radius: 3px; /* Abgerundete Ecken */
|
||||
padding: 2px 4px; /* Innenabstand für den Code */
|
||||
font-family: 'Courier New', Courier, monospace; /* Monospace-Schriftart für Code */
|
||||
color: #e0e0e0; /* Helle Schriftfarbe */
|
||||
border: 1px solid #d8d3d3; /* Dunklerer Rahmen für den Code im Darkmode */
|
||||
}
|
||||
|
||||
/* Stile für starken Text */
|
||||
strong {
|
||||
color: #ffab00; /* Helle Farbe für starken Text im Darkmode */
|
||||
font-weight: bold; /* Fett für die starken Elemente */
|
||||
}
|
||||
|
||||
/* Container für Befehle */
|
||||
.command-container {
|
||||
background-color: #1e1e1e; /* Dunkler Hintergrund für den Container */
|
||||
border: 1px solid #333; /* Dunkler Rahmen für den Container */
|
||||
border-radius: 5px; /* Abgerundete Ecken */
|
||||
padding: 10px; /* Innenabstand */
|
||||
margin: 10px 0; /* Abstand zu anderen Elementen */
|
||||
}
|
||||
|
||||
/* Content */
|
||||
#content {
|
||||
margin-left: 260px;
|
||||
padding: 30px;
|
||||
background-color: #f8fafc;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
/* Header (Willkommensbox) */
|
||||
.welcome-box {
|
||||
background-color: #1f2937;
|
||||
color: white;
|
||||
padding: 15px 20px; /* Padding verkleinert */
|
||||
border-radius: 0 0 15px 15px;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
font-size: 1.2em; /* Schriftgröße verkleinert */
|
||||
font-weight: 300;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
border-bottom: 4px solid #3b82f6;
|
||||
}
|
||||
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background-color: #1f2937;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
font-size: 0.9em;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
border-top: 4px solid #3b82f6;
|
||||
}
|
||||
|
||||
/* Navbar Links */
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
margin: 0 15px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.navbar-link:hover {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
/* Logo-Container separat und links oben positionieren */
|
||||
.logo-container {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
z-index: 1000; /* Über anderen Elementen */
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 100px; /* Vergrößere das Logo nach Bedarf */
|
||||
position: fixed; /* Fixiere das Logo */
|
||||
top: 40px; /* Abstand vom oberen Rand */
|
||||
left: 40px; /* Abstand vom linken Rand */
|
||||
z-index: 1000; /* Stelle sicher, dass das Logo über anderen Inhalten liegt */
|
||||
}
|
||||
|
|
@ -0,0 +1,230 @@
|
|||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f0f4f8; /* Helles Hintergrundfarbe */
|
||||
color: #333; /* Dunkle Schriftfarbe */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column; /* Flex-Kolonne für die gesamte Seite */
|
||||
align-items: center; /* Zentrieren der Inhalte */
|
||||
min-height: 100vh; /* Mindesthöhe auf 100% des Viewports setzen */
|
||||
overflow-x: hidden; /* Verhindert horizontales Scrollen */
|
||||
transition: background-color 0.3s, color 0.3s; /* Übergang für Farbänderungen */
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #4CAF50; /* Grüner Titel für die Anleitung */
|
||||
margin-bottom: 10px; /* Abstand unter dem Titel */
|
||||
}
|
||||
|
||||
ol {
|
||||
padding-left: 20px; /* Einrückung für die nummerierte Liste */
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 10px 0; /* Abstand zwischen den Listenelementen */
|
||||
}
|
||||
|
||||
body.dark-mode {
|
||||
background-color: #121212; /* Dunkler Hintergrund für den Darkmode */
|
||||
color: #f0f4f8; /* Helle Schriftfarbe im Darkmode */
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
margin: 0 10px; /* Reduziere den horizontalen Abstand */
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.navbar-link:hover {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: fixed; /* Fixiert die Position des Schalters */
|
||||
bottom: 20px; /* Abstand vom unteren Rand */
|
||||
right: 20px; /* Abstand vom rechten Rand */
|
||||
z-index: 1000; /* Sicherstellen, dass es über anderen Inhalten liegt */
|
||||
width: 50px; /* Breite des Umschalters */
|
||||
height: 24px; /* Höhe des Umschalters */
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0; /* Unsichtbar, um nur den Slider anzuzeigen */
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc; /* Hintergrundfarbe des Umschalters */
|
||||
transition: .4s; /* Übergang für den Umschalters */
|
||||
border-radius: 34px; /* Abgerundete Ecken für den Umschalters */
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 20px; /* Höhe des Schiebereglers */
|
||||
width: 20px; /* Breite des Schiebereglers */
|
||||
left: 2px; /* Abstand vom linken Rand */
|
||||
bottom: 2px; /* Abstand vom unteren Rand */
|
||||
background-color: white; /* Hintergrundfarbe des Schiebereglers */
|
||||
border-radius: 50%; /* Abgerundete Ecken für den Schieberegler */
|
||||
transition: .4s; /* Übergang für den Schieberegler */
|
||||
}
|
||||
|
||||
/* Zustand für den aktiven Schieberegler */
|
||||
input:checked + .slider {
|
||||
background-color: #3b82f6; /* Hintergrundfarbe des Umschalters bei Aktivierung */
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(26px); /* Bewege den Schieberegler nach rechts */
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 90%; /* Stelle sicher, dass es nicht mehr als 100% des Viewports einnimmt */
|
||||
max-width: 1200px; /* Maximale Breite für größere Bildschirme */
|
||||
margin: 0 auto; /* Zentrieren der Container */
|
||||
margin-top: 200px; /* Negativer Margin, um den Container nach unten zu verschieben */
|
||||
overflow: hidden; /* Verhindert Überlauf */
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
background-color: white; /* Weißer Hintergrund für den Hauptbereich */
|
||||
border-right: 1px solid #e0e0e0; /* Trennlinie zwischen Haupt- und Sidebar */
|
||||
transition: background-color 0.3s; /* Übergang für den Hintergrund */
|
||||
border: 4px solid #3b82f6;
|
||||
border-radius: 15px;
|
||||
margin-bottom: 130px;
|
||||
}
|
||||
|
||||
body.dark-mode main {
|
||||
background-color: #1e1e1e; /* Dunkler Hintergrund für den Hauptbereich im Darkmode */
|
||||
border: 4px solid #3b82f6;
|
||||
border-radius: 15px;
|
||||
margin-bottom: 130px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #3b82f6; /* Grüner Titel für die Filme */
|
||||
margin-bottom: 10px; /* Abstand unter dem Untertitel */
|
||||
}
|
||||
|
||||
/* Code-Stile */
|
||||
code {
|
||||
background-color: #424242; /* Dunkler Hintergrund für den Code */
|
||||
border-radius: 3px; /* Abgerundete Ecken */
|
||||
padding: 2px 4px; /* Innenabstand für den Code */
|
||||
font-family: 'Courier New', Courier, monospace; /* Monospace-Schriftart für Code */
|
||||
color: #e0e0e0; /* Helle Schriftfarbe */
|
||||
border: 1px solid #d8d3d3; /* Dunklerer Rahmen für den Code im Darkmode */
|
||||
}
|
||||
|
||||
/* Stile für starken Text */
|
||||
strong {
|
||||
color: #ffab00; /* Helle Farbe für starken Text im Darkmode */
|
||||
font-weight: bold; /* Fett für die starken Elemente */
|
||||
}
|
||||
|
||||
/* Container für Befehle */
|
||||
.command-container {
|
||||
background-color: #1e1e1e; /* Dunkler Hintergrund für den Container */
|
||||
border: 1px solid #333; /* Dunkler Rahmen für den Container */
|
||||
border-radius: 5px; /* Abgerundete Ecken */
|
||||
padding: 10px; /* Innenabstand */
|
||||
margin: 10px 0; /* Abstand zu anderen Elementen */
|
||||
}
|
||||
|
||||
/* Content */
|
||||
#content {
|
||||
margin-left: 260px;
|
||||
padding: 30px;
|
||||
background-color: #f8fafc;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
/* Header (Willkommensbox) */
|
||||
.welcome-box {
|
||||
background-color: #1f2937;
|
||||
color: white;
|
||||
padding: 15px 20px; /* Padding verkleinert */
|
||||
border-radius: 0 0 15px 15px;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
font-size: 1.2em; /* Schriftgröße verkleinert */
|
||||
font-weight: 300;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
border-bottom: 4px solid #3b82f6;
|
||||
}
|
||||
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background-color: #1f2937;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
font-size: 0.9em;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
border-top: 4px solid #3b82f6;
|
||||
}
|
||||
|
||||
/* Navbar Links */
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
margin: 0 15px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.navbar-link:hover {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
/* Logo-Container separat und links oben positionieren */
|
||||
.logo-container {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
z-index: 1000; /* Über anderen Elementen */
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 100px; /* Vergrößere das Logo nach Bedarf */
|
||||
position: fixed; /* Fixiere das Logo */
|
||||
top: 40px; /* Abstand vom oberen Rand */
|
||||
left: 40px; /* Abstand vom linken Rand */
|
||||
z-index: 1000; /* Stelle sicher, dass das Logo über anderen Inhalten liegt */
|
||||
}
|
||||
|
|
@ -0,0 +1,690 @@
|
|||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f0f4f8; /* Helles Hintergrundfarbe */
|
||||
color: #333; /* Dunkle Schriftfarbe */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
body.dark-mode {
|
||||
background-color: #121212; /* Dunkler Hintergrund für den Darkmode */
|
||||
color: #f0f4f8; /* Helle Schriftfarbe im Darkmode */
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: fixed; /* Fixiert die Position des Schalters */
|
||||
bottom: 20px; /* Abstand vom unteren Rand */
|
||||
right: 20px; /* Abstand vom rechten Rand */
|
||||
z-index: 1000; /* Sicherstellen, dass es über anderen Inhalten liegt */
|
||||
width: 50px; /* Breite des Umschalters */
|
||||
height: 24px; /* Höhe des Umschalters */
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0; /* Unsichtbar, um nur den Slider anzuzeigen */
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc; /* Hintergrundfarbe des Umschalters */
|
||||
transition: .4s; /* Übergang für den Umschalters */
|
||||
border-radius: 34px; /* Abgerundete Ecken für den Umschalters */
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 20px; /* Höhe des Schiebereglers */
|
||||
width: 20px; /* Breite des Schiebereglers */
|
||||
left: 2px; /* Abstand vom linken Rand */
|
||||
bottom: 2px; /* Abstand vom unteren Rand */
|
||||
background-color: white; /* Hintergrundfarbe des Schiebereglers */
|
||||
border-radius: 50%; /* Abgerundete Ecken für den Schieberegler */
|
||||
transition: .4s; /* Übergang für den Schieberegler */
|
||||
}
|
||||
|
||||
/* Zustand für den aktiven Schieberegler */
|
||||
input:checked + .slider {
|
||||
background-color: #3b82f6; /* Hintergrundfarbe des Umschalters bei Aktivierung */
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(26px); /* Bewege den Schieberegler nach rechts */
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 90%; /* Stelle sicher, dass es nicht mehr als 100% des Viewports einnimmt */
|
||||
max-width: 1200px; /* Maximale Breite für größere Bildschirme */
|
||||
margin: 0 auto; /* Zentrieren der Container */
|
||||
margin-top: 200px; /* Negativer Margin, um den Container nach unten zu verschieben */
|
||||
overflow: hidden; /* Verhindert Überlauf */
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
background-color: #1f2937; /* Hintergrund für den Hauptbereich */
|
||||
transition: background-color 0.3s; /* Übergang für den Hintergrund */
|
||||
border-radius: 15px; /* Optional: Abgerundete Ecken */
|
||||
border: 4px solid #3b82f6;
|
||||
color: #ffff;
|
||||
}
|
||||
|
||||
body.dark-mode main {
|
||||
background-color: #1e1e1e; /* Dunkler Hintergrund für den Hauptbereich im Darkmode */
|
||||
color: #ffff;
|
||||
}
|
||||
|
||||
.movies-box {
|
||||
background-color: #fff; /* Hintergrund für die Filme */
|
||||
margin-top: 40px; /* Abstand nach oben */
|
||||
padding: 20px; /* Innenabstand */
|
||||
border-radius: 12px; /* Abgerundete Ecken */
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten */
|
||||
display: flex;
|
||||
flex-direction: column; /* Kolonne */
|
||||
align-items: center; /* Zentriert horizontal */
|
||||
justify-content: center; /* Zentriert vertikal */
|
||||
max-width: 100%; /* Maximale Breite */
|
||||
margin-bottom: 20px; /* Abstand nach unten */
|
||||
}
|
||||
|
||||
#movies-list {
|
||||
display: flex; /* Damit die Bilder nebeneinander angezeigt werden */
|
||||
flex-wrap: wrap; /* Damit die Bilder in die nächste Zeile umbrechen, wenn sie nicht mehr passen */
|
||||
justify-content: center; /* Zentriert die Filme im Container */
|
||||
list-style-type: none; /* Entfernt Aufzählungszeichen */
|
||||
padding: 0; /* Entfernt Padding */
|
||||
margin: 0; /* Entfernt Margin */
|
||||
}
|
||||
|
||||
.movie-item {
|
||||
margin: 10px; /* Abstand zwischen den Bildern */
|
||||
opacity: 0; /* Startwert für die Opazität */
|
||||
transition: opacity 0.5s ease-in; /* Übergang für die Opazität */
|
||||
display: flex; /* Flex-Container für die Inhalte */
|
||||
flex-direction: column; /* Vertikale Anordnung */
|
||||
align-items: center; /* Zentriert den Inhalt (Cover und Titel) */
|
||||
}
|
||||
|
||||
.movie-item img {
|
||||
border-radius: 5px; /* Abgerundete Ecken für die Bilder */
|
||||
width: 120px; /* Breite anpassen */
|
||||
height: 180px; /* Höhe anpassen */
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für die Bilder */
|
||||
}
|
||||
|
||||
.movie-item.loaded {
|
||||
opacity: 1; /* Sichtbar wenn geladen */
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 300px; /* Feste Breite für die Sidebar */
|
||||
padding: 5px;
|
||||
background-color: #ffffff00; /* Weißer Hintergrund für die Sidebar */
|
||||
border-radius: 8px; /* Abgerundete Ecken für die Sidebar */
|
||||
margin-left: 20px;
|
||||
max-width: 100%; /* Verhindert, dass die Sidebar breiter als der Container wird */
|
||||
|
||||
}
|
||||
|
||||
body.dark-mode .sidebar {
|
||||
background-color: #2c2c2c00; /* Dunkler Hintergrund für die Sidebar im Darkmode */
|
||||
}
|
||||
|
||||
.newsletter-box {
|
||||
background-color: #f9f9f9; /* Heller Hintergrund für die Newsletter-Box */
|
||||
padding: 20px; /* Innenabstand für die Newsletter-Box */
|
||||
border-radius: 8px; /* Abgerundete Ecken */
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für die Newsletter-Box */
|
||||
border: 4px solid #3b82f6;
|
||||
}
|
||||
|
||||
body.dark-mode .newsletter-box {
|
||||
background-color: #3a3a3a; /* Dunkler Hintergrund für die Newsletter-Box im Darkmode */
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #1f2937; /* Titel für die Filme */
|
||||
margin-bottom: 10px; /* Abstand unter dem Untertitel */
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #ffff; /* Titel für die Filme */
|
||||
margin-bottom: 10px; /* Abstand unter dem Untertitel */
|
||||
}
|
||||
|
||||
body.dark-mode h2 {
|
||||
color: #3b82f6; /* Helle Schriftfarbe für die Titel im Darkmode */
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
width: calc(100% - 22px); /* Vollständige Breite abzüglich Padding */
|
||||
border: 1px solid #ccc; /* Rahmen für Eingabefelder */
|
||||
border-radius: 5px; /* Abgerundete Ecken für Eingabefelder */
|
||||
transition: border-color 0.3s; /* Übergang für die Rahmenfarbe */
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px;
|
||||
background-color: #3b82f6; /* Hintergrund für den Button */
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px; /* Abgerundete Ecken für den Button */
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s; /* Übergangseffekt für Hintergrundfarbe */
|
||||
font-size: 1em; /* Schriftgröße anpassen */
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #2274f8; /* Dunkleres bei Hover */
|
||||
}
|
||||
|
||||
body.dark-mode button:hover {
|
||||
background-color: #2274f8; /* Dunkleres im Darkmode bei Hover */
|
||||
}
|
||||
|
||||
.telegram-connect-box {
|
||||
background-color: #3b82f6; /* Grüner Hintergrund für die Telegram-Box */
|
||||
padding: 10px; /* Innenabstand für die Telegram-Box */
|
||||
border-radius: 8px; /* Abgerundete Ecken */
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für die Telegram-Box */
|
||||
margin: 20px auto; /* Abstand nach oben und unten, zentriert horizontal */
|
||||
text-align: center; /* Zentrierter Text */
|
||||
width: auto; /* Automatische Breite */
|
||||
max-width: 90%; /* Maximale Breite auf 90% des Containers */
|
||||
}
|
||||
|
||||
.telegram-connect-box p {
|
||||
color: white; /* Weiße Schriftfarbe */
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
body.dark-mode .telegram-connect-box p {
|
||||
color: #f0f4f8; /* Helle Schriftfarbe für den Telegram-Box im Darkmode */
|
||||
}
|
||||
|
||||
.telegram-connect-box a {
|
||||
display: inline-block; /* Inline-Block für den Link */
|
||||
padding: 10px 15px; /* Innenabstand für den Link */
|
||||
background-color: #fff; /* Weißer Hintergrund für den Link */
|
||||
color: #3b82f6; /* Grüner Text für den Link */
|
||||
border-radius: 5px; /* Abgerundete Ecken für den Link */
|
||||
text-decoration: none; /* Keine Unterstreichung für den Link */
|
||||
transition: background-color 0.3s; /* Übergang für den Hintergrund */
|
||||
}
|
||||
|
||||
.telegram-connect-box a:hover {
|
||||
background-color: #e0e0e0; /* Hellerer Hintergrund bei Hover */
|
||||
}
|
||||
|
||||
body.dark-mode .telegram-connect-box a {
|
||||
background-color: #3a3a3a; /* Dunkler Hintergrund für den Link im Darkmode */
|
||||
color: #3b82f6; /* Helle Schriftfarbe für den Link im Darkmode */
|
||||
}
|
||||
|
||||
.gitea-box {
|
||||
background-color: #f9f9f9; /* Heller Hintergrund für die Gitea-Box */
|
||||
padding: 10px; /* Innenabstand für die Gitea-Box */
|
||||
border-radius: 8px; /* Abgerundete Ecken */
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Schatten für die Gitea-Box */
|
||||
margin-top: 20px; /* Abstand zur vorherigen Box */
|
||||
text-align: center; /* Zentrierter Text */
|
||||
border: 4px solid #3b82f6;
|
||||
}
|
||||
|
||||
body.dark-mode .gitea-box {
|
||||
background-color: #3a3a3a; /* Dunkler Hintergrund für die Gitea-Box im Darkmode */
|
||||
}
|
||||
|
||||
body.dark-mode .gitea-box p,
|
||||
body.dark-mode .gitea-box a {
|
||||
color: #f0f4f8; /* Helle Schriftfarbe im Darkmode für Text und Links */
|
||||
}
|
||||
|
||||
.links-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.links-list li {
|
||||
width: 48%; /* Zwei Links nebeneinander */
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.links-list a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
background-color: #f0f4f8;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.links-list a:hover {
|
||||
background-color: #3b82f6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.movie-item {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.movie-item.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.movie-popup {
|
||||
position: fixed;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
z-index: 1000;
|
||||
max-width: 300px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
display: none; /* Standardmäßig ausgeblendet */
|
||||
}
|
||||
|
||||
.movie-popup img {
|
||||
max-width: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f0f4f8;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
body.dark-mode {
|
||||
background-color: #121212;
|
||||
color: #f0f4f8;
|
||||
}
|
||||
|
||||
.wunsch-box {
|
||||
background-color: #f9f9f9; /* Heller Hintergrund */
|
||||
border: 1px solid #ddd; /* Rahmen um die Box */
|
||||
border-radius: 8px; /* Abgerundete Ecken */
|
||||
padding: 20px; /* Innenabstand */
|
||||
max-width: 800px; /* Maximale Breite der Box */
|
||||
margin: 20px auto; /* Zentriert auf der Seite */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten für Tiefe */
|
||||
}
|
||||
|
||||
.wunsch-box h2 {
|
||||
text-align: center; /* Überschrift zentrieren */
|
||||
color: #333; /* Dunkle Schriftfarbe */
|
||||
margin-bottom: 20px; /* Abstand unter der Überschrift */
|
||||
}
|
||||
|
||||
.wunsch-box label {
|
||||
display: block; /* Jeder Textblock auf eigener Zeile */
|
||||
font-weight: bold; /* Fettdruck für Label */
|
||||
margin-bottom: 5px; /* Abstand unter den Labels */
|
||||
color: #555; /* Mittlere Schriftfarbe */
|
||||
}
|
||||
|
||||
.wunsch-box input[type="text"],
|
||||
.wunsch-box select {
|
||||
width: 100%; /* Eingabefeld und Auswahlfeld in voller Breite */
|
||||
padding: 10px; /* Innenabstand */
|
||||
margin-bottom: 15px; /* Abstand unter den Feldern */
|
||||
border: 1px solid #ccc; /* Rahmenfarbe */
|
||||
border-radius: 4px; /* Abgerundete Ecken */
|
||||
box-sizing: border-box; /* Box-Inhalt inklusive Padding */
|
||||
}
|
||||
|
||||
.wunsch-box button {
|
||||
width: 100%; /* Button in voller Breite */
|
||||
padding: 10px; /* Innenabstand */
|
||||
background-color: #3b82f6; /* Farbe für Button */
|
||||
color: white; /* Weiße Schrift */
|
||||
border: none; /* Kein Rahmen */
|
||||
border-radius: 4px; /* Abgerundete Ecken */
|
||||
font-size: 16px; /* Größere Schrift für den Button */
|
||||
cursor: pointer; /* Mauszeiger ändert sich bei Hover */
|
||||
}
|
||||
|
||||
.wunsch-box button:hover {
|
||||
background-color: #2274f8; /* Dunklere Farbe beim Hover */
|
||||
}
|
||||
|
||||
#response-message {
|
||||
text-align: center; /* Nachricht zentrieren */
|
||||
color: #d9534f; /* Rote Farbe für Fehlernachrichten */
|
||||
margin-top: 15px; /* Abstand über der Nachricht */
|
||||
font-size: 14px; /* Kleinere Schriftgröße */
|
||||
}
|
||||
|
||||
.popup {
|
||||
display: none; /* Standardmäßig ausgeblendet */
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Halbtransparentes Hintergrund */
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: #fefefe; /* Heller Hintergrund im Normalmodus */
|
||||
margin: 15% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%; /* Breite des Popups */
|
||||
max-width: 600px; /* Maximale Breite */
|
||||
position: relative;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.popup-content.dark-mode {
|
||||
background-color: #333; /* Dunkler Hintergrund im Darkmode */
|
||||
color: #fff; /* Helle Schriftfarbe im Darkmode */
|
||||
}
|
||||
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: white; /* Helle Schriftfarbe beim Hover im Darkmode */
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative; /* Fügt eine relative Position für das Footer-Element hinzu */
|
||||
}
|
||||
|
||||
.popup {
|
||||
display: none; /* Standardmäßig ausgeblendet */
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0, 0, 0, 0.7); /* Halbtransparentes Hintergrund */
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
background-color: #fefefe; /* Heller Hintergrund im Normalmodus */
|
||||
margin: 15% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%; /* Breite des Popups */
|
||||
max-width: 600px; /* Maximale Breite */
|
||||
position: relative;
|
||||
color: #000; /* Schwarze Schriftfarbe im Normalmodus */
|
||||
}
|
||||
|
||||
.popup-content.dark-mode {
|
||||
background-color: #333; /* Dunkler Hintergrund im Darkmode */
|
||||
color: #fff; /* Helle Schriftfarbe im Darkmode */
|
||||
}
|
||||
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: white; /* Helle Schriftfarbe beim Hover im Darkmode */
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative; /* Fügt eine relative Position für das Footer-Element hinzu */
|
||||
}
|
||||
|
||||
#changelog-icon {
|
||||
position: absolute; /* Macht das Symbol absolut positioniert */
|
||||
left: 20px; /* Abstand vom rechten Rand */
|
||||
top: 50%; /* Vertikale Zentrierung */
|
||||
transform: translateY(-50%); /* Vertikal zentrieren */
|
||||
font-size: 24px; /* Größe des Symbols */
|
||||
}
|
||||
|
||||
.changelog-entry {
|
||||
margin-bottom: 15px; /* Abstand zwischen den Einträgen */
|
||||
padding: 10px; /* Padding für besseren Abstand innen */
|
||||
border: 1px solid #ccc; /* Optional: Rahmen um jeden Eintrag */
|
||||
border-radius: 5px; /* Optional: Abgerundete Ecken */
|
||||
background-color: #f9f9f9; /* Optional: Hintergrundfarbe */
|
||||
width: 100%; /* Damit die Einträge die volle Breite des Popups nutzen */
|
||||
max-width: 500px; /* Maximale Breite der Boxen */
|
||||
}
|
||||
|
||||
/* Content */
|
||||
#content {
|
||||
margin-left: 260px;
|
||||
padding: 30px;
|
||||
background-color: #f8fafc;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
/* Header (Willkommensbox) */
|
||||
.welcome-box {
|
||||
background-color: #1f2937;
|
||||
color: white;
|
||||
padding: 15px 20px; /* Padding verkleinert */
|
||||
border-radius: 0 0 15px 15px;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
font-size: 1.2em; /* Schriftgröße verkleinert */
|
||||
font-weight: 300;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
border-bottom: 4px solid #3b82f6;
|
||||
}
|
||||
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background-color: #1f2937;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
font-size: 0.9em;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
border-top: 4px solid #3b82f6;
|
||||
}
|
||||
|
||||
/* Navbar Links */
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
margin: 0 15px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.navbar-link:hover {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
/* Logo-Container separat und links oben positionieren */
|
||||
.logo-container {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
z-index: 1000; /* Über anderen Elementen */
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 100px; /* Vergrößere das Logo nach Bedarf */
|
||||
position: fixed; /* Fixiere das Logo */
|
||||
top: 40px; /* Abstand vom oberen Rand */
|
||||
left: 40px; /* Abstand vom linken Rand */
|
||||
z-index: 1000; /* Stelle sicher, dass das Logo über anderen Inhalten liegt */
|
||||
}
|
||||
|
||||
/* Beispiel CSS für das Bericht-Formular */
|
||||
#report-form {
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#report-form label {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#report-form input, #report-form select, #report-form textarea {
|
||||
margin-bottom: 15px;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#report-form button {
|
||||
padding: 10px;
|
||||
background-color: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#report-form button:hover {
|
||||
background-color: #2576f8;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.faq-container {
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
background: rgb(241, 240, 240);
|
||||
}
|
||||
|
||||
.faq-item:hover {
|
||||
background-color: #dfdbdb;
|
||||
}
|
||||
|
||||
.faq-question {
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
display: none; /* Antwort standardmäßig ausblenden */
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.faq-toggle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.faq-answer.show {
|
||||
display: block; /* Antwort anzeigen */
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Dark Mode */
|
||||
body.dark-mode {
|
||||
background-color: #181818;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.dark-mode .faq-container {
|
||||
background-color: #2c2c2c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body.dark-mode .faq-item {
|
||||
border: 1px solid #444;
|
||||
}
|
||||
|
||||
body.dark-mode .faq-answer {
|
||||
background-color: #ffff;
|
||||
border: 1px solid #444;
|
||||
}
|
||||
Loading…
Reference in New Issue