From 5470fd013102ae8712d70c9b2c1f6042ef2642a1 Mon Sep 17 00:00:00 2001 From: Robert Wolff Date: Wed, 11 Feb 2026 15:34:31 +0100 Subject: [PATCH] fix(ui): make relative time consistent with other text when selected (#11231) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Defines new css colours for theming: ```css --color-selection-bg: var(--color-primary-light-1); --color-selection-fg: var(--color-white); ``` which are then used both in the `base.css` and in the relative-time shadow object. This, is how it looks for me when selecting before and after this patch (my Browser’s accent colour used for selection is orange): | | Before | After | |---|---|---| | Forgejo Light | ![image](/attachments/aaee443e-c921-47bd-8c9f-d7260ef2b45e) | ![image](/attachments/e3089770-d9bb-40fa-ba68-e263ac2b0a7a) | | Forgejo Dark | ![image](/attachments/cecefff6-39b4-4b8f-977f-773c3ec65297)| ![image](/attachments/cb6f0882-ad14-4463-952a-1c71505279db) | | Gitea Light | ![image](/attachments/cd4200fa-3a6e-47e2-a1cd-c887dd6c0fbe) | ![image](/attachments/6294af16-9cf8-4ae7-acf3-6bd35c03e070) | | Gitea Dark | ![image](/attachments/60193699-9b37-498e-b472-f37580c20755) | ![image](/attachments/42f5d4d1-e39a-424d-a65e-edb312300867) | Co-authored-by: 0ko <0ko@noreply.codeberg.org> Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11231 Reviewed-by: 0ko <0ko@noreply.codeberg.org> Co-authored-by: Robert Wolff Co-committed-by: Robert Wolff --- web_src/css/base.css | 7 ++++--- web_src/css/themes/theme-forgejo-dark.css | 6 ++---- web_src/css/themes/theme-forgejo-light.css | 6 ++---- web_src/css/themes/theme-gitea-dark.css | 2 ++ web_src/css/themes/theme-gitea-light.css | 2 ++ web_src/js/webcomponents/relative-time.js | 1 + 6 files changed, 13 insertions(+), 11 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index b6c0b9cf49..a2837cf4f6 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -242,9 +242,10 @@ h1.error-code { background: var(--color-hover); } -::selection { - background: var(--color-primary-light-1); - color: var(--color-white); +::selection, +relative-time::part(relative-time)::selection { + background: var(--color-selection-bg); + color: var(--color-selection-fg); } ::placeholder, diff --git a/web_src/css/themes/theme-forgejo-dark.css b/web_src/css/themes/theme-forgejo-dark.css index 1c5466b3c8..a89666725b 100644 --- a/web_src/css/themes/theme-forgejo-dark.css +++ b/web_src/css/themes/theme-forgejo-dark.css @@ -276,6 +276,8 @@ --color-highlight-fg: var(--color-primary-light-4); --color-highlight-bg: var(--color-primary-alpha-20); --color-overlay-backdrop: #080808c0; + --color-selection-bg: var(--steel-100); + --color-selection-fg: var(--color-pure-black); /* pattern colors for image diff */ --checkerboard-color-1: #474747; --checkerboard-color-2: #313131; @@ -338,10 +340,6 @@ i.grey.icon.icon.icon.icon { .ui.yellow.label.pending-label { color: var(--color-warning-text) !important; } -::selection { - background: var(--steel-100) !important; - color: var(--color-pure-black) !important; -} strong.attention-important, svg.attention-important { color: var(--color-violet-light); } diff --git a/web_src/css/themes/theme-forgejo-light.css b/web_src/css/themes/theme-forgejo-light.css index be94290f5c..f0d7413072 100644 --- a/web_src/css/themes/theme-forgejo-light.css +++ b/web_src/css/themes/theme-forgejo-light.css @@ -274,6 +274,8 @@ --color-highlight-fg: var(--color-primary-light-4); --color-highlight-bg: var(--color-primary-light-6); --color-overlay-backdrop: #080808c0; + --color-selection-bg: var(--steel-450); + --color-selection-fg: var(--color-white); /* pattern colors for gradient */ --checkerboard-color-1: #ffffff; --checkerboard-color-2: #e5e5e5; @@ -309,7 +311,3 @@ background: var(--color-warning-bg) !important; color: var(--color-text-dark) !important; } -::selection { - background: var(--steel-450) !important; - color: var(--color-white) !important; -} diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index 31cf57b7c9..983d1ce6e2 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -234,6 +234,8 @@ --color-highlight-fg: #87651e; --color-highlight-bg: #352c1c; --color-overlay-backdrop: #080808c0; + --color-selection-bg: var(--color-primary-light-1); + --color-selection-fg: var(--color-white); /* pattern colors for image diff */ --checkerboard-color-1: #313131; --checkerboard-color-2: #212121; diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css index 74272c738e..8d88f5e204 100644 --- a/web_src/css/themes/theme-gitea-light.css +++ b/web_src/css/themes/theme-gitea-light.css @@ -234,6 +234,8 @@ --color-highlight-fg: #eed200; --color-highlight-bg: #fffbdd; --color-overlay-backdrop: #080808c0; + --color-selection-bg: var(--color-primary-light-1); + --color-selection-fg: var(--color-white); /* pattern colors for gradient */ --checkerboard-color-1: #ffffff; --checkerboard-color-2: #e5e5e5; diff --git a/web_src/js/webcomponents/relative-time.js b/web_src/js/webcomponents/relative-time.js index 02bf8feffb..776955623a 100644 --- a/web_src/js/webcomponents/relative-time.js +++ b/web_src/js/webcomponents/relative-time.js @@ -199,6 +199,7 @@ window.customElements.define('relative-time', class extends HTMLElement { if (!this.shadowRoot) { this.attachShadow({mode: 'open'}); this.contentSpan = document.createElement('span'); + this.contentSpan.setAttribute('part', 'relative-time'); this.shadowRoot.append(this.contentSpan); }