Skip to content

Commit 50ef605

Browse files
satya164satya164
committed
Tweak alert styling
1 parent 85cb2bc commit 50ef605

File tree

6 files changed

+135
-54
lines changed

6 files changed

+135
-54
lines changed

‎src/css/custom.css‎

Lines changed: 85 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -171,16 +171,10 @@
171171
25%
172172
);
173173

174+
--ifm-alert-border-width: 1px;
175+
--ifm-alert-border-left-width: 1px;
176+
--ifm-alert-padding-vertical: 0.875rem;
174177
--ifm-alert-shadow: none;
175-
--ifm-alert-border-radius: 0;
176-
--ifm-alert-border-left-width: 3px;
177-
178-
--ifm-doc-version-banner-background: hsl(42, 72%, 96.5%);
179-
--ifm-doc-version-banner-border: hsla(33, 28%, 48%, 0.2);
180-
--ifm-doc-version-banner-text: hsl(28, 32%, 24%);
181-
--ifm-doc-version-banner-link: hsl(29, 56%, 30%);
182-
--ifm-doc-version-banner-link-hover: hsl(28, 42%, 18%);
183-
--ifm-doc-version-banner-link-decoration: hsla(29, 56%, 30%, 0.24);
184178

185179
--ifm-doc-version-badge-background: hsl(0, 0%, 100%);
186180
--ifm-doc-version-badge-border: hsla(220, 10%, 54%, 0.2);
@@ -329,13 +323,6 @@
329323
85%
330324
);
331325

332-
--ifm-doc-version-banner-background: hsla(32, 18%, 18%, 0.72);
333-
--ifm-doc-version-banner-border: hsla(36, 22%, 46%, 0.24);
334-
--ifm-doc-version-banner-text: hsl(42, 38%, 88%);
335-
--ifm-doc-version-banner-link: hsl(41, 82%, 76%);
336-
--ifm-doc-version-banner-link-hover: hsl(46, 96%, 86%);
337-
--ifm-doc-version-banner-link-decoration: hsla(41, 82%, 76%, 0.28);
338-
339326
--ifm-doc-version-badge-background: hsl(225, 18%, 18%);
340327
--ifm-doc-version-badge-border: hsla(220, 16%, 48%, 0.32);
341328
--ifm-doc-version-badge-text: hsl(220, 20%, 92%);
@@ -834,8 +821,7 @@ header {
834821
left: calc(-2rem - 1px);
835822
}
836823

837-
.theme-edit-this-page svg,
838-
.theme-admonition svg {
824+
.theme-edit-this-page svg {
839825
transform: scale(0.8);
840826
}
841827

@@ -998,35 +984,77 @@ samp {
998984
display: none;
999985
}
1000986

1001-
.theme-doc-version-banner {
1002-
padding: 0.875rem 1rem;
1003-
border: 1px solid var(--ifm-doc-version-banner-border);
1004-
border-radius: var(--ifm-global-radius);
1005-
background: var(--ifm-doc-version-banner-background);
1006-
color: var(--ifm-doc-version-banner-text);
987+
.alert {
988+
--ifm-alert-foreground-color: var(--ifm-font-color-base);
989+
}
990+
991+
.alert--secondary {
992+
--alert-accent-color: var(--ifm-color-secondary-dark);
1007993

1008-
& > div {
1009-
max-width: 46rem;
994+
--ifm-alert-background-color: hsl(var(--ifm-color-secondary-hue), 24%, 97%);
995+
--ifm-alert-border-color: hsl(var(--ifm-color-secondary-hue), 18%, 86%);
996+
997+
[data-theme='dark'] & {
998+
--ifm-alert-background-color: hsl(
999+
var(--ifm-color-secondary-hue),
1000+
20%,
1001+
11.5%
1002+
);
1003+
--ifm-alert-border-color: hsl(var(--ifm-color-secondary-hue), 16%, 36%);
10101004
}
1005+
}
10111006

1012-
& > .margin-top--md {
1013-
margin-top: 0 !important;
1007+
.alert--success {
1008+
--alert-accent-color: var(--ifm-color-success-dark);
1009+
1010+
--ifm-alert-background-color: hsl(var(--ifm-color-success-hue), 62%, 96.8%);
1011+
--ifm-alert-border-color: hsl(var(--ifm-color-success-hue), 48%, 85.5%);
1012+
1013+
[data-theme='dark'] & {
1014+
--ifm-alert-background-color: hsl(var(--ifm-color-success-hue), 38%, 11.5%);
1015+
--ifm-alert-border-color: hsl(var(--ifm-color-success-hue), 30%, 36%);
10141016
}
1017+
}
1018+
1019+
.alert--info {
1020+
--alert-accent-color: var(--ifm-color-info-dark);
10151021

1016-
& b {
1017-
font-weight: 600;
1022+
--ifm-alert-background-color: hsl(var(--ifm-color-info-hue), 70%, 96.8%);
1023+
--ifm-alert-border-color: hsl(var(--ifm-color-info-hue), 56%, 85.5%);
1024+
1025+
[data-theme='dark'] & {
1026+
--ifm-alert-background-color: hsl(var(--ifm-color-info-hue), 46%, 11.5%);
1027+
--ifm-alert-border-color: hsl(var(--ifm-color-info-hue), 40%, 36%);
10181028
}
1029+
}
10191030

1020-
& a {
1021-
color: var(--ifm-doc-version-banner-link);
1022-
text-decoration-color: var(--ifm-doc-version-banner-link-decoration);
1023-
text-decoration-thickness: 0.08em;
1024-
text-underline-offset: 0.2em;
1031+
.alert--warning {
1032+
--alert-accent-color: var(--ifm-color-warning-dark);
10251033

1026-
&:hover {
1027-
color: var(--ifm-doc-version-banner-link-hover);
1028-
text-decoration-color: currentColor;
1029-
}
1034+
--ifm-alert-background-color: hsl(var(--ifm-color-warning-hue), 68%, 96.5%);
1035+
--ifm-alert-border-color: hsl(var(--ifm-color-warning-hue), 54%, 85%);
1036+
1037+
[data-theme='dark'] & {
1038+
--ifm-alert-background-color: hsl(var(--ifm-color-warning-hue), 46%, 11.5%);
1039+
--ifm-alert-border-color: hsl(var(--ifm-color-warning-hue), 40%, 36%);
1040+
}
1041+
}
1042+
1043+
.alert--danger {
1044+
--alert-accent-color: var(--ifm-color-danger-dark);
1045+
1046+
--ifm-alert-background-color: hsl(var(--ifm-color-danger-hue), 60%, 96.9%);
1047+
--ifm-alert-border-color: hsl(var(--ifm-color-danger-hue), 48%, 85.5%);
1048+
1049+
[data-theme='dark'] & {
1050+
--ifm-alert-background-color: hsl(var(--ifm-color-danger-hue), 38%, 11.5%);
1051+
--ifm-alert-border-color: hsl(var(--ifm-color-danger-hue), 32%, 36%);
1052+
}
1053+
}
1054+
1055+
.theme-doc-version-banner {
1056+
& > .margin-top--md {
1057+
margin-top: 0 !important;
10301058
}
10311059
}
10321060

@@ -1040,22 +1068,25 @@ samp {
10401068
font-weight: 600;
10411069
}
10421070

1043-
@media (max-width: 640px) {
1044-
.theme-doc-version-banner {
1045-
padding: 0.8125rem 0.9375rem;
1046-
}
1047-
}
1048-
10491071
.theme-admonition {
1050-
--ifm-alert-padding-vertical: 0;
1051-
--ifm-alert-foreground-color: var(--ifm-alert-border-color);
1052-
--ifm-code-background: inherit;
1072+
& [class^='admonitionHeading'] {
1073+
display: flex;
1074+
align-items: center;
1075+
font-size: inherit;
1076+
text-transform: capitalize;
1077+
color: var(--alert-accent-color, var(--ifm-alert-foreground-color));
1078+
}
10531079

1054-
background-color: transparent;
1055-
color: inherit;
1080+
& [class^='admonitionIcon'] {
1081+
width: 1em;
1082+
height: 1em;
1083+
}
10561084

1057-
& [class^='admonitionHeading'] {
1058-
color: var(--ifm-alert-foreground-color);
1085+
& [class^='admonitionIcon'] svg {
1086+
display: block;
1087+
width: 100%;
1088+
height: 100%;
1089+
fill: var(--alert-accent-color, var(--ifm-alert-foreground-color));
10591090
}
10601091
}
10611092

@@ -1143,7 +1174,7 @@ samp {
11431174
left: 8px;
11441175
padding-right: 8px;
11451176
content: '+';
1146-
color: var(--ifm-color-success-dark);
1177+
color: var(--ifm-color-success-darker);
11471178
}
11481179
}
11491180

@@ -1158,7 +1189,7 @@ samp {
11581189
left: 8px;
11591190
padding-right: 8px;
11601191
content: '-';
1161-
color: var(--ifm-color-danger-dark);
1192+
color: var(--ifm-color-danger-darker);
11621193
}
11631194
}
11641195

‎src/theme/Admonition/Icon/Danger.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { type ReactNode } from 'react';
2+
import type { Props } from '@theme/Admonition/Icon/Danger';
3+
4+
export default function AdmonitionIconDanger(props: Props): ReactNode {
5+
return (
6+
<svg viewBox="0 0 16 16" fill="currentColor" {...props}>
7+
<path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" />
8+
</svg>
9+
);
10+
}

‎src/theme/Admonition/Icon/Info.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { type ReactNode } from 'react';
2+
import type { Props } from '@theme/Admonition/Icon/Info';
3+
4+
export default function AdmonitionIconInfo(props: Props): ReactNode {
5+
return (
6+
<svg viewBox="0 0 16 16" fill="currentColor" {...props}>
7+
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" />
8+
</svg>
9+
);
10+
}

‎src/theme/Admonition/Icon/Note.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { type ReactNode } from 'react';
2+
import type { Props } from '@theme/Admonition/Icon/Note';
3+
4+
export default function AdmonitionIconNote(props: Props): ReactNode {
5+
return (
6+
<svg viewBox="0 0 16 16" fill="currentColor" {...props}>
7+
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" />
8+
</svg>
9+
);
10+
}

‎src/theme/Admonition/Icon/Tip.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { type ReactNode } from 'react';
2+
import type { Props } from '@theme/Admonition/Icon/Tip';
3+
4+
export default function AdmonitionIconTip(props: Props): ReactNode {
5+
return (
6+
<svg viewBox="0 0 16 16" fill="currentColor" {...props}>
7+
<path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z" />
8+
</svg>
9+
);
10+
}

‎src/theme/Admonition/Icon/Warning.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { type ReactNode } from 'react';
2+
import type { Props } from '@theme/Admonition/Icon/Warning';
3+
4+
export default function AdmonitionIconWarning(props: Props): ReactNode {
5+
return (
6+
<svg viewBox="0 0 16 16" fill="currentColor" {...props}>
7+
<path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" />
8+
</svg>
9+
);
10+
}

0 commit comments

Comments
 (0)