memori

style.css (15.1 KB)

@property --page {
	syntax: '<color>';
	inherits: true;
	initial-value: #fefef4;
}

@property --grid-line {
	syntax: '<color>';
	inherits: true;
	initial-value: #a9cf51;
}

@property --accent {
	syntax: '<color>';
	inherits: true;
	initial-value: #a81d8f;
}

:root {
	/* Default colors */
	--white: white;
	--black: black;
	--default-grid: #d0d0d0;
	--shadow: #00000044;

	/* guac theme colors */
	--onion: #a81d8f;
	--garlic: #fefef4;
	--lime: #a9cf51;
	--avocado: #7a8520;

	/* banana theme colors */
	--peel: #ffcc12;
	--flesh: #f8f5e3;
	--unripe: #a5d269;
	--bruise: #4d4235;

	/* mojito theme colors */
	--mint: #9febaa;
	--soda: #f8fffe;
	--zest: #9ee3ad;
	--watermelon: #f8599b;

	/* grape-soda theme colors */
	--natural-flavors: #d4c5f9;
	--effervescence: #f9f7ff;
	--concentrate: #b8a9dd;
	--syrup: #7c5cbe;

	/* grapefruit theme colors */
	--rind: #ff9b87;
	--pith: #fff8f6;
	--pulp: #f0bcb3;
	--ruby: #ff6b51;

	/* sea-breeze theme colors */
	--cerulean: #a3d5ff;
	--mist: #f7fcff;
	--horizon: #85c0f5;
	--lagoon: #2196f3;

	/* pantry theme colors */
	--cocoa: #1b1313;
	--nori: #003731;
	--pesto: #226f33;
	--beet: #950641;

	--grid-cols: 49;
	--grid-rows: 66;
	--cell-size-mm: 4mm;

	/* Screen view: Grid as percentage of page (centered on US Letter simulation) */
	/* Grid width as percent of Letter: 196/215.9 = 90.78% */
	/* Grid height as percent of Letter: 264/279.4 = 94.48% */
	--grid-width-percent: 90.78%;
	--grid-height-percent: 94.48%;

	/* Default theme (guac) */
	--desk: var(--avocado);
	--page: var(--garlic);
	--grid-line: var(--lime);
	--grid-line-light: color-mix(in srgb, var(--grid-line) 65%, transparent);
	--accent: var(--onion);

	/* Set text color for all themes */
	color: var(--white);

	/* Set font */
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--theme-transition: 250ms ease;
	--marquee-fade: 75ms;
	--page-radius: 0px;
	transition:
		--page var(--theme-transition),
		--grid-line var(--theme-transition),
		--accent var(--theme-transition);
}

:root.no-theme-transition,
:root.no-theme-transition body {
	transition: none;
}

/* Theme definitions */
:root[data-theme="guac"] {
	--desk: var(--avocado);
	--page: var(--garlic);
	--grid-line: var(--lime);
	--accent: var(--onion);
}

:root[data-theme="banana"] {
	--desk: var(--peel);
	--page: var(--flesh);
	--grid-line: var(--unripe);
	--accent: var(--bruise);
}

:root[data-theme="mojito"] {
	--desk: var(--mint);
	--page: var(--soda);
	--grid-line: var(--zest);
	--accent: var(--watermelon);
}

:root[data-theme="grape-soda"] {
	--desk: var(--natural-flavors);
	--page: var(--effervescence);
	--grid-line: var(--concentrate);
	--accent: var(--syrup);
}

:root[data-theme="grapefruit"] {
	--desk: var(--rind);
	--page: var(--pith);
	--grid-line: var(--pulp);
	--accent: var(--ruby);
}

:root[data-theme="sea-breeze"] {
	--desk: var(--cerulean);
	--page: var(--mist);
	--grid-line: var(--horizon);
	--accent: var(--lagoon);
}

:root[data-theme="pantry"] {
	--desk: var(--cocoa);
	--page: var(--nori);
	--grid-line: var(--pesto);
	--accent: var(--beet);
	--page-radius: 2.45% / 1.89%;

	& .add-images-btn,
	& .popup-notification {
		color: var(--white);
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-user-select: none;
	user-select: none;
	scrollbar-color: var(--page) var(--desk);
}

body {
	background-color: var(--desk);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	align-items: safe center;
	min-height: 100vh;
	padding: 20px;
	transition: background-color var(--theme-transition);
}

.page {
	width: min(100%, var(--page-width, 8.5in));
	aspect-ratio: 8.5 / 11;
	background: var(--page);
	position: relative;
	border-radius: var(--page-radius);
	box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
	display: flex;
	align-items: center;
	justify-content: center;
}

.page.theming {
	transition: border-radius var(--theme-transition);
}

@media (prefers-reduced-motion: reduce) {
	:root,
	:root body,
	.page.theming {
		transition: none;
	}
}

.grid {
	/* Grid dimensions as percentage of page to scale responsively */
	width: var(--grid-width-percent);
	height: var(--grid-height-percent);
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), 1fr);
	grid-template-rows: repeat(var(--grid-rows), 1fr);
	gap: 0;
	line-height: 0;
	position: relative; /* Image containers are positioned relative to grid */
	/* Grid is centered within .page by the parent's flexbox */
	box-sizing: border-box;
}

.grid-cell {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-top: var(--line-width, 1px) dashed var(--grid-line);
	border-left: var(--line-width, 1px) dashed var(--grid-line);
	margin: 0;
	padding: 0;
	display: block;
}

/* Add right border to rightmost column */
.grid-cell.right-edge {
	border-right: var(--line-width, 1px) dashed var(--grid-line);
	width: calc(100% + var(--line-width, 1px));
}

/* Add bottom border to bottom row */
.grid-cell.bottom-edge {
	border-bottom: var(--line-width, 1px) dashed var(--grid-line);
	height: calc(100% + var(--line-width, 1px));
}

/* Solid grid lines for cell sizes <= 3.56mm (screen preview only) */
.solid-grid .grid-cell {
	border-top-style: solid;
	border-left-style: solid;
	border-top-color: var(--grid-line-light);
	border-left-color: var(--grid-line-light);
}

.solid-grid .grid-cell.right-edge {
	border-right-style: solid;
	border-right-color: var(--grid-line-light);
}

.solid-grid .grid-cell.bottom-edge {
	border-bottom-style: solid;
	border-bottom-color: var(--grid-line-light);
}

@media (max-width: 680px) {
	body {
		padding: 0;
	}

	.page {
		box-shadow: none;
	}

	.grid-cell {
		border-top-style: solid;
		border-left-style: solid;
		border-top-color: var(--grid-line-light);
		border-left-color: var(--grid-line-light);
	}

	.grid-cell.right-edge {
		border-right-style: solid;
		border-right-color: var(--grid-line-light);
		width: calc(100% + var(--line-width, 1px));
	}

	.grid-cell.bottom-edge {
		border-bottom-style: solid;
		border-bottom-color: var(--grid-line-light);
		height: calc(100% + var(--line-width, 1px));
	}
}

.image-container {
	position: absolute;
	cursor: grab;
	outline: 2px solid transparent;
	outline-offset: -2px;
	transition: outline-color 0.2s, opacity 0.05s ease;
	background: var(--page);
	touch-action: none;
}

.image-container::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	border: 2px solid transparent;
	transition: border-color 0.2s;
	z-index: 1;
	/* overflow: hidden; */
}

.image-container .image-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}

.image-container:hover::after {
	border-color: var(--accent);
}

.image-container.selected::after {
	border-color: var(--accent);
}

.image-container.dragging {
	opacity: 0.7;
}

.image-container.dragging::after {
	border-color: var(--accent);
}

/* Visual feedback for pan mode on touch */
.image-container.pan-mode::after {
	border-color: var(--accent);
	border-width: 3px;
	border-style: solid;
	animation: pulse-border 0.25s ease-out;
}

@keyframes pulse-border {
	0% {
		border-width: 2px;
		opacity: 0.5;
	}
	50% {
		border-width: 5px;
		opacity: 1;
	}
	100% {
		border-width: 3px;
		opacity: 1;
	}
}

/* Hide dimension labels and resize handles in pan mode */
.image-container.pan-mode .dimension-label {
	opacity: 0 !important;
}

.image-container.pan-mode .resize-handle {
	opacity: 0 !important;
}

.image-container.resizing::after {
	border-color: var(--accent);
}

body.resizing *,
body.dragging * {
	cursor: inherit !important;
}

.selection-box {
	position: absolute;
	display: none;
	background: color-mix(in srgb, var(--accent) 50%, transparent);
	pointer-events: none;
	z-index: 999999;
}

.selection-box.releasing {
	animation: fade-out-marquee var(--marquee-fade) ease-out forwards;
}

@keyframes fade-out-marquee {
	to {
		opacity: 0;
	}
}

body.selecting,
body.selecting * {
	cursor: crosshair !important;
}

body.selecting .image-container {
	pointer-events: none;
}

.image-container img {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	pointer-events: none;
	transform-origin: center center;
	transition: none;
}

.resize-handle {
	position: absolute;
	background: var(--accent);
	opacity: 0;
	transition: opacity 0.2s;
	z-index: 2;
}

.image-container:hover .resize-handle,
.image-container.selected .resize-handle,
.image-container.resizing .resize-handle {
	opacity: 1;
}

.dimension-label {
	position: absolute;
	background: var(--accent);
	color: var(--text);
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 16px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 500;
	line-height: 1;
	opacity: 0;
	transition: opacity 0.2s;
	pointer-events: none;
	z-index: 9999;
	white-space: nowrap;
}

.dimension-label.width {
	top: 1px;
	left: 50%;
	transform: translate(-50%, -50%);
}

.dimension-label.height {
	right: 1px;
	top: 50%;
	transform: translate(50%, -50%) rotate(90deg);
}

.image-container:hover .dimension-label,
.image-container.selected .dimension-label,
.image-container.dragging .dimension-label,
.image-container.resizing .dimension-label {
	opacity: 1;
}

.dimension-label[data-hidden="true"] {
	opacity: 0 !important;
}

.resize-handle.corner {
	width: 10px;
	height: 10px;
	background: transparent;
}

.resize-handle.corner::before {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	background: var(--accent);
	border-radius: 50%;
}

.resize-handle.edge {
	background: transparent;
}

/* Desktop: Original 10px hitboxes */
.resize-handle.n { top: -5px; left: 5px; right: 5px; height: 10px; cursor: n-resize; }
.resize-handle.s { bottom: -5px; left: 5px; right: 5px; height: 10px; cursor: s-resize; }
.resize-handle.e { right: -5px; top: 5px; bottom: 5px; width: 10px; cursor: e-resize; }
.resize-handle.w { left: -5px; top: 5px; bottom: 5px; width: 10px; cursor: w-resize; }

.resize-handle.ne { top: -5px; right: -5px; cursor: ne-resize; }
.resize-handle.ne::before { top: 0; right: 0; }

.resize-handle.nw { top: -5px; left: -5px; cursor: nw-resize; }
.resize-handle.nw::before { top: 0; left: 0; }

.resize-handle.se { bottom: -5px; right: -5px; cursor: se-resize; }
.resize-handle.se::before { bottom: 0; right: 0; }

.resize-handle.sw { bottom: -5px; left: -5px; cursor: sw-resize; }
.resize-handle.sw::before { bottom: 0; left: 0; }

@media (pointer: coarse), (hover: none) {
	html {
		overscroll-behavior: none;
	}

	@media (orientation: portrait) {
		html, body {
			height: 100%;
			width: 100%;
			overflow: hidden;
		}
	}

	.resize-handle.corner {
		width: 12px;
		height: 12px;
	}

	.resize-handle.corner::before {
		/* Center the visual dot within the larger hitbox */
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* Edge handles with 12px hitboxes */
	.resize-handle.n { top: -6px; height: 12px; }
	.resize-handle.s { bottom: -6px; height: 12px; }
	.resize-handle.e { right: -6px; width: 12px; }
	.resize-handle.w { left: -6px; width: 12px; }

	/* Corner handles with 12px hitboxes, centered on the visual corner */
	.resize-handle.ne { top: -6px; right: -6px; }
	.resize-handle.nw { top: -6px; left: -6px; }
	.resize-handle.se { bottom: -6px; right: -6px; }
	.resize-handle.sw { bottom: -6px; left: -6px; }
}

@media print {
	* {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

	html, body {
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		height: 100vh !important;
		overflow: visible !important;
	}

	body {
		background: var(--white);
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.page {
		width: auto !important;
		height: auto !important;
		max-width: none !important;
		border-radius: 0 !important;
		box-shadow: none;
		margin: 0;
		padding: 0;
		background: var(--white);
		display: block !important;
	}

	.grid {
		width: calc(var(--grid-cols) * var(--cell-size-mm)) !important;
		height: calc(var(--grid-rows) * var(--cell-size-mm)) !important;
		display: grid;
		grid-template-columns: repeat(var(--grid-cols), 1fr) !important;
		grid-template-rows: repeat(var(--grid-rows), 1fr) !important;
		position: relative !important;
		box-sizing: border-box !important;
	}

	.grid-cell {
		border-top: 1px dashed var(--default-grid) !important;
		border-left: 1px dashed var(--default-grid) !important;
		box-sizing: border-box !important;
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.grid-cell.right-edge {
		border-right: 1px dashed var(--default-grid) !important;
		width: calc(100% + 1px) !important;
	}

	.grid-cell.bottom-edge {
		border-bottom: 1px dashed var(--default-grid) !important;
		height: calc(100% + 1px) !important;
	}

	.image-container {
		outline: none !important;
		position: absolute !important;
		background: var(--white) !important;
		/* Recalculate positions using cell coordinates and print cell size */
		left: calc(var(--x-cell) * var(--cell-size-mm)) !important;
		top: calc(var(--y-cell) * var(--cell-size-mm)) !important;
		width: calc(var(--width-cells) * var(--cell-size-mm)) !important;
		height: calc(var(--height-cells) * var(--cell-size-mm)) !important;
	}

	.image-container::after {
		border: none !important;
	}

	.selection-box {
		display: none !important;
	}

	.image-container .image-wrapper {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		overflow: hidden !important;
	}

	.image-container img {
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		display: block !important;
		pointer-events: none !important;
		/* Preserve the transform from the screen view */
	}

	.resize-handle {
		display: none !important;
	}

	.dimension-label {
		display: none !important;
	}

	.add-images-btn {
		display: none !important;
	}

	.popup-notification {
		display: none !important;
	}
}

@page {
	margin: 0;
}

.add-images-btn {
	display: none;
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--accent);
	color: var(--page);
	border: none;
	border-radius: 100px;
	padding: 14px 28px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	z-index: 10000;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	-webkit-user-select: none;
	transition: transform 0.1s ease, box-shadow 0.1s ease, color var(--theme-transition);
}

.add-images-btn:active {
	transform: translateX(-50%) scale(0.95);
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

@media (pointer: coarse), (hover: none) {
	.add-images-btn {
		display: block;
		bottom: 0;
		margin-bottom: 24px;
	}

	/* On touch devices, don't change opacity when dragging */
	.image-container.dragging {
		opacity: 1;
	}
}

.popup-notification {
	position: fixed;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--accent);
	color: var(--page);
	padding: 0.7rem 0.9rem;
	border-radius: 50rem;
	font-size: 1.2rem;
	text-align: center;
	white-space: nowrap;
	user-select: none;
	width: fit-content;
	height: fit-content;
	opacity: 0;
	pointer-events: none;
	z-index: 10000;
}

.popup-notification.show {
	opacity: 1;
	transition: none;
}

.popup-notification.fade-out {
	opacity: 0;
	filter: blur(4px);
	transition: opacity 1.5s ease-out, filter 1.5s ease-out;
}