style: optimize global style

This commit is contained in:
XPoet 2020-11-18 11:56:47 +08:00
parent a2d80bdd38
commit 2d7a5bc13c
9 changed files with 35 additions and 44 deletions

View File

@ -67,7 +67,7 @@ $article-date-font-size = 1em;
} }
a.article-title { a.article-title {
color: var(--normal-text-color); color: var(--default-text-color);
&:hover { &:hover {
color: var(--primary-color); color: var(--primary-color);

View File

@ -298,7 +298,7 @@ $gt-size-avatar-mobi := em(32px)
font-size: em(14px) font-size: em(14px)
word-wrap: break-word word-wrap: break-word
resize: vertical resize: vertical
color: var(--normal-text-color) color: var(--default-text-color)
background-color: var(--fourth-text-color) background-color: var(--fourth-text-color)
outline: none outline: none
transition: all 0.25s ease transition: all 0.25s ease

View File

@ -13,7 +13,7 @@
.vinput { .vinput {
color: var(--normal-text-color); color: var(--default-text-color);
border-color: var(--third-text-color); border-color: var(--third-text-color);
&:focus { &:focus {
@ -26,14 +26,14 @@
.vedit { .vedit {
.veditor { .veditor {
color: var(--normal-text-color); color: var(--default-text-color);
} }
.vctrl { .vctrl {
.vicon { .vicon {
fill: var(--normal-text-color); fill: var(--default-text-color);
&.actived { &.actived {
fill: var(--primary-color); fill: var(--primary-color);
@ -46,8 +46,8 @@
button.vsubmit { button.vsubmit {
background: transparent !important; background: transparent !important;
color: var(--normal-text-color) !important; color: var(--default-text-color) !important;
border: 1px solid var(--normal-text-color) !important; border: 1px solid var(--default-text-color) !important;
&:hover { &:hover {
color: var(--primary-color) !important; color: var(--primary-color) !important;
@ -60,7 +60,7 @@
.vcount { .vcount {
color: var(--normal-text-color); color: var(--default-text-color);
.vnum { .vnum {
color: var(--second-text-color); color: var(--second-text-color);
@ -96,7 +96,7 @@
} }
.vsys { .vsys {
color: var(--normal-text-color); color: var(--default-text-color);
background: var(--fourth-text-color) !important; background: var(--fourth-text-color) !important;
} }
} }
@ -104,7 +104,7 @@
.vcontent { .vcontent {
P { P {
color: var(--normal-text-color); color: var(--default-text-color);
} }
} }

View File

@ -77,7 +77,7 @@ $header-progress-height = 2.8px;
&:hover { &:hover {
color: var(--normal-text-color); color: var(--default-text-color);
&::after { &::after {
content: ''; content: '';
@ -132,7 +132,7 @@ $header-progress-height = 2.8px;
height: 2px; height: 2px;
margin: 6px 0; margin: 6px 0;
position: relative; position: relative;
background: var(--normal-text-color); background: var(--default-text-color);
transition(); transition();
&::before { &::before {
@ -142,7 +142,7 @@ $header-progress-height = 2.8px;
left: 0; left: 0;
width: 100%; width: 100%;
height: 2px; height: 2px;
background: var(--normal-text-color); background: var(--default-text-color);
transition(); transition();
} }
@ -153,7 +153,7 @@ $header-progress-height = 2.8px;
left: 0; left: 0;
width: 100%; width: 100%;
height: 2px; height: 2px;
background: var(--normal-text-color); background: var(--default-text-color);
transition(); transition();
} }
} }
@ -188,7 +188,7 @@ $header-progress-height = 2.8px;
border-radius: 20px; border-radius: 20px;
text-align: center; text-align: center;
line-height: 34px; line-height: 34px;
color: var(--normal-text-color); color: var(--default-text-color);
transition(); transition();
&:hover { &:hover {
@ -198,7 +198,7 @@ $header-progress-height = 2.8px;
} }
.active { .active {
border: 1px solid var(--normal-text-color); border: 1px solid var(--default-text-color);
color: var(--second-text-color); color: var(--second-text-color);
font-weight: bold; font-weight: bold;
} }

View File

@ -35,7 +35,7 @@ $icon-size = 1.2em;
z-index: $z-index-6; z-index: $z-index-6;
.search-icon, .popup-btn-close { .search-icon, .popup-btn-close {
color: var(--normal-text-color); color: var(--default-text-color);
font-size: $icon-size; font-size: $icon-size;
padding: 0 10px; padding: 0 10px;
display: flex; display: flex;
@ -66,7 +66,7 @@ input.search-input {
outline: 0; outline: 0;
width: 100%; width: 100%;
font-size: 1.2em; font-size: 1.2em;
color: var(--normal-text-color); color: var(--default-text-color);
&::-webkit-search-cancel-button { &::-webkit-search-cancel-button {
display: none; display: none;

View File

@ -28,7 +28,7 @@
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
color: var(--normal-text-color); color: var(--default-text-color);
background: var(--background-color); background: var(--background-color);
font-family: $default-font-family; font-family: $default-font-family;
font-weight: $default-font-weight; font-weight: $default-font-weight;
@ -72,7 +72,7 @@ ul, ol, li {
// ============================ // ============================
a { a {
text-decoration: none; text-decoration: none;
color: var(--normal-text-color); color: var(--default-text-color);
&:hover, &:active { &:hover, &:active {
color: var(--primary-color); color: var(--primary-color);

View File

@ -1,10 +1,10 @@
@require '../variables.styl' @require '../variables.styl'
$code-foreground = lighten($normal-text-color, 2%) $code-foreground = lighten($default-text-color, 2%)
$code-background = darken($background-color, 5%) $code-background = darken($background-color, 5%)
$highlight-foreground = lighten($normal-text-color, 2%) $highlight-foreground = lighten($default-text-color, 2%)
$highlight-background = darken($background-color, 2%) $highlight-background = darken($background-color, 2%)
$highlight-gutter-color = lighten($normal-text-color, 5%) $highlight-gutter-color = lighten($default-text-color, 5%)
$highlight-gutter-bg-color = darken($background-color, 5%) $highlight-gutter-bg-color = darken($background-color, 5%)
$highlight-comment = #8e908c $highlight-comment = #8e908c
$highlight-red = #c82829 $highlight-red = #c82829
@ -17,11 +17,11 @@ $highlight-purple = #8959a8
$highlight-deletion = #fdd $highlight-deletion = #fdd
$highlight-addition = #dfd $highlight-addition = #dfd
$night-code-foreground = lighten($dark-normal-text-color, 2%) $night-code-foreground = lighten($dark-default-text-color, 2%)
$night-code-background = darken($dark-background-color, 10%) $night-code-background = darken($dark-background-color, 10%)
$night-highlight-foreground = lighten($dark-normal-text-color, 2%) $night-highlight-foreground = lighten($dark-default-text-color, 2%)
$night-highlight-background = darken($dark-background-color, 8%) $night-highlight-background = darken($dark-background-color, 8%)
$night-highlight-gutter-color = lighten($dark-normal-text-color, 5%) $night-highlight-gutter-color = lighten($dark-default-text-color, 5%)
$night-highlight-gutter-bg-color = darken($dark-background-color, 10%) $night-highlight-gutter-bg-color = darken($dark-background-color, 10%)
$night-highlight-comment = #969896 $night-highlight-comment = #969896
$night-highlight-red = #cc6666 $night-highlight-red = #cc6666
@ -67,4 +67,4 @@ $night-highlight-addition = #800000
--highlight-purple: $night-highlight-purple; --highlight-purple: $night-highlight-purple;
--highlight-gutter-color: $night-highlight-gutter-color; --highlight-gutter-color: $night-highlight-gutter-color;
--highlight-gutter-bg-color: $night-highlight-gutter-bg-color; --highlight-gutter-bg-color: $night-highlight-gutter-bg-color;
} }

View File

@ -14,7 +14,7 @@ disable-user-select() {
} }
.copy-btn { .copy-btn {
color: #333; color: var(--default-text-color);
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
@ -25,28 +25,19 @@ disable-user-select() {
position: absolute; position: absolute;
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
font-size: 1.1em;
disable-user-select(); disable-user-select();
the-transition(); the-transition();
if (hexo-config('code_copy.style') == 'flat') { if (hexo-config('code_copy.style') == 'mac') {
background: white;
border: 0;
font-size: 0.8em;
right: 0;
top: 0;
} else if (hexo-config('code_copy.style') == 'mac') {
color: white; color: white;
font-size: 1em;
right: 2px; right: 2px;
top: 2px; top: 2px;
} else { } else {
background-color: #eee; background: var(--background-color);
background-image: linear-gradient(#fcfcfc, #eee); border: 0;
border: 1px solid #d5d5d5; right: 0;
border-radius: 3px; top: 0;
font-size: 0.8em;
right: 6px;
top: 6px;
} }
} }

View File

@ -103,7 +103,7 @@ root-color(mode) {
--second-text-color: mode == 'light' ? $second-text-color : $dark-second-text-color; --second-text-color: mode == 'light' ? $second-text-color : $dark-second-text-color;
--third-text-color: mode == 'light' ? $third-text-color : $dark-third-text-color; --third-text-color: mode == 'light' ? $third-text-color : $dark-third-text-color;
--fourth-text-color: mode == 'light' ? $fourth-text-color : $dark-fourth-text-color; --fourth-text-color: mode == 'light' ? $fourth-text-color : $dark-fourth-text-color;
--normal-text-color: mode == 'light' ? $default-text-color : $dark-default-text-color; --default-text-color: mode == 'light' ? $default-text-color : $dark-default-text-color;
--border-color: mode == 'light' ? $border-color : $dark-border-color; --border-color: mode == 'light' ? $border-color : $dark-border-color;
--selection-color: mode == 'light' ? $selection-color : $dark-selection-color; --selection-color: mode == 'light' ? $selection-color : $dark-selection-color;
--shadow-color: mode == 'light' ? $shadow-color : $dark-shadow-color; --shadow-color: mode == 'light' ? $shadow-color : $dark-shadow-color;