CGM_Public/pretix_original
2
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-05-08 15:44:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Widget: add lightbox for product images (Z#23123811) (#3439)

Browse Source
This commit is contained in:
Richard Schreiber
2023-06-29 12:23:00 +02:00
committed by GitHub
parent 586f42557f
commit 1d49c98cf2
4 changed files with 171 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/pretix/static/pretixpresale/scss/widget.scss
View File

@@ -768,6 +768,102 @@
}
}
.pretix-widget-lightbox-holder {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
z-index: 16777271;
visibility: hidden;
opacity: 0;
transition: opacity 0.5s, visibility 0.5s;
display: flex;
align-items: center;
justify-content: center;
.pretix-widget-lightbox-loading svg {
margin: 40px;
-webkit-animation: pretix-widget-spin 6s linear infinite;
-moz-animation: pretix-widget-spin 6s linear infinite;
animation: pretix-widget-spin 6s linear infinite;
}
&.pretix-widget-lightbox-shown {
visibility: visible;
opacity: 1;
transition: opacity 0.5s, visibility 0.5s;
}
.pretix-widget-lightbox-inner {
position: relative;
background: white;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
-webkit-box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
-moz-box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
box-sizing: border-box;
padding: 10px;
max-width: 90%;
max-height: 90%;
}
&.pretix-widget-lightbox-isloading .pretix-widget-lightbox-inner {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.pretix-widget-lightbox-image {
margin: 0;
padding: 0;
text-align: center;
}
.pretix-widget-lightbox-image img {
max-width: 80vw;
max-height: 80vh;
object-fit: scale-down;
}
.pretix-widget-lightbox-image figcaption {
margin: 0.5em 0 0;
}
.pretix-widget-lightbox-close {
position: absolute;
right: -12px;
top: -12px;
width: 24px;
height: 24px;
background: $brand-primary;
margin: 0;
border: none;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
text-align: center;
color: white;
font-weight: bold;
font-family: sans-serif;
text-decoration: none;
padding: 4px 0;
display: inline-block;
line-height: 16px;
cursor: pointer;
}
.pretix-widget-lightbox-close svg {
display: inline-block;
border: none;
}
}
.pretix-widget-primary-color {
/* in SVG */
fill: $brand-primary;