domi/forgejo-domi
1
0
Fork 0
forked from forgejo/forgejo
Code Pull requests 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](a32ed6f3-60f7-43d5-9492-62c45d2397f6)

![image](5cb173c5-c942-4237-8cb4-2697220b3f06)

![image](8a1c12b3-a632-48ff-b1a7-a01a4417f821)

![image](46bde1bd-9113-4231-965d-6ec9076f6a3b)
This commit is contained in:
wxiaoguang 2023-09-04 18:22:46 +08:00 • committed by GitHub
parent a38cf868c5
commit 51cfe0e7de
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 39 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

28
web_src/css/modules/button.css
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,