From 900bf058dae9231bc8f4c4605c7c4f51a469e6b1 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Wed, 13 Nov 2024 23:00:07 +0100
Subject: [PATCH] chore: lint the style files

---
 src/assets/components/base.scss       | 680 +++++++++++++-------------
 src/assets/components/highlights.scss |  27 +-
 src/assets/components/layers.scss     |   2 +-
 src/assets/components/status.scss     |  92 ++--
 src/assets/themes/classic.scss        |  69 ++-
 src/assets/themes/neon.scss           | 183 ++++---
 src/assets/themes/walkxcode.scss      | 134 ++---
 7 files changed, 596 insertions(+), 591 deletions(-)

diff --git a/src/assets/components/base.scss b/src/assets/components/base.scss
index f489a29..6d5c1d4 100644
--- a/src/assets/components/base.scss
+++ b/src/assets/components/base.scss
@@ -2,367 +2,367 @@
 @import url("@/assets/components/status.scss") layer(base);
 @import url("@/assets/webfonts/webfonts.scss") layer(base);
 
-
 @mixin ellipsis() {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@layer base {
+  html,
+  body,
+  body #app-mount,
+  body #app {
+    height: 100%;
+    background-color: var(--background);
   }
-  
-  @layer base {
-    html, body, body #app-mount, body #app {
-      height: 100%;
-      background-color: var(--background);
-    }
-  
-    body {
-      font-family: "Noto Sans", sans-serif;
-      font-optical-sizing: auto;
-      font-weight: 400;
-      font-style: normal;
-      font-variation-settings: "wdth" 100;
-  
-      #app {
-        height: auto;
-        min-height: 100%;
-        background-image: var(--background-image);
-        background-size: cover;
-        background-position: center;
-        color: var(--text);
-        transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
-  
-        a {
-          color: var(--link);
-          &:hover {
-            color: var(--link-hover);
-          }
+
+  body {
+    font-family: "Noto Sans", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+    font-variation-settings: "wdth" 100;
+
+    #app {
+      height: auto;
+      min-height: 100%;
+      background-image: var(--background-image);
+      background-size: cover;
+      background-position: center;
+      color: var(--text);
+      transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+
+      a {
+        color: var(--link);
+        &:hover {
+          color: var(--link-hover);
         }
-  
-        .title {
-          font-weight: 500;
-          color: var(--text-title);
-        }
-        .subtitle {
-          color: var(--text-subtitle);
-        }
-  
-        .card {
+      }
+
+      .title {
+        font-weight: 500;
+        color: var(--text-title);
+      }
+      .subtitle {
+        color: var(--text-subtitle);
+      }
+
+      .card {
+        background-color: var(--card-background);
+        box-shadow: 0 2px 15px 0 var(--card-shadow);
+        &:hover {
           background-color: var(--card-background);
-          box-shadow: 0 2px 15px 0 var(--card-shadow);
-          &:hover {
-            background-color: var(--card-background);
-          }
         }
-  
-        .message {
-          .message-body {
-            color: var(--text);
-            background-color: var(--card-background);
-          }
-        } 
-  
-        .footer {
+      }
+
+      .message {
+        .message-body {
+          color: var(--text);
           background-color: var(--card-background);
-          box-shadow: 0 2px 15px 0 var(--card-shadow);
         }
       }
-  
-      h1 {
-        font-size: 2rem;
-      }
-  
-      h2 {
-        font-size: 1.3rem;
-        margin-top: 1.2rem;
-        margin-bottom: 0.5rem;
-  
-        .fas,
-        .fab,
-        .far {
-          font-size: 1.4rem;
-          margin-right: 10px;
-        }
-  
-        span {
-          font-weight: bold;
-          color: var(--highlight-secondary);
-        }
-      }
-  
-      [v-cloak] {
-        display: none;
-      }
-  
-      #bighead {
-        color: var(--text-header);
-  
-        .dashboard-title {
-          padding-top: 6px;
-        }
-  
-        .first-line {
-          min-height: 100px;
-          vertical-align: center;
-          background-color: var(--highlight-primary);
-  
-          h1 {
-            margin-top: -12px;
-            font-size: 2rem;
-          }
-  
-          .headline {
-            margin-top: 5px;
-            font-size: 0.9rem;
-          }
-  
-          .container {
-            min-height: 80px;
-            padding: 10px 0;
-          }
-  
-          .logo {
-            float: left;
-            i {
-              vertical-align: top;
-              padding: 8px 15px;
-              font-size: 50px;
-            }
-  
-            img {
-              padding: 10px;
-              max-height: 70px;
-              max-width: 70px;
-            }
-          }
-        }
-        .navbar {
-          background-color: var(--highlight-secondary);
-  
-          a {
-            color: var(--text-header);
-            padding: 8px 12px;
-            &:hover,
-            &:focus {
-              color: var(--text-header);
-              background-color: var(--highlight-hover);
-            }
-          }
-      .navbar-menu {
-          background-color: inherit;
-          }
-        }
-        .navbar-end {
-          text-align: right;
-        }
-      }
-  
-      #main-section {
-        padding: 0 0 2.5rem 0;
-  
-        h2 {
-          padding-bottom: 0px;
-          @include ellipsis();
-          i {
-            color: var(--highlight-primary);
-          }
-        }
 
-        .title {
-          font-size: 1.1em;
-          line-height: 1.2em;
-          font-weight: 500;
-          margin-bottom: 4px;
-          @include ellipsis();
-        }
-  
-        .subtitle {
-          font-size: 0.9em;
-          font-weight: 300;
-          @include ellipsis();
-        }
-  
-        .container {
-          padding: 1.2rem 0.75rem;
-        }
-  
-        .message {
-          margin-top: 45px;
-          box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
-  
-          .message-header {
-            font-weight: bold;
-          }
-  
-          .message-body {
-            border: none;
-          }
-        }
-
-        .media.no-subtitle {
-          display: flex;
-          align-items: center;
-        }
-
-        .media-left {
-          margin-inline-end: 0.5rem;
-        }
-    
-        .media-content {
-          overflow: hidden;
-          text-overflow: inherit;
-        }
-    
-        .tag {
-          color: #ffffff;
-          position: absolute;
-          bottom: 1rem;
-          right: -0.2rem;
-          width: 3px;
-          overflow: hidden;
-          transition: all 0.2s ease-out;
-          padding: 0;
-
-          &:not([class*="is-"]) {
-            background-color: var(--highlight-secondary);
-          }
-    
-          .tag-text {
-            display: none;
-          }
-        }
-    
-        .card {
-          border: none;
-          border-radius: 0.75rem;
-          box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
-          transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
-          overflow: visible;
-    
-          a {
-            outline: none;
-          }
-        }
-    
-        .card:hover {
-          transform: translate(0, -3px);
-    
-          .tag {
-            width: auto;
-            padding: 0 0.75em;
-    
-            .tag-text {
-              display: block;
-            }
-          }
-        }
-    
-        .card-content {
-          height: 85px;
-          padding: 1.3rem;
-        }
-    
-        .layout-vertical {
-          h2.group-title {
-            padding-bottom: 0.75rem;
-          }
-  
-          .card {
-            border-radius: 0;
-          }
-    
-          .column div:first-of-type .card {
-            border-top-left-radius: 0.75rem;
-            border-top-right-radius: 0.75rem;
-          }
-    
-          .column div:last-child .card {
-            border-bottom-left-radius: 0.75rem;
-            border-bottom-right-radius: 0.75rem;
-          }
-        }
-      }
-  
-  
       .footer {
-        position: fixed;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        padding: 0.5rem;
-        text-align: left;
-        color: #676767;
-        font-size: 0.85rem;
-        transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+        background-color: var(--card-background);
+        box-shadow: 0 2px 15px 0 var(--card-shadow);
       }
-  
-      .no-footer {
-        #main-section {
-          padding-bottom: 0;
+    }
+
+    h1 {
+      font-size: 2rem;
+    }
+
+    h2 {
+      font-size: 1.3rem;
+      margin-top: 1.2rem;
+      margin-bottom: 0.5rem;
+
+      .fas,
+      .fab,
+      .far {
+        font-size: 1.4rem;
+        margin-right: 10px;
+      }
+
+      span {
+        font-weight: bold;
+        color: var(--highlight-secondary);
+      }
+    }
+
+    [v-cloak] {
+      display: none;
+    }
+
+    #bighead {
+      color: var(--text-header);
+
+      .dashboard-title {
+        padding-top: 6px;
+      }
+
+      .first-line {
+        min-height: 100px;
+        vertical-align: center;
+        background-color: var(--highlight-primary);
+
+        h1 {
+          margin-top: -12px;
+          font-size: 2rem;
         }
-  
-        .footer {
+
+        .headline {
+          margin-top: 5px;
+          font-size: 0.9rem;
+        }
+
+        .container {
+          min-height: 80px;
+          padding: 10px 0;
+        }
+
+        .logo {
+          float: left;
+          i {
+            vertical-align: top;
+            padding: 8px 15px;
+            font-size: 50px;
+          }
+
+          img {
+            padding: 10px;
+            max-height: 70px;
+            max-width: 70px;
+          }
+        }
+      }
+      .navbar {
+        background-color: var(--highlight-secondary);
+
+        a {
+          color: var(--text-header);
+          padding: 8px 12px;
+          &:hover,
+          &:focus {
+            color: var(--text-header);
+            background-color: var(--highlight-hover);
+          }
+        }
+        .navbar-menu {
+          background-color: inherit;
+        }
+      }
+      .navbar-end {
+        text-align: right;
+      }
+    }
+
+    #main-section {
+      padding: 0 0 2.5rem 0;
+
+      h2 {
+        padding-bottom: 0px;
+        @include ellipsis();
+        i {
+          color: var(--highlight-primary);
+        }
+      }
+
+      .title {
+        font-size: 1.1em;
+        line-height: 1.2em;
+        font-weight: 500;
+        margin-bottom: 4px;
+        @include ellipsis();
+      }
+
+      .subtitle {
+        font-size: 0.9em;
+        font-weight: 300;
+        @include ellipsis();
+      }
+
+      .container {
+        padding: 1.2rem 0.75rem;
+      }
+
+      .message {
+        margin-top: 45px;
+        box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
+
+        .message-header {
+          font-weight: bold;
+        }
+
+        .message-body {
+          border: none;
+        }
+      }
+
+      .media.no-subtitle {
+        display: flex;
+        align-items: center;
+      }
+
+      .media-left {
+        margin-inline-end: 0.5rem;
+      }
+
+      .media-content {
+        overflow: hidden;
+        text-overflow: inherit;
+      }
+
+      .tag {
+        color: #ffffff;
+        position: absolute;
+        bottom: 1rem;
+        right: -0.2rem;
+        width: 3px;
+        overflow: hidden;
+        transition: all 0.2s ease-out;
+        padding: 0;
+
+        &:not([class*="is-"]) {
+          background-color: var(--highlight-secondary);
+        }
+
+        .tag-text {
           display: none;
         }
       }
-  
-      .search-bar {
-        position: relative;
-        display: inline-block;
-        input {
-          border: none;
-          background-color: var(--highlight-hover);
-          border-radius: 5px;
-          margin-top: 2px;
-          padding: 2px 12px 2px 30px;
-          transition: all 100ms linear;
-          color: #ffffff;
-          height: 30px;
-          width: 100px;
-  
-          &:focus {
-            color: #000000;
-            width: 250px;
-            background-color: #ffffff;
+
+      .card {
+        border: none;
+        border-radius: 0.75rem;
+        box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
+        transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+        overflow: visible;
+
+        a {
+          outline: none;
+        }
+      }
+
+      .card:hover {
+        transform: translate(0, -3px);
+
+        .tag {
+          width: auto;
+          padding: 0 0.75em;
+
+          .tag-text {
+            display: block;
           }
         }
-  
-        .search-label::before {
-          font-family: "Font Awesome 6 Free";
-          position: absolute;
-          top: 14px;
-          left: 16px;
-          content: "\f002";
-          font-weight: 900;
-          width: 20px;
-          height: 20px;
-          color: #ffffff;
-        }
-  
-        &:focus-within .search-label::before {
-          color: #6e6e6e;
-        }
       }
-  
-      .offline-message {
-        text-align: center;
-        margin: 35px 0;
-  
-        i {
-          font-size: 2rem;
+
+      .card-content {
+        height: 85px;
+        padding: 1.3rem;
+      }
+
+      .layout-vertical {
+        h2.group-title {
+          padding-bottom: 0.75rem;
         }
-  
-        i.fa-redo-alt {
-          font-size: 1.3rem;
-          line-height: 1rem;
-          vertical-align: middle;
-          cursor: pointer;
-          color: #3273dc;
+
+        .card {
+          border-radius: 0;
+        }
+
+        .column div:first-of-type .card {
+          border-top-left-radius: 0.75rem;
+          border-top-right-radius: 0.75rem;
+        }
+
+        .column div:last-child .card {
+          border-bottom-left-radius: 0.75rem;
+          border-bottom-right-radius: 0.75rem;
         }
       }
     }
-  
-    .group-logo {
-      float: left;
+
+    .footer {
+      position: fixed;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      padding: 0.5rem;
+      text-align: left;
+      color: #676767;
+      font-size: 0.85rem;
+      transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+    }
+
+    .no-footer {
+      #main-section {
+        padding-bottom: 0;
+      }
+
+      .footer {
+        display: none;
+      }
+    }
+
+    .search-bar {
+      position: relative;
+      display: inline-block;
+      input {
+        border: none;
+        background-color: var(--highlight-hover);
+        border-radius: 5px;
+        margin-top: 2px;
+        padding: 2px 12px 2px 30px;
+        transition: all 100ms linear;
+        color: #ffffff;
+        height: 30px;
+        width: 100px;
+
+        &:focus {
+          color: #000000;
+          width: 250px;
+          background-color: #ffffff;
+        }
+      }
+
+      .search-label::before {
+        font-family: "Font Awesome 6 Free";
+        position: absolute;
+        top: 14px;
+        left: 16px;
+        content: "\f002";
+        font-weight: 900;
+        width: 20px;
+        height: 20px;
+        color: #ffffff;
+      }
+
+      &:focus-within .search-label::before {
+        color: #6e6e6e;
+      }
+    }
+
+    .offline-message {
+      text-align: center;
+      margin: 35px 0;
+
+      i {
+        font-size: 2rem;
+      }
+
+      i.fa-redo-alt {
+        font-size: 1.3rem;
+        line-height: 1rem;
+        vertical-align: middle;
+        cursor: pointer;
+        color: #3273dc;
+      }
     }
   }
-  
\ No newline at end of file
+
+  .group-logo {
+    float: left;
+  }
+}
diff --git a/src/assets/components/highlights.scss b/src/assets/components/highlights.scss
index b27f4f9..693b058 100644
--- a/src/assets/components/highlights.scss
+++ b/src/assets/components/highlights.scss
@@ -1,37 +1,38 @@
 .highlight-primary {
-    --highlight-color: var(--highlight-primary);
+  --highlight-color: var(--highlight-primary);
 }
 
 .highlight-green {
-    --highlight-color: var(--highlight-green);
+  --highlight-color: var(--highlight-green);
 }
 
 .highlight-orange {
-    --highlight-color: var(--highlight-orange); 
+  --highlight-color: var(--highlight-orange);
 }
 
 .highlight-pink {
-    --highlight-color: var(--highlight-pink); 
+  --highlight-color: var(--highlight-pink);
 }
 
 .highlight-purple {
-    --highlight-color: var(--highlight-purple); 
+  --highlight-color: var(--highlight-purple);
 }
 
 .highlight-red {
-    --highlight-color: var(--highlight-red); 
+  --highlight-color: var(--highlight-red);
 }
 
 .highlight-blue {
-    --highlight-color: var(--highlight-blue); 
+  --highlight-color: var(--highlight-blue);
 }
 
 .highlight-inverted {
-    --highlight-color: var(--highlight-variant-inverted); 
+  --highlight-color: var(--highlight-variant-inverted);
 }
 
-*[class^="highlight-"], *[class*=" highlight-"] {
-    i {
-        color: var(--highlight-color);
-    }
-}
\ No newline at end of file
+*[class^="highlight-"],
+*[class*=" highlight-"] {
+  i {
+    color: var(--highlight-color);
+  }
+}
diff --git a/src/assets/components/layers.scss b/src/assets/components/layers.scss
index 0f9e9b9..09a1a39 100644
--- a/src/assets/components/layers.scss
+++ b/src/assets/components/layers.scss
@@ -1 +1 @@
-@layer framework, base, theme;
\ No newline at end of file
+@layer framework, base, theme;
diff --git a/src/assets/components/status.scss b/src/assets/components/status.scss
index b5fd20b..8743a62 100644
--- a/src/assets/components/status.scss
+++ b/src/assets/components/status.scss
@@ -1,48 +1,52 @@
 .status {
-    font-size: 0.8rem;
-    color: var(--text-title);
+  font-size: 0.8rem;
+  color: var(--text-title);
 
-    &.offline:before, &.error:before {
-      background-color: #d65c68;
-      box-shadow: 0 0 5px 1px #d65c68;
-      color: #d65c68;
+  &.offline:before,
+  &.error:before {
+    background-color: #d65c68;
+    box-shadow: 0 0 5px 1px #d65c68;
+    color: #d65c68;
+  }
+
+  &.pending:before {
+    background-color: #e8bb7d;
+    box-shadow: 0 0 5px 1px #e8bb7d;
+  }
+
+  &.online:before,
+  &.ready:before {
+    background-color: #94e185;
+    box-shadow: 0 0 5px 1px #94e185;
+  }
+
+  &.in-progress:before {
+    background-color: #8fe87d;
+    box-shadow: 0 0 5px 1px #8fe87d;
+    animation: pulse 1s alternate infinite;
+  }
+
+  @keyframes pulse {
+    0% {
+      background: rgba(255, 255, 255, 0.2);
+      box-shadow:
+        inset 0px 0px 10px 2px rgba(0, 255, 182, 0.3),
+        0px 0px 5px 2px rgba(0, 255, 135, 0.2);
     }
-  
-    &.pending:before {
-      background-color: #e8bb7d;
-      box-shadow: 0 0 5px 1px #e8bb7d;
+    100% {
+      background: rgba(255, 255, 255, 1);
+      box-shadow:
+        inset 0px 0px 10px 2px rgba(0, 255, 182, 0.5),
+        0px 0px 15px 2px rgba(0, 255, 135, 1);
     }
-  
-    &.online:before, &.ready:before {
-      background-color: #94e185;
-      box-shadow: 0 0 5px 1px #94e185;
-    }
-  
-    &.in-progress:before {
-      background-color: #8fe87d;
-      box-shadow: 0 0 5px 1px #8fe87d;
-      animation: pulse 1s alternate infinite;
-    }
-  
-    @keyframes pulse {
-      0% {
-        background: rgba(255, 255, 255, 0.2);
-        box-shadow: inset 0px 0px 10px 2px rgba(0, 255, 182, 0.3),
-          0px 0px 5px 2px rgba(0, 255, 135, 0.2);
-      }
-      100% {
-        background: rgba(255, 255, 255, 1);
-        box-shadow: inset 0px 0px 10px 2px rgba(0, 255, 182, 0.5),
-          0px 0px 15px 2px rgba(0, 255, 135, 1);
-      }
-    }
-  
-    &:before {
-      content: " ";
-      display: inline-block;
-      width: 8px;
-      height: 8px;
-      margin-right: 10px;
-      border-radius: 8px;
-    }
-  }
\ No newline at end of file
+  }
+
+  &:before {
+    content: " ";
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin-right: 10px;
+    border-radius: 8px;
+  }
+}
diff --git a/src/assets/themes/classic.scss b/src/assets/themes/classic.scss
index 8a05641..35833db 100644
--- a/src/assets/themes/classic.scss
+++ b/src/assets/themes/classic.scss
@@ -1,46 +1,45 @@
-
 // Theme colors
 .light {
-    --highlight-primary: #3367d6;
-    --highlight-secondary: #4285f4;
-    --highlight-hover: #5a95f5;
-    --background: #f5f5f5;
-    --card-background: #ffffff;
-    --text: #363636;
-    --text-header: #ffffff;
-    --text-title: #303030;
-    --text-subtitle: #424242;
-    --card-shadow: rgba(0, 0, 0, 0.1);
-    --link: #3273dc;
-    --link-hover: #363636;
-    --background-image: none;
+  --highlight-primary: #3367d6;
+  --highlight-secondary: #4285f4;
+  --highlight-hover: #5a95f5;
+  --background: #f5f5f5;
+  --card-background: #ffffff;
+  --text: #363636;
+  --text-header: #ffffff;
+  --text-title: #303030;
+  --text-subtitle: #424242;
+  --card-shadow: rgba(0, 0, 0, 0.1);
+  --link: #3273dc;
+  --link-hover: #363636;
+  --background-image: none;
 
-    --highlight-variant-inverted: #363636;
+  --highlight-variant-inverted: #363636;
 }
 
 .dark {
-    --highlight-primary: #3367d6;
-    --highlight-secondary: #4285f4;
-    --highlight-hover: #5a95f5;
-    --background: #131313;
-    --card-background: #282828;
-    --text: #eaeaea;
-    --text-header: #ffffff;
-    --text-title: #fafafa;
-    --text-subtitle: #b6b6b6;
-    --card-shadow: rgba(0, 0, 0, 0.4);
-    --link: #3273dc;
-    --link-hover: #144aa2;
-    --background-image: none;
+  --highlight-primary: #3367d6;
+  --highlight-secondary: #4285f4;
+  --highlight-hover: #5a95f5;
+  --background: #131313;
+  --card-background: #282828;
+  --text: #eaeaea;
+  --text-header: #ffffff;
+  --text-title: #fafafa;
+  --text-subtitle: #b6b6b6;
+  --card-shadow: rgba(0, 0, 0, 0.4);
+  --link: #3273dc;
+  --link-hover: #144aa2;
+  --background-image: none;
 
-    --highlight-variant-inverted: #f5f5f5;
+  --highlight-variant-inverted: #f5f5f5;
 }
 
 #app {
-    --highlight-blue: #444B6E;
-    --highlight-red: #C83E4D;
-    --highlight-pink: #FF6392;
-    --highlight-orange: #FF8A08;
-    --highlight-green: #22A699;
-    --highlight-purple: #711DB0;
+  --highlight-blue: #444b6e;
+  --highlight-red: #c83e4d;
+  --highlight-pink: #ff6392;
+  --highlight-orange: #ff8a08;
+  --highlight-green: #22a699;
+  --highlight-purple: #711db0;
 }
diff --git a/src/assets/themes/neon.scss b/src/assets/themes/neon.scss
index 70cea6b..332c05b 100644
--- a/src/assets/themes/neon.scss
+++ b/src/assets/themes/neon.scss
@@ -1,114 +1,113 @@
-
 // Theme colors
 .theme-neon.light {
-    --highlight-primary: #B5FF57;
-    --highlight-secondary: #B5FF57;
-    --highlight-hover: #e7e4e4;
-    --background: #ffffff;
-    --card-background: #ffffff;
-    --text: #363636;
-    --text-header: #1F2229;
-    --text-title: #303030;
-    --text-subtitle: #424242;
-    --card-shadow: rgba(46, 39, 39, 0.1);
-    --link: #B5FF57;
-    --link-hover: #8cce36;
-    --background-image: none;
+  --highlight-primary: #b5ff57;
+  --highlight-secondary: #b5ff57;
+  --highlight-hover: #e7e4e4;
+  --background: #ffffff;
+  --card-background: #ffffff;
+  --text: #363636;
+  --text-header: #1f2229;
+  --text-title: #303030;
+  --text-subtitle: #424242;
+  --card-shadow: rgba(46, 39, 39, 0.1);
+  --link: #b5ff57;
+  --link-hover: #8cce36;
+  --background-image: none;
 }
 
 .theme-neon.dark {
-    --highlight-primary: #B5FF57;
-    --highlight-secondary: #B5FF57;
-    --highlight-hover: #1F2229;
-    --background: #14161A;
-    --card-background: #14161A; 
-    --text: #eaeaea;
-    --text-header: #ffffff;
-    --text-title: #fafafa;
-    --text-subtitle: #768198;
-    --card-shadow: rgba(46, 39, 39, 0.1);
-    --link: #B5FF57;
-    --link-hover: #aeff45;
-    --background-image: none;
+  --highlight-primary: #b5ff57;
+  --highlight-secondary: #b5ff57;
+  --highlight-hover: #1f2229;
+  --background: #14161a;
+  --card-background: #14161a;
+  --text: #eaeaea;
+  --text-header: #ffffff;
+  --text-title: #fafafa;
+  --text-subtitle: #768198;
+  --card-shadow: rgba(46, 39, 39, 0.1);
+  --link: #b5ff57;
+  --link-hover: #aeff45;
+  --background-image: none;
 }
 
-// theme 
+// theme
 .theme-neon {
-    --subtitle-color: #768198;
-    --border-radius: 0.75em;
+  --subtitle-color: #768198;
+  --border-radius: 0.75em;
 
-    .first-line {
-        padding-top: 25px;
-        margin-bottom: 5px;
-        background-color: transparent;
+  .first-line {
+    padding-top: 25px;
+    margin-bottom: 5px;
+    background-color: transparent;
 
-        .headline {
-            color: var(--subtitle-color);
-            font-size: 1em;
-        }
-
-        h1 {
-            font-size: 2.5em;
-            font-weight: bold;
-        }
-
-        .dashboard-title::after {
-            content: "";
-            position: absolute;
-            bottom: -4px;
-            width: 4em;
-            height: .25rem;
-            background-color: var(--highlight-primary);
-            border-radius: 2px;
-        }
+    .headline {
+      color: var(--subtitle-color);
+      font-size: 1em;
     }
 
-    .navbar {
-        background-color: transparent;
+    h1 {
+      font-size: 2.5em;
+      font-weight: bold;
     }
 
-    #bighead {
-        .logo {
-            display: none;
-        }
-        .navbar a {
-            color: var(--text);
-
-            &:hover {
-                color: var(--text-header);
-                border-radius: var(--border-radius);
-                background-color: transparent;
-            }
-        }
+    .dashboard-title::after {
+      content: "";
+      position: absolute;
+      bottom: -4px;
+      width: 4em;
+      height: 0.25rem;
+      background-color: var(--highlight-primary);
+      border-radius: 2px;
     }
+  }
 
-    *[class^="highlight-"], *[class*=" highlight-"] {
-        .card:hover {
-            border: 1px solid var(--highlight-color);
-        }
+  .navbar {
+    background-color: transparent;
+  }
+
+  #bighead {
+    .logo {
+      display: none;
     }
+    .navbar a {
+      color: var(--text);
 
-    .tag {
-        color: var(--highlight-variant-inverted);
-    }
-
-    .card {
-        box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
-        border: 1px solid hsl(221,14%,24%);
+      &:hover {
+        color: var(--text-header);
         border-radius: var(--border-radius);
-
-        .message {
-            border: 1px solid hsl(221,14%,24%);
-            border-radius: var(--border-radius);
-        }
-    }
-
-    .layout-vertical .card {
-        margin-bottom: 0.75em;
-    }
-
-    .message-body {
         background-color: transparent;
+      }
     }
+  }
 
-}
\ No newline at end of file
+  *[class^="highlight-"],
+  *[class*=" highlight-"] {
+    .card:hover {
+      border: 1px solid var(--highlight-color);
+    }
+  }
+
+  .tag {
+    color: var(--highlight-variant-inverted);
+  }
+
+  .card {
+    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
+    border: 1px solid hsl(221, 14%, 24%);
+    border-radius: var(--border-radius);
+
+    .message {
+      border: 1px solid hsl(221, 14%, 24%);
+      border-radius: var(--border-radius);
+    }
+  }
+
+  .layout-vertical .card {
+    margin-bottom: 0.75em;
+  }
+
+  .message-body {
+    background-color: transparent;
+  }
+}
diff --git a/src/assets/themes/walkxcode.scss b/src/assets/themes/walkxcode.scss
index 3ff0092..5ee1792 100644
--- a/src/assets/themes/walkxcode.scss
+++ b/src/assets/themes/walkxcode.scss
@@ -1,83 +1,85 @@
-
 // Theme colors
 .theme-walkxcode.light {
-    --highlight-primary: #111111;
-    --highlight-secondary: #fff5f2;
-    --highlight-hover: #bebebe;
-    --background: #fff5f2;
-    --card-background: rgba(255, 245, 242, 0.8);
-    --text: #000000;
-    --text-header: #000000;
-    --text-title: #000000;
-    --text-subtitle: #111111;
-    --card-shadow: rgba(0, 0, 0, 0.5)
-    --link: #3273dc;
-    --link-hover: #2e4053;
-    --background-image: url("assets/themes/walkxcode/wallpaper-light.webp");
+  --highlight-primary: #111111;
+  --highlight-secondary: #fff5f2;
+  --highlight-hover: #bebebe;
+  --background: #fff5f2;
+  --card-background: rgba(255, 245, 242, 0.8);
+  --text: #000000;
+  --text-header: #000000;
+  --text-title: #000000;
+  --text-subtitle: #111111;
+  --card-shadow: rgba(0, 0, 0, 0.5);
+  --link: #3273dc;
+  --link-hover: #2e4053;
+  --background-image: url("assets/themes/walkxcode/wallpaper-light.webp");
 }
 
 .theme-walkxcode.dark {
-    --highlight-primary: #3367d6;
-    --highlight-secondary: #4285f4;
-    --highlight-hover: #1F2347;
-    --background: #12152B;
-    --card-background: rgba(24, 28, 58, 0.8); 
-    --text: #eaeaea;
-    --text-header: #fafafa;
-    --text-title: #fafafa;
-    --text-subtitle: #8B8D9C;
-    --card-shadow: rgba(0, 0, 0, 0.5);
-    --link: #ffffff;
-    --link-hover: #fafafa;
-    --background-image: url("assets/themes/walkxcode/wallpaper.webp");
+  --highlight-primary: #3367d6;
+  --highlight-secondary: #4285f4;
+  --highlight-hover: #1f2347;
+  --background: #12152b;
+  --card-background: rgba(24, 28, 58, 0.8);
+  --text: #eaeaea;
+  --text-header: #fafafa;
+  --text-title: #fafafa;
+  --text-subtitle: #8b8d9c;
+  --card-shadow: rgba(0, 0, 0, 0.5);
+  --link: #ffffff;
+  --link-hover: #fafafa;
+  --background-image: url("assets/themes/walkxcode/wallpaper.webp");
 }
 
-// theme 
+// theme
 .theme-walkxcode {
-    --border-radius: 1rem;
+  --border-radius: 1rem;
 
-    #bighead {
-        .first-line, .navbar, .navbar a:focus, .navbar a:hover {
-            background-color: rgba(0, 0, 0, 0);
-        }
-        .search-bar input {
-            opacity: 20%;
-        }
+  #bighead {
+    .first-line,
+    .navbar,
+    .navbar a:focus,
+    .navbar a:hover {
+      background-color: rgba(0, 0, 0, 0);
     }
+    .search-bar input {
+      opacity: 20%;
+    }
+  }
 
-    .group-title {
-        font-weight: 800;
-    }
-    
-    .titles {
-        font-weight: 700;
-    }
-    
-    .subtitle {
-        font-weight: 500;
-    }
-    
+  .group-title {
+    font-weight: 800;
+  }
+
+  .titles {
+    font-weight: 700;
+  }
+
+  .subtitle {
+    font-weight: 500;
+  }
+
+  .card {
+    border-radius: var(--border-radius);
+  }
+
+  .layout-vertical {
     .card {
-        border-radius: var(--border-radius);
+      border-radius: 0;
     }
 
-    .layout-vertical {
-        .card {
-            border-radius: 0;
-        }
-
-        .column div:first-of-type .card {
-            border-top-left-radius: var(--border-radius);
-            border-top-right-radius: var(--border-radius);
-        }
-
-        .column div:last-child .card {
-            border-bottom-left-radius: var(--border-radius);
-            border-bottom-right-radius: var(--border-radius);
-        }
+    .column div:first-of-type .card {
+      border-top-left-radius: var(--border-radius);
+      border-top-right-radius: var(--border-radius);
     }
 
-    .tag {
-        color: var(--highlight-variant-inverted);
+    .column div:last-child .card {
+      border-bottom-left-radius: var(--border-radius);
+      border-bottom-right-radius: var(--border-radius);
     }
-}
\ No newline at end of file
+  }
+
+  .tag {
+    color: var(--highlight-variant-inverted);
+  }
+}