more fixes on themes, add shadow to top-bar, add new theme 'night'

This commit is contained in:
Stanislav Lechev [0xAF] 2023-11-04 00:40:22 +02:00
parent 9669461841
commit d392f98c54
3 changed files with 20 additions and 12 deletions

View File

@ -22,7 +22,6 @@
/* Theme: brown */ /* Theme: brown */
body.theme-brown { body.theme-brown {
--theme-top-bar: #47270026;
--theme-color1: #270700; --theme-color1: #270700;
--theme-color2: #472700; --theme-color2: #472700;
--theme-gradient-color1: #270700; --theme-gradient-color1: #270700;
@ -31,7 +30,6 @@ body.theme-brown {
/* Theme: red */ /* Theme: red */
body.theme-red { body.theme-red {
--theme-top-bar: #47000026;
--theme-color1: #270000; --theme-color1: #270000;
--theme-color2: #470000; --theme-color2: #470000;
--theme-gradient-color1: #270000; --theme-gradient-color1: #270000;
@ -40,7 +38,6 @@ body.theme-red {
/* Theme: green */ /* Theme: green */
body.theme-green { body.theme-green {
--theme-top-bar: #00370026;
--theme-color1: #001700; --theme-color1: #001700;
--theme-color2: #003700; --theme-color2: #003700;
--theme-gradient-color1: #001700; --theme-gradient-color1: #001700;
@ -49,7 +46,6 @@ body.theme-green {
/* Theme: khaki */ /* Theme: khaki */
body.theme-khaki { body.theme-khaki {
--theme-top-bar: #373F1726;
--theme-color1: #171F07; --theme-color1: #171F07;
--theme-color2: #373F17; --theme-color2: #373F17;
--theme-gradient-color1: #171F07; --theme-gradient-color1: #171F07;
@ -58,7 +54,6 @@ body.theme-khaki {
/* Theme: blue */ /* Theme: blue */
body.theme-blue { body.theme-blue {
--theme-top-bar: #00004726;
--theme-color1: #000027; --theme-color1: #000027;
--theme-color2: #000047; --theme-color2: #000047;
--theme-gradient-color1: #000027; --theme-gradient-color1: #000027;
@ -67,22 +62,30 @@ body.theme-blue {
/* Theme: navy */ /* Theme: navy */
body.theme-navy { body.theme-navy {
--theme-top-bar: #00374726;
--theme-color1: #001727; --theme-color1: #001727;
--theme-color2: #003747; --theme-color2: #003747;
--theme-gradient-color1: #001727; --theme-gradient-color1: #001727;
--theme-gradient-color2: #002F3F; --theme-gradient-color2: #002F3F;
} }
/* Theme: night */
/* theme implementation follows */ body.theme-night {
body.has-theme .webrx-top-bar { --theme-color1: #6c2ceb;
background: var(--theme-top-bar); --theme-color2: #1a1f73;
--theme-gradient-color1: #6c2ceb;
--theme-gradient-color2: #3355e5;
} }
body.has-theme #openwebrx-frequency-container {
/* theme implementation follows */
body.has-theme .webrx-top-container,
body.has-theme #openwebrx-frequency-container,
body.has-theme #webrx-canvas-background {
background-color: var(--theme-color2); background-color: var(--theme-color2);
background-blend-mode: overlay; background-blend-mode: overlay;
/* the next box-shadow is to make waterfall look like it is under the top-bar */
/* remove the box-shadow, and/or remove this comment */
box-shadow: 0px 10px 24px -10px var(--theme-color1);
} }
body.has-theme .openwebrx-panel, body.has-theme .openwebrx-panel,
@ -106,6 +109,10 @@ body.has-theme .openwebrx-button.highlighted {
background-color: var(--theme-color1); background-color: var(--theme-color1);
filter: saturate(200%) brightness(150%); filter: saturate(200%) brightness(150%);
} }
body.has-theme .openwebrx-squelch-auto.openwebrx-button.highlighted {
/* disable filter to allow background animation on scanner */
filter: none;
}
body.has-theme .openwebrx-button { body.has-theme .openwebrx-button {
background-color: var(--theme-color1); background-color: var(--theme-color1);

View File

@ -2032,7 +2032,7 @@ function nr_changed() {
} }
function set_ui_scheme(theme) { function set_ui_scheme(theme) {
const themes = ['brown', 'red', 'green', 'khaki', 'blue', 'navy']; const themes = ['brown', 'red', 'green', 'khaki', 'blue', 'navy', 'night'];
themes.forEach(function(theme) { themes.forEach(function(theme) {
$('body').removeClass('theme-' + theme); $('body').removeClass('theme-' + theme);

View File

@ -195,6 +195,7 @@ class GeneralSettingsController(SettingsFormController):
Option("khaki", "Khaki"), Option("khaki", "Khaki"),
Option("blue", "Blue"), Option("blue", "Blue"),
Option("navy", "Navy"), Option("navy", "Navy"),
Option("night", "Night"),
], ],
), ),
NumberInput( NumberInput(