50-code.css Raw History Folder

1@layer components {
2  /* page title for a file: name, then its actions as plain words */
3  .file-h {
4    display: flex; gap: 2ch; align-items: baseline; margin-top: var(--lh);
5    padding-bottom: 2px; border-bottom: 1px solid var(--rule);
6    & .acts { margin-left: auto; font-weight: normal; display: flex; gap: 2ch; }
7  }
8  .notice { margin-top: var(--lh); border-left: 2px solid var(--ink); padding-left: 1ch; max-width: var(--measure); }
9  .note { color: var(--ink-dim); }
10  .pad { padding: 0 1ch; }
11
12  /* source view: gutter numbers are links (selectable lines), lines span the full width */
13  .code {
14    margin: var(--lh) calc(var(--pad) * -1) 0; overflow-x: auto;
15    font-size: var(--fs-code); line-height: var(--lh-code);
16    & code { display: grid; min-width: max-content; }
17    & .line { padding-right: var(--pad); border-left: 2px solid transparent; }
18    & .line:hover { background: var(--row); }
19    & .line.sel { background: var(--sel); border-left-color: var(--focus); }
20    & .ln {
21      display: inline-block; width: 8ch; padding-right: 2ch; text-align: right; /* 8ch: a multiple of tab-size, so tabs after the gutter keep their width */
22      color: var(--ink-mute); text-decoration: none; user-select: none;
23    }
24    & .ln:hover, & .sel .ln { color: var(--ink-hi); }
25  }
26  .source { margin-top: var(--lh); & > summary { color: var(--ink-dim); } }
27
28  /* commit header, like `git show` */
29  .show {
30    margin-top: var(--lh);
31    & h1 { max-width: var(--measure); }
32    & .msg { margin-top: var(--lh); white-space: pre-wrap; max-width: var(--measure); color: var(--ink-dim); }
33    & .show-kv { margin-top: var(--lh); }
34    & .show-kv dd { white-space: normal; }
35  }
36  .diff-tools {
37    display: flex; gap: 2ch; align-items: baseline; margin-top: var(--lh);
38    position: sticky; top: var(--stick); z-index: 5; background: var(--paper);
39    border-bottom: 1px solid var(--rule);
40    & .grow { flex: 1; }
41    & button { color: var(--ink-dim); }
42    & button:hover { color: var(--ink); text-decoration: underline; }
43    & button[aria-pressed="true"] { color: var(--ink-hi); font-weight: bold; }
44    & button[aria-pressed="true"]::before { content: "▸"; }
45  }
46
47  /* one file of a diff */
48  .dfile {
49    margin-top: var(--lh); scroll-margin-top: calc(var(--stick) + var(--lh) + 4px);
50    & > summary {
51      position: sticky; top: calc(var(--stick) + var(--lh) + 1px); z-index: 4;
52      background: var(--paper-alt); border: 1px solid var(--rule); padding: 0 1ch;
53      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; list-style: none;
54    }
55    & > summary::-webkit-details-marker { display: none; }
56    & > summary::before { content: "▸ "; }
57    &[open] > summary::before { content: "▾ "; }
58    & .st { font-weight: bold; }
59    & .p { font-weight: bold; }
60    & > .note { border: 1px solid var(--rule); border-top: 0; }
61  }
62  .dt {
63    width: max-content; min-width: 100%;
64    font-size: var(--fs-code); line-height: var(--lh-code);
65    & td { padding: 0; vertical-align: top; }
66    & .ln { width: 6ch; min-width: 6ch; padding-right: 1ch; text-align: right; color: var(--ink-mute); user-select: none; }
67    & .m { width: 2ch; text-align: center; user-select: none; color: var(--ink-dim); }
68    & .tx { white-space: pre; }
69    & .hunk td { color: var(--ink-mute); background: var(--paper-alt); padding: 0 1ch; }
70    & .add, & tr.add td { background: var(--add); }
71    & .del, & tr.del td { background: var(--del); }
72    & .add.m, & tr.add .m { color: var(--teal); font-weight: bold; }
73    & .del.m, & tr.del .m { color: var(--red); font-weight: bold; }
74    & tr.add .ln, & .ln.add { color: var(--teal); }
75    & tr.del .ln, & .ln.del { color: var(--red); }
76    & .none { background: var(--paper-alt); }
77  }
78  .dscroll { overflow-x: auto; border: 1px solid var(--rule); border-top: 0; }
79  .spl { width: 100%; table-layout: fixed; & .tx { overflow: hidden; text-overflow: ellipsis; } & .ln { width: 6ch; } & .m { width: 2ch; } }
80  #diffs[data-diff="unified"] .spl, #diffs[data-diff="split"] .uni { display: none; }
81
82  /* diff table of contents in the rail */
83  .files {
84    & a { display: grid; grid-template-columns: 2ch minmax(0, 1fr) auto; column-gap: 1ch; text-decoration: none; }
85    & a:hover .p { text-decoration: underline; }
86    & a[aria-current="true"] { background: var(--row); font-weight: bold; }
87    & .p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
88    & .n { color: var(--ink-dim); font-size: var(--fs-s); }
89    & .b { grid-column: 2 / -1; color: var(--ink-mute); font-size: var(--fs-s); letter-spacing: .1ch; line-height: 1; padding-bottom: 4px; }
90  }
91
92  @media (max-width: 700px) {
93    .diff-tools { flex-wrap: wrap; column-gap: 1ch; }
94    .diff-tools .grow { flex-basis: 100%; height: 0; }
95    .show-kv dd { overflow-wrap: anywhere; }
96    .file-h .acts { gap: 1ch; }
97  }
98  .pager { display: flex; gap: 3ch; justify-content: center; margin-top: var(--lh); }
99  .days section[hidden] { display: none; }
100  .list.refs {
101    & .c-kind { width: 8ch; }
102    & .c-name { width: 34ch; }
103    & .c-info { width: 11ch; }
104    & .c-sha { width: 9ch; }
105    & .c-sub { width: auto; }
106  }
107  .rail .list.commits {
108    & .c-who { display: none; }
109    & .c-sha { width: 8ch; }
110    & .c-when { width: 9ch; padding-right: 0; text-align: right; }
111  }
112  .rail p + p { margin-top: 0; }
113  .rail section > p { overflow-wrap: anywhere; }
114  @media (max-width: 700px) {
115    /* the name takes what the fixed columns leave */
116    .list.tree .c-name, .list.refs .c-name { width: auto; }
117  }
118}
119
120@layer components {
121  .gallery section { margin-top: calc(var(--lh) * 2); }
122  .gallery .rule-h > :last-child { font-weight: normal; color: var(--ink-mute); order: 2; }
123  .gallery .rule-h::after { order: 1; }
124  .gallery .files { max-width: var(--rail); }
125  .linkish { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
126  .linkish:hover { text-decoration-color: currentColor; }
127}
128
129@layer components {
130  /* counts and bars: + in teal, - in red, everywhere a change is summarised */
131  .plus { color: var(--teal); }
132  .minus { color: var(--red); }
133}
50-code.css RawHistoryFolder

50-code.css Raw History Folder
