1 /*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
8 2. Share modal and links
9 3. Index indicator ("1 of X" counter)
12 6. Additional styles (root element, top bar, idle state, hidden state, etc.)
16 // PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.
20 @import "../main-settings";
29 /* <button> css reset */
37 -webkit-appearance: none;
44 transition: opacity 0.2s;
63 /* pswp__ui--over-close class it added when mouse is over element that should close gallery */
64 .pswp__ui--over-close .pswp__button--close {
69 .pswp__button--arrow--left:before,
70 .pswp__button--arrow--right:before {
71 background: url(#{$pswp__assets-path}default-skin.png) 0 0 no-repeat;
72 background-size: 264px 88px;
77 @media (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
79 /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
80 .pswp--svg .pswp__button,
81 .pswp--svg .pswp__button--arrow--left:before,
82 .pswp--svg .pswp__button--arrow--right:before {
83 background-image: url(#{$pswp__assets-path}default-skin.svg);
86 .pswp--svg .pswp__button--arrow--left,
87 .pswp--svg .pswp__button--arrow--right {
92 .pswp__button--close {
93 background-position: 0 -44px;
96 .pswp__button--share {
97 background-position: -44px -44px;
104 .pswp--supports-fs .pswp__button--fs {
108 .pswp--fs .pswp__button--fs {
109 background-position: -44px 0;
112 .pswp__button--zoom {
114 background-position: -88px 0;
117 .pswp--zoom-allowed .pswp__button--zoom {
121 .pswp--zoomed-in .pswp__button--zoom {
122 background-position: -132px 0;
125 /* no arrows on touch screens */
127 .pswp__button--arrow--left,
128 .pswp__button--arrow--right {
134 Arrow buttons hit area
135 (icon is added to :before pseudo-element)
137 .pswp__button--arrow--left,
138 .pswp__button--arrow--right {
147 .pswp__button--arrow--left {
151 .pswp__button--arrow--right {
155 .pswp__button--arrow--left:before,
156 .pswp__button--arrow--right:before {
159 background-color: rgba(0,0,0,0.3);
165 .pswp__button--arrow--left:before {
167 background-position: -138px -44px;
170 .pswp__button--arrow--right:before {
172 background-position: -94px -44px;
178 2. Share modal/popup and links
184 -webkit-user-select: none;
185 -moz-user-select: none;
191 background: rgba(0, 0, 0, 0.5);
198 z-index: $pswp__root-z-index + 100;
200 transition: opacity 0.25s ease-out;
201 -webkit-backface-visibility: hidden;
202 will-change: opacity;
205 .pswp__share-modal--hidden {
209 .pswp__share-tooltip {
210 z-index: $pswp__root-z-index + 120;
218 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
219 transform: translateY(6px);
220 transition: transform 0.25s;
221 -webkit-backface-visibility: hidden;
222 will-change: transform;
228 text-decoration: none;
233 text-decoration: none;
239 /* round corners on the first/last list item */
240 border-radius: 2px 2px 0 0;
244 border-radius: 0 0 2px 2px;
249 .pswp__share-modal--fade-in {
252 .pswp__share-tooltip {
253 transform: translateY(0);
257 /* increase size of share links on touch devices */
258 .pswp--touch .pswp__share-tooltip a {
262 a.pswp__share--facebook {
271 border: 6px solid rgba(0, 0, 0, 0);
272 border-bottom-color: #FFF;
273 -webkit-pointer-events: none;
274 -moz-pointer-events: none;
275 pointer-events: none;
283 border-bottom-color: #3E5C9A;
288 a.pswp__share--twitter {
295 a.pswp__share--pinterest {
302 a.pswp__share--download {
311 3. Index indicator ("1 of X" counter)
347 .pswp__caption__center {
357 .pswp__caption--empty {
361 /* Fake caption element, used to calculate height of next/prev image */
362 .pswp__caption--fake {
369 5. Loading indicator (preloader)
371 You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
383 transition: opacity 0.25s ease-out;
384 will-change: opacity;
388 .pswp__preloader__icn {
394 .pswp__preloader--active {
397 .pswp__preloader__icn {
398 /* We use .gif in browsers that don't support CSS animation */
399 background: url(#{$pswp__assets-path}preloader.gif) 0 0 no-repeat;
403 .pswp--css_animation {
404 .pswp__preloader--active {
407 .pswp__preloader__icn {
408 animation: clockwise 500ms linear infinite;
411 .pswp__preloader__donut {
412 animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
416 .pswp__preloader__icn {
428 .pswp__preloader__cut {
430 The idea of animating inner circle is based on Polymer ("material") loading indicator
431 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
439 .pswp__preloader__donut {
440 box-sizing: border-box;
443 border: 2px solid #FFF;
445 border-left-color: transparent;
446 border-bottom-color: transparent;
455 @media screen and (max-width: 1024px) {
465 @keyframes clockwise {
466 0% { transform: rotate(0deg) }
467 100% { transform: rotate(360deg) }
470 @keyframes donut-rotate {
471 0% { transform: rotate(0) }
472 50% { transform: rotate(-140deg) }
473 100% { transform: rotate(0) }
483 /* root element of UI */
485 -webkit-font-smoothing: auto;
488 z-index: $pswp__root-z-index + 50;
491 /* top black bar with buttons and "1 of X" indicator */
502 .pswp--has_mouse .pswp__button--arrow--left,
503 .pswp--has_mouse .pswp__button--arrow--right {
504 -webkit-backface-visibility: hidden;
505 will-change: opacity;
506 transition: opacity $pswp__controls-transition-duration cubic-bezier(.4,0,.22,1);
509 /* pswp--has_mouse class is added only when two subsequent mousemove events occur */
511 .pswp__button--arrow--left,
512 .pswp__button--arrow--right {
519 background-color: rgba(0,0,0,0.5);
522 /* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
526 background-color: rgba(0,0,0,0.3);
530 /* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
537 .pswp__button--arrow--left,
538 .pswp__button--arrow--right {
544 pswp__ui--hidden class is added when controls are hidden
545 e.g. when user taps to toggle visibility of controls
550 .pswp__button--arrow--left,
551 .pswp__button--arrow--right {
552 /* Force paint & create composition layer for controls. */
557 /* pswp__ui--one-slide class is added when there is just one item in gallery */
558 .pswp__ui--one-slide {
559 .pswp__button--arrow--left,
560 .pswp__button--arrow--right,
566 .pswp__element--disabled {
567 display: none !important;
570 @if $pswp__include-minimal-style == true {
571 .pswp--minimal--dark {