Pattern and colorized themes

index.html

@@ -255,6 +255,9 @@ <h1 id="frq-score">4</h1>
   </div>
   <!-- Controls -->
   <div id="controls-container" class="pill">
+    <button class="icon" data-modal-view="colorize" tooltip="Colorize Theme" hidden>
+      <i class="bi bi-palette2"></i>
+    </button>
     <button class="icon" data-modal-view="store" tooltip="Theme Store">
       <i class="bi bi-shop-window"></i>
     </button>
@@ -514,6 +517,14 @@ <h1 class="text-placeholder">000</h1>
     <p>You have missed classes.</p>
     <div id="makeup-dates"></div>
   </dialog>
+  <!-- Colorize Theme -->
+  <dialog data-modal-page="colorize" data-page-title="Colorize Theme">
+    <p>Colorize your current theme.</p>
+    <input type="range" min="-180" max="180" value="0" step="1" id="colorize" />
+    <div data-modal-actions>
+      <button class="submit-button" id="reset-colorize">Reset</button>
+    </div>
+  </dialog>
   <dialog data-modal-page="menu" data-page-title="Virtual Clicker">
     <div class="menu-icons">
       <a href="https://check.vssfalcons.com/" tooltip="Virtual Checker">

package.json

@@ -1,7 +1,7 @@
 {
   "name": "virtual-clicker",
   "private": true,
-  "version": "5.2.0",
+  "version": "5.3.0",
   "type": "module",
   "scripts": {
     "dev": "vite --host",

src/design.css

@@ -733,3 +733,35 @@ hidden,
   opacity: 0.75;
   cursor: not-allowed;
 }
+
+#colorize {
+  color: var(--accent-color);
+  -webkit-appearance: none;
+  width: -webkit-fill-available;
+  height: 20px;
+  border-radius: 10px;
+  background: var(--surface-color);
+  outline: none;
+  margin-top: 5px;
+  accent-color: var(--accent-color);
+}
+
+#colorize::-webkit-slider-thumb,
+#colorize::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--accent-color);
+  cursor: grab;
+  transition: 0.25s;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+#colorize::-webkit-slider-thumb:active,
+#colorize::-moz-range-thumb:active {
+  width: 25px;
+  height: 25px;
+  cursor: grabbing;
+  transition: 0.25s;
+}

src/layout.css

@@ -230,8 +230,7 @@ div.spacer {
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  backdrop-filter: blur(24px);
-  background: transparent;
+  background: var(--surface-color);
   border-radius: 0.5rem;
   cursor: pointer;
 }

src/modules/ui.css

@@ -432,6 +432,10 @@ body:has(.topbar) {
 }
 
 [data-modal-page="store"]::-webkit-scrollbar {
+  width: 12px !important;
+}
+
+[data-modal-page="store"]::-moz-scrollbar {
   width: 28px !important;
 }
 
@@ -571,7 +575,10 @@ body:has(.topbar) {
   left: 0;
 }
 
-[data-modal-page="store"] .themes-grid .theme-item i:not(.hd):not(.animated) {
+[data-modal-page="store"]
+  .themes-grid
+  .theme-item
+  i:not(.hd):not(.animated):not(.pattern):not(.colorized) {
   position: absolute;
   bottom: 10px;
   right: 20px;
@@ -580,7 +587,10 @@ body:has(.topbar) {
   transition: opacity 0.25s ease-in-out;
 }
 
-[data-modal-page="store"] .themes-grid .theme-item:hover i:not(.hd):not(.animated) {
+[data-modal-page="store"]
+  .themes-grid
+  .theme-item:hover
+  i:not(.hd):not(.animated):not(.pattern):not(.colorized) {
   opacity: 1;
   transition: opacity 0.25s ease-in-out;
 }
@@ -592,17 +602,37 @@ body:has(.topbar) {
   font-size: 25px;
 }
 
-[data-modal-page="store"] .themes-grid .theme-item i.animated {
+[data-modal-page="store"] .themes-grid .theme-item i.animated,
+[data-modal-page="store"] .themes-grid .theme-item i.pattern,
+[data-modal-page="store"] .themes-grid .theme-item i.colorized {
   position: absolute;
   top: 12.5px;
   right: 20px;
   font-size: 20px;
 }
 
-[data-modal-page="store"] .themes-grid .theme-item:has(i.hd) i.animated {
+[data-modal-page="store"] .themes-grid .theme-item:has(i.hd) i.animated,
+[data-modal-page="store"] .themes-grid .theme-item:has(i.hd) i.pattern,
+[data-modal-page="store"] .themes-grid .theme-item:has(i.hd) i.colorized,
+[data-modal-page="store"] .themes-grid .theme-item:has(i.animated) i.pattern,
+[data-modal-page="store"] .themes-grid .theme-item:has(i.animated) i.colorized,
+[data-modal-page="store"] .themes-grid .theme-item:has(i.pattern) i.colorized {
   right: 50px;
 }
 
+[data-modal-page="store"] .themes-grid .theme-item:has(i.hd):has(i.animated) i.colorized,
+[data-modal-page="store"] .themes-grid .theme-item:has(i.hd):has(i.pattern) i.colorized,
+[data-modal-page="store"] .themes-grid .theme-item:has(i.animated):has(i.pattern) i.colorized {
+  right: 75px;
+}
+
+[data-modal-page="store"]
+  .themes-grid
+  .theme-item:has(i.hd):has(i.animated):has(i.pattern)
+  i.colorized {
+  right: 100px;
+}
+
 [data-modal-page="store"] .themes-grid .theme-item h5,
 [data-modal-page="store"] .themes-grid .theme-item p,
 [data-modal-page="store"] .themes-grid .theme-item small {
@@ -644,6 +674,32 @@ body:has(.topbar) {
   --error-color: #fa8796;
 }
 
+[data-modal-page="store"] .themes-grid .theme-item:has(i.colorized) * {
+  z-index: 1;
+}
+
+[data-modal-page="store"] .themes-grid .theme-item:has(i.colorized) h5::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(100% / 3);
+  height: 100%;
+  backdrop-filter: hue-rotate(-90deg);
+  z-index: 0;
+}
+
+[data-modal-page="store"] .themes-grid .theme-item:has(i.colorized) h5::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: calc(100% / 3);
+  height: 100%;
+  backdrop-filter: hue-rotate(90deg);
+  z-index: 0;
+}
+
 [data-modal-page="store"] .cost-info {
   margin-top: 10px;
 }
@@ -672,3 +728,30 @@ body > video {
   pointer-events: none;
   z-index: -1;
 }
+
+[data-modal-page="colorize"] #colorize-controls {
+  width: 100%;
+  height: 200px;
+  border-radius: 10px;
+  background-size: cover !important;
+  background-position: center !important;
+  background-repeat: no-repeat !important;
+  position: relative;
+  overflow: hidden;
+}
+
+[data-modal-page="colorize"] #colorize-controls::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to right,
+    hsl(0, 0%, 100%) 0%,
+    hsl(0, 0%, 100%) 0%,
+    transparent 50%,
+    hsl(0, 0%, 100%) 100%
+  );
+  filter: hue-rotate(calc(var(--max-hue, 120deg) * ((2 * ((var(--x) - 0.5))))));
+  mix-blend-mode: color;
+  pointer-events: none;
+}