mempool/frontend/src/styles.scss
2022-05-18 08:43:24 +04:00

1011 lines
16 KiB
SCSS

/* Bootstrap */
$body-bg: #1d1f31;
$body-color: #fff;
$gray-800: #1d1f31;
$gray-700: #fff;
$nav-tabs-link-active-bg: #11131f;
$primary: #105fb0;
$secondary: #2d3348;
$success: #1a9436;
$info: #1bd8f4;
$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;
$custom-select-indicator-color: #FFF;
.input-group-text {
background-color: #1c2031 !important;
border: 1px solid #20263e !important;
}
$link-color: #1bd8f4;
$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-link-hover-color: #fff;
$dropdown-link-hover-bg: #11131f;
$dropdown-link-active-color: #fff;
$dropdown-link-active-bg: #11131f;
@import "~bootstrap/scss/bootstrap";
@import '~tlite/tlite.css';
html, body {
height: 100%;
}
body {
background-color: #11131f;
min-width: 375px;
padding-bottom: 60px;
}
.container {
position: relative;
padding-bottom: 60px;
}
.container-xl {
padding-bottom: 60px;
}
.full-height {
@media (max-width: 767.98px) {
min-height: 100vh;
}
}
:focus {
outline: none !important;
}
.box {
min-height: 1px;
padding: 1.25rem;
position: relative;
min-width: 0;
word-wrap: break-word;
background-color: #24273e;
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);
}
@media (max-width: 767.98px) {
.box {
padding: 0.75rem;
}
}
.navbar-nav.liquid > .active {
background-color: #116761 !important;
}
.navbar-nav.testnet > .active {
background-color: #1d486f !important;
}
.navbar-nav.signet > .active {
background-color: #6f1d5d !important;
}
.navbar-nav.liquidtestnet > .active {
background-color: #494a4a !important;
}
.form-control {
color: #495057;
}
.form-control:focus {
color: #000;
}
.form-control.form-control-secondary {
color: #fff;
background-color: #2d3348;
border: 1px solid #2d3348;
}
.form-control.form-control-secondary:focus {
color: #fff;
}
.h2-match-table {
padding-left: .65rem;
}
.skeleton-loader {
box-sizing: border-box;
/**
* `overflow` and `position` are required steps to make sure
* the component respects the specified dimensions
* given via `theme` object @Input attribute
*/
overflow: hidden;
position: relative;
animation: progress 2s ease-in-out infinite;
background: #2e324e no-repeat;
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0),
#5d6182,
rgba(255, 255, 255, 0)
);
background-size: 200px 100%;
border-radius: 4px;
width: 100%;
height: 14px;
display: inline-block;
&:after,
&:before {
box-sizing: border-box;
}
&.circle {
width: 40px;
height: 40px;
margin: 5px;
border-radius: 50%;
}
}
@keyframes progress {
0% {
background-position: -200px 0;
}
100% {
background-position: calc(200px + 100%) 0;
}
}
.symbol {
color: #ffffff66;
font-size: 12px;
}
.progress-text {
span {
color: #fff !important;
}
}
.block-size, .blocks-container {
span {
font-size: 16px;
color: #fff !important;
}
}
.break-all {
white-space: normal;
word-break: break-all;
}
.title-block {
color: #FFF;
padding-top: 20px;
padding-bottom: 10px;
border-top: 3px solid #FFF;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.title-address, .title-asset {
color: #FFF;
padding-bottom: 10px;
display: flex;
flex-direction: column;
margin-bottom: 7px;
@media (min-width: 576px) {
flex-direction: row;
margin-bottom: 0px;
}
h1 {
line-height: 1;
}
}
.smaller-text {
font-size: 14px;
}
.nowrap {
white-space: nowrap;
}
.table-xs th, .table-xs td {
padding: 0.1rem;
}
.table {
margin-bottom: 0;
font-size: 0.9rem;
@media (min-width: 576px) {
font-size: 1rem;
}
}
.close {
color: #fff;
}
.close:hover {
color: #fff;
}
.green-color {
color: #3bcc49;
}
.red-color {
color: #dc3545;
}
.yellow-color {
color: #ffd800;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: #181b2d;
}
.bordertop {
border-top: 1px solid #4c4c4c;
}
.smaller-text {
font-size: 14px;
}
html:lang(ru) .card-title {
font-size: 0.9rem;
}
/* MEMPOOL CHARTS - start */
.mempool-wrapper-tooltip-chart {
height: 250px;
}
.echarts {
height: 100%;
min-height: 180px;
}
.tx-wrapper-tooltip-chart,
.fees-wrapper-tooltip-chart {
background: rgba(#11131f, 0.95);
border-radius: 4px;
box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
color: #b1b1b1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px 15px;
text-align: left;
width: 200px;
thead {
th {
font-size: 9px;
color: #b1b1b1;
text-align: right;
&:first-child {
text-align: left;
left: -1px;
position: relative;
}
&:nth-child(4) {
display: none;
}
}
}
.title {
font-size: 12px;
font-weight: 700;
margin-bottom: 2px;
color: #fff;
.total-value {
float: right;
}
}
.active {
color: yellow !important;
.value,
.total-partial {
color: yellow !important;
.symbol {
color: yellow !important;
}
}
}
.item {
line-height: 0.8;
.indicator-container {
.indicator {
display: inline-block;
margin-right: 5px;
border-radius: 2px;
margin-top: 5px;
width: 9px;
height: 9px;
}
}
.value {
text-align: right;
.symbol {
color: #7e7e7e;
font-size: 9px !important;
}
}
.symbol {
font-size: 9px;
}
.total-partial {
font-size: 10px;
width: 58px;
text-align: right;
}
.total-percentage-bar {
padding-left: 8px;
}
.total-progress-percentage {
width: 45px;
height: 5px;
text-align: right;
display: none;
}
.total-progress-sum {
width: 58px;
text-align: right;
}
}
.total-label {
width: 100%;
text-align: left;
color: #fff;
margin-top: 5px;
font-size: 14px;
span {
float: right;
}
.symbol {
margin-left: 3px;
font-size: 9px;
position: relative;
top: 2px;
}
}
thead {
th {
font-size: 9px;
color: #b1b1b1;
text-align: right;
&:first-child {
text-align: left;
left: -1px;
position: relative;
}
&:nth-child(4) {
display: none;
}
&:nth-child(5) {
display: none;
}
}
}
.total-percentage-bar {
margin: auto;
width: 35px;
position: relative;
span {
display: block;
background: #282d47;
height: 5px;
border-radius: 2px;
}
}
.total-parcial-active {
text-align: right;
margin: 5px auto 5px;
padding-left: 0px;
span {
font-size: 10px;
}
.symbol {
font-size: 9px;
}
.total-percentage-bar {
width: 100%;
span {
transition: 1000 all ease-in-out;
}
}
.progress-percentage {
float: left;
}
}
}
.tx-wrapper-tooltip-chart {
width: 115px;
.item {
display: flex;
}
.value {
margin-top: 5px;
}
.indicator-container {
border-radius: 2px;
}
}
.fee-distribution-chart {
height: 250px;
}
.fees-wrapper-tooltip-chart {
.item {
font-size: 9px;
line-height: 0.8;
margin: 0px;
}
.indicator {
margin-right: 5px !important;
border-radius: 1px !important;
margin-top: 0px !important;
}
}
.fees-wrapper-tooltip-chart-advanced,
.tx-wrapper-tooltip-chart-advanced {
background: rgba(#1d1f31, 0.98);
width: 275px;
thead {
th {
&:nth-child(4) {
display: table-cell;
}
&:nth-child(5) {
display: table-cell;
}
}
}
.title {
font-size: 15px;
margin-bottom: 5px;
}
.item {
line-height: 1.25;
font-size: 11px;
.value {
width: 60px;
.symbol {
font-size: 9px !important;
}
}
.total-partial {
font-size: 10px;
width: 58px;
text-align: right;
}
.total-progress-percentage {
width: 65px;
height: 4px;
padding: 0px 5px;
display: table-cell !important;
border-radius: 4px;
}
.total-progress-sum {
width: 65px;
height: 4px;
padding: 0px 5px;
border-radius: 4px;
}
.total-progress-percentage-bar,
.total-progress-sum-bar {
width: 35px;
height: 4px;
div {
width: 100%;
border-radius: 4px;
display: block;
background: #29324c94;
}
span {
height: 4px;
border-radius: 4px;
display: block;
}
}
}
.total-label {
margin-top: 5px;
font-size: 14px;
span {
float: right;
}
}
.total-parcial-active {
text-align: right;
margin: 5px auto 5px;
span {
font-size: 10px;
}
.total-percentage-bar {
width: 100%;
left: 0;
span {
transition: 1000 all ease-in-out;
}
}
}
.total-percentage-bar-background {
background-color: #282d47;
}
}
.tx-wrapper-tooltip-chart-advanced {
width: 140px;
.indicator-container {
.indicator {
margin-right: 5px;
border-radius: 0px;
margin-top: 5px;
width: 9px;
height: 9px;
}
}
}
/* MEMPOOL CHARTS - end */
.grow {
flex-grow: 1;
}
hr {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
tr {
white-space: nowrap;
}
h1, h2, h3 {
margin-bottom: 1rem;
}
@media (max-width: 767.98px) {
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.50rem;
}
}
@media (min-width: 992px) {
.lg-inline {
display: inline-block;
}
}
@media (min-width: 768px) {
.d-md-inline {
display: inline-block;
}
}
.header-bg {
font-size: 14px;
}
.progress {
position: relative;
}
.progress-text {
position: absolute;
top: 8.5px;
width: 100%;
text-align: center;
}
.progress-mempool {
background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #105fb0 0%, #9339f4 100%);
}
.progress-mempool.testnet {
background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #1d486f 0%, #183550 100%);
}
.progress-mempool.signet {
background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #6f1d5d 0%, #471850 100%);
}
.progress-mempool.liquid {
background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #116761 0%, #183550 100%);
}
.progress-dark {
background-color: #181b2d;
}
.progress-darklight {
background-color: #24273e;
}
.progress-light {
background-color: #2e324e;
}
.mt-2-5, .my-2-5 {
margin-top: 0.75rem !important;
}
.alert-mempool {
color: #ffffff;
background-color: #653b9c;
border-color: #3a1c61;
width: 100%;
display: inline-flex;
flex-direction: column;
justify-content: space-between;
@media (min-width: 676px){
flex-direction: row;
}
}
.flex {
display: flex;
}
th {
white-space: nowrap;
}
// 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 }
.rtl-layout {
.navbar-brand {
margin-right: 0px;
text-align: right;
}
.nav-pills {
@extend .nav-pills;
display: inline-block;
}
.description {
direction: rtl;
}
.dropdown {
margin-right: 1rem;
margin-left: 0;
@media (min-width: 576px) {
margin-left: 1rem;
}
@media (min-width: 768px) {
margin-left: 0;
}
}
.dropdown-menu-right {
left: 0px;
right: auto;
}
.fa-circle-right {
@extend .fa-circle-right;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.btn.ml-2 {
margin-right: 0.5rem !important;
}
.pool-name {
@extend .pool-name;
padding-right: 10px;
}
.endpoint-container {
@extend .endpoint-container;
.section-header {
@extend .section-header;
text-align: left;
}
}
.table td {
text-align: right;
.fiat {
@extend .fiat;
margin-left: 0px !important;
margin-right: 15px;
}
}
.table th {
text-align: right;
}
.title-block {
text-align: right;
}
.mr-3 {
@extend .ml-3;
margin-right: 0 !important;
}
.mr-1 {
@extend .ml-1;
}
.float-left {
float: right !important;
}
.float-right {
float: left !important;
}
.text-left {
text-align: right !important;
}
.text-right {
text-align: left !important;
}
.bitcoin-block {
direction: rtl;
}
.next-previous-blocks {
@extend .next-previous-blocks;
direction: ltr;
}
.tx-link {
@extend .tx-link;
margin-left: 0px;
margin-right: 10px;
}
.pagination-container {
@extend .pagination-container;
ul {
@extend ul;
padding-left: 0px;
padding-right: 5px;
}
}
.search-box-container {
@extend .search-box-container;
margin-right: 0 !important;
margin-left: 0.5rem !important;
}
.code {
@extend .code;
text-align: left !important;
direction: ltr;
.subtitle {
@extend .subtitle;
direction: rtl;
text-align: right !important;
}
}
.container-graph {
@extend .container-graph;
.formRadioGroup {
@extend .formRadioGroup;
direction: ltr;
}
}
.full-container {
@extend .full-container;
.formRadioGroup {
@extend .formRadioGroup;
direction: ltr;
}
}
.mempool-graph {
@extend .mempool-graph;
direction: ltr;
}
.title-block {
.title {
float: right;
}
}
.container-buttons {
float: left !important;
width: auto !important;
}
.tx-link {
margin-right: 0px;
@media (min-width: 768px) {
margin-right: 10px;
}
}
}
.scriptmessage {
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
vertical-align: middle;
max-width: 50px;
width: auto;
text-align: left;
@media (min-width: 376px) {
max-width: 90px;
}
@media (min-width: 476px) {
max-width: 180px;
}
@media (min-width: 576px) {
max-width: 260px;
}
@media (min-width: 768px) {
max-width: 400px;
}
@media (min-width: 850px) {
max-width: 522px;
}
@media (min-width: 992px) {
max-width: 190px;
}
@media (min-width: 1200px) {
max-width: 250px;
}
}
.scriptmessage.longer {
max-width: 230px;
@media (min-width: 376px) {
max-width: 290px;
}
@media (min-width: 476px) {
max-width: 380px;
}
@media (min-width: 576px) {
max-width: 470px;
}
@media (min-width: 768px) {
max-width: 850px;
}
@media (min-width: 992px) {
max-width: 410px;
}
@media (min-width: 1200px) {
max-width: 480px;
}
}
.tab-pane {
.card {
background-color: transparent;
padding: 0;
button {
text-align: left;
display: block;
width: 100%;
padding: 1rem 2rem;
color: #fff;
font-weight: bold;
&:focus, &:hover, &:active {
text-decoration: none;
outline: none;
box-shadow: none;
}
}
.card-header {
padding: 0;
}
.collapsed {
background-color: #2d3348;
color: #1bd8f4;
}
}
.subtitle {
font-weight: bold;
margin-bottom: 3px;
button {
padding: 0px !important;
}
}
}
.pagination-container {
display: inline-block;
width: 100%;
justify-content: space-between;
background: #1d1f31;
margin: 0;
@media (min-width: 550px) {
width: auto;
}
ul {
justify-content: space-evenly !important;
margin: 0;
@media (min-width: 400px) {
width: auto;
padding-left: 5px;
}
}
}
.fee-estimation-wrapper {
.tooltip.show {
width: 220px;
}
}
// Blinking block
@keyframes shadowyBackground {
0% {
box-shadow: -10px -15px 75px rgba(#eba814, 1);
}
50% {
box-shadow: -10px -15px 75px rgba(#eba814, .3);
}
100% {
box-shadow: -10px -15px 75px rgba(#eba814, 1);
}
}
.blink-bg {
color: #fff;
background: repeating-linear-gradient(#9d7c05, #9d7c05 0.163525%, #d5a90a 100%) !important;
animation: shadowyBackground 1s infinite;
box-shadow: -10px -15px 75px rgba(#eba814, 1);
transition: 100ms all ease-in;
}