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.

293 lines
7.6 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic - Dimmer
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Theme
  13. *******************************/
  14. /*
  15. */
  16. /*******************************
  17. Folders
  18. *******************************/
  19. /* Path to theme packages */
  20. /* Path to site override folder */
  21. /*******************************
  22. Themes
  23. *******************************/
  24. /* To override a theme for an individual element
  25. specify theme name below
  26. Be sure to update the user folder name (see README)
  27. */
  28. /* Global */
  29. /* Elements */
  30. /* Collections */
  31. /* Modules */
  32. /* Views */
  33. /*******************************
  34. Import Directives
  35. *******************************/
  36. /*------------------
  37. Load Default
  38. -------------------*/
  39. /*******************************
  40. Site Variables
  41. *******************************/
  42. /*-------------------
  43. Paths
  44. --------------------*/
  45. /*-------------------
  46. Page
  47. --------------------*/
  48. /*-------------------
  49. Grid
  50. --------------------*/
  51. /*-------------------
  52. Breakpoints
  53. --------------------*/
  54. /*-------------------
  55. Fonts
  56. --------------------*/
  57. /*-------------------
  58. Icons
  59. --------------------*/
  60. /* Max Width of Icon */
  61. /*-------------------
  62. Easing
  63. --------------------*/
  64. /*******************************
  65. BG Colors
  66. *******************************/
  67. /*******************************
  68. Colors
  69. *******************************/
  70. /*--- Colors ---*/
  71. /*--- Neutrals ---*/
  72. /*--- Text Colors ---*/
  73. /* Preserve */
  74. /* Adjust for Legibility */
  75. /*--- Backgrounds ---*/
  76. /*-------------------
  77. Emotive Colors
  78. --------------------*/
  79. /* Positive / Negative */
  80. /* Messages */
  81. /*-------------------
  82. Text Colors
  83. --------------------*/
  84. /*-------------------
  85. Brand Colors
  86. --------------------*/
  87. /*-------------------
  88. Borders
  89. --------------------*/
  90. /*-------------------
  91. Sizes
  92. --------------------*/
  93. /*-------------------
  94. Transitions
  95. --------------------*/
  96. /*******************************
  97. States
  98. *******************************/
  99. /*-------------------
  100. Disabled
  101. --------------------*/
  102. /*-------------------
  103. Hover
  104. --------------------*/
  105. /*--- Colors ---*/
  106. /*--- Emotive ---*/
  107. /*--- Neutrals ---*/
  108. /*-------------------
  109. Down (:active)
  110. --------------------*/
  111. /*--- Colors ---*/
  112. /*--- Emotive ---*/
  113. /*--- Neutrals ---*/
  114. /*-------------------
  115. Active
  116. --------------------*/
  117. /*--- Standard ---*/
  118. /*--- Emotive ---*/
  119. /*--- Neutrals ---*/
  120. /*******************************
  121. Dimmer
  122. *******************************/
  123. /* Hidden (Default) */
  124. /* Content */
  125. /* Visible */
  126. /*-------------------
  127. Variations
  128. --------------------*/
  129. /* Simple */
  130. /*------------------
  131. Load Theme
  132. -------------------*/
  133. /*------------------
  134. Load Site
  135. -------------------*/
  136. /*******************************
  137. User Global Variables
  138. *******************************/
  139. /*******************************
  140. User Variable Overrides
  141. *******************************/
  142. /*------------------
  143. Override Mix-in
  144. -------------------*/
  145. /*******************************
  146. Dimmer
  147. *******************************/
  148. .ui.dimmable {
  149. position: relative;
  150. }
  151. .ui.dimmer {
  152. display: none;
  153. position: absolute;
  154. top: 0em !important;
  155. left: 0em !important;
  156. width: 0%;
  157. height: 0%;
  158. text-align: center;
  159. vertical-align: middle;
  160. background: rgba(0, 0, 0, 0.85);
  161. opacity: 0;
  162. line-height: 1;
  163. -webkit-animation-fill-mode: both;
  164. animation-fill-mode: both;
  165. -webkit-animation-duration: 0.5s;
  166. animation-duration: 0.5s;
  167. -webkit-transition: background-color 0.5s linear;
  168. transition: background-color 0.5s linear;
  169. -webkit-user-select: none;
  170. -moz-user-select: none;
  171. -ms-user-select: none;
  172. user-select: none;
  173. z-index: 1000;
  174. }
  175. /* Dimmer Content */
  176. .ui.dimmer > .content {
  177. width: 100%;
  178. height: 100%;
  179. display: table;
  180. -webkit-user-select: text;
  181. -moz-user-select: text;
  182. -ms-user-select: text;
  183. user-select: text;
  184. }
  185. .ui.dimmer > .content > div {
  186. display: table-cell;
  187. vertical-align: middle;
  188. color: #ffffff;
  189. }
  190. /* Loose Coupling */
  191. .ui.segment > .ui.dimmer {
  192. border-radius: inherit !important;
  193. }
  194. /*******************************
  195. States
  196. *******************************/
  197. .ui.dimmed.dimmable:not(body) {
  198. overflow: hidden;
  199. }
  200. .ui.dimmed.dimmable > .ui.animating.dimmer,
  201. .ui.dimmed.dimmable > .ui.visible.dimmer,
  202. .ui.active.dimmer {
  203. display: block;
  204. width: 100%;
  205. height: 100%;
  206. opacity: 1;
  207. }
  208. .ui.disabled.dimmer {
  209. width: 0 !important;
  210. height: 0 !important;
  211. }
  212. /*******************************
  213. Variations
  214. *******************************/
  215. /*--------------
  216. Page
  217. ---------------*/
  218. .ui.page.dimmer {
  219. position: fixed;
  220. -webkit-transform-style: preserve-3d;
  221. transform-style: preserve-3d;
  222. -webkit-perspective: 2000px;
  223. perspective: 2000px;
  224. -webkit-transform-origin: center center;
  225. -ms-transform-origin: center center;
  226. transform-origin: center center;
  227. }
  228. .ui.scrolling.dimmable > .dimmer,
  229. .ui.scrolling.page.dimmer {
  230. position: absolute;
  231. }
  232. body.ui.dimmed.dimmable > :not(.dimmer) {
  233. -webkit-filter: blur(15px) grayscale(0.7);
  234. filter: blur(15px) grayscale(0.7);
  235. }
  236. /*--------------
  237. Aligned
  238. ---------------*/
  239. .ui.dimmer > .top.aligned.content > * {
  240. vertical-align: top;
  241. }
  242. .ui.dimmer > .bottom.aligned.content > * {
  243. vertical-align: bottom;
  244. }
  245. /*--------------
  246. Inverted
  247. ---------------*/
  248. .ui.inverted.dimmer {
  249. background: rgba(255, 255, 255, 0.85);
  250. }
  251. .ui.inverted.dimmer > .content > * {
  252. color: #ffffff;
  253. }
  254. /*--------------
  255. Simple
  256. ---------------*/
  257. /* Displays without javascript */
  258. .ui.simple.dimmer {
  259. display: block;
  260. overflow: hidden;
  261. opacity: 1;
  262. z-index: -100;
  263. background-color: rgba(0, 0, 0, 0);
  264. }
  265. .ui.dimmed.dimmable > .ui.simple.dimmer {
  266. overflow: visible;
  267. opacity: 1;
  268. width: 100%;
  269. height: 100%;
  270. background: rgba(0, 0, 0, 0.85);
  271. z-index: 1;
  272. }
  273. .ui.simple.inverted.dimmer {
  274. background: rgba(255, 255, 255, 0);
  275. }
  276. .ui.dimmed.dimmable > .ui.simple.inverted.dimmer {
  277. background: rgba(255, 255, 255, 0.85);
  278. }
  279. /*******************************
  280. Overrides
  281. *******************************/
  282. /*******************************
  283. User Overrides
  284. *******************************/