Project

General

Profile

Patch #21493 » 0001-Use-CSS-custom-properties-for-some-values.patch

Go MAEDA, 2022-10-12 11:33

View differences:

public/stylesheets/application.css
1
:root {
2
  --color-text: #333;
3
  --color-general-background: #eee;
4
  --color-table-header-background: #eee;
5
  --color-box-background: #f6f6f6;
6
  --color-issue-background: #ffffdd;
7
  --color-tab-background: #fff;
8
  --color-tab-selected-background: #fff;
9
  --color-filecontent-background: #fafafa;
10
  --color-hover-line: #ffffdd;
11
}
12

  
1 13
html, body { min-height: 100vh; }
2 14
html {overflow-y:scroll;}
3
body { font-family: Verdana, sans-serif; font-size: 12px; color:#333; margin: 0; padding: 0; min-width: 900px; }
15
body { font-family: Verdana, sans-serif; font-size: 12px; color: var(--color-text); margin: 0; padding: 0; min-width: 900px; }
4 16

  
5 17
h1, h2, h3, h4, h5, h6 {font-family: "Trebuchet MS", Verdana, sans-serif;padding: 2px 10px 1px 0px;margin: 0 0 10px 0;}
6 18
#content h1, h2, h3, h4, h5, h6 {color: #555;}
......
100 112

  
101 113
#main {flex-grow: 2; display: flex; flex-direction: row-reverse;}
102 114

  
103
#sidebar{ flex-shrink: 0; padding-left: 20px; padding-right: 8px; background: #EEEEEE; border-left: 1px solid #ddd}
115
#sidebar{ flex-shrink: 0; padding-left: 20px; padding-right: 8px; background: var(--color-general-background); border-left: 1px solid #ddd}
104 116
@media screen and (min-width: 0px) and (max-width: 1089px) {#sidebar{width: 22%;}}
105 117
@media screen and (min-width: 1090px) and (max-width: 1279px) {#sidebar{width: 240px;}}
106 118
@media screen and (min-width: 1280px) and (max-width: 1599px) {#sidebar{width: 280px;}}
......
255 267

  
256 268
/***** Tables *****/
257 269
table.list, .table-list { border: 1px solid #e4e4e4; width: 100%; margin-bottom: 4px; border-radius: 3px; border-spacing: 0; overflow: hidden;}
258
table.list th, .table-list-header { background-color:#EEEEEE; padding: 4px; white-space:nowrap; font-weight:bold; }
270
table.list th, .table-list-header { background-color: var(--color-table-header-background); padding: 4px; white-space:nowrap; font-weight:bold; }
259 271
table.list th.whitespace-normal {white-space: normal;}
260 272
table.list td {text-align:center; vertical-align:middle; padding-right:10px;}
261 273
table.list td.id { width: 2%; text-align: center;}
......
392 404
table.list:not(.odd-even) tbody tr:nth-child(odd), .odd, #issue-changesets div.changeset:nth-child(odd) { background-color:#f6f7f8; }
393 405
table.list:not(.odd-even) tbody tr:nth-child(even), .even, #issue-changesets div.changeset:nth-child(even) { background-color: #fff; }
394 406
table.list:not(.odd-even) tbody tr:nth-child(odd):hover, .odd:hover, #issue-changesets div.changeset:nth-child(odd):hover,
395
table.list:not(.odd-even) tbody tr:nth-child(even):hover, .even:hover, #issue-changesets div.changeset:nth-child(even):hover { background-color:#ffffdd; }
407
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); }
396 408

  
397 409
tr.builtin td.name {font-style:italic;}
398 410

  
......
458 470
.box{
459 471
  padding:6px;
460 472
  margin-bottom: 10px;
461
  background-color:#f6f6f6;
473
  background-color: var(--color-box-background);
462 474
  color:#505050;
463 475
  line-height:1.5em;
464 476
  border: 1px solid #e4e4e4;
......
485 497

  
486 498
form {display: inline;}
487 499
input, select, button {vertical-align: middle; margin-top: 1px; margin-bottom: 1px; height: 24px; padding: 0 7px;}
488
input, select, textarea, button { color: #333; background-color: #fff; border:1px solid #ccc; border-radius:3px; box-sizing: border-box;}
500
input, select, textarea, button { color: var(--color-text); background-color: #fff; border:1px solid #ccc; border-radius:3px; box-sizing: border-box;}
489 501
select {
490 502
  -webkit-appearance: none;
491 503
  -moz-appearance: none;
......
529 541

  
530 542
select[multiple=multiple] {background: #fff; padding-right: initial; height: auto;}
531 543
fieldset {border: 1px solid #e4e4e4; margin:0; min-width: inherit;}
532
legend {color: #333;}
544
legend {color: var(--color-text);}
533 545
hr { width: 100%; height: 1px; background: #ccc; border: 0;}
534 546
blockquote { font-style: italic; border-left: 3px solid #e0e0e0; padding-left: 0.6em; margin-left: 0;}
535 547
blockquote blockquote { margin-left: 0;}
......
538 550
body.textarea-monospace textarea.wiki-edit {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace; font-size: 12px;}
539 551
body.textarea-proportional textarea.wiki-edit {font-family: Verdana, sans-serif; font-size: 12px;}
540 552
li p {margin-top: 0;}
541
div.issue {background:#ffffdd; padding:6px; margin-bottom:6px; border: 1px solid #d7d7d7; border-radius:3px;}
553
div.issue {background: var(--color-issue-background); padding:6px; margin-bottom:6px; border: 1px solid #d7d7d7; border-radius:3px;}
542 554
p.breadcrumb { font-size: 0.9em; margin: 4px 0 4px 0;}
543 555
p.subtitle { font-size: 0.9em; margin: -6px 0 12px 0; font-style: italic; }
544 556
p.footnote { font-size: 0.9em; margin-top: 0px; margin-bottom: 0px; }
......
643 655
div#activity dt.icon {background-position: 0 10px !important;}
644 656
div#activity h3 {
645 657
  padding: 5px;
646
  background-color: #eeeeee;
658
  background-color: var(--color-general-background);
647 659
}
648 660
div#activity dt {
649 661
  padding-top: 10px;
650
  border-top: 1px solid #eeeeee;
662
  border-top: 1px solid var(--color-general-background);
651 663
}
652 664
div#activity dl dt:first-child {
653 665
  border: 0px;
......
679 691
table#time-report td.hours, table#time-report th.period, table#time-report th.total { text-align: right; padding-right: 0.5em; }
680 692
table#time-report tbody tr.subtotal { font-style: italic; color:#777;}
681 693
table#time-report tbody tr.subtotal td.hours { color:#b0b0b0; }
682
table#time-report tbody tr.total { font-weight: bold; background-color:#EEEEEE; border-top:1px solid #e4e4e4;}
694
table#time-report tbody tr.total { font-weight: bold; background-color: var(--color-table-header-background); border-top:1px solid #e4e4e4;}
683 695
table#time-report .hours-dec { font-size: 0.9em; }
684 696

  
685 697
div.wiki-page .contextual a {opacity: 0.4}
......
1075 1087
/***** Ajax indicator ******/
1076 1088
#ajax-indicator {
1077 1089
position: absolute; /* fixed not supported by IE */
1078
background-color:#eee;
1090
background-color: var(--color-general-background);
1079 1091
border: 1px solid #bbb;
1080 1092
top:35%;
1081 1093
left:40%;
......
1099 1111

  
1100 1112
/***** Calendar *****/
1101 1113
table.cal {width: 100%; margin: 0 0 6px 0; border: 1px solid #c0c0c0; border-spacing: 0; border-radius: 3px;}
1102
table.cal thead th {width: 14%; background-color:#EEEEEE; padding: 4px; }
1114
table.cal thead th {width: 14%; background-color: var(--color-table-header-background); padding: 4px; }
1103 1115
table.cal thead th.week-number {width: auto;}
1104 1116
table.cal tbody tr {height: 100px;}
1105 1117
table.cal td .icon {padding-top: 2px; padding-bottom: 3px;}
1106 1118
table.cal td {border: 1px solid #d7d7d7; vertical-align: top; font-size: 0.9em; border-bottom: 0; border-right: 0;}
1107
table.cal td.week-number { background-color:#EEEEEE; padding: 4px; border:none; font-size: 1em;}
1119
table.cal td.week-number { background-color: var(--color-table-header-background); padding: 4px; border:none; font-size: 1em;}
1108 1120
table.cal td p.day-num {font-size: 1.1em; text-align:right;}
1109 1121
table.cal td.odd p.day-num {color: #bbb;}
1110
table.cal td.today {background:#ffffdd;}
1122
table.cal td.today {background: var(--color-issue-background);}
1111 1123
table.cal td.today p.day-num {font-weight: bold;}
1112 1124
table.cal td.nwday:not(.odd) {background-color:#f1f1f1;}
1113 1125
table.cal .starting a.issue, p.cal.legend .starting {background: url(../images/bullet_go.png) no-repeat -1px -2px; padding-left:16px;}
......
1167 1179
table.progress td { height: 1em; }
1168 1180
table.progress td.closed { background: #BAE0BA none repeat scroll 0%; }
1169 1181
table.progress td.done { background: #D3EDD3 none repeat scroll 0%; }
1170
table.progress td.todo { background: #eee none repeat scroll 0%; }
1182
table.progress td.todo { background: var(--color-general-background) none repeat scroll 0%; }
1171 1183
p.percent {font-size: 80%; margin:0;}
1172 1184
p.progress-info {clear: left; font-size: 80%; margin-top:-4px; color:#777;}
1173 1185

  
......
1192 1204
  line-height:1.3em;
1193 1205
  padding:4px 6px 4px 6px;
1194 1206
  border: 1px solid #ccc;
1207
  background-color: var(--color-tab-background);
1195 1208
  border-bottom: 1px solid #bbbbbb;
1196 1209
  color:#999;
1197 1210
  font-weight:bold;
......
1205 1218
}
1206 1219

  
1207 1220
#content .tabs ul li a.selected {
1208
  background-color: #fff;
1221
  background-color: var(--color-tab-selected-background);
1209 1222
  border: 1px solid #bbbbbb;
1210 1223
  border-bottom: 1px solid #fff;
1211 1224
  color:#444;
......
1235 1248

  
1236 1249
button.tab-left {
1237 1250
  right: 28px;
1238
  background: #eeeeee url(../images/arrow_left.png) no-repeat 50% 50%;
1251
  background: var(--color-general-background) url(../images/arrow_left.png) no-repeat 50% 50%;
1239 1252
  border-top-left-radius:3px;
1240 1253
}
1241 1254

  
1242 1255
button.tab-right {
1243 1256
  right: 4px;
1244
  background: #eeeeee url(../images/arrow_right.png) no-repeat 50% 50%;
1257
  background: var(--color-general-background) url(../images/arrow_right.png) no-repeat 50% 50%;
1245 1258
  border-top-right-radius:3px;
1246 1259
}
1247 1260

  
......
1258 1271

  
1259 1272
.text-diff {
1260 1273
  padding: 1em;
1261
  background-color:#f6f6f6;
1274
  background-color: var(--color-box-background);
1262 1275
  color:#505050;
1263 1276
  border: 1px solid #e4e4e4;
1264 1277
  white-space: pre-wrap;
......
1293 1306
div.wiki pre {
1294 1307
  margin: 1em 1em 1em 1.6em;
1295 1308
  padding: 8px;
1296
  background-color: #fafafa;
1309
  background-color: var(--color-filecontent-background);
1297 1310
  border: 1px solid #e2e2e2;
1298 1311
  border-radius: 3px;
1299 1312
  width:auto;
......
1308 1321
}
1309 1322

  
1310 1323
div.wiki ul.toc {
1311
  background-color: #ffffdd;
1324
  background-color: var(--color-issue-background);
1312 1325
  border: 1px solid #e4e4e4;
1313 1326
  padding: 4px;
1314 1327
  line-height: 1.2em;
......
1422 1435
  text-overflow: ellipsis;
1423 1436
  width: 100%;
1424 1437
}
1425
.gantt_subjects div.issue-subject:hover { background-color:#ffffdd; }
1438
.gantt_subjects div.issue-subject:hover { background-color: var(--color-hover-line); }
1426 1439
.gantt_selected_column_content { padding-left: 3px; padding-right: 3px;}
1427 1440
.gantt_subjects .issue-subject img.icon-gravatar {
1428 1441
  margin: 2px 5px 0px 2px;
......
1517 1530
  border: 1px solid #1D781D;
1518 1531
}
1519 1532
.badge-issues-count {
1520
  background: #EEEEEE;
1533
  background: var(--color-general-background);
1521 1534
}
1522 1535

  
1523 1536
/***** Tooltips *****/
public/stylesheets/scm.css
38 38
#changes-legend { float: right; font-size: 0.8em; margin: 0; }
39 39
#changes-legend li { float: left; background-position: 5px 0; }
40 40

  
41
table.filecontent { border: 1px solid #e2e2e2;  border-collapse: collapse; width:98%; background-color: #fafafa; }
41
table.filecontent { border: 1px solid #e2e2e2;  border-collapse: collapse; width:98%; background-color: var(--color-filecontent-background); }
42 42
table.filecontent tbody {font-family:Consolas, Menlo, "Liberation Mono", Courier, monospace; font-size:12px;}
43
table.filecontent th { border: 1px solid #e2e2e2; background-color: #eee; }
43
table.filecontent th { border: 1px solid #e2e2e2; background-color: var(--color-table-header-background); }
44 44
table.filecontent th.filename { background-color: #e4e4d4; text-align: left; padding:5px;}
45 45
table.filecontent tr.spacing th { text-align:center; }
46 46
table.filecontent tr.spacing td { height: 0.4em; background: #EAF2F5;}
......
117 117
    background: inherit;
118 118
}
119 119

  
120
table.annotate td.line-code { background-color: #fafafa; }
120
table.annotate td.line-code { background-color: var(--color-filecontent-background); }
121 121

  
122 122
div.action_M { background: #fd8 }
123 123
div.action_D { background: #f88 }
(8-8/9)