1 files changed, 58 insertions, 8 deletions

diff --git a/static/input.css b/static/input.css
index 6823898..3ab5028 100644
--- a/static/input.css
+++ b/static/input.css
@@ -27,7 +27,7 @@
     --secondary-color: var(--main-light-color);
     --interlocked-hexagons-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/olive/interlocked-hexagons.svg');
     --interlocked-hexagons-background-repeat: repeat;
-    --interlocked-hexagons-background-size: 10vw;
+    --interlocked-hexagons-background-size: 10vh;
     --squares-and-triangles-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/olive/squares-and-triangles.svg');
     --squares-and-triangles-background-repeat: repeat;
 }
@@ -43,7 +43,7 @@
     --secondary-color: var(--main-medium-color);
     --interlocked-hexagons-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/lettuce/interlocked-hexagons.svg');
     --interlocked-hexagons-background-repeat: repeat;
-    --interlocked-hexagons-background-size: 10vw;
+    --interlocked-hexagons-background-size: 10vh;
     --squares-and-triangles-background: url('https://f003.backblazeb2.com/file/sayana-static/themes/lettuce/squares-and-triangles.svg');
     --squares-and-triangles-background-repeat: repeat;
 }
@@ -124,13 +124,21 @@
     background-size: 10vw;
 }
 
+body:has(.lg-container:not([class~="lg-inline"])) .desktop-sidebar-custom {
+    display: none !important;
+}
+
 .mobile-topbar-custom {
     width: 90vw;
-    height: 10vh;
-    background-size: 20vh;
+    height: 8%;
+    background-size: 16vh;
     margin-left: 5vw;
 }
 
+body:has(.lg-container:not([class~="lg-inline"])) .mobile-topbar-custom {
+    display: none !important;
+}
+
 .logo-custom {
     width: 3.5vw;
     height: 20vw;
@@ -227,14 +235,26 @@
     width: 90vw;
 }
 
+.w-p60 {
+    width: 60%;
+}
+
 .w-p80 {
     width: 80%;
 }
 
+.w-p100 {
+    width: 100%;
+}
+
 .w-vmax4 {
     width: 4vmax;
 }
 
+.h-vh40 {
+    height: 40vh;
+}
+
 .h-vh90 {
     height: 90vh;
 }
@@ -288,6 +308,10 @@
     padding-right: 1.2vmin;
 }
 
+.p-vmin0-8 {
+    padding: 0.8vmin;
+}
+
 .p-vmin2-4 {
     padding: 2.4vmin;
 }
@@ -298,10 +322,18 @@
 
 .lg-backdrop {
     background-color: var(--background-light-color);
+    opacity: 0.8 !important;
+}
+
+.lg-container:not([class~="lg-inline"]) .lg-outer {
+    width: 90%;
+    height: 90%;
+    margin: 5vh 5vw;
 }
 
 .lg-thumb-outer {
     background-color: var(--background-light-color) !important;
+    opacity: 0.8 !important;
 }
 
 .lg-prev {
@@ -322,6 +354,19 @@
     height: 1vmax;
 }
 
+.lg-container:not([class~="lg-inline"]) .lg-counter {
+    font-size: 2vmax;
+    height: 2vmax;
+}
+
+.lg-content {
+    top: 3vmax !important;
+}
+
+.lg-container:not([class~="lg-inline"]) .lg-content {
+    top: 4vmax !important;
+}
+
 .lg-toolbar .lg-icon {
     padding: 0 0.7vmax;
     font-size: 1.5vmax !important;
@@ -330,6 +375,11 @@
     color: var(--main-dark-color);
 }
 
+.lg-container:not([class~="lg-inline"]) .lg-toolbar .lg-icon {
+    font-size: 3vmax !important;
+    height: 3vmax;
+}
+
 .lg-toolbar .lg-icon:hover {
     color: var(--main-medium-color);
 }
@@ -415,16 +465,16 @@
     }
 
     .nav-icon-custom {
-        font-size: 6vh !important;
+        font-size: 5vh !important;
         -webkit-text-stroke: 0.1vh var(--sidebar-stroke-color);
-        width: 10vh;
-        height: 10vh;
+        width: 8vh;
+        height: 8vh;
         align-content: center;
         text-align: center;
     }
 
     .nav-icon-custom:hover {
-        font-size: 8vh;
+        font-size: 7vh;
     }
 
     .bg-pattern-body {