notice: make boxes more prominent #535

This commit is contained in:
Sören Weber 2023-05-23 19:55:13 +02:00
parent 7959ed7e2f
commit e362346834
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
4 changed files with 17 additions and 3 deletions

View file

@ -153,9 +153,6 @@ mark {
.mermaid > svg:hover { .mermaid > svg:hover {
border-color: transparent; border-color: transparent;
} }
div.box {
border: 1px solid #ddd;
}
div.box > .box-content { div.box > .box-content {
background-color: white; background-color: white;
} }

View file

@ -335,6 +335,7 @@
div.box { div.box {
background-color: rgba( 128, 128, 128, 1 ); /* var(--INTERNAL-BOX-NEUTRAL-color) */ background-color: rgba( 128, 128, 128, 1 ); /* var(--INTERNAL-BOX-NEUTRAL-color) */
border-color: rgba( 128, 128, 128, 1 ); /* var(--INTERNAL-BOX-NEUTRAL-color) */
} }
div.box > .box-label { div.box > .box-label {
@ -348,6 +349,7 @@
div.box.info { div.box.info {
background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-INFO-color) */ background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-INFO-color) */
border-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-INFO-color) */
} }
div.box.info > .box-content { div.box.info > .box-content {
@ -356,6 +358,7 @@
div.box.warning { div.box.warning {
background-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-WARNING-color) */ background-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-WARNING-color) */
border-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-WARNING-color) */
} }
div.box.warning > .box-content { div.box.warning > .box-content {
@ -364,6 +367,7 @@
div.box.note { div.box.note {
background-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-NOTE-color) */ background-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-NOTE-color) */
border-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-NOTE-color) */
} }
div.box.note > .box-content { div.box.note > .box-content {
@ -372,6 +376,7 @@
div.box.tip { div.box.tip {
background-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-TIP-color) */ background-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-TIP-color) */
border-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-TIP-color) */
} }
div.box.tip > .box-content { div.box.tip > .box-content {
@ -380,6 +385,7 @@
div.box.primary { div.box.primary {
background-color: #7dc903; /* var(--INTERNAL-PRIMARY-color) */ background-color: #7dc903; /* var(--INTERNAL-PRIMARY-color) */
border-color: #7dc903; /* var(--INTERNAL-PRIMARY-color) */
} }
div.box.primary > .box-content { div.box.primary > .box-content {
@ -388,6 +394,7 @@
div.box.secondary { div.box.secondary {
background-color: #486ac9; /* var(--INTERNAL-SECONDARY-color) */ background-color: #486ac9; /* var(--INTERNAL-SECONDARY-color) */
border-color: #486ac9; /* var(--INTERNAL-SECONDARY-color) */
} }
div.box.secondary > .box-content { div.box.secondary > .box-content {
@ -396,6 +403,7 @@
div.box.accent { div.box.accent {
background-color: #ff88ff; /* var(--INTERNAL-ACCENT-color) */ background-color: #ff88ff; /* var(--INTERNAL-ACCENT-color) */
border-color: #ff88ff; /* var(--INTERNAL-ACCENT-color) */
} }
div.box.accent > .box-content { div.box.accent > .box-content {
@ -404,6 +412,7 @@
div.box.blue { div.box.blue {
background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-BLUE-color) */ background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-BLUE-color) */
border-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-BLUE-color) */
} }
div.box.blue > .box-content { div.box.blue > .box-content {
@ -412,6 +421,7 @@
div.box.green { div.box.green {
background-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-GREEN-color) */ background-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-GREEN-color) */
border-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-GREEN-color) */
} }
div.box.green > .box-content { div.box.green > .box-content {
@ -420,6 +430,7 @@
div.box.grey { div.box.grey {
background-color: rgba( 128, 128, 128, 1 ); /* var(--INTERNAL-BOX-GREY-color) */ background-color: rgba( 128, 128, 128, 1 ); /* var(--INTERNAL-BOX-GREY-color) */
border-color: rgba( 128, 128, 128, 1 ); /* var(--INTERNAL-BOX-GREY-color) */
} }
div.box.grey > .box-content { div.box.grey > .box-content {
@ -428,6 +439,7 @@
div.box.orange { div.box.orange {
background-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-ORANGE-color) */ background-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-ORANGE-color) */
border-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-ORANGE-color) */
} }
div.box.orange > .box-content { div.box.orange > .box-content {
@ -436,6 +448,7 @@
div.box.red { div.box.red {
background-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-RED-color) */ background-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-RED-color) */
border-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-RED-color) */
} }
div.box.red > .box-content { div.box.red > .box-content {
@ -444,6 +457,7 @@
div.box.transparent { div.box.transparent {
background-color: transparent; background-color: transparent;
border-color: transparent;
} }
div.box.transparent > .box-label { div.box.transparent > .box-label {

View file

@ -423,6 +423,8 @@ blockquote cite {
div.box { div.box {
margin: 1.5rem 0; margin: 1.5rem 0;
border-style: solid;
border-width: 1px;
} }
div.box > .box-label { div.box > .box-label {

View file

@ -133,6 +133,7 @@ h6 {
div.box { div.box {
background-color: var(--VARIABLE-BOX-color); background-color: var(--VARIABLE-BOX-color);
border-color: var(--VARIABLE-BOX-color);
} }
div.box > .box-label { div.box > .box-label {