1// This code includes software originally developed by Drew DeVault.
2//
3// Copyright 2017 Drew DeVault <sir@cmpwn.com>
4//
5// Redistribution and use in source and binary forms, with or without
6// modification, are permitted provided that the following conditions are met:
7//
8// 1. Redistributions of source code must retain the above copyright notice, this
9// list of conditions and the following disclaimer.
10//
11// 2. Redistributions in binary form must reproduce the above copyright notice,
12// this list of conditions and the following disclaimer in the documentation
13// and/or other materials provided with the distribution.
14//
15// 3. Neither the name of the copyright holder nor the names of its contributors
16// may be used to endorse or promote products derived from this software without
17// specific prior written permission.
18//
19// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
20// ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
21// WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
22// DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
23// FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
24// DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
25// SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
26// CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
27// OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
28// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
29
30.tree-list {
31 display: grid;
32 // mode name
33 grid-template-columns: auto 1fr fit-content(40em) auto auto;
34 font-family: $font-family-monospace;
35
36 svg {
37 color: #777;
38 }
39
40 .size {
41 text-align: right;
42 }
43
44 .name.blob a {
45 color: $gray-900;
46 }
47
48 .mode,
49 .commit,
50 .commit a,
51 .date,
52 .size {
53 color: $gray-700;
54 }
55
56 @media(prefers-color-scheme: dark) {
57 .name.blob a {
58 color: inherit;
59 }
60
61 .mode,
62 .commit,
63 .commit a,
64 .date,
65 .size {
66 color: inherit;
67 }
68 }
69
70 .name.blob {
71 text-overflow: ellipsis;
72 white-space: nowrap;
73 overflow: hidden;
74 }
75
76 .commit {
77 text-overflow: ellipsis;
78 white-space: nowrap;
79 overflow: hidden;
80 }
81
82 &>div {
83 padding: 0.1rem 0.5rem;
84 background: transparent;
85
86 &.id {
87 text-align: right;
88 }
89
90 &.comments {
91 text-align: center;
92 }
93
94 @for $i from 1 through 5 {
95 &:nth-child(5n+#{$i}) {
96 grid-column-start: $i;
97 }
98
99 // Striped rows
100 &:nth-child(10n+#{$i}) {
101 background: rgba(0, 0, 0, .05);
102
103 @media(prefers-color-scheme: dark) {
104 background: lighten($gray-900, 5);
105 }
106 }
107 }
108 }
109}
110
111.code-view {
112 display: grid;
113 grid-template-columns: auto auto auto 1fr;
114 grid-template-rows: auto;
115
116 .blame-user {
117 grid-column-start: 1;
118 grid-row-start: 1;
119 background: #ddd;
120
121 @media(prefers-color-scheme: dark) {
122 background: $gray-900;
123 }
124
125 .hunk {
126 padding-left: 0.5rem;
127 }
128 }
129
130 .blame-time {
131 grid-column-start: 2;
132 grid-row-start: 1;
133 background: #ddd;
134 border-right: 1px solid #444;
135 text-align: right;
136
137 @media(prefers-color-scheme: dark) {
138 background: $gray-900;
139 }
140
141 .hunk {
142 padding-right: 0.5rem;
143 }
144 }
145
146 .hunk:nth-child(2n) {
147 background: #eee;
148
149 @media(prefers-color-scheme: dark) {
150 background: lighten($gray-900, 5);
151 }
152 }
153
154 .lines {
155 grid-column-start: 3;
156 grid-row-start: 1;
157 text-align: right;
158 padding-left: 0.5rem;
159 padding-right: 0.5rem;
160
161 background: #eee;
162 border-right: 1px solid #444;
163
164 @media(prefers-color-scheme: dark) {
165 background: lighten($gray-900, 5);
166 }
167
168 a:target::before,
169 a.selected::before {
170 display: block;
171 content: "";
172 // +6px to connect multiple selected lines
173 height: calc(1rem + 6px);
174 width: 100%;
175 z-index: -1;
176 position: absolute;
177 left: 0;
178 background: lighten($blue, 35);
179
180 @media(prefers-color-scheme: dark) {
181 background: $black;
182 }
183 }
184 }
185
186 .highlight {
187 grid-column-start: 4;
188 grid-row-start: 1;
189 padding-left: 1rem;
190 background: transparent;
191 overflow-x: hidden;
192
193 pre {
194 background: transparent;
195 }
196 }
197
198 .ruler {
199 background: transparent;
200 grid-column-start: 4;
201 grid-row-start: 1;
202 display: block;
203 padding-left: calc(1rem + 4px);
204 height: 100%;
205 pointer-events: none;
206 overflow-x: hidden;
207
208 pre {
209 background: transparent;
210 }
211
212 &>span {
213 height: 100%;
214 display: inline-block;
215 border-right: 1px solid $gray-200;
216
217 @media(prefers-color-scheme: dark) {
218 border-right: 1px solid #343a40;
219 }
220 }
221 }
222}
223
224.ref {
225 border-width: 1px;
226 border-style: solid;
227 padding: 0.1rem 0.2rem;
228
229 &.branch {
230 border-color: darken($info, 20);
231 background: $info;
232 color: $white !important;
233 }
234
235 &.tag {
236 border-color: darken($primary, 20);
237 background: $primary;
238 color: $white;
239 }
240
241 &.tag.annotated {
242 border-color: darken($success, 20);
243 background: $success;
244 color: $white;
245 }
246}
247
248.diff {
249 .lineno {
250 text-decoration: none;
251 }
252
253 .text-success {
254 color: color_adjust_contrast_AERT(darken($success, 10), white) !important;
255 }
256
257 .text-danger {
258 color: color_adjust_contrast_AERT(darken($danger, 10), white) !important;
259 }
260
261 pre {
262 background: transparent;
263 }
264
265 @media(prefers-color-scheme: dark) {
266 $success-dark: #2bb34b;
267 $danger-dark: #ff3e3e;
268
269 .text-success {
270 color: $success-dark !important;
271 }
272
273 .text-danger {
274 color: $danger-dark !important;
275 }
276 }
277}
278
279img {
280 max-width: 100%;
281}
282
283.prepare-patchset {
284 legend {
285 font-weight: bold;
286 }
287
288 label {
289 margin-right: 1rem;
290 cursor: pointer;
291 }
292
293 details {
294 display: inline;
295 color: $gray-600;
296
297 &[open] {
298 display: block;
299 color: $black;
300
301 summary {
302 color: $black;
303 }
304 }
305
306 ul {
307 list-style: none;
308 padding-left: 0;
309 }
310
311 li {
312 margin-top: 1rem;
313 }
314
315 @media(prefers-color-scheme: dark) {
316 color: $gray-500;
317
318 &[open] {
319 color: $gray-100;
320
321 summary {
322 color: $gray-100;
323 }
324 }
325 }
326 }
327
328 .event-list {
329 display: flex;
330 flex-direction: column;
331
332 &.reverse {
333 flex-direction: column-reverse;
334 }
335
336 input[type="radio"] {
337 display: none;
338 }
339
340 &>.commit-diff {
341 margin-top: 1rem;
342 order: -2;
343 }
344
345 &>.form-controls {
346 order: -1;
347 margin-top: 1rem;
348 align-self: flex-end;
349
350 &.last {
351 order: -3;
352 }
353 }
354
355 &>details {
356 order: 0;
357 }
358
359 &>.event {
360 order: 1;
361 display: block;
362 margin: 0.25rem 0;
363
364 // Because the order is reversed
365 &:last-child {
366 margin: 0.25rem 0;
367 }
368
369 &:first-child {
370 margin: 0;
371 }
372 }
373
374 input[type="radio"]:checked~.event {
375 background: lighten($info, 50) !important;
376 }
377
378 input[type="radio"]:checked+.event {
379 background: lighten($info, 45) !important;
380 }
381
382 @media(prefers-color-scheme: dark) {
383 input[type="radio"]:checked~.event {
384 background: #131a3c !important;
385 }
386
387 input[type="radio"]:checked+.event {
388 background: #003038 !important;
389 }
390 }
391 }
392}
393
394.markdown-nav {
395 padding-left: 0;
396 padding-right: 0;
397
398 .nav-tabs {
399 padding-left: 0;
400 margin-bottom: 0;
401 border-left: 1rem #ddd solid;
402 }
403}
404
405.blob-nav {
406 display: inline-block;
407 padding-left: 0;
408 padding-right: 0;
409
410 .nav-item:hover {
411 background: #fff;
412 }
413
414 @media(prefers-color-scheme: dark) {
415 .nav-item:hover {
416 background: inherit;
417 }
418 }
419
420 .nav-tabs {
421 padding-left: 0;
422 margin-bottom: -3px;
423 border-bottom: 3px transparent solid;
424
425 .nav-link {
426 padding: 0 0.5rem;
427
428 &:hover {
429 color: black;
430 }
431
432 &.active {
433 border-bottom: 3px #fff solid;
434 background: #fff;
435 }
436
437 @media(prefers-color-scheme: dark) {
438 color: $gray-400;
439
440 &.active,
441 &:hover {
442 border-bottom: 3px $gray-900 solid;
443 background: $gray-900;
444 color: $white;
445 }
446 }
447 }
448 }
449}
450
451.tree-header {
452 display: flex;
453
454 .breadcrumb {
455 flex-grow: 1;
456 width: 100%;
457 }
458
459 .commit-info {
460 margin-left: 1rem;
461 white-space: nowrap;
462 text-overflow: ellipsis;
463 overflow: hidden;
464 min-width: 0;
465 }
466}
467
468dl {
469 dd {
470 text-overflow: ellipsis;
471 overflow-x: hidden;
472 }
473}
474
475@include media-breakpoint-up(md) {
476 .blob {
477 padding-left: 2rem;
478
479 .commit {
480 float: right;
481 }
482 }
483}
484
485.code-viewport {
486 display: flex;
487 flex: 1 0 auto;
488 padding-left: 0;
489 padding-right: 0;
490}