fuck y'all im making the clickgui less easy to see

larryngton2 · Dec 13, 2024 · bdd83aa · bdd83aa
1 parent 1f036c3
commit bdd83aa
Show file tree

Hide file tree

Showing 27 changed files with 111 additions and 107 deletions.
diff --git a/src/colors.scss b/src/colors.scss
@@ -21,6 +21,7 @@ $opacity: 0.45;
 $border-thing: 1px solid rgba(white, 0.15);
 
 $primary-shadow: 0 0 50px 0 rgba(black, 0.5);
+$soft-shadow: 0 0 20px 0 rgba(black, 0.15);
 $text-shadow: 0 0 50px rgba(black, 1);
 $arraylist-shadow-color: black;
 
@@ -33,4 +34,6 @@ $arraylist-tag-color: #AAAAAA;
 $shaderfix-color: rgba(black, 0.1); // idk why someone would fucking want this, but sure
 $fade-color: black;
 
-$clickgui-grid-color: rgba(75, 75, 75, 0.25);
+$clickgui-grid-color: rgba(75, 75, 75, 0.25);
+$setting-color: rgba(#2f2f2f, 0.4);
+$setting-background-color: rgba(#2f2f2f, 0.15);
diff --git a/src/routes/clickgui/ClickGui.svelte b/src/routes/clickgui/ClickGui.svelte
@@ -97,7 +97,7 @@
   $GRID_SIZE: 10px;
 
   .background {
-    background-color: rgba(black, 0.45);
+    background-color: rgba($background-color, 0.45);
     position: absolute;
     left: 0;
     top: 0;

diff --git a/src/routes/clickgui/Module.svelte b/src/routes/clickgui/Module.svelte
@@ -176,7 +176,7 @@
         }
 
         .settings {
-            background-color: rgba($background-color, 0.3);
+            background-color: $setting-background-color;
             padding: 0 11px 0 7px;
         }
 

diff --git a/src/routes/clickgui/setting/BindSetting.svelte b/src/routes/clickgui/setting/BindSetting.svelte
@@ -122,8 +122,9 @@
     }
 
     .change-bind {
-        background-color: transparent;
-        border: solid 1px $accent-color;
+        //border: solid 1px rgba(white, 0.1);
+        background-color: $setting-color;
+        border: none;
         border-radius: 6px;
         cursor: pointer;
         padding: 4px;

diff --git a/src/routes/clickgui/setting/ChoiceSetting.svelte b/src/routes/clickgui/setting/ChoiceSetting.svelte
@@ -106,12 +106,16 @@
             }
 
             &.expanded {
-                margin-bottom: 10px;
+                margin-bottom: 7px;
             }
         }
     }
+
     .nested-settings {
-        border-left: solid 2px $accent-color;
-        padding-left: 7px;
+        border: solid 1px rgba(#2f2f2f, 0.5);
+        background-color: rgba(black, 0.2);
+        border-radius: 6px;
+        padding: 7px;
+        box-shadow: $soft-shadow;
     }
 </style>
diff --git a/src/routes/clickgui/setting/ConfigurableSetting.svelte b/src/routes/clickgui/setting/ConfigurableSetting.svelte
@@ -89,7 +89,10 @@
   }
 
   .nested-settings {
-    border-left: solid 2px $accent-color;
-    padding-left: 7px;
+        border: solid 1px rgba(#2f2f2f, 0.5);
+        background-color: rgba(black, 0.2);
+        border-radius: 6px;
+        padding: 7px;
+        box-shadow: $soft-shadow;
   }
 </style>
diff --git a/src/routes/clickgui/setting/KeySetting.svelte b/src/routes/clickgui/setting/KeySetting.svelte
@@ -95,7 +95,7 @@
 
     .change-bind {
         background-color: transparent;
-        border: solid 2px $accent-color;
+        border: solid 2px $setting-color;
         border-radius: 3px;
         cursor: pointer;
         padding: 4px;

diff --git a/src/routes/clickgui/setting/TextArraySetting.svelte b/src/routes/clickgui/setting/TextArraySetting.svelte
@@ -102,16 +102,17 @@
     font-family: monospace;
     font-size: 12px;
     color: $text-color;
-    background-color: rgba($accent-color, 0.7);
+    background-color: $setting-color;
     border: none;
     padding: 6px 10px;
     border-radius: 6px;
     width: 100%;
     cursor: pointer;
     transition: ease background-color 0.15s;
+    //border: solid 1px rgba(white, 0.1);
 
     &:hover {
-      background-color: darken(desaturate($accent-color, 30%), 10%);
+      background-color: darken(desaturate($setting-color, 30%), 10%);
     }
   }
 
@@ -122,10 +123,11 @@
     font-size: 12px;
     color: $text-color;
     border: none;
-    border-bottom: solid 2px $accent-color;
+    border-bottom: solid 2px $setting-color;
     padding: 6px;
     border-radius: 6px;
     transition: ease border-color 0.2s;
+    //border: solid 1px rgba(white, 0.1);
 
     &::-webkit-scrollbar {
       background-color: transparent;

diff --git a/src/routes/clickgui/setting/TextSetting.svelte b/src/routes/clickgui/setting/TextSetting.svelte
@@ -57,10 +57,11 @@
     font-size: 12px;
     color: $text-color;
     border: none;
-    border-bottom: solid 2px $accent-color;
+    border-bottom: solid 2px $setting-color;
     padding: 5px;
     border-radius: 6px;
     transition: ease border-color 0.2s;
+    //border: solid 1px rgba(white, 0.1);
 
     &::-webkit-scrollbar {
       background-color: transparent;

diff --git a/src/routes/clickgui/setting/TogglableSetting.svelte b/src/routes/clickgui/setting/TogglableSetting.svelte
@@ -109,7 +109,10 @@
     }
 
     .nested-settings {
-        border-left: solid 2px $accent-color;
-        padding-left: 7px;
+        border: solid 1px rgba(#2f2f2f, 0.5);
+        background-color: rgba(black, 0.2);
+        border-radius: 6px;
+        padding: 7px;
+        box-shadow: $soft-shadow;
     }
 </style>
diff --git a/src/routes/clickgui/setting/VectorSetting.svelte b/src/routes/clickgui/setting/VectorSetting.svelte
@@ -98,7 +98,7 @@
       font-size: 12px;
       color: $text-color;
       border: none;
-      border-bottom: solid 2px $accent-color;
+      border-bottom: solid 2px $setting-color;
       padding: 5px;
       border-radius: 3px;
       transition: ease border-color 0.2s;

diff --git a/src/routes/clickgui/setting/common/Dropdown.svelte b/src/routes/clickgui/setting/common/Dropdown.svelte
@@ -4,6 +4,8 @@
     convertToSpacedString,
     spaceSeperatedNames,
   } from "../../../../theme/theme_config";
+  import { fade } from "svelte/transition";
+  import { quintOut } from "svelte/easing";
 
   export let name: string | null;
   export let options: string[];
@@ -31,6 +33,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="dropdown" class:expanded on:click={() => (expanded = !expanded)}>
   <div class="head" bind:this={dropdownHead}>
+    <div class="box" />
     {#if name !== null}
       <span class="text"
         >{name} &bull; {$spaceSeperatedNames
@@ -43,7 +46,10 @@
   </div>
 
   {#if expanded}
-    <div class="options">
+    <div
+      class="options"
+      transition:fade|global={{ duration: 150, easing: quintOut }}
+    >
       {#each options as o}
         <div
           class="option"
@@ -68,22 +74,30 @@
         transform: translateY(-50%) rotate(0);
         opacity: 1;
       }
-
-      .head {
-        border-radius: 3px 3px 0 0;
-      }
     }
   }
 
   .head {
-    background-color: $accent-color;
+    background-color: $setting-color;
     padding: 6px 10px;
     cursor: pointer;
     display: flex;
     align-items: center;
     position: relative;
     border-radius: 6px;
     transition: ease border-radius 0.2s;
+    max-width: 210px;
+    //border: solid 1px rgba(white, 0.1);
+
+    .box {
+      position: absolute;
+      right: 5px;
+      background-color: rgba(black, 0.25);
+      width: 20px;
+      height: 20px;
+      border-radius: 6px;
+      //border: solid 1px rgba(white, 0.1);
+    }
 
     .text {
       font-weight: 500;
@@ -101,7 +115,7 @@
       position: absolute;
       height: 10px;
       width: 10px;
-      right: 10px;
+      right: 5px;
       top: 50%;
       background-image: url("/img/clickgui/icon-settings-expand.svg");
       background-position: center;
@@ -111,18 +125,20 @@
       transition:
         ease opacity 0.2s,
         ease transform 0.4s;
+      padding: 5px;
     }
   }
 
   .options {
     padding: 6px 10px;
-    background-color: $background-color;
+    background-color: rgba($background-color, 0.7);
     border: solid 1px $accent-color;
     border-top: none;
-    border-radius: 0 0 3px 3px;
+    border-radius: 6px;
     z-index: 9999;
     width: 100%;
     position: absolute;
+    margin-top: 7px;
 
     .option {
       color: $text-dimmed-color;

diff --git a/src/routes/clickgui/setting/common/ExpandArrow.svelte b/src/routes/clickgui/setting/common/ExpandArrow.svelte
@@ -20,6 +20,7 @@
         cursor: pointer;
         background-color: transparent;
         border: none;
+        margin-right: 2px;
 
         &::after {
             content: "";

diff --git a/src/routes/clickgui/setting/common/GenericSetting.svelte b/src/routes/clickgui/setting/common/GenericSetting.svelte
@@ -18,6 +18,7 @@
     import BindSetting from "../BindSetting.svelte";
     import VectorSetting from "../VectorSetting.svelte";
     import KeySetting from "../KeySetting.svelte";
+    import { quintOut } from "svelte/easing";
 
     export let setting: ModuleSetting;
     export let path: string;
@@ -36,8 +37,8 @@
 <html>
     {#if ready}
         <div
-            in:slide|global={{ duration: 200, axis: "y" }}
-            out:slide|global={{ duration: 200, axis: "y" }}
+            in:slide|global={{ duration: 200, axis: "y", easing: quintOut }}
+            out:slide|global={{ duration: 200, axis: "y", easing: quintOut }}
         >
             {#if setting.valueType === "BOOLEAN"}
                 <BooleanSetting bind:setting on:change />

diff --git a/src/routes/clickgui/setting/common/Switch.svelte b/src/routes/clickgui/setting/common/Switch.svelte
@@ -27,14 +27,13 @@
   .switch-container {
     display: flex;
     align-items: center;
-    cursor: pointer;
   }
 
   .name {
     font-weight: 500;
     color: $text-color;
     font-size: 12px;
-    margin-left: 7px;
+    margin-left: 5px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -46,43 +45,28 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: darken($text-color, 55%);
-    transition: ease 0.4s;
-    height: 8px;
-    border-radius: 4px;
-
-    &::before {
-      position: absolute;
-      content: "";
-      height: 12px;
-      width: 12px;
-      top: -2px;
-      left: 0;
-      background-color: $text-color;
-      transition: ease 0.4s;
-      border-radius: 50%;
-    }
+    background-color: $text-dimmed-color;
+    transition: ease 0.25s;
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
   }
 
   .switch {
     position: relative;
-    width: 22px;
+    width: 15px;
     height: 12px;
 
     input {
       display: none;
     }
 
     input:checked + .slider {
-      background-color: color.scale(
-        desaturate($accent-color, 60%),
-        $lightness: -15%
-      );
-    }
-
-    input:checked + .slider:before {
-      transform: translateX(10px);
-      background-color: rgba($accent-color, 0.7);
+      background-color: $setting-color;
+      box-shadow: 0 0 17px rgba(black, 0.75);
     }
   }
 </style>
diff --git a/src/routes/clickgui/setting/nouislider.scss b/src/routes/clickgui/setting/nouislider.scss
@@ -1,7 +1,8 @@
 @import "../../../colors.scss";
 
 .noUi-handle {
-    background-color: $accent-color;
+    background-color: #2f2f2f;
+    ;
     box-shadow: unset;
     border: none;
     border-radius: 50%;
@@ -19,10 +20,10 @@
     margin: 10px 0;
     height: 2px;
     border: none;
-    background-color: darken($text-color, 80%);
+    background-color: lighten(#2f2f2f, 10%);
     box-shadow: unset;
 }
 
 .noUi-connect {
-    background-color: $accent-color;
+    background-color: #2f2f2f;
 }
diff --git a/src/routes/clickgui/setting/pickr.scss b/src/routes/clickgui/setting/pickr.scss
@@ -19,7 +19,7 @@
 }
 
 .color-pickr-button {
-    border: 1px solid $accent-color !important;
+    border: 1px solid #2f2f2f !important;
 }
 
 .color-pickr-button:focus {

diff --git a/src/routes/hud/elements/hotbar/HotBar.svelte b/src/routes/hud/elements/hotbar/HotBar.svelte
@@ -22,10 +22,10 @@
     let slotsElement: HTMLElement | undefined;
 
     let showItemStackName = false;
-    let showItemStackNameTimeout: number | null = null;
+    let showItemStackNameTimeout: any | null = null;
     let itemStackName: TTExtComponent | string | null = null;
     let overlayMessage: OverlayMessageEvent | null = null;
-    let overlayMessageTimeout: number | null = null;
+    let overlayMessageTimeout: any | null = null;
 
     function updatePlayerData(s: PlayerData) {
         playerData = s;