From 68b0ccfcf65f37931fda1fc2f4cdf074014ebf1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Sun, 29 May 2022 09:38:16 +0200 Subject: [PATCH] boxes: use introduces --VARIABLE-BOX-* variables --- static/css/ie.css | 5 +++ static/css/theme.css | 69 +----------------------------- static/css/variant.css | 96 ++++++++++++++---------------------------- 3 files changed, 38 insertions(+), 132 deletions(-) diff --git a/static/css/ie.css b/static/css/ie.css index f9ac8361a0..eec9cffd1a 100644 --- a/static/css/ie.css +++ b/static/css/ie.css @@ -185,11 +185,16 @@ color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-RED-TEXT-color) */ } + div.box.transparent { + background-color: transparent; + } + div.box.transparent > .box-label { color: #4a4a4a; /* var(--MAIN-TITLES-TEXT-color) */ } div.box.transparent > .box-content { + background-color: transparent; color: #101010; /* var(--MAIN-TEXT-color) */ } diff --git a/static/css/theme.css b/static/css/theme.css index a75fcf2816..ae0927acc1 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -457,8 +457,9 @@ blockquote cite { 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); + --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color); -webkit-print-color-adjust: exact; color-adjust: exact; margin: 1.5rem 0; @@ -484,72 +485,6 @@ div.box > .box-content > :last-child { margin-bottom: 1rem; } -div.box.info { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color); -} - -div.box.warning { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color); -} - -div.box.note { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color); -} - -div.box.tip { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color); -} - -div.box.primary { - --VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color); -} - -div.box.secondary { - --VARIABLE-BOX-color: var(--INTERNAL-SECONDARY-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color); -} - -div.box.blue { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color); -} - -div.box.green { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color); -} - -div.box.grey { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color); -} - -div.box.orange { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-ORANGE-color); -} - -div.box.red { - --VARIABLE-BOX-color: var(--INTERNAL-BOX-RED-color); - --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color); -} - -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; -} - -div.box.transparent > .box-content { - background-color: transparent; -} - /* attachments shortcode */ div.attachments .box-content { diff --git a/static/css/variant.css b/static/css/variant.css index dc225540fc..128e29eef3 100644 --- a/static/css/variant.css +++ b/static/css/variant.css @@ -194,112 +194,78 @@ h6 { } div.box { - background-color: var(--INTERNAL-BOX-NEUTRAL-color); + background-color: var(--VARIABLE-BOX-color); } div.box > .box-label { - color: var(--INTERNAL-BOX-CAPTION-color); + color: var(--VARIABLE-BOX-CAPTION-color); } div.box > .box-content { - background-color: var(--INTERNAL-BOX-BG-color); - color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color); + background-color: var(--VARIABLE-BOX-BG-color); + color: var(--VARIABLE-BOX-TEXT-color); } div.box.info { - background-color: var(--INTERNAL-BOX-INFO-color); -} - -div.box.info > .box-content { - color: var(--INTERNAL-BOX-INFO-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color); } div.box.warning { - background-color: var(--INTERNAL-BOX-WARNING-color); -} - -div.box.warning > .box-content { - color: var(--INTERNAL-BOX-WARNING-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color); } div.box.note { - background-color: var(--INTERNAL-BOX-NOTE-color); -} - -div.box.note > .box-content { - color: var(--INTERNAL-BOX-NOTE-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color); } div.box.tip { - background-color: var(--INTERNAL-BOX-TIP-color); -} - -div.box.tip > .box-content { - color: var(--INTERNAL-BOX-TIP-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color); } div.box.primary { - background-color: var(--INTERNAL-PRIMARY-color); -} - -div.box.primary > .box-content { - color: var(--INTERNAL-MAIN-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color); } div.box.secondary { - background-color: var(--INTERNAL-SECONDARY-color); -} - -div.box.secondary > .box-content { - color: var(--INTERNAL-MAIN-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-SECONDARY-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color); } div.box.blue { - background-color: var(--INTERNAL-BOX-BLUE-color); -} - -div.box.blue > .box-content { - color: var(--INTERNAL-BOX-BLUE-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color); } div.box.green { - background-color: var(--INTERNAL-BOX-GREEN-color); -} - -div.box.green > .box-content { - color: var(--INTERNAL-BOX-GREEN-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color); } div.box.grey { - background-color: var(--INTERNAL-BOX-GREY-color); -} - -div.box.grey > .box-content { - color: var(--INTERNAL-BOX-GREY-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color); } div.box.orange { - background-color: var(--INTERNAL-BOX-ORANGE-color); -} - -div.box.orange > .box-content { - color: var(--INTERNAL-BOX-ORANGE-TEXT-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-ORANGE-color); } div.box.red { - background-color: var(--INTERNAL-BOX-RED-color); + --VARIABLE-BOX-color: var(--INTERNAL-BOX-RED-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color); } -div.box.red > .box-content { - color: var(--INTERNAL-BOX-RED-TEXT-color); -} - -div.box.transparent > .box-label { - color: var(--INTERNAL-MAIN-TITLES-TEXT-color); -} - -div.box.transparent > .box-content { - color: var(--INTERNAL-MAIN-TEXT-color); +div.box.transparent { + --VARIABLE-BOX-color: transparent; + --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-MAIN-TITLES-TEXT-color); + --VARIABLE-BOX-BG-color: transparent; + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color); } code,