VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

restore modal animation on desktop

Browse Source
This commit is contained in:
marlon-erler
2026-04-01 08:46:10 +00:00
parent fd8aafed6d
commit 551d2c3aba
7 changed files with 9267 additions and 7190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.css
Vendored
+111 -39
View File
@@ -40,22 +40,22 @@ main {
#background-wrapper #grass-1 {
--color-1: hsl(150, 100%, 30%);
--color-2: hsl(150, 100%, 25%);
background-image:
linear-gradient(
background-image: 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:
linear-gradient(
background-image: 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:
linear-gradient(
--surface: 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
Vendored
+1 -1
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>Comms</title>
dist/index.js
Vendored
+3235 -1244
View File
File diff suppressed because it is too large Load Diff
dist/styles.css
Vendored
+20 -10
View File
@@ -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
Vendored
+5 -2
View File
@@ -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
Vendored
+2 -1
View File
@@ -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());
}