upstream/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2026-02-18 22:57:51 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix(ui): make relative time consistent with other text when selected (#11231)

Browse source 
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 <mahlzahn@posteo.de>
Co-committed-by: Robert Wolff <mahlzahn@posteo.de>
This commit is contained in:
Robert Wolff 2026-02-11 15:34:31 +01:00 committed by 0ko
parent 92cb4ca019
commit 5470fd0131
6 changed files with 13 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
web_src/css/base.css
View file

@ -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,

6
web_src/css/themes/theme-forgejo-dark.css
View file

@ -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);
}

6
web_src/css/themes/theme-forgejo-light.css
View file

@ -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;
}

2
web_src/css/themes/theme-gitea-dark.css
View file

@ -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;

2
web_src/css/themes/theme-gitea-light.css
View file

@ -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;

1
web_src/js/webcomponents/relative-time.js
View file

@ -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);
}