summaryrefslogtreecommitdiffstats
path: root/web_src/css
diff options
context:
space:
mode:
authorsilverwind <me@silverwind.io>2024-04-07 18:19:25 +0200
committerGitHub <noreply@github.com>2024-04-07 16:19:25 +0000
commit36887ed3921d03f1864360c95bd2ecf853bfbe72 (patch)
tree9b61936f24674ed4ef14f21b30c8040f5e528e78 /web_src/css
parent019857a7015cae32c12b5eac0b895c05f0264b77 (diff)
downloadgitea-36887ed3921d03f1864360c95bd2ecf853bfbe72.tar.gz
gitea-36887ed3921d03f1864360c95bd2ecf853bfbe72.zip
Fix and rewrite contrast color calculation, fix project-related bugs (#30237)
1. The previous color contrast calculation function was incorrect at least for the `#84b6eb` where it output low-contrast white instead of black. I've rewritten these functions now to accept hex colors and to match GitHub's calculation and to output pure white/black for maximum contrast. Before and after: <img width="94" alt="Screenshot 2024-04-02 at 01 53 46" src="https://github.com/go-gitea/gitea/assets/115237/00b39e15-a377-4458-95cf-ceec74b78228"><img width="90" alt="Screenshot 2024-04-02 at 01 51 30" src="https://github.com/go-gitea/gitea/assets/115237/1677067a-8d8f-47eb-82c0-76330deeb775"> 2. Fix project-related issues: - Expose the new `ContrastColor` function as template helper and use it for project cards, replacing the previous JS solution which eliminates a flash of wrong color on page load. - Fix a bug where if editing a project title, the counter would get lost. - Move `rgbToHex` function to color utils. @HesterG fyi --------- Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: Giteabot <teabot@gitea.io>
Diffstat (limited to 'web_src/css')
-rw-r--r--web_src/css/features/projects.css27
-rw-r--r--web_src/css/repo.css15
-rw-r--r--web_src/css/repo/issue-list.css17
-rw-r--r--web_src/css/themes/theme-gitea-dark.css2
-rw-r--r--web_src/css/themes/theme-gitea-light.css2
5 files changed, 25 insertions, 38 deletions
diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css
index cec5e6fc64..e23c146748 100644
--- a/web_src/css/features/projects.css
+++ b/web_src/css/features/projects.css
@@ -22,34 +22,27 @@
cursor: default;
}
+.project-column .issue-card {
+ color: var(--color-text);
+}
+
.project-column-header {
display: flex;
align-items: center;
justify-content: space-between;
}
-.project-column-header.dark-label {
- color: var(--color-project-board-dark-label) !important;
-}
-
-.project-column-header.dark-label .project-column-title {
- color: var(--color-project-board-dark-label) !important;
-}
-
-.project-column-header.light-label {
- color: var(--color-project-board-light-label) !important;
-}
-
-.project-column-header.light-label .project-column-title {
- color: var(--color-project-board-light-label) !important;
-}
-
.project-column-title {
background: none !important;
line-height: 1.25 !important;
cursor: inherit;
}
+.project-column-title,
+.project-column-issue-count {
+ color: inherit !important;
+}
+
.project-column > .cards {
flex: 1;
display: flex;
@@ -64,6 +57,8 @@
.project-column > .divider {
margin: 5px 0;
+ border-color: currentcolor;
+ opacity: .5;
}
.project-column:first-child {
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 653af379d5..c50d13a174 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2273,8 +2273,21 @@
height: 0.5em;
}
+.labels-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.25em;
+}
+
+.labels-list a {
+ display: flex;
+ text-decoration: none;
+}
+
.labels-list .label {
- margin: 2px 0;
+ padding: 0 6px;
+ margin: 0 !important;
+ min-height: 20px;
display: inline-flex !important;
line-height: 1.3; /* there is a `font-size: 1.25em` for inside emoji, so here the line-height needs to be larger slightly */
}
diff --git a/web_src/css/repo/issue-list.css b/web_src/css/repo/issue-list.css
index fe8231d718..77905956f0 100644
--- a/web_src/css/repo/issue-list.css
+++ b/web_src/css/repo/issue-list.css
@@ -34,23 +34,6 @@
}
}
-#issue-list .flex-item-title .labels-list {
- display: flex;
- flex-wrap: wrap;
- gap: 0.25em;
-}
-
-#issue-list .flex-item-title .labels-list a {
- display: flex;
- text-decoration: none;
-}
-
-#issue-list .flex-item-title .labels-list .label {
- padding: 0 6px;
- margin: 0;
- min-height: 20px;
-}
-
#issue-list .flex-item-body .branches {
display: inline-flex;
}
diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css
index ed6718e40c..c74f334c2d 100644
--- a/web_src/css/themes/theme-gitea-dark.css
+++ b/web_src/css/themes/theme-gitea-dark.css
@@ -215,8 +215,6 @@
--color-placeholder-text: var(--color-text-light-3);
--color-editor-line-highlight: var(--color-primary-light-5);
--color-project-board-bg: var(--color-secondary-light-2);
- --color-project-board-dark-label: #0e1011;
- --color-project-board-light-label: #dde0e2;
--color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */
--color-reaction-bg: #e8e8ff12;
--color-reaction-hover-bg: var(--color-primary-light-4);
diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css
index b10ad7d840..01dd8ba4f7 100644
--- a/web_src/css/themes/theme-gitea-light.css
+++ b/web_src/css/themes/theme-gitea-light.css
@@ -215,8 +215,6 @@
--color-placeholder-text: var(--color-text-light-3);
--color-editor-line-highlight: var(--color-primary-light-6);
--color-project-board-bg: var(--color-secondary-light-4);
- --color-project-board-dark-label: #0e1114;
- --color-project-board-light-label: #eaeef2;
--color-caret: var(--color-text-dark);
--color-reaction-bg: #0000170a;
--color-reaction-hover-bg: var(--color-primary-light-5);