dimmer.css 3.8 KB

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