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.

307 lines
7.8 KiB

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 2014 Contributor
  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 Settings
  41. *******************************/
  42. /*-------------------
  43. Paths
  44. --------------------*/
  45. /*-------------------
  46. Fonts
  47. --------------------*/
  48. /*-------------------
  49. Site Colors
  50. --------------------*/
  51. /*--- Colors ---*/
  52. /*--- Light Colors ---*/
  53. /*-------------------
  54. Page
  55. --------------------*/
  56. /* Used to match floats with text */
  57. /*-------------------
  58. Background Colors
  59. --------------------*/
  60. /* Used for differentiating neutrals */
  61. /* Used for differentiating layers */
  62. /*-------------------
  63. Grid
  64. --------------------*/
  65. /*-------------------
  66. Breakpoints
  67. --------------------*/
  68. /*******************************
  69. Power-User
  70. *******************************/
  71. /*-------------------
  72. Icons
  73. --------------------*/
  74. /* Max Width of Icon */
  75. /*-------------------
  76. Easing
  77. --------------------*/
  78. /*--- Neutrals ---*/
  79. /*--- Colored Backgrounds ---*/
  80. /*--- Colored Text ---*/
  81. /*--- Colored Headers ---*/
  82. /*-------------------
  83. Emotive Colors
  84. --------------------*/
  85. /* Mood */
  86. /* Solid Background Color */
  87. /* Status */
  88. /* Darkened Headers */
  89. /*-------------------
  90. Neutral Text
  91. --------------------*/
  92. /*-------------------
  93. Brand Colors
  94. --------------------*/
  95. /*-------------------
  96. Grid Columns
  97. --------------------*/
  98. /*-------------------
  99. Borders
  100. --------------------*/
  101. /*-------------------
  102. Sizes
  103. --------------------*/
  104. /*-------------------
  105. Transitions
  106. --------------------*/
  107. /*******************************
  108. States
  109. *******************************/
  110. /*-------------------
  111. Disabled
  112. --------------------*/
  113. /*-------------------
  114. Hover
  115. --------------------*/
  116. /*--- Colors ---*/
  117. /*--- Emotive ---*/
  118. /*--- Neutrals ---*/
  119. /*-------------------
  120. Down (:active)
  121. --------------------*/
  122. /*--- Colors ---*/
  123. /*--- Emotive ---*/
  124. /*--- Neutrals ---*/
  125. /*-------------------
  126. Active
  127. --------------------*/
  128. /*--- Standard ---*/
  129. /*--- Emotive ---*/
  130. /*--- Neutrals ---*/
  131. /*******************************
  132. Dimmer
  133. *******************************/
  134. /* Hidden (Default) */
  135. /* Content */
  136. /* Visible */
  137. /*-------------------
  138. Variations
  139. --------------------*/
  140. /* Simple */
  141. /*------------------
  142. Load Theme
  143. -------------------*/
  144. /*------------------
  145. Load Site
  146. -------------------*/
  147. /*******************************
  148. User Global Variables
  149. *******************************/
  150. /*******************************
  151. User Variable Overrides
  152. *******************************/
  153. /*------------------
  154. Override Mix-in
  155. -------------------*/
  156. /*******************************
  157. Dimmer
  158. *******************************/
  159. .ui.dimmable {
  160. position: relative;
  161. }
  162. .ui.dimmer {
  163. display: none;
  164. position: absolute;
  165. top: 0em !important;
  166. left: 0em !important;
  167. width: 0%;
  168. height: 0%;
  169. text-align: center;
  170. vertical-align: middle;
  171. background: rgba(0, 0, 0, 0.85);
  172. opacity: 0;
  173. line-height: 1;
  174. -webkit-animation-fill-mode: both;
  175. animation-fill-mode: both;
  176. -webkit-animation-duration: 0.5s;
  177. animation-duration: 0.5s;
  178. -webkit-transition: background-color 0.5s linear;
  179. transition: background-color 0.5s linear;
  180. -webkit-user-select: none;
  181. -moz-user-select: none;
  182. -ms-user-select: none;
  183. user-select: none;
  184. will-transform: opacity;
  185. z-index: 1000;
  186. }
  187. /* Dimmer Content */
  188. .ui.dimmer > .content {
  189. width: 100%;
  190. height: 100%;
  191. display: table;
  192. -webkit-user-select: text;
  193. -moz-user-select: text;
  194. -ms-user-select: text;
  195. user-select: text;
  196. }
  197. .ui.dimmer > .content > div {
  198. display: table-cell;
  199. vertical-align: middle;
  200. color: #ffffff;
  201. }
  202. /* Loose Coupling */
  203. .ui.segment > .ui.dimmer {
  204. border-radius: inherit !important;
  205. }
  206. /*******************************
  207. States
  208. *******************************/
  209. .ui.dimmed.dimmable:not(body) {
  210. overflow: hidden;
  211. }
  212. .ui.dimmed.dimmable > .ui.animating.dimmer,
  213. .ui.dimmed.dimmable > .ui.visible.dimmer,
  214. .ui.active.dimmer {
  215. display: block;
  216. width: 100%;
  217. height: 100%;
  218. opacity: 1;
  219. }
  220. .ui.disabled.dimmer {
  221. width: 0 !important;
  222. height: 0 !important;
  223. }
  224. /*******************************
  225. Variations
  226. *******************************/
  227. /*--------------
  228. Page
  229. ---------------*/
  230. .ui.page.dimmer {
  231. position: fixed;
  232. -webkit-transform-style: preserve-3d;
  233. transform-style: preserve-3d;
  234. -webkit-perspective: 2000px;
  235. perspective: 2000px;
  236. -webkit-transform-origin: center center;
  237. -ms-transform-origin: center center;
  238. transform-origin: center center;
  239. }
  240. body.ui.dimmed.dimmable {
  241. overflow: hidden;
  242. }
  243. body.ui.dimmable > .dimmer {
  244. position: fixed;
  245. }
  246. body.ui.dimmed.dimmable > :not(.dimmer) {
  247. -webkit-filter: '';
  248. filter: '';
  249. }
  250. /*--------------
  251. Aligned
  252. ---------------*/
  253. .ui.dimmer > .top.aligned.content > * {
  254. vertical-align: top;
  255. }
  256. .ui.dimmer > .bottom.aligned.content > * {
  257. vertical-align: bottom;
  258. }
  259. /*--------------
  260. Inverted
  261. ---------------*/
  262. .ui.inverted.dimmer {
  263. background: rgba(255, 255, 255, 0.85);
  264. }
  265. .ui.inverted.dimmer > .content > * {
  266. color: #ffffff;
  267. }
  268. /*--------------
  269. Simple
  270. ---------------*/
  271. /* Displays without javascript */
  272. .ui.simple.dimmer {
  273. display: block;
  274. overflow: hidden;
  275. opacity: 1;
  276. z-index: -100;
  277. background-color: rgba(0, 0, 0, 0);
  278. }
  279. .ui.dimmed.dimmable > .ui.simple.dimmer {
  280. overflow: visible;
  281. opacity: 1;
  282. width: 100%;
  283. height: 100%;
  284. background: rgba(0, 0, 0, 0.85);
  285. z-index: 1;
  286. }
  287. .ui.simple.inverted.dimmer {
  288. background: rgba(255, 255, 255, 0);
  289. }
  290. .ui.dimmed.dimmable > .ui.simple.inverted.dimmer {
  291. background: rgba(255, 255, 255, 0.85);
  292. }
  293. /*******************************
  294. Overrides
  295. *******************************/
  296. /*******************************
  297. User Overrides
  298. *******************************/