yaffs.net Git - yaffs-website/blob - web/modules/contrib/blazy/css/components/blazy.lightbox.css

   1 /**
   2  * @file
   3  * Provides shared lightbox stylings for both Colorbox and Photobox.
   4  */
   5
   6 .media__icon--litebox {
   7   cursor: pointer;
   8   display: block;
   9   height: 80px;
  10   left: 50%;
  11   margin: 0;
  12   opacity: 0;
  13   position: absolute;
  14   top: 50%;
  15   width: 80px;
  16   visibility: hidden;
  17   z-index: 9;
  18   -webkit-transition: visibility 0s linear 0.5s, opacity 0.5s linear;
  19   transition: visibility 0s linear 0.5s, opacity 0.5s linear;
  20   -ms-transform: translate(-50%, -50%);
  21   -webkit-transform: translate(-50%, -50%);
  22   transform: translate(-50%, -50%);
  23 }
  24
  25 .media__icon--litebox::before,
  26 .media__icon--litebox::after {
  27   content: '';
  28   display: block;
  29   position: absolute;
  30   pointer-events: none;
  31 }
  32
  33 .media__icon--litebox {
  34   z-index: 9;
  35 }
  36
  37 .media__icon--litebox::before,
  38 .media__icon--litebox::after {
  39   background: white;
  40   border-radius: 4px;
  41   height: 2px;
  42   left: 50%;
  43   margin: -1px 0 0 -40px;
  44   top: 50%;
  45   width: 80px;
  46   -ms-transform: rotate(0deg);
  47   -webkit-transform: rotate(0deg);
  48   transform: rotate(0deg);
  49 }
  50
  51 .media__icon--litebox::after {
  52   -ms-transform: rotate(-90deg);
  53   -webkit-transform: rotate(-90deg);
  54   transform: rotate(-90deg);
  55 }
  56
  57 .media__icon--litebox:hover::before,
  58 .media__icon--litebox:hover::after {
  59   background-color: #ff6d2c;
  60 }
  61
  62 .media:hover .media__icon--litebox {
  63   -webkit-transition-delay: 0s;
  64   transition-delay: 0s;
  65 }
  66
  67 .media:hover .media__icon--litebox,
  68 .media--switch .media__image {
  69   opacity: 1;
  70   visibility: visible;
  71 }
  72
  73 .litebox {
  74   border: 0;
  75   display: block;
  76 }