website/resources/admonitions.css

/* Universal configuration */
.note,
.tip,
.important,
.warning,
.caution {
    display: flex;
    flex-direction: row;
    width: 66%;
    box-sizing: border-box;
    background-color: var(--bg-1);
    color: var(--fg-1);
    padding: 0.5rem;
    border-radius: 1rem;
    border: solid 0.35rem;
    margin-top: var(--box-margin-vert);
    margin-bottom: var(--box-margin-vert);
}
.note .title,
.tip .title,
.important .title,
.warning .title,
.caution .title {
    align-self: center;
}
.note .title p,
.tip .title p,
.important .title p,
.warning .title p,
.caution .title p {
    font-size: 0;
}
.note .title p::before,
.tip .title p::before,
.important .title p::before,
.warning .title p::before,
.caution .title p::before {
    font-family: 'boxicons' !important;
    font-size: 4rem;
}

/* Notes */
.note {
    border-color: var(--blue);
}
.note .title p::before {
    content: "\eb21";
    color: var(--blue);
}
/* Tips */
.tip {
    border-color: var(--green);
}
.tip .title p::before {
    content: "\eb0d";
    color: var(--green);
}
/* Importants */
.important {
    border-color: var(--violet);
}
.important .title p::before {
    content: "\eb0d";
    color: var(--violet);
}
/* Warnings */
.warning {
    border-color: var(--orange);
}
.warning .title p::before {
    content: "\e9a3";
    color: var(--orange);
}
/* Cautions */
.caution {
    border-color: var(--red);
}
.caution .title p::before {
    content: "\ee87";
    color: var(--red);
}