143 lines
2.5 KiB
SCSS
143 lines
2.5 KiB
SCSS
.custom-container {
|
|
transition:
|
|
color var(--t-color),
|
|
border-color var(--t-color),
|
|
background-color var(--t-color);
|
|
|
|
.custom-container-title {
|
|
font-weight: 600;
|
|
|
|
&:not(:only-child) {
|
|
margin-bottom: -0.4rem;
|
|
}
|
|
}
|
|
|
|
&.tip,
|
|
&.warning,
|
|
&.danger {
|
|
margin: 1rem 0;
|
|
padding: 0.1rem 1.5rem;
|
|
border-left-width: 0.5rem;
|
|
border-left-style: solid;
|
|
}
|
|
|
|
&.tip {
|
|
border-color: var(--c-tip);
|
|
background-color: var(--c-tip-bg);
|
|
color: var(--c-tip-text);
|
|
|
|
.custom-container-title {
|
|
color: var(--c-tip-title);
|
|
}
|
|
|
|
a {
|
|
color: var(--c-tip-text-accent);
|
|
}
|
|
|
|
code {
|
|
background-color: var(--c-bg-dark);
|
|
}
|
|
}
|
|
|
|
&.warning {
|
|
--external-link-icon-color: var(--c-warning-text-quote);
|
|
|
|
border-color: var(--c-warning);
|
|
background-color: var(--c-warning-bg);
|
|
color: var(--c-warning-text);
|
|
|
|
.custom-container-title {
|
|
color: var(--c-warning-title);
|
|
}
|
|
|
|
a {
|
|
color: var(--c-warning-text-accent);
|
|
}
|
|
|
|
blockquote {
|
|
border-left-color: var(--c-warning-border-dark);
|
|
color: var(--c-warning-text-quote);
|
|
}
|
|
|
|
code {
|
|
background-color: var(--c-warning-bg-light);
|
|
color: var(--c-warning-text-light);
|
|
}
|
|
|
|
details {
|
|
background-color: var(--c-warning-details-bg);
|
|
|
|
code {
|
|
background-color: var(--c-warning-bg-lighter);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.danger {
|
|
--external-link-icon-color: var(--c-danger-text-quote);
|
|
|
|
border-color: var(--c-danger);
|
|
background-color: var(--c-danger-bg);
|
|
color: var(--c-danger-text);
|
|
|
|
.custom-container-title {
|
|
color: var(--c-danger-title);
|
|
}
|
|
|
|
a {
|
|
color: var(--c-danger-text-accent);
|
|
}
|
|
|
|
blockquote {
|
|
border-left-color: var(--c-danger-border-dark);
|
|
color: var(--c-danger-text-quote);
|
|
}
|
|
|
|
code {
|
|
background-color: var(--c-danger-bg-light);
|
|
color: var(--c-danger-text-light);
|
|
}
|
|
|
|
details {
|
|
background-color: var(--c-danger-details-bg);
|
|
|
|
code {
|
|
background-color: var(--c-danger-bg-lighter);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.details {
|
|
position: relative;
|
|
|
|
display: block;
|
|
|
|
margin: 1.6em 0;
|
|
padding: 1.6em;
|
|
border-radius: 2px;
|
|
|
|
background-color: var(--c-details-bg);
|
|
|
|
code {
|
|
background-color: var(--c-bg-darker);
|
|
}
|
|
|
|
h4 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
figure,
|
|
p {
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
summary {
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|