Fix all rounded borders, change affected tab menus to pills (#30707)

Fixes https://github.com/go-gitea/gitea/issues/30673, all 23 issues.
Notes:

- Tab bar menus had to change to pills because of unsolvable issue with
the border-radius as tab bar renders a overlapping border onto the box
below. And I think pills look better.
- Added padding to code editor empty preview message
- Hide monaco's built-in blue focus border, we don't need it and it
never showed before either.
- Label add menu is simplified, removing the nested segment.

<img width="1322" alt="Screenshot 2024-04-25 at 22 26 19"
src="https://github.com/go-gitea/gitea/assets/115237/7e394e0c-b7ad-417d-8e9f-12f1dea93ed1">
<img width="1326" alt="Screenshot 2024-04-25 at 22 28 00"
src="https://github.com/go-gitea/gitea/assets/115237/66c8499f-aa9f-4d95-8cca-ef13dfa82c65">
<img width="997" alt="Screenshot 2024-04-25 at 22 36 53"
src="https://github.com/go-gitea/gitea/assets/115237/07896102-c71d-4246-8173-c2bc2e1d3cae">
<img width="832" alt="Screenshot 2024-04-25 at 22 56 09"
src="https://github.com/go-gitea/gitea/assets/115237/d83afc96-08ca-4adc-baf4-3d02804be57c">
<img width="361" alt="Screenshot 2024-04-25 at 22 57 12"
src="https://github.com/go-gitea/gitea/assets/115237/c7371a68-00b5-47d8-84d0-ddc5268b2b2c">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>

4 files changed, 30 insertions, 1 deletions

diff --git a/web_src/css/modules/card.css b/web_src/css/modules/card.css
index 2406def681..d5d5e757d6 100644
--- a/web_src/css/modules/card.css
+++ b/web_src/css/modules/card.css
@@ -21,6 +21,7 @@
   border: 1px solid var(--color-secondary);
   box-shadow: none;
   word-wrap: break-word;
+  border-radius: var(--border-radius);
 }
 
 .ui.card {
diff --git a/web_src/css/modules/menu.css b/web_src/css/modules/menu.css
index e393ec5186..830e4cdbc3 100644
--- a/web_src/css/modules/menu.css
+++ b/web_src/css/modules/menu.css
@@ -799,3 +799,23 @@
 .ui.segment .ui.tabular.menu .active.item:hover {
   background: var(--color-box-body);
 }
+
+.small-menu-items {
+  min-height: 35.4px !important; /* match .small.button in height */
+  background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
+  user-select: none;
+}
+
+.small-menu-items .item {
+  background: var(--color-menu) !important;
+  padding-top: 6px !important;
+  padding-bottom: 6px !important;
+}
+
+.small-menu-items .item:hover {
+  background: var(--color-hover) !important;
+}
+
+.small-menu-items .item.active {
+  background: var(--color-active) !important;
+}
diff --git a/web_src/css/modules/modal.css b/web_src/css/modules/modal.css
index a2acfeaa15..427d2529c8 100644
--- a/web_src/css/modules/modal.css
+++ b/web_src/css/modules/modal.css
@@ -54,6 +54,7 @@ These inconsistent layouts should be refactored to simple ones.
 .ui.modal form > .content {
   padding: 1.5em;
   background: var(--color-body);
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
 }
 
 .ui.modal > .actions,
@@ -63,6 +64,7 @@ These inconsistent layouts should be refactored to simple ones.
   border-color: var(--color-secondary);
   padding: 1rem;
   text-align: right;
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
 }
 
 .ui.modal .content > .actions {
diff --git a/web_src/css/modules/segment.css b/web_src/css/modules/segment.css
index 994ac1779a..cb307dc1a3 100644
--- a/web_src/css/modules/segment.css
+++ b/web_src/css/modules/segment.css
@@ -152,7 +152,9 @@
 }
 
 .ui.attached.segment:has(+ .ui[class*="top attached"].header),
-.ui.attached.segment:last-child {
+.ui.attached.segment:last-child,
+.ui.segment:has(+ .ui.segment:not(.attached)),
+.ui.attached.segment:has(+ .ui.modal) {
   border-radius: 0 0 0.28571429rem 0.28571429rem;
 }
 
@@ -166,6 +168,10 @@
 .ui.segment[class*="top attached"]:first-child {
   margin-top: 0;
 }
+.ui[class*="top attached"].segment:last-child {
+  border-top-left-radius: 0.28571429rem;
+  border-top-right-radius: 0.28571429rem;
+}
 
 .ui.segment[class*="bottom attached"] {
   bottom: 0;