Switch to CSS vars for variables

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