qutebrowser/css/gitlab.com.css

   1 /* ==UserStyle==
   2 @name         GitLab Dark
   3 @description  A dark theme for GitLab.
   4 @namespace    gitlab.com/maxigaz/gitlab-dark
   5 @author       maxigaz
   6 @homepageURL  https://gitlab.com/maxigaz/gitlab-dark
   7 @version      1.1.0
   8 ==/UserStyle== */
   9
  10 @-moz-document url-prefix("https://gitlab."), domain("gitlab.com"), domain("framagit.org"), domain("gitlab.ultrahaptics.com")
  11 {
  12         :root {
  13                 --main-background: #383c4a;
  14                 --lighter-background-1: #3f4353;
  15
  16                 --main-text-color: #e4e4e4;
  17                 --lighter-text-color-1: #e7e7e7;
  18                 --lighter-text-color-2: #eee;
  19                 --lighter-text-color-3: #f5f5f5;
  20
  21                 --darker-text-color-1: #ddd;
  22                 --darker-text-color-2: #d4d4d4;
  23                 --darker-text-color-3: #cacaca;
  24                 --darker-text-color-4: #c7c7c7;
  25                 --darker-text-color-5: #bababa;
  26
  27                 --light-divider: #404555;
  28                 --main-border: #292c36;
  29                 --btn-border: #1b1b1b;
  30                 --btn-background: #474b5d;
  31                 --btn-disabled-background: #464a5c;
  32                 --btn-disabled-color: #878787;
  33         }
  34
  35         body {
  36                 background-color: var(--main-background);
  37                 color: var(--main-text-color);
  38
  39         }
  40
  41         h1, h2, h3, h4, h5, h6 {
  42                 color: #f5f5f5;
  43         }
  44
  45         .btn {
  46                 background-color: var(--lighter-background-1);
  47                 border-color: var(--btn-border);
  48                 color: var(--main-text-color);
  49         }
  50
  51         .btn:hover, .btn:active, .btn:focus {
  52                 background-color: var(--btn-background);
  53                 border-color: var(--btn-border);
  54                 color: var(--main-text-color);
  55         }
  56
  57         .btn:hover:active, .btn:focus:active {
  58                 background-color: var(--btn-background);
  59                 border-color: var(--btn-border);
  60                 box-shadow: inset 0 0 10px 10px rgba(0,0,0,.2);
  61                 color: var(--main-text-color);
  62         }
  63
  64         hr {
  65                 border-color: var(--main-border);
  66         }
  67
  68         a {
  69                 color: #2596ff;
  70         }
  71
  72         a:hover, a:active, a:focus {
  73                 color: #23baff;
  74         }
  75
  76         .avatar:not([href]):hover {
  77                 border-color: var(--main-border);
  78         }
  79
  80         pre {
  81                 background-color: #24272a;
  82                 color: #e2e2e2;
  83         }
  84
  85         /* Inline code */
  86
  87         code {
  88                 background-color: #24272a;
  89                 color: #e2e2e2;
  90         }
  91
  92         .gfm-color_chip {
  93                 background-color: #414654;
  94                 background-image: linear-gradient(135deg, #414654 25%, transparent 0%, transparent 75%, #414654 0%),linear-gradient(135deg, #414654 25%, transparent 0%, transparent 75%, #414654 0%);
  95         }
  96
  97         /* ===== Nav bar ===== */
  98
  99         .navbar-gitlab {
 100                 border-bottom-color: var(--btn-border);
 101         }
 102
 103         body.ui-indigo .navbar-gitlab {
 104                 background-color: #3e4352;
 105         }
 106
 107         body.ui-indigo .navbar-gitlab .navbar-sub-nav {
 108                 color: #eee;
 109         }
 110
 111         body.ui_indigo .navbar-gitlab .nav > li.active > a, body.ui_indigo .navbar-gitlab .nav > li.dropdown.open > a {
 112                 background-color: #8f9bbd;
 113         }
 114
 115         .frequent-items-dropdown-container .frequent-items-dropdown-sidebar {
 116                 border-color: var(--main-border);
 117         }
 118
 119         .projects-dropdown-container .section-header, .projects-dropdown-container .projects-list-frequent-container li.section-empty, .projects-dropdown-container .projects-list-search-container li.section-empty {
 120                 color: #efefef;
 121         }
 122
 123         .projects-list-item-container .project-namespace {
 124                 color: #a3a3a3;
 125         }
 126
 127         .header-user .dropdown-menu {
 128                 color: var(--main-text-color);
 129         }
 130
 131         .has-location-badge.search.search-form.search-active form {
 132                 background-color: #6a6e82;
 133                 box-shadow: 0 0 5px #4096ff;
 134                 transition: box-shadow 0.15s;
 135         }
 136
 137         .has-location-badge.search.search-form.search-active form input {
 138                 color: #fff;
 139         }
 140
 141         .has-location-badge.search.search-form.search-active form input::placeholder {
 142                 color: rgba(209,209,240,0.8);
 143         }
 144
 145         .has-location-badge.search.search-form.search-active .location-badge {
 146                 color: #ebebfa;
 147         }
 148
 149         /* ===== Sidebar ===== */
 150
 151         .nav-sidebar {
 152                 background-color: var(--lighter-background-1);
 153                 box-shadow: inset -2px 0 0 #292c37,2px 1px 3px rgba(0,0,0,0.1);
 154         }
 155
 156         .context-header a {
 157                 color: #eeeeee;
 158         }
 159
 160         .context-header:hover, .context-header a:hover, .context-header .participants-more .btn-link:hover, .participants-more .context-header .btn-link:hover, .context-header .user-list-more .btn-link:hover, .user-list-more .context-header .btn-link:hover {
 161                 color: #eeeeee;
 162         }
 163
 164         body.ui_indigo .nav-sidebar li.active {
 165                         box-shadow: inset 4px 0 0 #4096ff;
 166         }
 167
 168         body.ui_indigo .nav-sidebar li.active > a {
 169                 color: #eeeeee;
 170         }
 171
 172         .nav-sidebar li a {
 173                 color: #d3d3d3;
 174         }
 175
 176         .sidebar-sub-level-items > li a:hover, .sidebar-sub-level-items > li .participants-more .btn-link:hover, .participants-more .sidebar-sub-level-items > li .btn-link:hover, .sidebar-sub-level-items > li .user-list-more .btn-link:hover, .user-list-more .sidebar-sub-level-items > li .btn-link:hover, .sidebar-sub-level-items > li a:focus {
 177                 color: #eeeeee;
 178         }
 179
 180         .sidebar-top-level-items > li > a:hover, .participants-more .sidebar-top-level-items > li > .btn-link:hover, .user-list-more .sidebar-top-level-items > li > .btn-link:hover {
 181                 color: #eeeeee;
 182         }
 183
 184         .nav-icon-container svg {
 185                 fill: #bebebe !important;
 186         }
 187
 188         .nav-icon-container svg:hover {
 189                 fill: #eee !important;
 190         }
 191
 192         .toggle-sidebar-button, .close-nav-button {
 193                 background-color: var(--lighter-background-1);
 194                 border-color: #313541;
 195                 color: var(--main-text-color);
 196         }
 197
 198         .toggle-sidebar-button:hover, .close-nav-button:hover {
 199                 background-color: #383b4a;
 200                 color: #eeeeee;
 201         }
 202
 203         .nav-sidebar:not(.sidebar-collapsed-desktop) {
 204                 box-shadow: inset -2px 0 0 #292c37,2px 1px 3px rgba(0,0,0,0.1);
 205         }
 206
 207         .avatar {
 208                 background-color: var(--main-border);
 209         }
 210
 211         .avatar-circle, .avatar, .avatar-container {
 212                 border-color: var(--main-border);
 213         }
 214
 215         .context-header .avatar-container {
 216                 background-color: var(--main-border);
 217         }
 218
 219         /* Number of issues, merge requests etc. */
 220
 221         .sidebar-top-level-items > li .badge.badge-pill, .sidebar-top-level-items > li .shortcut-mappings .key, .shortcut-mappings .sidebar-top-level-items > li .key {
 222                 color: #d3d3d3;
 223         }
 224
 225         body.ui-indigo .sidebar-top-level-items > li.active .badge.badge-pill, body.ui-indigo .sidebar-top-level-items > li.active .shortcut-mappings .key, .shortcut-mappings body.ui-indigo .sidebar-top-level-items > li.active .key {
 226                 color: #eee;
 227         }
 228
 229         /* ===== Sidebar (GitLab.com, EE 11.0) ===== */
 230
 231         body.ui-indigo .nav-sidebar li.active {
 232                         box-shadow: inset 4px 0 0 #4096ff;
 233         }
 234
 235         body.ui-indigo .nav-sidebar li.active > a {
 236                 color: #eeeeee;
 237         }
 238
 239         .toggle-sidebar-button .collapse-text, .toggle-sidebar-button .icon-angle-double-left, .toggle-sidebar-button .icon-angle-double-right {
 240                 color: var(--main-text-color);
 241         }
 242
 243         /* Hover menu */
 244
 245         .sidebar-top-level-items > li.is-showing-fly-out .sidebar-sub-level-items {
 246                 background-color: var(--lighter-background-1);
 247                 border-color: var(--btn-border);
 248         }
 249
 250         .sidebar-top-level-items .fly-out-list li {
 251                 background-color: var(--lighter-background-1);
 252         }
 253
 254         .fly-out-top-item {
 255                 background-color: #3d4050;
 256         }
 257
 258         .sidebar-top-level-items > li.is-showing-fly-out .sidebar-sub-level-items a:hover, .sidebar-top-level-items > li.is-showing-fly-out .sidebar-sub-level-items .participants-more .btn-link:hover, .participants-more .sidebar-top-level-items > li.is-showing-fly-out .sidebar-sub-level-items .btn-link:hover, .sidebar-top-level-items > li.is-showing-fly-out .sidebar-sub-level-items .user-list-more .btn-link:hover, .user-list-more .sidebar-top-level-items > li.is-showing-fly-out .sidebar-sub-level-items .btn-link:hover, .sidebar-top-level-items > li.is-showing-fly-out .sidebar-sub-level-items a:focus {
 259                 background-color: #383b4a;
 260                 color: #eee;
 261         }
 262
 263         .sidebar-top-level-items > li.is-showing-fly-out .sidebar-sub-level-items a {
 264                 color: var(--main-text-color);
 265         }
 266
 267         .dropdown-divider, .divider {
 268                 border-color: #484c5f;
 269         }
 270
 271         /* ===== Project page, showing README ===== */
 272
 273         /* Between top nav bar and file nav */
 274
 275         .breadcrumbs-links {
 276                 color: #a3a3a3;
 277         }
 278
 279         .breadcrumbs-sub-title a {
 280                 color: #dadada;
 281         }
 282
 283         .breadcrumbs-links .avatar-tile {
 284                 border-color: var(--main-border);
 285         }
 286
 287         .project-home-panel .project-metadata {
 288                 color: #bababa;
 289         }
 290
 291         .project-repo-buttons .btn, .group-buttons .btn {
 292                 background-color: var(--lighter-background-1);
 293                 border-color: var(--btn-border);
 294                 color: var(--main-text-color);
 295         }
 296
 297         .project-repo-buttons .btn:hover, .project-repo-buttons .btn:focus, .group-buttons .btn:hover, .group-buttons .btn:focus {
 298                 background-color: var(--btn-background);
 299                 border-color: var(--btn-border);
 300                 color: var(--main-text-color);
 301         }
 302
 303         .project-repo-buttons .count-buttons .count-badge-count, .group-buttons .count-buttons .count-badge-count {
 304                 background-color: var(--main-background);
 305         }
 306
 307         .project-repo-buttons .count-buttons .count-badge-count, .project-repo-buttons .count-buttons .count-badge-button, .group-buttons .count-buttons .count-badge-count, .group-buttons .count-buttons .count-badge-button {
 308                 border-color: var(--btn-border);
 309         }
 310
 311         .project-repo-buttons .count-buttons .count, .project-repo-buttons .count-buttons .count-badge-button, .group-buttons .count-buttons .count, .group-buttons .count-buttons .count-badge-button {
 312                 color: var(--main-text-color);
 313         }
 314
 315         .dropdown-menu-inner-title {
 316                 color: #cbcbcb;
 317         }
 318
 319         .dropdown-menu-inner-content {
 320                 color: #bababa;
 321         }
 322
 323         .git-clone-holder .form-control, .git-clone-holder .search form, .search .git-clone-holder form {
 324                 background-color: var(--main-background);
 325                 border-color: var(--btn-border);
 326                 color: var(--main-text-color);
 327         }
 328
 329         .project-stats .nav .stat-text, .project-stats .nav .stat-link {
 330                 color: #bababa;
 331         }
 332
 333         .project-stats .nav .stat-link:hover, .project-stats .nav .stat-link:focus {
 334                 color: #eeeeee;
 335         }
 336
 337         .btn-missing, .project-stats .nav .btn-missing {
 338                 color: var(--main-text-color);
 339                 border-color: var(--btn-border);
 340         }
 341
 342         .btn-missing:hover, .project-stats .nav .btn-missing:hover, .btn-missing:active, .project-stats .nav .btn-missing:active, .btn-missing:focus, .project-stats .nav .btn-missing:focus {
 343                 background-color: var(--btn-background);
 344                 color: var(--main-text-color);
 345         }
 346
 347         .project-repo-buttons .btn .fa, .group-buttons .btn .fa {
 348                 color: var(--main-text-color);
 349         }
 350
 351         .project-repo-buttons .btn svg, .group-buttons .btn svg {
 352                 fill: var(--main-text-color);
 353         }
 354
 355         .breadcrumbs-container {
 356                 border-color: var(--light-divider);
 357         }
 358
 359         .project-home-panel, .group-home-panel {
 360                 border-color: var(--light-divider);
 361         }
 362
 363         .project-stats {
 364                 border-color: var(--light-divider);
 365         }
 366
 367         .banner-callout.banner-non-empty-state {
 368                 border-color: var(--light-divider);
 369         }
 370
 371         /* Tree nav */
 372
 373         .dropdown-toggle, .dropdown-menu-toggle {
 374                 background-color: var(--main-background);
 375                 border-color: var(--btn-border);
 376                 color: var(--main-text-color);
 377         }
 378
 379         .dropdown-toggle:hover, .dropdown-menu-toggle:hover, .dropdown-toggle:active, .dropdown-menu-toggle:active, .dropdown-toggle:focus, .dropdown-menu-toggle:focus {
 380                 border-color: #4096ff;
 381         }
 382
 383         .open .dropdown-toggle, .open .dropdown-menu-toggle, .open .dropdown-menu-toggle {
 384                 border-color: #4096ff;
 385         }
 386
 387         .dropdown-menu, .dropdown-menu-nav {
 388                 background-color: var(--main-background);
 389                 border-color: var(--btn-border);
 390         }
 391
 392         .dropdown-menu .dropdown-header, .dropdown-menu-nav .dropdown-header {
 393                 color: var(--main-text-color);
 394         }
 395
 396         .dropdown-input-field, .default-dropdown-input {
 397                 background-color: #313541;
 398                 color: var(--main-text-color);
 399         }
 400
 401         .dropdown-menu-selectable li a.is-indeterminate, .dropdown-menu-selectable li a.is-active, .dropdown-menu-selectable li button.is-indeterminate, .dropdown-menu-selectable li button.is-active {
 402                 color: var(--main-text-color);
 403         }
 404
 405         .dropdown-menu li a:not(.disable-hover):hover, .dropdown-menu li .participants-more .btn-link:not(.disable-hover):hover, .participants-more .dropdown-menu li .btn-link:not(.disable-hover):hover, .dropdown-menu li .user-list-more .btn-link:not(.disable-hover):hover, .user-list-more .dropdown-menu li .btn-link:not(.disable-hover):hover, .dropdown-menu li a:active, .dropdown-menu li a:focus, .dropdown-menu li a.is-focused, .dropdown-menu li button:not(.disable-hover):hover, .dropdown-menu li button:active, .dropdown-menu li button:focus, .dropdown-menu li button.is-focused, .dropdown-menu li .menu-item:not(.disable-hover):hover, .dropdown-menu li .menu-item:active, .dropdown-menu li .menu-item:focus, .dropdown-menu li .menu-item.is-focused, .dropdown-menu-nav li a:not(.disable-hover):hover, .dropdown-menu-nav li .participants-more .btn-link:not(.disable-hover):hover, .participants-more .dropdown-menu-nav li .btn-link:not(.disable-hover):hover, .dropdown-menu-nav li .user-list-more .btn-link:not(.disable-hover):hover, .user-list-more .dropdown-menu-nav li .btn-link:not(.disable-hover):hover, .dropdown-menu-nav li a:active, .dropdown-menu-nav li a:focus, .dropdown-menu-nav li a.is-focused, .dropdown-menu-nav li button:not(.disable-hover):hover, .dropdown-menu-nav li button:active, .dropdown-menu-nav li button:focus, .dropdown-menu-nav li button.is-focused, .dropdown-menu-nav li .menu-item:not(.disable-hover):hover, .dropdown-menu-nav li .menu-item:active, .dropdown-menu-nav li .menu-item:focus, .dropdown-menu-nav li .menu-item.is-focused {
 406                 background-color: var(--btn-background);
 407                 color: var(--main-text-color);
 408         }
 409
 410         .breadcrumb.repo-breadcrumb a {
 411                 color: var(--lighter-text-color-1);
 412         }
 413
 414         /* Last commit info */
 415
 416         .info-well {
 417                 background-color: var(--lighter-background-1);
 418                 border-color: #282b35;
 419                 color: var(--main-text-color);
 420         }
 421
 422         .commit a, .commit button, .generic_commit_status a, .generic_commit_status button {
 423                 color: #eeeeee;
 424         }
 425
 426         .commit-sha-group .label-monospace {
 427                 background-color: var(--lighter-background-1);
 428                 border-color: var(--btn-border);
 429                 color: var(--main-text-color);
 430         }
 431
 432         .commit-sha-group .label, .commit-sha-group .shortcut-mappings .key, .shortcut-mappings .commit-sha-group .key, .commit-sha-group .btn {
 433                 border-color: var(--btn-border);
 434         }
 435
 436         /* File navigation */
 437
 438         .table th, .file-holder table th, .wiki table th, .md table th, ul.notes > li .note-body .note-text table th, .table td, .file-holder table td, .wiki table td, .md table td, ul.notes > li .note-body .note-text table td {
 439                 border-color: var(--light-divider);
 440         }
 441
 442         table.table tr th, .file-holder table tr th, .wiki table tr th, .md table tr th, ul.notes > li .note-body .note-text table tr th {
 443                 background-color: #3c4150;
 444         }
 445
 446         .tree-holder .tree-table tr {
 447                 border-color: var(--light-divider);
 448         }
 449
 450         .tree-holder .tree-table tr:hover:not(.tree-truncated-warning) td {
 451                 background-color: #313543;
 452                 border-color: #1763bf;
 453         }
 454
 455         table.table tr td, .file-holder table tr td, .wiki table tr td, .md table tr td, ul.notes > li .note-body .note-text table tr td {
 456                 border-color: var(--light-divider);
 457         }
 458
 459         .tree-holder .tree-item .tree-item-file-name i, .tree-holder .tree-item .tree-item-file-name a {
 460                 color: #eeeeee;
 461         }
 462
 463         .tree-holder .tree-commit .tree-commit-link {
 464                 color: #c6c6c6;
 465         }
 466
 467         .tree-holder .tree-time-ago {
 468                 color: #c6c6c6;
 469         }
 470
 471         /* Content of README */
 472
 473         .file-holder {
 474                 border-color: var(--main-border);
 475         }
 476
 477         .file-holder .file-title {
 478                 background-color: #3c4150;
 479                 border-color: var(--main-border);
 480         }
 481
 482         .file-holder .file-title a:not(.btn) {
 483                 color: #f2f2f2;
 484         }
 485
 486         .file-holder .file-content {
 487                 background-color: var(--main-background);
 488         }
 489
 490         .wiki {
 491                 color: var(--main-text-color);
 492         }
 493
 494         .wiki h1, .wiki h2, .wiki h3 {
 495                 border-color: var(--main-border);
 496                 color: #f5f5f5;
 497         }
 498
 499         .wiki p {
 500                 color: var(--main-text-color);
 501         }
 502
 503         .wiki a {
 504                 color: #2596ff;
 505         }
 506
 507         .wiki table {
 508                 color: var(--main-text-color);
 509         }
 510
 511         .table-bordered > thead > tr > th, .wiki table > thead > tr > th, .md table > thead > tr > th, ul.notes > li .note-body .note-text table > thead > tr > th, .table-bordered > thead > tr > td, .wiki table > thead > tr > td, .md table > thead > tr > td, ul.notes > li .note-body .note-text table > thead > tr > td, .table-bordered > tbody > tr > th, .wiki table > tbody > tr > th, .md table > tbody > tr > th, ul.notes > li .note-body .note-text table > tbody > tr > th, .table-bordered > tbody > tr > td, .wiki table > tbody > tr > td, .md table > tbody > tr > td, ul.notes > li .note-body .note-text table > tbody > tr > td, .table-bordered > tfoot > tr > th, .wiki table > tfoot > tr > th, .md table > tfoot > tr > th, ul.notes > li .note-body .note-text table > tfoot > tr > th, .table-bordered > tfoot > tr > td, .wiki table > tfoot > tr > td, .md table > tfoot > tr > td, ul.notes > li .note-body .note-text table > tfoot > tr > td {
 512                 border-color: #2f333f;
 513         }
 514
 515         .table-bordered, .wiki table, .md table, ul.notes > li .note-body .note-text table {
 516                 border-color: #2f333f;
 517         }
 518
 519         /* ===== Find file ===== */
 520
 521         .table-striped tbody tr:nth-of-type(2n+1) {
 522                 background-color: #353947;
 523         }
 524
 525         .tree-holder .tree-table tr.selected td {
 526                 background-color: #333744;
 527                 border-color: #0e437f;
 528         }
 529
 530         /* ===== New issue ===== */
 531
 532         .form-control, .search form {
 533                 background-color: #313541;
 534                 border-color: var(--btn-border);
 535                 color: var(--main-text-color);
 536         }
 537
 538         .search form:hover, .file-finder-input:hover, .issuable-search-form:hover, .search-text-input:hover, .form-control:hover, .filtered-search-box:hover, .search form:hover {
 539                 border-color: #4096ff;
 540         }
 541
 542         .help-block {
 543                 color: #c7c7c7;
 544         }
 545
 546         a:hover, .participants-more .btn-link:hover, .user-list-more .btn-link:hover, a:focus {
 547                 color: #34a0ff;
 548         }
 549
 550         /* Description */
 551
 552         .markdown-area {
 553                 background-color: #313541;
 554         }
 555
 556         .common-note-form .md-area {
 557                 border-color: #282b35;
 558         }
 559
 560         .md {
 561                 color: var(--main-text-color);
 562         }
 563
 564         .md p {
 565                 color: var(--main-text-color);
 566         }
 567
 568         .md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
 569                 border-color: var(--main-border);
 570                 color: #f5f5f5;
 571         }
 572
 573         .note-textarea {
 574                 color: var(--main-text-color);
 575         }
 576
 577         .nav-links {
 578                 border-color: #282b35;
 579         }
 580
 581         .nav-links li a {
 582                 color: #cacaca;
 583         }
 584
 585         .nav-links li.active a {
 586                 color: #f2f2f2;
 587         }
 588
 589                 .nav-links li a:hover, .nav-links li .participants-more .btn-link:hover, .participants-more .nav-links li .btn-link:hover, .nav-links li .user-list-more .btn-link:hover, .user-list-more .nav-links li .btn-link:hover, .nav-links li a:active, .nav-links li a:focus {
 590                         border-color: #2a66aa;
 591                         color: #fff;
 592                 }
 593
 594         body.ui_indigo .nav-links li.active a {
 595                 border-color: #4096ff;
 596         }
 597
 598         .comment-toolbar {
 599                 border-color: #282b35;
 600         }
 601
 602         .gfm-project_member {
 603                 background-color: #2c394a;
 604         }
 605
 606         /* Dropdown toggle buttons (assignee, milestone etc.) */
 607
 608         .dropdown-toggle-text.is-default {
 609                 color: #cbcbcb;
 610         }
 611
 612         .dropdown-menu li a, .dropdown-menu li button, .dropdown-menu li .menu-item, .dropdown-menu-nav li a, .dropdown-menu-nav li button, .dropdown-menu-nav li .menu-item {
 613                 color: #cbcbcb;
 614         }
 615
 616         .dropdown-input-field {
 617                 color: #cbcbcb;
 618         }
 619
 620         .dropdown-input-field:focus {
 621                 color: var(--main-text-color);
 622         }
 623
 624         .pika-single {
 625                 background-color: var(--main-background);
 626                 border-color: var(--btn-border);
 627                 color: var(--main-text-color);
 628         }
 629
 630         .pika-single.gitlab-theme .pika-label {
 631                 background-color: var(--main-background);
 632                 color: var(--main-text-color);
 633         }
 634
 635         .pika-single.gitlab-theme .pika-day {
 636                 background-color: var(--main-background);
 637                 color: #cbcbcb;
 638         }
 639
 640         .pika-single.gitlab-theme th {
 641                 color: #b9b9b9;
 642         }
 643
 644         abbr[title], abbr[data-original-title] {
 645                 border-bottom: none;
 646         }
 647
 648         .pika-single.gitlab-theme .is-selected .pika-day, .pika-single.gitlab-theme .pika-day:hover, .pika-single.gitlab-theme .is-today .pika-day {
 649                 background-color: var(--lighter-background-1);
 650         }
 651
 652         .pika-prev, .pika-next {
 653                 filter: invert(80%);
 654         }
 655
 656         /* Footer */
 657
 658         .row-content-block {
 659                 background-color: var(--lighter-background-1);
 660                 border-color: #282b35;
 661         }
 662
 663     .row-content-block.content-component-block {
 664         padding: 11px 0;
 665         background-color: var(--main-background);
 666     }
 667
 668         /* ===== List of issues ===== */
 669
 670         .badge {
 671                 color: #bfbfbf;
 672         }
 673
 674         .nav-links li.active a .badge {
 675                 color: #dfdfdf;
 676         }
 677
 678         .nav-links li a:hover .badge, .nav-links li .participants-more .btn-link:hover .badge, .participants-more .nav-links li .btn-link:hover .badge, .nav-links li .user-list-more .btn-link:hover .badge, .user-list-more .nav-links li .btn-link:hover .badge, .nav-links li a:active .badge, .nav-links li a:focus .badge {
 679                 color: #efefef;
 680         }
 681
 682         .filtered-search-box {
 683                 border-color: var(--btn-border);
 684                 background-color: #313541;
 685         }
 686
 687         ul.content-list li a {
 688                 color: #eee;
 689         }
 690
 691         ul.content-list li {
 692                 color: #eee;
 693         }
 694
 695         ul.content-list > li {
 696                 border-color: var(--light-divider);
 697         }
 698
 699         .filtered-search-history-dropdown-toggle-button:hover, .filtered-search-history-dropdown-toggle-button:focus {
 700                 color: #fff;
 701         }
 702
 703         .issuable-list li .issuable-milestone a, .issuable-list li .issuable-info a, .issuable-list li .task-status a, .issuable-list li .issuable-updated-at a {
 704                 color: #e3e3e3;
 705         }
 706
 707         .issuable-list li .issuable-milestone, .issuable-list li .issuable-info, .issuable-list li .task-status, .issuable-list li .issuable-updated-at {
 708                 color: #cacaca;
 709         }
 710
 711         .panel, .panel-slim {
 712                 background-color: var(--main-background);
 713         }
 714
 715         .merge-request.closed, .issue.closed {
 716                 background-color: #333744;
 717                 border-color: var(--light-divider);
 718         }
 719
 720         .page-item.disabled .page-link {
 721                 background-color: var(--btn-disabled-background);
 722                 border-color: var(--btn-border);
 723                 color: var(--btn-disabled-color);
 724         }
 725
 726         /* New issues */
 727
 728         .merge-request.today, .issue.today {
 729                 background-color: #2f3f41;
 730                 border-color: var(--light-divider);
 731         }
 732
 733         /* ===== List of issues (GitLab.com, EE 11.0) ===== */
 734
 735         .nav-links li.active a .badge.badge-pill, .nav-links li.active a .shortcut-mappings .key, .shortcut-mappings .nav-links li.active a .key, .nav-links li a.active .badge.badge-pill, .nav-links li a.active .shortcut-mappings .key, .shortcut-mappings .nav-links li a.active .key {
 736                 color: #dfdfdf;
 737         }
 738
 739         .badge.badge-pill, .shortcut-mappings .key {
 740                 color: #bfbfbf;
 741         }
 742
 743         .nav-links li a:hover .badge.badge-pill, .nav-links li .participants-more .btn-link:hover .badge.badge-pill, .participants-more .nav-links li .btn-link:hover .badge.badge-pill, .nav-links li .user-list-more .btn-link:hover .badge.badge-pill, .user-list-more .nav-links li .btn-link:hover .badge.badge-pill, .nav-links li a:hover .shortcut-mappings .key, .shortcut-mappings .nav-links li a:hover .key, .nav-links li .participants-more .btn-link:hover .shortcut-mappings .key, .shortcut-mappings .nav-links li .participants-more .btn-link:hover .key, .participants-more .nav-links li .btn-link:hover .shortcut-mappings .key, .shortcut-mappings .participants-more .nav-links li .btn-link:hover .key, .nav-links li .user-list-more .btn-link:hover .shortcut-mappings .key, .shortcut-mappings .nav-links li .user-list-more .btn-link:hover .key, .user-list-more .nav-links li .btn-link:hover .shortcut-mappings .key, .shortcut-mappings .user-list-more .nav-links li .btn-link:hover .key, .nav-links li a:active .badge.badge-pill, .nav-links li a:active .shortcut-mappings .key, .shortcut-mappings .nav-links li a:active .key, .nav-links li a:focus .badge.badge-pill, .nav-links li a:focus .shortcut-mappings .key, .shortcut-mappings .nav-links li a:focus .key {
 744                 color: #efefef;
 745         }
 746
 747         body.ui-indigo .nav-links li.active a, body.ui-indigo .nav-links li a.active {
 748                 border-color: #4096ff;
 749         }
 750
 751         .card, .card-slim {
 752                 background-color: var(--main-background);
 753                 border-color: var(--main-border);
 754         }
 755
 756         .select2-drop {
 757                 background-color: var(--main-background);
 758                 color: #cbcbcb;
 759         }
 760
 761         .select2-results .select2-highlighted {
 762                 color: var(--main-text-color);
 763         }
 764
 765         .select2-results .select2-highlighted .select2-result-label {
 766                 background: var(--btn-background);
 767         }
 768
 769         .select2-drop, .select2-drop.select2-drop-above {
 770                 border-color: var(--btn-border);
 771         }
 772
 773         .select2-search input {
 774                 background-color: var(--main-background);
 775                 border-color: var(--btn-border);
 776                 color: var(--main-text-color);
 777         }
 778
 779         .dropdown-menu {
 780                 color: var(--main-text-color);
 781         }
 782
 783         /* ===== Issue details ===== */
 784
 785         /* Right sidebar */
 786
 787         .right-sidebar {
 788                 background-color: var(--lighter-background-1);
 789                 border-color: var(--btn-border);
 790         }
 791
 792         .right-sidebar .block {
 793                 border-color: #282b35;
 794         }
 795
 796         .right-sidebar .title {
 797                 color: #e3e3e3;
 798         }
 799
 800         .right-sidebar.right-sidebar-expanded .gutter-toggle {
 801                 border-color: #282b35;
 802         }
 803
 804         .right-sidebar .block .gutter-toggle:hover {
 805                 color: #fff;
 806         }
 807
 808         .right-sidebar.right-sidebar-expanded .no-value, .right-sidebar.right-sidebar-expanded .btn-secondary-hover-link {
 809                 color: #bebebe;
 810         }
 811
 812         .right-sidebar .title .lock-edit, .right-sidebar .title .edit-link {
 813                 color: #e2e2e2;
 814         }
 815
 816         .right-sidebar .title .lock-edit:hover, .right-sidebar .title .edit-link:hover {
 817                 color: #23baff;
 818         }
 819
 820         .right-sidebar a:not(.btn):hover, .right-sidebar .participants-more .btn-link:not(.btn):hover, .participants-more .right-sidebar .btn-link:not(.btn):hover, .right-sidebar .user-list-more .btn-link:not(.btn):hover, .user-list-more .right-sidebar .btn-link:not(.btn):hover {
 821                 color: #23baff;
 822         }
 823
 824         .right-sidebar .cross-project-reference button {
 825                 background-color: var(--lighter-background-1);
 826         }
 827
 828         .right-sidebar .btn-clipboard:hover {
 829                 color: #fff;
 830         }
 831
 832         /* Right sidebar (collapsed) */
 833
 834         .right-sidebar .block .gutter-toggle:hover {
 835                 background-color: #383b4a;
 836         }
 837
 838         .right-sidebar.right-sidebar-collapsed .gutter-toggle {
 839                 border-color: #313541;
 840         }
 841
 842         .right-sidebar.right-sidebar-collapsed .block:hover {
 843                 background-color: #383b4a;
 844         }
 845
 846         .right-sidebar.right-sidebar-collapsed .sidebar-collapsed-icon:hover:not(.disabled), .right-sidebar.right-sidebar-collapsed .sidebar-collapsed-icon:hover .todo-undone {
 847                 color: #eee;
 848         }
 849
 850         .right-sidebar.right-sidebar-collapsed .sidebar-collapsed-icon {
 851                 color: #bebebe;
 852         }
 853
 854         .right-sidebar.right-sidebar-collapsed .sidebar-collapsed-icon svg {
 855                 fill: #bebebe;
 856         }
 857
 858         .right-sidebar.right-sidebar-collapsed .sidebar-collapsed-icon:hover:not(.disabled) svg, .right-sidebar.right-sidebar-collapsed .sidebar-collapsed-icon:hover .todo-undone svg {
 859                 fill: #eee;
 860         }
 861
 862         .right-sidebar.right-sidebar-collapsed .sidebar-collapsed-icon .btn-clipboard {
 863                 color: #bebebe;
 864         }
 865
 866         .right-sidebar.right-sidebar-collapsed .sidebar-collapsed-icon .btn-clipboard:hover {
 867                 color: #eee;
 868         }
 869
 870         .right-sidebar.right-sidebar-collapsed .participants {
 871                 border-color: #313541;
 872         }
 873
 874         /* Original post */
 875
 876         .detail-page-header {
 877                 border-color: #282b35;
 878                 color: #e2e2e2;
 879         }
 880
 881         .detail-page-header a {
 882                 color: #e2e2e2;
 883         }
 884
 885         .detail-page-description .title {
 886                 color: #f5f5f5;
 887         }
 888
 889         .panel-default {
 890                 border-color: #282b35;
 891         }
 892
 893         .panel-default > .panel-heading {
 894                 background-color: var(--lighter-background-1);
 895         }
 896
 897         .panel-title {
 898                 color: var(--main-text-color);
 899         }
 900
 901         .issue-count-badge-count {
 902                 border-color: var(--btn-border);
 903         }
 904
 905         .issuable-details .description img:not(.emoji) {
 906                 border-color: #3c404f;
 907         }
 908
 909         /* Quick actions */
 910
 911         .referenced-commands {
 912                 background-color: #373b4a;
 913                 color: #e2e2e2;
 914         }
 915
 916         .atwho-view {
 917                 background-color: #373b4a;
 918                 border-color: #282b35;
 919                 color: var(--main-text-color);
 920         }
 921
 922         .atwho-view .atwho-view-ul li.cur {
 923                 background-color: var(--btn-background);
 924                 color: var(--main-text-color);
 925         }
 926
 927         .atwho-view .atwho-view-ul li strong {
 928                 color: #fff;
 929         }
 930
 931         .atwho-view small {
 932                 color: #aaa;
 933         }
 934
 935         .atwho-view .cur .avatar {
 936                 border-color: var(--main-border);
 937         }
 938
 939         /* Related issues */
 940
 941         .card-slim {
 942                 border-color: var(--main-border);
 943         }
 944
 945         .issue-count-badge {
 946                 background-color: var(--lighter-background-1) !important;
 947                 border-color: var(--btn-border);
 948         }
 949
 950         /* Reaction block (under OP) */
 951
 952         .content-block {
 953                 border-bottom-color: var(--light-divider);
 954         }
 955
 956         .award-control.user-authored {
 957                 background-color: var(--lighter-background-1);
 958                 border-color: var(--btn-border);
 959                 color: var(--main-text-color);
 960         }
 961
 962         .award-control.user-authored:hover {
 963                 background-color: var(--btn-background);
 964                 border-color: var(--btn-border);
 965                 color: var(--main-text-color);
 966         }
 967
 968         .award-control.user-authored gl-emoji {
 969                 filter: brightness(2);
 970         }
 971
 972         /* Issue replies */
 973
 974         .note-headline-light, .discussion-headline-light {
 975                 color: #bababa;
 976         }
 977
 978         .timeline-entry {
 979                 background-color: var(--main-background);
 980         }
 981
 982         .discussion-header a, .note-header-info a {
 983                 color: #e2e2e2;
 984         }
 985
 986         .discussion-header a:hover, .discussion-header .participants-more .btn-link:hover, .participants-more .discussion-header .btn-link:hover, .discussion-header .user-list-more .btn-link:hover, .user-list-more .discussion-header .btn-link:hover, .note-header-info a:hover, .note-header-info .participants-more .btn-link:hover, .participants-more .note-header-info .btn-link:hover, .note-header-info .user-list-more .btn-link:hover, .user-list-more .note-header-info .btn-link:hover {
 987                 color: #23baff;
 988         }
 989
 990         ul.notes > li .note-body .note-text p {
 991                 color: var(--main-text-color);
 992         }
 993
 994         ul.notes > li .note-body .note-text a {
 995                 color: #2596ff;
 996         }
 997
 998         ul.notes > li .timeline-entry-inner {
 999                 border-color: var(--light-divider);
1000         }
1001
1002         .note-type-dropdown .btn:hover:active, .note-type-dropdown .btn:focus:active {
1003                 box-shadow: none;
1004         }
1005
1006         .markdown-selector {
1007                 color: #2596ff;
1008         }
1009
1010         pre {
1011                 border-color: #5f5f5f;
1012         }
1013
1014         .timeline-entry:target, .timeline-entry.target {
1015                 background-color: #35394a;
1016         }
1017
1018         ul.notes > li:target, ul.notes > li.target {
1019                 border-color: var(--main-border);
1020         }
1021
1022         ul.notes > li:target:not(:first-child), ul.notes > li.target:not(:first-child) {
1023                 border-color: var(--main-border);
1024         }
1025
1026         ul.notes > li .note-body .note-text {
1027                 color: var(--main-text-color);
1028         }
1029
1030         .md img:not(.emoji) {
1031                 border-color: #3c404f;
1032         }
1033
1034         .disabled-comment {
1035                 background-color: #373b4a;
1036                 border-color: var(--main-border);
1037                 color: #cacaca;
1038         }
1039
1040         .disabled-comment a {
1041                 color: #2596ff;
1042         }
1043
1044         .disabled-comment a:hover {
1045                 color: #23baff;
1046         }
1047
1048         /* ===== Issue details (GitLab.com, EE 11.0 ===== */
1049
1050         .btn.btn-inverted.btn-success, .btn.btn-inverted.btn-new, .btn.btn-inverted.btn-create, .btn.btn-inverted.comment-btn, .btn.btn-inverted.btn-save {
1051                 background-color: #158f46;
1052                 border-color: #12753a;
1053                 color: #fff;
1054         }
1055
1056         .btn.btn-close, .btn.btn-close-color {
1057                 background-color: #be6c00;
1058                 border-color: #b56600;
1059                 color: #fff;
1060         }
1061
1062         .btn.disabled, .btn[disabled], fieldset[disabled] .btn, .dropdown-toggle[disabled], [disabled].dropdown-menu-toggle, .btn.disabled:hover, .btn[disabled]:hover, fieldset[disabled] .btn:hover, .dropdown-toggle[disabled]:hover, [disabled].dropdown-menu-toggle:hover {
1063                 background-color: var(--btn-disabled-background) !important;
1064                 border-color: var(--btn-border) !important;
1065                 color: var(--btn-disabled-color) !important;
1066         }
1067
1068         /* ===== Issue boards ===== */
1069
1070         .board-inner {
1071                 background-color: var(--lighter-background-1);
1072                 border-color: var(--main-border);
1073         }
1074
1075         .board-card {
1076                 background-color: var(--main-background);
1077                 box-shadow: 0 1px 2px rgba(0,0,0,0.55);
1078         }
1079
1080         .board-card-title a {
1081                 color: var(--lighter-text-color-2);
1082         }
1083
1084         .board-blank-state, .board-promotion-state {
1085                 background-color: var(--main-background);
1086         }
1087
1088         .board-title {
1089                 border-color: var(--main-border);
1090         }
1091
1092         .board-card-number {
1093                 color: var(--darker-text-color-3);
1094         }
1095
1096         /* Edit board */
1097
1098         .row-content-block .title {
1099                 color: var(--main-text-color);
1100         }
1101
1102         .board-config-modal .block + .block {
1103                 border-color: var(--light-divider);
1104         }
1105
1106         .modal-footer {
1107                 border-color: var(--light-divider);
1108         }
1109
1110         /* Add list */
1111
1112         .dropdown .dropdown-menu.dropdown-menu-tabs .dropdown-tabs-list .dropdown-tab-item {
1113                 border-color: var(--main-border);
1114         }
1115
1116         .dropdown .dropdown-menu.dropdown-menu-tabs .dropdown-tabs-list .dropdown-tab-item a {
1117                 background-color: #3D4050;
1118                 color: var(--lighter-text-color-2);
1119         }
1120
1121         .dropdown .dropdown-menu.dropdown-menu-tabs .dropdown-tabs-list .dropdown-tab-item a:focus, .dropdown .dropdown-menu.dropdown-menu-tabs .dropdown-tabs-list .dropdown-tab-item a.active {
1122                 background-color: #404454;
1123                 color: var(--lighter-text-color-3);
1124         }
1125
1126         .dropdown .dropdown-menu.dropdown-menu-tabs .tab-content .issue-board-dropdown-content {
1127                 color: var(--darker-text-color-3);
1128         }
1129
1130         .dropdown-loading {
1131                 background-color: rgba(70,74,92,0.5);
1132         }
1133
1134         .dropdown .dropdown-menu.dropdown-menu-tabs .dropdown-tabs-list .dropdown-tab-item a.active {
1135                 border-color: #2a66aa;
1136         }
1137
1138         /* Add issues */
1139
1140         .add-issues-container {
1141                 background-color: var(--main-background);
1142         }
1143
1144         .add-issues-list .board-card {
1145                 border-color: var(--main-border);
1146                 box-shadow: 0 1px 2px rgba(0,0,0,0.55);
1147         }
1148
1149         .board-card.is-active, .board-card.is-active .board-card-assignee:hover a {
1150                 background-color: #404454;
1151         }
1152
1153         /* ===== Message for empty project ===== */
1154
1155         .project-empty-note-panel {
1156                 border-bottom-color: #4c4c4c;
1157         }
1158
1159         /* ===== Command line instructions (appears when a new project is created ===== */
1160
1161         .git-empty h5 {
1162                 color: #eee;
1163         }
1164
1165         .light-well, .description-block {
1166                 background-color: #22242d;
1167         }
1168
1169         pre.light-well, pre.description-block {
1170                 border-color: #5f5f5f;
1171         }
1172
1173         .git-empty .light-well, .git-empty .description-block {
1174                 color: #ddd;
1175         }
1176
1177         .btn.btn-inverted.btn-remove {
1178                 background-color: #a32a17;
1179                 color: #dadada;
1180                 border-color: #a32a17;
1181         }
1182
1183         /* ===== Import from GitHub ===== */
1184
1185         .light, .description-block {
1186                 color: #e2e2e2;
1187         }
1188
1189         .table > thead > tr > td.active, .file-holder table > thead > tr > td.active, .wiki table > thead > tr > td.active, .md table > thead > tr > td.active, ul.notes > li .note-body .note-text table > thead > tr > td.active, .table > thead > tr > th.active, .file-holder table > thead > tr > th.active, .wiki table > thead > tr > th.active, .md table > thead > tr > th.active, ul.notes > li .note-body .note-text table > thead > tr > th.active, .table > thead > tr.active > td, .file-holder table > thead > tr.active > td, .wiki table > thead > tr.active > td, .md table > thead > tr.active > td, ul.notes > li .note-body .note-text table > thead > tr.active > td, .table > thead > tr.active > th, .file-holder table > thead > tr.active > th, .wiki table > thead > tr.active > th, .md table > thead > tr.active > th, ul.notes > li .note-body .note-text table > thead > tr.active > th, .table > tbody > tr > td.active, .file-holder table > tbody > tr > td.active, .wiki table > tbody > tr > td.active, .md table > tbody > tr > td.active, ul.notes > li .note-body .note-text table > tbody > tr > td.active, .table > tbody > tr > th.active, .file-holder table > tbody > tr > th.active, .wiki table > tbody > tr > th.active, .md table > tbody > tr > th.active, ul.notes > li .note-body .note-text table > tbody > tr > th.active, .table > tbody > tr.active > td, .file-holder table > tbody > tr.active > td, .wiki table > tbody > tr.active > td, .md table > tbody > tr.active > td, ul.notes > li .note-body .note-text table > tbody > tr.active > td, .table > tbody > tr.active > th, .file-holder table > tbody > tr.active > th, .wiki table > tbody > tr.active > th, .md table > tbody > tr.active > th, ul.notes > li .note-body .note-text table > tbody > tr.active > th, .table > tfoot > tr > td.active, .file-holder table > tfoot > tr > td.active, .wiki table > tfoot > tr > td.active, .md table > tfoot > tr > td.active, ul.notes > li .note-body .note-text table > tfoot > tr > td.active, .table > tfoot > tr > th.active, .file-holder table > tfoot > tr > th.active, .wiki table > tfoot > tr > th.active, .md table > tfoot > tr > th.active, ul.notes > li .note-body .note-text table > tfoot > tr > th.active, .table > tfoot > tr.active > td, .file-holder table > tfoot > tr.active > td, .wiki table > tfoot > tr.active > td, .md table > tfoot > tr.active > td, ul.notes > li .note-body .note-text table > tfoot > tr.active > td, .table > tfoot > tr.active > th, .file-holder table > tfoot > tr.active > th, .wiki table > tfoot > tr.active > th, .md table > tfoot > tr.active > th, ul.notes > li .note-body .note-text table > tfoot > tr.active > th {
1190                 background-color: #393d4c;
1191         }
1192
1193         /* ===== Project list ===== */
1194
1195         .top-area, .wiki-page-header {
1196                 border-color: var(--main-border);
1197         }
1198
1199         .projects-list > li {
1200                 border-color: var(--light-divider);
1201         }
1202
1203         .gl-pagination {
1204                 border-color: #5f5f5f;
1205         }
1206
1207         .text-plain, .text-plain:hover {
1208                 color: #f5f5f5;
1209         }
1210
1211         .user-access-role {
1212                 border-color: #525252;
1213                 color: #aaa;
1214         }
1215
1216         .pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .participants-more .pagination > .disabled > .btn-link:hover, .user-list-more .pagination > .disabled > .btn-link:hover, .pagination > .disabled > a:focus {
1217                 background-color: var(--btn-disabled-background);
1218                 border-color: var(--btn-border);
1219                 color: var(--btn-disabled-color);
1220         }
1221
1222         .pagination > li > a, .pagination > li > span {
1223                 background-color: var(--lighter-background-1);
1224                 border-color: var(--btn-border);
1225                 color: var(--main-text-color);
1226         }
1227
1228         .pagination > li > a:hover, .participants-more .pagination > li > .btn-link:hover, .user-list-more .pagination > li > .btn-link:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus {
1229                 background-color: var(--btn-background);
1230                 border-color: var(--btn-border);
1231                 color: var(--main-text-color);
1232         }
1233
1234         .pagination > li > a:hover:active, .participants-more .pagination > li > .btn-link:hover:active, .user-list-more .pagination > li > .btn-link:hover:active, .pagination > li > a:active:focus, .pagination > li > span:hover:active, .pagination > li > span:active:focus {
1235                 box-shadow: inset 0 0 10px 10px rgba(0,0,0,.2);
1236         }
1237
1238         /* ===== Groups ===== */
1239
1240         /* Notification */
1241
1242         .landing {
1243                 background-color: #0f4071;
1244                 border-color: #4096ff;
1245         }
1246
1247         .landing .inner-content p {
1248                 color: var(--lighter-text-color-1);
1249         }
1250
1251         /* List of groups */
1252
1253         .group-list-tree .group-row:first-child {
1254                 border-color: var(--light-divider);
1255         }
1256
1257         .group-list-tree .group-row-contents:hover {
1258                 background-color: #313543;
1259         }
1260
1261         ul.content-list li .description {
1262                 color: #ddd;
1263         }
1264
1265         .group-row .stats {
1266                 color: #cacaca;
1267         }
1268
1269         /* List of projects within a group */
1270
1271         .group-nav-container .nav-controls {
1272                 border-color: var(--light-divider);
1273         }
1274
1275         /* ===== Activity ===== */
1276
1277         .event-item {
1278                 border-color: var(--light-divider);
1279         }
1280
1281         .nav-block.activities {
1282                 border-color: var(--main-border);
1283         }
1284
1285         .event-item {
1286                 color: #d3d3d3;
1287         }
1288
1289         .event-item a {
1290                 color: #f5f5f5;
1291         }
1292
1293         .event-item .event-title {
1294                 color: #f5f5f5;
1295         }
1296
1297         /* Nav links (mobile) */
1298
1299         .inner-page-scroll-tabs .fade-left {
1300                 background: linear-gradient(to right, var(--main-background) 45%, rgba(56,60,74,0.4));
1301         }
1302
1303         .inner-page-scroll-tabs .fade-right {
1304                 background: linear-gradient(to left, var(--main-background) 45%, rgba(56,60,74,0.4));
1305         }
1306
1307         /* ===== Commits ===== */
1308
1309         .commit-header {
1310                 background-color: #3e4352;
1311                 border-color: var(--light-divider);
1312         }
1313
1314         /* Commit description */
1315
1316         .commit .commit-row-description, .generic_commit_status .commit-row-description {
1317                 border-color: #6a6a6a;
1318                 color: #aaa;
1319         }
1320
1321         .commit .commit-row-description a, .generic_commit_status .commit-row-description a {
1322                 color: var(--lighter-text-color-1);
1323         }
1324
1325         .text-expander {
1326                 background-color: var(--main-background);
1327                 border-color: #424758;
1328                 color: #dadada;
1329         }
1330
1331         .text-expander.open {
1332                 background-color: #444859;
1333         }
1334
1335         .text-expander:hover {
1336                 background-color: #4a4e61;
1337         }
1338
1339         .commit-sha-group .btn svg {
1340                 fill: #ddd;
1341         }
1342
1343         .tree-holder .nav-block .btn .fa, .tree-holder .nav-block .btn svg {
1344                 color: #ddd;
1345         }
1346
1347         /* ===== Commit details ===== */
1348
1349         .page-content-header .commit-committer-link, .page-content-header .commit-author-link {
1350                 color: #f2f2f2;
1351         }
1352
1353         .commit-box {
1354                 border-color: var(--light-divider);
1355         }
1356
1357         .commit-box .commit-title {
1358                 color: #f5f5f5;
1359         }
1360
1361         .cgray, .commit.inline-commit .committed_ago, .generic_commit_status.inline-commit .committed_ago {
1362                 color: #e2e2e2;
1363         }
1364
1365         .info-well .icon-container.commit-icon svg path {
1366                 fill: #e2e2e2;
1367         }
1368
1369         .diff-files-changed {
1370                 background-color: var(--main-background);
1371         }
1372
1373         .diff-files-changed .commit-stat-summary {
1374                 background-color: var(--main-background);
1375         }
1376
1377         .diff-file .file-title:hover, .diff-file .file-title-flex-parent:hover {
1378                 background-color: #424657;
1379         }
1380
1381         .diff-file .diff-content {
1382                 background-color: var(--main-background);
1383         }
1384
1385         .nothing-here-block {
1386                 color: #e2e2e2;
1387         }
1388
1389         .form-control:focus, .common-note-form .md-area.is-focused, .search form:focus, .search.search-active form {
1390                 background-color: var(--main-background);
1391         }
1392
1393         .btn:active, .btn.active {
1394                 background-color: #595e74;
1395                 border-color: var(--btn-border);
1396                 color: var(--main-text-color);
1397         }
1398
1399         .file-title-flex-parent, .file-holder .file-title-flex-parent {
1400                 border-color: var(--main-border);
1401         }
1402
1403         /* Commit message editing */
1404
1405         .commit-message-container {
1406                 background-color: var(--main-background);
1407         }
1408
1409         .commit-message-container textarea {
1410                 background-color: var(--main-background);
1411         }
1412
1413         /* ===== List of merge requests ===== */
1414
1415         .merge-request.merged, .issue.merged {
1416                 background-color: #333744;
1417                 border-color: var(--light-divider);
1418         }
1419
1420         /* ===== Merge request details ===== */
1421
1422         .mr-state-widget {
1423                 color: #f2f2f2;
1424         }
1425
1426         .merge-request-tabs-container {
1427                 background-color: var(--main-background);
1428         }
1429
1430         .limit-container-width .merge-request-tabs-container .inner-page-scroll-tabs {
1431                 background-color: var(--main-background);
1432         }
1433
1434         .mr-source-target {
1435                 border-color: var(--main-border);
1436         }
1437
1438         .mr-source-target .diverged-commits-count {
1439                 color: #cacaca;
1440         }
1441
1442         .mr-widget-heading, .mr-state-widget .mr-widget-section, .mr-state-widget .mr-widget-footer {
1443                 border-color: var(--main-border);
1444         }
1445
1446         .mr-state-widget .media-section {
1447                 border-color: var(--main-border);
1448         }
1449
1450         .mr-state-widget .ci-widget {
1451                 color: #e4e4e4;
1452         }
1453
1454         .ci-widget-container .coverage {
1455                 color: #cacaca;
1456         }
1457
1458         .mr-section-container {
1459                 border-color: var(--main-border);
1460         }
1461
1462         .merge-request-tabs-holder {
1463                 border-bottom-color: #282b35;
1464         }
1465
1466         /* Indented border between merge request events */
1467
1468         .mr-widget-heading:not(.deploy-heading)::before {
1469                 border-color: var(--main-border);
1470         }
1471
1472         /* Discussion */
1473
1474         .timeline .system-note .note-text {
1475                 color: var(--main-text-color) !important;
1476         }
1477
1478         /* Changes */
1479
1480         .mr-version-controls {
1481                 background-color: var(--lighter-background-1);
1482                 color: #eee;
1483         }
1484
1485         /* ===== Tags ===== */
1486
1487         .branch-commit {
1488                 color: #d3d3d3;
1489         }
1490
1491         .branch-commit .commit-row-message {
1492                 color: #d3d3d3;
1493         }
1494
1495         .branch-commit .commit-sha, .branch-commit .gfm-commit, .branch-commit .gfm-commit_range {
1496                 color: #2596ff;
1497         }
1498
1499         /* ===== Edit tag ===== */
1500
1501         .sub-header-block {
1502                 background-color: var(--main-background);
1503         }
1504
1505         /* ===== File content ===== */
1506
1507         .file-title-flex-parent {
1508                 background-color: var(--lighter-background-1);
1509                 border-color: var(--btn-border);
1510         }
1511
1512         .info-well .well-segment:not(:last-of-type) {
1513                 border-color: #484c5f;
1514         }
1515
1516         .file-title-flex-parent a {
1517                 color: var(--main-text-color);
1518         }
1519
1520         .file-title-flex-parent, .file-holder .file-title-flex-parent {
1521                 background-color: var(--main-background);
1522         }
1523
1524         /* ===== Image/video preview ===== */
1525
1526         .file-holder .file-content.image_file, .file-holder .file-content.video {
1527                 background-color: #323643;
1528         }
1529
1530         /* ===== Blame ===== */
1531
1532         .file-holder .file-blame-legend {
1533                 background-color: var(--lighter-background-1);
1534                 border-color: #484c5f;
1535         }
1536
1537         .file-holder .file-content.blame td.blame-commit {
1538                 background-color: var(--lighter-background-1);
1539         }
1540
1541         .file-holder .file-content.blame td.blame-commit-age-8 {
1542                 border-left-color: #4f5568;
1543         }
1544
1545         .file-holder .file-content.blame td.blame-commit-age-9 {
1546                 border-left-color: #464a53;
1547         }
1548
1549         .file-holder .file-content.blame td.blame-commit-age-0 {
1550                 border-left-color: #4096ff;
1551         }
1552
1553         .file-holder .file-content.blame tr {
1554                 border-bottom-color: #484c5f;
1555         }
1556
1557         .file-holder .file-content.blame td.line-numbers {
1558                 border-left-color: #484c5f;
1559         }
1560
1561         /* ===== List of todos ===== */
1562
1563         .todos-list > .todo:hover {
1564                 background-color: #313543;
1565                 border-color: #1763bf;
1566         }
1567
1568         .todos-list > .todo:last-child:hover {
1569                 border-color: #1763bf;
1570         }
1571
1572         .todo-item .todo-body .todo-note .md p {
1573                 color: #eee;
1574         }
1575
1576         .todos-list > .todo.todo-pending.done-reversible {
1577                 background-color: var(--main-background);
1578         }
1579
1580         .todos-list > .todo.todo-pending.done-reversible:hover {
1581                 background-color: var(--lighter-background-1);
1582                 border-color: var(--light-divider);
1583         }
1584
1585         .todos-list > .todo.todo-pending.done-reversible .todo-avatar, .todos-list > .todo.todo-pending.done-reversible .todo-item {
1586                 opacity: .5;
1587         }
1588
1589         .todos-list > .todo.todo-pending.done-reversible:hover .todo-avatar, .todos-list > .todo.todo-pending.done-reversible:hover .todo-item {
1590                 opacity: .9;
1591         }
1592
1593         .todos-list > .todo.todo-pending.done-reversible .btn {
1594                 background-color: var(--btn-background);
1595         }
1596
1597         /* ===== List of labels ===== */
1598
1599         .labels-container {
1600                 background-color: var(--lighter-background-1);
1601         }
1602
1603         .manage-labels-list > li:not(.empty-message):not(.is-not-draggable) {
1604                 background-color: var(--main-background);
1605         }
1606
1607         .label-actions-list .btn {
1608                 background: none;
1609         }
1610
1611         .label-list-item .label-action svg {
1612                 fill: #d3d3d3;
1613         }
1614
1615         .js-label-options-dropdown svg {
1616                 filter: invert(80%);
1617         }
1618
1619         .label-list-item .label-description a {
1620                 color: #2596ff;
1621         }
1622
1623         .label-list-item .label-description a:hover {
1624                 color: #23baff;
1625         }
1626
1627         .prioritized-labels .manage-labels-list > li:not(.empty-message):not(.is-not-draggable) {
1628                 box-shadow: 0 1px 2px rgba(0,0,0,0.5);
1629         }
1630
1631         /* ===== New label ===== */
1632
1633         .input-group-text {
1634                 border-color: var(--btn-border);
1635         }
1636
1637         .input-group .input-group-prepend, .input-group .input-group-append {
1638                 background-color: var(--main-background);
1639         }
1640
1641         /* ===== Milestones ===== */
1642
1643         .milestones {
1644                 background-color: var(--lighter-background-1);
1645         }
1646
1647         .milestones .milestone {
1648                 background-color: var(--main-background);
1649         }
1650
1651         /* Milestone details */
1652
1653         .detail-page-description .title {
1654                 border-color: var(--light-divider);
1655         }
1656
1657         .milestone-detail {
1658                 border-color: var(--light-divider);
1659         }
1660
1661         .right-sidebar-collapsed .milestone-sidebar .reference {
1662                 border-color: #313541;
1663         }
1664
1665         /* ===== Profile page ===== */
1666
1667         .cover-block {
1668                 background-color: var(--main-background);
1669         }
1670
1671         .cover-block .cover-title {
1672                 color: #f5f5f5;
1673         }
1674
1675         .cover-block .cover-desc {
1676                 color: #f5f5f5;
1677         }
1678
1679         /* Activity grid */
1680
1681         .row-content-block.white {
1682                 background-color: var(--main-background);
1683         }
1684
1685         .nav-links li.active a, .nav-links li a.active {
1686                 color: #f2f2f2;
1687         }
1688
1689         .row-content-block {
1690                 color: #e2e2e2;
1691         }
1692
1693         .user-contrib-text {
1694                 fill: #b9b9b9;
1695         }
1696
1697         /* ===== Settings ===== */
1698
1699         .settings {
1700                 border-color: var(--light-divider);
1701         }
1702
1703         /* Repository Settings */
1704
1705         .account-well {
1706                 background-color: var(--lighter-background-1);
1707                 border-color: #282b35;
1708         }
1709
1710         .select2-container .select2-choice, .select2-container.select2-drop-above .select2-choice {
1711                 background-color: var(--main-background);
1712                 border-color: var(--btn-border);
1713                 color: var(--main-text-color);
1714         }
1715
1716         .select2-container .select2-choice:hover, .select2-container.select2-drop-above .select2-choice:hover {
1717                 border-color: #4096ff;
1718                 color: var(--main-text-color);
1719         }
1720
1721         .card-header {
1722                 background-color: var(--lighter-background-1);
1723                 border-color: var(--main-border);
1724         }
1725
1726         .card-body {
1727                 background-color: var(--main-background);
1728         }
1729
1730         .card-footer {
1731                 background-color: var(--lighter-background-1);
1732                 border-color: var(--main-border);
1733         }
1734
1735         .settings-message {
1736                 background-color: #7e4100;
1737                 border-color: #a35a00;
1738                 color: #fff;
1739         }
1740
1741         /* General Settings */
1742
1743         .project-visibility-setting, .project-feature-settings {
1744                 border-color: var(--main-border);
1745         }
1746
1747         .project-feature-settings {
1748                 background-color: var(--main-background);
1749         }
1750
1751         .form-control:disabled, .search form:disabled, .form-control[readonly], .search form[readonly] {
1752                 background-color: var(--btn-disabled-background);
1753                 color: var(--btn-disabled-color);
1754         }
1755
1756         .select2-container-multi .select2-choices {
1757                 border-color: var(--btn-border);
1758         }
1759
1760         .settings-content .sub-section {
1761                 background-color: var(--lighter-background-1);
1762                 border-color: #282b35;
1763         }
1764
1765         .input-group-text {
1766                 background-color: var(--main-background);
1767                 border-color: var(--btn-border);
1768                 color: var(--main-text-color);
1769         }
1770
1771         .bs-callout-info {
1772                 background-color: #0f4071;
1773                 border-color: #4096ff;
1774                 color: var(--lighter-text-color-1);
1775         }
1776
1777         /* CI/CD Settings */
1778
1779         .bg-light {
1780                 background-color: var(--lighter-background-1) !important;
1781         }
1782
1783         .text-muted {
1784                 color: #cacaca !important;
1785         }
1786
1787         .bs-callout {
1788                 background-color: var(--lighter-background-1);
1789                 border-color: #b9b9b9;
1790                 color: var(--main-text-color);
1791         }
1792
1793         .btn.btn-inverted.btn-primary, .btn.btn-inverted.btn-info {
1794                 background-color: #1f78d1;
1795                 color: #fff;
1796         }
1797
1798         .btn.btn-inverted.btn-primary:hover, .btn.btn-inverted.btn-primary:focus, .btn.btn-inverted.btn-info:hover, .btn.btn-inverted.btn-info:focus {
1799                 background-color: #1b69b6;
1800         }
1801
1802         ul.bordered-list > li, ul.unstyled-list > li {
1803                 border-color: var(--light-divider);
1804         }
1805
1806         /* Members */
1807
1808         .gitlab-tab-content {
1809                 border-color: var(--main-border);
1810         }
1811
1812         .gitlab-tabs {
1813                 background-color: var(--main-background);
1814         }
1815
1816         .gitlab-tabs li:not(:last-child) {
1817                 border-color: var(--main-border);
1818         }
1819
1820         .select2-container-multi .select2-choices {
1821                 background-color: #313541;
1822         }
1823
1824         .select2-container-multi .select2-choices .select2-search-field input {
1825                 color: var(--main-text-color);
1826         }
1827
1828         .select2-container-multi .select2-choices .select2-search-field input.select2-active {
1829                 background-color: #313541 !important;
1830         }
1831
1832         /* ===== CI/CD ===== */
1833
1834         /* Pipelines */
1835
1836         .pipeline-tab-content {
1837                 background-color: var(--main-background);
1838         }
1839
1840         .pipeline-graph .build .build-content {
1841                 background-color: var(--main-background);
1842                 border-color: var(--btn-border);
1843                 color: var(--main-text-color);
1844         }
1845
1846         .pipeline-graph .build a.build-content:hover, .pipeline-graph .build .participants-more .build-content.btn-link:hover, .participants-more .pipeline-graph .build .build-content.btn-link:hover, .participants-more .pipeline-graph .build .ci-job-dropdown-container:hover .btn-link.build-content, .pipeline-graph .build .ci-job-dropdown-container:hover .participants-more .btn-link.build-content, .pipeline-graph .build .user-list-more .build-content.btn-link:hover, .user-list-more .pipeline-graph .build .build-content.btn-link:hover, .user-list-more .pipeline-graph .build .ci-job-dropdown-container:hover .btn-link.build-content, .pipeline-graph .build .ci-job-dropdown-container:hover .user-list-more .btn-link.build-content, .pipeline-graph .build .ci-job-dropdown-container:hover a.build-content, .pipeline-graph .build button.build-content:hover, .pipeline-graph .build .ci-job-dropdown-container:hover button.build-content {
1847                 background-color: var(--btn-background);
1848                 border-color: var(--btn-border);
1849                 color: var(--main-text-color);
1850         }
1851
1852         .pipeline-graph .build .build-content:hover, .pipeline-graph .build .ci-job-dropdown-container:hover .build-content {
1853                 background-color: var(--btn-background);
1854                 border-color: var(--btn-border);
1855                 color: var(--main-text-color);
1856         }
1857
1858         .pipeline-graph .ci-action-icon-container.ci-action-icon-wrapper {
1859                 background-color: var(--main-background);
1860                 border-color: var(--main-border);
1861         }
1862
1863         .pipeline-graph .ci-action-icon-container.ci-action-icon-wrapper svg {
1864                 fill: var(--main-text-color);
1865         }
1866
1867         .pipeline-graph .ci-action-icon-container.ci-action-icon-wrapper:hover {
1868                 background-color: var(--btn-background);
1869                 border-color: var(--main-border);
1870         }
1871
1872         .pipeline-graph .ci-action-icon-container.ci-action-icon-wrapper:hover svg {
1873                 fill: var(--main-text-color);
1874         }
1875
1876         .table-holder .ci-table th {
1877                 background-color: var(--main-background);
1878                 color: #cacaca;
1879         }
1880
1881         .ci-table .duration, .ci-table .finished-at {
1882                 color: #cacaca;
1883         }
1884
1885         /* Pipelines (GitLab.com, EE 11.1) */
1886
1887         .gl-responsive-table-row:not(:last-child) {
1888                 border-color: var(--light-divider);
1889         }
1890
1891         .pipelines .ci-table .pipeline-id {
1892                 color: #f2f2f2;
1893         }
1894
1895         /* Jobs */
1896
1897         .ci-table .branch-commit .commit-sha, .ci-table .branch-commit .gfm-commit, .ci-table .branch-commit .gfm-commit_range {
1898                 color: #2596ff;
1899         }
1900
1901         .ci-table .branch-commit .sprite {
1902                 fill: #cacaca;
1903         }
1904
1905         .ci-table .branch-commit svg {
1906                 fill: #cacaca;
1907         }
1908
1909         /* Job details */
1910
1911         .build-page .top-bar {
1912                 background-color: var(--lighter-background-1);
1913                 border-color: var(--main-border);
1914         }
1915
1916         .build-page .top-bar .controllers .controllers-buttons {
1917                 color: var(--main-text-color);
1918         }
1919
1920         .right-sidebar.build-sidebar .builds-container {
1921                 background-color: var(--main-background);
1922                 border-color: var(--light-divider);
1923         }
1924
1925         .right-sidebar.build-sidebar .builds-container .build-job:hover {
1926                 background-color: var(--btn-background);
1927         }
1928
1929         .right-sidebar.build-sidebar .builds-container a:hover, .right-sidebar.build-sidebar .builds-container .participants-more .btn-link:hover, .participants-more .right-sidebar.build-sidebar .builds-container .btn-link:hover, .right-sidebar.build-sidebar .builds-container .user-list-more .btn-link:hover, .user-list-more .right-sidebar.build-sidebar .builds-container .btn-link:hover {
1930                 color: var(--main-text-color);
1931         }
1932
1933         /* ===== Web IDE ===== */
1934
1935         .ide-view {
1936                 color: var(--main-text-color);
1937         }
1938
1939         /* Code editor */
1940
1941         .monaco-editor .margin {
1942                 background-color: var(--main-background);
1943         }
1944
1945         .monaco-editor .line-numbers {
1946                 color: #aaa;
1947         }
1948
1949         .monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input {
1950                 background-color: var(--main-background);
1951         }
1952
1953         .multi-file-tabs {
1954                 background-color: #3b3e4d;
1955                 box-shadow: inset 0 -1px var(--main-border);
1956         }
1957
1958         .multi-file-tabs li {
1959                 background-color: #3D4050;
1960                 border-color: var(--main-border);
1961                 color: #eeeeee;
1962         }
1963
1964         .multi-file-tabs li.active {
1965                 background-color: #404454;
1966                 border-color: var(--main-border);
1967                 color: #f5f5f5;
1968         }
1969
1970         .multi-file-tab-close {
1971                 color: #cacaca;
1972         }
1973
1974         .multi-file-tab-close:not([disabled]):hover {
1975                 background-color: var(--lighter-background-1);
1976                 color: #fff;
1977         }
1978
1979         .multi-file-edit-pane {
1980                 border-color: var(--btn-border);
1981         }
1982
1983         .dragHandle {
1984                 background-color: var(--btn-border);
1985         }
1986
1987         .drag-handle:hover {
1988                 background-color: var(--main-border);
1989         }
1990
1991         .ide-mode-tabs {
1992                 border-color: var(--main-border);
1993         }
1994
1995         .monaco-editor .scroll-decoration {
1996                 box-shadow: #22252e 0 6px 6px -6px inset;
1997         }
1998
1999         /* Code editor: syntax */
2000
2001         .mtk1 {
2002                 color: var(--main-text-color);
2003         }
2004
2005         .mtk4 {
2006                 color: #ff0000;
2007         }
2008
2009         .mtk5 {
2010                 color: #2596ff;
2011         }
2012
2013         .mtk6 {
2014                 color: #23baff;
2015         }
2016
2017         .mtk7 {
2018                 color: #00c200;
2019         }
2020
2021         .mtk8 {
2022                 color: #09885a;
2023         }
2024
2025         .mtk10 {
2026                 color: #cacaca;
2027         }
2028
2029         .mtk14 {
2030                 color: #e34f00;
2031         }
2032
2033         .mtk20 {
2034                 color: #b84022;
2035         }
2036
2037         .mtk22 {
2038                 color: #00b1b1;
2039         }
2040
2041         /* Sidebars */
2042
2043         .multi-file-commit-panel {
2044                 background-color: var(--lighter-background-1);
2045         }
2046
2047         .multi-file-commit-panel .multi-file-commit-panel-inner-content {
2048                 background-color: var(--main-background);
2049         }
2050
2051         .multi-file-commit-panel .multi-file-commit-panel-inner-scroll {
2052                 border-color: var(--btn-border);
2053         }
2054
2055         .ide-sidebar-link.active {
2056                 background-color: var(--main-background);
2057                 border-color: var(--main-border);
2058         }
2059
2060         body.ui-indigo .ide-sidebar-link.active {
2061                 color: #4096ff;
2062                 box-shadow: inset 3px 0 #4096ff;
2063         }
2064
2065         .context-header > a, .context-header > button {
2066                 color: var(--main-text-color);
2067         }
2068
2069         .context-header > a:hover, .participants-more .context-header > .btn-link:hover, .user-list-more .context-header > .btn-link:hover, .context-header > a:focus, .context-header > button:hover, .context-header > button:focus {
2070                 background-color: var(--btn-background);
2071                 color: #f5f5f5;
2072         }
2073
2074         .ide-sidebar-link {
2075                 color: #bebebe;
2076         }
2077
2078         .ide-sidebar-link:hover {
2079                 background-color: #383b4a;
2080                 color: #eeeeee;
2081         }
2082
2083         .ide-sidebar-link.active::after {
2084                 background-color: var(--main-border);
2085         }
2086
2087         .ide-right-sidebar .ide-activity-bar {
2088                 border-color: var(--btn-border);
2089         }
2090
2091         .text-secondary {
2092                 color: #bebebe !important;
2093         }
2094
2095         /* Search merge requests */
2096
2097         .ide-nav-form .nav-links li a:not(.active) {
2098                 background-color: var(--main-background);
2099         }
2100
2101         .dropdown-menu li a:not(.disable-hover):hover .badge.badge-pill, .dropdown-menu li .participants-more .btn-link:not(.disable-hover):hover .badge.badge-pill, .participants-more .dropdown-menu li .btn-link:not(.disable-hover):hover .badge.badge-pill, .dropdown-menu li .user-list-more .btn-link:not(.disable-hover):hover .badge.badge-pill, .user-list-more .dropdown-menu li .btn-link:not(.disable-hover):hover .badge.badge-pill, .dropdown-menu li a:not(.disable-hover):hover .shortcut-mappings .key, .shortcut-mappings .dropdown-menu li a:not(.disable-hover):hover .key, .dropdown-menu li .participants-more .btn-link:not(.disable-hover):hover .shortcut-mappings .key, .shortcut-mappings .dropdown-menu li .participants-more .btn-link:not(.disable-hover):hover .key, .participants-more .dropdown-menu li .btn-link:not(.disable-hover):hover .shortcut-mappings .key, .shortcut-mappings .participants-more .dropdown-menu li .btn-link:not(.disable-hover):hover .key, .dropdown-menu li .user-list-more .btn-link:not(.disable-hover):hover .shortcut-mappings .key, .shortcut-mappings .dropdown-menu li .user-list-more .btn-link:not(.disable-hover):hover .key, .user-list-more .dropdown-menu li .btn-link:not(.disable-hover):hover .shortcut-mappings .key, .shortcut-mappings .user-list-more .dropdown-menu li .btn-link:not(.disable-hover):hover .key, .dropdown-menu li a:active .badge.badge-pill, .dropdown-menu li a:active .shortcut-mappings .key, .shortcut-mappings .dropdown-menu li a:active .key, .dropdown-menu li a:focus .badge.badge-pill, .dropdown-menu li a:focus .shortcut-mappings .key, .shortcut-mappings .dropdown-menu li a:focus .key, .dropdown-menu li a.is-focused .badge.badge-pill, .dropdown-menu li a.is-focused .shortcut-mappings .key, .shortcut-mappings .dropdown-menu li a.is-focused .key, .dropdown-menu li button:not(.disable-hover):hover .badge.badge-pill, .dropdown-menu li button:not(.disable-hover):hover .shortcut-mappings .key, .shortcut-mappings .dropdown-menu li button:not(.disable-hover):hover .key, .dropdown-menu li button:active .badge.badge-pill, .dropdown-menu li button:active .shortcut-mappings .key, .shortcut-mappings .dropdown-menu li button:active .key, .dropdown-menu li button:focus .badge.badge-pill, .dropdown-menu li button:focus .shortcut-mappings .key, .shortcut-mappings .dropdown-menu li button:focus .key, .dropdown-menu li button.is-focused .badge.badge-pill, .dropdown-menu li button.is-focused .shortcut-mappings .key, .shortcut-mappings .dropdown-menu li button.is-focused .key, .dropdown-menu li .menu-item:not(.disable-hover):hover .badge.badge-pill, .dropdown-menu li .menu-item:not(.disable-hover):hover .shortcut-mappings .key, .shortcut-mappings .dropdown-menu li .menu-item:not(.disable-hover):hover .key, .dropdown-menu li .menu-item:active .badge.badge-pill, .dropdown-menu li .menu-item:active .shortcut-mappings .key, .shortcut-mappings .dropdown-menu li .menu-item:active .key, .dropdown-menu li .menu-item:focus .badge.badge-pill, .dropdown-menu li .menu-item:focus .shortcut-mappings .key, .shortcut-mappings .dropdown-menu li .menu-item:focus .key, .dropdown-menu li .menu-item.is-focused .badge.badge-pill, .dropdown-menu li .menu-item.is-focused .shortcut-mappings .key, .shortcut-mappings .dropdown-menu li .menu-item.is-focused .key, .dropdown-menu-nav li a:not(.disable-hover):hover .badge.badge-pill, .dropdown-menu-nav li .participants-more .btn-link:not(.disable-hover):hover .badge.badge-pill, .participants-more .dropdown-menu-nav li .btn-link:not(.disable-hover):hover .badge.badge-pill, .dropdown-menu-nav li .user-list-more .btn-link:not(.disable-hover):hover .badge.badge-pill, .user-list-more .dropdown-menu-nav li .btn-link:not(.disable-hover):hover .badge.badge-pill, .dropdown-menu-nav li a:not(.disable-hover):hover .shortcut-mappings .key, .shortcut-mappings .dropdown-menu-nav li a:not(.disable-hover):hover .key, .dropdown-menu-nav li .participants-more .btn-link:not(.disable-hover):hover .shortcut-mappings .key, .shortcut-mappings .dropdown-menu-nav li .participants-more .btn-link:not(.disable-hover):hover .key, .participants-more .dropdown-menu-nav li .btn-link:not(.disable-hover):hover .shortcut-mappings .key, .shortcut-mappings .participants-more .dropdown-menu-nav li .btn-link:not(.disable-hover):hover .key, .dropdown-menu-nav li .user-list-more .btn-link:not(.disable-hover):hover .shortcut-mappings .key, .shortcut-mappings .dropdown-menu-nav li .user-list-more .btn-link:not(.disable-hover):hover .key, .user-list-more .dropdown-menu-nav li .btn-link:not(.disable-hover):hover .shortcut-mappings .key, .shortcut-mappings .user-list-more .dropdown-menu-nav li .btn-link:not(.disable-hover):hover .key, .dropdown-menu-nav li a:active .badge.badge-pill, .dropdown-menu-nav li a:active .shortcut-mappings .key, .shortcut-mappings .dropdown-menu-nav li a:active .key, .dropdown-menu-nav li a:focus .badge.badge-pill, .dropdown-menu-nav li a:focus .shortcut-mappings .key, .shortcut-mappings .dropdown-menu-nav li a:focus .key, .dropdown-menu-nav li a.is-focused .badge.badge-pill, .dropdown-menu-nav li a.is-focused .shortcut-mappings .key, .shortcut-mappings .dropdown-menu-nav li a.is-focused .key, .dropdown-menu-nav li button:not(.disable-hover):hover .badge.badge-pill, .dropdown-menu-nav li button:not(.disable-hover):hover .shortcut-mappings .key, .shortcut-mappings .dropdown-menu-nav li button:not(.disable-hover):hover .key, .dropdown-menu-nav li button:active .badge.badge-pill, .dropdown-menu-nav li button:active .shortcut-mappings .key, .shortcut-mappings .dropdown-menu-nav li button:active .key, .dropdown-menu-nav li button:focus .badge.badge-pill, .dropdown-menu-nav li button:focus .shortcut-mappings .key, .shortcut-mappings .dropdown-menu-nav li button:focus .key, .dropdown-menu-nav li button.is-focused .badge.badge-pill, .dropdown-menu-nav li button.is-focused .shortcut-mappings .key, .shortcut-mappings .dropdown-menu-nav li button.is-focused .key, .dropdown-menu-nav li .menu-item:not(.disable-hover):hover .badge.badge-pill, .dropdown-menu-nav li .menu-item:not(.disable-hover):hover .shortcut-mappings .key, .shortcut-mappings .dropdown-menu-nav li .menu-item:not(.disable-hover):hover .key, .dropdown-menu-nav li .menu-item:active .badge.badge-pill, .dropdown-menu-nav li .menu-item:active .shortcut-mappings .key, .shortcut-mappings .dropdown-menu-nav li .menu-item:active .key, .dropdown-menu-nav li .menu-item:focus .badge.badge-pill, .dropdown-menu-nav li .menu-item:focus .shortcut-mappings .key, .shortcut-mappings .dropdown-menu-nav li .menu-item:focus .key, .dropdown-menu-nav li .menu-item.is-focused .badge.badge-pill, .dropdown-menu-nav li .menu-item.is-focused .shortcut-mappings .key, .shortcut-mappings .dropdown-menu-nav li .menu-item.is-focused .key {
2102                 background-color: #343845;
2103         }
2104
2105         .border-bottom {
2106                 border-color: #282b35 !important;
2107         }
2108
2109         /* Commit panel (file browser) */
2110
2111         .multi-file-commit-panel .multi-file-commit-panel-inner-scroll {
2112                 background-color: var(--main-background);
2113         }
2114
2115         .multi-file-commit-panel .multi-file-commit-panel-inner-content {
2116                 border-color: var(--btn-border);
2117         }
2118
2119         .ide-file-list .file.file-active {
2120                 background-color: var(--btn-background);
2121         }
2122
2123         .ide-file-list .file.file-open {
2124                 background-color: #3d4252;
2125         }
2126
2127         .multi-file-commit-list-path:hover, .multi-file-commit-list-path:focus, .ide-file-list .file:hover, .ide-file-list .file:focus {
2128                 background-color: var(--btn-background);
2129         }
2130
2131         .multi-file-commit-form {
2132                 background-color: var(--main-background);
2133                 border-color: var(--btn-border);
2134         }
2135
2136         .multi-file-commit-form > form, .multi-file-commit-form > .commit-form-compact {
2137                 border-color: var(--light-divider);
2138         }
2139
2140         .ide-tree-header {
2141                 border-color: var(--light-divider);
2142         }
2143
2144         .ide-tree-header .ide-nav-dropdown .dropdown-menu-toggle:hover {
2145                 background-color: var(--main-background);
2146         }
2147
2148         .ide-tree-header .ide-nav-dropdown.show .dropdown-menu-toggle {
2149                 background-color: var(--main-background);
2150         }
2151
2152         .ide-tree-header button {
2153                 color: var(--main-text-color);
2154         }
2155
2156         .show.dropdown .dropdown-toggle, .show.dropdown .dropdown-menu-toggle, .show.dropdown .dropdown-menu-toggle {
2157                 border-color: var(--btn-border);
2158                 box-shadow: inset 0 0 10px 10px rgba(0,0,0,.2);
2159         }
2160
2161         .ic-upload {
2162                 filter: invert(90%);
2163         }
2164
2165         /* Status bar */
2166
2167         .ide-status-bar {
2168                 background-color: var(--main-background);
2169                 border-color: var(--btn-border);
2170         }
2171
2172         /* Image preview */
2173
2174         .preview-container .file-container {
2175                 background-color: #323643;
2176         }
2177
2178         .preview-container .file-container .file-info {
2179                 color: #cacaca;
2180         }
2181
2182         /* Review changes */
2183
2184         .blob-editor-container .monaco-diff-editor.vs .margin {
2185                 background-color: var(--main-background);
2186                 border-color: var(--main-border);
2187         }
2188
2189         .blob-editor-container .monaco-diff-editor.vs .line-numbers {
2190                 color: #aaa;
2191         }
2192
2193         .monaco-diff-editor .line-delete, .monaco-diff-editor .char-delete {
2194                 background-color: #412021;
2195         }
2196
2197         .blob-editor-container .monaco-diff-editor.vs .char-delete {
2198                 background-color: #412021;
2199         }
2200
2201         .monaco-diff-editor .line-insert {
2202                 background-color: #28472d;
2203         }
2204
2205         .multi-file-editor-holder.is-readonly .monaco-editor, .multi-file-editor-holder.is-readonly .monaco-editor-background, .multi-file-editor-holder.is-readonly .monaco-editor .inputarea.ime-input, .multi-file-editor-holder .editor.original .monaco-editor, .multi-file-editor-holder .editor.original .monaco-editor-background, .multi-file-editor-holder .editor.original .monaco-editor .inputarea.ime-input {
2206                 background-color: var(--main-background);
2207         }
2208
2209         .blob-editor-container .monaco-diff-editor.vs .diffOverview {
2210                 background-color: var(--main-background);
2211         }
2212
2213
2214         /* ===== New project ===== */
2215
2216         /* Blank project */
2217
2218         .new_project .input-group-prepend.static-namespace, .new_project .input-group-append.static-namespace, .edit-project .input-group-prepend.static-namespace, .edit-project .input-group-append.static-namespace, .import-project .input-group-prepend.static-namespace, .import-project .input-group-append.static-namespace {
2219                 border-color: var(--btn-border);
2220         }
2221
2222         .visibility-level-setting .form-check .option-title {
2223                 color: var(--main-text-color);
2224         }
2225
2226         .visibility-level-setting .form-check .option-description, .visibility-level-setting .form-check .option-disabled-reason {
2227                 color: #cacaca;
2228         }
2229
2230         .initialize-with-readme-setting .form-check .option-title {
2231                 color: var(--main-text-color);
2232         }
2233
2234         .initialize-with-readme-setting .form-check .option-description {
2235                 color: #cacaca;
2236         }
2237
2238         /* Create from template */
2239
2240         .project-template .template-option:not(:first-child) {
2241                 border-color: var(--main-border);
2242         }
2243
2244         /* ===== Sign in page ===== */
2245
2246         body.navless {
2247                 background-color: var(--main-background) !important;
2248         }
2249
2250         .navbar-empty {
2251                 background-color: var(--main-background);
2252                 border-color: var(--light-divider);
2253         }
2254
2255         .devise-layout-html body .footer-container, .devise-layout-html body hr.footer-fixed {
2256                 background-color: var(--main-background);
2257         }
2258
2259         .login-page .brand-holder p {
2260                 color: #e2e2e2;
2261         }
2262
2263         .login-page .login-box, .login-page .omniauth-container {
2264                 box-shadow: 0 0 0 1px var(--main-border);
2265         }
2266
2267         .login-page .new-session-tabs li:not(.active) {
2268                 background-color: var(--main-background);
2269         }
2270
2271         .login-page .new-session-tabs {
2272                 box-shadow: 0 0 0 1px var(--main-border);
2273         }
2274
2275         .login-page .new-session-tabs li {
2276                 border-color: var(--main-border);
2277         }
2278
2279         .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
2280                 background-color: #3b3f4e;
2281                 color: #f5f5f5;
2282         }
2283
2284         .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
2285                 border-color: #2a66aa;
2286         }
2287
2288         .login-page .form-control:active, .login-page .search form:active, .search .login-page form:active, .login-page .form-control:focus, .login-page .common-note-form .md-area.is-focused, .common-note-form .login-page .md-area.is-focused, .login-page .search form:focus, .search .login-page form:focus, .login-page .search.search-active form, .search.search-active .login-page form {
2289                 background-color: #313541;
2290         }
2291
2292         .form-control:focus, .common-note-form .md-area.is-focused, .search form:focus, .search.search-active form {
2293                 color: var(--main-text-color);
2294         }
2295
2296         .gl-show-field-errors .gl-field-hint {
2297                 color: #d3d3d3;;
2298         }
2299
2300         /* ===== Authorize external website/application ===== */
2301
2302         .modal-content {
2303                 background-color: var(--main-background);
2304         }
2305
2306         .modal-header {
2307                 background-color: var(--main-background);
2308                 border-color: var(--light-divider);
2309         }
2310
2311         .modal-body {
2312                 background-color: var(--main-background);
2313         }
2314
2315         .form-actions {
2316                 background-color: var(--main-background);
2317                 border-color: var(--light-divider);
2318         }
2319
2320         .modal-doorkeepr-auth .scope-description, .doorkeeper-app-form .scope-description {
2321                 color: #d3d3d3;
2322         }
2323
2324         /* ===== about.gitlab.com ===== */
2325
2326         /* Features */
2327
2328         .steps {
2329                 background-color: var(--main-background);
2330         }
2331
2332         .steps a {
2333                 color: #2596ff;
2334         }
2335
2336         .steps a:hover {
2337                 border-bottom-color: #2596ff;
2338         }
2339
2340         .steps .step {
2341                 border-color: var(--main-border);
2342         }
2343
2344         /* ===== docs.gitlab.com ===== */
2345
2346         /* Header/Navigation bar */
2347
2348         .header {
2349                 background-color: var(--lighter-background-1);
2350                 border-color: var(--btn-border);
2351         }
2352
2353         .header p {
2354                 color: #eee;
2355         }
2356
2357         .header .nav > li > a {
2358                 color: #eee;
2359         }
2360
2361         .header input {
2362                 background-color: var(--lighter-background-1);
2363         }
2364
2365         /* Main content */
2366
2367         .main {
2368                 background-color: var(--main-background);
2369         }
2370
2371         .doc-nav > ul {
2372                 background-color: var(--lighter-background-1);
2373         }
2374
2375         h1 {
2376                 border-color: rgba(64, 150, 255, 0.6);
2377         }
2378
2379         table td, table th {
2380                 border-color: #2f333f;
2381         }
2382
2383         blockquote {
2384                 background-color: #3c4253;
2385         }
2386
2387         .alert-info {
2388                 background-color: #163558;
2389                 border-color: #245890;
2390         }
2391
2392         .alert-warning {
2393                 background-color: #7e4100;
2394                 border-color: #a35a00;
2395         }
2396
2397         .alert-success {
2398                 background-color: #083a1b;
2399                 border-color: #0e6c31;
2400         }
2401
2402         .main .edit-on {
2403                 border-color: var(--light-divider);
2404         }
2405
2406         .comments {
2407                 border-color: var(--light-divider);
2408         }
2409
2410         h2 code, h3 code, h4 code, h5 code, h6 code {
2411                 background-color: #24272a;
2412                 color: #e2e2e2;
2413         }
2414
2415         p code, li code, table code {
2416                 background-color: #24272a;
2417                 color: #e2e2e2;
2418         }
2419
2420         a:hover, .participants-more .btn-link:hover, .user-list-more .btn-link:hover, a:focus {
2421                 color: #23baff;
2422         }
2423 }