yaffs.net 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--player.media--ratio > iframe {
  16   opacity: 0;
  17   visibility: hidden;
  18 }
  19
  20 .media--ratio iframe,
  21 .media__icon {
  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 .is-playing .media__icon--close {
  84   visibility: hidden;
  85 }
  86
  87 .media__icon--play {
  88   border: 8px solid white;
  89   border-radius: 50%;
  90 }
  91
  92 .media__icon--play::before {
  93   border: 16px solid transparent;
  94   border-left: 24px solid white;
  95   left: 50%;
  96   line-height: 60px;
  97   margin: -16px 0 0 -6px;
  98   top: 50%;
  99 }
 100
 101 .media__icon--play:hover {
 102   border-color: #ff6d2c;
 103 }
 104
 105 .media__icon--play:hover::before {
 106   border-left-color: #ff6d2c;
 107 }
 108
 109 .is-playing:hover .media__icon {
 110   -webkit-transition-delay: 0s;
 111   transition-delay: 0s;
 112 }
 113
 114 .media--switch .media__image,
 115 .media__icon--play,
 116 .media:hover .media__icon--litebox,
 117 .is-playing .media__iframe,
 118 .is-playing.media--ratio > iframe,
 119 .is-playing:hover .media__icon--close {
 120   opacity: 1;
 121   visibility: visible;
 122 }
 123
 124 .is-playing > img,
 125 .is-playing > .media__image,
 126 .is-playing.media--switch .media__image,
 127 .is-playing .media__icon--play,
 128 .is-playing:hover .media__icon--play {
 129   opacity: 0;
 130   position: absolute;
 131   visibility: hidden;
 132   z-index: -1;
 133 }
 134
 135 .is-playing .media__iframe {
 136   z-index: 3;
 137 }
 138
 139 /**
 140  * Fallback non-JS.
 141  */
 142 .no-js .media--player .media__image,
 143 .no-js .media--player .media__icon {
 144   opacity: 0;
 145   visibility: hidden;
 146 }
 147
 148 .no-js .media--player .media__iframe {
 149   opacity: 1;
 150   visibility: visible;
 151 }
 152
 153 /** Prevents Twitter iframe from breaking grid, even if unholy. */
 154 .grid .twitter-tweet-rendered {
 155   margin: 0 !important;
 156   min-width: 1px !important;
 157 }
 158
 159 /** Fix for overflowing Facebook/ Twitter iframes. */
 160 .grid .media,
 161 .grid .fb_iframe_widget {
 162   overflow: hidden;
 163 }
 164
 165 .grid .fb_iframe_widget span {
 166   width: 100% !important;
 167 }
 168
 169 .grid .fb_iframe_widget iframe {
 170   position: relative !important;
 171 }