Merge branch 'ui_themes2' of https://github.com/luarvique/openwebrx into ui_themes2

htdocs/css/themes.css

@@ -18,71 +18,112 @@
 
     You should have received a copy of the GNU Affero General Public License
     along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
 */
 
-.openwebrx-panel-brown
-{
-    background-color: #472700;
+/* Theme: brown */
+body.theme-brown {
+    --theme-top-bar: #47270026;
+    --theme-color1: #270700;
+    --theme-color2: #472700;
+    --theme-gradient-color1: #270700;
+    --theme-gradient-color2: #3F1F00;
 }
 
-.openwebrx-button-brown
-{
-    background-color: #270700;
-    background: linear-gradient(to bottom, #270700 0%, #3F1F00 100%);
+/* Theme: red */
+body.theme-red {
+    --theme-top-bar: #47000026;
+    --theme-color1: #270000;
+    --theme-color2: #470000;
+    --theme-gradient-color1: #270000;
+    --theme-gradient-color2: #3F0000;
 }
 
-.openwebrx-panel-red
-{
-    background-color: #470000;
+/* Theme: green */
+body.theme-green {
+    --theme-top-bar: #00370026;
+    --theme-color1: #001700;
+    --theme-color2: #003700;
+    --theme-gradient-color1: #001700;
+    --theme-gradient-color2: #002F00;
 }
 
-.openwebrx-button-red
-{
-    background-color: #270000;
-    background: linear-gradient(to bottom, #270000 0%, #3F0000 100%);
+/* Theme: khaki */
+body.theme-khaki {
+    --theme-top-bar: #373F1726;
+    --theme-color1: #171F07;
+    --theme-color2: #373F17;
+    --theme-gradient-color1: #171F07;
+    --theme-gradient-color2: #272F17;
 }
 
-.openwebrx-panel-green
-{
-    background-color: #003700;
+/* Theme: blue */
+body.theme-blue {
+    --theme-top-bar: #00004726;
+    --theme-color1: #000027;
+    --theme-color2: #000047;
+    --theme-gradient-color1: #000027;
+    --theme-gradient-color2: #00003F;
 }
 
-.openwebrx-button-green
-{
-    background-color: #001700;
-    background: linear-gradient(to bottom, #001700 0%, #002F00 100%);
+/* Theme: navy */
+body.theme-navy {
+    --theme-top-bar: #00374726;
+    --theme-color1: #001727;
+    --theme-color2: #003747;
+    --theme-gradient-color1: #001727;
+    --theme-gradient-color2: #002F3F;
 }
 
-.openwebrx-panel-khaki
-{
-    background-color: #373F17;
+
+/* theme implementation follows */
+body.has-theme .webrx-top-bar {
+    background: var(--theme-top-bar);
 }
 
-.openwebrx-button-khaki
-{
-    background-color: #171F07;
-    background: linear-gradient(to bottom, #171F07 0%, #272F17 100%);
+body.has-theme #openwebrx-frequency-container {
+    background-image: none;
+    background: linear-gradient(to bottom, var(--theme-gradient-color1) 0%, var(--theme-gradient-color2) 100%);
 }
 
-.openwebrx-panel-blue
-{
-    background-color: #000047;
+body.has-theme .openwebrx-panel {
+    background-color: var(--theme-color2);
 }
 
-.openwebrx-button-blue
-{
-    background-color: #000027;
-    background: linear-gradient(to bottom, #000027 0%, #00003F 100%);
+body.has-theme .openwebrx-panel select,
+body.has-theme .openwebrx-panel input,
+body.has-theme .openwebrx-dialog select,
+body.has-theme .openwebrx-dialog input {
+    background-color: var(--theme-color1);
+    background: linear-gradient(to bottom, var(--theme-gradient-color1) 0%, var(--theme-gradient-color2) 100%);
 }
 
-.openwebrx-panel-navy
-{
-    background-color: #003747;
+body.has-theme .openwebrx-button:hover,
+body.has-theme .openwebrx-demodulator-button.highlighted,
+body.has-theme .openwebrx-button.highlighted {
+    background-color: var(--theme-color1);
+    filter: saturate(200%) brightness(150%);
 }
 
-.openwebrx-button-navy
-{
-    background-color: #001727;
-    background: linear-gradient(to bottom, #001727 0%, #002F3F 100%);
+body.has-theme .openwebrx-button {
+    background-color: var(--theme-color1);
+    background: linear-gradient(to bottom, var(--theme-gradient-color1) 0%, var(--theme-gradient-color2) 100%);
+}
+
+body.has-theme #openwebrx-digimode-canvas-container {
+    background-color: var(--theme-color1);
+}
+
+body.has-theme #openwebrx-digimode-content-container .gradient {
+    background: initial;
+}
+
+
+/* these need more work */
+body.has-theme input[type=range] {
+    /* --track-background: #001727; */
+}
+
+body.has-theme input[type=range]::-webkit-slider-runnable-track,
+body.has-theme input[type=range]:focus::-webkit-slider-runnable-track {
+    /* background: #001727; */
 }

htdocs/openwebrx.js

@@ -2033,19 +2033,14 @@ function nr_changed() {
 
 function set_ui_scheme(theme) {
     const themes = ['brown', 'red', 'green', 'khaki', 'blue', 'navy'];
-    var $panels = $('.openwebrx-panel');
-    var $buttons = $('.openwebrx-button');
-    var $lists = $('.openwebrx-panel select');
 
     themes.forEach(function(theme) {
-        $panels.removeClass('openwebrx-panel-' + theme);
-        $buttons.removeClass('openwebrx-button-' + theme);
-        $lists.removeClass('openwebrx-button-' + theme);
+        $('body').removeClass('theme-' + theme);
     });
+    $('body').removeClass('has-theme');
 
     if (theme && (theme != '') && (theme != 'default')) {
-        $panels.addClass('openwebrx-panel-' + theme);
-        $buttons.addClass('openwebrx-button-' + theme);
-        $lists.addClass('openwebrx-button-' + theme);
+        $('body').addClass('theme-' + theme);
+        $('body').addClass('has-theme');
     }
 }