Quasi finito

_frontend/styles/main.scss

@@ -13,6 +13,7 @@
     --bg-dark-400: #55555f;
     --bg-dark-500: #38383d;
 
+    --fg-light-300: #5d5d5d;
     --fg-light-400: #3d3d3d;
     --fg-light-500: #333;
 
@@ -215,6 +216,8 @@ main {
             flex-direction: column;
             align-items: center;
 
+            gap: 1rem;
+
             flex-grow: 1;
 
             padding: 1rem 1rem 0 1rem;
@@ -265,6 +268,43 @@ main {
 // Components
 //
 
+.toasts {
+    position: absolute;
+    z-index: 10;
+
+    left: 50%;
+    transform: translateX(-50%);
+
+    bottom: 1rem;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    gap: 0.25rem;
+
+    transition: all 150ms linear;
+
+    font-size: 15px;
+
+    .toast {
+        background: #38383d;
+        color: var(--fg-dark-500);
+
+        padding: 0.5rem 1rem;
+        border-radius: 0.5rem;
+
+        opacity: 0.95;
+
+        animation: toast-fade-in 250ms ease-out;
+        transition: opacity 250ms ease-in;
+
+        &.removed {
+            opacity: 0;
+        }
+    }
+}
+
 .panel {
     background: var(--bg-light-100);
     border: 1px solid var(--bg-light-600);
@@ -277,6 +317,10 @@ main {
 
     & .title {
         font-weight: var(--ft-sans-wt-bold);
+
+        code {
+            font-weight: var(--ft-sans-wt-normal);
+        }
     }
 }
 
@@ -301,6 +345,9 @@ main {
 
         & > div {
             min-width: 4rem;
+
+            display: flex;
+            align-items: center;
         }
     }
 }
@@ -385,6 +432,15 @@ button,
             background: var(--bg-light-700);
         }
     }
+
+    &.delete,
+    &.error {
+        color: #e62929;
+
+        &:hover {
+            background: #e629291d;
+        }
+    }
 }
 
 input[type='text'],
@@ -408,6 +464,11 @@ textarea {
         font-size: 90%;
         font-family: var(--ft-mono);
     }
+
+    &:read-only {
+        color: var(--fg-light-300);
+        background: var(--bg-light-500);
+    }
 }
 
 textarea {
@@ -540,51 +601,36 @@ $heading-scale: 1.33;
             display: flex;
             justify-content: end;
             gap: 0.5rem;
+        }
+    }
+}
 
-            .delete {
-                color: #e62929;
+.route-buckets {
+    .table {
+        min-width: 30rem;
 
-                &:hover {
-                    background: #e629291d;
+        .cells {
+            grid-template-columns: 1fr auto auto;
+            gap: 0.25rem 1rem;
+
+            .settings {
+                min-width: 20rem;
+
+                input[type='text'] {
+                    width: 100%;
                 }
             }
         }
     }
 }
 
-.toasts {
-    position: absolute;
-    z-index: 10;
+.route-bucket {
+    .table {
+        min-width: 30rem;
 
-    left: 50%;
-    transform: translateX(-50%);
-
-    bottom: 1rem;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    gap: 0.25rem;
-
-    transition: all 150ms linear;
-
-    font-size: 15px;
-
-    .toast {
-        background: #38383d;
-        color: var(--fg-dark-500);
-
-        padding: 0.5rem 1rem;
-        border-radius: 0.5rem;
-
-        opacity: 0.95;
-
-        animation: toast-fade-in 250ms ease-out;
-        transition: opacity 250ms ease-in;
-
-        &.removed {
-            opacity: 0;
+        .cells {
+            grid-template-columns: 1fr auto;
+            gap: 0.25rem 1rem;
         }
     }
 }