# HG changeset patch
# User Matti Hamalainen <ccr@tnsp.org>
# Date 1644601824 -7200
# Node ID 872be876e0f2e6609d927227b9824ca54e8cda37
# Parent  2e9326abe254f039010578b483dbe5a4fc3db8ad
Add 'dark mode' stylesheet.

diff -r 2e9326abe254 -r 872be876e0f2 dark.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/dark.css	Fri Feb 11 19:50:24 2022 +0200
@@ -0,0 +1,540 @@
+/*
+ * Yet Another Image Gallery
+ * -- Base CSS stylesheet
+ * Programmed and designed by Matti 'ccr' Hamalainen <ccr@tnsp.org>
+ * (C) Copyright 2015-2022 Tecnic Software productions (TNSP)
+ */
+html, body {
+	/* Prevent automatic text size adjustment, which happens on some mobile browsers. */
+	-webkit-text-size-adjust: 100%;
+	-moz-text-size-adjust: 100%;
+	-ms-text-size-adjust: 100%;
+	text-size-adjust: 100%;
+}
+
+body {
+	font-size: 0.9em;
+	font-family: Verdana, Arial, helvetica, sans-serif;
+
+	color: white;
+	background: #111;
+
+	margin: 0;
+	padding: 0;
+}
+
+a {
+	color: white;
+}
+
+a:hover {
+	text-decoration: none;
+	color: yellow;
+	text-shadow: 1px 1px 2px #000;
+}
+
+.note {
+	color: #fd0;
+	text-shadow: 1px 1px 2px #000;
+}
+
+
+#galleryPage, #imagePage {
+	padding: 0;
+	margin: 0;
+}
+
+#imagePage {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+h1 {
+	font-size: 1.5em;
+	font-family: helvetica;
+	margin: 0;
+	padding: 0.25em;
+	color: white;
+	text-shadow: 2px 2px 2px #000;
+	background: #777;
+
+	border-top-left-radius: 0.25em;
+	border-top-right-radius: 0.25em;
+}
+
+#pageInfoHeader {
+	background: #444;
+	margin: 0;
+	padding: 0.25em;
+
+	border-top-left-radius: 0.5em;
+	border-top-right-radius: 0.5em;
+}
+
+#pageInfoFooter {
+	position: fixed;
+
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 1.5em;
+
+	margin: 0;
+	padding: 0.25em;
+	text-align: right;
+	font-size: 0.75em;
+	text-shadow: 1px 1px 1px black;
+
+	background: black;
+	border-top: 1px solid black;
+	z-index: 12;
+}
+
+div.imagePageHeader {
+	position: fixed;
+
+	z-index: 12;
+
+	top: 0;
+	left: 0;
+	right: 0;
+}
+
+#pageInfoButton, #pageUpNaviButton {
+	display: block;
+	text-decoration: none;
+
+	position: fixed;
+	left: 0.15em;
+	z-index: 30;
+
+	text-align: center;
+	width: 1em;
+	height: 1em;
+	font-size: 1.1em;
+
+	background: black;
+	color: white;
+
+	border: 0.2em solid white;
+	border-radius: 0.3em;
+	padding: 1em;
+}
+
+#pageInfoButton:hover, #pageUpNaviButton:hover {
+	background: white;
+	color: black;
+}
+
+#pageInfoButton {
+	top: 4em;
+}
+
+#pageUpNaviButton {
+	top: 0.25em;
+}
+
+
+/*
+ * Albums
+ */
+div.albumHeaderText {
+	padding: 0.25em;
+}
+
+.galleryTable {
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+
+	margin-bottom: 1em;
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.galleryEntry {
+	width: 12em;
+	padding: 1em;
+	text-align: center;
+}
+
+.galleryEntry img {
+	width: 100%;
+}
+
+.galleryTable + .imageTable {
+	border-top: 2px solid #222;
+}
+
+.galleryTable a, .galleryTable a:visited  {
+	text-decoration: none;
+	color: white;
+	outline: 0;
+}
+
+.galleryTable a:hover, .galleryTable a:active, .galleryTable a:focus {
+	text-shadow: 1px 1px 2px #600;
+	text-decoration: underline;
+}
+
+.galleryTable .galleryEntry {
+	display: inline-block;
+	vertical-align: middle;
+}
+
+
+/*
+ *
+ */
+#pageImageBox {
+	position: absolute;
+	top: 0;
+	bottom: 4.5em;
+	left: 0;
+	right: 0;
+}
+
+
+.imageBox {
+	text-align: center;
+}
+
+.imageBox img,
+div.imageCtrl img {
+	border: 0.2em solid #666;
+	border-radius: 0.3em;
+}
+
+.imageBox a:hover img, .imageBox a:active img, .imageBox a:focus img,
+div.imageCtrl a:hover img, div.imageCtrl a:active img, div.imageCtrl a:focus img {
+	border: 0.2em solid white;
+}
+
+.galleryEntry .imageBox img {
+	box-shadow: 2px 2px 4px -2px black;
+}
+
+img.albumIcon {
+	border: 0.2em solid #666;
+	border-radius: 0.3em;
+	box-shadow: 0px 0px 2px black;
+}
+
+a:hover img.albumIcon, a:active img.albumIcon, a:focus img.albumIcon {
+	border: 0.2em solid white;
+}
+
+div.imageCtrl {
+	position: absolute;
+	min-width: 8em;
+	width: 10%;
+	top: 0;
+	bottom: 0;
+	background: rgba(0,0,0, 0.35);
+}
+
+div.imageCtrl.next, div.imageCtrl.nextBtm {
+	right: 0;
+}
+
+
+div.imageCtrl.prev, div.imageCtrl.prevBtm {
+	left: 0;
+}
+
+div.imageCtrl a {
+	display: block;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+div.imageCtrl a img {
+	position: relative;
+	display: block;
+	margin: auto;
+	width: 85%;
+}
+
+
+div.imageCtrl.nextBtm, div.imageCtrl.prevBtm {
+	z-index: 1;
+}
+
+div.imageCtrl.prev, div.imageCtrl.next {
+	opacity: 0;
+	transition: opacity 0.15s linear;
+	z-index: 10;
+}
+
+div.imageCtrl.prev:hover, div.imageCtrl.next:hover {
+	opacity: 1;
+}
+
+
+#imageImageBox {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+
+#imageImage {
+	position: relative;
+	z-index: 5;
+}
+
+div.imageCtrl * img {
+	position: absolute;
+	top: 40%;
+}
+
+
+
+div.albumTitle, div.imageCaption {
+	text-align: center;
+	text-shadow: 1px 1px 2px black;
+	padding: 0.5em;
+}
+
+.galleryEntry div.imageCaption {
+}
+
+#pageImageCaption {
+	position: absolute;
+	bottom: 1.5em;
+	left: 0;
+	right: 0;
+	height: 2em;
+	background: #222;
+	border-top: 1px solid black;
+	border-bottom: 1px solid black;
+	z-index: 12;
+}
+
+#infoBox {
+	position: fixed;
+	bottom: 0;
+	left: 0.1em;
+	right: 0.1em;
+	height: auto;
+	min-height: 5em;
+	background: rgba(0,0,0, 0.5);
+
+	text-align: center;
+	margin: 0;
+	padding-top: 0.5em;
+	padding-bottom: 2em;
+	border: 0.2em solid white;
+	border-radius: 0.5em;
+
+	opacity: 0;
+	z-index: 15;
+}
+
+#infoBox:hover {
+	opacity: 1;
+}
+
+
+#imageLink {
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+
+	background: white;
+	color: black;
+
+	text-shadow: none;
+	text-decoration: none;
+	font-size: 1.25em;
+
+	padding: 0.5em;
+}
+
+
+span.infoDateTime {
+	display: block;
+	color: white;
+	font-weight: bold;
+	text-shadow: 1px 1px 2px black;
+}
+
+
+/*
+ * Navigation controls
+ */
+.naviBreadCrumbItem {
+}
+
+.naviBreadCrumbCurr {
+	color: #fd0;
+}
+
+.naviBreadCrumbSep:before {
+	content: " → ";
+	color: #0f0;
+	font-weight: bold;
+	font-size: 1.5em;
+}
+
+#naviBreadCrumbs {
+	text-shadow: 1px 1px 1px black;
+	padding: 0.5em;
+	padding-top: 0;
+	font-size: 1.25em;
+
+	background: #555;
+	box-shadow: 0px 2px 4px -4px black;
+}
+
+
+#languages {
+	position: absolute;
+	right: 0.5em;
+	top: 0.5em;
+	background: black;
+	border-radius: 0.35em;
+	padding: 0.5em;
+}
+
+#languages a {
+	display: inline-block;
+	padding: 0.5em;
+	margin: 0.1em;
+	background: white;
+	color: black;
+	border-radius: 0.35em;
+	text-align: center;
+}
+
+
+/*
+ * Mobile device rules via media queries
+ */
+@media screen and (min-resolution: 2dppx) and (min-resolution: 150dpi) {
+
+	/*
+	 * Orientation related
+	 */
+	@media (orientation: landscape) {
+		body {
+			font-size: 1em;
+		}
+	}
+
+
+	@media (orientation: portrait) {
+		body {
+			font-size: 1.4em;
+		}
+
+		.galleryEntry {
+			width: 40%;
+		}
+
+		#pageInfoHeader, h1 {
+			font-size: 1.25em;
+		}
+
+	}
+
+
+	/*
+	 * Common rules
+	 */
+	#pageInfoButton, #pageUpNaviButton {
+		font-size: 1.5em;
+		bottom: 3em;
+	}
+
+
+	div.imageCtrl a img {
+		top: 3%;
+	}
+
+	div.albumTitle, div.imageCaption {
+		font-size: 1.2em;
+	}
+
+
+	#languages {
+		position: relative;
+		top: 0;
+		right: 0;
+		left: 0;
+		margin: 0;
+		padding: 0.2em;
+		text-align: right;
+	}
+
+	#languages a {
+		width: 5em;
+		padding: 1em;
+	}
+
+	#naviBreadCrumbs {
+		font-size: 1.5em;
+	}
+
+	div.albumHeaderText {
+	}
+
+	#pageImageCaption {
+		bottom: 0;
+		height: 2.5em;
+		overflow: hidden;
+	}
+
+	#imageImage {
+		border: none;
+		border-radius: 0;
+		box-shadow: none;
+	}
+
+	#imagePage #pageInfoFooter {
+		display: none;
+	}
+
+	#pageInfoButton, #pageUpNaviButton {
+		top: auto;
+		left: auto;
+	}
+
+	#pageInfoButton {
+		right: 0.25em;
+	}
+
+	#pageUpNaviButton {
+		right: 4em;
+	}
+
+	#infoBox {
+		background: black;
+		display: none;
+		opacity: 1;
+	}
+}
+
+
+@media screen and (max-width: 400px), screen and (max-height: 400px) {
+	body {
+		font-size: 10px;
+	}
+
+	#pageInfoHeader {
+	}
+}
+