117 lines
2.5 KiB
CSS
117 lines
2.5 KiB
CSS
#theme_popup {
|
|
position:fixed;
|
|
left:0;
|
|
bottom:0;
|
|
z-index:999999;
|
|
width:100%;
|
|
background-color:rgba(0,0,0,0.5);
|
|
}
|
|
#theme_popup.on {
|
|
display:none;
|
|
}
|
|
#theme_popup ul {
|
|
display:flex;
|
|
flex-direction:row;
|
|
justify-content:center;
|
|
align-items:center;
|
|
padding:20px 0;
|
|
}
|
|
#theme_popup ul li {
|
|
width:120px;
|
|
height:20px;
|
|
line-height:20px;
|
|
text-align:center;
|
|
position:relative;
|
|
}
|
|
#theme_popup ul li svg {
|
|
position:relative;
|
|
top:50%;
|
|
transform:translateY(-50%);
|
|
}
|
|
#theme_popup ul li.active {
|
|
|
|
}
|
|
#theme_popup ul li i {
|
|
margin-right:4px;
|
|
}
|
|
#theme_popup ul li a {
|
|
font-size:14px;
|
|
color:#fff;
|
|
}
|
|
#theme_popup .pop_close {
|
|
position:absolute;
|
|
top:50%; transform:translateY(-50%);
|
|
left:55px;
|
|
}
|
|
#theme_popup .pop_close i {
|
|
font-size:1.3em;
|
|
color:#fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#theme_link {
|
|
position:fixed;
|
|
left:40px;
|
|
bottom:70px;
|
|
z-index:9999;
|
|
}
|
|
#theme_link.active {
|
|
bottom:20px;
|
|
}
|
|
#theme_link a {
|
|
display:block;
|
|
width:50px;
|
|
height:50px;
|
|
border-radius:50%;
|
|
background-color:#000;
|
|
text-align:center;
|
|
overflow: hidden;
|
|
position:relative;
|
|
}
|
|
#theme_link a:nth-child(2) {
|
|
margin-top:5px;
|
|
}
|
|
#theme_link a.on{
|
|
width:170px;
|
|
height:50px;
|
|
border-radius:50px;
|
|
background-color:#e34039;
|
|
transition:all 0.3s;
|
|
}
|
|
#theme_link a.on span {
|
|
opacity:1;
|
|
transition-delay:0.3s;
|
|
}
|
|
#theme_link a span {
|
|
opacity:0;
|
|
line-height:50px;
|
|
font-size:16px;
|
|
font-weight:500;
|
|
color:#fff;
|
|
}
|
|
#theme_link a.on img{
|
|
display:none;
|
|
}
|
|
#theme_link a img{
|
|
position:absolute;
|
|
top:50%;left:50%;transform:translate(-50%,-50%);
|
|
color:#fff;
|
|
}
|
|
#theme_link i {
|
|
font-size:1em;
|
|
margin-left:5px;
|
|
}
|
|
.popup_open {
|
|
display:none !important;
|
|
}
|
|
.popup_open.active {
|
|
display:block !important;
|
|
}
|
|
@media screen and (max-width:1200px) {
|
|
#theme_link {
|
|
opacity:0;
|
|
}
|
|
#theme_popup {
|
|
opacity:0;
|
|
}
|
|
} |