reveal.css 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  1. /*!
  2. * # Semantic UI 2.4.2 - Reveal
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Reveal
  12. *******************************/
  13. .ui.reveal {
  14. display: inherit;
  15. position: relative !important;
  16. font-size: 0em !important;
  17. }
  18. .ui.reveal > .visible.content {
  19. position: absolute !important;
  20. top: 0em !important;
  21. left: 0em !important;
  22. z-index: 3 !important;
  23. -webkit-transition: all 0.5s ease 0.1s;
  24. transition: all 0.5s ease 0.1s;
  25. }
  26. .ui.reveal > .hidden.content {
  27. position: relative !important;
  28. z-index: 2 !important;
  29. }
  30. /* Make sure hovered element is on top of other reveal */
  31. .ui.active.reveal .visible.content,
  32. .ui.reveal:hover .visible.content {
  33. z-index: 4 !important;
  34. }
  35. /*******************************
  36. Types
  37. *******************************/
  38. /*--------------
  39. Slide
  40. ---------------*/
  41. .ui.slide.reveal {
  42. position: relative !important;
  43. overflow: hidden !important;
  44. white-space: nowrap;
  45. }
  46. .ui.slide.reveal > .content {
  47. display: block;
  48. width: 100%;
  49. white-space: normal;
  50. float: left;
  51. margin: 0em;
  52. -webkit-transition: -webkit-transform 0.5s ease 0.1s;
  53. transition: -webkit-transform 0.5s ease 0.1s;
  54. transition: transform 0.5s ease 0.1s;
  55. transition: transform 0.5s ease 0.1s, -webkit-transform 0.5s ease 0.1s;
  56. }
  57. .ui.slide.reveal > .visible.content {
  58. position: relative !important;
  59. }
  60. .ui.slide.reveal > .hidden.content {
  61. position: absolute !important;
  62. left: 0% !important;
  63. width: 100% !important;
  64. -webkit-transform: translateX(100%) !important;
  65. transform: translateX(100%) !important;
  66. }
  67. .ui.slide.active.reveal > .visible.content,
  68. .ui.slide.reveal:hover > .visible.content {
  69. -webkit-transform: translateX(-100%) !important;
  70. transform: translateX(-100%) !important;
  71. }
  72. .ui.slide.active.reveal > .hidden.content,
  73. .ui.slide.reveal:hover > .hidden.content {
  74. -webkit-transform: translateX(0%) !important;
  75. transform: translateX(0%) !important;
  76. }
  77. .ui.slide.right.reveal > .visible.content {
  78. -webkit-transform: translateX(0%) !important;
  79. transform: translateX(0%) !important;
  80. }
  81. .ui.slide.right.reveal > .hidden.content {
  82. -webkit-transform: translateX(-100%) !important;
  83. transform: translateX(-100%) !important;
  84. }
  85. .ui.slide.right.active.reveal > .visible.content,
  86. .ui.slide.right.reveal:hover > .visible.content {
  87. -webkit-transform: translateX(100%) !important;
  88. transform: translateX(100%) !important;
  89. }
  90. .ui.slide.right.active.reveal > .hidden.content,
  91. .ui.slide.right.reveal:hover > .hidden.content {
  92. -webkit-transform: translateX(0%) !important;
  93. transform: translateX(0%) !important;
  94. }
  95. .ui.slide.up.reveal > .hidden.content {
  96. -webkit-transform: translateY(100%) !important;
  97. transform: translateY(100%) !important;
  98. }
  99. .ui.slide.up.active.reveal > .visible.content,
  100. .ui.slide.up.reveal:hover > .visible.content {
  101. -webkit-transform: translateY(-100%) !important;
  102. transform: translateY(-100%) !important;
  103. }
  104. .ui.slide.up.active.reveal > .hidden.content,
  105. .ui.slide.up.reveal:hover > .hidden.content {
  106. -webkit-transform: translateY(0%) !important;
  107. transform: translateY(0%) !important;
  108. }
  109. .ui.slide.down.reveal > .hidden.content {
  110. -webkit-transform: translateY(-100%) !important;
  111. transform: translateY(-100%) !important;
  112. }
  113. .ui.slide.down.active.reveal > .visible.content,
  114. .ui.slide.down.reveal:hover > .visible.content {
  115. -webkit-transform: translateY(100%) !important;
  116. transform: translateY(100%) !important;
  117. }
  118. .ui.slide.down.active.reveal > .hidden.content,
  119. .ui.slide.down.reveal:hover > .hidden.content {
  120. -webkit-transform: translateY(0%) !important;
  121. transform: translateY(0%) !important;
  122. }
  123. /*--------------
  124. Fade
  125. ---------------*/
  126. .ui.fade.reveal > .visible.content {
  127. opacity: 1;
  128. }
  129. .ui.fade.active.reveal > .visible.content,
  130. .ui.fade.reveal:hover > .visible.content {
  131. opacity: 0;
  132. }
  133. /*--------------
  134. Move
  135. ---------------*/
  136. .ui.move.reveal {
  137. position: relative !important;
  138. overflow: hidden !important;
  139. white-space: nowrap;
  140. }
  141. .ui.move.reveal > .content {
  142. display: block;
  143. float: left;
  144. white-space: normal;
  145. margin: 0em;
  146. -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s;
  147. transition: -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s;
  148. transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s;
  149. transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s, -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 0.1s;
  150. }
  151. .ui.move.reveal > .visible.content {
  152. position: relative !important;
  153. }
  154. .ui.move.reveal > .hidden.content {
  155. position: absolute !important;
  156. left: 0% !important;
  157. width: 100% !important;
  158. }
  159. .ui.move.active.reveal > .visible.content,
  160. .ui.move.reveal:hover > .visible.content {
  161. -webkit-transform: translateX(-100%) !important;
  162. transform: translateX(-100%) !important;
  163. }
  164. .ui.move.right.active.reveal > .visible.content,
  165. .ui.move.right.reveal:hover > .visible.content {
  166. -webkit-transform: translateX(100%) !important;
  167. transform: translateX(100%) !important;
  168. }
  169. .ui.move.up.active.reveal > .visible.content,
  170. .ui.move.up.reveal:hover > .visible.content {
  171. -webkit-transform: translateY(-100%) !important;
  172. transform: translateY(-100%) !important;
  173. }
  174. .ui.move.down.active.reveal > .visible.content,
  175. .ui.move.down.reveal:hover > .visible.content {
  176. -webkit-transform: translateY(100%) !important;
  177. transform: translateY(100%) !important;
  178. }
  179. /*--------------
  180. Rotate
  181. ---------------*/
  182. .ui.rotate.reveal > .visible.content {
  183. -webkit-transition-duration: 0.5s;
  184. transition-duration: 0.5s;
  185. -webkit-transform: rotate(0deg);
  186. transform: rotate(0deg);
  187. }
  188. .ui.rotate.reveal > .visible.content,
  189. .ui.rotate.right.reveal > .visible.content {
  190. -webkit-transform-origin: bottom right;
  191. transform-origin: bottom right;
  192. }
  193. .ui.rotate.active.reveal > .visible.content,
  194. .ui.rotate.reveal:hover > .visible.content,
  195. .ui.rotate.right.active.reveal > .visible.content,
  196. .ui.rotate.right.reveal:hover > .visible.content {
  197. -webkit-transform: rotate(110deg);
  198. transform: rotate(110deg);
  199. }
  200. .ui.rotate.left.reveal > .visible.content {
  201. -webkit-transform-origin: bottom left;
  202. transform-origin: bottom left;
  203. }
  204. .ui.rotate.left.active.reveal > .visible.content,
  205. .ui.rotate.left.reveal:hover > .visible.content {
  206. -webkit-transform: rotate(-110deg);
  207. transform: rotate(-110deg);
  208. }
  209. /*******************************
  210. States
  211. *******************************/
  212. .ui.disabled.reveal:hover > .visible.visible.content {
  213. position: static !important;
  214. display: block !important;
  215. opacity: 1 !important;
  216. top: 0 !important;
  217. left: 0 !important;
  218. right: auto !important;
  219. bottom: auto !important;
  220. -webkit-transform: none !important;
  221. transform: none !important;
  222. }
  223. .ui.disabled.reveal:hover > .hidden.hidden.content {
  224. display: none !important;
  225. }
  226. /*******************************
  227. Coupling
  228. *******************************/
  229. .ui.reveal > .ui.ribbon.label {
  230. z-index: 5;
  231. }
  232. /*******************************
  233. Variations
  234. *******************************/
  235. /*--------------
  236. Visible
  237. ---------------*/
  238. .ui.visible.reveal {
  239. overflow: visible;
  240. }
  241. /*--------------
  242. Instant
  243. ---------------*/
  244. .ui.instant.reveal > .content {
  245. -webkit-transition-delay: 0s !important;
  246. transition-delay: 0s !important;
  247. }
  248. /*--------------
  249. Sizing
  250. ---------------*/
  251. .ui.reveal > .content {
  252. font-size: 1rem !important;
  253. }
  254. /*******************************
  255. Theme Overrides
  256. *******************************/
  257. /*******************************
  258. Site Overrides
  259. *******************************/