1
0
Fork 0
forked from lthn/blockchain
blockchain/src/gui/qt-daemon/html/assets/scss/base/_base.scss

998 lines
18 KiB
SCSS

.app-content {
.preloader {
.loading-bar {
@include themify($themes) {
background-color: themed(progressBarFullBackgroundColor);
}
}
}
}
button {
border: none;
font-family: OpenSans, sans-serif;
font-size: 1.5rem;
font-weight: 600;
outline: none;
padding: 0 1rem;
height: 4.2rem;
&:disabled:not(.transparent-button) {
@include themify($themes) {
background-color: themed(disabledButtonBackgroundColor);
color: themed(alternativeTextColor);
}
&:hover {
@include themify($themes) {
background-color: themed(disabledButtonHoverColor);
}
}
&:focus {
@include themify($themes) {
background-color: themed(disabledButtonFocusColor);
}
}
}
&.blue-button:not(:disabled) {
@include themify($themes) {
background-color: themed(blueButtonBackgroundColor);
color: themed(alternativeTextColor);
}
&:hover {
@include themify($themes) {
background-color: themed(blueButtonHoverColor);
}
}
&:focus {
@include themify($themes) {
background-color: themed(blueButtonFocusColor);
}
}
}
&.green-button:not(:disabled) {
@include themify($themes) {
background-color: themed(greenButtonBackgroundColor);
color: themed(alternativeTextColor);
}
&:hover {
@include themify($themes) {
background-color: themed(greenButtonHoverColor);
}
}
&:focus {
@include themify($themes) {
background-color: themed(greenButtonFocusColor);
}
}
}
&.turquoise-button:not(:disabled) {
@include themify($themes) {
background-color: themed(turquoiseButtonBackgroundColor);
color: themed(alternativeTextColor);
}
&:hover {
@include themify($themes) {
background-color: themed(turquoiseButtonHoverColor);
}
}
&:focus {
@include themify($themes) {
background-color: themed(turquoiseButtonFocusColor);
}
}
}
&.transparent-button {
display: flex;
align-items: center;
justify-content: center;
@include themify($themes) {
background-color: transparent;
border: 0.2rem solid themed(transparentButtonBorderColor);
color: themed(mainTextColor);
}
.icon {
@include themify($themes) {
background-color: themed(mainTextColor);
}
margin-right: 1rem;
mask: url(~src/assets/icons/complete-testwallet.svg) no-repeat center;
width: 1.7rem;
height: 1.7rem;
}
}
}
.input-block {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 0.4rem;
.wrap-label {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 2.4rem;
}
label {
font-size: 1.3rem;
line-height: 2.4rem;
@include themify($themes) {
color: themed(optionalTextColor);
}
}
input[type='text'], input[type='password'], select {
border: none;
font-size: 1.4rem;
outline: none;
padding: 0 1rem;
width: 100%;
height: 4.2rem;
@include themify($themes) {
background-color: themed(inputBackgroundColor);
color: themed(mainTextColor);
}
}
&.textarea {
height: auto;
textarea {
font-family: OpenSans, sans-serif;
border: none;
font-size: 1.4rem;
outline: none;
padding: 1rem;
width: 100%;
min-width: 100%;
height: 100%;
min-height: 7.5rem;
max-height: 7.5rem;
overflow: auto;
resize: none;
@include themify($themes) {
background-color: themed(inputBackgroundColor);
color: themed(mainTextColor);
}
}
}
.error-block {
font-size: 1rem;
line-height: 1.4rem;
align-self: flex-end;
text-align: right;
@include themify($themes) {
color: themed(redTextColor);
}
}
}
.error-text {
@include themify($themes) {
color: themed(redTextColor);
}
}
input[type='radio'].style-radio {
& + label {
display: flex;
align-items: center;
cursor: pointer;
font-weight: 400;
padding-left: 2.4rem;
@include themify($themes) {
color: themed(optionalTextColor);
}
@include unSelect;
}
&:not(checked) {
position: absolute;
opacity: 0;
& + label {
position: relative;
}
& + label:before {
content: '';
position: absolute;
top: 0.7rem;
left: 0;
background: transparent;
border-radius: 50%;
width: 1.4rem;
height: 1.4rem;
@include themify($themes) {
border: 0.1rem solid themed(blueTextColor);
}
}
& + label:after {
content: '';
position: absolute;
top: 1rem;
left: 0.3rem;
border-radius: 50%;
opacity: 0;
width: 0.8rem;
height: 0.8rem;
@include themify($themes) {
background-color: themed(blueTextColor);
}
}
}
&:checked {
& + label:after {
opacity: 1;
}
}
}
input[type='checkbox'].style-checkbox {
& + label {
display: flex;
align-items: center;
cursor: pointer;
font-weight: 400;
padding-left: 3.6rem;
@include themify($themes) {
color: themed(optionalTextColor);
}
@include unSelect;
}
&:not(checked) {
position: absolute;
top: 50%;
left: 1.6rem;
transform: translateY(-50%);
visibility: hidden;
& + label {
position: relative;
}
& + label:before {
content: '';
position: absolute;
top: 50%;
left: 1.6rem;
transform: translateY(-50%);
background: transparent;
width: 1.4rem;
height: 1.4rem;
@include themify($themes) {
border: 0.1rem solid themed(blueTextColor);
}
}
}
&:checked {
& + label:before {
background: url(~src/assets/icons/complete-testwallet.svg);
@include themify($themes) {
background-color: themed(blueTextColor);
}
}
}
}
.switch {
@include themify($themes) {
background-color: themed(switchBackgroundColor);
}
.circle {
&.on {
@include themify($themes) {
background-color: themed(blueTextColor);
}
}
&.off {
@include themify($themes) {
background-color: themed(optionalTextColor);
}
}
}
}
.table-tooltip {
padding: 1rem 2rem;
@include themify($themes) {
background: themed(tooltipBackgroundColor);
box-shadow: themed(tooltipShadow);
color: themed(mainTextColor);
}
.tooltip-inner {
font-size: 1.3rem;
line-height: 1.8rem;
white-space: pre-wrap;
}
&.ng-tooltip-top {
margin-top: -1rem;
&:after {
content: "";
position: absolute;
bottom: -1rem;
left: calc(50% - 0.5rem);
border-width: 0.5rem;
border-style: solid;
@include themify($themes) {
border-color: themed(tooltipBackgroundColor) transparent transparent transparent;
}
}
}
&.ng-tooltip-top-left {
margin-top: -1rem;
&:after {
content: "";
position: absolute;
bottom: -1rem;
left: 0.7rem;
border-width: 0.5rem;
border-style: solid;
@include themify($themes) {
border-color: themed(tooltipBackgroundColor) transparent transparent themed(tooltipBackgroundColor);
}
}
}
&.ng-tooltip-top-right {
margin-top: -1rem;
&:after {
content: "";
position: absolute;
bottom: -1rem;
right: 0.7rem;
border-width: 0.5rem;
border-style: solid;
@include themify($themes) {
border-color: themed(tooltipBackgroundColor) themed(tooltipBackgroundColor) transparent transparent;
}
}
}
&.ng-tooltip-bottom {
margin-top: 1rem;
&:before {
content: "";
position: absolute;
top: -1rem;
left: calc(50% - 0.5rem);
border-width: 0.5rem;
border-style: solid;
@include themify($themes) {
border-color: transparent transparent themed(tooltipBackgroundColor) transparent;
}
}
}
&.ng-tooltip-bottom-left {
margin-top: 1rem;
&:before {
content: "";
position: absolute;
top: -1rem;
left: 0.7rem;
border-width: 0.5rem;
border-style: solid;
@include themify($themes) {
border-color: transparent transparent themed(tooltipBackgroundColor) themed(tooltipBackgroundColor);
}
}
}
&.ng-tooltip-bottom-right {
margin-top: 1rem;
&:before {
content: "";
position: absolute;
top: -1rem;
right: 0.7rem;
border-width: 0.5rem;
border-style: solid;
@include themify($themes) {
border-color: transparent themed(tooltipBackgroundColor) themed(tooltipBackgroundColor) transparent;
}
}
}
&.ng-tooltip-left {
margin-left: -1rem;
&:after {
content: "";
position: absolute;
top: calc(50% - 0.5rem);
right: -1rem;
border-width: 0.5rem;
border-style: solid;
@include themify($themes) {
border-color: transparent transparent transparent themed(tooltipBackgroundColor);
}
}
}
&.ng-tooltip-right {
margin-left: 1rem;
&:before {
content: "";
position: absolute;
top: calc(50% - 0.5rem);
left: -1rem;
border-width: 0.5rem;
border-style: solid;
@include themify($themes) {
border-color: transparent themed(tooltipBackgroundColor) transparent transparent;
}
}
}
}
.table-tooltip-dimensions {
.tooltip-inner {
overflow: auto;
max-width: 20rem;
max-height: 10rem;
}
}
.balance-tooltip {
padding: 1.3rem;
@include themify($themes) {
background: themed(tooltipBackgroundColor);
box-shadow: themed(tooltipShadow);
color: themed(mainTextColor);
}
.tooltip-inner {
display: flex;
flex-direction: column;
font-size: 1.3rem;
.available {
margin-bottom: 1.7rem;
b {
font-weight: 600;
}
}
.locked {
margin-bottom: 0.7rem;
b {
font-weight: 600;
}
}
.link {
cursor: pointer;
@include themify($themes) {
color: themed(blueTextColor);
}
}
}
&.ng-tooltip-top {
margin-top: -1rem;
}
&.ng-tooltip-bottom {
margin-top: 1rem;
}
&.ng-tooltip-left {
margin-left: -1rem;
}
&.ng-tooltip-right {
margin-left: 1rem;
}
}
.account-tooltip {
.tooltip-inner {
word-break: break-word;
max-width: 18rem;
}
}
.comment-tooltip {
.tooltip-inner {
overflow: auto;
word-break: break-word;
max-width: 50rem;
max-height: 25rem;
}
}
.update-tooltip {
padding: 1.5rem;
@include themify($themes) {
background: themed(tooltipBackgroundColor);
box-shadow: themed(tooltipShadow);
color: themed(mainTextColor);
}
&.important {
@include themify($themes) {
background: themed(tooltipImportantBackgroundColor);
color: themed(accountMainTextColor);
}
&.ng-tooltip-left-bottom {
&:after {
@include themify($themes) {
border-color: transparent transparent themed(tooltipImportantBackgroundColor) themed(tooltipImportantBackgroundColor);
}
}
}
&.ng-tooltip-right-bottom {
&:before {
@include themify($themes) {
border-color: transparent themed(tooltipImportantBackgroundColor) themed(tooltipImportantBackgroundColor) transparent;
}
}
}
}
&.critical {
padding: 2.5rem;
@include themify($themes) {
background: themed(tooltipCriticalBackgroundColor);
color: themed(accountMainTextColor);
}
.tooltip-inner {
display: flex;
flex-direction: column;
align-items: center;
}
&.ng-tooltip-left-bottom {
&:after {
@include themify($themes) {
border-color: transparent transparent themed(tooltipCriticalBackgroundColor) themed(tooltipCriticalBackgroundColor);
}
}
}
&.ng-tooltip-right-bottom {
&:before {
@include themify($themes) {
border-color: transparent themed(tooltipCriticalBackgroundColor) themed(tooltipCriticalBackgroundColor) transparent;
}
}
}
}
.tooltip-inner {
font-size: 1.3rem;
line-height: 1.8rem;
white-space: pre-wrap;
.standard-update {
font-size: 1.5rem;
line-height: 2.7rem;
@include themify($themes) {
color: themed(blueTextColor);
}
}
.important-update {
font-size: 1.5rem;
line-height: 2.7rem;
@include themify($themes) {
color: themed(tooltipImportantTextColor);
}
}
.critical-update {
font-size: 1.5rem;
line-height: 2.7rem;
text-align: center;
}
.wrong-time {
font-size: 1.5rem;
line-height: 2.7rem;
@include themify($themes) {
color: themed(tooltipImportantTextColor);
}
}
.icon {
margin: 1.5rem 0;
width: 5rem;
height: 5rem;
@include themify($themes) {
background-color: themed(tooltipCriticalTextColor);
}
}
}
&.ng-tooltip-left-bottom {
margin-left: -1.5rem;
&:after {
content: "";
position: absolute;
bottom: 0.6rem;
right: -1rem;
border-width: 0.5rem;
border-style: solid;
@include themify($themes) {
border-color: transparent transparent themed(tooltipBackgroundColor) themed(tooltipBackgroundColor);
}
}
}
&.ng-tooltip-right-bottom {
margin-left: 1.5rem;
&:before {
content: "";
position: absolute;
bottom: 0.6rem;
left: -1rem;
border-width: 0.5rem;
border-style: solid;
@include themify($themes) {
border-color: transparent themed(tooltipBackgroundColor) themed(tooltipBackgroundColor) transparent;
}
}
}
}
.ngx-contextmenu {
.dropdown-menu {
border: none;
padding: 0;
@include themify($themes) {
background-color: themed(chartOptionsBackgroundColor);
box-shadow: themed(tooltipShadow);
}
}
li {
display: block;
font-family: OpenSans, sans-serif;
font-size: 1.3rem;
text-transform: uppercase;
text-align: center;
}
a {
display: block;
padding: 0.5em 1em;
@include themify($themes) {
color: themed(mainTextColor);
}
&:hover {
@include themify($themes) {
background-color: themed(chartOptionsHoverColor);
color: themed(mainTextColor);
}
}
}
}
.ng-select {
&.custom-select {
width: 100%;
.ng-select-container {
border: none;
border-radius: 0;
cursor: pointer;
font-size: 1.4rem;
outline: none;
padding: 0 1rem;
height: 4.2rem;
@include themify($themes) {
background-color: themed(inputBackgroundColor);
color: themed(mainTextColor);
}
.ng-value-container {
padding: 0;
.ng-input {
top: auto;
}
}
}
.ng-dropdown-panel {
border: none;
@include themify($themes) {
background-color: themed(inputBackgroundColor);
}
.ng-dropdown-panel-items {
.ng-option {
font-size: 1.4rem;
padding: 1rem;
@include themify($themes) {
background-color: themed(inputBackgroundColor);
color: themed(mainTextColor);
}
&.ng-option-marked {
@include themify($themes) {
background-color: themed(selectHoverColor);
color: themed(mainTextColor);
}
}
&.ng-option-selected {
@include themify($themes) {
background-color: themed(selectSelectedColor);
color: themed(mainTextColor);
}
}
}
&::-webkit-scrollbar {
background-color: transparent;
cursor: default;
width: 1rem;
height: 1rem;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #556576;
background-clip: padding-box;
border: 0.25rem solid transparent;
border-radius: 0.5rem;
}
&::-webkit-scrollbar-thumb:hover {
background-color: #556576;
}
}
}
}
}
app-modal-container {
.modal {
@include themify($themes) {
background: themed(modalBackground);
color: themed(mainTextColor);
}
.content {
.icon.error {
@include themify($themes) {
background-color: themed(redTextColor);
}
}
.icon.success {
@include themify($themes) {
background-color: themed(greenTextColor);
}
}
.icon.info {
@include themify($themes) {
background-color: themed(blueTextColor);
}
}
}
.action-button {
@include themify($themes) {
background-color: themed(blueTextColor);
color: themed(alternativeTextColor);
}
}
.close-button {
.icon {
@include themify($themes) {
background-color: themed(closeButtonColor);
}
}
}
}
}
app-transaction-details {
.table {
@include themify($themes) {
border-top: 0.2rem solid themed(transparentButtonBorderColor);
}
.row {
.cell {
&.label {
@include themify($themes) {
color: themed(optionalTextColor);
}
}
&.value {
@include themify($themes) {
color: themed(mainTextColor);
}
}
&.key-value {
@include themify($themes) {
color: themed(blueTextColor);
}
}
}
}
}
}
app-progress-container {
.progress-bar-container {
@include themify($themes) {
color: themed(mainTextColor);
}
.progress-bar {
@include themify($themes) {
background-color: themed(progressBarBackgroundColor);
}
.progress-bar-full {
@include themify($themes) {
background-color: themed(progressBarFullBackgroundColor);
}
}
}
}
}
app-open-wallet-modal {
.modal {
@include themify($themes) {
background: themed(modalBackground);
color: themed(mainTextColor);
}
}
}