diff --git a/qortal-ui-plugins/plugins/core/group-management/group-management.src.js b/qortal-ui-plugins/plugins/core/group-management/group-management.src.js index 287079db..f365358e 100644 --- a/qortal-ui-plugins/plugins/core/group-management/group-management.src.js +++ b/qortal-ui-plugins/plugins/core/group-management/group-management.src.js @@ -7,10 +7,8 @@ import '@material/mwc-button' import '@material/mwc-textfield' import '@material/mwc-dialog' import '@polymer/paper-spinner/paper-spinner-lite.js' -import '@vaadin/grid/vaadin-grid.js' +import '@vaadin/grid' import '@vaadin/grid/vaadin-grid-filter-column.js' -import '@vaadin/grid/vaadin-grid-sort-column.js' -import '@vaadin/grid/theme/material/all-imports.js' import '@github/time-elements' const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) @@ -40,6 +38,10 @@ class GroupManagement extends LitElement { * { --mdc-theme-primary: rgb(3, 169, 244); --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%); } #group-management-page { diff --git a/qortal-ui-plugins/plugins/core/messaging/q-chat/index.html b/qortal-ui-plugins/plugins/core/messaging/q-chat/index.html index cd268875..05a6c81f 100644 --- a/qortal-ui-plugins/plugins/core/messaging/q-chat/index.html +++ b/qortal-ui-plugins/plugins/core/messaging/q-chat/index.html @@ -33,7 +33,7 @@ margin: 0; font-family: "Roboto", sans-serif; background-color: #fff; - overflow: hidden; + overflow: hidden; } @@ -43,4 +43,4 @@ - + \ No newline at end of file diff --git a/qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js b/qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js index 76c5a7ee..59904376 100644 --- a/qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js +++ b/qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js @@ -7,8 +7,7 @@ import '@material/mwc-button' import '@material/mwc-textfield' import '@material/mwc-dialog' import '@polymer/paper-spinner/paper-spinner-lite.js' -import '@vaadin/grid/vaadin-grid.js' -import '@vaadin/grid/theme/material/all-imports.js' +import '@vaadin/grid' const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) @@ -34,8 +33,11 @@ class NameRegistration extends LitElement { --mdc-theme-primary: rgb(3, 169, 244); --mdc-theme-secondary: var(--mdc-theme-primary); --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%); } - #name-registration-page { background: #fff; padding: 12px 24px; @@ -62,6 +64,10 @@ class NameRegistration extends LitElement { height: 100%; max-height: 42px; } + + .red { + --mdc-theme-primary: #F44336; + } ` } diff --git a/qortal-ui-plugins/plugins/core/node-management/node-management.src.js b/qortal-ui-plugins/plugins/core/node-management/node-management.src.js index 3e4e3353..83bf989d 100644 --- a/qortal-ui-plugins/plugins/core/node-management/node-management.src.js +++ b/qortal-ui-plugins/plugins/core/node-management/node-management.src.js @@ -40,6 +40,10 @@ class NodeManagement extends LitElement { * { --mdc-theme-primary: rgb(3, 169, 244); --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%); } paper-spinner-lite { diff --git a/qortal-ui-plugins/plugins/core/puzzles/puzzles.src.js b/qortal-ui-plugins/plugins/core/puzzles/puzzles.src.js index b2f41aaf..3ace6f1e 100644 --- a/qortal-ui-plugins/plugins/core/puzzles/puzzles.src.js +++ b/qortal-ui-plugins/plugins/core/puzzles/puzzles.src.js @@ -12,8 +12,7 @@ import '@material/mwc-textfield' import '@material/mwc-dialog' import '@material/mwc-slider' import '@polymer/paper-spinner/paper-spinner-lite.js' -import '@vaadin/grid/vaadin-grid.js' -import '@vaadin/grid/theme/material/all-imports.js' +import '@vaadin/grid' const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) @@ -36,34 +35,38 @@ class Puzzles extends LitElement { static get styles() { return css` - * { - --mdc-theme-primary: rgb(3, 169, 244); - --mdc-theme-secondary: var(--mdc-theme-primary); - --paper-input-container-focus-color: var(--mdc-theme-primary); - } - #puzzle-page { - background: #fff; - padding: 12px 24px; - } + * { + --mdc-theme-primary: rgb(3, 169, 244); + --mdc-theme-secondary: var(--mdc-theme-primary); + --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%); + } + #puzzle-page { + background: #fff; + padding: 12px 24px; + } - h2 { - margin:0; - } + h2 { + margin:0; + } - h2, h3, h4, h5 { - color:#333; - font-weight: 400; - } + h2, h3, h4, h5 { + color:#333; + font-weight: 400; + } - .red { - --mdc-theme-primary: #F44336; - } + .red { + --mdc-theme-primary: #F44336; + } - .clue { - font-family: monospaced; - font-size: smaller; - } - ` + .clue { + font-family: monospaced; + font-size: smaller; + } + ` } constructor() { @@ -85,7 +88,7 @@ class Puzzles extends LitElement {

Puzzles

- + { if (data.item.isSolved) { render(html`SOLVED by ${data.item.winner}`, root) diff --git a/qortal-ui-plugins/plugins/core/qdn/data-management/data-management.src.js b/qortal-ui-plugins/plugins/core/qdn/data-management/data-management.src.js index 89d9de0f..2d55c0d0 100644 --- a/qortal-ui-plugins/plugins/core/qdn/data-management/data-management.src.js +++ b/qortal-ui-plugins/plugins/core/qdn/data-management/data-management.src.js @@ -4,8 +4,7 @@ import { Epml } from '../../../../epml' import '@material/mwc-icon' import '@material/mwc-button' -import '@vaadin/grid/vaadin-grid.js' -import '@vaadin/grid/theme/material/all-imports.js' +import '@vaadin/grid' const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) @@ -24,6 +23,10 @@ class DataManagement extends LitElement { * { --mdc-theme-primary: rgb(3, 169, 244); --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%); } #pages { diff --git a/qortal-ui-plugins/plugins/core/qdn/websites.src.js b/qortal-ui-plugins/plugins/core/qdn/websites.src.js index 44a36c7d..a87ac4ee 100644 --- a/qortal-ui-plugins/plugins/core/qdn/websites.src.js +++ b/qortal-ui-plugins/plugins/core/qdn/websites.src.js @@ -5,8 +5,7 @@ import { Epml } from '../../../epml.js' import '@material/mwc-icon' import '@material/mwc-button' import '@material/mwc-textfield' -import '@vaadin/grid/vaadin-grid.js' -import '@vaadin/grid/theme/material/all-imports.js' +import '@vaadin/grid' const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) @@ -33,6 +32,10 @@ class Websites extends LitElement { * { --mdc-theme-primary: rgb(3, 169, 244); --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%); } #pages { diff --git a/qortal-ui-plugins/plugins/core/reward-share/reward-share.src.js b/qortal-ui-plugins/plugins/core/reward-share/reward-share.src.js index 8a7af1c3..f5850e20 100644 --- a/qortal-ui-plugins/plugins/core/reward-share/reward-share.src.js +++ b/qortal-ui-plugins/plugins/core/reward-share/reward-share.src.js @@ -8,8 +8,7 @@ import '@material/mwc-textfield' import '@material/mwc-dialog' import '@material/mwc-slider' import '@polymer/paper-spinner/paper-spinner-lite.js' -import '@vaadin/grid/vaadin-grid.js' -import '@vaadin/grid/theme/material/all-imports.js' +import '@vaadin/grid' const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) @@ -35,6 +34,10 @@ class RewardShare extends LitElement { --mdc-theme-primary: rgb(3, 169, 244); --mdc-theme-secondary: var(--mdc-theme-primary); --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%); } #reward-share-page { diff --git a/qortal-ui-plugins/plugins/core/trade-portal/trade-portal.src.js b/qortal-ui-plugins/plugins/core/trade-portal/trade-portal.src.js index 336ad4ca..7a67075c 100644 --- a/qortal-ui-plugins/plugins/core/trade-portal/trade-portal.src.js +++ b/qortal-ui-plugins/plugins/core/trade-portal/trade-portal.src.js @@ -11,9 +11,8 @@ import '@material/mwc-tab' import '@material/mwc-list/mwc-list-item' import '@material/mwc-select' import '@polymer/paper-spinner/paper-spinner-lite.js' -import '@vaadin/grid/vaadin-grid.js' +import '@vaadin/grid' import '@vaadin/grid/vaadin-grid-sorter' -import '@vaadin/grid/theme/material/all-imports.js' const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) @@ -41,328 +40,330 @@ class TradePortal extends LitElement { static get styles() { return css` + * { + --mdc-theme-primary: rgb(3, 169, 244); + --mdc-theme-secondary: var(--mdc-theme-primary); + --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%); + } + + #tabs-1 { + --mdc-tab-height: 50px; + border-left: 1px solid rgb(102, 102, 102); + border-top: 1px solid rgb(102, 102, 102); + border-right: 1px solid rgb(102, 102, 102); + } + + #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 rgb(102, 102, 102); + } + + #tabs-1-content .card { + border: none; + } + + #tabs-1-content .btn-clear { + --mdc-icon-button-size: 40px; + } + + #tab-sell[active] { + --mdc-theme-primary: rgb(255, 89, 89); + } + + #trade-portal-page { + background: #fff; + padding: 12px 24px; + } + + .divCard { + border: 1px solid #eee; + 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: 0; + } + + h2, + h3, + h4, + h5 { + color: #333; + font-weight: 400; + } + + header { + display: flex; + flex: 0 1 auto; + align-items: center; + justify-content: center; + padding: 0px 15px; + font-size: 16px; + color: #fff; + background-color: rgb(106, 108, 117); + min-height: 40px; + } + + p { + margin-bottom: 15px; + } + + #trade-portal { + max-width: 100vw; + margin-left: auto; + margin-right: auto; + } + + .box { + margin: 0; + padding: 0; + display: flex; + flex-flow: column; + height: 100%; + } + + #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: #eee; + border: 2px #ddd solid; + text-align: center; + } + + .open-trades { + text-align: center; + } + + .no-last-seen { + background: rgb(255, 89, 89); + padding: 9px 1.3px; + border-radius: 50%; + width: 1rem; + margin: 0 auto; + } + + .open-market-container { + text-align: center; + } + + .buy-sell { + } + + .card { + padding: 1em; + border: 1px #666 solid; + flex: 1 1 auto; + display: flex; + flex-flow: column; + justify-content: space-evenly; + min-height: inherit; + } + + .cancel { + --mdc-theme-primary: rgb(255, 89, 89); + } + + .border-wrapper { + border: 1px #666 solid; + overflow: hidden; + } + + .you-have { + color: #555; + font-size: 15px; + text-align: right; + margin-top: 2px; + margin-bottom: 10px; + } + + .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); + } + + .full-width { + background-color: #fff; + border: 2px #ddd solid; + height: 100px; + 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: 45% 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; + } + + 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; + } + + .ltc.coinName:before { + background-image: url('/img/qortltc.png'); + } + + .doge.coinName:before { + background-image: url('/img/qortdoge.png'); + } + + .coinName { + display: inline-block; + height: 26px; + padding-left: 45px; + } + + @-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); + } + } + + @media (min-width: 701px) { * { - --mdc-theme-primary: rgb(3, 169, 244); - --mdc-theme-secondary: var(--mdc-theme-primary); - --paper-input-container-focus-color: var(--mdc-theme-primary); - } - - #tabs-1 { - --mdc-tab-height: 50px; - border-left: 1px solid rgb(102, 102, 102); - border-top: 1px solid rgb(102, 102, 102); - border-right: 1px solid rgb(102, 102, 102); - } - - #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 rgb(102, 102, 102); - } - - #tabs-1-content .card { - border: none; - } - - #tabs-1-content .btn-clear { - --mdc-icon-button-size: 40px; - } - - #tab-sell[active] { - --mdc-theme-primary: rgb(255, 89, 89); - } - - #trade-portal-page { - background: #fff; - padding: 12px 24px; - } - - .divCard { - border: 1px solid #eee; - 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: 0; - } - - h2, - h3, - h4, - h5 { - color: #333; - font-weight: 400; - } - - header { - display: flex; - flex: 0 1 auto; - align-items: center; - justify-content: center; - padding: 0px 15px; - font-size: 16px; - color: #fff; - background-color: rgb(106, 108, 117); - min-height: 40px; - } - - p { - margin-bottom: 15px; - } - - #trade-portal { - max-width: 100vw; - margin-left: auto; - margin-right: auto; - } - - .box { - margin: 0; - padding: 0; - display: flex; - flex-flow: column; - height: 100%; } + #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; } - #first-trade-section > div { - } - #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; } - #second-trade-section > div { - } - - #third-trade-section { - margin-bottom: 10px; - } - - #third-trade-section > div { - } - - .trade-chart { - background-color: #eee; - border: 2px #ddd solid; - text-align: center; - } - - .open-trades { - text-align: center; - } - - .no-last-seen { - background: rgb(255, 89, 89); - padding: 9px 1.3px; - border-radius: 50%; - width: 1rem; - margin: 0 auto; - } - - .open-market-container { - text-align: center; - } - .buy-sell { + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-rows: max(450px); + column-gap: 0.5em; + row-gap: 0.4em; } - - .card { - padding: 1em; - border: 1px #666 solid; - flex: 1 1 auto; - display: flex; - flex-flow: column; - justify-content: space-evenly; - min-height: inherit; - } - - .cancel { - --mdc-theme-primary: rgb(255, 89, 89); - } - - .border-wrapper { - border: 1px #666 solid; - overflow: hidden; - } - - .you-have { - color: #555; - font-size: 15px; - text-align: right; - margin-top: 2px; - margin-bottom: 10px; - } - - .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); - } - - .full-width { - background-color: #fff; - border: 2px #ddd solid; - height: 100px; - 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: 45% 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; - } - - 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; - } - - .ltc.coinName:before { - background-image: url('/img/qortltc.png'); - } - - .doge.coinName:before { - background-image: url('/img/qortdoge.png'); - } - - .coinName { - display: inline-block; - height: 26px; - padding-left: 45px; - } - - @-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); - } - } - - @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; - } - - .buy-sell { - display: grid; - grid-template-columns: 1fr 1fr; - grid-auto-rows: max(450px); - column-gap: 0.5em; - row-gap: 0.4em; - } - - } - `; + } + `; } constructor() { diff --git a/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js b/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js index 4ab57bfc..551e6b77 100644 --- a/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js +++ b/qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js @@ -7,8 +7,7 @@ import '@material/mwc-icon' import '@material/mwc-button' import '@material/mwc-dialog' import '@polymer/paper-spinner/paper-spinner-lite.js' -import '@vaadin/grid/vaadin-grid.js' -import '@vaadin/grid/theme/material/all-imports.js' +import '@vaadin/grid' import '@github/time-elements' const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) @@ -30,444 +29,457 @@ class MultiWallet extends LitElement { } static get styles() { - return [ - css` - #pages { - display: flex; - flex-wrap: wrap; - /* margin: 20px; */ - padding: 10px 5px 5px 5px; - margin: 0px 20px 20px 20px; - } + return [ + css` + * { + box-sizing: border-box; + --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%); + } - #pages > button { - user-select: none; - padding: 5px; - margin: 0 5px; - border-radius: 10%; - border: 0; - background: transparent; - font: inherit; - outline: none; - cursor: pointer; - } + #pages { + display: flex; + flex-wrap: wrap; + padding: 10px 5px 5px 5px; + margin: 0px 20px 20px 20px; + } - #pages > button:not([disabled]):hover, - #pages > button:focus { - color: #ccc; - background-color: #eee; - } + #pages > button { + user-select: none; + padding: 5px; + margin: 0 5px; + border-radius: 10%; + border: 0; + background: transparent; + font: inherit; + outline: none; + cursor: pointer; + } - #pages > button[selected] { - font-weight: bold; - color: white; - background-color: #ccc; - } + #pages > button:not([disabled]):hover, + #pages > button:focus { + color: #ccc; + background-color: #eee; + } - #pages > button[disabled] { - opacity: 0.5; - cursor: default; - } - .red { - color: var(--paper-red-500); - } - .green { - color: var(--paper-green-500); - } - paper-spinner-lite { - height: 75px; - width: 75px; - --paper-spinner-color: var(--primary-color); - --paper-spinner-stroke-width: 2px; - } - .unconfirmed { - font-style: italic; - } - .roboto { - font-family: 'Roboto', sans-serif; - } - .mono { - font-family: 'Roboto Mono', monospace; - } - .weight-100 { - font-weight: 100; - } + #pages > button[selected] { + font-weight: bold; + color: white; + background-color: #ccc; + } - .text-white-primary { - color: var(--white-primary); - } - .text-white-secondary { - color: var(--white-secondary); - } - .text-white-disabled { - color: var(--white-disabled); - } - .text-white-hint { - color: var(--white-divider); - } + #pages > button[disabled] { + opacity: 0.5; + cursor: default; + } - table { - border: none; - } - table td, - th { - white-space: nowrap; - text-align: left; - font-size: 14px; - padding: 0 12px; - font-family: 'Roboto', sans-serif; - } - table tr { - height: 48px; - } - table tr:hover td { - background: #eee; - } - table tr th { - color: #666; - font-size: 12px; - } - table tr td { - margin: 0; - } - .white-bg { - height: 100vh; - background: #fff; - } - span { - font-size: 18px; - word-break: break-all; - } - .title { - font-weight: 600; - font-size: 12px; - line-height: 32px; - opacity: 0.66; - } - #transactionList { - padding: 0; - } - #transactionList > * { - } - .color-in { - color: #02977e; - background-color: rgba(0, 201, 167, 0.2); - font-weight: 700; - font-size: 0.60938rem; - border-radius: 0.25rem !important; - padding: 0.2rem 0.5rem; - margin-left: 4px; - } - .color-out { - color: #b47d00; - background-color: rgba(219, 154, 4, 0.2); - font-weight: 700; - font-size: 0.60938rem; - border-radius: 0.25rem !important; - padding: 0.2rem 0.5rem; - margin-left: 4px; - } - * { - box-sizing: border-box; - } + .red { + color: var(--paper-red-500); + } - body { - margin: 0; - padding: 0; - background: white; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } + .green { + color: var(--paper-green-500); + } - h2 { - margin: 0; - font-weight: 400; - color: #707584; - font: 24px/24px 'Open Sans', sans-serif; - } + paper-spinner-lite { + height: 75px; + width: 75px; + --paper-spinner-color: var(--primary-color); + --paper-spinner-stroke-width: 2px; + } - h3 { - margin: 0 0 5px; - font-weight: 600; - font-size: 18px; - line-height: 18px; - } + .unconfirmed { + font-style: italic; + } - /* Styles for Larger Screen Sizes */ - @media (min-width: 765px) { - .wrapper { - display: grid; - grid-template-columns: 0.5fr 3.5fr; - } - } + .roboto { + font-family: 'Roboto', sans-serif; + } + .mono { + font-family: 'Roboto Mono', monospace; + } + + .weight-100 { + font-weight: 100; + } + + + .text-white-primary { + color: var(--white-primary); + } + + .text-white-secondary { + color: var(--white-secondary); + } + .text-white-disabled { + color: var(--white-disabled); + } + .text-white-hint { + color: var(--white-divider); + } + + table { + border: none; + } + table td, + th { + white-space: nowrap; + text-align: left; + font-size: 14px; + padding: 0 12px; + font-family: 'Roboto', sans-serif; + } + table tr { + height: 48px; + } + table tr:hover td { + background: #eee; + } + table tr th { + color: #666; + font-size: 12px; + } + table tr td { + margin: 0; + } + .white-bg { + height: 100vh; + background: #fff; + } + span { + font-size: 18px; + word-break: break-all; + } + .title { + font-weight: 600; + font-size: 12px; + line-height: 32px; + opacity: 0.66; + } + #transactionList { + padding: 0; + } + #transactionList > * { + } + .color-in { + color: #02977e; + background-color: rgba(0, 201, 167, 0.2); + font-weight: 700; + font-size: 0.60938rem; + border-radius: 0.25rem !important; + padding: 0.2rem 0.5rem; + margin-left: 4px; + } + .color-out { + color: #b47d00; + background-color: rgba(219, 154, 4, 0.2); + font-weight: 700; + font-size: 0.60938rem; + border-radius: 0.25rem !important; + padding: 0.2rem 0.5rem; + margin-left: 4px; + } + + body { + margin: 0; + padding: 0; + background: white; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + h2 { + margin: 0; + font-weight: 400; + color: #707584; + font: 24px/24px 'Open Sans', sans-serif; + } + + h3 { + margin: 0 0 5px; + font-weight: 600; + font-size: 18px; + line-height: 18px; + } + + /* Styles for Larger Screen Sizes */ + @media (min-width: 765px) { .wrapper { - margin: 0 auto; - height: 100%; - overflow: hidden; - border-radius: 8px; - background-color: #fff; + display: grid; + grid-template-columns: 0.5fr 3.5fr; } + } - .wallet { - width: 170px; - height: 100vh; - border-top-left-radius: inherit; - border-bottom-left-radius: inherit; + .wrapper { + margin: 0 auto; + height: 100%; + overflow: hidden; + border-radius: 8px; + background-color: #fff; + } + + .wallet { + width: 170px; + height: 100vh; + border-top-left-radius: inherit; + border-bottom-left-radius: inherit; border-right: 1px solid #eee; - } + } - .transactions-wrapper { - width: 100%; - padding: 50px 0 0 0; - height: 100%; - } + .transactions-wrapper { + width: 100%; + padding: 50px 0 0 0; + height: 100%; + } - .wallet-header { - margin: 0 20px; - } + .wallet-header { + margin: 0 20px; + } - .wallet-address { - display: flex; - align-items: center; - font-size: 18px; - color: var(--mdc-theme-primary, #444750); - margin: 4px 0 20px; - } + .wallet-address { + display: flex; + align-items: center; + font-size: 18px; + color: var(--mdc-theme-primary, #444750); + margin: 4px 0 20px; + } - .wallet-balance { - display: inline-block; - font-weight: 600; - font-size: 32px; - color: var(--mdc-theme-primary, #444750); - } + .wallet-balance { + display: inline-block; + font-weight: 600; + font-size: 32px; + color: var(--mdc-theme-primary, #444750); + } - #transactions { - margin-top: 60px; - margin-left: 20px; - margin-right: 20px; - border-top: 1px solid #e5e5e5; - padding-top: 0px; - height: 100%; - } + #transactions { + margin-top: 60px; + margin-left: 20px; + margin-right: 20px; + border-top: 1px solid #e5e5e5; + padding-top: 0px; + height: 100%; + } - .show { - animation: fade-in 0.3s 1; - } + .show { + animation: fade-in 0.3s 1; + } - .transaction-item { - display: flex; - justify-content: space-between; - position: relative; - padding-left: 40px; - margin-bottom: 45px; - margin-right: 50px; - } - .transaction-item::before { - position: absolute; - content: ''; - border: 2px solid #e1e1e1; - border-radius: 50%; - height: 25px; - width: 25px; - left: 0; - top: 10px; - box-sizing: border-box; - vertical-align: middle; - color: #666666; - } + .transaction-item { + display: flex; + justify-content: space-between; + position: relative; + padding-left: 40px; + margin-bottom: 45px; + margin-right: 50px; + } + .transaction-item::before { + position: absolute; + content: ''; + border: 2px solid #e1e1e1; + border-radius: 50%; + height: 25px; + width: 25px; + left: 0; + top: 10px; + box-sizing: border-box; + vertical-align: middle; + color: #666666; + } - .credit::before { - content: '+'; - font-size: 25px; - line-height: 19px; - padding: 0 4px 0; - } + .credit::before { + content: '+'; + font-size: 25px; + line-height: 19px; + padding: 0 4px 0; + } - .debit::before { - content: '-'; - font-size: 20px; - line-height: 21px; - padding: 0 5px; - } + .debit::before { + content: '-'; + font-size: 20px; + line-height: 21px; + padding: 0 5px; + } - .transaction-item .details { - font-size: 14px; - line-height: 14px; - color: #999; - } + .transaction-item .details { + font-size: 14px; + line-height: 14px; + color: #999; + } - .transaction-item_details { - width: 270px; - } + .transaction-item_details { + width: 270px; + } - .transaction-item_amount .amount { - font-weight: 600; - font-size: 18px; - line-height: 45px; - position: relative; - margin: 0; - display: inline-block; - } + .transaction-item_amount .amount { + font-weight: 600; + font-size: 18px; + line-height: 45px; + position: relative; + margin: 0; + display: inline-block; + } - .currency-box { - display: flex; - background-color: #fff; - text-align: center; - padding: 12px; - cursor: pointer; - transition: 0.1s ease-in-out; - } - .currency-box:not(:last-child) { - border-bottom: 1px solid #eee; - } + .currency-box { + display: flex; + background-color: #fff; + text-align: center; + padding: 12px; + cursor: pointer; + transition: 0.1s ease-in-out; + } + .currency-box:not(:last-child) { + border-bottom: 1px solid #eee; + } - .active { - background: #ddd; - } + .active { + background: #ddd; + } - .currency-image { - display: inline-block; - height: 42px; - width: 42px; - background-repeat: no-repeat; - background-size: cover; - border-radius: 3px; - filter: grayscale(100%); - } - .currency-box.active .currency-image, - .currency-box:hover .currency-image { - filter: none; - } - .currency-box:hover { - background: #bbb; - } - .currency-box.active, - .currency-box:hover .currency-text { - font-weight: 500; - } + .currency-image { + display: inline-block; + height: 42px; + width: 42px; + background-repeat: no-repeat; + background-size: cover; + border-radius: 3px; + filter: grayscale(100%); + } + .currency-box.active .currency-image, + .currency-box:hover .currency-image { + filter: none; + } + .currency-box:hover { + background: #bbb; + } + .currency-box.active, + .currency-box:hover .currency-text { + font-weight: 500; + } - .currency-text { - margin: auto 0; - margin-left: 8px; - font-size: 20px; - color: #777; - } + .currency-text { + margin: auto 0; + margin-left: 8px; + font-size: 20px; + color: #777; + } - .qort .currency-image { - background-image: url('/img/qort.png'); - } + .qort .currency-image { + background-image: url('/img/qort.png'); + } - .btc .currency-image { - background-image: url('/img/btc.png'); - } + .btc .currency-image { + background-image: url('/img/btc.png'); + } - .ltc .currency-image { - background-image: url('/img/ltc.png'); - } + .ltc .currency-image { + background-image: url('/img/ltc.png'); + } - .doge .currency-image { - background-image: url('/img/doge.png'); - } + .doge .currency-image { + background-image: url('/img/doge.png'); + } - .card-list { - margin-top: 20px; - } + .card-list { + margin-top: 20px; + } - .card-list .currency-image { - cursor: pointer; - margin-right: 15px; - transition: 0.1s; - } + .card-list .currency-image { + cursor: pointer; + margin-right: 15px; + transition: 0.1s; + } - .card-list .currency-image:hover { - transform: scale(1.1); - } + .card-list .currency-image:hover { + transform: scale(1.1); + } - /* animations */ - @keyframes fade-in { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } + /* animations */ + @keyframes fade-in { + 0% { + opacity: 0; } + 100% { + opacity: 1; + } + } - /* media queries */ - @media (max-width: 863px) { - .wallet { - width: 100%; - height: max-content; - border-top-right-radius: inherit; - padding-bottom: 25px; - } - .cards { - margin-top: 25px; - } - .currency-box:nth-of-type(2) { - margin-right: 0; - } + /* media queries */ + @media (max-width: 863px) { + .wallet { + width: 100%; + height: max-content; + border-top-right-radius: inherit; + padding-bottom: 25px; } + .cards { + margin-top: 25px; + } + .currency-box:nth-of-type(2) { + margin-right: 0; + } + } - @media (max-width: 764px) { - .wallet { - width: 100%; - height: max-content; - border-top-right-radius: inherit; - padding-bottom: 25px; - } - .cards { - margin-top: 25px; - } - .currency-box { - width: calc(50% - 25px); - max-width: 260px; - display: inline-block; - margin-right: 25px; - margin-bottom: 25px; - } - .currency-box:nth-of-type(2) { - margin-right: 0; - } + @media (max-width: 764px) { + .wallet { + width: 100%; + height: max-content; + border-top-right-radius: inherit; + padding-bottom: 25px; } + .cards { + margin-top: 25px; + } + .currency-box { + width: calc(50% - 25px); + max-width: 260px; + display: inline-block; + margin-right: 25px; + margin-bottom: 25px; + } + .currency-box:nth-of-type(2) { + margin-right: 0; + } + } - @media (max-width: 530px) { - h3 { - line-height: 24px; - } - .cards { - text-align: center; - } - .currency-box { - width: calc(100% - 25px); - max-width: 260px; - } - .currency-box:nth-of-type(2) { - margin-right: 25px; - } - .currency-box:last-of-type { - margin-bottom: 0; - } - .wallet-balance { - font-size: 22px; - } + @media (max-width: 530px) { + h3 { + line-height: 24px; } + .cards { + text-align: center; + } + .currency-box { + width: calc(100% - 25px); + max-width: 260px; + } + .currency-box:nth-of-type(2) { + margin-right: 25px; + } + .currency-box:last-of-type { + margin-bottom: 0; + } + .wallet-balance { + font-size: 22px; + } + } - @media (max-width: 390px) { - .wallet { - height: max-content; - padding: 50px 25px; - } - .transactions-wrapper { - padding: 50px 25px; - } - h2 { - font: 18px/24px 'Open Sans', sans-serif; - } + @media (max-width: 390px) { + .wallet { + height: max-content; + padding: 50px 25px; } - `, - ] + .transactions-wrapper { + padding: 50px 25px; + } + h2 { + font: 18px/24px 'Open Sans', sans-serif; + } + } + `, + ] } constructor() { @@ -676,20 +688,20 @@ class MultiWallet extends LitElement {
Address has no transactions yet.
- + { - if (!currentBlockHeight) { - return render(html``, root) - } - const confirmed = data.item.confirmations >= requiredConfirmations - if (confirmed) { - render(html`check`, root) - } else { - render(html`schedule`, root) - } - }} + if (!currentBlockHeight) { + return render(html``, root) + } + const confirmed = data.item.confirmations >= requiredConfirmations + if (confirmed) { + render(html`check`, root) + } else { + render(html`schedule`, root) + } + }} > { - render(html` ${data.item.type} ${data.item.creatorAddress === this.wallets.get('qort').wallet.address ? html`OUT` : html`IN`} `, root) - }} + render(html` ${data.item.type} ${data.item.creatorAddress === this.wallets.get('qort').wallet.address ? html`OUT` : html`IN`} `, root) + }} > @@ -710,9 +722,9 @@ class MultiWallet extends LitElement { resizable header="Time" .renderer=${(root, column, data) => { - const time = new Date(data.item.timestamp) - render(html` `, root) - }} + const time = new Date(data.item.timestamp) + render(html` `, root) + }} > @@ -723,16 +735,16 @@ class MultiWallet extends LitElement { renderBTCLikeTransactions(transactions, coin) { return html`
Address has no transactions yet.
- + { - const amount = (Number(data.item.totalAmount) / 1e8).toFixed(8) - render(html`${amount}`, root) - }} + const amount = (Number(data.item.totalAmount) / 1e8).toFixed(8) + render(html`${amount}`, root) + }} > { - const time = new Date(data.item.timestamp * 1000) - render(html` `, root) - }} + const time = new Date(data.item.timestamp * 1000) + render(html` `, root) + }} >