refactor: migrate to new color syntax (#1458)

* refactor: migrate to new color syntax

* refactor: remove unnecessary commas

Author: Robot-Inventor

src/css/style.css

@@ -63,7 +63,7 @@ sbs-message {
     min-width: 15em;
     min-height: 1em;
     border-radius: 0.25em;
-    background-image: linear-gradient(90deg, transparent 40%, rgba(175, 175, 175, 0.7) 80%, transparent 100%);
+    background-image: linear-gradient(90deg, transparent 40%, rgb(175 175 175 / 0.7) 80%, transparent 100%);
     background-size: 200% 100%;
     animation: loading-animation 1.5s linear infinite;
 }

src/css/theme.css

@@ -6,7 +6,7 @@
     --md-on-surface: #36373a;
     --md-on-surface-variant: #768098;
 
-    --md-sys-color-primary: rgb(73, 113, 214);
+    --md-sys-color-primary: rgb(73 113 214);
     --md-sys-color-on-primary: var(--md-surface);
     --md-sys-color-on-surface-variant: #888;
     --md-sys-color-on-surface: #aaa;
@@ -20,7 +20,7 @@
         --md-on-surface: #ebedf2;
         --md-on-surface-variant: #a8b2c7;
 
-        --md-sys-color-primary: rgb(98, 125, 194);
+        --md-sys-color-primary: rgb(98 125 194);
         --md-sys-color-on-primary: var(--md-surface);
         --md-sys-color-on-surface-variant: #aaa;
         --md-sys-color-on-surface: #888;

src/ts/components/sbsMessage.ts

@@ -108,18 +108,18 @@ class SbsMessage extends LitElement {
         .shadowban-scanner-message md-filled-button {
             margin-top: 0.5em;
             width: 100%;
-            --md-filled-button-container-color: rgb(255, 255, 255, 0.2);
+            --md-filled-button-container-color: rgb(255 255 255 / 0.2);
             --md-ripple-hover-color: white;
             --md-ripple-pressed-color: white;
-            --_container-shadow-color: rgba(0, 0, 0, 0.3);
+            --_container-shadow-color: rgb(0 0 0 / 0.3);
         }
 
         [data-sb-translation] {
             display: inline-block;
             min-width: 15em;
             min-height: 1em;
             border-radius: 0.25em;
-            background-image: linear-gradient(90deg, transparent 40%, rgba(175, 175, 175, 0.7) 80%, transparent 100%);
+            background-image: linear-gradient(90deg, transparent 40%, rgb(175 175 175 / 0.7) 80%, transparent 100%);
             background-size: 200% 100%;
             animation: loading-animation 1.5s linear infinite;
         }