assets/css/screen.css

   1 html, body {
   2     background-color: #fff;
   3     width: 100%;
   4     height: 100%;
   5     padding: 0px;
   6     margin: 0px;
   7 }
   8
   9 body {
  10     padding-top: 3em;
  11 }
  12
  13 h1 {
  14     clear: both;
  15     margin-top: 1.3rem;
  16     margin-bottom: 0.5rem;
  17 }
  18
  19 .title {
  20     clear: both;
  21     font-size: 16px;
  22     margin-bottom: 1rem;
  23     border-bottom: 1px dashed #ddd;
  24     padding: 0px;
  25     padding-bottom: 1rem;
  26     color: #586069;
  27 }
  28
  29 .comment-box {
  30     margin-top: 1rem;
  31     margin-bottom: 2rem;
  32     border-top: 1px dashed #ddd;
  33     padding-top: 1rem;
  34 }
  35
  36 h2 {
  37     border-bottom: 1px solid #eee;
  38     padding-bottom: 5px;
  39 }
  40
  41 ul.merged li, ul.blockedby li, ul.blocks li {
  42     display: inline-block;
  43 }
  44 ul.merged li + li:before,
  45 ul.blockedby li + li:before,
  46 ul.blocks li + li:before {
  47     content: ", ";
  48 }
  49
  50 p + p {
  51     text-indent: 0.5rem;
  52     margin-top: 1.0rem;
  53 }
  54
  55 .card-body form {
  56     padding-bottom: 1em;
  57 }
  58
  59 tr.heading th {
  60     background-color: #f8f9fa;
  61     font-weight: bold;
  62 }
  63
  64 tr td:nth-child(1),
  65 tr td:nth-child(4) {
  66     width: 4rem;
  67 }
  68
  69 tr td:nth-child(3){
  70     width: 19rem;
  71 }
  72
  73 tr.serious svg {
  74     fill: #ff5a2a;
  75     margin-right: .5em;
  76     height: 1.2em;
  77     vertical-align: text-bottom;
  78 }
  79 tr.important svg {
  80     fill: #000;
  81     margin-right: .5em;
  82     height: 1.2em;
  83     vertical-align: text-bottom;
  84 }
  85
  86 #header {
  87     background: #333333;
  88     border-color: #1A1A1A1A;
  89     border-style: none none solid none;
  90     border-width: thin;
  91     width: 100%;
  92     margin-bottom: 1rem;
  93     padding: .5em;
  94     color: #fff;
  95     border-radius: 0;
  96 }
  97 #header .navbar-brand {
  98     padding: 0;
  99 }
 100
 101 @media (min-width: 576px) {
 102     #search input:focus {
 103         width: 400px;
 104     }
 105     #search #search-hints {
 106         width: 400px;
 107     }
 108 }
 109
 110 @media (min-width: 768px) {
 111     #search input:focus {
 112         width: 500px;
 113     }
 114     #search.form-inline #search-hints {
 115         width: 500px;
 116     }
 117 }
 118
 119 #search #search-hints {
 120     display: none;
 121     position: absolute;
 122     background: white;
 123     top: 2.5rem;
 124     border: 1px solid #ced4da;
 125     border-top: none;
 126     box-shadow: 3px 3px 10px #ddd;
 127     padding: 1em;
 128     z-index: 2;
 129 }
 130 #search.form-inline:focus-within #search-hints {
 131     display: block;
 132 }
 133 #search { z-index: 3; }
 134
 135 footer {
 136     border-color: #1A1A1A1A;
 137     border-style: dashed none none none;
 138     border-width: 2px;
 139     width: 100%;
 140     align-items: center;
 141     text-align: center;
 142     margin-top: 3rem;
 143     padding: 1rem;
 144     color: #586069;
 145     background: #fafafa;
 146 }
 147
 148 table {
 149     width: 100%;
 150 }
 151
 152 /* messages */
 153 .row.event {
 154     margin-bottom: 1em;
 155     font-size: 1.2em;
 156 }
 157
 158 .info .stat {
 159     display: inline-grid;
 160     color: #586069;
 161     margin-right: 1em;
 162 }
 163 .info .stat .label {
 164     display: block;
 165 }
 166
 167 .conversation .avatar {
 168     display: none;
 169 }
 170
 171 .message .from .avatar {
 172     width: 1.2em;
 173     height: 1.2em;
 174     border-radius: 3px;
 175     color: #fff;
 176     display: inline-flex;
 177     justify-content: center;
 178     align-items: center;
 179     margin-right: 3px;
 180 }
 181
 182 @media (min-width: 768px) {
 183     .conversation .avatar {
 184         height: 48px;
 185         width: 48px;
 186         border: 1px solid #ddd;
 187         border-radius: 6px;
 188         color: #fff;
 189         display: flex;
 190         justify-content: center;
 191         align-items: center;
 192         font-size: 32px;
 193         position: absolute;
 194     }
 195 }
 196
 197 .address + .address:before {
 198     content: ", ";
 199 }
 200
 201 @media (min-width: 768px) {
 202     .message {
 203         margin-left: 65px;
 204     }
 205 }
 206
 207 @media (max-width: 768px) {
 208     h1 {
 209         font-size: 2rem;
 210     }
 211 }
 212
 213 details {
 214     margin-top: .5em;
 215 }
 216
 217 .message .body pre {
 218     background: transparent;
 219     border: none;
 220 }
 221
 222 .message .body .multipart {
 223     padding-bottom: 1rem;
 224 }
 225
 226 .message .body .multipart + .multipart {
 227     padding-top: 1rem;
 228     padding-bottom: 1rem;
 229     border-top: 1px dashed #ddd;
 230 }
 231
 232 .multipart.application-pgp-signature {
 233     display: none;
 234 }
 235
 236 .multipart.text-x-patch {
 237 }
 238
 239 .multipart.scheme {
 240     white-space: pre-wrap;
 241     font-family: monospace;
 242 }
 243
 244 .attachment:before {
 245     background-image: url('/img/file.svg');
 246     background-size: 1rem;
 247     display: inline-block;
 248     height: 1rem;
 249     width: 1rem;
 250     content: "";
 251 }
 252
 253 .download-part {
 254     float: right;
 255     font-size: 0.8em;
 256     font-style: italic;
 257 }
 258
 259 @media (min-width: 768px) {
 260     .message .card-header:before {
 261         content: "";
 262         border-color: transparent;
 263         border-right-color: #ddd;
 264         border-style: solid solid outset;
 265         border-width: 10px;
 266         height: 0;
 267         width: 0;
 268         margin-left: -40px;
 269         top: calc(1rem - 1px);
 270         position: absolute;
 271     }
 272     .message .card:before {
 273         content: "";
 274         border-color: transparent;
 275         border-right-color: #f8f9fa;
 276         border-style: solid solid outset;
 277         border-width: 9px;
 278         height: 0;
 279         width: 0;
 280         left: -18px;
 281         top: 1rem;
 282         position: absolute;
 283         z-index: 10;
 284     }
 285     .message .from .avatar {
 286         display: none;
 287     }
 288 }
 289
 290 .message .from .address {
 291     font-weight: bold;
 292 }
 293
 294 .message .details {
 295     margin-top: .5em;
 296     display: none;
 297 }
 298
 299 .message span.line {
 300     white-space: pre-wrap;
 301     font-family: monospace;
 302 }
 303
 304 /* diff styles */
 305 .message span.line.diff.file {
 306     color: #005cc5;
 307 }
 308 .message span.line.diff.separator {
 309     color: #005cc5;
 310 }
 311 .message span.line.diff.addition {
 312     color: #22863a;
 313     background-color: #f0fff4;
 314 }
 315 .message span.line.diff.deletion {
 316     color: #b31d28;
 317     background-color: #ffeef0;
 318 }
 319 .message span.line.diff.range {
 320     color: #6f42c1;
 321     font-weight: bold;
 322 }
 323
 324 /* commit styles */
 325 .message span.commit {
 326     font-family: monospace;
 327 }
 328 .message span.commit.attribution {
 329     color: #005cc5;
 330 }
 331 .message span.commit.header {
 332     color: #005cc5;
 333 }
 334 .message span.commit.changelog {
 335     color: #005cc5;
 336 }
 337
 338 /* quote styles */
 339 .message span.line.quote {
 340     color: #3868cc;
 341 }
 342
 343 .message span.line.cut-here {
 344     color: #888;
 345 }
 346
 347 .filter {
 348     display: inline-block;
 349     color: #fff;
 350     background: #aaa;
 351     text-align: center;
 352     padding: 2px;
 353     border-radius: 3px;
 354     font-family: monospace;
 355     margin: 1px;
 356 }
 357
 358 .status-tag {
 359     display: inline-block;
 360     color: #fff;
 361     text-align: center;
 362     padding: 4px;
 363     border-radius: 3px;
 364     margin-right: 8px;
 365 }
 366
 367 .status-tag.done {
 368     background: #cb2431;
 369 }
 370 .status-tag.open {
 371     background: #2cbe4e;
 372 }
 373
 374 .error.parse {
 375     font-style: italic;
 376     font-size: 0.8em;
 377 }
 378
 379 .message .body.card-body {
 380     padding: .8rem;
 381 }