From dfd19fa38c9ee004c5d7e73f51af5981adcb5e6d Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Wed, 21 Jun 2023 18:15:51 +0800
Subject: [PATCH] Fine tune project board label colors and modal content
background (#25419)
- The label text color on project board is not contrasting enough,
changed to colors that are same as places that also used
`useLightTextOnBackground` function
([util_render.go](https://github.com/go-gitea/gitea/blob/2cdf260f42d178d23a8db70db35664511aeab31e/modules/templates/util_render.go#L136-L141),
[Context
Popup](https://github.com/go-gitea/gitea/blob/2cdf260f42d178d23a8db70db35664511aeab31e/web_src/js/components/ContextPopup.vue#L81-L84))
- background of modal `content` is `#ffffff` (from fomantic) right now,
which does not look good on dark mode, so changed to `var(--color-body)`
Before:
<img width="1378" alt="Screen Shot 2023-06-21 at 14 24 13"
src="https://github.com/go-gitea/gitea/assets/17645053/1527ca28-c884-4ca9-a4be-7a72ad1a093a">
<img width="900" alt="Screen Shot 2023-06-21 at 14 25 52"
src="https://github.com/go-gitea/gitea/assets/17645053/fab82116-7376-4027-a0a4-9eedf9fb0a30">
After:
<img width="1383" alt="Screen Shot 2023-06-21 at 14 19 33"
src="https://github.com/go-gitea/gitea/assets/17645053/fe0997e7-fee6-4522-bc4e-545088ec1cc8">
<img width="797" alt="Screen Shot 2023-06-21 at 14 32 42"
src="https://github.com/go-gitea/gitea/assets/17645053/b0591af0-950c-4448-9430-34d6c7215971">
---
web_src/css/base.css | 4 ++--
web_src/css/modules/modal.css | 1 +
2 files changed, 3 insertions(+), 2 deletions(-)
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 7322b778f3..78bcd4f1c4 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -214,8 +214,8 @@
--color-placeholder-text: #aaa;
--color-editor-line-highlight: var(--color-primary-light-6);
--color-project-board-bg: var(--color-secondary-light-4);
- --color-project-board-dark-label: #555555;
- --color-project-board-light-label: #a6aab5;
+ --color-project-board-dark-label: #111111;
+ --color-project-board-light-label: #eeeeee;
--color-caret: var(--color-text-dark);
--color-reaction-bg: #0000000a;
--color-reaction-hover-bg: var(--color-primary-light-5);
diff --git a/web_src/css/modules/modal.css b/web_src/css/modules/modal.css
index a8d3521093..5824efb30c 100644
--- a/web_src/css/modules/modal.css
+++ b/web_src/css/modules/modal.css
@@ -35,6 +35,7 @@
.ui.modal > .content,
.ui.modal > form > .content {
padding: 1.5em;
+ background: var(--color-body);
}
.ui.modal > .actions,