Start cleaning the messy ".ui.left / .ui.right", improve label list page, fix stackable menu (#24393)

Since 2015/2016, there is a global pollution: ".ui.left" / ".ui.right".

Fomantic UI doesn't work this way, it just conflicts with many Fomantic
definitions.

This PR starts the cleaning work of such techinical debts.

And, the "label list" page has been quite messy for long time, for
example, why "li" appears in "div" ......

And fix #24296

<details>


![image](https://user-images.githubusercontent.com/2114189/235051281-54c5374c-b5fd-4b5f-9aa2-02d4bb2d9112.png)


![image](https://user-images.githubusercontent.com/2114189/235055703-2ba042e0-4db7-4e63-8646-02f390d496b5.png)


![image](https://user-images.githubusercontent.com/2114189/235056310-4f6ffdc2-5758-4927-8fb8-314d9fb72a6b.png)


![image](https://user-images.githubusercontent.com/2114189/235058400-dab1c9ec-3325-4671-8345-aee6b0b68042.png)


![image](https://user-images.githubusercontent.com/2114189/235058424-85509532-b9bc-43ad-b00f-a87184c60f22.png)

</details>

web_src/css/base.css

@@ -1472,10 +1472,12 @@ img.ui.avatar,
   color: var(--color-gold) !important;
 }
 
+/* FIXME: this is a serious pollution, do not use this for "float: left" anymore */
 .ui.left:not(.action) {
   float: left;
 }
 
+/* FIXME: this is a serious pollution, do not use this for "float: right" anymore */
 .ui.right:not(.action) {
   float: right;
 }
@@ -2660,38 +2662,6 @@ table th[data-sortt-desc] .svg {
   background: var(--color-secondary-dark-1) !important;
 }
 
-.labelspage {
-  list-style: none;
-  padding-top: 0;
-}
-
-.labelspage .item {
-  border-bottom: 1px solid var(--color-secondary);
-  border-top: none;
-}
-
-.labelspage .item a {
-  font-size: 12px;
-  padding-right: 10px;
-  color: var(--color-text-light);
-}
-
-.labelspage .item a:hover {
-  color: var(--color-primary-light-2);
-}
-
-.labelspage .item a.open-issues {
-  margin-right: 30px;
-}
-
-.labelspage .item:last-child {
-  border-bottom: none;
-  padding-bottom: 0;
-}
-
-.labelspage .orglabel {
-  opacity: 0.7;
-}
 
 /* https://github.com/go-gitea/gitea/pull/11486 */
 .ui.sub.header {
@@ -2796,21 +2766,16 @@ table th[data-sortt-desc] .svg {
   height: 15px;
 }
 
-@media (max-width: 767px) {
-  .ui.stackable.menu:not(.no-vertical-tabs) {
-    overflow-y: hidden;
-    overflow-x: auto;
-    flex-direction: row;
-    flex-wrap: nowrap !important;
-  }
-  .ui.stackable.menu:not(.no-vertical-tabs) .item {
-    width: initial !important;
-  }
-  .ui.stackable.menu:not(.no-vertical-tabs) > .dropdown.item {
-    position: initial;
-  }
-  .ui.stackable.menu:not(.no-vertical-tabs) .menu {
-    flex-direction: row;
+.g-menu-stackable-scrollable {
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+
+@media (max-width: 767.98px) {
+  /* also respect Fomantic's "stackable" definition, use the same breakpoint to reset our styles */
+  .g-menu-stackable-scrollable {
+    overflow-x: unset;
+    overflow-y: unset;
   }
 }
 

web_src/css/helpers.css

@@ -68,16 +68,22 @@ Gitea's private styles use `g-` prefix.
 .gt-cursor-default { cursor: default !important; }
 .gt-invisible { visibility: hidden !important; }
 .gt-items-start { align-items: flex-start !important; }
-.gt-overflow-x-scroll { overflow-x: scroll !important; }
 .gt-pointer-events-none { pointer-events: none !important; }
 .gt-relative { position: relative !important; }
 .gt-whitespace-nowrap { white-space: nowrap !important; }
 .gt-whitespace-pre { white-space: pre !important; }
 .gt-whitespace-pre-wrap { white-space: pre-wrap !important; }
 
+.gt-overflow-x-auto { overflow-x: auto !important; }
+.gt-overflow-x-scroll { overflow-x: scroll !important; }
+.gt-overflow-y-hidden { overflow-y: hidden !important; }
+
 .gt-w-screen { width: 100vw !important; }
 .gt-h-screen { height: 100vh !important; }
 
+.gt-float-left { float: left !important; }
+.gt-float-right { float: right !important; }
+
 .gt-rounded { border-radius: var(--border-radius) !important; }
 .gt-rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
 .gt-rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; }

web_src/css/home.css

@@ -43,39 +43,38 @@
   color: var(--color-green);
 }
 
-footer {
+.page-footer {
+  display: flex;
   background-color: var(--color-footer);
   border-top: 1px solid var(--color-secondary);
   line-height: 39px;
-  flex-basis: 40px;
-  color: var(--color-text-light);
   padding: 0 20px;
 }
 
-footer .right.links {
+.page-footer .left-links {
+  flex: 1;
+}
+
+.page-footer .right-links {
   min-width: 180px; /* make sure the menu dropdown doesn't overflow horizontally when language name is short */
 }
 
-footer .right.links > a {
+.page-footer .right-links > a {
   border-left: 1px solid var(--color-secondary-dark-1);
   padding-left: 8px;
   margin-left: 5px;
 }
 
-footer .ui.dropdown.language .menu {
+.page-footer .ui.dropdown.language .menu {
   height: 500px;
   max-height: calc(100vh - 60px);
   overflow-y: auto;
   margin-bottom: 10px;
 }
 
-
 @media (max-width: 880px) {
-  footer .ui.left,
-  footer .ui.right {
-    width: 100%;
+  .page-footer {
     display: block;
     text-align: center;
-    float: none;
   }
 }

web_src/css/index.css

@@ -30,9 +30,10 @@
 @import "./install.css";
 @import "./form.css";
 @import "./repository.css";
-@import "./repository-release-tag.css";
+@import "./repository/release-tag.css";
+@import "./repository/issue-label.css";
 @import "./editor.css";
-@import "./editor-markdown.css";
+@import "./editor/combomarkdowneditor.css";
 @import "./organization.css";
 @import "./user.css";
 @import "./dashboard.css";

web_src/css/repository.css

@@ -160,7 +160,7 @@
 }
 
 .repository .ui.tabs.divider {
-  margin-top: 0;
+  margin-top: -1px;
   margin-bottom: 20px;
 }
 

web_src/css/repository/issue-label.css

@@ -0,0 +1,44 @@
+.issue-label-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.issue-label-list .item {
+  border-bottom: 1px solid var(--color-secondary);
+  display: flex;
+  padding: 1em 0;
+  margin: 0;
+}
+
+.issue-label-list .item:first-child {
+  padding-top: 0;
+}
+
+.issue-label-list .item:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.issue-label-list .item .label-title {
+  width: 33%;
+}
+
+.issue-label-list .item .label-issues {
+  width: 33%;
+}
+
+.issue-label-list .item .label-operation {
+  width: 33%;
+  text-align: right;
+}
+
+.issue-label-list .item a {
+  font-size: 12px;
+  padding-right: 10px;
+  color: var(--color-text-light);
+}
+
+.issue-label-list .item.org-label {
+  opacity: 0.7;
+}