81 lines
1.4 KiB
CSS
81 lines
1.4 KiB
CSS
/* Universal configuration */
|
|
.note,
|
|
.tip,
|
|
.important,
|
|
.warning,
|
|
.caution {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 75%;
|
|
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: 3rem;
|
|
}
|
|
|
|
/* 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: "\eaee";
|
|
color: var(--green);
|
|
}
|
|
/* Importants */
|
|
.important {
|
|
border-color: var(--violet);
|
|
}
|
|
.important .title p::before {
|
|
content: "\eb0d";
|
|
color: var(--violet);
|
|
}
|
|
/* Warnings */
|
|
.warning {
|
|
border-color: var(--yellow);
|
|
}
|
|
.warning .title p::before {
|
|
content: "\eac5";
|
|
color: var(--yellow);
|
|
}
|
|
/* Cautions */
|
|
.caution {
|
|
border-color: var(--red);
|
|
}
|
|
.caution .title p::before {
|
|
content: "\eac6";
|
|
color: var(--red);
|
|
}
|