asandikci.com/web
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Prettified the mode toggle switch.

Browse source
This commit is contained in:
Cotes Chung 2020-02-17 03:06:38 +08:00
parent 840eab9566
commit 32d838fede
2 changed files with 38 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_includes/sidebar.html
View file

@ -58,7 +58,7 @@
<div class="sidebar-bottom d-flex justify-content-around mt-4"> <div class="sidebar-bottom d-flex justify-content-around mt-4">
{% if site.theme_mode == "dual" %} {% if site.theme_mode == "dual" %}
<span id="mode-toggle-wrapper" class="d-flex justify-content-center align-items-center"> <span id="mode-toggle-wrapper">
{% include mode-toggle.html %} {% include mode-toggle.html %}
</span> </span>
{% endif %} {% endif %}

52
assets/css/main.scss
View file

@ -11,6 +11,19 @@
@import "_fonts"; @import "_fonts";
@import "_dark/dark-main"; @import "_dark/dark-main";
@mixin sidebar-icon {
color: rgba(255, 255, 255, 0.5);
transition: color 0.35s ease-in-out;
user-select: none;
}
@mixin icon-round($diameter) {
border: 1px solid;
border-radius: 50%;
width: $diameter;
height: $diameter;
}
html, body { html, body {
height: 100%; height: 100%;
font-size: 16px; font-size: 16px;
@ -49,8 +62,7 @@ body {
} }
#sidebar a { #sidebar a {
color: rgba(255, 255, 255, 0.5); @include sidebar-icon;
transition: color 0.35s ease-in-out;
} }
#sidebar .nav-item { #sidebar .nav-item {
@ -237,17 +249,20 @@ body {
} }
#mode-toggle-wrapper { #mode-toggle-wrapper {
color: rgb(103, 107, 109); @include sidebar-icon;
font-size: 1.05rem; font-size: 1.05rem;
user-select: none; text-align: center;
transition: color 0.35s ease-in-out;
} }
#sidebar #mode-toggle-wrapper>i::after { #mode-toggle-wrapper::after {
content: ""; content: "";
color: #525354; background: #525354;
border-right: 1px solid; width: 1px;
padding-left: .6rem; height: 8px;
margin-left: 7px;
margin-right: -6px;
margin-bottom: 3px;
display: inline-block;
} }
@ -1370,10 +1385,7 @@ table tbody td {
} }
#sidebar .nav-link>i { #sidebar .nav-link>i {
border: 1px solid; @include icon-round(1.65rem);
border-radius: 50%;
width: 1.65rem;
height: 1.65rem;
line-height: 1rem; line-height: 1rem;
font-size: .6rem; font-size: .6rem;
padding: .5em 0 0 .1em; padding: .5em 0 0 .1em;
@ -1382,7 +1394,7 @@ table tbody td {
.sidebar-bottom { .sidebar-bottom {
margin-left: 3.5rem; margin-left: 3.5rem;
margin-right: 4.5rem; margin-right: 3rem;
font-size: 1.3rem; font-size: 1.3rem;
padding-bottom: 1rem; padding-bottom: 1rem;
} }
@ -1403,7 +1415,17 @@ table tbody td {
} }
#mode-toggle-wrapper { #mode-toggle-wrapper {
font-size: 1.6rem; font-size: .9rem;
}
#mode-toggle-wrapper>i {
@include icon-round(2rem);
padding-top: 0.5rem;
}
#mode-toggle-wrapper::after {
height: 14px;
margin-bottom: 0;
} }
footer>div.d-flex { footer>div.d-flex {