static/scss/photoswipe/default-skin/default-skin.scss

   1 /*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
   2
   3 /*
   4
   5         Contents:
   6
   7         1. Buttons
   8         2. Share modal and links
   9         3. Index indicator ("1 of X" counter)
  10         4. Caption
  11         5. Loading indicator
  12         6. Additional styles (root element, top bar, idle state, hidden state, etc.)
  13
  14 */
  15
  16 // PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.
  17
  18
  19
  20 @import "../main-settings";
  21
  22
  23 /*
  24
  25         1. Buttons
  26
  27  */
  28
  29 /* <button> css reset */
  30 .pswp__button {
  31         width: 44px;
  32         height: 44px;
  33         position: relative;
  34         background: none;
  35         cursor: pointer;
  36         overflow: visible;
  37         -webkit-appearance: none;
  38         display: block;
  39         border: 0;
  40         padding: 0;
  41         margin: 0;
  42         float: right;
  43         opacity: 0.75;
  44         transition: opacity 0.2s;
  45         box-shadow: none;
  46
  47         &:focus,
  48         &:hover {
  49                 opacity: 1;
  50         }
  51
  52         &:active {
  53                 outline: none;
  54                 opacity: 0.9;
  55         }
  56
  57         &::-moz-focus-inner {
  58                 padding: 0;
  59                 border: 0
  60         }
  61 }
  62
  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 {
  65         opacity: 1;
  66 }
  67
  68 .pswp__button,
  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;
  73         width: 44px;
  74         height: 44px;
  75 }
  76
  77 @media (-webkit-min-device-pixel-ratio: 1.1),  (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
  78
  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);
  84     }
  85
  86     .pswp--svg .pswp__button--arrow--left,
  87         .pswp--svg .pswp__button--arrow--right {
  88                 background: none;
  89         }
  90 }
  91
  92 .pswp__button--close {
  93         background-position: 0 -44px;
  94 }
  95
  96 .pswp__button--share {
  97         background-position: -44px -44px;
  98 }
  99
 100 .pswp__button--fs {
 101         display: none;
 102 }
 103
 104 .pswp--supports-fs .pswp__button--fs {
 105         display: block;
 106 }
 107
 108 .pswp--fs .pswp__button--fs {
 109         background-position: -44px 0;
 110 }
 111
 112 .pswp__button--zoom {
 113         display: none;
 114         background-position: -88px 0;
 115 }
 116
 117 .pswp--zoom-allowed .pswp__button--zoom {
 118         display: block;
 119 }
 120
 121 .pswp--zoomed-in .pswp__button--zoom {
 122         background-position: -132px 0;
 123 }
 124
 125 /* no arrows on touch screens */
 126 .pswp--touch {
 127         .pswp__button--arrow--left,
 128         .pswp__button--arrow--right {
 129                 visibility: hidden;
 130         }
 131 }
 132
 133 /*
 134         Arrow buttons hit area
 135         (icon is added to :before pseudo-element)
 136 */
 137 .pswp__button--arrow--left,
 138 .pswp__button--arrow--right {
 139         background: none;
 140         top: 50%;
 141         margin-top: -50px;
 142         width: 70px;
 143         height: 100px;
 144         position: absolute;
 145 }
 146
 147 .pswp__button--arrow--left {
 148         left: 0;
 149 }
 150
 151 .pswp__button--arrow--right {
 152         right: 0;
 153 }
 154
 155 .pswp__button--arrow--left:before,
 156 .pswp__button--arrow--right:before {
 157         content: '';
 158         top: 35px;
 159         background-color: rgba(0,0,0,0.3);
 160         height: 30px;
 161         width: 32px;
 162         position: absolute;
 163 }
 164
 165 .pswp__button--arrow--left:before {
 166         left: 6px;
 167         background-position: -138px -44px;
 168 }
 169
 170 .pswp__button--arrow--right:before {
 171         right: 6px;
 172         background-position: -94px -44px;
 173 }
 174
 175
 176 /*
 177
 178         2. Share modal/popup and links
 179
 180  */
 181
 182 .pswp__counter,
 183 .pswp__share-modal {
 184         -webkit-user-select: none;
 185         -moz-user-select: none;
 186         user-select: none;
 187 }
 188
 189 .pswp__share-modal {
 190         display: block;
 191         background: rgba(0, 0, 0, 0.5);
 192         width: 100%;
 193         height: 100%;
 194         top: 0;
 195         left: 0;
 196         padding: 10px;
 197         position: absolute;
 198         z-index: $pswp__root-z-index + 100;
 199         opacity: 0;
 200         transition: opacity 0.25s ease-out;
 201         -webkit-backface-visibility: hidden;
 202         will-change: opacity;
 203 }
 204
 205 .pswp__share-modal--hidden {
 206         display: none;
 207 }
 208
 209 .pswp__share-tooltip {
 210         z-index: $pswp__root-z-index + 120;
 211         position: absolute;
 212         background: #FFF;
 213         top: 56px;
 214         border-radius: 2px;
 215         display: block;
 216         width: auto;
 217         right: 44px;
 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;
 223
 224         a {
 225                 display: block;
 226                 padding: 8px 12px;
 227                 color: #000;
 228                 text-decoration: none;
 229                 font-size: 14px;
 230                 line-height: 18px;
 231
 232                 &:hover {
 233                         text-decoration: none;
 234                         color: #000;
 235                 }
 236
 237
 238                 &:first-child {
 239                         /* round corners on the first/last list item */
 240                         border-radius: 2px 2px 0 0;
 241                 }
 242
 243                 &:last-child {
 244                         border-radius: 0 0 2px 2px;
 245                 }
 246         }
 247 }
 248
 249 .pswp__share-modal--fade-in {
 250         opacity: 1;
 251
 252         .pswp__share-tooltip {
 253                 transform: translateY(0);
 254         }
 255 }
 256
 257 /* increase size of share links on touch devices */
 258 .pswp--touch .pswp__share-tooltip a {
 259         padding: 16px 12px;
 260 }
 261
 262 a.pswp__share--facebook {
 263         &:before {
 264                 content: '';
 265                 display: block;
 266                 width: 0;
 267                 height: 0;
 268                 position: absolute;
 269                 top: -12px;
 270                 right: 15px;
 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;
 276         }
 277
 278         &:hover {
 279                 background: #3E5C9A;
 280                 color: #FFF;
 281
 282                 &:before {
 283                         border-bottom-color: #3E5C9A;
 284                 }
 285         }
 286 }
 287
 288 a.pswp__share--twitter {
 289         &:hover {
 290                 background: #55ACEE;
 291                 color: #FFF;
 292         }
 293 }
 294
 295 a.pswp__share--pinterest {
 296         &:hover {
 297                 background: #CCC;
 298                 color: #CE272D;
 299         }
 300 }
 301
 302 a.pswp__share--download {
 303         &:hover {
 304                 background: #DDD;
 305         }
 306 }
 307
 308
 309 /*
 310
 311         3. Index indicator ("1 of X" counter)
 312
 313  */
 314
 315 .pswp__counter {
 316         position: absolute;
 317         left: 0;
 318         top: 0;
 319         height: 44px;
 320         font-size: 13px;
 321         line-height: 44px;
 322         color: #FFF;
 323         opacity: 0.75;
 324         padding: 0 10px;
 325 }
 326
 327
 328 /*
 329
 330         4. Caption
 331
 332  */
 333
 334 .pswp__caption {
 335         position: absolute;
 336         left: 0;
 337         bottom: 0;
 338         width: 100%;
 339         min-height: 44px;
 340
 341         small {
 342                 font-size: 11px;
 343                 color: #BBB;
 344         }
 345 }
 346
 347 .pswp__caption__center {
 348         text-align: left;
 349         max-width: 420px;
 350         margin: 0 auto;
 351         font-size: 13px;
 352         padding: 10px;
 353         line-height: 20px;
 354         color: #CCC;
 355 }
 356
 357 .pswp__caption--empty {
 358         display: none;
 359 }
 360
 361 /* Fake caption element, used to calculate height of next/prev image */
 362 .pswp__caption--fake {
 363         visibility: hidden;
 364 }
 365
 366
 367 /*
 368
 369         5. Loading indicator (preloader)
 370
 371         You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
 372
 373  */
 374
 375 .pswp__preloader {
 376         width: 44px;
 377         height: 44px;
 378         position: absolute;
 379         top: 0;
 380         left: 50%;
 381         margin-left: -22px;
 382         opacity: 0;
 383         transition: opacity 0.25s ease-out;
 384         will-change: opacity;
 385         direction: ltr;
 386 }
 387
 388 .pswp__preloader__icn {
 389         width: 20px;
 390         height: 20px;
 391         margin: 12px;
 392 }
 393
 394 .pswp__preloader--active {
 395         opacity: 1;
 396
 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;
 400         }
 401 }
 402
 403 .pswp--css_animation {
 404         .pswp__preloader--active {
 405                 opacity: 1;
 406
 407                 .pswp__preloader__icn {
 408                         animation: clockwise 500ms linear infinite;
 409                 }
 410
 411                 .pswp__preloader__donut {
 412                         animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
 413                 }
 414         }
 415
 416         .pswp__preloader__icn {
 417                 background: none;
 418                 opacity: 0.75;
 419                 width: 14px;
 420                 height: 14px;
 421                 position: absolute;
 422                 left: 15px;
 423                 top: 15px;
 424                 margin: 0;
 425         }
 426
 427
 428         .pswp__preloader__cut {
 429                 /*
 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
 432                 */
 433                 position: relative;
 434                 width: 7px;
 435                 height: 14px;
 436                 overflow: hidden;
 437         }
 438
 439         .pswp__preloader__donut {
 440                 box-sizing: border-box;
 441                 width: 14px;
 442                 height: 14px;
 443                 border: 2px solid #FFF;
 444                 border-radius: 50%;
 445                 border-left-color: transparent;
 446                 border-bottom-color: transparent;
 447                 position: absolute;
 448                 top: 0;
 449                 left: 0;
 450                 background: none;
 451                 margin: 0;
 452         }
 453 }
 454
 455 @media screen and (max-width: 1024px) {
 456         .pswp__preloader {
 457                 position: relative;
 458                 left: auto;
 459                 top: auto;
 460                 margin: 0;
 461                 float: right;
 462         }
 463 }
 464
 465 @keyframes clockwise {
 466   0% { transform: rotate(0deg) }
 467   100% { transform: rotate(360deg) }
 468 }
 469
 470 @keyframes donut-rotate {
 471   0% { transform: rotate(0) }
 472   50% { transform: rotate(-140deg) }
 473   100% { transform: rotate(0) }
 474 }
 475
 476
 477 /*
 478
 479         6. Additional styles
 480
 481  */
 482
 483 /* root element of UI */
 484 .pswp__ui {
 485         -webkit-font-smoothing: auto;
 486         visibility: visible;
 487         opacity: 1;
 488         z-index: $pswp__root-z-index + 50;
 489 }
 490
 491 /* top black bar with buttons and "1 of X" indicator */
 492 .pswp__top-bar {
 493         position: absolute;
 494         left: 0;
 495         top: 0;
 496         height: 44px;
 497         width: 100%;
 498 }
 499
 500 .pswp__caption,
 501 .pswp__top-bar,
 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);
 507 }
 508
 509 /* pswp--has_mouse class is added only when two subsequent mousemove events occur */
 510 .pswp--has_mouse {
 511         .pswp__button--arrow--left,
 512         .pswp__button--arrow--right {
 513                 visibility: visible;
 514         }
 515 }
 516
 517 .pswp__top-bar,
 518 .pswp__caption {
 519         background-color: rgba(0,0,0,0.5);
 520 }
 521
 522 /* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
 523 .pswp__ui--fit {
 524         .pswp__top-bar,
 525         .pswp__caption {
 526                 background-color: rgba(0,0,0,0.3);
 527         }
 528 }
 529
 530 /* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
 531
 532 .pswp__ui--idle {
 533         .pswp__top-bar {
 534                 opacity: 0;
 535         }
 536
 537         .pswp__button--arrow--left,
 538         .pswp__button--arrow--right {
 539                 opacity: 0;
 540         }
 541 }
 542
 543 /*
 544         pswp__ui--hidden class is added when controls are hidden
 545         e.g. when user taps to toggle visibility of controls
 546 */
 547 .pswp__ui--hidden {
 548         .pswp__top-bar,
 549         .pswp__caption,
 550         .pswp__button--arrow--left,
 551         .pswp__button--arrow--right {
 552                 /* Force paint & create composition layer for controls. */
 553                 opacity: 0.001;
 554         }
 555 }
 556
 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,
 561         .pswp__counter {
 562                 display: none;
 563         }
 564 }
 565
 566 .pswp__element--disabled {
 567         display: none !important;
 568 }
 569
 570 @if $pswp__include-minimal-style == true {
 571         .pswp--minimal--dark {
 572                 .pswp__top-bar {
 573                         background: none;
 574                 }
 575         }
 576 }
 577
 578
 579
 580
 581
 582
 583
 584
 585
 586
 587
 588