mirror of
https://github.com/nezhahq/nezha.git
synced 2025-01-22 12:48:14 -05:00
Merge pull request #106 from Bravoyk/master
新增手动修改白天/黑夜模式 Co-authored-by: Bravoyk <11516611+Bravoyk@users.noreply.github.com>
This commit is contained in:
commit
a4587aefbf
2
.gitignore
vendored
2
.gitignore
vendored
@ -10,7 +10,7 @@
|
||||
|
||||
# Output of the go coverage tool, specifically when used with LiteIDE
|
||||
*.out
|
||||
|
||||
.idea
|
||||
/data
|
||||
/dist
|
||||
.DS_Store
|
||||
|
212
resource/static/theme-hotaru/css/darkmode.css
vendored
212
resource/static/theme-hotaru/css/darkmode.css
vendored
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
20
resource/template/theme-hotaru/home.html
vendored
20
resource/template/theme-hotaru/home.html
vendored
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user