mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
allow setting arbitrary custom CSS properties for branding themes
Signed-off-by: Steffen Vogel <steffen.vogel@opal-rt.com>
This commit is contained in:
parent
533bb09e8f
commit
2a6259a477
5 changed files with 35 additions and 102 deletions
|
@ -172,36 +172,8 @@ class Branding {
|
|||
|
||||
const rootEl = document.querySelector(':root');
|
||||
|
||||
let background = this.getBackgroundColor();
|
||||
if (background) {
|
||||
rootEl.style.setProperty('--bg', background);
|
||||
} else {
|
||||
console.log(document.body.style.backgroundColor)
|
||||
}
|
||||
|
||||
let maincolor = this.getMainColor();
|
||||
if (maincolor) {
|
||||
rootEl.style.setProperty('--maincolor', maincolor);
|
||||
}
|
||||
|
||||
let highlight = this.getHighlightColor();
|
||||
if (highlight) {
|
||||
rootEl.style.setProperty('--highlights', highlight);
|
||||
}
|
||||
|
||||
let secondary = this.getSecondaryTextColor();
|
||||
if (secondary) {
|
||||
rootEl.style.setProperty('--secondarytext', secondary);
|
||||
}
|
||||
|
||||
let font = this.getFont();
|
||||
if (font) {
|
||||
rootEl.style.setProperty('--mainfont', font);
|
||||
}
|
||||
|
||||
let borderradius = this.getBorderRadius();
|
||||
if (borderradius) {
|
||||
rootEl.style.setProperty('--borderradius', borderradius);
|
||||
for (const [key, value] of Object.entries(this.values.style)) {
|
||||
rootEl.style.setProperty('--' + key, value);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -213,51 +185,11 @@ class Branding {
|
|||
} catch (err) {
|
||||
console.error("cannot find './" + this.brand + '/img/' + this.values.logo + "'");
|
||||
}
|
||||
|
||||
|
||||
return image;
|
||||
}
|
||||
|
||||
getBackgroundColor() {
|
||||
if (this.values.style && this.values.style.background) {
|
||||
return this.values.style.background;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getMainColor() {
|
||||
if (this.values.style && this.values.style.maincolor) {
|
||||
return this.values.style.maincolor;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getHighlightColor() {
|
||||
if (this.values.style && this.values.style.highlights) {
|
||||
return this.values.style.highlights;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getSecondaryTextColor() {
|
||||
if (this.values.style && this.values.style.secondarytext) {
|
||||
return this.values.style.secondarytext;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getFont() {
|
||||
if (this.values.style && this.values.style.font) {
|
||||
return this.values.style.secondarytext;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getBorderRadius() {
|
||||
if (this.values.style && this.values.style.borderradius) {
|
||||
return this.values.style.borderradius;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getTitle() {
|
||||
return this.values.title ? this.values.title : "No Title!";
|
||||
|
@ -270,4 +202,4 @@ class Branding {
|
|||
|
||||
var branding = new Branding(process.env.REACT_APP_BRAND);
|
||||
|
||||
export default branding;
|
||||
export default branding;
|
||||
|
|
|
@ -34,11 +34,11 @@ const slew_values = {
|
|||
style: {
|
||||
background: 'rgba(207,209,210, 1)',
|
||||
highlights: 'rgba(0,84,159, 0.75)',
|
||||
maincolor: 'rgba(80,80,80, 1)',
|
||||
secondarytext: 'rgba(80,80,80, 0.9)',
|
||||
font: "16px Roboto, sans-serif",
|
||||
borderradius: "10px"
|
||||
main: 'rgba(80,80,80, 1)',
|
||||
secondaryText: 'rgba(80,80,80, 0.9)',
|
||||
fontFamily: "Roboto, sans-serif",
|
||||
borderRadius: "10px"
|
||||
}
|
||||
}
|
||||
|
||||
export default slew_values;
|
||||
export default slew_values;
|
||||
|
|
|
@ -34,11 +34,11 @@
|
|||
style: {
|
||||
background: 'rgba(50,30,90, 0.6)',
|
||||
highlights: 'rgba(0,230,5, 0.75)',
|
||||
maincolor: 'rgba(255,0,0, 1)',
|
||||
secondarytext: 'rgba(0,0,100, 0.8)',
|
||||
font: "16px Comic Sans, sans-serif",
|
||||
borderradius: "60px"
|
||||
main: 'rgba(255,0,0, 1)',
|
||||
secondaryText: 'rgba(0,0,100, 0.8)',
|
||||
fontFamily: "Comic Sans, sans-serif",
|
||||
borderRadius: "60px"
|
||||
}
|
||||
}
|
||||
|
||||
export default template_values;
|
||||
|
||||
export default template_values;
|
||||
|
|
|
@ -29,9 +29,9 @@ const villasweb_values = {
|
|||
style: {
|
||||
background: '#6EA2B0',
|
||||
highlights: '#527984',
|
||||
maincolor: '#4d4d4d',
|
||||
secondarytext: '#818181',
|
||||
main: '#4d4d4d',
|
||||
secondaryText: '#818181',
|
||||
}
|
||||
}
|
||||
|
||||
export default villasweb_values;
|
||||
export default villasweb_values;
|
||||
|
|
|
@ -20,30 +20,31 @@
|
|||
*/
|
||||
|
||||
:root {
|
||||
--bg: #eceded;
|
||||
--main: #4d4d4d;
|
||||
--background: #eceded;
|
||||
--highlights: #527984;
|
||||
--secondarytext: #818181;
|
||||
--borderradius: 0px;
|
||||
--mainfont: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
--maincolor: #4d4d4d;
|
||||
--bgtext:#fff;
|
||||
--secondaryText: #818181;
|
||||
--borderRadius: 0px;
|
||||
--fontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
--backgroundText:#fff;
|
||||
}
|
||||
|
||||
* {
|
||||
color: var(--maincolor);
|
||||
color: var(--main);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg) !important;
|
||||
background-color: var(--background) !important;
|
||||
font-family: var(--fontFamily) !important;
|
||||
}
|
||||
|
||||
.app {
|
||||
height: 100vh;
|
||||
color: var(--maincolor);
|
||||
border-radius: var(--borderradius);
|
||||
color: var(--main);
|
||||
border-radius: var(--borderRadius);
|
||||
|
||||
|
||||
font: var(--mainfont);
|
||||
font: 16px;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
|
@ -91,13 +92,13 @@ a:active {
|
|||
|
||||
margin-top: 2em;
|
||||
padding-bottom: 2em;
|
||||
color: var(--bgtext);
|
||||
color: var(--backgroundText);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-footer a {
|
||||
text-decoration: underline;
|
||||
color: var(--bgtext);
|
||||
color: var(--backgroundText);
|
||||
}
|
||||
|
||||
.app-body-spacing {
|
||||
|
@ -110,7 +111,7 @@ a:active {
|
|||
|
||||
.app-content {
|
||||
padding: 15px 20px 20px 20px;
|
||||
border-radius: var(--borderradius);
|
||||
border-radius: var(--borderRadius);
|
||||
|
||||
|
||||
width: auto;
|
||||
|
@ -145,7 +146,7 @@ a:active {
|
|||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: 160px;
|
||||
border-radius: var(--borderradius);
|
||||
border-radius: var(--borderRadius);
|
||||
|
||||
|
||||
background-color: #fff;
|
||||
|
@ -159,7 +160,7 @@ a:active {
|
|||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
width: 160px;
|
||||
border-radius: var(--borderradius);
|
||||
border-radius: var(--borderRadius);
|
||||
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
|
||||
|
|
Loading…
Add table
Reference in a new issue