Start rewriting with glass effect

src/App.svelte

@@ -43,6 +43,10 @@
     <h1>🍉 Admin Panel</h1>
   </div>
   <div class="flex-gap" />
+  {#each sidebarOptions as item (item.name)}
+    <button class="header-tab" on:click={() => (sidebarSelection = item)} class:selected={item == sidebarSelection}>{item.name}</button>
+  {/each}
+  <div class="flex-gap" />
   <div class="nav-link">
     <a href="https://status.1f349.com" target="_blank">Status</a>
   </div>
@@ -70,11 +74,6 @@
   {#if $loginStore == null}
     <div id="login-view">Please login to continue</div>
   {:else}
-    <div id="sidebar">
-      {#each sidebarOptions as item (item.name)}
-        <button class="sidebar-item" on:click={() => (sidebarSelection = item)} class:selected={item == sidebarSelection}>{item.name}</button>
-      {/each}
-    </div>
     <div id="option-view">
       <svelte:component this={sidebarSelection.view} />
     </div>
@@ -155,22 +154,8 @@
       line-height: 24px;
       padding: 8px;
       border-radius: 0.375rem;
-    }
-  }
 
-  main {
+      &.header-tab {
-    display: flex;
-    flex-grow: 1;
-    align-items: stretch;
-    height: 0;
-
-    #sidebar {
-      width: 150px;
-      min-width: 150px;
-
-      button {
-        background-color: #2c2c2c;
-        border: none;
         box-shadow: none;
         box-sizing: border-box;
         color: tomato;
@@ -178,8 +163,6 @@
         font-size: 20px;
         font-weight: 700;
         line-height: 24px;
-        width: 100%;
-        height: 70px;
 
         &:hover {
           background-color: #1c1c1c;
@@ -190,6 +173,13 @@
         }
       }
     }
+  }
+
+  main {
+    display: flex;
+    flex-grow: 1;
+    align-items: stretch;
+    height: 0;
 
     #login-view {
       padding: 16px;
@@ -205,7 +195,7 @@
 
   footer {
     padding: 8px;
-    background-color: #2c2c2c;
+    background-color: #2c2c2c55;
     box-shadow:
       0 -4px 8px #0003,
       0 -6px 20px #00000030;

src/app.scss

@@ -23,6 +23,11 @@ $theme-bg: #242424;
   -webkit-text-size-adjust: 100%;
 }
 
+body {
+  background-image: url('jason-leem-50bzI1F6urA-unsplash.jpg');
+  background-position: center;
+}
+
 @font-face {
   font-family: 'Ubuntu';
   font-style: normal;
@@ -45,6 +50,9 @@ $theme-bg: #242424;
   display: flex;
   flex-direction: column;
   align-content: stretch;
+
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
 }
 
 a {
@@ -99,7 +107,7 @@ table.main-table {
   width: 100%;
 
   thead {
-    background-color: #333333;
+    background-color: #33333355;
     position: sticky;
     top: 0;
     z-index: 9999;
@@ -113,20 +121,20 @@ table.main-table {
   }
 
   tr:nth-child(2n) {
-    background-color: #2a2a2a;
+    background-color: #2a2a2a55;
   }
 
   tr:nth-child(2n + 1) {
-    background-color: #242424;
+    background-color: #24242455;
   }
 
   .invert-rows {
     tr:nth-child(2n) {
-      background-color: #242424;
+      background-color: #24242455;
     }
 
     tr:nth-child(2n + 1) {
-      background-color: #2a2a2a;
+      background-color: #2a2a2a55;
     }
   }
 }
@@ -134,9 +142,14 @@ table.main-table {
 .wrapper {
   display: flex;
   flex-direction: column;
-  width: 100%;
-  height: 100%;
   overflow: hidden;
+  margin: 2em;
+
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  background-color: rgba(17, 25, 40, 0.75);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.125);
 
   .scrolling-area {
     overflow: auto;
@@ -150,7 +163,7 @@ table.main-table {
 
 .footer {
   height: 50px;
-  background-color: #2c2c2c;
+  background-color: #2c2c2c55;
   box-shadow: 0 -4px 8px #0003, 0 -6px 20px #00000030;
   display: flex;
   flex-direction: row;

src/components/RedirectCreator.svelte

@@ -31,11 +31,11 @@
 
 <style lang="scss">
   tr:nth-child(2n) {
-    background-color: #2a2a2a;
+    background-color: #2a2a2a55;
   }
 
   tr:nth-child(2n + 1) {
-    background-color: #242424;
+    background-color: #24242455;
   }
 
   tr.created {

src/components/RedirectRow.svelte

@@ -48,26 +48,26 @@
 
 <style lang="scss">
   tr.created {
-    background-color: #1a5100;
+    background-color: #1a510077;
 
     &:nth-child(2n) {
-      background-color: #103300;
+      background-color: #10330077;
     }
   }
 
   tr.modified {
-    background-color: #515100;
+    background-color: #51510077;
 
     &:nth-child(2n) {
-      background-color: #333300;
+      background-color: #33330077;
     }
   }
 
   tr.deleted {
-    background-color: #510000;
+    background-color: #51000077;
 
     &:nth-child(2n) {
-      background-color: #330000;
+      background-color: #33000077;
     }
   }
 

src/components/RouteCreator.svelte

@@ -29,11 +29,11 @@
 
 <style lang="scss">
   tr:nth-child(2n) {
-    background-color: #2a2a2a;
+    background-color: #2a2a2a55;
   }
 
   tr:nth-child(2n + 1) {
-    background-color: #242424;
+    background-color: #24242455;
   }
 
   tr.created {

src/components/RouteRow.svelte

@@ -45,26 +45,26 @@
 
 <style lang="scss">
   tr.created {
-    background-color: #1a5100;
+    background-color: #1a510077;
 
     &:nth-child(2n) {
-      background-color: #103300;
+      background-color: #10330077;
     }
   }
 
   tr.modified {
-    background-color: #515100;
+    background-color: #51510077;
 
     &:nth-child(2n) {
-      background-color: #333300;
+      background-color: #33330077;
     }
   }
 
   tr.deleted {
-    background-color: #510000;
+    background-color: #51000077;
 
     &:nth-child(2n) {
-      background-color: #330000;
+      background-color: #33000077;
     }
   }
 

src/views/CertificatesView.svelte

@@ -104,11 +104,11 @@
   // css please explain yourself
   tr.cert-error.cert-error {
     &:nth-child(2n + 1) {
-      background-color: #510000;
+      background-color: #51000055;
     }
 
     &:nth-child(2n) {
-      background-color: #330000;
+      background-color: #33000055;
     }
   }
 </style>

src/views/GeneralView.svelte

@@ -1,3 +1,4 @@
+<div class="wrapper">
   <div style="padding:8px;background-color:#bb7900;">Warning: This is currently still under development</div>
 
   <div class="button-wrapper">
@@ -5,6 +6,7 @@
     <div><a class="btn-green" href="https://sso.1f349.com" target="_blank">SSO Dashboard</a></div>
     <div><a class="btn-green" href="https://grafana.1f349.com" target="_blank">Grafana</a></div>
   </div>
+</div>
 
 <style lang="scss">
   .button-wrapper {