aljaz/btcpayserver
1
0
Fork 0
mirror of https://github.com/aljazceru/btcpayserver.git synced 2026-02-18 20:54:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

Finetune colors (#1514)

Browse Source 
* Better harmonic neutral color progression

fix

* Invert light/dark colors for dark theme

fix

* Lighten form control borders a bit

* Use correct text color variables
This commit is contained in:
Dennis Reimann
2020-04-27 16:57:18 +02:00
committed by GitHub
parent c784144a07
commit 94cdd399d5
4 changed files with 39 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1186,7 +1186,7 @@ pre {
color: var(--btcpay-color-neutral-700);
background-color: var(--btcpay-color-white);
background-clip: padding-box;
border: 1px solid var(--btcpay-color-neutral-400);
border: 1px solid var(--btcpay-color-neutral-300);
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
@@ -2329,7 +2329,7 @@ input[type="button"].btn-block {
text-align: center;
white-space: nowrap;
background-color: var(--btcpay-color-neutral-200);
border: 1px solid var(--btcpay-color-neutral-400);
border: 1px solid var(--btcpay-color-neutral-300);
border-radius: 0.25rem; }
.input-group-text input[type="radio"],
.input-group-text input[type="checkbox"] {
@@ -2507,7 +2507,7 @@ input[type="button"].btn-block {
vertical-align: middle;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='var(--btcpay-color-neutral-800)' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
background-color: var(--btcpay-color-white);
border: 1px solid var(--btcpay-color-neutral-400);
border: 1px solid var(--btcpay-color-neutral-300);
border-radius: 0.25rem;
appearance: none; }
.custom-select:focus {
@@ -2577,7 +2577,7 @@ input[type="button"].btn-block {
line-height: 1.5;
color: var(--btcpay-color-neutral-700);
background-color: var(--btcpay-color-white);
border: 1px solid var(--btcpay-color-neutral-400);
border: 1px solid var(--btcpay-color-neutral-300);
border-radius: 0.25rem; }
.custom-file-label::after {
position: absolute;
@@ -3327,60 +3327,60 @@ input[type="button"].btn-block {
border-radius: 10rem; }
.badge-primary {
color: var(--btcpay-color-white);
color: var(--btcpay-color-primary-text);
background-color: var(--btcpay-color-primary); }
a.badge-primary:hover, a.badge-primary:focus {
color: var(--btcpay-color-white);
color: var(--btcpay-color-primary-text);
background-color: var(--btcpay-color-primary-accent); }
a.badge-primary:focus, a.badge-primary.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem var(--btcpay-color-primary-backdrop); }
.badge-secondary {
color: var(--btcpay-color-white);
color: var(--btcpay-color-secondary-text);
background-color: var(--btcpay-color-secondary); }
a.badge-secondary:hover, a.badge-secondary:focus {
color: var(--btcpay-color-white);
color: var(--btcpay-color-secondary-text);
background-color: var(--btcpay-color-secondary-accent); }
a.badge-secondary:focus, a.badge-secondary.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem var(--btcpay-color-secondary-backdrop); }
.badge-success {
color: var(--btcpay-color-white);
color: var(--btcpay-color-success-text);
background-color: var(--btcpay-color-success); }
a.badge-success:hover, a.badge-success:focus {
color: var(--btcpay-color-white);
color: var(--btcpay-color-success-text);
background-color: var(--btcpay-color-success-accent); }
a.badge-success:focus, a.badge-success.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem var(--btcpay-color-success-backdrop); }
.badge-info {
color: var(--btcpay-color-white);
color: var(--btcpay-color-info-text);
background-color: var(--btcpay-color-info); }
a.badge-info:hover, a.badge-info:focus {
color: var(--btcpay-color-white);
color: var(--btcpay-color-info-text);
background-color: var(--btcpay-color-info-accent); }
a.badge-info:focus, a.badge-info.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem var(--btcpay-color-info-backdrop); }
.badge-warning {
color: var(--btcpay-color-neutral-900);
color: var(--btcpay-color-warning-text);
background-color: var(--btcpay-color-warning); }
a.badge-warning:hover, a.badge-warning:focus {
color: var(--btcpay-color-neutral-900);
color: var(--btcpay-color-warning-text);
background-color: var(--btcpay-color-warning-accent); }
a.badge-warning:focus, a.badge-warning.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem var(--btcpay-color-warning-backdrop); }
.badge-danger {
color: var(--btcpay-color-white);
color: var(--btcpay-color-danger-text);
background-color: var(--btcpay-color-danger); }
a.badge-danger:hover, a.badge-danger:focus {
color: var(--btcpay-color-white);
color: var(--btcpay-color-danger-text);
background-color: var(--btcpay-color-danger-accent); }
a.badge-danger:focus, a.badge-danger.focus {
outline: 0;s
@@ -6738,7 +6738,7 @@ a.text-dark:hover, a.text-dark:focus {
color: var(--btcpay-body-color) !important; }
.text-muted {
color: var(--btcpay-color-neutral-600) !important; }
color: var(--btcpay-color-secondary) !important; }
.text-black-50 {
color: rgba(0, 0, 0, 0.5) !important; }

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

@@ -27,7 +27,7 @@
--btcpay-color-secondary: var(--btcpay-color-neutral-600);
--btcpay-color-secondary-backdrop: var(--btcpay-color-neutral-100);
--btcpay-color-secondary-accent: var(--btcpay-color-neutral-500);
--btcpay-color-secondary-text: var(--btcpay-color-neutral-500);
--btcpay-color-secondary-text: var(--btcpay-color-neutral-400);
--btcpay-color-success: #25933d;
--btcpay-color-success-backdrop: #c3e6cb;
--btcpay-color-success-accent: #137929;
@@ -44,14 +44,14 @@
--btcpay-color-danger-backdrop: #EDA1B0;
--btcpay-color-danger-accent: #bd2130;
--btcpay-color-danger-text: #bd2130;
--btcpay-color-light: var(--btcpay-color-neutral-200);
--btcpay-color-light-backdrop: var(--btcpay-color-neutral-200);
--btcpay-color-light-accent: var(--btcpay-color-neutral-100);
--btcpay-color-light-text: var(--btcpay-color-neutral-800);
--btcpay-color-dark: var(--btcpay-color-neutral-800);
--btcpay-color-dark-backdrop: var(--btcpay-color-neutral-800);
--btcpay-color-dark-accent: var(--btcpay-color-neutral-900);
--btcpay-color-dark-text: var(--btcpay-color-neutral-200);
--btcpay-color-light: var(--btcpay-color-neutral-700);
--btcpay-color-light-backdrop: var(--btcpay-color-neutral-700);
--btcpay-color-light-accent: var(--btcpay-color-neutral-500);
--btcpay-color-light-text: var(--btcpay-color-neutral-200);
--btcpay-color-dark: var(--btcpay-color-neutral-200);
--btcpay-color-dark-backdrop: var(--btcpay-color-neutral-200);
--btcpay-color-dark-accent: var(--btcpay-color-neutral-400);
--btcpay-color-dark-text: var(--btcpay-color-neutral-800);
/* Color definitions for specific sections - try to reuse colors defined above */
--btcpay-body-bg: var(--btcpay-brand-darkest);

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

@@ -2,6 +2,7 @@
/* Dark theme overrides */
:root {
--btcpay-color-neutral-950: #222222;
--btcpay-color-primary-backdrop: #389725;
--btcpay-bg-dark: var(--btcpay-color-neutral-950);
@@ -19,6 +20,15 @@
--btcpay-border-color-light: var(--btcpay-color-neutral-600);
--btcpay-border-color-medium: var(--btcpay-color-neutral-700);
--btcpay-color-light: var(--btcpay-color-neutral-800);
--btcpay-color-light-backdrop: var(--btcpay-color-neutral-800);
--btcpay-color-light-accent: var(--btcpay-color-black);
--btcpay-color-light-text: var(--btcpay-color-neutral-200);
--btcpay-color-dark: var(--btcpay-color-neutral-200);
--btcpay-color-dark-backdrop: var(--btcpay-color-neutral-200);
--btcpay-color-dark-accent: var(--btcpay-color-neutral-400);
--btcpay-color-dark-text: var(--btcpay-color-neutral-800);
}
.social-logo {

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

@@ -13,18 +13,17 @@
--btcpay-color-neutral-200: #e9ecef;
--btcpay-color-neutral-300: #dee2e6;
--btcpay-color-neutral-400: #ced4da;
--btcpay-color-neutral-500: #8d8d8f;
--btcpay-color-neutral-500: #8f979e;
--btcpay-color-neutral-600: #6c757d;
--btcpay-color-neutral-700: #495057;
--btcpay-color-neutral-800: #343a40;
--btcpay-color-neutral-900: #292929;
--btcpay-color-neutral-950: #222222;
--btcpay-color-primary: var(--btcpay-brand-medium);
--btcpay-color-primary-backdrop: #D2E5CF;
--btcpay-color-primary-accent: var(--btcpay-brand-dark);
--btcpay-color-primary-text: var(--btcpay-color-neutral-900);
--btcpay-color-secondary: var(--btcpay-color-neutral-600);
--btcpay-color-secondary: var(--btcpay-color-neutral-500);
--btcpay-color-secondary-backdrop: #C5CACC;
--btcpay-color-secondary-accent: var(--btcpay-color-neutral-700);
--btcpay-color-secondary-text: var(--btcpay-color-neutral-700);
@@ -40,7 +39,7 @@
--btcpay-color-warning: #ffc107;
--btcpay-color-warning-backdrop: #ffc107;
--btcpay-color-warning-accent: #d39e00;
--btcpay-color-warning-text: var(--btcpay-color-neutral-700);
--btcpay-color-warning-text: var(--btcpay-color-neutral-900);
--btcpay-color-danger: #c12c1a;
--btcpay-color-danger-backdrop: #E85442;
--btcpay-color-danger-accent: #a71705;