From d46edad68faeb68a405765d7e49c30d11922c0d2 Mon Sep 17 00:00:00 2001
From: MAEDA Go <maeda@farend.jp>
Date: Wed, 12 Oct 2022 18:31:51 +0900
Subject: [PATCH 1/2] Use CSS custom properties for some values

---
 public/stylesheets/application.css | 61 ++++++++++++++++++------------
 public/stylesheets/scm.css         |  6 +--
 2 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 8c50a9879..6b32f8421 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -1,6 +1,18 @@
+:root {
+  --color-text: #333;
+  --color-general-background: #eee;
+  --color-table-header-background: #eee;
+  --color-box-background: #f6f6f6;
+  --color-issue-background: #ffffdd;
+  --color-tab-background: #fff;
+  --color-tab-selected-background: #fff;
+  --color-filecontent-background: #fafafa;
+  --color-hover-line: #ffffdd;
+}
+
 html, body { min-height: 100vh; }
 html {overflow-y:scroll;}
-body { font-family: Verdana, sans-serif; font-size: 12px; color:#333; margin: 0; padding: 0; min-width: 900px; }
+body { font-family: Verdana, sans-serif; font-size: 12px; color: var(--color-text); margin: 0; padding: 0; min-width: 900px; }
 
 h1, h2, h3, h4, h5, h6 {font-family: "Trebuchet MS", Verdana, sans-serif;padding: 2px 10px 1px 0px;margin: 0 0 10px 0;}
 #content h1, h2, h3, h4, h5, h6 {color: #555;}
@@ -100,7 +112,7 @@ pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}
 
 #main {flex-grow: 2; display: flex; flex-direction: row-reverse;}
 
-#sidebar{ flex-shrink: 0; padding-left: 20px; padding-right: 8px; background: #EEEEEE; border-left: 1px solid #ddd}
+#sidebar{ flex-shrink: 0; padding-left: 20px; padding-right: 8px; background: var(--color-general-background); border-left: 1px solid #ddd}
 @media screen and (min-width: 0px) and (max-width: 1089px) {#sidebar{width: 22%;}}
 @media screen and (min-width: 1090px) and (max-width: 1279px) {#sidebar{width: 240px;}}
 @media screen and (min-width: 1280px) and (max-width: 1599px) {#sidebar{width: 280px;}}
@@ -255,7 +267,7 @@ div + .drdn-items {border-top:1px solid #ccc;}
 
 /***** Tables *****/
 table.list, .table-list { border: 1px solid #e4e4e4; width: 100%; margin-bottom: 4px; border-radius: 3px; border-spacing: 0; overflow: hidden;}
-table.list th, .table-list-header { background-color:#EEEEEE; padding: 4px; white-space:nowrap; font-weight:bold; }
+table.list th, .table-list-header { background-color: var(--color-table-header-background); padding: 4px; white-space:nowrap; font-weight:bold; }
 table.list th.whitespace-normal {white-space: normal;}
 table.list td {text-align:center; vertical-align:middle; padding-right:10px;}
 table.list td.id { width: 2%; text-align: center;}
@@ -392,7 +404,7 @@ table p {margin:0;}
 table.list:not(.odd-even) tbody tr:nth-child(odd), .odd, #issue-changesets div.changeset:nth-child(odd) { background-color:#f6f7f8; }
 table.list:not(.odd-even) tbody tr:nth-child(even), .even, #issue-changesets div.changeset:nth-child(even) { background-color: #fff; }
 table.list:not(.odd-even) tbody tr:nth-child(odd):hover, .odd:hover, #issue-changesets div.changeset:nth-child(odd):hover,
-table.list:not(.odd-even) tbody tr:nth-child(even):hover, .even:hover, #issue-changesets div.changeset:nth-child(even):hover { background-color:#ffffdd; }
+table.list:not(.odd-even) tbody tr:nth-child(even):hover, .even:hover, #issue-changesets div.changeset:nth-child(even):hover { background-color: var(--color-hover-line); }
 
 tr.builtin td.name {font-style:italic;}
 
@@ -458,7 +470,7 @@ input:disabled, select:disabled, textarea:disabled {
 .box{
   padding:6px;
   margin-bottom: 10px;
-  background-color:#f6f6f6;
+  background-color: var(--color-box-background);
   color:#505050;
   line-height:1.5em;
   border: 1px solid #e4e4e4;
@@ -485,7 +497,7 @@ div.square {
 
 form {display: inline;}
 input, select, button {vertical-align: middle; margin-top: 1px; margin-bottom: 1px; height: 24px; padding: 0 7px;}
-input, select, textarea, button { color: #333; background-color: #fff; border:1px solid #ccc; border-radius:3px; box-sizing: border-box;}
+input, select, textarea, button { color: var(--color-text); background-color: #fff; border:1px solid #ccc; border-radius:3px; box-sizing: border-box;}
 select {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -529,7 +541,7 @@ input:placeholder-shown {
 
 select[multiple=multiple] {background: #fff; padding-right: initial; height: auto;}
 fieldset {border: 1px solid #e4e4e4; margin:0; min-width: inherit;}
-legend {color: #333;}
+legend {color: var(--color-text);}
 hr { width: 100%; height: 1px; background: #ccc; border: 0;}
 blockquote { font-style: italic; border-left: 3px solid #e0e0e0; padding-left: 0.6em; margin-left: 0;}
 blockquote blockquote { margin-left: 0;}
@@ -538,7 +550,7 @@ textarea.wiki-edit {width:99%; resize:vertical; box-sizing: border-box;}
 body.textarea-monospace textarea.wiki-edit {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace; font-size: 12px;}
 body.textarea-proportional textarea.wiki-edit {font-family: Verdana, sans-serif; font-size: 12px;}
 li p {margin-top: 0;}
-div.issue {background:#ffffdd; padding:6px; margin-bottom:6px; border: 1px solid #d7d7d7; border-radius:3px;}
+div.issue {background: var(--color-issue-background); padding:6px; margin-bottom:6px; border: 1px solid #d7d7d7; border-radius:3px;}
 p.breadcrumb { font-size: 0.9em; margin: 4px 0 4px 0;}
 p.subtitle { font-size: 0.9em; margin: -6px 0 12px 0; font-style: italic; }
 p.footnote { font-size: 0.9em; margin-top: 0px; margin-bottom: 0px; }
@@ -643,11 +655,11 @@ div#activity dd.grouped {margin-left:9em;}
 div#activity dt.icon {background-position: 0 10px !important;}
 div#activity h3 {
   padding: 5px;
-  background-color: #eeeeee;
+  background-color: var(--color-general-background);
 }
 div#activity dt {
   padding-top: 10px;
-  border-top: 1px solid #eeeeee;
+  border-top: 1px solid var(--color-general-background);
 }
 div#activity dl dt:first-child {
   border: 0px;
@@ -679,7 +691,7 @@ div#version-summary th, div#version-summary td.total-hours { text-align: right;
 table#time-report td.hours, table#time-report th.period, table#time-report th.total { text-align: right; padding-right: 0.5em; }
 table#time-report tbody tr.subtotal { font-style: italic; color:#777;}
 table#time-report tbody tr.subtotal td.hours { color:#b0b0b0; }
-table#time-report tbody tr.total { font-weight: bold; background-color:#EEEEEE; border-top:1px solid #e4e4e4;}
+table#time-report tbody tr.total { font-weight: bold; background-color: var(--color-table-header-background); border-top:1px solid #e4e4e4;}
 table#time-report .hours-dec { font-size: 0.9em; }
 
 div.wiki-page .contextual a {opacity: 0.4}
@@ -1075,7 +1087,7 @@ div.flash.warning, .conflict {
 /***** Ajax indicator ******/
 #ajax-indicator {
 position: absolute; /* fixed not supported by IE */
-background-color:#eee;
+background-color: var(--color-general-background);
 border: 1px solid #bbb;
 top:35%;
 left:40%;
@@ -1099,15 +1111,15 @@ vertical-align: bottom;
 
 /***** Calendar *****/
 table.cal {width: 100%; margin: 0 0 6px 0; border: 1px solid #c0c0c0; border-spacing: 0; border-radius: 3px;}
-table.cal thead th {width: 14%; background-color:#EEEEEE; padding: 4px; }
+table.cal thead th {width: 14%; background-color: var(--color-table-header-background); padding: 4px; }
 table.cal thead th.week-number {width: auto;}
 table.cal tbody tr {height: 100px;}
 table.cal td .icon {padding-top: 2px; padding-bottom: 3px;}
 table.cal td {border: 1px solid #d7d7d7; vertical-align: top; font-size: 0.9em; border-bottom: 0; border-right: 0;}
-table.cal td.week-number { background-color:#EEEEEE; padding: 4px; border:none; font-size: 1em;}
+table.cal td.week-number { background-color: var(--color-table-header-background); padding: 4px; border:none; font-size: 1em;}
 table.cal td p.day-num {font-size: 1.1em; text-align:right;}
 table.cal td.odd p.day-num {color: #bbb;}
-table.cal td.today {background:#ffffdd;}
+table.cal td.today {background: var(--color-issue-background);}
 table.cal td.today p.day-num {font-weight: bold;}
 table.cal td.nwday:not(.odd) {background-color:#f1f1f1;}
 table.cal .starting a.issue, p.cal.legend .starting {background: url(../images/bullet_go.png) no-repeat -1px -2px; padding-left:16px;}
@@ -1167,7 +1179,7 @@ table.progress {
 table.progress td { height: 1em; }
 table.progress td.closed { background: #BAE0BA none repeat scroll 0%; }
 table.progress td.done { background: #D3EDD3 none repeat scroll 0%; }
-table.progress td.todo { background: #eee none repeat scroll 0%; }
+table.progress td.todo { background: var(--color-general-background) none repeat scroll 0%; }
 p.percent {font-size: 80%; margin:0;}
 p.progress-info {clear: left; font-size: 80%; margin-top:-4px; color:#777;}
 
@@ -1192,6 +1204,7 @@ p.progress-info {clear: left; font-size: 80%; margin-top:-4px; color:#777;}
   line-height:1.3em;
   padding:4px 6px 4px 6px;
   border: 1px solid #ccc;
+  background-color: var(--color-tab-background);
   border-bottom: 1px solid #bbbbbb;
   color:#999;
   font-weight:bold;
@@ -1205,7 +1218,7 @@ p.progress-info {clear: left; font-size: 80%; margin-top:-4px; color:#777;}
 }
 
 #content .tabs ul li a.selected {
-  background-color: #fff;
+  background-color: var(--color-tab-selected-background);
   border: 1px solid #bbbbbb;
   border-bottom: 1px solid #fff;
   color:#444;
@@ -1235,13 +1248,13 @@ button.tab-left:focus, button.tab-right:focus {
 
 button.tab-left {
   right: 28px;
-  background: #eeeeee url(../images/arrow_left.png) no-repeat 50% 50%;
+  background: var(--color-general-background) url(../images/arrow_left.png) no-repeat 50% 50%;
   border-top-left-radius:3px;
 }
 
 button.tab-right {
   right: 4px;
-  background: #eeeeee url(../images/arrow_right.png) no-repeat 50% 50%;
+  background: var(--color-general-background) url(../images/arrow_right.png) no-repeat 50% 50%;
   border-top-right-radius:3px;
 }
 
@@ -1258,7 +1271,7 @@ button.tab-left.disabled, button.tab-right.disabled {
 
 .text-diff {
   padding: 1em;
-  background-color:#f6f6f6;
+  background-color: var(--color-box-background);
   color:#505050;
   border: 1px solid #e4e4e4;
   white-space: pre-wrap;
@@ -1293,7 +1306,7 @@ div.wiki li>ul, div.wiki li>ol {margin-bottom: 0;}
 div.wiki pre {
   margin: 1em 1em 1em 1.6em;
   padding: 8px;
-  background-color: #fafafa;
+  background-color: var(--color-filecontent-background);
   border: 1px solid #e2e2e2;
   border-radius: 3px;
   width:auto;
@@ -1308,7 +1321,7 @@ div.wiki *:not(pre)>code, div.wiki>code {
 }
 
 div.wiki ul.toc {
-  background-color: #ffffdd;
+  background-color: var(--color-issue-background);
   border: 1px solid #e4e4e4;
   padding: 4px;
   line-height: 1.2em;
@@ -1422,7 +1435,7 @@ table.gantt-table td {
   text-overflow: ellipsis;
   width: 100%;
 }
-.gantt_subjects div.issue-subject:hover { background-color:#ffffdd; }
+.gantt_subjects div.issue-subject:hover { background-color: var(--color-hover-line); }
 .gantt_selected_column_content { padding-left: 3px; padding-right: 3px;}
 .gantt_subjects .issue-subject img.icon-gravatar {
   margin: 2px 5px 0px 2px;
@@ -1517,7 +1530,7 @@ td.gantt_selected_column .gantt_hdr,.gantt_selected_column_container {
   border: 1px solid #1D781D;
 }
 .badge-issues-count {
-  background: #EEEEEE;
+  background: var(--color-general-background);
 }
 
 /***** Tooltips *****/
diff --git a/public/stylesheets/scm.css b/public/stylesheets/scm.css
index 3bbf6010b..3b8687d45 100644
--- a/public/stylesheets/scm.css
+++ b/public/stylesheets/scm.css
@@ -38,9 +38,9 @@ li.change .copied-from:before { content: " - "}
 #changes-legend { float: right; font-size: 0.8em; margin: 0; }
 #changes-legend li { float: left; background-position: 5px 0; }
 
-table.filecontent { border: 1px solid #e2e2e2;  border-collapse: collapse; width:98%; background-color: #fafafa; }
+table.filecontent { border: 1px solid #e2e2e2;  border-collapse: collapse; width:98%; background-color: var(--color-filecontent-background); }
 table.filecontent tbody {font-family:Consolas, Menlo, "Liberation Mono", Courier, monospace; font-size:12px;}
-table.filecontent th { border: 1px solid #e2e2e2; background-color: #eee; }
+table.filecontent th { border: 1px solid #e2e2e2; background-color: var(--color-table-header-background); }
 table.filecontent th.filename { background-color: #e4e4d4; text-align: left; padding:5px;}
 table.filecontent tr.spacing th { text-align:center; }
 table.filecontent tr.spacing td { height: 0.4em; background: #EAF2F5;}
@@ -117,7 +117,7 @@ table.annotate td.author {
     background: inherit;
 }
 
-table.annotate td.line-code { background-color: #fafafa; }
+table.annotate td.line-code { background-color: var(--color-filecontent-background); }
 
 div.action_M { background: #fd8 }
 div.action_D { background: #f88 }
-- 
2.34.1