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

Merge pull request #2477 from dennisreimann/lightning-setup-redesign

Browse Source 
Lightning setup redesign
This commit is contained in:
Nicolas Dorier
2021-04-22 17:39:05 +09:00
committed by GitHub
parent 9c480580ba f6c7f61ec3
commit 60c05cab55
12 changed files with 294 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
BTCPayServer.Tests/AltcoinTests/AltcoinTests.cs
View File

@@ -70,7 +70,7 @@ namespace BTCPayServer.Tests
Assert.Equal(3, invoice.CryptoInfo.Length);
var controller = user.GetController<StoresController>();
var lightningVm = (LightningNodeViewModel)Assert.IsType<ViewResult>(controller.AddLightningNode(user.StoreId, cryptoCode)).Model;
var lightningVm = (LightningNodeViewModel)Assert.IsType<ViewResult>(controller.SetupLightningNode(user.StoreId, cryptoCode)).Model;
Assert.True(lightningVm.Enabled);
var response = await controller.SetLightningNodeEnabled(user.StoreId, cryptoCode, false);
Assert.IsType<RedirectToActionResult>(response);

26
BTCPayServer.Tests/SeleniumTester.cs
View File

@@ -68,7 +68,7 @@ namespace BTCPayServer.Tests
cds.Port = Utils.FreeTcpPort();
cds.HostName = "127.0.0.1";
cds.Start();
Driver = new ChromeDriver(cds, options,
Driver = new ChromeDriver(cds, options,
// A bit less than test timeout
TimeSpan.FromSeconds(50));
@@ -217,10 +217,10 @@ namespace BTCPayServer.Tests
{
Driver.FindElement(By.CssSelector("label[for=\"LightningNodeType-Custom\"]")).Click();
Driver.FindElement(By.Id("ConnectionString")).SendKeys(connectionString);
}
Driver.FindElement(By.Id("test")).Click();
Assert.Contains("Connection to the Lightning node successful.", FindAlertMessage().Text);
Driver.FindElement(By.Id("test")).Click();
Assert.Contains("Connection to the Lightning node successful.", FindAlertMessage().Text);
}
Driver.FindElement(By.Id("save")).Click();
Assert.Contains($"{cryptoCode} Lightning node updated.", FindAlertMessage().Text);
@@ -378,14 +378,14 @@ namespace BTCPayServer.Tests
private void CheckForJSErrors()
{
//wait for seleniun update: https://stackoverflow.com/questions/57520296/selenium-webdriver-3-141-0-driver-manage-logs-availablelogtypes-throwing-syste
// var errorStrings = new List<string>
// {
// "SyntaxError",
// "EvalError",
// "ReferenceError",
// "RangeError",
// "TypeError",
// "URIError"
// var errorStrings = new List<string>
// {
// "SyntaxError",
// "EvalError",
// "ReferenceError",
// "RangeError",
// "TypeError",
// "URIError"
// };
//
// var jsErrors = Driver.Manage().Logs.GetLog(LogType.Browser).Where(x => errorStrings.Any(e => x.Message.Contains(e)));
@@ -412,7 +412,7 @@ namespace BTCPayServer.Tests
{
Driver.Navigate().GoToUrl(new Uri(Server.PayTester.ServerUri, relativeUrl));
}
public void GoToServer(ServerNavPages navPages = ServerNavPages.Index)
{
Driver.FindElement(By.Id("ServerSettings")).Click();

2
BTCPayServer.Tests/TestAccount.cs
View File

@@ -273,7 +273,7 @@ namespace BTCPayServer.Tests
var connectionString = parent.GetLightningConnectionString(connectionType, isMerchant);
var nodeType = connectionString == LightningSupportedPaymentMethod.InternalNode ? LightningNodeType.Internal : LightningNodeType.Custom;
await storeController.AddLightningNode(storeId ?? StoreId,
await storeController.SetupLightningNode(storeId ?? StoreId,
new LightningNodeViewModel { ConnectionString = connectionString, LightningNodeType = nodeType, SkipPortTest = true }, "save", cryptoCode);
if (storeController.ModelState.ErrorCount != 0)
Assert.False(true, storeController.ModelState.FirstOrDefault().Value.Errors[0].ErrorMessage);

14
BTCPayServer.Tests/UnitTest1.cs
View File

@@ -988,9 +988,9 @@ namespace BTCPayServer.Tests
user.GrantAccess(true);
var storeController = user.GetController<StoresController>();
Assert.IsType<ViewResult>(storeController.UpdateStore());
Assert.IsType<ViewResult>(storeController.AddLightningNode(user.StoreId, "BTC"));
Assert.IsType<ViewResult>(storeController.SetupLightningNode(user.StoreId, "BTC"));
var testResult = storeController.AddLightningNode(user.StoreId, new LightningNodeViewModel()
var testResult = storeController.SetupLightningNode(user.StoreId, new LightningNodeViewModel
{
ConnectionString = $"type=charge;server={tester.MerchantCharge.Client.Uri.AbsoluteUri};allowinsecure=true",
SkipPortTest = true // We can't test this as the IP can't be resolved by the test host :(
@@ -999,19 +999,19 @@ namespace BTCPayServer.Tests
storeController.TempData.Clear();
Assert.True(storeController.ModelState.IsValid);
Assert.IsType<RedirectToActionResult>(storeController.AddLightningNode(user.StoreId,
new LightningNodeViewModel()
Assert.IsType<RedirectToActionResult>(storeController.SetupLightningNode(user.StoreId,
new LightningNodeViewModel
{
ConnectionString = $"type=charge;server={tester.MerchantCharge.Client.Uri.AbsoluteUri};allowinsecure=true"
}, "save", "BTC").GetAwaiter().GetResult());
// Make sure old connection string format does not work
Assert.IsType<ViewResult>(storeController.AddLightningNode(user.StoreId,
new LightningNodeViewModel() { ConnectionString = tester.MerchantCharge.Client.Uri.AbsoluteUri },
Assert.IsType<RedirectToActionResult>(storeController.SetupLightningNode(user.StoreId,
new LightningNodeViewModel { ConnectionString = tester.MerchantCharge.Client.Uri.AbsoluteUri },
"save", "BTC").GetAwaiter().GetResult());
var storeVm =
Assert.IsType<Models.StoreViewModels.StoreViewModel>(Assert
Assert.IsType<StoreViewModel>(Assert
.IsType<ViewResult>(storeController.UpdateStore()).Model);
Assert.Single(storeVm.LightningNodes.Where(l => !string.IsNullOrEmpty(l.Address)));
}

10
BTCPayServer/Controllers/StoresController.LightningLike.cs
View File

@@ -15,7 +15,7 @@ namespace BTCPayServer.Controllers
public partial class StoresController
{
[HttpGet("{storeId}/lightning/{cryptoCode}")]
public IActionResult AddLightningNode(string storeId, string cryptoCode)
public IActionResult SetupLightningNode(string storeId, string cryptoCode)
{
var store = HttpContext.GetStoreData();
if (store == null)
@@ -31,7 +31,7 @@ namespace BTCPayServer.Controllers
}
[HttpPost("{storeId}/lightning/{cryptoCode}")]
public async Task<IActionResult> AddLightningNode(string storeId, LightningNodeViewModel vm, string command, string cryptoCode)
public async Task<IActionResult> SetupLightningNode(string storeId, LightningNodeViewModel vm, string command, string cryptoCode)
{
vm.CryptoCode = cryptoCode;
var store = HttpContext.GetStoreData();
@@ -161,13 +161,17 @@ namespace BTCPayServer.Controllers
private void SetExistingValues(StoreData store, LightningNodeViewModel vm)
{
vm.CanUseInternalNode = CanUseInternalLightning();
var lightning = GetExistingLightningSupportedPaymentMethod(vm.CryptoCode, store);
if (lightning != null)
{
vm.LightningNodeType = lightning.IsInternalNode ? LightningNodeType.Internal : LightningNodeType.Custom;
vm.ConnectionString = lightning.GetDisplayableConnectionString();
}
vm.CanUseInternalNode = CanUseInternalLightning();
else
{
vm.LightningNodeType = vm.CanUseInternalNode ? LightningNodeType.Internal : LightningNodeType.Custom;
}
}
private LightningSupportedPaymentMethod GetExistingLightningSupportedPaymentMethod(string cryptoCode, StoreData store)

1
BTCPayServer/Models/StoreViewModels/LightningNodeViewModel.cs
View File

@@ -4,7 +4,6 @@ namespace BTCPayServer.Models.StoreViewModels
{
public enum LightningNodeType
{
None,
Internal,
Custom
}

120
BTCPayServer/Views/Stores/AddLightningNode.cshtml
View File

@@ -1,120 +0,0 @@
@model LightningNodeViewModel
@{
Layout = "../Shared/_NavLayout.cshtml";
ViewData.SetActivePageAndTitle(StoreNavPages.Index, "Lightning node settings", Context.GetStoreData().StoreName);
}
<h4 class="mb-3">@ViewData["PageTitle"]</h4>
<div class="alert alert-warning alert-dismissible my-4" role="alert">
<p class="mb-0">
Please understand that the Lightning Network is still under active development and considered experimental.
Before you proceed, take time to familiarize yourself with the risks.
<a href="https://docs.btcpayserver.org/LightningNetwork/" class="alert-link">More information</a>
</p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<style>
#CustomSetup { display: none; }
#LightningNodeType-Custom:checked + * + #CustomSetup { display: block; }
</style>
<form method="post">
<div class="form-group">
<div class="custom-control custom-radio">
<input asp-for="LightningNodeType" value="@LightningNodeType.Internal" type="radio" id="LightningNodeType-@LightningNodeType.Internal" class="custom-control-input" disabled="@(!Model.CanUseInternalNode)">
<label asp-for="LightningNodeType" for="@($"LightningNodeType-{LightningNodeType.Internal}")" class="custom-control-label">Use the internal Lightning node</label>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-radio">
<input asp-for="LightningNodeType" value="@LightningNodeType.Custom" type="radio" id="LightningNodeType-@LightningNodeType.Custom" class="custom-control-input">
<label asp-for="LightningNodeType" for="@($"LightningNodeType-{LightningNodeType.Custom}")" class="custom-control-label">Use a custom Lightning node <span class="text-muted">(requires connection string)</span></label>
<div id="CustomSetup">
<div class="form-group my-3">
<label asp-for="ConnectionString">The connection string configuration for your custom Lightning node:</label>
<input asp-for="ConnectionString" class="form-control" placeholder="type=…;server=…;" value="@(Model.LightningNodeType == LightningNodeType.Internal ? "" : Model.ConnectionString)" />
<span asp-validation-for="ConnectionString" class="text-danger"></span>
</div>
<p class="mt-4 mb-2">BTCPay Server currently supports:</p>
<ul>
<li class="mb-2">
<strong>c-lightning</strong> via TCP or unix domain socket connection:
<ul>
<li>
<code><b>type=</b>clightning;<b>server=</b>unix://root/.lightning/lightning-rpc</code>
</li>
<li>
<code><b>type=</b>clightning;<b>server=</b>tcp://1.1.1.1:27743/</code>
</li>
</ul>
</li>
<li class="mb-2">
<strong>Lightning Charge</strong> via HTTPS:
<ul>
<li>
<code><b>type=</b>charge;<b>server=</b>https://charge:8080/;<b>api-token=</b>myapitoken...</code>
</li>
</ul>
</li>
<li class="mb-2">
<strong>Eclair</strong> via HTTPS:
<ul>
<li>
<code><b>type=</b>eclair;<b>server=</b>https://eclair:8080/;<b>password=</b>eclairpassword...</code>
</li>
</ul>
</li>
<li class="mb-2">
<strong>LND</strong> via the REST proxy:
<ul>
<li>
<code><b>type=</b>lnd-rest;<b>server=</b>https://mylnd:8080/;<b>macaroon=</b>abef263adfe...</code>
</li>
<li>
<code><b>type=</b>lnd-rest;<b>server=</b>https://mylnd:8080/;<b>macaroon=</b>abef263adfe...;<b>certthumbprint=</b>abef263adfe...</code>
</li>
</ul>
<a class="d-inline-block my-2 text-secondary text-decoration-none" data-toggle="collapse" href="#lnd-notes" role="button" aria-expanded="false" aria-controls="lnd-notes">
<span class="fa fa-question-circle-o" title="More information..."></span> More information on the LND settings
</a>
<div class="collapse" id="lnd-notes">
<div class="card card-body">
<p>For the macaroon options you need to provide the <code>admin.macaroon</code>.</p>
<p>The path to the LND data directory may vary, the following example assume <code>/root/.lnd</code>.</p>
<p class="mb-2">The <code>macaroon</code> parameter expects the HEX value, it can be obtained using this command:</p>
<pre class="mb-4">xxd -plain /root/.lnd/data/chain/bitcoin/mainnet/admin.macaroon | tr -d '\n'</pre>
<p>You can omit <code>certthumbprint</code> if the certificate is trusted by your machine.</p>
<p class="mb-2">The <code>certthumbprint</code> can be obtained using this command:</p>
<pre class="mb-4">openssl x509 -noout -fingerprint -sha256 -in /root/.lnd/tls.cert | sed -e 's/.*=//;s/://g'</pre>
<p class="mb-0">If your LND REST server is using HTTP or HTTPS with an untrusted certificate, you can set <code>allowinsecure=true</code> as a fallback.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div>
<button id="save" name="command" type="submit" value="save" class="btn btn-primary mr-2">Submit</button>
<button id="test" name="command" type="submit" value="test" class="btn btn-secondary mr-3">Test connection</button>
<a class="text-secondary"
asp-controller="PublicLightningNodeInfo"
asp-action="ShowLightningNodeInfo"
asp-route-cryptoCode="@Model.CryptoCode"
asp-route-storeId="@Model.StoreId"
target="_blank">
<span class="fa fa-info-circle" title="More information..."></span>
Open Public Node Info Page
</a>
</div>
</form>
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}

201
BTCPayServer/Views/Stores/SetupLightningNode.cshtml Normal file
View File

@@ -0,0 +1,201 @@
@model LightningNodeViewModel
@{
Layout = "_LayoutWalletSetup.cshtml";
ViewData.SetActivePageAndTitle(StoreNavPages.Index, "Connect to a Lightning node", Context.GetStoreData().StoreName);
}
@section Navbar {
<a asp-controller="Stores" asp-action="UpdateStore" asp-route-storeId="@Model.StoreId">
<vc:icon symbol="back" />
</a>
}
<header class="text-center">
<h1>@ViewData["Title"]</h1>
<div class="d-flex mt-4 mb-5">
<vc:icon symbol="warning" />
<p class="text-secondary text-left mb-0">
Please understand that the Lightning Network is still under active development and considered experimental.
Before you proceed, take time to familiarize yourself with the risks.
<a href="https://docs.btcpayserver.org/LightningNetwork/" target="_blank">More information</a>
</p>
</div>
</header>
<style>
header .icon-warning {
flex: 0 0 24px;
height: 24px;
align-self: center;
margin-right: 2rem;
color: var(--btcpay-color-warning);
}
#save { min-width: 7rem; }
#InternalSetup, #CustomSetup, #LightningNodeType-Internal, #LightningNodeType-Custom { display: none; }
#LightningNodeType-Internal:checked + * + * + * + #InternalSetup,
#LightningNodeType-Custom:checked + * + *+ #CustomSetup { display: block; }
#LightningNodeType-Internal:checked + label, #LightningNodeType-Custom:checked + label {
color: var(--btcpay-color-white);
background: var(--btcpay-color-primary);
}
label[for="LightningNodeType-Internal"], label[for="LightningNodeType-Custom"] {
display: inline-block;
padding: .75rem 2rem;
color: var(--btcpay-color-primary);
font-weight: var(--btcpay-font-weight-semibold);
border-radius: 1.5rem;
cursor: pointer;
}
#LightningNodeType-Internal[disabled]:checked + label[for="LightningNodeType-Internal"] {
background: var(--btcpay-color-secondary);
color: var(--btcpay-color-white);
opacity: .5;
}
#LightningNodeType-Internal[disabled] + label[for="LightningNodeType-Internal"] {
color: var(--btcpay-color-secondary);
opacity: .5;
}
#CustomSetup ul {
list-style: none;
padding-left: 0;
}
#CustomSetup ul li code, #CustomSetup ul li pre {
color: var(--btcpay-code-color);
}
#CustomSetup ul li > code, #CustomSetup ul pre {
display: block;
color: var(--btcpay-code-color);
background: var(--btcpay-code-bg);
margin: .25rem 0;
padding: .75rem 1rem;
border-radius: .25rem;
}
#CustomSetup > ul > li {
padding: 0;
}
#CustomSetup > ul > li + li {
border-top: 1px solid var(--btcpay-border-color-medium);
}
a[data-toggle="collapse"] {
display: flex;
align-items: center;
justify-content: space-between;
color: inherit;
padding: 1rem 0;
text-decoration: none
}
a[data-toggle="collapse"] .icon {
transform: rotate(90deg);
transition: transform 200ms;
width: 24px;
height: 24px;
}
a[data-toggle="collapse"][aria-expanded="true"] .icon {
transform: rotate(270deg);
}
</style>
<form method="post" class="mt-n2 text-center">
<input asp-for="LightningNodeType" value="@LightningNodeType.Internal" type="radio" id="LightningNodeType-@LightningNodeType.Internal" disabled="@(!Model.CanUseInternalNode)">
<label asp-for="LightningNodeType" for="@($"LightningNodeType-{LightningNodeType.Internal}")">Use internal node</label>
<input asp-for="LightningNodeType" value="@LightningNodeType.Custom" type="radio" id="LightningNodeType-@LightningNodeType.Custom">
<label asp-for="LightningNodeType" for="@($"LightningNodeType-{LightningNodeType.Custom}")">Use custom node</label>
<div id="InternalSetup" class="text-left">
@if (Model.CanUseInternalNode)
{
<p class="my-4">Using the BTCPay Server internal node for this store requires no further configuration. Click the save button below to start accepting Bitcoin through the Lightning Network.</p>
}
else
{
<p class="my-4">Your instance administrator has disabled the use of the Internal node for non-admin users.</p>
}
</div>
<div id="CustomSetup" class="text-left">
<label asp-for="ConnectionString" class="mt-4">Connection configuration for your custom Lightning node:</label>
<div class="d-sm-flex">
<input asp-for="ConnectionString" class="form-control mb-2 mr-2" placeholder="type=…;server=…;" value="@(Model.LightningNodeType == LightningNodeType.Internal ? "" : Model.ConnectionString)"/>
<button id="test" name="command" type="submit" value="test" class="btn btn-secondary text-nowrap mb-2">Test connection</button>
</div>
<span asp-validation-for="ConnectionString" class="text-danger"></span>
<p class="mt-4 mb-2">BTCPay Server currently supports:</p>
<ul>
<li>
<a data-toggle="collapse" href="#c-lightning-notes" role="button" aria-expanded="false" aria-controls="c-lightning-notes">
<span><strong>c-lightning</strong> via TCP or unix domain socket connection</span>
<vc:icon symbol="caret-right"/>
</a>
<div id="c-lightning-notes" class="collapse">
<ul class="pb-3">
<li>
<code><b>type=</b>clightning;<b>server=</b>unix://root/.lightning/lightning-rpc</code>
</li>
<li>
<code><b>type=</b>clightning;<b>server=</b>tcp://1.1.1.1:27743/</code>
</li>
</ul>
</div>
</li>
<li>
<a data-toggle="collapse" href="#charge-notes" role="button" aria-expanded="false" aria-controls="charge-notes">
<span><strong>Lightning Charge</strong> via HTTPS</span>
<vc:icon symbol="caret-right"/>
</a>
<div id="charge-notes" class="collapse">
<ul class="pb-3">
<li>
<code><b>type=</b>charge;<b>server=</b>https://charge:8080/;<b>api-token=</b>myapitoken...</code>
</li>
</ul>
</div>
</li>
<li>
<a data-toggle="collapse" href="#eclair-notes" role="button" aria-expanded="false" aria-controls="eclair-notes">
<span><strong>Eclair</strong> via HTTPS</span>
<vc:icon symbol="caret-right"/>
</a>
<div id="eclair-notes" class="collapse">
<ul class="pb-3">
<li>
<code><b>type=</b>eclair;<b>server=</b>https://eclair:8080/;<b>password=</b>eclairpassword...</code>
</li>
</ul>
</div>
</li>
<li>
<a data-toggle="collapse" href="#lnd-notes" role="button" aria-expanded="false" aria-controls="lnd-notes">
<span><strong>LND</strong> via the REST proxy</span>
<vc:icon symbol="caret-right"/>
</a>
<div id="lnd-notes" class="collapse">
<ul class="pb-3">
<li>
<code><b>type=</b>lnd-rest;<b>server=</b>https://mylnd:8080/;<b>macaroon=</b>abef263adfe...</code>
</li>
<li>
<code><b>type=</b>lnd-rest;<b>server=</b>https://mylnd:8080/;<b>macaroon=</b>abef263adfe...;<b>certthumbprint=</b>abef263adfe...</code>
</li>
</ul>
<p class="mt-2">
For the macaroon options you need to provide the <code>admin.macaroon</code>.<br/>
The path to the LND data directory may vary, the following examples assume <code>/root/.lnd</code>.
</p>
<p class="mb-2">The <code>macaroon</code> parameter expects the HEX value, it can be obtained using this command:</p>
<pre class="mb-4">xxd -plain /root/.lnd/data/chain/bitcoin/mainnet/admin.macaroon | tr -d '\n'</pre>
<p class="mb-2">
You can omit <code>certthumbprint</code> if the certificate is trusted by your machine.<br/>
The <code>certthumbprint</code> can be obtained using this command:
</p>
<pre class="mb-4">openssl x509 -noout -fingerprint -sha256 -in /root/.lnd/tls.cert | sed -e 's/.*=//;s/://g'</pre>
<p class="mb-0">If your LND REST server is using HTTP or HTTPS with an untrusted certificate, you can set <code>allowinsecure=true</code> as a fallback.</p>
</div>
</li>
</ul>
</div>
<div class="text-left mt-4">
<button id="save" name="command" type="submit" value="save" class="btn btn-primary mr-2">Save</button>
</div>
</form>
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}

18
BTCPayServer/Views/Stores/UpdateStore.cshtml
View File

@@ -112,15 +112,15 @@
@if (isSetUp)
{
<span class="smMaxWidth text-truncate text-secondary mr-3">@scheme.Address</span>
<a class="text-secondary"
asp-controller="PublicLightningNodeInfo"
asp-action="ShowLightningNodeInfo"
asp-route-cryptoCode="@scheme.CryptoCode"
asp-route-storeId="@Model.Id"
target="_blank">
Public Node Info
</a>
}
<a class="text-secondary"
asp-controller="PublicLightningNodeInfo"
asp-action="ShowLightningNodeInfo"
asp-route-cryptoCode="@scheme.CryptoCode"
asp-route-storeId="@Model.Id"
target="_blank">
Public Node Info
</a>
</span>
<span class="d-flex align-items-center fw-semibold">
<form method="post"
@@ -148,7 +148,7 @@
{
<span class="text-light ml-3 mr-2">|</span>
}
<a asp-action="AddLightningNode" asp-route-cryptoCode="@scheme.CryptoCode" asp-route-storeId="@Model.Id" id="@($"Modify-Lightning{scheme.CryptoCode}")" class="btn btn-@(isSetUp ? "link px-1" : "primary btn-sm ml-4 px-3") py-1 fw-semibold">
<a asp-action="SetupLightningNode" asp-route-cryptoCode="@scheme.CryptoCode" asp-route-storeId="@Model.Id" id="@($"Modify-Lightning{scheme.CryptoCode}")" class="btn btn-@(isSetUp ? "link px-1" : "primary btn-sm ml-4 px-3") py-1 fw-semibold">
@(isSetUp ? "Modify" : "Setup")
</a>
</span>

1
BTCPayServer/wwwroot/img/icon-sprite.svg
View File

@@ -12,4 +12,5 @@
<symbol id="wallet-file" viewBox="0 0 32 32"><path d="M5 1H20.8479L27 6.90258V31H5V1Z" fill="none" stroke="currentColor" stroke-width="2"/></symbol>
<symbol id="scan-qr" viewBox="0 0 32 32"><path d="M20 .875h10c.621 0 1.125.504 1.125 1.125v10m0 8v10c0 .621-.504 1.125-1.125 1.125H20m-8 0H2A1.125 1.125 0 01.875 30V20m0-8V2C.875 1.379 1.379.875 2 .875h10" stroke="currentColor" stroke-width="1.75" fill="none" fill-rule="evenodd"/></symbol>
<symbol id="seed" viewBox="0 0 32 32"><rect x="0.875" y="2.875" width="30.25" height="26.25" rx="1.125" fill="none" stroke="currentColor" stroke-width="1.75"/><rect x="5" y="7" width="9" height="4" rx="0.5" fill="currentColor"/><rect x="5" y="14" width="9" height="4" rx="0.5" fill="currentColor"/><rect x="18" y="7" width="9" height="4" rx="0.5" fill="currentColor"/><rect x="18" y="14" width="9" height="4" rx="0.5" fill="currentColor"/><rect x="5" y="21" width="9" height="4" rx="0.5" fill="currentColor"/><rect x="18" y="21" width="9" height="4" rx="0.5" fill="currentColor"/></symbol>
<symbol id="warning" viewBox="0 0 24 24"><path d="M12.337 3.101a.383.383 0 00-.674 0l-9.32 17.434a.383.383 0 00.338.564h18.638a.384.384 0 00.337-.564L12.337 3.101zM9.636 2.018c1.01-1.89 3.719-1.89 4.728 0l9.32 17.434a2.681 2.681 0 01-2.365 3.945H2.681a2.68 2.68 0 01-2.364-3.945L9.636 2.018zm3.896 15.25a1.532 1.532 0 11-3.064 0 1.532 1.532 0 013.064 0zm-.383-8.044a1.15 1.15 0 00-2.298 0v3.83a1.15 1.15 0 002.298 0v-3.83z" fill="currentColor"/></symbol>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

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

@@ -3,30 +3,9 @@
/* Dark theme overrides */
:root {
--btcpay-color-neutral-950: #222222;
--btcpay-color-primary-text: var(--btcpay-color-white);
--btcpay-color-primary-backdrop: #389725;
--btcpay-bg-dark: var(--btcpay-color-neutral-950);
--btcpay-header-bg: var(--btcpay-bg-dark);
--btcpay-header-color-link-active: var(--btcpay-color-primary);
--btcpay-body-bg: var(--btcpay-color-neutral-900);
--btcpay-body-color: var(--btcpay-color-white);
--btcpay-wizard-bg: var(--btcpay-body-bg);
--btcpay-wizard-color: var(--btcpay-body-color);
--btcpay-footer-bg: var(--btcpay-bg-dark);
--btcpay-footer-color: var(--btcpay-color-neutral-600);
--btcpay-nav-color-link: var(--btcpay-color-neutral-500);
--btcpay-nav-color-link-accent: var(--btcpay-color-neutral-300);
--btcpay-nav-color-link-active: var(--btcpay-color-white);
--btcpay-bg-tile: var(--btcpay-bg-dark);
--btcpay-border-color-light: var(--btcpay-color-neutral-600);
--btcpay-border-color-medium: var(--btcpay-color-neutral-700);
--btcpay-color-secondary-accent: var(--btcpay-color-neutral-300);
--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);
@@ -35,6 +14,39 @@
--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);
--btcpay-bg-dark: var(--btcpay-color-neutral-950);
--btcpay-bg-tile: var(--btcpay-bg-dark);
--btcpay-body-bg: var(--btcpay-color-neutral-900);
--btcpay-body-color: var(--btcpay-color-white);
--btcpay-body-color-link: var(--btcpay-color-primary);
--btcpay-body-color-link-accent: var(--btcpay-color-primary);
--btcpay-header-bg: var(--btcpay-bg-dark);
--btcpay-header-color: var(--btcpay-body-color);
--btcpay-header-color-link: var(--btcpay-header-color);
--btcpay-header-color-link-accent: var(--btcpay-header-color);
--btcpay-header-color-link-active: var(--btcpay-color-primary);
--btcpay-wizard-bg: var(--btcpay-body-bg);
--btcpay-wizard-color: var(--btcpay-body-color);
--btcpay-nav-color-link: var(--btcpay-color-neutral-500);
--btcpay-nav-color-link-accent: var(--btcpay-color-neutral-300);
--btcpay-nav-color-link-active: var(--btcpay-color-white);
--btcpay-footer-bg: var(--btcpay-bg-dark);
--btcpay-footer-color: var(--btcpay-color-neutral-600);
--btcpay-footer-color-link: var(--btcpay-color-neutral-600);
--btcpay-footer-color-link-accent: var(--btcpay-color-neutral-300);
--btcpay-code-bg: var(--btcpay-bg-dark);
--btcpay-bg-color-light: var(--btcpay-color-neutral-800);
--btcpay-bg-color-medium: var(--btcpay-color-neutral-700);
--btcpay-border-color-light: var(--btcpay-color-neutral-600);
--btcpay-border-color-medium: var(--btcpay-color-neutral-700);
}
.social-logo {

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

@@ -53,13 +53,10 @@
--btcpay-color-dark-text: var(--btcpay-color-neutral-200);
/* Color definitions for specific sections - try to reuse colors defined above */
--btcpay-bg-dark: var(--btcpay-brand-dark);
--btcpay-bg-tile: var(--btcpay-color-white);
--btcpay-bg-dark: var(--btcpay-brand-dark);
--btcpay-bg-cta: var(--btcpay-brand-dark);
--btcpay-border-color-light: var(--btcpay-color-neutral-200);
--btcpay-border-color-medium: var(--btcpay-color-neutral-300);
--btcpay-body-bg: var(--btcpay-color-neutral-100);
--btcpay-body-color: var(--btcpay-color-neutral-900);
--btcpay-body-color-link: var(--btcpay-color-primary);
@@ -67,15 +64,31 @@
--btcpay-header-bg: var(--btcpay-color-white);
--btcpay-header-color: var(--btcpay-body-color);
--btcpay-header-color-link: var(--btcpay-body-color);
--btcpay-header-color-link-accent: var(--btcpay-color-primary);
--btcpay-header-color-link: var(--btcpay-header-color);
--btcpay-header-color-link-accent: var(--btcpay-header-color);
--btcpay-header-color-link-active: var(--btcpay-color-primary-accent);
--btcpay-nav-color-link: var(--btcpay-color-neutral-600);
--btcpay-nav-color-link-accent: var(--btcpay-color-neutral-700);
--btcpay-nav-color-link-active: var(--btcpay-color-neutral-900);
--btcpay-wizard-bg: var(--btcpay-color-white);
--btcpay-wizard-color: var(--btcpay-body-color);
--btcpay-footer-bg: var(--btcpay-brand-dark);
--btcpay-footer-color: var(--btcpay-color-neutral-400);
--btcpay-footer-color-link: var(--btcpay-color-neutral-400);
--btcpay-footer-color-link-accent: var(--btcpay-color-neutral-100);
--btcpay-code-color: var(--btcpay-body-color);
--btcpay-code-bg: var(--btcpay-color-neutral-200);
--btcpay-pre-color: var(--btcpay-color-white);
--btcpay-pre-bg: var(--btcpay-color-neutral-950);
--btcpay-bg-color-light: var(--btcpay-color-white);
--btcpay-bg-color-medium: var(--btcpay-color-neutral-300);
--btcpay-border-color-light: var(--btcpay-color-neutral-200);
--btcpay-border-color-medium: var(--btcpay-color-neutral-300);
--btcpay-font-size-base: 14px;
--btcpay-font-family-head: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;