diff --git a/BTCPayServer/Controllers/ServerController.cs b/BTCPayServer/Controllers/ServerController.cs index 5be3f64f3..c16544a7f 100644 --- a/BTCPayServer/Controllers/ServerController.cs +++ b/BTCPayServer/Controllers/ServerController.cs @@ -991,9 +991,10 @@ namespace BTCPayServer.Controllers [Route("server/theme")] public async Task Theme() { - var data = (await _SettingsRepository.GetSettingAsync()) ?? new ThemeSettings(); + var data = await _SettingsRepository.GetSettingAsync() ?? new ThemeSettings(); return View(data); } + [Route("server/theme")] [HttpPost] public async Task Theme(ThemeSettings settings) diff --git a/BTCPayServer/Extensions/SettingsRepositoryExtensions.cs b/BTCPayServer/Extensions/SettingsRepositoryExtensions.cs index 6c0649d9a..0704b2205 100644 --- a/BTCPayServer/Extensions/SettingsRepositoryExtensions.cs +++ b/BTCPayServer/Extensions/SettingsRepositoryExtensions.cs @@ -8,16 +8,11 @@ namespace BTCPayServer { public static async Task GetPolicies(this ISettingsRepository settingsRepository) { - return (await settingsRepository.GetSettingAsync()) ?? new PoliciesSettings(); + return await settingsRepository.GetSettingAsync() ?? new PoliciesSettings(); } public static async Task GetTheme(this ISettingsRepository settingsRepository) { - var result = await settingsRepository.GetSettingAsync() ?? 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() ?? new ThemeSettings(); } } } diff --git a/BTCPayServer/HostedServices/ContentSecurityPolicyCssThemeManager.cs b/BTCPayServer/HostedServices/ContentSecurityPolicyCssThemeManager.cs index fb0dbdf46..32c33582f 100644 --- a/BTCPayServer/HostedServices/ContentSecurityPolicyCssThemeManager.cs +++ b/BTCPayServer/HostedServices/ContentSecurityPolicyCssThemeManager.cs @@ -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(); } diff --git a/BTCPayServer/Services/ThemesSettings.cs b/BTCPayServer/Services/ThemesSettings.cs index 0bde669b9..d87467823 100644 --- a/BTCPayServer/Services/ThemesSettings.cs +++ b/BTCPayServer/Services/ThemesSettings.cs @@ -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() { diff --git a/BTCPayServer/Views/AppsPublic/ViewCrowdfund.cshtml b/BTCPayServer/Views/AppsPublic/ViewCrowdfund.cshtml index bc7c62291..561851f94 100644 --- a/BTCPayServer/Views/AppsPublic/ViewCrowdfund.cshtml +++ b/BTCPayServer/Views/AppsPublic/ViewCrowdfund.cshtml @@ -15,8 +15,9 @@ - - + + + @if (Model.CustomCSSLink != null) { @@ -31,13 +32,10 @@ @*We need to make sure btcpay.js is not bundled, else it will not work if there is a RootPath*@ } - - @if (!string.IsNullOrEmpty(Model.EmbeddedCSS)) { @Safe.Raw($""); } - @if (Context.Request.Query.ContainsKey("simple")) diff --git a/BTCPayServer/Views/PaymentRequest/ViewPaymentRequest.cshtml b/BTCPayServer/Views/PaymentRequest/ViewPaymentRequest.cshtml index 11b97dbd8..675c8e41d 100644 --- a/BTCPayServer/Views/PaymentRequest/ViewPaymentRequest.cshtml +++ b/BTCPayServer/Views/PaymentRequest/ViewPaymentRequest.cshtml @@ -42,9 +42,9 @@ - - + + @if (Model.CustomCSSLink != null) { diff --git a/BTCPayServer/Views/PublicLightningNodeInfo/ShowLightningNodeInfo.cshtml b/BTCPayServer/Views/PublicLightningNodeInfo/ShowLightningNodeInfo.cshtml index 7a4b2ad2d..fa31e3bf6 100644 --- a/BTCPayServer/Views/PublicLightningNodeInfo/ShowLightningNodeInfo.cshtml +++ b/BTCPayServer/Views/PublicLightningNodeInfo/ShowLightningNodeInfo.cshtml @@ -17,9 +17,8 @@ - - - + + diff --git a/BTCPayServer/Views/PullPayment/ViewPullPayment.cshtml b/BTCPayServer/Views/PullPayment/ViewPullPayment.cshtml index 0502e934f..3fa45d1ae 100644 --- a/BTCPayServer/Views/PullPayment/ViewPullPayment.cshtml +++ b/BTCPayServer/Views/PullPayment/ViewPullPayment.cshtml @@ -31,9 +31,9 @@ - - + + @if (Model.CustomCSSLink != null) { diff --git a/BTCPayServer/Views/Server/Theme.cshtml b/BTCPayServer/Views/Server/Theme.cshtml index 80efc18de..71b1889ce 100644 --- a/BTCPayServer/Views/Server/Theme.cshtml +++ b/BTCPayServer/Views/Server/Theme.cshtml @@ -3,64 +3,38 @@ ViewData.SetActivePageAndTitle(ServerNavPages.Theme, "Theme"); } +@section PageFootContent { + +} +

@ViewData["PageTitle"]

Custom theme

-

Select one of our predefined themes. Optionally you can also provide a CSS file that customizes the chosen theme.

+

Use the default Light or Dark Themes, or provide a CSS theme file below.

@if (!ViewContext.ModelState.IsValid) {
} -
- - - +
+ + +
-
- - - - - - +
+
+ + + + + + +
- -

Bootstrap theme

-
- - - - - - -

- Build your own theme - or pick one already made -

-
-
- - - -

- Creative Start theme - is used on top of Bootstrap -

-
- +
- -@section PageFootContent { - -} diff --git a/BTCPayServer/Views/Shared/LayoutHead.cshtml b/BTCPayServer/Views/Shared/LayoutHead.cshtml index 1e21bfc84..e210c369a 100644 --- a/BTCPayServer/Views/Shared/LayoutHead.cshtml +++ b/BTCPayServer/Views/Shared/LayoutHead.cshtml @@ -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(); } @@ -15,14 +12,8 @@ } @ViewData["Title"] @* CSS *@ - - - -@if (!string.IsNullOrWhiteSpace(theme.CustomThemeCssUri)) -{ - -} + @* Non-JS *@ +} + diff --git a/BTCPayServer/Views/Shared/_Layout.cshtml b/BTCPayServer/Views/Shared/_Layout.cshtml index 5dbbcde74..c9d0a65ee 100644 --- a/BTCPayServer/Views/Shared/_Layout.cshtml +++ b/BTCPayServer/Views/Shared/_Layout.cshtml @@ -12,7 +12,9 @@ @inject RoleManager RoleManager @inject BTCPayServer.Services.BTCPayServerEnvironment Env @inject ISettingsRepository SettingsRepository - +@{ + var theme = await SettingsRepository.GetTheme(); +} @@ -70,6 +72,18 @@ Account + @if (!theme.CustomTheme) + { +
  • + +
    • + }
  • Logout
    • diff --git a/BTCPayServer/Views/Shared/_LayoutPos.cshtml b/BTCPayServer/Views/Shared/_LayoutPos.cshtml index c28b8ebd8..f4c58ccb7 100644 --- a/BTCPayServer/Views/Shared/_LayoutPos.cshtml +++ b/BTCPayServer/Views/Shared/_LayoutPos.cshtml @@ -19,12 +19,9 @@ - - - - - + + @if (Model.CustomCSSLink != null) { diff --git a/BTCPayServer/bundleconfig.json b/BTCPayServer/bundleconfig.json index 5cc8e1969..8ce0e7439 100644 --- a/BTCPayServer/bundleconfig.json +++ b/BTCPayServer/bundleconfig.json @@ -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", diff --git a/BTCPayServer/wwwroot/js/theme-switch.js b/BTCPayServer/wwwroot/js/theme-switch.js new file mode 100644 index 000000000..ce7da5270 --- /dev/null +++ b/BTCPayServer/wwwroot/js/theme-switch.js @@ -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); diff --git a/BTCPayServer/wwwroot/main/bootstrap/creative.css b/BTCPayServer/wwwroot/main/bootstrap/creative.css deleted file mode 100644 index 8d348721d..000000000 --- a/BTCPayServer/wwwroot/main/bootstrap/creative.css +++ /dev/null @@ -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; - } -} diff --git a/BTCPayServer/wwwroot/main/site.css b/BTCPayServer/wwwroot/main/site.css index 6ed0a32a4..eef679b27 100644 --- a/BTCPayServer/wwwroot/main/site.css +++ b/BTCPayServer/wwwroot/main/site.css @@ -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; + } +} diff --git a/BTCPayServer/wwwroot/main/site.js b/BTCPayServer/wwwroot/main/site.js index 7237b95e8..8e86f9fcb 100644 --- a/BTCPayServer/wwwroot/main/site.js +++ b/BTCPayServer/wwwroot/main/site.js @@ -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); }); } + + diff --git a/BTCPayServer/wwwroot/main/themes/casa.css b/BTCPayServer/wwwroot/main/themes/casa.css deleted file mode 100644 index d838b24cf..000000000 --- a/BTCPayServer/wwwroot/main/themes/casa.css +++ /dev/null @@ -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%); -} diff --git a/BTCPayServer/wwwroot/main/themes/classic.css b/BTCPayServer/wwwroot/main/themes/classic.css deleted file mode 100644 index 148ca97cc..000000000 --- a/BTCPayServer/wwwroot/main/themes/classic.css +++ /dev/null @@ -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); -} diff --git a/BTCPayServer/wwwroot/main/themes/default-dark.css b/BTCPayServer/wwwroot/main/themes/default-dark.css index 42d355849..afe6be286 100644 --- a/BTCPayServer/wwwroot/main/themes/default-dark.css +++ b/BTCPayServer/wwwroot/main/themes/default-dark.css @@ -1,5 +1,3 @@ -@import 'default.css'; - /* Dark theme overrides */ :root { --btcpay-neutral-100: var(--btcpay-neutral-dark-100);