v3 init push

2026-09-03 18:28:33 +02:00
parent f719cb2989
commit 549a7e0fa0
111 changed files with 8736 additions and 4873 deletions
@@ -0,0 +1,187 @@
+@use "@styles/color";
+@use "@styles/var";
+
+/* Overlays: the sign-in card, and the settings sheet.
+ * Both are the same object - a single leaf of paper on the desk. */
+.veil {
+	position: fixed;
+	inset: 0;
+	z-index: 100;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: var.$block-spacing;
+	background-color: color.$veil;
+	backdrop-filter: blur(2px);
+}
+
+.leaf {
+	width: min(26rem, 100%);
+	max-height: 100%;
+	overflow-y: auto;
+	padding: 1.5rem;
+	background-color: color.$paper;
+	border-radius: var.$block-radius;
+	box-shadow: var.$shadow-panel;
+
+	//A cut edge along the left, so it reads as torn from the book
+	background-image: linear-gradient(to right, color.$paper-edge 0 3px, transparent 3px);
+}
+
+.leaf--wide {
+	width: min(34rem, 100%);
+}
+
+.leaf__head {
+	margin-bottom: 1.1rem;
+}
+
+.leaf__logo {
+	display: block;
+	width: min(15rem, 70%);
+	height: auto;
+	margin: 0 0 0.6rem -0.4rem;
+}
+
+.leaf__title {
+	margin: 0;
+	font-family: var.$font-hand;
+	font-size: 2rem;
+	font-weight: 600;
+	line-height: 1.05;
+	color: color.$ink;
+}
+
+.leaf__sub {
+	margin-top: 0.15rem;
+	font-size: 0.85rem;
+	color: color.$ink-soft;
+}
+
+.leaf__row {
+	margin-bottom: 0.85rem;
+}
+
+.leaf__actions {
+	display: flex;
+	align-items: center;
+	gap: var.$elem-spacing;
+	margin-top: 1.2rem;
+}
+
+.leaf__check {
+	display: flex;
+	align-items: center;
+	gap: 0.45rem;
+	font-size: 0.85rem;
+	color: color.$ink-soft;
+	cursor: pointer;
+}
+
+.leaf__error {
+	margin-bottom: 0.85rem;
+	padding: 0.5rem 0.7rem;
+	border-radius: var.$block-radius;
+	font-size: 0.85rem;
+	color: color.$ribbon-deep;
+	background-color: rgba(163, 55, 47, 0.09);
+	border-left: 2px solid color.$ribbon;
+}
+
+.leaf__note {
+	margin-top: 0.85rem;
+	font-size: 0.82rem;
+	color: color.$ink-soft;
+}
+
+/* The one solid button in the app */
+.ink-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var.$text-spacing;
+	padding: 0.55rem 1.1rem;
+	border-radius: var.$block-radius;
+	color: #fff6e6;
+	background-color: color.$ribbon;
+	box-shadow: var.$shadow-elem;
+	transition: background-color var.$trans-quick;
+
+	&:hover:not(:disabled),
+	&:focus-visible {
+		background-color: color.$ribbon-deep;
+	}
+
+	&:disabled {
+		opacity: 0.5;
+		cursor: default;
+	}
+}
+
+.text-button {
+	padding: 0.55rem 0.6rem;
+	border-radius: var.$block-radius;
+	color: color.$ink-soft;
+	transition: color var.$trans-quick, background-color var.$trans-quick;
+
+	&:hover,
+	&:focus-visible {
+		color: color.$ink;
+		background-color: color.$paper-shade;
+	}
+}
+
+.text-button--bad {
+	color: color.$ribbon;
+
+	&:hover,
+	&:focus-visible {
+		color: color.$ribbon-deep;
+		background-color: rgba(163, 55, 47, 0.08);
+	}
+}
+
+/* The autosave indicator. Lives in the header and must never shout: it is
+ * ambient reassurance, not a notification. */
+.saver {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.4rem;
+	font-size: 0.78rem;
+	color: rgba(255, 238, 210, 0.5);
+	padding: 0.35rem 0.5rem;
+	white-space: nowrap;
+	transition: color var.$trans-quick;
+}
+
+.saver--saving,
+.saver--pending {
+	color: rgba(255, 238, 210, 0.75);
+}
+
+.saver--failed {
+	color: #f0b6ae;
+}
+
+.saver__dot {
+	width: 0.42rem;
+	height: 0.42rem;
+	border-radius: 50%;
+	background-color: currentColor;
+	flex: 0 0 auto;
+}
+
+.saver--saving .saver__dot {
+	animation: saver-pulse 1s ease-in-out infinite;
+}
+
+@keyframes saver-pulse {
+	0%,
+	100% {
+		opacity: 0.3;
+	}
+
+	50% {
+		opacity: 1;
+	}
+}