diff --git a/frontend/src/app/bisq/bisq-address/bisq-address.component.html b/frontend/src/app/bisq/bisq-address/bisq-address.component.html index 632d396bd..f0033dce0 100644 --- a/frontend/src/app/bisq/bisq-address/bisq-address.component.html +++ b/frontend/src/app/bisq/bisq-address/bisq-address.component.html @@ -1,10 +1,12 @@
-

Address

- - {{ addressString | shortenString : 24 }} - {{ addressString }} - - +

Address

+ + + {{ addressString | shortenString : 24 }} + {{ addressString }} + + +
@@ -13,26 +15,26 @@
-
+
- + - + - +
Total received{{ totalReceived / 100 | number: '1.2-2' }} BSQ{{ totalReceived / 100 | number: '1.2-2' }} BSQ
Total sent{{ totalSent / 100 | number: '1.2-2' }} BSQ{{ totalSent / 100 | number: '1.2-2' }} BSQ
Balance{{ (totalReceived - totalSent) / 100 | number: '1.2-2' }} BSQ (){{ (totalReceived - totalSent) / 100 | number: '1.2-2' }} BSQ
-
+
diff --git a/frontend/src/app/bisq/bisq-address/bisq-address.component.scss b/frontend/src/app/bisq/bisq-address/bisq-address.component.scss index c5961e428..dc0dbcc21 100644 --- a/frontend/src/app/bisq/bisq-address/bisq-address.component.scss +++ b/frontend/src/app/bisq/bisq-address/bisq-address.component.scss @@ -3,21 +3,91 @@ padding: 10px; padding-bottom: 5px; display: inline-block; - margin-right: 25px; } -@media (min-width: 576px) { - .qrcode-col { - text-align: right; - } +.qrcode-col { + text-align: center; } -@media (max-width: 575.98px) { - .qrcode-col { + +.qrcode-col > div { + margin: 20px auto 5px; + @media (min-width: 768px) { text-align: center; + margin: auto; } +} - .qrcode-col > div { - margin-top: 20px; - margin-right: 0px; +.fiat { + display: block; + font-size: 13px; + @media (min-width: 768px) { + display: inline-block; + font-size: 14px; + margin-left: 10px; } +} +.table { + tr td { + &:last-child { + text-align: right; + @media (min-width: 768px) { + text-align: left; + } + } + } +} + +h1 { + margin: 0px; + padding: 0px; + @media (min-width: 576px) { + float: left; + margin-right: 10px; + } +} + +.address-link { + line-height: 26px; + margin-left: 0px; + top: 14px; + position: relative; + display: flex; + flex-direction: row; + @media (min-width: 768px) { + line-height: 38px; + } +} + +.row{ + flex-direction: column; + @media (min-width: 576px) { + flex-direction: row; + } +} + +.scriptmessage { + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; + max-width: 50px; + @media (min-width: 576px) { + max-width: 200px; + } +} + +.scriptmessage.longer { + max-width: 500px; +} + +@media (max-width: 767.98px) { + .mobile-bottomcol { + margin-top: 15px; + } + .scriptmessage.longer { + max-width: 200px !important; + } + + .details-table td:first-child { + white-space: pre-wrap; + } } \ No newline at end of file diff --git a/frontend/src/app/bisq/bisq-block/bisq-block.component.html b/frontend/src/app/bisq/bisq-block/bisq-block.component.html index 0f4c2bffc..2db1ed7d0 100644 --- a/frontend/src/app/bisq/bisq-block/bisq-block.component.html +++ b/frontend/src/app/bisq/bisq-block/bisq-block.component.html @@ -8,9 +8,9 @@ -
+
-
+
@@ -28,7 +28,7 @@
-
+
@@ -73,7 +73,7 @@
-
+
@@ -86,7 +86,7 @@
-
+
diff --git a/frontend/src/app/bisq/bisq-block/bisq-block.component.scss b/frontend/src/app/bisq/bisq-block/bisq-block.component.scss index 0fc8e761e..04e0e1a35 100644 --- a/frontend/src/app/bisq/bisq-block/bisq-block.component.scss +++ b/frontend/src/app/bisq/bisq-block/bisq-block.component.scss @@ -1,10 +1,44 @@ - .td-width { - width: 175px; -} - -@media (max-width: 767.98px) { - .td-width { - width: 140px; + width: 140px; + @media (min-width: 768px) { + width: 175px; } } + +h1 { + margin: 0px; + padding: 0px; + @media (min-width: 576px) { + float: left; + margin-right: 10px; + } +} + +.row{ + flex-direction: column; + @media (min-width: 768px) { + flex-direction: row; + } +} + +.block-container { + .table { + tr td { + &:last-child { + text-align: right; + @media (min-width: 992px) { + text-align: left; + } + } + } + } + .fiat { + display: block; + font-size: 13px; + @media (min-width: 992px) { + display: inline-block; + font-size: 14px; + margin-left: 10px; + } + } +} \ No newline at end of file diff --git a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html index 9d901ac13..e7dc382c1 100644 --- a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html +++ b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.html @@ -18,7 +18,7 @@ - + @@ -26,9 +26,9 @@
- - - + diff --git a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.scss b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.scss index e69de29bb..478fa4c6d 100644 --- a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.scss +++ b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.scss @@ -0,0 +1,3 @@ +.pagination { + overflow: hidden; +} \ No newline at end of file diff --git a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts index 6ca90611e..c52326fdf 100644 --- a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts +++ b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.ts @@ -23,7 +23,7 @@ export class BisqBlocksComponent implements OnInit { isLoading = true; // @ts-ignore paginationSize: 'sm' | 'lg' = 'md'; - paginationMaxSize = 10; + paginationMaxSize = 4; constructor( private websocketService: WebsocketService, diff --git a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html index d85d55f0f..1f4e6c896 100644 --- a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html +++ b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.html @@ -8,49 +8,54 @@ - - - +
+ + + +


-

- Markets - Bitcoin Markets -

- +
+

+ Markets + Bitcoin Markets +

+ +
+
{{ block.height }} {{ calculateTotalOutput(block) / 100 | number: '1.2-2' }} BSQ{{ calculateTotalOutput(block) / 100 | number: '1.2-2' }} BSQ {{ block.txs.length }}
+ + + + + + + + + + + + + + +
Currency PriceVolume (7d) Trades (7d)
{{ ticker.name }}) + + + {{ ticker.last | currency: ticker.market.rsymbol }} + + + + {{ ticker.volume?.num_trades ? ticker.volume?.num_trades : 0 }}
+
- - - - - - - - - - - - - - - -
Currency PriceVolume (7d) Trades (7d)
{{ ticker.name }}) - - - {{ ticker.last | currency: ticker.market.rsymbol }} - - - - {{ ticker.volume?.num_trades }}
+

-

+

Latest Trades

+ -

Latest Trades

- - - + +
diff --git a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.scss b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.scss index 55ad9d40a..3d19ba54d 100644 --- a/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.scss +++ b/frontend/src/app/bisq/bisq-dashboard/bisq-dashboard.component.scss @@ -1,10 +1,35 @@ #volumeHolder { height: 500px; background-color: #000; + overflow: hidden; + display: flex; + justify-content: center; +} + +.table { + max-width: 100%; + overflow: scroll; } .loadingVolumes { position: relative; - top: 50%; + top: 45%; z-index: 100; +} + +.table-container { + overflow: scroll; + -ms-overflow-style: none; + scrollbar-width: none; + font-size: 13px; + @media(min-width: 576px){ + font-size: 16px; + } + &::-webkit-scrollbar { + display: none; + } +} + +.container-info{ + overflow-x: scroll; } \ No newline at end of file diff --git a/frontend/src/app/bisq/bisq-market/bisq-market.component.html b/frontend/src/app/bisq/bisq-market/bisq-market.component.html index c24fe50e9..2f352f58e 100644 --- a/frontend/src/app/bisq/bisq-market/bisq-market.component.html +++ b/frontend/src/app/bisq/bisq-market/bisq-market.component.html @@ -4,14 +4,12 @@

{{ currency.market.rtype === 'crypto' ? currency.market.lname : currency.market.rname }} - {{ currency.pair }}

-
- +
{{ hlocData.hloc[hlocData.hloc.length - 1].close | currency: currency.market.rsymbol }} {{ hlocData.hloc[hlocData.hloc.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }} -
-
+
diff --git a/frontend/src/app/bisq/bisq-market/bisq-market.component.scss b/frontend/src/app/bisq/bisq-market/bisq-market.component.scss index 2a7beb167..8eff75a9d 100644 --- a/frontend/src/app/bisq/bisq-market/bisq-market.component.scss +++ b/frontend/src/app/bisq/bisq-market/bisq-market.component.scss @@ -1,5 +1,14 @@ .priceheader { font-size: 24px; + @media(min-width: 576px){ + float: left; + } +} + +.radio-form { + @media(min-width: 576px){ + float: right; + } } .loadingChart { @@ -11,4 +20,32 @@ #graphHolder { height: 550px; + overflow: hidden; +} + +.col { + &:last-child{ + margin-top: 50px; + @media(min-width: 576px){ + margin-top: 0px; + } + } +} + +.symbol { + color: #ffffff66; + font-size: 11px; +} + +.table-container { + overflow: scroll; + -ms-overflow-style: none; + scrollbar-width: none; + font-size: 13px; + @media(min-width: 576px){ + font-size: 16px; + } + &::-webkit-scrollbar { + display: none; + } } diff --git a/frontend/src/app/bisq/bisq-stats/bisq-stats.component.html b/frontend/src/app/bisq/bisq-stats/bisq-stats.component.html index 7b38b8b0a..4a0fc5027 100644 --- a/frontend/src/app/bisq/bisq-stats/bisq-stats.component.html +++ b/frontend/src/app/bisq/bisq-stats/bisq-stats.component.html @@ -5,20 +5,20 @@
-
+
- + - + - + @@ -33,7 +33,7 @@ - + @@ -44,7 +44,7 @@
Existing amount{{ (stats.minted - stats.burnt) | number: '1.2-2' }} BSQ{{ (stats.minted - stats.burnt) | number: '1.2-2' }} BSQ
Minted amount{{ stats.minted | number: '1.2-2' }} BSQ{{ stats.minted | number: '1.2-2' }} BSQ
Burnt amount{{ stats.burnt | number: '1.2-2' }} BSQ{{ stats.burnt | number: '1.2-2' }} BSQ
Addresses{{ stats.spent_txos | number }}
PricePrice
-
+
diff --git a/frontend/src/app/bisq/bisq-stats/bisq-stats.component.scss b/frontend/src/app/bisq/bisq-stats/bisq-stats.component.scss index e1f02094f..69cf8224e 100644 --- a/frontend/src/app/bisq/bisq-stats/bisq-stats.component.scss +++ b/frontend/src/app/bisq/bisq-stats/bisq-stats.component.scss @@ -7,3 +7,12 @@ width: 175px; } } + +.fiat { + display: block; + font-size: 13px; + @media (min-width: 768px) { + font-size: 14px; + display: inline-block; + } +} \ No newline at end of file diff --git a/frontend/src/app/bisq/bisq-trades/bisq-trades.component.html b/frontend/src/app/bisq/bisq-trades/bisq-trades.component.html index bf783ffa2..3f0b89db0 100644 --- a/frontend/src/app/bisq/bisq-trades/bisq-trades.component.html +++ b/frontend/src/app/bisq/bisq-trades/bisq-trades.component.html @@ -1,39 +1,41 @@ - - - - - - - - - - - - - - +
+
DatePrice - - Amount -
- {{ trade.trade_date | date:'yyyy-MM-dd HH:mm' }} - - {{ trade.price | currency: (trade._market || market).rsymbol }} - {{ trade.price | number: '1.2-' + (trade._market || market).rprecision }} {{ (trade._market || market).rsymbol }} -
+ + + + + + + + - - - - - -
DatePrice + + Amount +
- {{ trade.amount | currency: (trade._market || market).rsymbol }} - {{ trade.amount | number: '1.2-' + (trade._market || market).lprecision }} {{ (trade._market || market).lsymbol }} + {{ trade.trade_date | date:'yyyy-MM-dd HH:mm' }} - {{ trade.volume | currency: (trade._market || market).rsymbol }} - {{ trade.volume | number: '1.2-' + (trade._market || market).rprecision }} {{ (trade._market || market).rsymbol }} + {{ trade.price | currency: (trade._market || market).rsymbol }} + {{ trade.price | number: '1.2-' + (trade._market || market).rprecision }} {{ (trade._market || market).rsymbol }}
+ + + + + {{ trade.amount | currency: (trade._market || market).rsymbol }} + {{ trade.amount | number: '1.2-' + (trade._market || market).lprecision }} {{ (trade._market || market).lsymbol }} + + + + + {{ trade.volume | currency: (trade._market || market).rsymbol }} + {{ trade.volume | number: '1.2-' + (trade._market || market).rprecision }} {{ (trade._market || market).rsymbol }} + + + + + +
diff --git a/frontend/src/app/bisq/bisq-trades/bisq-trades.component.scss b/frontend/src/app/bisq/bisq-trades/bisq-trades.component.scss index e69de29bb..45807f7e4 100644 --- a/frontend/src/app/bisq/bisq-trades/bisq-trades.component.scss +++ b/frontend/src/app/bisq/bisq-trades/bisq-trades.component.scss @@ -0,0 +1,18 @@ + +.symbol { + color: #ffffff66; + font-size: 11px; +} + +.table-container { + overflow: scroll; + -ms-overflow-style: none; + scrollbar-width: none; + font-size: 13px; + @media(min-width: 576px){ + font-size: 16px; + } + &::-webkit-scrollbar { + display: none; + } +} diff --git a/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.html b/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.html index ef700ed28..a4033dcda 100644 --- a/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.html +++ b/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.html @@ -1,24 +1,24 @@
-
+
- + - + - +
Inputs{{ totalInput / 100 | number: '1.2-2' }} BSQ{{ totalInput / 100 | number: '1.2-2' }} BSQ
Outputs{{ totalOutput / 100 | number: '1.2-2' }} BSQ{{ totalOutput / 100 | number: '1.2-2' }} BSQ
Issued amount{{ totalIssued / 100 | number: '1.2-2' }} BSQ{{ totalIssued / 100 | number: '1.2-2' }} BSQ
-
+
diff --git a/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.scss b/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.scss index ee64d3473..f73dfea53 100644 --- a/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.scss +++ b/frontend/src/app/bisq/bisq-transaction-details/bisq-transaction-details.component.scss @@ -8,4 +8,15 @@ .mobile-even tr:nth-of-type(odd) { background-color: inherit; } +} + +.table { + tr td { + &:last-child{ + text-align: right; + @media(min-width: 768px){ + text-align: left; + } + } + } } \ No newline at end of file diff --git a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html index 4e1df26d8..75df75a32 100644 --- a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html +++ b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html @@ -1,16 +1,18 @@
-

Transaction

- - -
@@ -56,12 +58,12 @@ diff --git a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.scss b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.scss index 35000b90e..6dfeccc93 100644 --- a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.scss +++ b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.scss @@ -1,9 +1,144 @@ -.td-width { - width: 175px; +.adjust-btn-padding { + padding: 0.55rem; +} + +.title-block { + padding-top: 1px; } @media (max-width: 767.98px) { - .td-width { - width: 150px; + .mobile-bottomcol { + margin-top: 15px; + } +} + +.td-width { + width: 150px; + @media (min-width: 768px) { + width: 175px; + } +} + + +h1 { + margin-bottom: 0; +} + +.badge { + position: relative; + top: -1px; +} + +.btn-small-height { + line-height: 1.1; +} + +.arrow-green { + color: #1a9436; +} + +.arrow-red { + color: #dc3545; +} + +.btn-success { + float: right; + margin-bottom: 0px; + margin-top: 5px; +} + +.tx-link { + display: block; + width: auto; + margin-bottom: 10px; + margin-left: 2px; + margin-top: 40px; + position: absolute; + @media (min-width: 700px) { + margin-top: 14px; + margin-left: 10px; + position: relative; + text-align: left; + width: 100%; + top: 14px; + left: 10px; + } + } + +.container-xl { + margin-bottom: 40px; +} + +.row{ + flex-direction: column; + @media (min-width: 768px) { + flex-direction: row; + } +} + +.scriptmessage { + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; + max-width: 50px; + @media (min-width: 576px) { + max-width: 200px; + } +} + +.scriptmessage.longer { + max-width: 500px; +} + +@media (max-width: 767.98px) { + .mobile-bottomcol { + margin-top: 15px; + } + .scriptmessage.longer { + max-width: 200px !important; + } + + .details-table td:first-child { + white-space: pre-wrap; + } +} + +.fiat { + display: block; + font-size: 13px; + @media (min-width: 576px){ + display: inline-block; + margin-left: 15px; + font-size: 14px; + text-align: left; + } +} + +h1{ + font-size: 1.75rem; + margin-top: 2px; + margin-bottom: 0; + float: left; + padding-bottom: 40px; + @media (min-width: 375px){ + margin-top: 0px; + font-size: 2rem; + } + @media (min-width: 768px){ + padding-bottom: 10px; + } +} +.transaction-container { + font-size: 14px; + @media (min-width: 576px){ + font-size: 16px; + } + tr td { + &:last-child{ + text-align: right; + @media (min-width: 768px){ + text-align: left; + } + } } } \ No newline at end of file diff --git a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html index 23409855b..e578968b7 100644 --- a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html +++ b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.html @@ -31,10 +31,10 @@ @@ -44,8 +44,9 @@
Burnt amount - {{ bisqTx.burntFee / 100 | number: '1.2-2' }} BSQ () + {{ bisqTx.burntFee / 100 | number: '1.2-2' }} BSQ
Fee per vByte - {{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} sat/vB + {{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} sat/vB   - {{ tx.burntFee / 100 | number: '1.2-2' }} BSQ + {{ tx.burntFee / 100 | number: '1.2-2' }} BSQ - {{ calculateTotalOutput(tx.outputs) / 100 | number: '1.2-2' }} BSQ + {{ calculateTotalOutput(tx.outputs) / 100 | number: '1.2-2' }} BSQ

- - +
diff --git a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.scss b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.scss index a74bbe889..e631cfce4 100644 --- a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.scss +++ b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.scss @@ -7,3 +7,14 @@ label { right: 0px; left: inherit; } + +.pagination { + overflow: hidden; +} + +h1{ + font-size: 1.5rem; + @media(min-width: 375px){ + font-size: 2rem; + } +} \ No newline at end of file diff --git a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts index fd0393e8c..78311e4cd 100644 --- a/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts +++ b/frontend/src/app/bisq/bisq-transactions/bisq-transactions.component.ts @@ -60,7 +60,7 @@ export class BisqTransactionsComponent implements OnInit { // @ts-ignore paginationSize: 'sm' | 'lg' = 'md'; - paginationMaxSize = 10; + paginationMaxSize = 4; txTypes = ['ASSET_LISTING_FEE', 'BLIND_VOTE', 'COMPENSATION_REQUEST', 'GENESIS', 'LOCKUP', 'PAY_TRADE_FEE', 'PROOF_OF_BURN', 'PROPOSAL', 'REIMBURSEMENT_REQUEST', 'TRANSFER_BSQ', 'UNLOCK', 'VOTE_REVEAL', 'IRREGULAR']; diff --git a/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.html b/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.html index fcd908a73..229e84dbc 100644 --- a/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.html +++ b/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.html @@ -58,11 +58,11 @@
-
- Burnt amount: {{ tx.burntFee / 100 | number: '1.2-2' }} BSQ () +
+ Burnt amount: {{ tx.burntFee / 100 | number: '1.2-2' }} BSQ
-
+
+

Genesis Block {{ blockHeight }}

+
@@ -43,12 +43,12 @@ Median fee - ~{{ block.medianFee | number:'1.0-0' }} sat/vB () + ~{{ block.medianFee | number:'1.0-0' }} sat/vB Total fees - () + {{ fees * 100000000 | number }} L-sat () @@ -56,7 +56,7 @@ Subsidy + fees: - () + diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss index 84089f14d..2b8cb8a93 100644 --- a/frontend/src/app/components/block/block.component.scss +++ b/frontend/src/app/components/block/block.component.scss @@ -1,22 +1,93 @@ -.title-block { - color: #FFF; - padding-top: 20px; - padding-bottom: 3px; - border-top: 3px solid #FFF; +.qr-wrapper { + background-color: #FFF; + padding: 10px; + padding-bottom: 5px; + display: inline-block; } -.td-width { - width: 175px; +.qrcode-col { + text-align: center; } -@media (max-width: 767.98px) { - .td-width { - width: 140px; +.qrcode-col > div { + margin: 20px auto 5px; + @media (min-width: 768px) { + text-align: center; + margin: auto; + } +} + +.fiat { + display: block; + font-size: 13px; + @media (min-width: 768px) { + font-size: 14px; + display: inline-block; + margin-left: 10px; + } +} +.table { + tr td { + &:last-child { + text-align: right; + @media (min-width: 768px) { + text-align: left; + } + } + } +} + +h1 { + margin: 0px; + padding: 0px; + @media (min-width: 576px) { + float: left; + margin-right: 10px; + } +} + +.address-link { + line-height: 26px; + margin-left: 0px; + top: 14px; + position: relative; + display: flex; + flex-direction: row; + @media (min-width: 768px) { + line-height: 38px; + } +} + +.row{ + flex-direction: column; + @media (min-width: 768px) { + flex-direction: row; } } +.scriptmessage { + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; + max-width: 50px; + @media (min-width: 576px) { + max-width: 200px; + } +} -.break-all { - white-space: normal; - word-break: break-all; +.scriptmessage.longer { + max-width: 500px; +} + +@media (max-width: 767.98px) { + .mobile-bottomcol { + margin-top: 15px; + } + .scriptmessage.longer { + max-width: 200px !important; + } + + .details-table td:first-child { + white-space: pre-wrap; + } } \ No newline at end of file diff --git a/frontend/src/app/components/fees-box/fees-box.component.html b/frontend/src/app/components/fees-box/fees-box.component.html index ef736e20a..9fe2e66e3 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.html +++ b/frontend/src/app/components/fees-box/fees-box.component.html @@ -1,39 +1,48 @@ - - - - - - -
+
+
+
Low priority
-

- {{ feeEstimations.hourFee }} sat/vB () -

-
+
+
{{ feeEstimations.hourFee }} sat/vB
+
+ +
Medium priority
-

- {{ feeEstimations.halfHourFee }} sat/vB () -

-
+
+
{{ feeEstimations.halfHourFee }} sat/vB
+
+ +
High priority
-

- {{ feeEstimations.fastestFee }} sat/vB () -

-
+
+
{{ feeEstimations.fastestFee }} sat/vB
+
+
+
+
- - +
+
Low priority
-

- - +
+
+
+
+
+
Medium priority
-

- - +
+
+
+
+
+
High priority
-

- - +
+
+
+
+
+
diff --git a/frontend/src/app/components/fees-box/fees-box.component.scss b/frontend/src/app/components/fees-box/fees-box.component.scss index d715af64d..f402f9295 100644 --- a/frontend/src/app/components/fees-box/fees-box.component.scss +++ b/frontend/src/app/components/fees-box/fees-box.component.scss @@ -1,3 +1,84 @@ .card-title { color: #4a68b9; + font-size: 10px; + margin-bottom: 4px; + font-size: 1rem; } + +.card-text { + font-size: 22px; + span { + font-size: 11px; + position: relative; + top: -2px; + display: inline-flex; + } + .green-color { + display: block; + } +} + +.fee-estimation-container { + display: flex; + justify-content: space-between; + @media (min-width: 376px) { + flex-direction: row; + } + .item { + max-width: 150px; + margin: 0; + width: -webkit-fill-available; + @media (min-width: 376px) { + margin: 0 auto 0px; + } + &:first-child{ + display: none; + @media (min-width: 485px) { + display: block; + } + @media (min-width: 768px) { + display: none; + } + @media (min-width: 992px) { + display: block; + } + } + &:last-child { + margin-bottom: 0; + } + .card-text span { + color: #ffffff66; + font-size: 12px; + top: 0px; + } + .fee-text{ + border-bottom: 1px solid #ffffff1c; + width: fit-content; + margin: auto; + line-height: 1.45; + padding: 0px 2px; + } + .fiat { + display: block; + font-size: 14px !important; + } + } +} + +.loading-container{ + min-height: 76px; +} + +.card-text { + .skeleton-loader { + width: 100%; + display: block; + margin: 9px auto; + &:first-child { + max-width: 90px; + } + &:last-child { + max-width: 55px; + } + } +} \ No newline at end of file diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html index 42de6b17a..55b703b35 100644 --- a/frontend/src/app/components/master-page/master-page.component.html +++ b/frontend/src/app/components/master-page/master-page.component.html @@ -48,7 +48,7 @@
    • -
  • +
    • diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss index cac4681d7..0efb6fec8 100644 --- a/frontend/src/app/components/master-page/master-page.component.scss +++ b/frontend/src/app/components/master-page/master-page.component.scss @@ -42,17 +42,21 @@ li.nav-item { justify-content: center; position: fixed; width: 100%; -} - -@media (min-width: 992px) { - .navbar-nav { + @media (min-width: 992px) { background: transparent; box-shadow: none; position: relative; width: auto; } + a { + font-size: 0.8em; + @media (min-width: 375px) { + font-size: 1em; + } + } } + .navbar-collapse { flex-basis: auto; justify-content: flex-end; diff --git a/frontend/src/app/components/mempool-block/mempool-block.component.html b/frontend/src/app/components/mempool-block/mempool-block.component.html index 48ff9a292..7e5a02190 100644 --- a/frontend/src/app/components/mempool-block/mempool-block.component.html +++ b/frontend/src/app/components/mempool-block/mempool-block.component.html @@ -2,7 +2,7 @@

    {{ ordinal$ | async }}

    - +
    @@ -14,15 +14,15 @@ Median fee - ~{{ mempoolBlock.medianFee | number:'1.0-0' }} sat/vB () + ~{{ mempoolBlock.medianFee | number:'1.0-0' }} sat/vB Fee span - {{ mempoolBlock.feeRange[0] | number:'1.0-0' }} - {{ mempoolBlock.feeRange[mempoolBlock.feeRange.length - 1] | number:'1.0-0' }} sat/vB + {{ mempoolBlock.feeRange[0] | number:'1.0-0' }} - {{ mempoolBlock.feeRange[mempoolBlock.feeRange.length - 1] | number:'1.0-0' }} sat/vB Total fees - () + Transactions diff --git a/frontend/src/app/components/mempool-block/mempool-block.component.scss b/frontend/src/app/components/mempool-block/mempool-block.component.scss index ea53d4f0c..4db5e0b10 100644 --- a/frontend/src/app/components/mempool-block/mempool-block.component.scss +++ b/frontend/src/app/components/mempool-block/mempool-block.component.scss @@ -1,5 +1,7 @@ .progress { background-color: #2d3348; + position: relative; + top: 5px; } .title-block { @@ -7,4 +9,33 @@ padding-top: 20px; padding-bottom: 3px; border-top: 3px solid #FFF; +} + +.fiat { + font-size: 13px; + display: block; + @media (min-width: 992px) { + display: inline-block; + margin-left: 10px; + } +} + +.table { + tr td { + &:last-child{ + text-align: right; + @media (min-width: 992px) { + text-align: left; + } + } + } +} + +h1 { + margin: 0px; + padding: 0px; + @media (min-width: 576px) { + float: left; + margin-right: 10px; + } } \ No newline at end of file diff --git a/frontend/src/app/components/search-form/search-form.component.scss b/frontend/src/app/components/search-form/search-form.component.scss index b6aa14d04..c74775c3e 100644 --- a/frontend/src/app/components/search-form/search-form.component.scss +++ b/frontend/src/app/components/search-form/search-form.component.scss @@ -7,17 +7,11 @@ form { margin-top: 5px; -} - -@media (min-width: 576px) { - form { + @media (min-width: 576px) { margin-top: 0px; margin-left: 8px; - } -} - -@media (min-width: 992px) { - form { + } + @media (min-width: 992px) { width: 100%; } } @@ -28,30 +22,19 @@ form { .search-box-container { width: 100%; -} - -.search-box-container input { - border: 0px; -} - -.search-box-container .btn { - width: 100px; -} - -@media (min-width: 768px) { - .search-box-container { + @media (min-width: 768px) { min-width: 400px; } -} - -@media (min-width: 992px) { - .search-box-container { - min-width: 260px; + @media (min-width: 992px) { + min-width: 200px; } -} - -@media (min-width: 1200px) { - .search-box-container { + @media (min-width: 1200px) { min-width: 300px; } -} + input { + border: 0px; + } + .btn { + width: 100px; + } +} \ No newline at end of file diff --git a/frontend/src/app/components/statistics/chartist.component.scss b/frontend/src/app/components/statistics/chartist.component.scss index e69de29bb..6eceb7edc 100644 --- a/frontend/src/app/components/statistics/chartist.component.scss +++ b/frontend/src/app/components/statistics/chartist.component.scss @@ -0,0 +1,6 @@ +.ct-legend{ + top: 130px; + @media (min-width: 653px) { + top: 90px; + } +} \ No newline at end of file diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html index e0b1ec90a..3728ab698 100644 --- a/frontend/src/app/components/statistics/statistics.component.html +++ b/frontend/src/app/components/statistics/statistics.component.html @@ -1,21 +1,17 @@ -
    - -
    -
    +
    +
    +

    Loading graphs...


    - -
    - +
    Mempool by vBytes (sat/vByte) - - +
    -
    -
    -
    diff --git a/frontend/src/app/components/statistics/statistics.component.scss b/frontend/src/app/components/statistics/statistics.component.scss index ff9bdb585..8e8761841 100644 --- a/frontend/src/app/components/statistics/statistics.component.scss +++ b/frontend/src/app/components/statistics/statistics.component.scss @@ -1,7 +1,13 @@ +.container-graph { + padding: 0px 15px; +} + .card-header { border-bottom: 0; - background-color: none; - font-size: 20px; + font-size: 18px; + @media (min-width: 465px) { + font-size: 20px; + } } .card { @@ -15,12 +21,23 @@ margin-right: 10px; } -@media (max-width: 767.98px) { - .container-xl { - padding: 0; - } - .card-body { +.card-body { + @media (max-width: 767.98px) { padding-left: 0; padding-right: 0; } } + +.formRadioGroup{ + margin-top: 6px; + @media (min-width: 653px) { + float: right; + margin-top: 0px; + } + .btn-sm { + font-size: 10px; + @media (min-width: 768px) { + font-size: 14px; + } + } +} diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html index 106e49663..d0c053821 100644 --- a/frontend/src/app/components/transaction/transaction.component.html +++ b/frontend/src/app/components/transaction/transaction.component.html @@ -9,26 +9,29 @@
    -

    Transaction

    +

    Transaction

    - - - - - - - -
    - +
    + {{ txId | shortenString : 24 }} {{ txId }}
    + +
    + + + + + + +
    +
    @@ -163,7 +166,7 @@ {{ cpfpInfo.bestDescendant.weight / 4 | vbytes: 2 }} - {{ cpfpInfo.bestDescendant.fee / (cpfpInfo.bestDescendant.weight / 4) | number : '1.1-1' }} sat/vB + {{ cpfpInfo.bestDescendant.fee / (cpfpInfo.bestDescendant.weight / 4) | number : '1.1-1' }} sat/vB @@ -176,7 +179,7 @@ {{ cpfpTx.weight / 4 | vbytes: 2 }} - {{ cpfpTx.fee / (cpfpTx.weight / 4) | number : '1.1-1' }} sat/vB + {{ cpfpTx.fee / (cpfpTx.weight / 4) | number : '1.1-1' }} sat/vB @@ -324,12 +327,12 @@ Fee - {{ tx.fee | number }} sat () + {{ tx.fee | number }} sat Fee rate - {{ tx.feePerVsize | number : '1.1-1' }} sat/vB + {{ tx.feePerVsize | number : '1.1-1' }} sat/vB   @@ -339,7 +342,7 @@ Effective fee rate - {{ tx.effectiveFeePerVsize | number : '1.1-1' }} sat/vB + {{ tx.effectiveFeePerVsize | number : '1.1-1' }} sat/vB diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss index 77b4ccf49..c26e257cd 100644 --- a/frontend/src/app/components/transaction/transaction.component.scss +++ b/frontend/src/app/components/transaction/transaction.component.scss @@ -6,8 +6,49 @@ color: #FFF; padding-top: 20px; border-top: 3px solid #FFF; + width: 100%; + padding-bottom: 30px; + @media (min-width: 768px) { + padding-bottom: 0px; + } } + +h1{ + font-size: 1.75rem; + margin-top: 2px; + margin-bottom: 0; + float: left; + @media (min-width: 375px){ + margin-top: 0px; + font-size: 2rem; + } +} + +.container-buttons { + text-align: right; + width: 100%; + @media (min-width: 992px) { + width: 300px; + } +} + +.tx-link { + display: block; + width: auto; + margin-bottom: 10px; + margin-left: 2px; + margin-top: 40px; + position: absolute; + @media (min-width: 768px) { + margin-top: 14px; + margin-left: 10px; + position: relative; + text-align: left; + width: 100%; + } + } + @media (max-width: 767.98px) { .mobile-bottomcol { margin-top: 15px; @@ -15,19 +56,13 @@ } .td-width { - width: 175px; -} + width: 150px; -@media (max-width: 767.98px) { - .td-width { - width: 150px; + @media (max-width: 768px) { + width: 175px; } } -h1 { - margin-bottom: 0; -} - .badge { position: relative; top: -1px; @@ -43,4 +78,75 @@ h1 { .arrow-red { color: #dc3545; -} \ No newline at end of file +} + +.btn { + // float: right; + // margin-bottom: 0px; + margin-top: 5px; +} + +.container-xl { + margin-bottom: 40px; +} + +.row{ + flex-direction: column; + @media (min-width: 850px) { + flex-direction: row; + } +} + +.scriptmessage { + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; + max-width: 50px; + @media (min-width: 576px) { + max-width: 200px; + } +} + +.scriptmessage.longer { + max-width: 500px; +} + +@media (max-width: 767.98px) { + .mobile-bottomcol { + margin-top: 15px; + } + .scriptmessage.longer { + max-width: 200px !important; + } + + .details-table td:first-child { + white-space: pre-wrap; + } +} + +.fiat { + display: block; + @media (min-width: 768px){ + display: inline-block; + margin-left: 15px; + text-align: left; + } +} + +.table { + tr td { + &:last-child { + text-align: right; + @media (min-width: 768px) { + text-align: left; + } + } + .btn { + display: block; + } + } +} +// .container-buttons{ +// width: 100%; +// display: inline-block; +// } \ No newline at end of file diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html index 251fecf2a..e28c93a5a 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.html +++ b/frontend/src/app/components/transactions-list/transactions-list.component.html @@ -198,7 +198,7 @@
    - {{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} sat/vB  – {{ tx.fee | number }} sat () + {{ tx.fee / (tx.weight / 4) | number : '1.1-1' }} sat/vB  – {{ tx.fee | number }} sat
    diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.scss b/frontend/src/app/components/transactions-list/transactions-list.component.scss index 6da7e6202..a70072ac3 100644 --- a/frontend/src/app/components/transactions-list/transactions-list.component.scss +++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss @@ -19,9 +19,9 @@ left: 0; right: calc(-1*30px/3); width: 0; - height: 0; + height: 0; border-top: 6.66px solid transparent; - border-bottom: 6.66px solid transparent + border-bottom: 6.66px solid transparent } .arrow:after { @@ -38,52 +38,49 @@ } .arrow.green:before { - border-left: 10px solid #28a745; + border-left: 10px solid #28a745; } .arrow.green:after { - background-color:#28a745; + background-color:#28a745; } .arrow.red:before { - border-left: 10px solid #dc3545; + border-left: 10px solid #dc3545; } .arrow.red:after { - background-color:#dc3545; + background-color:#dc3545; } .arrow.grey:before { - border-left: 10px solid #6c757d; + border-left: 10px solid #6c757d; } .arrow.grey:after { - background-color:#6c757d; + background-color:#6c757d; } .scriptmessage { - max-width: 280px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; + width: 100%; + max-width: 50px; + @media (min-width: 768px) { + max-width: 200px; + } } .scriptmessage.longer { max-width: 500px; + @media (min-width: 375px) { + max-width: 200px !important; + } } -@media (max-width: 767.98px) { - .mobile-bottomcol { - margin-top: 15px; - } - - .scriptmessage { - max-width: 90px !important; - } - .scriptmessage.longer { - max-width: 280px !important; - } - - .details-table td:first-child { - white-space: pre-wrap; +.mobile-bottomcol { + margin-top: 15px; + @media (min-width: 992px) { + margin-top: 0px; } } @@ -93,6 +90,9 @@ .details-table td { padding: 0.75rem; + &:first-child { + white-space: pre-wrap; + } } .details-table td:nth-child(2) { @@ -101,3 +101,58 @@ font-family: "Courier New", Courier, monospace; font-size: 12px; } + +.smaller-text { + font-size: 12px; + @media (min-width: 576px) { + font-size: 14px !important; + } +} + +.longer { + max-width: 100% !important; + width: 200px; + display: inline-block; +} + +.row{ + flex-direction: column; + @media (min-width: 992px) { + flex-direction: row; + } +} + +.extra-info { + display: none; + @media (min-width: 576px) { + display: inline-table; + } + .fiat { + font-size: 14px; + margin-left: 10px; + text-align: right; + } + .sats { + color: #ffffff66; + font-size: 11px; + } +} + +.transaction-fee { + display: block; + margin: 0px auto 5px; + @media (min-width: 576px) { + display: inline-table; + } +} + +.btn-container { + text-align: right; + @media (min-width: 576px) { + display: inline-table; + float: right; + } +} +.fiat { + margin-left: 10px; +} diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html index d789ed074..4626ddd41 100644 --- a/frontend/src/app/dashboard/dashboard.component.html +++ b/frontend/src/app/dashboard/dashboard.component.html @@ -73,19 +73,19 @@
    Latest blocks
    - +
    - - - - + + + + - - - - + + +
    HeightMinedTXsSizeHeightMinedTXsSize
    {{ block.height }}{{ block.tx_count | number }} + {{ block.height }}{{ block.tx_count | number }}
     
    {{ block.size | bytes: 2 }}
    @@ -102,19 +102,19 @@
    Latest transactions
    - +
    - - - - + + + + - - - - + + + +
    TXIDAmountUSDFeeTXIDAmountUSDFee
    {{ transaction.txid | shortenString : 10 }}{{ transaction.fee / transaction.vsize | number : '1.1-1' }} sat/vB{{ transaction.txid | shortenString : 10 }}{{ transaction.fee / transaction.vsize | number : '1.1-1' }} sat/vB
    @@ -160,32 +160,30 @@ - - - - - - -
    -
    Minimum fee
    -
    Purging
     -

    - < {{ mempoolInfoData.value.memPoolInfo.mempoolminfee * 100000 | number : '1.1-1' }} sat/vB -

    -     		-
    Memory usage
    -
    -
    -
     
    -
    {{ mempoolInfoData.value.memPoolInfo.usage | bytes }} / {{ mempoolInfoData.value.memPoolInfo.maxmempool | bytes }}
    -
    +
    +
    +
    Minimum fee
    +
    Purging
     +

    + < {{ mempoolInfoData.value.memPoolInfo.mempoolminfee * 100000 | number : '1.1-1' }} sat/vB +

    +
    +
    +
    Unconfirmed
    +

    + {{ mempoolInfoData.value.memPoolInfo.size | number }} TXs +

    +
    +
    +
    Memory usage
    +
    +
    +
     
    +
    {{ mempoolInfoData.value.memPoolInfo.usage | bytes }} / {{ mempoolInfoData.value.memPoolInfo.maxmempool | bytes }}
    -
    		-
    Unconfirmed
    -

    - {{ mempoolInfoData.value.memPoolInfo.size | number }} TXs -

    -
    +
    +
    +
    diff --git a/frontend/src/app/dashboard/dashboard.component.scss b/frontend/src/app/dashboard/dashboard.component.scss index c58ce1bb4..3b483e20d 100644 --- a/frontend/src/app/dashboard/dashboard.component.scss +++ b/frontend/src/app/dashboard/dashboard.component.scss @@ -1,18 +1,24 @@ .dashboard-container { padding-bottom: 60px; -} -@media (min-width: 992px) { - .dashboard-container { + @media (min-width: 992px) { padding-bottom: 0px; } + .table { + .fiat{ + color: #ffffff66; + font-size: 10px; + } + } } .card { background-color: #1d1f31; + height: 100%; } .card-title { color: #4a68b9; + font-size: 1rem; } .info-block { @@ -33,7 +39,7 @@ } .skeleton-loader { - max-width: 200px; + max-width: 100%; } .more-padding { @@ -41,5 +47,147 @@ } .graph-card { - height: 385px; + height: 100%; + @media (min-width: 992px) { + height: 385px; + } } + +.mempool-info-data { + display: block; + @media (min-width: 485px) { + display: flex; + flex-direction: row; + } + h5 { + margin-bottom: 10px; + } + .item { + width: 124px; + margin: 0px auto 20px; + display: inline-block; + @media (min-width: 400px) { + width: 50%; + } + &:last-child { + margin: 0px auto 0px; + } + &:nth-child(2) { + order: 2; + @media (min-width: 485px) { + order: 3; + } + } + &:nth-child(3) { + order: 3; + @media (min-width: 485px) { + order: 2; + display: block; + } + @media (min-width: 768px) { + display: none; + } + @media (min-width: 992px) { + display: block; + } + } + .card-text { + font-size: 18px; + span { + color: #ffffff66; + font-size: 12px; + } + } + } + .bar { + width: 93%; + margin: 0px 5px 20px; + @media (min-width: 485px) { + max-width: 200px; + margin: 0px auto 0px; + } + } +} + +.latest-transactions { + width: 100%; + text-align: left; + tr, td, th { + border: 0px; + } + .table-cell-txid { + width: 20%; + } + .table-cell-satoshis { + display: none; + text-align: right; + width: 30%; + @media (min-width: 576px) { + display: table-cell; + } + @media (min-width: 768px) { + display: none; + } + @media (min-width: 1100px) { + display: table-cell; + } + } + .table-cell-fiat { + display: none; + text-align: right; + width: 30%; + @media (min-width: 485px) { + display: table-cell; + } + @media (min-width: 768px) { + display: none; + } + @media (min-width: 992px) { + display: table-cell; + } + } + .table-cell-fees { + width: 25%; + text-align: right; + } +} + +.lastest-blocks-table { + width: 100%; + text-align: left; + tr, td, th { + border: 0px; + } + .table-cell-height { + width: 15%; + } + .table-cell-mined { + width: 35%; + text-align: right; + @media (min-width: 376px) { + text-align: left; + } + } + .table-cell-transaction-count { + display: none; + text-align: right; + width: 20%; + @media (min-width: 376px) { + display: table-cell; + } + } + .table-cell-size { + display: none; + text-align: center; + width: 30%; + @media (min-width: 485px) { + display: table-cell; + } + @media (min-width: 768px) { + display: none; + } + @media (min-width: 992px) { + display: table-cell; + } + } +} \ No newline at end of file diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 6262ebeed..d9c376ddc 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -55,10 +55,15 @@ html, body { body { background-color: #11131f; min-width: 320px; + padding-bottom: 60px; } .container { position: relative; + padding-bottom: 60px; +} +.container-xl { + padding-bottom: 60px; } :focus { @@ -161,6 +166,26 @@ body { } } +.symbol { + color: #ffffff66; + font-size: 11px; +} + +.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; +} + .smaller-text { font-size: 14px; } @@ -175,6 +200,10 @@ body { .table { margin-bottom: 0; + font-size: 0.9rem; + @media (min-width: 576px) { + font-size: 1rem; + } } .close {