Tweak label border CSS (#7739)

Also did various tweaks to label hover and dark theme.

Fixes: https://github.com/go-gitea/gitea/pull/5487

4 files changed, 33 insertions, 17 deletions

diff --git a/public/css/index.css b/public/css/index.css
index b2676282bc..b38d814ea5 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -633,10 +633,11 @@ footer .ui.left,footer .ui.right{line-height:40px}
 .repository #commits-table thead .shatd{text-align:center}
 .repository #commits-table td.sha .sha.label{margin:0}
 .repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n){background-color:rgba(0,0,0,.02)!important}
-.repository #commits-table td.sha .sha.label.isSigned,.repository #repo-files-table .sha.label.isSigned{border:1px solid #bbb}
-.repository #commits-table td.sha .sha.label.isSigned .detail.icon,.repository #repo-files-table .sha.label.isSigned .detail.icon{background:#fafafa;margin:-6px -10px -4px 0;padding:5px 3px 5px 6px;border-left:1px solid #bbb;border-top-left-radius:0;border-bottom-left-radius:0}
+.repository #commits-table td.sha .sha.label,.repository #repo-files-table .sha.label{border:1px solid #bbb}
+.repository #commits-table td.sha .sha.label .detail.icon,.repository #repo-files-table .sha.label .detail.icon{background:#fafafa;margin:-6px -10px -4px 0;padding:5px 3px 5px 6px;border-left:1px solid #bbb;border-top-left-radius:0;border-bottom-left-radius:0}
 .repository #commits-table td.sha .sha.label.isSigned.isVerified,.repository #repo-files-table .sha.label.isSigned.isVerified{border:1px solid #21ba45;background:rgba(33,186,69,.1)}
-.repository #commits-table td.sha .sha.label.isSigned.isVerified .detail.icon,.repository #repo-files-table .sha.label.isSigned.isVerified .detail.icon{border-left:1px solid rgba(33,186,69,.5)}
+.repository #commits-table td.sha .sha.label.isSigned.isVerified .detail.icon,.repository #repo-files-table .sha.label.isSigned.isVerified .detail.icon{border-left:1px solid #21ba45}
+.repository #commits-table td.sha .sha.label.isSigned.isVerified:hover,.repository #repo-files-table .sha.label.isSigned.isVerified:hover{background:rgba(33,186,69,.3)!important}
 .repository .diff-detail-box{padding:7px 0;background:#fff;line-height:30px}
 .repository .diff-detail-box>div:after{clear:both;content:"";display:block}
 .repository .diff-detail-box ol{clear:both;padding-left:0;margin-top:5px;margin-bottom:28px}
diff --git a/public/css/theme-arc-green.css b/public/css/theme-arc-green.css
index f8722ffa5d..605c9b047a 100644
--- a/public/css/theme-arc-green.css
+++ b/public/css/theme-arc-green.css
@@ -211,7 +211,9 @@ input{background:#2e323e}
 .ui.basic.blue.button:hover,.ui.basic.blue.buttons .button:hover{box-shadow:0 0 0 1px #87ab63 inset!important;color:#87ab63!important}
 .ui.basic.blue.button:focus,.ui.basic.blue.buttons .button:focus{box-shadow:0 0 0 1px #87ab63 inset!important;color:#87ab63!important}
 .repository.file.list #file-content .code-view .lines-code .hljs,.repository.file.list #file-content .code-view .lines-code ol,.repository.file.list #file-content .code-view .lines-code pre,.repository.file.list #file-content .code-view .lines-num .hljs,.repository.file.list #file-content .code-view .lines-num ol,.repository.file.list #file-content .code-view .lines-num pre{background-color:#2a2e3a}
-a.ui.label:hover,a.ui.labels .label:hover{background-color:#505667;color:#dbdbdb}
+a.ui.label:hover,a.ui.labels .label:hover{background-color:#505667!important;color:#dbdbdb!important}
+.repository #commits-table td.sha .sha.label,.repository #repo-files-table .sha.label{border-color:#888}
+.repository #commits-table td.sha .sha.label.isSigned .detail.icon,.repository #repo-files-table .sha.label.isSigned .detail.icon{background:0 0;border-left-color:#888}
 .repository .label.list .item{border-bottom:1px dashed #4c505c}
 .ui.basic.blue.button,.ui.basic.blue.buttons .button{box-shadow:0 0 0 1px #87ab63 inset!important;color:#87ab63!important}
 .repository.file.list #file-content .code-view .hljs,.repository.file.list #file-content .code-view .lines-code ol,.repository.file.list #file-content .code-view .lines-code pre,.repository.file.list #file-content .code-view .lines-num .hljs,.repository.file.list #file-content .code-view .lines-num ol,.repository.file.list #file-content .code-view .lines-num pre{background-color:#2a2e3a}
diff --git a/public/less/_repository.less b/public/less/_repository.less
index 8d2ca07d93..093f35f831 100644
--- a/public/less/_repository.less
+++ b/public/less/_repository.less
@@ -1272,17 +1272,15 @@
 
     #commits-table td.sha .sha.label,
     #repo-files-table .sha.label {
-        &.isSigned {
-            border: 1px solid #bbbbbb;
+        border: 1px solid #bbbbbb;
 
-            .detail.icon {
-                background: #fafafa;
-                margin: -6px -10px -4px 0;
-                padding: 5px 3px 5px 6px;
-                border-left: 1px solid #bbbbbb;
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-            }
+        .detail.icon {
+            background: #fafafa;
+            margin: -6px -10px -4px 0;
+            padding: 5px 3px 5px 6px;
+            border-left: 1px solid #bbbbbb;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
         }
 
         &.isSigned.isVerified {
@@ -1290,7 +1288,11 @@
             background: fade(#21ba45, 10%);
 
             .detail.icon {
-                border-left: 1px solid fade(#21ba45, 50%);
+                border-left: 1px solid #21ba45;
+            }
+
+            &:hover {
+                background: fade(#21ba45, 30%) !important;
             }
         }
     }
diff --git a/public/less/themes/arc-green.less b/public/less/themes/arc-green.less
index 12d7eb2db1..37911c186c 100644
--- a/public/less/themes/arc-green.less
+++ b/public/less/themes/arc-green.less
@@ -1091,8 +1091,19 @@ input {
 
 a.ui.label:hover,
 a.ui.labels .label:hover {
-    background-color: #505667;
-    color: #dbdbdb;
+    background-color: #505667 !important;
+    color: #dbdbdb !important;
+}
+
+.repository #commits-table td.sha .sha.label,
+.repository #repo-files-table .sha.label {
+    border-color: #888;
+}
+
+.repository #commits-table td.sha .sha.label.isSigned .detail.icon,
+.repository #repo-files-table .sha.label.isSigned .detail.icon {
+    background: none;
+    border-left-color: #888;
 }
 
 .repository .label.list .item {