Add GitHub-styled alerts
This commit is contained in:
daudix
113
sass/_alerts.scss
Normal file
113
sass/_alerts.scss
Normal file
@ -0,0 +1,113 @@
|
||||
blockquote {
|
||||
&.note {
|
||||
border-left: 0.25rem solid var(--blue-fg);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
border-right: 0.25rem solid var(--blue-fg);
|
||||
border-left: unset;
|
||||
}
|
||||
|
||||
.alert-name {
|
||||
color: var(--blue-fg);
|
||||
}
|
||||
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0C3.59 0 0 3.59 0 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8m0 2c3.332 0 6 2.668 6 6s-2.668 6-6 6-6-2.668-6-6 2.668-6 6-6m0 1.875a1.125 1.125 0 1 0 0 2.25 1.125 1.125 0 0 0 0-2.25M6.477 7A.5.5 0 0 0 6.5 8H7v3h-.5a.499.499 0 1 0 0 1h3a.499.499 0 1 0 0-1H9V7zm0 0'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--blue-fg);
|
||||
}
|
||||
}
|
||||
|
||||
&.tip {
|
||||
border-left: 0.25rem solid var(--green-fg);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
border-right: 0.25rem solid var(--green-fg);
|
||||
border-left: unset;
|
||||
}
|
||||
|
||||
.alert-name {
|
||||
color: var(--green-fg);
|
||||
}
|
||||
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.996 0C5.16 0 2.703 2 2.125 4.777c-.527 2.535.688 5.036 2.871 6.325L5 12a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-.898c2.184-1.293 3.402-3.797 2.871-6.332A6.01 6.01 0 0 0 7.996 0m0 2a3.994 3.994 0 0 1 3.918 3.18 3.99 3.99 0 0 1-2.312 4.484 1.01 1.01 0 0 0-.602.914V11H6.996v-.418a1 1 0 0 0-.598-.914 3.994 3.994 0 0 1-2.316-4.484A3.99 3.99 0 0 1 7.996 2m-.998 4a.5.5 0 0 0-.354.852l1 1a.5.5 0 0 0 .708 0l1-1a.5.5 0 0 0 0-.707.507.507 0 0 0-.707 0l-.649.648-.644-.648A.5.5 0 0 0 6.998 6M6 14v1c0 .555.445 1 1 1h2c.555 0 1-.445 1-1v-1z'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--green-fg);
|
||||
}
|
||||
}
|
||||
|
||||
&.important {
|
||||
border-left: 0.25rem solid var(--purple-fg);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
border-right: 0.25rem solid var(--purple-fg);
|
||||
border-left: unset;
|
||||
}
|
||||
|
||||
.alert-name {
|
||||
color: var(--purple-fg);
|
||||
}
|
||||
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 0C1.355 0 0 1.355 0 3v7c0 1.256.893 2.14 2 2.584V15a1 1 0 0 0 1.707.707L6.414 13H13c1.645 0 3-1.355 3-3V3c0-1.645-1.355-3-3-3zm0 2h10c.571 0 1 .429 1 1v7c0 .571-.429 1-1 1H6a1 1 0 0 0-.707.293L4 12.586V12a1 1 0 0 0-1-1c-.571 0-1-.429-1-1V3c0-.571.429-1 1-1m5 1c-.554 0-1 .446-1 1v2c0 .554.446 1 1 1s1-.446 1-1V4c0-.554-.446-1-1-1m0 5a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--purple-fg);
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
border-left: 0.25rem solid var(--yellow-fg);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
border-right: 0.25rem solid var(--yellow-fg);
|
||||
border-left: unset;
|
||||
}
|
||||
|
||||
.alert-name {
|
||||
color: var(--yellow-fg);
|
||||
}
|
||||
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .844c-.907 0-1.814.444-2.291 1.334l-.002.002-5.178 9.697C-.45 13.704.928 16.002 3 16h10c2.072.002 3.45-2.296 2.47-4.123L10.294 2.18l-.002-.002C9.814 1.288 8.907.844 8 .844M8 2.77c.201 0 .403.118.53.353l5.177 9.697.002.002c.307.573-.057 1.18-.707 1.178H2.998c-.65.001-1.014-.605-.707-1.178l.002-.002 5.18-9.699c.126-.233.327-.351.527-.351M8 5c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V6c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--yellow-fg);
|
||||
}
|
||||
}
|
||||
|
||||
&.caution {
|
||||
border-left: 0.25rem solid var(--red-fg);
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
border-right: 0.25rem solid var(--red-fg);
|
||||
border-left: unset;
|
||||
}
|
||||
|
||||
.alert-name {
|
||||
color: var(--red-fg);
|
||||
}
|
||||
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5 0a1 1 0 0 0-.707.293l-4 4A1 1 0 0 0 0 5v6a1 1 0 0 0 .293.707l4 4A1 1 0 0 0 5 16h6a1 1 0 0 0 .707-.293l4-4A1 1 0 0 0 16 11V5a1 1 0 0 0-.293-.707l-4-4A1 1 0 0 0 11 0zm.414 2h5.172L14 5.414v5.172L10.586 14H5.414L2 10.586V5.414zM8 4c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V5c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--red-fg);
|
||||
}
|
||||
}
|
||||
|
||||
.alert-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: -0.5rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
vertical-align: -0.125em;
|
||||
margin-inline-end: 0.25rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
@ -47,7 +47,7 @@
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: var(--rounded-corner);
|
||||
border-top-right-radius: 2.125rem;
|
||||
background-color: var(--faves-bg);
|
||||
background-color: var(--yellow-bg);
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
outline: 0.125rem dashed var(--faves-fg);
|
||||
outline: 0.125rem dashed var(--yellow-fg);
|
||||
outline-offset: 0.5rem;
|
||||
|
||||
&::before {
|
||||
@ -89,7 +89,7 @@
|
||||
margin-top: 0.25rem;
|
||||
|
||||
a {
|
||||
color: var(--faves-fg);
|
||||
color: var(--yellow-fg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -104,8 +104,8 @@
|
||||
}
|
||||
|
||||
.tags a:hover {
|
||||
background-color: var(--faves-bg);
|
||||
color: var(--faves-fg);
|
||||
background-color: var(--yellow-bg);
|
||||
color: var(--yellow-fg);
|
||||
}
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
@ -167,14 +167,14 @@
|
||||
}
|
||||
|
||||
.featured-badge {
|
||||
background-color: var(--faves-bg);
|
||||
color: var(--faves-fg);
|
||||
background-color: var(--yellow-bg);
|
||||
color: var(--yellow-fg);
|
||||
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.95.684l-1.448 4.34-4.59-.016C.032 5.004-.371 6.266.43 6.828l3.625 2.555-1.5 4.285c-.317.902.687 1.691 1.492 1.172l4.004-2.594 3.894 2.586c.801.531 1.817-.258 1.5-1.16l-1.504-4.29 3.645-2.577c.789-.563.394-1.809-.574-1.813l-4.66-.015L8.949.69A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--faves-fg);
|
||||
background-color: var(--yellow-fg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -178,10 +178,10 @@
|
||||
}
|
||||
|
||||
.boosts {
|
||||
color: var(--boosts-fg);
|
||||
color: var(--purple-fg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--boosts-bg);
|
||||
background-color: var(--purple-bg);
|
||||
|
||||
.icon {
|
||||
transform: rotate(180deg);
|
||||
@ -192,15 +192,15 @@
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 1v2H4C1.8 3 0 4.8 0 7v2a4 4 0 0 0 1.02 2.672 1 1 0 1 0 1.488-1.336A1.97 1.97 0 0 1 2 9V7c0-1.125.875-2 2-2h4v2h1v-.008a1 1 0 0 0 .707-.285l2-2a1 1 0 0 0 0-1.414l-2-2A1 1 0 0 0 9 1.008V1zm6.29 3a1 1 0 0 0-.72.258.993.993 0 0 0-.078 1.41c.317.355.508.816.508 1.34v2c0 1.125-.875 2-2 2H8V9H7v.008a1 1 0 0 0-.707.285l-2 2a1 1 0 0 0 0 1.414l2 2c.187.184.441.29.707.285V15h1v-1.992h4c2.2 0 4-1.805 4-4v-2a4 4 0 0 0-1.02-2.676A1 1 0 0 0 14.29 4m0 0'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--boosts-fg);
|
||||
background-color: var(--purple-fg);
|
||||
}
|
||||
}
|
||||
|
||||
.faves {
|
||||
color: var(--faves-fg);
|
||||
color: var(--yellow-fg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--faves-bg);
|
||||
background-color: var(--yellow-bg);
|
||||
|
||||
.icon {
|
||||
transform: rotate(72deg);
|
||||
@ -211,7 +211,7 @@
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.95.684l-1.448 4.34-4.59-.016C.032 5.004-.371 6.266.43 6.828l3.625 2.555-1.5 4.285c-.317.902.687 1.691 1.492 1.172l4.004-2.594 3.894 2.586c.801.531 1.817-.258 1.5-1.16l-1.504-4.29 3.645-2.577c.789-.563.394-1.809-.574-1.813l-4.66-.015L8.949.69A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--faves-fg);
|
||||
background-color: var(--yellow-fg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
color: var(--red-fg);
|
||||
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.906.094C7.38.066 6.867.375 6.47 1.063L.219 12.656C-.316 13.621.266 15 1.313 15h13.156c.98 0 1.902-1.16 1.219-2.344L9.375 1.125C8.977.48 8.434.121 7.906.094M9 4v5c.008.527-.473 1-1 1s-1.008-.473-1-1V4zm-1 7c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1m0 0'/%3E%3C/svg%3E");
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .844c-.907 0-1.814.444-2.291 1.334l-.002.002-5.178 9.697C-.45 13.704.928 16.002 3 16h10c2.072.002 3.45-2.296 2.47-4.123L10.294 2.18l-.002-.002C9.814 1.288 8.907.844 8 .844M8 2.77c.201 0 .403.118.53.353l5.177 9.697.002.002c.307.573-.057 1.18-.707 1.178H2.998c-.65.001-1.014-.605-.707-1.178l.002-.002 5.18-9.699c.126-.233.327-.351.527-.351M8 5c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V6c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--red-fg);
|
||||
@ -57,7 +57,7 @@
|
||||
color: var(--yellow-fg);
|
||||
|
||||
.icon {
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.906.094C7.38.066 6.867.375 6.47 1.063L.219 12.656C-.316 13.621.266 15 1.313 15h13.156c.98 0 1.902-1.16 1.219-2.344L9.375 1.125C8.977.48 8.434.121 7.906.094M9 4v5c.008.527-.473 1-1 1s-1.008-.473-1-1V4zm-1 7c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1m0 0'/%3E%3C/svg%3E");
|
||||
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 .844c-.907 0-1.814.444-2.291 1.334l-.002.002-5.178 9.697C-.45 13.704.928 16.002 3 16h10c2.072.002 3.45-2.296 2.47-4.123L10.294 2.18l-.002-.002C9.814 1.288 8.907.844 8 .844M8 2.77c.201 0 .403.118.53.353l5.177 9.697.002.002c.307.573-.057 1.18-.707 1.178H2.998c-.65.001-1.014-.605-.707-1.178l.002-.002 5.18-9.699c.126-.233.327-.351.527-.351M8 5c-.554 0-1 .446-1 1v3c0 .554.446 1 1 1s1-.446 1-1V6c0-.554-.446-1-1-1m0 6a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1'/%3E%3C/svg%3E");
|
||||
-webkit-mask-image: $icon;
|
||||
mask-image: $icon;
|
||||
background-color: var(--yellow-fg);
|
||||
|
||||
@ -8,17 +8,17 @@
|
||||
--fg-muted-4: rgba(0, 0, 0, 0.5);
|
||||
--fg-muted-5: rgba(0, 0, 0, 0.6);
|
||||
--nav-bg: rgba(242, 242, 242, 0.7);
|
||||
--blue-bg: rgba(53, 132, 228, 0.1);
|
||||
--blue-fg: rgb(53, 132, 228);
|
||||
--green-bg: rgba(38, 162, 105, 0.1);
|
||||
--green-fg: rgb(38, 162, 105);
|
||||
--purple-bg: rgba(145, 65, 172, 0.1);
|
||||
--purple-fg: rgb(145, 65, 172);
|
||||
--red-bg: rgba(224, 27, 36, 0.1);
|
||||
--red-fg: rgb(224, 27, 36);
|
||||
--yellow-bg: rgba(156, 110, 3, 0.1);
|
||||
--yellow-fg: rgb(156, 110, 3);
|
||||
--boosts-bg: rgba(145, 65, 172, 0.1);
|
||||
--boosts-fg: rgb(145, 65, 172);
|
||||
--faves-bg: rgba(229, 165, 10, 0.1);
|
||||
--faves-fg: rgb(229, 165, 10);
|
||||
--star-featured: rgba(229, 165, 10, 0.15);
|
||||
--star-featured: rgba(156, 110, 3, 0.15);
|
||||
|
||||
// VARIABLES
|
||||
--active: 0.9;
|
||||
@ -61,17 +61,17 @@
|
||||
--fg-muted-4: rgba(255, 255, 255, 0.5);
|
||||
--fg-muted-5: rgba(255, 255, 255, 0.6);
|
||||
--nav-bg: rgba(25, 25, 25, 0.7);
|
||||
--blue-bg: rgba(153, 193, 241, 0.1);
|
||||
--blue-fg: rgb(153, 193, 241);
|
||||
--green-bg: rgba(143, 240, 164, 0.1);
|
||||
--green-fg: rgb(143, 240, 164);
|
||||
--purple-bg: rgba(220, 138, 221, 0.1);
|
||||
--purple-fg: rgb(220, 138, 221);
|
||||
--red-bg: rgba(226, 97, 81, 0.1);
|
||||
--red-fg: rgb(246, 97, 81);
|
||||
--yellow-bg: rgba(248, 228, 92, 0.1);
|
||||
--yellow-fg: rgb(248, 228, 92);
|
||||
--boosts-bg: rgba(220, 138, 221, 0.1);
|
||||
--boosts-fg: rgb(220, 138, 221);
|
||||
--faves-bg: rgba(249, 240, 107, 0.1);
|
||||
--faves-fg: rgb(249, 240, 107);
|
||||
--star-featured: rgba(249, 240, 107, 0.05);
|
||||
--star-featured: rgba(248, 228, 92, 0.05);
|
||||
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
|
||||
@use "variables";
|
||||
|
||||
@use "alerts";
|
||||
@use "article-list";
|
||||
@use "buttons";
|
||||
@use "code";
|
||||
|
||||
Reference in New Issue
Block a user