yaffs.net Git - yaffs-website/blob - web/modules/contrib/slick/css/theme/slick.theme--fullscreen.css

   1 /**
   2  * @file
   3  * Best with 1 slidesToShow, placed at external region.
   4  *
   5  * Detailed stylings are all yours, get yourself dirty.
   6  */
   7
   8 html,
   9 body {
  10   height: 100%;
  11   margin: 0;
  12   min-height: 100%;
  13 }
  14
  15 body {
  16   overflow: hidden;
  17 }
  18
  19 .slick-wrapper--fullscreen {
  20   background: #000;
  21 }
  22
  23 .slick-wrapper--fullscreen,
  24 .slick-wrapper--fullscreen .slick,
  25 .slick--skin--fullscreen {
  26   left: 0;
  27   position: fixed;
  28   top: 0;
  29   width: 100%;
  30 }
  31
  32 .slick-wrapper--fullscreen,
  33 .slick--skin--fullscreen {
  34   height: 100%;
  35   min-height: 100%;
  36 }
  37
  38 .slick-wrapper--fullscreen {
  39   z-index: 997;
  40 }
  41
  42 .slick--skin--fullscreen {
  43   z-index: 998;
  44 }
  45
  46 .slick-wrapper--fullscreen .slick.slick--thumbnail {
  47   bottom: 0;
  48   top: auto;
  49   z-index: 999;
  50 }
  51
  52 .slick-wrapper--fullscreen.slick-wrapper--tn-top .slick.slick--thumbnail {
  53   bottom: auto;
  54   top: 0;
  55   z-index: 999;
  56 }
  57
  58 .slick-wrapper--fullscreen .slick__slider {
  59   margin-bottom: 0;
  60 }
  61
  62 .slick--skin--fullscreen .slick__slider {
  63   height: 100%;
  64   margin-bottom: 0;
  65   min-height: 100%;
  66 }
  67
  68 /** @todo better way than over-specificity to support nested slicks. */
  69 .slick--skin--fullscreen .slick-list,
  70 .slick--skin--fullscreen .slick-track,
  71 .slick--skin--fullscreen .slick__slide,
  72 .slick--skin--fullscreen .slide__content,
  73 .slick--skin--fullscreen .media,
  74 .slick--skin--fullscreen .slide__media {
  75   height: 100% !important;
  76   min-height: 320px;
  77 }
  78
  79 .slick--skin--fullscreen .slick-track {
  80   margin: 0;
  81   padding: 0;
  82 }
  83
  84 .slick--skin--fullscreen .slick__slide {
  85   background-repeat: no-repeat;
  86   background-position: center center;
  87   background-size: cover;
  88 }
  89
  90 .slick--skin--fullscreen .slide__media img {
  91   height: auto;
  92   left: 0;
  93   margin: 0 auto;
  94   min-height: 100%;
  95   min-width: 100%;
  96   position: absolute;
  97   top: 0;
  98   width: 100%;
  99 }
 100
 101 .slick--skin--fullscreen .slide__constrained {
 102   left: 50%;
 103   margin-left: -49%;
 104   position: absolute;
 105   width: 98%;
 106 }
 107
 108 .slick--skin--fullscreen .slide__constrained .slide__caption {
 109   position: relative;
 110 }
 111
 112 .slick--skin--fullscreen .slide__caption {
 113   font-size: 22px;
 114   font-size: 1.375rem;
 115   color: #fff;
 116 }
 117
 118 .slick--skin--fullscreen .slide__title {
 119   color: #fff;
 120   font-size: 48px;
 121   font-size: 3rem;
 122   line-height: 1;
 123   text-transform: uppercase;
 124 }
 125
 126 .slick--skin--fullscreen .slide__link a {
 127   border-bottom: 2px solid rgba(255, 255, 255, 0.8);
 128   border-top: 2px solid rgba(255, 255, 255, 0.8);
 129   color: #fff;
 130   color: rgba(255, 255, 255, 0.8);
 131   text-decoration: none;
 132 }
 133
 134 .slick--skin--fullscreen .slide__link a:hover {
 135   border-color: #fff;
 136   color: #fff;
 137   text-decoration: none;
 138 }
 139
 140 .slick--skin--fullscreen .slick-dots {
 141   bottom: 20px;
 142 }
 143
 144 /* Views UI Preview */
 145 body.path-admin {
 146   overflow: visible;
 147 }
 148
 149 .path-admin .slick-wrapper--fullscreen,
 150 .path-admin .slick-wrapper--fullscreen .slick,
 151 .path-admin .slick--skin--fullscreen,
 152 .path-admin .slick--skin--fullscreen .slide__media {
 153   min-height: 620px;
 154   position: relative;
 155 }
 156
 157 .path-admin .slick-wrapper--fullscreen .slick--thumbnail {
 158   min-height: 80px;
 159   position: absolute;
 160 }
 161
 162 .path-admin .slick--skin--fullscreen .slick__slider {
 163   min-height: 120px;
 164 }
 165
 166 /** Nested slicks overrides. */
 167 .slick-wrapper--fullscreen .slick .slick {
 168   position: relative;
 169 }
 170
 171 .slick--skin--fullscreen .slick__slider .slick__slider {
 172   height: auto;
 173 }
 174
 175 .slick--skin--fullscreen .slick-list .slick-list {
 176   height: auto !important;
 177   min-height: 40px;
 178 }
 179
 180 @media (min-width: 65em) {
 181   .slick--skin--fullscreen .slide__constrained {
 182     padding-top: 10%;
 183   }
 184 }
 185
 186 @media (min-width: 90em) {
 187   .slick--skin--fullscreen .slide__constrained {
 188     margin-left: -585px;
 189     width: 1170px;
 190   }
 191 }