design optimization & bugfixes

web/css/breadcrumbs.css

@@ -326,7 +326,7 @@ pre {
         margin-bottom: 20px !important;
     }
     #ps-container {
-        background-color: var(--color-1);
+        background-color: var(--color-1-transparent);
         height: 100px !important;
         margin: auto !important;
         width: 100%;

web/css/buttons.css

@@ -71,7 +71,7 @@ button:hover {
 
 input[type="text"], textarea, input[type="password"] {
     width: 300px;
-    min-height: 46px;
+    min-height: 48px;
     padding-left: 20px;
     box-sizing: border-box;
     border: 2px solid transparent;
@@ -90,9 +90,29 @@ input[type="text"], textarea, input[type="password"] {
     border: 2px solid transparent;
     outline: 0;
     color: var(--color-text);
-    background-color: var(--color-1);
+    background-color: var(--color-1-transparent);
     font-family: 'Titillium Web', sans-serif;
-  }
+}
+
+#tune-buttons input[type="text"]:not(.no-bg):not(.no-filter)::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--color-1);
+    opacity: 0.6; /* Set the desired opacity */
+    pointer-events: none; /* Ensure it does not interfere with interactions */
+    z-index: -1; /* Place the pseudo-element behind the panel content */
+    border-radius: 15px;
+}
+
+#tune-buttons input[type="text"]:not(.no-bg):not(.no-filter) {
+    backdrop-filter: blur(5px);
+    background-attachment: fixed;
+}
+
   
   #tune-buttons button {
       box-sizing: border-box;
@@ -138,7 +158,7 @@ input[type="range"] {
 /* Track: Mozilla Firefox */
 input[type="range"]::-moz-range-track {
     height: 48px;
-    background: var(--color-1);
+    background: var(--color-1-transparent);
     border-radius: 15px;
     border: 0;
 }
@@ -190,7 +210,7 @@ input[type="range"]::-moz-range-thumb {
     padding: 0;
     cursor: pointer;
     width: 100%;
-    border-radius: 25px;
+    border-radius: 15px;
     font-weight: bold;
     background-color: var(--color-2);
 }
@@ -218,7 +238,7 @@ input[type="range"]::-moz-range-thumb {
 .toggleSwitch > span {
     position: absolute;
     left: 0;
-    width: calc(100% - 6px);
+    width: calc(100%);
     margin: 0;
     text-align: left;
     white-space: nowrap;
@@ -233,10 +253,9 @@ input[type="range"]::-moz-range-thumb {
     width: 50%;
     margin-left: 50px;
     text-align: left;
-    font-size: 0.9em;
     width: auto;
     opacity: 1;
-    width: 40%;
+    width: 50%;
     text-align: center;
     line-height:48px;
 }
@@ -251,7 +270,7 @@ input[type="range"]::-moz-range-thumb {
     left: 0;
     width: 50%;
     background-color: var(--color-4);
-    border-radius: 25px;
+    border-radius: 15px;
     -webkit-transition: all 0.2s ease-out;
     -moz-transition: all 0.2s ease-out;
     transition: all 0.2s ease-out;
@@ -285,7 +304,7 @@ input[type="range"]::-moz-range-thumb {
     transition: all 0.2s ease-out;
 }
 .toggleSwitch input:checked ~ a {
-    left: calc(50% - 3px);
+    left: calc(50%);
 }
 
 .toggleSwitch input:checked ~ span span:first-of-type {

web/css/dropdown.css

@@ -16,7 +16,7 @@
     position: absolute;
     right: 10px;
     top: 18px;
-    z-index: 100;
+    z-index: 15;
     width: 6px;
     height: 6px;
     border: 1px solid var(--color-main);
@@ -39,7 +39,12 @@
     user-select: none;
     background-color: var(--color-4);
     color: var(--color-main);
+    border-radius: 15px;
   }
+
+  .dropdown.opened > input {
+    border-radius: 0 0 15px 15px;
+  } 
   .dropdown input:focus {
     outline: none;
   }

web/css/main.css

@@ -1,8 +1,8 @@
 
 :root {
-    --color-main: rgba(32, 34, 40, 1);
-    --color-main-bright: rgba(88, 219, 171, 1);
-    --color-text: rgba(255, 255, 255, 1);
+    --color-main: rgb(32, 34, 40);
+    --color-main-bright: rgb(88, 219, 171);
+    --color-text: rgb(255, 255, 255);
     
     --color-1: color-mix(in srgb, var(--color-main) 95%, var(--color-main-bright)); /* 5% Brightness */
     --color-2: color-mix(in srgb, var(--color-main) 75%, var(--color-main-bright)); /* 25% Brightness */
@@ -10,7 +10,13 @@
     --color-4: color-mix(in srgb, var(--color-main) 20%, var(--color-main-bright)); /* 80% Brightness */
     --color-5: color-mix(in srgb, var(--color-main) 5%, var(--color-main-bright)); /* 95% Brightness */
 
-    --color-text-2: #ccc;
+    --color-1-transparent: color-mix(in srgb, var(--color-1), transparent 40%);
+    --color-2-transparent: color-mix(in srgb, var(--color-2), transparent 40%);
+    --color-3-transparent: color-mix(in srgb, var(--color-3), transparent 40%);
+    --color-4-transparent: color-mix(in srgb, var(--color-4), transparent 40%);
+    --color-5-transparent: color-mix(in srgb, var(--color-5), transparent 40%);
+    
+    --color-text-2: rgb(240,240,240);
 }
 
 * {

web/css/panels.css

@@ -1,5 +1,5 @@
 *[class^="panel-"] {
-    background-color: var(--color-1);
+    background-color: var(--color-1-transparent);
     margin-left: 10px;
     margin-right: 10px;
     border-radius: 15px;
@@ -8,6 +8,10 @@
     transition: 0.3s ease-in-out background-color;
 }
 
+*[class^="panel-"]:not(.no-bg):not(.no-filter) {
+    backdrop-filter:blur(5px);
+}
+
 .panel-10 {
     width: 10%;
 }