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.
253 lines
5.2 KiB
253 lines
5.2 KiB
/*! |
|
* # Semantic UI 2.4.0 - Dimmer |
|
* http://github.com/semantic-org/semantic-ui/ |
|
* |
|
* |
|
* Released under the MIT license |
|
* http://opensource.org/licenses/MIT |
|
* |
|
*/ |
|
|
|
|
|
/******************************* |
|
Dimmer |
|
*******************************/ |
|
|
|
.dimmable:not(body) { |
|
position: relative; |
|
} |
|
.ui.dimmer { |
|
display: none; |
|
position: absolute; |
|
top: 0em !important; |
|
left: 0em !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 { |
|
border-radius: inherit !important; |
|
} |
|
|
|
/* 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: blur(0px) grayscale(0); |
|
filter: blur(0px) grayscale(0); |
|
-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) { |
|
-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; |
|
} |
|
|
|
/*-------------- |
|
Inverted |
|
---------------*/ |
|
|
|
.ui.inverted.dimmer { |
|
background-color: rgba(255, 255, 255, 0.85); |
|
} |
|
.ui.inverted.dimmer > .content > * { |
|
color: #FFFFFF; |
|
} |
|
|
|
/*-------------- |
|
Simple |
|
---------------*/ |
|
|
|
|
|
/* Displays without javascript */ |
|
.ui.simple.dimmer { |
|
display: block; |
|
overflow: hidden; |
|
opacity: 1; |
|
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); |
|
} |
|
|
|
|
|
/******************************* |
|
Theme Overrides |
|
*******************************/ |
|
|
|
|
|
|
|
/******************************* |
|
User Overrides |
|
*******************************/ |
|
|
|
|