From 833895e797c2110a3e32dbd7c7be436f73b4d08e Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Thu, 27 Jun 2024 10:43:28 +0200 Subject: [PATCH] Design system updates; add icons --- BTCPayServer/wwwroot/img/icon-sprite.svg | 2 + .../wwwroot/main/bootstrap/bootstrap.css | 37 +++++++++++++++++-- BTCPayServer/wwwroot/main/themes/default.css | 10 ++--- 3 files changed, 40 insertions(+), 9 deletions(-) diff --git a/BTCPayServer/wwwroot/img/icon-sprite.svg b/BTCPayServer/wwwroot/img/icon-sprite.svg index fb5e1ebaa..e36bcfed9 100644 --- a/BTCPayServer/wwwroot/img/icon-sprite.svg +++ b/BTCPayServer/wwwroot/img/icon-sprite.svg @@ -45,6 +45,7 @@ + @@ -114,6 +115,7 @@ + diff --git a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css index 7d4edf07e..4fd8b9286 100644 --- a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css +++ b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css @@ -12266,11 +12266,9 @@ ul:not([class]) li { } .accordion-button .icon { - flex-shrink: 0; - width: 24px; - height: 24px; + --icon-size: 1.5rem; margin-left: auto; - transition: transform 0.2s ease-in-out; + transition: transform var(--btcpay-transition-duration-fast) ease-in-out; } .accordion-button:not(.collapsed) .icon { @@ -12306,6 +12304,37 @@ ul:not([class]) li { padding: 1rem; } +/* Badges */ +.badge-translucent { + --btcpay-bg-opacity: .25; +} +.badge-translucent.text-bg-primary { + --btcpay-primary-text: var(--btcpay-primary); +} +.badge-translucent.text-bg-secondary { + --btcpay-secondary-text: var(--btcpay-neutral-light-900); + --btcpay-secondary-rgb: 248, 249, 250; +} +.badge-translucent.text-bg-success { + --btcpay-success-text: var(--btcpay-success); +} +.badge-translucent.text-bg-info { + --btcpay-info-text: var(--btcpay-info); +} +.badge-translucent.text-bg-warning { + --btcpay-warning-text: var(--btcpay-yellow-600); +} +.badge-translucent.text-bg-danger { + --btcpay-danger-text: var(--btcpay-danger); +} +.badge-translucent.text-bg-light { + --btcpay-light-text: var(--btcpay-neutral-800); + --btcpay-bg-opacity: .75; +} +.badge-translucent.text-bg-dark { + --btcpay-dark-text: var(--btcpay-white); +} + /* Icons */ .icon { display: inline-block; diff --git a/BTCPayServer/wwwroot/main/themes/default.css b/BTCPayServer/wwwroot/main/themes/default.css index 1e13a11ce..4a5e5a9c8 100644 --- a/BTCPayServer/wwwroot/main/themes/default.css +++ b/BTCPayServer/wwwroot/main/themes/default.css @@ -158,9 +158,9 @@ --btcpay-font-size-xs: 10px; --btcpay-font-size-s: 12px; --btcpay-font-size-m: 14px; - --btcpay-font-size-l: 18px; - --btcpay-font-size-xl: 36px; - --btcpay-font-size-xxl: 45px; + --btcpay-font-size-l: 20px; + --btcpay-font-size-xl: 28px; + --btcpay-font-size-xxl: 36px; --btcpay-font-weight-normal: 400; --btcpay-font-weight-semibold: 600; --btcpay-font-weight-bold: 700; @@ -254,7 +254,7 @@ --btcpay-pre-bg: var(--btcpay-neutral-900); --btcpay-primary: var(--btcpay-brand-primary); - --btcpay-primary-accent: var(--btcpay-brand-tertiary); + --btcpay-primary-accent: var(--btcpay-primary-700); --btcpay-primary-text: var(--btcpay-white); --btcpay-primary-text-hover: var(--btcpay-white); --btcpay-primary-text-active: var(--btcpay-white); @@ -277,7 +277,7 @@ --btcpay-primary-rgb: 81, 177, 62; --btcpay-secondary: var(--btcpay-white); - --btcpay-secondary-accent: var(--btcpay-secondary); + --btcpay-secondary-accent: var(--btcpay-neutral-700); --btcpay-secondary-text: var(--btcpay-primary); --btcpay-secondary-text-hover: var(--btcpay-primary); --btcpay-secondary-text-active: var(--btcpay-brand-dark);