PlexSheep
/
krata
1
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Improve the color of prompts

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

47
_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');
@mixin mode-toggle($dark-mode: false) {
@if $dark-mode {
html {
@media (prefers-color-scheme: light) {
&:not([data-mode]),
[data-mode=light] {
@include light-scheme;
}
&[data-mode=dark] {
@include dark-scheme;
} @else {
}
}
@media (prefers-color-scheme: dark) {
&:not([data-mode]),
&[data-mode=dark] {
@include dark-scheme;
}
&[data-mode=light] {
@include light-scheme;
}
}
html:not([data-mode]),
html[data-mode=light] {
@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] {
@include mode-toggle();
}
}
:root {
font-size: 16px;
}
@ -109,10 +103,11 @@ blockquote {
display: flex;
border-left: 0;
border-radius: 6px;
padding: 0.75rem 1rem;
padding: 0.75rem 1.2rem;
color: var(--prompt-text-color);
&::before {
margin-right: 0.8rem;
margin-right: 1rem;
font-family: "Font Awesome 5 Free";
text-align: center;
width: 1.25rem;

1
_sass/addon/module.scss
View File

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

21
_sass/addon/syntax.scss
View File

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

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

@ -80,10 +80,6 @@
--clipboard-checked-color: #2bcc2b;
--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 {
.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-icon-color: rgb(255 165 0 / 80%);
--prompt-danger-bg: rgb(86 28 8 / 80%);
--prompt-danger-icon-color: rgb(255 0 0 / 60%);
--prompt-danger-icon-color: #cd0202;
/* tags */
--tag-border: rgb(59, 79, 88);

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

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

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

@ -68,13 +68,17 @@
--kbd-wrap-color: #bdbdbd;
--kbd-text-color: var(--text-color);
--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-icon-color: green;
--prompt-note-icon-color: #03b303;
--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-icon-color: #b31d1d;
--prompt-danger-icon-color: #df3c30;
[class^=prompt-] {
--link-underline-color: rgb(219 216 216);
}
/* Categories */
--categories-hover-bg: var(--btn-border-color);