mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-01-18 21:32:27 +01:00
Refactor themes (#2794)
* Remove Bootstrap/Creative CSS file customizability Customizations should be done using themes * Remove deprecated Casa and Classic themes They are still available in the design system repo and should be added as custom theme CSS file * Use either standard or custom theme * Remove deprecated themes * Improve theme select UI * Finish and refactor theme switching * updates theme copy * Update BTCPayServer/Views/Server/Theme.cshtml Co-authored-by: Zaxounette <51208677+Zaxounette@users.noreply.github.com> * Combine creative.css and site.css Co-authored-by: dstrukt <gfxdsign@gmail.com> Co-authored-by: Zaxounette <51208677+Zaxounette@users.noreply.github.com>
This commit is contained in:
d11n
GitHub
parent
e5699f674b
commit
fe18e71538
@ -991,9 +991,10 @@ namespace BTCPayServer.Controllers
|
||||
[Route("server/theme")]
|
||||
public async Task<IActionResult> Theme()
|
||||
{
|
||||
var data = (await _SettingsRepository.GetSettingAsync<ThemeSettings>()) ?? new ThemeSettings();
|
||||
var data = await _SettingsRepository.GetSettingAsync<ThemeSettings>() ?? new ThemeSettings();
|
||||
return View(data);
|
||||
}
|
||||
|
||||
[Route("server/theme")]
|
||||
[HttpPost]
|
||||
public async Task<IActionResult> Theme(ThemeSettings settings)
|
||||
|
||||
@ -8,16 +8,11 @@ namespace BTCPayServer
|
||||
{
|
||||
public static async Task<PoliciesSettings> GetPolicies(this ISettingsRepository settingsRepository)
|
||||
{
|
||||
return (await settingsRepository.GetSettingAsync<PoliciesSettings>()) ?? new PoliciesSettings();
|
||||
return await settingsRepository.GetSettingAsync<PoliciesSettings>() ?? new PoliciesSettings();
|
||||
}
|
||||
public static async Task<ThemeSettings> GetTheme(this ISettingsRepository settingsRepository)
|
||||
{
|
||||
var result = await settingsRepository.GetSettingAsync<ThemeSettings>() ?? new ThemeSettings();
|
||||
result.ThemeCssUri = string.IsNullOrWhiteSpace(result.ThemeCssUri) ? "/main/themes/default.css" : result.ThemeCssUri;
|
||||
result.CustomThemeCssUri = string.IsNullOrWhiteSpace(result.CustomThemeCssUri) ? null : result.CustomThemeCssUri;
|
||||
result.BootstrapCssUri = string.IsNullOrWhiteSpace(result.BootstrapCssUri) ? "/main/bootstrap/bootstrap.css" : result.BootstrapCssUri;
|
||||
result.CreativeStartCssUri = string.IsNullOrWhiteSpace(result.CreativeStartCssUri) ? "/main/bootstrap/creative.css" : result.CreativeStartCssUri;
|
||||
return result;
|
||||
return await settingsRepository.GetSettingAsync<ThemeSettings>() ?? new ThemeSettings();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,19 +22,7 @@ namespace BTCPayServer.HostedServices
|
||||
if (policies != null)
|
||||
{
|
||||
var theme = settingsRepository.GetTheme().GetAwaiter().GetResult();
|
||||
if (theme.CreativeStartCssUri != null && Uri.TryCreate(theme.CreativeStartCssUri, UriKind.Absolute, out var uri))
|
||||
{
|
||||
policies.Clear();
|
||||
}
|
||||
if (theme.BootstrapCssUri != null && Uri.TryCreate(theme.BootstrapCssUri, UriKind.Absolute, out uri))
|
||||
{
|
||||
policies.Clear();
|
||||
}
|
||||
if (theme.ThemeCssUri != null && Uri.TryCreate(theme.ThemeCssUri, UriKind.Absolute, out uri))
|
||||
{
|
||||
policies.Clear();
|
||||
}
|
||||
if (theme.CustomThemeCssUri != null && Uri.TryCreate(theme.CustomThemeCssUri, UriKind.Absolute, out uri))
|
||||
if (theme.CssUri != null && Uri.TryCreate(theme.CssUri, UriKind.Absolute, out var uri))
|
||||
{
|
||||
policies.Clear();
|
||||
}
|
||||
|
||||
@ -5,24 +5,19 @@ namespace BTCPayServer.Services
|
||||
{
|
||||
public class ThemeSettings
|
||||
{
|
||||
[Display(Name = "Use custom theme")]
|
||||
public bool CustomTheme { get; set; }
|
||||
|
||||
[JsonProperty(DefaultValueHandling = DefaultValueHandling.Populate)]
|
||||
[MaxLength(500)]
|
||||
[Display(Name = "Select Theme")]
|
||||
public string ThemeCssUri { get; set; }
|
||||
|
||||
[JsonProperty(DefaultValueHandling = DefaultValueHandling.Populate)]
|
||||
[MaxLength(500)]
|
||||
[Display(Name = "Custom Theme CSS file")]
|
||||
[Display(Name = "Custom Theme CSS URL")]
|
||||
public string CustomThemeCssUri { get; set; }
|
||||
|
||||
[JsonProperty(DefaultValueHandling = DefaultValueHandling.Populate)]
|
||||
[MaxLength(500)]
|
||||
[Display(Name = "Custom Bootstrap CSS file")]
|
||||
public string BootstrapCssUri { get; set; }
|
||||
public string CssUri
|
||||
{
|
||||
get => CustomTheme ? CustomThemeCssUri : "/main/themes/default.css";
|
||||
}
|
||||
|
||||
[JsonProperty(DefaultValueHandling = DefaultValueHandling.Populate)]
|
||||
[Display(Name = "Custom Creative Start CSS file")]
|
||||
public string CreativeStartCssUri { get; set; }
|
||||
public bool FirstRun { get; set; }
|
||||
public override string ToString()
|
||||
{
|
||||
|
||||
@ -15,8 +15,9 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.BootstrapCssUri)" rel="stylesheet" asp-append-version="true"/>
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.ThemeCssUri)" rel="stylesheet" asp-append-version="true"/>
|
||||
<bundle name="wwwroot/bundles/main-bundle.min.css" asp-append-version="true" />
|
||||
<bundle name="wwwroot/bundles/crowdfund-bundle.min.css" asp-append-version="true"></bundle>
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.CssUri)" rel="stylesheet" asp-append-version="true"/>
|
||||
@if (Model.CustomCSSLink != null)
|
||||
{
|
||||
<link href="@Model.CustomCSSLink" rel="stylesheet" />
|
||||
@ -31,13 +32,10 @@
|
||||
@*We need to make sure btcpay.js is not bundled, else it will not work if there is a RootPath*@
|
||||
<script src="~/modal/btcpay.js" asp-append-version="true"></script>
|
||||
}
|
||||
|
||||
<bundle name="wwwroot/bundles/crowdfund-bundle.min.css" asp-append-version="true"></bundle>
|
||||
@if (!string.IsNullOrEmpty(Model.EmbeddedCSS))
|
||||
{
|
||||
@Safe.Raw($"<style>{Model.EmbeddedCSS}</style>");
|
||||
}
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@if (Context.Request.Query.ContainsKey("simple"))
|
||||
|
||||
@ -42,9 +42,9 @@
|
||||
<meta name="robots" content="noindex,nofollow">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.BootstrapCssUri)" rel="stylesheet" asp-append-version="true"/>
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.ThemeCssUri)" rel="stylesheet" asp-append-version="true"/>
|
||||
<bundle name="wwwroot/bundles/main-bundle.min.css" asp-append-version="true" />
|
||||
<bundle name="wwwroot/bundles/payment-request-bundle.min.css" asp-append-version="true"></bundle>
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.CssUri)" rel="stylesheet" asp-append-version="true"/>
|
||||
@if (Model.CustomCSSLink != null)
|
||||
{
|
||||
<link href="@Model.CustomCSSLink" rel="stylesheet" />
|
||||
|
||||
@ -17,9 +17,8 @@
|
||||
<link rel="apple-touch-icon" href="~/img/icons/icon-512x512.png" asp-append-version="true">
|
||||
<link rel="apple-touch-startup-image" href="~/img/splash.png" asp-append-version="true">
|
||||
<link rel="manifest" href="~/manifest.json">
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.BootstrapCssUri)" rel="stylesheet" asp-append-version="true"/>
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.ThemeCssUri)" rel="stylesheet" asp-append-version="true"/>
|
||||
<link href="~/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" asp-append-version="true" />
|
||||
<bundle name="wwwroot/bundles/main-bundle.min.css" asp-append-version="true" />
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.CssUri)" rel="stylesheet" asp-append-version="true"/>
|
||||
<link href="~/main/qrcode.css" rel="stylesheet" asp-append-version="true" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -31,9 +31,9 @@
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.BootstrapCssUri)" rel="stylesheet" asp-append-version="true"/>
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.ThemeCssUri)" rel="stylesheet" asp-append-version="true"/>
|
||||
<bundle name="wwwroot/bundles/main-bundle.min.css" asp-append-version="true" />
|
||||
<bundle name="wwwroot/bundles/payment-request-bundle.min.css" asp-append-version="true"></bundle>
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.CssUri)" rel="stylesheet" asp-append-version="true"/>
|
||||
@if (Model.CustomCSSLink != null)
|
||||
{
|
||||
<link href="@Model.CustomCSSLink" rel="stylesheet" />
|
||||
|
||||
@ -3,64 +3,38 @@
|
||||
ViewData.SetActivePageAndTitle(ServerNavPages.Theme, "Theme");
|
||||
}
|
||||
|
||||
@section PageFootContent {
|
||||
<partial name="_ValidationScriptsPartial" />
|
||||
}
|
||||
|
||||
<h2 class="mb-4">@ViewData["PageTitle"]</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<form method="post">
|
||||
<h4 class="mb-3">Custom theme</h4>
|
||||
<p>Select one of our predefined themes. Optionally you can also provide a CSS file that customizes the chosen theme.</p>
|
||||
<p>Use the default Light or Dark Themes, or provide a CSS theme file below.</p>
|
||||
@if (!ViewContext.ModelState.IsValid)
|
||||
{
|
||||
<div asp-validation-summary="All" class="text-danger"></div>
|
||||
}
|
||||
<div class="form-group">
|
||||
<label asp-for="ThemeCssUri" class="form-label"></label>
|
||||
<select asp-for="ThemeCssUri" class="form-select">
|
||||
<option value="/main/themes/default.css">Default (Light)</option>
|
||||
<option value="/main/themes/default-dark.css">Default (Dark)</option>
|
||||
<option value="/main/themes/classic.css">Classic</option>
|
||||
<option value="/main/themes/casa.css">Casa</option>
|
||||
</select>
|
||||
<span asp-validation-for="ThemeCssUri" class="text-danger"></span>
|
||||
<div class="form-group d-flex align-items-center">
|
||||
<input asp-for="CustomTheme" type="checkbox" class="btcpay-toggle me-2" data-bs-toggle="collapse" data-bs-target="#CustomThemeSettings" aria-expanded="@Model.CustomTheme" aria-controls="CustomThemeSettings" />
|
||||
<label asp-for="CustomTheme" class="form-label mb-0"></label>
|
||||
<span asp-validation-for="CustomTheme" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="form-group mb-5">
|
||||
<label asp-for="CustomThemeCssUri" class="form-label"></label>
|
||||
<a href="https://docs.btcpayserver.org/Theme/#1-custom-themes" target="_blank" rel="noreferrer noopener">
|
||||
<span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
|
||||
</a>
|
||||
<input asp-for="CustomThemeCssUri" class="form-control" />
|
||||
<span asp-validation-for="CustomThemeCssUri" class="text-danger"></span>
|
||||
<div class="collapse @(Model.CustomTheme ? "show" : "")" id="CustomThemeSettings">
|
||||
<div class="form-group">
|
||||
<label asp-for="CustomThemeCssUri" class="form-label"></label>
|
||||
<a href="https://docs.btcpayserver.org/Theme/#1-custom-themes" target="_blank" rel="noreferrer noopener">
|
||||
<span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
|
||||
</a>
|
||||
<input asp-for="CustomThemeCssUri" class="form-control" />
|
||||
<span asp-validation-for="CustomThemeCssUri" class="text-danger"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="mb-3">Bootstrap theme</h4>
|
||||
<div class="form-group">
|
||||
<label asp-for="BootstrapCssUri" class="form-label"></label>
|
||||
<a href="https://docs.btcpayserver.org/Theme/#2-bootstrap-themes" target="_blank" rel="noreferrer noopener">
|
||||
<span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
|
||||
</a>
|
||||
<input asp-for="BootstrapCssUri" class="form-control" />
|
||||
<span asp-validation-for="BootstrapCssUri" class="text-danger"></span>
|
||||
<p class="form-text text-muted">
|
||||
<a href="https://pikock.github.io/bootstrap-magic/app/index.html" target="_blank" rel="noreferrer noopener">Build your own theme</a>
|
||||
or <a href="https://bootswatch.com/" target="_blank" rel="noreferrer noopener">pick one already made</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label asp-for="CreativeStartCssUri" class="form-label"></label>
|
||||
<input asp-for="CreativeStartCssUri" class="form-control" />
|
||||
<span asp-validation-for="CreativeStartCssUri" class="text-danger"></span>
|
||||
<p class="form-text text-muted">
|
||||
<a href="https://startbootstrap.com/template-overviews/creative/" target="_blank" rel="noreferrer noopener">Creative Start theme</a>
|
||||
is used on top of Bootstrap
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<button type="submit" class="btn btn-primary" name="command" value="Save">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section PageFootContent {
|
||||
<partial name="_ValidationScriptsPartial" />
|
||||
}
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
@using BTCPayServer.Abstractions.Contracts
|
||||
@inject ISettingsRepository _settingsRepository
|
||||
@addTagHelper *, BundlerMinifier.TagHelpers
|
||||
@{
|
||||
var theme = await _settingsRepository.GetTheme();
|
||||
var policies = await _settingsRepository.GetPolicies();
|
||||
}
|
||||
@{ var policies = await _settingsRepository.GetPolicies(); }
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="">
|
||||
@ -15,14 +12,8 @@
|
||||
}
|
||||
<title>@ViewData["Title"]</title>
|
||||
@* CSS *@
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.BootstrapCssUri)" rel="stylesheet" asp-append-version="true" />
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.CreativeStartCssUri)" rel="stylesheet" asp-append-version="true" />
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.ThemeCssUri)" rel="stylesheet" asp-append-version="true" />
|
||||
@if (!string.IsNullOrWhiteSpace(theme.CustomThemeCssUri))
|
||||
{
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.CustomThemeCssUri)" rel="stylesheet" asp-append-version="true" />
|
||||
}
|
||||
<bundle name="wwwroot/bundles/main-bundle.min.css" asp-append-version="true" />
|
||||
<partial name="LayoutHeadTheme" />
|
||||
@* Non-JS *@
|
||||
<noscript>
|
||||
<style>
|
||||
|
||||
17
BTCPayServer/Views/Shared/LayoutHeadTheme.cshtml
Normal file
17
BTCPayServer/Views/Shared/LayoutHeadTheme.cshtml
Normal file
@ -0,0 +1,17 @@
|
||||
@using BTCPayServer.Abstractions.Contracts
|
||||
@inject ISettingsRepository _settingsRepository
|
||||
@addTagHelper *, BundlerMinifier.TagHelpers
|
||||
@{ var theme = await _settingsRepository.GetTheme(); }
|
||||
|
||||
@if (theme.CustomTheme)
|
||||
{
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.CssUri)" rel="stylesheet" asp-append-version="true" />
|
||||
}
|
||||
else
|
||||
{
|
||||
<link href="~/main/themes/default.css" asp-append-version="true" rel="stylesheet" />
|
||||
<link href="~/main/themes/default-dark.css" asp-append-version="true" rel="stylesheet" id="DarkThemeLinkTag" />
|
||||
<script src="~/js/theme-switch.js" asp-append-version="true"></script>
|
||||
<noscript><style>.btcpay-theme-switch { display: none !important; }</style></noscript>
|
||||
}
|
||||
|
||||
@ -12,7 +12,9 @@
|
||||
@inject RoleManager<IdentityRole> RoleManager
|
||||
@inject BTCPayServer.Services.BTCPayServerEnvironment Env
|
||||
@inject ISettingsRepository SettingsRepository
|
||||
|
||||
@{
|
||||
var theme = await SettingsRepository.GetTheme();
|
||||
}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en"@(Env.IsDeveloping ? " data-devenv" : "")>
|
||||
<head>
|
||||
@ -70,6 +72,18 @@
|
||||
<a asp-area="" asp-controller="Manage" asp-action="Index" title="My settings" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(ManageNavPages))" id="MySettings"><span class="d-lg-none d-sm-block">Account</span><i class="fa fa-user d-lg-inline-block d-none"></i></a>
|
||||
</li>
|
||||
<vc:notifications-dropdown/>
|
||||
@if (!theme.CustomTheme)
|
||||
{
|
||||
<li class="nav-item">
|
||||
<button class="btcpay-theme-switch nav-link">
|
||||
<span class="d-lg-none d-sm-block"><span class="btcpay-theme-switch-dark">Dark theme</span><span class="btcpay-theme-switch-light">Light theme</span></span>
|
||||
<svg class="d-lg-inline-block d-none" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
|
||||
<path class="btcpay-theme-switch-dark" transform="translate(1 1)" d="M2.72 0A3.988 3.988 0 000 3.78c0 2.21 1.79 4 4 4 1.76 0 3.25-1.14 3.78-2.72-.4.13-.83.22-1.28.22-2.21 0-4-1.79-4-4 0-.45.08-.88.22-1.28z"/>
|
||||
<path class="btcpay-theme-switch-light" transform="translate(1 1)" d="M4 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 0 4 0zM1.5 1c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM.5 3.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm7 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM1.5 6c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 7c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 7 4 7z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
}
|
||||
<li class="nav-item">
|
||||
<a asp-area="" asp-controller="Account" asp- asp-action="Logout" title="Logout" class="nav-link js-scroll-trigger" id="Logout"><span class="d-lg-none d-sm-block">Logout</span><i class="fa fa-sign-out d-lg-inline-block d-none"></i></a>
|
||||
</li>
|
||||
|
||||
@ -19,12 +19,9 @@
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<link rel="apple-touch-icon" href="~/img/icons/icon-512x512.png">
|
||||
<link rel="apple-touch-startup-image" href="~/img/splash.png">
|
||||
|
||||
<link rel="manifest" href="~/manifest.json">
|
||||
|
||||
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.BootstrapCssUri)" rel="stylesheet" asp-append-version="true"/>
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.ThemeCssUri)" rel="stylesheet" asp-append-version="true"/>
|
||||
<bundle name="wwwroot/bundles/main-bundle.min.css" asp-append-version="true" />
|
||||
<link href="@Context.Request.GetRelativePathOrAbsolute(theme.CssUri)" rel="stylesheet" asp-append-version="true"/>
|
||||
@if (Model.CustomCSSLink != null)
|
||||
{
|
||||
<link href="@Model.CustomCSSLink" rel="stylesheet" />
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
{
|
||||
"outputFileName": "wwwroot/bundles/main-bundle.min.css",
|
||||
"inputFiles": [
|
||||
"wwwroot/main/bootstrap/bootstrap.css",
|
||||
"wwwroot/vendor/font-awesome/css/font-awesome.css",
|
||||
"wwwroot/vendor/flatpickr/flatpickr.css",
|
||||
"wwwroot/main/fonts/OpenSans.css",
|
||||
|
||||
16
BTCPayServer/wwwroot/js/theme-switch.js
Normal file
16
BTCPayServer/wwwroot/js/theme-switch.js
Normal file
@ -0,0 +1,16 @@
|
||||
const COLOR_MODES = ["light", "dark"];
|
||||
const THEME_ATTR = "data-btcpay-theme";
|
||||
const STORE_ATTR = "btcpay-theme";
|
||||
const systemColorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? COLOR_MODES[1] : COLOR_MODES[0];
|
||||
const userColorMode = window.localStorage.getItem(STORE_ATTR);
|
||||
const initialColorMode = COLOR_MODES.includes(userColorMode) ? userColorMode : systemColorMode;
|
||||
|
||||
function setColorMode (mode) {
|
||||
if (COLOR_MODES.includes(mode)) {
|
||||
window.localStorage.setItem(STORE_ATTR, mode);
|
||||
document.documentElement.setAttribute(THEME_ATTR, mode);
|
||||
document.getElementById("DarkThemeLinkTag").setAttribute("rel", mode === "dark" ? "stylesheet" : null);
|
||||
}
|
||||
}
|
||||
|
||||
setColorMode(initialColorMode);
|
||||
@ -1,157 +0,0 @@
|
||||
/*!
|
||||
* Start Bootstrap - Creative v4.0.0-beta (http://startbootstrap.com/template-overviews/creative)
|
||||
* Copyright 2013-2017 Start Bootstrap
|
||||
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-creative/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
section {
|
||||
padding: 5rem 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
section {
|
||||
padding: 6rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 50px;
|
||||
height: 3px;
|
||||
background: var(--btcpay-primary);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
hr.light {
|
||||
background: var(--btcpay-white);
|
||||
}
|
||||
|
||||
.service-box {
|
||||
max-width: 400px;
|
||||
margin: 50px auto 0;
|
||||
}
|
||||
|
||||
.service-box p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.call-to-action {
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.call-to-action h2 {
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
.no-gutter > [class*='col-'] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#mainNav {
|
||||
color: var(--btcpay-header-text);
|
||||
background: var(--btcpay-header-bg);
|
||||
transition-property: background, color;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
#mainNav .navbar-nav > li.nav-item > a.nav-link {
|
||||
font-weight: var(--btcpay-font-weight-bold);
|
||||
color: var(--btcpay-header-link);
|
||||
}
|
||||
|
||||
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus,
|
||||
#mainNav .navbar-nav > li.nav-item > a.nav-link:hover {
|
||||
color: var(--btcpay-header-link-accent);
|
||||
}
|
||||
|
||||
#mainNav .navbar-nav > li.nav-item > a.nav-link.active,
|
||||
#mainNav .navbar-nav > li.nav-item > a.nav-link.active:focus,
|
||||
#mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover {
|
||||
color: var(--btcpay-header-link-active);
|
||||
}
|
||||
|
||||
header.masthead {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: auto;
|
||||
margin-top: 4rem;
|
||||
padding: var(--btcpay-space-xxl) var(--btcpay-space-m);
|
||||
}
|
||||
|
||||
header.masthead::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../../img/bg.png");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
header.masthead .header-content {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header.masthead .header-content .header-content-inner {
|
||||
max-width: 1000px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
header.masthead .header-content .header-content-inner h1 {
|
||||
font-size: var(--btcpay-font-size-xl);
|
||||
font-weight: var(--btcpay-font-weight-bold);
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
header.masthead .header-content .header-content-inner hr {
|
||||
margin: var(--btcpay-space-m) auto;
|
||||
}
|
||||
|
||||
header.masthead .header-content .header-content-inner p {
|
||||
font-size: var(--btcpay-font-size-l);
|
||||
margin: var(--btcpay-space-l) 0;
|
||||
max-width: 38rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
header.masthead .header-content .header-content-inner h1 {
|
||||
font-size: var(--btcpay-font-size-xxl);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
header.masthead {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
#mainNav {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#mainNav.navbar-shrink {
|
||||
background: var(--btcpay-header-bg);
|
||||
}
|
||||
|
||||
#mainNav .navbar-nav > li.nav-item {
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
|
||||
#mainNav .navbar-nav:last-child > li.nav-item {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.service-box {
|
||||
margin: 20px auto 0;
|
||||
}
|
||||
}
|
||||
@ -8,6 +8,26 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 50px;
|
||||
height: 3px;
|
||||
background: var(--btcpay-primary);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
hr.light {
|
||||
background: var(--btcpay-white);
|
||||
}
|
||||
|
||||
.no-gutter > [class*='col-'] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 2rem;
|
||||
}
|
||||
@ -51,10 +71,44 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
}
|
||||
}
|
||||
|
||||
/* Navigation bar */
|
||||
#mainNav {
|
||||
background: var(--btcpay-header-bg);
|
||||
}
|
||||
|
||||
#mainNav {
|
||||
color: var(--btcpay-header-text);
|
||||
background: var(--btcpay-header-bg);
|
||||
transition-property: background, color;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
#mainNav .navbar-nav > li.nav-item > .nav-link {
|
||||
font-weight: var(--btcpay-font-weight-bold);
|
||||
color: var(--btcpay-header-link);
|
||||
}
|
||||
|
||||
#mainNav .navbar-nav > li.nav-item > .nav-link:focus,
|
||||
#mainNav .navbar-nav > li.nav-item > .nav-link:hover {
|
||||
color: var(--btcpay-header-link-accent);
|
||||
}
|
||||
|
||||
#mainNav .navbar-nav > li.nav-item > .nav-link.active,
|
||||
#mainNav .navbar-nav > li.nav-item > .nav-link.active:focus,
|
||||
#mainNav .navbar-nav > li.nav-item > .nav-link.active:hover {
|
||||
color: var(--btcpay-header-link-active);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#mainNav .navbar-nav > li.nav-item {
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
|
||||
#mainNav .navbar-nav:last-child > li.nav-item {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand,
|
||||
.navbar-brand:hover,
|
||||
.navbar-brand:focus {
|
||||
@ -67,6 +121,56 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
/* Theme Switch */
|
||||
.btcpay-theme-switch {
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.btcpay-theme-switch svg {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.btcpay-theme-switch path {
|
||||
stroke-width: .5px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.btcpay-theme-switch:hover .btcpay-theme-switch-light,
|
||||
.btcpay-theme-switch:hover .btcpay-theme-switch-dark {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.btcpay-theme-switch-dark {
|
||||
stroke: currentColor;
|
||||
}
|
||||
|
||||
:root[data-btcpay-theme="dark"] .btcpay-theme-switch-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-btcpay-theme="dark"]) .btcpay-theme-switch-dark {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.btcpay-theme-switch-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:root[data-btcpay-theme="dark"] .btcpay-theme-switch-light {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-btcpay-theme="light"]) .btcpay-theme-switch-light {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Info icons in main headline */
|
||||
h2 small .fa-question-circle-o {
|
||||
position: relative;
|
||||
@ -84,7 +188,6 @@ h2 small .fa-question-circle-o {
|
||||
border-left: 2px solid transparent;
|
||||
padding: .2rem 1rem;
|
||||
font-weight: var(--btcpay-font-weight-semibold);
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
#sideNav .nav-link.active,
|
||||
@ -94,28 +197,6 @@ h2 small .fa-question-circle-o {
|
||||
background: var(--btcpay-nav-bg-active);
|
||||
}
|
||||
|
||||
/* Homepage */
|
||||
#services img {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.social-row {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.social-row > div {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.social-row img {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.social-row span {
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
position: absolute;
|
||||
@ -149,6 +230,7 @@ h2 small .fa-question-circle-o {
|
||||
.feedback-icon-failed {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.pin-button {
|
||||
height: 135px;
|
||||
margin-top: 20px;
|
||||
@ -183,18 +265,6 @@ h2 small .fa-question-circle-o {
|
||||
}
|
||||
}
|
||||
|
||||
.notification-badge {
|
||||
min-width: 2em;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.notification-badge {
|
||||
position: relative;
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="field-validation"]:not(:empty) {
|
||||
display: inline-block;
|
||||
margin-top: .5rem;
|
||||
@ -259,3 +329,135 @@ svg.icon-note {
|
||||
.notification:hover {
|
||||
background-color: var(--btcpay-body-bg);
|
||||
}
|
||||
|
||||
.notification-badge {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
min-width: 2em;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#NotificationsDropdownToggle {
|
||||
position: relative;
|
||||
}
|
||||
.notification-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 5rem 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
section {
|
||||
padding: 6rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Homepage */
|
||||
header.masthead {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: auto;
|
||||
margin-top: 4rem;
|
||||
padding: var(--btcpay-space-xxl) var(--btcpay-space-m);
|
||||
}
|
||||
|
||||
header.masthead::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../../img/bg.png");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
header.masthead .header-content {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header.masthead .header-content .header-content-inner {
|
||||
max-width: 1000px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
header.masthead .header-content .header-content-inner h1 {
|
||||
font-size: var(--btcpay-font-size-xl);
|
||||
font-weight: var(--btcpay-font-weight-bold);
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
header.masthead .header-content .header-content-inner hr {
|
||||
margin: var(--btcpay-space-m) auto;
|
||||
}
|
||||
|
||||
header.masthead .header-content .header-content-inner p {
|
||||
font-size: var(--btcpay-font-size-l);
|
||||
margin: var(--btcpay-space-l) 0;
|
||||
max-width: 38rem;
|
||||
}
|
||||
|
||||
#services img {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.social-row {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.social-row > div {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.social-row img {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.social-row span {
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.service-box {
|
||||
max-width: 400px;
|
||||
margin: 50px auto 0;
|
||||
}
|
||||
|
||||
.service-box p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.call-to-action {
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.call-to-action h2 {
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
header.masthead .header-content .header-content-inner h1 {
|
||||
font-size: var(--btcpay-font-size-xxl);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
header.masthead {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.service-box {
|
||||
margin: 20px auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -98,6 +98,15 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll(".btcpay-theme-switch").forEach(function (link) {
|
||||
link.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
const current = document.documentElement.getAttribute(THEME_ATTR) || COLOR_MODES[0];
|
||||
const mode = current === COLOR_MODES[0] ? COLOR_MODES[1] : COLOR_MODES[0];
|
||||
setColorMode(mode);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function switchTimeFormat() {
|
||||
@ -109,3 +118,5 @@ function switchTimeFormat() {
|
||||
$(this).attr("data-switch", htmlVal);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,365 +0,0 @@
|
||||
:root {
|
||||
/* General color definitions */
|
||||
--btcpay-brand-light: #B498FF;
|
||||
--btcpay-brand-secondary: #8064ef;
|
||||
--btcpay-brand-tertiary: #321a6e;
|
||||
--btcpay-brand-dark: #19154B;
|
||||
--btcpay-brand-darkest: #02000C;
|
||||
|
||||
/* Color definitions for specific purposes - map the general colors or define additional ones */
|
||||
--btcpay-neutral-100: #F3F1FF;
|
||||
--btcpay-neutral-200: #DCD7FC;
|
||||
--btcpay-neutral-300: #CDC6F3;
|
||||
--btcpay-neutral-400: #AEA7D7;
|
||||
--btcpay-neutral-500: #7a72a0;
|
||||
--btcpay-neutral-600: #8880ad;
|
||||
--btcpay-neutral-700: #49308b;
|
||||
--btcpay-neutral-800: #181334;
|
||||
--btcpay-neutral-900: #100d20;
|
||||
|
||||
/* Color definitions for specific sections - try to reuse colors defined above */
|
||||
--btcpay-white: #ffffff;
|
||||
--btcpay-black: #000000;
|
||||
--btcpay-primary-100: #c7e6c1;
|
||||
--btcpay-primary-200: #b5dead;
|
||||
--btcpay-primary-300: #9dd392;
|
||||
--btcpay-primary-400: #7cc46e;
|
||||
--btcpay-primary-500: #44a431;
|
||||
--btcpay-primary-600: #389725;
|
||||
--btcpay-primary-700: #2e8a1b;
|
||||
--btcpay-primary-800: #247d12;
|
||||
--btcpay-primary-900: #1c710b;
|
||||
--btcpay-green-100: #b9d6b4;
|
||||
--btcpay-green-200: #a2c89b;
|
||||
--btcpay-green-300: #83b679;
|
||||
--btcpay-green-400: #5a9e4d;
|
||||
--btcpay-green-500: #247e12;
|
||||
--btcpay-green-600: #146404;
|
||||
--btcpay-green-700: #0e5700;
|
||||
--btcpay-green-800: #0c4b00;
|
||||
--btcpay-green-900: #0a3e00;
|
||||
--btcpay-blue-100: #b5e1e8;
|
||||
--btcpay-blue-200: #9dd7e1;
|
||||
--btcpay-blue-300: #7ccad7;
|
||||
--btcpay-blue-400: #51b9c9;
|
||||
--btcpay-blue-500: #17a2b8;
|
||||
--btcpay-blue-600: #03899e;
|
||||
--btcpay-blue-700: #007d91;
|
||||
--btcpay-blue-800: #007284;
|
||||
--btcpay-blue-900: #006778;
|
||||
--btcpay-yellow-100: #ffebb0;
|
||||
--btcpay-yellow-200: #ffe496;
|
||||
--btcpay-yellow-300: #ffdc73;
|
||||
--btcpay-yellow-400: #ffd045;
|
||||
--btcpay-yellow-500: #ffc107;
|
||||
--btcpay-yellow-600: #e5ac00;
|
||||
--btcpay-yellow-700: #d8a200;
|
||||
--btcpay-yellow-800: #cc9900;
|
||||
--btcpay-yellow-900: #bf8f00;
|
||||
--btcpay-red-100: #ebbcb6;
|
||||
--btcpay-red-200: #e4a59e;
|
||||
--btcpay-red-300: #dc887e;
|
||||
--btcpay-red-400: #d06053;
|
||||
--btcpay-red-500: #c12c1a;
|
||||
--btcpay-red-600: #a71705;
|
||||
--btcpay-red-700: #9a1000;
|
||||
--btcpay-red-800: #8e0f00;
|
||||
--btcpay-red-900: #810d00;
|
||||
--btcpay-purple-100: #F4F1FA;
|
||||
--btcpay-purple-200: #E3DDF2;
|
||||
--btcpay-purple-300: #C1B5E3;
|
||||
--btcpay-purple-400: #957FCE;
|
||||
--btcpay-purple-500: #7356BF;
|
||||
--btcpay-purple-600: #574191;
|
||||
--btcpay-purple-700: #453473;
|
||||
--btcpay-purple-800: #2E224C;
|
||||
--btcpay-orange-100: #FFF3EF;
|
||||
--btcpay-orange-200: #FFE1D6;
|
||||
--btcpay-orange-300: #FABDA5;
|
||||
--btcpay-orange-400: #FA9269;
|
||||
--btcpay-orange-500: #FF6937;
|
||||
--btcpay-orange-600: #C14F29;
|
||||
--btcpay-orange-700: #9A3F21;
|
||||
--btcpay-orange-800: #672A16;
|
||||
--btcpay-brown-100: #F6F0EA;
|
||||
--btcpay-brown-200: #EBE0DB;
|
||||
--btcpay-brown-300: #D2BBB0;
|
||||
--btcpay-brown-400: #B18977;
|
||||
--btcpay-brown-500: #99644C;
|
||||
--btcpay-brown-600: #744C3A;
|
||||
--btcpay-brown-700: #5C3C2E;
|
||||
--btcpay-brown-800: #3D281E;
|
||||
--btcpay-pink-100: #FFEDF9;
|
||||
--btcpay-pink-200: #FFCEE5;
|
||||
--btcpay-pink-300: #FFACD6;
|
||||
--btcpay-pink-400: #FE82C2;
|
||||
--btcpay-pink-500: #F162AF;
|
||||
--btcpay-pink-600: #BB4183;
|
||||
--btcpay-pink-700: #7D2457;
|
||||
--btcpay-pink-800: #5E103E;
|
||||
--btcpay-space-xs: 5px;
|
||||
--btcpay-space-s: 10px;
|
||||
--btcpay-space-m: 20px;
|
||||
--btcpay-space-l: 40px;
|
||||
--btcpay-space-xl: 60px;
|
||||
--btcpay-space-xxl: 80px;
|
||||
--btcpay-font-family-base: "Open Sans" , "Helvetica Neue" , Arial , sans-serif;
|
||||
--btcpay-font-family-monospace: SFMono-Regular , Menlo , Monaco , Consolas , "Liberation Mono" , "Courier New" , monospace;
|
||||
--btcpay-font-size-xs: 10px;
|
||||
--btcpay-font-size-s: 12px;
|
||||
--btcpay-font-size-m: 16px;
|
||||
--btcpay-font-size-l: 18px;
|
||||
--btcpay-font-size-xl: 36px;
|
||||
--btcpay-font-size-xxl: 45px;
|
||||
--btcpay-font-weight-normal: 400;
|
||||
--btcpay-font-weight-semibold: 600;
|
||||
--btcpay-font-weight-bold: 700;
|
||||
--btcpay-font-size-base: var(--btcpay-font-size-m);
|
||||
--btcpay-bg-dark: var(--btcpay-brand-dark);
|
||||
--btcpay-bg-tile: var(--btcpay-brand-tertiary);
|
||||
--btcpay-bg-cta: var(--btcpay-brand-tertiary);
|
||||
--btcpay-body-bg: var(--btcpay-brand-darkest);
|
||||
--btcpay-body-bg-light: var(--btcpay-white);
|
||||
--btcpay-body-bg-medium: var(--btcpay-neutral-200);
|
||||
--btcpay-body-bg-striped: var(--btcpay-neutral-200);
|
||||
--btcpay-body-bg-hover: var(--btcpay-neutral-200);
|
||||
--btcpay-body-bg-active: var(--btcpay-primary);
|
||||
--btcpay-body-border-light: var(--btcpay-neutral-700);
|
||||
--btcpay-body-border-medium: var(--btcpay-neutral-400);
|
||||
--btcpay-body-text: var(--btcpay-neutral-100);
|
||||
--btcpay-body-text-striped: var(--btcpay-body-text);
|
||||
--btcpay-body-text-hover: var(--btcpay-body-text);
|
||||
--btcpay-body-text-active: var(--btcpay-white);
|
||||
--btcpay-body-text-muted: var(--btcpay-neutral-500);
|
||||
--btcpay-body-link: var(--btcpay-primary);
|
||||
--btcpay-body-link-accent: var(--btcpay-primary-accent);
|
||||
--btcpay-body-shadow: rgba(25, 135, 84, 0.33);
|
||||
--btcpay-wizard-bg: var(--btcpay-white);
|
||||
--btcpay-wizard-text: var(--btcpay-body-text);
|
||||
--btcpay-header-bg: var(--btcpay-brand-dark);
|
||||
--btcpay-header-text: var(--btcpay-body-text);
|
||||
--btcpay-header-link: var(--btcpay-header-text);
|
||||
--btcpay-header-link-accent: var(--btcpay-neutral-300);
|
||||
--btcpay-header-link-active: var(--btcpay-brand-light);
|
||||
--btcpay-nav-link: var(--btcpay-neutral-600);
|
||||
--btcpay-nav-link-accent: var(--btcpay-neutral-100);
|
||||
--btcpay-nav-link-active: var(--btcpay-white);
|
||||
--btcpay-nav-bg: transparent;
|
||||
--btcpay-nav-bg-hover: transparent;
|
||||
--btcpay-nav-bg-active: transparent;
|
||||
--btcpay-nav-border: transparent;
|
||||
--btcpay-nav-border-hover: transparent;
|
||||
--btcpay-nav-border-active: var(--btcpay-primary);
|
||||
--btcpay-form-bg: var(--btcpay-white);
|
||||
--btcpay-form-bg-hover: var(--btcpay-form-bg);
|
||||
--btcpay-form-bg-addon: var(--btcpay-neutral-300);
|
||||
--btcpay-form-bg-disabled: var(--btcpay-neutral-200);
|
||||
--btcpay-form-text: var(--btcpay-neutral-900);
|
||||
--btcpay-form-text-label: var(--btcpay-neutral-400);
|
||||
--btcpay-form-text-addon: var(--btcpay-neutral-400);
|
||||
--btcpay-form-border: var(--btcpay-neutral-300);
|
||||
--btcpay-form-border-focus: var(--btcpay-form-border);
|
||||
--btcpay-form-border-active: var(--btcpay-form-border);
|
||||
--btcpay-form-border-disabled: var(--btcpay-form-border);
|
||||
--btcpay-form-shadow-focus: var(--btcpay-primary-shadow);
|
||||
--btcpay-form-shadow-valid: var(--btcpay-success-shadow);
|
||||
--btcpay-form-shadow-invalid: var(--btcpay-danger-shadow);
|
||||
--btcpay-footer-bg: var(--btcpay-brand-darkest);
|
||||
--btcpay-footer-text: var(--btcpay-neutral-600);
|
||||
--btcpay-footer-link: var(--btcpay-neutral-400);
|
||||
--btcpay-footer-link-accent: var(--btcpay-neutral-100);
|
||||
--btcpay-code-text: var(--btcpay-body-text);
|
||||
--btcpay-code-bg: transparent;
|
||||
--btcpay-pre-text: var(--btcpay-white);
|
||||
--btcpay-pre-bg: var(--btcpay-neutral-900);
|
||||
|
||||
--btcpay-primary: var(--btcpay-brand-secondary);
|
||||
--btcpay-primary-accent: #4b3bc0;
|
||||
--btcpay-primary-text: var(--btcpay-white);
|
||||
--btcpay-primary-text-hover: var(--btcpay-white);
|
||||
--btcpay-primary-text-active: var(--btcpay-white);
|
||||
--btcpay-primary-bg-hover: var(--btcpay-primary-accent);
|
||||
--btcpay-primary-bg-active: var(--btcpay-primary-accent);
|
||||
--btcpay-primary-border: var(--btcpay-primary);
|
||||
--btcpay-primary-border-hover: var(--btcpay-primary-bg-hover);
|
||||
--btcpay-primary-border-active: var(--btcpay-primary-bg-active);
|
||||
--btcpay-primary-dim-bg: var(--btcpay-primary-500);
|
||||
--btcpay-primary-dim-bg-striped: var(--btcpay-primary-400);
|
||||
--btcpay-primary-dim-bg-hover: var(--btcpay-primary-600);
|
||||
--btcpay-primary-dim-bg-active: var(--btcpay-primary-700);
|
||||
--btcpay-primary-dim-border: var(--btcpay-primary-dim-bg);
|
||||
--btcpay-primary-dim-border-active: var(--btcpay-primary-dim-bg-active);
|
||||
--btcpay-primary-dim-text: var(--btcpay-white);
|
||||
--btcpay-primary-dim-text-striped: 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-shadow: rgba(25, 135, 84, 0.33);
|
||||
--btcpay-secondary: var(--btcpay-neutral-500);
|
||||
--btcpay-secondary-accent: var(--btcpay-neutral-700);
|
||||
--btcpay-secondary-text: var(--btcpay-white);
|
||||
--btcpay-secondary-text-hover: var(--btcpay-white);
|
||||
--btcpay-secondary-text-active: var(--btcpay-white);
|
||||
--btcpay-secondary-bg-hover: var(--btcpay-secondary-accent);
|
||||
--btcpay-secondary-bg-active: var(--btcpay-secondary-accent);
|
||||
--btcpay-secondary-border: var(--btcpay-secondary);
|
||||
--btcpay-secondary-border-hover: var(--btcpay-secondary-bg-hover);
|
||||
--btcpay-secondary-border-active: var(--btcpay-secondary-bg-active);
|
||||
--btcpay-secondary-dim-bg: var(--btcpay-neutral-200);
|
||||
--btcpay-secondary-dim-bg-striped: var(--btcpay-neutral-300);
|
||||
--btcpay-secondary-dim-bg-hover: var(--btcpay-neutral-300);
|
||||
--btcpay-secondary-dim-bg-active: var(--btcpay-neutral-400);
|
||||
--btcpay-secondary-dim-border: var(--btcpay-secondary-dim-bg);
|
||||
--btcpay-secondary-dim-border-active: var(--btcpay-secondary-dim-bg-active);
|
||||
--btcpay-secondary-dim-text: var(--btcpay-neutral-800);
|
||||
--btcpay-secondary-dim-text-striped: var(--btcpay-secondary-dim-text);
|
||||
--btcpay-secondary-dim-text-hover: var(--btcpay-secondary-dim-text);
|
||||
--btcpay-secondary-dim-text-active: var(--btcpay-neutral-900);
|
||||
--btcpay-secondary-shadow: rgba(130, 138, 145, 0.33);
|
||||
--btcpay-success: var(--btcpay-green-500);
|
||||
--btcpay-success-accent: var(--btcpay-green-700);
|
||||
--btcpay-success-text: var(--btcpay-white);
|
||||
--btcpay-success-text-hover: var(--btcpay-white);
|
||||
--btcpay-success-text-active: var(--btcpay-white);
|
||||
--btcpay-success-bg-hover: var(--btcpay-success-accent);
|
||||
--btcpay-success-bg-active: var(--btcpay-success-accent);
|
||||
--btcpay-success-border: var(--btcpay-success);
|
||||
--btcpay-success-border-hover: var(--btcpay-success-bg-hover);
|
||||
--btcpay-success-border-active: var(--btcpay-success-bg-active);
|
||||
--btcpay-success-dim-bg: var(--btcpay-green-100);
|
||||
--btcpay-success-dim-bg-striped: var(--btcpay-green-200);
|
||||
--btcpay-success-dim-bg-hover: var(--btcpay-green-200);
|
||||
--btcpay-success-dim-bg-active: var(--btcpay-green-300);
|
||||
--btcpay-success-dim-border: var(--btcpay-success-dim-bg);
|
||||
--btcpay-success-dim-border-active: var(--btcpay-success-dim-bg-active);
|
||||
--btcpay-success-dim-text: var(--btcpay-green-800);
|
||||
--btcpay-success-dim-text-striped: var(--btcpay-success-dim-text);
|
||||
--btcpay-success-dim-text-hover: var(--btcpay-success-dim-text);
|
||||
--btcpay-success-dim-text-active: var(--btcpay-green-900);
|
||||
--btcpay-success-shadow: rgba(60, 153, 110, 0.33);
|
||||
--btcpay-info: var(--btcpay-blue-500);
|
||||
--btcpay-info-accent: var(--btcpay-blue-700);
|
||||
--btcpay-info-text: var(--btcpay-white);
|
||||
--btcpay-info-text-hover: var(--btcpay-white);
|
||||
--btcpay-info-text-active: var(--btcpay-white);
|
||||
--btcpay-info-bg-hover: var(--btcpay-info-accent);
|
||||
--btcpay-info-bg-active: var(--btcpay-info-accent);
|
||||
--btcpay-info-border: var(--btcpay-info);
|
||||
--btcpay-info-border-hover: var(--btcpay-info-bg-hover);
|
||||
--btcpay-info-border-active: var(--btcpay-info-bg-active);
|
||||
--btcpay-info-dim-bg: var(--btcpay-blue-100);
|
||||
--btcpay-info-dim-bg-striped: var(--btcpay-blue-200);
|
||||
--btcpay-info-dim-bg-hover: var(--btcpay-blue-200);
|
||||
--btcpay-info-dim-bg-active: var(--btcpay-blue-300);
|
||||
--btcpay-info-dim-border: var(--btcpay-info-dim-bg);
|
||||
--btcpay-info-dim-border-active: var(--btcpay-info-dim-bg-active);
|
||||
--btcpay-info-dim-text: var(--btcpay-blue-800);
|
||||
--btcpay-info-dim-text-striped: var(--btcpay-info-dim-text);
|
||||
--btcpay-info-dim-text-hover: var(--btcpay-info-dim-text);
|
||||
--btcpay-info-dim-text-active: var(--btcpay-blue-900);
|
||||
--btcpay-info-shadow: rgba(11, 172, 204, 0.33);
|
||||
--btcpay-warning: var(--btcpay-yellow-500);
|
||||
--btcpay-warning-accent: var(--btcpay-yellow-700);
|
||||
--btcpay-warning-text: var(--btcpay-neutral-900);
|
||||
--btcpay-warning-text-hover: var(--btcpay-neutral-900);
|
||||
--btcpay-warning-text-active: var(--btcpay-neutral-900);
|
||||
--btcpay-warning-bg-hover: var(--btcpay-warning-accent);
|
||||
--btcpay-warning-bg-active: var(--btcpay-warning-accent);
|
||||
--btcpay-warning-border: var(--btcpay-warning);
|
||||
--btcpay-warning-border-hover: var(--btcpay-warning-bg-hover);
|
||||
--btcpay-warning-border-active: var(--btcpay-warning-bg-active);
|
||||
--btcpay-warning-dim-bg: var(--btcpay-yellow-100);
|
||||
--btcpay-warning-dim-bg-striped: var(--btcpay-yellow-200);
|
||||
--btcpay-warning-dim-bg-hover: var(--btcpay-yellow-200);
|
||||
--btcpay-warning-dim-bg-active: var(--btcpay-yellow-300);
|
||||
--btcpay-warning-dim-border: var(--btcpay-warning-dim-bg);
|
||||
--btcpay-warning-dim-border-active: var(--btcpay-warning-dim-bg-active);
|
||||
--btcpay-warning-dim-text: var(--btcpay-neutral-800);
|
||||
--btcpay-warning-dim-text-striped: var(--btcpay-warning-dim-text);
|
||||
--btcpay-warning-dim-text-hover: var(--btcpay-warning-dim-text);
|
||||
--btcpay-warning-dim-text-active: var(--btcpay-yellow-900);
|
||||
--btcpay-warning-shadow: rgba(217, 164, 6, 0.33);
|
||||
--btcpay-danger: var(--btcpay-red-500);
|
||||
--btcpay-danger-accent: var(--btcpay-red-700);
|
||||
--btcpay-danger-text: var(--btcpay-white);
|
||||
--btcpay-danger-text-hover: var(--btcpay-white);
|
||||
--btcpay-danger-text-active: var(--btcpay-white);
|
||||
--btcpay-danger-bg-hover: var(--btcpay-danger-accent);
|
||||
--btcpay-danger-bg-active: var(--btcpay-danger-accent);
|
||||
--btcpay-danger-border: var(--btcpay-danger);
|
||||
--btcpay-danger-border-hover: var(--btcpay-danger-bg-hover);
|
||||
--btcpay-danger-border-active: var(--btcpay-danger-bg-active);
|
||||
--btcpay-danger-dim-bg: var(--btcpay-red-100);
|
||||
--btcpay-danger-dim-bg-striped: var(--btcpay-red-200);
|
||||
--btcpay-danger-dim-bg-hover: var(--btcpay-red-200);
|
||||
--btcpay-danger-dim-bg-active: var(--btcpay-red-300);
|
||||
--btcpay-danger-dim-border: var(--btcpay-danger-dim-bg);
|
||||
--btcpay-danger-dim-border-active: var(--btcpay-danger-dim-bg-active);
|
||||
--btcpay-danger-dim-text: var(--btcpay-red-800);
|
||||
--btcpay-danger-dim-text-striped: var(--btcpay-danger-dim-text);
|
||||
--btcpay-danger-dim-text-hover: var(--btcpay-danger-dim-text);
|
||||
--btcpay-danger-dim-text-active: var(--btcpay-red-900);
|
||||
--btcpay-danger-shadow: rgba(225, 83, 97, 0.33);
|
||||
--btcpay-light: var(--btcpay-neutral-200);
|
||||
--btcpay-light-accent: var(--btcpay-neutral-400);
|
||||
--btcpay-light-text: var(--btcpay-neutral-800);
|
||||
--btcpay-light-text-hover: var(--btcpay-neutral-800);
|
||||
--btcpay-light-text-active: var(--btcpay-neutral-800);
|
||||
--btcpay-light-bg-hover: var(--btcpay-light-accent);
|
||||
--btcpay-light-bg-active: var(--btcpay-light-accent);
|
||||
--btcpay-light-border: var(--btcpay-light);
|
||||
--btcpay-light-border-hover: var(--btcpay-light-bg-hover);
|
||||
--btcpay-light-border-active: var(--btcpay-light-bg-active);
|
||||
--btcpay-light-dim-bg: var(--btcpay-white);
|
||||
--btcpay-light-dim-bg-striped: var(--btcpay-neutral-200);
|
||||
--btcpay-light-dim-bg-hover: var(--btcpay-neutral-200);
|
||||
--btcpay-light-dim-bg-active: var(--btcpay-neutral-300);
|
||||
--btcpay-light-dim-border: var(--btcpay-light-dim-bg);
|
||||
--btcpay-light-dim-border-active: var(--btcpay-light-dim-bg-active);
|
||||
--btcpay-light-dim-text: var(--btcpay-neutral-800);
|
||||
--btcpay-light-dim-text-striped: var(--btcpay-light-dim-text);
|
||||
--btcpay-light-dim-text-hover: var(--btcpay-light-dim-text);
|
||||
--btcpay-light-dim-text-active: var(--btcpay-neutral-900);
|
||||
--btcpay-light-shadow: rgba(211, 212, 213, 0.33);
|
||||
--btcpay-dark: var(--btcpay-neutral-800);
|
||||
--btcpay-dark-accent: var(--btcpay-black);
|
||||
--btcpay-dark-text: var(--btcpay-neutral-200);
|
||||
--btcpay-dark-text-hover: var(--btcpay-neutral-200);
|
||||
--btcpay-dark-text-active: var(--btcpay-neutral-200);
|
||||
--btcpay-dark-bg-hover: var(--btcpay-dark-accent);
|
||||
--btcpay-dark-bg-active: var(--btcpay-dark-accent);
|
||||
--btcpay-dark-border: var(--btcpay-dark);
|
||||
--btcpay-dark-border-hover: var(--btcpay-dark-bg-hover);
|
||||
--btcpay-dark-border-active: var(--btcpay-dark-bg-active);
|
||||
--btcpay-dark-dim-bg: var(--btcpay-neutral-900);
|
||||
--btcpay-dark-dim-bg-striped: var(--btcpay-neutral-900);
|
||||
--btcpay-dark-dim-bg-hover: var(--btcpay-neutral-800);
|
||||
--btcpay-dark-dim-bg-active: var(--btcpay-neutral-700);
|
||||
--btcpay-dark-dim-border: var(--btcpay-dark-dim-bg);
|
||||
--btcpay-dark-dim-border-active: var(--btcpay-dark-dim-bg-active);
|
||||
--btcpay-dark-dim-text: var(--btcpay-neutral-200);
|
||||
--btcpay-dark-dim-text-striped: var(--btcpay-dark-dim-text);
|
||||
--btcpay-dark-dim-text-hover: var(--btcpay-dark-dim-text);
|
||||
--btcpay-dark-dim-text-active: var(--btcpay-neutral-100);
|
||||
--btcpay-dark-shadow: rgba(66, 70, 73, 0.33);
|
||||
}
|
||||
|
||||
/* Bootstrap modifications */
|
||||
body {
|
||||
background: linear-gradient(var(--btcpay-header-bg), var(--btcpay-footer-bg));
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.logo,
|
||||
.head-logo,
|
||||
.social-logo {
|
||||
filter: contrast(0) brightness(200%);
|
||||
}
|
||||
|
||||
#mainNav {
|
||||
background: var(--btcpay-header-bg) !important;
|
||||
}
|
||||
|
||||
header.masthead::before,
|
||||
.service-box img {
|
||||
filter: hue-rotate(100deg) opacity(60%) contrast(125%);
|
||||
}
|
||||
@ -1,357 +0,0 @@
|
||||
:root {
|
||||
/* General color definitions */
|
||||
--btcpay-brand-light: #CEDC21;
|
||||
--btcpay-brand-secondary: #51B13E;
|
||||
--btcpay-brand-tertiary: #137547;
|
||||
--btcpay-brand-dark: #0F3B21;
|
||||
--btcpay-brand-darkest: #05120a;
|
||||
|
||||
/* Color definitions for specific purposes - map the general colors or define additional ones */
|
||||
--btcpay-white: #fff;
|
||||
--btcpay-black: #000;
|
||||
|
||||
--btcpay-light-100: #f8f9fa;
|
||||
--btcpay-light-200: #e9ecef;
|
||||
--btcpay-light-300: #dee2e6;
|
||||
--btcpay-light-400: #ced4da;
|
||||
--btcpay-light-500: #adb5bd;
|
||||
--btcpay-light-600: #6c757d;
|
||||
--btcpay-light-700: #495057;
|
||||
--btcpay-light-800: #343a40;
|
||||
--btcpay-light-900: #212529;
|
||||
|
||||
/* Color definitions for specific sections - try to reuse colors defined above */
|
||||
--btcpay-primary-100: #c7e6c1;
|
||||
--btcpay-primary-200: #b5dead;
|
||||
--btcpay-primary-300: #9dd392;
|
||||
--btcpay-primary-400: #7cc46e;
|
||||
--btcpay-primary-500: #44a431;
|
||||
--btcpay-primary-600: #389725;
|
||||
--btcpay-primary-700: #2e8a1b;
|
||||
--btcpay-primary-800: #247d12;
|
||||
--btcpay-primary-900: #1c710b;
|
||||
--btcpay-green-100: #b9d6b4;
|
||||
--btcpay-green-200: #a2c89b;
|
||||
--btcpay-green-300: #83b679;
|
||||
--btcpay-green-400: #5a9e4d;
|
||||
--btcpay-green-500: #247e12;
|
||||
--btcpay-green-600: #146404;
|
||||
--btcpay-green-700: #0e5700;
|
||||
--btcpay-green-800: #0c4b00;
|
||||
--btcpay-green-900: #0a3e00;
|
||||
--btcpay-blue-100: #b5e1e8;
|
||||
--btcpay-blue-200: #9dd7e1;
|
||||
--btcpay-blue-300: #7ccad7;
|
||||
--btcpay-blue-400: #51b9c9;
|
||||
--btcpay-blue-500: #17a2b8;
|
||||
--btcpay-blue-600: #03899e;
|
||||
--btcpay-blue-700: #007d91;
|
||||
--btcpay-blue-800: #007284;
|
||||
--btcpay-blue-900: #006778;
|
||||
--btcpay-yellow-100: #ffebb0;
|
||||
--btcpay-yellow-200: #ffe496;
|
||||
--btcpay-yellow-300: #ffdc73;
|
||||
--btcpay-yellow-400: #ffd045;
|
||||
--btcpay-yellow-500: #ffc107;
|
||||
--btcpay-yellow-600: #e5ac00;
|
||||
--btcpay-yellow-700: #d8a200;
|
||||
--btcpay-yellow-800: #cc9900;
|
||||
--btcpay-yellow-900: #bf8f00;
|
||||
--btcpay-red-100: #ebbcb6;
|
||||
--btcpay-red-200: #e4a59e;
|
||||
--btcpay-red-300: #dc887e;
|
||||
--btcpay-red-400: #d06053;
|
||||
--btcpay-red-500: #c12c1a;
|
||||
--btcpay-red-600: #a71705;
|
||||
--btcpay-red-700: #9a1000;
|
||||
--btcpay-red-800: #8e0f00;
|
||||
--btcpay-red-900: #810d00;
|
||||
--btcpay-purple-100: #F4F1FA;
|
||||
--btcpay-purple-200: #E3DDF2;
|
||||
--btcpay-purple-300: #C1B5E3;
|
||||
--btcpay-purple-400: #957FCE;
|
||||
--btcpay-purple-500: #7356BF;
|
||||
--btcpay-purple-600: #574191;
|
||||
--btcpay-purple-700: #453473;
|
||||
--btcpay-purple-800: #2E224C;
|
||||
--btcpay-orange-100: #FFF3EF;
|
||||
--btcpay-orange-200: #FFE1D6;
|
||||
--btcpay-orange-300: #FABDA5;
|
||||
--btcpay-orange-400: #FA9269;
|
||||
--btcpay-orange-500: #FF6937;
|
||||
--btcpay-orange-600: #C14F29;
|
||||
--btcpay-orange-700: #9A3F21;
|
||||
--btcpay-orange-800: #672A16;
|
||||
--btcpay-brown-100: #F6F0EA;
|
||||
--btcpay-brown-200: #EBE0DB;
|
||||
--btcpay-brown-300: #D2BBB0;
|
||||
--btcpay-brown-400: #B18977;
|
||||
--btcpay-brown-500: #99644C;
|
||||
--btcpay-brown-600: #744C3A;
|
||||
--btcpay-brown-700: #5C3C2E;
|
||||
--btcpay-brown-800: #3D281E;
|
||||
--btcpay-pink-100: #FFEDF9;
|
||||
--btcpay-pink-200: #FFCEE5;
|
||||
--btcpay-pink-300: #FFACD6;
|
||||
--btcpay-pink-400: #FE82C2;
|
||||
--btcpay-pink-500: #F162AF;
|
||||
--btcpay-pink-600: #BB4183;
|
||||
--btcpay-pink-700: #7D2457;
|
||||
--btcpay-pink-800: #5E103E;
|
||||
--btcpay-space-xs: 5px;
|
||||
--btcpay-space-s: 10px;
|
||||
--btcpay-space-m: 20px;
|
||||
--btcpay-space-l: 40px;
|
||||
--btcpay-space-xl: 60px;
|
||||
--btcpay-space-xxl: 80px;
|
||||
--btcpay-font-family-base: "Open Sans" , "Helvetica Neue" , Arial , sans-serif;
|
||||
--btcpay-font-family-monospace: SFMono-Regular , Menlo , Monaco , Consolas , "Liberation Mono" , "Courier New" , monospace;
|
||||
--btcpay-font-size-xs: 10px;
|
||||
--btcpay-font-size-s: 12px;
|
||||
--btcpay-font-size-m: 14px;
|
||||
--btcpay-font-size-l: 18px;
|
||||
--btcpay-font-size-xl: 36px;
|
||||
--btcpay-font-size-xxl: 45px;
|
||||
--btcpay-font-weight-normal: 400;
|
||||
--btcpay-font-weight-semibold: 600;
|
||||
--btcpay-font-weight-bold: 700;
|
||||
--btcpay-neutral-100: #f8f9fa;
|
||||
--btcpay-neutral-200: #e9ecef;
|
||||
--btcpay-neutral-300: #dee2e6;
|
||||
--btcpay-neutral-400: #ced4da;
|
||||
--btcpay-neutral-500: #8f979e;
|
||||
--btcpay-neutral-600: #6c757d;
|
||||
--btcpay-neutral-700: #495057;
|
||||
--btcpay-neutral-800: #343a40;
|
||||
--btcpay-neutral-900: #292929;
|
||||
--btcpay-font-size-base: var(--btcpay-font-size-m);
|
||||
--btcpay-bg-dark: var(--btcpay-brand-dark);
|
||||
--btcpay-bg-tile: var(--btcpay-white);
|
||||
--btcpay-bg-cta: var(--btcpay-bg-dark);
|
||||
--btcpay-body-bg: var(--btcpay-neutral-100);
|
||||
--btcpay-body-bg-light: var(--btcpay-white);
|
||||
--btcpay-body-bg-medium: var(--btcpay-neutral-200);
|
||||
--btcpay-body-bg-striped: var(--btcpay-neutral-200);
|
||||
--btcpay-body-bg-hover: var(--btcpay-neutral-200);
|
||||
--btcpay-body-bg-active: var(--btcpay-primary);
|
||||
--btcpay-body-border-light: var(--btcpay-neutral-200);
|
||||
--btcpay-body-border-medium: var(--btcpay-neutral-300);
|
||||
--btcpay-body-text: var(--btcpay-neutral-900);
|
||||
--btcpay-body-text-striped: var(--btcpay-body-text);
|
||||
--btcpay-body-text-hover: var(--btcpay-body-text);
|
||||
--btcpay-body-text-active: var(--btcpay-white);
|
||||
--btcpay-body-text-muted: var(--btcpay-neutral-500);
|
||||
--btcpay-body-link: var(--btcpay-primary);
|
||||
--btcpay-body-link-accent: var(--btcpay-primary-accent);
|
||||
--btcpay-body-shadow: rgba(25, 135, 84, 0.33);
|
||||
--btcpay-wizard-bg: var(--btcpay-white);
|
||||
--btcpay-wizard-text: var(--btcpay-body-text);
|
||||
--btcpay-header-bg: var(--btcpay-bg-dark);
|
||||
--btcpay-header-text: var(--btcpay-white);
|
||||
--btcpay-header-link: var(--btcpay-white);
|
||||
--btcpay-header-link-accent: var(--btcpay-light-300);
|
||||
--btcpay-header-link-active: var(--btcpay-light-300);
|
||||
--btcpay-nav-link: var(--btcpay-neutral-600);
|
||||
--btcpay-nav-link-accent: var(--btcpay-neutral-700);
|
||||
--btcpay-nav-link-active: var(--btcpay-neutral-900);
|
||||
--btcpay-nav-bg: transparent;
|
||||
--btcpay-nav-bg-hover: transparent;
|
||||
--btcpay-nav-bg-active: transparent;
|
||||
--btcpay-nav-border: transparent;
|
||||
--btcpay-nav-border-hover: transparent;
|
||||
--btcpay-nav-border-active: var(--btcpay-primary);
|
||||
--btcpay-form-bg: var(--btcpay-white);
|
||||
--btcpay-form-bg-hover: var(--btcpay-form-bg);
|
||||
--btcpay-form-bg-addon: var(--btcpay-neutral-300);
|
||||
--btcpay-form-bg-disabled: var(--btcpay-neutral-200);
|
||||
--btcpay-form-text: var(--btcpay-neutral-900);
|
||||
--btcpay-form-text-label: var(--btcpay-neutral-700);
|
||||
--btcpay-form-text-addon: var(--btcpay-neutral-700);
|
||||
--btcpay-form-border: var(--btcpay-neutral-300);
|
||||
--btcpay-form-border-focus: var(--btcpay-form-border);
|
||||
--btcpay-form-border-active: var(--btcpay-form-border);
|
||||
--btcpay-form-border-disabled: var(--btcpay-form-border);
|
||||
--btcpay-form-shadow-focus: var(--btcpay-primary-shadow);
|
||||
--btcpay-form-shadow-valid: var(--btcpay-success-shadow);
|
||||
--btcpay-form-shadow-invalid: var(--btcpay-danger-shadow);
|
||||
--btcpay-footer-bg: var(--btcpay-bg-dark);
|
||||
--btcpay-footer-text: var(--btcpay-light-400);
|
||||
--btcpay-footer-link: var(--btcpay-neutral-400);
|
||||
--btcpay-footer-link-accent: var(--btcpay-neutral-100);
|
||||
--btcpay-code-text: var(--btcpay-body-text);
|
||||
--btcpay-code-bg: transparent;
|
||||
--btcpay-pre-text: var(--btcpay-white);
|
||||
--btcpay-pre-bg: var(--btcpay-neutral-900);
|
||||
--btcpay-primary: #329f80;
|
||||
--btcpay-primary-accent: #267861;
|
||||
--btcpay-primary-text:var(--btcpay-white);
|
||||
--btcpay-primary-text-hover: var(--btcpay-white);
|
||||
--btcpay-primary-text-active: var(--btcpay-white);
|
||||
--btcpay-primary-bg-hover: var(--btcpay-primary-accent);
|
||||
--btcpay-primary-bg-active: var(--btcpay-primary-accent);
|
||||
--btcpay-primary-border: var(--btcpay-primary);
|
||||
--btcpay-primary-border-hover: var(--btcpay-primary-bg-hover);
|
||||
--btcpay-primary-border-active: var(--btcpay-primary-bg-active);
|
||||
--btcpay-primary-dim-bg: var(--btcpay-primary-500);
|
||||
--btcpay-primary-dim-bg-striped: var(--btcpay-primary-400);
|
||||
--btcpay-primary-dim-bg-hover: var(--btcpay-primary-600);
|
||||
--btcpay-primary-dim-bg-active: var(--btcpay-primary-700);
|
||||
--btcpay-primary-dim-border: var(--btcpay-primary-dim-bg);
|
||||
--btcpay-primary-dim-border-active: var(--btcpay-primary-dim-bg-active);
|
||||
--btcpay-primary-dim-text: var(--btcpay-white);
|
||||
--btcpay-primary-dim-text-striped: 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-shadow: rgba(25, 135, 84, 0.33);
|
||||
--btcpay-secondary: var(--btcpay-light-600);
|
||||
--btcpay-secondary-accent: var(--btcpay-light-800);
|
||||
--btcpay-secondary-text: var(--btcpay-white);
|
||||
--btcpay-secondary-text-hover: var(--btcpay-white);
|
||||
--btcpay-secondary-text-active: var(--btcpay-white);
|
||||
--btcpay-secondary-bg-hover: var(--btcpay-secondary-accent);
|
||||
--btcpay-secondary-bg-active: var(--btcpay-secondary-accent);
|
||||
--btcpay-secondary-border: var(--btcpay-secondary);
|
||||
--btcpay-secondary-border-hover: var(--btcpay-secondary-bg-hover);
|
||||
--btcpay-secondary-border-active: var(--btcpay-secondary-bg-active);
|
||||
--btcpay-secondary-dim-bg: var(--btcpay-neutral-200);
|
||||
--btcpay-secondary-dim-bg-striped: var(--btcpay-neutral-300);
|
||||
--btcpay-secondary-dim-bg-hover: var(--btcpay-neutral-300);
|
||||
--btcpay-secondary-dim-bg-active: var(--btcpay-neutral-400);
|
||||
--btcpay-secondary-dim-border: var(--btcpay-secondary-dim-bg);
|
||||
--btcpay-secondary-dim-border-active: var(--btcpay-secondary-dim-bg-active);
|
||||
--btcpay-secondary-dim-text: var(--btcpay-neutral-800);
|
||||
--btcpay-secondary-dim-text-striped: var(--btcpay-secondary-dim-text);
|
||||
--btcpay-secondary-dim-text-hover: var(--btcpay-secondary-dim-text);
|
||||
--btcpay-secondary-dim-text-active: var(--btcpay-neutral-900);
|
||||
--btcpay-secondary-shadow: rgba(130, 138, 145, 0.33);
|
||||
--btcpay-success: #329f80;
|
||||
--btcpay-success-accent: #1e7e34;
|
||||
--btcpay-success-text: var(--btcpay-white);
|
||||
--btcpay-success-text-hover: var(--btcpay-white);
|
||||
--btcpay-success-text-active: var(--btcpay-white);
|
||||
--btcpay-success-bg-hover: var(--btcpay-success-accent);
|
||||
--btcpay-success-bg-active: var(--btcpay-success-accent);
|
||||
--btcpay-success-border: var(--btcpay-success);
|
||||
--btcpay-success-border-hover: var(--btcpay-success-bg-hover);
|
||||
--btcpay-success-border-active: var(--btcpay-success-bg-active);
|
||||
--btcpay-success-dim-bg: var(--btcpay-green-100);
|
||||
--btcpay-success-dim-bg-striped: var(--btcpay-green-200);
|
||||
--btcpay-success-dim-bg-hover: var(--btcpay-green-200);
|
||||
--btcpay-success-dim-bg-active: var(--btcpay-green-300);
|
||||
--btcpay-success-dim-border: var(--btcpay-success-dim-bg);
|
||||
--btcpay-success-dim-border-active: var(--btcpay-success-dim-bg-active);
|
||||
--btcpay-success-dim-text: var(--btcpay-green-800);
|
||||
--btcpay-success-dim-text-striped: var(--btcpay-success-dim-text);
|
||||
--btcpay-success-dim-text-hover: var(--btcpay-success-dim-text);
|
||||
--btcpay-success-dim-text-active: var(--btcpay-green-900);
|
||||
--btcpay-success-shadow: rgba(60, 153, 110, 0.33);
|
||||
--btcpay-info: #17a2b8;
|
||||
--btcpay-info-accent: #117a8b;
|
||||
--btcpay-info-text: var(--btcpay-white);
|
||||
--btcpay-info-text-hover: var(--btcpay-white);
|
||||
--btcpay-info-text-active: var(--btcpay-white);
|
||||
--btcpay-info-bg-hover: var(--btcpay-info-accent);
|
||||
--btcpay-info-bg-active: var(--btcpay-info-accent);
|
||||
--btcpay-info-border: var(--btcpay-info);
|
||||
--btcpay-info-border-hover: var(--btcpay-info-bg-hover);
|
||||
--btcpay-info-border-active: var(--btcpay-info-bg-active);
|
||||
--btcpay-info-dim-bg: var(--btcpay-blue-100);
|
||||
--btcpay-info-dim-bg-striped: var(--btcpay-blue-200);
|
||||
--btcpay-info-dim-bg-hover: var(--btcpay-blue-200);
|
||||
--btcpay-info-dim-bg-active: var(--btcpay-blue-300);
|
||||
--btcpay-info-dim-border: var(--btcpay-info-dim-bg);
|
||||
--btcpay-info-dim-border-active: var(--btcpay-info-dim-bg-active);
|
||||
--btcpay-info-dim-text: var(--btcpay-blue-800);
|
||||
--btcpay-info-dim-text-striped: var(--btcpay-info-dim-text);
|
||||
--btcpay-info-dim-text-hover: var(--btcpay-info-dim-text);
|
||||
--btcpay-info-dim-text-active: var(--btcpay-blue-900);
|
||||
--btcpay-info-shadow: rgba(11, 172, 204, 0.33);
|
||||
--btcpay-warning: #ffc107;
|
||||
--btcpay-warning-accent: #d39e00;
|
||||
--btcpay-warning-text: var(--btcpay-light-700);
|
||||
--btcpay-warning-text-hover: var(--btcpay-neutral-900);
|
||||
--btcpay-warning-text-active: var(--btcpay-neutral-900);
|
||||
--btcpay-warning-bg-hover: var(--btcpay-warning-accent);
|
||||
--btcpay-warning-bg-active: var(--btcpay-warning-accent);
|
||||
--btcpay-warning-border: var(--btcpay-warning);
|
||||
--btcpay-warning-border-hover: var(--btcpay-warning-bg-hover);
|
||||
--btcpay-warning-border-active: var(--btcpay-warning-bg-active);
|
||||
--btcpay-warning-dim-bg: var(--btcpay-yellow-100);
|
||||
--btcpay-warning-dim-bg-striped: var(--btcpay-yellow-200);
|
||||
--btcpay-warning-dim-bg-hover: var(--btcpay-yellow-200);
|
||||
--btcpay-warning-dim-bg-active: var(--btcpay-yellow-300);
|
||||
--btcpay-warning-dim-border: var(--btcpay-warning-dim-bg);
|
||||
--btcpay-warning-dim-border-active: var(--btcpay-warning-dim-bg-active);
|
||||
--btcpay-warning-dim-text: var(--btcpay-neutral-800);
|
||||
--btcpay-warning-dim-text-striped: var(--btcpay-warning-dim-text);
|
||||
--btcpay-warning-dim-text-hover: var(--btcpay-warning-dim-text);
|
||||
--btcpay-warning-dim-text-active: var(--btcpay-yellow-900);
|
||||
--btcpay-warning-shadow: rgba(217, 164, 6, 0.33);
|
||||
--btcpay-danger: #dc3545;
|
||||
--btcpay-danger-accent: #bd2130;
|
||||
--btcpay-danger-text: var(--btcpay-white);
|
||||
--btcpay-danger-text-hover: var(--btcpay-white);
|
||||
--btcpay-danger-text-active: var(--btcpay-white);
|
||||
--btcpay-danger-bg-hover: var(--btcpay-danger-accent);
|
||||
--btcpay-danger-bg-active: var(--btcpay-danger-accent);
|
||||
--btcpay-danger-border: var(--btcpay-danger);
|
||||
--btcpay-danger-border-hover: var(--btcpay-danger-bg-hover);
|
||||
--btcpay-danger-border-active: var(--btcpay-danger-bg-active);
|
||||
--btcpay-danger-dim-bg: var(--btcpay-red-100);
|
||||
--btcpay-danger-dim-bg-striped: var(--btcpay-red-200);
|
||||
--btcpay-danger-dim-bg-hover: var(--btcpay-red-200);
|
||||
--btcpay-danger-dim-bg-active: var(--btcpay-red-300);
|
||||
--btcpay-danger-dim-border: var(--btcpay-danger-dim-bg);
|
||||
--btcpay-danger-dim-border-active: var(--btcpay-danger-dim-bg-active);
|
||||
--btcpay-danger-dim-text: var(--btcpay-red-800);
|
||||
--btcpay-danger-dim-text-striped: var(--btcpay-danger-dim-text);
|
||||
--btcpay-danger-dim-text-hover: var(--btcpay-danger-dim-text);
|
||||
--btcpay-danger-dim-text-active: var(--btcpay-red-900);
|
||||
--btcpay-danger-shadow: rgba(225, 83, 97, 0.33);
|
||||
--btcpay-light: var(--btcpay-light-200);
|
||||
--btcpay-light-accent: var(--btcpay-light-100);
|
||||
--btcpay-light-text: var(--btcpay-light-800);
|
||||
--btcpay-light-text-hover: var(--btcpay-neutral-800);
|
||||
--btcpay-light-text-active: var(--btcpay-neutral-800);
|
||||
--btcpay-light-bg-hover: var(--btcpay-light-accent);
|
||||
--btcpay-light-bg-active: var(--btcpay-light-accent);
|
||||
--btcpay-light-border: var(--btcpay-light);
|
||||
--btcpay-light-border-hover: var(--btcpay-light-bg-hover);
|
||||
--btcpay-light-border-active: var(--btcpay-light-bg-active);
|
||||
--btcpay-light-dim-bg: var(--btcpay-white);
|
||||
--btcpay-light-dim-bg-striped: var(--btcpay-neutral-200);
|
||||
--btcpay-light-dim-bg-hover: var(--btcpay-neutral-200);
|
||||
--btcpay-light-dim-bg-active: var(--btcpay-neutral-300);
|
||||
--btcpay-light-dim-border: var(--btcpay-light-dim-bg);
|
||||
--btcpay-light-dim-border-active: var(--btcpay-light-dim-bg-active);
|
||||
--btcpay-light-dim-text: var(--btcpay-neutral-800);
|
||||
--btcpay-light-dim-text-striped: var(--btcpay-light-dim-text);
|
||||
--btcpay-light-dim-text-hover: var(--btcpay-light-dim-text);
|
||||
--btcpay-light-dim-text-active: var(--btcpay-neutral-900);
|
||||
--btcpay-light-shadow: rgba(211, 212, 213, 0.33);
|
||||
--btcpay-dark: var(--btcpay-light-800);
|
||||
--btcpay-dark-accent: var(--btcpay-light-900);
|
||||
--btcpay-dark-text: var(--btcpay-light-200);
|
||||
--btcpay-dark-text-hover: var(--btcpay-neutral-200);
|
||||
--btcpay-dark-text-active: var(--btcpay-neutral-200);
|
||||
--btcpay-dark-bg-hover: var(--btcpay-dark-accent);
|
||||
--btcpay-dark-bg-active: var(--btcpay-dark-accent);
|
||||
--btcpay-dark-border: var(--btcpay-dark);
|
||||
--btcpay-dark-border-hover: var(--btcpay-dark-bg-hover);
|
||||
--btcpay-dark-border-active: var(--btcpay-dark-bg-active);
|
||||
--btcpay-dark-dim-bg: var(--btcpay-neutral-900);
|
||||
--btcpay-dark-dim-bg-striped: var(--btcpay-neutral-900);
|
||||
--btcpay-dark-dim-bg-hover: var(--btcpay-neutral-800);
|
||||
--btcpay-dark-dim-bg-active: var(--btcpay-neutral-700);
|
||||
--btcpay-dark-dim-border: var(--btcpay-dark-dim-bg);
|
||||
--btcpay-dark-dim-border-active: var(--btcpay-dark-dim-bg-active);
|
||||
--btcpay-dark-dim-text: var(--btcpay-neutral-200);
|
||||
--btcpay-dark-dim-text-striped: var(--btcpay-dark-dim-text);
|
||||
--btcpay-dark-dim-text-hover: var(--btcpay-dark-dim-text);
|
||||
--btcpay-dark-dim-text-active: var(--btcpay-neutral-100);
|
||||
--btcpay-dark-shadow: rgba(66, 70, 73, 0.33);
|
||||
}
|
||||
|
||||
#mainNav.sticky-top {
|
||||
background: var(--btcpay-white);
|
||||
}
|
||||
@ -1,5 +1,3 @@
|
||||
@import 'default.css';
|
||||
|
||||
/* Dark theme overrides */
|
||||
:root {
|
||||
--btcpay-neutral-100: var(--btcpay-neutral-dark-100);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user