From d5e2798fa28834ee5273eb5076fe28b1585d8225 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Wed, 23 Feb 2022 10:56:17 +0100
Subject: [PATCH] variant: neon with glowing color boxes

---
 static/css/theme-neon.css | 34 +++++++++++++++++++++++-----------
 static/css/theme.css      | 24 ++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/static/css/theme-neon.css b/static/css/theme-neon.css
index 1ad4f9ee8e..d00b3f850b 100644
--- a/static/css/theme-neon.css
+++ b/static/css/theme-neon.css
@@ -151,17 +151,6 @@ body h6 {
         0 0 10px var(--INTERNAL-MAIN-TITLES-H5-color);
 }
 
-body div.box.transparent > .box-label {
-    color: #fff;
-    text-shadow:
-        0 0  1px #fff,
-        0 0  2px #fff,
-        0 0  8px #808080,
-        0 0  4px var(--INTERNAL-MAIN-TITLES-TEXT-color),
-        0 0  8px var(--INTERNAL-MAIN-TITLES-TEXT-color),
-        0 0 10px var(--INTERNAL-MAIN-TITLES-TEXT-color);
-}
-
 body #sidebar ul li.active > a {
     color: #fff;
     text-shadow:
@@ -186,3 +175,26 @@ body #sidebar a:hover {
 body .anchor {
     text-shadow: none;
 }
+
+body div.box {
+    box-shadow:
+        0 0  1px #fff,
+        0 0  2px #fff,
+        0 0  4px #808080,
+        0 0  4px var(--VARIABLE-BOX-color),
+        0 0  8px var(--VARIABLE-BOX-color);
+}
+
+body div.box > .box-label {
+    text-shadow:
+        0 0  1px #fff,
+        0 0  2px #fff,
+        0 0  4px #808080,
+        0 0  4px var(--VARIABLE-BOX-CAPTION-color),
+        0 0  8px var(--VARIABLE-BOX-CAPTION-color);
+}
+
+body div.box.transparent {
+    box-shadow: none;
+}
+
diff --git a/static/css/theme.css b/static/css/theme.css
index 4af0642ec1..3e04ff9793 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -450,6 +450,9 @@ blockquote cite {
 /* colored boxes */
 
 div.box {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color);
+    --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-BOX-CAPTION-color);
     background-color: #808080; /* var(--INTERNAL-BOX-NEUTRAL-color) */
 	-webkit-print-color-adjust: exact;
 	color-adjust: exact;
@@ -486,6 +489,8 @@ div.box > .box-content > :last-child {
 }
 
 div.box.info {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color);
     background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-INFO-color) */
 }
 
@@ -500,6 +505,8 @@ div.box.info > .box-content {
 }
 
 div.box.warning {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color);
     background-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-WARNING-color) */
 }
 
@@ -514,6 +521,8 @@ div.box.warning > .box-content {
 }
 
 div.box.note {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color);
     background-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-NOTE-color) */
 }
 
@@ -528,6 +537,8 @@ div.box.note > .box-content {
 }
 
 div.box.tip {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color);
     background-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-TIP-color) */
 }
 
@@ -542,6 +553,8 @@ div.box.tip > .box-content {
 }
 
 div.box.blue {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color);
     background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-BLUE-color) */
 }
 
@@ -550,6 +563,8 @@ div.box.blue > .box-content {
 }
 
 div.box.green {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color);
     background-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-GREEN-color) */
 }
 
@@ -558,6 +573,8 @@ div.box.green > .box-content {
 }
 
 div.box.grey {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color);
     background-color: #808080; /* var(--INTERNAL-BOX-GREY-color) */
 }
 
@@ -566,6 +583,8 @@ div.box.grey > .box-content {
 }
 
 div.box.orange {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-ORANGE-color);
     background-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-ORANGE-color) */
 }
 
@@ -574,6 +593,8 @@ div.box.orange > .box-content {
 }
 
 div.box.red {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-RED-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color);
     background-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-RED-color) */
 }
 
@@ -582,6 +603,9 @@ div.box.red > .box-content {
 }
 
 div.box.transparent {
+    --VARIABLE-BOX-color: transparent;
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
+    --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-MAIN-TITLES-TEXT-color);
     background-color: transparent;
 }