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.

169 lines
3.9 KiB

  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. /* Dimmer Content */.ui.dimmer > .content {
  55. width: 100%;
  56. height: 100%;
  57. display: table;
  58. -webkit-user-select: text;
  59. -moz-user-select: text;
  60. -ms-user-select: text;
  61. user-select: text;
  62. }
  63. .ui.dimmer > .content > div {
  64. display: table-cell;
  65. vertical-align: middle;
  66. color: #FFFFFF;
  67. }
  68. /* Loose Coupling */
  69. .ui.segment > .ui.dimmer {
  70. -webkit-border-radius: 5px;
  71. -moz-border-radius: 5px;
  72. border-radius: 5px;
  73. }
  74. .ui.horizontal.segment > .ui.dimmer,
  75. .ui.vertical.segment > .ui.dimmer {
  76. -webkit-border-radius: 5px;
  77. -moz-border-radius: 5px;
  78. border-radius: 5px;
  79. }
  80. /*******************************
  81. States
  82. *******************************/
  83. .ui.dimmed.dimmable:not(body) {
  84. overflow: hidden;
  85. }
  86. .ui.dimmed.dimmable > .ui.dimmer,
  87. .ui.active.dimmer {
  88. display: block;
  89. width: 100%;
  90. height: 100%;
  91. opacity: 1;
  92. }
  93. .ui.disabled.dimmer {
  94. width: 0em !important;
  95. height: 0em !important;
  96. }
  97. /*******************************
  98. Variations
  99. *******************************/
  100. /*--------------
  101. Page
  102. ---------------*/
  103. .ui.page.dimmer {
  104. position: fixed;
  105. -webkit-transform-style: preserve-3d;
  106. -moz-transform-style: preserve-3d;
  107. -ms-transform-style: preserve-3d;
  108. transform-style: preserve-3d;
  109. -webkit-perspective: 2000px;
  110. -moz-perspective: 2000px;
  111. perspective: 2000px;
  112. -webkit-transform-origin: center center;
  113. -moz-transform-origin: center center;
  114. -o-transform-origin: center center;
  115. -ms-transform-origin: center center;
  116. transform-origin: center center;
  117. }
  118. .ui.scrolling.page.dimmer {
  119. position: absolute;
  120. }
  121. /*
  122. body.ui.dimmed.dimmable > :not(.dimmer){
  123. -webkit-filter: ~"blur(15px) grayscale(0.7)";
  124. -moz-filter: ~"blur(15px) grayscale(0.7)";
  125. }
  126. */
  127. /*--------------
  128. Aligned
  129. ---------------*/
  130. .ui.dimmer > .top.aligned.content > * {
  131. vertical-align: top;
  132. }
  133. .ui.dimmer > .bottom.aligned.content > * {
  134. vertical-align: bottom;
  135. }
  136. /*--------------
  137. Inverted
  138. ---------------*/
  139. .ui.inverted.dimmer {
  140. background-color: rgba(255, 255, 255, 0.85);
  141. }
  142. .ui.inverted.dimmer > .content > * {
  143. color: rgba(0, 0, 0, 0.8);
  144. }
  145. /*--------------
  146. Simple
  147. ---------------*/
  148. /* Displays without javascript */
  149. .ui.simple.dimmer {
  150. display: block;
  151. overflow: hidden;
  152. opacity: 1;
  153. z-index: -100;
  154. background-color: rgba(0, 0, 0, 0);
  155. }
  156. .ui.dimmed.dimmable > .ui.simple.dimmer {
  157. overflow: visible;
  158. opacity: 1;
  159. width: 100%;
  160. height: 100%;
  161. background-color: rgba(0, 0, 0, 0.85);
  162. z-index: 1;
  163. }
  164. .ui.simple.inverted.dimmer {
  165. background-color: rgba(255, 255, 255, 0);
  166. }
  167. .ui.dimmed.dimmable > .ui.simple.inverted.dimmer {
  168. background-color: rgba(255, 255, 255, 0.85);
  169. }