Rearrange Clone Panel (#31142)

Rearrange the clone panel to use less horizontal space.
The following changes have been made to achieve this:
- Moved everything into the dropdown menu
- Moved the HTTPS/SSH Switch to a separate line
- Moved the "Clone in VS Code"-Button up and added a divider
- Named the dropdown button "Code", added appropriate icon

---------

Co-authored-by: techknowlogick <techknowlogick@gitea.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/css/index.css

@@ -67,6 +67,7 @@
 @import "./repo/header.css";
 @import "./repo/home.css";
 @import "./repo/reactions.css";
+@import "./repo/clone.css";
 
 @import "./editor/fileeditor.css";
 @import "./editor/combomarkdowneditor.css";

web_src/css/repo.css

@@ -101,42 +101,6 @@
   margin-bottom: 12px;
 }
 
-.repository .clone-panel {
-  display: flex;
-  flex: 1;
-}
-
-.repository.wiki .clone-panel {
-  flex: 0;
-}
-
-.repository.wiki .clone-panel input {
-  width: 20ch;
-}
-
-.repository .clone-panel #repo-clone-url {
-  border-radius: 0;
-  flex: 1;
-}
-
-.repository .ui.action.input.clone-panel > button + button,
-.repository .ui.action.input.clone-panel > button + input {
-  margin-left: -1px; /* make the borders overlap to avoid double borders */
-}
-
-.repository .clone-panel > button:first-of-type {
-  border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
-}
-
-.repository .clone-panel > button:last-of-type {
-  border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
-}
-
-.repository .clone-panel .dropdown .menu {
-  right: 0 !important;
-  left: auto !important;
-}
-
 .repository .repo-description {
   font-size: 16px;
   margin-bottom: 5px;
@@ -1615,14 +1579,6 @@ td .commit-summary {
   font-weight: var(--font-weight-normal);
 }
 
-.repository.quickstart .guide #repo-clone-url {
-  border-radius: 0;
-  padding: 5px 10px;
-  font-size: 1.2em;
-  line-height: 1.4;
-  flex: 1
-}
-
 .empty-placeholder {
   display: flex;
   flex-direction: column;

web_src/css/repo/clone.css

@@ -0,0 +1,32 @@
+/* only used by "repo/empty.tmpl" */
+.clone-buttons-combo {
+  flex: 1;
+}
+
+.clone-buttons-combo input {
+  border-left: none !important;
+  border-radius: 0 !important;
+}
+
+/* used by the clone-panel popup */
+.clone-panel-field,
+.clone-panel-list {
+  margin: 10px;
+}
+
+.clone-panel-tab .item {
+  padding: 5px 10px;
+  background: none;
+}
+
+.clone-panel-tab .item.active {
+  border-bottom: 3px solid var(--color-secondary);
+}
+
+.clone-panel-tab + .divider {
+  margin: -1px 0 0;
+}
+
+.clone-panel-list .item {
+  margin: 5px 0;
+}

web_src/css/repo/wiki.css

@@ -59,9 +59,6 @@
 }
 
 @media (max-width: 767.98px) {
-  .repository.wiki .clone-panel #repo-clone-url {
-    width: 160px;
-  }
   .repository.wiki .wiki-content-main.with-sidebar,
   .repository.wiki .wiki-content-sidebar {
     float: none;