so://phie

blob: 8bb4867d04430e9b8af4f60f76ba01224364f436 (7768 bytes)[raw]

  1@font-face {
  2  font-family: 'Inconsolata';
  3  src: url('/asset/font/Inconsolata-Variable.ttf') format('truetype');
  4}
  5
  6:root {
  7  --ft-mono: 'Inconsolata', monospace;
  8  --ft-size: 14px;
  9  --ft-weight: 400;
 10}
 11
 12* {
 13  font-family: var(--ft-mono);
 14  box-sizing: border-box;
 15}
 16
 17html {
 18
 19  body {
 20    max-width: 900px;
 21    margin: 4rem auto;
 22    margin-bottom: 6rem;
 23    padding: 0px 1rem;
 24    font-size: var(--ft-size);
 25    font-weight: var(--ft-weight);
 26  }
 27}
 28
 29nav {
 30  border-bottom: 1px solid #bbbbbb;
 31  padding-bottom: 1rem;
 32}
 33
 34pre {
 35  white-space: pre-wrap;
 36}
 37
 38img {
 39  max-width: 100%;
 40}
 41
 42ul.row-list {
 43  padding: 0px;
 44  width: 100%;
 45
 46  li.row {
 47    display: flex;
 48    align-items: center;
 49    gap: 0px 1rem;
 50    margin: 0px;
 51    padding: 0px 2ch;
 52    height: 24px;
 53    list-style-type: none;
 54
 55    &.row--head {
 56      margin-bottom: 0.5rem;
 57      border-bottom: 1px solid #bbbbbb;
 58      font-weight: 600;
 59    }
 60
 61    &:not(.row--head):hover {
 62      background-color: #e1e1e1;
 63    }
 64
 65    span.col {
 66      display: inline-block;
 67
 68      &.col--oid {
 69        min-width: 7ch;
 70        max-width: 7ch;
 71      }
 72
 73      &.col--time {
 74        min-width: 10ch;
 75        max-width: 10ch;
 76      }
 77
 78      &.col--mode {
 79        min-width: 10ch;
 80        max-width: 10ch;
 81      }
 82
 83      &.col--owner {
 84        min-width: 20ch;
 85        max-width: 20ch;
 86        text-overflow: ellipsis;
 87        white-space: nowrap;
 88        overflow: hidden;
 89      }
 90
 91      &.col--author {
 92        min-width: 20ch;
 93        max-width: 20ch;
 94        text-overflow: ellipsis;
 95        white-space: nowrap;
 96        overflow: hidden;
 97      }
 98
 99      &.col--size {
100        min-width: 20ch;
101        max-width: 20ch;
102      }
103
104      &.col--message {
105        min-width: 50ch;
106        flex: 1;
107        text-overflow: ellipsis;
108        white-space: nowrap;
109        overflow: hidden;
110      }
111
112      &.col--description {
113        min-width: 50ch;
114        flex: 1;
115        text-overflow: ellipsis;
116        white-space: nowrap;
117        overflow: hidden;
118      }
119    }
120  }
121
122  &.list--tree li.row span.col {
123
124    &.col--name {
125      min-width: 50ch;
126      flex: 1;
127    }
128  }
129
130  &.list--repo li.row span.col {
131
132    &.col--name {
133      min-width: 30ch;
134      max-width: 30ch;
135    }
136  }
137
138  &.list--refs li.row span.col {
139
140    &.col--name {
141      min-width: 30ch;
142      max-width: 30ch;
143    }
144  }
145}
146
147.git--repo {
148  margin-top: 2rem;
149
150  .repo--description {
151    
152  }
153
154  .repo--clone {
155    display: inline-block;
156    margin-top: 0.5rem;
157  }
158  
159  hr {
160    border: none;
161    border-top: 1px solid #bbbbbb;
162  }
163
164  ul.link-list {
165    display: flex;
166    gap: 0px 0rem;
167    padding: 0px;
168    border-bottom: 1px solid #bbbbbb;
169    margin-top: 2rem;
170    margin-bottom: 0.5rem;
171
172    li.link {
173      margin: 0px;
174      margin-bottom: -1px;
175      list-style-type: none;
176      min-width: 12ch;
177      border: 1px solid #bbbbbb;
178
179      &:not(:first-of-type) {
180        margin-left: -1px;
181      }
182
183      &.link--active {
184        border-bottom: 1px solid #ffffff;
185        z-index: 1;
186      }
187
188      &:not(.link--active) {
189        background-color: #eeeeee;
190      }
191
192      a {
193        display: block;
194        padding: 0.4rem 1rem;
195        padding-bottom: 0.5rem;
196        text-align: center;
197      }
198    }
199  }
200
201  select.repo--branch {
202    margin: 0.5rem 0px;
203    border: 1px solid #999999;
204    padding: 0.25rem 0.5rem;
205    cursor: pointer;
206    min-width: 30ch;
207
208    &:hover {
209      border-color: #777777;
210    }
211  }
212
213  .repo--tab {
214    padding-top: 0.5rem;
215  }
216}
217
218.commit--meta {
219
220  .commit--body {
221    white-space: pre-wrap;
222  }
223
224  hr {
225    margin-top: 1rem;
226    margin-bottom: 1rem;
227  }
228
229  .commit--info {
230    line-height: 1.1rem;
231  }
232}
233
234.commit--diff {
235  margin-top: 2rem;
236
237  pre {
238    margin: 1rem 0px;
239
240    &.diff--meta {
241      padding-top: 0.25rem;
242      padding-bottom: 0.25rem;
243      padding-left: 1ch;
244      border: 1px solid #bbbbbb;
245      background-color: #eeeeee;
246
247      &:has(+ pre.diff--code) {
248        margin-bottom: -1rem;
249        border-bottom: 0px;
250      }
251
252      p {
253        margin: 0px;
254        line-height: 1.1rem;
255
256        &:not(:first-of-type) {
257          display: none;
258        }
259      }
260    }
261
262    &.diff--code {
263      padding-top: 0.5rem;
264      padding-bottom: 0.5rem;
265      border: 1px solid #bbbbbb;
266      
267      p {
268        display: flex;
269        margin: 0px;
270        line-height: 1.1rem;
271
272        &:last-of-type {
273          display: none;
274        }
275
276        &.is-hunk {
277          color: #5252ff;
278        }
279
280        &.is-add {
281
282          span.ln {
283            border-left: 3px solid #77d877;
284          }
285        }
286
287        &.is-rem {
288
289          span.ln {
290            border-left: 3px solid #ff7f7f;
291          }
292        }
293
294        &:not(:hover) {
295
296          &.is-add {
297            color: #2e862e;
298          }
299
300          &.is-rem {
301            color: #932323;
302          }
303
304          &:target {
305            background-color: #ffff9a !important;
306
307            span.ln {
308
309              a {
310                color: #666666;
311              }
312            }
313          }
314        }
315
316        &:hover {
317          background-color: #e1e1e1;
318
319          span.ln {
320
321            a {
322              color: #666666;
323            }
324          }
325        }
326
327        span.ln {
328          min-width: max-content;
329          user-select: none;
330          padding-left: 1ch;
331          margin-right: 2ch;
332          border-left: 3px solid transparent;
333
334          a {
335            text-decoration: none;
336            color: #888888;
337
338            &:hover {
339              text-decoration: underline;
340            }
341          }
342        }
343
344        span.line {
345      
346        }
347      }
348    }
349  }
350}
351
352.blob {
353  margin-top: 2rem;
354
355  pre {
356    margin: 1rem 0px;
357
358    &.blob--meta {
359      display: flex;
360      gap: 0px 2ch;
361      padding-top: 0.25rem;
362      padding-bottom: 0.25rem;
363      padding-left: 1ch;
364      padding-right: 1ch;
365      border: 1px solid #bbbbbb;
366      background-color: #eeeeee;
367      line-height: 1.1rem;
368
369      &:has(+ pre.blob--code) {
370        margin-bottom: -1rem;
371        border-bottom: 0px;
372      }
373
374      span {
375        flex: 1;
376      }
377
378      a {
379
380        &.link--raw {
381          margin-left: auto;
382        }
383      }
384    }
385
386    &.blob--code {
387      padding-top: 0.5rem;
388      padding-bottom: 0.5rem;
389      border: 1px solid #bbbbbb;
390
391      span.blob--binary {
392        display: block;
393        padding-top: 1rem;
394        padding-bottom: 1rem;
395        text-align: center;
396      }
397      
398      p {
399        display: flex;
400        margin: 0px;
401        line-height: 1.1rem;
402
403        &:not(:hover) {
404
405          &:target {
406            background-color: #ffff9a !important;
407
408            span.ln {
409
410              a {
411                color: #666666;
412              }
413            }
414          }
415        }
416
417        &:hover {
418          background-color: #e1e1e1;
419
420          span.ln {
421
422            a {
423              color: #666666;
424            }
425          }
426        }
427
428        span.ln {
429          min-width: max-content;
430          user-select: none;
431          padding-left: 1ch;
432          margin-right: 2ch;
433          border-left: 3px solid transparent;
434
435          a {
436            text-decoration: none;
437            color: #888888;
438
439            &:hover {
440              text-decoration: underline;
441            }
442          }
443        }
444
445        span.line {
446      
447        }
448      }
449    }
450  }
451}
452
453.blob--markdown {
454
455  p {
456    margin: 1.25rem 0px;
457    line-height: 1.25rem;
458  }
459  
460  pre:has(code) {
461    padding: 1rem 2ch;
462
463    &:not(:has(code.language-graph)) {
464      border: 1px solid #bbbbbb;
465      background-color: #eeeeee;
466    }
467
468    code {
469      line-height: 1.1rem;
470
471      &.language-graph {
472        display: block;
473        width: max-content;
474        margin: 0 auto;
475      }
476    }
477  }
478
479  :not(pre) + code {
480    padding: 1px 0.5ch;
481    border: 1px solid #bbbbbb;
482  }
483}