CSS table fixes (#13692)

* CSS table fixes

Override the right fomantic selectors.

Fixes: #13690

* use flexbox

Author: silverwind

templates/repo/wiki/pages.tmpl

@@ -2,14 +2,16 @@
 <div class="repository wiki pages">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<div class="ui header">
-			{{.i18n.Tr "repo.wiki.pages"}}
-			{{if and .CanWriteUncyclo (not .IsRepositoryMirror)}}
-			<div class="ui right">
-				<a class="ui green small button" href="{{.RepoLink}}/wiki/_new">{{.i18n.Tr "repo.wiki.new_page_button"}}</a>
+		<h2 class="ui header df ac sb">
+			<div>
+				{{.i18n.Tr "repo.wiki.pages"}}
 			</div>
-			{{end}}
-		</div>
+			<div>
+				{{if and .CanWriteUncyclo (not .IsRepositoryMirror)}}
+					<a class="ui green small button" href="{{.RepoLink}}/wiki/_new">{{.i18n.Tr "repo.wiki.new_page_button"}}</a>
+				{{end}}
+			</div>
+		</h2>
 		<table class="ui table">
 			<tbody>
 				{{range .Pages}}

web_src/less/_base.less

@@ -229,6 +229,8 @@ a:hover,
 
 .ui.table {
   color: var(--color-text);
+  background: var(--color-body);
+  border-color: var(--color-secondary);
 }
 
 .ui.ui.selectable.table > tbody > tr:hover,
@@ -237,6 +239,12 @@ a:hover,
   background-color: var(--color-secondary-alpha-40);
 }
 
+.ui.ui.ui.ui.table tr.grey:not(.marked),
+.ui.ui.table td.grey:not(.marked) {
+  background: var(--color-body);
+  color: var(--color-text);
+}
+
 .ui.modal {
   background: var(--color-body);
 }

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

@@ -891,25 +891,10 @@ a.ui.basic.green.label:hover {
   background-color: #393d4a !important;
 }
 
-.ui.table {
-  border-color: var(--color-secondary);
-  background: #353945;
-}
-
-.ui.table tbody tr {
-  border-color: var(--color-secondary);
-  background: #353945;
-}
-
 .ui .text.grey {
   color: var(--color-secondary-dark-6) !important;
 }
 
-.ui.attached.table.segment {
-  background: #353945;
-  color: #dbdbdb !important;
-}
-
 .markdown:not(code) h2 {
   border-bottom: 1px solid #304251;
 }