chore: lint the style files

src/assets/components/base.scss

@@ -2,15 +2,17 @@
 @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;
-  }
+}
 
-  @layer base {
-    html, body, body #app-mount, body #app {
+@layer base {
+  html,
+  body,
+  body #app-mount,
+  body #app {
     height: 100%;
     background-color: var(--background);
   }
@@ -282,7 +284,6 @@
       }
     }
 
-  
     .footer {
       position: fixed;
       left: 0;
@@ -364,5 +365,4 @@
   .group-logo {
     float: left;
   }
-  }
-  
+}

src/assets/components/highlights.scss

@@ -30,7 +30,8 @@
   --highlight-color: var(--highlight-variant-inverted);
 }
 
-*[class^="highlight-"], *[class*=" highlight-"] {
+*[class^="highlight-"],
+*[class*=" highlight-"] {
   i {
     color: var(--highlight-color);
   }

src/assets/components/status.scss

@@ -2,7 +2,8 @@
   font-size: 0.8rem;
   color: var(--text-title);
 
-    &.offline:before, &.error:before {
+  &.offline:before,
+  &.error:before {
     background-color: #d65c68;
     box-shadow: 0 0 5px 1px #d65c68;
     color: #d65c68;
@@ -13,7 +14,8 @@
     box-shadow: 0 0 5px 1px #e8bb7d;
   }
 
-    &.online:before, &.ready:before {
+  &.online:before,
+  &.ready:before {
     background-color: #94e185;
     box-shadow: 0 0 5px 1px #94e185;
   }
@@ -27,12 +29,14 @@
   @keyframes pulse {
     0% {
       background: rgba(255, 255, 255, 0.2);
-        box-shadow: inset 0px 0px 10px 2px rgba(0, 255, 182, 0.3),
+      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),
+      box-shadow:
+        inset 0px 0px 10px 2px rgba(0, 255, 182, 0.5),
         0px 0px 15px 2px rgba(0, 255, 135, 1);
     }
   }
@@ -45,4 +49,4 @@
     margin-right: 10px;
     border-radius: 8px;
   }
-  }
+}

src/assets/themes/classic.scss

@@ -1,4 +1,3 @@
-
 // Theme colors
 .light {
   --highlight-primary: #3367d6;
@@ -37,10 +36,10 @@
 }
 
 #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;
 }

src/assets/themes/neon.scss

@@ -1,33 +1,32 @@
-
 // Theme colors
 .theme-neon.light {
-    --highlight-primary: #B5FF57;
-    --highlight-secondary: #B5FF57;
+  --highlight-primary: #b5ff57;
+  --highlight-secondary: #b5ff57;
   --highlight-hover: #e7e4e4;
   --background: #ffffff;
   --card-background: #ffffff;
   --text: #363636;
-    --text-header: #1F2229;
+  --text-header: #1f2229;
   --text-title: #303030;
   --text-subtitle: #424242;
   --card-shadow: rgba(46, 39, 39, 0.1);
-    --link: #B5FF57;
+  --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; 
+  --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: #b5ff57;
   --link-hover: #aeff45;
   --background-image: none;
 }
@@ -57,7 +56,7 @@
       position: absolute;
       bottom: -4px;
       width: 4em;
-            height: .25rem;
+      height: 0.25rem;
       background-color: var(--highlight-primary);
       border-radius: 2px;
     }
@@ -82,7 +81,8 @@
     }
   }
 
-    *[class^="highlight-"], *[class*=" highlight-"] {
+  *[class^="highlight-"],
+  *[class*=" highlight-"] {
     .card:hover {
       border: 1px solid var(--highlight-color);
     }
@@ -93,12 +93,12 @@
   }
 
   .card {
-        box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
-        border: 1px solid hsl(221,14%,24%);
+    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: 1px solid hsl(221, 14%, 24%);
       border-radius: var(--border-radius);
     }
   }
@@ -110,5 +110,4 @@
   .message-body {
     background-color: transparent;
   }
-
 }

src/assets/themes/walkxcode.scss

@@ -1,4 +1,3 @@
-
 // Theme colors
 .theme-walkxcode.light {
   --highlight-primary: #111111;
@@ -10,7 +9,7 @@
   --text-header: #000000;
   --text-title: #000000;
   --text-subtitle: #111111;
-    --card-shadow: rgba(0, 0, 0, 0.5)
+  --card-shadow: rgba(0, 0, 0, 0.5);
   --link: #3273dc;
   --link-hover: #2e4053;
   --background-image: url("assets/themes/walkxcode/wallpaper-light.webp");
@@ -19,13 +18,13 @@
 .theme-walkxcode.dark {
   --highlight-primary: #3367d6;
   --highlight-secondary: #4285f4;
-    --highlight-hover: #1F2347;
-    --background: #12152B;
+  --highlight-hover: #1f2347;
+  --background: #12152b;
   --card-background: rgba(24, 28, 58, 0.8);
   --text: #eaeaea;
   --text-header: #fafafa;
   --text-title: #fafafa;
-    --text-subtitle: #8B8D9C;
+  --text-subtitle: #8b8d9c;
   --card-shadow: rgba(0, 0, 0, 0.5);
   --link: #ffffff;
   --link-hover: #fafafa;
@@ -37,7 +36,10 @@
   --border-radius: 1rem;
 
   #bighead {
-        .first-line, .navbar, .navbar a:focus, .navbar a:hover {
+    .first-line,
+    .navbar,
+    .navbar a:focus,
+    .navbar a:hover {
       background-color: rgba(0, 0, 0, 0);
     }
     .search-bar input {