machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More css included in color themes

Browse Source
This commit is contained in:
natsoni
2024-04-23 18:59:26 +02:00
committed by Mononaut
parent 6a767ce5c4
commit 4a76cb083a
38 changed files with 124 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
frontend/src/styles.scss
View File

@@ -64,7 +64,6 @@ $dropdown-link-active-bg: $active-bg;
--active-bg: #{$active-bg};
--hover-bg: #{$hover-bg};
--fg: #{$fg};
--color-fg: #ffffff;
--title-fg: #{$title-fg};
--primary: #{$primary};
@@ -72,9 +71,11 @@ $dropdown-link-active-bg: $active-bg;
--tertiary: #{$tertiary};
--success: #{$success};
--info: #{$info};
--link-color: #{$info};
--link-color: #{$link-color};
--link-hover-color: #{$link-hover-color};
--icon: #f1f1f1;
--skeleton-bg: #2e324e;
--skeleton-bg-light: #5d6182;
--box-bg: #24273e;
--stat-box-bg: #181b2d;
@@ -83,6 +84,7 @@ $dropdown-link-active-bg: $active-bg;
--transparent-fg: #ffffff66;
--fade-out-box-bg-start: rgba(36, 39, 62, 0);
--fade-out-box-bg-end: rgba(36, 39, 62, 1);
--opacity: 0.57;
--testnet: #1d486f;
--signet: #6f1d5d;
@@ -100,7 +102,7 @@ $dropdown-link-active-bg: $active-bg;
--green: #3bcc49;
--red: #dc3545;
--yellow: #ffd800;
--yellow: #fff000;
--grey: #6c757d;
--tooltip-grey: #b1b1b1;
--orange: #b86d12;
@@ -173,13 +175,13 @@ main {
}
.form-control {
color: #fff;
color: var(--fg);
background-color: var(--secondary);
border: 1px solid rgba(17, 19, 31, 0.2);
}
.form-control:focus {
color: #fff;
color: var(--fg);
background-color: var(--secondary);
}
@@ -208,7 +210,7 @@ main {
}
.form-control.form-control-secondary {
color: var(--fg);
color: #fff;
background-color: var(--secondary);
border: 1px solid var(--secondary);
}
@@ -231,11 +233,11 @@ main {
position: relative;
animation: progress 2s ease-in-out infinite;
background: #2e324e no-repeat;
background: var(--skeleton-bg) no-repeat;
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0),
#5d6182,
var(--skeleton-bg-light),
rgba(255, 255, 255, 0)
);
background-size: 200px 100%;
@@ -273,14 +275,14 @@ main {
.progress-text {
span {
color: var(--fg) !important;
color: #fff !important;
}
}
.block-size, .blocks-container {
.symbol {
font-size: 16px;
color: var(--fg) !important;
color: #fff !important;
}
}
@@ -420,18 +422,18 @@ html:lang(ru) .card-title {
font-size: 12px;
font-weight: 700;
margin-bottom: 2px;
color: var(--fg);
color: #fff;
.total-value {
float: right;
}
}
.active {
color: yellow !important;
color: var(--yellow) !important;
.value,
.total-partial {
color: yellow !important;
color: var(--yellow) !important;
.symbol {
color: yellow !important;
color: var(--yellow) !important;
}
}
}
@@ -479,7 +481,7 @@ html:lang(ru) .card-title {
.total-label {
width: 100%;
text-align: left;
color: var(--fg);
color: #fff;
margin-top: 5px;
font-size: 14px;
span {
@@ -730,19 +732,19 @@ h1, h2, h3 {
}
.progress-mempool {
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, var(--mainnet-alt) 100%);
background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--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%);
background: repeating-linear-gradient(to right, var(--secondary), var(--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%);
background: repeating-linear-gradient(to right, var(--secondary), var(--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%);
background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--liquid) 0%, var(--testnet-alt) 100%);
}
.progress-dark {
@@ -754,11 +756,11 @@ h1, h2, h3 {
}
.progress-light {
background-color: #2e324e;
background-color: var(--skeleton-bg);
}
.progress.progress-health {
background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, $success 100%);
background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--primary) 0%, $success 100%);
justify-content: flex-end;
}
@@ -771,7 +773,7 @@ h1, h2, h3 {
}
.alert-mempool {
color: var(--fg);
color: #fff;
background-color: var(--tertiary);
border-color: var(--alert-bg);
width: 100%;
@@ -1139,7 +1141,7 @@ th {
display: block;
width: 100%;
padding: 1rem 2rem;
color: var(--fg);
color: #fff;
font-weight: bold;
&:focus, &:hover, &:active {
text-decoration: none;
@@ -1223,7 +1225,7 @@ th {
}
.blink-bg {
color: var(--fg);
color: #fff;
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);
@@ -1246,7 +1248,7 @@ app-master-page, app-liquid-master-page {
display: flex;
flex-direction: column;
min-height: 100vh;
padding-bottom: 60px;
padding-bottom: 56px;
@media (min-width: 992px) {
padding-bottom: 0px;
}
@@ -1270,8 +1272,10 @@ app-global-footer {
.dropdown-menu {
background-color: var(--bg);
color: var(--fg);
.dropdown-item:hover, .dropdown-item:focus {
background-color: var(--active-bg);
color: var(--fg);
}
}
@@ -1285,4 +1289,13 @@ a {
&:hover {
color: var(--link-hover-color);
}
}
}
.badge-primary {
color: var(--fg);
background-color: var(--primary);
}
.badge-info {
background-color: var(--info);
}