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.

200 lines
3.9 KiB

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