magnus/smon
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 6 Packages Wiki Activity

Theming support

Browse source
This commit is contained in:
Magnus Åhall 2024-06-25 08:59:07 +02:00
parent e86c96d78f
commit 58e0b2f081
99 changed files with 1839 additions and 1094 deletions
Download patch file Download diff file Expand all files Collapse all files

6
static/less/Makefile
View file

@ -1,9 +1,9 @@
less = $(wildcard *.less)
_css = $(less:.less=.css)
css = $(addprefix ../css/, $(_css) )
css = $(addprefix ../css/${THEME}/, $(_css) )
../css/%.css: %.less theme.less
lessc $< ../css/$@
../css/${THEME}/%.css: %.less theme-${THEME}.less
lessc --global-var="THEME=${THEME}" $< $@
all: $(css)

2
static/less/configuration.less
View file

@ -1,4 +1,4 @@
@import 'theme.less';
@import 'theme-@{THEME}.less';
#areas {
.area {

2
static/less/datapoints.less
View file

@ -1,4 +1,4 @@
@import "theme.less";
@import "theme-@{THEME}.less";
#datapoints {
display: grid;

53
static/less/default_light.less Normal file
View file

@ -0,0 +1,53 @@
@import "theme-@{THEME}.less";
.widgets {
.action {
#run-result {
background-color: #fff !important;
border: 1px solid #ccc;
}
}
}
#menu .entry .label {
color: @text3 !important;
}
#menu .entry.selected .label {
color: #fff !important;
}
input[type="text"],
textarea,
select {
border: 1px solid #ccc;
}
.description {
border: 1px solid #ccc;
}
button {
background: @bg3;
color: #fff;
border: 1px solid lighten(@bg2, 20%);
&:focus {
background: @bg3;
}
}
#areas {
.area {
background: #fff !important;
border: 1px solid @bg3;
.name {
border-top-left-radius: unset;
border-top-right-radius: unset;
}
.section .name {
font-weight: normal;
}
}
}

1
static/less/gruvbox.less Normal file
View file

@ -0,0 +1 @@
@import "theme-@{THEME}.less";

2
static/less/index.less
View file

@ -1,4 +1,4 @@
@import "theme.less";
@import "theme-@{THEME}.less";
.graph {
margin-top: 192px;

17
static/less/loop_make.sh
View file

@ -6,10 +6,15 @@ do
inotifywait -q -e MODIFY *less
#sleep 0.5
clear
if make -j12; then
echo -e "\n\e[32;1mOK!\e[0m"
#curl -s http://notes.lan:1371/_ws/css_update
sleep 1
clear
fi
for THEME in $(ls theme-*.less | sed -e 's/^theme-\(.*\)\.less$/\1/'); do
if make -j12; then
:
#curl -s http://notes.lan:1371/_ws/css_update
fi
done
echo -e "\n\e[32;1mOK!\e[0m"
sleep 1
clear
done

131
static/less/main.less
View file

@ -1,9 +1,27 @@
@import "theme.less";
@import "theme-@{THEME}.less";
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
*:focus {
outline: none;
}
[onClick] {
cursor: pointer;
}
#layout {
display: grid;
grid-template-areas: "menu content";
grid-template-columns: 96px 1fr;
grid-template-columns: 104px 1fr;
height: 100vh;
}
@ -30,7 +48,7 @@
16px
;
padding: 16px;
color: #777;
color: @text3;
text-decoration: none;
img {
@ -122,3 +140,110 @@ dialog {
color: @text1;
box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.25);
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: @bg1;
font-family: sans-serif;
font-weight: 300;
color: @text1;
font-size: 11pt;
}
h1,
h2 {
margin-bottom: 4px;
&:first-child {
margin-top: 0px;
}
}
h1 {
font-size: 1.5em;
color: @color1;
font-weight: @bold;
}
h2 {
font-size: 1.25em;
color: @color3;
font-weight: @bold;
}
a {
color: @color4;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
b {
font-weight: @bold;
}
input[type="text"],
textarea,
select {
font-family: monospace;
background: @bg1;
color: @text1;
padding: 4px 8px;
border: 1px solid #484848;
font-size: 1em;
line-height: 1.5em; // fix for chrome hiding underscores
}
button {
background: @bg2;
color: @text1;
padding: 8px 32px;
border: 1px solid lighten(@bg2, 20%);
font-size: 1em;
height: 3em;
&:focus {
background: @bg3;
}
}
.line {
grid-column: 1 / -1;
border-bottom: 1px solid .lighterOrDarker(@bg1, 15%)[@result];
}
span.date {
color: @text1;
font-weight: @bold;
}
span.time {
font-size: 0.9em;
color: @text1;
}
span.seconds {
display: none;
}
label {
user-select: none;
}
.description {
border: 1px solid .lighterOrDarker(@bg3, 25%)[@result];
color: @color4;
background: @bg1;
padding: 4px 8px;
margin-top: 8px;
white-space: nowrap;
width: min-content;
border-radius: 8px;
}

2
static/less/problems.less
View file

@ -1,4 +1,4 @@
@import "theme.less";
@import "theme-@{THEME}.less";
#problems-list, #acknowledged-list {
display: grid;

20
static/less/theme-default_light.less Normal file
View file

@ -0,0 +1,20 @@
@bg1: #fff;
@bg2: #1b4e78;
@bg3: #2979b8;
@text1: #333;
@text2: #000;
@text3: #7bb8eb;
@error: #fb4934;
@color1: #1b4e78;
@color2: #fabd2f;
@color3: #2c6e97;
@color4: #2c6e97;
@color5: #fe8019;
@bold: 800;
.lighterOrDarker(@color, @amount) {
@result: darken(@color, @amount);
}

20
static/less/theme-gruvbox.less Normal file
View file

@ -0,0 +1,20 @@
@bg1: #282828;
@bg2: #202020;
@bg3: #333;
@text1: #d5c4a1;
@text2: #f7edd7;
@text3: #777;
@error: #fb4934;
@color1: #fb4934;
@color2: #fabd2f;
@color3: #b8bb26;
@color4: #3f9da1;
@color5: #fe8019;
@bold: 800;
.lighterOrDarker(@color, @amount) {
@result: lighten(@color, @amount);
}

143
static/less/theme.less
View file

@ -1,143 +0,0 @@
@bg1: #282828;
@bg2: #202020;
@bg3: #333;
@text1: #d5c4a1;
@text2: #f7edd7;
@error: #fb4934;
@color1: #fb4934;
@color2: #fabd2f;
@color3: #b8bb26;
@color4: #3f9da1;
@color5: #fe8019;
@bold: 800;
.lighterOrDarker(@color, @amount) {
@result: lighten(@color, @amount);
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
*:focus {
outline: none;
}
[onClick] {
cursor: pointer;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: @bg1;
font-family: sans-serif;
font-weight: 300;
color: @text1;
font-size: 11pt;
}
h1,
h2 {
margin-bottom: 4px;
&:first-child {
margin-top: 0px;
}
}
h1 {
font-size: 1.5em;
color: @color1;
font-weight: @bold;
}
h2 {
font-size: 1.25em;
color: @color3;
font-weight: @bold;
}
a {
color: @color4;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
b {
font-weight: @bold;
}
input[type="text"],
textarea,
select {
font-family: monospace;
background: @bg2;
color: @text1;
padding: 4px 8px;
border: none;
font-size: 1em;
line-height: 1.5em; // fix for chrome hiding underscores
}
button {
background: @bg2;
color: @text1;
padding: 8px 32px;
border: 1px solid lighten(@bg2, 20%);
font-size: 1em;
height: 3em;
&:focus {
background: @bg3;
}
}
.line {
grid-column: 1 / -1;
border-bottom: 1px solid .lighterOrDarker(@bg1, 15%)[@result];
}
span.date {
color: @text1;
font-weight: @bold;
}
span.time {
font-size: 0.9em;
color: @text1;
}
span.seconds {
display: none;
}
label {
user-select: none;
}
.description {
border: 1px solid .lighterOrDarker(@bg3, 25%)[@result];
color: @color4;
background: @bg2;
padding: 4px 8px;
margin-top: 8px;
white-space: nowrap;
width: min-content;
border-radius: 8px;
}

2
static/less/trigger_edit.less
View file

@ -1,4 +1,4 @@
@import "theme.less";
@import "theme-@{THEME}.less";
#dlg-datapoints {
}

2
static/less/triggers.less
View file

@ -1,4 +1,4 @@
@import 'theme.less';
@import 'theme-@{THEME}.less';
#areas {