mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2025-01-19 05:33:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

Design updates (#3565)

Browse Source 
* Design updates

* Improve table styles

* Form input color improvements

* Form input shadows

* Increase accordion button padding

* Hover transition for checkboxes and radio buttons

* Improve checkbox and radio button spacings

* Improve input styles

* Secondary button updates

* Clear pager floats

* Link improvements

* Don't display border for last table row
This commit is contained in:
d11n 2022-04-11 10:49:57 +02:00 committed by GitHub
parent e5174b4a29
commit bfdb1b4af9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 374 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
BTCPayServer/Components/Pager/Default.cshtml
View File

@ -6,7 +6,7 @@
@if (Model.Total > pageSizeOptions.Min()) @if (Model.Total > pageSizeOptions.Min())
{ {
<nav aria-label="..." class="w-100"> <nav aria-label="..." class="w-100 clearfix">
@if (Model.Total > Model.Count) @if (Model.Total > Model.Count)
{ {
<ul class="pagination float-start"> <ul class="pagination float-start">

540
BTCPayServer/wwwroot/main/bootstrap/bootstrap.css vendored
View File

File diff suppressed because it is too large Load Diff

13
BTCPayServer/wwwroot/main/themes/default-dark.css
View File

@ -21,7 +21,15 @@
--btcpay-body-border-medium: var(--btcpay-neutral-700); --btcpay-body-border-medium: var(--btcpay-neutral-700);
--btcpay-body-text: var(--btcpay-white); --btcpay-body-text: var(--btcpay-white);
--btcpay-body-text-rgb: 255, 255, 255; --btcpay-body-text-rgb: 255, 255, 255;
--btcpay-form-text-label: var(--btcpay-neutral-300); --btcpay-body-link-accent: var(--btcpay-primary-300);
--btcpay-form-bg: var(--btcpay-neutral-950);
--btcpay-form-bg-addon: var(--btcpay-neutral-700);
--btcpay-form-bg-disabled: var(--btcpay-neutral-800);
--btcpay-form-text: var(--btcpay-neutral-200);
--btcpay-form-text-label: var(--btcpay-neutral-100);
--btcpay-form-text-addon: var(--btcpay-neutral-300);
--btcpay-form-border: var(--btcpay-neutral-800);
--btcpay-form-border-check: var(--btcpay-neutral-600);
--btcpay-header-bg: var(--btcpay-bg-dark); --btcpay-header-bg: var(--btcpay-bg-dark);
--btcpay-nav-link: var(--btcpay-neutral-500); --btcpay-nav-link: var(--btcpay-neutral-500);
--btcpay-nav-link-accent: var(--btcpay-neutral-300); --btcpay-nav-link-accent: var(--btcpay-neutral-300);
@ -31,11 +39,8 @@
--btcpay-footer-link-accent: var(--btcpay-neutral-200); --btcpay-footer-link-accent: var(--btcpay-neutral-200);
--btcpay-pre-bg: var(--btcpay-bg-dark); --btcpay-pre-bg: var(--btcpay-bg-dark);
--btcpay-secondary: transparent; --btcpay-secondary: transparent;
--btcpay-secondary-text-hover: var(--btcpay-primary);
--btcpay-secondary-text-active: var(--btcpay-primary); --btcpay-secondary-text-active: var(--btcpay-primary);
--btcpay-secondary-border: var(--btcpay-neutral-700); --btcpay-secondary-border: var(--btcpay-neutral-700);
--btcpay-secondary-border-hover: var(--btcpay-neutral-600);
--btcpay-secondary-border-active: var(--btcpay-neutral-500);
--btcpay-light: var(--btcpay-neutral-800); --btcpay-light: var(--btcpay-neutral-800);
--btcpay-light-accent: var(--btcpay-black); --btcpay-light-accent: var(--btcpay-black);
--btcpay-light-text: var(--btcpay-neutral-200); --btcpay-light-text: var(--btcpay-neutral-200);

18
BTCPayServer/wwwroot/main/themes/default.css
View File

@ -1,5 +1,8 @@
:root { :root {
--btcpay-border-radius: 4px; --btcpay-border-radius: .25rem;
--btcpay-border-radius-l: .5rem;
--btcpay-border-radius-xl: 1rem;
--btcpay-border-radius-xxl: 1.5rem;
--btcpay-transition-duration-fast: .2s; --btcpay-transition-duration-fast: .2s;
--btcpay-transition-duration-default: .3s; --btcpay-transition-duration-default: .3s;
--btcpay-transition-duration-slow: .5s; --btcpay-transition-duration-slow: .5s;
@ -166,7 +169,7 @@
--btcpay-body-text-muted: var(--btcpay-neutral-500); --btcpay-body-text-muted: var(--btcpay-neutral-500);
--btcpay-body-text-rgb: 41, 41, 41; --btcpay-body-text-rgb: 41, 41, 41;
--btcpay-body-link: var(--btcpay-primary); --btcpay-body-link: var(--btcpay-primary);
--btcpay-body-link-accent: var(--btcpay-primary); --btcpay-body-link-accent: var(--btcpay-primary-accent);
--btcpay-body-shadow: rgba(25, 135, 84, 0.33); --btcpay-body-shadow: rgba(25, 135, 84, 0.33);
--btcpay-wizard-bg: var(--btcpay-body-bg); --btcpay-wizard-bg: var(--btcpay-body-bg);
--btcpay-wizard-text: var(--btcpay-body-text); --btcpay-wizard-text: var(--btcpay-body-text);
@ -192,9 +195,12 @@
--btcpay-form-text-label: var(--btcpay-neutral-700); --btcpay-form-text-label: var(--btcpay-neutral-700);
--btcpay-form-text-addon: var(--btcpay-neutral-700); --btcpay-form-text-addon: var(--btcpay-neutral-700);
--btcpay-form-border: var(--btcpay-neutral-300); --btcpay-form-border: var(--btcpay-neutral-300);
--btcpay-form-border-focus: var(--btcpay-form-border); --btcpay-form-border-check: var(--btcpay-neutral-400);
--btcpay-form-border-hover: var(--btcpay-primary);
--btcpay-form-border-focus: var(--btcpay-primary);
--btcpay-form-border-active: var(--btcpay-form-border); --btcpay-form-border-active: var(--btcpay-form-border);
--btcpay-form-border-disabled: var(--btcpay-form-border); --btcpay-form-border-disabled: var(--btcpay-form-border);
--btcpay-form-shadow-size: 2px;
--btcpay-form-shadow-focus: var(--btcpay-primary-shadow); --btcpay-form-shadow-focus: var(--btcpay-primary-shadow);
--btcpay-form-shadow-valid: var(--btcpay-success-shadow); --btcpay-form-shadow-valid: var(--btcpay-success-shadow);
--btcpay-form-shadow-invalid: var(--btcpay-danger-shadow); --btcpay-form-shadow-invalid: var(--btcpay-danger-shadow);
@ -226,17 +232,17 @@
--btcpay-primary-dim-text-striped: var(--btcpay-primary-dim-text); --btcpay-primary-dim-text-striped: var(--btcpay-primary-dim-text);
--btcpay-primary-dim-text-hover: var(--btcpay-primary-dim-text); --btcpay-primary-dim-text-hover: var(--btcpay-primary-dim-text);
--btcpay-primary-dim-text-active: var(--btcpay-primary-900); --btcpay-primary-dim-text-active: var(--btcpay-primary-900);
--btcpay-primary-shadow: rgba(25, 135, 84, 0.33); --btcpay-primary-shadow: rgba(81, 177, 62, 0.5);
--btcpay-primary-rgb: 81, 177, 62; --btcpay-primary-rgb: 81, 177, 62;
--btcpay-secondary: var(--btcpay-white); --btcpay-secondary: var(--btcpay-white);
--btcpay-secondary-accent: var(--btcpay-secondary); --btcpay-secondary-accent: var(--btcpay-secondary);
--btcpay-secondary-text: var(--btcpay-primary); --btcpay-secondary-text: var(--btcpay-primary);
--btcpay-secondary-text-hover: var(--btcpay-brand-dark); --btcpay-secondary-text-hover: var(--btcpay-primary);
--btcpay-secondary-text-active: var(--btcpay-brand-dark); --btcpay-secondary-text-active: var(--btcpay-brand-dark);
--btcpay-secondary-bg-hover: var(--btcpay-secondary-accent); --btcpay-secondary-bg-hover: var(--btcpay-secondary-accent);
--btcpay-secondary-bg-active: var(--btcpay-secondary-accent); --btcpay-secondary-bg-active: var(--btcpay-secondary-accent);
--btcpay-secondary-border: var(--btcpay-neutral-300); --btcpay-secondary-border: var(--btcpay-neutral-300);
--btcpay-secondary-border-hover: var(--btcpay-neutral-400); --btcpay-secondary-border-hover: var(--btcpay-primary);
--btcpay-secondary-border-active: var(--btcpay-neutral-500); --btcpay-secondary-border-active: var(--btcpay-neutral-500);
--btcpay-secondary-dim-bg: var(--btcpay-neutral-200); --btcpay-secondary-dim-bg: var(--btcpay-neutral-200);
--btcpay-secondary-dim-bg-striped: var(--btcpay-neutral-300); --btcpay-secondary-dim-bg-striped: var(--btcpay-neutral-300);