Project

General

Profile

Feature #43256 » 0002-Replace-hex-color-codes-with-Open-Color-variables-in.patch

Go MAEDA, 2025-09-27 11:44

View differences:

app/assets/stylesheets/application.css
4 4
 * This code is released under the GNU General Public License.
5 5
 */
6 6

  
7
@import url('/open-color.css');
8

  
7 9
@font-face {
8 10
  font-family: "Noto Sans";
9 11
  src: url("/NotoSans-Regular.woff2") format("woff2");
......
42 44

  
43 45
html, body { min-height: 100vh; }
44 46
html {overflow-y:scroll;}
45
body { font-family: var(--fonts-main); font-size: 0.875rem; color:#333; margin: 0; padding: 0; min-width: 900px; }
47
body { font-family: var(--fonts-main); font-size: 0.875rem; color: var(--oc-gray-9); margin: 0; padding: 0; min-width: 900px; }
46 48

  
47 49
h1, h2, h3, h4, h5, h6 {font-family: var(--fonts-main);padding: 2px 10px 1px 0px;margin: 0 0 10px 0;}
48
#content h1, h2, h3, h4, h5, h6 {color: #555;}
50
#content h1, h2, h3, h4, h5, h6 {color: var(--oc-gray-7);}
49 51
h2 {font-size: 1.25rem;}
50 52
h3 {font-size: 1.0625rem;}
51
h4 {font-size: 0.875rem; border-bottom: 1px solid #ccc; font-weight:normal;}
53
h4 {font-size: 0.875rem; border-bottom: 1px solid var(--oc-gray-4); font-weight:normal;}
52 54
pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}
53 55
.wiki h1 {font-size: 1.6em;}
54 56
.wiki h2 {font-size: 1.4em;}
55 57
.wiki h3 {font-size: 1.2em;}
56 58
.wiki h4 {font-size: 1.1em; border: none; font-weight: bold;}
57 59
.wiki h5 {font-size: 1em;}
58
.wiki h6 {font-size: 1em; color: #8e8e8e;}
60
.wiki h6 {font-size: 1em; color: var(--oc-gray-6);}
59 61

  
60 62
/***** Layout *****/
61 63
#wrapper {
......
66 68
  flex-direction: column;
67 69
}
68 70

  
69
#top-menu {background: #3E5B76; color: #fff; font-size: 0.8em; padding: 2px 10px 2px 12px;}
71
#top-menu {
72
  background: #3E5B76; /* no match in Open Color, using hex code */
73
  color: var(--oc-white);
74
  font-size: 0.8em;
75
  padding: 2px 10px 2px 12px;
76
}
70 77
#top-menu ul {margin: 0;  padding: 0;}
71 78
#top-menu li {
72 79
  float:left;
......
75 82
  padding: 0px 0px 0px 0px;
76 83
  white-space:nowrap;
77 84
}
78
#top-menu a {color: #fff; margin-right: 8px; font-weight: bold;}
79
#top-menu #loggedas { float: right; margin-right: 0.5em; color: #fff; }
85
#top-menu a {color: var(--oc-white); margin-right: 8px; font-weight: bold;}
86
#top-menu #loggedas { float: right; margin-right: 0.5em; color: var(--oc-white); }
80 87

  
81 88
#account {float:right;}
82 89

  
83 90
#header {
84 91
  min-height: 8.7ex;
85 92
  margin: 0;
86
  background: linear-gradient(180deg, #628DB6 30%, #356D92);
87
  color: #f8f8f8;
93
  background: linear-gradient(180deg, #628DB6 30%, #356D92); /* no match in Open Color, using hex code */
94
  color: var(--oc-gray-0);
88 95
  padding: 4px 16px 20px 16px;
89 96
  position: relative;
90 97
}
91
#header a {color:#f8f8f8;}
98
#header a {color: var(--oc-gray-0);}
92 99
#header h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.4375rem; font-weight: normal;}
93 100
#header h1 .breadcrumbs { display:block; font-size: 0.8rem; font-weight: normal; line-height: 100%;}
94 101

  
95 102
#quick-search {float:right;}
96
#quick-search #q {width:130px; height:24px; box-sizing:border-box; vertical-align:middle; border:1px solid #ccc; border-radius:3px;}
103
#quick-search #q {width:130px; height:24px; box-sizing:border-box; vertical-align:middle; border:1px solid var(--oc-gray-4); border-radius:3px;}
97 104
#quick-search form {float:left; margin-right:3px;}
98 105
#quick-search form input {margin-top:0; margin-bottom:0;}
99 106
#quick-search form label {vertical-align:middle;}
......
111 118
}
112 119
#main-menu li a {
113 120
  display: block;
114
  color: #fff;
121
  color: var(--oc-white);
115 122
  text-decoration: none;
116 123
  font-size: 93%;
117 124
  margin: 0;
......
119 126
  border-top-left-radius: 3px;
120 127
  border-top-right-radius: 3px;
121 128
}
122
#main-menu li a:hover {background: #759FCF; color: #fff; }
129
#main-menu li a:hover {background: rgba(var(--oc-white-rgb), 0.4); color: var(--oc-white); }
123 130
#main-menu li:hover ul.menu-children, #main-menu li ul.menu-children.visible {display: block;}
124
#main-menu li a.selected, #main-menu li a.selected:hover {background: #fff; color: #555; font-weight: bold;}
125
#main-menu li a.new-object {background-color: #759FCF; }
131
#main-menu li a.selected, #main-menu li a.selected:hover {background: var(--oc-white); color: var(--oc-gray-7); font-weight: bold;}
132
#main-menu li a.new-object {background-color: rgba(var(--oc-white-rgb), 0.4); }
126 133

  
127 134
#main-menu .menu-children {
128 135
  display: none;
129 136
  position:absolute;
130 137
  width: inherit;
131 138
  z-index:45;
132
  background-color:#fff;
133
  border-right: 1px solid #759FCF;
134
  border-bottom: 1px solid #759FCF;
135
  border-left: 1px solid #759FCF;
139
  background-color:var(--oc-white);
140
  border-right: 1px solid var(--oc-blue-7);
141
  border-bottom: 1px solid var(--oc-blue-7);
142
  border-left: 1px solid var(--oc-blue-7);
143
  box-shadow: 0 2px 4px rgba(var(--oc-gray-9-rgb), 0.1);
136 144
}
137 145
#main-menu .menu-children li {float:left; clear:both; width:100%;}
138
#main-menu .menu-children li a {color: #555; background-color:#fff; font-weight:normal; border-radius: 0;}
139
#main-menu .menu-children li a:hover {color: #fff; background-color: #759FCF;}
146
#main-menu .menu-children li a {color: var(--oc-gray-7); background-color:var(--oc-white); font-weight:normal; border-radius: 0;}
147
#main-menu .menu-children li a:hover {color: var(--oc-white); background-color: var(--oc-blue-7);}
140 148

  
141 149
#main-menu .tabs-buttons {
142 150
  right: 6px;
......
149 157

  
150 158
#main {flex-grow: 2; display: flex; flex-direction: row-reverse;}
151 159

  
152
#sidebar{ font-size: 0.8125rem; flex-shrink: 0; padding-left: 20px; padding-right: 8px; background: #f9fafb; border-left: 1px solid #d0d7de}
160
#sidebar{ font-size: 0.8125rem; flex-shrink: 0; padding-left: 20px; padding-right: 8px; background: var(--oc-gray-0); border-left: 1px solid var(--oc-gray-4)}
153 161
@media screen and (min-width: 0px) and (max-width: 1089px) {#sidebar{width: 22%;}}
154 162
@media screen and (min-width: 1090px) and (max-width: 1279px) {#sidebar{width: 240px;}}
155 163
@media screen and (min-width: 1280px) and (max-width: 1599px) {#sidebar{width: 280px;}}
156 164
@media screen and (min-width: 1600px) and (max-width: 1919px) {#sidebar{width: 320px;}}
157 165
@media screen and (min-width: 1920px) and (max-width: 2559px) {#sidebar{width: 360px;}}
158 166
@media screen and (min-width: 2560px) {#sidebar{width: 380px;}}
159
#sidebar h3{ font-size: 0.875rem; margin-top: 14px; color: #555; }
167
#sidebar h3{ font-size: 0.875rem; margin-top: 14px; color: var(--oc-gray-7); }
160 168
#sidebar h3:first-child{ margin-top: 0; }
161
#sidebar hr{ width: 100%; margin: 0 auto; height: 1px; background: #ccc; border: 0; }
169
#sidebar hr{ width: 100%; margin: 0 auto; height: 1px; background: var(--oc-gray-4); border: 0; }
162 170
#sidebar .contextual { margin-right: 1em; }
163 171
#sidebar ul, ul.flat {margin: 0;  padding: 0;}
164 172
#sidebar ul li, ul.flat li {list-style-type:none;margin: 0px 2px 0px 0px; padding: 0px 0px 0px 0px;}
165 173
#sidebar div.wiki ul {margin:inherit; padding-left:40px;}
166 174
#sidebar div.wiki ul li {list-style-type:inherit;}
167
#sidebar a.icon-only svg {opacity: 0.2; margin-left: 5px;}
175
#sidebar a.icon-only svg {margin-left: 5px;}
168 176
#sidebar a.icon-only:hover svg {opacity: 1;}
169 177
#sidebar span.icon-warning {margin-left: 5px;}
170 178
#sidebar li input[type=checkbox] {height: 20px;}
......
183 191
}
184 192

  
185 193
#sidebar-switch-button svg {
186
  stroke: #555;
194
  stroke: var(--oc-gray-7);
187 195
}
188 196

  
189 197
#sidebar-switch-button:hover {
190
  background-color: #eeeeee;
198
  background-color: var(--oc-gray-2);
191 199
}
192 200

  
193
#content { flex-grow: 1; background-color: #fff; margin: 0px; padding: 10px 16px 10px 16px; overflow-x: auto;}
201
#content { flex-grow: 1; background-color: var(--oc-white); margin: 0px; padding: 10px 16px 10px 16px; overflow-x: auto;}
194 202

  
195 203
#main.nosidebar #sidebar { display: none; }
196 204
#main.collapsedsidebar #sidebar { width: 0; padding-right: 0 }
197 205
#main.collapsedsidebar #sidebar-wrapper { display: none; }
198 206

  
199
#footer {clear: both; border-top: 1px solid #d0d7de; font-size: 0.9em; color: #aaa; padding: 5px; text-align:center; background:#fff;}
207
#footer {clear: both; border-top: 1px solid var(--oc-gray-4); font-size: 0.9em; color: var(--oc-gray-5); padding: 5px; text-align:center; background:var(--oc-white);}
200 208

  
201
#login-form {margin:5em auto 2em auto; padding:20px; width:340px; border:1px solid #FDBF3B; background-color:#FFEBC1; border-radius:4px; box-sizing: border-box;}
209
#login-form {margin:5em auto 2em auto; padding:20px; width:340px; border:1px solid var(--oc-yellow-5); background-color: var(--oc-yellow-1); border-radius:4px; box-sizing: border-box;}
202 210
#login-form label {display:block; margin-bottom:5px; font-weight:bold;}
203 211
#login-form label[for=autologin] {font-weight:normal;}
204 212
#login-form input {height: 29px;}
......
207 215
#login-form a.lost_password {float:right; font-weight:normal;}
208 216
#login-form h3 {text-align: center;}
209 217

  
210
div.modal { border-radius:5px; background:#fff; z-index:50; padding:4px;}
218
div.modal { border-radius:5px; background:var(--oc-white); z-index:50; padding:4px;}
211 219
div.modal h3.title {display:none;}
212 220
div.modal p.buttons {margin-bottom:0;}
213 221
div.modal .box p {margin: 0.3em 0;}
......
218 226
.hidden {display: none;}
219 227
.inline-block {display: inline-block;}
220 228
.inline-flex {display: inline-flex;}
221
.decoration-red, a.decoration-red {color: #c22 !important;}
229
.decoration-red, a.decoration-red {color: var(--oc-red-9) !important;}
222 230

  
223 231
/***** Links *****/
224
a, a:link, a:visited{ color: #169; text-decoration: none; }
225
a:hover, a:active{ color: #c61a1a; text-decoration: underline;}
232
a, a:link, a:visited{ color: var(--oc-blue-9); text-decoration: none; }
233
a:hover, a:active{ color: var(--oc-red-9); text-decoration: underline;}
226 234
a img{ border: 0; }
227 235

  
228
a.issue.closed, a.issue.closed:link, a.issue.closed:visited { color: #999; text-decoration: line-through; }
229
a.project.closed, a.project.closed:link, a.project.closed:visited { color: #999; }
230
a.user.locked, a.user.locked:link, a.user.locked:visited {color: #999;}
236
a.issue.closed, a.issue.closed:link, a.issue.closed:visited { color: var(--oc-gray-6); text-decoration: line-through; }
237
a.project.closed, a.project.closed:link, a.project.closed:visited { color: var(--oc-gray-6); }
238
a.user.locked, a.user.locked:link, a.user.locked:visited {color: var(--oc-gray-6);}
231 239
a.user.user-mention {
232
  background-color: #DDEEFF;
240
  background-color: var(--oc-blue-0);
233 241
  padding: 0.1em 0.1em;
234 242
  border-radius: 0.1em;
235 243
}
236 244

  
237
#sidebar a.selected {line-height:1.7em; padding:1px 3px 2px 2px; margin-left:-2px; background-color:#9DB9D5; color:#fff; border-radius:2px;}
245
#sidebar a.selected {line-height:1.7em; padding:1px 3px 2px 2px; margin-left:-2px; background-color:rgba(var(--oc-blue-9-rgb), 0.6); color:var(--oc-white); border-radius:2px;}
238 246
#sidebar a.selected:hover {text-decoration:none;}
239
#sidebar a.selected svg.icon-svg { stroke: #fff !important; }
247
#sidebar a.selected svg.icon-svg { stroke: var(--oc-white) !important; }
240 248
#sidebar .query.default {font-weight: bold;}
241 249
#admin-menu a {line-height:1.7em;}
242 250
#admin-menu a.selected:not(:has(svg))  {padding-left: 20px !important; background-position: 2px 40%;}
243 251

  
244
a#toggle-completed-versions {color:#999;}
252
a#toggle-completed-versions {color:var(--oc-gray-6);}
245 253
a#toggle-completed-versions span.icon-label {margin-left: 0}
246
a#toggle-completed-versions svg, a#toggle-completed-versions:hover svg {stroke:#999}
254
a#toggle-completed-versions svg, a#toggle-completed-versions:hover svg {stroke:var(--oc-gray-6)}
247 255

  
248 256
/***** Dropdown *****/
249 257
.drdn {position:relative;}
......
263 271
  right:0px;
264 272
  top:25px;
265 273
  min-width:100px;
266
  background-color:#fff;
267
  border:1px solid #ccc;
274
  background-color:var(--oc-white);
275
  border:1px solid var(--oc-gray-4);
268 276
  border-radius:4px;
269
  color:#555;
277
  color:var(--oc-gray-7);
270 278
  z-index:99;
271 279
}
272 280
.drdn.expanded .drdn-content {display:block;}
......
275 283
.drdn-content .quick-search svg {margin-left: 5px; position: absolute;}
276 284
.drdn-content .quick-search input.autocomplete {background: none; padding-left: 24px !important;}
277 285
.drdn-content .autocomplete {box-sizing: border-box; width:100% !important; height:28px;}
278
.drdn-content .autocomplete:focus {border-color:#5ad;}
286
.drdn-content .autocomplete:focus {border-color: var(--oc-blue-5);}
279 287
.drdn-items {max-height:400px; overflow:auto;}
280
div + .drdn-items {border-top:1px solid #ccc;}
288
div + .drdn-items {border-top:1px solid var(--oc-gray-4);}
281 289
.drdn-items>* {
282 290
  display:block;
283
  border:1px solid #fff;
291
  border:1px solid var(--oc-white);
284 292
  overflow:hidden;
285 293
  text-overflow: ellipsis;
286 294
  white-space:nowrap;
287 295
  padding:4px 8px;
288 296
}
289 297
.drdn-items>a:hover {text-decoration:none;}
290
.drdn-items>*:focus {border:1px dotted #bbb;}
298
.drdn-items>*:focus {border:1px dotted var(--oc-gray-5);}
291 299

  
292 300
.drdn-items.selection>*:before {
293 301
  content:' ';
......
304 312
.drdn-items.selection:empty {
305 313
  border: none;
306 314
}
307
.drdn-items>span {color:#999;}
315
.drdn-items>span {color:var(--oc-gray-6);}
308 316

  
309 317
.contextual .drdn-content, .journal-actions .drdn-content {
310 318
  top: 18px;
......
326 334
}
327 335

  
328 336
.contextual .drdn-items > a:hover, .journal-actions .drdn-items > a:hover {
329
  color: #2A5685;
330
  border: 1px solid #628db6;
331
  background-color: #eef5fd;
337
  color: var(--oc-blue-9);
338
  border: 1px solid var(--oc-blue-7);
339
  background-color: var(--oc-blue-0);
332 340
  border-radius: 3px;
333 341
}
334 342

  
......
339 347
  display:inline-block;
340 348
  padding:1.5px 18px 3px 6px;
341 349
  border-radius:3px;
342
  border:1px solid #ccc;
350
  border:1px solid var(--oc-gray-4);
343 351
  margin:0 !important;
344 352
  vertical-align:middle;
345
  color:#555;
346
  background:#fff url(/chevron-down.svg) no-repeat 98% 50%;
353
  color:var(--oc-gray-7);
354
  background:var(--oc-white) url(/chevron-down.svg) no-repeat 98% 50%;
347 355
}
348 356
#project-jump .drdn.expanded .drdn-trigger {background-image:url(/arrow_up.png);}
349 357
#project-jump .drdn-content {width:280px;}
350
#project-jump .drdn-items>* {color:#555 !important;}
351
#project-jump .drdn-items>a:hover {background-color:#759FCF; color:#fff !important;}
358
#project-jump .drdn-items>* {color:var(--oc-gray-7) !important;}
359
#project-jump .drdn-items>a:hover {background-color: var(--oc-blue-7); color:var(--oc-white) !important;}
352 360

  
353 361
/***** Tables *****/
354 362
table.list, .table-list {
355 363
  font-size: 0.8125rem;
356 364
  font-variant-numeric: tabular-nums;
357
  border-top: 1px solid #d0d7de;
358
  border-bottom: 1px solid #d0d7de;
365
  border-top: 1px solid var(--oc-gray-4);
366
  border-bottom: 1px solid var(--oc-gray-4);
359 367
  border-collapse: collapse;
360 368
  width: 100%;
361 369
  margin-bottom: 4px;
362 370
  overflow: hidden;
363 371
}
364
table.list th, .table-list-header { background-color:#EEEEEE; padding: 4px; white-space:nowrap; font-weight:bold; border-bottom: 2px solid #d0d7de; }
372
table.list th, .table-list-header { background-color:var(--oc-gray-2); padding: 4px; white-space:nowrap; font-weight:bold; border-bottom: 2px solid var(--oc-gray-4); }
365 373
table.list th.whitespace-normal {white-space: normal;}
366
table.list td {text-align:center; vertical-align:middle; padding-top: 3px; padding-right: 10px; padding-bottom: 3px; border-top: 1px solid #d0d7de;}
374
table.list td {text-align:center; vertical-align:middle; padding-top: 3px; padding-right: 10px; padding-bottom: 3px; border-top: 1px solid var(--oc-gray-4);}
367 375
table.list td.icon {width: 100%;} /* Prevents border from disappearing due to inline-flex shrinking */
368 376
table.list td.id { width: 2%; text-align: center;}
369 377
table.list td.name, table.list td.description, table.list td.subject, table.list td.parent-subject, table.list td.comments, table.list td.roles, table.list td.attachments, table.list td.text,  table.list td.short_description {text-align: left;}
......
381 389
table.list td.reorder {width:15%; white-space:nowrap; text-align:center; }
382 390
table.list table.progress td {padding-right:0; border-top: none;}
383 391
table.list caption { text-align: left; padding: 0.5em 0.5em 0.5em 0; }
384
table.list tr.overdue td.due_date  { color: #c22; }
392
table.list tr.overdue td.due_date  { color: var(--oc-red-9); }
385 393
table.list thead.related-issues th { background-color: inherit; font-size: 11px; border: none; }
386 394
#role-permissions-trackers table.list th {white-space:normal;}
387 395
table.list div.wiki p {
......
392 400
.table-list div.buttons {width: 15%;}
393 401

  
394 402
tr.project td.name a { white-space:nowrap; }
395
tr.project.closed, tr.project.archived { color: #aaa; }
396
tr.project.closed a, tr.project.archived a { color: #aaa; }
403
tr.project.closed, tr.project.archived { color: var(--oc-gray-5); }
404
tr.project.closed a, tr.project.archived a { color: var(--oc-gray-5); }
397 405

  
398 406
tr.issue { text-align: center; white-space: nowrap; }
399 407
tr.issue td.subject, tr.issue td.parent-subject, tr.issue td.category, td.assigned_to, td.last_updated_by, tr.issue td.string, tr.issue td.text, tr.issue td.list, tr.issue td.relations, tr.issue td.parent, tr.issue td.watcher_users { white-space: normal; }
......
404 412
tr.issue.created-by-me td.author {font-weight: bold;}
405 413
tr.issue.assigned-to-me td.assigned_to {font-weight: bold;}
406 414
tr.issue.assigned-to-my-group td.assigned_to {font-weight: bold;}
407
table.issues td.block_column {color:#777; font-size:90%; padding:4px 4px 4px 24px; text-align:left; white-space:normal;}
415
table.issues td.block_column {color:var(--oc-gray-6); font-size:90%; padding:4px 4px 4px 24px; text-align:left; white-space:normal;}
408 416
table.issues td.block_column>span {font-weight: bold; display: block; margin-bottom: 4px;}
409 417
table.issues td.block_column>pre {white-space:normal;}
410 418

  
......
420 428
tr.idnt-9 td.subject, tr.idnt-9 td.name {padding-left: 152px; background-position: 132px 50%;}
421 429

  
422 430
table.issue-report {table-layout:fixed;}
423
table.issue-report tr.total, table.issue-report-detailed tr.total { font-weight: bold; border-top:2px solid #d0d7de;}
431
table.issue-report tr.total, table.issue-report-detailed tr.total { font-weight: bold; border-top:2px solid var(--oc-gray-4);}
424 432
.issue-report-graph {width: 75%; margin: 2em 0;}
425 433

  
426 434
tr.entry td { white-space: nowrap; }
......
455 463
tr.message.sticky td.subject { font-weight: bold; }
456 464
tr.message td.subject:not(:has(.icon)) { padding-left: 20px; }
457 465

  
458
tr.version.closed, tr.version.closed a { color: #999; }
466
tr.version.closed, tr.version.closed a { color: var(--oc-gray-6); }
459 467
tr.version:not(.shared) td.name { padding-left: 20px; }
460 468
tr.version td.date, tr.version td.status, tr.version td.sharing { text-align: center; white-space:nowrap; }
461 469

  
......
465 473
tr.user td {width:13%;white-space: nowrap;}
466 474
td.username, td.firstname, td.lastname, td.email {text-align:left !important;}
467 475
tr.user td.email { width:18%; }
468
tr.user.locked, tr.user.registered { color: #aaa; }
469
tr.user.locked a, tr.user.registered a { color: #aaa; }
476
tr.user.locked, tr.user.registered { color: var(--oc-gray-5); }
477
tr.user.locked a, tr.user.registered a { color: var(--oc-gray-5); }
470 478

  
471
table.permissions td.role {color:#999;font-size:90%;font-weight:normal !important;text-align:center;vertical-align:bottom;}
479
table.permissions td.role {color:var(--oc-gray-6);font-size:90%;font-weight:normal !important;text-align:center;vertical-align:bottom;}
472 480
table.permissions tr.group>td:nth-of-type(1),
473 481
table.tracker-summary tr.group>td:nth-of-type(1) {font-weight: bold;}
474 482

  
......
487 495

  
488 496
table.list.enumerations {table-layout: fixed; margin-bottom: 2em;}
489 497

  
490
tr.group td { padding: 0.8em 0 0.5em 0.3em; border-bottom: 2px solid #d0d7de; text-align:left; background-color: #fff;}
498
tr.group td { padding: 0.8em 0 0.5em 0.3em; border-bottom: 2px solid var(--oc-gray-4); text-align:left; background-color: var(--oc-white);}
491 499
tr.group span.count {top:-1px;}
492 500
tr.group span.name {font-weight:bold;}
493
tr.group span.totals {color: #aaa; font-size: 93%;}
494
tr.group span.totals .value {font-weight:bold; color:#777;}
495
tr.group a.toggle-all { color: #aaa; font-size: 93%; display:none; float:right; margin-right:4px;}
501
tr.group span.totals {color: var(--oc-gray-5); font-size: 93%;}
502
tr.group span.totals .value {font-weight:bold; color:var(--oc-gray-6);}
503
tr.group a.toggle-all { color: var(--oc-gray-5); font-size: 93%; display:none; float:right; margin-right:4px;}
496 504
tr.group:hover a.toggle-all { display:inline;}
497 505
a.toggle-all:hover {text-decoration:none;}
498 506

  
......
501 509
table td {padding:2px;}
502 510
table p {margin:0;}
503 511

  
504
table.list:not(.odd-even) tbody tr:nth-child(odd), .odd { background-color: #fff; }
505
table.list:not(.odd-even) tbody tr:nth-child(even), .even { background-color: #f6f7f8; }
512
/* No table striping within `.box` */
513
.box table.list:not(.odd-even) tbody tr:nth-child(even), .box .even { background-color: var(--oc-white); }
514
table.list:not(.odd-even) tbody tr:nth-child(odd), .odd { background-color: var(--oc-white); }
515
table.list:not(.odd-even) tbody tr:nth-child(even), .even { background-color: var(--oc-gray-0); }
506 516
table.list:not(.odd-even) tbody tr:nth-child(odd):hover, .odd:hover,
507
table.list:not(.odd-even) tbody tr:nth-child(even):hover, .even:hover { background-color:#ffffdd; }
517
table.list:not(.odd-even) tbody tr:nth-child(even):hover, .even:hover { background-color:var(--oc-yellow-0); }
508 518

  
509 519
tr.builtin td.name {font-style:italic;}
510 520

  
......
578 588
input:disabled, select:disabled, textarea:disabled {
579 589
  cursor: not-allowed;
580 590
  color: graytext;
581
  background-color: #ebebe4;
591
  background-color: var(--oc-gray-2);
582 592
}
583 593

  
584 594

  
585
.highlight { background-color: #FCFD8D;}
586
.highlight.token-1 { background-color: #faa;}
587
.highlight.token-2 { background-color: #afa;}
588
.highlight.token-3 { background-color: #aaf;}
595
.highlight { background-color: var(--oc-yellow-2);}
596
.highlight.token-1 { background-color: var(--oc-red-2);}
597
.highlight.token-2 { background-color: var(--oc-green-2);}
598
.highlight.token-3 { background-color: var(--oc-violet-1);}
589 599

  
590 600
.box{
591 601
  padding: 8px;
592 602
  margin-bottom: 12px;
593
  background-color: #f9fafb;
594
  color: #505050;
603
  background-color: var(--oc-gray-0);
604
  color: var(--oc-gray-7);
595 605
  line-height: 1.5em;
596
  border: 1px solid #d0d7de;
606
  border: 1px solid var(--oc-gray-4);
597 607
  word-wrap: break-word;
598 608
  border-radius: 3px;
599
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
609
  box-shadow: 0 1px 2px rgba(var(--oc-gray-9-rgb), 0.05);
600 610
}
601 611

  
602 612
div.square {
603
  border: 1px solid #999;
613
  border: 1px solid var(--oc-gray-6);
604 614
  float: left;
605 615
  margin: .3em .4em 0 .4em;
606 616
  overflow: hidden;
......
616 626

  
617 627
form {display: inline;}
618 628
input, select, button {vertical-align: middle; margin-top: 1px; margin-bottom: 1px; height: 24px; padding: 0 7px;}
619
input, select, textarea, button { color: #333; background-color: #fff; border:1px solid #ccc; border-radius:3px; box-sizing: border-box;}
629
input, select, textarea, button { color: var(--oc-gray-9); background-color: var(--oc-white); border:1px solid var(--oc-gray-4); border-radius:3px; box-sizing: border-box;}
620 630
select {
621 631
  -webkit-appearance: none;
622 632
  -moz-appearance: none;
623 633
  -o-appearance: none;
624 634
  appearance: none;
625
  background-color: #fff;
635
  background-color: var(--oc-white);
626 636
  background-image: url(/chevron-down.svg);
627 637
  background-repeat: no-repeat;
628 638
  background-position: calc(100% - 2px) 50%;
......
632 642
input[type="submit"], button[type="submit"] {
633 643
  -webkit-appearance: button;
634 644
  cursor: pointer;
635
  background-color: #fff;
645
  background-color: var(--oc-white);
636 646
  height: 28px;
637 647
  -webkit-transition: background-color 100ms linear;
638 648
  -moz-transition: background-color 100ms linear;
......
640 650
  transition: background-color 100ms linear;
641 651
}
642 652
input[type="submit"]:hover, button[type="submit"]:hover {
643
  background-color: #ddd;
653
  background-color: var(--oc-gray-2);
644 654
}
645 655

  
646 656
input[type="text"]:focus, input[type="text"]:active,
......
649 659
input[type="number"]:focus, input[type="number"]:active,
650 660
select:focus, select:active,
651 661
textarea:focus, textarea:active {
652
  border: 1px solid #5ad;
662
  border: 1px solid var(--oc-blue-5);
653 663
  outline: none;
654 664
}
655 665

  
......
657 667
  text-overflow: ellipsis;
658 668
}
659 669

  
660
select[multiple=multiple] {background: #fff; padding-right: initial; height: auto;}
661
fieldset {border: 1px solid #d0d7de; margin:0; min-width: inherit;}
662
legend {color: #333;}
663
hr { width: 100%; height: 1px; background: #ccc; border: 0;}
664
blockquote { font-style: italic; border-left: 3px solid #e0e0e0; padding-left: 0.6em; margin-left: 0;}
670
select[multiple=multiple] {background: var(--oc-white); padding-right: initial; height: auto;}
671
fieldset {border: 1px solid var(--oc-gray-4); margin:0; min-width: inherit;}
672
legend {color: var(--oc-gray-9);}
673
hr { width: 100%; height: 1px; background: var(--oc-gray-4); border: 0;}
674
blockquote { font-style: italic; border-left: 3px solid var(--oc-gray-3); padding-left: 0.6em; margin-left: 0;}
665 675
blockquote blockquote { margin-left: 0;}
666
abbr, span.field-description[title] { border-bottom: 1px dotted #aaa; cursor: help; }
676
abbr, span.field-description[title] { border-bottom: 1px dotted var(--oc-gray-5); cursor: help; }
667 677
textarea.wiki-edit {width:99%; resize:vertical; box-sizing: border-box;}
668 678
body.textarea-monospace textarea.wiki-edit {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace;}
669 679
body.textarea-proportional textarea.wiki-edit {font-family: var(--fonts-main);}
670 680
li p {margin-top: 0;}
671 681
div.issue {
672
  background: #ffffdd;
682
  background: var(--oc-yellow-0);
673 683
  padding: 8px;
674 684
  margin-bottom: 6px;
675
  border: 1px solid #d0d7de;
685
  border: 1px solid var(--oc-gray-4);
676 686
  border-radius: 3px;
677
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
687
  box-shadow: 0 1px 2px rgba(var(--oc-gray-9-rgb), 0.05);
678 688
}
679 689
p.breadcrumb { font-size: 0.8125rem; margin: 4px 0 4px 0;}
680 690
p.subtitle { font-size: 0.8125rem; margin: -6px 0 12px 0; font-style: italic; }
......
683 693
.wiki-class-rtl {direction:rtl !important;}
684 694

  
685 695
div.issue div.subject div div { padding-left: 16px; word-break: break-word; }
686
div.issue div.subject p {margin: 0; margin-bottom: 0.1em; font-size: 90%; color: #999;}
696
div.issue div.subject p {margin: 0; margin-bottom: 0.1em; font-size: 90%; color: var(--oc-gray-6);}
687 697
div.issue div.subject>div>p { margin-top: 0.5em; }
688 698
div.issue div.subject h3 {margin: 0; margin-bottom: 0.1em;}
689 699
div.issue p.author {margin-top:0.5em; font-size: 93%}
690 700
div.issue span.private, div.journal span.private {font-size: 60%;}
691
div.issue .next-prev-links {color:#999;}
701
div.issue .next-prev-links {color:var(--oc-gray-6);}
692 702
div.issue .attributes {margin-top: 2em;}
693 703
div.issue .attributes .attribute {padding-left:180px; clear:left; min-height: 1.8em;}
694 704
div.issue .attributes .attribute .label {width: 170px; margin-left:-180px; font-weight:bold; float:left;  overflow: clip visible; text-overflow: ellipsis;}
695 705
div.issue .attribute .value {overflow:auto; text-overflow: ellipsis;}
696 706
div.issue .attribute.string_cf .value .wiki p {margin-top: 0; margin-bottom: 0;}
697 707
div.issue .attribute.text_cf .value .wiki p:first-of-type {margin-top: 0;}
698
div.issue.overdue .due-date .value { color: #c22; }
708
div.issue.overdue .due-date .value { color: var(--oc-red-9); }
699 709
body.controller-issues h2.inline-flex {padding-right: 0}
700 710
div#sticky-issue-header {
701 711
  display: none;
......
704 714
  left: 0;
705 715
  right: 0;
706 716
  background-color: white;
707
  border-bottom: 1px solid #d0d7de;
717
  border-bottom: 1px solid var(--oc-gray-4);
708 718
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
709 719
  font-size: 0.8125rem;
710 720
  align-items: center;
......
800 810
div#activity dl, #search-results { margin-left: 2em; }
801 811
div#activity dd, #search-results dd { margin-bottom: 1em; padding-left: 22px; font-size: 0.8125rem;}
802 812
div#activity dt svg.icon-svg {margin-right: 4px;}
803
div#activity dt.me .time { border-bottom: 1px solid #999; }
804
div#activity dt .time { color: #555; font-size: 0.8125rem; margin-right: 4px; }
813
div#activity dt.me .time { border-bottom: 1px solid var(--oc-gray-6); }
814
div#activity dt .time { color: var(--oc-gray-7); font-size: 0.8125rem; margin-right: 4px; }
805 815
div#activity dd .description, #search-results dd .description { font-style: italic; margin: 2px 0;}
806 816
div#activity span.project:after, #search-results span.project:after { content: " - "; white-space: pre;}
807
div#activity dd span.description, #search-results dd span.description { display:block; color: #666; }
817
div#activity dd span.description, #search-results dd span.description { display:block; color: var(--oc-gray-6); }
808 818
div#activity dt.grouped {padding-left:5em;}
809 819
div#activity dd.grouped {margin-left:9em;}
810 820
div#activity h3 {
811 821
  padding: 5px;
812
  background-color: #f6f7f8;
822
  background-color: var(--oc-gray-1);
813 823
}
814 824
div#activity dt {
815 825
  padding-top: 10px;
816
  border-top: 1px solid #e8eaed;
826
  border-top: 1px solid var(--oc-gray-2);
817 827
  width: 100%; /* Prevents border from disappearing due to inline-flex shrinking */
818 828
  box-sizing: border-box;
819 829
  display: flex;
......
846 856

  
847 857
div#roadmap .version-article {padding-bottom: 12px;}
848 858

  
849
div#version-summary { float:right; width:28%; margin-left: 16px; margin-bottom: 16px; background-color: #fff; }
859
div#version-summary { float:right; width:28%; margin-left: 16px; margin-bottom: 16px; background-color: var(--oc-white); }
850 860
div#version-summary fieldset { margin-bottom: 1em; }
851 861
div#version-summary fieldset.time-tracking table { width:100%; }
852 862
div#version-summary th, div#version-summary td.total-hours { text-align: right; }
853 863

  
854 864
table#time-report td.hours, table#time-report th.period, table#time-report th.total { text-align: right; padding-right: 0.5em; }
855
table#time-report tbody tr.subtotal { font-style: italic; color:#777;}
856
table#time-report tbody tr.subtotal td.hours { color:#b0b0b0; }
857
table#time-report tbody tr.total { font-weight: bold; background-color:#EEEEEE; border-top:2px solid #d0d7de;}
865
table#time-report tbody tr.subtotal { font-style: italic; color:var(--oc-gray-6);}
866
table#time-report tbody tr.subtotal td.hours { color:var(--oc-gray-6); }
867
table#time-report tbody tr.total { font-weight: bold; background-color:var(--oc-gray-2); border-top:2px solid var(--oc-gray-4);}
858 868
table#time-report .hours-dec { font-size: 0.9em; }
859 869

  
860 870
div.wiki-page .contextual a {opacity: 0.4}
861 871
div.wiki-page .contextual a:hover {opacity: 1}
862 872

  
863 873
div.wiki a:target + h1, div.wiki a:target + h2, div.wiki a:target + h3, div.wiki a:target + h4, div.wiki a:target + h5, div.wiki a:target + h6 {
864
  background-color:#DDEEFF;
874
  background-color:var(--oc-blue-0);
865 875
}
866 876

  
867
.wiki-update-info {text-align:right; color:#666; font-size:90%;}
877
.wiki-update-info {text-align:right; color:var(--oc-gray-6); font-size:90%;}
868 878

  
869 879
form .attributes select { width: 60%; }
870 880
form .attributes select + a.icon-only { vertical-align: middle; margin-left: 4px; }
......
875 885
ul.projects ul.projects {padding-left:1.6em;}
876 886
ul.projects.root {margin:0; padding:0;}
877 887
ul.projects li.root, ul.projects li.child {list-style-type:none;}
878
ul.projects li.root div.archived, ul.projects li.child div.archived {color: #aaa;}
888
ul.projects li.root div.archived, ul.projects li.child div.archived {color: var(--oc-gray-5);}
879 889
ul.projects div.description ul li {list-style-type:initial;}
880 890

  
881 891
#projects-index {
......
889 899
  -moz-column-gap : 0.5rem;
890 900
  margin-bottom: 1.2em;
891 901
}
892
#projects-index li.root ul.projects { border-left: 3px solid #e0e0e0; padding-left:1em;}
902
#projects-index li.root ul.projects { border-left: 3px solid var(--oc-gray-3); padding-left:1em;}
893 903
#projects-index ul.projects li.root {
894 904
  margin-bottom: 1em;
895 905
  padding: 15px 20px;
896
  border: 1px solid #d0d7de;
906
  border: 1px solid var(--oc-gray-4);
897 907
  border-radius: 3px;
898 908
  box-sizing: border-box;
899
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
909
  box-shadow: 0 1px 2px rgba(var(--oc-gray-9-rgb), 0.05);
900 910
  -moz-box-sizing: border-box;
901 911
  -webkit-box-sizing: border-box;
902 912
  break-inside: avoid-column;
......
949 959

  
950 960
#related-issues li img {vertical-align:middle;}
951 961

  
952
ul.properties {padding:0; font-size: 0.9em; color: #777;}
962
ul.properties {padding:0; font-size: 0.9em; color: var(--oc-gray-6);}
953 963
ul.properties li {list-style-type:none;}
954 964
ul.properties li span {font-style:italic;}
955 965

  
......
960 970
#user_login, #user_firstname, #user_lastname, #user_mail, #my_account_form select, #user_form select { width: 90%; }
961 971

  
962 972
#workflow_copy_form select { width: 200px; }
963
table.transitions td.enabled {background: #bfb;}
973
table.transitions td.enabled {background: var(--oc-green-2);}
964 974
#workflow_form table select {font-size:90%; max-width:100px;}
965
table.fields_permissions td.readonly {background:#ddd;}
966
table.fields_permissions td.required {background:#d88;}
975
table.fields_permissions td.readonly {background:var(--oc-gray-4);}
976
table.fields_permissions td.required {background:var(--oc-red-4);}
967 977

  
968 978
select.expandable {vertical-align:top;}
969 979

  
......
973 983

  
974 984
input#content_comments {width: 99%}
975 985

  
976
span.pagination {margin-left:3px; color:#888; display:block;}
986
span.pagination {margin-left:3px; color:var(--oc-gray-6); display:block;}
977 987
.pagination ul.pages {
978 988
  margin: 0 5px 0 0;
979 989
  padding: 0;
......
982 992
.pagination ul.pages li {
983 993
  display: inline-block;
984 994
  padding: 0;
985
  border: 1px solid #ddd;
995
  border: 1px solid var(--oc-gray-4);
986 996
  margin-left: -1px;
987 997
  line-height: 2em;
988 998
  margin-bottom: 1em;
......
1003 1013
}
1004 1014
.pagination ul.pages li.current {
1005 1015
  color: white;
1006
  background-color: #628DB6;
1007
  border-color: #628DB6;
1016
  background-color: var(--oc-blue-7);
1017
  border-color: var(--oc-blue-7);
1008 1018
}
1009 1019
.pagination ul.pages li.page:hover {
1010
  background-color: #ddd;
1020
  background-color: var(--oc-gray-2);
1011 1021
}
1012 1022
.pagination ul.pages li.page a:hover,
1013 1023
.pagination ul.pages li.page a:active {
1014
  color: #169;
1024
  color: var(--oc-blue-9);
1015 1025
  text-decoration: inherit;
1016 1026
}
1017 1027
.pagination .per-page span.selected {
......
1079 1089
}
1080 1090

  
1081 1091
.tabular label.error {
1082
  color: #bb0000;
1092
  color: var(--oc-red-9);
1083 1093
}
1084 1094

  
1085 1095
.tabular label.error + *:not(#issue_description_and_toolbar), .tabular label.error + span#issue_description_and_toolbar div.jstBlock {
1086
  border: 1px solid #bb0000;
1096
  border: 1px solid var(--oc-red-9);
1087 1097
}
1088 1098

  
1089 1099
label.no-css {
......
1121 1131
fieldset.settings label { display: block; }
1122 1132
fieldset#notified_events .parent { padding-left: 20px; }
1123 1133

  
1124
span.required {color: #bb0000;}
1134
span.required {color: var(--oc-red-9);}
1125 1135
.summary {font-style: italic;}
1126 1136

  
1127 1137
.check_box_group {
......
1130 1140
  max-height:120px;
1131 1141
  overflow-y:auto;
1132 1142
  padding:2px 4px 4px 2px;
1133
  background:#fff;
1134
  border:1px solid #9EB1C2;
1135
  border-radius:2px
1143
  background:var(--oc-white);
1144
  border:1px solid var(--oc-gray-4);
1145
  border-radius:3px
1136 1146
}
1137 1147
.check_box_group label {
1138 1148
  font-weight: normal;
......
1149 1159
.attachments_fields>span, #existing-attachments>span {display:block; white-space:nowrap;}
1150 1160
/* ToDo: delete this line when legacy icons are deleted */
1151 1161
.attachments_fields .icon-attachment, #existing-attachments .icon-attachment {background-image: none; padding-left: 0}
1152
.attachments_fields input.filename, #existing-attachments .filename {border:0; width:250px; color:#555; background-color:inherit; }
1162
.attachments_fields input.filename, #existing-attachments .filename {border:0; width:250px; color:var(--oc-gray-7); background-color:inherit; }
1153 1163
.tabular input.filename {max-width:75% !important;}
1154 1164
.attachments_fields div.ui-progressbar { width: 100px; height:14px; margin: 2px 0 -5px 8px; display: inline-block; }
1155 1165
.attachments_fields input.filename {
......
1159 1169
}
1160 1170

  
1161 1171
a.remove-upload:hover {text-decoration:none !important;}
1162
.existing-attachment.deleted .filename {text-decoration:line-through; color:#999 !important;}
1172
.existing-attachment.deleted .filename {text-decoration:line-through; color:var(--oc-gray-6) !important;}
1163 1173

  
1164 1174
div.fileover, p.custom-field-filedroplistner.fileover { background-color: lavender; }
1165 1175

  
1166 1176
div.attachments p { margin:4px 0 2px 0; }
1167 1177
div.attachments img { vertical-align: middle; }
1168
div.attachments span.author { font-size: 0.9em; color: #888; }
1178
div.attachments span.author { font-size: 0.9em; color: var(--oc-gray-6); }
1169 1179

  
1170 1180
div.thumbnails {margin:0.6em;}
1171
div.thumbnail {background:#fff;border:2px solid #ddd;display:inline-block;margin-right:2px;}
1181
div.thumbnail {background:var(--oc-white);border:2px solid var(--oc-gray-3);display:inline-block;margin-right:2px;}
1172 1182
div.thumbnail img {margin: 3px; vertical-align: middle;}
1173 1183

  
1174
p.other-formats { text-align: right; font-size:0.9em; color: #666; }
1184
p.other-formats { text-align: right; font-size:0.9em; color: var(--oc-gray-6); }
1175 1185
.other-formats span + span:before { content: "| "; }
1176 1186

  
1177
em.info {font-style:normal;display:block;font-size:90%;color:#888;}
1187
em.info {font-style:normal;display:block;font-size:90%;color:var(--oc-gray-6);}
1178 1188
em.info.error {padding-left:20px; background:url(/exclamation.png) no-repeat 0 50%;}
1179 1189

  
1180 1190
textarea.text_cf {width:95%; resize:vertical;}
......
1190 1200
.roles-selection label {display:inline-block; width:210px;}
1191 1201

  
1192 1202
input.autocomplete {
1193
  background: #fff url(/search.svg) no-repeat 2px 50%; padding-left:20px !important;
1203
  background: var(--oc-white) url(/search.svg) no-repeat 2px 50%; padding-left:20px !important;
1194 1204
}
1195 1205
input.autocomplete.ajax-loading {
1196 1206
  background-image: url(/loading.gif);
......
1214 1224
  -webkit-column-count: auto;
1215 1225
  -webkit-column-width: 200px;
1216 1226
  -webkit-column-gap : 0.5rem;
1217
  -webkit-column-rule: 1px solid #ccc;
1227
  -webkit-column-rule: 1px solid var(--oc-gray-4);
1218 1228
  -moz-column-count: auto;
1219 1229
  -moz-column-width: 200px;
1220 1230
  -moz-column-gap : 0.5rem;
1221
  -moz-column-rule: 1px solid #ccc;
1231
  -moz-column-rule: 1px solid var(--oc-gray-4);
1222 1232
}
1223 1233

  
1224 1234
/***** Flash & error messages ****/
......
1237 1247
}
1238 1248

  
1239 1249
div.flash.error, #errorExplanation {
1240
  background-color: #ffe3e3;
1241
  border-color: #d88;
1242
  color: #880000;
1250
  background-color: var(--oc-red-1);
1251
  border-color: var(--oc-red-3);
1252
  color: var(--oc-pink-9);
1243 1253
}
1244 1254
div.flash.error:not(:has(svg)), #errorExplanation:not(:has(svg)) {
1245
  background: url(/exclamation.png) 8px 50% no-repeat #ffe3e3;
1255
  background: url(/exclamation.png) 8px 50% no-repeat var(--oc-red-1);
1246 1256
}
1247 1257
div.flash.error svg.icon-svg, #errorExplanation svg.icon-svg {
1248
  stroke: #880000;
1258
  stroke: var(--oc-pink-9);
1249 1259
}
1250 1260

  
1251 1261
#errorExplanation:has(svg) {
......
1261 1271
}
1262 1272

  
1263 1273
div.flash.notice {
1264
  background-color: #dfffdf;
1265
  border-color: #9fcf9f;
1266
  color: #005f00;
1274
  background-color: var(--oc-green-1);
1275
  border-color: var(--oc-green-3);
1276
  color: var(--oc-green-9);
1267 1277
}
1268 1278
div.flash.notice:not(:has(svg)) {
1269
  background: url(/true.png) 8px 50% no-repeat #dfffdf;
1279
  background: url(/true.png) 8px 50% no-repeat var(--oc-green-1);
1270 1280
}
1271 1281
div.flash.notice svg.icon-svg {
1272
  stroke: #005f00;
1282
  stroke: var(--oc-green-9);
1273 1283
}
1274 1284

  
1275 1285
div.flash.warning, .conflict {
1276
  background-color: #F3EDD1;
1277
  border-color: #eadbbc;
1278
  color: #A6750C;
1286
  background-color: var(--oc-yellow-1);
1287
  border-color: var(--oc-yellow-3);
1288
  color: var(--oc-pink-9);
1279 1289
  text-align: left;
1280 1290
}
1281 1291
div.flash.warning:not(:has(svg)), .conflict:not(:has(svg)) {
1282
  background: url(/warning.png) 8px 5px no-repeat #F3EDD1;
1292
  background: url(/warning.png) 8px 5px no-repeat var(--oc-yellow-1);
1283 1293
}
1284 1294
div.flash.warning svg.icon-svg, .conflict svg.icon-svg {
1285
  stroke: #A6750C;
1295
  stroke: var(--oc-pink-9);
1286 1296
}
1287 1297

  
1288 1298
.nodata, .warning {
1289 1299
  text-align: center;
1290
  background-color: #F3EDD1;
1291
  border-color: #eadbbc;
1292
  color: #A6750C;
1300
  background-color: var(--oc-yellow-1);
1301
  border-color: var(--oc-yellow-3);
1302
  color: var(--oc-pink-9);
1293 1303
}
1294 1304

  
1295 1305
.warning .oauth-permissions { display:inline-block;text-align:left; }
......
1311 1321
  font-weight: bold;
1312 1322
}
1313 1323

  
1314
.markdown-alert-tip { border-color: #5db651; }
1315
.markdown-alert-tip .markdown-alert-title { color: #005f00; }
1316
.markdown-alert-tip .markdown-alert-title svg {stroke: #005f00; }
1324
.markdown-alert-tip { border-color: var(--oc-green-7); }
1325
.markdown-alert-tip .markdown-alert-title { color: var(--oc-green-9); }
1326
.markdown-alert-tip .markdown-alert-title svg {stroke: var(--oc-green-9); }
1317 1327

  
1318
.markdown-alert-important { border-color: #800080; }
1319
.markdown-alert-important .markdown-alert-title { color: #4b006e; }
1320
.markdown-alert-important .markdown-alert-title svg { stroke: #4b006e; }
1328
.markdown-alert-important { border-color: var(--oc-grape-7); }
1329
.markdown-alert-important .markdown-alert-title { color: var(--oc-grape-9); }
1330
.markdown-alert-important .markdown-alert-title svg { stroke: var(--oc-grape-9); }
1321 1331

  
1322
.markdown-alert-caution { border-color: #c22; }
1323
.markdown-alert-caution .markdown-alert-title { color: #880000; }
1324
.markdown-alert-caution .markdown-alert-title svg { stroke: #880000; }
1332
.markdown-alert-caution { border-color: var(--oc-red-7); }
1333
.markdown-alert-caution .markdown-alert-title { color: var(--oc-red-9); }
1334
.markdown-alert-caution .markdown-alert-title svg { stroke: var(--oc-red-9); }
1325 1335

  
1326
.markdown-alert-warning { border-color: #e4bc4b; }
1327
.markdown-alert-warning .markdown-alert-title { color: #a7760c; }
1328
.markdown-alert-warning .markdown-alert-title svg { stroke: #a7760c; }
1336
.markdown-alert-warning { border-color: var(--oc-yellow-7); }
1337
.markdown-alert-warning .markdown-alert-title { color: var(--oc-yellow-9); }
1338
.markdown-alert-warning .markdown-alert-title svg { stroke: var(--oc-yellow-9); }
1329 1339

  
1330
.markdown-alert-note { border-color: #169; }
1331
.markdown-alert-note .markdown-alert-title { color: #1e40af; }
1332
.markdown-alert-note .markdown-alert-title svg { stroke: #1e40af; }
1340
/* Indigo is used instead of blue to avoid confusion with links */
1341
.markdown-alert-note { border-color: var(--oc-indigo-7); }
1342
.markdown-alert-note .markdown-alert-title { color: var(--oc-indigo-9); }
1343
.markdown-alert-note .markdown-alert-title svg { stroke: var(--oc-indigo-9); }
1333 1344

  
1334 1345
/***** Ajax indicator ******/
1335 1346
#ajax-indicator {
1336 1347
position: absolute; /* fixed not supported by IE */
1337
background-color:#eee;
1338
border: 1px solid #bbb;
1348
background-color:var(--oc-gray-2);
1349
border: 1px solid var(--oc-gray-5);
1339 1350
top:35%;
1340 1351
left:40%;
1341 1352
width:20%;
......
1364 1375
  display: grid;
1365 1376
  grid-template-columns: 2rem repeat(7, 1fr);
1366 1377
  margin: 0;
1367
  border: 1px solid #d0d7de;
1378
  border: 1px solid var(--oc-gray-4);
1368 1379
  border-spacing: 0;
1369 1380
  border-radius: 3px;
1370
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
1381
  box-shadow: 0 1px 2px rgba(var(--oc-gray-9-rgb), 0.05);
1371 1382
}
1372 1383

  
1373 1384
.cal .calhead {
1374
  background-color:#eee;
1385
  background-color:var(--oc-gray-2);
1375 1386
  text-align: center;
1376 1387
  font-weight: bold;
1377 1388
  padding: 4px
1378 1389
}
1379 1390

  
1380 1391
.cal .week-number {
1381
  background-color:#eee;
1392
  background-color:var(--oc-gray-2);
1382 1393
  border:none;
1383 1394
  font-size: 1em;
1384 1395
  padding: 4px;
......
1390 1401
}
1391 1402

  
1392 1403
.cal .calbody {
1393
  border: 1px solid #d0d7de;
1404
  border: 1px solid var(--oc-gray-4);
1394 1405
  vertical-align: top;
1395 1406
  font-size: 0.9em;
1396 1407
  border-bottom: 0;
......
1398 1409
  line-height: 1.2;
1399 1410
  min-height: calc(1.2em * 6);
1400 1411
  padding: 2px;
1401
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
1412
  box-shadow: 0 1px 2px rgba(var(--oc-gray-9-rgb), 0.05);
1402 1413
}
1403 1414

  
1404 1415
.cal .calbody p.day-num {font-size: 1.1em; text-align:right;}
1405 1416
.cal .calbody .abbr-day {display:none}
1406
.cal .calbody.this-month {background-color:#fff;}
1407
.cal .calbody.other-month {background-color:#f6f7f8;}
1408
.cal .calbody.other-month p.day-num {color: #bbb;}
1409
.cal .calbody.today {background:#ffd;}
1417
.cal .calbody.this-month {background-color:var(--oc-white);}
1418
.cal .calbody.other-month {background-color:var(--oc-gray-1);}
1419
.cal .calbody.other-month p.day-num {color: var(--oc-gray-5);}
1420
.cal .calbody.today {background:var(--oc-yellow-0);}
1410 1421
.cal .calbody.today p.day-num {font-weight: bold;}
1411 1422

  
1412 1423
.cal .calbody .icon {padding-top: 2px; padding-bottom: 3px;}
1413
.cal .calbody.nwday:not(.other-month) {background-color:#f1f1f1;}
1424
.cal .calbody.nwday:not(.other-month) {background-color:var(--oc-gray-1);}
1414 1425

  
1415 1426
p.cal.legend span {display:flex;}
1416 1427
.controller-calendars p.buttons {margin-top: unset;}
1417 1428

  
1418 1429
/***** Tooltips ******/
1419 1430
.tooltip{position:relative;z-index:24;}
1420
.tooltip:hover{z-index:25;color:#000;}
1431
.tooltip:hover{z-index:25;color:var(--oc-black);}
1421 1432
.tooltip span.tip{display: none; text-align:left;}
1422
.tooltip span.tip a { color: #169 !important; }
1433
.tooltip span.tip a { color: var(--oc-blue-9) !important; }
1423 1434

  
1424 1435
.tooltip span.tip .avatar {
1425 1436
  float: none;
......
1430 1441
display:block;
1431 1442
position:absolute;
1432 1443
top:12px; width:270px;
1433
border:1px solid #555;
1444
border:1px solid var(--oc-gray-7);
1434 1445
border-radius: 3px;
1435
background-color:#fff;
1446
background-color:var(--oc-white);
1436 1447
padding: 4px;
1437 1448
font-size: 0.75rem;
1438
color:#505050;
1439
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
1449
color:var(--oc-gray-7);
1450
box-shadow: 0 1px 2px rgba(var(--oc-gray-9-rgb), 0.05);
1440 1451
}
1441 1452

  
1442 1453
table.cal div.tooltip:hover span.tip {
......
1467 1478
}
1468 1479

  
1469 1480
table.progress td { height: 1em; }
1470
table.progress td.closed { background: #BAE0BA none repeat scroll 0%; }
1471
table.progress td.done { background: #D3EDD3 none repeat scroll 0%; }
1472
table.progress td.todo { background: #eee none repeat scroll 0%; }
1481
table.progress td.closed { background: var(--oc-green-7) none repeat scroll 0%; }
1482
table.progress td.done { background: var(--oc-green-4) none repeat scroll 0%; }
1483
table.progress td.todo { background: var(--oc-gray-3) none repeat scroll 0%; }
1473 1484
p.percent {font-size: 86%; margin:0;}
1474
p.progress-info {clear: left; font-size: 86%; margin-top:-4px; color:#777;}
1485
p.progress-info {clear: left; font-size: 86%; margin-top:-4px; color:var(--oc-gray-6);}
1475 1486

  
1476 1487
.version-overview table.progress {width:40em;}
1477 1488
.version-overview table.progress td { height: 1.2em; }
1478 1489

  
1479 1490
/***** Tabs *****/
1480 1491
#content .tabs {height: 2.6em; margin-bottom:1.2em; position:relative; overflow:hidden;}
1481
#content .tabs ul {margin:0; position:absolute; bottom:0; padding-left:0.5em; min-width: 2000px; width: 100%;  border-bottom: 1px solid #d0d7de;}
1492
#content .tabs ul {margin:0; position:absolute; bottom:0; padding-left:0.5em; min-width: 2000px; width: 100%;  border-bottom: 1px solid var(--oc-gray-4);}
1482 1493
#content .tabs ul li {
1483 1494
  float:left;
1484 1495
  list-style-type:none;
......
1493 1504
  text-decoration:none;
1494 1505
  line-height:1.3em;
1495 1506
  padding:4px 6px 4px 6px;
1496
  border: 1px solid #d0d7de;
1497
  border-bottom: 1px solid #d0d7de;
1498
  color:#999;
1507
  border: 1px solid var(--oc-gray-4);
1508
  border-bottom: 1px solid var(--oc-gray-4);
1509
  color:var(--oc-gray-6);
1499 1510
  font-weight:bold;
1500 1511
  border-top-left-radius:3px;
1501 1512
  border-top-right-radius:3px;
1502 1513
}
1503 1514

  
1504 1515
#content .tabs ul li a:hover {
1505
  color:#777;
1516
  color:var(--oc-gray-6);
1506 1517
  text-decoration:none;
1507 1518
}
1508 1519

  
1509 1520
#content .tabs ul li a.selected {
1510
  background-color: #fff;
1511
  border: 1px solid #d0d7de;
1512
  border-bottom: 1px solid #fff;
1513
  color:#444;
1521
  background-color: var(--oc-white);
1522
  border: 1px solid var(--oc-gray-4);
1523
  border-bottom: 1px solid var(--oc-white);
1524
  color: var(--oc-gray-8);
1514 1525
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
1515 1526
}
1516 1527

  
1517
#content .tabs ul li a.selected:hover {background-color: #fff;}
1528
#content .tabs ul li a.selected:hover {background-color: var(--oc-white);}
1518 1529

  
1519
div.tabs-buttons { position:absolute; right: 0; width: 54px; height: 24px; background: white; bottom: 0; border-bottom: 1px solid #bbbbbb; }
1530
div.tabs-buttons { position:absolute; right: 0; width: 54px; height: 24px; background: white; bottom: 0; border-bottom: 1px solid var(--oc-gray-5); }
1520 1531

  
1521 1532
button.tab-left, button.tab-right {
1522 1533
  font-size: 0.9em;
1523 1534
  cursor: pointer;
1524 1535
  height:24px;
1525
  border: 1px solid #ccc;
1526
  border-bottom: 1px solid #bbbbbb;
1536
  border: 1px solid var(--oc-gray-4);
1537
  border-bottom: 1px solid var(--oc-gray-5);
1527 1538
  position:absolute;
1528 1539
  padding:4px;
1529 1540
  width: 24px;
1530 1541
  bottom: -1px;
1531 1542
}
1532 1543
button.tab-left:hover, button.tab-right:hover {
1533
  background-color: #f5f5f5;
1544
  background-color: var(--oc-gray-0);
1534 1545
}
1535 1546
button.tab-left:focus, button.tab-right:focus {
1536 1547
  outline: 0;
1537 1548
}
1538 1549
button.tab-left svg.icon-svg, button.tab-right svg.icon-svg {
1539
  stroke: #999;
1550
  stroke: var(--oc-gray-6);
1540 1551
  stroke-width: 2;
1541 1552
}
1542 1553

  
......
1545 1556
  border-top-left-radius:3px;
1546 1557
}
1547 1558
button.tab-left:not(:has(svg)) {
1548
  background: #eeeeee url(/arrow_left.png) no-repeat 50% 50%;
1559
  background: var(--oc-gray-2) url(/arrow_left.png) no-repeat 50% 50%;
1549 1560
}
1550 1561

  
1551 1562
button.tab-right {
......
1553 1564
  border-top-right-radius:3px;
1554 1565
}
1555 1566
button.tab-right:not(:has(svg)) {
1556
  background: #eeeeee url(/arrow_right.png) no-repeat 50% 50%;
1567
  background: var(--oc-gray-2) url(/arrow_right.png) no-repeat 50% 50%;
1557 1568
}
1558 1569

  
1559 1570
button.tab-left.disabled, button.tab-right.disabled {
1560
  background-color: #ccc;
1571
  background-color: var(--oc-gray-4);
1561 1572
  cursor: unset;
1562 1573
}
1563 1574

  
1564 1575
/***** Diff *****/
1565
.diff_out { background: #fcc; }
1566
.diff_out span { background: #faa; }
1567
.diff_in { background: #cfc; }
1568
.diff_in span { background: #afa; }
1576
.diff_out { background: var(--oc-red-1); }
1577
.diff_out span { background: var(--oc-red-3); }
1578
.diff_in { background: var(--oc-green-1); }
1579
.diff_in span { background: var(--oc-green-3); }
1569 1580

  
1570 1581
.text-diff {
1571 1582
  padding: 1em;
1572
  background-color:#f6f6f6;
1573
  color:#505050;
1574
  border: 1px solid #e4e4e4;
1583
  background-color:var(--oc-gray-0);
1584
  color:var(--oc-gray-7);
1585
  border: 1px solid var(--oc-gray-4);
1586
  border-radius: 3px;
1575 1587
  white-space: pre-wrap;
1576 1588
}
1577 1589

  
......
1586 1598
}
1587 1599

  
1588 1600
div.wiki table, div.wiki td, div.wiki th {
1589
  border: 1px solid #bbb;
1601
  border: 1px solid var(--oc-gray-5);
1590 1602
  padding: 4px;
1591 1603
}
1592 1604

  
......
1603 1615
}
1604 1616

  
1605 1617
div.wiki a {word-wrap: break-word;}
1606
div.wiki a.new {color: #b73535;}
1618
div.wiki a.new {color: var(--oc-red-9);}
1607 1619

  
1608 1620
div.wiki p {
1609 1621
  line-height: 1.6;
......
1622 1634
div.wiki pre {
1623 1635
  margin: 1em 1em 1em 1.6em;
1624 1636
  padding: 8px;
1625
  background-color: #fafafa;
1626
  border: 1px solid #e2e2e2;
1637
  background-color: var(--oc-gray-0);
1638
  border: 1px solid var(--oc-gray-4);
1627 1639
  border-radius: 3px;
1628 1640
  width:auto;
1629 1641
  overflow-x: auto;
1630 1642
  overflow-y: hidden;
1631 1643
}
1644
div.wiki pre .syntaxhl  { background: var(--oc-gray-0); } /* Override Rouge style */
1632 1645

  
1633 1646
div.wiki *:not(pre)>code, div.wiki>code {
1634 1647
  background: rgba(62, 91, 118, 0.08);
......
1643 1656
  cursor: pointer;
1644 1657
  display: none;
1645 1658
  border-radius: 3px;
1646
  background: #fff;
1647
  border: 1px solid #ccc;
1659
  background: var(--oc-white);
1660
  border: 1px solid var(--oc-gray-4);
1648 1661
  padding: 0px 3px 3px 3px;
1649 1662
}
1650 1663

  
......
1653 1666
}
1654 1667

  
1655 1668
div.wiki ul.toc {
1656
  background-color: #ffffdd;
1657
  border: 1px solid #e4e4e4;
1669
  background-color: var(--oc-yellow-0);
1670
  border: 1px solid var(--oc-gray-4);
1671
  border-radius: 3px;
1658 1672
  padding: 8px;
1659 1673
  line-height: 1.4em;
1660 1674
  margin-bottom: 12px;
......
1670 1684
  ; }
1671 1685
div.wiki ul.toc ul { margin: 0; padding: 0; }
1672 1686
div.wiki ul.toc li {list-style-type:none; margin: 0;}
1673
div.wiki ul.toc>li:first-child {margin-bottom: .5em; color: #777;}
1687
div.wiki ul.toc>li:first-child {margin-bottom: .5em; color: var(--oc-gray-7);}
1674 1688
div.wiki ul.toc li li {margin-left: 1.5em;}
1675 1689
div.wiki ul.toc a {
1676 1690
  font-size: 93%;
1677 1691
  font-weight: normal;
1678 1692
  text-decoration: none;
1679
  color: #606060;
1693
  color: var(--oc-gray-7);
1680 1694
}
1681
div.wiki ul.toc a:hover { color: #c61a1a; text-decoration: underline;}
1695
div.wiki ul.toc a:hover { color: var(--oc-red-9); text-decoration: underline;}
1682 1696

  
1683 1697
a.wiki-anchor { display: none; margin-left: 6px; text-decoration: none; }
1684
a.wiki-anchor:hover { color: #aaa !important; text-decoration: none; }
1685
h1:hover a.wiki-anchor, h2:hover a.wiki-anchor, h3:hover a.wiki-anchor, h4:hover a.wiki-anchor, h5:hover a.wiki-anchor, h6:hover a.wiki-anchor { display: inline; color: #ddd; }
1698
a.wiki-anchor:hover { color: var(--oc-gray-5) !important; text-decoration: none; }
1699
h1:hover a.wiki-anchor, h2:hover a.wiki-anchor, h3:hover a.wiki-anchor, h4:hover a.wiki-anchor, h5:hover a.wiki-anchor, h6:hover a.wiki-anchor { display: inline; color: var(--oc-gray-4); }
1686 1700

  
1687 1701
div.wiki img {vertical-align:middle; max-width:100%;}
1688 1702

  
......
1698 1712

  
1699 1713
/***** My page layout *****/
1700 1714
.block-receiver {
1701
  border:1px dashed #fff;
1715
  border:1px dashed var(--oc-white);
1702 1716
  padding: 15px 0 0 0;
1703 1717
}
1704 1718
.dragging .block-receiver {
1705
  border:1px dashed #777;
1719
  border:1px dashed var(--oc-gray-6);
1706 1720
  margin-bottom: 20px;
1707 1721
}
1708 1722
.mypage-box {
1709
  border:1px solid #d0d7de;
1723
  border:1px solid var(--oc-gray-4);
1710 1724
  padding:8px;
1711 1725
  margin:0 0 20px 0;
1712
  color:#505050;
1726
  color:var(--oc-gray-7);
1713 1727
  line-height:1.5em;
1714 1728
  border-radius: 3px;
1715
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
1729
  box-shadow: 0 1px 2px rgba(var(--oc-gray-9-rgb), 0.05);
1716 1730
}
1717 1731

  
1718 1732
.mypage-box>.contextual {opacity:0.001; transition: opacity 0.2s;}
......
1734 1748
  position:absolute;
1735 1749
  top:0;
1736 1750
  height:16px;
1737
  border-top: 1px solid #c0c0c0;
1738
  border-bottom: 1px solid #c0c0c0;
1739
  border-left: 1px solid #c0c0c0;
1751
  border-top: 1px solid var(--oc-gray-4);
1752
  border-bottom: 1px solid var(--oc-gray-4);
1753
  border-left: 1px solid var(--oc-gray-4);
1740 1754
  text-align: center;
1741 1755
  overflow: hidden;
1742 1756
}
1743 1757
#gantt_area .gantt_hdr {
1744 1758
  border-left: 0px;
1745
  border-right: 1px solid #c0c0c0;
1759
  border-right: 1px solid var(--oc-gray-4);
1746 1760
}
1747 1761
.gantt_subjects_container:not(.draw_selected_columns) .gantt_hdr,
1748 1762
.last_gantt_selected_column .gantt_hdr {
1749
  border-right: 1px solid #c0c0c0;
1763
  border-right: 1px solid var(--oc-gray-4);
1750 1764
}
1751 1765
.last_gantt_selected_column .gantt_selected_column_container,
1752 1766
.gantt_subjects_container .gantt_subjects * {
......
1757 1771
  padding: 0;
1758 1772
}
1759 1773

  
1760
.gantt_hdr.nwday {background-color:#f1f1f1; color:#999;}
1774
.gantt_hdr.nwday {background-color:var(--oc-gray-1); color:var(--oc-gray-6);}
1761 1775

  
1762 1776
.gantt_subjects,
1763 1777
.gantt_selected_column_content.gantt_hdr {
......
1774 1788
  text-overflow: clip;
1775 1789
  width: 100%;
1776 1790
}
1777
.gantt_subjects div.issue-subject:hover { background-color:#ffffdd; }
1791
.gantt_subjects div.issue-subject:hover { background-color:var(--oc-yellow-0); }
1778 1792
.gantt_selected_column_content > div { padding-left: 3px; box-sizing: border-box; }
1779 1793

  
1780 1794
.gantt_hdr_selected_column_name {
......
1815 1829
  position: absolute;
1816 1830
  height:8px;
1817 1831
  font-size:0.8em;
1818
  color:#888;
1832
  color:var(--oc-gray-6);
1819 1833
  padding:0;
1820 1834
  margin:0;
1821 1835
  line-height:16px;
......
1825 1839
.task.label {width:100%;}
1826 1840
.task.label.project, .task.label.version { font-weight: bold; }
1827 1841

  
1828
.task_late { background:#f66 url(/task_late.png); border: 1px solid #f66; }
1829
.task_done { background:#00c600 url(/task_done.png); border: 1px solid #00c600; }
1830
.task_todo { background:#aaa url(/task_todo.png); border: 1px solid #aaa; }
1842
.task_late { background:var(--oc-red-5) url(/task_late.png); border: 1px solid var(--oc-red-5); }
1843
.task_done { background:var(--oc-green-7) url(/task_done.png); border: 1px solid var(--oc-green-7); }
1844
.task_todo { background:var(--oc-gray-5) url(/task_todo.png); border: 1px solid var(--oc-gray-5); }
1831 1845

  
1832
.task_todo.parent { background: #888; border: 1px solid #888; height: 3px;}
1846
.task_todo.parent { background: var(--oc-gray-6); border: 1px solid var(--oc-gray-6); height: 3px;}
1833 1847
.task_late.parent, .task_done.parent { height: 3px;}
1834 1848
.task.parent.marker.starting  { position: absolute; background: url(/task_parent_end.png) no-repeat 0 0; width: 8px; height: 16px; margin-left: -4px; left: 0px; top: -1px;}
1835 1849
.task.parent.marker.ending { position: absolute; background: url(/task_parent_end.png) no-repeat 0 0; width: 8px; height: 16px; margin-left: -4px; right: 0px; top: -1px;}
1836 1850

  
1837
.version.task_late { background:#f66 url(/milestone_late.png); border: 1px solid #f66; height: 2px; margin-top: 3px;}
1838
.version.task_done { background:#00c600 url(/milestone_done.png); border: 1px solid #00c600; height: 2px; margin-top: 3px;}
1839
.version.task_todo { background:#fff url(/milestone_todo.png); border: 1px solid #fff; height: 2px; margin-top: 3px;}
1851
.version.task_late { background:var(oc-red-5) url(/milestone_late.png); border: 1px solid var(oc-red-5); height: 2px; margin-top: 3px;}
1852
.version.task_done { background:var(--oc-green-7) url(/milestone_done.png); border: 1px solid var(--oc-green-7); height: 2px; margin-top: 3px;}
1853
.version.task_todo { background:var(--oc-white) url(/milestone_todo.png); border: 1px solid var(--oc-white); height: 2px; margin-top: 3px;}
1840 1854
.version.marker { background-image:url(/version_marker.png); background-repeat: no-repeat; border: 0; margin-left: -4px; margin-top: 1px; }
1841 1855

  
1842
.project.task_late { background:#f66 url(/milestone_late.png); border: 1px solid #f66; height: 2px; margin-top: 3px;}
1843
.project.task_done { background:#00c600 url(/milestone_done.png); border: 1px solid #00c600; height: 2px; margin-top: 3px;}
1844
.project.task_todo { background:#fff url(/milestone_todo.png); border: 1px solid #fff; height: 2px; margin-top: 3px;}
1856
.project.task_late { background:var(oc-red-5) url(/milestone_late.png); border: 1px solid var(oc-red-5); height: 2px; margin-top: 3px;}
1857
.project.task_done { background:var(--oc-green-7) url(/milestone_done.png); border: 1px solid var(--oc-green-7); height: 2px; margin-top: 3px;}
1858
.project.task_todo { background:var(--oc-white) url(/milestone_todo.png); border: 1px solid var(--oc-white); height: 2px; margin-top: 3px;}
1845 1859
.project.marker { background-image:url(/project_marker.png); background-repeat: no-repeat; border: 0; margin-left: -4px; margin-top: 1px; }
1846 1860

  
1847
.version-behind-schedule a, .issue-behind-schedule a {color: #f66914;}
1848
.version-overdue a, .issue-overdue a, .project-overdue a {color: #f00;}
1861
.version-behind-schedule a, .issue-behind-schedule a {color: var(--oc-yellow-8);}
1862
.version-overdue a, .issue-overdue a, .project-overdue a {color: var(--oc-red-8);}
1849 1863

  
1850 1864
/***** User events (ex: journal, notes, replies, comments) *****/
1851 1865
.journals h4.journal-header {
1852
  background-color: #f6f7f8;
1866
  background-color: var(--oc-gray-1);
1853 1867
  border-bottom: 0;
1854 1868
  padding: 8px;
1855 1869
  align-items: center;
......
1858 1872
}
1859 1873

  
1860 1874
.journals h4.journal-header .update-info {
1861
  color: #666;
1875
  color: var(--oc-gray-6);
1862 1876
  font-size: 0.9em;
1863 1877
}
1864 1878

  
......
1867 1881
}
1868 1882

  
1869 1883
.journals div:target h4.journal-header {
1870
  background-color:#DDEEFF;
1884
  background-color:var(--oc-blue-0);
1871 1885
}
1872 1886

  
1873 1887
.journals .journal-content {
......
1880 1894
}
1881 1895

  
1882 1896
.journals .private-notes  {
1883
  border-left: 2px solid #d22;
1897
  border-left: 2px solid var(--oc-red-8);
1884 1898
}
1885 1899

  
1886 1900
.journals .journal-meta, .journals .journal-actions  {
......
1889 1903
}
1890 1904

  
1891 1905
.journals .journal-meta .journal-link {
1892
  color: #555;
1906
  color: var(--oc-gray-7);
1893 1907
}
1894 1908

  
1895 1909
.journals .journal-actions .reaction-button-wrapper {
......
1897 1911
}
1898 1912

  
1899 1913
.journals .journal-details, ul.revision-info {
1900
  color: #959595;
1914
  color: var(--oc-gray-6);
1901 1915
  margin-bottom: 1.5em;
1902 1916
}
1903 1917

  
1904 1918
.journals .journal-details a, ul.revision-info a {
1905
  color: #70A7CD;
1919
  color: var(--oc-blue-6);
1906 1920
}
1907 1921

  
1908 1922
.journals .journal-details a:hover, ul.revision-info a:hover {
1909
  color: #D14848;
1923
  color: var(--oc-red-9);
1910 1924
}
1911 1925

  
1912 1926
/***** Badges *****/
......
1924 1938
  user-select: none;
1925 1939
}
1926 1940
.badge-private {
1927
  background: #d22;
1928
  color: #fff;
1929
  border: 1px solid #d22;
1941
  background: var(--oc-red-8);
1942
  color: var(--oc-white);
1943
  border: 1px solid var(--oc-red-8);
1930 1944
}
1931 1945
.badge-count {
1932
  color: #fff;
1933
  background:#9DB9D5;
1946
  color: var(--oc-white);
1947
  background: var(--oc-blue-5);
1934 1948
}
1935 1949
.badge-status-open {
1936
  color: #205D86;
1937
  border: 1px solid #205D86;
1950
  color: var(--oc-blue-9);
1951
  border: 1px solid var(--oc-blue-9);
1938 1952
}
1939 1953
.badge-status-locked {
1940
  color: #696969;
1941
  border: 1px solid #696969;
1954
  color: var(--oc-gray-7);
1955
  border: 1px solid var(--oc-gray-7);
1942 1956
}
1943 1957
.badge-status-closed {
1944
  color: #1D781D;
1945
  border: 1px solid #1D781D;
1958
  color: var(--oc-green-9);
1959
  border: 1px solid var(--oc-green-9);
1946 1960
}
1947 1961
.badge-issues-count {
1948
  background: #EEEEEE;
1962
  background: var(--oc-gray-2);
1949 1963
}
1950 1964

  
1951 1965
/***** Tooltips *****/
1952 1966
.ui-tooltip {
1953
  background: #000;
1954
  color: #fff;
1967
  background: var(--oc-black);
1968
  color: var(--oc-white);
1955 1969
  border-radius: 3px;
1956 1970
  border: 0;
1957 1971
  box-shadow: none;
......
1971 1985
}
1972 1986

  
1973 1987
a.icon:hover .icon-svg, a.icon-only:hover .icon-svg, span.icon-actions:hover .icon-svg {
1974
  stroke: #c61a1a;
1988
  stroke: var(--oc-red-9);
1975 1989
}
1976 1990

  
... This diff was truncated because it exceeds the maximum size that can be displayed.
(6-6/7)