/*
	GalleryBot 0.1 writes this file each time it generates the galleries, so
	changes made here are lost. Make lasting changes in custom.css, beside
	this file, which it never replaces. For example, to change the colors,
	copy the rules below into custom.css and change the values there.
*/

:root {
	--thumbnail-width: 320px;
	--thumbnail-height: 320px;
	--spacing: 16px;
}

/* Each kind of page has its own text and link colors, its own background,
   and its own frame color: the covers' borders on the overview, the
   thumbnails' on a gallery page, and the mat around the picture on a
   picture page. A background image, if there is one, is shown over the
   background color, tiled or filling the window. */
body.overview {
	--text-color: #333333;
	--link-color: #333333;
	--page-background: #999999;
	--frame-color: #33333300;
	--page-background-image: url("background-overview.jpg");
	--page-background-size: 144px 144px;
	--page-background-repeat: repeat;
	--page-background-position: 0 0;
	--page-background-attachment: scroll;
}

body.gallery {
	--text-color: #333333;
	--link-color: #333333;
	--page-background: #999999;
	--frame-color: #333333;
}

body.picture {
	--text-color: #333333;
	--link-color: #333333;
	--page-background: #999999;
	--frame-color: #ffffff;
}

body {
	margin: 0;
	padding: var(--spacing);
	background-color: var(--page-background);
	background-image: var(--page-background-image, none);
	background-size: var(--page-background-size, auto);
	background-repeat: var(--page-background-repeat, repeat);
	background-position: var(--page-background-position, 0 0);
	background-attachment: var(--page-background-attachment, scroll);
	color: var(--text-color);
	font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: center;
	/* A column at least as tall as the window, so the footer can sit at its
	   bottom when the page is shorter (see .footer). The page's content is
	   in <main>, laid out as before. */
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 100vh;
}

a {
	color: var(--link-color);
}

h1 {
	font-size: 1.5em;
	margin: 0.5em 0;
}

/* The bar at the top of a gallery or picture page: where it is, at the
   left; the controls, in the middle; and the position, at the right. On a
   narrow screen the controls get a line of their own, below. */
.bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.5em var(--spacing);
}

.bar .up {
	justify-self: start;
	text-align: left;
}

.bar .controls {
	grid-column: 2;
	display: flex;
	align-items: center;
	gap: 2px;
}

.bar .status {
	grid-column: 3;
	justify-self: end;
	text-align: right;
	margin: 0;
	white-space: nowrap;
}

@media (max-width: 36em) {
	.bar {
		grid-template-columns: 1fr auto;
	}
	.bar .controls {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: center;
	}
	.bar .status {
		grid-column: 2;
		grid-row: 1;
	}
}

/* Each control is a glyph drawn in the link color, in a square big enough
   to hit, bigger on touch screens; play and pause, the main one, is bigger
   still. One whose setting is on (playing backward, or faster) is outlined;
   one that leads nowhere is faint. */
.control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: none;
	color: var(--link-color);
	font: inherit;
	cursor: pointer;
}

/* Controls that are links keep their looks whatever custom.css says about
   links in general (a:hover and so on, which outrank .control alone), so
   such rules style only text links. A rule naming .control still changes
   them. */
a.control:link, a.control:visited, a.control:hover, a.control:active {
	color: var(--link-color);
	text-decoration: none;
}

.control[hidden] {
	display: none;
}

.control.primary {
	width: 44px;
	height: 44px;
}

.control.primary svg {
	width: 32px;
	height: 32px;
	stroke-width: 1.5;
}

.control svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.control[aria-pressed="true"] {
	box-shadow: inset 0 0 0 1.5px currentColor;
}

.control.disabled, .control:disabled {
	opacity: 0.35;
	cursor: default;
}

.control .when-playing, .playing .control .when-paused {
	display: none;
}

.playing .control .when-playing {
	display: inline;
}

@media (pointer: coarse) {
	.control {
		width: 44px;
		height: 44px;
	}
	.control.primary {
		width: 56px;
		height: 56px;
	}
}

nav {
	margin: 0.5em 0;
}

nav.up a {
	margin: 0 0.25em;
}

nav.up a:first-child {
	margin-left: 0;
}

/* Thumbnails: as many columns as fit, each as wide as a thumbnail (or the
   window, if that's narrower), and centered, unless the page says how many. */
.thumbnails {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(0, var(--thumbnail-width)));
	gap: var(--spacing);
	justify-content: center;
	list-style: none;
	margin: var(--spacing) auto;
	padding: 0;
}

/* Each row is as tall as its tallest thumbnail, so a row of landscape
   thumbnails is no taller than it needs to be. Each thumbnail is centered
   in its cell, with what's shown with it just beneath. The same text,
   invisible, above it (.balance) keeps the thumbnail itself centered, so
   the thumbnails in a row line up through their middles. */
.thumbnails li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.thumbnails .image {
	display: block;
	line-height: 0;
}

.thumbnails .balance {
	visibility: hidden;
}

/* Thumbnails are limited by the window's width, for phones, rather than by
   their cells' (100%): WebKit doesn't measure the rows again when a cell's
   width changes, so a page laid out narrow and then widened, as when Safari's
   window is resized, would keep rows too short for their text. */
.thumbnails img {
	border: 1px solid var(--frame-color);
	max-width: calc(100vw - 4 * var(--spacing));
	height: auto;
}

.thumbnails p {
	margin: 0.3em 0 0;
	max-width: var(--thumbnail-width);
}

.thumbnails .balance p {
	margin: 0 0 0.3em;
}

/* A picture: framed, with the left and right halves leading to the previous
   and next pictures. */
figure {
	margin: var(--spacing) 0;
}

.frame {
	display: inline-block;
	position: relative;
	background: var(--frame-color);
	padding: 8px;
}

.frame img {
	display: block;
	max-width: calc(100vw - 6 * var(--spacing));
	height: auto;
}

.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
}

.overlay.previous {
	left: 0;
	cursor: w-resize;
}

.overlay.next {
	right: 0;
	cursor: e-resize;
}

figcaption {
	max-width: 40em;
	margin: 0 auto;
}

figcaption p {
	margin: 0.5em 0;
}

/* The footer, from the settings, at the bottom of every page: at the
   bottom of the window when the page is shorter, its top margin taking the
   space left; just below the content otherwise. To keep it just below the
   content always, give it "margin-top: 0" in custom.css. Smaller text. */
.footer {
	max-width: 40em;
	margin: auto auto var(--spacing);
	padding: var(--spacing) var(--spacing) 0;
	font-size: 0.8em;
}

.title {
	font-weight: bold;
}