Timeline and color tweaks

- Restore muted effect on timeline author and issuelist comment icon - Remove whitespace inside shared user templates, fixing link hover underline - Use shared author link template more - Use `bold` class instead of CSS - Fix grey-light color being too dark on arc-green - Add missing black-light color - Fix issuelist progress bar color
go-gitea · Nov 13, 2022 · 715a977 · 715a977
1 parent 6f3efdf
commit 715a977
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 37 deletions.
diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
@@ -11,7 +11,7 @@
 		<div class="ui top attached header comment-header df ac sb">
 			<div class="comment-header-left df ac">
 				{{if .OriginalAuthor}}
-					<span class="text black mr-2">
+					<span class="text black bold mr-2">
 						{{svg (MigrationIcon $.root.Repository.GetOriginalURLHostname)}}
 						{{.OriginalAuthor}}
 					</span>

diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
@@ -30,7 +30,7 @@
 					<div class="ui top attached header comment-header df ac sb">
 						<div class="comment-header-left df ac">
 							{{if .Issue.OriginalAuthor}}
-								<span class="text black">
+								<span class="text black bold">
 									{{svg (MigrationIcon .Repository.GetOriginalURLHostname)}}
 									{{.Issue.OriginalAuthor}}
 								</span>
@@ -45,7 +45,7 @@
 									{{avatar .Issue.Poster}}
 								</a>
 								<span class="text grey">
-									<a class="author"{{if gt .Issue.Poster.ID 0}} href="{{.Issue.Poster.HomeLink}}"{{end}}>{{.Issue.Poster.GetDisplayName}}</a>
+									{{template "shared/user/authorlink" .Issue.Poster}}
 									{{.locale.Tr "repo.issues.commented_at" (.Issue.HashTag|Escape) $createdStr | Safe}}
 								</span>
 							{{end}}

diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
@@ -25,7 +25,7 @@
 					<div class="ui top attached header comment-header df ac sb">
 						<div class="comment-header-left df ac">
 							{{if .OriginalAuthor}}
-								<span class="text black mr-2">
+								<span class="text black bold mr-2">
 									{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
 									{{.OriginalAuthor}}
 								</span>
@@ -42,9 +42,7 @@
 									</a>
 								{{end}}
 								<span class="text grey">
-									<a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
-										{{.Poster.GetDisplayName}}
-									</a>
+									{{template "shared/user/authorlink" .Poster}}
 									{{$.locale.Tr "repo.issues.commented_at" (.HashTag|Escape) $createdStr | Safe}}
 								</span>
 							{{end}}
@@ -207,7 +205,7 @@
 					{{if .RemovedAssignee}}
 						{{template "shared/user/avatarlink" .Assignee}}
 						<span class="text grey">
-							<a class="author" {{if gt .Assignee.ID 0}}href="{{.Assignee.HomeLink}}"{{end}}>{{.Assignee.GetDisplayName}}</a>
+							{{template "shared/user/authorlink" .Assignee}}
 							{{if eq .Poster.ID .Assignee.ID}}
 								{{$.locale.Tr "repo.issues.remove_self_assignment" $createdStr | Safe}}
 							{{else}}
@@ -408,7 +406,7 @@
 							<div class="comment-header-left df ac">
 								<span class="text grey">
 									{{if .OriginalAuthor}}
-										<span class="text black">
+										<span class="text black bold">
 											{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
 											{{.OriginalAuthor}}
 										</span>
@@ -536,7 +534,7 @@
 																{{end}}
 																<span class="text grey">
 																	{{if .OriginalAuthor}}
-																		<span class="text black">
+																		<span class="text black bold">
 																			{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
 																			{{.OriginalAuthor}}
 																		</span>

diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
@@ -389,7 +389,7 @@
 									{{avatar $user}}
 								</a>
 								<div class="content">
-									<a class="author">{{$user.DisplayName}}</a>
+									{{template "shared/user/authorlink" $user}}
 									<div class="text">
 										{{$trackedtime}}
 									</div>

diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
@@ -160,7 +160,7 @@
 				</div>
 				<div class="issue-item-icon-right text grey">
 					{{if .NumComments}}
-						<a class="tdn" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
+						<a class="tdn muted" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
 							{{svg "octicon-comment" 16 "mr-2"}}{{.NumComments}}
 						</a>
 					{{end}}

diff --git a/templates/shared/user/authorlink.tmpl b/templates/shared/user/authorlink.tmpl
@@ -1,3 +1 @@
-<a class="author"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>
-	{{.GetDisplayName}}
-</a>
+<a class="author text black bold muted"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>
diff --git a/templates/shared/user/avatarlink.tmpl b/templates/shared/user/avatarlink.tmpl
@@ -1,3 +1 @@
-<a class="avatar"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>
-	{{avatar .}}
-</a>
+<a class="avatar"{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{avatar .}}</a>
diff --git a/templates/shared/user/namelink.tmpl b/templates/shared/user/namelink.tmpl
@@ -1,3 +1 @@
-<a{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>
-	{{.GetDisplayName}}
-</a>
+<a{{if gt .ID 0}} href="{{.HomeLink}}"{{end}}>{{.GetDisplayName}}</a>
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
@@ -79,6 +79,7 @@
   --color-pink: #e03997;
   --color-brown: #a5673f;
   --color-grey: #888888;
+  --color-black: #1b1c1d;
   /* light variants - produced via Sass scale-color(color, $lightness: +25%) */
   --color-red-light: #e45e5e;
   --color-orange-light: #f59555;
@@ -92,9 +93,9 @@
   --color-pink-light: #e86bb1;
   --color-brown-light: #c58b66;
   --color-grey-light: #a6a6a6;
+  --color-black-light: #525558;
   /* other colors */
   --color-gold: #a1882b;
-  --color-black: #1b1c1d;
   --color-white: #ffffff;
   --color-diff-removed-word-bg: #fdb8c0;
   --color-diff-added-word-bg: #acf2bd;

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
@@ -829,7 +829,7 @@
 
         .timeline-avatar {
           position: absolute;
-          left: -72px;
+          left: -68px;
 
           img {
             width: 40px !important;
@@ -846,7 +846,6 @@
         .avatar img {
           width: 20px;
           height: 20px;
-          margin: 0 .25rem;
           vertical-align: middle;
         }
 
@@ -981,10 +980,6 @@
           margin-top: 4px;
         }
 
-        .author {
-          font-weight: 600;
-        }
-
         .comment-form-reply .footer {
           padding-bottom: 1em;
         }
@@ -1165,9 +1160,12 @@
         padding-left: 15px;
 
         .detail {
-          font-size: .9rem;
-          margin-top: 5px;
-          margin-left: 8px;
+          margin-top: 4px;
+          margin-left: 14px;
+
+          .svg {
+            margin-right: 2px;
+          }
         }
 
         .segments {
@@ -2723,12 +2721,10 @@
 
   a {
     color: var(--color-text);
-    text-decoration: none;
   }
 
   a:hover {
     color: var(--color-primary);
-    text-decoration: none;
   }
 }
 

diff --git a/web_src/less/shared/issuelist.less b/web_src/less/shared/issuelist.less
@@ -91,6 +91,14 @@
           border-radius: 3px;
           vertical-align: 2px !important;
         }
+
+        progress::-webkit-progress-value {
+          background-color: var(--color-secondary-dark-5);
+        }
+
+        progress::-moz-progress-bar {
+          background-color: var(--color-secondary-dark-5);
+        }
       }
 
       .conflicting {

diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
@@ -67,8 +67,9 @@
   --color-purple: #b259d0;
   --color-pink: #d22e8b;
   --color-brown: #a47252;
-  --color-grey: #5e626a;
-  /* light variants */
+  --color-grey: #9ea2aa;
+  --color-black: #1e222e;
+  /* light variants - produced via Sass scale-color(color, $lightness: -10%) */
   --color-red-light: #c23636;
   --color-orange-light: #b84f0b;
   --color-yellow-light: #b88a03;
@@ -80,9 +81,9 @@
   --color-purple-light: #a742c9;
   --color-pink-light: #be297d;
   --color-brown-light: #94674a;
-  --color-grey-light: #55585f;
+  --color-grey-light: #8d919b;
+  --color-black-light: #1b1f29;
   /* other colors */
-  --color-black: #1e222e;
   --color-gold: #b1983b;
   --color-white: #ffffff;
   --color-diff-removed-word-bg: #6f3333;