From 4c6a484acfce548eb955cd1fb15cbfa114868a02 Mon Sep 17 00:00:00 2001
From: Ruben <sneexy@disroot.org>
Date: Sat, 18 Oct 2025 19:52:11 -0500
Subject: [PATCH] checkboxy looking checkbox elements, fix settings dialog in
 mobile view

---
 _includes/styles/base.css     | 35 ++++++++++++++++++++++-------------
 _includes/styles/settings.css |  8 ++++----
 _includes/styles/windows.css  |  5 ++++-
 package-lock.json             |  2 ++
 4 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/_includes/styles/base.css b/_includes/styles/base.css
index a53861a..fc766e5 100644
--- a/_includes/styles/base.css
+++ b/_includes/styles/base.css
@@ -594,10 +594,12 @@ radio-button-group {
     gap: .4rem;
 
     label {
-        border: .13rem solid var(--border);
         border-radius: .4rem;
-        padding: .2rem;
+        border: .13rem solid var(--border);
         cursor: pointer;
+        padding: .2rem;
+        width: fit-content;
+        word-break: break-word;
 
         &:has(input:checked) {
             border-color: var(--accent);
@@ -628,22 +630,29 @@ checkbox-button-group {
         cursor: pointer;
         margin-right: .3rem;
         padding: .2rem;
-        width: max-content;
+        width: fit-content;
+        word-break: break-word;
+
+        &::before {
+            background: var(--border);
+            border-radius: 10rem;
+            content: '';
+            display: inline-flex;
+            height: 1rem;
+            margin-bottom: -.1rem;
+            margin-left: .2rem;
+            margin-right: .3rem;
+            position: relative;
+            transition: .2s;
+            width: 1rem;
+        }
 
         &:has(input:checked) {
             border-color: var(--accent);
             background-color: color-mix(in srgb, var(--accent) 30%, var(--background));
             
-            &::after {
-                background: var(--green);
-                border-radius: 10rem;
-                content: '';
-                display: inline-flex;
-                height: 1.5rem;
-                margin-left: -.2rem;
-                margin-top: -.9rem;
-                position: absolute;
-                width: 1.5rem;
+            &::before {
+                background: var(--accent);
             }
         }
 
diff --git a/_includes/styles/settings.css b/_includes/styles/settings.css
index 4431937..4b85f48 100644
--- a/_includes/styles/settings.css
+++ b/_includes/styles/settings.css
@@ -18,15 +18,14 @@ settings-area {
     visibility: hidden;
 
     align-items: center;
-    background: linear-gradient(#00000000, #121418);
+    background: #00000050;
     display: flex;
     inset: 0;
     justify-content: center;
     overflow-x: hidden;
     overflow-y: scroll;
     position: fixed;
-    top: 3rem;
-    z-index: 999;
+    z-index: 90;
 
     settings-model {
         background: var(--background);
@@ -61,7 +60,8 @@ settings-area {
 
     @media screen and (max-width: 28.8rem) {
         settings-model {
-            margin-top: 5rem;
+            margin-top: 10rem;
+            width: 100%;
         }
     }
 }
\ No newline at end of file
diff --git a/_includes/styles/windows.css b/_includes/styles/windows.css
index 25b3792..4a511b2 100644
--- a/_includes/styles/windows.css
+++ b/_includes/styles/windows.css
@@ -51,11 +51,14 @@
         }
 
         window-controls {
+            display: flex;
+            flex-direction: row;
             margin: auto 0 auto auto;
+            align-items: center;
+            gap: .4rem;
 
             icon-tabler[minimize], icon-tabler[maximize] {
                 cursor: not-allowed;
-                margin-right: -.2rem;
             }
         }
 
diff --git a/package-lock.json b/package-lock.json
index c3d6e24..7b0ee1d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1591,6 +1591,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -1612,6 +1613,7 @@
       "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.6.tgz",
       "integrity": "sha512-JcEmHlyLK/o0uGAlj65vgg+7LIms0xKXe60lcDOTU7oVX/3LuEuLwrQpW3VJ7de5TaFKiW4kWkaIpJL42FEgxQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "posthtml-parser": "^0.11.0",
         "posthtml-render": "^3.0.0"