- In #1782 I made these darker to make some elements look good, but this
variable is used quite broadly which causes some issues. So reverting
the darker tone to the more light tone (which is identical with what's
the behavior before #1782 was merged).
- Resolves https://codeberg.org/forgejo/forgejo/issues/2879
- Make the background color of code blocks a bit darker, so they are
more distinctive when used in containers that use `--color-box-body` as
background color (for example, comments).
- Ref: https://codeberg.org/Codeberg/Community/issues/1523
1. Restore missing styles for message close icon
2. Move `code-line-button` so that it does not go off-screen on small
viewports
3. Make `code-line-button` look and behave like other buttons
4. Make `code-line-button` work in blame
5. Make the active selection span the whole line, not just the code part
6. Tweak colors, make dark theme code bg darker, make line numbers same
color in diff and file view.
7. Move code background to parent, fixing border radius and other
problems
8. Enable code wrap in blame
9. Improve blame responsiveness
10. Remove `--color-code-sidebar-bg` in blame, now it uses same
background as code
11. Rename `--color-active-line` to `--color-highlight-bg`
12. Add `--color-highlight-bg`
13. Fix button group borders on hover and border-right on last button.
<img width="1343" alt="Screenshot 2024-03-23 at 22 34 13"
src="fcbb919f-5dc3-43f0-97f6-870d6f412554">
<img width="1334" alt="Screenshot 2024-03-23 at 22 34 26"
src="ca44c3b7-4328-4645-ba49-b0dc6a5ac06d">
<img width="1338" alt="Screenshot 2024-03-23 at 22 34 57"
src="00eb0b5a-1ec7-4669-a94a-4602b9d1c1ac">
<img width="1337" alt="Screenshot 2024-03-23 at 22 34 42"
src="752edc4a-064f-413c-9dff-c086187fcd85">
Fixes: https://github.com/go-gitea/gitea/issues/18074
---
Conflict resolution: Trivial.
Ref: https://codeberg.org/forgejo/forgejo/issues/2776
(cherry picked from commit db01bf6cc88a8a7b5132b9306b3af1649566b10f)
Fixes: https://github.com/go-gitea/gitea/issues/29981. Introduce
`.secondary-nav` as a universal way for styling and margin adjustments
inside `.page-content`.
If the first child of `.page-content` is `.secondary-nav`, we add margin
below it, otherwise we add padding to the first child. Notable changes:
- `--color-header-wrapper` is replaced with `--color-secondary-nav-bg`.
- `navbar` class is removed.
Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
Conflict resolution: Trivial conflict & changed selector to reflect new
classes.
Ref: https://codeberg.org/forgejo/forgejo/issues/2776
(cherry picked from commit 3ccda41a539b8ba7841919ee12dc2877ddc03818)
Minor color tweaks:
- Better text contrasts
- Better distinguish nav and header wrapper in light theme
- Input boxes are now white on light theme
- Slightly darker dark theme background
<img width="503" alt="Screenshot 2024-03-20 at 19 31 54"
src="c7802a84-2386-4332-bd91-f419473ff644">
<img width="510" alt="Screenshot 2024-03-20 at 19 32 24"
src="21d3529e-6e0a-413a-9e9e-a03bea2405eb">
(cherry picked from commit 444460ea807c6a669d1a1467510868335abee5fb)
Same as https://github.com/go-gitea/gitea/pull/29822 but for light
theme. Slight shift towards blue and made the themes match more, like on
header and footer background.
Before
<img width="1342" alt="Screenshot 2024-03-16 at 00 43 03"
src="b46021a1-241c-446a-b220-ca25cc90f3bf">
After
<img width="1343" alt="Screenshot 2024-03-16 at 00 45 21"
src="1c898875-a6bb-4bd3-b059-f82e1a145c99">
Before
<img width="1018" alt="Screenshot 2024-03-16 at 00 43 13"
src="d237ee7d-b4cc-4688-a074-1e96515ac475">
After
<img width="1022" alt="Screenshot 2024-03-16 at 00 43 50"
src="89b1da77-6bc9-4b38-9688-546e794aadfa">
(cherry picked from commit 68169133a3b0d29fe348ee065088d33f6dd1b087)
Fomantic grey labels in the dashboard repo lists were showing original
fomantic colors, fixed that. Also slightly tweaked the light theme
colors so it uses same opacity values as dark theme.
<img width="165" alt="Screenshot 2024-03-07 at 21 06 23"
src="72744d6f-2ee1-4e5d-8ba0-b482a446f535">
<img width="167" alt="Screenshot 2024-03-07 at 21 06 00"
src="1ba93775-e5a9-4b28-b90f-59c1e9199687">
(cherry picked from commit 114bb505a3b0819db683d4b586e950df6a17bff8)
- Increase contrast overall
- Unalias the ansi color in dark theme and copy them to light
- Add outer border
- Add border radius
<img width="1337" alt="Screenshot 2024-03-06 at 22 30 03"
src="11407c0f-0bb2-435e-a034-22b1f106d9b0">
<img width="1335" alt="Screenshot 2024-03-06 at 22 36 59"
src="267db442-0979-4acc-a79e-8579b4cb0262">
(cherry picked from commit 16f13265143ff08cb6c33e976998b262e94fe569)
Improve contrast by lightening the text colors in dark theme by around
35%. Additionally, share some variables that had the same or similar
color, which will ease future theme creation.
(cherry picked from commit e94e2fb6c5484070d56977644213d735df9e0c10)
Now uses the same primary color as light theme. The secondary colors are
shifted towards a slightly blue shade. Could maybe desaturate a bit
more, but overall I think I'm happy with it.
Fixes: https://github.com/go-gitea/gitea/issues/27097
<img width="1343" alt="Screenshot 2024-02-27 at 22 21 46"
src="4163c393-b469-4a53-8f4b-1c33aa04f3ac">
<img width="581" alt="image"
src="e621f7f8-5679-4605-bf42-3d5ff1071e1e">
<img width="581" alt="image"
src="20e66493-2457-482b-b8f1-e5710934e189">
---------
Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit d557fbc5a715a1920a2860cb04ae6c8fe2225182)
- Trivial auto-fix applied.
- Removed CSS that was no longer needed (either was removed or upstream
already improved the CSS).
- Used existing variables for colors.
- Fix CSS selectors to match existing ones.
- Port 1fd7e3d6be to the Forgejo themes,
they are a copy paste, but have a bit darker console background color to
have better contrast and match better with the overal Forgejo dark
theme's shade.
This PR adds colorblind theme variants of the forgejo themes. I duplicated the forjego light and dark themes and only changed the lines related to diff colors for added and removed rows/words.
I am not a designer, and I am also colorblind, so better suggestions of colors are most welcome. However, this is a good start as I can at least personally see the colors now. I got the colors for the dark theme from the GitHub diff colors, the light ones I couldn't get from GitHub as they use white as a plain background, which Forgejo's theme doesn't, so they were decided on after a bit of random testing.
Resolves#986
(cherry picked from commit dcdb4a372d)
(cherry picked from commit faab0c670e)
(cherry picked from commit b6d59493c7)
(cherry picked from commit 837da0c1f4)
(cherry picked from commit 71ad245e1d)
(cherry picked from commit 85a7032f1b)
Conflicts:
web_src/css/themes/theme-forgejo-auto.less
web_src/css/themes/theme-forgejo-dark.less
web_src/css/themes/theme-forgejo-light.less
web_src/less/_home.less
see https://codeberg.org/forgejo/forgejo/pulls/552
(cherry picked from commit 0c2c131bb0)
[BRANDING] Add Forgejo light, dark, and auto themes: fix import
Closes: https://codeberg.org/forgejo/forgejo/issues/562
(cherry picked from commit 2b0dc1f80f)
(cherry picked from commit 494ad6a3b7)
(cherry picked from commit 6940fc22c4)
(cherry picked from commit bd6f00656c)
(cherry picked from commit ebb506a124)
(cherry picked from commit 43d72d3781)
(cherry picked from commit 1a87adca01)
(cherry picked from commit 0704c410b4)
(cherry picked from commit 9039b47c16)
(cherry picked from commit e32bb78924)
(cherry picked from commit 053ad84f91)
(cherry picked from commit a35f1b6da7)
(cherry picked from commit 8cb94c01d5)
[BRANDING] fix invisible label in branch protection settings
(cherry picked from commit 23e5d45721)
(cherry picked from commit f02e4582e5)
[BRANDING] Fix commit label for Forgejo Dark theme (#843)
- Define the `--color-label-text` variable with a light color, which is currently used for commit's SHA
Co-authored-by: Gusted <postmaster@gusted.xyz>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/843
(cherry picked from commit 74c186a380)
(cherry picked from commit 7e185c5ca5)
[BRANDING] Add Forgejo light, dark, and auto themes (squash) variables
Adapt to b6bcb79987 Improve notification
icon and navbar
Refs: https://codeberg.org/forgejo/forgejo/issues/893
[BRANDING] Add Forgejo light variables
Updates the Forgejo light theme with the changes in b6bcb7998
These are the same changes as made in 2574dbcff to the dark theme
Refs: forgejo/forgejo#893
(cherry picked from commit 9e99fe4f9e)
(cherry picked from commit acbb98bd91)
(cherry picked from commit c80245ed87)
[BRANDING] fix code highlight color in Forgejo themes
(cherry picked from commit ffc49a4e99)
(cherry picked from commit c5f45a941e)
(cherry picked from commit eee5427c9d)
(cherry picked from commit 89be50ca27)
(cherry picked from commit 74e4776ef5)
(cherry picked from commit 6c4e07a6a7)
[BRANDING] more accessible text selection color in Forgejo themes
(cherry picked from commit 7407605ffdedef8fa320477a3bd7efa06df263e2)
(cherry picked from commit 5aab3872cc)
(cherry picked from commit 1ec77d8bd0)
(cherry picked from commit 964c89fce7)
(cherry picked from commit 8a8023a441)
(cherry picked from commit 1c9ffeadf5)
[BRANDING] Fix navigation hover color (squash)
- For items in the navigation bar, use different background colours for hover.
- Regression since https://github.com/go-gitea/gitea/pull/25343
(cherry picked from commit 8f3f4b219c)
(cherry picked from commit edfb0eef06)
(cherry picked from commit a6367fa48a)
(cherry picked from commit d5697abe42)
(cherry picked from commit eaf5370919)
(cherry picked from commit 58f11e7310)
(cherry picked from commit 732e1b35d5)
(cherry picked from commit 0d794ae1c9)
(cherry picked from commit ccc8aed308)
Conflicts:
modules/setting/ui.go
https://codeberg.org/forgejo/forgejo/pulls/1582
(cherry picked from commit 209059fbaf)
(cherry picked from commit 80ba2df4a7)
(cherry picked from commit 17b325da23)
(cherry picked from commit 3518b87c8d)
(cherry picked from commit 4042143f96)
(cherry picked from commit 07f976f9d7)
(cherry picked from commit 1bbc6b93e9)
(cherry picked from commit 8aa0bba307)
(cherry picked from commit 94c4a14ac3)
Update Forgejo theme (squash)
- Incorporate changes from 79a4c80f8d into the Forgejo themes.
- Fix that there's no focus or active coloring on primary and secondary
buttons for Forgejo themes caused by
023e937141 that moved variablse from
base.css (shared) to the themes.
- Extend hack to make red buttons darker on dark Forgejo theme to
include active styling and remove the unnecessary `!important`.
(cherry picked from commit 2e32da4419)
(cherry picked from commit a4eca09543)
(cherry picked from commit e6e452811d)
(cherry picked from commit e9a5addf3d)
(cherry picked from commit a1b8b5fa0d)
[BRANDING] Update forgejo theme
- Inlcude a103b79f60 and
1b2cd4c4e1 and
376c0e25f7 and 023e937141
into the Forgejo theme.
- Fix tooltips not being visual, due to missing background color.
- Fix labels not having a background color.
- Fix modals not having a dimmed background.
- Fix no syntax highlighting on Forgejo light due to missing imports.
- Incorporate feedback from
https://codeberg.org/forgejo/forgejo/issues/1117 to make the labels
stand out less.
(cherry picked from commit bc21dc21e1)
(cherry picked from commit 82323c09cc)
(cherry picked from commit 2da09af28d)
(cherry picked from commit 978aeb7cde)
(cherry picked from commit 984c264e19)
(cherry picked from commit 6aa7c8db38)
(cherry picked from commit 4379269a46)
Conflicts:
modules/setting/ui.go
https://codeberg.org/forgejo/forgejo/pulls/2116
(cherry picked from commit 9414391ec1)
(cherry picked from commit 02c9b776e8)
(cherry picked from commit 7324b417ce)
(cherry picked from commit b20aa3ed17)
Part of https://github.com/go-gitea/gitea/issues/27097:
- `gitea` theme is renamed to `gitea-light`
- `arc-green` theme is renamed to `gitea-dark`
- `auto` theme is renamed to `gitea-auto`
I put both themes in separate CSS files, removing all colors from the
base CSS. Existing users will be migrated to the new theme names. The
dark theme recolor will follow in a separate PR.
## ⚠️ BREAKING ⚠️
1. If there are existing custom themes with the names `gitea-light` or
`gitea-dark`, rename them before this upgrade and update the `theme`
column in the `user` table for each affected user.
2. The theme in `<html>` has moved from `class="theme-name"` to
`data-theme="name"`, existing customizations that depend on should be
updated.
---------
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
The `.new-menu` was using a pseudo-element based fade-out effect.
Replace this with a more modern mask-based effect which in this case
required a child element to avoid fading out the background as well, so
I applied it to child `new-menu-inner` which was present on all these
menus except explore where I added it.
There is no visual difference except that the items on the explore page
have no `gap` between them any longer, making it consistent with other
menus. Before and after:
<img width="221" alt="Screenshot 2023-09-21 at 21 13 19"
src="b4a38ce2-cee1-4c54-84a5-e1d0bfd79e29">
<img width="222" alt="Screenshot 2023-09-21 at 21 32 36"
src="bb6b1335-d935-4ad4-bb85-3b0fc3027c2b">
Also, this cleans up the related CSS vars:
- `--color-header-wrapper-transparent` is removed, no longer needed
- `--color-header-wrapper` is defined in base theme as well, was
previously unset and therefor transparent.
[no whitespace
diff](https://github.com/go-gitea/gitea/pull/27181/files?diff=unified&w=1)
[demo of mask fade](https://jsfiddle.net/silverwind/tsfadb3u/)
Add `box-shadow` replacement to the `floating` dropdown variant as well,
which was missed in https://github.com/go-gitea/gitea/pull/26469. The
Fomantic style has `!important`, so this has to have too. Also made a
tiny adjustment to shadow color on dark theme.
<img width="305" alt="Screenshot 2023-08-18 at 16 40 34"
src="a0aac9cb-6393-4d69-b0b3-00eaac5ccf9f">
<img width="202" alt="Screenshot 2023-08-18 at 16 40 22"
src="0a5fa3aa-7452-4dbd-86ed-ccbc1c872ebb">
Co-authored-by: Giteabot <teabot@gitea.io>
Removes all dropdown and dimmer animations. Works everywhere as far as I
can tell, but need to give this thorough testing. Removes around 70kb
JS/CSS.
Note, I'm not 100% sure regarding the various callbacks, those will need
more investigation, but it appears to work nonetheless.
Fixes: https://github.com/go-gitea/gitea/issues/15709
Use our existing color palette to map to the 16 basic ansi colors. This
is backwards-compatible because it aliases the existing color names.
Side note: I think the colors in `console.css` for console file
rendering are incomplete, but fixing those is out of scope here imo.
Before and after:
<img width="542" alt="Screenshot 2023-06-28 at 00 26 12"
src="86d41884-bc47-4e85-8aec-621eb7320f0b">
<img width="546" alt="Screenshot 2023-06-28 at 00 28 24"
src="39fa3b37-d49e-49b1-b6bc-390ac8ca24b2">
---------
Co-authored-by: Giteabot <teabot@gitea.io>
- Various corrections to button styles, especially secondary
- Remove focus highlight, it's annoying when it stays on button after
press
- Clearly define ghost and link buttons with demos in devtest
- Remove black, grey and tertiary buttons, they should not be used
- Make `arc-green` slightly darker
<img width="1226" alt="image"
src="8d89786a-01ab-40f8-ae5a-e17f40e35084">
<img width="1249" alt="image"
src="83651e6d-3c27-46ff-b8bd-ff344d70e949">
---------
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
Improvements to the notification icon and `<nav>`:
- Add a opaque color for header hover and use it, allowing the border to
be the right color on hover (sadly, not otherwise possible with CSS, not
even `color-mix`).
- Increase font size by 1px
- Use flexbox for slightly better text centering
- Reduce padding of user and add repo button, add margin on right side
of user menu
- Remove the `following bar` wrapper on navbar
<img width="176" alt="Screenshot 2023-06-07 at 00 07 08"
src="23cdc3d6-7f63-49df-bec3-f2e75e32a304">
<img width="63" alt="Screenshot 2023-06-07 at 00 07 14"
src="fae602c2-4467-4d50-b1ec-56317843f9a2">
<img width="84" alt="Screenshot 2023-06-07 at 00 07 36"
src="c48141b8-0b3c-48cc-846a-3a272524dbdb">
<img width="329" alt="Screenshot 2023-06-07 at 00 25 10"
src="cda612f1-426e-466b-a351-fc992bfd18fd">
<img width="186" alt="Screenshot 2023-06-07 at 00 35 45"
src="04484a2e-9bbf-493c-aa26-8e936da008fa">
<img width="797" alt="Screenshot 2023-06-07 at 16 57 40"
src="e7ccb672-5807-4cb6-b306-b18ae0c7e321">
Part of #24728
- The timestamp shows local time and is parsed by `date.toLocaleString`;
- "show seconds" and "show timestamps" are mutually exclusive, and they
can be both hidden.
89531e54-37b7-4400-a6a0-bb3cc69eb6f5
Update for timestamp format:
<img width="306" alt="Screen Shot 2023-05-25 at 09 07 47"
src="2d99768d-d39c-4c9e-81a2-7bc7470399dd">
---------
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
- Various color tweaks
- Add sticky positioning to left sidebar, right header and right step
header
- Adjust margins and border radiuses
<img width="1235" alt="Screenshot 2023-05-23 at 11 18 06"
src="f601b00d-c7f2-43de-89f2-3ac55f2d9cdc">
<img width="1239" alt="Screenshot 2023-05-23 at 11 18 18"
src="a2d24cc9-29fa-4c17-906b-84feea14b889">
---------
Co-authored-by: yp05327 <576951401@qq.com>
Introduce `--color-label-fg`, `--color-label-bg` and
`--color-label-hover-bg`, decoupling the label styles from other color
variables. I've set the colors so that non-interactive labels like on
tabs are dark-on-light on light theme, which imho looks better than
previous light-on-dark.
In the screenshot below, the leftmost label has hover, the second one
has active.
<img width="786" alt="Screenshot 2023-05-18 at 12 48 26"
src="d989bb68-504a-4406-b5f6-419ed9609f90">
<img width="789" alt="Screenshot 2023-05-18 at 13 04 07"
src="689a281a-a2b7-45e8-a5ee-dafb7a35e105">
---------
Co-authored-by: Giteabot <teabot@gitea.io>
- Make code block rendering via backticks work
- Remove link color unless hovered
- Remove table stripes and fix stripes rendering on dark theme for other
tables
- Introduce new `button-link` class discussed previously for buttons
that look and act like links and apply it to the two right-side buttons
- Reduce box padding by 8px on each side
- Fix "Mark all read" button margin-right
- brighten `--color-markup-code-block` on arc-green
### Before
<img width="1216" alt="Screenshot 2023-05-10 at 20 00 30"
src="66da9ec2-dd09-4ef0-8f1d-1822a18b6b43">
<img width="1211" alt="Screenshot 2023-05-10 at 20 00 48"
src="f48e30a2-9a00-4723-93aa-79b97ca0ba0c">
### After
<img width="1222" alt="Screenshot 2023-05-10 at 20 09 59"
src="c956e0d0-b3d9-42a4-a3ed-f0431c22bf3f">
<img width="1218" alt="Screenshot 2023-05-10 at 20 05 34"
src="f72c1628-3961-4c28-9263-07cdf7531316">
Fix regression from https://github.com/go-gitea/gitea/pull/23481.
The conditional on the CSS import was being stripped away by webpack's
`css-loader`, resulting in the dark theme always loading. The old syntax
with `@import` nested inside `@media` also did not work as `css-loader`
(rightfully) ignores such non-standard `@import` syntax that was
previously supported by Less.
Unfortunately, we have to re-introduce postcss to the CSS pipeline to
fix this and I loaded only the minimal plugins to make it work.
There is one variant of the fix that does work without postcss, which is
to exclude the file from transpilation but I did not consider it as it
would have meant the `@import` was being done without a version suffix
in the URL, which would have caused cache issue.
Related: https://github.com/webpack-contrib/css-loader/issues/1503
---------
Co-authored-by: John Olheiser <john.olheiser@gmail.com>
Ran most of the Less files through the Less compiler and Prettier and
then followed up with a round of manual fixes.
The Less compiler had unfortunately stripped all `//` style comments
that I had to restore (It did preserve `/* */` comments). Other fixes
include duplicate selector removal which were revealed after the
transpilation and which weren't caught by stylelint before but now are.
Fixes: https://github.com/go-gitea/gitea/issues/15565
