Oh, and you can now also easily override some of these variables with the new “additional stylesheet” option in HABPanel’s additional settings.
You cannot provide your stylesheet inline because “reasons”, rather you have to write a file like below and put it in the static files directory of your openHAB server (conf/html
):
:root {
--body-bg: #333;
--primary-color: #888888;
--box-bg: rgba(255, 255, 255, 0.1);
--icon-color-filter: invert(90%) sepia(0%) saturate(0%);
--header-bg: none;
}
/* Credit: http://lea.verou.me/css3patterns/ */
.container {
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
}
Call it test.css
and set the option to /static/test.css
.
It will give you something like this