196 lines
4.4 KiB
SCSS
196 lines
4.4 KiB
SCSS
.notices {
|
||
position: relative;
|
||
border-radius: .125rem;
|
||
color: #fff;
|
||
margin: 2rem 0;
|
||
padding: .3rem 0.5rem .3rem 2rem;
|
||
font-size: 0.95rem;
|
||
|
||
a {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
> table {
|
||
table-layout:fixed;
|
||
width: 100%;
|
||
margin: 10px 0;
|
||
border-spacing: 0;
|
||
}
|
||
|
||
&.warning {
|
||
border-top: 30px solid #f1b37e;
|
||
background: #fefaf5;
|
||
color: rgba(150, 90, 38, 0.995) !important;
|
||
|
||
&::before {
|
||
position: absolute;
|
||
content: '⚠️ Warning';
|
||
font-family: $title-font;
|
||
top: -26.5px;
|
||
left: 0.4rem;
|
||
height: 100%;
|
||
}
|
||
|
||
a {
|
||
font-weight: bold;
|
||
color: rgba(134, 74, 22, 0.995);
|
||
@include themify($themes) {
|
||
@include on-event {
|
||
color: themed('link-hover');
|
||
}
|
||
}
|
||
}
|
||
|
||
> table {
|
||
thead {
|
||
background: #f1b37e;
|
||
}
|
||
|
||
th {
|
||
color: rgba(134, 74, 22, 0.995);
|
||
}
|
||
|
||
th, td {
|
||
padding: 5px 15px;
|
||
border: 1px double rgba(166, 106, 54, 0.45);
|
||
}
|
||
}
|
||
|
||
p > code, li > code, td > code {
|
||
background-color: darken(#fefaf5, 6%);
|
||
}
|
||
}
|
||
|
||
&.error {
|
||
border-top: 30px solid #d58181;
|
||
background: #fbeded;
|
||
color: rgba(132, 56, 56, 0.995) !important;
|
||
|
||
&::before {
|
||
position: absolute;
|
||
content: '❌ Error';
|
||
font-family: $title-font;
|
||
top: -26.5px;
|
||
left: 0.4rem;
|
||
height: 100%;
|
||
}
|
||
|
||
a {
|
||
font-weight: bold;
|
||
color: rgba(116, 40, 40, 0.995);
|
||
@include themify($themes) {
|
||
@include on-event {
|
||
color: themed('link-hover');
|
||
}
|
||
}
|
||
}
|
||
|
||
> table {
|
||
thead {
|
||
background: #d58181;
|
||
}
|
||
|
||
th {
|
||
color: rgba(116, 40, 40, 0.995);
|
||
}
|
||
|
||
th, td {
|
||
padding: 5px 15px;
|
||
border: 1px double rgba(148, 72, 72, 0.45);
|
||
}
|
||
}
|
||
|
||
p > code, li > code, td > code {
|
||
background-color: darken(#fbeded, 6%);
|
||
}
|
||
}
|
||
|
||
&.info {
|
||
border-top: 30px solid #6bb1e0;
|
||
background: #e6f3fb;
|
||
color: rgba(47, 103, 141, 0.995) !important;
|
||
|
||
&::before {
|
||
position: absolute;
|
||
content: 'ℹ️ Info';
|
||
font-family: $title-font;
|
||
top: -26.5px;
|
||
left: 0.4rem;
|
||
height: 100%;
|
||
}
|
||
|
||
a {
|
||
font-weight: bold;
|
||
color: rgba(31, 87, 125, 0.995);
|
||
@include themify($themes) {
|
||
@include on-event {
|
||
color: themed('link-hover');
|
||
}
|
||
}
|
||
}
|
||
|
||
> table {
|
||
thead {
|
||
background: #6bb1e0;
|
||
}
|
||
|
||
th {
|
||
color: rgba(31, 87, 125, 0.995);
|
||
}
|
||
|
||
th, td {
|
||
padding: 5px 15px;
|
||
border: 1px double rgba(63, 119, 157, 0.45);
|
||
}
|
||
}
|
||
|
||
p > code, li > code, td > code {
|
||
background-color: darken(#e6f3fb, 6%);
|
||
}
|
||
}
|
||
|
||
&.success {
|
||
border-top: 30px solid #84c578;
|
||
background: #e8f7e6;
|
||
color: rgba(72, 125, 63, 0.995) !important;
|
||
|
||
&::before {
|
||
position: absolute;
|
||
content: '✔️ Success';
|
||
font-family: $title-font;
|
||
top: -26.5px;
|
||
left: 0.4rem;
|
||
height: 100%;
|
||
}
|
||
|
||
a {
|
||
font-weight: bold;
|
||
color: rgba(56, 109, 47, 0.995);
|
||
@include themify($themes) {
|
||
@include on-event {
|
||
color: themed('link-hover');
|
||
}
|
||
}
|
||
}
|
||
|
||
> table {
|
||
thead {
|
||
background: #84c578;
|
||
}
|
||
|
||
th {
|
||
color: rgba(56, 109, 47, 0.995);
|
||
}
|
||
|
||
th, td {
|
||
padding: 5px 15px;
|
||
border: 1px double rgba(82, 141, 79, 0.45);
|
||
}
|
||
}
|
||
|
||
p > code, li > code, td > code {
|
||
background-color: darken(#e8f7e6, 6%);
|
||
}
|
||
}
|
||
}
|