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.

191 lines
4.2 KiB

11 years ago
11 years ago
11 years ago
  1. /*
  2. * # Semantic - Dimmer
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Dimmer
  13. *******************************/
  14. .ui.dimmable {
  15. position: relative;
  16. }
  17. .ui.dimmer {
  18. display: none;
  19. position: absolute;
  20. top: 0em !important;
  21. left: 0em !important;
  22. width: 0%;
  23. height: 0%;
  24. text-align: center;
  25. vertical-align: middle;
  26. background-color: rgba(0, 0, 0, 0.85);
  27. opacity: 0;
  28. line-height: 1;
  29. -webkit-animation-fill-mode: both;
  30. -moz-animation-fill-mode: both;
  31. -o-animation-fill-mode: both;
  32. -ms-animation-fill-mode: both;
  33. animation-fill-mode: both;
  34. -webkit-animation-duration: 0.5s;
  35. -moz-animation-duration: 0.5s;
  36. -o-animation-duration: 0.5s;
  37. -ms-animation-duration: 0.5s;
  38. animation-duration: 0.5s;
  39. -webkit-transition: background-color 0.5s linear;
  40. -moz-transition: background-color 0.5s linear;
  41. -o-transition: background-color 0.5s linear;
  42. -ms-transition: background-color 0.5s linear;
  43. transition: background-color 0.5s linear;
  44. -webkit-user-select: none;
  45. -moz-user-select: none;
  46. -ms-user-select: none;
  47. user-select: none;
  48. -webkit-box-sizing: border-box;
  49. -moz-box-sizing: border-box;
  50. -ms-box-sizing: border-box;
  51. box-sizing: border-box;
  52. z-index: 1000;
  53. }
  54. /*
  55. .ui.dimmed.dimmable > :not(.dimmer) {
  56. -webkit-transition:
  57. filter 0.5s ease
  58. ;
  59. -moz-transition:
  60. filter 0.5s ease
  61. ;
  62. -o-transition:
  63. filter 0.5s ease
  64. ;
  65. -ms-transition:
  66. filter 0.5s ease
  67. ;
  68. transition:
  69. filter 0.5s ease
  70. ;
  71. }
  72. */
  73. /* Dimmer Content */.ui.dimmer > .content {
  74. width: 100%;
  75. height: 100%;
  76. display: table;
  77. -webkit-user-select: text;
  78. -moz-user-select: text;
  79. -ms-user-select: text;
  80. user-select: text;
  81. }
  82. .ui.dimmer > .content > div {
  83. display: table-cell;
  84. vertical-align: middle;
  85. color: #FFFFFF;
  86. }
  87. /* Loose Coupling */
  88. .ui.segment > .ui.dimmer {
  89. -webkit-border-radius: 5px;
  90. -moz-border-radius: 5px;
  91. border-radius: 5px;
  92. }
  93. .ui.horizontal.segment > .ui.dimmer,
  94. .ui.vertical.segment > .ui.dimmer {
  95. -webkit-border-radius: 5px;
  96. -moz-border-radius: 5px;
  97. border-radius: 5px;
  98. }
  99. /*******************************
  100. States
  101. *******************************/
  102. /*
  103. .ui.dimmed.dimmable > :not(.dimmer) {
  104. -webkit-filter: ~"blur(5px) grayscale(0.7)";
  105. -moz-filter: ~"blur(5px) grayscale(0.7)";
  106. }
  107. */
  108. .ui.dimmed.dimmable > .ui.dimmer,
  109. .ui.active.dimmer {
  110. display: block;
  111. width: 100%;
  112. height: 100%;
  113. opacity: 1;
  114. }
  115. .ui.disabled.dimmer {
  116. width: 0em !important;
  117. height: 0em !important;
  118. }
  119. /*******************************
  120. Variations
  121. *******************************/
  122. /*--------------
  123. Page
  124. ---------------*/
  125. .ui.page.dimmer {
  126. position: fixed;
  127. -webkit-transform-style: preserve-3d;
  128. -moz-transform-style: preserve-3d;
  129. -ms-transform-style: preserve-3d;
  130. transform-style: preserve-3d;
  131. -webkit-perspective: 2000px;
  132. -moz-perspective: 2000px;
  133. perspective: 2000px;
  134. -webkit-transform-origin: center center;
  135. -moz-transform-origin: center center;
  136. -o-transform-origin: center center;
  137. -ms-transform-origin: center center;
  138. transform-origin: center center;
  139. }
  140. .ui.scrolling.page.dimmer {
  141. position: absolute;
  142. }
  143. /*
  144. body.ui.dimmed.dimmable > :not(.dimmer){
  145. -webkit-filter: ~"blur(15px) grayscale(0.7)";
  146. -moz-filter: ~"blur(15px) grayscale(0.7)";
  147. }
  148. */
  149. /*--------------
  150. Aligned
  151. ---------------*/
  152. .ui.dimmer > .top.aligned.content > * {
  153. vertical-align: top;
  154. }
  155. .ui.dimmer > .bottom.aligned.content > * {
  156. vertical-align: bottom;
  157. }
  158. /*--------------
  159. Inverted
  160. ---------------*/
  161. .ui.inverted.dimmer {
  162. background-color: rgba(255, 255, 255, 0.85);
  163. }
  164. .ui.inverted.dimmer > .content > * {
  165. color: rgba(0, 0, 0, 0.8);
  166. }
  167. /*--------------
  168. Simple
  169. ---------------*/
  170. /* Displays without javascript */
  171. .ui.simple.dimmer {
  172. display: block;
  173. overflow: hidden;
  174. opacity: 1;
  175. z-index: -100;
  176. background-color: rgba(0, 0, 0, 0);
  177. }
  178. .ui.dimmed.dimmable > .ui.simple.dimmer {
  179. overflow: visible;
  180. opacity: 1;
  181. width: 100%;
  182. height: 100%;
  183. background-color: rgba(0, 0, 0, 0.85);
  184. z-index: 1;
  185. }
  186. .ui.simple.inverted.dimmer {
  187. background-color: rgba(255, 255, 255, 0);
  188. }
  189. .ui.dimmed.dimmable > .ui.simple.inverted.dimmer {
  190. background-color: rgba(255, 255, 255, 0.85);
  191. }