openwebrxplus/htdocs/css/themes.css

130 lines
3.7 KiB
CSS

/*
This file is part of OpenWebRX,
an open-source SDR receiver software with a web UI.
Copyright (c) 2013-2015 by Andras Retzler <randras@sdr.hu>
Copyright (c) 2019-2021 by Jakob Ketterl <dd5jfk@darc.de>
Copyright (c) 2022-2023 by Marat Fayzullin <luarvique@gmail.com>
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
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/>.
*/
/* Theme: brown */
body.theme-brown {
--theme-top-bar: #47270026;
--theme-color1: #270700;
--theme-color2: #472700;
--theme-gradient-color1: #270700;
--theme-gradient-color2: #3F1F00;
}
/* Theme: red */
body.theme-red {
--theme-top-bar: #47000026;
--theme-color1: #270000;
--theme-color2: #470000;
--theme-gradient-color1: #270000;
--theme-gradient-color2: #3F0000;
}
/* Theme: green */
body.theme-green {
--theme-top-bar: #00370026;
--theme-color1: #001700;
--theme-color2: #003700;
--theme-gradient-color1: #001700;
--theme-gradient-color2: #002F00;
}
/* Theme: khaki */
body.theme-khaki {
--theme-top-bar: #373F1726;
--theme-color1: #171F07;
--theme-color2: #373F17;
--theme-gradient-color1: #171F07;
--theme-gradient-color2: #272F17;
}
/* Theme: blue */
body.theme-blue {
--theme-top-bar: #00004726;
--theme-color1: #000027;
--theme-color2: #000047;
--theme-gradient-color1: #000027;
--theme-gradient-color2: #00003F;
}
/* Theme: navy */
body.theme-navy {
--theme-top-bar: #00374726;
--theme-color1: #001727;
--theme-color2: #003747;
--theme-gradient-color1: #001727;
--theme-gradient-color2: #002F3F;
}
/* theme implementation follows */
body.has-theme .webrx-top-bar {
background: var(--theme-top-bar);
}
body.has-theme #openwebrx-frequency-container {
background-image: none;
background: linear-gradient(to bottom, var(--theme-gradient-color1) 0%, var(--theme-gradient-color2) 100%);
}
body.has-theme .openwebrx-panel {
background-color: var(--theme-color2);
}
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%);
}
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%);
}
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; */
}