/*

// This file is part of mh.gallery
// Copyright (C) 2023-2025 maxhaesslein
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// See the file LICENSE.md for more details.

*/


/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}


html, body {
	margin: 0;
}

body {
	background: var(--color-background);
	color: var(--color-text);
	padding: 10px;
	min-width: 360px;
	box-sizing: border-box;
	font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; 
	font-weight: normal;
	font-size: 18px;

	--color-empty: #000;
	--color-empty-icon: #333;
	--color-button: #000;
	--color-button-hover: #333;
	--color-background: #181818;
	--color-text: #eee;
	--color-icon: #fff;
	--color-warning: #c00;
}

	body.lightmode {
		--color-empty: #fff;
		--color-empty-icon: #ccc;
		--color-button: #ddd;
		--color-button-hover: #fff;
		--color-background: #f2f2f2;
		--color-text: #222;
		--color-icon: #000;
		--color-warning: #900;
	}

	body.soft-fade,
	body.soft-fade * {
		transition: all 150ms ease-in-out !important;
	}

	@media ( max-width: 640px ) {

		body {
			font-size: 16px;
			padding: 10px;
		}

	}

form {
	text-align: center;
}

	form .login-error {
		text-align: center;
		color: var(--color-warning);
	}

input,
button {
	display: inline-block;
	box-sizing: border-box;
	background: var(--color-text);
	color: var(--color-background);
	border: none;
	border-radius: 3px;
	padding: 7px 14px;
	line-height: 1;
}

	button {
		cursor: pointer;
	}

.lightmode-toggle {
	border: 1px solid #333;
	border-radius: 50%;
	height: 20px;
	width: 20px;
	vertical-align: middle;
	box-shadow: 0 0 15px rgba(0,0,0,.1);
	cursor: pointer;
	position: absolute;
	z-index: 80;
	overflow: hidden;
	display: none;
	position: absolute;
	right: 10px;
	top: 12px;
	transition: opacity 500ms ease-in-out;
}

	.lightmode-toggle.visible {
		display: block;
	}

	.lightmode-toggle:before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: #000;
		z-index: -2;
	}

	.lightmode-toggle:after {
		content: "";
		display: block;
		width: 200%;
		height: 90%;
		position: absolute;
		left: -50%;
		bottom: -50%;
		background: #ccc;
		z-index: -1;
		transform: rotate(330deg);

		transition: height 500ms ease-in-out, background 200ms ease-in-out;
	}

		.lightmode-toggle:hover:after {
			height: 200%;
			background: #fff;
		}

	body.cursor-hidden .lightmode-toggle {
		opacity: 0;
	}

	body.lightmode .lightmode-toggle {
		border-color: #ccc;
	}

		body.lightmode .lightmode-toggle:before {
			background: #fff;
		}

		body.lightmode .lightmode-toggle:after {
			background: #aaa;
		}

		body.lightmode .lightmode-toggle:hover:after {
			background: #000;
		}

footer {
	position: relative;
	left: 0;
	bottom: 0;
	width: 100%;
	margin-top: 1em;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

	footer menu {
		display: block;
		list-style-type: none;
		margin: 0;
		padding: 0;
		line-height: 1.2em;
		font-size: 0.9rem;
	}

		footer menu li {
			display: inline;
		}
		
			footer menu li + li {
				margin-left: 0.5em;
			}

	footer .spacer {
		height: 1.2rem;
	}

	footer .gallery-copyright {
		font-size: 0.7rem;
		opacity: 0.4;
		margin-left: 1em;
		line-height: 1.3em;
	}

hr {
	width: 100%;
	max-width: 10em;
	display: block;
	margin: 1em auto;
	border: 0;
	border-top: 1px solid var(--color-text);
	opacity: 0.2;
}

.anchor {
	position: absolute;
}

	.thumbnail-anchor {
		margin-top: -33vh;
	}

main {
	min-height: calc(100vh - 20px - 2.5em);
	line-height: 1.3;
	padding-top: 26px;
	box-sizing: border-box;
}

	main:has(.meta-top) {
		padding-top: 0;
	}

picture {
	display: block;
	position: relative;
	background: var(--color-empty);
}

	picture:after {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		background: url(../img/loading_white.svg) no-repeat center center / 40px auto;
		opacity: 0;
		transition: opacity 500ms ease-in-out 500ms;
	}

		body.lightmode picture:after {
			background-image: url(../img/loading_black.svg);
		}

		body.transition picture:after {
			opacity: 1;
		}

		@media (scripting: none) {
			picture:after {
				opacity: 1;
			}
		}

	picture * {
		position: relative;
		z-index: 1;
	}

	@media ( max-width: 740px ) {

		picture {
			background-size: 12% auto;
		}

		.template-image picture {
			background-size: 30px auto;
		}

	}

a {
	color: inherit;
	text-decoration: none;
}

	a:hover {
		text-decoration: underline;
	}

h1 {
	text-align: center;
	margin: 0.2em 0 0.8em;
	text-wrap: balance;
	word-break: break-word;
	hyphens: auto;
}

.description {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 1em;

	text-wrap: balance;
}

	.description + .gallery-list {
		margin-top: 1.5em;
	}

.galleries-list {
	list-style-type: disc;
	padding: 1em;
}

.gallery-list {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	list-style-type: none;
	padding: 5px 0 0;
	margin: -10px;
}

	.gallery-list li {
		width: 20%;
		padding: 10px;
		box-sizing: border-box;
	}

		.gallery-list:after {
			content: "";
			flex: 1;
			display: block;
		}

		@media ( max-width: 1200px ) {
			
			.gallery-list li {
				width: 25%;
			}

		}

		@media ( max-width: 840px ) {
			
			.gallery-list li {
				width: calc(100% / 3);
			}

		}

		@media ( max-width: 640px ) {
			
			.gallery-list {
				margin: -5px;
			}

			.gallery-list li {
				width: 50%;
				padding: 5px;
			}

		}

	.gallery-list picture,
	.gallery-list img {
		display: block;
		width: 100%;
		height: auto;
	}

	.gallery-list .title {
		display: block;
		padding: 0.4em 0 0;
		font-size: 0.9em;
		text-wrap: balance;
		word-break: break-word;
		hyphens: auto;
	}

	.gallery-list .empty-thumbnail {
		background: var(--color-empty);
		width: 100%;
		display: block;
		position: relative;
	}

		.gallery-list .empty-thumbnail.locked:after {
			content: "";
			display: block;
			background: var(--color-empty-icon);
			width: 36%;
			height: 36%;
			position: absolute;
			transform: translate(-50%, -50%);
			transition: all 200ms ease-in-out;
			left: 50%;
			top: 50%;
			z-index: 5;
			mask: url(../img/locked.svg) no-repeat center center / contain;
		}

	.gallery-list .gallery-link,
	.gallery-list .image-link {
		display: block;
		position: relative;
	}

		.gallery-list .gallery-link:hover {
			text-decoration: none;
		}

		.gallery-list .gallery-link .image-container,
		.gallery-list .image-link .image-container {
			box-shadow: 0 0 20px rgba(0,0,0,0);
			transition: all 200ms ease-in-out;
		}

			.gallery-list .gallery-link:hover .image-container,
			.gallery-list .image-link:hover .image-container {
				box-shadow: 0 0 10px rgba(0,0,0,.6);
				transform: scale(1.05);
			}

.meta {
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 2px 0;
	box-sizing: border-box;
	transition: opacity 500ms ease-in-out;
}

	.gallery-list + .meta {
		margin-top: 2em;
	}

	.meta ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

		.meta ul li {
			display: inline;
		}

	.meta a,
	.meta .button-download,
	.meta .button-information,
	.button {
		text-decoration: none;
		display: inline-block;
		background: var(--color-button);
		border-radius: 4px;
		padding: 5px 10px;
		box-sizing: border-box;
		line-height: 1;
		font-size: 0.9em;
	}

		.meta a:hover,
		.meta li:hover .button-download,
		.meta .button-information:hover,
		.button:hover {
			background-color: var(--color-button-hover);
			text-decoration: none;
		}

	@media (scripting: none) {

		.meta .action-js {
			display: none;
		}

	}

	body.cursor-hidden.template-image .meta {
		opacity: 0;
	}
	
	.meta .button-information {
		color: transparent;
		width: 26px;
		height: 26px;
		overflow: hidden;
		vertical-align: middle;
		cursor: pointer;
		position: relative;
		display: inline-block;
	}

		@media (scripting: none) {

			.meta .button-information {
				display: none;
			}

		}

		.meta .button-information:after {
			content: "";
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background-color: var(--color-icon);
			mask: url(../img/information.svg) no-repeat center center / auto 50%;
		}

	.meta .download-menu-wrapper {
		position: relative;
		width: 26px;
		height: 30px;
		display: inline-block;
	}

	.meta .button-download {
		display: inline-block;
		color: transparent;
		width: 26px;
		height: 26px;
		overflow: hidden;
		vertical-align: middle;
		cursor: pointer;
		position: relative;
	}

		.meta .button-download:after {
			content: "";
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background-color: var(--color-icon);
			mask: url(../img/download.svg) no-repeat center center / 80% auto;
		}

		.meta .download-menu-wrapper:hover .button-download,
		.meta .download-menu-wrapper.open .button-download {
			border-bottom-right-radius: 0;
			border-bottom-left-radius: 0;
		}

		.meta .download-menu {
			position: absolute;
			right: 0;
			top: 26px;
			white-space: nowrap;
			display: none;
		}

			.meta .download-menu-wrapper:hover .download-menu,
			.meta .download-menu-wrapper.open .download-menu {
				display: block;
			}

			.meta .download-menu li {
				display: block;
				text-align: right;
			}

				.meta .download-menu li a {
					display: block;
				}

				.meta .download-menu li a {
					border-radius: 5px 5px 0 0;
				}
				
				.meta .download-menu li + li a {
					border-top-left-radius: 0;
					border-top-right-radius: 0;
				}

				.meta .download-menu li:last-child a {
					border-bottom-left-radius: 5px;
					border-bottom-right-radius: 5px;
				}

				.meta .download-menu li:first-child a {
					border-top-right-radius: 0;
				}

	.meta .button-fullscreen a {
		display: inline-block;
		color: transparent;
		width: 24px;
		height: 24px;
		overflow: hidden;
		vertical-align: middle;
		position: relative;
	}

		.meta .button-fullscreen a:after {
			content: "";
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background-color: var(--color-icon);
			mask: url(../img/fullscreen.svg) no-repeat center center / 70% auto;
		}

	@media ( pointer: none ), ( pointer: coarse ) {

		.meta .button-fullscreen {
			display: none;
		}

	}

.template-overview .meta .button + .button {
	margin-left: 3px;
}

body.template-image {
	overflow: hidden;
	padding: 0;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

	.template-image main {
		min-height: unset;
	}

	.template-image footer {
		position: fixed;
		z-index: 50;
		width: calc(100% - 20px);
		left: 10px;
		bottom: 10px;
		transition: opacity 500ms ease-in-out;
	}

		body.cursor-hidden.template-image footer {
			opacity: 0;
		}

	.template-image .meta {
		position: fixed;
		left: 0;
		z-index: 50;
		padding: 10px;
		box-sizing: border-box;
	}

		.template-image .meta-top {
			top: 0;
			padding-right: 40px; /* spacing for lightmode-toggle */
		}

		.template-image .meta-bottom {
			bottom: 0;
			font-size: 0.8em;
			width: 100%;
			text-align: center;
			display: block;
			pointer-events: none;
		}

	.template-image .navigation {
		list-style-type: none;
		margin: 0;
	}

		.template-image .navigation a {
			display: block;
			position: fixed;
			top: 0;
			margin: 0;
			color: transparent;
			width: 30%;
			min-width: 50px;
			height: 100%;
			z-index: 42;
		}
		
			.template-image .navigation a:after {
				content: "";
				display: block;
				width: 20px;
				height: 40px;
				margin-top: -20px;
				position: absolute;
				top: 50%;
				background-color: var(--color-icon);
			}

			.template-image .navigation a.navigate-prev {
				left: 0;
			}
				
				.template-image .navigation a.navigate-prev:after {
					left: 40px;
					mask: url(../img/arrow-left.svg) no-repeat center center / contain;
				}

			.template-image .navigation a.navigate-next {
				right: 0;
			}

				.template-image .navigation a.navigate-next:after {
					right: 40px;
					mask: url(../img/arrow-right.svg) no-repeat center center / contain;
				}

			@media( hover: hover ) { /* has mouse */

				.template-image .navigation a {
					transition: opacity 500ms ease-in-out;
				}

				body.cursor-hidden.template-image .navigation a {
					opacity: 0;
					transition-delay: 300ms
				}

				.template-image .navigation a:hover {
					opacity: 0.6;
				}

			}

			@media( max-width: 480px ) {

				.template-image .navigation a:after {
					width: 15px;
					height: 20px;
					margin-top: -10px;
				}

				.template-image .navigation a.navigate-prev:after {
					left: 10px;
				}

				.template-image .navigation a.navigate-next:after {
					right: 10px;
				}

			}

	.image-information {
		margin: 50px 10px 0 auto;
		background-color: var(--color-button);
		color: var(--color-text);
		padding: 20px;
		box-sizing: border-box;
		border-radius: 5px;
		z-index: 43;
		border: none;
		position: relative;
		box-shadow: 0 0 15px rgba(0,0,0,.transition: all 150ms ease-in-out !important;);
	}

		body.transition .image-information {
			transition: margin 300ms ease-in-out !important;
		}

			body.cursor-hidden .image-information {
				margin-top: 10px;
			}

		.image-information .image-information-close {
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			width: 30px;
			height: 30px;
			color: transparent;
			overflow: hidden;
		}

			.image-information .image-information-close:after {
				content: "×";
				color: var(--color-icon);
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				line-height: 1;
			}

		.image-information ul {
			white-space: nowrap;
			margin: 0;
			padding: 0;
		}
		
			.image-information li {
				display: block;
			}

.image-wrapper,
.preload-wrapper {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 30;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 50px 20px;
	box-sizing: border-box;
	overflow: hidden;
}

	.image-wrapper .image-container,
	.preload-wrapper .image-container {
		display: flex;
		justify-content: center;
		align-items: center;
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
		position: relative;
	}

	.image-wrapper img,
	.preload-wrapper img {
		display: block;
		max-width: 100%;
		max-height: 100%;
		max-height: -webkit-fill-available; /* bugfix for mobile safari */
		object-fit: contain;
	}

	body.cursor-hidden.template-image .image-wrapper {
		cursor: none;
	}

	.preload-wrapper {
		pointer-events: none;
		opacity: 0;
		z-index: -20;
	}

.template-404 {
	text-align: center;
}

.template-download main {
	text-align: center;
}

.template-admin main,
.template-admin_create-hash main {
	margin: 0 auto;
	text-align: center;
}

	.template-admin .admin-gallery-list {
		text-align: left;
		display: inline-block;
		max-width: 1200px;
		margin: 0 auto;
	}
	
		.template-admin .admin-gallery-list ul {
			padding-inline-start: 1em;
		}
	
		.template-admin .admin-gallery-list li.is-hidden {
			opacity: 0.5;
		}