DONE: centralize theme color, interactive dashboard, increase winner result, refer TODO

resources/assets/js/components/AdminDataTable.vue

@@ -462,19 +462,20 @@ export default {
 </script>
 
 <style scoped>
+
 .admin-data-table__toolbar {
 	margin-bottom: 12px;
 }
 
 .admin-data-table {
-	--adt-header-bg: #1976d2;
-	--adt-header-color: #fff;
+	--adt-header-bg: var(--admin-table-header-bg);
+	--adt-header-color: var(--admin-table-header-color);
 	--adt-radius: 12px;
-	--adt-border: 1px solid #e0e0e0;
+	--adt-border: 1px solid var(--admin-table-border-color);
 	--adt-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-	--adt-row-hover: #e3f2fd;
-	--adt-footer-bg: #fafafa;
-	--adt-text-muted: #757575;
+	--adt-row-hover: var(--admin-table-row-hover-bg);
+	--adt-footer-bg: var(--admin-table-footer-bg);
+	--adt-text-muted: var(--admin-table-text-muted);
 	--adt-font-size: 16px;
 	--adt-header-font-size: 16px;
 }
@@ -484,7 +485,7 @@ export default {
 	border: var(--adt-border);
 	box-shadow: var(--adt-shadow);
 	overflow: hidden;
-	background: #fff;
+	background: var(--admin-table-shell-bg);
 }
 
 .admin-data-table__scroll {
@@ -582,12 +583,12 @@ export default {
 .admin-data-table__table tbody td {
 	padding: 12px 16px;
 	vertical-align: middle;
-	border-top: 1px solid #eee;
+	border-top: 1px solid var(--admin-table-row-border-color);
 	font-size: var(--adt-font-size);
 }
 
 .admin-data-table__table tbody tr:first-child:not(.admin-data-table__state-row) td {
-	border-top: 1px solid #e0e0e0;
+	border-top: 1px solid var(--admin-table-border-color);
 }
 
 .admin-data-table__table tbody tr.admin-data-table__state-row td {
@@ -617,7 +618,7 @@ export default {
 .admin-data-table__state-title {
 	font-size: 16px;
 	font-weight: 600;
-	color: #424242;
+	color: var(--admin-table-text-strong);
 	margin-bottom: 4px;
 }
 
@@ -663,7 +664,7 @@ export default {
 .admin-data-table__footer-mid {
 	font-size: 13px;
 	font-weight: 500;
-	color: #616161;
+	color: var(--admin-table-footer-mid-text);
 }
 
 .admin-data-table__footer-right {
@@ -681,7 +682,7 @@ export default {
 }
 
 .admin-data-table__pagination>li.disabled>a {
-	color: #bbb;
+	color: var(--admin-table-pagination-disabled);
 	pointer-events: none;
 	cursor: default;
 }