From aab6c613ab636a1420941ab4525ff25239f05db9 Mon Sep 17 00:00:00 2001 From: Gabriel Rodriguez Alsina Date: Tue, 26 Mar 2019 15:14:10 -0300 Subject: [PATCH] (fix) feedback on #194 --- scripts/selectTheme.js | 2 ++ src/App.js | 5 ++- .../ethereum-classic/logos/logo-foreign.svg | 21 ++++------- .../ethereum-classic/logos/logo-loading.svg | 29 ++------------- .../themes/ethereum-classic/logos/logo.svg | 8 ++--- .../stylesheets/application.classic.css | 1 + src/assets/stylesheets/application.core.css | 1 + src/assets/stylesheets/application.css | 1 + src/assets/stylesheets/application/_base.scss | 2 +- .../stylesheets/application/_bridge.scss | 22 ++++++++++-- .../stylesheets/components/_footer.scss | 13 ------- src/assets/stylesheets/themes/_core.scss | 1 + .../stylesheets/themes/_ethereum-classic.scss | 19 +++++----- src/components/Bridge.js | 35 +++++++++++++++++-- src/components/BridgeNetwork.js | 11 +++--- src/components/Footer.js | 1 - 16 files changed, 91 insertions(+), 81 deletions(-) create mode 100644 src/assets/stylesheets/application.classic.css create mode 100644 src/assets/stylesheets/application.core.css create mode 100644 src/assets/stylesheets/application.css diff --git a/scripts/selectTheme.js b/scripts/selectTheme.js index cb641a6c..9420f465 100644 --- a/scripts/selectTheme.js +++ b/scripts/selectTheme.js @@ -7,9 +7,11 @@ const fs = require('fs'); const stylePath = path.resolve(__dirname, '..', 'src', 'assets', 'stylesheets'); const destinationFilename = 'application.css'; let filename; + if (process.env.APP_STYLES === 'classic') { filename = 'application.classic.css' } else { filename = 'application.core.css' } + fs.copyFileSync(path.resolve(stylePath, filename), path.resolve(stylePath, destinationFilename)); \ No newline at end of file diff --git a/src/App.js b/src/App.js index 304c0907..8d08f2e7 100644 --- a/src/App.js +++ b/src/App.js @@ -38,8 +38,8 @@ export class App extends React.Component {
}/>
@@ -53,8 +53,7 @@ export class App extends React.Component { - +
diff --git a/src/assets/images/themes/ethereum-classic/logos/logo-foreign.svg b/src/assets/images/themes/ethereum-classic/logos/logo-foreign.svg index 84f614b4..e275cb96 100644 --- a/src/assets/images/themes/ethereum-classic/logos/logo-foreign.svg +++ b/src/assets/images/themes/ethereum-classic/logos/logo-foreign.svg @@ -1,17 +1,8 @@ - - - - - - - - - - - - - - - + + + + + + diff --git a/src/assets/images/themes/ethereum-classic/logos/logo-loading.svg b/src/assets/images/themes/ethereum-classic/logos/logo-loading.svg index 56a1dfec..592361f8 100644 --- a/src/assets/images/themes/ethereum-classic/logos/logo-loading.svg +++ b/src/assets/images/themes/ethereum-classic/logos/logo-loading.svg @@ -1,27 +1,4 @@ - - - - - - Bridge UI App + + + diff --git a/src/assets/images/themes/ethereum-classic/logos/logo.svg b/src/assets/images/themes/ethereum-classic/logos/logo.svg index c90b4496..e8bb525f 100644 --- a/src/assets/images/themes/ethereum-classic/logos/logo.svg +++ b/src/assets/images/themes/ethereum-classic/logos/logo.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/src/assets/stylesheets/application.classic.css b/src/assets/stylesheets/application.classic.css new file mode 100644 index 00000000..dc1cd9c4 --- /dev/null +++ b/src/assets/stylesheets/application.classic.css @@ -0,0 +1 @@ +.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-controls{display:flex;justify-content:space-between}.footer{left:0;right:0}.container{position:relative;width:960px;margin-left:auto;margin-right:auto}@media (max-width: 980px){.container{width:98%}}html,body,p,h1,h2,h3{font-weight:normal;margin:0;padding:0}html{display:flex;min-height:100%}body{background-color:#17132b;box-sizing:border-box;font-family:"Nunito",sans-serif;padding-bottom:66px;position:relative;width:100%}@media screen and (max-width: 768px){body{padding-bottom:160px}}a{color:#2be187;text-decoration:none}a:hover{text-decoration:underline}button{color:#08b3f2;cursor:pointer;margin-left:5px}button:hover{text-decoration:underline}input,button{border:0;font-size:14px;margin:0;outline:none;padding:0}strong{font-weight:700}.hidden{overflow:hidden}.label{font-weight:700;margin-bottom:7px;margin-top:15px}.description{color:#8197a2;line-height:24px}.break-all{word-break:break-all}.separator{background-color:#333;height:51px;width:1px}@media screen and (max-width: 768px){.separator{display:none}}.app-container{margin-left:auto;margin-right:auto;position:relative;width:100%}.only-mobile{display:none}@media screen and (max-width: 768px){.only-mobile{display:inherit}}.bridge-container{align-items:center;display:flex;height:80vh;margin-left:auto;margin-right:auto;position:relative;width:100%}@media screen and (max-width: 768px){.bridge-container{height:512px}}.bridge{display:flex;flex-direction:column;overflow:hidden;width:100%}.bridge .bridge-home{align-self:center;background-image:linear-gradient(to right, #fff, #fff);display:flex;height:80px;width:960px}@media screen and (max-width: 768px){.bridge .bridge-home{display:none}}.bridge .bridge-home .bridge-home-container{background-color:#17132b;min-width:60px;width:9%}.bridge .bridge-home .bridge-home-container .home-logo-container{align-items:center;background-color:#fff;border-radius:10px;border-bottom-right-radius:0;display:flex;height:100%;justify-content:center}.bridge .bridge-home .home-address-container{align-items:center;background-color:#17132b;border-bottom-left-radius:10px;display:flex;width:92%}.bridge .bridge-home .home-address-container .icon-wallet{padding:20px}.bridge .bridge-foreign{align-self:center;background-image:linear-gradient(to right, #fff, #fff);display:flex;height:80px;width:960px}@media screen and (max-width: 768px){.bridge .bridge-foreign{display:none}}.bridge .bridge-foreign .bridge-foreign-container{background-color:#17132b;min-width:60px;width:9%}.bridge .bridge-foreign .bridge-foreign-container .foreign-logo-container{align-items:center;background-color:#fff;border-radius:10px;border-top-left-radius:0;display:flex;height:100%;justify-content:center}.bridge .bridge-foreign .foreign-address-container{align-items:center;background-color:#17132b;border-top-right-radius:10px;display:flex;justify-content:flex-end;text-align:right;width:92%}.bridge .bridge-foreign .foreign-address-container .icon-wallet{padding:20px}.bridge .address-label{color:#31f896;font-size:12px}.bridge .address-description{color:#31f896;font-size:16px;font-weight:700}@media screen and (max-width: 768px){.bridge .address-description{font-size:9px}}.bridge .bridge-transfer{height:276px;display:flex;justify-content:center}@media screen and (max-width: 768px){.bridge .bridge-transfer{height:389px}}.bridge .bridge-transfer .left-image-wrapper{background-color:#fff}.bridge .bridge-transfer .left-image-wrapper .left-image{background-color:#17132b;background-image:url("../images/themes/ethereum-classic/bridge/pattern-1.png");background-position:calc(100% - 5px) 5px;background-repeat:no-repeat;background-size:contain;border-top-right-radius:10px;height:276px;max-width:100%;width:272px}@media screen and (max-width: 768px){.bridge .bridge-transfer .left-image-wrapper .left-image{display:none}}.bridge .bridge-transfer .right-image-wrapper{background-color:#fff}.bridge .bridge-transfer .right-image-wrapper .right-image{background-color:#17132b;background-image:url("../images/themes/ethereum-classic/bridge/pattern-2.png");background-position:5px 5px;background-repeat:no-repeat;background-size:contain;border-bottom-left-radius:10px;height:276px;max-width:100%;width:272px}@media screen and (max-width: 768px){.bridge .bridge-transfer .right-image-wrapper .right-image{display:none}}.bridge .bridge-transfer .bridge-transfer-content{background-image:linear-gradient(to right, #fff, #fff);border-bottom-left-radius:10px;border-top-right-radius:10px;display:flex;flex-shrink:0;flex-wrap:wrap;width:880px}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content{border-radius:8px;flex-direction:column;max-width:92%}}.bridge .bridge-transfer .bridge-transfer-content .bridge-transfer-content-background{display:flex;flex-shrink:0;flex-wrap:wrap;width:880px}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .bridge-transfer-content-background{background-image:url("../images/themes/ethereum-classic/transparent.png");background-position:center;background-repeat:no-repeat;background-size:164px 203px;flex-direction:column;width:auto}}.bridge .bridge-transfer .bridge-transfer-content .network-container-home{align-items:flex-start;display:flex;flex-direction:column;height:136px;justify-content:space-evenly;padding:70px 1% 70px 5%;width:22%}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .network-container-home{align-items:center;align-self:center;height:136px;padding:5px 0 5px 0;width:auto}}.bridge .bridge-transfer .bridge-transfer-content .network-container-foreign{align-items:flex-end;display:flex;flex-direction:column;height:136px;justify-content:space-evenly;padding:70px 5% 70px 1%;width:22%}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .network-container-foreign{align-items:center;align-self:center;height:136px;padding:5px 0 5px 0;width:auto}}.bridge .bridge-transfer .bridge-transfer-content .bridge-network-data{align-items:center;cursor:pointer;display:flex}.bridge .bridge-transfer .bridge-transfer-content .network-basic-label{font-size:13px;color:#352d59}.bridge .bridge-transfer .bridge-transfer-content .network-title{color:#352d59;display:block;font-size:24px;font-weight:700}.bridge .bridge-transfer .bridge-transfer-content .network-name{color:#352d59;display:block;font-size:24px;font-weight:700}.bridge .bridge-transfer .bridge-transfer-content .text-left{text-align:left}@media screen and (max-width: 414px){.bridge .bridge-transfer .bridge-transfer-content .text-left{text-align:center}}.bridge .bridge-transfer .bridge-transfer-content .text-right{text-align:right}@media screen and (max-width: 414px){.bridge .bridge-transfer .bridge-transfer-content .text-right{text-align:center}}.bridge .bridge-transfer .bridge-transfer-content .network-id{color:#352d59;font-size:14px;font-weight:700;line-height:26px}.bridge .bridge-transfer .bridge-transfer-content .network-id-container{background-color:#2be187;border-radius:3px;height:26px;margin-left:10px;text-align:center;width:32px}.bridge .bridge-transfer .bridge-transfer-content .network-balance{color:#352d59;font-size:13px;font-weight:700}.bridge .bridge-transfer .bridge-transfer-content .network-show-more{color:#2be187;font-size:14px;font-weight:700}.bridge .bridge-transfer .bridge-transfer-content .info-icon{align-items:center;display:flex;justify-content:center}.bridge .bridge-transfer .bridge-transfer-content .info-icon path{fill:#2be187}.bridge .bridge-transfer .bridge-transfer-content .info-icon-left{margin-right:10px}.bridge .bridge-transfer .bridge-transfer-content .info-icon-right{margin-left:10px}.bridge .bridge-transfer .bridge-transfer-content .transfer-right{background-image:url("../images/themes/ethereum-classic/transparent.png");background-position:center;background-repeat:no-repeat}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .transfer-right{background-image:none}}.bridge .bridge-transfer .bridge-transfer-content .transfer-left{background-image:url("../images/themes/ethereum-classic/transparent.png");background-position:center;background-repeat:no-repeat}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .transfer-left{background-image:none}}.bridge .bridge-transfer .bridge-transfer-content .form-container{height:276px;max-width:384px;width:44%}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container{align-self:center;height:97px;width:100%}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form{display:flex;flex-direction:column;height:276px;justify-content:space-evenly}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form{height:auto;width:100%}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-controls{background-color:#f7f6ff;border-radius:5px;padding:8px 8px 8px 0}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-controls{background-color:unset;flex-direction:column;padding:8px 8px 8px 8px}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form .bridge-form-input-container{display:flex;justify-content:space-between;width:292px}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form .bridge-form-input-container{background-color:rgba(251,251,252,0.2);border-radius:3px 3px 0 0;width:100%}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-input{background-color:transparent;color:#352d59;font-size:24px;font-weight:700;height:48px;padding-left:16px;width:165px}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-input::placeholder{color:#666;font-size:24px;font-weight:700}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-input::placeholder{font-size:18px}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-input::placeholder{opacity:0.3}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-input{font-size:18px}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-label{color:rgba(53,45,89,0.5);font-size:24px;font-weight:700;line-height:48px;margin:0 10px;text-transform:uppercase}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-label{font-size:18px}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-button{background-color:#2be187;border-radius:3px;color:#fff;display:block;flex-shrink:0;font-weight:700;height:48px;text-decoration:none;width:92px}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-button{border-radius:0 0 3px 3px;width:100%}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-button:hover{background-color:#1bbe6d}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form .bridge-transfer-direction{font-size:14px;color:#352d59}.bridge .bridge-statistics-container{align-self:center;margin-top:60px}@media screen and (max-height: 720px){.bridge .bridge-statistics-container{margin-top:30px}}.bridge .network-details{display:flex;flex-direction:column;min-width:558px}@media screen and (max-width: 768px){.bridge .network-details{min-width:100%}}.bridge .network-details .details-logo-container{align-items:center;background-color:#fff;border-radius:10px;border-bottom-right-radius:0;display:flex;height:80px;justify-content:center;width:85px}@media screen and (max-width: 768px){.bridge .network-details .details-logo-container{display:none}}.bridge .network-details .details-logo-container:after{content:"";position:absolute;height:10px;width:20px;bottom:0}@media screen and (max-width: 768px){.bridge .network-details .details-logo-container:after{display:none}}.bridge .network-details .details-logo-container:after{border-radius:0 0 0 10px;box-shadow:-10px 0 0 0 #fff;right:453px;top:70px}@media screen and (max-width: 768px){.bridge .network-details .details-logo-container:after{display:none}}.bridge .network-details .details-body{align-self:flex-end;background-color:#fff;border-radius:0 10px 10px 10px;display:flex;flex-direction:column;height:254px;justify-content:space-between;padding:38px;width:440px}@media screen and (max-width: 768px){.bridge .network-details .details-body{align-self:center;border-radius:10px 10px 10px 10px;height:430px;padding:20px 15px 20px 15px;width:85%}}@media screen and (max-width: 768px) and (min-width: 415px){.bridge .network-details .details-body{height:300px}}@media screen and (max-width: 600px){.bridge .network-details .details-body{height:250px}}.bridge .network-details .details-body .details-data-container{display:flex;justify-content:space-between}@media screen and (max-width: 768px){.bridge .network-details .details-body .details-data-container{flex-direction:column}}.bridge .network-details .details-body .details-data-container .details-label{color:#352d59;font-size:14px}.bridge .network-details .details-body .details-data-container .details-description{color:#2be187;font-size:14px}.bridge .network-details .details-body .details-data-container .details-description-black{color:#352d59;font-size:14px;font-weight:700}.bridge .network-details .details-body .details-data-container .details-copy{cursor:pointer}.bridge .network-details .details-body:before{content:"";position:absolute;height:10px;width:20px;bottom:0}@media screen and (max-width: 768px){.bridge .network-details .details-body:before{display:none}}.bridge .network-details .details-body:before{left:22px;top:80px;border-radius:0 10px 0 0;box-shadow:10px 0 0 0 #fff}@media screen and (max-width: 768px){.bridge .network-details .details-body:before{display:none}}.bridge .transfer-alert{background-color:#fff;border-radius:8px;display:flex;height:265px;width:600px}@media screen and (max-width: 768px){.bridge .transfer-alert{flex-direction:column;height:auto;width:100%}}.bridge .transfer-alert .image-container{margin-right:20px;width:166px}@media screen and (max-width: 768px){.bridge .transfer-alert .image-container{width:100%}}.bridge .transfer-alert .image-container .arrows-icon{height:128px;margin-left:42px;margin-top:39px;width:124px}.bridge .transfer-alert .alert-container{display:flex;flex-direction:column;justify-content:space-around;padding-bottom:40px;padding-right:60px;padding-top:40px;width:374px}@media screen and (max-width: 768px){.bridge .transfer-alert .alert-container{padding-left:5px;padding-top:0;width:100%}}.bridge .transfer-alert .alert-container .alert-corner{height:12px;width:10px}.bridge .transfer-alert .alert-container .transfer-title{align-items:center;color:#352d59;display:flex;font-size:14px;justify-content:space-between}.bridge .transfer-alert .alert-container .transfer-title path{fill:#31f896}.bridge .transfer-alert .alert-container .transfer-title .alert-logo-box{align-items:center;background-color:#31f896;border-radius:4px;display:flex;height:50px;justify-content:center;width:50px}.bridge .transfer-alert .alert-container .transfer-description{color:#352d59;font-size:14px;line-height:1.71;padding-bottom:10px;padding-top:10px}.bridge .transfer-alert .alert-container .transfer-buttons{display:flex;justify-content:space-between;padding:20px 0 0}.bridge .transfer-alert .alert-container .transfer-buttons .transfer-confirm{background-color:#2be187;border-radius:3px;color:#fff;flex-grow:1;font-size:15px;font-weight:700;height:40px;max-width:49%;text-decoration:none}.bridge .transfer-alert .alert-container .transfer-buttons .transfer-confirm:hover{background-color:#1bbe6d}.bridge .transfer-alert .alert-container .transfer-buttons .transfer-cancel{background-color:#fff;border-radius:3px;border:solid 1px #352d59;color:#352d59;flex-grow:1;font-size:15px;font-weight:700;height:40px;max-width:49%;text-decoration:none}.bridge .transfer-alert .alert-container .transfer-buttons .transfer-cancel:hover{opacity:0.7}.noWallet-alert{background-color:#fff;border-radius:10px 8px 8px 10px;display:flex;height:380px;width:540px}@media screen and (max-width: 360px){.noWallet-alert{padding-top:60px}}@media screen and (max-width: 768px){.noWallet-alert{flex-direction:column;width:92%;height:auto;margin-left:4%}}.noWallet-alert .noWallet-image-container{background-image:linear-gradient(to right, #352d59, #352d59);border-radius:8px 0 0 8px;width:150px}@media screen and (max-width: 768px){.noWallet-alert .noWallet-image-container{display:none}}.noWallet-alert .noWallet-image-container .noWallet-icon{margin-top:0;width:150px}.noWallet-alert .noWallet-alert-container{display:flex;flex-direction:column;justify-content:space-around;padding:24px 30px;width:389px}@media screen and (max-width: 768px){.noWallet-alert .noWallet-alert-container{align-self:center;padding:10px 0;width:88%}}.noWallet-alert .noWallet-alert-container .noWallet-title{color:#352d59;font-size:24px;line-height:1}@media screen and (max-width: 768px){.noWallet-alert .noWallet-alert-container .noWallet-title{font-size:30px;padding-top:2%;padding-bottom:2%}}.noWallet-alert .noWallet-alert-container .noWallet-description{color:#666;font-size:14px;line-height:1.71;padding-bottom:10px;padding-top:10px}@media screen and (max-width: 768px){.noWallet-alert .noWallet-alert-container .noWallet-description{padding-left:1%;padding-right:1%}}.noWallet-alert .noWallet-buttons{column-gap:10px;display:grid;grid-template-columns:1fr 1fr;row-gap:10px}@media screen and (max-width: 414px){.noWallet-alert .noWallet-buttons{grid-template-columns:1fr}}.noWallet-alert .noWallet-buttons .noWallet-metamask{background-color:#2be187;border-radius:3px;color:#fff;line-height:36px;text-align:center;text-decoration:none}.noWallet-alert .noWallet-buttons .noWallet-metamask:hover{background-color:#1bbe6d}.noWallet-alert .noWallet-buttons .noWallet-niftyWallet{background-color:#352d59;border-radius:3px;color:#fff;line-height:36px;text-align:center;text-decoration:none}.noWallet-alert .noWallet-buttons .noWallet-niftyWallet:hover{background-color:#211c37}.noWallet-alert .noWallet-buttons .noWallet-alphawallet{background-color:#64a231;border-radius:3px;color:#fff;line-height:36px;text-align:center;text-decoration:none}.noWallet-alert .noWallet-buttons .noWallet-alphawallet:hover{background-color:#4c7b25}.noWallet-alert .noWallet-buttons .noWallet-cancel{background-color:#fff;border-radius:3px;border:1px solid #352d59;color:#352d59;height:36px;text-decoration:none}.noWallet-alert .noWallet-buttons .noWallet-cancel:hover{opacity:0.7}.disclaimer-alert{background-color:#fff;border-radius:8px;display:flex;padding:15px 0;width:600px}@media screen and (max-width: 768px){.disclaimer-alert{flex-direction:column;margin:0 auto;width:92%}}.disclaimer-alert .image-container{width:164px}@media screen and (max-width: 768px){.disclaimer-alert .image-container{display:none}}.disclaimer-alert .image-container .disclaimer-icon{height:173px;margin-left:25px;margin-top:44px;width:117px}.disclaimer-alert .alert-container{display:flex;flex-direction:column;justify-content:space-around;padding-bottom:40px;padding-right:46px;padding-top:40px;width:389px}@media screen and (max-width: 768px){.disclaimer-alert .alert-container{align-self:center;padding:10px 0;width:88%}}.disclaimer-alert .alert-container .alert-corner{height:12px;width:10px}.disclaimer-alert .alert-container .disclaimer-title{color:#352d59;font-size:24px;line-height:1}@media screen and (max-width: 768px){.disclaimer-alert .alert-container .disclaimer-title{font-size:30px;padding-bottom:2%;padding-top:2%}}.disclaimer-alert .alert-container .disclaimer-description{color:#352d59;font-size:14px;line-height:1.71;padding-bottom:10px;padding-top:10px}@media screen and (max-width: 768px){.disclaimer-alert .alert-container .disclaimer-description{padding-left:1%;padding-right:1%}}.disclaimer-alert .alert-container .disclaimer-tos{color:#352d59;padding-left:5px}.disclaimer-alert .alert-container .disclaimer-link{color:#2be187}.disclaimer-alert .alert-container .disclaimer-buttons .disclaimer-confirm{background-color:#2be187;border-radius:3px;color:#fff;font-size:15px;font-weight:700;height:40px;text-decoration:none;min-width:100px}.disclaimer-alert .alert-container .disclaimer-buttons .disclaimer-confirm:hover{background-color:#1bbe6d}.disclaimer-alert .alert-container .disclaimer-buttons .disclaimer-confirm-disabled{background-color:#2be187;border-radius:3px;color:#fff;cursor:default;font-size:15px;font-weight:700;height:40px;opacity:0.5;text-decoration:none;min-width:100px}.green{color:#2be187}.red{color:#f13662}.purple{color:#31f896}.blue{color:#3ab9fe}.background-green{background-color:#2be187}.background-red{background-color:#f13662}.background-purple{background-color:#31f896}.background-blue{background-color:#3ab9fe}.events-page{display:flex;justify-content:center;padding-top:40px}.events-page .events-container{max-width:100%;width:960px}@media screen and (max-width: 768px){.events-page .events-container{padding-left:15px;padding-right:15px}}.events-page .events-container .events-header{display:flex;justify-content:space-between}@media screen and (max-width: 414px){.events-page .events-container .events-header{flex-direction:column}}.events-page .events-container .events-header .events-header-title{color:#fff;font-size:24px;line-height:38px}.events-page .events-container .events-header .events-filter-container{background-color:#fff;border-radius:3px;border:solid 1px #dadada;display:flex;height:38px;width:400px}@media screen and (max-width: 768px){.events-page .events-container .events-header .events-filter-container{width:auto}}.events-page .events-container .events-header .events-filter-container .events-filter{color:#333;font-size:14px;line-height:38px;padding-left:10px;width:205px}@media screen and (max-width: 330px){.events-page .events-container .events-header .events-filter-container .events-filter{width:180px}}.events-page .events-container .events-header .events-filter-container .events-filter::placeholder{color:#b2b2b2}.events-page .events-container .events-header .events-filter-container .events-filter-icon{align-self:center;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAA0lBMVEWAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6McEf5GAAAARXRSTlMAAQIDBQYHDA0bHB8gISQmJyg+P0BGR0lMU1RVWFlcXV5iY2tsdXZ4iYqLo6Spqqusra7Cw8TFysvM29zm5+jr8vP4+fzSh6raAAABM0lEQVR4AYWTeVeCQBTFr6AtuaTYkpUVlqZm0JIaLhjBfP+v1NxDyDCcA7+/3nLPecu8QULFGs/9MPTnE6uCPIa9EntWtgGN5lJkWDaR4WwnNHYWFM5DxsLXfqN22Ok7sXeR5ts/jHy0Er/1Tj9oJ77J+tEICqOIfZiIsalnXlUwNvifn/O50HA5bQWky45OoHHMTrsgY2nNkONFhscgX9K6Ro6eDH+C+NKqI0ddhn0QFjtAjhpb2wuOigQscVpQorzJScGYRYv65aLSVTvQcLhqI7YHQjJEhqHyWDC/+dxPUHjkc3tm4nYC6t/Sg3GFdgGX8ZHNeo1qtdGb0ZNEd4oiEBq6ouNlc95zRMW9+nHWaXptG3jQFTCs6YJfbzG1OL+m0EkVt2WKLUoUGxRxs91c/QFA1F3oKOgExAAAAABJRU5ErkJggg==);background-position:center center;background-repeat:no-repeat;background-size:16px 16px;display:inline-block;height:16px;margin-left:5px;margin-right:10px;width:16px}.events-page .events-container .events-header .events-filter-container .events-select{background-color:#fff;border-left:solid 1px #dadada;border:solid 1px white;color:#333;font-size:14px;height:38px;line-height:38px;text-align:left;width:154px}@media screen and (max-width: 768px){.events-page .events-container .events-header .events-filter-container .events-select{width:auto}}.events-page .events-container .events-columns{display:flex;justify-content:space-between;margin-top:38px}.events-page .events-container .events-columns .column-title{color:#fff;font-size:14px;font-weight:700;text-align:left}@media screen and (max-width: 768px){.events-page .events-container .events-columns{display:none}}.events-page .events-container .events-header-separator{background-color:#e4e4e4;height:3px;margin-top:20px;width:100%}.events-page .events-container .txhash-column{width:375px}@media screen and (max-width: 768px){.events-page .events-container .txhash-column{width:300px}}.events-page .events-container .recipient-column{width:300px}.events-page .events-container .value-column{width:150px}.events-page .events-container .block-column{text-align:right;width:100px}.events-page .events-container .event{display:flex;justify-content:space-between;line-height:26px;padding-bottom:22px;padding-top:22px}@media screen and (max-width: 768px){.events-page .events-container .event{flex-direction:column}}.events-page .events-container .event-tx-container{line-height:26px}@media screen and (max-width: 768px){.events-page .events-container .event-tx-container{display:flex;flex-direction:column}}.events-page .events-container .event-tx-container .event-name{border-radius:3px;color:#fff;font-size:14px;font-weight:700;height:26px;line-height:26px;margin-right:5px;padding:5px 15px;text-align:left;width:66px}@media screen and (max-width: 768px){.events-page .events-container .event-tx-container .event-name{width:fit-content}}.events-page .events-container .event-tx-container .event-txhash{color:#31f896;font-size:14px;text-align:left;text-decoration:none}.events-page .events-container .event-tx-container .event-copy-tx{cursor:pointer;margin-left:10px}.events-page .events-container .event-recipient{color:#31f896;font-size:14px;text-align:left;text-decoration:none}.events-page .events-container .event-recipient-label{color:#fff}.events-page .events-container .event-value{color:#fff;font-size:14px;text-align:left}.events-page .events-container .event-block{color:#fff;font-size:14px;text-align:right}@media screen and (max-width: 768px){.events-page .events-container .event-block{text-align:left}}.events-page .events-container .event-separator{background-color:#e4e4e4;height:1px;width:100%}.foreign-logo{background-image:url("../images/themes/ethereum-classic/logos/logo-foreign.svg");background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:38px;width:24px}.foreign-logo.foreign-logo-modal{background-image:url("../images/themes/ethereum-classic/logos/logo-foreign.svg")}.alert-logo-box .foreign-logo{max-height:75%;max-width:75%}.home-logo{background-image:url("../images/themes/ethereum-classic/logos/logo-home.svg");background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:39px;width:25px}.home-logo.home-logo-modal{background-image:url("../images/themes/ethereum-classic/logos/logo-home.svg")}.alert-logo-box .home-logo{max-height:75%;max-width:75%}@keyframes fadeOut{0%{opacity:.2}20%{opacity:1;transform:scale(1)}100%{opacity:.2;transform:scale(0.3)}}.loading-logo{background-image:url("../images/themes/ethereum-classic/logos/logo-loading.svg");background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:50px;width:234px}.loading-container{align-items:center;background-color:rgba(23,19,43,0.9);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000000}.loading-i{animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:fadeOut;animation-timing-function:linear;background-color:#2be187;border-radius:1px;height:50px;opacity:.2;width:2px}.loading-i:nth-child(2){animation-delay:.1s}.loading-text{color:#fff;font-size:24px;font-stretch:normal;font-style:normal;font-weight:normal;letter-spacing:normal;line-height:3;text-align:center;width:500px}@media screen and (max-width: 414px){.loading-text{font-size:18px}}@media screen and (max-width: 414px){.mobile-container{flex-direction:column}}.network-modal{align-items:center;display:flex;justify-content:center;overflow-y:scroll}.network-modal .modal{border-radius:10px;min-height:410px;min-width:558px;position:relative}@media screen and (max-width: 768px){.network-modal .modal{top:30px}}@media screen and (max-width: 600px){.network-modal .modal{top:60px}}@media screen and (max-width: 414px){.network-modal .modal{min-width:100%;top:0}}.network-modal .modal .title{margin-bottom:20px;text-transform:uppercase;font-size:24px;font-weight:700}.network-modal .modal .description{color:#8197a2;font-size:13px;line-height:24px;margin-bottom:25px}.network-modal .modal .close-button{padding:15px;position:absolute;right:-40px;top:40px;z-index:400000}.network-modal .modal .close-button i.icon:before{content:url("../images/modal/close.svg")}.network-modal .modal .close-button:hover{cursor:pointer}@media screen and (max-width: 600px){.network-modal .modal .close-button{right:-10px}}@media screen and (max-width: 414px){.network-modal .modal .close-button{top:-40px;right:0}}.pattern-background{margin-left:auto;overflow:hidden;padding-top:25px;width:15%}.pattern-background .pattern-background-image{background-image:url("../images/themes/ethereum-classic/background/bg-pattern.svg");background-position:0 50%;background-repeat:repeat-x;height:360px;min-width:192px}@media screen and (max-width: 1024px){.pattern-background{display:none}}.statistics-page{display:flex;justify-content:center}.statistics-page .statistics-page-container{display:flex;flex-direction:column;max-width:960px;padding-bottom:25px;width:70%}@media screen and (max-width: 1024px){.statistics-page .statistics-page-container{width:100%}}@media screen and (max-width: 768px){.statistics-page .statistics-page-container{padding-left:15px;padding-right:15px}}.statistics-page .statistics-page-container .statistics-title{color:#fff;display:block;font-size:24px;line-height:1.5;margin:0 0 20px;text-align:left}.statistics-page .statistics-page-container .statistics-bridge-container{display:flex;flex-direction:column;padding-top:30px}.statistics-page .statistics-page-container .statistics-bridge-container .statistics-bridge-data{display:flex;justify-content:space-evenly}@media screen and (max-width: 768px){.statistics-page .statistics-page-container .statistics-bridge-container .statistics-bridge-data{column-gap:30px;display:grid;grid-template-columns:1fr 1fr;row-gap:20px}}.statistics-page .statistics-page-container .statistics-transaction-container{display:flex;justify-content:space-between;padding-top:90px}@media screen and (max-width: 768px){.statistics-page .statistics-page-container .statistics-transaction-container{flex-direction:column;padding-top:45px}}.statistics-page .statistics-page-container .statistics-transaction-container .statistics-deposit-container{width:40%}@media screen and (max-width: 768px){.statistics-page .statistics-page-container .statistics-transaction-container .statistics-deposit-container{margin-bottom:40px;width:auto}}.statistics-page .statistics-page-container .statistics-transaction-container .statistics-withdraw-container{width:40%}@media screen and (max-width: 768px){.statistics-page .statistics-page-container .statistics-transaction-container .statistics-withdraw-container{width:auto}}.statistics-page .statistics-page-container .statistics-transaction-container .statistics-bridge-data{display:flex;justify-content:space-evenly}@media screen and (max-width: 768px){.statistics-page .statistics-page-container .statistics-transaction-container .statistics-bridge-data{column-gap:30px;display:grid;grid-template-columns:1fr 1fr;row-gap:20px}}.statistics-page .statistics-left-container{margin-right:auto;padding-top:25px;width:15%}@media screen and (max-width: 1024px){.statistics-page .statistics-left-container{display:none}}.status-page{display:flex;justify-content:center}.status-page .status-page-container{display:flex;flex-direction:column;max-width:960px;width:70%;padding-bottom:25px}@media screen and (max-width: 1024px){.status-page .status-page-container{width:100%}}@media screen and (max-width: 768px){.status-page .status-page-container{padding-left:15px;padding-right:15px}}.status-page .status-page-container .status-title{color:#fff;font-size:24px;line-height:3;text-align:left}.status-page .status-page-container .status-configuration-container{display:flex;flex-direction:column;padding-top:30px}.status-page .status-page-container .status-configuration-container .status-configuration-data{display:flex;justify-content:space-evenly}@media screen and (max-width: 768px){.status-page .status-page-container .status-configuration-container .status-configuration-data{column-gap:30px;display:grid;grid-template-columns:1fr 1fr;row-gap:20px}}.status-page .status-page-container .status-authorities-container{display:flex;flex-direction:column;margin-top:80px}.status-page .status-page-container .status-authorities-container .status-authorities-title{padding-bottom:30px}.status-page .status-page-container .status-authorities-container .status-authorities-data{display:flex;flex-direction:column}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority{display:flex;padding-bottom:20px}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-number{color:#fff;font-size:30px;font-weight:700;line-height:59px;padding-right:20px;text-align:left}@media screen and (max-width: 768px){.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-number{padding-right:5px}}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-logo{background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:59px;margin-left:20px;width:59px}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-logo.authority-logo-0{background-image:url("../images/themes/ethereum-classic/status/authority/logo-0.svg")}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-logo.authority-logo-1{background-image:url("../images/themes/ethereum-classic/status/authority/logo-1.svg")}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-logo.authority-logo-2{background-image:url("../images/themes/ethereum-classic/status/authority/logo-2.svg")}@media screen and (max-width: 768px){.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-logo{display:none}}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-address{color:#31f896;font-size:16px;font-weight:700;line-height:59px;padding-left:20px;text-align:left}@media screen and (max-width: 768px){.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-address{font-size:12px;padding-left:0}}.status-page .status-left-container{margin-right:auto;padding-top:25px;width:15%}@media screen and (max-width: 1024px){.status-page .status-left-container{display:none}}.copy-icon{cursor:pointer}.copy-icon path{fill:#31f896}.copy-icon-right{margin-left:10px}.copy-icon-left{margin-left:10px}@media screen and (max-width: 768px){.daily-quota-modal-container{display:none}}.daily-quota-modal-container .daily-quota-modal-arrow{border-bottom:10px solid #000;border-left:10px solid transparent;border-right:10px solid transparent;border-top:none;content:" ";position:absolute;top:-10px;z-index:9999}.daily-quota-modal-container .daily-quota-modal{background-color:#fff;border-radius:3px;border:solid 1px #e4e4e9;box-shadow:0 16px 20px 0 rgba(0,0,0,0.05);height:102px;position:fixed;width:219px;z-index:999}.daily-quota-modal-container .daily-quota-modal .modal-container{display:flex;flex-direction:column;height:72px;justify-content:space-between;padding:15px}.daily-quota-modal-container .daily-quota-modal .modal-container .daily-quota-title{color:#31f896;font-size:14px;font-weight:bold;text-align:left}.daily-quota-modal-container .daily-quota-modal .modal-container .daily-quota-description{color:#352d59;font-size:12px;height:45px;text-align:left;width:172px}.daily-quota-modal-container .daily-quota-modal:after{border-bottom:6px solid #e4e4e9;border-left:6px solid transparent;border-right:6px solid transparent;border-top:none;content:" ";position:absolute;right:105px;top:-6px}.datablock-container{align-items:center;display:flex;flex-direction:column;justify-content:space-evenly}@media screen and (max-width: 768px){.datablock-container{align-items:normal;justify-content:flex-start}}.datablock-container .datablock-value{color:#31f896;font-size:30px;font-weight:bold}.datablock-container .datablock-type{color:#31f896;font-size:18px;margin-left:10px}.datablock-container .datablock-description{color:#fff;font-size:14px}.footer{background-color:#221c3f;bottom:0;color:#fff;padding:18px 0;position:absolute}.footer .container{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between}@media screen and (max-width: 768px){.footer .container{flex-direction:column}}.footer .social-icons{order:2}@media screen and (max-width: 768px){.footer .social-icons{margin-top:15px;order:1}}.footer-logo{background-image:url("../images/themes/ethereum-classic/logos/logo.svg");background-repeat:no-repeat;background-size:contain;display:block;height:29px;left:0;order:0;width:158px}.header{background-color:#221c3f;background-position:center center;background-repeat:no-repeat;background-size:cover;width:100%;z-index:9999}.header .container{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between}@media screen and (max-width: 414px){.header .container{padding:22px 0;width:93%}}@media screen and (max-width: 768px){.header .container{padding:22px 0}}.header-logo{background-image:url("../images/themes/ethereum-classic/logos/logo.svg");background-repeat:no-repeat;background-size:contain;display:block;height:41px;width:224px}.header-menu{align-items:center;display:flex;justify-content:space-between;max-width:700px}@media screen and (max-width: 414px){.header-menu{display:none}}@media screen and (max-width: 768px){.header-menu{justify-content:flex-end;width:auto}}.header-wallet{background-color:#352d59;display:flex;flex-direction:column;height:70px;justify-content:space-evenly;width:220px}@media screen and (max-width: 768px){.header-wallet{display:none}}.header-wallet .wallet-container{display:flex;padding-left:20px}.header-wallet .wallet-container .wallet-icon{margin-right:10px}.header-wallet .wallet-container .wallet-icon path{fill:#31f896}.header-wallet .wallet-container .wallet-text{color:#fff;font-size:14px;font-weight:bold;line-height:18px}.header-wallet .wallet-container .wallet-text:hover{text-decoration:none}.header-wallet .wallet-container .wallet-link{cursor:pointer}.header-wallet .wallet-container .wallet-text-metamask{color:#31f896}.header-wallet .daily-quota-container{background-color:rgba(255,255,255,0.2);border-radius:3px;height:6px;margin-left:20px;width:180px}.header-wallet .daily-quota-container .daily-quota-progress{background-color:#31f896;border-radius:3px;height:6px}.menu-items{font-weight:bold;line-height:16px;margin:0 15px;text-decoration:none}@media screen and (max-width: 414px){.menu-items{margin-left:0}}.menu-items:hover{text-decoration:none}.menu-items-text{color:#fff;margin-left:10px}.menu-items-icon{float:left}.menu-items-icon path{fill:#31f896}@media screen and (max-width: 414px){.mobile-menu{background-color:#17132b;height:172px}}.mobile-menu-links{display:none}@media screen and (max-width: 414px){.mobile-menu-links{display:flex;align-items:center;flex-direction:column;height:100%;justify-content:space-evenly}}@media screen and (max-width: 414px){.mobile-menu-open{background-color:rgba(23,19,43,0.9);height:100%;position:fixed;width:100%;z-index:1000000}}.mobile-menu-is-open{min-height:100%;position:fixed;width:100%}.mobile-menu-button{display:none}@media screen and (max-width: 414px){.mobile-menu-button{display:block}}.mobile-menu-button path{fill:#31f896}.social-icons{display:flex}.social-icons-item{align-items:center;background-color:#343053;border-radius:3px;display:flex;height:30px;justify-content:center;margin-right:10px;transition:box-shadow .15s ease-out;width:30px}.social-icons-item:hover{box-shadow:0 0 15px 0 rgba(102,102,102,0.3)}.social-icons-item:last-child{margin-right:0}.social-icons-item svg{width:16px}.social-icons-item path{fill:#b9b0e1} diff --git a/src/assets/stylesheets/application.core.css b/src/assets/stylesheets/application.core.css new file mode 100644 index 00000000..0d726688 --- /dev/null +++ b/src/assets/stylesheets/application.core.css @@ -0,0 +1 @@ +.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-controls{display:flex;justify-content:space-between}.footer{left:0;right:0}.container{position:relative;width:960px;margin-left:auto;margin-right:auto}@media (max-width: 980px){.container{width:98%}}html,body,p,h1,h2,h3{font-weight:normal;margin:0;padding:0}html{display:flex;min-height:100%}body{background-color:#fff;box-sizing:border-box;font-family:"Nunito",sans-serif;padding-bottom:66px;position:relative;width:100%}@media screen and (max-width: 768px){body{padding-bottom:160px}}a{color:#5c34a2;text-decoration:none}a:hover{text-decoration:underline}button{color:#08b3f2;cursor:pointer;margin-left:5px}button:hover{text-decoration:underline}input,button{border:0;font-size:14px;margin:0;outline:none;padding:0}strong{font-weight:700}.hidden{overflow:hidden}.label{font-weight:700;margin-bottom:7px;margin-top:15px}.description{color:#8197a2;line-height:24px}.break-all{word-break:break-all}.separator{background-color:#e4e4e4;height:51px;width:1px}@media screen and (max-width: 768px){.separator{display:none}}.app-container{margin-left:auto;margin-right:auto;position:relative;width:100%}.only-mobile{display:none}@media screen and (max-width: 768px){.only-mobile{display:inherit}}.bridge-container{align-items:center;display:flex;height:80vh;margin-left:auto;margin-right:auto;position:relative;width:100%}@media screen and (max-width: 768px){.bridge-container{height:512px}}.bridge{display:flex;flex-direction:column;overflow:hidden;width:100%}.bridge .bridge-home{align-self:center;background-image:linear-gradient(to right, #5c34a2, #7b5ab2);display:flex;height:80px;width:960px}@media screen and (max-width: 768px){.bridge .bridge-home{display:none}}.bridge .bridge-home .bridge-home-container{background-color:#fff;min-width:60px;width:9%}.bridge .bridge-home .bridge-home-container .home-logo-container{align-items:center;background-color:#5c34a2;border-radius:10px;border-bottom-right-radius:0;display:flex;height:100%;justify-content:center}.bridge .bridge-home .home-address-container{align-items:center;background-color:#fff;border-bottom-left-radius:10px;display:flex;width:92%}.bridge .bridge-home .home-address-container .icon-wallet{padding:20px}.bridge .bridge-foreign{align-self:center;background-image:linear-gradient(to right, #5c34a2, #7b5ab2);display:flex;height:80px;width:960px}@media screen and (max-width: 768px){.bridge .bridge-foreign{display:none}}.bridge .bridge-foreign .bridge-foreign-container{background-color:#fff;min-width:60px;width:9%}.bridge .bridge-foreign .bridge-foreign-container .foreign-logo-container{align-items:center;background-color:#7b5ab2;border-radius:10px;border-top-left-radius:0;display:flex;height:100%;justify-content:center}.bridge .bridge-foreign .foreign-address-container{align-items:center;background-color:#fff;border-top-right-radius:10px;display:flex;justify-content:flex-end;text-align:right;width:92%}.bridge .bridge-foreign .foreign-address-container .icon-wallet{padding:20px}.bridge .address-label{color:#5c34a2;font-size:12px}.bridge .address-description{color:#5c34a2;font-size:16px;font-weight:700}@media screen and (max-width: 768px){.bridge .address-description{font-size:9px}}.bridge .bridge-transfer{height:276px;display:flex;justify-content:center}@media screen and (max-width: 768px){.bridge .bridge-transfer{height:389px}}.bridge .bridge-transfer .left-image-wrapper{background-color:#5c34a2}.bridge .bridge-transfer .left-image-wrapper .left-image{background-color:#fff;background-image:url("../images/themes/core/bridge/pattern-1.png");background-position:calc(100% - 5px) 5px;background-repeat:no-repeat;background-size:contain;border-top-right-radius:10px;height:276px;max-width:100%;width:272px}@media screen and (max-width: 768px){.bridge .bridge-transfer .left-image-wrapper .left-image{display:none}}.bridge .bridge-transfer .right-image-wrapper{background-color:#7b5ab2}.bridge .bridge-transfer .right-image-wrapper .right-image{background-color:#fff;background-image:url("../images/themes/core/bridge/pattern-2.png");background-position:5px 5px;background-repeat:no-repeat;background-size:contain;border-bottom-left-radius:10px;height:276px;max-width:100%;width:272px}@media screen and (max-width: 768px){.bridge .bridge-transfer .right-image-wrapper .right-image{display:none}}.bridge .bridge-transfer .bridge-transfer-content{background-image:linear-gradient(to right, #5c34a2, #7b5ab2);border-bottom-left-radius:10px;border-top-right-radius:10px;display:flex;flex-shrink:0;flex-wrap:wrap;width:880px}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content{border-radius:8px;flex-direction:column;max-width:92%}}.bridge .bridge-transfer .bridge-transfer-content .bridge-transfer-content-background{display:flex;flex-shrink:0;flex-wrap:wrap;width:880px}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .bridge-transfer-content-background{background-image:url("../images/themes/core/bridge/center-image-pointing-down@2x.png");background-position:center;background-repeat:no-repeat;background-size:164px 203px;flex-direction:column;width:auto}}.bridge .bridge-transfer .bridge-transfer-content .network-container-home{align-items:flex-start;display:flex;flex-direction:column;height:136px;justify-content:space-evenly;padding:70px 1% 70px 5%;width:22%}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .network-container-home{align-items:center;align-self:center;height:136px;padding:5px 0 5px 0;width:auto}}.bridge .bridge-transfer .bridge-transfer-content .network-container-foreign{align-items:flex-end;display:flex;flex-direction:column;height:136px;justify-content:space-evenly;padding:70px 5% 70px 1%;width:22%}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .network-container-foreign{align-items:center;align-self:center;height:136px;padding:5px 0 5px 0;width:auto}}.bridge .bridge-transfer .bridge-transfer-content .bridge-network-data{align-items:center;cursor:pointer;display:flex}.bridge .bridge-transfer .bridge-transfer-content .network-basic-label{font-size:13px;color:#fff}.bridge .bridge-transfer .bridge-transfer-content .network-title{color:#fff;display:block;font-size:24px;font-weight:700}.bridge .bridge-transfer .bridge-transfer-content .network-name{color:#fff;display:block;font-size:24px;font-weight:700}.bridge .bridge-transfer .bridge-transfer-content .text-left{text-align:left}@media screen and (max-width: 414px){.bridge .bridge-transfer .bridge-transfer-content .text-left{text-align:center}}.bridge .bridge-transfer .bridge-transfer-content .text-right{text-align:right}@media screen and (max-width: 414px){.bridge .bridge-transfer .bridge-transfer-content .text-right{text-align:center}}.bridge .bridge-transfer .bridge-transfer-content .network-id{color:#fff;font-size:14px;font-weight:700;line-height:26px}.bridge .bridge-transfer .bridge-transfer-content .network-id-container{background-color:#60db97;border-radius:3px;height:26px;margin-left:10px;text-align:center;width:32px}.bridge .bridge-transfer .bridge-transfer-content .network-balance{color:#60db97;font-size:13px;font-weight:700}.bridge .bridge-transfer .bridge-transfer-content .network-show-more{color:#60db97;font-size:14px;font-weight:700}.bridge .bridge-transfer .bridge-transfer-content .info-icon{align-items:center;display:flex;justify-content:center}.bridge .bridge-transfer .bridge-transfer-content .info-icon path{fill:#60db97}.bridge .bridge-transfer .bridge-transfer-content .info-icon-left{margin-right:10px}.bridge .bridge-transfer .bridge-transfer-content .info-icon-right{margin-left:10px}.bridge .bridge-transfer .bridge-transfer-content .transfer-right{background-image:url("../images/themes/core/bridge/center-image-pointing-right.svg");background-position:center;background-repeat:no-repeat}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .transfer-right{background-image:none}}.bridge .bridge-transfer .bridge-transfer-content .transfer-left{background-image:url("../images/themes/core/bridge/center-image-pointing-left.svg");background-position:center;background-repeat:no-repeat}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .transfer-left{background-image:none}}.bridge .bridge-transfer .bridge-transfer-content .form-container{height:276px;max-width:384px;width:44%}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container{align-self:center;height:97px;width:100%}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form{display:flex;flex-direction:column;height:276px;justify-content:space-evenly}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form{height:auto;width:100%}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-controls{background-color:rgba(251,251,252,0.2);border-radius:5px;padding:8px 8px 8px 0}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-controls{background-color:unset;flex-direction:column;padding:8px 8px 8px 8px}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form .bridge-form-input-container{display:flex;justify-content:space-between;width:292px}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form .bridge-form-input-container{background-color:rgba(251,251,252,0.2);border-radius:3px 3px 0 0;width:100%}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-input{background-color:transparent;color:#fff;font-size:24px;font-weight:700;height:48px;padding-left:16px;width:165px}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-input::placeholder{color:rgba(255,255,255,0.7);font-size:24px;font-weight:700}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-input::placeholder{font-size:18px}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-input::placeholder{opacity:0.3}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-input{font-size:18px}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-label{color:#fff;font-size:24px;font-weight:700;line-height:48px;margin:0 10px;text-transform:uppercase}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-label{font-size:18px}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-button{background-color:#60db97;border-radius:3px;color:#fff;display:block;flex-shrink:0;font-weight:700;height:48px;text-decoration:none;width:92px}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-button{border-radius:0 0 3px 3px;width:100%}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-button:hover{background-color:#36d27c}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form .bridge-transfer-direction{font-size:14px;color:#fff}.bridge .bridge-statistics-container{align-self:center;margin-top:60px}@media screen and (max-height: 720px){.bridge .bridge-statistics-container{margin-top:30px}}.bridge .network-details{display:flex;flex-direction:column;min-width:558px}@media screen and (max-width: 768px){.bridge .network-details{min-width:100%}}.bridge .network-details .details-logo-container{align-items:center;background-color:#fff;border-radius:10px;border-bottom-right-radius:0;display:flex;height:80px;justify-content:center;width:85px}@media screen and (max-width: 768px){.bridge .network-details .details-logo-container{display:none}}.bridge .network-details .details-logo-container:after{content:"";position:absolute;height:10px;width:20px;bottom:0}@media screen and (max-width: 768px){.bridge .network-details .details-logo-container:after{display:none}}.bridge .network-details .details-logo-container:after{border-radius:0 0 0 10px;box-shadow:-10px 0 0 0 #fff;right:453px;top:70px}@media screen and (max-width: 768px){.bridge .network-details .details-logo-container:after{display:none}}.bridge .network-details .details-body{align-self:flex-end;background-color:#fff;border-radius:0 10px 10px 10px;display:flex;flex-direction:column;height:254px;justify-content:space-between;padding:38px;width:440px}@media screen and (max-width: 768px){.bridge .network-details .details-body{align-self:center;border-radius:10px 10px 10px 10px;height:430px;padding:20px 15px 20px 15px;width:85%}}@media screen and (max-width: 768px) and (min-width: 415px){.bridge .network-details .details-body{height:300px}}@media screen and (max-width: 600px){.bridge .network-details .details-body{height:250px}}.bridge .network-details .details-body .details-data-container{display:flex;justify-content:space-between}@media screen and (max-width: 768px){.bridge .network-details .details-body .details-data-container{flex-direction:column}}.bridge .network-details .details-body .details-data-container .details-label{color:#333;font-size:14px}.bridge .network-details .details-body .details-data-container .details-description{color:#5c34a2;font-size:14px}.bridge .network-details .details-body .details-data-container .details-description-black{color:#333;font-size:14px;font-weight:700}.bridge .network-details .details-body .details-data-container .details-copy{cursor:pointer}.bridge .network-details .details-body:before{content:"";position:absolute;height:10px;width:20px;bottom:0}@media screen and (max-width: 768px){.bridge .network-details .details-body:before{display:none}}.bridge .network-details .details-body:before{left:22px;top:80px;border-radius:0 10px 0 0;box-shadow:10px 0 0 0 #fff}@media screen and (max-width: 768px){.bridge .network-details .details-body:before{display:none}}.bridge .transfer-alert{background-color:#fff;border-radius:8px;display:flex;height:265px;width:600px}@media screen and (max-width: 768px){.bridge .transfer-alert{flex-direction:column;height:auto;width:100%}}.bridge .transfer-alert .image-container{margin-right:20px;width:166px}@media screen and (max-width: 768px){.bridge .transfer-alert .image-container{width:100%}}.bridge .transfer-alert .image-container .arrows-icon{height:128px;margin-left:42px;margin-top:39px;width:124px}.bridge .transfer-alert .alert-container{display:flex;flex-direction:column;justify-content:space-around;padding-bottom:40px;padding-right:60px;padding-top:40px;width:374px}@media screen and (max-width: 768px){.bridge .transfer-alert .alert-container{padding-left:5px;padding-top:0;width:100%}}.bridge .transfer-alert .alert-container .alert-corner{height:12px;width:10px}.bridge .transfer-alert .alert-container .transfer-title{align-items:center;color:#5c34a2;display:flex;font-size:14px;justify-content:space-between}.bridge .transfer-alert .alert-container .transfer-title path{fill:#5c34a2}.bridge .transfer-alert .alert-container .transfer-title .alert-logo-box{align-items:center;background-color:#5c34a2;border-radius:4px;display:flex;height:50px;justify-content:center;width:50px}.bridge .transfer-alert .alert-container .transfer-description{color:#333;font-size:14px;line-height:1.71;padding-bottom:10px;padding-top:10px}.bridge .transfer-alert .alert-container .transfer-buttons{display:flex;justify-content:space-between;padding:20px 0 0}.bridge .transfer-alert .alert-container .transfer-buttons .transfer-confirm{background-color:#60db97;border-radius:3px;color:#fff;flex-grow:1;font-size:15px;font-weight:700;height:40px;max-width:49%;text-decoration:none}.bridge .transfer-alert .alert-container .transfer-buttons .transfer-confirm:hover{background-color:#36d27c}.bridge .transfer-alert .alert-container .transfer-buttons .transfer-cancel{background-color:#fff;border-radius:3px;border:solid 1px #5c34a2;color:#5c34a2;flex-grow:1;font-size:15px;font-weight:700;height:40px;max-width:49%;text-decoration:none}.bridge .transfer-alert .alert-container .transfer-buttons .transfer-cancel:hover{opacity:0.7}.noWallet-alert{background-color:#fff;border-radius:10px 8px 8px 10px;display:flex;height:380px;width:540px}@media screen and (max-width: 360px){.noWallet-alert{padding-top:60px}}@media screen and (max-width: 768px){.noWallet-alert{flex-direction:column;width:92%;height:auto;margin-left:4%}}.noWallet-alert .noWallet-image-container{background-image:linear-gradient(to right, #7b5ab2, #5c34a2);border-radius:8px 0 0 8px;width:150px}@media screen and (max-width: 768px){.noWallet-alert .noWallet-image-container{display:none}}.noWallet-alert .noWallet-image-container .noWallet-icon{margin-top:0;width:150px}.noWallet-alert .noWallet-alert-container{display:flex;flex-direction:column;justify-content:space-around;padding:24px 30px;width:389px}@media screen and (max-width: 768px){.noWallet-alert .noWallet-alert-container{align-self:center;padding:10px 0;width:88%}}.noWallet-alert .noWallet-alert-container .noWallet-title{color:#5c34a2;font-size:24px;line-height:1}@media screen and (max-width: 768px){.noWallet-alert .noWallet-alert-container .noWallet-title{font-size:30px;padding-top:2%;padding-bottom:2%}}.noWallet-alert .noWallet-alert-container .noWallet-description{color:#666;font-size:14px;line-height:1.71;padding-bottom:10px;padding-top:10px}@media screen and (max-width: 768px){.noWallet-alert .noWallet-alert-container .noWallet-description{padding-left:1%;padding-right:1%}}.noWallet-alert .noWallet-buttons{column-gap:10px;display:grid;grid-template-columns:1fr 1fr;row-gap:10px}@media screen and (max-width: 414px){.noWallet-alert .noWallet-buttons{grid-template-columns:1fr}}.noWallet-alert .noWallet-buttons .noWallet-metamask{background-color:#ffaa07;border-radius:3px;color:#fff;line-height:36px;text-align:center;text-decoration:none}.noWallet-alert .noWallet-buttons .noWallet-metamask:hover{background-color:#d38b00}.noWallet-alert .noWallet-buttons .noWallet-niftyWallet{background-color:#5c34a2;border-radius:3px;color:#fff;line-height:36px;text-align:center;text-decoration:none}.noWallet-alert .noWallet-buttons .noWallet-niftyWallet:hover{background-color:#46287b}.noWallet-alert .noWallet-buttons .noWallet-alphawallet{background-color:#64a231;border-radius:3px;color:#fff;line-height:36px;text-align:center;text-decoration:none}.noWallet-alert .noWallet-buttons .noWallet-alphawallet:hover{background-color:#4c7b25}.noWallet-alert .noWallet-buttons .noWallet-cancel{background-color:#fff;border-radius:3px;border:1px solid #5c34a2;color:#5c34a2;height:36px;text-decoration:none}.noWallet-alert .noWallet-buttons .noWallet-cancel:hover{opacity:0.7}.disclaimer-alert{background-color:#fff;border-radius:8px;display:flex;padding:15px 0;width:600px}@media screen and (max-width: 768px){.disclaimer-alert{flex-direction:column;margin:0 auto;width:92%}}.disclaimer-alert .image-container{width:164px}@media screen and (max-width: 768px){.disclaimer-alert .image-container{display:none}}.disclaimer-alert .image-container .disclaimer-icon{height:173px;margin-left:25px;margin-top:44px;width:117px}.disclaimer-alert .alert-container{display:flex;flex-direction:column;justify-content:space-around;padding-bottom:40px;padding-right:46px;padding-top:40px;width:389px}@media screen and (max-width: 768px){.disclaimer-alert .alert-container{align-self:center;padding:10px 0;width:88%}}.disclaimer-alert .alert-container .alert-corner{height:12px;width:10px}.disclaimer-alert .alert-container .disclaimer-title{color:#5c34a2;font-size:24px;line-height:1}@media screen and (max-width: 768px){.disclaimer-alert .alert-container .disclaimer-title{font-size:30px;padding-bottom:2%;padding-top:2%}}.disclaimer-alert .alert-container .disclaimer-description{color:#333;font-size:14px;line-height:1.71;padding-bottom:10px;padding-top:10px}@media screen and (max-width: 768px){.disclaimer-alert .alert-container .disclaimer-description{padding-left:1%;padding-right:1%}}.disclaimer-alert .alert-container .disclaimer-tos{color:#333;padding-left:5px}.disclaimer-alert .alert-container .disclaimer-link{color:#5c34a2}.disclaimer-alert .alert-container .disclaimer-buttons .disclaimer-confirm{background-color:#60db97;border-radius:3px;color:#fff;font-size:15px;font-weight:700;height:40px;text-decoration:none;min-width:100px}.disclaimer-alert .alert-container .disclaimer-buttons .disclaimer-confirm:hover{background-color:#36d27c}.disclaimer-alert .alert-container .disclaimer-buttons .disclaimer-confirm-disabled{background-color:#60db97;border-radius:3px;color:#fff;cursor:default;font-size:15px;font-weight:700;height:40px;opacity:0.5;text-decoration:none;min-width:100px}.green{color:#60db97}.red{color:#f13662}.purple{color:#5c34a2}.blue{color:#3ab9fe}.background-green{background-color:#60db97}.background-red{background-color:#f13662}.background-purple{background-color:#5c34a2}.background-blue{background-color:#3ab9fe}.events-page{display:flex;justify-content:center;padding-top:40px}.events-page .events-container{max-width:100%;width:960px}@media screen and (max-width: 768px){.events-page .events-container{padding-left:15px;padding-right:15px}}.events-page .events-container .events-header{display:flex;justify-content:space-between}@media screen and (max-width: 414px){.events-page .events-container .events-header{flex-direction:column}}.events-page .events-container .events-header .events-header-title{color:#333;font-size:24px;line-height:38px}.events-page .events-container .events-header .events-filter-container{background-color:#fff;border-radius:3px;border:solid 1px #dadada;display:flex;height:38px;width:400px}@media screen and (max-width: 768px){.events-page .events-container .events-header .events-filter-container{width:auto}}.events-page .events-container .events-header .events-filter-container .events-filter{color:#333;font-size:14px;line-height:38px;padding-left:10px;width:205px}@media screen and (max-width: 330px){.events-page .events-container .events-header .events-filter-container .events-filter{width:180px}}.events-page .events-container .events-header .events-filter-container .events-filter::placeholder{color:#b2b2b2}.events-page .events-container .events-header .events-filter-container .events-filter-icon{align-self:center;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAA0lBMVEWAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6McEf5GAAAARXRSTlMAAQIDBQYHDA0bHB8gISQmJyg+P0BGR0lMU1RVWFlcXV5iY2tsdXZ4iYqLo6Spqqusra7Cw8TFysvM29zm5+jr8vP4+fzSh6raAAABM0lEQVR4AYWTeVeCQBTFr6AtuaTYkpUVlqZm0JIaLhjBfP+v1NxDyDCcA7+/3nLPecu8QULFGs/9MPTnE6uCPIa9EntWtgGN5lJkWDaR4WwnNHYWFM5DxsLXfqN22Ok7sXeR5ts/jHy0Er/1Tj9oJ77J+tEICqOIfZiIsalnXlUwNvifn/O50HA5bQWky45OoHHMTrsgY2nNkONFhscgX9K6Ro6eDH+C+NKqI0ddhn0QFjtAjhpb2wuOigQscVpQorzJScGYRYv65aLSVTvQcLhqI7YHQjJEhqHyWDC/+dxPUHjkc3tm4nYC6t/Sg3GFdgGX8ZHNeo1qtdGb0ZNEd4oiEBq6ouNlc95zRMW9+nHWaXptG3jQFTCs6YJfbzG1OL+m0EkVt2WKLUoUGxRxs91c/QFA1F3oKOgExAAAAABJRU5ErkJggg==);background-position:center center;background-repeat:no-repeat;background-size:16px 16px;display:inline-block;height:16px;margin-left:5px;margin-right:10px;width:16px}.events-page .events-container .events-header .events-filter-container .events-select{background-color:#fff;border-left:solid 1px #dadada;border:solid 1px white;color:#333;font-size:14px;height:38px;line-height:38px;text-align:left;width:154px}@media screen and (max-width: 768px){.events-page .events-container .events-header .events-filter-container .events-select{width:auto}}.events-page .events-container .events-columns{display:flex;justify-content:space-between;margin-top:38px}.events-page .events-container .events-columns .column-title{color:#333;font-size:14px;font-weight:700;text-align:left}@media screen and (max-width: 768px){.events-page .events-container .events-columns{display:none}}.events-page .events-container .events-header-separator{background-color:#e4e4e4;height:3px;margin-top:20px;width:100%}.events-page .events-container .txhash-column{width:375px}@media screen and (max-width: 768px){.events-page .events-container .txhash-column{width:300px}}.events-page .events-container .recipient-column{width:300px}.events-page .events-container .value-column{width:150px}.events-page .events-container .block-column{text-align:right;width:100px}.events-page .events-container .event{display:flex;justify-content:space-between;line-height:26px;padding-bottom:22px;padding-top:22px}@media screen and (max-width: 768px){.events-page .events-container .event{flex-direction:column}}.events-page .events-container .event-tx-container{line-height:26px}@media screen and (max-width: 768px){.events-page .events-container .event-tx-container{display:flex;flex-direction:column}}.events-page .events-container .event-tx-container .event-name{border-radius:3px;color:#fff;font-size:14px;font-weight:700;height:26px;line-height:26px;margin-right:5px;padding:5px 15px;text-align:left;width:66px}@media screen and (max-width: 768px){.events-page .events-container .event-tx-container .event-name{width:fit-content}}.events-page .events-container .event-tx-container .event-txhash{color:#5c34a2;font-size:14px;text-align:left;text-decoration:none}.events-page .events-container .event-tx-container .event-copy-tx{cursor:pointer;margin-left:10px}.events-page .events-container .event-recipient{color:#5c34a2;font-size:14px;text-align:left;text-decoration:none}.events-page .events-container .event-recipient-label{color:#333}.events-page .events-container .event-value{color:#333;font-size:14px;text-align:left}.events-page .events-container .event-block{color:#333;font-size:14px;text-align:right}@media screen and (max-width: 768px){.events-page .events-container .event-block{text-align:left}}.events-page .events-container .event-separator{background-color:#e4e4e4;height:1px;width:100%}.foreign-logo{background-image:url("../images/themes/core/logos/logo-foreign.svg");background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:11px;width:54px}.foreign-logo.foreign-logo-modal{background-image:url("../images/themes/core/logos/logo-foreign-modal.svg")}.alert-logo-box .foreign-logo{max-height:75%;max-width:75%}.home-logo{background-image:url("../images/themes/core/logos/logo-home.png");background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:16px;width:52px}.home-logo.home-logo-modal{background-image:url("../images/themes/core/logos/logo-home-modal.png")}.alert-logo-box .home-logo{max-height:75%;max-width:75%}@keyframes fadeOut{0%{opacity:.2}20%{opacity:1;transform:scale(1)}100%{opacity:.2;transform:scale(0.3)}}.loading-logo{background-image:url("../images/themes/core/logos/logo-loading.svg");background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:50px;width:234px}.loading-container{align-items:center;background-color:rgba(80,45,141,0.8);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000000}.loading-i{animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:fadeOut;animation-timing-function:linear;background-color:#60db97;border-radius:1px;height:50px;opacity:.2;width:2px}.loading-i:nth-child(2){animation-delay:.1s}.loading-text{color:#fff;font-size:24px;font-stretch:normal;font-style:normal;font-weight:normal;letter-spacing:normal;line-height:3;text-align:center;width:500px}@media screen and (max-width: 414px){.loading-text{font-size:18px}}@media screen and (max-width: 414px){.mobile-container{flex-direction:column}}.network-modal{align-items:center;display:flex;justify-content:center;overflow-y:scroll}.network-modal .modal{border-radius:10px;min-height:410px;min-width:558px;position:relative}@media screen and (max-width: 768px){.network-modal .modal{top:30px}}@media screen and (max-width: 600px){.network-modal .modal{top:60px}}@media screen and (max-width: 414px){.network-modal .modal{min-width:100%;top:0}}.network-modal .modal .title{margin-bottom:20px;text-transform:uppercase;font-size:24px;font-weight:700}.network-modal .modal .description{color:#8197a2;font-size:13px;line-height:24px;margin-bottom:25px}.network-modal .modal .close-button{padding:15px;position:absolute;right:-40px;top:40px;z-index:400000}.network-modal .modal .close-button i.icon:before{content:url("../images/modal/close.svg")}.network-modal .modal .close-button:hover{cursor:pointer}@media screen and (max-width: 600px){.network-modal .modal .close-button{right:-10px}}@media screen and (max-width: 414px){.network-modal .modal .close-button{top:-40px;right:0}}.pattern-background{margin-left:auto;overflow:hidden;padding-top:25px;width:15%}.pattern-background .pattern-background-image{background-image:url("../images/themes/core/background/bg-pattern.svg");background-position:0 50%;background-repeat:repeat-x;height:360px;min-width:192px}@media screen and (max-width: 1024px){.pattern-background{display:none}}.statistics-page{display:flex;justify-content:center}.statistics-page .statistics-page-container{display:flex;flex-direction:column;max-width:960px;padding-bottom:25px;width:70%}@media screen and (max-width: 1024px){.statistics-page .statistics-page-container{width:100%}}@media screen and (max-width: 768px){.statistics-page .statistics-page-container{padding-left:15px;padding-right:15px}}.statistics-page .statistics-page-container .statistics-title{color:#333;display:block;font-size:24px;line-height:1.5;margin:0 0 20px;text-align:left}.statistics-page .statistics-page-container .statistics-bridge-container{display:flex;flex-direction:column;padding-top:30px}.statistics-page .statistics-page-container .statistics-bridge-container .statistics-bridge-data{display:flex;justify-content:space-evenly}@media screen and (max-width: 768px){.statistics-page .statistics-page-container .statistics-bridge-container .statistics-bridge-data{column-gap:30px;display:grid;grid-template-columns:1fr 1fr;row-gap:20px}}.statistics-page .statistics-page-container .statistics-transaction-container{display:flex;justify-content:space-between;padding-top:90px}@media screen and (max-width: 768px){.statistics-page .statistics-page-container .statistics-transaction-container{flex-direction:column;padding-top:45px}}.statistics-page .statistics-page-container .statistics-transaction-container .statistics-deposit-container{width:40%}@media screen and (max-width: 768px){.statistics-page .statistics-page-container .statistics-transaction-container .statistics-deposit-container{margin-bottom:40px;width:auto}}.statistics-page .statistics-page-container .statistics-transaction-container .statistics-withdraw-container{width:40%}@media screen and (max-width: 768px){.statistics-page .statistics-page-container .statistics-transaction-container .statistics-withdraw-container{width:auto}}.statistics-page .statistics-page-container .statistics-transaction-container .statistics-bridge-data{display:flex;justify-content:space-evenly}@media screen and (max-width: 768px){.statistics-page .statistics-page-container .statistics-transaction-container .statistics-bridge-data{column-gap:30px;display:grid;grid-template-columns:1fr 1fr;row-gap:20px}}.statistics-page .statistics-left-container{margin-right:auto;padding-top:25px;width:15%}@media screen and (max-width: 1024px){.statistics-page .statistics-left-container{display:none}}.status-page{display:flex;justify-content:center}.status-page .status-page-container{display:flex;flex-direction:column;max-width:960px;width:70%;padding-bottom:25px}@media screen and (max-width: 1024px){.status-page .status-page-container{width:100%}}@media screen and (max-width: 768px){.status-page .status-page-container{padding-left:15px;padding-right:15px}}.status-page .status-page-container .status-title{color:#333;font-size:24px;line-height:3;text-align:left}.status-page .status-page-container .status-configuration-container{display:flex;flex-direction:column;padding-top:30px}.status-page .status-page-container .status-configuration-container .status-configuration-data{display:flex;justify-content:space-evenly}@media screen and (max-width: 768px){.status-page .status-page-container .status-configuration-container .status-configuration-data{column-gap:30px;display:grid;grid-template-columns:1fr 1fr;row-gap:20px}}.status-page .status-page-container .status-authorities-container{display:flex;flex-direction:column;margin-top:80px}.status-page .status-page-container .status-authorities-container .status-authorities-title{padding-bottom:30px}.status-page .status-page-container .status-authorities-container .status-authorities-data{display:flex;flex-direction:column}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority{display:flex;padding-bottom:20px}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-number{color:#5c34a2;font-size:30px;font-weight:700;line-height:59px;padding-right:20px;text-align:left}@media screen and (max-width: 768px){.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-number{padding-right:5px}}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-logo{background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:59px;margin-left:20px;width:59px}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-logo.authority-logo-0{background-image:url("../images/themes/core/status/authority/logo-0.svg")}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-logo.authority-logo-1{background-image:url("../images/themes/core/status/authority/logo-1.svg")}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-logo.authority-logo-2{background-image:url("../images/themes/core/status/authority/logo-2.svg")}@media screen and (max-width: 768px){.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-logo{display:none}}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-address{color:#333;font-size:16px;font-weight:700;line-height:59px;padding-left:20px;text-align:left}@media screen and (max-width: 768px){.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-address{font-size:12px;padding-left:0}}.status-page .status-left-container{margin-right:auto;padding-top:25px;width:15%}@media screen and (max-width: 1024px){.status-page .status-left-container{display:none}}.copy-icon{cursor:pointer}.copy-icon path{fill:#5c34a2}.copy-icon-right{margin-left:10px}.copy-icon-left{margin-left:10px}@media screen and (max-width: 768px){.daily-quota-modal-container{display:none}}.daily-quota-modal-container .daily-quota-modal-arrow{border-bottom:10px solid #000;border-left:10px solid transparent;border-right:10px solid transparent;border-top:none;content:" ";position:absolute;top:-10px;z-index:9999}.daily-quota-modal-container .daily-quota-modal{background-color:#fff;border-radius:3px;border:solid 1px #e4e4e9;box-shadow:0 16px 20px 0 rgba(0,0,0,0.05);height:102px;position:fixed;width:219px;z-index:999}.daily-quota-modal-container .daily-quota-modal .modal-container{display:flex;flex-direction:column;height:72px;justify-content:space-between;padding:15px}.daily-quota-modal-container .daily-quota-modal .modal-container .daily-quota-title{color:#5c34a2;font-size:14px;font-weight:bold;text-align:left}.daily-quota-modal-container .daily-quota-modal .modal-container .daily-quota-description{color:#333;font-size:12px;height:45px;text-align:left;width:172px}.daily-quota-modal-container .daily-quota-modal:after{border-bottom:6px solid #e4e4e9;border-left:6px solid transparent;border-right:6px solid transparent;border-top:none;content:" ";position:absolute;right:105px;top:-6px}.datablock-container{align-items:center;display:flex;flex-direction:column;justify-content:space-evenly}@media screen and (max-width: 768px){.datablock-container{align-items:normal;justify-content:flex-start}}.datablock-container .datablock-value{color:#5c34a2;font-size:30px;font-weight:bold}.datablock-container .datablock-type{color:#5c34a2;font-size:18px;margin-left:10px}.datablock-container .datablock-description{color:#333;font-size:14px}.footer{background-color:#5c34a2;bottom:0;color:#fff;padding:18px 0;position:absolute}.footer .container{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between}@media screen and (max-width: 768px){.footer .container{flex-direction:column}}.footer .social-icons{order:2}@media screen and (max-width: 768px){.footer .social-icons{margin-top:15px;order:1}}.footer-logo{background-image:url("../images/themes/core/logos/logo.svg");background-repeat:no-repeat;background-size:contain;display:block;height:18px;left:0;order:0;width:130px}.header{background-color:#5c34a2;background-position:center center;background-repeat:no-repeat;background-size:cover;width:100%;z-index:9999}.header .container{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between}@media screen and (max-width: 414px){.header .container{padding:22px 0;width:93%}}@media screen and (max-width: 768px){.header .container{padding:22px 0}}.header-logo{background-image:url("../images/themes/core/logos/logo.svg");background-repeat:no-repeat;background-size:contain;display:block;height:26px;width:180px}.header-menu{align-items:center;display:flex;justify-content:space-between;max-width:700px}@media screen and (max-width: 414px){.header-menu{display:none}}@media screen and (max-width: 768px){.header-menu{justify-content:flex-end;width:auto}}.header-wallet{background-color:#502d8d;display:flex;flex-direction:column;height:70px;justify-content:space-evenly;width:220px}@media screen and (max-width: 768px){.header-wallet{display:none}}.header-wallet .wallet-container{display:flex;padding-left:20px}.header-wallet .wallet-container .wallet-icon{margin-right:10px}.header-wallet .wallet-container .wallet-icon path{fill:#60db97}.header-wallet .wallet-container .wallet-text{color:#fff;font-size:14px;font-weight:bold;line-height:18px}.header-wallet .wallet-container .wallet-text:hover{text-decoration:none}.header-wallet .wallet-container .wallet-link{cursor:pointer}.header-wallet .wallet-container .wallet-text-metamask{color:#60db97}.header-wallet .daily-quota-container{background-color:#45277a;border-radius:3px;height:6px;margin-left:20px;width:180px}.header-wallet .daily-quota-container .daily-quota-progress{background-color:#60db97;border-radius:3px;height:6px}.menu-items{font-weight:bold;line-height:16px;margin:0 15px;text-decoration:none}@media screen and (max-width: 414px){.menu-items{margin-left:0}}.menu-items:hover{text-decoration:none}.menu-items-text{color:#fff;margin-left:10px}.menu-items-icon{float:left}.menu-items-icon path{fill:#60db97}@media screen and (max-width: 414px){.mobile-menu{background-color:#45277a;height:172px}}.mobile-menu-links{display:none}@media screen and (max-width: 414px){.mobile-menu-links{display:flex;align-items:center;flex-direction:column;height:100%;justify-content:space-evenly}}@media screen and (max-width: 414px){.mobile-menu-open{background-color:rgba(69,39,122,0.9);height:100%;position:fixed;width:100%;z-index:1000000}}.mobile-menu-is-open{min-height:100%;position:fixed;width:100%}.mobile-menu-button{display:none}@media screen and (max-width: 414px){.mobile-menu-button{display:block}}.mobile-menu-button path{fill:#60db97}.social-icons{display:flex}.social-icons-item{align-items:center;background-color:#fff;border-radius:3px;display:flex;height:30px;justify-content:center;margin-right:10px;transition:box-shadow .15s ease-out;width:30px}.social-icons-item:hover{box-shadow:0 0 15px 0 rgba(102,102,102,0.3)}.social-icons-item:last-child{margin-right:0}.social-icons-item svg{width:16px}.social-icons-item path{fill:#5c34a2} diff --git a/src/assets/stylesheets/application.css b/src/assets/stylesheets/application.css new file mode 100644 index 00000000..dc1cd9c4 --- /dev/null +++ b/src/assets/stylesheets/application.css @@ -0,0 +1 @@ +.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-controls{display:flex;justify-content:space-between}.footer{left:0;right:0}.container{position:relative;width:960px;margin-left:auto;margin-right:auto}@media (max-width: 980px){.container{width:98%}}html,body,p,h1,h2,h3{font-weight:normal;margin:0;padding:0}html{display:flex;min-height:100%}body{background-color:#17132b;box-sizing:border-box;font-family:"Nunito",sans-serif;padding-bottom:66px;position:relative;width:100%}@media screen and (max-width: 768px){body{padding-bottom:160px}}a{color:#2be187;text-decoration:none}a:hover{text-decoration:underline}button{color:#08b3f2;cursor:pointer;margin-left:5px}button:hover{text-decoration:underline}input,button{border:0;font-size:14px;margin:0;outline:none;padding:0}strong{font-weight:700}.hidden{overflow:hidden}.label{font-weight:700;margin-bottom:7px;margin-top:15px}.description{color:#8197a2;line-height:24px}.break-all{word-break:break-all}.separator{background-color:#333;height:51px;width:1px}@media screen and (max-width: 768px){.separator{display:none}}.app-container{margin-left:auto;margin-right:auto;position:relative;width:100%}.only-mobile{display:none}@media screen and (max-width: 768px){.only-mobile{display:inherit}}.bridge-container{align-items:center;display:flex;height:80vh;margin-left:auto;margin-right:auto;position:relative;width:100%}@media screen and (max-width: 768px){.bridge-container{height:512px}}.bridge{display:flex;flex-direction:column;overflow:hidden;width:100%}.bridge .bridge-home{align-self:center;background-image:linear-gradient(to right, #fff, #fff);display:flex;height:80px;width:960px}@media screen and (max-width: 768px){.bridge .bridge-home{display:none}}.bridge .bridge-home .bridge-home-container{background-color:#17132b;min-width:60px;width:9%}.bridge .bridge-home .bridge-home-container .home-logo-container{align-items:center;background-color:#fff;border-radius:10px;border-bottom-right-radius:0;display:flex;height:100%;justify-content:center}.bridge .bridge-home .home-address-container{align-items:center;background-color:#17132b;border-bottom-left-radius:10px;display:flex;width:92%}.bridge .bridge-home .home-address-container .icon-wallet{padding:20px}.bridge .bridge-foreign{align-self:center;background-image:linear-gradient(to right, #fff, #fff);display:flex;height:80px;width:960px}@media screen and (max-width: 768px){.bridge .bridge-foreign{display:none}}.bridge .bridge-foreign .bridge-foreign-container{background-color:#17132b;min-width:60px;width:9%}.bridge .bridge-foreign .bridge-foreign-container .foreign-logo-container{align-items:center;background-color:#fff;border-radius:10px;border-top-left-radius:0;display:flex;height:100%;justify-content:center}.bridge .bridge-foreign .foreign-address-container{align-items:center;background-color:#17132b;border-top-right-radius:10px;display:flex;justify-content:flex-end;text-align:right;width:92%}.bridge .bridge-foreign .foreign-address-container .icon-wallet{padding:20px}.bridge .address-label{color:#31f896;font-size:12px}.bridge .address-description{color:#31f896;font-size:16px;font-weight:700}@media screen and (max-width: 768px){.bridge .address-description{font-size:9px}}.bridge .bridge-transfer{height:276px;display:flex;justify-content:center}@media screen and (max-width: 768px){.bridge .bridge-transfer{height:389px}}.bridge .bridge-transfer .left-image-wrapper{background-color:#fff}.bridge .bridge-transfer .left-image-wrapper .left-image{background-color:#17132b;background-image:url("../images/themes/ethereum-classic/bridge/pattern-1.png");background-position:calc(100% - 5px) 5px;background-repeat:no-repeat;background-size:contain;border-top-right-radius:10px;height:276px;max-width:100%;width:272px}@media screen and (max-width: 768px){.bridge .bridge-transfer .left-image-wrapper .left-image{display:none}}.bridge .bridge-transfer .right-image-wrapper{background-color:#fff}.bridge .bridge-transfer .right-image-wrapper .right-image{background-color:#17132b;background-image:url("../images/themes/ethereum-classic/bridge/pattern-2.png");background-position:5px 5px;background-repeat:no-repeat;background-size:contain;border-bottom-left-radius:10px;height:276px;max-width:100%;width:272px}@media screen and (max-width: 768px){.bridge .bridge-transfer .right-image-wrapper .right-image{display:none}}.bridge .bridge-transfer .bridge-transfer-content{background-image:linear-gradient(to right, #fff, #fff);border-bottom-left-radius:10px;border-top-right-radius:10px;display:flex;flex-shrink:0;flex-wrap:wrap;width:880px}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content{border-radius:8px;flex-direction:column;max-width:92%}}.bridge .bridge-transfer .bridge-transfer-content .bridge-transfer-content-background{display:flex;flex-shrink:0;flex-wrap:wrap;width:880px}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .bridge-transfer-content-background{background-image:url("../images/themes/ethereum-classic/transparent.png");background-position:center;background-repeat:no-repeat;background-size:164px 203px;flex-direction:column;width:auto}}.bridge .bridge-transfer .bridge-transfer-content .network-container-home{align-items:flex-start;display:flex;flex-direction:column;height:136px;justify-content:space-evenly;padding:70px 1% 70px 5%;width:22%}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .network-container-home{align-items:center;align-self:center;height:136px;padding:5px 0 5px 0;width:auto}}.bridge .bridge-transfer .bridge-transfer-content .network-container-foreign{align-items:flex-end;display:flex;flex-direction:column;height:136px;justify-content:space-evenly;padding:70px 5% 70px 1%;width:22%}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .network-container-foreign{align-items:center;align-self:center;height:136px;padding:5px 0 5px 0;width:auto}}.bridge .bridge-transfer .bridge-transfer-content .bridge-network-data{align-items:center;cursor:pointer;display:flex}.bridge .bridge-transfer .bridge-transfer-content .network-basic-label{font-size:13px;color:#352d59}.bridge .bridge-transfer .bridge-transfer-content .network-title{color:#352d59;display:block;font-size:24px;font-weight:700}.bridge .bridge-transfer .bridge-transfer-content .network-name{color:#352d59;display:block;font-size:24px;font-weight:700}.bridge .bridge-transfer .bridge-transfer-content .text-left{text-align:left}@media screen and (max-width: 414px){.bridge .bridge-transfer .bridge-transfer-content .text-left{text-align:center}}.bridge .bridge-transfer .bridge-transfer-content .text-right{text-align:right}@media screen and (max-width: 414px){.bridge .bridge-transfer .bridge-transfer-content .text-right{text-align:center}}.bridge .bridge-transfer .bridge-transfer-content .network-id{color:#352d59;font-size:14px;font-weight:700;line-height:26px}.bridge .bridge-transfer .bridge-transfer-content .network-id-container{background-color:#2be187;border-radius:3px;height:26px;margin-left:10px;text-align:center;width:32px}.bridge .bridge-transfer .bridge-transfer-content .network-balance{color:#352d59;font-size:13px;font-weight:700}.bridge .bridge-transfer .bridge-transfer-content .network-show-more{color:#2be187;font-size:14px;font-weight:700}.bridge .bridge-transfer .bridge-transfer-content .info-icon{align-items:center;display:flex;justify-content:center}.bridge .bridge-transfer .bridge-transfer-content .info-icon path{fill:#2be187}.bridge .bridge-transfer .bridge-transfer-content .info-icon-left{margin-right:10px}.bridge .bridge-transfer .bridge-transfer-content .info-icon-right{margin-left:10px}.bridge .bridge-transfer .bridge-transfer-content .transfer-right{background-image:url("../images/themes/ethereum-classic/transparent.png");background-position:center;background-repeat:no-repeat}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .transfer-right{background-image:none}}.bridge .bridge-transfer .bridge-transfer-content .transfer-left{background-image:url("../images/themes/ethereum-classic/transparent.png");background-position:center;background-repeat:no-repeat}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .transfer-left{background-image:none}}.bridge .bridge-transfer .bridge-transfer-content .form-container{height:276px;max-width:384px;width:44%}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container{align-self:center;height:97px;width:100%}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form{display:flex;flex-direction:column;height:276px;justify-content:space-evenly}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form{height:auto;width:100%}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-controls{background-color:#f7f6ff;border-radius:5px;padding:8px 8px 8px 0}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-controls{background-color:unset;flex-direction:column;padding:8px 8px 8px 8px}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form .bridge-form-input-container{display:flex;justify-content:space-between;width:292px}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form .bridge-form-input-container{background-color:rgba(251,251,252,0.2);border-radius:3px 3px 0 0;width:100%}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-input{background-color:transparent;color:#352d59;font-size:24px;font-weight:700;height:48px;padding-left:16px;width:165px}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-input::placeholder{color:#666;font-size:24px;font-weight:700}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-input::placeholder{font-size:18px}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-input::placeholder{opacity:0.3}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-input{font-size:18px}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-label{color:rgba(53,45,89,0.5);font-size:24px;font-weight:700;line-height:48px;margin:0 10px;text-transform:uppercase}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-label{font-size:18px}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-button{background-color:#2be187;border-radius:3px;color:#fff;display:block;flex-shrink:0;font-weight:700;height:48px;text-decoration:none;width:92px}@media screen and (max-width: 768px){.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-button{border-radius:0 0 3px 3px;width:100%}}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form-button:hover{background-color:#1bbe6d}.bridge .bridge-transfer .bridge-transfer-content .form-container .bridge-form .bridge-transfer-direction{font-size:14px;color:#352d59}.bridge .bridge-statistics-container{align-self:center;margin-top:60px}@media screen and (max-height: 720px){.bridge .bridge-statistics-container{margin-top:30px}}.bridge .network-details{display:flex;flex-direction:column;min-width:558px}@media screen and (max-width: 768px){.bridge .network-details{min-width:100%}}.bridge .network-details .details-logo-container{align-items:center;background-color:#fff;border-radius:10px;border-bottom-right-radius:0;display:flex;height:80px;justify-content:center;width:85px}@media screen and (max-width: 768px){.bridge .network-details .details-logo-container{display:none}}.bridge .network-details .details-logo-container:after{content:"";position:absolute;height:10px;width:20px;bottom:0}@media screen and (max-width: 768px){.bridge .network-details .details-logo-container:after{display:none}}.bridge .network-details .details-logo-container:after{border-radius:0 0 0 10px;box-shadow:-10px 0 0 0 #fff;right:453px;top:70px}@media screen and (max-width: 768px){.bridge .network-details .details-logo-container:after{display:none}}.bridge .network-details .details-body{align-self:flex-end;background-color:#fff;border-radius:0 10px 10px 10px;display:flex;flex-direction:column;height:254px;justify-content:space-between;padding:38px;width:440px}@media screen and (max-width: 768px){.bridge .network-details .details-body{align-self:center;border-radius:10px 10px 10px 10px;height:430px;padding:20px 15px 20px 15px;width:85%}}@media screen and (max-width: 768px) and (min-width: 415px){.bridge .network-details .details-body{height:300px}}@media screen and (max-width: 600px){.bridge .network-details .details-body{height:250px}}.bridge .network-details .details-body .details-data-container{display:flex;justify-content:space-between}@media screen and (max-width: 768px){.bridge .network-details .details-body .details-data-container{flex-direction:column}}.bridge .network-details .details-body .details-data-container .details-label{color:#352d59;font-size:14px}.bridge .network-details .details-body .details-data-container .details-description{color:#2be187;font-size:14px}.bridge .network-details .details-body .details-data-container .details-description-black{color:#352d59;font-size:14px;font-weight:700}.bridge .network-details .details-body .details-data-container .details-copy{cursor:pointer}.bridge .network-details .details-body:before{content:"";position:absolute;height:10px;width:20px;bottom:0}@media screen and (max-width: 768px){.bridge .network-details .details-body:before{display:none}}.bridge .network-details .details-body:before{left:22px;top:80px;border-radius:0 10px 0 0;box-shadow:10px 0 0 0 #fff}@media screen and (max-width: 768px){.bridge .network-details .details-body:before{display:none}}.bridge .transfer-alert{background-color:#fff;border-radius:8px;display:flex;height:265px;width:600px}@media screen and (max-width: 768px){.bridge .transfer-alert{flex-direction:column;height:auto;width:100%}}.bridge .transfer-alert .image-container{margin-right:20px;width:166px}@media screen and (max-width: 768px){.bridge .transfer-alert .image-container{width:100%}}.bridge .transfer-alert .image-container .arrows-icon{height:128px;margin-left:42px;margin-top:39px;width:124px}.bridge .transfer-alert .alert-container{display:flex;flex-direction:column;justify-content:space-around;padding-bottom:40px;padding-right:60px;padding-top:40px;width:374px}@media screen and (max-width: 768px){.bridge .transfer-alert .alert-container{padding-left:5px;padding-top:0;width:100%}}.bridge .transfer-alert .alert-container .alert-corner{height:12px;width:10px}.bridge .transfer-alert .alert-container .transfer-title{align-items:center;color:#352d59;display:flex;font-size:14px;justify-content:space-between}.bridge .transfer-alert .alert-container .transfer-title path{fill:#31f896}.bridge .transfer-alert .alert-container .transfer-title .alert-logo-box{align-items:center;background-color:#31f896;border-radius:4px;display:flex;height:50px;justify-content:center;width:50px}.bridge .transfer-alert .alert-container .transfer-description{color:#352d59;font-size:14px;line-height:1.71;padding-bottom:10px;padding-top:10px}.bridge .transfer-alert .alert-container .transfer-buttons{display:flex;justify-content:space-between;padding:20px 0 0}.bridge .transfer-alert .alert-container .transfer-buttons .transfer-confirm{background-color:#2be187;border-radius:3px;color:#fff;flex-grow:1;font-size:15px;font-weight:700;height:40px;max-width:49%;text-decoration:none}.bridge .transfer-alert .alert-container .transfer-buttons .transfer-confirm:hover{background-color:#1bbe6d}.bridge .transfer-alert .alert-container .transfer-buttons .transfer-cancel{background-color:#fff;border-radius:3px;border:solid 1px #352d59;color:#352d59;flex-grow:1;font-size:15px;font-weight:700;height:40px;max-width:49%;text-decoration:none}.bridge .transfer-alert .alert-container .transfer-buttons .transfer-cancel:hover{opacity:0.7}.noWallet-alert{background-color:#fff;border-radius:10px 8px 8px 10px;display:flex;height:380px;width:540px}@media screen and (max-width: 360px){.noWallet-alert{padding-top:60px}}@media screen and (max-width: 768px){.noWallet-alert{flex-direction:column;width:92%;height:auto;margin-left:4%}}.noWallet-alert .noWallet-image-container{background-image:linear-gradient(to right, #352d59, #352d59);border-radius:8px 0 0 8px;width:150px}@media screen and (max-width: 768px){.noWallet-alert .noWallet-image-container{display:none}}.noWallet-alert .noWallet-image-container .noWallet-icon{margin-top:0;width:150px}.noWallet-alert .noWallet-alert-container{display:flex;flex-direction:column;justify-content:space-around;padding:24px 30px;width:389px}@media screen and (max-width: 768px){.noWallet-alert .noWallet-alert-container{align-self:center;padding:10px 0;width:88%}}.noWallet-alert .noWallet-alert-container .noWallet-title{color:#352d59;font-size:24px;line-height:1}@media screen and (max-width: 768px){.noWallet-alert .noWallet-alert-container .noWallet-title{font-size:30px;padding-top:2%;padding-bottom:2%}}.noWallet-alert .noWallet-alert-container .noWallet-description{color:#666;font-size:14px;line-height:1.71;padding-bottom:10px;padding-top:10px}@media screen and (max-width: 768px){.noWallet-alert .noWallet-alert-container .noWallet-description{padding-left:1%;padding-right:1%}}.noWallet-alert .noWallet-buttons{column-gap:10px;display:grid;grid-template-columns:1fr 1fr;row-gap:10px}@media screen and (max-width: 414px){.noWallet-alert .noWallet-buttons{grid-template-columns:1fr}}.noWallet-alert .noWallet-buttons .noWallet-metamask{background-color:#2be187;border-radius:3px;color:#fff;line-height:36px;text-align:center;text-decoration:none}.noWallet-alert .noWallet-buttons .noWallet-metamask:hover{background-color:#1bbe6d}.noWallet-alert .noWallet-buttons .noWallet-niftyWallet{background-color:#352d59;border-radius:3px;color:#fff;line-height:36px;text-align:center;text-decoration:none}.noWallet-alert .noWallet-buttons .noWallet-niftyWallet:hover{background-color:#211c37}.noWallet-alert .noWallet-buttons .noWallet-alphawallet{background-color:#64a231;border-radius:3px;color:#fff;line-height:36px;text-align:center;text-decoration:none}.noWallet-alert .noWallet-buttons .noWallet-alphawallet:hover{background-color:#4c7b25}.noWallet-alert .noWallet-buttons .noWallet-cancel{background-color:#fff;border-radius:3px;border:1px solid #352d59;color:#352d59;height:36px;text-decoration:none}.noWallet-alert .noWallet-buttons .noWallet-cancel:hover{opacity:0.7}.disclaimer-alert{background-color:#fff;border-radius:8px;display:flex;padding:15px 0;width:600px}@media screen and (max-width: 768px){.disclaimer-alert{flex-direction:column;margin:0 auto;width:92%}}.disclaimer-alert .image-container{width:164px}@media screen and (max-width: 768px){.disclaimer-alert .image-container{display:none}}.disclaimer-alert .image-container .disclaimer-icon{height:173px;margin-left:25px;margin-top:44px;width:117px}.disclaimer-alert .alert-container{display:flex;flex-direction:column;justify-content:space-around;padding-bottom:40px;padding-right:46px;padding-top:40px;width:389px}@media screen and (max-width: 768px){.disclaimer-alert .alert-container{align-self:center;padding:10px 0;width:88%}}.disclaimer-alert .alert-container .alert-corner{height:12px;width:10px}.disclaimer-alert .alert-container .disclaimer-title{color:#352d59;font-size:24px;line-height:1}@media screen and (max-width: 768px){.disclaimer-alert .alert-container .disclaimer-title{font-size:30px;padding-bottom:2%;padding-top:2%}}.disclaimer-alert .alert-container .disclaimer-description{color:#352d59;font-size:14px;line-height:1.71;padding-bottom:10px;padding-top:10px}@media screen and (max-width: 768px){.disclaimer-alert .alert-container .disclaimer-description{padding-left:1%;padding-right:1%}}.disclaimer-alert .alert-container .disclaimer-tos{color:#352d59;padding-left:5px}.disclaimer-alert .alert-container .disclaimer-link{color:#2be187}.disclaimer-alert .alert-container .disclaimer-buttons .disclaimer-confirm{background-color:#2be187;border-radius:3px;color:#fff;font-size:15px;font-weight:700;height:40px;text-decoration:none;min-width:100px}.disclaimer-alert .alert-container .disclaimer-buttons .disclaimer-confirm:hover{background-color:#1bbe6d}.disclaimer-alert .alert-container .disclaimer-buttons .disclaimer-confirm-disabled{background-color:#2be187;border-radius:3px;color:#fff;cursor:default;font-size:15px;font-weight:700;height:40px;opacity:0.5;text-decoration:none;min-width:100px}.green{color:#2be187}.red{color:#f13662}.purple{color:#31f896}.blue{color:#3ab9fe}.background-green{background-color:#2be187}.background-red{background-color:#f13662}.background-purple{background-color:#31f896}.background-blue{background-color:#3ab9fe}.events-page{display:flex;justify-content:center;padding-top:40px}.events-page .events-container{max-width:100%;width:960px}@media screen and (max-width: 768px){.events-page .events-container{padding-left:15px;padding-right:15px}}.events-page .events-container .events-header{display:flex;justify-content:space-between}@media screen and (max-width: 414px){.events-page .events-container .events-header{flex-direction:column}}.events-page .events-container .events-header .events-header-title{color:#fff;font-size:24px;line-height:38px}.events-page .events-container .events-header .events-filter-container{background-color:#fff;border-radius:3px;border:solid 1px #dadada;display:flex;height:38px;width:400px}@media screen and (max-width: 768px){.events-page .events-container .events-header .events-filter-container{width:auto}}.events-page .events-container .events-header .events-filter-container .events-filter{color:#333;font-size:14px;line-height:38px;padding-left:10px;width:205px}@media screen and (max-width: 330px){.events-page .events-container .events-header .events-filter-container .events-filter{width:180px}}.events-page .events-container .events-header .events-filter-container .events-filter::placeholder{color:#b2b2b2}.events-page .events-container .events-header .events-filter-container .events-filter-icon{align-self:center;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAA0lBMVEWAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6McEf5GAAAARXRSTlMAAQIDBQYHDA0bHB8gISQmJyg+P0BGR0lMU1RVWFlcXV5iY2tsdXZ4iYqLo6Spqqusra7Cw8TFysvM29zm5+jr8vP4+fzSh6raAAABM0lEQVR4AYWTeVeCQBTFr6AtuaTYkpUVlqZm0JIaLhjBfP+v1NxDyDCcA7+/3nLPecu8QULFGs/9MPTnE6uCPIa9EntWtgGN5lJkWDaR4WwnNHYWFM5DxsLXfqN22Ok7sXeR5ts/jHy0Er/1Tj9oJ77J+tEICqOIfZiIsalnXlUwNvifn/O50HA5bQWky45OoHHMTrsgY2nNkONFhscgX9K6Ro6eDH+C+NKqI0ddhn0QFjtAjhpb2wuOigQscVpQorzJScGYRYv65aLSVTvQcLhqI7YHQjJEhqHyWDC/+dxPUHjkc3tm4nYC6t/Sg3GFdgGX8ZHNeo1qtdGb0ZNEd4oiEBq6ouNlc95zRMW9+nHWaXptG3jQFTCs6YJfbzG1OL+m0EkVt2WKLUoUGxRxs91c/QFA1F3oKOgExAAAAABJRU5ErkJggg==);background-position:center center;background-repeat:no-repeat;background-size:16px 16px;display:inline-block;height:16px;margin-left:5px;margin-right:10px;width:16px}.events-page .events-container .events-header .events-filter-container .events-select{background-color:#fff;border-left:solid 1px #dadada;border:solid 1px white;color:#333;font-size:14px;height:38px;line-height:38px;text-align:left;width:154px}@media screen and (max-width: 768px){.events-page .events-container .events-header .events-filter-container .events-select{width:auto}}.events-page .events-container .events-columns{display:flex;justify-content:space-between;margin-top:38px}.events-page .events-container .events-columns .column-title{color:#fff;font-size:14px;font-weight:700;text-align:left}@media screen and (max-width: 768px){.events-page .events-container .events-columns{display:none}}.events-page .events-container .events-header-separator{background-color:#e4e4e4;height:3px;margin-top:20px;width:100%}.events-page .events-container .txhash-column{width:375px}@media screen and (max-width: 768px){.events-page .events-container .txhash-column{width:300px}}.events-page .events-container .recipient-column{width:300px}.events-page .events-container .value-column{width:150px}.events-page .events-container .block-column{text-align:right;width:100px}.events-page .events-container .event{display:flex;justify-content:space-between;line-height:26px;padding-bottom:22px;padding-top:22px}@media screen and (max-width: 768px){.events-page .events-container .event{flex-direction:column}}.events-page .events-container .event-tx-container{line-height:26px}@media screen and (max-width: 768px){.events-page .events-container .event-tx-container{display:flex;flex-direction:column}}.events-page .events-container .event-tx-container .event-name{border-radius:3px;color:#fff;font-size:14px;font-weight:700;height:26px;line-height:26px;margin-right:5px;padding:5px 15px;text-align:left;width:66px}@media screen and (max-width: 768px){.events-page .events-container .event-tx-container .event-name{width:fit-content}}.events-page .events-container .event-tx-container .event-txhash{color:#31f896;font-size:14px;text-align:left;text-decoration:none}.events-page .events-container .event-tx-container .event-copy-tx{cursor:pointer;margin-left:10px}.events-page .events-container .event-recipient{color:#31f896;font-size:14px;text-align:left;text-decoration:none}.events-page .events-container .event-recipient-label{color:#fff}.events-page .events-container .event-value{color:#fff;font-size:14px;text-align:left}.events-page .events-container .event-block{color:#fff;font-size:14px;text-align:right}@media screen and (max-width: 768px){.events-page .events-container .event-block{text-align:left}}.events-page .events-container .event-separator{background-color:#e4e4e4;height:1px;width:100%}.foreign-logo{background-image:url("../images/themes/ethereum-classic/logos/logo-foreign.svg");background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:38px;width:24px}.foreign-logo.foreign-logo-modal{background-image:url("../images/themes/ethereum-classic/logos/logo-foreign.svg")}.alert-logo-box .foreign-logo{max-height:75%;max-width:75%}.home-logo{background-image:url("../images/themes/ethereum-classic/logos/logo-home.svg");background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:39px;width:25px}.home-logo.home-logo-modal{background-image:url("../images/themes/ethereum-classic/logos/logo-home.svg")}.alert-logo-box .home-logo{max-height:75%;max-width:75%}@keyframes fadeOut{0%{opacity:.2}20%{opacity:1;transform:scale(1)}100%{opacity:.2;transform:scale(0.3)}}.loading-logo{background-image:url("../images/themes/ethereum-classic/logos/logo-loading.svg");background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:50px;width:234px}.loading-container{align-items:center;background-color:rgba(23,19,43,0.9);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000000}.loading-i{animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:fadeOut;animation-timing-function:linear;background-color:#2be187;border-radius:1px;height:50px;opacity:.2;width:2px}.loading-i:nth-child(2){animation-delay:.1s}.loading-text{color:#fff;font-size:24px;font-stretch:normal;font-style:normal;font-weight:normal;letter-spacing:normal;line-height:3;text-align:center;width:500px}@media screen and (max-width: 414px){.loading-text{font-size:18px}}@media screen and (max-width: 414px){.mobile-container{flex-direction:column}}.network-modal{align-items:center;display:flex;justify-content:center;overflow-y:scroll}.network-modal .modal{border-radius:10px;min-height:410px;min-width:558px;position:relative}@media screen and (max-width: 768px){.network-modal .modal{top:30px}}@media screen and (max-width: 600px){.network-modal .modal{top:60px}}@media screen and (max-width: 414px){.network-modal .modal{min-width:100%;top:0}}.network-modal .modal .title{margin-bottom:20px;text-transform:uppercase;font-size:24px;font-weight:700}.network-modal .modal .description{color:#8197a2;font-size:13px;line-height:24px;margin-bottom:25px}.network-modal .modal .close-button{padding:15px;position:absolute;right:-40px;top:40px;z-index:400000}.network-modal .modal .close-button i.icon:before{content:url("../images/modal/close.svg")}.network-modal .modal .close-button:hover{cursor:pointer}@media screen and (max-width: 600px){.network-modal .modal .close-button{right:-10px}}@media screen and (max-width: 414px){.network-modal .modal .close-button{top:-40px;right:0}}.pattern-background{margin-left:auto;overflow:hidden;padding-top:25px;width:15%}.pattern-background .pattern-background-image{background-image:url("../images/themes/ethereum-classic/background/bg-pattern.svg");background-position:0 50%;background-repeat:repeat-x;height:360px;min-width:192px}@media screen and (max-width: 1024px){.pattern-background{display:none}}.statistics-page{display:flex;justify-content:center}.statistics-page .statistics-page-container{display:flex;flex-direction:column;max-width:960px;padding-bottom:25px;width:70%}@media screen and (max-width: 1024px){.statistics-page .statistics-page-container{width:100%}}@media screen and (max-width: 768px){.statistics-page .statistics-page-container{padding-left:15px;padding-right:15px}}.statistics-page .statistics-page-container .statistics-title{color:#fff;display:block;font-size:24px;line-height:1.5;margin:0 0 20px;text-align:left}.statistics-page .statistics-page-container .statistics-bridge-container{display:flex;flex-direction:column;padding-top:30px}.statistics-page .statistics-page-container .statistics-bridge-container .statistics-bridge-data{display:flex;justify-content:space-evenly}@media screen and (max-width: 768px){.statistics-page .statistics-page-container .statistics-bridge-container .statistics-bridge-data{column-gap:30px;display:grid;grid-template-columns:1fr 1fr;row-gap:20px}}.statistics-page .statistics-page-container .statistics-transaction-container{display:flex;justify-content:space-between;padding-top:90px}@media screen and (max-width: 768px){.statistics-page .statistics-page-container .statistics-transaction-container{flex-direction:column;padding-top:45px}}.statistics-page .statistics-page-container .statistics-transaction-container .statistics-deposit-container{width:40%}@media screen and (max-width: 768px){.statistics-page .statistics-page-container .statistics-transaction-container .statistics-deposit-container{margin-bottom:40px;width:auto}}.statistics-page .statistics-page-container .statistics-transaction-container .statistics-withdraw-container{width:40%}@media screen and (max-width: 768px){.statistics-page .statistics-page-container .statistics-transaction-container .statistics-withdraw-container{width:auto}}.statistics-page .statistics-page-container .statistics-transaction-container .statistics-bridge-data{display:flex;justify-content:space-evenly}@media screen and (max-width: 768px){.statistics-page .statistics-page-container .statistics-transaction-container .statistics-bridge-data{column-gap:30px;display:grid;grid-template-columns:1fr 1fr;row-gap:20px}}.statistics-page .statistics-left-container{margin-right:auto;padding-top:25px;width:15%}@media screen and (max-width: 1024px){.statistics-page .statistics-left-container{display:none}}.status-page{display:flex;justify-content:center}.status-page .status-page-container{display:flex;flex-direction:column;max-width:960px;width:70%;padding-bottom:25px}@media screen and (max-width: 1024px){.status-page .status-page-container{width:100%}}@media screen and (max-width: 768px){.status-page .status-page-container{padding-left:15px;padding-right:15px}}.status-page .status-page-container .status-title{color:#fff;font-size:24px;line-height:3;text-align:left}.status-page .status-page-container .status-configuration-container{display:flex;flex-direction:column;padding-top:30px}.status-page .status-page-container .status-configuration-container .status-configuration-data{display:flex;justify-content:space-evenly}@media screen and (max-width: 768px){.status-page .status-page-container .status-configuration-container .status-configuration-data{column-gap:30px;display:grid;grid-template-columns:1fr 1fr;row-gap:20px}}.status-page .status-page-container .status-authorities-container{display:flex;flex-direction:column;margin-top:80px}.status-page .status-page-container .status-authorities-container .status-authorities-title{padding-bottom:30px}.status-page .status-page-container .status-authorities-container .status-authorities-data{display:flex;flex-direction:column}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority{display:flex;padding-bottom:20px}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-number{color:#fff;font-size:30px;font-weight:700;line-height:59px;padding-right:20px;text-align:left}@media screen and (max-width: 768px){.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-number{padding-right:5px}}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-logo{background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:59px;margin-left:20px;width:59px}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-logo.authority-logo-0{background-image:url("../images/themes/ethereum-classic/status/authority/logo-0.svg")}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-logo.authority-logo-1{background-image:url("../images/themes/ethereum-classic/status/authority/logo-1.svg")}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-logo.authority-logo-2{background-image:url("../images/themes/ethereum-classic/status/authority/logo-2.svg")}@media screen and (max-width: 768px){.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-logo{display:none}}.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-address{color:#31f896;font-size:16px;font-weight:700;line-height:59px;padding-left:20px;text-align:left}@media screen and (max-width: 768px){.status-page .status-page-container .status-authorities-container .status-authorities-data .authority .authority-address{font-size:12px;padding-left:0}}.status-page .status-left-container{margin-right:auto;padding-top:25px;width:15%}@media screen and (max-width: 1024px){.status-page .status-left-container{display:none}}.copy-icon{cursor:pointer}.copy-icon path{fill:#31f896}.copy-icon-right{margin-left:10px}.copy-icon-left{margin-left:10px}@media screen and (max-width: 768px){.daily-quota-modal-container{display:none}}.daily-quota-modal-container .daily-quota-modal-arrow{border-bottom:10px solid #000;border-left:10px solid transparent;border-right:10px solid transparent;border-top:none;content:" ";position:absolute;top:-10px;z-index:9999}.daily-quota-modal-container .daily-quota-modal{background-color:#fff;border-radius:3px;border:solid 1px #e4e4e9;box-shadow:0 16px 20px 0 rgba(0,0,0,0.05);height:102px;position:fixed;width:219px;z-index:999}.daily-quota-modal-container .daily-quota-modal .modal-container{display:flex;flex-direction:column;height:72px;justify-content:space-between;padding:15px}.daily-quota-modal-container .daily-quota-modal .modal-container .daily-quota-title{color:#31f896;font-size:14px;font-weight:bold;text-align:left}.daily-quota-modal-container .daily-quota-modal .modal-container .daily-quota-description{color:#352d59;font-size:12px;height:45px;text-align:left;width:172px}.daily-quota-modal-container .daily-quota-modal:after{border-bottom:6px solid #e4e4e9;border-left:6px solid transparent;border-right:6px solid transparent;border-top:none;content:" ";position:absolute;right:105px;top:-6px}.datablock-container{align-items:center;display:flex;flex-direction:column;justify-content:space-evenly}@media screen and (max-width: 768px){.datablock-container{align-items:normal;justify-content:flex-start}}.datablock-container .datablock-value{color:#31f896;font-size:30px;font-weight:bold}.datablock-container .datablock-type{color:#31f896;font-size:18px;margin-left:10px}.datablock-container .datablock-description{color:#fff;font-size:14px}.footer{background-color:#221c3f;bottom:0;color:#fff;padding:18px 0;position:absolute}.footer .container{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between}@media screen and (max-width: 768px){.footer .container{flex-direction:column}}.footer .social-icons{order:2}@media screen and (max-width: 768px){.footer .social-icons{margin-top:15px;order:1}}.footer-logo{background-image:url("../images/themes/ethereum-classic/logos/logo.svg");background-repeat:no-repeat;background-size:contain;display:block;height:29px;left:0;order:0;width:158px}.header{background-color:#221c3f;background-position:center center;background-repeat:no-repeat;background-size:cover;width:100%;z-index:9999}.header .container{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between}@media screen and (max-width: 414px){.header .container{padding:22px 0;width:93%}}@media screen and (max-width: 768px){.header .container{padding:22px 0}}.header-logo{background-image:url("../images/themes/ethereum-classic/logos/logo.svg");background-repeat:no-repeat;background-size:contain;display:block;height:41px;width:224px}.header-menu{align-items:center;display:flex;justify-content:space-between;max-width:700px}@media screen and (max-width: 414px){.header-menu{display:none}}@media screen and (max-width: 768px){.header-menu{justify-content:flex-end;width:auto}}.header-wallet{background-color:#352d59;display:flex;flex-direction:column;height:70px;justify-content:space-evenly;width:220px}@media screen and (max-width: 768px){.header-wallet{display:none}}.header-wallet .wallet-container{display:flex;padding-left:20px}.header-wallet .wallet-container .wallet-icon{margin-right:10px}.header-wallet .wallet-container .wallet-icon path{fill:#31f896}.header-wallet .wallet-container .wallet-text{color:#fff;font-size:14px;font-weight:bold;line-height:18px}.header-wallet .wallet-container .wallet-text:hover{text-decoration:none}.header-wallet .wallet-container .wallet-link{cursor:pointer}.header-wallet .wallet-container .wallet-text-metamask{color:#31f896}.header-wallet .daily-quota-container{background-color:rgba(255,255,255,0.2);border-radius:3px;height:6px;margin-left:20px;width:180px}.header-wallet .daily-quota-container .daily-quota-progress{background-color:#31f896;border-radius:3px;height:6px}.menu-items{font-weight:bold;line-height:16px;margin:0 15px;text-decoration:none}@media screen and (max-width: 414px){.menu-items{margin-left:0}}.menu-items:hover{text-decoration:none}.menu-items-text{color:#fff;margin-left:10px}.menu-items-icon{float:left}.menu-items-icon path{fill:#31f896}@media screen and (max-width: 414px){.mobile-menu{background-color:#17132b;height:172px}}.mobile-menu-links{display:none}@media screen and (max-width: 414px){.mobile-menu-links{display:flex;align-items:center;flex-direction:column;height:100%;justify-content:space-evenly}}@media screen and (max-width: 414px){.mobile-menu-open{background-color:rgba(23,19,43,0.9);height:100%;position:fixed;width:100%;z-index:1000000}}.mobile-menu-is-open{min-height:100%;position:fixed;width:100%}.mobile-menu-button{display:none}@media screen and (max-width: 414px){.mobile-menu-button{display:block}}.mobile-menu-button path{fill:#31f896}.social-icons{display:flex}.social-icons-item{align-items:center;background-color:#343053;border-radius:3px;display:flex;height:30px;justify-content:center;margin-right:10px;transition:box-shadow .15s ease-out;width:30px}.social-icons-item:hover{box-shadow:0 0 15px 0 rgba(102,102,102,0.3)}.social-icons-item:last-child{margin-right:0}.social-icons-item svg{width:16px}.social-icons-item path{fill:#b9b0e1} diff --git a/src/assets/stylesheets/application/_base.scss b/src/assets/stylesheets/application/_base.scss index 941daf00..15c22666 100644 --- a/src/assets/stylesheets/application/_base.scss +++ b/src/assets/stylesheets/application/_base.scss @@ -25,7 +25,7 @@ body { } a { - color: $primary-color; + color: $link-color; text-decoration: none; &:hover { diff --git a/src/assets/stylesheets/application/_bridge.scss b/src/assets/stylesheets/application/_bridge.scss index 74a256ea..46d6ca7d 100644 --- a/src/assets/stylesheets/application/_bridge.scss +++ b/src/assets/stylesheets/application/_bridge.scss @@ -235,16 +235,32 @@ font-size: 13px; color: $bridge-label-color; } - .network-name { + .network-title { color: $bridge-label-color; + display: block; font-size: 24px; - padding-left: 5px; + font-weight: 700; } - .network-title { + .network-name { color: $bridge-label-color; + display: block; font-size: 24px; font-weight: 700; } + .text-left { + text-align: left; + + @media screen and (max-width: $mobile-width) { + text-align: center; + } + } + .text-right { + text-align: right; + + @media screen and (max-width: $mobile-width) { + text-align: center; + } + } .network-id { color: $bridge-label-color; font-size: 14px; diff --git a/src/assets/stylesheets/components/_footer.scss b/src/assets/stylesheets/components/_footer.scss index f1e86b3a..7945c6e5 100644 --- a/src/assets/stylesheets/components/_footer.scss +++ b/src/assets/stylesheets/components/_footer.scss @@ -36,17 +36,4 @@ order: 0; width: $footer-logo-width; } - - &-rights { - font-size: 12px; - order: 1; - text-align: center; - - @media screen and (max-width: $tablet-width) { - line-height: normal; - margin-top: 15px; - order: 2; - width: 100%; - } - } } diff --git a/src/assets/stylesheets/themes/_core.scss b/src/assets/stylesheets/themes/_core.scss index e3a7c279..acae1f86 100644 --- a/src/assets/stylesheets/themes/_core.scss +++ b/src/assets/stylesheets/themes/_core.scss @@ -11,6 +11,7 @@ $danger-color: #f13662; $blue-color: #3ab9fe; $text-color: #333; +$link-color: $primary-color; $gradient-color-1: $primary-color; $gradient-color-2: #7b5ab2; diff --git a/src/assets/stylesheets/themes/_ethereum-classic.scss b/src/assets/stylesheets/themes/_ethereum-classic.scss index 1aeffca5..ff0d5a3d 100644 --- a/src/assets/stylesheets/themes/_ethereum-classic.scss +++ b/src/assets/stylesheets/themes/_ethereum-classic.scss @@ -4,13 +4,14 @@ $theme-name: 'ethereum-classic'; $primary-color: #31f896; $primary-color-dark: #352d59; $primary-color-darker: #17132b; -$secondary-color: #31f896; +$secondary-color: #2be187; $secondary-color-dark: #64a231; $tertiary-color: #ffaa07; $danger-color: #f13662; $blue-color: #3ab9fe; $text-color: #fff; +$link-color: $secondary-color; $gradient-color-1: #352d59; $gradient-color-2: #352d59; @@ -21,20 +22,20 @@ $main-font-family: 'Nunito', sans-serif; // header $header-background-color: #221c3f; -$header-logo-width: 145px; -$header-logo-height: 39px; +$header-logo-width: 224px; +$header-logo-height: 41px; // header menu -$header-menu-icon-color: $secondary-color; +$header-menu-icon-color: $primary-color; $header-menu-text-color: #fff; // daily quota $daily-quota-background: rgba(255, 255, 255, 0.2); -$daily-quota-progress: $secondary-color; +$daily-quota-progress: $primary-color; // footer $footer-background-color: #221c3f; -$footer-logo-width: 105px; +$footer-logo-width: 158px; $footer-logo-height: 29px; $footer-text-color: #fff; @@ -67,7 +68,7 @@ $foreign-logo-height: 38px; $button-background-color: $secondary-color; $button-text-color: #fff; -$button-background-color-2: #29eb8b; +$button-background-color-2: $secondary-color; $button-text-color-2: #fff; $button-background-color-3: $secondary-color-dark; @@ -85,7 +86,7 @@ $modal-background-color: #fff; $modal-overlay-background-color: rgba($primary-color-darker, 0.9); $modal-title-color: $primary-color-dark; $modal-text-color: #352d59; -$modal-link-color: $primary-color; +$modal-link-color: $secondary-color; // mobile menu $mobile-menu-background-color: $primary-color-darker; @@ -100,7 +101,7 @@ $loading-logo: $base-images-path + '/themes/' + $theme-name + '/logos/logo-loadi $bridge-gradient-start: #fff; $bridge-gradient-end: #fff; $bridge-logo-background-color: #fff; -$bridge-link-color: #31f896; +$bridge-link-color: $secondary-color; $bridge-balance-color: #352d59; $bridge-button-background-color: $button-background-color; $bridge-button-text-color: $button-text-color; diff --git a/src/components/Bridge.js b/src/components/Bridge.js index 950eefa9..b8911511 100644 --- a/src/components/Bridge.js +++ b/src/components/Bridge.js @@ -32,6 +32,7 @@ export class Bridge extends React.Component { [name]: event.target.value }) } + componentDidMount() { const { web3Store } = this.props.RootStore web3Store.getWeb3Promise.then(() => { @@ -283,6 +284,30 @@ export class Bridge extends React.Component { this.setState({ modalData, showModal: true }) } + getNetworkTitle = (networkName) => { + + const index = networkName.indexOf(" ") + + if (index === -1) { + return networkName + } + + return networkName.substring(0, index) + + } + + getNetworkSubTitle = (networkName) => { + + const index = networkName.indexOf(" ") + + if (index === -1) { + return false + } + + return networkName.substring(index + 1, networkName.length) + + } + render() { const { web3Store, foreignStore, homeStore } = this.props.RootStore const { reverse, showModal, modalData, showConfirmation, confirmationData } = this.state @@ -296,8 +321,10 @@ export class Bridge extends React.Component { } } - const homeNetworkName = homeStore.networkName - const foreignNetworkName = foreignStore.networkName + const homeNetworkName = this.getNetworkTitle(homeStore.networkName) + const homeNetworkSubtitle = this.getNetworkSubTitle(homeStore.networkName) + const foreignNetworkName = this.getNetworkTitle(foreignStore.networkName) + const foreignNetworkSubtitle = this.getNetworkSubTitle(foreignStore.networkName) return(
@@ -316,8 +343,10 @@ export class Bridge extends React.Component { balance={reverse ? foreignStore.balance : homeStore.getDisplayedBalance()} currency={reverse ? foreignStore.symbol : homeStore.symbol} isHome={true} + networkSubtitle={reverse ? foreignNetworkSubtitle : homeNetworkSubtitle} networkTitle={reverse ? foreignNetworkName : homeNetworkName} showModal={reverse ? this.loadForeignDetails : this.loadHomeDetails} + side="left" />
diff --git a/src/components/BridgeNetwork.js b/src/components/BridgeNetwork.js index 998f9e8d..9290dee9 100644 --- a/src/components/BridgeNetwork.js +++ b/src/components/BridgeNetwork.js @@ -3,11 +3,13 @@ import numeral from 'numeral' import { InfoIcon } from './icons/InfoIcon' export const BridgeNetwork = ({ + balance, + currency, isHome, + networkSubtitle, networkTitle, - currency, - balance, - showModal + showModal, + side }) => { const containerName = isHome ? 'home' : 'foreign' const formattedBalance = isNaN(numeral(balance).format('0.00', Math.floor)) @@ -27,8 +29,9 @@ export const BridgeNetwork = ({ return (
-

+

{networkTitle} + {networkSubtitle ? {networkSubtitle} : null}

Balance: diff --git a/src/components/Footer.js b/src/components/Footer.js index ac7a63c1..24b1ead0 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -6,7 +6,6 @@ export const Footer = () => (