Implemented basic functions
This commit is contained in:
parent
89f483171a
commit
965e2daeb3
22 changed files with 711 additions and 58 deletions
115
static/css/datapoints.css
Normal file
115
static/css/datapoints.css
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
[onClick] {
|
||||
cursor: pointer;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
background: #282828;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 300;
|
||||
color: #d5c4a1;
|
||||
font-size: 11pt;
|
||||
}
|
||||
h1,
|
||||
h2 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
color: #fb4934;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
a {
|
||||
color: #3f9da1;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
b {
|
||||
font-weight: 500;
|
||||
}
|
||||
.roboto-light {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
.roboto-medium {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
input[type="text"],
|
||||
textarea,
|
||||
select {
|
||||
font-family: "Roboto Mono", monospace;
|
||||
background: #202020;
|
||||
color: #d5c4a1;
|
||||
padding: 4px 8px;
|
||||
border: none;
|
||||
font-size: 1em;
|
||||
}
|
||||
button {
|
||||
background: #202020;
|
||||
color: #d5c4a1;
|
||||
padding: 8px 32px;
|
||||
border: 1px solid #3a3a3a;
|
||||
font-size: 1em;
|
||||
height: 3em;
|
||||
}
|
||||
button:focus {
|
||||
background: #333;
|
||||
}
|
||||
#datapoints {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, min-content);
|
||||
grid-gap: 8px 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
#datapoints .header {
|
||||
font-weight: 500;
|
||||
}
|
||||
#datapoints div {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.widgets {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
gap: 8px 16px;
|
||||
}
|
||||
.widgets .label {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.widgets input[type="text"],
|
||||
.widgets textarea {
|
||||
width: 100%;
|
||||
}
|
||||
.widgets .datapoints {
|
||||
font: "Roboto Mono", monospace;
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
gap: 6px 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.widgets .action {
|
||||
display: grid;
|
||||
grid-template-columns: min-content min-content;
|
||||
grid-gap: 8px;
|
||||
}
|
||||
|
|
@ -20,6 +20,7 @@ body {
|
|||
body {
|
||||
background: #282828;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 300;
|
||||
color: #d5c4a1;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
|
@ -35,6 +36,16 @@ h1 {
|
|||
h2 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
a {
|
||||
color: #3f9da1;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
b {
|
||||
font-weight: 500;
|
||||
}
|
||||
.roboto-light {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 300;
|
||||
|
|
@ -46,7 +57,8 @@ h2 {
|
|||
font-style: normal;
|
||||
}
|
||||
input[type="text"],
|
||||
textarea {
|
||||
textarea,
|
||||
select {
|
||||
font-family: "Roboto Mono", monospace;
|
||||
background: #202020;
|
||||
color: #d5c4a1;
|
||||
|
|
@ -62,6 +74,9 @@ button {
|
|||
font-size: 1em;
|
||||
height: 3em;
|
||||
}
|
||||
button:focus {
|
||||
background: #333;
|
||||
}
|
||||
#layout {
|
||||
display: grid;
|
||||
grid-template-areas: "menu content";
|
||||
|
|
@ -94,6 +109,7 @@ button {
|
|||
margin-bottom: 32px;
|
||||
}
|
||||
#page .page-label div {
|
||||
font-weight: 500;
|
||||
font-size: 1.5em;
|
||||
color: #fb4934;
|
||||
}
|
||||
|
|
@ -113,7 +129,7 @@ button {
|
|||
#areas .area > .name {
|
||||
background: #fb4934;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-weight: 500;
|
||||
padding: 4px 16px;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
|
|
@ -122,7 +138,7 @@ button {
|
|||
margin: 8px 16px;
|
||||
}
|
||||
#areas .area .section > .name {
|
||||
font-weight: bold;
|
||||
font-weight: 500;
|
||||
}
|
||||
#areas .area .section .triggers a {
|
||||
color: inherit;
|
||||
|
|
@ -139,5 +155,5 @@ button {
|
|||
height: 16px;
|
||||
}
|
||||
#areas .area .section .triggers .trigger .label {
|
||||
color: #f7edd7;
|
||||
color: #3f9da1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ body {
|
|||
body {
|
||||
background: #282828;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 300;
|
||||
color: #d5c4a1;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
|
@ -35,6 +36,16 @@ h1 {
|
|||
h2 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
a {
|
||||
color: #3f9da1;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
b {
|
||||
font-weight: 500;
|
||||
}
|
||||
.roboto-light {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 300;
|
||||
|
|
@ -46,7 +57,8 @@ h2 {
|
|||
font-style: normal;
|
||||
}
|
||||
input[type="text"],
|
||||
textarea {
|
||||
textarea,
|
||||
select {
|
||||
font-family: "Roboto Mono", monospace;
|
||||
background: #202020;
|
||||
color: #d5c4a1;
|
||||
|
|
@ -62,3 +74,6 @@ button {
|
|||
font-size: 1em;
|
||||
height: 3em;
|
||||
}
|
||||
button:focus {
|
||||
background: #333;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ body {
|
|||
body {
|
||||
background: #282828;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 300;
|
||||
color: #d5c4a1;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
|
@ -35,6 +36,16 @@ h1 {
|
|||
h2 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
a {
|
||||
color: #3f9da1;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
b {
|
||||
font-weight: 500;
|
||||
}
|
||||
.roboto-light {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 300;
|
||||
|
|
@ -46,7 +57,8 @@ h2 {
|
|||
font-style: normal;
|
||||
}
|
||||
input[type="text"],
|
||||
textarea {
|
||||
textarea,
|
||||
select {
|
||||
font-family: "Roboto Mono", monospace;
|
||||
background: #202020;
|
||||
color: #d5c4a1;
|
||||
|
|
@ -62,6 +74,9 @@ button {
|
|||
font-size: 1em;
|
||||
height: 3em;
|
||||
}
|
||||
button:focus {
|
||||
background: #333;
|
||||
}
|
||||
.widgets {
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue