You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

241 line
5.2 KiB

  1. @charset "UTF-8";
  2. /*
  3. * blueimp Gallery CSS 2.11.1
  4. * https://github.com/blueimp/Gallery
  5. *
  6. * Copyright 2013, Sebastian Tschan
  7. * https://blueimp.net
  8. *
  9. * Licensed under the MIT license:
  10. * http://www.opensource.org/licenses/MIT
  11. */
  12. .stil {
  13. left: 50%;
  14. position: absolute;
  15. top: 50%;
  16. transform: translate(-50%, -50%);
  17. -webkit-transform: translate(-50%, -50%);
  18. -moz-transform: translate(-50%, -50%);
  19. -ms-transform: translate(-50%, -50%);
  20. width: 100%
  21. }
  22. .stil2 {
  23. bottom: 30px;
  24. position: relative;
  25. text-align: center;
  26. color: #ffffff;
  27. left: 10px;
  28. text-shadow: 0 -1px #999999, 1px 0 #999999, 0 1px #999999, -1px 0 #999999;
  29. }
  30. .blueimp-gallery,
  31. .blueimp-gallery > .slides > .slide > .slide-content {
  32. position: absolute;
  33. top: 0;
  34. right: 0;
  35. bottom: 0;
  36. left: 0;
  37. }
  38. .blueimp-gallery > .slides > .slide > .slide-content {
  39. margin: auto;
  40. width: auto;
  41. height: auto;
  42. max-width: 100%;
  43. max-height: 100%;
  44. opacity: 1;
  45. }
  46. .blueimp-gallery {
  47. position: fixed;
  48. z-index: 999999;
  49. overflow: hidden;
  50. background: $ciLighterGrayishBlue;
  51. opacity: 0;
  52. display: none;
  53. direction: ltr;
  54. }
  55. .blueimp-gallery-carousel {
  56. position: relative;
  57. z-index: auto;
  58. margin: 1em auto;
  59. /* Set the carousel width/height ratio to 16/9: */
  60. padding-bottom: 56.25%;
  61. box-shadow: 0 0 10px #000;
  62. }
  63. .blueimp-gallery-display {
  64. display: block;
  65. opacity: 1;
  66. }
  67. .blueimp-gallery > .slides {
  68. position: relative;
  69. height: 100%;
  70. overflow: hidden;
  71. }
  72. .blueimp-gallery-carousel > .slides {
  73. position: absolute;
  74. }
  75. .blueimp-gallery > .slides > .slide {
  76. position: relative;
  77. float: left;
  78. height: 100%;
  79. text-align: center;
  80. transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
  81. }
  82. .blueimp-gallery,
  83. .blueimp-gallery > .slides > .slide > .slide-content {
  84. transition: opacity 0.5s linear;
  85. }
  86. .blueimp-gallery > .slides > .slide-loading {
  87. background: url(/img/loading.gif) center no-repeat;
  88. background-size: 64px 64px;
  89. }
  90. .blueimp-gallery > .slides > .slide-loading > .slide-content {
  91. opacity: 0;
  92. }
  93. .blueimp-gallery > .slides > .slide-error {
  94. background: url(/img/error.png) center no-repeat;
  95. }
  96. .blueimp-gallery > .slides > .slide-error > .slide-content {
  97. display: none;
  98. }
  99. .blueimp-gallery > .prev,
  100. .blueimp-gallery > .next {
  101. position: absolute;
  102. top: 50%;
  103. left: 15px;
  104. width: 60px;
  105. height: 60px;
  106. margin-top: -23px;
  107. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  108. font-size: 60px;
  109. font-weight: initial;
  110. line-height: 50px;
  111. color: #fff;
  112. text-decoration: none;
  113. text-align: center;
  114. background: $secondary-color;
  115. box-sizing: content-box;
  116. cursor: pointer;
  117. display: none;
  118. }
  119. .blueimp-gallery > .next {
  120. left: auto;
  121. right: 15px;
  122. }
  123. .blueimp-gallery > .close,
  124. .blueimp-gallery > .title {
  125. position: absolute;
  126. top: 15px;
  127. left: 15px;
  128. margin: 0 40px 0 0;
  129. font-size: 20px;
  130. line-height: 30px;
  131. color: #fff;
  132. display: none;
  133. }
  134. .blueimp-gallery > .close {
  135. padding: 15px;
  136. right: 30px;
  137. left: auto;
  138. margin: -15px;
  139. font-size: 60px;
  140. text-decoration: none;
  141. cursor: pointer;
  142. background: $secondary-color;
  143. }
  144. .blueimp-gallery > .play-pause {
  145. position: absolute;
  146. right: 15px;
  147. bottom: 15px;
  148. width: 15px;
  149. height: 15px;
  150. background: url(/img/play-pause.png) 0 0 no-repeat;
  151. cursor: pointer;
  152. opacity: 0.5;
  153. display: none;
  154. }
  155. .blueimp-gallery-playing > .play-pause {
  156. background-position: -15px 0;
  157. }
  158. .blueimp-gallery > .counter:hover,
  159. .blueimp-gallery > .prev:hover,
  160. .blueimp-gallery > .next:hover,
  161. .blueimp-gallery > .close:hover,
  162. .blueimp-gallery > .title:hover,
  163. .blueimp-gallery > .play-pause:hover {
  164. color: #fff;
  165. opacity: 1;
  166. }
  167. .blueimp-gallery-controls > .counter,
  168. .blueimp-gallery-controls > .prev,
  169. .blueimp-gallery-controls > .next,
  170. .blueimp-gallery-controls > .close,
  171. .blueimp-gallery-controls > .title,
  172. .blueimp-gallery-controls > .play-pause {
  173. display: block;
  174. /* Fix z-index issues (controls behind slide element) on Android: */
  175. transform: translatez(0);
  176. }
  177. .blueimp-gallery-single > .counter,
  178. .blueimp-gallery-single > .prev,
  179. .blueimp-gallery-left > .prev,
  180. .blueimp-gallery-single > .next,
  181. .blueimp-gallery-right > .next,
  182. .blueimp-gallery-single > .play-pause {
  183. display: none;
  184. }
  185. .blueimp-gallery > .slides > .slide > .slide-content,
  186. .blueimp-gallery > .counter,
  187. .blueimp-gallery > .prev,
  188. .blueimp-gallery > .next,
  189. .blueimp-gallery > .close,
  190. .blueimp-gallery > .play-pause {
  191. user-select: none;
  192. }
  193. /* Replace PNGs with SVGs for capable browsers (excluding IE<9) */
  194. body:last-child .blueimp-gallery > .slides > .slide-error {
  195. background-image: url(/img/error.svg);
  196. }
  197. body:last-child .blueimp-gallery > .play-pause {
  198. width: 20px;
  199. height: 20px;
  200. background-size: 40px 20px;
  201. background-image: url(/img/play-pause.svg);
  202. }
  203. body:last-child .blueimp-gallery-playing > .play-pause {
  204. background-position: -20px 0;
  205. }
  206. .blueimp-gallery {
  207. .description {
  208. position: absolute;
  209. color: $cDarkGray;
  210. bottom: 5px;
  211. left: 15px;
  212. .text {
  213. margin: 0;
  214. }
  215. .copyright {
  216. font-size : 0.8em;
  217. }
  218. }
  219. .counter {
  220. position: absolute;
  221. color: $cDarkGray;
  222. top: 15px;
  223. right: 100px;
  224. font-size: 1.5em;
  225. }
  226. }
  227. .blueimp-gallery-controls .infos,
  228. .blueimp-gallery-controls .description,
  229. .blueimp-gallery-controls .copyright,
  230. {
  231. display: block;
  232. }