59 lines
No EOL
1.2 KiB
CSS
59 lines
No EOL
1.2 KiB
CSS
* + .banner,
|
|
:not(* + .banner) .banner:first-of-type {
|
|
margin-top: var(--spacing-base);
|
|
}
|
|
|
|
.banner:has(+ *),
|
|
:not(* + .banner) .banner:last-of-type {
|
|
margin-bottom: var(--spacing-base);
|
|
}
|
|
|
|
.banner {
|
|
padding: var(--spacing-md);
|
|
border: 1px solid;
|
|
border-radius: var(--border-radius-slight);
|
|
|
|
& p {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-color);
|
|
margin: 0;
|
|
|
|
a {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
& > svg {
|
|
display: inline;
|
|
vertical-align: middle;
|
|
height: var(--sizing-lg);
|
|
width: var(--sizing-lg);
|
|
margin-right: var(--spacing-sm);
|
|
}
|
|
}
|
|
|
|
&.error,
|
|
&.github,
|
|
&.npm,
|
|
&.old-post,
|
|
&.rss,
|
|
&.warning {
|
|
&.error { --banner-accent-color: var(--error); }
|
|
&.github { --banner-accent-color: var(--brand-github); }
|
|
&.npm { --banner-accent-color: var(--brand-npm); }
|
|
&.old-post { --banner-accent-color: var(--gray-dark); }
|
|
&.rss { --banner-accent-color: var(--brand-rss); }
|
|
&.warning { --banner-accent-color: var(--warning); }
|
|
|
|
border-color: var(--banner-accent-color);
|
|
|
|
& p a:hover,
|
|
& p a:active,
|
|
& p a:focus {
|
|
color: var(--banner-accent-color);
|
|
}
|
|
|
|
& svg {
|
|
stroke: var(--banner-accent-color);
|
|
}
|
|
}
|
|
} |