Various UI and arc-green fixes (#13291)

- introduce variable for border-radius value
- fix some white borders in arc-green
- add text selection and placeholder in arc-green
- tweak branch list footer
- more things I forgot

Co-authored-by: Lauris BH <[email protected]>
Co-authored-by: techknowlogick <[email protected]>
Co-authored-by: zeripath <[email protected]>

Author: 4 people

templates/repo/branch/list.tmpl

@@ -19,7 +19,7 @@
 									{{svg "octicon-shield-lock"}}
 								{{end}}
 								<a href="{{$.RepoLink}}/src/branch/{{$.DefaultBranch | EscapePound}}">{{$.DefaultBranch}}</a>
-								<p class="info">{{svg "octicon-git-commit"}}<a href="{{$.RepoLink}}/commit/{{.Commit.ID.String}}">{{ShortSha .Commit.ID.String}}</a> · <span class="commit-message">{{RenderCommitMessage .Commit.CommitMessage $.RepoLink $.Repository.ComposeMetas}}</span> · {{$.i18n.Tr "org.repo_updated"}} {{TimeSince .Commit.Committer.When $.i18n.Lang}}</p>
+								<p class="info df ac my-2">{{svg "octicon-git-commit" 16 "mr-2"}}<a href="{{$.RepoLink}}/commit/{{.Commit.ID.String}}">{{ShortSha .Commit.ID.String}}</a> · <span class="commit-message">{{RenderCommitMessage .Commit.CommitMessage $.RepoLink $.Repository.ComposeMetas}}</span> · {{$.i18n.Tr "org.repo_updated"}} {{TimeSince .Commit.Committer.When $.i18n.Lang}}</p>
 							{{end}}
 						{{end}}
 						</td>

templates/repo/sub_menu.tmpl

@@ -1,4 +1,4 @@
-<div class="ui segments repository-summary">
+<div class="ui segments repository-summary{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats }} repository-summary-language-stats{{end}}">
 	<div class="ui segment sub-menu repository-menu">
 		<div class="ui two horizontal center link list">
 			{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo)}}

web_src/less/_base.less

@@ -5,6 +5,7 @@
   --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
   /* other variables */
   --fonts-regular: var(--fonts-proportional), var(--fonts-emoji), sans-serif;
+  --border-radius: .28571429rem;
 }
 
 :root:lang(ja) {
@@ -114,7 +115,7 @@ a {
 }
 
 .rounded {
-  border-radius: .28571429rem !important;
+  border-radius: var(--border-radius) !important;
 }
 
 .wrap {
@@ -1230,6 +1231,18 @@ table th[data-sortt-desc] {
   }
 }
 
+.ui.dropdown .menu .item {
+  border-radius: 0;
+}
+
+.ui.dropdown .menu .item:first-of-type {
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
+.ui.dropdown .menu .item:last-of-type {
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+}
+
 .text-label {
   display: inline-flex !important;
   align-items: center !important;

web_src/less/_repository.less

@@ -248,7 +248,7 @@
       padding: 0 5px;
 
       &:first-child {
-        border-radius: .28571429rem 0 0 .28571429rem;
+        border-radius: var(--border-radius) 0 0 var(--border-radius);
       }
     }
 
@@ -1948,7 +1948,7 @@
       }
 
       .clone.button:first-child {
-        border-radius: .28571429rem 0 0 .28571429rem;
+        border-radius: var(--border-radius) 0 0 var(--border-radius);
       }
 
       .ui.action.small.input {
@@ -2390,7 +2390,14 @@
 
       .item {
         width: 100%;
-        border-radius: 3px;
+
+        &:first-of-type {
+          border-radius: var(--border-radius) 0 0 var(--border-radius);
+        }
+
+        &:last-of-type {
+          border-radius: 0 var(--border-radius) var(--border-radius) 0;
+        }
 
         a {
           color: black;
@@ -2499,6 +2506,8 @@
   }
 
   .repository-summary {
+    box-shadow: none !important;
+
     .segment.language-stats-details,
     .segment.repository-summary {
       border-top: none;
@@ -2528,6 +2537,15 @@
     }
   }
 
+  .repository-menu {
+    padding: 0 !important;
+  }
+
+  .repository-menu .item {
+    padding-top: 9px !important;
+    padding-bottom: 9px !important;
+  }
+
   &.diff .committed-by {
     padding-top: .5rem;
 
@@ -3228,11 +3246,11 @@ td.blob-excerpt {
 }
 
 .diff-file-box[data-folded="true"] .diff-file-header {
-  border-radius: .28571429rem !important;
+  border-radius: var(--border-radius) !important;
 }
 
 /* prevent page shaking on language bar click */
-.repository.file .repository-summary {
+.repository-summary-language-stats {
   height: 48px;
   overflow: hidden;
 }

web_src/less/themes/theme-arc-green.less

@@ -388,6 +388,14 @@
   color: #fff;
 }
 
+.repository .ui.segment.sub-menu .list .item.active {
+  background: #404552;
+}
+
+.ui.segments {
+  border-color: #454b5a;
+}
+
 .ui.horizontal.segments > .segment {
   background-color: #383c4a;
 }
@@ -433,6 +441,15 @@ body {
   background: #87ab63 !important;
 }
 
+::selection {
+  background: #87ab63 !important;
+  color: #fff !important;
+}
+
+::placeholder {
+  color: #7f7f7f !important;
+}
+
 a {
   color: #87ab63;
 }
@@ -535,6 +552,7 @@ a:hover {
   border: 1px solid #333640;
 }
 
+.ui.secondary.menu .active.item,
 .ui.secondary.menu .dropdown.item:hover,
 .ui.secondary.menu .link.item:hover,
 .ui.secondary.menu .active.item:hover,
@@ -549,6 +567,12 @@ a:hover {
   background: #454b5a;
 }
 
+.ui.link.list .item,
+.ui.link.list a.item,
+.ui.link.list .item a:not(.ui) {
+  color: #dbdbdb;
+}
+
 .ui.menu .ui.dropdown .menu > .item {
   color: #9e9e9e !important;
 }
@@ -622,8 +646,8 @@ footer {
 .ui.label,
 .ui.label.basic {
   color: #dbdbdb;
-  border-color: rgb(152, 152, 152);
-  background-color: #2a2e39;
+  border-color: #6a737d;
+  background-color: #353945;
 }
 
 .issue.list > .item .title {
@@ -672,6 +696,7 @@ a.ui.basic.green.label:hover {
 .ui.ui.menu .item.disabled,
 .ui.ui.menu .item.disabled:hover {
   color: #626773;
+  opacity: 1;
 }
 
 .ui.disabled.checkbox label,
@@ -855,7 +880,7 @@ a.ui.basic.green.label:hover {
 .ui.basic.button,
 .ui.basic.buttons .button {
   color: #9e9e9e;
-  background: rgba(0, 0, 0, .08);
+  background: rgba(0, 0, 0, .06);
   box-shadow: none;
 }
 
@@ -915,8 +940,8 @@ a.ui.basic.green.label:hover {
 }
 
 .ui.table tbody tr {
-  border-color: #333640;
-  background: #2a2e3a;
+  border-color: #404552;
+  background: #353945;
 }
 
 .ui .text.grey {
@@ -1245,6 +1270,11 @@ td.blob-hunk {
   color: #dbdbdb !important;
 }
 
+.repository .filter.menu.labels .label-filter .menu .info,
+.repository .filter.menu.labels .label-filter .menu .info code {
+  border-color: #4e5361;
+}
+
 .ui.card,
 .ui.cards > .card {
   background: #353945;
@@ -1719,6 +1749,7 @@ a.ui.labels .label:hover {
   border-color: #634343 !important;
 }
 
+.repository .labelspage .item,
 .organization.settings .labelspage .item,
 .organization.teams .repositories .item:not(:last-child),
 .organization.teams .members .item:not(:last-child),
@@ -1727,8 +1758,14 @@ a.ui.labels .label:hover {
   border-bottom-color: #404552;
 }
 
+.repository .labelspage .item a,
+.organization.settings .labelspage .item a {
+  color: #6a737d;
+}
+
+.repository .labelspage .item a:hover,
 .organization.settings .labelspage .item a:hover {
-  color: #fff;
+  color: #9e9e9e;
 }
 
 .ui.blue.button:active,
@@ -1766,6 +1803,11 @@ a.ui.labels .label:hover {
   background: #383c4a;
 }
 
+.minicolors-panel {
+  background: #404552 !important;
+  border-color: #6a737d !important;
+}
+
 .editor-toolbar {
   background-color: #404552;
   border-color: #4b505f;