css formatting

static/css/black.css

@@ -30,7 +30,7 @@
     --green: #31b06e;
 
     --search-button: #BABCBE;
-    
+
     --image-view: #161616;
     --image-view-titlebar: #161616;
     --view-image-color: #000000;
@@ -38,7 +38,7 @@
     --fff: #fff;
 
     --publish-info: #7f869e;
-    
+
     color-scheme: dark;
 }
 
@@ -71,4 +71,4 @@
 
 .view-image-search:hover {
     box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-}
+}

static/css/dark.css

@@ -30,7 +30,7 @@
     --green: #31b06e;
 
     --search-button: #BABCBE;
-    
+
     --image-view: #161616;
     --image-view-titlebar: #161616;
     --view-image-color: #000000;
@@ -38,7 +38,7 @@
     --fff: #fff;
 
     --publish-info: #7f869e;
-    
+
     color-scheme: dark;
 }
 
@@ -71,4 +71,4 @@
 
 .view-image-search:hover {
     box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-}
+}

static/css/latte.css

@@ -25,7 +25,7 @@
     --base: #1e1e2e;
     --mantle: #181825;
     --crust: #11111b;
-    
+
     --html-bg: var(--base);
     --font-fg: var(--text);
     --fg: var(--subtext0);
@@ -53,7 +53,7 @@
     --highlight: var(--subtext1);
 
     --search-button: var(--subtext0);
-    
+
     --image-view: var(--mantle);
     --image-view-titlebar: var(--mantle);
     --view-image-color: var(--crust);
@@ -61,7 +61,7 @@
     --fff: var(--text);
 
     --publish-info: var(--overlay2);
-    
+
     color-scheme: dark;
 }
 
@@ -94,4 +94,4 @@
 
 .view-image-search:hover {
     box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-}
+}

static/css/light.css

@@ -28,7 +28,7 @@
     --blue: #4285f4;
 
     --green: #202124;
-    
+
     --image-view: #ffffff;
     --image-view-titlebar: #ffffff;
     --view-image-color: #f1f3f4;
@@ -69,4 +69,4 @@
 .view-image-search:hover {
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08) !important;
     transition: all 0.3s cubic-bezier(.25, .8, .25, 1) !important;
-}
+}

static/css/mocha.css

@@ -25,7 +25,7 @@
     --base: #eff1f5;
     --mantle: #e6e9ef;
     --crust: #dce0e8;
-    
+
     --html-bg: var(--base);
     --font-fg: var(--text);
     --fg: var(--subtext0);
@@ -56,7 +56,7 @@
     --green: var(--green);
 
     --search-button: var(--subtext0);
-    
+
     --image-view: var(--mantle);
     --image-view-titlebar: var(--mantle);
     --view-image-color: var(--crust);
@@ -64,7 +64,7 @@
     --fff: var(--text);
 
     --publish-info: var(--overlay2);
-    
+
     color-scheme: light;
 }
 
@@ -97,4 +97,4 @@
 
 .view-image-search:hover {
     box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12);
-}
+}

static/css/night.css

@@ -28,7 +28,7 @@
     --blue: #8ab4f8;
 
     --green: #31b06e;
-    
+
     --image-view: #0c0d0f;
     --image-view-titlebar: #0c0d0f;
     --view-image-color: #000000;
@@ -38,7 +38,7 @@
     --search-button: #BABCBE;
 
     --publish-info: #7f869e;
-    
+
     color-scheme: dark;
 }
 
@@ -71,4 +71,4 @@
 
 .view-image-search:hover {
     box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-}
+}

static/css/style-fixedwidth.css

@@ -1,7 +1,10 @@
 /* Ensure the body width is fixed and prevents resizing by the user */
 body {
-    overflow-x: hidden;   /* Prevent horizontal scrolling by user */
+    overflow-x: hidden;
-    width: 100vw;         /* Fix the width of the viewport */
+    /* Prevent horizontal scrolling by user */
-    max-width: 100vw;     /* Prevent page from extending wider than the viewport */
+    width: 100vw;
+    /* Fix the width of the viewport */
+    max-width: 100vw;
+    /* Prevent page from extending wider than the viewport */
     box-sizing: border-box;
 }

static/css/style-imageloading.css

@@ -3,12 +3,10 @@
     position: relative;
     overflow: hidden;
     background-color: var(--snip-background);
-    background-image: linear-gradient(
+    background-image: linear-gradient(90deg,
-        90deg,
+            rgba(255, 255, 255, 0) 25%,
-        rgba(255, 255, 255, 0) 25%,
+            rgba(255, 255, 255, 0.15) 50%,
-        rgba(255, 255, 255, 0.15) 50%,
+            rgba(255, 255, 255, 0) 75%);
-        rgba(255, 255, 255, 0) 75%
-    );
     background-size: 200% 100%;
     animation: image-wave 2s infinite linear;
 }
@@ -33,12 +31,10 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(
+    background: linear-gradient(90deg,
-        90deg,
+            transparent 25%,
-        transparent 25%,
+            rgba(255, 255, 255, 0.25) 50%,
-        rgba(255, 255, 255, 0.25) 50%,
+            transparent 75%);
-        transparent 75%
-    );
     background-size: 200% 100%;
     animation: title-wave 2.5s infinite linear;
 }
@@ -46,18 +42,24 @@
 /* Animations */
 @keyframes image-wave {
     0% {
-        background-position: -100% 0; /* Start off-screen left */
+        background-position: -100% 0;
+        /* Start off-screen left */
     }
+
     100% {
-        background-position: 100% 0; /* End off-screen right */
+        background-position: 100% 0;
+        /* End off-screen right */
     }
 }
 
 @keyframes title-wave {
     0% {
-        background-position: -100% 0; /* Start off-screen left */
+        background-position: -100% 0;
+        /* Start off-screen left */
     }
+
     100% {
-        background-position: 100% 0; /* End off-screen right */
+        background-position: 100% 0;
+        /* End off-screen right */
     }
-}
+}

static/css/style-imageviewer.css

@@ -1,12 +1,15 @@
 /* Image Viewer Overlay */
 #image-viewer-overlay {
     position: fixed;
-    top: 105px; 
+    top: 105px;
     right: 0;
-    width: 33%; /* Occupies the right space for the viewer */
+    width: 33%;
-    height: calc(100% - 105px); /* Adjust height */
+    /* Occupies the right space for the viewer */
+    height: calc(100% - 105px);
+    /* Adjust height */
     z-index: 999;
-    display: none; /* Initially hidden */
+    display: none;
+    /* Initially hidden */
 
     /* Added transition for opening animation */
     /* transform: translateX(100%);
@@ -18,8 +21,10 @@
     position: fixed;
     top: 105px;
     right: 0;
-    width: 33%; /* Match the width of the overlay */
+    width: 33%;
-    height: calc(100% - 105px); /* Adjust height */
+    /* Match the width of the overlay */
+    height: calc(100% - 105px);
+    /* Adjust height */
     background: var(--search-bg);
     padding: 20px;
     box-sizing: border-box;
@@ -58,7 +63,8 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 5px; /* Add spacing between buttons */
+    gap: 5px;
+    /* Add spacing between buttons */
 }
 
 #viewer-close-button,
@@ -86,7 +92,8 @@
 
 /* Adjust the images container when the viewer is visible */
 .images {
-    margin-right: 33%; /* Reserve space for the image viewer */
+    margin-right: 33%;
+    /* Reserve space for the image viewer */
 }
 
 /* Clickable Elements */
@@ -179,6 +186,7 @@
     }
 
     .images {
-        margin-right: 0; /* No reserved space on smaller screens */
+        margin-right: 0;
+        /* No reserved space on smaller screens */
     }
-}
+}

static/css/style-loadingcircle.css

@@ -6,7 +6,8 @@
 }
 
 .favicon-wrapper.loading img {
-    visibility: hidden; /* hide placeholder */
+    visibility: hidden;
+    /* hide placeholder */
 }
 
 .favicon-wrapper.loading::after {
@@ -28,4 +29,4 @@
     to {
         transform: rotate(360deg);
     }
-}
+}

static/css/style-loadingindicator.css

@@ -24,21 +24,28 @@
 }
 
 @keyframes bounce {
-    0%, 100% {
+
+    0%,
+    100% {
         transform: translateY(0);
     }
+
     30% {
         transform: translateY(-10px);
     }
+
     50% {
         transform: translateY(0);
     }
+
     70% {
         transform: translateY(-5px);
     }
+
     85% {
         transform: translateY(0);
     }
+
     95% {
         transform: translateY(-2px);
     }
@@ -52,9 +59,11 @@
 .dot:nth-child(2) {
     animation-delay: 0.1s;
 }
+
 .dot:nth-child(3) {
     animation-delay: 0.2s;
 }
+
 .dot:nth-child(4) {
     animation-delay: 0.3s;
-}
+}

static/css/style-menu.css

@@ -165,37 +165,45 @@
 
     /* Spacing & sizing */
     padding: 32px;
-    max-width: 600px; /* Increased width */
+    max-width: 600px;
-    max-height: 80vh; /* Optional: restrict height to 80% of viewport */
+    /* Increased width */
-    overflow-y: auto; /* Enable scrolling if content exceeds height */
+    max-height: 80vh;
+    /* Optional: restrict height to 80% of viewport */
+    overflow-y: auto;
+    /* Enable scrolling if content exceeds height */
     color: var(--font-fg);
 }
 
 #aboutQGatoModal #close-button {
     position: absolute;
     top: 12px;
-    right: 12px; /* Moved close button to top-right */
+    right: 12px;
+    /* Moved close button to top-right */
 }
 
 #aboutQGatoModal .modal-content {
     text-align: center;
-    margin-top: 20px; /* Adjusted spacing */
+    margin-top: 20px;
+    /* Adjusted spacing */
 }
 
 /* Logo */
 #aboutQGatoModal .modal-content img {
-    width: 100px; /* Increased logo size */
+    width: 100px;
+    /* Increased logo size */
     margin-bottom: 16px;
 }
 
 /* Headings, paragraphs, etc. */
 #aboutQGatoModal .modal-content h2 {
-    font-size: 2rem; /* Larger heading */
+    font-size: 2rem;
+    /* Larger heading */
     margin: 8px 0;
 }
 
 #aboutQGatoModal .modal-content p {
-    font-size: 1.1rem; /* Larger paragraph text */
+    font-size: 1.1rem;
+    /* Larger paragraph text */
     margin: 12px 0;
 }
 
@@ -213,8 +221,10 @@
     color: var(--font-fg);
     border: 1px solid var(--border);
     border-radius: 6px;
-    padding: 12px 16px; /* Larger button padding */
+    padding: 12px 16px;
-    font-size: 1rem; /* Larger button text */
+    /* Larger button padding */
+    font-size: 1rem;
+    /* Larger button text */
     cursor: pointer;
     transition: border 0.3s ease, background-color 0.3s ease, color 0.3s ease;
 }
@@ -225,7 +235,8 @@
 
 /* Close Button Style */
 .cloase-btn {
-    font-size: 1.5rem; /* Larger close button */
+    font-size: 1.5rem;
+    /* Larger close button */
     color: var(--search-button);
     border-radius: 50%;
     padding: 8px;

static/css/style-music.css

@@ -94,11 +94,11 @@
     .music-thumbnail {
         flex-basis: 120px;
     }
-    
+
     .music-title {
         font-size: 16px;
     }
-    
+
     .music-meta {
         font-size: 13px;
         gap: 6px;
@@ -109,7 +109,7 @@
     .music-thumbnail {
         flex-basis: 100px;
     }
-    
+
     .duration-overlay {
         font-size: 11px;
         padding: 3px 6px;

static/css/style-privacy.css

@@ -92,4 +92,4 @@
 .privacy-section .cookie-table {
     margin-left: auto;
     margin-right: auto;
-}
+}

static/css/style-search.css

@@ -1,5 +1,6 @@
 /* General Styles */
-body, html {
+body,
+html {
     margin: 0;
     padding: 0;
     background-color: var(--html-bg);
@@ -8,7 +9,8 @@ body, html {
     color: var(--text-color);
 }
 
-button, p {
+button,
+p {
     font-family: 'Inter', Arial, Helvetica, sans-serif;
     font-weight: 400;
 }
@@ -101,13 +103,15 @@ body.menu-open {
     text-align: left;
     width: 100%;
     position: absolute;
-    left: -1px; /* this is so curesed */
+    left: -1px;
+    /* this is so curesed */
     top: 100%;
     background-color: var(--search-bg-input);
     border-bottom-left-radius: 22px;
     border-bottom-right-radius: 22px;
     border: 1px solid var(--search-bg-input-border);
-    border-top: none; /* No top border to avoid double borders with the input */
+    border-top: none;
+    /* No top border to avoid double borders with the input */
     z-index: 900;
 }
 
@@ -159,8 +163,10 @@ body.menu-open {
     text-align: center;
     display: flex;
     flex-direction: column;
-    justify-content: center; /* Center vertically */
+    justify-content: center;
-    height: 100vh; /* Make it full viewport height */
+    /* Center vertically */
+    height: 100vh;
+    /* Make it full viewport height */
 }
 
 /* Search Type Icons */
@@ -171,7 +177,8 @@ body.menu-open {
     margin-top: 30px;
     gap: 20px;
     /* Allow transform movement */
-    transition: transform 0.3s ease; /* Smooth movement when suggestions appear */
+    transition: transform 0.3s ease;
+    /* Smooth movement when suggestions appear */
     position: relative;
 }
 
@@ -242,7 +249,8 @@ body.menu-open {
     z-index: 999;
     width: 50px;
     height: 50px;
-    font-size: 36px; /* Not working */
+    font-size: 36px;
+    /* Not working */
 }
 
 .side-nav .closebtn:hover {
@@ -259,11 +267,13 @@ body.menu-open {
     right: 0;
     background-color: var(--html-bg);
     overflow-x: hidden;
-    transition: width 0.4s ease-in-out; /* Does this even change anything? cant really tell */
+    transition: width 0.4s ease-in-out;
+    /* Does this even change anything? cant really tell */
     z-index: 1000;
-    box-shadow: -2px 0 5px rgba(0,0,0,0.5);
+    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
     padding-top: 70px;
-    overflow-x: hidden; /* Prevents horizontal overflow */
+    overflow-x: hidden;
+    /* Prevents horizontal overflow */
 }
 
 .side-nav:hover .closebtn:hover {
@@ -322,7 +332,7 @@ body.menu-open::before {
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0,0,0,0.5);
+    background: rgba(0, 0, 0, 0.5);
     z-index: 998;
 }
 
@@ -337,11 +347,13 @@ body.menu-open::before {
     .wrapper {
         width: 90%;
     }
+
     .logo-container svg {
         width: 75%;
         max-width: 90%;
         min-width: 25%;
     }
+
     .side-nav {
         max-width: 90%;
     }
@@ -378,7 +390,8 @@ p {
     line-height: 1.58;
 }
 
-input, button {
+input,
+button {
     outline: none;
 }
 
@@ -387,11 +400,14 @@ body.menu-open {
 }
 
 /* Prevent horizontal scrolling on the page */
-html, body {
+html,
-    overflow-x: hidden;  /* Disables horizontal scrollbar */
+body {
+    overflow-x: hidden;
+    /* Disables horizontal scrollbar */
     margin: 0;
     padding: 0;
-    max-width: 100vw;  /* Limits content to viewport width */
+    max-width: 100vw;
+    /* Limits content to viewport width */
 }
 
 /* 
@@ -400,4 +416,4 @@ html, body {
     outline: none;
     border: 1px solid var(--font-fg);
     box-shadow: none;
-} */
+} */

static/css/style-settings.css

@@ -16,7 +16,8 @@
     width: 48%;
     margin-bottom: 10px;
     height: 150px;
-    position: relative; /* Make it possible to position the tooltip */
+    position: relative;
+    /* Make it possible to position the tooltip */
 }
 
 .theme-link img {
@@ -33,12 +34,15 @@
 } */
 
 .theme-tooltip {
-    display: none; /* Hidden by default */
+    display: none;
+    /* Hidden by default */
     position: absolute;
-    bottom: 10px; /* Position at the bottom of the image */
+    bottom: 10px;
+    /* Position at the bottom of the image */
     left: 50%;
     transform: translateX(-50%);
-    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
+    background-color: rgba(0, 0, 0, 0.7);
+    /* Semi-transparent background */
     color: #fff;
     padding: 5px 10px;
     border-radius: 4px;
@@ -47,7 +51,8 @@
 }
 
 .theme-link:hover .theme-tooltip {
-    display: block; /* Show tooltip on hover */
+    display: block;
+    /* Show tooltip on hover */
 }
 
 .themes-settings-menu {
@@ -62,7 +67,7 @@
 }
 
 #searchLanguageSelect,
-#safeSearchSelect, 
+#safeSearchSelect,
 #siteLanguageSelect {
     border-radius: 4px;
     padding: 6px;
@@ -75,11 +80,12 @@
     cursor: pointer;
     transition: all 0.3s ease;
     text-align: center;
-    box-sizing: border-box; /* Ensures consistent width with padding */
+    box-sizing: border-box;
+    /* Ensures consistent width with padding */
 }
 
 #searchLanguageSelect:hover,
-#safeSearchSelect:hover, 
+#safeSearchSelect:hover,
 #siteLanguageSelect:hover {
     border: 1px solid #5f6368;
     /* background-color: var(--button-hover); */
@@ -88,7 +94,7 @@
 .save.save-settings-page {
     padding: 6px;
     width: 160px;
-    height: 40px; 
+    height: 40px;
 }
 
 /* Ensure correct alignment */
@@ -98,9 +104,9 @@
     justify-content: space-between;
 }
 
-.settings-row select, 
+.settings-row select,
 .settings-row button {
     width: 160px;
     height: 40px;
     box-sizing: border-box;
-}
+}