0.1.27

BenjaminAster · Apr 29, 2024 · 6e822ed · 6e822ed
1 parent 7fd9384
commit 6e822ed
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 76 deletions.
diff --git 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
@@ -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,14 +356,17 @@
 			border-radius: .3rem;
 			transition: background-color .2s;
 
-			&:hover {
+			:root.can-hover &:hover, &:active {
 				background-color: var(--transparent-gray-3);
 			}
 		}
 	}
 
 	: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
@@ -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
@@ -146,7 +146,7 @@ <h2>Recently opened files</h2>
 						outline-offset: -2px;
 						pointer-events: all;
 
-						&:hover {
+						:root.can-hover &:hover, &:active {
 							--background-color: var(--gray-2);
 						}
 
@@ -250,16 +250,16 @@ <h2>Recently opened files</h2>
 			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 @@ <h2>Recently opened files</h2>
 			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 @@ <h2>Recently opened files</h2>
 			font-size: 1.1rem;
 		}
 
-		& .items > li > button[data-action]:hover {
-			--mix: 60%;
-		}
-
 		& .item > .buttons {
 			display: flex;
 			gap: .5rem;
@@ -309,13 +309,13 @@ <h2>Recently opened files</h2>
 			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 @@ <h2>Recently opened files</h2>
 				& > 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 @@ <h2>Recently opened files</h2>
 					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 @@ <h2>Recently opened files</h2>
 					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 @@ <h2>Recently opened files</h2>
 					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 @@ <h2>Recently opened files</h2>
 				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
@@ -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%);
 			}
 		}