restore modal animation on desktop

dist/index.css

@@ -40,22 +40,22 @@ main {
 #background-wrapper #grass-1 {
     --color-1: hsl(150, 100%, 30%);
     --color-2: hsl(150, 100%, 25%);
-  background-image:
+    background-image: linear-gradient(
-    linear-gradient(
         350deg,
         var(--color-1),
         var(--color-2) 30%,
-      transparent 40%);
+        transparent 40%
+    );
 }
 #background-wrapper #grass-2 {
     --color-1: hsl(110, 100%, 40%);
     --color-2: hsl(110, 100%, 35%);
-  background-image:
+    background-image: linear-gradient(
-    linear-gradient(
         9deg,
         var(--color-1),
         var(--color-2) 30%,
-      transparent 35%);
+        transparent 35%
+    );
 }
 @media (prefers-color-scheme: dark) {
     #background-wrapper {
@@ -76,7 +76,7 @@ main {
 }
 
 /* src/colors.css */
-[color]:not([color=standard]) {
+[color]:not([color="standard"]) {
     --primary: hsl(var(--hue), 100%, var(--accent-luma));
     --primary-hover: hsl(var(--hue), 95%, var(--accent-luma));
     --primary-active: hsl(var(--hue), 80%, var(--accent-luma));
@@ -87,7 +87,7 @@ main {
     --surface-active: hsla(var(--hue), 100%, 5%, 15%);
 }
 @media (prefers-color-scheme: dark) {
-  [color]:not([color=standard]) {
+    [color]:not([color="standard"]) {
         --accent-luma: var(--accent-luma-dark);
         --accent-text-luma: var(--accent-text-luma-dark);
         --surface: hsla(var(--hue), 100%, 95%, 5%);
@@ -95,24 +95,23 @@ main {
         --surface-active: hsla(var(--hue), 100%, 95%, 15%);
     }
 }
-[color]:not([color=standard]).tile {
+[color]:not([color="standard"]).tile {
     --gradient-luma-1: 70%;
     --gradient-luma-2: 90%;
     --hover-luma: 75%;
     --active-luma: 80%;
     --text-luma: 20%;
-  --surface:
+    --surface: linear-gradient(
-    linear-gradient(
-      
         120deg,
         hsl(var(--hue), 100%, var(--gradient-luma-1)),
-      hsla(var(--hue), 100%, var(--gradient-luma-2), 90%) );
+        hsla(var(--hue), 100%, var(--gradient-luma-2), 90%)
+    );
     --surface-hover: hsl(var(--hue), 100%, var(--hover-luma));
     --surface-active: hsl(var(--hue), 100%, var(--active-luma));
     --text-normal: hsl(var(--hue), 100%, var(--text-luma));
 }
 @media (prefers-color-scheme: dark) {
-  [color]:not([color=standard]).tile {
+    [color]:not([color="standard"]).tile {
         --gradient-luma-1: 20%;
         --gradient-luma-2: 15%;
         --hover-luma: 25%;
@@ -120,44 +119,44 @@ main {
         --text-luma: 90%;
     }
 }
-[color]:not([color=standard]).fill-color {
+[color]:not([color="standard"]).fill-color {
     color: white;
     background-color: var(--primary);
 }
-[color]:not([color=standard])[selected].fill-color {
+[color]:not([color="standard"])[selected].fill-color {
     color: var(--primary);
 }
 @media (min-width: 1024px) {
-  [color]:not([color=standard]).background {
+    [color]:not([color="standard"]).background {
         --luma: var(--background-luma);
         --sat: 80%;
         background: hsl(var(--hue), var(--sat), var(--luma));
     }
     @media (prefers-color-scheme: dark) {
-    [color]:not([color=standard]).background {
+        [color]:not([color="standard"]).background {
             --luma: var(--background-luma-dark);
             --sat: 40%;
         }
     }
-  [color=standard].background {
+    [color="standard"].background {
         background: var(--surface);
     }
 }
-[color]:not([color=standard]).subtle-background {
+[color]:not([color="standard"]).subtle-background {
     --luma: var(--subtle-luma);
     background: hsl(var(--hue), 100%, var(--luma), 50%);
 }
 @media (prefers-color-scheme: dark) {
-  [color]:not([color=standard]).subtle-background {
+    [color]:not([color="standard"]).subtle-background {
         --luma: var(--subtle-luma-dark);
     }
     @media (display-mode: standalone) {
-    [color]:not([color=standard]).subtle-background {
+        [color]:not([color="standard"]).subtle-background {
             --luma: 0%;
         }
     }
 }
-[color=coral] {
+[color="coral"] {
     --hue: 20;
     --accent-luma: 50%;
     --accent-luma-dark: 70%;
@@ -168,7 +167,7 @@ main {
     --subtle-luma: 95%;
     --subtle-luma-dark: 5%;
 }
-[color=yellow] {
+[color="yellow"] {
     --hue: 50;
     --accent-luma: 50%;
     --accent-luma-dark: 60%;
@@ -179,7 +178,7 @@ main {
     --subtle-luma: 95%;
     --subtle-luma-dark: 5%;
 }
-[color=mint] {
+[color="mint"] {
     --hue: 150;
     --accent-luma: 40%;
     --accent-luma-dark: 60%;
@@ -190,7 +189,7 @@ main {
     --subtle-luma: 95%;
     --subtle-luma-dark: 5%;
 }
-[color=lightblue] {
+[color="lightblue"] {
     --hue: 180;
     --accent-luma: 40%;
     --accent-luma-dark: 60%;
@@ -201,7 +200,7 @@ main {
     --subtle-luma: 95%;
     --subtle-luma-dark: 5%;
 }
-[color=blue] {
+[color="blue"] {
     --hue: 220;
     --accent-luma: 50%;
     --accent-luma-dark: 70%;
@@ -212,7 +211,7 @@ main {
     --subtle-luma: 95%;
     --subtle-luma-dark: 5%;
 }
-[color=purple] {
+[color="purple"] {
     --hue: 280;
     --accent-luma: 50%;
     --accent-luma-dark: 70%;
@@ -331,7 +330,14 @@ body[showing-chat] #chat-page-wrapper {
     padding-bottom: var(--safe-area-bottom);
 }
 #chat-page > div > #ribbon > span,
-#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.ribbon {
+#chat-page
+    > div
+    > #main
+    > div
+    > .pane-wrapper
+    > .pane
+    > .toolbar
+    > span.ribbon {
     gap: var(--gap-between-tiles);
     padding: var(--gap-between-tiles);
 }
@@ -357,7 +363,14 @@ body[showing-chat] #chat-page-wrapper {
     justify-content: center;
 }
 #chat-page > div > #ribbon button.ribbon-button,
-#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button.ribbon-button {
+#chat-page
+    > div
+    > #main
+    > div
+    > .pane-wrapper
+    > .pane
+    > .toolbar
+    button.ribbon-button {
     min-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
     width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
     max-width: calc(var(--control-height) - 2 * var(--gap-between-tiles));
@@ -366,7 +379,15 @@ body[showing-chat] #chat-page-wrapper {
     color: var(--primary);
 }
 #chat-page > div > #ribbon button > .icon,
-#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button > .icon {
+#chat-page
+    > div
+    > #main
+    > div
+    > .pane-wrapper
+    > .pane
+    > .toolbar
+    button
+    > .icon {
     font-size: 1.1rem;
 }
 #chat-page > div > #ribbon > span {
@@ -384,7 +405,14 @@ body[showing-chat] #chat-page-wrapper {
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {
     padding-left: var(--content-padding);
 }
-#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar :is(input, select, button) {
+#chat-page
+    > div
+    > #main
+    > div
+    > .pane-wrapper
+    > .pane
+    > .toolbar
+    :is(input, select, button) {
     height: 100%;
     flex: 1;
 }
@@ -415,7 +443,9 @@ body[showing-chat] #chat-page-wrapper {
 }
 #home-page #overview-section,
 #home-page #chat-section {
-  padding-bottom: calc(var(--content-padding) + var(--header-height) + var(--safe-area-bottom));
+    padding-bottom: calc(
+        var(--content-padding) + var(--header-height) + var(--safe-area-bottom)
+    );
 }
 #home-page #chat-grid {
     margin-top: var(--content-padding);
@@ -459,12 +489,27 @@ body[showing-chat] #chat-page-wrapper {
 }
 
 /* src/View/ChatPages/calendarPage.css */
-#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper {
+#chat-page
+    > div
+    > #main
+    > #calendar-page
+    > .pane-wrapper
+    > .pane
+    > .toolbar
+    .input-wrapper {
     display: flex;
     padding: var(--gap-between-tiles);
     gap: var(--gap-between-tiles);
 }
-#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper > input {
+#chat-page
+    > div
+    > #main
+    > #calendar-page
+    > .pane-wrapper
+    > .pane
+    > .toolbar
+    .input-wrapper
+    > input {
     min-height: unset;
     height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
     appearance: textfield;
@@ -477,10 +522,26 @@ body[showing-chat] #chat-page-wrapper {
     -webkit-appearance: none;
     margin: 0px;
 }
-#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper > .year-input {
+#chat-page
+    > div
+    > #main
+    > #calendar-page
+    > .pane-wrapper
+    > .pane
+    > .toolbar
+    .input-wrapper
+    > .year-input {
     width: 4.4rem;
 }
-#chat-page > div > #main > #calendar-page > .pane-wrapper > .pane > .toolbar .input-wrapper > .month-input {
+#chat-page
+    > div
+    > #main
+    > #calendar-page
+    > .pane-wrapper
+    > .pane
+    > .toolbar
+    .input-wrapper
+    > .month-input {
     width: 3.1rem;
 }
 @media (max-width: 1024px) {
@@ -705,7 +766,14 @@ body[showing-chat] #chat-page-wrapper {
     max-width: 100%;
     padding: 0px;
 }
-#chat-page > div > #main > #task-page > .pane-wrapper > .pane > .main-content > div {
+#chat-page
+    > div
+    > #main
+    > #task-page
+    > .pane-wrapper
+    > .pane
+    > .main-content
+    > div {
     animation: slide-up var(--animation-duration);
 }
 #chat-page > div > #main > #task-page .task-grid {
@@ -761,7 +829,11 @@ body[showing-chat] #chat-page-wrapper {
 #chat-page > div > #main > #task-page .board-toggle-button {
     display: flex;
 }
-#chat-page > div > #main > #task-page[isshowingboard][showingboardlist=false] #board-list {
+#chat-page
+    > div
+    > #main
+    > #task-page[isshowingboard][showingboardlist="false"]
+    #board-list {
     display: none;
 }
 @media (min-width: 640px) {

dist/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <title>Comms</title>

dist/styles.css

@@ -25,9 +25,10 @@ ANIMATION
 }
 
 :root {
-  --animation-duration: 0.5s;
+    --animation-duration: 0.4s;
 }
 
+.modal > div,
 .slide-up {
     animation: slide-up var(--animation-duration);
 }
@@ -171,27 +172,33 @@ select:not(.tile *),
 .tile {
     background: var(--surface);
 }
+
 [selected] {
     background: var(--background);
 }
+
 @media (hover: hover) {
     button:hover,
     select:hover,
     button.tile.ghost:hover {
         background: var(--surface-hover);
     }
+
     [selected]:hover {
         background: var(--surface);
     }
 }
+
 button:active,
 select:active,
 button.tile.ghost:active {
     background: var(--surface-active);
 }
+
 [selected]:active {
     background: var(--surface-hover);
 }
+
 .tile *,
 header button {
     background: transparent;
@@ -206,11 +213,13 @@ button.primary {
     background: var(--primary);
     color: var(--text-on-color);
 }
+
 @media (hover: hover) {
     button.primary:hover {
         background: var(--primary-hover);
     }
 }
+
 button.primary:active {
     background: var(--primary-active);
 }
@@ -219,17 +228,21 @@ button.primary:active {
 button.ghost:not(.tile) {
     background: transparent;
 }
+
 button.ghost {
     color: var(--link);
 }
+
 .tab-link[active] {
     color: var(--primary);
 }
+
 @media (hover: hover) {
     button.ghost:hover {
         background: var(--background-hover);
     }
 }
+
 button.ghost:active {
     background: var(--background-active);
 }
@@ -239,11 +252,13 @@ button.danger {
     background: var(--danger);
     color: white;
 }
+
 @media (hover: hover) {
     button.danger:hover {
         background: var(--danger-hover);
     }
 }
+
 button.danger:active {
     background: var(--danger-active);
 }
@@ -322,13 +337,6 @@ TYPE
 /*
 MAIN
  */
-/* animation */
-@media (max-width: 640px) {
-  .modal > div {
-    animation: slide-up var(--animation-duration);
-  }
-}
-
 /* appearance */
 input[type="checkbox"],
 input[type="radio"],
@@ -698,7 +706,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)
     );
 }
 
@@ -1042,7 +1051,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)
     );
 }
 

dist/support.js

@@ -14,9 +14,12 @@ document.querySelector("main").addEventListener("scroll", () => {
 async function registerServiceWorker() {
     if ("serviceWorker" in navigator) {
         try {
-      const registration = await navigator.serviceWorker.register("/sw.js", {
+            const registration = await navigator.serviceWorker.register(
+                "/sw.js",
+                {
                     scope: "/",
-      });
+                },
+            );
             if (registration.installing) {
                 setTimeout(() => window.location.reload(), 500);
             } else if (registration.active) {

dist/sw.js

@@ -23,7 +23,8 @@ async function getFromCache(event) {
 async function fetchAndCache(event) {
     const request = event.request;
     const response = await fetch(request);
-  if (response.status === 200) { // Only cache successful responses
+    if (response.status === 200) {
+        // Only cache successful responses
         const cache = await caches.open(CACHE_VERSION);
         cache.put(request, response.clone());
     }