mirror of
https://github.com/sbrl/Minetest-WorldEditAdditions.git
synced 2024-07-03 02:04:57 +00:00
Starbeamrainbowlabs
8a500735c0
It's an absolutely *glorious* series of hacks :D Including, but certainly not limited to: - CSS Grids with only 1 cell - Flexboxes used for positioning text nodes - Element heights set indirectly with the width property - z-index abused to show the current image in the sequence it's undefined which image will be shown initially, but given the amount of effort this took I'm ok with that If anyone knows how to shift the <picture> element 0.25em upwards *without* moving the image so that I can remove the upper and lower borders, I'd lvoe to know. I've tried everything - including settingit's height to zero etc. In the end I've padded out the top to balance it out instead :P
110 lines
2.5 KiB
CSS
110 lines
2.5 KiB
CSS
.gallerybox {
|
|
display: flex;
|
|
justify-content: center;
|
|
/*
|
|
The <picture /> element causes a small amount of extra padding at the
|
|
bottom of the element, so we use this to balance out the look at the top
|
|
ideally we'd shift the <picture> out of the way, but we can't without also
|
|
shifting the <img /> inside
|
|
*/
|
|
padding-top: 0.2em;
|
|
}
|
|
|
|
.gallerybox-gallery {
|
|
--gallerybox-nextprev-padding: 5vw;
|
|
--gallerybox-nextprev-move: 0.2em;
|
|
--gallerybox-nextprev-hover: 0.1em;
|
|
|
|
max-width: 80vmax;
|
|
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
grid-template-rows: auto;
|
|
grid-template-areas: "main";
|
|
}
|
|
|
|
/* .gallerybox picture {
|
|
position: relative;
|
|
top: -1em;
|
|
}
|
|
.gallerybox picture > img {
|
|
position: relative;
|
|
top: 1em;
|
|
} */
|
|
|
|
.gallerybox-item {
|
|
grid-area: main;
|
|
z-index: 2;
|
|
}
|
|
|
|
.gallerybox-item > figcaption {
|
|
background: hsla(0, 0%, 95%, 0.75);
|
|
position: absolute;
|
|
bottom: 0.25em; left: 0; right: 0;
|
|
padding: 0.75em 1em;
|
|
text-align: center;
|
|
}
|
|
|
|
.gallerybox-gallery > .gallerybox-item:target {
|
|
display: block;
|
|
z-index: 100;
|
|
}
|
|
/* .gallerybox-gallery > .gallerybox-item:not(:target) {
|
|
display: none;
|
|
z-index: 2;
|
|
}
|
|
.gallerybox-item:not(:target) ~ .gallerybox-item:last-child {
|
|
display: block;
|
|
z-index: 2;
|
|
} */
|
|
|
|
/*
|
|
.gallerybox-gallery:target-within > .gallerybox-item:target {
|
|
display: block;
|
|
}
|
|
.gallerybox-gallery:target-within > .gallerybox-item:not(:target) {
|
|
display: none;
|
|
} */
|
|
|
|
|
|
.gallerybox-item {
|
|
position: relative;
|
|
}
|
|
.gallerybox-item img {
|
|
max-width: 100%;
|
|
}
|
|
:where(.gallerybox-prev, .gallerybox-next) {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
position: absolute; top: 0;
|
|
vertical-align: middle;
|
|
font-weight: bold;
|
|
font-size: 4em;
|
|
color: hsla(0, 0%, 100%, 0.8) !important;
|
|
text-decoration: none;
|
|
transform: none;
|
|
transition: transform 0.25s;
|
|
}
|
|
.gallerybox-item > .gallerybox-prev {
|
|
padding-left: var(--gallerybox-nextprev-padding);
|
|
left: 0;
|
|
}
|
|
.gallerybox-item > .gallerybox-next {
|
|
padding-right: var(--gallerybox-nextprev-padding);
|
|
right: 0;
|
|
}
|
|
|
|
|
|
:where(.gallerybox-prev, .gallerybox-next):hover {
|
|
color: hsla(0, 0%, 100%, 1) !important;
|
|
}
|
|
:is(.gallerybox-prev, .gallerybox-next):active {
|
|
color: hsla(0, 0%, 100%, 1) !important;
|
|
}
|
|
.gallerybox-next:hover { transform: translateX(calc(var(--gallerybox-nextprev-hover) * -1)); }
|
|
.gallerybox-prev:hover { transform: translateX(var(--gallerybox-nextprev-hover)); }
|
|
|
|
.gallerybox-prev:active { transform: translateX(calc(var(--gallerybox-nextprev-move) * -1)); }
|
|
.gallerybox-next:active { transform: translateX(var(--gallerybox-nextprev-move)); }
|