convert to CSS variables
This commit is contained in:
natsoni
@@ -1,14 +1,25 @@
|
||||
/* Theme */
|
||||
$bg: #1d1f31;
|
||||
$active-bg: #11131f;
|
||||
$hover-bg: #12131e;
|
||||
$fg: #fff;
|
||||
|
||||
$taproot: #eba814;
|
||||
$taproot-light: #d5a90a;
|
||||
$taproot-dark: #9d7c05;
|
||||
|
||||
/* Bootstrap */
|
||||
|
||||
$body-bg: #1d1f31;
|
||||
$body-color: #fff;
|
||||
$gray-800: #1d1f31;
|
||||
$gray-700: #fff;
|
||||
$body-bg: $bg;
|
||||
$body-color: $fg;
|
||||
$gray-800: $bg;
|
||||
$gray-700: $fg;
|
||||
|
||||
$nav-tabs-link-active-bg: #11131f;
|
||||
$nav-tabs-link-active-bg: $active-bg;
|
||||
|
||||
$primary: #105fb0;
|
||||
$secondary: #2d3348;
|
||||
$tertiary: #653b9c;
|
||||
$success: #1a9436;
|
||||
$info: #1bd8f4;
|
||||
|
||||
@@ -16,44 +27,80 @@ $h5-font-size: 1.15rem !default;
|
||||
|
||||
$pagination-bg: $body-bg;
|
||||
$pagination-border-color: $gray-800;
|
||||
$pagination-disabled-bg: #FFF;
|
||||
$pagination-disabled-border-color: #1d1f31;
|
||||
$pagination-active-color: #fff;
|
||||
$pagination-active-bg: #653b9c;
|
||||
$pagination-hover-bg: #12131e;
|
||||
$pagination-hover-border-color: #1d1f31;
|
||||
$pagination-disabled-bg: #1d1f31;
|
||||
$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: #FFF;
|
||||
$custom-select-indicator-color: $fg;
|
||||
|
||||
.input-group-text {
|
||||
background-color: #1c2031 !important;
|
||||
border: 1px solid #20263e !important;
|
||||
}
|
||||
|
||||
$link-color: #1bd8f4;
|
||||
$link-color: $info;
|
||||
$link-decoration: none !default;
|
||||
$link-hover-color: darken($link-color, 15%) !default;
|
||||
$link-hover-decoration: underline !default;
|
||||
|
||||
$dropdown-bg: #1d1f31;
|
||||
$dropdown-link-color: #fff;
|
||||
$dropdown-bg: $bg;
|
||||
$dropdown-link-color: $fg;
|
||||
|
||||
$dropdown-link-hover-color: #fff;
|
||||
$dropdown-link-hover-bg: #11131f;
|
||||
$dropdown-link-hover-color: $fg;
|
||||
$dropdown-link-hover-bg: $active-bg;
|
||||
|
||||
$dropdown-link-active-color: #fff;
|
||||
$dropdown-link-active-bg: #11131f;
|
||||
$dropdown-link-active-color: $fg;
|
||||
$dropdown-link-active-bg: $active-bg;
|
||||
|
||||
@import "bootstrap/scss/bootstrap";
|
||||
@import 'tlite/tlite.css';
|
||||
|
||||
:root {
|
||||
--bg: #{$bg};
|
||||
--active-bg: #{$active-bg};
|
||||
--hover-bg: #{$hover-bg};
|
||||
--fg: #{$fg};
|
||||
|
||||
--primary: #{$primary};
|
||||
--secondary: #{$secondary};
|
||||
--tertiary: #{$tertiary};
|
||||
--success: #{$success};
|
||||
--info: #{$info};
|
||||
|
||||
--box-bg: #24273e;
|
||||
--stat-box-bg: #181b2d;
|
||||
--alert-bg: #3a1c61;
|
||||
--transparent-fg: #ffffff66;
|
||||
|
||||
--testnet: #1d486f;
|
||||
--signet: #6f1d5d;
|
||||
--liquid: #116761;
|
||||
--liquidtestnet: #494a4a;
|
||||
|
||||
--mainnet-alt: #9339f4;
|
||||
--testnet-alt: #183550;
|
||||
--signet-alt: #471850;
|
||||
--liquidtestnet-alt: #272e46;
|
||||
|
||||
--taproot: #eba814;
|
||||
--taproot-light: #d5a90a;
|
||||
--taproot-dark: #9d7c05;
|
||||
|
||||
--green: #3bcc49;
|
||||
--red: #dc3545;
|
||||
--yellow: #ffd800;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #11131f;
|
||||
background-color: var(--active-bg);
|
||||
min-width: 375px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
@@ -82,7 +129,7 @@ main {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-color: #24273e;
|
||||
background-color: var(--box-bg);
|
||||
background-clip: border-box;
|
||||
border: 1px solid rgba(0,0,0,.125);
|
||||
box-shadow: 0.125rem 0.125rem 0.25rem rgba(0,0,0,0.075);
|
||||
@@ -100,35 +147,35 @@ main {
|
||||
}
|
||||
|
||||
.navbar-nav.liquid > .active {
|
||||
background-color: #116761 !important;
|
||||
background-color: var(--liquid) !important;
|
||||
}
|
||||
|
||||
.navbar-nav.testnet > .active {
|
||||
background-color: #1d486f !important;
|
||||
background-color: var(--testnet) !important;
|
||||
}
|
||||
|
||||
.navbar-nav.signet > .active {
|
||||
background-color: #6f1d5d !important;
|
||||
background-color: var(--signet) !important;
|
||||
}
|
||||
|
||||
.navbar-nav.liquidtestnet > .active {
|
||||
background-color: #494a4a !important;
|
||||
background-color: var(--liquidtestnet) !important;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
color: #fff;
|
||||
background-color: #2d3348;
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid rgba(17, 19, 31, 0.2);
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
color: #fff;
|
||||
background-color: #2d3348;
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
|
||||
.btn-purple {
|
||||
background-color: #653b9c;
|
||||
border-color: #653b9c;
|
||||
background-color: var(--tertiary);
|
||||
border-color: var(--tertiary);
|
||||
}
|
||||
|
||||
.btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active, .show > .btn-purple.dropdown-toggle {
|
||||
@@ -151,12 +198,12 @@ main {
|
||||
}
|
||||
|
||||
.form-control.form-control-secondary {
|
||||
color: #fff;
|
||||
background-color: #2d3348;
|
||||
border: 1px solid #2d3348;
|
||||
color: var(--fg);
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--secondary);
|
||||
}
|
||||
.form-control.form-control-secondary:focus {
|
||||
color: #fff;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.h2-match-table {
|
||||
@@ -210,20 +257,20 @@ main {
|
||||
}
|
||||
|
||||
.symbol {
|
||||
color: #ffffff66;
|
||||
color: var(--transparent-fg);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
span {
|
||||
color: #fff !important;
|
||||
color: var(--fg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.block-size, .blocks-container {
|
||||
.symbol {
|
||||
font-size: 16px;
|
||||
color: #fff !important;
|
||||
color: var(--fg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -233,17 +280,17 @@ main {
|
||||
}
|
||||
|
||||
.title-block {
|
||||
color: #FFF;
|
||||
color: var(--fg);
|
||||
padding-top: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-top: 3px solid #FFF;
|
||||
border-top: 3px solid var(--fg);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.title-address, .title-asset {
|
||||
color: #FFF;
|
||||
color: var(--fg);
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -282,11 +329,11 @@ main {
|
||||
}
|
||||
|
||||
.close {
|
||||
color: #fff;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
color: #fff;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.white-color {
|
||||
@@ -294,19 +341,19 @@ main {
|
||||
}
|
||||
|
||||
.green-color {
|
||||
color: #3bcc49;
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.red-color {
|
||||
color: #dc3545;
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.yellow-color {
|
||||
color: #ffd800;
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
.table-striped tbody tr:nth-of-type(odd) {
|
||||
background-color: #181b2d;
|
||||
background-color: var(--stat-box-bg);
|
||||
}
|
||||
|
||||
.bordertop {
|
||||
@@ -334,7 +381,7 @@ html:lang(ru) .card-title {
|
||||
|
||||
.tx-wrapper-tooltip-chart,
|
||||
.fees-wrapper-tooltip-chart {
|
||||
background: rgba(#11131f, 0.95);
|
||||
background: rgba($active-bg, 0.95);
|
||||
border-radius: 4px;
|
||||
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
|
||||
color: #b1b1b1;
|
||||
@@ -363,7 +410,7 @@ html:lang(ru) .card-title {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 2px;
|
||||
color: #fff;
|
||||
color: var(--fg);
|
||||
.total-value {
|
||||
float: right;
|
||||
}
|
||||
@@ -422,7 +469,7 @@ html:lang(ru) .card-title {
|
||||
.total-label {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
color: var(--fg);
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
span {
|
||||
@@ -518,8 +565,8 @@ html:lang(ru) .card-title {
|
||||
|
||||
.fees-wrapper-tooltip-chart-advanced,
|
||||
.tx-wrapper-tooltip-chart-advanced {
|
||||
background: rgba(#1d1f31, 0.98);
|
||||
width: 300px;
|
||||
background: rgba($bg, 0.98);
|
||||
|
||||
thead {
|
||||
th {
|
||||
@@ -673,27 +720,27 @@ h1, h2, h3 {
|
||||
}
|
||||
|
||||
.progress-mempool {
|
||||
background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #105fb0 0%, #9339f4 100%);
|
||||
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, var(--mainnet-alt) 100%);
|
||||
}
|
||||
|
||||
.progress-mempool.testnet {
|
||||
background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #1d486f 0%, #183550 100%);
|
||||
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, #2d3348, #2d3348 0%, #6f1d5d 0%, #471850 100%);
|
||||
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, #2d3348, #2d3348 0%, #116761 0%, #183550 100%);
|
||||
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--liquid) 0%, var(--testnet-alt) 100%);
|
||||
}
|
||||
|
||||
.progress-dark {
|
||||
background-color: #181b2d;
|
||||
background-color: var(--stat-box-bg);
|
||||
}
|
||||
|
||||
.progress-darklight {
|
||||
background-color: #24273e;
|
||||
background-color: var(--box-bg);
|
||||
}
|
||||
|
||||
.progress-light {
|
||||
@@ -701,12 +748,12 @@ h1, h2, h3 {
|
||||
}
|
||||
|
||||
.progress.progress-health {
|
||||
background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #105fb0 0%, #1a9436 100%);
|
||||
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, $success 100%);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.progress-bar.progress-bar-health {
|
||||
background: #2d3348;
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
.mt-2-5, .my-2-5 {
|
||||
@@ -714,9 +761,9 @@ h1, h2, h3 {
|
||||
}
|
||||
|
||||
.alert-mempool {
|
||||
color: #ffffff;
|
||||
background-color: #653b9c;
|
||||
border-color: #3a1c61;
|
||||
color: var(--fg);
|
||||
background-color: var(--tertiary);
|
||||
border-color: var(--alert-bg);
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
@@ -1082,7 +1129,7 @@ th {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 1rem 2rem;
|
||||
color: #fff;
|
||||
color: var(--fg);
|
||||
font-weight: bold;
|
||||
&:focus, &:hover, &:active {
|
||||
text-decoration: none;
|
||||
@@ -1096,8 +1143,8 @@ th {
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
background-color: #2d3348;
|
||||
color: #1bd8f4;
|
||||
background-color: var(--secondary);
|
||||
color: var(--info);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1115,7 +1162,7 @@ th {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
background: #1d1f31;
|
||||
background: var(--bg);
|
||||
margin: 0;
|
||||
@media (min-width: 550px) {
|
||||
width: auto;
|
||||
@@ -1141,21 +1188,21 @@ th {
|
||||
// Blinking block
|
||||
@keyframes shadowyBackground {
|
||||
0% {
|
||||
box-shadow: -10px -15px 75px rgba(#eba814, 1);
|
||||
box-shadow: -10px -15px 75px rgba($taproot, 1);
|
||||
}
|
||||
50% {
|
||||
box-shadow: -10px -15px 75px rgba(#eba814, .3);
|
||||
box-shadow: -10px -15px 75px rgba($taproot, .3);
|
||||
}
|
||||
100% {
|
||||
box-shadow: -10px -15px 75px rgba(#eba814, 1);
|
||||
box-shadow: -10px -15px 75px rgba($taproot, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.blink-bg {
|
||||
color: #fff;
|
||||
background: repeating-linear-gradient(#9d7c05, #9d7c05 0.163525%, #d5a90a 100%) !important;
|
||||
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(#eba814, 1);
|
||||
box-shadow: -10px -15px 75px rgba($taproot, 1);
|
||||
transition: 100ms all ease-in;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user