Transparency in project boards stops javascript due to kanban sorting. #9960

New Issue

2025-11-02T08:54:20-06:00

GiteaMirror commented

2025-11-02 08:54:20 -06:00

Originally created by @MisterCavespider on GitHub (Dec 10, 2022).

Description

When using a theme that contains semi-transparent backgrounds for UI elements, Gitea will throw a JS error due to the way the cards are sorted (see screenshot 1).
Due to this JS error, most functionality dependent on JS fails, such as edit or delete buttons.

The error (in the source code) leads to the file web_src/js/features/repo-projects.js, lines 59 and 203.

The error occurs because of the following reasons:

Each project card may have a colour, or none.
If the project card has no colour, the default CSS colour is used.
Some themes have semi-transparent UI elements, with background-color: rgba(0, 0, 0, 0.15);, for example.
repo_projects.js wants to sort cards by colour.
The colour of the cards is extracted from the CSS.
The colour is matched to the pattern rgb(x, y, z), which does not take into account that themes may define colours as rgba(x, y, z, a).
(The colour is communicated through a PUT request).

Proposed Solutions

Change the regex from ^rgb$(\d+),\s*(\d+),\s*(\d+)$$ to ^rgba?$(\d+),\s*(\d+),\s*(\d+)(.*)?$$ and ignore the alpha channel from the sorting criteria.
Change the regex from ^rgb$(\d+),\s*(\d+),\s*(\d+)$$ to ^rgba?$(\d+),\s*(\d+),\s*(\d+)(,\s*(\d+(\.\d+)?))?$$ (alpha channel is a float or NaN on 5th group) and include the alpha channel in the sorting criteria.
Rethink on why you're reading colours out of the CSS in the first place, then reformat this sorting procedure.

History

Going back in the git history, this bug was implemented in commit ecfac78f6e with merge request #16647 on 17/08/2021 in order to get Kanban colour sorting.

Reproduce

Get any instance of Gitea running

Configure a theme with semi-transparent UI elements, for example 'hotpink' from theme.park:

Add data/gitea/templates/custom/body_outer_pre.tmpl with body:

{{ if .IsSigned }}
  {{ if and (ne .SignedUser.Theme "gitea") (ne .SignedUser.Theme "arc-green") }}
    <link rel="stylesheet" href="https://theme-park.dev/css/base/gitea/{{.SignedUser.Theme}}.css">
  {{end}}
{{ else if and (ne DefaultTheme "gitea") (ne DefaultTheme "arc-green") }}
  <link rel="stylesheet" href="https://theme-park.dev/css/base/gitea/{{DefaultTheme}}.css">
{{end}}

Add to data/gitea/conf/app.ini:

[ui]
THEMES = gitea,arc-green,plex,aquamarine,dark,dracula,hotline,organizr,space-gray,hotpink,onedark,overseerr,nord
DEFAULT_THEME = gitea

Alternatively, pick any theme and add the CSS rule .ui.segment { background: rgba(0, 0, 0, 0.28) !important; }.

Go to any repository, open the Projects tab, and open a project.
Make sure at least one board has no colour assigned.
Error will pop up on the top of the screen.

Gitea Version

latest, v1.9.6

Can you reproduce the bug on the Gitea demo site?

Yes

Log Gist

No response

Screenshots

Screenshot 1 (JavaScript error)

Screenshot 2 (Semi-transparent UI elements)

Git Version

No response

Operating System

default docker image; Void Linux on Linux m-desktop 6.0.10_1 #1 SMP PREEMPT_DYNAMIC Mon Nov 28 03:42:58 UTC 2022 x86_64 GNU/Linux

How are you running Gitea?

This issue can be replicated on both the default Docker image and when building Gitea from source.

Database

None

Originally created by @MisterCavespider on GitHub (Dec 10, 2022). ### Description When using a theme that contains semi-transparent backgrounds for UI elements, Gitea will throw a JS error due to the way the cards are sorted (see screenshot 1). Due to this JS error, most functionality dependent on JS fails, such as edit or delete buttons. The error (in the source code) leads to the file `web_src/js/features/repo-projects.js`, lines `59` and `203`. The error occurs because of the following reasons: 1. Each project card may have a colour, or none. 2. If the project card has no colour, the default CSS colour is used. 3. Some themes have semi-transparent UI elements, with `background-color: rgba(0, 0, 0, 0.15);`, for example. 4. `repo_projects.js` wants to sort cards by colour. 5. The colour of the cards is extracted from the CSS. 6. The colour is matched to the pattern `rgb(x, y, z)`, which does not take into account that themes may define colours as `rgba(x, y, z, a)`. 7. (The colour is communicated through a PUT request). ## Proposed Solutions 1. Change the regex from `^rgb$(\d+),\s*(\d+),\s*(\d+)$$` to `^rgba?$(\d+),\s*(\d+),\s*(\d+)(.*)?$$` and ignore the alpha channel from the sorting criteria. 2. Change the regex from `^rgb$(\d+),\s*(\d+),\s*(\d+)$$` to `^rgba?$(\d+),\s*(\d+),\s*(\d+)(,\s*(\d+(\.\d+)?))?$$` (alpha channel is a float or `NaN` on 5th group) and include the alpha channel in the sorting criteria. 3. Rethink on why you're reading colours out of the CSS in the first place, then reformat this sorting procedure. ## History Going back in the git history, this bug was implemented in commit ecfac78f6ef2cc01e4397c1a92b9a59b7ff0b2ff with merge request #16647 on 17/08/2021 in order to get Kanban colour sorting. ## Reproduce 1. Get any instance of Gitea running 2. Configure a theme with semi-transparent UI elements, for **example** 'hotpink' from theme.park: 1. Add `data/gitea/templates/custom/body_outer_pre.tmpl` with body: ``` {{ if .IsSigned }} {{ if and (ne .SignedUser.Theme "gitea") (ne .SignedUser.Theme "arc-green") }} <link rel="stylesheet" href="https://theme-park.dev/css/base/gitea/{{.SignedUser.Theme}}.css"> {{end}} {{ else if and (ne DefaultTheme "gitea") (ne DefaultTheme "arc-green") }} <link rel="stylesheet" href="https://theme-park.dev/css/base/gitea/{{DefaultTheme}}.css"> {{end}} ``` 2. Add to `data/gitea/conf/app.ini`: ``` [ui] THEMES = gitea,arc-green,plex,aquamarine,dark,dracula,hotline,organizr,space-gray,hotpink,onedark,overseerr,nord DEFAULT_THEME = gitea ``` 3. Alternatively, pick any theme and add the CSS rule `.ui.segment { background: rgba(0, 0, 0, 0.28) !important; }`. 3. Go to any repository, open the `Projects` tab, and open a project. 4. Make sure at least one board _has no colour assigned_. 5. Error will pop up on the top of the screen. ### Gitea Version latest, v1.9.6 ### Can you reproduce the bug on the Gitea demo site? Yes ### Log Gist _No response_ ### Screenshots **Screenshot 1** (JavaScript error) ![image](https://user-images.githubusercontent.com/18486013/206857679-7785004a-dd4b-43df-9949-a85a28793b4e.png) **Screenshot 2** (Semi-transparent UI elements) ![image](https://user-images.githubusercontent.com/18486013/206859136-e61963d8-b00c-4bba-b539-77d140b08e0c.png) ### Git Version _No response_ ### Operating System default docker image; Void Linux on `Linux m-desktop 6.0.10_1 #1 SMP PREEMPT_DYNAMIC Mon Nov 28 03:42:58 UTC 2022 x86_64 GNU/Linux` ### How are you running Gitea? This issue can be replicated on both the default Docker image and when building Gitea from source. ### Database None

GiteaMirror added the type/bug label 2025-11-02 08:54:20 -06:00

GiteaMirror closed this issue

2025-11-02 08:54:20 -06:00

GiteaMirror commented

2025-11-02 08:54:20 -06:00

@Zettat123 commented on GitHub (Feb 24, 2023):

Fixed in #22092.

@Zettat123 commented on GitHub (Feb 24, 2023): Fixed in #22092.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#9960