add black theme

dist/index.css

@@ -172,12 +172,13 @@ body[theme=dark] [color]:not([color=standard]).subtle-background {
 }
 #background-wrapper {
   position: fixed;
-  inset: 0px;
-  transform: scale(1.2);
+  top: var(--safe-area-top);
+  left: var(--safe-area-left);
+  right: var(--safe-area-right);
+  bottom: var(--safe-area-bottom);
   z-index: 1;
   pointer-events: none;
   overflow: hidden;
-  filter: blur(40px);
   background: var(--background);
 }
 main {
@@ -187,6 +188,8 @@ main {
   content: "";
   position: absolute;
   inset: 0px;
+  transform: scale(1.2);
+  filter: blur(40px);
   z-index: -1;
   pointer-events: none;
 }

dist/styles.css

@@ -16,11 +16,11 @@ html {
 
 /* 
 ANIMATION
-*/
+ */
 @keyframes slide-up {
     0% {
-        opacity: 0;
-        transform: translateY(2rem);
+	opacity: 0;
+	transform: translateY(2rem);
     }
 }
 
@@ -66,9 +66,9 @@ body {
     --text-info: #0043ce;
 
     --highlight-background: linear-gradient(
-        45deg,
-        hsl(30, 100%, 50%),
-        hsl(40, 100%, 50%)
+    45deg,
+    hsl(30, 100%, 50%),
+    hsl(40, 100%, 50%)
     );
     --highlight-color: black;
 
@@ -186,11 +186,11 @@ select:not(.tile *),
     button:hover,
     select:hover,
     button.tile.ghost:hover {
-        background: var(--surface-hover);
+	background: var(--surface-hover);
     }
 
     [selected]:hover {
-        background: var(--surface);
+	background: var(--surface);
     }
 }
 
@@ -221,7 +221,7 @@ button.primary {
 
 @media (hover: hover) {
     button.primary:hover {
-        background: var(--primary-hover);
+	background: var(--primary-hover);
     }
 }
 
@@ -244,7 +244,7 @@ button.ghost {
 
 @media (hover: hover) {
     button.ghost:hover {
-        background: var(--background-hover);
+	background: var(--background-hover);
     }
 }
 
@@ -260,7 +260,7 @@ button.danger {
 
 @media (hover: hover) {
     button.danger:hover {
-        background: var(--danger-hover);
+	background: var(--danger-hover);
     }
 }
 
@@ -318,7 +318,7 @@ body {
 
 /*
 TYPE
-*/
+ */
 
 @font-face {
     font-family: IBM Plex Sans;
@@ -375,8 +375,8 @@ footer {
 }
 
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
-        label.tile *
-    ),
+label.tile *
+),
 label.tile,
 select:not(label.tile *),
 textarea:not(label.tile *) {
@@ -392,8 +392,8 @@ hr {
 }
 
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus:not(
-        label.tile *
-    ):not(.no-outline),
+label.tile *
+):not(.no-outline),
 label.tile:has(input:focus),
 label.tile:has(textarea:focus),
 textarea:focus:not(label.tile *),
@@ -718,8 +718,8 @@ select {
 
 article > div {
     padding-bottom: calc(
-        var(--menu-height-mobile) + var(--control-height) +
-            var(--content-padding)
+    var(--menu-height-mobile) + var(--control-height) +
+    var(--content-padding)
     );
 }
 
@@ -1013,7 +1013,7 @@ input[type="radio"]:checked::before {
 
 /*
 LAYOUT
-*/
+ */
 /* basic */
 body,
 html {
@@ -1021,8 +1021,12 @@ html {
     flex-direction: column-reverse;
 
     margin: 0px;
-    width: 100%;
-    height: 100%;
+    
+    position: fixed;
+    top: var(--safe-area-top);
+    left: var(--safe-area-left);
+    right: var(--safe-area-right);
+    bottom: var(--safe-area-bottom);
 }
 
 body,
@@ -1069,8 +1073,8 @@ menu {
 
 article > div {
     padding-bottom: calc(
-        var(--menu-height-mobile) + var(--header-height) +
-            var(--content-padding)
+    var(--menu-height-mobile) + var(--header-height) +
+    var(--content-padding)
     );
 }
 
@@ -1159,91 +1163,91 @@ main {
 @media (min-width: 640px) {
     /* basic */
     .mobile-only {
-        display: none !important;
+	display: none !important;
     }
 
     /* border, outline, etc */
     .modal > div {
-        border: 1px solid var(--surface-border);
+	border: 1px solid var(--surface-border);
     }
 
     menu,
     main.split > article:first-of-type {
-        border-right: 1px solid var(--border);
+	border-right: 1px solid var(--border);
     }
 
     /* size */
     .modal > div {
-        height: auto;
-        max-height: 100%;
+	height: auto;
+	max-height: 100%;
     }
 
     p,
     .modal > div {
-        max-width: var(--max-content-width);
+	max-width: var(--max-content-width);
     }
 
     .width-content {
-        max-width: var(--max-content-width) !important;
+	max-width: var(--max-content-width) !important;
     }
 
     input,
     label,
     select,
     textarea {
-        max-width: var(--max-input-width);
+	max-width: var(--max-input-width);
     }
 
     .width-input {
-        max-width: var(--max-input-width) !important;
+	max-width: var(--max-input-width) !important;
     }
 
     /* layout */
     body {
-        flex-direction: row;
+	flex-direction: row;
     }
 
     main.split {
-        display: grid;
-        grid-template-columns: var(--split-pane-width-desktop) 1fr;
+	display: grid;
+	grid-template-columns: var(--split-pane-width-desktop) 1fr;
     }
 
     article > div {
-        padding-bottom: calc(var(--content-padding) + var(--control-height));
+	padding-bottom: calc(var(--content-padding) + var(--control-height));
     }
 
     menu {
-        position: static;
+	position: static;
 
-        width: var(--menu-width-desktop);
-        height: 100%;
+	width: var(--menu-width-desktop);
+	height: 100%;
 
-        flex-direction: column;
-        justify-content: start;
-        padding-top: 20px;
+	flex-direction: column;
+	justify-content: start;
+	padding-top: 20px;
     }
 
     .tab-link {
-        width: 100%;
-        height: var(--control-height);
+	width: 100%;
+	height: var(--control-height);
 
-        flex-direction: row;
-        gap: var(--gap-in-tab-links);
+	flex-direction: row;
+	gap: var(--gap-in-tab-links);
 
-        font-size: 1rem;
+	font-size: 1rem;
     }
 }
 
 /* desktop */
 @media (min-width: 1024px) {
     body {
-        --split-pane-width-desktop: 400px;
+	--split-pane-width-desktop: 400px;
     }
 }
 
 /*
 STATE
-*/
+ */
 
 [highlight]:not(:hover):not(:active) {
     color: var(--highlight-color) !important;
@@ -1257,11 +1261,11 @@ STATE
 @keyframes highlight {
     30%,
     60% {
-        opacity: 1;
+	opacity: 1;
     }
     0%,
     100% {
-        opacity: 0.1;
+	opacity: 0.1;
     }
 }
 
@@ -1274,13 +1278,13 @@ STATE
     40%,
     50%,
     90% {
-        opacity: 1;
+	opacity: 1;
     }
     10%,
     30%,
     60%,
     80% {
-        opacity: 0.5;
+	opacity: 0.5;
     }
 }
 

dist/sw.js

@@ -1,4 +1,4 @@
-const VERSION = "2610 Beta 4.2"
+const VERSION = "2610 Beta 4.7"
 
 function processUrl(event) {
     const url = event.request.url;

dist/version.txt

@@ -1 +1 @@
-2610 Beta 4.2
+2610 Beta 4.7