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

50-code.css Raw History Folder
