1@use "../theme" as *;
2@use "../vars" as v;
3
4.src-crumbs {
5 display: flex;
6 align-items: baseline;
7 justify-content: space-between;
8 gap: 1rem;
9 font-family: v.$font-mono;
10 font-size: 0.9rem;
11 margin-block-end: 1rem;
12 color: theme(muted);
13
14 &__git .github-icon {
15 width: 1.1rem;
16 height: 1.1rem;
17 vertical-align: middle;
18 }
19
20 &__current {
21 display: inline;
22 font-size: inherit;
23 font-weight: 600;
24 color: theme(text);
25 }
26}
27
28.src-tree {
29 font-family: v.$font-mono;
30 font-size: 0.85rem;
31
32 &__row {
33 display: flex;
34 justify-content: space-between;
35 gap: 1rem;
36 padding-block: 0.2rem;
37 color: theme(muted);
38 }
39
40 &__info {
41 flex-shrink: 0;
42 }
43}
44
45.src-view__meta {
46 display: flex;
47 align-items: baseline;
48 justify-content: space-between;
49 gap: 1rem;
50 font-family: v.$font-mono;
51 font-size: 0.8rem;
52 color: theme(muted);
53 margin-block-end: 0.5rem;
54}
55
56.src-view__copy {
57 background: none;
58 border: 0;
59 padding: 0;
60 font: inherit;
61 color: inherit;
62 cursor: pointer;
63
64 &:hover {
65 color: theme(accent);
66 }
67}
68
69// "copy link / copy line" popup for a clicked line number (see copy.js
70// initSrcCopy); fixed on body, positioned from JS, so overflow can't clip it
71.src-linktip {
72 @include terminal-panel;
73 position: fixed;
74 font-size: 0.7rem;
75 font-family: "Silkscreen", monospace;
76 color: theme(text);
77 display: flex;
78 flex-direction: column;
79 white-space: nowrap;
80 z-index: 10;
81 transition: opacity 0.35s ease;
82
83 &.is-hiding {
84 opacity: 0;
85 pointer-events: none;
86 }
87
88 button {
89 background: none;
90 border: 0;
91 padding: 0.25rem 0.5rem;
92 font: inherit;
93 color: inherit;
94 cursor: pointer;
95 text-align: left;
96
97 &:hover {
98 color: theme(accent);
99 }
100 }
101
102 button + button {
103 border-block-start: 2px solid theme(border);
104 }
105}
106
107.src-view__code {
108 overflow-x: auto;
109
110 // code card, just borderless
111 .highlight {
112 border: 0;
113 }
114
115 .highlight pre {
116 padding-inline-start: 0.5rem;
117 }
118
119 .ln {
120 color: theme(muted);
121 cursor: pointer;
122 align-self: flex-start;
123 flex-shrink: 0;
124 touch-action: none; // dragging selects lines instead of scrolling
125 -webkit-user-select: none;
126 user-select: none;
127
128 &:hover {
129 color: theme(accent);
130 }
131
132 a {
133 color: inherit;
134 }
135 }
136
137 .chroma .line {
138 display: flex;
139 // span the full scrollable width, not just the visible part, so the
140 // selection background doesn't get cut off when scrolled horizontally
141 width: fit-content;
142 min-width: 100%;
143 }
144
145 // line(s) selected by clicking/dragging a number or via an incoming
146 // #t-N / #t-N-t-M link (class set in copy.js; :target isn't used because
147 // pushState doesn't update it and stale highlights would linger)
148 .line.is-selected {
149 background: color-mix(in srgb, theme(accent) 15%, transparent);
150 }
151
152 :target,
153 .line {
154 scroll-margin-block-start: 4rem;
155 }
156
157 // markdown: soft-wrap long prose lines instead of horizontal scrolling
158 &--wrap {
159 .highlight,
160 .highlight pre,
161 .cl {
162 white-space: pre-wrap;
163 overflow-wrap: anywhere;
164 }
165 }
166}