john/runtimeterror
1
0
Fork 0
mirror of https://github.com/jbowdre/runtimeterror.git synced 2024-09-19 15:45:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve themability of notice blocks

Browse source
This commit is contained in:
John Bowdre 2024-08-15 21:09:22 -05:00
parent ae966098ee
commit 00d71d21e9
1 changed files with 29 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
static/css/custom.css
View file

@ -174,59 +174,24 @@ body {
/* Notice CSS Built on hugo-notice by Nicolas Martignoni: https://github.com/martignoni/hugo-notice */ /* Notice CSS Built on hugo-notice by Nicolas Martignoni: https://github.com/martignoni/hugo-notice */
.notice { .notice {
--root-color: #444; --notice-title-color: #fff;
--root-background: #eff; --notice-warn-color: #c33;
--title-color: #fff; --notice-info-color: #fb7;
--title-background: #7bd; --notice-note-color: #6be;
--warning-title: #c33; --notice-tip-color: #5a5;
--warning-content: #fee;
--info-title: #fb7;
--info-content: #fec;
--note-title: #6be;
--note-content: #e7f2fa;
--tip-title: #5a5;
--tip-content: #efe;
}
@media (prefers-color-scheme: dark) { --notice-padding: 18px;
.notice { --notice-line-height: 24px;
--root-color: #ddd; --notice-margin-bottom: 24px;
--root-background: #eff; --notice-border-radius: 4px;
--title-color: #fff; --notice-title-margin: 12px;
--title-background: #7bd; --notice-bg-opacity: 10%;
--warning-title: #800;
--warning-content: #400;
--info-title: #a50;
--info-content: #420;
--note-title: #069;
--note-content: #023;
--tip-title: #363;
--tip-content: #121;
}
}
body.dark .notice { padding: var(--notice-padding);
--root-color: #ddd; line-height: var(--notice-line-height);
--root-background: #eff; margin-bottom: var(--notice-margin-bottom);
--title-color: #fff; border-radius: var(--notice-border-radius);
--title-background: #7bd; color: var(--fg);
--warning-title: #800;
--warning-content: #400;
--info-title: #a50;
--info-content: #420;
--note-title: #069;
--note-content: #023;
--tip-title: #363;
--tip-content: #121;
}
.notice {
padding: 18px;
line-height: 24px;
margin-bottom: 24px;
border-radius: 4px;
color: var(--root-color);
background: var(--root-background);
} }
.notice p:last-child { .notice p:last-child {
@ -234,45 +199,23 @@ body.dark .notice {
} }
.notice-title { .notice-title {
margin: -18px -18px 12px; margin: calc(-1 * var(--notice-padding));
padding: 4px 18px; margin-bottom: var(--notice-title-margin);
border-radius: 4px 4px 0 0; padding: 4px var(--notice-padding);
border-radius: var(--notice-border-radius) var(--notice-border-radius) 0 0;
font-weight: 700; font-weight: 700;
color: var(--title-color); color: var(--notice-title-color);
background: var(--title-background);
} }
.notice.warning .notice-title { .notice.warning .notice-title { background: var(--notice-warning-color); }
background: var(--warning-title); .notice.info .notice-title { background: var(--notice-info-color); }
} .notice.note .notice-title { background: var(--notice-note-color); }
.notice.tip .notice-title { background: var(--notice-tip-color); }
.notice.warning { .notice.warning { background: color-mix(in srgb, var(--notice-warning-color) var(--notice-bg-opacity), transparent); }
background: var(--warning-content); .notice.info { background: color-mix(in srgb, var(--notice-info-color) var(--notice-bg-opacity), transparent); }
} .notice.note { background: color-mix(in srgb, var(--notice-note-color) var(--notice-bg-opacity), transparent); }
.notice.tip { background: color-mix(in srgb, var(--notice-tip-color) var(--notice-bg-opacity), transparent); }
.notice.info .notice-title {
background: var(--info-title);
}
.notice.info {
background: var(--info-content);
}
.notice.note .notice-title {
background: var(--note-title);
}
.notice.note {
background: var(--note-content);
}
.notice.tip .notice-title {
background: var(--tip-title);
}
.notice.tip {
background: var(--tip-content);
}
.icon-notice { .icon-notice {
display: inline-flex; display: inline-flex;