Photography/assets/sass/custom.scss

@import 'libs/vars';
@import 'libs/functions';

/* Utilities */
.text-fg {
	color: _palette(fg);
}

#folder-picker-wrap {
	display: inline-flex;
	align-items: center;
	padding: 0 0.5em;

	#folder-picker {
		width: auto;
		min-width: 13rem;
		height: 2.35em;
		margin: 0;
		padding: 0 2.25em 0 0.8em;
		border-radius: 4px;
		background-color: rgba(255, 255, 255, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.18);
		color: _palette(fg-bold);
		font-size: 0.78em;
		text-transform: none;
		letter-spacing: 0;
	}
}

@media screen and (max-width: 736px) {
	#folder-picker-wrap {
		max-width: 48vw;
		padding: 0 0.35em;

		#folder-picker {
			min-width: 0;
			width: 100%;
			font-size: 0.74rem;
		}
	}
}

/* ==================== Selection Mode ==================== */

#selection-toolbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: rgba(31, 34, 36, 0.95);
	padding: 0.75em 1.5em;
	display: flex;
	align-items: center;
	gap: 1em;
	z-index: _misc(z-index-base) + 3;
	transform: translateY(-100%);
	transition: transform 0.3s ease;
	box-sizing: border-box;

	&.visible {
		transform: translateY(0);
	}

	#sel-count {
		color: _palette(fg-bold);
		font-weight: _font(weight-extrabold);
		margin-right: auto;
		white-space: nowrap;
	}

	button {
		white-space: nowrap;
	}
}

body.selection-mode {
	#main .thumb {
		cursor: pointer;
		position: relative;

		// Checkbox unten-rechts (wird nicht von Toolbar ueberlagert)
		&::before {
			content: '';
			position: absolute;
			bottom: 0.6em;
			right: 0.6em;
			width: 1.6em;
			height: 1.6em;
			border: 2px solid rgba(255, 255, 255, 0.8);
			border-radius: 4px;
			background: rgba(0, 0, 0, 0.5);
			z-index: 2;
			transition: all 0.2s ease;
			pointer-events: none;
		}

		// Leichtes Overlay damit klar ist: gesamtes Bild anklickbar
		.image {
			opacity: 0.85;
			transition: opacity 0.2s ease;
		}

		&:active .image {
			opacity: 0.6;
		}

		&.selected {
			&::before {
				background: _palette(accent1);
				border-color: _palette(accent1);
			}

			.image {
				opacity: 1;
				outline: 3px solid _palette(accent1);
				outline-offset: -3px;
			}
		}
	}
}

@media screen and (max-width: 736px) {
	#selection-toolbar {
		top: _size(header);
		padding: 0.6em 1em;
		gap: 0.6em;

		#sel-count {
			font-size: 0.9em;
		}

		button {
			font-size: 0.85em;
			padding: 0.5em 1em;
		}
	}

	body.selection-mode #main .thumb {
		&::before {
			bottom: 0.3em;
			right: 0.3em;
			width: 2em;
			height: 2em;
			border-width: 2.5px;
		}

		&.selected .image {
			outline-width: 4px;
		}
	}
}

/* Footer */
#footer {
	.presentify {
		margin: 0 0 1.4em 0;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 1rem;
		align-items: center;

		.presentify-logo {
			display: flex;
			align-items: center;
			justify-content: center;
			a {
				display: flex;
				align-items: center;
				justify-content: center;
				border: 0;
			}

			img {
				width: 72px;
				height: 72px;
				display: block;
			}
		}

		.presentify-text {
			margin: 0;
		}
	}
}