210 lines
4.7 KiB
CSS
210 lines
4.7 KiB
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 : */
|