82 lines
1.3 KiB
SCSS
82 lines
1.3 KiB
SCSS
|
blockquote {
|
||
|
|
&.note {
|
||
|
|
border-inline-start: 0.25rem solid var(--blue-fg);
|
||
|
|
|
||
|
|
.alert-title,
|
||
|
|
li::marker {
|
||
|
|
color: var(--blue-fg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.alert-title .icon {
|
||
|
|
-webkit-mask-image: var(--icon-info);
|
||
|
|
mask-image: var(--icon-info);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.tip {
|
||
|
|
border-inline-start: 0.25rem solid var(--green-fg);
|
||
|
|
|
||
|
|
.alert-title,
|
||
|
|
li::marker {
|
||
|
|
color: var(--green-fg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.alert-title .icon {
|
||
|
|
-webkit-mask-image: var(--icon-lightbulb);
|
||
|
|
mask-image: var(--icon-lightbulb);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.important {
|
||
|
|
border-inline-start: 0.25rem solid var(--purple-fg);
|
||
|
|
|
||
|
|
.alert-title,
|
||
|
|
li::marker {
|
||
|
|
color: var(--purple-fg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.alert-title .icon {
|
||
|
|
-webkit-mask-image: var(--icon-important);
|
||
|
|
mask-image: var(--icon-important);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.warning {
|
||
|
|
border-inline-start: 0.25rem solid var(--yellow-fg);
|
||
|
|
|
||
|
|
.alert-title,
|
||
|
|
li::marker {
|
||
|
|
color: var(--yellow-fg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.alert-title .icon {
|
||
|
|
-webkit-mask-image: var(--icon-warning);
|
||
|
|
mask-image: var(--icon-warning);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.caution {
|
||
|
|
border-inline-start: 0.25rem solid var(--red-fg);
|
||
|
|
|
||
|
|
.alert-title,
|
||
|
|
li::marker {
|
||
|
|
color: var(--red-fg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.alert-title .icon {
|
||
|
|
-webkit-mask-image: var(--icon-caution);
|
||
|
|
mask-image: var(--icon-caution);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.alert-title {
|
||
|
|
margin-block-end: -0.75rem;
|
||
|
|
font-weight: bold;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
vertical-align: -0.125em;
|
||
|
|
margin-inline-end: 0.25rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|