@oiz/stzh-components 2.11.0-beta1 → 2.11.0

package/dist/collection/components/stzh-gallery/stzh-gallery.css

@@ -0,0 +1,839 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Richtext
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Appnav
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Overlays / Dialogs
+ */
+/**
+ * Accordions
+ */
+/**
+ * Buttons
+ */
+/** Ratios */
+/** Toasts */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Container
+ */
+/**
+ * Ratios
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
+
+.pswp {
+  --pswp-bg: #000;
+  --pswp-placeholder-bg: #222;
+  
+
+  --pswp-root-z-index: 100000;
+  
+  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
+  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
+  
+  /* defined via js:
+  --pswp-transition-duration: 333ms; */
+  
+  --pswp-icon-color: #fff;
+  --pswp-icon-color-secondary: #4f4f4f;
+  --pswp-icon-stroke-color: #4f4f4f;
+  --pswp-icon-stroke-width: 2px;
+
+  --pswp-error-text-color: var(--pswp-icon-color);
+}
+
+
+/*
+	Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
+*/
+
+.pswp {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: var(--pswp-root-z-index);
+	display: none;
+	touch-action: none;
+	outline: 0;
+	opacity: 0.003;
+	contain: layout style size;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+/* Prevents focus outline on the root element,
+  (it may be focused initially) */
+.pswp:focus {
+  outline: 0;
+}
+
+.pswp * {
+  box-sizing: border-box;
+}
+
+.pswp img {
+  max-width: none;
+}
+
+.pswp--open {
+	display: block;
+}
+
+.pswp,
+.pswp__bg {
+	transform: translateZ(0);
+	will-change: opacity;
+}
+
+.pswp__bg {
+  opacity: 0.005;
+	background: var(--pswp-bg);
+}
+
+.pswp,
+.pswp__scroll-wrap {
+	overflow: hidden;
+}
+
+.pswp__scroll-wrap,
+.pswp__bg,
+.pswp__container,
+.pswp__item,
+.pswp__content,
+.pswp__img,
+.pswp__zoom-wrap {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.pswp__img,
+.pswp__zoom-wrap {
+	width: auto;
+	height: auto;
+}
+
+.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
+	cursor: -webkit-zoom-in;
+	cursor: -moz-zoom-in;
+	cursor: zoom-in;
+}
+
+.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
+	cursor: move;
+	cursor: -webkit-grab;
+	cursor: -moz-grab;
+	cursor: grab;
+}
+
+.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: grabbing;
+}
+
+/* :active to override grabbing cursor */
+.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
+.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
+.pswp__img {
+	cursor: -webkit-zoom-out;
+	cursor: -moz-zoom-out;
+	cursor: zoom-out;
+}
+
+
+/* Prevent selection and tap highlights */
+.pswp__container,
+.pswp__img,
+.pswp__button,
+.pswp__counter {
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.pswp__item {
+	/* z-index for fade transition */
+	z-index: 1;
+	overflow: hidden;
+}
+
+.pswp__hidden {
+	display: none !important;
+}
+
+/* Allow to click through pswp__content element, but not its children */
+.pswp__content {
+  pointer-events: none;
+}
+.pswp__content > * {
+  pointer-events: auto;
+}
+
+
+/*
+
+  PhotoSwipe UI
+
+*/
+
+/*
+	Error message appears when image is not loaded
+	(JS option errorMsg controls markup)
+*/
+.pswp__error-msg-container {
+  display: grid;
+}
+.pswp__error-msg {
+	margin: auto;
+	font-size: 1em;
+	line-height: 1;
+	color: var(--pswp-error-text-color);
+}
+
+/*
+class pswp__hide-on-close is applied to elements that
+should hide (for example fade out) when PhotoSwipe is closed
+and show (for example fade in) when PhotoSwipe is opened
+ */
+.pswp .pswp__hide-on-close {
+	opacity: 0.005;
+	will-change: opacity;
+	transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
+	z-index: 10; /* always overlap slide content */
+	pointer-events: none; /* hidden elements should not be clickable */
+}
+
+/* class pswp--ui-visible is added when opening or closing transition starts */
+.pswp--ui-visible .pswp__hide-on-close {
+	opacity: 1;
+	pointer-events: auto;
+}
+
+/* <button> styles, including css reset */
+.pswp__button {
+	position: relative;
+	display: block;
+	width: 50px;
+	height: 60px;
+	padding: 0;
+	margin: 0;
+	overflow: hidden;
+	cursor: pointer;
+	background: none;
+	border: 0;
+	box-shadow: none;
+	opacity: 0.85;
+	-webkit-appearance: none;
+	-webkit-touch-callout: none;
+}
+
+.pswp__button:hover,
+.pswp__button:active,
+.pswp__button:focus {
+  transition: none;
+  padding: 0;
+  background: none;
+  border: 0;
+  box-shadow: none;
+  opacity: 1;
+}
+
+.pswp__button:disabled {
+  opacity: 0.3;
+  cursor: auto;
+}
+
+.pswp__icn {
+  fill: var(--pswp-icon-color);
+  color: var(--pswp-icon-color-secondary);
+}
+
+.pswp__icn {
+  position: absolute;
+  top: 14px;
+  left: 9px;
+  width: 32px;
+  height: 32px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.pswp__icn-shadow {
+  stroke: var(--pswp-icon-stroke-color);
+  stroke-width: var(--pswp-icon-stroke-width);
+  fill: none;
+}
+
+.pswp__icn:focus {
+	outline: 0;
+}
+
+/*
+	div element that matches size of large image,
+	large image loads on top of it,
+	used when msrc is not provided
+*/
+div.pswp__img--placeholder,
+.pswp__img--with-bg {
+	background: var(--pswp-placeholder-bg);
+}
+
+.pswp__top-bar {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 60px;
+	display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+	z-index: 10;
+
+	/* allow events to pass through top bar itself */
+	pointer-events: none !important;
+}
+.pswp__top-bar > * {
+  pointer-events: auto;
+  /* this makes transition significantly more smooth,
+     even though inner elements are not animated */
+  will-change: opacity;
+}
+
+
+/*
+
+  Close button
+
+*/
+.pswp__button--close {
+  margin-right: 6px;
+}
+
+
+/*
+
+  Arrow buttons
+
+*/
+.pswp__button--arrow {
+  position: absolute;
+  top: 0;
+  width: 75px;
+  height: 100px;
+  top: 50%;
+  margin-top: -50px;
+}
+
+.pswp__button--arrow:disabled {
+  display: none;
+  cursor: default;
+}
+
+.pswp__button--arrow .pswp__icn {
+  top: 50%;
+  margin-top: -30px;
+  width: 60px;
+  height: 60px;
+  background: none;
+  border-radius: 0;
+}
+
+.pswp--one-slide .pswp__button--arrow {
+  display: none;
+}
+
+/* hide arrows on touch screens */
+.pswp--touch .pswp__button--arrow {
+  visibility: hidden;
+}
+
+/* show arrows only after mouse was used */
+.pswp--has_mouse .pswp__button--arrow {
+  visibility: visible;
+}
+
+.pswp__button--arrow--prev {
+  right: auto;
+  left: 0px;
+}
+
+.pswp__button--arrow--next {
+  right: 0px;
+}
+.pswp__button--arrow--next .pswp__icn {
+  left: auto;
+  right: 14px;
+  /* flip horizontally */
+  transform: scale(-1, 1);
+}
+
+/*
+
+  Zoom button
+
+*/
+.pswp__button--zoom {
+  display: none;
+}
+
+.pswp--zoom-allowed .pswp__button--zoom {
+  display: block;
+}
+
+/* "+" => "-" */
+.pswp--zoomed-in .pswp__zoom-icn-bar-v {
+  display: none;
+}
+
+
+/*
+
+  Loading indicator
+
+*/
+.pswp__preloader {
+  position: relative;
+  overflow: hidden;
+  width: 50px;
+  height: 60px;
+  margin-right: auto;
+}
+
+.pswp__preloader .pswp__icn {
+  opacity: 0;
+  transition: opacity 0.2s linear;
+  animation: pswp-clockwise 600ms linear infinite;
+}
+
+.pswp__preloader--active .pswp__icn {
+  opacity: 0.85;
+}
+
+@keyframes pswp-clockwise {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+
+/*
+
+  "1 of 10" counter
+
+*/
+.pswp__counter {
+  height: 30px;
+  margin-top: 15px;
+  margin-inline-start: 20px;
+  font-size: 14px;
+  line-height: 30px;
+  color: var(--pswp-icon-color);
+  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
+  opacity: 0.85;
+}
+
+.pswp--one-slide .pswp__counter {
+  display: none;
+}
+
+.pswp__dynamic-caption {
+  color: #fff;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
+  transition: opacity 120ms linear !important; /* override default */
+}
+
+.pswp-caption-content {
+  display: none;
+}
+
+.pswp__dynamic-caption a {
+  color: #fff;
+}
+
+.pswp__dynamic-caption--faded {
+  opacity: 0 !important;
+}
+
+.pswp__dynamic-caption--aside {
+  width: auto;
+  max-width: 300px;
+  padding: 20px 15px 20px 20px;
+  margin-top: 70px;
+}
+
+.pswp__dynamic-caption--below {
+  width: auto;
+  max-width: 700px;
+  padding: 15px 0 0;
+}
+
+.pswp__dynamic-caption--on-hor-edge {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.pswp__dynamic-caption--mobile {
+  width: 100%;
+  background: rgba(0,0,0,0.5);
+  padding: 10px 15px;
+
+  right: 0;
+  bottom: 0;
+
+  /* override styles that were set via JS.
+    as they interfere with size measurement */
+  top: auto !important; 
+  left: 0 !important;
+}
+:host {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: var(--stzh-font-style-regular);
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+  /* default outline value, which will be applied to all elements receiving focus
+  the .has-focus class is used by the focus target */
+}
+:host[hidden] {
+  display: none;
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
+}
+:host .has-focus {
+  outline: var(--stzh-flyingfocus-color) solid 0.125rem;
+  outline-offset: 0.3125rem;
+}
+:host .stzh-fylingfocus-focused {
+  outline-style: none !important;
+}
+:host .stzh-fylingfocus-focused::-moz-focus-inner {
+  border: 0 !important;
+}
+
+stzh-gallery {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: var(--stzh-font-style-regular);
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+  /* default outline value, which will be applied to all elements receiving focus
+  the .has-focus class is used by the focus target */
+}
+stzh-gallery[hidden] {
+  display: none;
+}
+stzh-gallery *,
+stzh-gallery *::before,
+stzh-gallery *::after {
+  box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
+}
+stzh-gallery .has-focus {
+  outline: var(--stzh-flyingfocus-color) solid 0.125rem;
+  outline-offset: 0.3125rem;
+}
+stzh-gallery .stzh-fylingfocus-focused {
+  outline-style: none !important;
+}
+stzh-gallery .stzh-fylingfocus-focused::-moz-focus-inner {
+  border: 0 !important;
+}
+
+.stzh-gallery {
+  /* Lightbox elements */
+  /* Grid variant */
+}
+.stzh-gallery__carousel-actions, .stzh-gallery__actions {
+  transition: opacity 0.1s linear;
+}
+.stzh-gallery__carousel-actions.is-hidden-during-animation, .stzh-gallery__slide.is-hidden-during-animation .stzh-gallery__actions {
+  opacity: 0;
+}
+.stzh-gallery__actions {
+  padding: var(--stzh-space-xsmall);
+}
+.stzh-gallery__pswp {
+  --pswp-bg: var(--stzh-color-white);
+}
+.stzh-gallery__pswp .pswp__icn {
+  fill: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+.stzh-gallery__pswp .pswp__top-bar {
+  align-items: flex-start;
+}
+.stzh-gallery__pswp .pswp__img-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+.stzh-gallery__pswp .pswp__button {
+  opacity: 1;
+  width: 3rem;
+  height: 3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  background-color: var(--stzh-color-white);
+  border: 0.0625rem solid var(--stzh-color-primary, var(--stzh-color-zueriblue));
+  border-radius: var(--stzh-button-border-radius);
+  transition-duration: var(--stzh-base-transition-animation-speed);
+  transition-property: color, background-color, border-color, opacity;
+}
+.stzh-gallery__pswp .pswp__button:hover {
+  color: var(--stzh-color-white);
+  border-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+  background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-gallery__pswp .pswp__button svg {
+  width: var(--stzh-icon-size-default);
+  height: var(--stzh-icon-size-default);
+}
+.stzh-gallery__pswp .pswp__button--close {
+  margin-top: var(--stzh-space-xsmall);
+  margin-right: var(--stzh-space-xsmall);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-gallery__pswp .pswp__button--close {
+    margin-top: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-gallery__pswp .pswp__button--close {
+    margin-top: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-gallery__pswp .pswp__button--close {
+    margin-right: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-gallery__pswp .pswp__button--close {
+    margin-right: var(--stzh-space-medium);
+  }
+}
+.stzh-gallery__pswp .pswp__button--arrow {
+  margin-top: -1.25rem;
+}
+.stzh-gallery__pswp .pswp__button--arrow--prev {
+  left: var(--stzh-space-xsmall);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-gallery__pswp .pswp__button--arrow--prev {
+    left: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-gallery__pswp .pswp__button--arrow--prev {
+    left: var(--stzh-space-medium);
+  }
+}
+.stzh-gallery__pswp .pswp__button--arrow--next {
+  right: var(--stzh-space-xsmall);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-gallery__pswp .pswp__button--arrow--next {
+    right: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-gallery__pswp .pswp__button--arrow--next {
+    right: var(--stzh-space-medium);
+  }
+}
+.stzh-gallery__pswp.pswp--zoomed-in .pswp__button {
+  opacity: 0;
+  pointer-events: none;
+}
+.stzh-gallery__pswp.pswp--one-image .pswp__button--arrow {
+  display: none;
+}
+.stzh-gallery__pswp .pswp__dynamic-caption {
+  font-size: var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));
+  line-height: var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));
+  color: var(--stzh-base-color);
+  overflow: auto;
+  transition: opacity var(--stzh-base-transition-animation-speed);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-gallery__pswp .pswp__dynamic-caption {
+    font-size: var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));
+    line-height: var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height));
+  }
+}
+.stzh-gallery__pswp .pswp__dynamic-caption--below, .stzh-gallery__pswp .pswp__dynamic-caption--mobile {
+  max-width: initial;
+  max-height: calc(50vh - 3rem);
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+@media screen and (min-width: 600px) {
+  .stzh-gallery__pswp .pswp__dynamic-caption--below, .stzh-gallery__pswp .pswp__dynamic-caption--mobile {
+    max-height: 33.333vh;
+  }
+}
+@media screen and (min-width: 800px) {
+  .stzh-gallery__pswp .pswp__dynamic-caption--below, .stzh-gallery__pswp .pswp__dynamic-caption--mobile {
+    padding-top: var(--stzh-space-xsmall);
+    padding-bottom: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-gallery__pswp .pswp__dynamic-caption--below, .stzh-gallery__pswp .pswp__dynamic-caption--mobile {
+    padding-top: var(--stzh-space-small);
+    padding-bottom: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-gallery__pswp .pswp__dynamic-caption--below, .stzh-gallery__pswp .pswp__dynamic-caption--mobile {
+    padding-top: var(--stzh-space-medium);
+    padding-bottom: var(--stzh-space-xxxlarge);
+  }
+}
+.stzh-gallery__pswp .pswp__dynamic-caption--mobile {
+  padding-left: var(--stzh-space-xsmall);
+  padding-right: var(--stzh-space-xsmall);
+  background: var(--stzh-color-white56);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-gallery__pswp .pswp__dynamic-caption--mobile {
+    padding-left: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-gallery__pswp .pswp__dynamic-caption--mobile {
+    padding-left: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-gallery__pswp .pswp__dynamic-caption--mobile {
+    padding-right: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-gallery__pswp .pswp__dynamic-caption--mobile {
+    padding-right: var(--stzh-space-medium);
+  }
+}
+.stzh-gallery__pswp .pswp__caption-wrapper {
+  display: flex;
+}
+.stzh-gallery__pswp .pswp__caption-counter:not(:empty) {
+  margin-right: var(--stzh-space-xsmall);
+}
+.stzh-gallery__pswp .pswp__caption-counter, .stzh-gallery__pswp .pswp__caption-heading {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: var(--stzh-font-style-heavy);
+}
+.stzh-gallery__pswp .pswp__caption-text:not(:empty) + .pswp__caption-copyright:not(:empty) {
+  margin-left: var(--stzh-space-xxsmall);
+}
+.stzh-gallery__pswp .pswp__caption-copyright {
+  font-family: var(--stzh-font-family-medium);
+  font-weight: var(--stzh-font-weight-medium);
+  font-style: var(--stzh-font-style-medium);
+  font-size: var(--stzh-font-femto-font-size);
+  line-height: var(--stzh-font-femto-text-line-height);
+  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+}
+.stzh-gallery--grid {
+  display: grid;
+  gap: var(--stzh-grid-gutter);
+}
+@media screen and (min-width: 600px) {
+  .stzh-gallery--grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--stzh-grid-gutter-small);
+  }
+}
+@media screen and (min-width: 1024px) {
+  .stzh-gallery--grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: var(--stzh-grid-gutter-medium);
+  }
+}