You are here

Home » API reference » Blazy PhotoSwipe 8

blazy.photoswipe.theme.css in Blazy PhotoSwipe 8

Same filename and directory in other branches
  1. 7 css/blazy.photoswipe.theme.css

File

css/blazy.photoswipe.theme.css
View source 
  1. /**

  2.  * @file

  3.  */

  4. 

  5. /** Fix for unclean destroy. */

  6. .pswp[aria-hidden="true"] {

  7.   display: none;

  8. }

  9. 

  10. .pswp__item {

  11.   text-align: center;

  12. }

  13. 

  14. .pswp .media-wrapper {

  15.   display: inline-block;

  16.   line-height: 0;

  17.   margin: 0 auto;

  18.   max-width: 98%;

  19.   overflow: hidden;

  20.   position: relative;

  21.   text-align: left;

  22.   top: 50%;

  23.   -webkit-transform: translateY(-50%);

  24.   -ms-transform: translateY(-50%);

  25.   transform: translateY(-50%);

  26.   vertical-align: middle;

  27.   width: 100%;

  28. }

  29. 

  30. .pswp__item--html .pswp__img {

  31.   cursor: -webkit-grab;

  32.   cursor: -moz-grab;

  33.   cursor: grab;

  34. }

  35. 

  36. .pswp.pswp--dragging .pswp__img {

  37.   cursor: -webkit-grabbing;

  38.   cursor: -moz-grabbing;

  39.   cursor: grabbing;

  40. }

  41. 

  42. /**

  43.  * @todo: Remove temp fix for FF will-change warning:

  44.  * https://github.com/dimsemenov/PhotoSwipe/issues/855

  45.  */

  46. .pswp__zoom-wrap {

  47.   will-change: auto !important;

  48.   -webkit-backface-visibility: visible !important;

  49. }

  50. 

  51. .pswp .pswp__item .media {

  52.   margin: auto;

  53. }

  54. 

  55. .pswp__custom-caption {

  56.   font-size: 1rem;

  57.   color: #fff;

  58.   width: 100%;

  59.   max-width: 100%;

  60.   padding: 2px 8px;

  61.   position: absolute;

  62.   bottom: 0;

  63.   text-align: center;

  64. }

  65. 

  66. .pswp__custom-caption.is-not-empty {

  67.   background: rgba(0, 0, 0, 0.75);

  68. }

  69. 

  70. .pswp__custom-caption a {

  71.   color: #fff;

  72. }

  73. 

  74. /* Videos/ html are not swipeable at mobile devices, override hidden arrows. */

  75. .pswp--touch.pswp--is-html .pswp__button--arrow {

  76.   visibility: visible;

  77. }

  78. 

  79. /* PhotoSwipe 4 with Responsive image wrapped with pswp__item--html. */

  80. .pswp__item--html img {

  81.   max-width: 100%;

  82. }

  83. 

  84. /** @todo remove once Blazy updated to fix this regression video size. */

  85. @media screen and (min-width: 1280px) {

  86.   /** Prevents oversized video player. Adjust it accordingly. */

  87.   .pswp .media-wrapper {

  88.     max-width: 72%;

  89.   }

  90. }