From 6e822ed184c3c5cda23aba8f3fa2553f966cb312 Mon Sep 17 00:00:00 2001 From: Benjamin Aster Date: Mon, 29 Apr 2024 18:01:52 +0200 Subject: [PATCH] 0.1.27 --- css/global.css | 2 +- css/main.css | 109 ++++++++++++++++++++++++++++++++------------- html/editor.c.html | 2 +- html/files.c.html | 78 ++++++++++++++++---------------- html/header.c.html | 6 +-- index.html | 2 +- js/app.js | 10 +++++ 7 files changed, 133 insertions(+), 76 deletions(-) diff --git a/css/global.css b/css/global.css index cf2036a..258be79 100644 --- a/css/global.css +++ b/css/global.css @@ -8,7 +8,7 @@ font-family: "Latin Modern Math"; font-display: swap; src: local("Latin Modern Math"), local("LatinModernMath-Regular"), url("../assets/latinmodern-math/normal.otf"); - /* Source: https://tug.org/svn/texlive/trunk/Master/texmf-dist/fonts/opentype/public/lm-math/latinmodern-math.otf?revision=36915 */ + /* Source: https://ctan.org/tex-archive/fonts/lm-math/opentype/latinmodern-math.otf */ } /* Computer Modern Serif font: */ diff --git a/css/main.css b/css/main.css index 0e459b1..b0a89a5 100644 --- a/css/main.css +++ b/css/main.css @@ -40,9 +40,7 @@ } @page { - /* size: A4 portrait; */ margin: 0px; - bleed: 0px; } } @@ -56,7 +54,7 @@ --chroma: 4%; --background-lightness: 20%; --gray-lightness-step: 9%; - --shadow-color: #0004; + --shadow-color: #0005; --item-shadow-color: #0004; --accent-hue: 277deg; @@ -173,28 +171,50 @@ } dialog { - transition: opacity, display, translate, scale; - transition-duration: .1s; + transition: opacity, display, translate, scale, overlay, --blur-radius; + transition-duration: .15s; transition-behavior: allow-discrete; transition-timing-function: ease-out; + --blur-radius: .3rem; + background-color: transparent; + + &::backdrop { + transition: background-color; + transition-duration: inherit; + --backdrop-filter: blur(var(--blur-radius)); + -webkit-backdrop-filter: var(--backdrop-filter); + backdrop-filter: var(--backdrop-filter); + background-color: #0003; + } @starting-style { opacity: 0%; scale: 50%; - } + --blur-radius: 0rem; + &::backdrop { + background-color: transparent; + } + } + &:not(:modal) { display: none; opacity: 0%; scale: 50%; + --blur-radius: 0rem; + + &::backdrop { + background-color: transparent; + } } } dialog.messagebox { + max-inline-size: calc(min(100% - 6rem, 40rem)); border-radius: .5rem; background-color: var(--gray-2); - box-shadow: 0 0 4rem var(--shadow-color); - max-inline-size: calc(min(100% - 6rem, 40rem)); + background-color: light-dark(var(--gray-1), var(--gray-2)); + box-shadow: 0 0 3rem var(--shadow-color); & > form { display: flex; @@ -245,22 +265,6 @@ outline-offset: 2px; } } - - &::backdrop { - background: none; - --blur-radius: .2rem; - --backdrop-filter: blur(var(--blur-radius)); - -webkit-backdrop-filter: var(--backdrop-filter); - backdrop-filter: var(--backdrop-filter); - animation: blur-radius .3s; - } - } - - @keyframes blur-radius { - from { - -webkit-backdrop-filter: blur(0rem); - backdrop-filter: blur(0rem); - } } dialog.export { @@ -299,7 +303,7 @@ transition: inherit; } - &:hover { + :root.can-hover &:hover, &:active { background-color: var(--transparent-gray-2); border-radius: .5rem; @@ -352,7 +356,7 @@ border-radius: .3rem; transition: background-color .2s; - &:hover { + :root.can-hover &:hover, &:active { background-color: var(--transparent-gray-3); } } @@ -360,6 +364,9 @@ :root { --transition-direction: 1; + /* transform-box: content-box; */ + /* position: relative; */ + /* margin-block-start: 3rem; */ &:is([data-transition=toggling-view], [data-transition=changing-folder]) { &:is([data-view=editor], .transition-reverse) { @@ -423,27 +430,67 @@ } &[data-transition=theme-change] { + /* view-transition-name: none; */ + + & body { + /* view-transition-name: body; */ + } + &::view-transition-group(*) { - animation-duration: .4s; + animation-duration: .5s; animation-timing-function: ease-in; } + &::view-transition { + /* inset: 0; */ + /* inset-block-start: auto; */ + /* block-size: 90dvb; */ + /* inset-block-end: auto; */ + /* position: absolute; */ + /* height: 100dvh; */ + /* display: block; */ + } + + &::view-transition-group(root) { + /* display: block; */ + /* width: 100%; */ + /* height: 100%; */ + /* width: auto; */ + /* height: auto; */ + /* inset: 0; */ + /* inset-block-end: auto; */ + /* transform: none; */ + /* position: absolute; */ + /* animation: none; */ + /* animation-name: none; */ + } + + &::view-transition-image-pair(root) { + isolation: auto; + /* display: block; */ + } + &::view-transition-old(root) { - animation: none; + mix-blend-mode: normal; + /* animation: none; */ + animation-name: none; + /* display: block; */ } &::view-transition-new(root) { - animation-name: circular-portal + mix-blend-mode: normal; + animation-name: circular-portal; + /* display: block; */ } } } @keyframes circular-portal { from { - clip-path: circle(0px at calc(var(--animation-origin-x) * 1px) calc(var(--animation-origin-y) * 1px)); + clip-path: circle(0px at calc(var(--animation-origin-x) * 1px) calc(var(--animation-origin-y) * 1px + (100lvb - 100dvb))) content-box; } to { - clip-path: circle(hypot(100dvb, 100dvi) at calc(var(--animation-origin-x) * 1px) calc(var(--animation-origin-y) * 1px)); + clip-path: circle(hypot(100dvb, 100dvi) at calc(var(--animation-origin-x) * 1px) calc(var(--animation-origin-y) * 1px + (100lvb - 100dvb))) content-box; } } diff --git a/html/editor.c.html b/html/editor.c.html index 008a36d..1ff14ab 100644 --- a/html/editor.c.html +++ b/html/editor.c.html @@ -127,7 +127,7 @@ & .dragger { touch-action: none; - &:hover { + :root.can-hover &:hover, &:active { background-color: var(--gray-2); } diff --git a/html/files.c.html b/html/files.c.html index 2f3fb7c..98c0868 100644 --- a/html/files.c.html +++ b/html/files.c.html @@ -146,7 +146,7 @@

Recently opened files

outline-offset: -2px; pointer-events: all; - &:hover { + :root.can-hover &:hover, &:active { --background-color: var(--gray-2); } @@ -250,16 +250,16 @@

Recently opened files

gap: var(--padding); -webkit-user-select: text; user-select: text; + + :root.can-hover &:hover, &:active { + background-color: var(--gray-2); + } } & .item > a > h3 { font-weight: normal; } - & .item > a:hover { - background-color: var(--gray-2); - } - & .items > li > button[data-action] { --modified-accent: oklch(calc(var(--accent-lightness) + 20%) calc(var(--accent-chroma) + 25%) calc(var(--accent-hue) - 3deg)); --mix: 40%; @@ -271,6 +271,10 @@

Recently opened files

justify-content: center; --icon-size: 1.5rem; transition: background-color .2s, border-color .2s; + + :root.can-hover &:hover, &:active { + --mix: 60%; + } } @@ -279,10 +283,6 @@

Recently opened files

font-size: 1.1rem; } - & .items > li > button[data-action]:hover { - --mix: 60%; - } - & .item > .buttons { display: flex; gap: .5rem; @@ -309,13 +309,13 @@

Recently opened files

place-content: center; transition: background-color .2s, border-color .2s; pointer-events: auto; - } - & .item:hover > .buttons:not(:hover) > :is(button, a) { - background-color: var(--gray-3); + :root.can-hover &:hover, &:active { + background-color: var(--gray-3); + } } - & .item > .buttons > :is(button, a):hover { + & .item:hover > .buttons:not(:hover) > :is(button, a) { background-color: var(--gray-3); } @@ -353,6 +353,18 @@

Recently opened files

& > ul > li { transition: border-color .2s; position: relative; + + :root.can-hover &:hover, &:active { + border-block-start-color: transparent; + + & + li { + border-block-start-color: transparent; + } + + & > a { + background-color: var(--transparent-gray-2); + } + } } & > ul > li > a { @@ -367,10 +379,6 @@

Recently opened files

transition: background-color .2s; } - & > ul > li:hover > a { - background-color: var(--transparent-gray-2); - } - & > ul > li[data-storagetype=indexeddb] > a { --icon: var(--icon-desktop-computer) } @@ -383,14 +391,6 @@

Recently opened files

border-block-start: 1px solid var(--transparent-gray-3); } - & > ul > li:hover { - border-block-start-color: transparent; - } - - & > ul > li:hover + li { - border-block-start-color: transparent; - } - & > ul > li > .buttons { display: flex; gap: .3rem; @@ -400,19 +400,19 @@

Recently opened files

inset-inline-end: 0; inset-block: 0; margin: .25rem; - } - & > ul > li > .buttons > .permalink { - display: grid; - place-content: center; - block-size: 100%; - aspect-ratio: 1; - border-radius: .3rem; - transition: background-color .2s; - } + & > .permalink { + display: grid; + place-content: center; + block-size: 100%; + aspect-ratio: 1; + border-radius: .3rem; + transition: background-color .2s; - & > ul > li > .buttons > .permalink:hover { - background-color: var(--transparent-gray-3); + :root.can-hover &:hover, &:active { + background-color: var(--transparent-gray-3); + } + } } } @@ -429,10 +429,10 @@

Recently opened files

block-size: 2rem; border-radius: .3rem; transition: background-color .2s; - } - & button.close:hover { - background-color: var(--transparent-gray-2); + :root.can-hover &:hover, &:active { + background-color: var(--transparent-gray-2); + } } } diff --git a/html/header.c.html b/html/header.c.html index 397f6e6..d7b8d76 100644 --- a/html/header.c.html +++ b/html/header.c.html @@ -141,10 +141,10 @@ -webkit-app-region: no-drag; app-region: no-drag; --icon-size: 1.125rem; - transition: background-color .2s; + transition: background-color .1s; box-sizing: border-box; - &:hover { + :root.can-hover &:hover, &:active { background-color: var(--gray-3); } } @@ -166,7 +166,7 @@ color: white; box-shadow: 0 1px .3rem #0002; - &:hover { + :root.can-hover &:hover, &:active { --lightness: calc(var(--accent-lightness) + 5%); } } diff --git a/index.html b/index.html index f0c4ea3..4883875 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/js/app.js b/js/app.js index 11d30ac..293e63b 100644 --- a/js/app.js +++ b/js/app.js @@ -486,6 +486,15 @@ if (navigator.windowControlsOverlay) { }); } +{ + const canHoverMatch = window.matchMedia("(hover)"); + const update = () => { + document.documentElement.classList.toggle("can-hover", canHoverMatch.matches); + }; + update(); + canHoverMatch.addEventListener("change", update); +} + { // color theme const button = elements.toggleThemeButton; @@ -499,6 +508,7 @@ if (navigator.windowControlsOverlay) { document.documentElement.style.setProperty("--animation-origin-x", button.offsetLeft + button.offsetWidth / 2); document.documentElement.style.setProperty("--animation-origin-y", button.offsetTop + button.offsetHeight / 2); await transition(async () => { + await 0; document.documentElement.classList.toggle("light-theme", currentTheme === "light"); const themeColor = window.getComputedStyle(document.documentElement).backgroundColor.trim(); document.querySelector("meta[name=theme-color]").content = themeColor;