Prettify timeline 3 (#11139)

* Fix timeline comments sections borders

* Fix files dropzone right alignment

* Update review comment form and controls

* Clear segment style from comment form tabs

* Remove segment class from pulls tab

* Fix Time Tracker - Add Time button border

* Fix buttons right alignment

* Markdown tab minimal height

* Fix DropZone hover effect

* Fix Lint + remove unused controls class

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: zeripath <art27@cantab.net>

templates/repo/diff/comment_form.tmpl

@@ -2,7 +2,7 @@
 	{{if $.hidden}}
 		<button class="comment-form-reply ui green labeled icon tiny button"><i class="reply icon"></i> {{$.root.i18n.Tr "repo.diff.comment.reply"}}</button>
 	{{end}}
-	<form class="ui form {{if $.hidden}}hide comment-form comment-form-reply{{end}}" action="{{$.root.Issue.HTMLURL}}/files/reviews/comments" method="post">
+	<form class="ui form {{if $.hidden}}hide{{end}} comment-form comment-form-reply" action="{{$.root.Issue.HTMLURL}}/files/reviews/comments" method="post">
 	{{$.root.CsrfTokenHtml}}
 		<input type="hidden" name="latest_commit_id" value="{{$.root.AfterCommitID}}"/>
 		<input type="hidden" name="side" value="{{if $.Side}}{{$.Side}}{{end}}">
@@ -11,30 +11,30 @@
 		<input type="hidden" name="diff_start_cid">
 		<input type="hidden" name="diff_end_cid">
 		<input type="hidden" name="diff_base_cid">
-		<div class="ui top attached tabular menu" {{if not $.hidden}}onload="assingMenuAttributes(this)" {{end}}data-write="write" data-preview="preview">
+		<div class="ui top tabular menu" {{if not $.hidden}}onload="assingMenuAttributes(this)" {{end}}data-write="write" data-preview="preview">
 			<a class="active item" data-tab="write">{{$.root.i18n.Tr "write"}}</a>
 			<a class="item" data-tab="preview" data-url="{{$.root.Repository.APIURL}}/markdown" data-context="{{$.root.RepoLink}}">{{$.root.i18n.Tr "preview"}}</a>
 		</div>
-		<div class="ui bottom attached active tab segment" data-tab="write">
-			<div class="field">
+		<div class="field">
+			<div class="ui active tab" data-tab="write">
 				<textarea name="content" placeholder="{{$.root.i18n.Tr "repo.diff.comment.placeholder"}}"></textarea>
 			</div>
+			<div class="ui tab markdown" data-tab="preview">
+			{{.i18n.Tr "loading"}}
+			</div>
 		</div>
-		<div class="ui bottom attached tab segment markdown" data-tab="preview">
-		{{.i18n.Tr "loading"}}
-		</div>
-		<div class="footer">
+		<div class="field footer">
 			<span class="markdown-info">{{svg "octicon-markdown" 16}} {{$.root.i18n.Tr "repo.diff.comment.markdown_info"}}</span>
-			<div class="ui right floated">
+			<div class="ui right">
 				{{if $.reply}}
-					<input type="hidden" name="reply" value="{{$.reply}}">
 					<button class="ui submit green tiny button btn-reply" onclick="window.submitReply(this);">{{$.root.i18n.Tr "repo.diff.comment.reply"}}</button>
+					<input type="hidden" name="reply" value="{{$.reply}}">
 				{{else}}
 					{{if $.root.CurrentReview}}
 						<button name="is_review" value="true" type="submit"
 								class="ui submit green tiny button btn-add-comment">{{$.root.i18n.Tr "repo.diff.comment.add_review_comment"}}</button>
 					{{else}}
-						<button name="is_review" value="true"  type="submit"
+						<button name="is_review" value="true" type="submit"
 								class="ui submit green tiny button btn-start-review">{{$.root.i18n.Tr "repo.diff.comment.start_review"}}</button>
 						<button type="submit"
 								class="ui submit tiny basic button btn-add-single">{{$.root.i18n.Tr "repo.diff.comment.add_single_comment"}}</button>

templates/repo/editor/upload.tmpl

@@ -27,7 +27,7 @@
 			</div>
 			<div class="field">
 				<div class="files"></div>
-				<div class="ui basic button dropzone" id="dropzone" data-upload-url="{{.RepoLink}}/upload-file" data-remove-url="{{.RepoLink}}/upload-remove" data-csrf="{{.CsrfToken}}" data-accepts="{{.UploadAllowedTypes}}" data-max-file="{{.UploadMaxFiles}}" data-max-size="{{.UploadMaxSize}}" data-default-message="{{.i18n.Tr "dropzone.default_message"}}" data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}" data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}" data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"></div>
+				<div class="ui dropzone" id="dropzone" data-upload-url="{{.RepoLink}}/upload-file" data-remove-url="{{.RepoLink}}/upload-remove" data-csrf="{{.CsrfToken}}" data-accepts="{{.UploadAllowedTypes}}" data-max-file="{{.UploadMaxFiles}}" data-max-size="{{.UploadMaxSize}}" data-default-message="{{.i18n.Tr "dropzone.default_message"}}" data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}" data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}" data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"></div>
 			</div>
 			{{template "repo/editor/commit_form" .}}
 		</form>

templates/repo/issue/comment_tab.tmpl

@@ -1,17 +1,19 @@
+<div class="ui top tabular menu" data-write="write" data-preview="preview">
+	<a class="active item" data-tab="write">{{.i18n.Tr "write"}}</a>
+	<a class="item" data-tab="preview" data-url="{{.Repository.APIURL}}/markdown" data-context="{{.RepoLink}}">{{.i18n.Tr "preview"}}</a>
+</div>
 <div class="field">
-	<div class="ui top attached tabular menu" data-write="write" data-preview="preview">
-		<a class="active item" data-tab="write">{{.i18n.Tr "write"}}</a>
-		<a class="item" data-tab="preview" data-url="{{.Repository.APIURL}}/markdown" data-context="{{.RepoLink}}">{{.i18n.Tr "preview"}}</a>
-	</div>
-	<div class="ui bottom attached active tab segment" data-tab="write">
+	<div class="ui bottom active tab" data-tab="write">
 		<textarea id="content" class="edit_area js-quick-submit" name="content" tabindex="4" data-id="issue-{{.RepoName}}" data-url="{{.Repository.APIURL}}/markdown" data-context="{{.Repo.RepoLink}}">
 {{if .BodyQuery}}{{.BodyQuery}}{{else if .IssueTemplate}}{{.IssueTemplate}}{{else if .PullRequestTemplate}}{{.PullRequestTemplate}}{{else}}{{.content}}{{end}}</textarea>
 	</div>
-	<div class="ui bottom attached tab segment markdown" data-tab="preview">
+	<div class="ui bottom tab markdown" data-tab="preview">
 		{{.i18n.Tr "loading"}}
 	</div>
 </div>
 {{if .IsAttachmentEnabled}}
+<div class="field">
 	<div class="files"></div>
-	<div class="ui basic button dropzone" id="dropzone" data-upload-url="{{AppSubUrl}}/attachments" data-accepts="{{.AttachmentAllowedTypes}}" data-max-file="{{.AttachmentMaxFiles}}" data-max-size="{{.AttachmentMaxSize}}" data-default-message="{{.i18n.Tr "dropzone.default_message"}}" data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}" data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}" data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"></div>
+	<div class="ui dropzone" id="dropzone" data-upload-url="{{AppSubUrl}}/attachments" data-accepts="{{.AttachmentAllowedTypes}}" data-max-file="{{.AttachmentMaxFiles}}" data-max-size="{{.AttachmentMaxSize}}" data-default-message="{{.i18n.Tr "dropzone.default_message"}}" data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}" data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}" data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"></div>
+</div>
 {{end}}

templates/repo/issue/view.tmpl

@@ -20,7 +20,7 @@
 		{{if .Issue.IsPull}}
 			{{template "repo/issue/view_title" .}}
 			{{template "repo/pulls/tab_menu" .}}
-			<div class="ui bottom attached tab pull segment active" data-tab="request-{{.ID}}">
+			<div class="ui bottom attached tab pull active" data-tab="request-{{.ID}}">
 				{{template "repo/issue/view_content" .}}
 			</div>
 		{{else}}

templates/repo/issue/view_content.tmpl

@@ -87,21 +87,23 @@
 							{{template "repo/issue/comment_tab" .}}
 							{{.CsrfTokenHtml}}
 							<input id="status" name="status" type="hidden">
-							<div class="text right">
-								{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
-									{{if .Issue.IsClosed}}
-										<div id="status-button" class="ui green basic button" tabindex="6" data-status="{{.i18n.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.reopen_comment_issue"}}" data-status-val="reopen">
-											{{.i18n.Tr "repo.issues.reopen_issue"}}
-										</div>
-									{{else}}
-										<div id="status-button" class="ui red basic button" tabindex="6" data-status="{{.i18n.Tr "repo.issues.close_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.close_comment_issue"}}" data-status-val="close">
-											{{.i18n.Tr "repo.issues.close_issue"}}
-										</div>
+							<div class="field footer">
+								<div class="text right">
+									{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
+										{{if .Issue.IsClosed}}
+											<div id="status-button" class="ui green basic button" tabindex="6" data-status="{{.i18n.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.reopen_comment_issue"}}" data-status-val="reopen">
+												{{.i18n.Tr "repo.issues.reopen_issue"}}
+											</div>
+										{{else}}
+											<div id="status-button" class="ui red basic button" tabindex="6" data-status="{{.i18n.Tr "repo.issues.close_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.close_comment_issue"}}" data-status-val="close">
+												{{.i18n.Tr "repo.issues.close_issue"}}
+											</div>
+										{{end}}
 									{{end}}
-								{{end}}
-								<button class="ui green button" tabindex="5">
-									{{.i18n.Tr "repo.issues.create_comment"}}
-								</button>
+									<button class="ui green button" tabindex="5">
+										{{.i18n.Tr "repo.issues.create_comment"}}
+									</button>
+								</div>
 							</div>
 						</form>
 					</div>
@@ -136,21 +138,23 @@
 								{{template "repo/issue/comment_tab" .}}
 								{{.CsrfTokenHtml}}
 								<input id="status" name="status" type="hidden">
-								<div class="text right">
-									{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
-										{{if .Issue.IsClosed}}
-											<div id="status-button" class="ui green basic button" tabindex="6" data-status="{{.i18n.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.reopen_comment_issue"}}" data-status-val="reopen">
-												{{.i18n.Tr "repo.issues.reopen_issue"}}
-											</div>
-										{{else}}
-											<div id="status-button" class="ui red basic button" tabindex="6" data-status="{{.i18n.Tr "repo.issues.close_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.close_comment_issue"}}" data-status-val="close">
-												{{.i18n.Tr "repo.issues.close_issue"}}
-											</div>
+								<div class="field footer">
+									<div class="text right">
+										{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
+											{{if .Issue.IsClosed}}
+												<div id="status-button" class="ui green basic button" tabindex="6" data-status="{{.i18n.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.reopen_comment_issue"}}" data-status-val="reopen">
+													{{.i18n.Tr "repo.issues.reopen_issue"}}
+												</div>
+											{{else}}
+												<div id="status-button" class="ui red basic button" tabindex="6" data-status="{{.i18n.Tr "repo.issues.close_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.close_comment_issue"}}" data-status-val="close">
+													{{.i18n.Tr "repo.issues.close_issue"}}
+												</div>
+											{{end}}
 										{{end}}
-									{{end}}
-									<button class="ui green button" tabindex="5">
-										{{.i18n.Tr "repo.issues.create_comment"}}
-									</button>
+										<button class="ui green button" tabindex="5">
+											{{.i18n.Tr "repo.issues.create_comment"}}
+										</button>
+									</div>
 								</div>
 							</form>
 						</div>
@@ -171,19 +175,22 @@
 
 <div class="hide" id="edit-content-form">
 	<div class="ui comment form">
-		<div class="ui top attached tabular menu">
+		<div class="ui top tabular menu">
 			<a class="active write item">{{$.i18n.Tr "write"}}</a>
 			<a class="preview item" data-url="{{$.Repository.APIURL}}/markdown" data-context="{{$.RepoLink}}">{{$.i18n.Tr "preview"}}</a>
 		</div>
-		<div class="ui bottom attached active write tab segment">
-			<textarea tabindex="1" name="content"></textarea>
-		</div>
-		<div class="ui bottom attached tab preview segment markdown">
-			{{$.i18n.Tr "loading"}}
+		<div class="field">
+			<div class="ui bottom active tab write">
+				<textarea tabindex="1" name="content"></textarea>
+			</div>
+			<div class="ui bottom tab preview markdown">
+				{{$.i18n.Tr "loading"}}
+			</div>
 		</div>
 		{{if .IsAttachmentEnabled}}
+		<div class="field">
 			<div class="comment-files"></div>
-			<div class="ui basic button dropzone" id="comment-dropzone"
+			<div class="ui dropzone" id="comment-dropzone"
 				data-upload-url="{{AppSubUrl}}/attachments"
 				data-remove-url="{{AppSubUrl}}/attachments/delete"
 				data-csrf="{{.CsrfToken}}" data-accepts="{{.AttachmentAllowedTypes}}"
@@ -193,10 +200,13 @@
 				data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}"
 				data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}">
 			</div>
+		</div>
 		{{end}}
-		<div class="text right edit buttons">
-			<div class="ui basic blue cancel button" tabindex="3">{{.i18n.Tr "repo.issues.cancel"}}</div>
-			<div class="ui green save button" tabindex="2">{{.i18n.Tr "repo.issues.save"}}</div>
+		<div class="field footer">
+			<div class="text right edit">
+				<div class="ui basic blue cancel button" tabindex="3">{{.i18n.Tr "repo.issues.cancel"}}</div>
+				<div class="ui green save button" tabindex="2">{{.i18n.Tr "repo.issues.save"}}</div>
+			</div>
 		</div>
 	</div>
 </div>

templates/repo/issue/view_content/sidebar.tmpl

@@ -304,7 +304,6 @@
 							{{end}}
 							<div class="ui buttons two fluid start-add">
 								<button onclick="this.disabled=true;window.toggleStopwatch()" class="ui button poping up start" data-content='{{.i18n.Tr "repo.issues.start_tracking"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.start_tracking_short"}}</button>
-								<button onclick="window.timeAddManual()" class="ui button green poping up add-time" data-content='{{.i18n.Tr "repo.issues.add_time"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.add_time_short"}}</button>
 								<div class="ui mini modal">
 									<div class="header">{{.i18n.Tr "repo.issues.add_time"}}</div>
 									<div class="content">
@@ -319,6 +318,7 @@
 										<div class="ui red cancel button">{{.i18n.Tr "repo.issues.add_time_cancel"}}</div>
 									</div>
 								</div>
+								<button onclick="window.timeAddManual()" class="ui button green poping up add-time" data-content='{{.i18n.Tr "repo.issues.add_time"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.add_time_short"}}</button>
 							</div>
 						{{end}}
 					</div>

templates/repo/pulls/commits.tmpl

@@ -11,7 +11,7 @@
 		<div class="ui divider"></div>
 		{{template "repo/issue/view_title" .}}
 		{{template "repo/pulls/tab_menu" .}}
-		<div class="ui bottom attached tab pull segment active">
+		<div class="ui bottom attached tab pull active">
 			{{template "repo/commits_table" .}}
 		</div>
 	</div>

templates/repo/pulls/files.tmpl

@@ -12,7 +12,7 @@
 		{{template "repo/issue/view_title" .}}
 		{{template "repo/pulls/tab_menu" .}}
 		{{template "base/alert" .}}
-		<div class="ui bottom attached tab pull segment active">
+		<div class="ui bottom attached tab pull active">
 			{{template "repo/diff/box" .}}
 		</div>
 	</div>

templates/repo/release/new.tmpl

@@ -49,8 +49,10 @@
 					<textarea name="content">{{.content}}</textarea>
 				</div>
 				{{if .IsAttachmentEnabled}}
+				<div class="field">
 					<div class="files"></div>
-					<div class="ui basic button dropzone" id="dropzone" data-upload-url="{{AppSubUrl}}/attachments" data-accepts="{{.AttachmentAllowedTypes}}" data-max-file="{{.AttachmentMaxFiles}}" data-max-size="{{.AttachmentMaxSize}}" data-default-message="{{.i18n.Tr "dropzone.default_message"}}" data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}" data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}" data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"></div>
+					<div class="ui dropzone" id="dropzone" data-upload-url="{{AppSubUrl}}/attachments" data-accepts="{{.AttachmentAllowedTypes}}" data-max-file="{{.AttachmentMaxFiles}}" data-max-size="{{.AttachmentMaxSize}}" data-default-message="{{.i18n.Tr "dropzone.default_message"}}" data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}" data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}" data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"></div>
+				</div>
 				{{end}}
 			</div>
 			<div class="ui container">

web_src/js/index.js

@@ -43,9 +43,9 @@ function initCommentPreviewTab($form) {
       _csrf: csrf,
       mode: 'gfm',
       context: $this.data('context'),
-      text: $form.find(`.tab.segment[data-tab="${$tabMenu.data('write')}"] textarea`).val()
+      text: $form.find(`.tab[data-tab="${$tabMenu.data('write')}"] textarea`).val()
     }, (data) => {
-      const $previewPanel = $form.find(`.tab.segment[data-tab="${$tabMenu.data('preview')}"]`);
+      const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
       $previewPanel.html(data);
       $('pre code', $previewPanel[0]).each(function () {
         highlight(this);
@@ -74,9 +74,9 @@ function initEditPreviewTab($form) {
         _csrf: csrf,
         mode: 'gfm',
         context,
-        text: $form.find(`.tab.segment[data-tab="${$tabMenu.data('write')}"] textarea`).val()
+        text: $form.find(`.tab[data-tab="${$tabMenu.data('write')}"] textarea`).val()
       }, (data) => {
-        const $previewPanel = $form.find(`.tab.segment[data-tab="${$tabMenu.data('preview')}"]`);
+        const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
         $previewPanel.html(data);
         $('pre code', $previewPanel[0]).each(function () {
           highlight(this);
@@ -94,9 +94,9 @@ function initEditDiffTab($form) {
     $.post($this.data('url'), {
       _csrf: csrf,
       context: $this.data('context'),
-      content: $form.find(`.tab.segment[data-tab="${$tabMenu.data('write')}"] textarea`).val()
+      content: $form.find(`.tab[data-tab="${$tabMenu.data('write')}"] textarea`).val()
     }, (data) => {
-      const $diffPreviewPanel = $form.find(`.tab.segment[data-tab="${$tabMenu.data('diff')}"]`);
+      const $diffPreviewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('diff')}"]`);
       $diffPreviewPanel.html(data);
     });
   });
@@ -971,8 +971,8 @@ async function initRepository() {
         $tabMenu.attr('data-preview', $editContentZone.data('preview'));
         $tabMenu.find('.write.item').attr('data-tab', $editContentZone.data('write'));
         $tabMenu.find('.preview.item').attr('data-tab', $editContentZone.data('preview'));
-        $editContentForm.find('.write.segment').attr('data-tab', $editContentZone.data('write'));
-        $editContentForm.find('.preview.segment').attr('data-tab', $editContentZone.data('preview'));
+        $editContentForm.find('.write').attr('data-tab', $editContentZone.data('write'));
+        $editContentForm.find('.preview').attr('data-tab', $editContentZone.data('preview'));
         $simplemde = setCommentSimpleMDE($textarea);
         commentMDEditors[$editContentZone.data('write')] = $simplemde;
         initCommentPreviewTab($editContentForm);

web_src/less/_repository.less

@@ -631,20 +631,13 @@
 
         .pull {
             &.tabular.menu {
-                margin-bottom: 10px;
+                margin-bottom: 1rem;
 
                 .svg {
                     margin-right: 5px;
                 }
             }
 
-            &.tab.segment {
-                border: 0;
-                padding: 10px 0 0;
-                box-shadow: none;
-                background-color: inherit;
-            }
-
             .merge.box {
                 .avatar {
                     margin-left: 10px;
@@ -853,6 +846,18 @@
                     }
                 }
 
+                > .content {
+                    > div:first-child {
+                        border-top-left-radius: 4px;
+                        border-top-right-radius: 4px;
+                    }
+
+                    > div:last-child {
+                        border-bottom-left-radius: 4px;
+                        border-bottom-right-radius: 4px;
+                    }
+                }
+
                 .content {
                     > .header {
                         #avatar-arrow;
@@ -861,11 +866,8 @@
                         position: relative;
                         color: #767676;
                         background-color: #f7f7f7;
-                        border-top-left-radius: 3px;
-                        border-top-right-radius: 3px;
 
                         .text {
-                            max-width: 78%;
                             padding-top: 10px;
                             padding-bottom: 10px;
                         }
@@ -967,13 +969,18 @@
                 }
 
                 .ui.form {
-                    .field:first-child {
-                        clear: none;
-                    }
+                    .field {
+                        &:first-child {
+                            clear: none;
+                        }
 
-                    .tab.segment {
-                        border: 0;
-                        padding: 10px 0 0;
+                        &.footer {
+                            overflow: hidden;
+                        }
+
+                        .tab.markdown {
+                            min-height: 5rem;
+                        }
                     }
 
                     textarea {
@@ -1082,11 +1089,6 @@
                 }
             }
 
-            .tab.segment {
-                border: 0;
-                padding: 10px 0 0;
-            }
-
             textarea {
                 height: 200px;
                 font-family: @monospaced-fonts, monospace;
@@ -2451,10 +2453,19 @@
 
 .ui.form {
     .dropzone {
-        width: 100%;
-        margin-bottom: 10px;
         border: 2px dashed #0087f5;
         box-shadow: none !important;
+        padding: 0;
+        min-height: 5rem;
+        border-radius: 4px;
+
+        .dz-button {
+            color: rgba(0, 0, 0, .6);
+        }
+
+        &:hover .dz-button {
+            color: rgba(0, 0, 0, .8);
+        }
 
         .dz-error-message {
             top: 140px;
@@ -2858,6 +2869,11 @@ td.blob-excerpt {
     overflow: hidden;
 }
 
+.ui .right .ui.button {
+    margin-left: .25em;
+    margin-right: 0;
+}
+
 .removed-code {
     background-color: #ff9999;
 }