assets/css/screen.css

   1 html {
   2     scroll-padding-top: 70px; /* height of sticky header */
   3 }
   4
   5 html, body {
   6     background-color: #fff;
   7     width: 100%;
   8     padding: 0px;
   9     margin: 0px;
  10 }
  11
  12 body {
  13     height: auto;
  14 }
  15
  16 h1 {
  17     clear: both;
  18     margin-top: 1.3rem;
  19     margin-bottom: 0.5rem;
  20 }
  21
  22 .title {
  23     clear: both;
  24     font-size: 16px;
  25     margin-bottom: 1rem;
  26     border-bottom: 1px dashed #ddd;
  27     padding: 0px;
  28     padding-bottom: 1rem;
  29     color: #586069;
  30 }
  31
  32 .comment-box {
  33     margin-top: 1rem;
  34     margin-bottom: 2rem;
  35     border-top: 1px dashed #ddd;
  36     padding-top: 1rem;
  37 }
  38
  39 h2 {
  40     border-bottom: 1px solid #eee;
  41     padding-bottom: 5px;
  42 }
  43
  44 ul.merged li, ul.blockedby li, ul.blocks li {
  45     display: inline-block;
  46 }
  47 ul.merged li + li:before,
  48 ul.blockedby li + li:before,
  49 ul.blocks li + li:before {
  50     content: ", ";
  51 }
  52
  53 p + p {
  54     text-indent: 0.5rem;
  55     margin-top: 1.0rem;
  56 }
  57
  58 .card-body form {
  59     padding-bottom: 1em;
  60 }
  61
  62 tr.heading th {
  63     background-color: #f8f9fa;
  64     font-weight: bold;
  65 }
  66
  67 tr td:nth-child(1),
  68 tr td:nth-child(4) {
  69     width: 4rem;
  70 }
  71
  72 tr td:nth-child(3){
  73     width: 19rem;
  74 }
  75
  76 tr.serious svg {
  77     fill: #ff5a2a;
  78     margin-right: .5em;
  79     height: 1.2em;
  80     vertical-align: text-bottom;
  81 }
  82 tr.important svg {
  83     fill: #000;
  84     margin-right: .5em;
  85     height: 1.2em;
  86     vertical-align: text-bottom;
  87 }
  88
  89 nav {
  90     background: #333333;
  91     border-color: #1A1A1A1A;
  92     border-style: none none solid none;
  93     border-width: thin;
  94     width: 100%;
  95     margin-bottom: 1rem;
  96     padding: .5em;
  97     color: #fff;
  98     border-radius: 0;
  99 }
 100
 101 nav span.navbar-text {
 102     display: flex;
 103     flex-grow: 1;
 104 }
 105
 106 @media (max-width: 576px) {
 107     nav span.navbar-text {
 108         display: none;
 109     }
 110 }
 111
 112 @media (min-width: 576px) {
 113     #search input:focus {
 114         width: 400px;
 115     }
 116     #search #search-hints {
 117         width: 400px;
 118     }
 119 }
 120
 121 @media (min-width: 768px) {
 122     #search input:focus {
 123         width: 500px;
 124     }
 125     #search.form-inline #search-hints {
 126         width: 500px;
 127     }
 128 }
 129
 130 #search #search-hints {
 131     display: none;
 132     position: absolute;
 133     background: white;
 134     top: 2.5rem;
 135     border: 1px solid #ced4da;
 136     border-top: none;
 137     box-shadow: 3px 3px 10px #ddd;
 138     padding: 1em;
 139     z-index: 2;
 140     color: #212529;
 141 }
 142 #search.form-inline:focus-within #search-hints {
 143     display: block;
 144 }
 145 #search { z-index: 3; }
 146
 147 footer {
 148     border-color: #1A1A1A1A;
 149     border-style: dashed none none none;
 150     border-width: 2px;
 151     width: 100%;
 152     align-items: center;
 153     text-align: center;
 154     margin-top: 3rem;
 155     padding: 1rem;
 156     color: #586069;
 157     background: #fafafa;
 158 }
 159
 160 table {
 161     width: 100%;
 162 }
 163
 164 /* messages */
 165 .row.event {
 166     margin-bottom: 1em;
 167     font-size: 1.2em;
 168 }
 169
 170 .info .stat {
 171     display: inline-grid;
 172     color: #586069;
 173     margin-right: 1em;
 174 }
 175 .info .stat .label {
 176     display: block;
 177 }
 178
 179 a.message-anchor {
 180     display: block;
 181     position: relative;
 182     visibility: hidden;
 183 }
 184
 185 #sidebar {
 186     display: none;
 187     position: fixed;
 188     right: 10px;
 189     top: 100px;
 190     background: white;
 191     border: 1px solid #ddd;
 192     border-radius: 6px;
 193     padding: .5em;
 194     padding-right: 1.5em;
 195     z-index: 1;
 196     max-height: 500px;
 197     overflow-y: auto;
 198 }
 199
 200 @media (min-width: 1200px) {
 201     #sidebar {
 202         display: block;
 203     }
 204 }
 205
 206 #sidebar li {
 207     width: max-content;
 208 }
 209
 210 .conversation .avatar {
 211     display: none;
 212 }
 213
 214 #sidebar .avatar,
 215 .message .from .avatar {
 216     width: 1.2em;
 217     height: 1.2em;
 218     border-radius: 3px;
 219     color: #fff;
 220     display: inline-flex;
 221     justify-content: center;
 222     align-items: center;
 223     margin-right: 3px;
 224 }
 225
 226 @media (min-width: 768px) {
 227     .conversation .avatar {
 228         height: 48px;
 229         width: 48px;
 230         border: 1px solid #ddd;
 231         border-radius: 6px;
 232         color: #fff;
 233         display: flex;
 234         justify-content: center;
 235         align-items: center;
 236         font-size: 32px;
 237         position: absolute;
 238     }
 239 }
 240
 241 .address + .address:before {
 242     content: ", ";
 243 }
 244
 245 @media (min-width: 768px) {
 246     .message {
 247         margin-left: 65px;
 248     }
 249 }
 250
 251 @media (max-width: 768px) {
 252     h1 {
 253         font-size: 2rem;
 254     }
 255 }
 256
 257 details {
 258     margin-top: .5em;
 259 }
 260
 261 .message details {
 262     border-top: 2px dotted #efefef;
 263     border-bottom: 2px dotted #efefef;
 264 }
 265 .message details summary {
 266     color: #586069;
 267     padding: 1em 0;
 268 }
 269
 270 .message .body pre {
 271     background: transparent;
 272     border: none;
 273 }
 274
 275 .message .body .multipart {
 276     padding-bottom: 1rem;
 277 }
 278
 279 .message .body .attachment + .multipart,
 280 .message .body .multipart + .multipart {
 281     padding-top: 1rem;
 282     padding-bottom: 1rem;
 283     border-top: 1px dashed #ddd;
 284 }
 285
 286 .multipart.application-pgp-signature {
 287     display: none;
 288 }
 289
 290 .multipart.text-x-patch {
 291 }
 292
 293 .multipart.scheme {
 294     white-space: pre-wrap;
 295     font-family: monospace;
 296 }
 297
 298 .attachment:before {
 299     background-image: url('/img/file.svg');
 300     background-size: 1rem;
 301     display: inline-block;
 302     height: 1rem;
 303     width: 1rem;
 304     content: "";
 305     margin-right: 0.2em;
 306 }
 307
 308 .download-message,
 309 .download-part {
 310     float: right;
 311     font-size: 0.8em;
 312     font-style: italic;
 313 }
 314
 315 @media (min-width: 768px) {
 316     .message .card-header:before {
 317         content: "";
 318         border-color: transparent;
 319         border-right-color: #ddd;
 320         border-style: solid solid outset;
 321         border-width: 10px;
 322         height: 0;
 323         width: 0;
 324         margin-left: -40px;
 325         top: calc(1rem - 1px);
 326         position: absolute;
 327     }
 328     .message .card:before {
 329         content: "";
 330         border-color: transparent;
 331         border-right-color: #f8f9fa;
 332         border-style: solid solid outset;
 333         border-width: 9px;
 334         height: 0;
 335         width: 0;
 336         left: -18px;
 337         top: 1rem;
 338         position: absolute;
 339         z-index: 10;
 340     }
 341     .message .from .avatar {
 342         display: none;
 343     }
 344 }
 345
 346 .message .from {
 347     display: inline-block;
 348 }
 349
 350 .message .from .address {
 351     font-weight: bold;
 352 }
 353
 354 .message .details {
 355     margin-top: .5em;
 356     display: none;
 357 }
 358
 359 .message div.line {
 360     white-space: pre-wrap;
 361     font-family: monospace;
 362     display: block;
 363 }
 364
 365 /* diff styles */
 366 .message .diff div.line.diff.file {
 367     color: #005cc5;
 368 }
 369 .message .diff div.line.diff.separator {
 370     color: #005cc5;
 371 }
 372 .message .diff div.line.diff.addition {
 373     color: #22863a;
 374     background-color: #f0fff4;
 375 }
 376 .message .diff div.line.diff.deletion {
 377     color: #b31d28;
 378     background-color: #ffeef0;
 379 }
 380 .message .diff div.line.diff.range {
 381     color: #6f42c1;
 382     font-weight: bold;
 383 }
 384
 385 /* commit styles */
 386 .message span.commit {
 387     font-family: monospace;
 388 }
 389 .message span.commit.attribution {
 390     color: #005cc5;
 391 }
 392 .message span.commit.header {
 393     color: #005cc5;
 394 }
 395 .message span.commit.changelog {
 396     color: #005cc5;
 397 }
 398
 399 /* quote styles */
 400 .message .quote div.line {
 401     color: #3868cc;
 402 }
 403
 404 .message .snippet {
 405     background-color: #fbfbfb;
 406 }
 407
 408 .filter {
 409     display: inline-block;
 410     color: #fff;
 411     background: #aaa;
 412     text-align: center;
 413     padding: 2px;
 414     border-radius: 3px;
 415     font-family: monospace;
 416     margin: 1px;
 417 }
 418
 419 .status-tag {
 420     display: inline-block;
 421     color: #fff;
 422     text-align: center;
 423     padding: 4px;
 424     border-radius: 3px;
 425     margin-right: 8px;
 426 }
 427
 428 .status-tag.done {
 429     background: #cb2431;
 430 }
 431 .status-tag.open {
 432     background: #2cbe4e;
 433 }
 434
 435 .error.parse {
 436     font-style: italic;
 437     font-size: 0.8em;
 438 }
 439
 440 .message .body.card-body {
 441     padding: .8rem;
 442 }
 443
 444
 445
 446 /* Syntax highlighting code, by David Thompson, borrowed
 447    from:
 448      https://git.dthompson.us/blog.git/blob_plain/refs/heads/haunt-migration:/css/dthompson.css
 449    David Thompson gives permission for this to be GPLv3+ and CC BY-SA 4.0
 450
 451    Modified significantly since.
 452 */
 453
 454
 455 .syntax-special, .syntax-element {
 456     color: #856;
 457     font-weight: bold;
 458 }
 459
 460 .syntax-symbol {
 461     color: #423;
 462 }
 463
 464 .syntax-string {
 465     color: #484;
 466 }
 467
 468 .syntax-keyword, .syntax-attribute {
 469     color: #921;
 470 }
 471
 472 .syntax-comment {
 473     color: #666;
 474 }
 475
 476 .syntax-open, .syntax-close {
 477     color: #688;
 478 }