15308555518/ mirror-web
1
0
Fork 0
mirror of https://github.com/tuna/mirror-web.git synced 2025-12-25 20:32:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Finishing dark theme

This commit is contained in:
王邈 2020-02-26 18:58:01 +08:00
parent c8d4dd812c
commit 6258d90662
11 changed files with 67 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/head.html
View File

@ -10,8 +10,8 @@
<link rel="stylesheet" href="/static/css/bootstrap.css">
<link rel="stylesheet" href="/static/css/bootstrap-select.min.css">
<link rel="stylesheet" href="/static/css/font-awesome.min.css" >
<link rel="stylesheet" href="/static/css/style.css">
<link rel="stylesheet" href="/static/css/spinkit.css">
<link rel="stylesheet" href="/static/css/style.css">
<link rel="stylesheet" href="/static/css/thuhidden.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>

18
_includes/nav.html
View File

@ -9,7 +9,23 @@
<span class="icon-bar"></span>
</button>
{% endunless %}
<a class="navbar-brand" href="/"><span class="thuhidden"><img src="/static/img/logo-small.png" srcset="/static/img/logo-small.png 1x, /static/img/logo-small@2x.png 2x, /static/img/logo-small@3x.png 3x, /static/img/logo-small@4x.png 4x" alt=""/> 清华大学</span>开源软件镜像站</a>
<a class="navbar-brand" href="/"><!--
--><span class="thuhidden"><!--
--><picture>
<source
srcset="/static/img/logo-small-dark.png 1x,
/static/img/logo-small-dark@2x.png 2x,
/static/img/logo-small-dark@3x.png 3x,
/static/img/logo-small-dark@4x.png 4x"
media="(prefers-color-scheme: dark)"/>
<img src="/static/img/logo-small.png"
srcset="/static/img/logo-small.png 1x,
/static/img/logo-small@2x.png 2x,
/static/img/logo-small@3x.png 3x,
/static/img/logo-small@4x.png 4x"
alt=""/>
</picture>
清华大学</span>开源软件镜像站</a>
</div>
<div class="{% unless page.legacy %}navbar-collapse collapse {% endunless %}navbar-right">
<ul class="nav navbar-nav">

6
_includes/status-pic.html Normal file
View File

@ -0,0 +1,6 @@
<div class="col-md-6">
<picture class="thumbnail">
<source srcset="/static/status/{{include.name}}-day-dark.png" media="(prefers-color-scheme: dark)">
<img class="img-responsive" src="/static/status/{{include.name}}-day.png">
</picture>
</div>

26
static/css/_bootstrap-mod.scss
View File

@ -73,6 +73,9 @@ code{
color: $color_secondary;
@include dark{
color: $color_secondary_dark;
&:hover {
color: #fff;
}
}
}
@ -146,4 +149,27 @@ code{
.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;
}
}

10
static/css/_structure.scss
View File

@ -57,11 +57,11 @@ a {
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 {

7
static/css/style.scss
View File

@ -22,7 +22,7 @@ $color_primary_dark: $color_thu_purple_dark;
$color_primary_light: #d8aff6;
$color_primary_rgb: 92,48,125;
$color_secondary: #384452;
$color_secondary_dark: #ffffff;
$color_secondary_dark: #ddd;
$color_link: #088acb;
$color_link_dark: #65A9CB;
$color_link_hover: #62bbe7;
@ -104,6 +104,11 @@ body {
background-color: #0F3A4C;
}
}
.sk-wave .sk-rect {
@include dark{
background-color: $color_secondary_dark;
}
}
#mirrors {
tbody {

BIN
static/img/logo-small-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
static/img/logo-small-dark@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
static/img/logo-small-dark@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
static/img/logo-small-dark@4x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

36
status.html
View File

@ -12,16 +12,8 @@ permalink: /status/
<h3 id="server-status"> # 服务器监控 </h3>
<h4> # 网络流量 </h4>
<div class="row">
<div class="col-md-6">
<div class="thumbnail">
<img class="img-responsive" src="/static/status/service_traffic_IPv4-day.png">
</div>
</div>
<div class="col-md-6">
<div class="thumbnail">
<img class="img-responsive" src="/static/status/service_traffic_IPv6-day.png">
</div>
</div>
{% include status-pic.html name="service_traffic_IPv4" %}
{% include status-pic.html name="service_traffic_IPv6" %}
</div>
<h4># 磁盘状态 </h4>
<div class="row">
@ -32,29 +24,13 @@ permalink: /status/
</div>
</div>
</div>
<div class="col-md-6">
<div class="thumbnail">
<img class="img-responsive" src="/static/status/diskstats_iops-day.png">
</div>
</div>
<div class="col-md-6">
<div class="thumbnail">
<img class="img-responsive" src="/static/status/diskstats_throughput-day.png">
</div>
</div>
{% include status-pic.html name="diskstats_iops" %}
{% include status-pic.html name="diskstats_throughput" %}
</div>
<h4># CPU / 内存</h4>
<div class="row">
<div class="col-md-6">
<div class="thumbnail">
<img class="img-responsive" src="/static/status/cpu-day.png">
</div>
</div>
<div class="col-md-6">
<div class="thumbnail">
<img class="img-responsive" src="/static/status/memory-day.png">
</div>
</div>
{% include status-pic.html name="cpu" %}
{% include status-pic.html name="memory" %}
</div>
<h3 id="syncing-status"># 同步状态</h3>
<table class="table table-condensed flat-md">