59 lines
1.2 KiB
CSS
59 lines
1.2 KiB
CSS
|
.shiki .line {
|
||
|
|
--_bg-opacity: var(--bg-opacity, 1);
|
||
|
|
--c-red-soft: rgba(244, 63, 94, var(--_bg-opacity));
|
||
|
|
--c-orange-soft: rgba(255, 217, 112, var(--_bg-opacity));
|
||
|
|
--c-green-soft: rgba(16, 185, 129, var(--_bg-opacity));
|
||
|
|
|
||
|
|
&:where(.error, .warning, .diff) {
|
||
|
|
--bg-opacity: 0.2;
|
||
|
|
--_bg-color: var(--bg-color, orangered);
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
inline-size: 100%;
|
||
|
|
background-color: var(--_bg-color);
|
||
|
|
}
|
||
|
|
&::after {
|
||
|
|
position: absolute;
|
||
|
|
inset-inline-end: 4px;
|
||
|
|
inset-block-start: 50%;
|
||
|
|
translate: 0 -50%;
|
||
|
|
}
|
||
|
|
&.error {
|
||
|
|
--bg-color: var(--c-red-soft);
|
||
|
|
&::after {
|
||
|
|
content: '🔴';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.warning {
|
||
|
|
--bg-color: var(--c-orange-soft);
|
||
|
|
&::after {
|
||
|
|
content: '🟠';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.diff {
|
||
|
|
&.remove {
|
||
|
|
--bg-color: var(--c-red-soft);
|
||
|
|
opacity: 0.7;
|
||
|
|
&::after {
|
||
|
|
content: '-';
|
||
|
|
color: red;
|
||
|
|
font-size: var(--size-0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.add {
|
||
|
|
--bg-color: var(--c-green-soft);
|
||
|
|
&::after {
|
||
|
|
content: '+';
|
||
|
|
font-size: var(--size-0);
|
||
|
|
color: greenyellow;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.highlighted-word {
|
||
|
|
margin-inline: 1px;
|
||
|
|
padding: 1px;
|
||
|
|
outline: 1px solid grey;
|
||
|
|
border-radius: 2px;
|
||
|
|
}
|
||
|
|
}
|