aljaz/btcpayserver
1
0
Fork 0
mirror of https://github.com/aljazceru/btcpayserver.git synced 2026-01-21 15:04:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Dissect css rules and simplify color variables

Browse Source
This commit is contained in:
Dennis Reimann
2019-11-01 17:29:28 +01:00
parent 5942a840b2
commit 3a9ecd8b33
4 changed files with 105 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
BTCPayServer/wwwroot/css/bootstrap.css vendored
View File

@@ -390,7 +390,7 @@ mark,
code {
font-size: 87.5%;
color: var(--btcpay-color-pink);
color: var(--btcpay-color-info);
word-break: break-word; }
a > code {
color: inherit; }

122
BTCPayServer/wwwroot/css/site.css
View File

@@ -1,4 +1,5 @@
html {
/* General and site-wide Bootstrap modifications */
html {
position: relative;
min-height: 100%;
}
@@ -15,89 +16,8 @@
overflow: hidden;
}
.only-for-js, .input-group-clear {
display: none;
}
#content {
background: #fff;
border: 1px solid #DFE3E8;
padding: 16px;
border-radius: 4px;
}
.table {
background: #fff;
border: 1px solid #DFE3E8;
border-radius: 4px;
border-collapse: separate !important;
border-spacing: 0px !important;
margin-top: 16px;
margin-bottom: 16px;
}
.table thead > tr {
height: 36px;
}
.table thead th {
border-bottom: none;
border-top: none;
vertical-align: middle;
padding: 4px 12px 4px 12px;
}
.table tbody tr:hover {
background-color: #f8fafc;
}
.table tr {
height: 36px;
}
.table th {
display: table-cell;
padding: 4px 12px 4px 12px;
vertical-align: middle;
}
.table td {
display: table-cell;
padding: 4px 12px 4px 12px;
text-align: left;
color: #12161B;
font-size: 0.8125rem;
font-weight: 400;
vertical-align: middle;
}
.removetopborder tr:first-child td {
border-top: none;
}
.removetopborder tr:first-child th {
border-top: none;
}
a.nav-link {
color: #66788A;
}
.nav-pills .nav-link.active {
color: var(--gray-dark);
font-weight: 500;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
color: #66788A;
background-color: #d9f7ef;
border-left: 5px solid var(--primary);
font-weight: 500;
}
.display-when-ledger-connected {
.only-for-js,
.input-group-clear {
display: none;
}
@@ -115,11 +35,6 @@ a.nav-link {
}
}
.invoice-details a{
/* Prevent layout from breaking on hyperlinks with very long URLs as the visible text */
word-break: break-word;
}
.smMaxWidth {
max-width: 150px;
}
@@ -129,3 +44,32 @@ a.nav-link {
max-width: 300px;
}
}
a.nav-link {
color: var(--btcpay-color-nav-link, var(--btcpay-color-neutral-600));
background: var(--btcpay-bg-nav-link, transparent);
transition-duration: .2s;
transition-property: background, color;
}
a.nav-link:focus,
a.nav-link:hover {
color: var(--btcpay-color-nav-link-hover, var(--btcpay-color-neutral-700));
background: var(--btcpay-bg-nav-link-hover, transparent);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
color: var(--btcpay-color-nav-link-active, var(--btcpay-color-neutral-900));
background: var(--btcpay-bg-nav-link-active, var(--btcpay-color-primary-alpha));
font-weight: 500;
}
.display-when-ledger-connected {
display: none;
}
/* Prevent layout from breaking on hyperlinks with very long URLs as the visible text */
.invoice-details a {
word-break: break-word;
}

70
BTCPayServer/wwwroot/css/themes/classic.css
View File

@@ -21,33 +21,22 @@
--btcpay-color-neutral-800: #343a40;
--btcpay-color-neutral-900: #212529;
--btcpay-color-blue: #0069d9;
--btcpay-color-indigo: #6610f2;
--btcpay-color-purple: #6f42c1;
--btcpay-color-pink: #e83e8c;
--btcpay-color-red: #dc3545;
--btcpay-color-orange: #ff6f27;
--btcpay-color-yellow: #ffc107;
--btcpay-color-green: #329f80;
--btcpay-color-teal: #20c997;
--btcpay-color-cyan: #17a2b8;
--btcpay-color-primary: var(--btcpay-color-green);
--btcpay-color-primary: #329f80;
--btcpay-color-primary-dark: #267861;
--btcpay-color-primary-alpha: rgba(81, 173, 147, 0.25);
--btcpay-color-secondary: var(--btcpay-color-gray-600);
--btcpay-color-secondary-dark: var(--btcpay-color-gray-800);
--btcpay-color-secondary-alpha: rgba(130, 138, 145, 0.25);
--btcpay-color-success: var(--btcpay-color-green);
--btcpay-color-success: #329f80;
--btcpay-color-success-dark: #1e7e34;
--btcpay-color-success-alpha: rgba(72, 180, 97, 0.25);
--btcpay-color-info: var(--btcpay-color-cyan);
--btcpay-color-info: #17a2b8;
--btcpay-color-info-dark: #117a8b;
--btcpay-color-info-alpha: rgba(58, 176, 195, 0.25);
--btcpay-color-warning: var(--btcpay-color-yellow);
--btcpay-color-warning: #ffc107;
--btcpay-color-warning-dark: #d39e00;
--btcpay-color-warning-alpha: rgba(2 22, 170, 12, 0.25);
--btcpay-color-danger: var(--btcpay-color-red);
--btcpay-color-danger: #dc3545;
--btcpay-color-danger-dark: #bd2130;
--btcpay-color-danger-alpha: rgba(225, 83, 97, 0.25);
--btcpay-color-light: var(--btcpay-color-gray-100);
@@ -71,7 +60,52 @@
/* Bootstrap modifications */
html {
font-size: var(--btcpay-font-size-base); }
font-size: var(--btcpay-font-size-base);
}
.bg-dark {
background-color: var(--btcpay-bg-dark) !important; }
background-color: var(--btcpay-bg-dark) !important;
}
.table {
margin: 16px 0;
border: 1px solid var(--btcpay-color-neutral-300);
border-radius: 4px;
border-collapse: separate !important;
border-spacing: 0px !important;
}
.table thead > tr {
height: 36px;
}
.table thead th {
border-bottom: none;
border-top: none;
}
.table tbody tr:hover {
background-color: #f8fafc;
}
.table tr {
height: 36px;
}
.table th,
.table td {
display: table-cell;
padding: 4px 12px;
vertical-align: middle;
}
.table td {
text-align: left;
font-size: 0.8125rem;
font-weight: 400;
}
.removetopborder tr:first-child th,
.removetopborder tr:first-child td {
border-top: none;
}

39
BTCPayServer/wwwroot/css/themes/modern.css
View File

@@ -21,33 +21,22 @@
--btcpay-color-neutral-800: #343a40;
--btcpay-color-neutral-900: #202C39;
--btcpay-color-blue: #0069d9;
--btcpay-color-indigo: #6610f2;
--btcpay-color-purple: #6f42c1;
--btcpay-color-pink: #e83e8c;
--btcpay-color-red: #dc3545;
--btcpay-color-orange: #ff6f27;
--btcpay-color-yellow: #ffc107;
--btcpay-color-green: #329f80;
--btcpay-color-teal: #20c997;
--btcpay-color-cyan: #17a2b8;
--btcpay-color-primary: var(--btcpay-color-green);
--btcpay-color-primary: #329f80;
--btcpay-color-primary-dark: #267861;
--btcpay-color-primary-alpha: rgba(81, 173, 147, 0.25);
--btcpay-color-primary-alpha: rgba(81, 173, 147, 0.2);
--btcpay-color-secondary: var(--btcpay-color-gray-600);
--btcpay-color-secondary-dark: var(--btcpay-color-gray-800);
--btcpay-color-secondary-alpha: rgba(130, 138, 145, 0.25);
--btcpay-color-success: var(--btcpay-color-green);
--btcpay-color-success: #329f80;
--btcpay-color-success-dark: #1e7e34;
--btcpay-color-success-alpha: rgba(72, 180, 97, 0.25);
--btcpay-color-info: var(--btcpay-color-cyan);
--btcpay-color-info: #17a2b8;
--btcpay-color-info-dark: #117a8b;
--btcpay-color-info-alpha: rgba(58, 176, 195, 0.25);
--btcpay-color-warning: var(--btcpay-color-yellow);
--btcpay-color-warning: #ffc107;
--btcpay-color-warning-dark: #d39e00;
--btcpay-color-warning-alpha: rgba(2 22, 170, 12, 0.25);
--btcpay-color-danger: var(--btcpay-color-red);
--btcpay-color-warning-alpha: rgba(222, 170, 12, 0.25);
--btcpay-color-danger: #dc3545;
--btcpay-color-danger-dark: #bd2130;
--btcpay-color-danger-alpha: rgba(225, 83, 97, 0.25);
--btcpay-color-light: var(--btcpay-color-gray-100);
@@ -71,11 +60,21 @@
/* Bootstrap modifications */
html {
font-size: var(--btcpay-font-size-base); }
font-size: var(--btcpay-font-size-base);
}
.bg-dark {
background-color: var(--btcpay-bg-dark) !important; }
background-color: var(--btcpay-bg-dark) !important;
}
header.masthead::before,
.service-box img {
filter: hue-rotate(410deg) saturate(33%); }
.table {
margin: 24px 0 48px;
}
.table th {
border-top: 0;
}