/*! * # Fomantic-UI 2.9.0-beta.301+42e68bc - Dimmer * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Dimmer *******************************/ .dimmable:not(body) { position: relative; } .ui.dimmer { display: none; position: absolute; top: 0 !important; left: 0 !important; width: 100%; height: 100%; text-align: center; vertical-align: middle; padding: 1em; background: rgba(0, 0, 0, 0.85); opacity: 0; line-height: 1; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-transition: background-color 0.5s linear; transition: background-color 0.5s linear; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; will-change: opacity; z-index: 1000; } /* Dimmer Content */ .ui.dimmer > .content { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; color: #FFFFFF; } /* Loose Coupling */ .ui.segment > .ui.dimmer:not(.page) { border-radius: inherit; } /* Scrollbars */ .ui.dimmer:not(.inverted)::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); } .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); } .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive { background: rgba(255, 255, 255, 0.15); } .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); } /******************************* States *******************************/ /* Animating */ .animating.dimmable:not(body), .dimmed.dimmable:not(body) { overflow: hidden; } /* Animating / Active / Visible */ .dimmed.dimmable > .ui.animating.dimmer, .dimmed.dimmable > .ui.visible.dimmer, .ui.active.dimmer { display: -webkit-box; display: -ms-flexbox; display: flex; opacity: 1; } /* Disabled */ .ui.disabled.dimmer { width: 0 !important; height: 0 !important; } /******************************* Variations *******************************/ /*-------------- Legacy ---------------*/ /* Animating / Active / Visible */ .dimmed.dimmable > .ui.animating.legacy.dimmer, .dimmed.dimmable > .ui.visible.legacy.dimmer, .ui.active.legacy.dimmer { display: block; } /*-------------- Alignment ---------------*/ .ui[class*="top aligned"].dimmer { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .ui[class*="bottom aligned"].dimmer { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } /*-------------- Page ---------------*/ .ui.page.dimmer { position: fixed; -webkit-transform-style: ''; transform-style: ''; -webkit-perspective: 2000px; perspective: 2000px; -webkit-transform-origin: center center; transform-origin: center center; } .ui.page.dimmer.modals { -moz-perspective: none; } body.animating.in.dimmable, body.dimmed.dimmable { overflow: hidden; } body.dimmable > .dimmer { position: fixed; } /*-------------- Blurring ---------------*/ .blurring.dimmable > :not(.dimmer) { -webkit-filter: initial; filter: initial; -webkit-transition: 800ms -webkit-filter ease; transition: 800ms -webkit-filter ease; transition: 800ms filter ease; transition: 800ms filter ease, 800ms -webkit-filter ease; } .blurring.dimmed.dimmable > :not(.dimmer):not(.popup) { -webkit-filter: blur(5px) grayscale(0.7); filter: blur(5px) grayscale(0.7); } /* Dimmer Color */ .blurring.dimmable > .dimmer { background: rgba(0, 0, 0, 0.6); } .blurring.dimmable > .inverted.dimmer { background: rgba(255, 255, 255, 0.6); } /*-------------- Aligned ---------------*/ .ui.dimmer > .top.aligned.content > * { vertical-align: top; } .ui.dimmer > .bottom.aligned.content > * { vertical-align: bottom; } /*-------------- Shades ---------------*/ .medium.medium.medium.medium.medium.dimmer { background: rgba(0, 0, 0, 0.65); } .light.light.light.light.light.dimmer { background: rgba(0, 0, 0, 0.45); } .very.light.light.light.light.dimmer { background: rgba(0, 0, 0, 0.25); } /*-------------- Inverted ---------------*/ .ui.inverted.dimmer { background: rgba(255, 255, 255, 0.85); } .ui.inverted.dimmer > .content, .ui.inverted.dimmer > .content > * { color: #000000; } /*-------------- Inverted Shades ---------------*/ .medium.medium.medium.medium.medium.inverted.dimmer { background: rgba(255, 255, 255, 0.65); } .light.light.light.light.light.inverted.dimmer { background: rgba(255, 255, 255, 0.45); } .very.light.light.light.light.inverted.dimmer { background: rgba(255, 255, 255, 0.25); } /*-------------- Simple ---------------*/ /* Displays without javascript */ .ui.simple.dimmer { display: block; overflow: hidden; opacity: 0; width: 0; height: 0; z-index: -100; background: rgba(0, 0, 0, 0); } .dimmed.dimmable > .ui.simple.dimmer { overflow: visible; opacity: 1; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 1; } .ui.simple.inverted.dimmer { background: rgba(255, 255, 255, 0); } .dimmed.dimmable > .ui.simple.inverted.dimmer { background: rgba(255, 255, 255, 0.85); } /*-------------- Partially ----------------*/ .ui[class*="top dimmer"], .ui[class*="center dimmer"], .ui[class*="bottom dimmer"] { height: auto; } .ui[class*="bottom dimmer"] { top: auto !important; bottom: 0; } .ui[class*="center dimmer"] { top: 50% !important; transform: translateY(-50%); -webkit-transform: translateY(calc(-50% - 0.5px)); } .ui.segment > .ui.ui[class*="top dimmer"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ui.segment > .ui.ui[class*="center dimmer"] { border-radius: 0; } .ui.segment > .ui.ui[class*="bottom dimmer"] { border-top-left-radius: 0; border-top-right-radius: 0; } .ui[class*="center dimmer"].transition[class*="fade up"].in { -webkit-animation-name: fadeInUpCenter; animation-name: fadeInUpCenter; } .ui[class*="center dimmer"].transition[class*="fade down"].in { -webkit-animation-name: fadeInDownCenter; animation-name: fadeInDownCenter; } .ui[class*="center dimmer"].transition[class*="fade up"].out { -webkit-animation-name: fadeOutUpCenter; animation-name: fadeOutUpCenter; } .ui[class*="center dimmer"].transition[class*="fade down"].out { -webkit-animation-name: fadeOutDownCenter; animation-name: fadeOutDownCenter; } .ui[class*="center dimmer"].bounce.transition { -webkit-animation-name: bounceCenter; animation-name: bounceCenter; } @-webkit-keyframes fadeInUpCenter { 0% { opacity: 0; transform: translateY(-40%); -webkit-transform: translateY(calc(-40% - 0.5px)); } 100% { opacity: 1; transform: translateY(-50%); -webkit-transform: translateY(calc(-50% - 0.5px)); } } @keyframes fadeInUpCenter { 0% { opacity: 0; transform: translateY(-40%); -webkit-transform: translateY(calc(-40% - 0.5px)); } 100% { opacity: 1; transform: translateY(-50%); -webkit-transform: translateY(calc(-50% - 0.5px)); } } @-webkit-keyframes fadeInDownCenter { 0% { opacity: 0; transform: translateY(-60%); -webkit-transform: translateY(calc(-60% - 0.5px)); } 100% { opacity: 1; transform: translateY(-50%); -webkit-transform: translateY(calc(-50% - 0.5px)); } } @keyframes fadeInDownCenter { 0% { opacity: 0; transform: translateY(-60%); -webkit-transform: translateY(calc(-60% - 0.5px)); } 100% { opacity: 1; transform: translateY(-50%); -webkit-transform: translateY(calc(-50% - 0.5px)); } } @-webkit-keyframes fadeOutUpCenter { 0% { opacity: 1; transform: translateY(-50%); -webkit-transform: translateY(calc(-50% - 0.5px)); } 100% { opacity: 0; transform: translateY(-45%); -webkit-transform: translateY(calc(-45% - 0.5px)); } } @keyframes fadeOutUpCenter { 0% { opacity: 1; transform: translateY(-50%); -webkit-transform: translateY(calc(-50% - 0.5px)); } 100% { opacity: 0; transform: translateY(-45%); -webkit-transform: translateY(calc(-45% - 0.5px)); } } @-webkit-keyframes fadeOutDownCenter { 0% { opacity: 1; transform: translateY(-50%); -webkit-transform: translateY(calc(-50% - 0.5px)); } 100% { opacity: 0; transform: translateY(-55%); -webkit-transform: translateY(calc(-55% - 0.5px)); } } @keyframes fadeOutDownCenter { 0% { opacity: 1; transform: translateY(-50%); -webkit-transform: translateY(calc(-50% - 0.5px)); } 100% { opacity: 0; transform: translateY(-55%); -webkit-transform: translateY(calc(-55% - 0.5px)); } } @-webkit-keyframes bounceCenter { 0%, 20%, 50%, 80%, 100% { transform: translateY(-50%); -webkit-transform: translateY(calc(-50% - 0.5px)); } 40% { -webkit-transform: translateY(calc(-50% - 30px)); transform: translateY(calc(-50% - 30px)); } 60% { -webkit-transform: translateY(calc(-50% - 15px)); transform: translateY(calc(-50% - 15px)); } } @keyframes bounceCenter { 0%, 20%, 50%, 80%, 100% { transform: translateY(-50%); -webkit-transform: translateY(calc(-50% - 0.5px)); } 40% { -webkit-transform: translateY(calc(-50% - 30px)); transform: translateY(calc(-50% - 30px)); } 60% { -webkit-transform: translateY(calc(-50% - 15px)); transform: translateY(calc(-50% - 15px)); } } /******************************* Theme Overrides *******************************/ /******************************* User Overrides *******************************/