Skip to content

Commit

Permalink
chore: update global css (#54)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ErKeLost
ErKeLost authored Jan 22, 2024
1 parent 204b816 commit 70c5568
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 49 deletions.
110 changes: 64 additions & 46 deletions src/css/_admonition.scss
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,37 @@
html[data-theme="light"] {
--note-color: #241800;

--admonition-note-c-bg: linear-gradient(to bottom,
var(--ifm-alert-note-background-color),
transparent 40%);
;
--admonition-info-c-bg: linear-gradient(to bottom,
var(--ifm-alert-info-background-color),
transparent 40%);
;
--admonition-tip-c-bg: linear-gradient(to bottom,
var(--ifm-alert-tip-background-color),
transparent 40%);
;
--admonition-warning-c-bg: linear-gradient(to bottom,
var(--ifm-alert-warning-background-color),
transparent 40%);
;
--admonition-caution-c-bg: linear-gradient(to bottom,
var(--ifm-alert-caution-background-color),
transparent 40%);
;
--admonition-danger-c-bg: linear-gradient(to bottom,
var(--ifm-alert-danger-background-color),
transparent 40%);
;

--admonition-note-c-color: inherit;
--admonition-note-c-bg: linear-gradient(
to bottom,
var(--ifm-alert-note-background-color),
transparent 40%
);
--admonition-info-c-bg: linear-gradient(
to bottom,
var(--ifm-alert-info-background-color),
transparent 40%
);
--admonition-tip-c-bg: linear-gradient(
to bottom,
var(--ifm-alert-tip-background-color),
transparent 40%
);
--admonition-warning-c-bg: linear-gradient(
to bottom,
var(--ifm-alert-warning-background-color),
transparent 40%
);
--admonition-caution-c-bg: linear-gradient(
to bottom,
var(--ifm-alert-caution-background-color),
transparent 40%
);
--admonition-danger-c-bg: linear-gradient(
to bottom,
var(--ifm-alert-danger-background-color),
transparent 40%
);
--admonition-note-c-color: #ff9ff3;
--admonition-info-c-color: inherit;
--admonition-tip-c-color: inherit;
--admonition-warning-c-color: inherit;
Expand Down Expand Up @@ -137,56 +142,67 @@ html[data-theme="dark"] {
--admonition-bar-c-bg: var(--admonition-bar-note-c-bg);
--admonition-code-c-bg: var(--admonition-code-note-c-bg);
--admonition-link-c: var(--admonition-link-note-c);
border: 2px solid var(--c-yellow-220);
background: var(--admonition-warning-c-bg);
color: var(--admonition-warning-c-color);
border: 2px solid var(--c-yellow-90-a);
// background: var(--admonition-warning-c-bg);
// color: var(--admonition-warning-c-color);
background: transparent;
color: var(--c-yellow-90);
}

&-note {
--admonition-bar-c-bg: var(--admonition-bar-note-c-bg);
--admonition-code-c-bg: var(--admonition-code-note-c-bg);
--admonition-link-c: var(--admonition-link-note-c);
border: 2px solid var(--ifm-menu-color-background-active);
background: var(--admonition-note-c-bg);
color: var(--admonition-note-c-color);
border: 2px solid var(--c-brand-a);
// background: var(--admonition-note-c-bg);
// color: var(--admonition-note-c-color);
background: transparent;
color: var(--c-brand);
}

&-info {
--ifm-alert-background-color: var(--c-teal-210);
--admonition-bar-c-bg: var(--admonition-bar-info-c-bg);
--admonition-code-c-bg: var(--admonition-code-info-c-bg);
--admonition-link-c: var(--admonition-link-info-c);
border: 2px solid var(--c-teal-210);
background: var(--admonition-info-c-bg);
color: var(--admonition-info-c-color);
border: 2px solid var(--c-teal-60-a);
// background: var(--admonition-info-c-bg);
// color: var(--admonition-info-c-color);
background: transparent;
color: var(--c-teal-60);
}

&-tip {
--admonition-bar-c-bg: var(--admonition-bar-tip-c-bg);
--admonition-code-c-bg: var(--admonition-code-tip-c-bg);
--admonition-link-c: var(--admonition-link-tip-c);
border: 2px solid var(--admonition-tip-border);
background: var(--admonition-tip-c-bg);
color: var(--admonition-tip-c-color);
border: 2px solid var(--c-green-50-a);
// background: var(--admonition-tip-c-bg);
// color: var(--admonition-tip-c-color);
background: transparent;
color: var(--c-green-50);
}

&-caution {
--ifm-alert-background-color: var(--admonition-caution-c-bg);
--admonition-bar-c-bg: var(--admonition-bar-caution-c-bg);
--admonition-code-c-bg: var(--admonition-code-caution-c-bg);
--admonition-link-c: var(--admonition-link-caution-c);
background: var(--admonition-caution-c-bg);
color: var(--admonition-caution-c-color);
// background: var(--admonition-caution-c-bg);
// color: var(--admonition-caution-c-color);
background: transparent;
}

&-danger {
--ifm-alert-background-color: var(--admonition-danger-c-bg);
--admonition-bar-c-bg: var(--admonition-bar-danger-c-bg);
--admonition-code-c-bg: var(--admonition-code-danger-c-bg);
--admonition-link-c: var(--admonition-link-danger-c);
border: 2px solid var(--c-red-210);
background: var(--admonition-danger-c-bg);
color: var(--admonition-danger-c-color);
border: 2px solid var(--c-red-50-a);
// background: var(--admonition-danger-c-bg);
// color: var(--admonition-danger-c-color);
background: transparent;
color: var(--c-red-50);
}

&-important {
Expand All @@ -195,9 +211,11 @@ html[data-theme="dark"] {
--admonition-code-c-bg: var(--admonition-code-danger-c-bg);
--admonition-link-c: var(--admonition-link-danger-c);
border: 2px solid var(--c-lavender-220);
background: linear-gradient(to bottom,
var(--ifm-alert-background-color),
transparent);
background: linear-gradient(
to bottom,
var(--ifm-alert-background-color),
transparent
);
}
}

Expand Down
3 changes: 2 additions & 1 deletion src/css/custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@
--z-backdrop: 1100;
--ifm-menu-color-background-active: #ff9ff330;
--ifm-menu-color-background: #ff9ff310;
--docusaurus-highlighted-code-line-bg: #ff9ff310;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
Expand Down Expand Up @@ -172,7 +173,7 @@ div[class^="announcementBar_"] {
}

.code-block-highlight-line {
background-color: #666;
background-color: var(--docusaurus-highlighted-code-line-bg);
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
Expand Down
15 changes: 13 additions & 2 deletions src/css/token.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
--c-green-30: #a7f1bb;
--c-green-40: #80e89d;
--c-green-50: #62e085;
--c-green-50-a: #62e08570;
--c-green-50-a: #62e08560;
--c-green-60: #4ada71;
--c-green-70: #2dd55b;
--c-green-80: #17c948;
Expand Down Expand Up @@ -142,6 +142,8 @@
--c-purple-180: #0d0038;
--c-purple-190: #0b0030;
--c-purple-200: #080022;
--c-brand: #8f1a7f;
--c-brand-a: #8f1a7f60;
--c-pink-0: #ffeff5;
--c-pink-10: #ffe3ed;
--c-pink-20: #ffd8e5;
Expand Down Expand Up @@ -169,6 +171,7 @@
--c-red-30: #feb7bc;
--c-red-40: #fc9aa2;
--c-red-50: #f9838c;
--c-red-50-a: #f9838c60;
--c-red-60: #f56570;
--c-red-70: #f24c58;
--c-red-80: #ef3442;
Expand Down Expand Up @@ -213,13 +216,14 @@
--c-yellow-30: #ffefbd;
--c-yellow-30-a: #fcd28550;
--c-yellow-40: #ffe9a3;
--c-yellow-50: #ffe080;
--c-yellow-50: #ffcb2d;
--c-yellow-50-a: #ffd75a60;
--c-yellow-60: #ffd75a;
--c-yellow-60-a: #ffd75a30;
--c-yellow-70: #ffce31;
--c-yellow-80: #ffc409;
--c-yellow-90: #f4b100;
--c-yellow-90-a: #f4b10060;
--c-yellow-100: #eaa100;
--c-yellow-110: #dd9800;
--c-yellow-120: #cc8d00;
Expand Down Expand Up @@ -261,6 +265,7 @@
--c-teal-40: #a2fcff;
--c-teal-50: #8bfbff;
--c-teal-60: #73f6fb;
--c-teal-60-a: #73f6fb60;
--c-teal-70: #55ecf2;
--c-teal-80: #35e2e9;
--c-teal-90: #1bd2d9;
Expand Down Expand Up @@ -299,3 +304,9 @@
--c-cyan-190: #011e33;
--c-cyan-200: #01121e;
}

html[data-theme="dark"] {
--c-brand: #ff9ff3;
--c-yellow-50: #f9d76f;
--c-yellow-50-a: #ffd75a60;
}

0 comments on commit 70c5568

Please sign in to comment.