style.css aktualisiert

Ein- und Ausblenden von "Presets bearbeiten Buttons"

style.css

@@ -1,34 +1,40 @@
+:root {
+    --primary-color: #ff9999;
+    --header-height: 120px;
+    --padding-top: calc(10px + var(--header-height));
+    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
 body {
     font-family: Arial, sans-serif;
     text-align: center;
     margin: 0;
     padding: 20px;
-    padding-top: calc(10px + 110px); /* Dynamische Berechnung basierend auf der Header-Höhe */
+    padding-top: var(--padding-top);
 }
 
 .header {
     background-color: #FFFFE3;
-    height: 120px; /* Feste Höhe für den Header */
+    height: var(--header-height);
     padding-bottom: 10px;
-    position: fixed; /* Fixiert den Header oben */
-    top: 0; /* Abstand von oben */
-    left: 0; /* Abstand von links */
-    width: 100%; /* Deckt die gesamte Breite ab */
-    z-index: 1000; /* Stellt sicher, dass der Header über anderen Inhalten liegt */
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Schatten für mehr Tiefe */
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1000;
+    box-shadow: var(--box-shadow);
 }
 
 .titel {
     display: flex;
-    align-items: center; /* Vertikale Zentrierung */
-    align-self: center; /* Titel an die Mitte der Flexbox anpassen */
-    justify-content: center; /* Hier wird die horizontale Zentrierung eingestellt */
+    align-items: center;
+    justify-content: center;
     gap: 10px;
 }
 
 .titel img {
-    height: 30px; /* Einheitliche Höhe für das Logo */
-    width: auto; /* Automatische Breite beibehalten */
+    height: 30px;
+    width: auto;
 }
 
 .hidden {
@@ -36,21 +42,20 @@ body {
 }
 
 .stop-button {
-    background-color: #ff9999;
-    color: #fff; /* Weißer Text auf rotem Hintergrund */
+    background-color: var(--primary-color);
+    color: #fff;
     font-weight: bold;
     border: none;
     border-radius: 5px;
-    height: 30px; /* Höhe passend zum Logo */
+    height: 30px;
     padding: 4px 10px;
     font-size: 18px;
-    margin: 0; /* Verhindert zusätzliche Abstände in der Zeile */
-    margin-left: auto; /* Schiebt den Button ganz nach rechts */
+    margin: 0;
+    margin-left: auto;
     cursor: pointer;
     transition: background-color 0.3s ease;
-    /* Neue Anpassung für die Position */
-    position: relative; 
-    top: -2px; /* Bewegt den Button 2 Pixel nach oben */
+    position: relative;
+    top: -2px;
 }
 
 .stop-button:focus {
@@ -70,19 +75,28 @@ body {
     padding: 10px 20px;
 }
 
+.edit-button, .delete-button, .move-button {
+    display: none; /* Standardmäßig ausgeblendet */
+}
+
+.edit-button.hidden, .delete-button.hidden, .move-button.hidden {
+    display: inline-block; /* Wird angezeigt, wenn die Klasse 'hidden' entfernt wird */
+}
+
+
 .preset-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     grid-gap: 20px;
-    margin-top: 30px; 
-    margin-bottom: 30px; 
+    margin-top: 30px;
+    margin-bottom: 30px;
 }
 
 .preset-item {
     background-color: #f1f1f1;
     padding: 15px;
     border-radius: 5px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--box-shadow);
     cursor: pointer;
     transition: background-color 0.3s ease;
     display: flex;
@@ -91,8 +105,7 @@ body {
 
 .preset-item h3 {
     margin: 0;
-    flex: 1; /* Flexibel innerhalb des Items */
-
+    flex: 1;
 }
 
 .preset-item button {
@@ -115,13 +128,13 @@ body {
 
 .preset-set {
     margin: 0;
-    text-align: center; /* Zentriert den gesamten Inhalt */
+    text-align: center;
     font-size: 12px;
     color: #666;
 }
 
 .preset-set a {
-    color: #666; /* Farbe der Links */
+    color: #666;
     text-decoration: underline;
 }
 
@@ -132,19 +145,25 @@ body {
 
 .footer {
     display: flex;
-    align-items: center; /* Zentriert Elemente vertikal */
-    justify-content: center; /* Hier wird die horizontale Zentrierung eingestellt */
+    align-items: center;
+    justify-content: center;
     margin: 20px 0;
     font-size: 12px;
     color: #666;
 }
 
 .footer a {
-    color: #666; /* Farbe der Links */
-    text-decoration: none; /* Entfernt den Unterstreichung */
+    color: #666;
+    text-decoration: none;
 }
 
 .footer a:hover {
     text-decoration: none;
     color: #333;
 }
+
+@media (max-width: 600px) {
+    .preset-container {
+        grid-template-columns: 1fr;
+    }
+}