Dropdowns, Labels fixes and more CSS tweaks (#13733)

* Dropdowns and Labels fixes

- Rework dropdown, menu and label styles
- Improve issue sidebar milestone and label sections
- Fix archived repo and private org badge
- Move more colors to CSS vars
- Move issue number to end of title on issue page

* more dropdown fixes

* fix basic blue labels - fixes #13731

* improve class setting on svg

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

web_src/less/_repository.less

@@ -165,14 +165,14 @@
       .label-filter .menu .info {
         display: inline-block;
         padding: .5rem .25rem;
-        border-bottom: 1px solid #cccccc;
+        border-bottom: 1px solid var(--color-secondary);
         font-size: 12px;
         width: 100%;
         white-space: nowrap;
         text-align: center;
 
         code {
-          border: 1px solid #cccccc;
+          border: 1px solid var(--color-secondary);
           border-radius: 3px;
           padding: 1px 2px;
           font-size: 11px;
@@ -388,7 +388,7 @@
       }
 
       .jumpable-path {
-        color: #888888;
+        color: var(--color-text-light-2);
       }
     }
 
@@ -684,9 +684,7 @@
         }
 
         .index {
-          font-weight: 300;
-          color: #aaaaaa;
-          letter-spacing: -1px;
+          color: var(--color-text-light-2);
         }
 
         .label {
@@ -828,7 +826,9 @@
         .avatar.image img {
           width: 20px;
           height: 20px;
-          margin-right: .15em;
+          margin-right: .5rem;
+          position: relative;
+          top: -2px;
         }
 
         &:first-child:not(.commit) {
@@ -853,7 +853,7 @@
           float: left;
           margin-left: -33px;
           margin-right: 8px;
-          color: #666;
+          color: var(--color-text-light-2);
           align-items: center;
           justify-content: center;
 
@@ -1069,11 +1069,11 @@
 
             span.ui.image {
               font-size: 128px;
-              color: #000000;
+              color: var(--color-text);
             }
 
             span.ui.image:hover {
-              color: #000000;
+              color: var(--color-text);
             }
           }
         }
@@ -1218,49 +1218,6 @@
     }
   }
 
-  .labelspage {
-    list-style: none;
-    padding-top: 0;
-
-    .item {
-      margin-top: 0;
-      margin-right: -14px;
-      margin-left: -14px;
-      padding: 10px;
-      border-bottom: 1px solid var(--color-secondary);
-      border-top: none;
-
-      a {
-        font-size: 15px;
-        padding-top: 5px;
-        padding-right: 10px;
-        color: #666666;
-
-        &:hover {
-          color: #000000;
-        }
-
-        &.open-issues {
-          margin-right: 30px;
-        }
-      }
-
-      .ui.label {
-        font-size: 1em;
-      }
-    }
-
-    .item:last-child {
-      border-bottom: none;
-      padding-bottom: 0;
-    }
-
-    .orglabel {
-      opacity: .7;
-    }
-
-  }
-
   .milestone.list {
     list-style: none;
     padding-top: 15px;
@@ -1268,12 +1225,12 @@
     > .item {
       padding-top: 10px;
       padding-bottom: 10px;
-      border-bottom: 1px dashed #aaaaaa;
+      border-bottom: 1px dashed var(--color-secondary);
 
       > a {
         padding-top: 5px;
         padding-right: 10px;
-        color: #000000;
+        color: var(--color-text);
 
         &:hover {
           color: var(--color-primary);
@@ -1292,7 +1249,7 @@
       }
 
       .meta {
-        color: #999999;
+        color: var(--color-text-light-2);
         padding-top: 5px;
 
         .issue-stats .svg {
@@ -1311,10 +1268,10 @@
           font-size: 15px;
           padding-top: 5px;
           padding-right: 10px;
-          color: #666666;
+          color: var(--color-text-light-2);
 
           &:hover {
-            color: #000000;
+            color: var(--color-text);
           }
         }
       }
@@ -1651,7 +1608,7 @@
 
     .file {
       flex: 1;
-      color: #888888;
+      color: var(--color-text-light-2);
       word-break: break-all;
     }
 
@@ -2243,7 +2200,7 @@
       color: #6cc644;
 
       .pull-right {
-        color: #000;
+        color: var(--color-text);
       }
 
       .ui.text {
@@ -2327,19 +2284,19 @@
         }
 
         a {
-          color: black;
+          color: var(--color-text);
 
           &:hover {
-            color: #666666;
+            color: var(--color-primary-light-2);
           }
         }
 
         span.ui {
-          color: black;
+          color: var(--color-text);
         }
 
         &.active {
-          background: rgba(0, 0, 0, .05);
+          background: var(--color-secondary);
         }
       }
     }
@@ -2649,7 +2606,7 @@
     &.key {
       .meta {
         padding-top: 5px;
-        color: #666666;
+        color: var(--color-text-light-2);
       }
     }
 
@@ -2979,10 +2936,15 @@ tbody.commit-list {
 
 #repo-topics {
   margin-top: 5px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
 .repo-topic {
+  font-weight: normal !important;
   cursor: pointer;
+  margin: 2px !important;
 }
 
 #new-dependency-drop-list {
@@ -3189,6 +3151,11 @@ td.blob-excerpt {
   margin-top: 1em;
 }
 
+.sidebar-item-link {
+  display: inline-flex;
+  align-items: center;
+}
+
 .diff-file-box[data-folded="true"] .diff-file-body {
   display: none;
 }
@@ -3226,16 +3193,6 @@ td.blob-excerpt {
   }
 }
 
-.select-project .item {
-  color: inherit;
-  display: inline-flex;
-  align-items: center;
-}
-
-.select-project .item .svg {
-  margin-right: .5rem;
-}
-
 .migrate .cards .card {
   text-align: center;
 }