Merge pull request #1162 from dennisreimann/theme-fixes

Theme fixes

BTCPayServer/Views/AppsPublic/ViewPointOfSale.cshtml

@@ -44,23 +44,34 @@
             grid-gap: .5rem;
         }
 
-            .card-deck .card:only-of-type {
-                max-width: 320px;
-                margin: auto;
-            }
+        .card-deck .card:only-of-type {
+            max-width: 320px;
+            margin: auto;
+        }
 
-            .js-cart-item-count {
-                -moz-appearance:textfield;
-                margin: 0;
-                text-align: right;
-            }
+        .js-cart-item-minus .fa,
+        .js-cart-item-plus .fa {
+            background: #fff;
+            border-radius: 50%;
+            width: 17px;
+            height: 17px;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+        }
 
-            .js-cart-item-count::-webkit-inner-spin-button,
-            .js-cart-item-count::-webkit-outer-spin-button {
-                -webkit-appearance: none;
-                -moz-appearance: none;
-                appearance: none;
-            }
+        .js-cart-item-count {
+            -moz-appearance:textfield;
+            margin: 0;
+            text-align: right;
+        }
+
+        .js-cart-item-count::-webkit-inner-spin-button,
+        .js-cart-item-count::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+        }
     </style>
     @if (!string.IsNullOrEmpty(Model.EmbeddedCSS))
     {
@@ -151,8 +162,8 @@
     <script id="template-cart-tip" type="text/template">
         @if (Model.EnableTips)
         {
-            <tr class="h5">
-                <th colspan="5" class="border-top-0 pt-4">@Model.CustomTipText</th>
+            <tr>
+                <th colspan="5" class="border-top-0 pt-4 h5">@Model.CustomTipText</th>
             </tr>
             <tr>
                 <th colspan="5" class="border-0">
@@ -183,9 +194,9 @@
     </script>
 
     <script id="template-cart-total" type="text/template">
-        <tr class="h4">
-            <th colspan="1" class="pb-4">Total</th>
-            <th colspan="4" class="pb-4 text-right">
+        <tr>
+            <th colspan="1" class="pb-4 h4">Total</th>
+            <th colspan="4" class="pb-4 h4 text-right">
                 <span class="js-cart-total">{total}</span>
             </th>
         </tr>
@@ -211,36 +222,36 @@
                     <div class="modal-body p-0">
                         <table id="js-cart-summary" class="table m-0">
                             <tbody class="my-3">
-                                <tr class="h5">
-                                    <td colspan="2" class="border-top-0">Summary</td>
+                                <tr>
+                                    <td colspan="2" class="border-top-0 h5">Summary</td>
                                 </tr>
-                                <tr class="h6">
-                                    <td class="border-0 pb-0">Total products</td>
-                                    <td align="right" class="border-0 pb-0">
+                                <tr>
+                                    <td class="border-0 pb-0 h6">Total products</td>
+                                    <td align="right" class="border-0 pb-0 h6">
                                         <span class="js-cart-summary-products text-nowrap"></span>
                                     </td>
                                 </tr>
                                 @if (Model.ShowDiscount)
                                 {
-                                    <tr class="h6">
-                                        <td class="border-0 pb-y">Discount</td>
-                                        <td align="right" class="border-0 pb-y">
+                                    <tr>
+                                        <td class="border-0 pb-y h6">Discount</td>
+                                        <td align="right" class="border-0 pb-y h6">
                                             <span class="js-cart-summary-discount text-nowrap"></span>
                                         </td>
                                     </tr>
                                 }
                                 @if (Model.EnableTips)
                                 {
-                                    <tr class="h6">
-                                        <td class="border-top-0 pt-0">Tip</td>
-                                        <td align="right" class="border-top-0 pt-0">
+                                    <tr>
+                                        <td class="border-top-0 pt-0 h6">Tip</td>
+                                        <td align="right" class="border-top-0 pt-0 h6">
                                             <span class="js-cart-summary-tip text-nowrap"></span>
                                         </td>
                                     </tr>
                                 }
-                                <tr class="h3 table-light">
-                                    <td>Total</td>
-                                    <td align="right">
+                                <tr>
+                                    <td class="h3 table-light">Total</td>
+                                    <td class="h3 table-light text-right">
                                         <span class="js-cart-summary-total text-nowrap"></span>
                                     </td>
                                 </tr>
@@ -355,8 +366,8 @@
                     <a class="js-cart-destroy btn btn-danger pull-right" href="#" style="display: none;">Empty cart <i class="fa fa-trash fa-fw fa-lg"></i></a>
                 </div>
 
-                <table id="js-cart-list" class="table table-responsive bg-light text-secondary mt-0 mb-0">
-                    <thead class="thead-light">
+                <table id="js-cart-list" class="table table-responsive table-light mt-0 mb-0">
+                    <thead>
                         <tr>
                             <th colspan="3" width="55%">Product</th>
                             <th class="text-center" width="20%">
@@ -370,8 +381,8 @@
                     <tbody></tbody>
                 </table>
 
-                <table id="js-cart-extra" class="table bg-light mt-0 mb-0">
-                    <thead class="thead-light"></thead>
+                <table id="js-cart-extra" class="table table-light mt-0 mb-0">
+                    <thead></thead>
                 </table>
 
                 <button id="js-cart-confirm" data-toggle="modal" data-target="#cartModal" class="btn btn-primary btn-lg btn-block mb-3 p-3" disabled="disabled" type="submit">

BTCPayServer/Views/Manage/Disable2fa.cshtml

@@ -11,7 +11,7 @@
     </p>
     <p>
         Disabling 2FA does not change the keys used in authenticator apps. If you wish to change the key
-        used in an authenticator app you should <a asp-action="ResetAuthenticatorWarning">
+        used in an authenticator app you should <a asp-action="ResetAuthenticatorWarning" class="alert-link">
             reset your
             authenticator keys.
         </a>

BTCPayServer/Views/Manage/TwoFactorAuthentication.cshtml

@@ -9,21 +9,21 @@
     {
         <div class="alert alert-danger">
             <strong>You have no recovery codes left.</strong>
-            <p>You must <a asp-action="GenerateRecoveryCodes">generate a new set of recovery codes</a> before you can log in with a recovery code.</p>
+            <p>You must <a asp-action="GenerateRecoveryCodes" class="alert-link">generate a new set of recovery codes</a> before you can log in with a recovery code.</p>
         </div>
     }
     else if(Model.RecoveryCodesLeft == 1)
     {
         <div class="alert alert-danger">
             <strong>You have 1 recovery code left.</strong>
-            <p>You can <a asp-action="GenerateRecoveryCodes">generate a new set of recovery codes</a>.</p>
+            <p>You can <a asp-action="GenerateRecoveryCodes" class="alert-link">generate a new set of recovery codes</a>.</p>
         </div>
     }
     else if(Model.RecoveryCodesLeft <= 3)
     {
         <div class="alert alert-warning">
             <strong>You have @Model.RecoveryCodesLeft recovery codes left.</strong>
-            <p>You should <a asp-action="GenerateRecoveryCodes">generate a new set of recovery codes</a>.</p>
+            <p>You should <a asp-action="GenerateRecoveryCodes" class="alert-link">generate a new set of recovery codes</a>.</p>
         </div>
     }
 

BTCPayServer/Views/Server/Theme.cshtml

@@ -13,7 +13,7 @@
 <div class="row">
     <div class="col-lg-6">
         <form method="post">
-            <div class="form-group">
+            <div class="form-group mb-5">
                 <label asp-for="ThemeCssUri"></label>
                 <select id=themes asp-for="ThemeCssUri" class="form-control">
                     <option value="/main/themes/classic.css">Classic</option>

BTCPayServer/Views/Shared/NotificationEmailWarning.cshtml

@@ -1,5 +1,5 @@
 <div class="alert alert-warning alert-dismissible">
     <button type="button" class="close" data-dismiss="alert" aria-label="Close">
         <span aria-hidden="true">&times;</span>
-    </button>The Email settings have not been configured on this server or store yet. Setting this field will not send emails until then. <a asp-action="Emails" asp-controller="Stores" asp-route-storeId="@Model">Configure store email settings</a>
+    </button>The Email settings have not been configured on this server or store yet. Setting this field will not send emails until then. <a asp-action="Emails" asp-controller="Stores" asp-route-storeId="@Model" class="alert-link">Configure store email settings</a>
 </div>

BTCPayServer/Views/Shared/_Layout.cshtml

@@ -79,7 +79,7 @@
             </div>
             <div id="badUrl" class="alert alert-danger alert-dismissible" style="display:none; position:absolute; top:75px;" role="alert">
                 <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                <span>BTCPay is expecting you to access this website from <b>@(env.ExpectedProtocol)://@(env.ExpectedHost)/</b>. If you use a reverse proxy, please set the <b>X-Forwarded-Proto</b> header to <b id="browserScheme">@(env.ExpectedProtocol)</b> (<a href="https://docs.btcpayserver.org/faq-and-common-issues/faq-deployment#btcpay-is-expecting-you-to-access-this-website-from" target="_blank">More information</a>)</span>
+                <span>BTCPay is expecting you to access this website from <b>@(env.ExpectedProtocol)://@(env.ExpectedHost)/</b>. If you use a reverse proxy, please set the <b>X-Forwarded-Proto</b> header to <b id="browserScheme">@(env.ExpectedProtocol)</b> (<a href="https://docs.btcpayserver.org/faq-and-common-issues/faq-deployment#btcpay-is-expecting-you-to-access-this-website-from" target="_blank" class="alert-link">More information</a>)</span>
             </div>
             @if (!env.IsSecure)
             {

BTCPayServer/Views/Stores/ListTokens.cshtml

@@ -9,7 +9,7 @@
 {
     <div class="alert alert-warning alert-dismissible" role="alert">
         <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <span>Warning: No wallet has been linked to your BTCPay Store. See <a href="https://docs.btcpayserver.org/getting-started/connectwallet" target="_blank">this link</a> for more information on how to connect your store and wallet.</span>
+        <span>Warning: No wallet has been linked to your BTCPay Store. See <a href="https://docs.btcpayserver.org/getting-started/connectwallet" target="_blank" class="alert-link">this link</a> for more information on how to connect your store and wallet.</span>
     </div>
 }
 <h4>Access token</h4>

BTCPayServer/Views/Stores/PayButton.cshtml

@@ -57,15 +57,15 @@
             <div class="form-group">
                 <label>Button Size</label>
                 <div style="vertical-align:top; font-size:12px; display:flex;">
-                    <button class="btn" style="width:146px;height:40px;margin-right:40px;"
+                    <button class="btn text-nowrap" style="width:146px;height:40px;margin-right:40px;"
                             v-on:click="inputChanges($event, 0)" v-bind:class="{'btn-primary': (srvModel.buttonSize == 0) }">
                         146 x 40 px
                     </button>
-                    <button class="btn btn-default" style="width:168px;height:46px;margin-right:40px;"
+                    <button class="btn text-nowrap btn-default" style="width:168px;height:46px;margin-right:40px;"
                             v-on:click="inputChanges($event, 1)" v-bind:class="{'btn-primary': (srvModel.buttonSize == 1) }">
                         168 x 46 px
                     </button>
-                    <button class="btn btn-default" style="width:209px;height:57px;"
+                    <button class="btn text-nowrap btn-default" style="width:209px;height:57px;"
                             v-on:click="inputChanges($event, 2)" v-bind:class="{'btn-primary': (srvModel.buttonSize == 2) }">
                         209 x 57 px
                     </button>
@@ -271,17 +271,20 @@
             cursor:pointer;
             font-size:25px;
             line-height: 25px;
-            background: rgba(0,0,0,.1);
+            background: #DFE0E1;
             height: 30px;
             width: 45px;
             border:none;
             border-radius: 60px;
-            margin: auto;
+            margin: auto 5px;
+            display: inline-flex;
+            justify-content: center;
         }
         .btcpay-form select {
             -moz-appearance: none;
             -webkit-appearance: none;
             appearance: none;
+            color: currentColor;
             background: transparent;
             border:1px solid transparent;
             display: block;
@@ -314,6 +317,7 @@
         input[type=range].btcpay-input-range {
             -webkit-appearance:none;
             width:100%;
+            background: transparent;
         }
         input[type=range].btcpay-input-range:focus {
             outline:0;
@@ -325,10 +329,10 @@
             box-shadow:0 0 1.7px #020,0 0 0 #003c00;
             background:#f3f3f3;
             border-radius:1px;
-            border:0 solid rgba(24,213,1,0)
+            border:0;
         }
         input[type=range].btcpay-input-range::-webkit-slider-thumb {
-            box-shadow:0 0 3.7px rgba(0,170,0,0),0 0 0 rgba(0,195,0,0);
+            box-shadow:none;
             border:2.5px solid #cedc21;
             height:22px;
             width:22px;
@@ -348,10 +352,10 @@
             box-shadow:0 0 1.7px #020,0 0 0 #003c00;
             background:#f3f3f3;
             border-radius:1px;
-            border:0 solid rgba(24,213,1,0);
+            border:0;
         }
         input[type=range].btcpay-input-range::-moz-range-thumb {
-            box-shadow:0 0 3.7px rgba(0,170,0,0),0 0 0 rgba(0,195,0,0);
+            box-shadow:none;
             border:2.5px solid #cedc21;
             height:22px;
             width:22px;
@@ -369,18 +373,18 @@
         }
         input[type=range].btcpay-input-range::-ms-fill-lower {
             background:#e6e6e6;
-            border:0 solid rgba(24,213,1,0);
+            border:0;
             border-radius:2px;
             box-shadow:0 0 1.7px #020,0 0 0 #003c00;
         }
         input[type=range].btcpay-input-range::-ms-fill-upper {
             background:#f3f3f3;
-            border:0 solid rgba(24,213,1,0);
+            border:0;
             border-radius:2px;
             box-shadow:0 0 1.7px #020,0 0 0 #003c00;
         }
         input[type=range].btcpay-input-range::-ms-thumb {
-            box-shadow:0 0 3.7px rgba(0,170,0,0),0 0 0 rgba(0,195,0,0);
+            box-shadow:none;
             border:2.5px solid #cedc21;
             height:22px;
             width:22px;

BTCPayServer/wwwroot/_bootstrap_kitchensink.html

@@ -7,11 +7,11 @@
     <title>Bootstrap 4 Kitchen Sink</title>
 
     <!-- Bootstrap -->
-    <link href="css/bootstrap.css" rel="stylesheet" />
-    <link href="css/creative.css" rel="stylesheet" />
+    <link href="main/bootstrap/bootstrap.css" rel="stylesheet" />
+    <link href="main/bootstrap4-creativestart/creative.css" rel="stylesheet" />
     <script>
         const theme = window.location.search.replace('?theme=','') || 'classic';
-        document.write(`<link href="css/themes/${theme}.css" rel="stylesheet" />`)
+        document.write(`<link href="main/themes/${theme}.css" rel="stylesheet" />`)
     </script>
 
     <!-- BTCPay bundles -->

BTCPayServer/wwwroot/cart/css/style.css

@@ -72,10 +72,15 @@
     transition: all 0.3s;
     -webkit-overflow-scrolling: touch;
 }
+
 #sidebar .js-cart {
     display: none;
 }
 
+#sidebar #js-cart-list,
+#sidebar #js-cart-extra {
+    border-radius: 0;
+}
 
 #sidebar.active {
     margin-right: -400px;
@@ -138,4 +143,4 @@
     #content.active {
         width: 100%;
     }
-}
+}

BTCPayServer/wwwroot/main/bootstrap/bootstrap.css

@@ -1122,27 +1122,15 @@ pre {
 .table-light,
 .table-light > th,
 .table-light > td {
-  color: var(--btcpay-color-light);
+  color: var(--btcpay-color-dark);
   background-color: var(--btcpay-color-light-backdrop); }
 
-.table-light th,
-.table-light td,
-.table-light thead th,
-.table-light tbody + tbody {
-  border-color: var(--btcpay-color-light); }
-
 .table-dark,
 .table-dark > th,
 .table-dark > td {
-  color: var(--btcpay-color-dark);
+  color: var(--btcpay-color-light);
   background-color: var(--btcpay-color-dark-backdrop); }
 
-.table-dark th,
-.table-dark td,
-.table-dark thead th,
-.table-dark tbody + tbody {
-  border-color: var(--btcpay-color-dark); }
-
 @media (max-width: 575.98px) {
   .table-responsive-sm {
     display: block;
@@ -1734,11 +1722,11 @@ fieldset:disabled a.btn {
       box-shadow: 0 0 0 0.2rem var(--btcpay-color-danger-backdrop); }
 
 .btn-light {
-  color: var(--btcpay-color-light);
-  background-color: var(--btcpay-color-light-backdrop);
-  border-color: var(--btcpay-color-light-backdrop); }
+  color: var(--btcpay-color-dark);
+  background-color: var(--btcpay-color-light);
+  border-color: var(--btcpay-color-light); }
   .btn-light:hover {
-    color: var(--btcpay-color-neutral-900);
+    color: var(--btcpay-color-dark);
     background-color: var(--btcpay-color-light-accent);
     border-color: var(--btcpay-color-light-accent); }
   .btn-light:focus, .btn-light.focus {
@@ -1749,7 +1737,7 @@ fieldset:disabled a.btn {
     border-color: var(--btcpay-color-light-backdrop); }
   .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
   .show > .btn-light.dropdown-toggle {
-    color: var(--btcpay-color-neutral-900);
+    color: var(--btcpay-color-dark);
     background-color: var(--btcpay-color-light-accent);
     border-color: var(--btcpay-color-light-accent); }
     .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
@@ -1757,11 +1745,11 @@ fieldset:disabled a.btn {
       box-shadow: 0 0 0 0.2rem var(--btcpay-color-light-backdrop); }
 
 .btn-dark {
-  color: var(--btcpay-color-dark);
-  background-color: var(--btcpay-color-dark-backdrop);
-  border-color: var(--btcpay-color-dark-backdrop); }
+  color: var(--btcpay-color-light);
+  background-color: var(--btcpay-color-dark);
+  border-color: var(--btcpay-color-dark); }
   .btn-dark:hover {
-    color: var(--btcpay-color-white);
+    color: var(--btcpay-color-light);
     background-color: var(--btcpay-color-dark-accent);
     border-color: var(--btcpay-color-dark-accent); }
   .btn-dark:focus, .btn-dark.focus {
@@ -1772,7 +1760,7 @@ fieldset:disabled a.btn {
     border-color: var(--btcpay-color-dark-backdrop); }
   .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
   .show > .btn-dark.dropdown-toggle {
-    color: var(--btcpay-color-white);
+    color: var(--btcpay-color-light);
     background-color: var(--btcpay-color-dark-accent);
     border-color: var(--btcpay-color-dark-accent); }
     .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus,
@@ -3441,7 +3429,7 @@ input[type="button"].btn-block {
     box-shadow: 0 0 0 0.2rem var(--btcpay-color-danger-backdrop); }
 
 .badge-light {
-  color: var(--btcpay-color-light);
+  color: var(--btcpay-color-dark);
   background-color: var(--btcpay-color-light-backdrop); }
   a.badge-light:hover, a.badge-light:focus {
     color: var(--btcpay-color-light-accent); }
@@ -3450,7 +3438,7 @@ input[type="button"].btn-block {
     box-shadow: 0 0 0 0.2rem var(--btcpay-color-light-backdrop); }
 
 .badge-dark {
-  color: var(--btcpay-color-dark);
+  color: var(--btcpay-color-light);
   background-color: var(--btcpay-color-dark-backdrop); }
   a.badge-dark:hover, a.badge-dark:focus {
     color: var(--btcpay-color-dark-accent); }
@@ -3812,24 +3800,24 @@ input[type="button"].btn-block {
     border-color: var(--btcpay-color-danger-accent); }
 
 .list-group-item-light {
-  color: var(--btcpay-color-light-accent);
+  color: var(--btcpay-color-dark);
   background-color: var(--btcpay-color-light-backdrop); }
   .list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
-    color: var(--btcpay-color-light-accent);
+    color: var(--btcpay-color-dark);
     background-color: var(--btcpay-color-light-backdrop); }
   .list-group-item-light.list-group-item-action.active {
-    color: var(--btcpay-color-white);
+    color: var(--btcpay-color-dark);
     background-color: var(--btcpay-color-light-accent);
     border-color: var(--btcpay-color-light-accent); }
 
 .list-group-item-dark {
-  color: var(--btcpay-color-dark-accent);
+  color: var(--btcpay-color-light);
   background-color: var(--btcpay-color-dark-backdrop); }
   .list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
-    color: var(--btcpay-color-dark-accent);
+    color: var(--btcpay-color-light);
     background-color: var(--btcpay-color-dark-backdrop); }
   .list-group-item-dark.list-group-item-action.active {
-    color: var(--btcpay-color-white);
+    color: var(--btcpay-color-light);
     background-color: var(--btcpay-color-dark-accent);
     border-color: var(--btcpay-color-dark-accent); }
 
@@ -4500,7 +4488,7 @@ button.bg-danger:focus {
   background-color: var(--btcpay-color-danger-accent) !important; }
 
 .bg-light {
-  background-color: var(--btcpay-color-light) !important; }
+  background-color: var(--btcpay-color-light-backdrop) !important; }
 
 a.bg-light:hover, a.bg-light:focus,
 button.bg-light:hover,
@@ -4508,7 +4496,7 @@ button.bg-light:focus {
   background-color: var(--btcpay-color-light-accent) !important; }
 
 .bg-dark {
-  background-color: var(--btcpay-color-dark) !important; }
+  background-color: var(--btcpay-color-dark-backdrop) !important; }
 
 a.bg-dark:hover, a.bg-dark:focus,
 button.bg-dark:hover,

BTCPayServer/wwwroot/main/site.css

@@ -116,3 +116,9 @@ a.nav-link:hover {
 .invoice-details a {
     word-break: break-word;
 }
+
+#qrCode {
+    padding: 10px;
+    background: white;
+    display: inline-block;
+}

BTCPayServer/wwwroot/main/themes/casa.css

@@ -38,12 +38,12 @@
   --btcpay-color-danger:             #bd2130;
   --btcpay-color-danger-backdrop:    #EDA1B0;
   --btcpay-color-danger-accent:      #bd2130;
-  --btcpay-color-light:              var(--btcpay-color-neutral-600);
-  --btcpay-color-light-backdrop:     var(--btcpay-color-neutral-100);
-  --btcpay-color-light-accent:       var(--btcpay-color-neutral-500);
-  --btcpay-color-dark:               var(--btcpay-color-neutral-400);
-  --btcpay-color-dark-backdrop:      var(--btcpay-brand-darker);
-  --btcpay-color-dark-accent:        var(--btcpay-color-neutral-400);
+  --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-dark:               var(--btcpay-color-neutral-800);
+  --btcpay-color-dark-backdrop:      var(--btcpay-color-neutral-800);
+  --btcpay-color-dark-accent:        var(--btcpay-color-neutral-900);
 
   /* Color definitions for specific sections - try to reuse colors defined above */
   --btcpay-bg-body: var(--btcpay-brand-darkest);

BTCPayServer/wwwroot/main/themes/classic.css

@@ -38,12 +38,12 @@
   --btcpay-color-danger:             #dc3545;
   --btcpay-color-danger-backdrop:    rgba(225, 83, 97, 0.25);
   --btcpay-color-danger-accent:      #bd2130;
-  --btcpay-color-light:              var(--btcpay-color-neutral-600);
-  --btcpay-color-light-backdrop:     var(--btcpay-color-neutral-100);
-  --btcpay-color-light-accent:       var(--btcpay-color-neutral-500);
-  --btcpay-color-dark:               var(--btcpay-color-neutral-400);
-  --btcpay-color-dark-backdrop:      var(--btcpay-color-neutral-700);
-  --btcpay-color-dark-accent:        var(--btcpay-color-neutral-400);
+  --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-dark:               var(--btcpay-color-neutral-800);
+  --btcpay-color-dark-backdrop:      var(--btcpay-color-neutral-800);
+  --btcpay-color-dark-accent:        var(--btcpay-color-neutral-900);
 
   /* Color definitions for specific sections - try to reuse colors defined above */
   --btcpay-bg-body: var(--btcpay-color-neutral-100);
@@ -72,7 +72,7 @@ html {
   background-color: var(--btcpay-bg-dark) !important;
 }
 
-.table {
+.table-sm {
   margin: 1.5rem 0;
   background: var(--btcpay-color-white);
   border: 1px solid var(--btcpay-color-neutral-300);
@@ -81,25 +81,24 @@ html {
   border-spacing: 0px !important;
 }
 
-.table thead > tr {
+.table-sm thead > tr {
   height: 40px;
 }
 
-.table thead th {
+.table-sm thead th {
   border-bottom: none;
   border-top: none;
   font-size: 1.0rem;
 }
 
-.table th,
-.table td {
-  display: table-cell;
+.table-sm th,
+.table-sm td {
   padding: 8px 12px;
   vertical-align: middle;
   font-size: 0.92rem;
 }
 
-.table tbody tr:hover {
+.table-sm tbody tr:hover {
     background-color: var(--btcpay-color-neutral-100);
 }