forked from lthn/blockchain
466 lines
9.4 KiB
Text
466 lines
9.4 KiB
Text
@import "../variables";
|
|
@import "mixins";
|
|
|
|
.widgets {
|
|
.flex-container;
|
|
flex-wrap: wrap;
|
|
margin: 3.5rem -3.5rem 3.5rem;
|
|
|
|
.widget-wrapper {
|
|
//padding: 0 3.5rem 7rem;
|
|
//-webkit-transform: translateZ(0);
|
|
//transform: translateZ(0);
|
|
padding: 3.5rem 3.5rem;
|
|
transition: 0.1s;
|
|
|
|
.widget-block {
|
|
background: fade(white, 60%);
|
|
border: 1px solid @program-panel-border-color;
|
|
border-radius: 3rem;
|
|
|
|
.widget-header {
|
|
.flex-container;
|
|
.flex-container-alignment(center, space-between);
|
|
height: 13rem;
|
|
padding: 0 5rem;
|
|
|
|
h3 {
|
|
color: @program-exuding-color;
|
|
font-size: 5.75rem;
|
|
font-weight: 300;
|
|
margin: 0;
|
|
|
|
&.widget-select-wrapper {
|
|
.flex-container;
|
|
line-height: 6rem;
|
|
|
|
.widget-select {
|
|
.flex-container;
|
|
margin-left: 5rem;
|
|
|
|
.dropdown-toggle {
|
|
border-bottom: none;
|
|
color: @program-hover-color;
|
|
font-size: 5rem;
|
|
line-height: 6rem;
|
|
margin-bottom: -1rem;
|
|
padding: 0 3rem 0 0;
|
|
|
|
.caret {
|
|
color: @program-input-placeholder-hover-color;
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
min-width: 44rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.widget-menu {
|
|
|
|
.widget-menu-btn {
|
|
.flex-container;
|
|
background: transparent;
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
.base-icon {
|
|
.icon-sizing(4rem, 4rem, -4rem, -5rem);
|
|
color: @program-main-color;
|
|
}
|
|
}
|
|
|
|
.widget-menu-list {
|
|
.menu-list(6.5rem, inherit, -2rem, 46rem);
|
|
}
|
|
}
|
|
}
|
|
|
|
.widget-body-wrapper {
|
|
-webkit-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
border-bottom-left-radius: 3rem;
|
|
border-bottom-right-radius: 3rem;
|
|
overflow: hidden;
|
|
|
|
.widget-body {
|
|
border-bottom-left-radius: 3rem;
|
|
border-bottom-right-radius: 3rem;
|
|
height: 53rem;
|
|
overflow-y: auto;
|
|
|
|
table {
|
|
width: 100%;
|
|
|
|
thead {
|
|
|
|
tr {
|
|
background-color: fade(white, 40%);
|
|
color: @program-exuding-color;
|
|
font-size: 3.5rem;
|
|
height: 9rem;
|
|
|
|
th {
|
|
font-weight: 400;
|
|
padding: 0 1rem;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
|
|
.ordered-cell {
|
|
.flex-container;
|
|
.flex-container-alignment(center, flex-start);
|
|
|
|
.order-icon {
|
|
.icon-sizing(2rem, 2rem, -5rem, -6rem);
|
|
color: @program-light-color;
|
|
cursor: pointer;
|
|
margin-left: 2rem;
|
|
margin-top: 0.25rem;
|
|
|
|
&.active {
|
|
color: @program-exuding-color;
|
|
}
|
|
|
|
&.rotate-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
padding-left: 5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
|
|
tr {
|
|
color: @program-main-color;
|
|
font-size: 3.25rem;
|
|
height: 9rem;
|
|
|
|
td {
|
|
padding: 0 1rem;
|
|
|
|
.empty-table {
|
|
color: @program-empty-color;
|
|
text-align: center;
|
|
}
|
|
|
|
&:first-child {
|
|
padding-left: 5rem;
|
|
position: relative;
|
|
}
|
|
|
|
}
|
|
|
|
&:nth-child(even) {
|
|
background-color: fade(white, 40%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.widget-loading {
|
|
.flex-container;
|
|
.flex-container-alignment(center, center);
|
|
color: @program-empty-color;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.widget-small {
|
|
width: 50%;
|
|
}
|
|
|
|
&.widget-big {
|
|
width: 100%;
|
|
}
|
|
|
|
&.drag-not-possible {
|
|
|
|
.widget-block {
|
|
box-shadow: 0 0 10px 3px rgb(255, 95, 95);
|
|
background-color: rgba(255, 95, 95, 0.6);
|
|
}
|
|
}
|
|
}
|
|
|
|
.widget-long-item-wrapper {
|
|
max-width: 32rem;
|
|
|
|
.table-long-item {
|
|
|
|
.table-long-item-text {
|
|
font-size: 3.25rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.payments-widget {
|
|
|
|
tr.transaction-blocked {
|
|
background-color: @history-transaction-blocked-border-color !important;
|
|
color: @history-transaction-blocked-text-color !important;
|
|
|
|
.transaction-status-indicator {
|
|
|
|
.status-graph {
|
|
|
|
&.income {
|
|
stroke: @history-transaction-blocked-status-income-color !important;
|
|
}
|
|
|
|
&.outgoing {
|
|
stroke: @history-transaction-blocked-status-outgoing-color !important;
|
|
}
|
|
}
|
|
|
|
.status-inner {
|
|
|
|
.base-icon.income {
|
|
color: @history-transaction-blocked-status-income-color !important;
|
|
}
|
|
|
|
.base-icon.outgoing {
|
|
color: @history-transaction-blocked-status-outgoing-color !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.payments-marker {
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
border-left: 1rem solid @marker-light-green;
|
|
}
|
|
}
|
|
|
|
.transaction-status-indicator {
|
|
|
|
.mined-icon {
|
|
font-size: 11rem;
|
|
|
|
&:before {
|
|
top: -2.5rem;
|
|
left: -3.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.payments-comment-wrapper {
|
|
.flex-container;
|
|
.flex-container-alignment(center, flex-start);
|
|
max-width: 9rem;
|
|
|
|
.base-icon {
|
|
.icon-sizing(5rem, 5rem, -3.5rem, -4.5rem);
|
|
|
|
&:hover {
|
|
color: @program-hover-color;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.contacts-widget {
|
|
|
|
tr {
|
|
|
|
td:last-child {
|
|
width: 20rem;
|
|
}
|
|
|
|
&:hover {
|
|
|
|
.contact-options-btn-wrapper {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
.contact-name {
|
|
.flex-container;
|
|
.flex-container-alignment(center, flex-start);
|
|
font-size: 3.25rem;
|
|
white-space: nowrap;
|
|
|
|
.base-icon {
|
|
.icon-sizing(4rem, 4rem, -4rem, -5rem);
|
|
color: @program-table-icon-color;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
&:hover {
|
|
color: @program-hover-color;
|
|
cursor: pointer;
|
|
|
|
.base-icon {
|
|
color: @program-hover-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.contact-connections {
|
|
max-width: 36rem;
|
|
}
|
|
|
|
.contact-options-btn-wrapper {
|
|
.flex-container;
|
|
.flex-container-alignment(center, space-between);
|
|
visibility: hidden;
|
|
|
|
.contact-options-btn {
|
|
.flex-container;
|
|
background: transparent;
|
|
border: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: @program-main-color;
|
|
|
|
.send-money-icon {
|
|
.icon-sizing(5rem, 5rem, -3.5rem, -4.5rem);
|
|
}
|
|
|
|
.payments-icon {
|
|
.icon-sizing(5rem, 5rem, -3.5rem, -4.5rem);
|
|
}
|
|
|
|
.delete-icon {
|
|
.icon-sizing(5rem, 5rem, -3.5rem, -4.5rem);
|
|
}
|
|
|
|
&:disabled {
|
|
color: @program-light-color;
|
|
}
|
|
|
|
&:hover {
|
|
|
|
&:not(:disabled) {
|
|
color: @program-hover-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.network-info-widget {
|
|
|
|
.network-text-wrapper {
|
|
display: inline-block;
|
|
|
|
.base-icon {
|
|
.icon-sizing(2rem, 2rem, -5rem, -6rem);
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
&:hover {
|
|
color: @program-hover-color;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mining-widget {
|
|
border-top: none !important;
|
|
height: 58rem !important;
|
|
|
|
.mining-widget-empty {
|
|
.flex-container;
|
|
.flex-container-alignment(center, center);
|
|
color: @program-empty-color;
|
|
font-size: 3.75rem;
|
|
height: 100%;
|
|
}
|
|
|
|
.mining-widget-chart {
|
|
|
|
.chart-range-wrapper {
|
|
.flex-container;
|
|
.flex-container-alignment(center, space-between);
|
|
padding: 2.5rem 7rem;
|
|
|
|
.chart-range-group {
|
|
.flex-container;
|
|
.flex-container-alignment(center, center);
|
|
color: @program-dark-color;
|
|
font-size: 3rem;
|
|
|
|
.chart-range-selector {
|
|
.flex-container;
|
|
margin: 0 2.5rem;
|
|
padding: 0;
|
|
|
|
li {
|
|
border: 1px solid @mining-range-border-color;
|
|
color: @mining-range-text-color;
|
|
line-height: 5.5rem;
|
|
height: 6rem;
|
|
width: 14rem;
|
|
text-align: center;
|
|
list-style-type: none;
|
|
|
|
&:first-child {
|
|
border-radius: 3rem 0 0 3rem;
|
|
width: 14.5rem;
|
|
}
|
|
|
|
&:not(:first-child) {
|
|
border-left: none;
|
|
}
|
|
|
|
&:last-child {
|
|
border-radius: 0 3rem 3rem 0;
|
|
width: 14.5rem;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
background: white;
|
|
color: @program-dark-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chart-graph {
|
|
height: 47rem;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
//TODO active line when tooltip clicked
|
|
/*.active-widget-tr {
|
|
background: #dce4d3 !important;
|
|
color: #062f1b !important;
|
|
|
|
.comment {
|
|
.icon {
|
|
color: #062f1b !important;
|
|
}
|
|
}
|
|
}*/
|
|
|
|
.red-row{
|
|
background-color: #e95145 !important;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
|