Buriburizaemon/nezha_domains
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/nezha_domains.git synced 2026-02-05 21:20:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

添加第三个主题的手动切换白黑

Browse Source
This commit is contained in:
kkk
2021-03-02 11:47:12 +08:00
parent 7c115d0f9a
commit c18df6bdbf
2 changed files with 223 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
resource/static/theme-hotaru/css/darkmode.css vendored
View File

@@ -32,4 +32,207 @@ body.dark .panel span {
body.dark .page-section {
border-bottom: 1px solid #212f36;
}
}
@media (max-width: 500px) {
.sidebar-container {
display: none
}
}
.sidebar-container ul {
position: fixed;
top: 50%;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 10;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
right: 0
}
.sidebar-container ul li + li {
margin-top: 1.5em
}
.sidebar-container ul li {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0.4em 0 0.4em 0;
color: #f2f2f2;
cursor: pointer;
height: 2em;
-webkit-box-shadow: 0 2px 3px -1px rgba(47, 47, 47, 0.2);
box-shadow: 0 2px 3px -1px rgba(47, 47, 47, 0.2);
width: 35px;
border-radius: 0.5em 0 0 0.5em;
border: 1px solid rgba(255, 255, 255, 0.2)
}
@media (min-width: 1400px) {
.sidebar-container ul li {
height: 2.6em;
width: 45px
}
}
.sidebar-container ul li:first-child {
background-color: #fbb142
}
.sidebar-container ul li:nth-child(2) {
background-color: #124b8c
}
.sidebar-container ul li:last-child {
background-color: #555
}
.sidebar-container ul li i.fas {
font-size: 1em;
width: 36px;
text-align: center;
position: relative;
top: 0.04em
}
.sidebar-container ul li .fas.fa-sun {
font-size: 1.3em
}
@media (min-width: 1400px) {
.sidebar-container ul li .fas.fa-sun {
font-size: 1.6em
}
}
.sidebar-container ul li .fas.fa-moon {
font-size: 1.2em
}
@media (min-width: 1400px) {
.sidebar-container ul li .fas.fa-moon {
font-size: 1.5em
}
}
.sidebar-container ul li span {
font-size: 1em;
left: 36px;
position: absolute;
opacity: 0;
visibility: hidden;
font-weight: bold
}
.sidebar-container ul li:hover {
width: 110px !important;
-webkit-box-shadow: 0 2px 10px -1px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 10px -1px rgba(0, 0, 0, 0.1)
}
.sidebar-container ul li:hover span {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 90ms;
transition-delay: 90ms
}
.sidebar-container ul li:hover i {
opacity: 1
}
.sidebar-container ul li:hover i.fa-sun {
-webkit-animation: rotateSun 3s linear infinite;
animation: rotateSun 3s linear infinite
}
@-webkit-keyframes rotateSun {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes rotateSun {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
.sidebar-container ul li:hover i.fa-moon {
-webkit-animation: rotateMoon 2s linear infinite;
animation: rotateMoon 2s linear infinite
}
@-webkit-keyframes rotateMoon {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
50% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
}
@keyframes rotateMoon {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
50% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
}
.sidebar-container ul li:hover i.fa-th {
-webkit-animation: rotateTh 1s linear infinite;
animation: rotateTh 1s linear infinite
}
@-webkit-keyframes rotateTh {
0% {
-webkit-transform: perspective(400px) rotateY(0);
transform: perspective(400px) rotateY(0)
}
100% {
-webkit-transform: perspective(400px) rotateY(180deg);
transform: perspective(400px) rotateY(180deg)
}
}
@keyframes rotateTh {
0% {
-webkit-transform: perspective(400px) rotateY(0);
transform: perspective(400px) rotateY(0)
}
100% {
-webkit-transform: perspective(400px) rotateY(180deg);
transform: perspective(400px) rotateY(180deg)
}
}