Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-11 17:55:51 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/Qortal/qortal-ui

Browse Source
This commit is contained in:
AlphaX-Projects 2023-12-10 13:01:55 +01:00
commit 50ac01f863
1 changed files with 687 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

687
plugins/plugins/core/trade-portal/trade-portal-css.js Normal file
View File

@ -0,0 +1,687 @@
import {css} from 'lit'
export const tradeStyles = css`
* {
--mdc-theme-primary: rgb(3, 169, 244);
--mdc-theme-secondary: var(--mdc-theme-primary);
--mdc-theme-error: rgb(255, 89, 89);
--mdc-text-field-outlined-idle-border-color: var(--txtfieldborder);
--mdc-text-field-outlined-hover-border-color: var(--txtfieldhoverborder);
--mdc-text-field-label-ink-color: var(--black);
--mdc-text-field-ink-color: var(--black);
--mdc-select-outlined-idle-border-color: var(--txtfieldborder);
--mdc-select-outlined-hover-border-color: var(--txtfieldhoverborder);
--mdc-select-label-ink-color: var(--black);
--mdc-select-ink-color: var(--black);
--mdc-theme-surface: var(--white);
--mdc-dialog-content-ink-color: var(--black);
--mdc-dialog-shape-radius: 25px;
--paper-input-container-focus-color: var(--mdc-theme-primary);
--lumo-primary-text-color: rgb(0, 167, 245);
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
--lumo-primary-color: hsl(199, 100%, 48%);
--lumo-base-color: var(--white);
--lumo-body-text-color: var(--black);
--lumo-secondary-text-color: var(--sectxt);
--lumo-contrast-60pct: var(--vdicon);
--_lumo-grid-border-color: var(--border);
--_lumo-grid-secondary-border-color: var(--border2);
}
.myhover vaadin-grid-cell-content {
cursor: pointer;
}
.myhover vaadin-grid::part(selected-row) {
color: green;
cursor: pointer;
}
.myhover vaadin-grid::part(focused-selected-row) {
color: green;
cursor: pointer;
}
.myhover vaadin-grid::part(cell):hover {
cursor: pointer;
}
.myhover vaadin-grid::part(row):hover {
color: green;
cursor: pointer;
}
.myhover vaadin-grid::part(selected-row-cell) {
color: green;
cursor: pointer;
}
paper-spinner-lite {
height: 30px;
width: 30px;
--paper-spinner-color: var(--mdc-theme-primary);
--paper-spinner-stroke-width: 3px;
}
mwc-tab-bar {
--mdc-text-transform: none;
--mdc-tab-color-default: var(--black);
--mdc-tab-text-label-color-default: var(--black);
}
#tabs-1 {
--mdc-tab-height: 42px;
border-left: 1px solid var(--tradeborder);
border-top: 1px solid var(--tradeborder);
border-right: 1px solid var(--tradeborder);
color: var(--black);
}
#tab-buy[active] {
--mdc-theme-primary: rgba(55, 160, 51, 0.9);
}
#tabs-1-content {
height: 100%;
padding-bottom: 10px;
}
#tabs-1-content>div {
height: 100%;
border: 1px solid var(--tradeborder);
}
#tabs-1-content .card {
border: none;
}
#tabs-1-content .btn-clear {
--mdc-icon-button-size: 32px;
color: var(--black);
}
.btn-clear-bot {
--mdc-icon-button-size: 32px;
color: var(--black);
float: right;
}
.btn-info {
color: #03a9f4;
--mdc-icon-size: 16px;
padding-top: 3px;
}
#tab-sell[active] {
--mdc-theme-primary: rgb(255, 89, 89);
}
#trade-portal-page {
background: var(--white);
padding: 12px 24px;
}
.divCard {
border: 1px solid var(--black);
padding: 1em;
box-shadow: 0 0.3px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
h2 {
margin: 10px 0;
}
h4 {
margin: 5px 0;
}
p {
font-size: 14px;
line-height: 21px;
}
.card-body {
background-color: var(--white);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
.card-container {
background-color: var(--white);
border-radius: 5px;
color: var(--black);
padding-top: 30px;
position: relative;
width: 350px;
max-width: 100%;
text-align: center;
}
.card-container .level {
color: #ffffff;
background-color: #03a9f4;
border-radius: 3px;
font-size: 14px;
font-weight: bold;
padding: 3px 7px;
position: absolute;
top: 30px;
left: 30px;
}
.card-container .founder {
color: #ffffff;
background-color: #03a9f4;
border-radius: 3px;
font-size: 14px;
font-weight: bold;
padding: 3px 7px;
position: absolute;
top: 30px;
right: 30px;
}
.card-container .round {
width: 96px;
height: 96px;
border: 1px solid #03a9f4;
border-radius: 50%;
padding: 2px;
}
.card-container .badge {
width: 200px;
height: 135px;
border: 1px solid transparent;
border-radius: 10%;
padding: 2px;
}
.userdata {
background-color: #1F1A36;
text-align: left;
padding: 15px;
margin-top: 30px;
}
.userdata ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.userdata ul li {
border: 1px solid #2D2747;
border-radius: 2px;
display: inline-block;
font-size: 12px;
margin: 0 7px 7px 0;
padding: 7px;
}
h2,
h3,
h4,
h5 {
color: var(--black);
font-weight: 400;
}
header {
display: flex;
flex: 0 1 auto;
align-items: center;
justify-content: center;
padding: 0px 10px;
font-size: 16px;
color: var(--white);
background-color: var(--tradehead);
border-left: 1px solid var(--tradeborder);
border-top: 1px solid var(--tradeborder);
border-right: 1px solid var(--tradeborder);
min-height: 40px;
}
p {
margin-bottom: 12px;
}
#trade-portal {
max-width: 100vw;
margin-left: auto;
margin-right: auto;
}
.box {
margin: 0;
padding: 0;
display: flex;
flex-flow: column;
height: 100%;
}
.box-bot {
margin: 0;
padding: 0;
display: flex;
flex-flow: column;
height: 150px;
}
#first-trade-section {
margin-bottom: 10px;
}
#first-trade-section>div {}
#second-trade-section {
margin-bottom: 10px;
}
#second-trade-section>div {}
#third-trade-section {
margin-bottom: 10px;
}
#third-trade-section>div {}
.trade-chart {
background-color: var(--white);
border: 2px #ddd solid;
text-align: center;
}
.open-trades {
text-align: center;
}
.open-market-container {
text-align: center;
}
.trade-bot-container {
text-align: center;
}
.no-last-seen {
background: rgb(255, 89, 89);
padding: 9px 1.3px;
border-radius: 50%;
width: 1rem;
margin: 0 auto;
}
.card {
padding: 1em;
border: 1px var(--tradeborder) solid;
flex: 1 1 auto;
display: flex;
flex-flow: column;
justify-content: space-evenly;
min-height: inherit;
}
.card-bot {
padding: 1em;
flex: 1 1 auto;
display: flex;
flex-flow: column;
justify-content: space-evenly;
width: 350px;
min-height: inherit;
}
.cancel {
--mdc-theme-primary: rgb(255, 89, 89);
}
.border-wrapper {
border: 1px var(--tradeborder) solid;
overflow: hidden;
}
.amt-text {
color: var(--tradehave);
font-size: 15px;
margin-top: 5px;
margin-bottom: 12px;
}
.exchange {
color: var(--black);
font-size: 18px;
font-weight: bold;
margin-top: 5px;
margin-bottom: 10px;
}
.clear-button {
display: inline;
float: right;
margin-bottom: 5px;
}
.exhcnage-text {
display: inline;
float: left;
margin-bottom: 5px;
}
.balance-text {
display: inline;
float: right;
margin-bottom: 5px;
}
.fee-text {
display: inline;
float: left;
margin-bottom: 5px;
}
.tab-text {
color: var(--tradehave);
font-size: 12px;
text-align: left;
margin-top: 2px;
margin-bottom: -12px;
}
.historic-trades {
text-align: center;
}
.my-open-orders {
text-align: center;
}
.my-historic-trades {
text-align: center;
}
.buttons {
width: auto !important;
}
.buy-button {
--mdc-theme-primary: rgba(55, 160, 51, 0.9);
}
.sell-button {
--mdc-theme-primary: rgb(255, 89, 89);
}
.trade-bot-button {
margin-top: 20px;
margin-bottom: 20px;
--mdc-theme-primary: rgba(55, 160, 51, 0.9);
}
.full-width {
background-color: var(--white);
border: 2px var(--black);
height: 200px;
text-align: center;
}
vaading-grid {
font-size: .8em;
}
vaadin-grid-column {
flex-grow: 1;
}
.loadingContainer {
height: 100%;
width: 100%;
}
.loading,
.loading:after {
border-radius: 50%;
width: 5em;
height: 5em;
}
.loading {
margin: 10px auto;
border-width: .6em;
border-style: solid;
border-color: rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) rgba(3, 169, 244, 0.2) rgb(3, 169, 244);
font-size: 10px;
position: relative;
text-indent: -9999em;
transform: translateZ(0px);
animation: 1.1s linear 0s infinite normal none running loadingAnimation;
}
mwc-select#coinSelectionMenu {
font-size: 24px;
width: 220px;
}
mwc-select#coinSelectionMenu mwc-list-item {
line-height: 30px;
}
.coinName::before {
content: "";
display: inline-block;
height: 26px;
width: 45px;
position: absolute;
background-repeat: no-repeat;
background-size: cover;
left: 10px;
top: 10px;
}
.btc.coinName:before {
background-image: url('/img/qortbtc.png');
}
.ltc.coinName:before {
background-image: url('/img/qortltc.png');
}
.doge.coinName:before {
background-image: url('/img/qortdoge.png');
}
.dgb.coinName:before {
background-image: url('/img/qortdgb.png');
}
.rvn.coinName:before {
background-image: url('/img/qortrvn.png');
}
.arrr.coinName:before {
background-image: url('/img/qortarrr.png');
}
.coinName {
display: inline-block;
height: 26px;
padding-left: 45px;
}
.warning-text {
animation: blinker 1.5s linear infinite;
display: inline;
float: left;
margin-bottom: 5px;
color: rgb(255, 89, 89);
}
.warning-bot-text {
animation: blinker 1.5s linear infinite;
display: inline;
text-align: center;
color: rgb(255, 89, 89);
}
.red {
--mdc-theme-primary: #F44336;
}
@-webkit-keyframes loadingAnimation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loadingAnimation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes blinker {
50% {
opacity: 0;
}
}
paper-dialog.info {
width: 100%;
max-width: 75vw;
height: 100%;
max-height: 50vh;
background-color: var(--white);
color: var(--black);
border: 1px solid var(--black);
border-radius: 15px;
line-height: 1.6;
overflow-y: auto;
}
.actions {
display: flex;
justify-content: space-between;
padding: 0 1em;
margin: 12px 0 -6px 0;
}
.close-icon {
font-size: 36px;
}
.close-icon:hover {
cursor: pointer;
opacity: .6;
}
.setpass-wrapper {
width: 100%;
min-width: 400px;
max-width: 450px;
text-align: center;
background: var(--white);
border: 1px solid var(--black);
border-radius: 15px;
padding: 10px 10px 0px;
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
}
.lock-wrapper {
width: 100%;
height: 100%;
min-width: 600px;
max-width: 600px;
min-height: 400px;
max-height: 400px;
text-align: center;
background: url("/img/qortal-lock.jpg");
border: 1px solid var(--black);
border-radius: 25px;
padding: 10px 10px 0px;
}
.text-wrapper {
width: 100%;
height: 100%;
min-width: 280px;
max-width: 280px;
min-height: 64px;
max-height: 64px;
text-align: center;
margin-left: 35px;
margin-top: 125px;
overflow: hidden;
}
.lock-title-white {
font-family: 'magistralbold';
font-weight: 700;
font-size: 26px;
line-height: 32px;
color: #ffffff;
}
.lock-title-red {
font-family: 'magistralbold';
font-weight: 700;
font-size: 26px;
line-height: 32px;
color: #df3636;
}
@media (min-width: 701px) {
* {}
#trade-portal {}
#first-trade-section {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
grid-auto-rows: max(450px);
column-gap: 0.5em;
row-gap: 0.4em;
justify-items: stretch;
align-items: stretch;
margin-bottom: 10px;
}
#second-trade-section {
display: grid;
grid-template-columns: 2fr 1fr;
grid-auto-rows: max(450px);
column-gap: 0.5em;
row-gap: 0.4em;
justify-items: stretch;
align-items: stretch;
margin-bottom: 10px;
}
#third-trade-section {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-auto-rows: max(200px);
column-gap: 0.5em;
row-gap: 0.4em;
justify-items: stretch;
align-items: stretch;
margin-bottom: 10px;
}
}
`