From 7c4177d74986a14501a0eb75114d01ed31c11773 Mon Sep 17 00:00:00 2001
From: CroneKorkN <i@ckn.li>
Date: Sun, 18 Jan 2026 19:18:53 +0100
Subject: [PATCH] nested css

---
 app/assets/stylesheets/application.css | 226 +++++++++++++------------
 1 file changed, 116 insertions(+), 110 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 20f1f8c..f347412 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -34,25 +34,27 @@ header.navbar {
   color: white;
   padding: 15px 0;
   box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-}
 
-header.navbar h1 {
-  margin-bottom: 10px;
-}
+  h1 {
+    margin-bottom: 10px;
+  }
 
-header.navbar nav ul {
-  list-style: none;
-  display: flex;
-  gap: 20px;
-}
+  nav {
+    ul {
+      list-style: none;
+      display: flex;
+      gap: 20px;
+    }
 
-header.navbar nav a {
-  color: white;
-  text-decoration: none;
-}
+    a {
+      color: white;
+      text-decoration: none;
 
-header.navbar nav a:hover {
-  color: #ccc;
+      &:hover {
+        color: #ccc;
+      }
+    }
+  }
 }
 
 main {
@@ -88,12 +90,16 @@ th, td {
   text-align: left;
 }
 
-tbody tr:hover {
-  background-color: #f9f9f9;
-}
+tbody {
+  tr {
+    &:hover {
+      background-color: #f9f9f9;
+    }
 
-tbody tr:nth-child(even) {
-  background-color: #fafafa;
+    &:nth-child(even) {
+      background-color: #fafafa;
+    }
+  }
 }
 
 .btn {
@@ -108,79 +114,77 @@ tbody tr:nth-child(even) {
   font-size: 14px;
   transition: background-color 0.2s;
   margin-right: 5px;
-}
 
-.btn:hover {
-  background-color: #ccc;
-}
+  &:hover {
+    background-color: #ccc;
+  }
 
-.btn--primary {
-  background-color: #007bff;
-  color: white;
-}
+  &--primary {
+    background-color: #007bff;
+    color: white;
 
-.btn--primary:hover {
-  background-color: #0056b3;
-}
+    &:hover {
+      background-color: #0056b3;
+    }
+  }
 
-.btn--success {
-  background-color: #28a745;
-  color: white;
-}
+  &--success {
+    background-color: #28a745;
+    color: white;
 
-.btn--success:hover {
-  background-color: #1e7e34;
-}
+    &:hover {
+      background-color: #1e7e34;
+    }
+  }
 
-.btn--danger {
-  background-color: #dc3545;
-  color: white;
-}
+  &--danger {
+    background-color: #dc3545;
+    color: white;
 
-.btn--danger:hover {
-  background-color: #c82333;
-}
+    &:hover {
+      background-color: #c82333;
+    }
+  }
 
-.btn--warning {
-  background-color: #ffc107;
-  color: #333;
-}
+  &--warning {
+    background-color: #ffc107;
+    color: #333;
 
-.btn--warning:hover {
-  background-color: #e0a800;
-}
+    &:hover {
+      background-color: #e0a800;
+    }
+  }
 
-.btn--small {
-  padding: 6px 10px;
-  font-size: 12px;
+  &--small {
+    padding: 6px 10px;
+    font-size: 12px;
+  }
 }
 
 .form-group {
   margin-bottom: 15px;
-}
 
-.form-group label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: 600;
-}
+  label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: 600;
+  }
 
-.form-group input,
-.form-group textarea,
-.form-group select {
-  width: 100%;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 14px;
-}
+  input,
+  textarea,
+  select {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
 
-.form-group input:focus,
-.form-group textarea:focus,
-.form-group select:focus {
-  outline: none;
-  border-color: #007bff;
-  box-shadow: 0 0 5px rgba(0,123,255,0.25);
+    &:focus {
+      outline: none;
+      border-color: #007bff;
+      box-shadow: 0 0 5px rgba(0,123,255,0.25);
+    }
+  }
 }
 
 .form-actions {
@@ -192,18 +196,18 @@ tbody tr:nth-child(even) {
   margin-bottom: 20px;
   border-radius: 4px;
   border-left: 4px solid;
-}
 
-.alert--success {
-  background-color: #d4edda;
-  border-color: #28a745;
-  color: #155724;
-}
+  &--success {
+    background-color: #d4edda;
+    border-color: #28a745;
+    color: #155724;
+  }
 
-.alert--error {
-  background-color: #f8d7da;
-  border-color: #dc3545;
-  color: #721c24;
+  &--error {
+    background-color: #f8d7da;
+    border-color: #dc3545;
+    color: #721c24;
+  }
 }
 
 .status {
@@ -212,26 +216,26 @@ tbody tr:nth-child(even) {
   font-size: 12px;
   font-weight: 600;
   display: inline-block;
-}
 
-.status--stopped {
-  background-color: #e9ecef;
-  color: #6c757d;
-}
+  &--stopped {
+    background-color: #e9ecef;
+    color: #6c757d;
+  }
 
-.status--starting {
-  background-color: #fff3cd;
-  color: #856404;
-}
+  &--starting {
+    background-color: #fff3cd;
+    color: #856404;
+  }
 
-.status--running {
-  background-color: #d4edda;
-  color: #155724;
-}
+  &--running {
+    background-color: #d4edda;
+    color: #155724;
+  }
 
-.status--failed {
-  background-color: #f8d7da;
-  color: #721c24;
+  &--failed {
+    background-color: #f8d7da;
+    color: #721c24;
+  }
 }
 
 section {
@@ -255,20 +259,22 @@ section {
   word-wrap: break-word;
 }
 
-.server-info p {
-  margin-bottom: 10px;
+.server-info {
+  p {
+    margin-bottom: 10px;
+  }
 }
 
 .overlays-list {
   list-style: decimal;
   padding-left: 20px;
-}
 
-.overlays-list li {
-  padding: 8px 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  li {
+    padding: 8px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 }
 
 .template-preview {