checkboxy looking checkbox elements, fix settings dialog in mobile view

_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);
             }
         }
 

_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%;
         }
     }
 }

_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;
             }
         }
 

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"