From 8c1721fc351dd4d799ff074c6dd9694a1740ea9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 7 Jul 2021 08:32:06 +0200 Subject: [PATCH 1/5] Remove the old codeblock code MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_EventTile.scss | 7 ----- res/themes/dark/css/_dark.scss | 33 -------------------- res/themes/legacy-dark/css/_legacy-dark.scss | 15 ++------- 3 files changed, 2 insertions(+), 53 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 27a83e58f8..e48f378d9d 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -477,8 +477,6 @@ $hover-select-border: 4px; pre, code { font-family: $monospace-font-family !important; - // deliberate constants as we're behind an invert filter - color: #333; } pre { @@ -488,11 +486,6 @@ $hover-select-border: 4px; overflow-x: overlay; overflow-y: visible; } - - code { - // deliberate constants as we're behind an invert filter - background-color: #f8f8f8; - } } .mx_EventTile_lineNumbers { diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 81fd3c892a..2aca4c767e 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -119,8 +119,6 @@ $voipcall-plinth-color: #394049; $theme-button-bg-color: #e3e8f0; $dialpad-button-bg-color: #6F7882; -; - $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons $roomlist-filter-active-bg-color: $bg-color; @@ -274,24 +272,7 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28); } // markdown overrides: -.mx_EventTile_content .markdown-body pre:hover { - border-color: #808080 !important; // inverted due to rules below - scrollbar-color: rgba(0, 0, 0, 0.2) transparent; // copied from light theme due to inversion below - // the code above works only in Firefox, this is for other browsers - // see https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color - &::-webkit-scrollbar-thumb { - background-color: rgba(0, 0, 0, 0.2); // copied from light theme due to inversion below - } -} .mx_EventTile_content .markdown-body { - pre, code { - filter: invert(1); - } - - pre code { - filter: none; - } - table { tr { background-color: #000000; @@ -301,18 +282,4 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28); background-color: #080808; } } - - blockquote { - color: #919191; - } -} - -// diff highlight colors -// intentionally swapped to avoid inversion -.hljs-addition { - background: #fdd; -} - -.hljs-deletion { - background: #dfd; } diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index df01efbe1e..fa56d24c81 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -118,7 +118,7 @@ $voipcall-plinth-color: #394049; $theme-button-bg-color: #e3e8f0; $dialpad-button-bg-color: #6F7882; -; + $roomlist-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons $roomlist-filter-active-bg-color: $roomlist-button-bg-color; @@ -249,7 +249,7 @@ $composer-shadow-color: tranparent; @define-mixin mx_DialogButton_secondary { // flip colours for the secondary ones font-weight: 600; - border: 1px solid $accent-color ! important; + border: 1px solid $accent-color !important; color: $accent-color; background-color: $button-secondary-bg-color; } @@ -267,18 +267,7 @@ $composer-shadow-color: tranparent; } // markdown overrides: -.mx_EventTile_content .markdown-body pre:hover { - border-color: #808080 !important; // inverted due to rules below -} .mx_EventTile_content .markdown-body { - pre, code { - filter: invert(1); - } - - pre code { - filter: none; - } - table { tr { background-color: #000000; From 9d12439ee71a14df0ce73602dfad7ce145d6f91a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 7 Jul 2021 08:42:16 +0200 Subject: [PATCH 2/5] Give codeblocks a background color MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/rooms/_EventTile.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index e48f378d9d..55f73c0315 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -477,6 +477,7 @@ $hover-select-border: 4px; pre, code { font-family: $monospace-font-family !important; + background-color: $header-panel-bg-color; } pre { From f8307a92d88b84d986e8ef488538cf91f8c4fb48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 7 Jul 2021 09:22:12 +0200 Subject: [PATCH 3/5] Use atom-one-dark for dark theme MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/themes/dark/css/_dark.scss | 5 +++++ res/themes/dark/css/dark.scss | 1 + res/themes/legacy-dark/css/_legacy-dark.scss | 11 +++-------- res/themes/legacy-dark/css/legacy-dark.scss | 1 + 4 files changed, 10 insertions(+), 8 deletions(-) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 2aca4c767e..f5b23d2c3d 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -283,3 +283,8 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28); } } } + +// highlight.js overrides +.hljs-tag { + color: inherit; +} diff --git a/res/themes/dark/css/dark.scss b/res/themes/dark/css/dark.scss index f9695018e4..600cfd528a 100644 --- a/res/themes/dark/css/dark.scss +++ b/res/themes/dark/css/dark.scss @@ -9,3 +9,4 @@ @import "_dark.scss"; @import "../../light/css/_mods.scss"; @import "../../../../res/css/_components.scss"; +@import url("highlight.js/styles/atom-one-dark.css"); diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index fa56d24c81..ec4c3094de 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -279,12 +279,7 @@ $composer-shadow-color: tranparent; } } -// diff highlight colors -// intentionally swapped to avoid inversion -.hljs-addition { - background: #fdd; -} - -.hljs-deletion { - background: #dfd; +// highlight.js overrides: +.hljs-tag { + color: inherit; } diff --git a/res/themes/legacy-dark/css/legacy-dark.scss b/res/themes/legacy-dark/css/legacy-dark.scss index 2a4d432d26..840794f7c0 100644 --- a/res/themes/legacy-dark/css/legacy-dark.scss +++ b/res/themes/legacy-dark/css/legacy-dark.scss @@ -4,3 +4,4 @@ @import "../../legacy-light/css/_legacy-light.scss"; @import "_legacy-dark.scss"; @import "../../../../res/css/_components.scss"; +@import url("highlight.js/styles/atom-one-dark.css"); From 2cd2015e3673cf21a18ac88aba6eb0659a64dbec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 7 Jul 2021 10:24:26 +0200 Subject: [PATCH 4/5] Use atom-one-light for light theme MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/themes/legacy-light/css/legacy-light.scss | 1 + res/themes/light/css/light.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/res/themes/legacy-light/css/legacy-light.scss b/res/themes/legacy-light/css/legacy-light.scss index e39a1765f3..347d240fc6 100644 --- a/res/themes/legacy-light/css/legacy-light.scss +++ b/res/themes/legacy-light/css/legacy-light.scss @@ -3,3 +3,4 @@ @import "_fonts.scss"; @import "_legacy-light.scss"; @import "../../../../res/css/_components.scss"; +@import url("highlight.js/styles/atom-one-light.css"); diff --git a/res/themes/light/css/light.scss b/res/themes/light/css/light.scss index f31ce5c139..4e912bc756 100644 --- a/res/themes/light/css/light.scss +++ b/res/themes/light/css/light.scss @@ -4,3 +4,4 @@ @import "_light.scss"; @import "_mods.scss"; @import "../../../../res/css/_components.scss"; +@import url("highlight.js/styles/atom-one-light.css"); From b5bad0cc237a6cf22ffe53cbd0d66eaf3919f38b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 7 Jul 2021 10:28:29 +0200 Subject: [PATCH 5/5] Add comments MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/themes/dark/css/_dark.scss | 2 +- res/themes/legacy-dark/css/_legacy-dark.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index f5b23d2c3d..57cbc7efa9 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -286,5 +286,5 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28); // highlight.js overrides .hljs-tag { - color: inherit; + color: inherit; // Without this they'd be weirdly blue which doesn't match the theme } diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index ec4c3094de..555ef4f66c 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -281,5 +281,5 @@ $composer-shadow-color: tranparent; // highlight.js overrides: .hljs-tag { - color: inherit; + color: inherit; // Without this they'd be weirdly blue which doesn't match the theme }