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.

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