From e36234683464af2f398f1391684f7e013f14c062 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Tue, 23 May 2023 19:55:13 +0200
Subject: [PATCH] notice: make boxes more prominent #535

---
 static/css/format-print.css |  3 ---
 static/css/ie.css           | 14 ++++++++++++++
 static/css/theme.css        |  2 ++
 static/css/variant.css      |  1 +
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/static/css/format-print.css b/static/css/format-print.css
index 160f1d973c..7ccf6aac41 100644
--- a/static/css/format-print.css
+++ b/static/css/format-print.css
@@ -153,9 +153,6 @@ mark {
 .mermaid > svg:hover {
     border-color: transparent;
 }
-div.box {
-    border: 1px solid #ddd;
-}
 div.box > .box-content {
     background-color: white;
 }
diff --git a/static/css/ie.css b/static/css/ie.css
index 4dd1ad0532..456d153fc5 100644
--- a/static/css/ie.css
+++ b/static/css/ie.css
@@ -335,6 +335,7 @@
 
 	div.box {
 		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 {
@@ -348,6 +349,7 @@
 
 	div.box.info {
 		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 {
@@ -356,6 +358,7 @@
 
 	div.box.warning {
 		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 {
@@ -364,6 +367,7 @@
 
 	div.box.note {
 		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 {
@@ -372,6 +376,7 @@
 
 	div.box.tip {
 		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 {
@@ -380,6 +385,7 @@
 
 	div.box.primary {
 		background-color: #7dc903; /* var(--INTERNAL-PRIMARY-color) */
+		border-color: #7dc903; /* var(--INTERNAL-PRIMARY-color) */
 	}
 
 	div.box.primary > .box-content {
@@ -388,6 +394,7 @@
 
 	div.box.secondary {
 		background-color: #486ac9; /* var(--INTERNAL-SECONDARY-color) */
+		border-color: #486ac9; /* var(--INTERNAL-SECONDARY-color) */
 	}
 
 	div.box.secondary > .box-content {
@@ -396,6 +403,7 @@
 
 	div.box.accent {
 		background-color: #ff88ff; /* var(--INTERNAL-ACCENT-color) */
+		border-color: #ff88ff; /* var(--INTERNAL-ACCENT-color) */
 	}
 
 	div.box.accent > .box-content {
@@ -404,6 +412,7 @@
 
 	div.box.blue {
 		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 {
@@ -412,6 +421,7 @@
 
 	div.box.green {
 		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 {
@@ -420,6 +430,7 @@
 
 	div.box.grey {
 		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 {
@@ -428,6 +439,7 @@
 
 	div.box.orange {
 		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 {
@@ -436,6 +448,7 @@
 
 	div.box.red {
 		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 {
@@ -444,6 +457,7 @@
 
 	div.box.transparent {
 		background-color: transparent;
+		border-color: transparent;
 	}
 
 	div.box.transparent > .box-label {
diff --git a/static/css/theme.css b/static/css/theme.css
index 525d5de5e4..9f3abc4cb6 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -423,6 +423,8 @@ blockquote cite {
 
 div.box {
     margin: 1.5rem 0;
+    border-style: solid;
+    border-width: 1px;
 }
 
 div.box > .box-label {
diff --git a/static/css/variant.css b/static/css/variant.css
index 9cc30a1a79..adfb26226a 100644
--- a/static/css/variant.css
+++ b/static/css/variant.css
@@ -133,6 +133,7 @@ h6 {
 
 div.box {
     background-color: var(--VARIABLE-BOX-color);
+    border-color: var(--VARIABLE-BOX-color);
 }
 
 div.box > .box-label {