style: optimize global style
This commit is contained in:
parent
a2d80bdd38
commit
2d7a5bc13c
|
@ -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);
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue