/*/////////////////////////////////////////////////////////////////////////////
// Version 2.1 Signed by Sid @ BENTO on 2026-04-15 T 22:06:37 -06:00
// Authentication (do not edit) $eEAAi6qi$
///////////////////////////////////////////////////////////////////////////////
//
// Copyright (c) 2026 by Sid Paral. All rights reserved
//
// Permission to use, copy, modify, and distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
// WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
// MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
// ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
// WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
// ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
// OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
//
///////////////////////////////////////////////////////////////////////////////
//
// hroch-litebox-gallery.css
//
/////////////////////////////////////////////////////////////////////////////*/
:root {
--hlbg-css: gallery;
--hlbg-padding: 0.5rem;
--hlbg-padding-controls-side: var(--hlbg-padding);
--hlbg-color-fore: #CCC;
--hlbg-color-back: #222;
--hlbg-color-line: #CCC;
--hlbg-color-link-reg: #CCF;
--hlbg-color-link-vis: #FCF;
--hlbg-color-link-hov: #FFC;
--hlbg-color-link-act: #FFC;
--hlbg-color-back-veil: rgba(0,0,0,.666);
--hlbg-color-fore-ctl: #CCC;
--hlbg-color-back-ctl: #444;
--hlbg-color-back-ctl-hov: #44C;
--hlbg-color-back-ctl-move: #99F;
--hlbg-color-icon-ctl: #CCC;
--hlbg-color-border-ctl: #000;
--hlbg-font-size-text: 1.0rem;
--hlbg-font-size-title: 2.0rem;
--hlbg-font-size-subtit: 1.2rem;
--hlbg-font-size-footer: 0.9rem;
--hlbg-size-line: 1px;
--hlbg-max-size-ctl: 2.0rem;
--hlbg-size-ctl: 10vw;
--hlbg-delay-swipe: 1s;
--hlbg-delay-fade: 1s;
--hlbg-delay-unfade: 0.1s;
--hlbg-delay-showhide: 0.25s;
}
/*///////////////////////////////////////////////////////////////////////////*/
.hlbg-l, .hlbg-r,
.hlbg-u, .hlbg-d {}
.hlbg-envelope {
position: fixed;
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
background-color: var(--hlbg-color-back-veil);
opacity: 1.0;
display: block;
}
.hlbg-fade {
transition: opacity var(--hlbg-delay-fade) ease-in-out;
}
.hlbg-unfade {
transition: opacity var(--hlbg-delay-unfade) ease-in-out;
}
.hlbg-faint {
transition: opacity var(--hlbg-delay-swipe) ease-in-out;
}
.hlbg-holder {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.hlbg-img {
position: absolute;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
border: var(--hlbg-padding) solid black;
border-radius: calc(2 * var(--hlbg-padding));
background-color: var(--hlbg-color-icon-ctl);
padding: var(--hlbg-size-line);
display: block;
}
.hlbg-swipe {
transition: translate var(--hlbg-delay-swipe) ease-in-out;
}
.hlbg-controls {
position: fixed;
width: 100%;
padding: var(--hlbg-padding);
padding-left: var(--hlbg-padding-controls-side);
padding-right: var(--hlbg-padding-controls-side);
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
transition: opacity var(--hlbg-delay-showhide) ease-in-out;
}
.hlbg-controls.hlbg-u {
align-items: flex-start;
}
.hlbg-controls.hlbg-d {
bottom: 0px;
align-items: flex-end;
}
.hlbg-circle {
border: var(--hlbg-padding) solid var(--hlbg-color-border-ctl);
border-radius: 50%;
background-color: var(--hlbg-color-back-ctl);
cursor: pointer;
display: block;
}
.hlbg-circle:hover {
background-color: var(--hlbg-color-back-ctl-hov);
}
.hlbg-close,
.hlbg-prev,
.hlbg-next {
background-color: var(--hlbg-color-icon-ctl);
mask-size: 66%;
mask-repeat: no-repeat;
mask-position: center;
border-radius: 50%;
width: var(--hlbg-size-ctl);
height: var(--hlbg-size-ctl);
max-width: var(--hlbg-max-size-ctl);
max-height: var(--hlbg-max-size-ctl);
display: block;
transition: opacity var(--hlbg-delay-unfade) ease-in-out;
}
.hlbg-close {
mask-size: 50%;
mask-image: url('data:image/svg+xml,');
}
.hlbg-prev {
mask-image: url('data:image/svg+xml,');
}
.hlbg-next {
mask-image: url('data:image/svg+xml,');
}
.hlbg-txgroup {
background-color: var(--hlbg-color-back-ctl);
color: var(--hlbg-color-fore-ctl);
border: var(--hlbg-padding) solid var(--hlbg-color-border-ctl);
border-radius: 100vh;
padding: var(--hlbg-padding);
padding-left: calc(2 * var(--hlbg-padding));
padding-right: calc(2 * var(--hlbg-padding));
font-size: var(--hlbg-font-size-footer);
display: flex;
flex-flow: column nowrap;
justify-content: normal;
align-items: center;
text-align: center;
transition: opacity var(--hlbg-delay-unfade) ease-in-out;
}
#capBox { cursor: pointer; }
.hlbg-trans #capBox { cursor: default; }
.hlbg-off { opacity: 0.0; }
.hlbg-img.hlbg-l { translate: -110vw 0px; }
.hlbg-img.hlbg-r { translate: 110vw 0px; }
.hlbg-img.hlbg-u { translate: 0px -110vw; }
.hlbg-img.hlbg-d { translate: 0px 110vw; }
.hlbg-patience {
position: absolute;
z-index: 100;
left: 50%;
top: 50%;
translate: -50% -50%;
width: calc(10vw + 10vh);
height: calc(10vw + 10vh);
background-image: url('data:image/svg+xml;charset=utf8,');
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
opacity: 0.33;
display: block;
}
.lb-spinner { animation: _lb-rotate-right 12s linear infinite; }
.hlbg-spinner.hlbg-l,
.hlbg-l .hlbg-spinner { animation: _hlbg-rotate-left 12s linear infinite; }
.hlbg-hidden { visibility: hidden; }
.hlbg-trans { opacity: 0.0; }
@keyframes _hlbg-rotate-right
{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes _hlbg-rotate-left
{
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
/*///////////////////////////////////////////////////////////////////////////*/