Fossil SCM

fossil-scm / skins / darkmode / css.txt
Blame History Raw 611 lines
1
/* General settings for the entire page */
2
body {
3
margin: 0ex 1ex;
4
padding: 0;
5
background-color: #1f1f1f;
6
color: #ffffffe0;
7
font-family: sans-serif;
8
}
9
10
/* The page title centered at the top of each page */
11
div.title {
12
display: table-cell;
13
font-size: 2em;
14
font-weight: bold;
15
text-align: center;
16
vertical-align: bottom;
17
width: 100%;
18
}
19
20
/* The login status message in the top right-hand corner */
21
div.status {
22
display: table-cell;
23
text-align: right;
24
vertical-align: bottom;
25
color: #ddddddc9;
26
font-size: 0.8em;
27
font-weight: bold;
28
white-space: nowrap;
29
}
30
/* The leftoftitle is a <div> to the left of the title <div>
31
** that contains the same text as the status div. But we want
32
** the area to show as blank. The purpose is to cause the
33
** title to be exactly centered. */
34
div.leftoftitle {
35
visibility: hidden;
36
}
37
38
/* The header across the top of the page */
39
header {
40
display: table;
41
width: 100%;
42
}
43
44
/* The main menu bar that appears at the top of the page beneath
45
** the header */
46
nav.mainmenu {
47
padding: 0.25em 0.5em;
48
font-size: 0.9em;
49
font-weight: bold;
50
text-align: center;
51
border-top-left-radius: 0.5em;
52
border-top-right-radius: 0.5em;
53
border-bottom: 1px dotted rgba(200,200,200,0.3);
54
z-index: 21; /* just above hbdrop */
55
}
56
nav#hbdrop {
57
background-color: #1f1f1f;
58
border: 2px solid #303536;
59
border-radius: 0 0 0.5em 0.5em;
60
display: none;
61
left: 2em;
62
width: calc(100% - 4em);
63
position: absolute;
64
z-index: 20; /* just below mainmenu, but above timeline bubbles */
65
}
66
67
nav.mainmenu, div.submenu, div.sectionmenu {
68
color: #ffffffcc;
69
background-color: #303536/*#0000ff60*/;
70
}
71
/* The submenu bar that *sometimes* appears below the main menu */
72
div.submenu, div.sectionmenu {
73
padding: 0.15em 0.5em 0.15em 0;
74
font-size: 0.9em;
75
text-align: center;
76
border-bottom-left-radius: 0.5em;
77
border-bottom-right-radius: 0.5em;
78
}
79
a, a:visited {
80
color: rgba(127, 201, 255, 0.9);
81
display: inline;
82
text-decoration: none;
83
}
84
a:visited {opacity: 0.8}
85
nav.mainmenu a, div.submenu a,
86
div.sectionmenu>a.button, div.submenu label,
87
footer a {
88
padding: 0.15em 0.5em;
89
}
90
nav.mainmenu a.active {
91
border-bottom: 1px solid #FF4500f0;
92
}
93
a:hover,
94
a:visited:hover {
95
background-color: #FF4500f0;
96
color: rgba(24,24,24,0.8);
97
border-radius: 0.1em;
98
}
99
.fileage tr:hover,
100
div.filetreeline:hover {
101
background-color: #333;
102
}
103
div.file-change-line button {
104
background-color: #484848
105
}
106
.button,
107
button {
108
color: #aaa;
109
background-color: #484848;
110
border-radius: 5px;
111
border: 0
112
}
113
.button:hover,
114
button:hover {
115
background-color: #FF4500f0;
116
color: rgba(24,24,24,0.8);
117
outline: 0
118
}
119
input[type=button],
120
input[type=reset],
121
input[type=submit] {
122
color: #ddd;
123
background-color: #446979;
124
border: 0;
125
border-radius: 5px
126
}
127
input[type=button]:hover,
128
input[type=reset]:hover,
129
input[type=submit]:hover {
130
background-color: #FF4500f0;
131
color: rgba(24,24,24,0.8);
132
outline: 0
133
}
134
input[type=submit]:disabled {
135
color: #363636;
136
background-color: #707070;
137
}
138
.button:focus,
139
button:focus,
140
input[type=button]:focus,
141
input[type=reset]:focus,
142
input[type=submit]:focus {
143
outline: 2px outset #333;
144
border-color: #888;
145
}
146
147
/* All page content from the bottom of the menu or submenu down to
148
** the footer */
149
div.content {
150
padding: 0ex 1ex 1ex 1ex;
151
}
152
153
/* Some pages have section dividers */
154
div.section {
155
margin-bottom: 0;
156
margin-top: 1em;
157
padding: 0.1em;
158
font-size: 1.2em;
159
font-weight: bold;
160
background-color: #303536/*#0000ff60*/;
161
white-space: nowrap;
162
border-top-left-radius: 0.5em;
163
border-top-right-radius: 0.5em;
164
border-bottom: 1px dotted rgba(200,200,200,0.3);
165
}
166
167
/* The "Date" that occurs on the left hand side of timelines */
168
div.divider {
169
background: #303536;
170
border: 1px #558195 solid;
171
font-size: 1em; font-weight: normal;
172
padding: .25em;
173
margin: .2em 0 .2em 0;
174
float: left;
175
clear: left;
176
white-space: nowrap;
177
}
178
179
/* The footer at the very bottom of the page */
180
footer {
181
clear: both;
182
font-size: 0.8em;
183
padding: 0.15em 0.5em;
184
text-align: right;
185
background-color: #303536/*#0000ff60*/;
186
border-top: 1px dotted rgba(200,200,200,0.3);
187
border-bottom-left-radius: 0.5em;
188
border-bottom-right-radius: 0.5em;
189
}
190
191
/* Hyperlink colors in the footer */
192
193
pre {
194
border-radius: 0.25em;
195
}
196
pre > code {
197
display: block;
198
}
199
/* verbatim blocks */
200
pre.verbatim {
201
padding: 0.12em;
202
white-space: pre-wrap;
203
}
204
pre:not(.verbatim) {
205
margin-left: 1rem;
206
margin-right: 1rem;
207
background-color: rgba(200,200,200, 0.1);
208
padding: 0.5em 1em;
209
}
210
211
/* The label/value pairs on (for example) the ci page */
212
table.label-value th {
213
vertical-align: top;
214
text-align: right;
215
padding: 0.2ex 2ex;
216
}
217
218
h1 {margin: 0.6em 0}
219
h2 {margin: 0.5em 0}
220
h3 {margin: 0.5em 0}
221
h4 {margin: 0.5em 0}
222
h5 {margin: 0.5em 0}
223
224
225
/**********
226
td.timelineTime,
227
tr.timelineBottom td {
228
border-bottom: 0
229
}
230
table.timelineTable {
231
border-spacing: 0.3em 0.3em;
232
}
233
table.timelineTable tr td {
234
padding: 0.5em 1em;
235
}
236
.timelineModernCell[id],
237
.timelineColumnarCell[id],
238
.timelineDetailCell[id] {
239
background-color: #ffffff40;
240
}
241
table.timelineTable tr td:nth-of-type(2) {
242
background-color: #ffffffc0;
243
}
244
div.tl-canvas {
245
}
246
*/
247
248
.fossil-tooltip,
249
.fossil-toast-message {
250
background-color: rgba(251, 106, 0, 1);
251
border-color: rgba(127, 201, 255, 0.9);
252
color: black;
253
}
254
255
/************************************************************************
256
timeline...
257
************************************************************************/
258
table.timelineTable tr:not(.timelineDateRow){
259
background-color: #ffffff17;
260
}
261
table.timelineTable tr:not(.timelineDateRow):hover{
262
background-color: #FF450080;
263
}
264
table.timelineTable tr td:first-of-type {
265
vertical-align: middle;
266
padding: 0.2em 0.5em;
267
}
268
div.timelineDate {
269
font-weight: 700;
270
white-space: nowrap;
271
border-radius: 0.2em;
272
}
273
td.timelineTime {
274
text-align: right;
275
white-space: nowrap;
276
}
277
td.timelineGraph {
278
width: 20px;
279
text-align: left;
280
border-bottom: 0
281
}
282
a.timelineHistLink {
283
/*text-transform: lowercase*/
284
}
285
span.timelineComment {
286
padding: 0 5px
287
}
288
.report th,
289
span.timelineEllipsis {
290
cursor: pointer
291
}
292
table.timelineTable {
293
border-spacing: 0 0.2em;
294
}
295
.timelineModernCell, .timelineColumnarCell,
296
.timelineDetailCell, .timelineCompactCell,
297
.timelineVerboseCell {
298
vertical-align: top;
299
text-align: left;
300
padding: .75em;
301
border-radius: 0.25em;
302
background: inherit /*#000*/;
303
}
304
.timelineSelected > .timelineColumnarCell,
305
.timelineSelected > .timelineCompactCell,
306
.timelineSelected > .timelineDetailCell,
307
.timelineSelected > .timelineModernCell,
308
.timelineSelected > .timelineVerboseCell {
309
padding: .75em;
310
border-radius: 0.2em;
311
border: 1px solid #ff8000;
312
vertical-align: top;
313
text-align: left;
314
background: #442800
315
}
316
317
/* Timeline has a blank line at the bottom. Apparently it's to provide the
318
graph with a good starting place. Hiding it causes a slight graph
319
unsightliness, but we can change its bg color. */
320
table.timelineTable tr.timelineBottom,
321
table.timelineTable tr.timelineBottom:hover {
322
background: inherit;
323
}
324
span.timelineSelected {
325
border-radius: 0.2em;
326
border: 1px solid #ff8000;
327
/*vertical-align: top;
328
text-align: left;*/
329
background: #442800
330
}
331
.timelineSelected {
332
background-color: #ffffff40;
333
}
334
.timelineSecondary {}
335
.timelineSecondary > .timelineColumnarCell,
336
.timelineSecondary > .timelineCompactCell,
337
.timelineSecondary > .timelineDetailCell,
338
.timelineSecondary > .timelineModernCell,
339
.timelineSecondary > .timelineVerboseCell {
340
padding: .75em;
341
border-radius: 5px;
342
border: solid #0080ff;
343
/*vertical-align: top;
344
text-align: left;*/
345
background: #002844
346
}
347
span.timelineSecondary {
348
border-radius: 5px;
349
border: solid #0080ff;
350
/*vertical-align: top;
351
text-align: left;*/
352
background: #002844
353
}
354
.timelineCurrent > .timelineColumnarCell,
355
.timelineCurrent > .timelineCompactCell,
356
.timelineCurrent > .timelineDetailCell,
357
.timelineCurrent > .timelineModernCell,
358
.timelineCurrent > .timelineVerboseCell {
359
/*vertical-align: top;
360
text-align: left;*/
361
padding: .75em;
362
border-radius: 5px;
363
border: dashed #ff8000
364
}
365
.timelineModernCell[id], .timelineColumnarCell[id], .timelineDetailCell[id] {
366
background-color: inherit;/*#000*/
367
}
368
.tl-canvas {
369
margin: 0 6px 0 10px
370
}
371
.tl-rail {
372
width: 18px
373
}
374
.tl-mergeoffset {
375
width: 2px
376
}
377
.tl-nodemark {
378
margin-top: .8em
379
}
380
.tl-node {
381
width: 10px;
382
height: 10px;
383
border: 2px solid #bbb;
384
background: #111;
385
cursor: pointer
386
}
387
.tl-node.leaf:after {
388
content: '';
389
position: absolute;
390
top: 3px;
391
left: 3px;
392
width: 4px;
393
height: 4px;
394
background: #bbb
395
}
396
.tl-node.closed-leaf svg {
397
position: absolute;
398
top: 0px;
399
left: 0px;
400
width: 10px;
401
height: 10px;
402
color: #bbb;
403
}
404
.tl-node.sel:after {
405
content: '';
406
position: absolute;
407
top: 1px;
408
left: 1px;
409
width: 8px;
410
height: 8px;
411
background: #ff8000
412
}
413
.tl-arrow {
414
width: 0;
415
height: 0;
416
transform: scale(.999);
417
border: 0 solid transparent
418
}
419
.tl-arrow.u {
420
margin-top: -1px;
421
border-width: 0 3px;
422
border-bottom: 7px solid
423
}
424
.tl-arrow.u.sm {
425
border-bottom: 5px solid #bbb
426
}
427
.tl-line {
428
background: #bbb;
429
width: 2px
430
}
431
.tl-arrow.merge {
432
height: 1px;
433
border-width: 2px 0
434
}
435
.tl-arrow.merge.l {
436
border-right: 3px solid #bbb
437
}
438
.tl-arrow.merge.r {
439
border-left: 3px solid #bbb
440
}
441
.tl-line.merge {
442
width: 1px
443
}
444
.tl-arrow.cherrypick {
445
height: 1px;
446
border-width: 2px 0;
447
}
448
.tl-arrow.cherrypick.l {
449
border-right: 3px solid #bbb;
450
}
451
.tl-arrow.cherrypick.r {
452
border-left: 3px solid #bbb;
453
}
454
.tl-line.cherrypick.h {
455
width: 0px;
456
border-top: 1px dashed #bbb;
457
border-left: 0px dashed #bbb;
458
background: rgba(255,255,255,0);
459
}
460
.tl-line.cherrypick.v {
461
width: 0px;
462
border-top: 0px dashed #bbb;
463
border-left: 1px dashed #bbb;
464
background: rgba(255,255,255,0);
465
}
466
467
/************************************************************************
468
diffs...
469
************************************************************************/
470
td.diffln ins {
471
background-color: #559855;
472
color: #000;
473
text-decoration: none;
474
}
475
td.diffln del {
476
background-color: #c55;
477
color: #000;
478
text-decoration: none;
479
}
480
td.difftxt del {
481
background-color: inherit;
482
text-decoration: none;
483
}
484
td.difftxt del > del {
485
background-color: #c55;
486
color: #000;
487
text-decoration: none;
488
}
489
td.difftxt ins {
490
background-color: inherit;
491
text-decoration: none;
492
}
493
td.difftxt ins > ins {
494
background-color: #559855;
495
color: #000;
496
text-decoration: none;
497
}
498
tr.diffskip.jchunk {
499
background-color: black;
500
}
501
tr.diffskip > td.chunkctrl .jcbutton {
502
background-color: #303536;
503
}
504
505
/************************************************************************
506
************************************************************************/
507
body.wikiedit #fossil-status-bar,
508
body.fileedit #fossil-status-bar{
509
border-radius: 0.25em 0.25em 0 0;
510
}
511
.tab-container > .tabs {
512
border-radius: 0.25em;
513
}
514
515
blockquote.file-content {
516
margin: 0;
517
}
518
blockquote.file-content > pre {
519
padding: 0;
520
}
521
blockquote.file-content > pre > code {
522
padding: 0 0.5em;
523
}
524
svg.pikchr {
525
/* swap the pikchr svg colors around so they're readable in
526
this dark theme. 2020-02: changes in fossil have made this
527
obsolete. */
528
/*filter: invert(1) hue-rotate(180deg);*/
529
}
530
span.snippet>mark {
531
color: white;
532
font-weight: bold;
533
}
534
button,
535
input,
536
optgroup,
537
select,
538
textarea {
539
background: inherit;
540
color: inherit;
541
font: inherit;
542
margin: 0
543
}
544
button {
545
background-color: rgba(45,45,45,0.75);
546
}
547
input, textarea, select {
548
border: 1px solid rgba(127, 201, 255, 0.9);
549
padding: 1px;
550
}
551
select {
552
color: #1f1f1f;
553
background: #ffffffe0;
554
}
555
.capsumOff {
556
background-color: #222;
557
}
558
.capsumRead {
559
background-color: #262;
560
}
561
.capsumWrite {
562
background-color: #662;
563
}
564
565
body.forum div.forumSel {
566
background: inherit;
567
border-left-width: 0.5em;
568
border-left-style: double;
569
}
570
571
body.forum .debug {
572
background-color: #FF4500f0;
573
color: rgba(24,24,24,0.8);
574
}
575
576
body.forum .forumPosts.fileage tr:hover {
577
background-color: #333;
578
color: rgba(24,24,24,0.8);
579
}
580
body.forum .forumPosts.fileage tr:hover {
581
background-color: #333;
582
color: rgba(24,24,24,0.8);
583
}
584
body.forum .forumPosts.fileage tr:hover > td:nth-child(1),
585
body.forum .forumPosts.fileage tr:hover > td:nth-child(3) {
586
color: #ffffffe0;
587
}
588
589
body.forum .forumPostBody > div blockquote {
590
border: 1px inset;
591
padding: 0 0.5em;
592
}
593
594
body.forum .forumPosts.fileage a:visited {
595
color: rgba(98, 150, 205, 0.9);
596
}
597
598
body.report table.report tr td { color: black }
599
body.report table.report a { color: blue }
600
body.tkt td.tktDspValue { color: black }
601
body.tkt td.tktDspValue a { color: blue }
602
603
body.branch .brlist > table > tbody > tr:hover:not(.selected),
604
body.branch .brlist > table > tbody > tr.selected {
605
background-color: #442800;
606
}
607
608
p.noMoreShun {
609
color: #e5e500;
610
}
611

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button