From 11a072d1ade99239d01846e309b749cb8d57c003 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Tue, 31 Jan 2023 19:01:21 +0100 Subject: [PATCH] Fix editor broken in bhree-dark theme The error was caused by using hsl colors for variables. Solved by converting the used variables to hex values. It seems that the editor used by gitea does not support other colors than hex (transparent, hsl, rgb, etc). Issue: https: //github.com/microsoft/monaco-editor/issues/1815 --- public/css/theme-bthree-dark.css | 74 +++++++++++++++++--------------- 1 file changed, 39 insertions(+), 35 deletions(-) diff --git a/public/css/theme-bthree-dark.css b/public/css/theme-bthree-dark.css index 3350aab..7b8da66 100644 --- a/public/css/theme-bthree-dark.css +++ b/public/css/theme-bthree-dark.css @@ -32,36 +32,38 @@ --transition-speed: 150ms; /* Colors. */ + /* Some colors must be set as HEX, due to the monaco-editor no supporting + * conversion of non-hex colors. https: //github.com/microsoft/monaco-editor/issues/1815 */ color-scheme: dark; - --color-primary: hsl(204deg 90% 56%); + --color-primary: hsl(204deg, 90%, 56%); --color-primary-bg: hsla(204deg, 100%, 36%, .2); --color-primary-contrast: hsl(0, 0%, 100%); - --color-primary-dark-1: hsl(204deg 100% 54%); - --color-primary-dark-2: hsl(204deg 100% 64%); - --color-primary-dark-3: hsl(204deg 100% 70%); - --color-primary-dark-4: hsl(204deg 100% 78%); - --color-primary-dark-5: hsl(204deg 100% 84%); - --color-primary-dark-6: hsl(204deg 100% 89%); - --color-primary-dark-7: hsl(204deg 100% 94%); + --color-primary-dark-1: #14a1ff; + --color-primary-dark-2: #47b6ff; + --color-primary-dark-3: #66c2ff; + --color-primary-dark-4: #8fd2ff; + --color-primary-dark-5: #addeff; + --color-primary-dark-6: #c7e9ff; + --color-primary-dark-7: #e0f3ff; - --color-primary-light-1: hsl(204deg 100% 40%); - --color-primary-light-2: hsl(204deg 100% 36%); - --color-primary-light-3: hsl(204deg 100% 30%); - --color-primary-light-4: hsl(204deg 100% 26%); - --color-primary-light-5: hsl(204deg 100% 20%); - --color-primary-light-6: hsl(204deg 100% 16%); - --color-primary-light-7: hsl(204deg 100% 10%); + --color-primary-light-1: #007acc; + --color-primary-light-2: #006eb8; + --color-primary-light-3: #005c99; + --color-primary-light-4: #005085; + --color-primary-light-5: #003d66; + --color-primary-light-6: #003152; + --color-primary-light-7: #001f33; - --color-primary-alpha-10: hsla(204deg 100% 46% 10%); - --color-primary-alpha-20: hsla(204deg 100% 46% 20%); - --color-primary-alpha-30: hsla(204deg 100% 46% 30%); - --color-primary-alpha-40: hsla(204deg 100% 46% 40%); - --color-primary-alpha-50: hsla(204deg 100% 46% 50%); - --color-primary-alpha-60: hsla(204deg 100% 46% 60%); - --color-primary-alpha-70: hsla(204deg 100% 46% 70%); - --color-primary-alpha-80: hsla(204deg 100% 46% 80%); - --color-primary-alpha-90: hsla(204deg 100% 46% 90%); + --color-primary-alpha-10: #008deb1a; + --color-primary-alpha-20: #008deb33; + --color-primary-alpha-30: #008deb4d; + --color-primary-alpha-40: #008deb66; + --color-primary-alpha-50: #008deb80; + --color-primary-alpha-60: #008deb99; + --color-primary-alpha-70: #008debb3; + --color-primary-alpha-80: #008debcc; + --color-primary-alpha-90: #008debe6; --color-secondary: hsl(213, 12%, 30.6%); --color-secondary-bg: hsl(213, 16%, 20%); @@ -70,7 +72,7 @@ --color-secondary-dark-3: hsl(213, 12%, 50%); --color-secondary-dark-4: hsl(213, 12%, 54.9%); --color-secondary-dark-5: hsl(213, 12%, 59.6%); - --color-secondary-dark-6: hsl(213, 12%, 64.5%); + --color-secondary-dark-6: #9aa3af; --color-secondary-dark-7: hsl(213, 12%, 69.4%); --color-secondary-dark-8: hsl(213, 12%, 74.3%); --color-secondary-dark-9: hsl(213, 11%, 79.2%); @@ -78,10 +80,12 @@ --color-secondary-dark-11: hsl(213, 12.3%, 89%); --color-secondary-dark-12: hsl(213, 12.5%, 93.7%); --color-secondary-dark-13: hsl(213, 14.3%, 98.6%); + --color-secondary-light-1: hsl(213, 12%, 24.5%); --color-secondary-light-2: hsl(213, 11.8%, 18.2%); --color-secondary-light-3: hsl(213, 11%, 12.4%); --color-secondary-light-4: hsl(213, 9.7%, 6.1%); + --color-secondary-alpha-10: hsla(213, 12%, 30.6%, 0.1); --color-secondary-alpha-20: hsla(213, 12%, 30.6%, 0.2); --color-secondary-alpha-30: hsla(213, 12%, 30.6%, 0.3); @@ -120,6 +124,7 @@ --color-black: hsl(213, 21.1%, 14.9%); --color-black-light: hsl(222.9, 20.6%, 13.3%); --color-gold: hsl(47.3, 50%, 46.3%); + --color-white: #ffffff; /* Color: diff */ --color-diff-added-word-bg: hsl(120, 25.5%, 31.6%); @@ -152,13 +157,13 @@ --color-info-bg: hsl(216.3, 33.3%, 22.4%); --color-info-text: hsl(201.8, 79.3%, 56.5%); - --color-body: hsl(213, 10%, 14%); + --color-body: #202327; --color-box-header: hsl(213, 12%, 22%); --color-box-body: hsl(213, 12%, 18%); --color-box-body-highlight: hsla(204deg, 60%, 36%, .15); - --color-text: hsl(220, 12.4%, 76.3%); + --color-text: #bbc0ca; --color-text-dark: hsl(220, 26%, 89%); --color-text-light: hsl(224, 9.2%, 68%); --color-text-light-1: hsl(224, 7.8%, 62%); @@ -173,7 +178,6 @@ --color-hover: hsla(213, 18%, 90%, .05); --color-active: hsla(213, 18%, 90%, .1); - --color-shadow: hsla(0, 0%, 0%, 0); --color-menu: hsl(213, 15%, 21%); --color-card: hsl(213, 15%, 21%); @@ -181,7 +185,7 @@ --color-markup-table-row: hsla(0, 0%, 100%, 0); --color-markup-code-block: hsla(0, 0%, 100%, 0.1); - --color-code-bg: hsl(213, 16%, 14%); + --color-code-bg: #1e2329; --color-code-line-bg-hover: hsl(213, 16%, 16%); --color-code-sidebar-bg: hsl(213, 14.8%, 21%); @@ -202,12 +206,12 @@ --color-button-basic-text: var(--color-text); /* Inputs. */ - --color-input-text: hsl(219, 25%, 87%); - --color-input-background: hsl(213, 14%, 10%); - --color-input-toggle-background: hsl(213, 11.5%, 30.6%); - --color-input-border: hsl(213, 11.5%, 30.6%); - --color-input-border-hover: hsl(224, 13%, 36%); - --color-placeholder-text: hsl(213, 8.2%, 45.3%); + --color-input-text: #d6dbe6; + --color-input-background: #17191c; + --color-input-toggle-background: #454d57; + --color-input-border: #454d57; + --color-input-border-hover: #505668; + --color-placeholder-text: #6a737d; --color-editor-line-highlight: var(--color-primary-light-5); --color-project-board-bg: var(--color-secondary-light-2);