single lightbox

This commit is contained in:
2019-07-03 23:20:48 +02:00
parent d59b9afadf
commit 5f461d3ea2
14 changed files with 653 additions and 219 deletions

View File

@@ -100,7 +100,7 @@ object {
flex-direction: row;
justify-content: space-between;
align-items: center;
z-index: 3;
z-index: 3000;
/* -------------------------------------------------------------------------- */
/* header elements */
/* -------------------------------------------------------------------------- */
@@ -1571,7 +1571,8 @@ body.category.category-esemeny main {
/* single */
/* -------------------------------------------------------------------------- */
.single {
/* ---------------------------- single on mobile ---------------------------- */ }
/* ---------------------------- single on mobile ---------------------------- */
/* -------------------------------- lightbox -------------------------------- */ }
@media (min-width: 769px) {
.single .wrapper {
height: unset;
@@ -1809,6 +1810,62 @@ body.category.category-esemeny main {
border-top: 5rem solid #fff;
position: absolute;
z-index: -1; }
.single #cboxOverlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #000;
z-index: 10; }
.single #colorbox {
z-index: 12; }
.single #colorbox:focus {
border: none;
outline: none; }
.single #colorbox #cboxContent #cboxTitle {
padding: 1rem;
font: 900 1rem "Westeinde Caption";
color: #fff;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke: #fff 1px;
color: transparent;
width: 100%;
text-align: center; }
.single #colorbox #cboxContent #cboxCurrent {
display: none !important; }
.single #colorbox #cboxContent button {
position: absolute;
background-repeat: no-repeat;
background-position: center;
background-size: 100%; }
.single #colorbox #cboxContent button#cboxPrevious, .single #colorbox #cboxContent button#cboxNext {
background-image: url(../img/curvy_arrow.svg);
width: 2rem;
height: 4rem;
bottom: -5rem;
filter: invert(100);
z-index: 14; }
.single #colorbox #cboxContent button#cboxPrevious {
left: 1rem;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1); }
.single #colorbox #cboxContent button#cboxNext {
right: 1rem; }
.single #colorbox #cboxContent button#cboxClose {
background-image: url(../img/dis-plus.svg);
width: 2rem;
height: 2rem;
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: -3rem;
right: 1rem; }
/* -------------------------------------------------------------------------- */
/* TAG COLORS */