public/gitea
1
0 Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-10-16 12:05:30 +09:00
Code Issues Packages Projects Releases Wiki Activity

Remove CSS has selector and improve various styles (#26891)

Browse Source 
Replace  #26850

Major changes:

1. Remove all `has` selectors, it is still not supported by firefox.
Actually there could be some more general and clearer approaches
2. Remove `two-toggle-buttons`, the `.ui.buttons` just works well
3. Rewrite the `.ui.buttons` border styles, see the screenshots
4. Remove the "fine-tuning" paddings from the the flex children, they
could layout themselves well.

![image](https://github.com/go-gitea/gitea/assets/2114189/a32ed6f3-60f7-43d5-9492-62c45d2397f6)

![image](https://github.com/go-gitea/gitea/assets/2114189/5cb173c5-c942-4237-8cb4-2697220b3f06)

![image](https://github.com/go-gitea/gitea/assets/2114189/8a1c12b3-a632-48ff-b1a7-a01a4417f821)

![image](https://github.com/go-gitea/gitea/assets/2114189/46bde1bd-9113-4231-965d-6ec9076f6a3b)
This commit is contained in:
wxiaoguang authored and GitHub committed 2023-09-04 18:22:46 +08:00
1 parent a38cf868c5
commit 51cfe0e7de
5 files changed
+39 -40
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web_src/css/modules/button.css
+16 -12
View File
@@ -1,5 +1,6 @@
/* this contains override styles for buttons and related elements */
/* these styles changed the Fomantic UI's rules, Fomantic UI expects only "basic" buttons have borders */
.ui.button,
.ui.button:focus {
background: var(--color-button);
@@ -52,26 +53,29 @@ a.btn:hover {
color: inherit;
}
/* other button styles */
/* By default, Fomantic UI doesn't support "bordered" buttons group, but Gitea would like to use it.
And the default buttons always have borders now (not the same as Fomantic UI's default buttons, see above).
It needs some tricks to tweak the left/right borders with active state */
.ui.buttons .button {
border-right: none;
}
.ui.buttons .button:first-child {
border-left: 1px solid var(--color-light-border);
}
.ui.buttons .button:first-child:has(+ .button.active) {
border-right: none !important;
.ui.buttons .button:last-child {
border-right: 1px solid var(--color-light-border);
}
.ui.buttons .button + .button:not(.active) {
border-left: none;
}
.two-toggle-buttons .button:not(.active):first-of-type {
border-right: none;
}
.two-toggle-buttons .button.active:last-of-type {
.ui.buttons .button.active {
border-left: 1px solid var(--color-light-border);
border-right: 1px solid var(--color-light-border);
}
.ui.buttons .button.active + .button {
border-left: none;
}
.ui.labeled.button.disabled > .button,