.sc_layouts_dark_light {
display: block;
overflow: hidden;
position: relative;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid transparent;
-webkit-transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
-ms-transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.sc_layouts_dark_light.sc_layouts_dark_light_active_light {
background-color: #4096ed;
border-color: #4066ed;
}
.sc_layouts_dark_light.sc_layouts_dark_light_active_dark {
background-color: #fff;
border-color: #000;
}
.sc_layouts_dark_light .sc_layouts_dark_light_item {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
z-index: 1;
top: 0;
left: 0;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 6px;
-webkit-transition: opacity 0.3s ease, transform 0.3s ease;
-ms-transition: opacity 0.3s ease, transform 0.3s ease;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.sc_layouts_dark_light .sc_layouts_dark_light_item.sc_layouts_dark_light_type_jpg, .sc_layouts_dark_light .sc_layouts_dark_light_item.sc_layouts_dark_light_type_jpeg {
padding: 0;
}
.sc_layouts_dark_light .sc_layouts_dark_light_item img {
width: 100%;
height: auto;
}
.sc_layouts_dark_light .sc_layouts_dark_light_item svg {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.sc_layouts_dark_light .sc_layouts_dark_light_light svg * {
fill: #fff;
}
.sc_layouts_dark_light .sc_layouts_dark_light_dark svg * {
fill: #000;
}
.sc_layouts_dark_light .sc_layouts_dark_light_active {
z-index: 2;
}
.sc_layouts_dark_light.sc_layouts_dark_light_effect_swap .sc_layouts_dark_light_item {
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
opacity: 0;
}
.sc_layouts_dark_light.sc_layouts_dark_light_effect_swap .sc_layouts_dark_light_active {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.sc_layouts_dark_light.sc_layouts_dark_light_effect_slide .sc_layouts_dark_light_light {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.sc_layouts_dark_light.sc_layouts_dark_light_effect_slide .sc_layouts_dark_light_dark {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.sc_layouts_dark_light.sc_layouts_dark_light_effect_slide .sc_layouts_dark_light_active {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.sc_layouts_dark_light.sc_layouts_dark_light_effect_fade .sc_layouts_dark_light_item {
opacity: 0;
}
.sc_layouts_dark_light.sc_layouts_dark_light_effect_fade .sc_layouts_dark_light_active {
opacity: 1;
} .sc_layouts_dark_light_default {
width: 47px;
height: 29px;
-webkit-border-radius: 15px;
-ms-border-radius: 15px;
border-radius: 15px;
} .sc_layouts_dark_light_round {
width: 3em;
height: 3em;
line-height: 3em;
text-align: center;
-webkit-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}