diff --git a/404.html b/404.html
new file mode 100644
index 0000000..19c3676
--- /dev/null
+++ b/404.html
@@ -0,0 +1,62 @@
+---
+permalink: /404.html
+---
+
+
+ {% include head.html cattitle="404" %}
+
+ {% include nav.html %}
+
diff --git a/_includes/status-pic.html b/_includes/status-pic.html
new file mode 100644
index 0000000..c6fd098
--- /dev/null
+++ b/_includes/status-pic.html
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/static/css/_bootstrap-mod.scss b/static/css/_bootstrap-mod.scss
index 1bbbcb0..b994e2f 100644
--- a/static/css/_bootstrap-mod.scss
+++ b/static/css/_bootstrap-mod.scss
@@ -6,15 +6,44 @@ BOOTSTRAP MODIFICATIONS & TWEAKS
margin-bottom: 0px;
}
+.nav > li > a:hover, .nav > li > a:focus{
+ @include dark{
+ background-color: #111;
+ }
+}
+
+pre{
+ @include dark{
+ color: #ccc;
+ background-color: #272822;
+ }
+}
+
+code{
+ @include dark{
+ background-color: #060d0b;
+ }
+}
+
.navbar-default {
+ @include dark{
+ background-color: $color_bg_dark;
+ }
background-color: white;
border-color: transparent;
.navbar-nav > li.active > a {
color: $color_thu_purple;
border-bottom: 2px solid $color_thu_purple;
+ @include dark{
+ color: $color_thu_purple_dark;
+ border-bottom-color: $color_thu_purple_dark;
+ }
}
.navbar-nav > li > a {
+ @include dark{
+ color: $color_secondary_dark;
+ }
color: $color_secondary;
background: transparent !important;
font-weight: 700;
@@ -23,6 +52,9 @@ BOOTSTRAP MODIFICATIONS & TWEAKS
&:hover, &:focus {
color: $color_primary !important;
background: transparent !important;
+ @include dark{
+ color: $color_primary_dark !important;
+ }
}
}
}
@@ -39,14 +71,26 @@ BOOTSTRAP MODIFICATIONS & TWEAKS
.navbar-header .navbar-brand {
color: $color_secondary;
+ @include dark{
+ color: $color_secondary_dark;
+ &:hover {
+ color: #fff;
+ }
+ }
}
.dropdown-menu {
+ @include dark{
+ background: $color_secondary_dark;
+ }
background: $color_secondary ;
}
.dropdown-menu > li > a {
color: white;
+ @include dark{
+ color: $color_bg_dark;
+ }
font-weight: 700;
font-size: 12px;
}
@@ -72,4 +116,60 @@ BOOTSTRAP MODIFICATIONS & TWEAKS
border-bottom: 1px solid #ffffff;
margin-bottom: 25px;
}
-
+@include dark{
+ .popover{
+ background-color: #282828;
+ border-color: rgba(255, 255, 255, 0.2);
+ }
+ .popover.title{
+ background-color: #f7f7f7;
+ border-bottom-color: #ebebeb;
+ }
+ .popover.top > .arrow {
+ border-top-color: rgba(255, 255, 255, .25);
+ }
+ .popover.top > .arrow:after {
+ border-top-color: #282828;
+ }
+ .popover.right > .arrow {
+ border-right-color: rgba(255, 255, 255, .25);
+ }
+ .popover.right > .arrow:after {
+ border-right-color: #282828;
+ }
+ .popover.bottom > .arrow {
+ border-bottom-color: rgba(255, 255, 255, .25);
+ }
+ .popover.bottom > .arrow:after {
+ border-bottom-color: #282828;
+ }
+ .popover.left > .arrow {
+ border-left-color: rgba(255, 255, 255, .25);
+ }
+ .popover.left > .arrow:after {
+ border-left-color: #282828;
+ }
+ .modal-content {
+ background-color: $color_bg_dark;
+ border: 1px solid rgba(255, 255, 255, .2);
+ }
+ .close {
+ color: $color_secondary_dark;
+ text-shadow: 0 1px 0 $color_bg_dark;
+ &:hover, &:focus{
+ color: #fff;
+ }
+ }
+ .nav-tabs > li > a:hover {
+ background-color: $color_bg_dark;
+ }
+ .nav-tabs > li.active > a,
+ .nav-tabs > li.active > a:hover,
+ .nav-tabs > li.active > a:focus {
+ color: $color_secondary_dark;
+ background-color: $color_bg_dark;
+ }
+ .thumbnail {
+ background-color: $color_bg_dark;
+ }
+}
diff --git a/static/css/_structure.scss b/static/css/_structure.scss
index 6db7caf..90a0ff1 100644
--- a/static/css/_structure.scss
+++ b/static/css/_structure.scss
@@ -11,6 +11,9 @@ body {
margin: 0;
/* height: 100%; */
color: $color_secondary;
+ @include dark{
+ color: $color_secondary_dark;
+ }
font-weight: 400;
}
html.wf-inactive body {
@@ -35,6 +38,9 @@ p {
font-size: 14px;
line-height: 24px;
color: $color_secondary ;
+ @include dark{
+ color: $color_secondary_dark;
+ }
margin-top: 10px;
}
@@ -45,14 +51,17 @@ img {
a {
color:$color_link;
+ @include dark{
+ color: $color_link_dark;
+ }
padding: 0;
margin: 0;
text-decoration: none;
- -webkit-transition: background-color .4s linear, color .4s linear;
- -moz-transition: background-color .4s linear, color .4s linear;
- -o-transition: background-color .4s linear, color .4s linear;
- -ms-transition: background-color .4s linear, color .4s linear;
- transition: background-color .4s linear, color .4s linear;
+ -webkit-transition: background-color .4s linear, color .4s linear, border-color .4s linear;
+ -moz-transition: background-color .4s linear, color .4s linea, border-color .4s linearr;
+ -o-transition: background-color .4s linear, color .4s linear, border-color .4s linear;
+ -ms-transition: background-color .4s linear, color .4s linear, border-color .4s linear;
+ transition: background-color .4s linear, color .4s linear, border-color .4s linear;
}
a:hover, a:focus {
@@ -64,11 +73,18 @@ a:hover, a:focus {
color: #fff;
text-shadow:none;
background:$color_secondary;
+ @include dark{
+ background: $color_secondary_dark;
+ }
}
::selection {
color: #fff;
text-shadow:none;
background:$color_secondary;
+ @include dark{
+ background: white;
+ color: $color_secondary;
+ }
}
.centered {
diff --git a/static/css/_syntax-highlighting.scss b/static/css/_syntax-highlighting.scss
index a6d05d0..95049e1 100644
--- a/static/css/_syntax-highlighting.scss
+++ b/static/css/_syntax-highlighting.scss
@@ -61,4 +61,75 @@
.vg { color: #008080 } // Name.Variable.Global
.vi { color: #008080 } // Name.Variable.Instance
.il { color: #099 } // Literal.Number.Integer.Long
+
+
+@include dark{
+.hll { background-color: #272822; }
+.c { color: #75715e } /* Comment */
+.err { color: #960050; background-color: #1e0010 } /* Error */
+.k { color: #66d9ef } /* Keyword */
+.l { color: #ae81ff } /* Literal */
+.n { color: #f8f8f2 } /* Name */
+.o { color: #f92672 } /* Operator */
+.p { color: #f8f8f2 } /* Punctuation */
+.cm { color: #75715e } /* Comment.Multiline */
+.cp { color: #75715e } /* Comment.Preproc */
+.c1 { color: #75715e } /* Comment.Single */
+.cs { color: #75715e } /* Comment.Special */
+.ge { font-style: italic } /* Generic.Emph */
+.gs { font-weight: bold } /* Generic.Strong */
+.kc { color: #66d9ef } /* Keyword.Constant */
+.kd { color: #66d9ef } /* Keyword.Declaration */
+.kn { color: #f92672 } /* Keyword.Namespace */
+.kp { color: #66d9ef } /* Keyword.Pseudo */
+.kr { color: #66d9ef } /* Keyword.Reserved */
+.kt { color: #66d9ef } /* Keyword.Type */
+.ld { color: #e6db74 } /* Literal.Date */
+.m { color: #ae81ff } /* Literal.Number */
+.s { color: #e6db74 } /* Literal.String */
+.na { color: #a6e22e } /* Name.Attribute */
+.nb { color: #f8f8f2 } /* Name.Builtin */
+.nc { color: #a6e22e } /* Name.Class */
+.no { color: #66d9ef } /* Name.Constant */
+.nd { color: #a6e22e } /* Name.Decorator */
+.ni { color: #f8f8f2 } /* Name.Entity */
+.ne { color: #a6e22e } /* Name.Exception */
+.nf { color: #a6e22e } /* Name.Function */
+.nl { color: #f8f8f2 } /* Name.Label */
+.nn { color: #f8f8f2 } /* Name.Namespace */
+.nx { color: #a6e22e } /* Name.Other */
+.py { color: #f8f8f2 } /* Name.Property */
+.nt { color: #f92672 } /* Name.Tag */
+.nv { color: #f8f8f2 } /* Name.Variable */
+.ow { color: #f92672 } /* Operator.Word */
+.w { color: #f8f8f2 } /* Text.Whitespace */
+.mf { color: #ae81ff } /* Literal.Number.Float */
+.mh { color: #ae81ff } /* Literal.Number.Hex */
+.mi { color: #ae81ff } /* Literal.Number.Integer */
+.mo { color: #ae81ff } /* Literal.Number.Oct */
+.sb { color: #e6db74 } /* Literal.String.Backtick */
+.sc { color: #e6db74 } /* Literal.String.Char */
+.sd { color: #e6db74 } /* Literal.String.Doc */
+.s2 { color: #e6db74 } /* Literal.String.Double */
+.se { color: #ae81ff } /* Literal.String.Escape */
+.sh { color: #e6db74 } /* Literal.String.Heredoc */
+.si { color: #e6db74 } /* Literal.String.Interpol */
+.sx { color: #e6db74 } /* Literal.String.Other */
+.sr { color: #e6db74 } /* Literal.String.Regex */
+.s1 { color: #e6db74 } /* Literal.String.Single */
+.ss { color: #e6db74 } /* Literal.String.Symbol */
+.bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
+.vc { color: #f8f8f2 } /* Name.Variable.Class */
+.vg { color: #f8f8f2 } /* Name.Variable.Global */
+.vi { color: #f8f8f2 } /* Name.Variable.Instance */
+.il { color: #ae81ff } /* Literal.Number.Integer.Long */
+
+.gh { } /* Generic Heading & Diff Header */
+.gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
+.gd { color: #f92672; background-color: inherit;} /* Generic.Deleted & Diff Deleted */
+.gi { color: #a6e22e; background-color: inherit;} /* Generic.Inserted & Diff Inserted */
+.gd .x {background-color: inherit;}
+.gi .x {background-color: inherit;}
+}
+
}
diff --git a/static/css/style.scss b/static/css/style.scss
index 4c83d85..374ec5a 100644
--- a/static/css/style.scss
+++ b/static/css/style.scss
@@ -11,20 +11,34 @@ URL: http://alvarez.is
################################################################# */
+$color_bg_dark: #222;
$color_thu_purple: #82318E;
+$color_thu_purple_dark: #C353D3;
$color_light_grey: #888;
$color_grey: #555;
+$color_grey_dark: #aaa;
$color_primary: $color_thu_purple;
+$color_primary_dark: $color_thu_purple_dark;
$color_primary_light: #d8aff6;
$color_primary_rgb: 92,48,125;
$color_secondary: #384452;
+$color_secondary_dark: #ddd;
$color_link: #088acb;
+$color_link_dark: #65A9CB;
$color_link_hover: #62bbe7;
$color_footer_heading: #ffffff;
$color_footer_content: #bfc9d3;
$color_navbar_bg: #d3d3d3;
$font_local: 'Hiragino Sans GB', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Zen Hei', 'WenQuanYi Micro Hei', '微软雅黑', sans-serif;
$font_default: 'Lato', #{$font_local};
+$color_row_hover: #e0f3fc;
+$color_row_hover_dark: #116D99;
+
+@mixin dark {
+ @media (prefers-color-scheme: dark) {
+ @content
+ }
+}
@import
"Lato",
@@ -32,6 +46,10 @@ $font_default: 'Lato', #{$font_local};
"bootstrap-mod",
"syntax-highlighting";
+:root {
+color-scheme: light dark;
+}
+
#thu-alert {
padding-left: 50px;
position: relative;
@@ -51,6 +69,9 @@ html {
body {
position: relative;
min-height: 100%;
+ @include dark{
+ background: $color_bg_dark;
+ }
}
#headerwrap {
@@ -73,15 +94,29 @@ body {
.status-fail, .status-failed, .status-paused {
background-color: #fff4e3;
+ @include dark{
+ background-color: #7F581A;
+ }
}
.status-syncing {
background-color: #e3fffd;
+ @include dark{
+ background-color: #0F3A4C;
+ }
+}
+.sk-wave .sk-rect {
+ @include dark{
+ background-color: $color_secondary_dark;
+ }
}
#mirrors {
tbody {
tr:hover {
- background-color: #e0f3fc;
+ background-color: $color_row_hover;
+ @include dark{
+ background-color: $color_row_hover_dark;
+ }
}
td {
padding: 4px 8px;
@@ -100,11 +135,17 @@ body {
}
.fa-question-circle {
color: #234961;
+ @include dark{
+ color: #5CC0FF;
+ }
}
}
#news {
li > a {
color: $color_secondary;
+ @include dark{
+ color: $color_secondary_dark;
+ }
}
}
#download-link {
@@ -123,8 +164,11 @@ body {
}
#mirror-list {
:hover {
- background-color: #e0f3fc;
- }
+ background-color: $color_row_hover;
+ @include dark{
+ background-color: $color_row_hover_dark;
+ }
+ }
}
}
@@ -137,6 +181,9 @@ body {
article {
.meta {
color: $color_grey;
+ @include dark{
+ color: $color_grey_dark;
+ }
}
}
.fa-user {
@@ -259,8 +306,86 @@ body {
max-width: 240px;
height: 30px;
font-size: 16px;
+ background: transparent;
}
#mirror-title {
float: left;
}
+
+#upgrade-mask{
+ color: black;
+ p {
+ color: inherit;
+ }
+}
+
+.not-found {
+ height: 600px;
+ background-image: url(/static/img/missing.png);
+ background-image: -webkit-image-set(url("/static/img/missing.png") 1x,
+ url("/static/img/missing@2x.png") 2x,
+ url("/static/img/missing@3x.png") 3x,
+ url("/static/img/missing@4x.png") 4x);
+ background-image: image-set(url("/static/img/missing.png") 1x,
+ url("/static/img/missing@2x.png") 2x,
+ url("/static/img/missing@3x.png") 3x,
+ url("/static/img/missing@4x.png") 4x);
+ background-repeat: no-repeat;
+ background-position: center;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ @include dark {
+ background-image: url(/static/img/missing-dark.png);
+ background-image: -webkit-image-set(url("/static/img/missing-dark.png") 1x,
+ url("/static/img/missing-dark@2x.png") 2x,
+ url("/static/img/missing-dark@3x.png") 3x,
+ url("/static/img/missing-dark@4x.png") 4x);
+ background-image: image-set(url("/static/img/missing-dark.png") 1x,
+ url("/static/img/missing-dark@2x.png") 2x,
+ url("/static/img/missing-dark@3x.png") 3x,
+ url("/static/img/missing-dark@4x.png") 4x);
+ }
+}
+
+.nonthu .not-found {
+ background-image: none;
+}
+
+.not-found-hint {
+ font-weight: bold;
+ font-size: 48px;
+ margin-bottom: 40px;
+ padding: 0 20px;
+}
+
+.not-found-link {
+ display: inline-block;
+ font-size: 18px;
+ margin: 0 20px;
+}
+
+.not-found-text {
+ max-width: 450px;
+ box-sizing: border-box;
+ padding: 0 40px;
+ margin-bottom: 80px;
+ font-size: 16px;
+ opacity: .7;
+ line-height: 24px;
+}
+
+.not-found-code {
+ font-size: 12px;
+ opacity: .54;
+ font-weight: normal;
+ font-style: italic;
+}
+
+.nonthu .thuhidden{
+ display: none;
+}
diff --git a/static/css/thuhidden.css b/static/css/thuhidden.css
deleted file mode 100644
index 5da5e43..0000000
--- a/static/css/thuhidden.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.nonthu .thuhidden{
- display: none;
-}
diff --git a/static/img/logo-small-dark.png b/static/img/logo-small-dark.png
new file mode 100644
index 0000000..92f2d80
Binary files /dev/null and b/static/img/logo-small-dark.png differ
diff --git a/static/img/logo-small-dark@2x.png b/static/img/logo-small-dark@2x.png
new file mode 100644
index 0000000..eff52e9
Binary files /dev/null and b/static/img/logo-small-dark@2x.png differ
diff --git a/static/img/logo-small-dark@3x.png b/static/img/logo-small-dark@3x.png
new file mode 100644
index 0000000..3da8450
Binary files /dev/null and b/static/img/logo-small-dark@3x.png differ
diff --git a/static/img/logo-small-dark@4x.png b/static/img/logo-small-dark@4x.png
new file mode 100644
index 0000000..3c78435
Binary files /dev/null and b/static/img/logo-small-dark@4x.png differ
diff --git a/static/img/missing-dark.png b/static/img/missing-dark.png
new file mode 100644
index 0000000..c98f491
Binary files /dev/null and b/static/img/missing-dark.png differ
diff --git a/static/img/missing-dark@2x.png b/static/img/missing-dark@2x.png
new file mode 100644
index 0000000..7c09e8f
Binary files /dev/null and b/static/img/missing-dark@2x.png differ
diff --git a/static/img/missing-dark@3x.png b/static/img/missing-dark@3x.png
new file mode 100644
index 0000000..c6805ff
Binary files /dev/null and b/static/img/missing-dark@3x.png differ
diff --git a/static/img/missing-dark@4x.png b/static/img/missing-dark@4x.png
new file mode 100644
index 0000000..0e10282
Binary files /dev/null and b/static/img/missing-dark@4x.png differ
diff --git a/static/img/missing.png b/static/img/missing.png
new file mode 100644
index 0000000..cc331dc
Binary files /dev/null and b/static/img/missing.png differ
diff --git a/static/img/missing@2x.png b/static/img/missing@2x.png
new file mode 100644
index 0000000..b599c6c
Binary files /dev/null and b/static/img/missing@2x.png differ
diff --git a/static/img/missing@3x.png b/static/img/missing@3x.png
new file mode 100644
index 0000000..8b60fc9
Binary files /dev/null and b/static/img/missing@3x.png differ
diff --git a/static/img/missing@4x.png b/static/img/missing@4x.png
new file mode 100644
index 0000000..8890c8d
Binary files /dev/null and b/static/img/missing@4x.png differ
diff --git a/status.html b/status.html
index 021c099..0961cb1 100644
--- a/status.html
+++ b/status.html
@@ -12,16 +12,8 @@ permalink: /status/
# 服务器监控
# 网络流量
-
-
-

-
-
-
-
-

-
-
+ {% include status-pic.html name="service_traffic_IPv4" %}
+ {% include status-pic.html name="service_traffic_IPv6" %}
# 磁盘状态
@@ -32,29 +24,13 @@ permalink: /status/
-