From b7afcb90a2a2e49e06219fe8427b52fc6a41170f Mon Sep 17 00:00:00 2001 From: rockstardev Date: Thu, 26 Mar 2020 18:45:35 -0500 Subject: [PATCH] Tweaking checkout logo to be set from css --- .../Views/Invoice/Checkout-Body.cshtml | 2 +- .../themes/default-logo.svg} | 0 .../wwwroot/checkout/css/themes/default.css | 11 ++ .../css/themes/legacy-logo.png} | Bin .../wwwroot/checkout/css/themes/legacy.css | 115 ++++++++++-------- 5 files changed, 76 insertions(+), 52 deletions(-) rename BTCPayServer/wwwroot/checkout/{img/logo-top.svg => css/themes/default-logo.svg} (100%) rename BTCPayServer/wwwroot/{img/logo-white.png => checkout/css/themes/legacy-logo.png} (100%) diff --git a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml index 075b9be0e..a25674325 100644 --- a/BTCPayServer/Views/Invoice/Checkout-Body.cshtml +++ b/BTCPayServer/Views/Invoice/Checkout-Body.cshtml @@ -9,7 +9,7 @@ } else { - + }
diff --git a/BTCPayServer/wwwroot/checkout/img/logo-top.svg b/BTCPayServer/wwwroot/checkout/css/themes/default-logo.svg similarity index 100% rename from BTCPayServer/wwwroot/checkout/img/logo-top.svg rename to BTCPayServer/wwwroot/checkout/css/themes/default-logo.svg diff --git a/BTCPayServer/wwwroot/checkout/css/themes/default.css b/BTCPayServer/wwwroot/checkout/css/themes/default.css index 517033eb3..5d5d0cea4 100644 --- a/BTCPayServer/wwwroot/checkout/css/themes/default.css +++ b/BTCPayServer/wwwroot/checkout/css/themes/default.css @@ -8310,6 +8310,17 @@ strong { margin: 10px auto 0px; } +.header__icon__img { + display: block; + -moz-box-sizing: border-box; + box-sizing: border-box; + background: url(default-logo.svg) no-repeat; + background-size: 92.5px 40px; + width: 92.5px; + height: 40px; + padding-left: 92.5px; /* Must be equal to width */ +} + .top-header .timer-row { background: #51b13e; color: #fff; diff --git a/BTCPayServer/wwwroot/img/logo-white.png b/BTCPayServer/wwwroot/checkout/css/themes/legacy-logo.png similarity index 100% rename from BTCPayServer/wwwroot/img/logo-white.png rename to BTCPayServer/wwwroot/checkout/css/themes/legacy-logo.png diff --git a/BTCPayServer/wwwroot/checkout/css/themes/legacy.css b/BTCPayServer/wwwroot/checkout/css/themes/legacy.css index 517033eb3..d2d25736f 100644 --- a/BTCPayServer/wwwroot/checkout/css/themes/legacy.css +++ b/BTCPayServer/wwwroot/checkout/css/themes/legacy.css @@ -331,7 +331,7 @@ body { line-height: 1.5; background-color: #fff; margin: 0; - background: #f8f9fa; + background: #E4E4E4; } [tabindex="-1"]:focus { @@ -8154,11 +8154,11 @@ a:hover { .action-button { color: #fff; - background-color: #51b13e; - border-color: #51b13e; - padding: 12px; + background-color: #329F80; + border-color: #329F80; + padding: 15px; word-break: normal; - font-size: 13px; + font-size: 13.5px; min-width: 185px; font-weight: 300; letter-spacing: .7px; @@ -8170,21 +8170,21 @@ a:hover { .action-button:hover { color: #fff; - background-color: #418e32; - border-color: #418e32; + background-color: #24725B; + border-color: #24725B; } .action-button:focus, .action-button.focus { color: #fff; - background-color: #418e32; - border-color: #418e32; + background-color: #24725B; + border-color: #24725B; } .action-button:active, .action-button.active, .open > .action-button.dropdown-toggle { color: #fff; - background-color: #418e32; - border-color: #418e32; + background-color: #24725B; + border-color: #24725B; background-image: none; } @@ -8193,8 +8193,8 @@ a:hover { .open > .action-button.dropdown-toggle:focus, .open > .action-button.dropdown-toggle.focus { color: #fff; - background-color: #418e32; - border-color: #418e32; + background-color: #24725B; + border-color: #24725B; } .action-button.disabled:focus, .action-button.disabled.focus, .action-button:disabled:focus, .action-button:disabled.focus { @@ -8208,7 +8208,7 @@ a:hover { } .action-button:hover { - background-color: #418e32; + background-color: #24725B; border-color: rgba(28, 100, 222, 0); opacity: .95; } @@ -8250,7 +8250,7 @@ strong { } .modal-content { - box-shadow: 0 2px 32px 0 rgba(0, 0, 0, 0.5); + box-shadow: 0 2px 32px 0 rgba(0, 0, 0, 0.85); background: #F5F5F7; z-index: 999999; border-radius: 0; @@ -8284,8 +8284,8 @@ strong { } .top-header { - color: #000; - background-color: #fff; + color: #fff; + background-color: #329F80; font-weight: 500; letter-spacing: .5px; } @@ -8307,37 +8307,38 @@ strong { position: relative; width: 100px; height: 50px; - margin: 10px auto 0px; + margin-left: 10px; + margin-top: 10px; +} + +.header__icon__img { + display: block; + -moz-box-sizing: border-box; + box-sizing: border-box; + background: url(legacy-logo.png) no-repeat; + background-size: 92.5px 40px; + width: 92.5px; + height: 40px; + padding-left: 92.5px; /* Must be equal to width */ } .top-header .timer-row { - background: #51b13e; - color: #fff; + background: #CEDC21; display: flex; align-items: center; - padding: 5px 14px 3px; - font-size: 13px; + padding: 3px 14px; position: relative; transition: background 1s ease; } .top-header .timer-row.expiring-soon { - background: #ed4f32; + background: #D3051E; } .top-header .timer-row.expiring-soon .timer-row__message { opacity: 1; } -.top-header .timer-row__progress-bar { - position: absolute; - height: 100%; - width: 0%; - top: 0; - left: 0; - background: rgba(0, 0, 0, 0.2); -} - .top-header .timer-row__spinner { display: flex; margin-left: -5px; @@ -8347,7 +8348,7 @@ strong { .top-header .timer-row__spinner svg { width: 17px; height: 17px; - fill: #fff; + fill: #4681e2; animation: spin 0.5s linear infinite; margin-top: -2px; transition: fill .5s ease; @@ -8369,13 +8370,24 @@ strong { .top-header .timer-row__message { flex-grow: 1; + font-size: 13.5px; z-index: 1; } .top-header .timer-row__time-left { + font-size: 13.5px; z-index: 1; } +.top-header .timer-row__progress-bar { + position: absolute; + height: 100%; + width: 0%; + top: 0; + left: 0; + background: rgba(0, 0, 0, 0.2); +} + .subheader { padding: 1rem !important; font-size: 13px; @@ -8541,7 +8553,7 @@ strong { position: absolute; height: 5px; width: 50%; - background: #51b13e; + background: #329F80; top: 0; right: 50%; transition: all .2s ease; @@ -8804,7 +8816,7 @@ strong { transform: rotateZ(45deg); margin-left: -5px; top: -5px; - background: #51b13e; + background: #329F80; transform-style: preserve-3d; backface-visibility: hidden; } @@ -9009,15 +9021,14 @@ strong { .payment-box { padding-top: 15px; position: relative; - font-size: 13px; margin-bottom: 1.5rem !important; margin-bottom: 0 !important; min-height: 393px; } - .payment-box.with-recommended-fee { - min-height: 430px; - } +.payment-box.with-recommended-fee { + min-height: 430px; +} .paypro { padding: 10px; @@ -9072,13 +9083,13 @@ strong { } .close-icon { - padding: 16px; + flex-grow: 1; + display: none; + justify-content: flex-end; + padding: 13px; transition: opacity 250ms ease; opacity: 1; cursor: pointer; - position: absolute; - right: 0px; - display:none; } .close-icon img { @@ -9255,6 +9266,8 @@ strong { .recommended-fee { box-sizing: border-box; color: #818EA9; + font-size: 14px; + font-weight: 300; position: absolute; top: calc(100% - 40px); left: 50%; @@ -9408,7 +9421,7 @@ strong { .btnGroupLnd button { display: table-cell; - border: solid 1px #418e32; + border: solid 1px #24725B; padding: 6px 9px; margin: 0px; font-size: 12px; @@ -9423,14 +9436,14 @@ strong { } .btnGroupLnd button.active { - background-color: #51b13e; - border-color: #51b13e; + background-color: #329F80; + border-color: #329F80; color: #fff; } .btnGroupLnd button.active:hover { - background-color: #418e32; - border-color: #418e32; + background-color: #24725B; + border-color: #24725B; color: #fff; } @@ -11394,7 +11407,7 @@ low-fee-timeline { transform: rotateZ(45deg); margin-left: -5px; top: -5px; - background: #51b13e; + background: #329F80; transform-style: preserve-3d; backface-visibility: hidden; margin-bottom: -10px; @@ -11545,9 +11558,9 @@ low-fee-timeline { .btn-link { - color: #51b13e; + color: #329F80; } .btn-link:hover { - color: #418e32; + color: #24725B; }