src/scss/photoswipe/main.scss

   1 /*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
   2
   3 /*
   4         Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
   5 */
   6
   7 // PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.
   8
   9 @import "main-settings";
  10
  11
  12 /* pswp = photoswipe */
  13 .pswp {
  14         display: none;
  15         position:absolute;
  16         width: 100%;
  17         height: 100%;
  18         left:0;
  19         top:0;
  20         overflow: hidden;
  21         -ms-touch-action: none;
  22         touch-action: none;
  23         z-index: $pswp__root-z-index;
  24         -webkit-text-size-adjust: 100%;
  25         /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
  26         -webkit-backface-visibility: hidden;
  27         outline: none;
  28
  29         @if $pswp__box-sizing-border-box == true {
  30                 * {
  31                         box-sizing: border-box;
  32                 }
  33         }
  34
  35         img {
  36                 max-width: none;
  37         }
  38 }
  39
  40 /* style is added when JS option showHideOpacity is set to true */
  41 .pswp--animate_opacity {
  42         /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
  43         opacity: 0.001;
  44         will-change:opacity;
  45         /* for open/close transition */
  46         transition: opacity $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1);
  47 }
  48
  49 .pswp--open {
  50         display: block;
  51 }
  52
  53 .pswp--zoom-allowed .pswp__img {
  54         /* autoprefixer: off */
  55         cursor: -webkit-zoom-in;
  56         cursor: -moz-zoom-in;
  57         cursor: zoom-in;
  58 }
  59
  60 .pswp--zoomed-in .pswp__img {
  61         /* autoprefixer: off */
  62         cursor: -webkit-grab;
  63         cursor: -moz-grab;
  64         cursor: grab;
  65 }
  66
  67 .pswp--dragging  .pswp__img {
  68         /* autoprefixer: off */
  69         cursor: -webkit-grabbing;
  70         cursor: -moz-grabbing;
  71         cursor: grabbing;
  72 }
  73
  74 /*
  75         Background is added as a separate element.
  76         As animating opacity is much faster than animating rgba() background-color.
  77 */
  78 .pswp__bg {
  79         position: absolute;
  80         left: 0;
  81         top: 0;
  82         width: 100%;
  83         height: 100%;
  84         background: $pswp__background-color;
  85         opacity: 0;
  86         transform: translateZ(0);
  87         -webkit-backface-visibility: hidden;
  88         will-change:opacity;
  89 }
  90
  91 .pswp__scroll-wrap {
  92         position: absolute;
  93         left: 0;
  94         top: 0;
  95         width: 100%;
  96         height: 100%;
  97         overflow:hidden;
  98 }
  99
 100 .pswp__container,
 101 .pswp__zoom-wrap {
 102         -ms-touch-action: none;
 103         touch-action: none;
 104         position: absolute;
 105         left: 0;
 106         right: 0;
 107         top: 0;
 108         bottom: 0;
 109 }
 110
 111 /* Prevent selection and tap highlights */
 112 .pswp__container,
 113 .pswp__img {
 114         -webkit-user-select: none;
 115         -moz-user-select: none;
 116         user-select: none;
 117         -webkit-tap-highlight-color: rgba(0,0,0,0);
 118         -webkit-touch-callout: none;
 119 }
 120
 121 .pswp__zoom-wrap {
 122         position: absolute;
 123         width: 100%;
 124         -webkit-transform-origin: left top;
 125         -moz-transform-origin: left top;
 126         -ms-transform-origin: left top;
 127         transform-origin: left top;
 128         /* for open/close transition */
 129         transition: transform $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1);
 130 }
 131
 132 .pswp__bg {
 133         will-change: opacity;
 134         /* for open/close transition */
 135         transition: opacity $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1);
 136 }
 137
 138 .pswp--animated-in {
 139         .pswp__bg,
 140         .pswp__zoom-wrap {
 141                 -webkit-transition: none;
 142                 transition: none;
 143         }
 144 }
 145
 146 .pswp__container,
 147 .pswp__zoom-wrap {
 148         -webkit-backface-visibility: hidden;
 149 }
 150
 151 .pswp__item {
 152         position: absolute;
 153         left: 0;
 154         right: 0;
 155         top: 0;
 156         bottom: 0;
 157         overflow: hidden;
 158 }
 159
 160 .pswp__img {
 161         position: absolute;
 162         width: auto;
 163         height: auto;
 164         top: 0;
 165         left: 0;
 166 }
 167
 168 /*
 169         stretched thumbnail or div placeholder element (see below)
 170         style is added to avoid flickering in webkit/blink when layers overlap
 171 */
 172 .pswp__img--placeholder {
 173         -webkit-backface-visibility: hidden;
 174 }
 175
 176 /*
 177         div element that matches size of large image
 178         large image loads on top of it
 179 */
 180 .pswp__img--placeholder--blank {
 181         background: $pswp__placeholder-color;
 182 }
 183
 184 .pswp--ie .pswp__img {
 185         width: 100% !important;
 186         height: auto !important;
 187         left: 0;
 188         top: 0;
 189 }
 190
 191 /*
 192         Error message appears when image is not loaded
 193         (JS option errorMsg controls markup)
 194 */
 195 .pswp__error-msg {
 196         position: absolute;
 197         left: 0;
 198         top: 50%;
 199         width: 100%;
 200         text-align: center;
 201         font-size: 14px;
 202         line-height: 16px;
 203         margin-top: -8px;
 204         color: $pswp__error-text-color;
 205 }
 206
 207 .pswp__error-msg a {
 208         color: $pswp__error-text-color;
 209         text-decoration: underline;
 210 }