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

Improve the color of prompts

Browse source
This commit is contained in:
Cotes Chung 2022-01-27 04:41:19 +08:00
parent a5d38e7fbc
commit fc36f8b66d
7 changed files with 53 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
_sass/addon/commons.scss
View file

@ -3,35 +3,29 @@
*/ */
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap');
@mixin mode-toggle($dark-mode: false) { html {
@if $dark-mode { @media (prefers-color-scheme: light) {
@include dark-scheme; &:not([data-mode]),
} @else { [data-mode=light] {
@include light-scheme; @include light-scheme;
} }
}
html:not([data-mode]), &[data-mode=dark] {
html[data-mode=light] { @include dark-scheme;
@include mode-toggle(); }
}
html[data-mode=dark] {
@include mode-toggle(true);
}
@media (prefers-color-scheme: dark) {
html:not([data-mode]),
html[data-mode=dark] {
@include mode-toggle(true);
} }
html[data-mode=light] { @media (prefers-color-scheme: dark) {
@include mode-toggle(); &:not([data-mode]),
} &[data-mode=dark] {
} @include dark-scheme;
}
&[data-mode=light] {
@include light-scheme;
}
}
:root {
font-size: 16px; font-size: 16px;
} }
@ -109,10 +103,11 @@ blockquote {
display: flex; display: flex;
border-left: 0; border-left: 0;
border-radius: 6px; border-radius: 6px;
padding: 0.75rem 1rem; padding: 0.75rem 1.2rem;
color: var(--prompt-text-color);
&::before { &::before {
margin-right: 0.8rem; margin-right: 1rem;
font-family: "Font Awesome 5 Free"; font-family: "Font Awesome 5 Free";
text-align: center; text-align: center;
width: 1.25rem; width: 1.25rem;

1
_sass/addon/module.scss
View file

@ -146,7 +146,6 @@
@mixin prompt($type, $fw-icon, $icon-weight: 900) { @mixin prompt($type, $fw-icon, $icon-weight: 900) {
&.prompt-#{$type} { &.prompt-#{$type} {
background-color: var(--prompt-#{$type}-bg); background-color: var(--prompt-#{$type}-bg);
color: var(--prompt-text-color);
&::before { &::before {
content: $fw-icon; content: $fw-icon;

37
_sass/addon/syntax.scss
View file

@ -5,23 +5,27 @@
@import "colors/light-syntax"; @import "colors/light-syntax";
@import "colors/dark-syntax"; @import "colors/dark-syntax";
html:not([data-mode]), html {
html[data-mode=light] { @media (prefers-color-scheme: light) {
@include light-syntax; &:not([data-mode]),
} [data-mode=light] {
@include light-syntax;
}
html[data-mode=dark] { &[data-mode=dark] {
@include dark-syntax; @include dark-syntax;
} }
@media (prefers-color-scheme: dark) {
html:not([data-mode]),
html[data-mode=dark] {
@include dark-syntax;
} }
html[data-mode=light] { @media (prefers-color-scheme: dark) {
@include light-syntax; &:not([data-mode]),
&[data-mode=dark] {
@include dark-syntax;
}
&[data-mode=light] {
@include light-syntax;
}
} }
} }
@ -110,11 +114,6 @@ code {
background-color: var(--inline-code-bg); background-color: var(--inline-code-bg);
} }
[class^="prompt-"] & {
background-color: var(--prompt-code-bg);
color: var(--prompt-code-text-color);
}
&.filepath { &.filepath {
background-color: inherit; background-color: inherit;
color: var(--filepath-text-color); color: var(--filepath-text-color);

4
_sass/colors/dark-syntax.scss
View file

@ -80,10 +80,6 @@
--clipboard-checked-color: #2bcc2b; --clipboard-checked-color: #2bcc2b;
--filepath-text-color: #bdbdbd; --filepath-text-color: #bdbdbd;
/* the code of prompts */
--prompt-code-bg: rgb(38 38 38 / 47%);
--prompt-code-text-color: var(--highlighter-rouge-color);
.highlight { .highlight {
.gp { color: #818c96; } .gp { color: #818c96; }
} }

2
_sass/colors/dark-typography.scss
View file

@ -75,7 +75,7 @@
--prompt-warning-bg: rgb(90 69 3 / 95%); --prompt-warning-bg: rgb(90 69 3 / 95%);
--prompt-warning-icon-color: rgb(255 165 0 / 80%); --prompt-warning-icon-color: rgb(255 165 0 / 80%);
--prompt-danger-bg: rgb(86 28 8 / 80%); --prompt-danger-bg: rgb(86 28 8 / 80%);
--prompt-danger-icon-color: rgb(255 0 0 / 60%); --prompt-danger-icon-color: #cd0202;
/* tags */ /* tags */
--tag-border: rgb(59, 79, 88); --tag-border: rgb(59, 79, 88);

7
_sass/colors/light-syntax.scss
View file

@ -76,8 +76,9 @@
--code-header-icon-color: #d1d1d1; --code-header-icon-color: #d1d1d1;
--clipboard-checked-color: #43c743; --clipboard-checked-color: #43c743;
/* the code of prompts */ [class^=prompt-] {
--prompt-code-bg: rgb(219 217 217 / 35%); --inline-code-bg: #fbfafa;
--prompt-code-text-color: rgb(78 78 84); --highlighter-rouge-color: rgb(82 82 82);
}
} /* light-syntax */ } /* light-syntax */

12
_sass/colors/light-typography.scss
View file

@ -68,13 +68,17 @@
--kbd-wrap-color: #bdbdbd; --kbd-wrap-color: #bdbdbd;
--kbd-text-color: var(--text-color); --kbd-text-color: var(--text-color);
--kbd-bg-color: white; --kbd-bg-color: white;
--prompt-text-color: rgb(70 70 70 / 90%); --prompt-text-color: rgb(46 46 46 / 77%);
--prompt-note-bg: rgb(123 247 144 / 20%); --prompt-note-bg: rgb(123 247 144 / 20%);
--prompt-note-icon-color: green; --prompt-note-icon-color: #03b303;
--prompt-warning-bg: rgb(255 243 205); --prompt-warning-bg: rgb(255 243 205);
--prompt-warning-icon-color: rgb(215 138 24); --prompt-warning-icon-color: #ef9c03;
--prompt-danger-bg: rgb(248 215 218 / 56%); --prompt-danger-bg: rgb(248 215 218 / 56%);
--prompt-danger-icon-color: #b31d1d; --prompt-danger-icon-color: #df3c30;
[class^=prompt-] {
--link-underline-color: rgb(219 216 216);
}
/* Categories */ /* Categories */
--categories-hover-bg: var(--btn-border-color); --categories-hover-bg: var(--btn-border-color);