From 51cfe0e7deb511233ecca331359e8c875448a940 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 4 Sep 2023 18:22:46 +0800 Subject: [PATCH] Remove CSS `has` selector and improve various styles (#26891) 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) --- templates/devtest/gitea-ui.tmpl | 8 ++++++++ templates/repo/view_file.tmpl | 2 +- web_src/css/base.css | 24 ++++++++++-------------- web_src/css/modules/button.css | 28 ++++++++++++++++------------ web_src/css/repo.css | 17 ++++------------- 5 files changed, 39 insertions(+), 40 deletions(-) diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index 342f8c2e9b..b3b68c4dba 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -79,6 +79,14 @@ +
+

Buttons

+
+
+
+
+
+

Tooltip

text with tooltip
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl index c7d5b276d2..0882ff4b27 100644 --- a/templates/repo/view_file.tmpl +++ b/templates/repo/view_file.tmpl @@ -20,7 +20,7 @@
{{if .HasSourceRenderedToggle}} -
+
{{svg "octicon-code" 15}} {{svg "octicon-file" 15}}
diff --git a/web_src/css/base.css b/web_src/css/base.css index 9d7c12525e..cbd3336d26 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -485,8 +485,10 @@ a.label, border-color: var(--color-primary); } -.ui.action.input .button { +.ui.action.input .ui.ui.button { border-color: var(--color-input-border); + padding-top: 0; /* the ".action.input" is "flex + stretch", so let the buttons layout themselves */ + padding-bottom: 0; } /* currently used for search bar dropdowns in repo search and explore code */ @@ -2015,25 +2017,19 @@ a.ui.basic.label:hover { border-color: var(--color-secondary); } -.ui.attached.header .right .button { - padding: 8px 10px; - font-weight: var(--font-weight-normal); -} - -/* reduce height of buttons with dropdown icon */ -.ui.attached.header .right .button:has(.dropdown.icon) { - padding-top: 7px; - padding-bottom: 7px; -} - /* fix misaligned right buttons on box headers */ -.ui.attached.header .right:not(.dropdown) { +.ui.attached.header > .ui.right { position: absolute; right: 0.78571429rem; top: 0; bottom: 0; display: flex; - align-items: center; +} + +.ui.attached.header > .ui.right > .button, +.ui.attached.header > .ui.right > .dropdown > .button { + padding: 8px 10px; + font-weight: var(--font-weight-normal); } /* if a .top.attached.header is followed by a .segment, add some margin */ diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index 373b815d5c..a6c3019b8d 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -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, diff --git a/web_src/css/repo.css b/web_src/css/repo.css index cbf9fac76b..242682593e 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -437,8 +437,8 @@ justify-content: center; } -.pdf-content:has(.pdf-fallback-button) { - height: 100px; +.pdf-content .pdf-fallback-button { + margin: 50px auto; } .repository.file.list .non-diff-file-content .plain-text { @@ -1054,11 +1054,6 @@ margin: 0; } -/* fix fomantic's border-radius via :first-child with hidden elements */ -.collapsible-comment-box:has(.gt-hidden) { - border-radius: var(--border-radius) !important; -} - .repository.view.issue .comment-list .code-comment .comment-header { background: transparent; border-bottom: 0 !important; @@ -1637,14 +1632,10 @@ } .repository .diff-box .header:not(.resolved-placeholder) .button { - padding: 8px 12px; + padding: 0 12px; flex: 0 0 auto; margin-right: 0; -} - -.repository .diff-box .header:not(.resolved-placeholder) .button:has(svg) { - padding-top: 6px; - padding-bottom: 6px; + height: 30px; } .repository .diff-box .resolved-placeholder {