From d20f855681d688853aeb550198d07c7d78a5b274 Mon Sep 17 00:00:00 2001
From: EKNr1 <emil@i21k.de>
Date: Sun, 1 Dec 2024 19:29:26 +0100
Subject: [PATCH] Improved website style.

---
 file_viewer.php        |  6 +++---
 file_viewer_styles.css | 11 +++++++----
 index.php              |  1 -
 styles.php             | 35 ++++++++++++++++++++++++++++++-----
 4 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/file_viewer.php b/file_viewer.php
index e80bdda..d6cfebf 100644
--- a/file_viewer.php
+++ b/file_viewer.php
@@ -38,11 +38,11 @@
         echo "      #input_$useableName:checked + .submenu_$useableName,
       .submenu_$useableName:hover {
           display: block;
-          background-color: $randomColor, 0.2);
+          background-color: $randomColor, 0.5);
       }
 
       .label_$useableName {
-          background-color: $randomColor, 0.2);
+          background-color: $randomColor, 0.5);
       }\n\n";
 
         generateCSSCode($filename);
@@ -60,7 +60,7 @@
           $folderName = end($pathFragments);
           echo "        $indentation<label for='input_$useableName' class='inout hcb-label label_$useableName'>$folderName</label>
         $indentation<input type='checkbox' id='input_$useableName' class='hacked-checkbox'>
-        $indentation<div class='glass inset submenu submenu_$useableName' id='submenu_$useableName'>\n";
+        $indentation<div class='inset submenu submenu_$useableName' id='submenu_$useableName'>\n";
 
           if (file_exists("$path/README.txt")) {  // show description text if there is a README.txt
             echo "          $indentation<p class='tiny-text'>Beschreibung:</p>\n";
diff --git a/file_viewer_styles.css b/file_viewer_styles.css
index 00e727e..5c1296c 100644
--- a/file_viewer_styles.css
+++ b/file_viewer_styles.css
@@ -1,9 +1,11 @@
 .submenu {
     display: none;
-    margin: 8px 0px 0px;
-    padding: 16px 0px 0px 16px;
+    margin: 0px 16px 0px 16px;
     border: 2px solid rgba(255, 255, 255, 0.3);
-    background-color: rgba(46, 46, 46, 0.5)
+    border-radius: 0px 16px 16px 16px;
+    background-color: rgba(46, 46, 46, 0.5);
+    mix-blend-mode: color;
+    backdrop-filter: none;
 }
 
 .submenu:target {
@@ -22,8 +24,9 @@
 
 .hcb-label {
     padding: 8px 16px;
-    margin: 16px;
+    margin: 16px 0px 0px 16px;
     cursor: pointer;
     border-radius: 16px 16px 0px 0px;
     border: 2px solid rgba(255, 255, 255, 0.3);
+    display: inline-block;
 }
\ No newline at end of file
diff --git a/index.php b/index.php
index ac066cf..65d5e4f 100644
--- a/index.php
+++ b/index.php
@@ -131,7 +131,6 @@ echo "    </style>";
           Evtl. könnt ihr hier etwas brauchbares finden.
         </p>
         <div class="glass inset">
-          <br>
 
 <?= generateSubmenusHTML(completeScanDir("files"), "  ") ?>
 
diff --git a/styles.php b/styles.php
index f256740..4625b7b 100644
--- a/styles.php
+++ b/styles.php
@@ -51,7 +51,14 @@ hr {
     background-attachment: fixed;
     background-size: cover;
     border-radius: 16px;
-    padding: 10px;
+    padding: 16px;
+    margin: 0px;
+    position: fixed;
+    overflow: auto;
+    top: 16px;
+    right: 16px;
+    bottom: 16px;
+    left: 16px;
 }
 
 .text-background {
@@ -62,10 +69,11 @@ hr {
 .topnav {
     background-color: rgba(51, 51, 51, 0.863);
     overflow: hidden;
-    width: 100%;
     position: fixed;
-    top: 8px;
-    border-radius: 16px 0px;
+    top: 16px;
+    left: 16px;
+    right: 16px;
+    border-radius: 16px 16px 0px 0px;
 }
 
 .topnav-inactive {
@@ -161,7 +169,7 @@ hr {
 }
 
 .glass {
-    backdrop-filter: blur(8px);
+    backdrop-filter: blur(16px);
     border-radius: 16px;
     margin: 32px 16px 64px;
 }
@@ -271,4 +279,21 @@ hr {
     font-size: 16px;
     text-align: center;
     font-weight: bold;
+}
+
+::-webkit-scrollbar {
+  width: 16px;
+}
+
+::-webkit-scrollbar-track {
+    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2) inset,
+    -4px -4px 4px rgba(255, 255, 255, 0.2) inset;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0px 16px 16px 0px;
+}
+
+::-webkit-scrollbar-thumb {
+    backdrop-filter: blur(16px);
+    border-radius: 0px 16px 16px 0px;
+    background-color: rgba(4, 170, 109, 0.4);
 }
\ No newline at end of file