dimmer.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464
  1. /*!
  2. * # Fomantic-UI - Dimmer
  3. * http://github.com/fomantic/Fomantic-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: 0 !important;
  20. left: 0 !important;
  21. width: 100%;
  22. height: 100%;
  23. text-align: center;
  24. vertical-align: middle;
  25. padding: 1em;
  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-box-orient: vertical;
  36. -webkit-box-direction: normal;
  37. -ms-flex-direction: column;
  38. flex-direction: column;
  39. -webkit-box-align: center;
  40. -ms-flex-align: center;
  41. align-items: center;
  42. -webkit-box-pack: center;
  43. -ms-flex-pack: center;
  44. justify-content: center;
  45. -webkit-user-select: none;
  46. -moz-user-select: none;
  47. -ms-user-select: none;
  48. user-select: none;
  49. will-change: opacity;
  50. z-index: 1000;
  51. }
  52. /* Dimmer Content */
  53. .ui.dimmer > .content {
  54. -webkit-user-select: text;
  55. -moz-user-select: text;
  56. -ms-user-select: text;
  57. user-select: text;
  58. color: #FFFFFF;
  59. }
  60. /* Loose Coupling */
  61. .ui.segment > .ui.dimmer:not(.page) {
  62. border-radius: inherit;
  63. }
  64. /* Scrollbars */
  65. .ui.dimmer:not(.inverted)::-webkit-scrollbar-track {
  66. background: rgba(255, 255, 255, 0.1);
  67. }
  68. .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb {
  69. background: rgba(255, 255, 255, 0.25);
  70. }
  71. .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive {
  72. background: rgba(255, 255, 255, 0.15);
  73. }
  74. .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover {
  75. background: rgba(255, 255, 255, 0.35);
  76. }
  77. /*******************************
  78. States
  79. *******************************/
  80. /* Animating */
  81. .animating.dimmable:not(body),
  82. .dimmed.dimmable:not(body) {
  83. overflow: hidden;
  84. }
  85. /* Animating / Active / Visible */
  86. .dimmed.dimmable > .ui.animating.dimmer,
  87. .dimmed.dimmable > .ui.visible.dimmer,
  88. .ui.active.dimmer {
  89. display: -webkit-box;
  90. display: -ms-flexbox;
  91. display: flex;
  92. opacity: 1;
  93. }
  94. /* Disabled */
  95. .ui.disabled.dimmer {
  96. width: 0 !important;
  97. height: 0 !important;
  98. }
  99. /*******************************
  100. Variations
  101. *******************************/
  102. /*--------------
  103. Legacy
  104. ---------------*/
  105. /* Animating / Active / Visible */
  106. .dimmed.dimmable > .ui.animating.legacy.dimmer,
  107. .dimmed.dimmable > .ui.visible.legacy.dimmer,
  108. .ui.active.legacy.dimmer {
  109. display: block;
  110. }
  111. /*--------------
  112. Alignment
  113. ---------------*/
  114. .ui[class*="top aligned"].dimmer {
  115. -webkit-box-pack: start;
  116. -ms-flex-pack: start;
  117. justify-content: flex-start;
  118. }
  119. .ui[class*="bottom aligned"].dimmer {
  120. -webkit-box-pack: end;
  121. -ms-flex-pack: end;
  122. justify-content: flex-end;
  123. }
  124. /*--------------
  125. Page
  126. ---------------*/
  127. .ui.page.dimmer {
  128. position: fixed;
  129. -webkit-transform-style: '';
  130. transform-style: '';
  131. -webkit-perspective: 2000px;
  132. perspective: 2000px;
  133. -webkit-transform-origin: center center;
  134. transform-origin: center center;
  135. }
  136. body.animating.in.dimmable,
  137. body.dimmed.dimmable {
  138. overflow: hidden;
  139. }
  140. body.dimmable > .dimmer {
  141. position: fixed;
  142. }
  143. /*--------------
  144. Blurring
  145. ---------------*/
  146. .blurring.dimmable > :not(.dimmer) {
  147. -webkit-filter: initial;
  148. filter: initial;
  149. -webkit-transition: 800ms -webkit-filter ease;
  150. transition: 800ms -webkit-filter ease;
  151. transition: 800ms filter ease;
  152. transition: 800ms filter ease, 800ms -webkit-filter ease;
  153. }
  154. .blurring.dimmed.dimmable > :not(.dimmer):not(.popup) {
  155. -webkit-filter: blur(5px) grayscale(0.7);
  156. filter: blur(5px) grayscale(0.7);
  157. }
  158. /* Dimmer Color */
  159. .blurring.dimmable > .dimmer {
  160. background-color: rgba(0, 0, 0, 0.6);
  161. }
  162. .blurring.dimmable > .inverted.dimmer {
  163. background-color: rgba(255, 255, 255, 0.6);
  164. }
  165. /*--------------
  166. Aligned
  167. ---------------*/
  168. .ui.dimmer > .top.aligned.content > * {
  169. vertical-align: top;
  170. }
  171. .ui.dimmer > .bottom.aligned.content > * {
  172. vertical-align: bottom;
  173. }
  174. /*--------------
  175. Shades
  176. ---------------*/
  177. .medium.medium.medium.medium.medium.dimmer {
  178. background-color: rgba(0, 0, 0, 0.65);
  179. }
  180. .light.light.light.light.light.dimmer {
  181. background-color: rgba(0, 0, 0, 0.45);
  182. }
  183. .very.light.light.light.light.dimmer {
  184. background-color: rgba(0, 0, 0, 0.25);
  185. }
  186. /*--------------
  187. Inverted
  188. ---------------*/
  189. .ui.inverted.dimmer {
  190. background-color: rgba(255, 255, 255, 0.85);
  191. }
  192. .ui.inverted.dimmer > .content,
  193. .ui.inverted.dimmer > .content > * {
  194. color: #000000;
  195. }
  196. /*--------------
  197. Inverted Shades
  198. ---------------*/
  199. .medium.medium.medium.medium.medium.inverted.dimmer {
  200. background-color: rgba(255, 255, 255, 0.65);
  201. }
  202. .light.light.light.light.light.inverted.dimmer {
  203. background-color: rgba(255, 255, 255, 0.45);
  204. }
  205. .very.light.light.light.light.inverted.dimmer {
  206. background-color: rgba(255, 255, 255, 0.25);
  207. }
  208. /*--------------
  209. Simple
  210. ---------------*/
  211. /* Displays without javascript */
  212. .ui.simple.dimmer {
  213. display: block;
  214. overflow: hidden;
  215. opacity: 0;
  216. width: 0;
  217. height: 0;
  218. z-index: -100;
  219. background-color: rgba(0, 0, 0, 0);
  220. }
  221. .dimmed.dimmable > .ui.simple.dimmer {
  222. overflow: visible;
  223. opacity: 1;
  224. width: 100%;
  225. height: 100%;
  226. background-color: rgba(0, 0, 0, 0.85);
  227. z-index: 1;
  228. }
  229. .ui.simple.inverted.dimmer {
  230. background-color: rgba(255, 255, 255, 0);
  231. }
  232. .dimmed.dimmable > .ui.simple.inverted.dimmer {
  233. background-color: rgba(255, 255, 255, 0.85);
  234. }
  235. /*--------------
  236. Partially
  237. ----------------*/
  238. .ui[class*="top dimmer"],
  239. .ui[class*="center dimmer"],
  240. .ui[class*="bottom dimmer"] {
  241. height: auto;
  242. }
  243. .ui[class*="bottom dimmer"] {
  244. top: auto !important;
  245. bottom: 0;
  246. }
  247. .ui[class*="center dimmer"] {
  248. top: 50% !important;
  249. transform: translateY(-50%);
  250. -webkit-transform: translateY(calc(-50% - 0.5px));
  251. }
  252. .ui.segment > .ui.ui[class*="top dimmer"] {
  253. border-bottom-left-radius: 0;
  254. border-bottom-right-radius: 0;
  255. }
  256. .ui.segment > .ui.ui[class*="center dimmer"] {
  257. border-radius: 0;
  258. }
  259. .ui.segment > .ui.ui[class*="bottom dimmer"] {
  260. border-top-left-radius: 0;
  261. border-top-right-radius: 0;
  262. }
  263. .ui[class*="center dimmer"].transition[class*="fade up"].in {
  264. -webkit-animation-name: fadeInUpCenter;
  265. animation-name: fadeInUpCenter;
  266. }
  267. .ui[class*="center dimmer"].transition[class*="fade down"].in {
  268. -webkit-animation-name: fadeInDownCenter;
  269. animation-name: fadeInDownCenter;
  270. }
  271. .ui[class*="center dimmer"].transition[class*="fade up"].out {
  272. -webkit-animation-name: fadeOutUpCenter;
  273. animation-name: fadeOutUpCenter;
  274. }
  275. .ui[class*="center dimmer"].transition[class*="fade down"].out {
  276. -webkit-animation-name: fadeOutDownCenter;
  277. animation-name: fadeOutDownCenter;
  278. }
  279. .ui[class*="center dimmer"].bounce.transition {
  280. -webkit-animation-name: bounceCenter;
  281. animation-name: bounceCenter;
  282. }
  283. @-webkit-keyframes fadeInUpCenter {
  284. 0% {
  285. opacity: 0;
  286. transform: translateY(-40%);
  287. -webkit-transform: translateY(calc(-40% - 0.5px));
  288. }
  289. 100% {
  290. opacity: 1;
  291. transform: translateY(-50%);
  292. -webkit-transform: translateY(calc(-50% - 0.5px));
  293. }
  294. }
  295. @keyframes fadeInUpCenter {
  296. 0% {
  297. opacity: 0;
  298. transform: translateY(-40%);
  299. -webkit-transform: translateY(calc(-40% - 0.5px));
  300. }
  301. 100% {
  302. opacity: 1;
  303. transform: translateY(-50%);
  304. -webkit-transform: translateY(calc(-50% - 0.5px));
  305. }
  306. }
  307. @-webkit-keyframes fadeInDownCenter {
  308. 0% {
  309. opacity: 0;
  310. transform: translateY(-60%);
  311. -webkit-transform: translateY(calc(-60% - 0.5px));
  312. }
  313. 100% {
  314. opacity: 1;
  315. transform: translateY(-50%);
  316. -webkit-transform: translateY(calc(-50% - 0.5px));
  317. }
  318. }
  319. @keyframes fadeInDownCenter {
  320. 0% {
  321. opacity: 0;
  322. transform: translateY(-60%);
  323. -webkit-transform: translateY(calc(-60% - 0.5px));
  324. }
  325. 100% {
  326. opacity: 1;
  327. transform: translateY(-50%);
  328. -webkit-transform: translateY(calc(-50% - 0.5px));
  329. }
  330. }
  331. @-webkit-keyframes fadeOutUpCenter {
  332. 0% {
  333. opacity: 1;
  334. transform: translateY(-50%);
  335. -webkit-transform: translateY(calc(-50% - 0.5px));
  336. }
  337. 100% {
  338. opacity: 0;
  339. transform: translateY(-45%);
  340. -webkit-transform: translateY(calc(-45% - 0.5px));
  341. }
  342. }
  343. @keyframes fadeOutUpCenter {
  344. 0% {
  345. opacity: 1;
  346. transform: translateY(-50%);
  347. -webkit-transform: translateY(calc(-50% - 0.5px));
  348. }
  349. 100% {
  350. opacity: 0;
  351. transform: translateY(-45%);
  352. -webkit-transform: translateY(calc(-45% - 0.5px));
  353. }
  354. }
  355. @-webkit-keyframes fadeOutDownCenter {
  356. 0% {
  357. opacity: 1;
  358. transform: translateY(-50%);
  359. -webkit-transform: translateY(calc(-50% - 0.5px));
  360. }
  361. 100% {
  362. opacity: 0;
  363. transform: translateY(-55%);
  364. -webkit-transform: translateY(calc(-55% - 0.5px));
  365. }
  366. }
  367. @keyframes fadeOutDownCenter {
  368. 0% {
  369. opacity: 1;
  370. transform: translateY(-50%);
  371. -webkit-transform: translateY(calc(-50% - 0.5px));
  372. }
  373. 100% {
  374. opacity: 0;
  375. transform: translateY(-55%);
  376. -webkit-transform: translateY(calc(-55% - 0.5px));
  377. }
  378. }
  379. @-webkit-keyframes bounceCenter {
  380. 0%,
  381. 20%,
  382. 50%,
  383. 80%,
  384. 100% {
  385. transform: translateY(-50%);
  386. -webkit-transform: translateY(calc(-50% - 0.5px));
  387. }
  388. 40% {
  389. -webkit-transform: translateY(calc(-50% - 30px));
  390. transform: translateY(calc(-50% - 30px));
  391. }
  392. 60% {
  393. -webkit-transform: translateY(calc(-50% - 15px));
  394. transform: translateY(calc(-50% - 15px));
  395. }
  396. }
  397. @keyframes bounceCenter {
  398. 0%,
  399. 20%,
  400. 50%,
  401. 80%,
  402. 100% {
  403. transform: translateY(-50%);
  404. -webkit-transform: translateY(calc(-50% - 0.5px));
  405. }
  406. 40% {
  407. -webkit-transform: translateY(calc(-50% - 30px));
  408. transform: translateY(calc(-50% - 30px));
  409. }
  410. 60% {
  411. -webkit-transform: translateY(calc(-50% - 15px));
  412. transform: translateY(calc(-50% - 15px));
  413. }
  414. }
  415. /*******************************
  416. Theme Overrides
  417. *******************************/
  418. /*******************************
  419. User Overrides
  420. *******************************/