daydream/src/styles/_panel.scss

@use "sass:color" as sass-color;
@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;
	//The gold ribbon with the wordmark brown on it, exactly as the two sit
	//together in the mark. Gold is the palette's one colour for things that
	//have to be reached for; the lilac ribbon belongs to the book
	color: color.$ink;
	background-color: color.$amber;
	box-shadow: var.$shadow-elem;
	transition: background-color var.$trans-quick;

	&:hover:not(:disabled),
	&:focus-visible {
		background-color: sass-color.adjust(color.$amber, $lightness: 6%);
	}

	&: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.$bad;

	&:hover,
	&:focus-visible {
		color: color.$bad;
		background-color: rgba(155, 70, 49, 0.09);
	}
}

/* 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: color.$ink-faint;
	padding: 0.35rem 0.5rem;
	white-space: nowrap;
	transition: color var.$trans-quick;
}

.saver--saving,
.saver--pending {
	color: color.$ink-soft;
}

.saver--failed {
	color: color.$bad;
}

.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;
	}
}

/* Picking the hand the book is written in.
 *
 * Each option is set in the hand it offers, because the name of a typeface
 * tells you nothing - what your own words look like in it is the whole
 * decision. The sample line comes from the dictionary, so it reads as a
 * sentence rather than as "Aa Bb Cc" in whatever language.
 */
.hand-picker {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0.5rem;
}

.hand-picker__option {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	padding: 0.6rem 0.75rem;
	text-align: left;
	cursor: pointer;
	border: 1px solid color.$rule;
	border-radius: var.$block-radius;
	background-color: color.$paper;
	color: color.$ink;
	transition: border-color var.$trans-quick, background-color var.$trans-quick;

	&:hover:not(:disabled) {
		border-color: color.$ink-faint;
		background-color: color.$paper-shade;
	}

	&:disabled {
		opacity: 0.55;
		cursor: default;
	}
}

//The one in use: a ruled line under the sample, like the page itself
.hand-picker__option--on {
	border-color: color.$amber;
	background-color: color.$paper-shade;
	box-shadow: inset 0 0 0 1px color.$amber;
}

.hand-picker__sample {
	font-size: 1.45rem;
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

//The name is the only part not set in the hand - it is a label, not a sample
.hand-picker__name {
	font-family: var.$font-ui;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: color.$ink-faint;
}