123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464 |
- /*!
- * # Fomantic-UI - 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-color: 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;
- }
- 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-color: rgba(0, 0, 0, 0.6);
- }
- .blurring.dimmable > .inverted.dimmer {
- background-color: 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-color: rgba(0, 0, 0, 0.65);
- }
- .light.light.light.light.light.dimmer {
- background-color: rgba(0, 0, 0, 0.45);
- }
- .very.light.light.light.light.dimmer {
- background-color: rgba(0, 0, 0, 0.25);
- }
- /*--------------
- Inverted
- ---------------*/
- .ui.inverted.dimmer {
- background-color: 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-color: rgba(255, 255, 255, 0.65);
- }
- .light.light.light.light.light.inverted.dimmer {
- background-color: rgba(255, 255, 255, 0.45);
- }
- .very.light.light.light.light.inverted.dimmer {
- background-color: 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-color: rgba(0, 0, 0, 0);
- }
- .dimmed.dimmable > .ui.simple.dimmer {
- overflow: visible;
- opacity: 1;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.85);
- z-index: 1;
- }
- .ui.simple.inverted.dimmer {
- background-color: rgba(255, 255, 255, 0);
- }
- .dimmed.dimmable > .ui.simple.inverted.dimmer {
- background-color: 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
- *******************************/
|