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.

187 lines
3.5 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic UI
  3. * https://github.com/Semantic-Org/Semantic-UI
  4. * http://www.semantic-ui.com/
  5. *
  6. * Copyright 2014 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: 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 > div {
  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: preserve-3d;
  87. transform-style: preserve-3d;
  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. body.dimmable > :not(.dimmer) {
  103. filter: @elementStartFilter;
  104. }
  105. body.dimmed.dimmable > :not(.dimmer) {
  106. filter: @elementEndFilter;
  107. transition: @elementTransition;
  108. }
  109. */
  110. /*--------------
  111. Aligned
  112. ---------------*/
  113. .ui.dimmer > .top.aligned.content > * {
  114. vertical-align: top;
  115. }
  116. .ui.dimmer > .bottom.aligned.content > * {
  117. vertical-align: bottom;
  118. }
  119. /*--------------
  120. Inverted
  121. ---------------*/
  122. .ui.inverted.dimmer {
  123. background: rgba(255, 255, 255, 0.85);
  124. }
  125. .ui.inverted.dimmer > .content > * {
  126. color: #ffffff;
  127. }
  128. /*--------------
  129. Simple
  130. ---------------*/
  131. /* Displays without javascript */
  132. .ui.simple.dimmer {
  133. display: block;
  134. overflow: hidden;
  135. opacity: 1;
  136. width: 0%;
  137. height: 0%;
  138. z-index: -100;
  139. background-color: rgba(0, 0, 0, 0);
  140. }
  141. .dimmed.dimmable > .ui.simple.dimmer {
  142. overflow: visible;
  143. opacity: 1;
  144. width: 100%;
  145. height: 100%;
  146. background: rgba(0, 0, 0, 0.85);
  147. z-index: 1;
  148. }
  149. .ui.simple.inverted.dimmer {
  150. background: rgba(255, 255, 255, 0);
  151. }
  152. .dimmed.dimmable > .ui.simple.inverted.dimmer {
  153. background: rgba(255, 255, 255, 0.85);
  154. }
  155. /*******************************
  156. Theme Overrides
  157. *******************************/
  158. /*******************************
  159. User Overrides
  160. *******************************/