Merge pull request #106 from Bravoyk/master

新增手动修改白天/黑夜模式

Co-authored-by: Bravoyk <11516611+Bravoyk@users.noreply.github.com>
This commit is contained in:
naiba 2021-03-02 11:54:28 +08:00 committed by GitHub
commit a4587aefbf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 230 additions and 4 deletions

2
.gitignore vendored
View File

@ -10,7 +10,7 @@
# Output of the go coverage tool, specifically when used with LiteIDE
*.out
.idea
/data
/dist
.DS_Store

View File

@ -7,8 +7,13 @@ body.dark table.table-striped tr.even {
background-color: #212f36;
}
#servers tr:nth-child(odd) {
/* color: red; */
background: #384d58;
}
body.dark table.table-striped tr.odd {
background-color: #2f3c42;
background-color: #384d58;
}
body.dark tr.expandRow {
@ -27,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)
}
}

View File

@ -15,10 +15,11 @@
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css">
<link rel="stylesheet" href="/static/theme-hotaru/css/core.css?v202012121912" type="text/css">
<link rel="stylesheet" href="/static/theme-hotaru/css/main.css?v202101171153" type="text/css">
<link rel="stylesheet" href="/static/theme-hotaru/css/darkmode.css?v202012121912" type="text/css">
<link rel="stylesheet" href="/static/theme-hotaru/css/darkmode.css?v202103021121" type="text/css">
{{if ts .CustomCode}}
{{.CustomCode|safe}}
{{end}}
@ -132,6 +133,12 @@
</div>
</div>
</div>
<div class="sidebar-container">
<ul>
<li id='sun'><i class="fas fa-sun" title="白昼模式"></i><span>白昼模式</span></li>
<li id='moon'><i class="fas fa-moon" title="暗黑模式"></i><span>暗黑模式</span></li>
</ul>
</div>
<footer>
<p style="text-align:center;padding: 15px;">Powered by <a href="https://github.com/naiba/nezha">哪吒监控</a> build ·
{{.Version}}
@ -226,6 +233,17 @@
}
}
})
$(function(){
$('#sun').click(function(){
$('body').removeClass('dark');
});
$('#moon').click(function(){
$('body').addClass('dark');
})
})
const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
ws.onopen = function (evt) {