aleph1.co.uk Git - yaffs-website/blob - web/modules/contrib/blazy/css/components/blazy.media.css

   1 /**
   2  * @file
   3  * Provides media integration with pure CSS fluid video wrapper.
   4  */
   5
   6 .litebox,
   7 .media__iframe,
   8 [data-blazy] iframe {
   9   border: 0 none;
  10   display: block;
  11   max-width: 100%;
  12 }
  13
  14 /** Ensures not affecting iframe only without media switcher */
  15 .media--switch iframe {
  16   opacity: 0;
  17   visibility: hidden;
  18 }
  19
  20 .media__icon,
  21 .media--ratio iframe {
  22   -webkit-transition: visibility 0s linear 0.5s, opacity 0.5s linear;
  23   transition: visibility 0s linear 0.5s, opacity 0.5s linear;
  24 }
  25
  26 .media__icon {
  27   cursor: pointer;
  28   display: block;
  29   opacity: 0;
  30   position: absolute;
  31   visibility: hidden;
  32   z-index: 8;
  33 }
  34
  35 .media__icon--play,
  36 .media__icon--close,
  37 .media__icon--spinner {
  38   height: 80px;
  39   left: 50%;
  40   margin: -40px 0 0 -40px;
  41   top: 50%;
  42   width: 80px;
  43 }
  44
  45 .media__icon--close::before,
  46 .media__icon--close::after,
  47 .media__icon--play::before {
  48   content: '';
  49   display: block;
  50   position: absolute;
  51   pointer-events: none;
  52 }
  53
  54 .media--loading .media__icon--play::before {
  55   display: none;
  56 }
  57
  58 .media__icon--close::before,
  59 .media__icon--close::after {
  60   background: white;
  61   border-radius: 4px;
  62   height: 8px;
  63   left: 50%;
  64   margin: -4px 0 0 -40px;
  65   top: 50%;
  66   width: 80px;
  67   -ms-transform: rotate(45deg);
  68   -webkit-transform: rotate(45deg);
  69   transform: rotate(45deg);
  70 }
  71
  72 .media__icon--close::after {
  73   -ms-transform: rotate(-45deg);
  74   -webkit-transform: rotate(-45deg);
  75   transform: rotate(-45deg);
  76 }
  77
  78 .media__icon--close:hover::before,
  79 .media__icon--close:hover::after {
  80   background-color: #ff6d2c;
  81 }
  82
  83 .media__icon--play {
  84   border: 8px solid white;
  85   border-radius: 50%;
  86 }
  87
  88 .media__icon--play::before {
  89   border: 16px solid transparent;
  90   border-left: 24px solid white;
  91   left: 50%;
  92   line-height: 60px;
  93   margin: -16px 0 0 -6px;
  94   top: 50%;
  95 }
  96
  97 .media__icon--play:hover {
  98   border-color: #ff6d2c;
  99 }
 100
 101 .media__icon--play:hover::before {
 102   border-left-color: #ff6d2c;
 103 }
 104
 105 .is-playing:hover .media__icon {
 106   -webkit-transition-delay: 0s;
 107   transition-delay: 0s;
 108 }
 109
 110 .is-playing .media__icon--close {
 111   visibility: hidden;
 112 }
 113
 114 .media__icon--play,
 115 .media:hover .media__icon--litebox,
 116 .media--switch img,
 117 .media--switch.is-playing iframe,
 118 .media--switch.is-playing:hover .media__icon--close {
 119   opacity: 1;
 120   visibility: visible;
 121 }
 122
 123 .media--switch.is-playing img,
 124 .media--switch.is-playing .media__icon--play,
 125 .media--switch.is-playing:hover .media__icon--play {
 126   opacity: 0;
 127   position: absolute;
 128   visibility: hidden;
 129   z-index: -1;
 130 }
 131
 132 .media--switch.is-playing iframe {
 133   z-index: 3;
 134 }
 135
 136 /**
 137  * Fallback non-JS.
 138  */
 139 .no-js .media--player .media__image,
 140 .no-js .media--player .media__icon {
 141   opacity: 0;
 142   visibility: hidden;
 143 }
 144
 145 .no-js .media--player .media__iframe {
 146   opacity: 1;
 147   visibility: visible;
 148 }
 149
 150 /** Prevents Twitter iframe from breaking grid, even if unholy. */
 151 .grid .twitter-tweet-rendered {
 152   margin: 0 !important;
 153   min-width: 1px !important;
 154 }
 155
 156 /** Fix for overflowing Facebook/ Twitter iframes. */
 157 .grid .media,
 158 .grid .fb_iframe_widget {
 159   overflow: hidden;
 160 }
 161
 162 .grid .fb_iframe_widget span {
 163   width: 100% !important;
 164 }
 165
 166 .grid .fb_iframe_widget iframe {
 167   position: relative !important;
 168 }