mempool/frontend/src/theme-contrast.scss

/* Theme */
$bg: #11131f;
$active-bg: #000000;
$hover-bg: #12131e;
$fg: #fff;
$title-fg: #2055e3;

$taproot: #eba814;
$taproot-light: #d5a90a;
$taproot-dark: #9d7c05;

/* Bootstrap */

$body-bg: $bg;
$body-color: $fg;
$gray-800: $bg;
$gray-700: $fg;

$nav-tabs-link-active-bg: $active-bg;

$primary: #007cfa;
$secondary: #272f4e;
$tertiary: #6225b2;
$success: #0aab2f;
$info: #10e0ff;

$h5-font-size: 1.15rem !default;

$pagination-bg: $body-bg;
$pagination-border-color: $gray-800;
$pagination-disabled-bg:           $fg;
$pagination-disabled-border-color: $bg;
$pagination-active-color:          $fg;
$pagination-active-bg:             $tertiary;
$pagination-hover-bg:              $hover-bg;
$pagination-hover-border-color:     $bg;
$pagination-disabled-bg:          $bg;

$custom-select-indicator-color: $fg;

.input-group-text {
  background-color: #1c2031 !important;
  border: 1px solid #20263e !important;
}

$link-color:                $info;
$link-decoration:           none !default;
$link-hover-color:          darken($link-color, 15%) !default;
$link-hover-decoration:     underline !default;

$dropdown-bg: $bg;
$dropdown-link-color: $fg;

$dropdown-link-hover-color: $fg;
$dropdown-link-hover-bg: $active-bg;

$dropdown-link-active-color: $fg;
$dropdown-link-active-bg: $active-bg;

@import "~bootstrap/scss/bootstrap";

:root {
  --bg: #{$bg};
  --active-bg: #{$active-bg};
  --hover-bg: #{$hover-bg};
  --fg: #{$fg};
  --color-fg: #fff;
  --title-fg: #{$title-fg};

  --primary: #{$primary};
  --secondary: #{$secondary};
  --tertiary: #{$tertiary};
  --success: #{$success};
  --info: #{$info};

  --transparent-fg: #ffffffbb;

  --box-bg: #171c2a;
  --stat-box-bg: #0b1018;
  --green: #83fd00;
}

body {
  background-color: var(--active-bg);
}

.box {
  background-color: var(--box-bg);
  border: 1px solid rgba(0,0,0,.125);
  box-shadow: 0.125rem 0.125rem 0.25rem rgba(0,0,0,0.075);
}

.navbar-nav.liquid > .active {
  background-color: var(--liquid) !important;
}

.navbar-nav.testnet > .active {
  background-color: var(--testnet) !important;
}

.navbar-nav.signet > .active {
  background-color: var(--signet) !important;
}

.navbar-nav.liquidtestnet > .active {
  background-color: var(--liquidtestnet) !important;
}

.form-control {
  color: #495057;
}
.form-control:focus {
  color: #000;
}

.form-control.form-control-secondary {
  color: var(--fg);
  background-color: var(--secondary);
  border: 1px solid var(--secondary);
}
.form-control.form-control-secondary:focus {
  color: var(--fg);
}

.skeleton-loader {
  background: #2e324e no-repeat;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    #5d6182,
    rgba(255, 255, 255, 0)
  );
}

.symbol {
	color: var(--transparent-fg);
}

.progress-text {
  span {
    color: var(--fg) !important;
  }
}

.block-size, .blocks-container {
  span {
    color: var(--fg) !important;
  }
}

.title-block {
  color: var(--fg);
  border-top: 3px solid var(--fg);
}

.title-address, .title-asset {
  color: var(--fg);
}

.close {
  color: var(--fg);
}

.close:hover {
  color: var(--fg);
}

.green-color {
  color: var(--green);
}

.red-color {
  color: var(--red);
}

.yellow-color {
  color: var(--yellow);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--stat-box-bg);
}

.bordertop {
  border-top: 1px solid #4c4c4c;
}

.tx-wrapper-tooltip-chart,
.fees-wrapper-tooltip-chart {
  background: rgba($active-bg, 0.95);
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  color: var(--tooltip-grey);
  thead {
    th {
      color: var(--tooltip-grey);
    }
  }
  .title {
    color: var(--fg);
  }
  .active {
    color: yellow !important;
    .value,
    .total-partial {
      color: yellow !important;
      .symbol {
        color: yellow !important;
      }
    }
  }
  .item {
    .value {
      .symbol {
        color: #7e7e7e;
      }
    }
  }
  .total-label {
    color: var(--fg);
  }
  thead {
    th {
      color: var(--tooltip-grey);
    }
  }
  .total-percentage-bar {
    span {
      background: #282d47;
    }
  }
}


.fees-wrapper-tooltip-chart-advanced,
.tx-wrapper-tooltip-chart-advanced {
  background: rgba($bg, 0.98);
  thead {
    .total-progress-percentage-bar,
    .total-progress-sum-bar {
      div {
        background: #29324c94;
      }
    }
  }
  .total-percentage-bar-background {
    background-color: #282d47;
  }
}

hr {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.progress-mempool {
  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, var(--mainnet-alt) 100%);
}

.progress-mempool.testnet {
  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--testnet) 0%, var(--testnet-alt) 100%);
}

.progress-mempool.signet {
  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--signet) 0%, var(--signet-alt) 100%);
}

.progress-mempool.liquid {
  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--liquid) 0%, var(--testnet-alt) 100%);
}

.progress-dark {
  background-color: var(--stat-box-bg);
}

.progress-darklight {
  background-color: var(--box-bg);
}

.progress-light {
  background-color: #2e324e;
}

.progress.progress-health {
  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, $success 100%);
}

.progress-bar.progress-bar-health {
  background: var(--secondary);
}

.alert-mempool {
  color: var(--fg);
  background-color: var(--tertiary);
  border-color: var(--alert-bg);
}

// ASM opcode colors

.constants { color: #ff8c00 }
.control { color: #87ceeb }
.stack { color: #ffa500 }
.splice { color: #46b5e2 }
.logic { color: #46b5e2 }
.arithmetic { color: #cae8d0 }
.crypto { color: #fa3d3d }
.locktime { color: #ff8c00 }
.reserved { color: #ff8c00 }

.tab-pane {
  .card {
    button {
      color: var(--fg);
    }

    .collapsed {
      background-color: var(--secondary);
      color: var(--info);
    }
  }
}


.pagination-container {
  background: var(--bg);
}


// Blinking block
@keyframes shadowyBackground {
  0% {
    box-shadow: -10px -15px 75px rgba($taproot, 1);
  }
  50% {
    box-shadow: -10px -15px 75px rgba($taproot, .3);
  }
  100% {
    box-shadow: -10px -15px 75px rgba($taproot, 1);
  }
}

.blink-bg {
  color: var(--fg);
  background: repeating-linear-gradient($taproot-dark, $taproot-dark 0.163525%, $taproot-light 100%) !important;
  animation: shadowyBackground 1s infinite;
  box-shadow: -10px -15px 75px rgba($taproot, 1);
  transition: 100ms all ease-in;
}