Switch to CSS vars for variables

gallery/themes/default/components/image-view/background.sass

@@ -6,11 +6,10 @@
     top: 0
     left: 0
 
-    background-color: $white
-
-    background-image: linear-gradient(to right, darken($white, 1%) 15%, darken($white, 10%) 35%, darken($white, 1%) 50%)
-    background-size: 1000px 640px
-    animation: imgLoading 1.8s linear infinite forwards
+    background-color: RGB($fg-white)
+    // background-image: linear-gradient(to right, RGB($bg-200) 15%, RGB($bg-400) 35%, RGB($bg-200) 50%)
+    // background-size: 1000px 640px
+    // animation: imgLoading 1.8s linear infinite forwards
 
     user-select: none
     overflow: hidden
@@ -24,7 +23,7 @@
         width: 100%
         height: 100%
 
-        background-color: $white
+        background-color: RGB($fg-white)
 
         filter: blur(1rem)
         transform: scale(1.1)

gallery/themes/default/components/image-view/fullscreen.sass

@@ -13,7 +13,7 @@
     display: none
     opacity: 0 // hide
 
-    background-color: rgba($black, 0.8)
+    background-color: $bg-transparent
     z-index: 21
 
     box-sizing: border-box

gallery/themes/default/components/image-view/info-tab.sass

@@ -4,9 +4,9 @@
 
     display: flex
     flex-direction: column
-    gap: 0.5rem
+    gap: 0
 
-    background-color: $black
+    background-color: RGB($bg-100)
 
     overflow-y: auto
 
@@ -19,7 +19,7 @@
 
     position: relative
 
-    background-color: $black
+    background-color: RGB($bg-100)
     border-radius: $rad
 
     transition: max-height 0.3s cubic-bezier(.79, .14, .15, .86)
@@ -42,7 +42,7 @@
     top: 0.6rem
     right: 0.6rem
 
-    color: $primary
+    color: RGB($primary)
 
     z-index: +2
 
@@ -65,8 +65,6 @@
     top: 0
     z-index: +1
 
-    background: $black2
-
     svg
         margin: 0
         padding: 0
@@ -74,16 +72,16 @@
         width: 1.25rem
         height: 1.25rem
 
-        fill: $primary
+        fill: RGB($primary)
 
     h2
         margin: 0
         padding: 0
 
-        font-size: 1.25rem
+        font-size: 1.1rem
         font-weight: 600
 
-        color: $primary
+        color: RGB($primary)
 
         text-overflow: ellipsis
         overflow: hidden
@@ -96,12 +94,10 @@
     flex-direction: column
     gap: 1rem
 
-    color: $white
+    color: RGB($fg-white)
 
     overflow-x: hidden
 
-    transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
-
     p
         margin: 0
         padding: 0
@@ -181,10 +177,14 @@
         align-items: center
 
         border-radius: 50%
-        // border: 1px solid $white
+        border: 1px solid RGB($white)
 
 .img-groups
     width: 100%
 
     display: flex
-    gap: 0.5rem
+    gap: 0.5rem
+
+@media (max-width: 1100px)
+    .info-container
+        gap: 0.5rem