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.

154 lines
3.4 KiB

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