gallery/css/grid-n-view.css

/**********************************************************************
* 
*
*
**********************************************************************/


/********************************************************* Config ****/

:root {
	/* dimensions */
	--gallery-current-border-size: 0.7em;
	--gallery-padding: 3em;
	--gallery-padding-horizontal: var(--gallery-padding);
	--gallery-padding-vertical: var(--gallery-current-border-size);
	--gallery-padding-top: var(--gallery-padding-vertical);
	--gallery-padding-bottom: var(--gallery-padding-vertical);
	--gallery-padding-left: var(--gallery-padding-horizontal);
	--gallery-padding-right: var(--gallery-padding-horizontal);
	--gallery-image-scroll-margin: 1em;
	--gallery-scrollbar-width: 0.5em;

	--lightbox-frame-size: 5vmin;
	--lightbox-image-margin-top: 0.75;
	--lightbox-button-size: 4em;

	/* theme */
	--gallery-text-color: black;
	--gallery-secondary-color: silver;
	--gallery-background-color: white;

	--lightbox-text-color: black;
	--lightbox-background-color: white;
	/*--lightbox-background-color: rgba(0,0,0,0.8);*/
}

.gallery-dark {
	--gallery-text-color: silver;
	--gallery-secondary-color: gray;
	--gallery-background-color: black;
}

.lightbox-dark {
	--lightbox-text-color: silver;
	--lightbox-background-color: black;
}



/****************************************************** Scrolling ****/

::-webkit-scrollbar {
	width: var(--gallery-scrollbar-width);
}
::-webkit-scrollbar-track {
	background-color: transparent;
	border-radius: 100px;
}
::-webkit-scrollbar-thumb {
	background-color: var(--gallery-secondary-color);
	border-radius: 100px;
}
body {
	overflow-y: scroll;

	color: var(--gallery-text-color);
	background: var(--gallery-background-color);
}


/******************************************************** Gallery ****/

/* XXX need to account for scrollbar popping in and out */
.gallery {
	padding-top: var(--gallery-padding-top);
	padding-bottom: var(--gallery-padding-bottom);
	padding-left: calc(
		var(--gallery-scrollbar-width) 
		+ var(--gallery-padding-left) );
	padding-right: var(--gallery-padding-right);

	color: var(--gallery-text-color);
	background: var(--gallery-background-color);
}
.gallery .images {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-content: flex-start;
	flex-flow: row wrap;
}
.gallery .images img {
	height: 300px;
	width: auto;
	scroll-margin: var(--gallery-image-scroll-margin);
	image-rendering: crisp-edges;

	cursor: pointer;
}

/* selection marker... */
.gallery .images img.current {
	z-index: 1;
	box-shadow: 
		0px 0px 0px var(--gallery-current-border-size) rgba(255,255,255,1),
		0.4em 0.4em 3em 0em rgba(0,0,0,0.8);
}


/*************************************************** Image markers ***/

.gallery .images img+.mark {
	z-index: 1;
	position: relative;
}
.gallery.lightboxed .images img+.mark {
	z-index: 2;
	position: fixed;
	bottom: 0;
	right: 0;
}

/* marker: selected */
.gallery .images img+.mark.selected:after {
	content: "";
	position: absolute;
	display: block;
	width: 1em;
	height: 1em;
	right: 0.5em;
	bottom: 0.5em;
	border-radius: 50%;

	background: blue;

	box-shadow: 0em 0em 0em 0.05em rgba(255,255,255,1);

	cursor: pointer;
}



/******************************************************* Lightbox ****/

.gallery .lightbox {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 1;

	text-align: center;

	color: var(--lightbox-text-color);
	background: var(--lightbox-background-color);
}
.gallery.lightboxed .lightbox {
	display: block;
}
.gallery .lightbox.show-caption:before {
	content: attr(caption);
	position: absolute;
	bottom: 0.5em;
	left: 0.5em;
}
.gallery .lightbox.clickable {
	cursor: pointer;
}
/* XXX add metadata display... */
.gallery .lightbox img {
	object-fit: contain;
	width: calc(
		100vw 
		- var(--lightbox-frame-size) * 2);
	height: calc(
		100vh 
		- var(--lightbox-frame-size) * 2);
	margin-top: calc(
		var(--lightbox-frame-size) 
		* var(--lightbox-image-margin-top)); 
}
/* controls: next/prev... */
.gallery .lightbox .button {
	cursor: pointer;
	font-size: var(--lightbox-button-size);
	padding: 0 0.25em;
	filter: saturate(0);
	opacity: 0.1;
}
.gallery .lightbox .button:hover {
	opacity: 1;
	filter: saturate(1);
}
/* controls: close... */
.gallery .lightbox .button.close {
	position: absolute;
	top: 0px;
	right: 0px;
}
.gallery .lightbox .button.close:after {
	content: "×";
	color: red;
}


/**********************************************************************
* vim:set ts=4 sw=4 :                                                */