|
|
|
|
@ -1,22 +1,24 @@
|
|
|
|
|
@ci-highlight: Highlight;
|
|
|
|
|
@error-color: #e00;
|
|
|
|
|
@warn-color: #eebc00;
|
|
|
|
|
@accent-color: #efefef;
|
|
|
|
|
@body-background-color: #fcfcfc;
|
|
|
|
|
@background-color: #eee;
|
|
|
|
|
@ci-color: #aaa;
|
|
|
|
|
@border-stack: 1px solid @ci-color;
|
|
|
|
|
@text-padding-v: .2rem;
|
|
|
|
|
@text-padding-h: 1rem;
|
|
|
|
|
@accent-border-width: .3rem;
|
|
|
|
|
@accent-border: @accent-border-width solid @ci-color;
|
|
|
|
|
@element-margin: .6rem;
|
|
|
|
|
:root {
|
|
|
|
|
--cli-highlight: Highlight;
|
|
|
|
|
--error-color: #e00;
|
|
|
|
|
--warn-color: #eebc00;
|
|
|
|
|
--accent-color: #efefef;
|
|
|
|
|
--body-background-color: #fcfcfc;
|
|
|
|
|
--background-color: #eee;
|
|
|
|
|
--ci-color: #aaa;
|
|
|
|
|
--border-stack: 1px solid @ci-color;
|
|
|
|
|
--text-padding-v: .2rem;
|
|
|
|
|
--text-padding-h: 1rem;
|
|
|
|
|
--accent-border-width: .3rem;
|
|
|
|
|
--accent-border: var(--accent-border-width) solid var(--ci-color);
|
|
|
|
|
--element-margin: .6rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
background-color: @body-background-color;
|
|
|
|
|
background-color: var(--body-background-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a:link,
|
|
|
|
|
@ -40,11 +42,11 @@ img, svg {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.thin-border {
|
|
|
|
|
border: @border-stack;
|
|
|
|
|
border: var(--border-stack);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.__icon {
|
|
|
|
|
color: @ci-highlight;
|
|
|
|
|
color: var(--ci-highlight);
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -65,11 +67,11 @@ img, svg {
|
|
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
|
font-size: 1.3rem;
|
|
|
|
|
border-bottom: 1px solid @ci-highlight;
|
|
|
|
|
border-bottom: 1px solid var(--ci-highlight);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attr-type-markdown {
|
|
|
|
|
border: 1px solid @ci-color;
|
|
|
|
|
border: 1px solid var(--ci-color);
|
|
|
|
|
border-radius: .5rem;
|
|
|
|
|
padding: 1rem;
|
|
|
|
|
|
|
|
|
|
@ -98,7 +100,7 @@ img, svg {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
header, footer, main, nav, aside {
|
|
|
|
|
padding: @text-padding-v @text-padding-h;
|
|
|
|
|
padding: var(--text-padding-v) var(--text-padding-h);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
header {
|
|
|
|
|
@ -106,14 +108,13 @@ img, svg {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 40% 60%;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin: 0 @element-margin;
|
|
|
|
|
//noinspection CssUnknownTarget
|
|
|
|
|
margin: 0 var(--element-margin);
|
|
|
|
|
background-image: url("/img/logo-full-flipped.svg");
|
|
|
|
|
background-size: contain;
|
|
|
|
|
background-position: right;
|
|
|
|
|
background-origin: content-box;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
border-bottom: 1px solid @ci-color;
|
|
|
|
|
border-bottom: 1px solid var(--ci-color);
|
|
|
|
|
|
|
|
|
|
.app-title {
|
|
|
|
|
grid-column: 1;
|
|
|
|
|
@ -121,7 +122,7 @@ img, svg {
|
|
|
|
|
|
|
|
|
|
.app-title__hello {
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
margin-left: @text-padding-h;
|
|
|
|
|
margin-left: var(--text-padding-h);
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
font-style: italic;
|
|
|
|
|
}
|
|
|
|
|
@ -133,21 +134,21 @@ img, svg {
|
|
|
|
|
|
|
|
|
|
.header-content__link {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-right: @accent-border-width;
|
|
|
|
|
margin-right: var(--accent-border-width);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
nav {
|
|
|
|
|
grid-area: nav;
|
|
|
|
|
padding-right: @element-margin;
|
|
|
|
|
border-right: 1px solid @ci-color;
|
|
|
|
|
margin-top: @element-margin;
|
|
|
|
|
margin-left: @element-margin;
|
|
|
|
|
padding-right: var(--element-margin);
|
|
|
|
|
border-right: 1px solid var(--ci-color);
|
|
|
|
|
margin-top: var(--element-margin);
|
|
|
|
|
margin-left: var(--element-margin);
|
|
|
|
|
|
|
|
|
|
h2::before {
|
|
|
|
|
content: "▤ ";
|
|
|
|
|
color: @ci-highlight;
|
|
|
|
|
color: var(--ci-highlight);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
|
@ -211,12 +212,12 @@ form, .sub-form {
|
|
|
|
|
grid-column: 1 e("/") 3;
|
|
|
|
|
grid-template-columns: 30% 70%;
|
|
|
|
|
grid-auto-flow: row;
|
|
|
|
|
margin-bottom: @text-padding-h;
|
|
|
|
|
margin-bottom: var(--text-padding-h);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
label, input, select, textarea, .flash {
|
|
|
|
|
margin-bottom: .7rem;
|
|
|
|
|
padding: @text-padding-v @text-padding-h / 2;
|
|
|
|
|
padding: var(--text-padding-v) calc(var(--text-padding-h) / 2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
textarea {
|
|
|
|
|
@ -243,7 +244,7 @@ form, .sub-form {
|
|
|
|
|
.flash {
|
|
|
|
|
grid-column: 1 e("/") 3;
|
|
|
|
|
.thin-border;
|
|
|
|
|
border-left-width: @accent-border-width;
|
|
|
|
|
border-left-width: var(--accent-border-width);
|
|
|
|
|
padding: .7rem;
|
|
|
|
|
|
|
|
|
|
.flash__field {
|
|
|
|
|
@ -257,10 +258,10 @@ form, .sub-form {
|
|
|
|
|
|
|
|
|
|
.flash--error {
|
|
|
|
|
.flash;
|
|
|
|
|
border-color: @error-color;
|
|
|
|
|
border-color: var(--error-color);
|
|
|
|
|
|
|
|
|
|
.flash__heading--error {
|
|
|
|
|
background-color: @error-color;
|
|
|
|
|
background-color: var(--error-color);
|
|
|
|
|
color: white;
|
|
|
|
|
margin: -.7rem -.7rem 0;
|
|
|
|
|
}
|
|
|
|
|
@ -268,10 +269,10 @@ form, .sub-form {
|
|
|
|
|
|
|
|
|
|
.flash--warn {
|
|
|
|
|
.flash;
|
|
|
|
|
border-color: @warn-color;
|
|
|
|
|
border-color: var(--warn-color);
|
|
|
|
|
|
|
|
|
|
.flash__heading--error {
|
|
|
|
|
background-color: @warn-color;
|
|
|
|
|
background-color: var(--warn-color);
|
|
|
|
|
color: white;
|
|
|
|
|
margin: -.7rem -.7rem 0;
|
|
|
|
|
}
|
|
|
|
|
@ -303,11 +304,14 @@ table {
|
|
|
|
|
thead {
|
|
|
|
|
position: sticky;
|
|
|
|
|
top: 0;
|
|
|
|
|
background-color: @body-background-color;
|
|
|
|
|
background-color: var(--body-background-color);
|
|
|
|
|
|
|
|
|
|
th {
|
|
|
|
|
padding: @text-padding-v @text-padding-h
|
|
|
|
|
@text-padding-v + .3rem @text-padding-v;
|
|
|
|
|
padding:
|
|
|
|
|
var(--text-padding-v)
|
|
|
|
|
var(--text-padding-h)
|
|
|
|
|
calc(var(--text-padding-v) + .3rem)
|
|
|
|
|
var(--text-padding-v);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
th[data-sort=desc]::after {
|
|
|
|
|
@ -323,8 +327,10 @@ table {
|
|
|
|
|
|
|
|
|
|
tbody {
|
|
|
|
|
td {
|
|
|
|
|
border-bottom: @border-stack;
|
|
|
|
|
padding: @text-padding-v * 2 @text-padding-h / 2h;
|
|
|
|
|
border-bottom: var(--border-stack);
|
|
|
|
|
padding:
|
|
|
|
|
calc(var(--text-padding-v) * 2)
|
|
|
|
|
calc(var(--text-padding-h) / 2h);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type=submit] {
|
|
|
|
|
@ -332,7 +338,7 @@ table {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
tr:hover {
|
|
|
|
|
background-color: @accent-color;
|
|
|
|
|
background-color: var(--accent-color);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -362,7 +368,7 @@ table {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button, input {
|
|
|
|
|
margin-right: @element-margin;
|
|
|
|
|
margin-right: var(--element-margin);
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -379,14 +385,14 @@ table {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.single-tag {
|
|
|
|
|
border: 1px solid @ci-color;
|
|
|
|
|
border-left: .5rem solid @ci-highlight;
|
|
|
|
|
border: 1px solid var(--ci-color);
|
|
|
|
|
border-left: .5rem solid var(--ci-highlight);
|
|
|
|
|
border-radius: .5rem;
|
|
|
|
|
padding: .1rem .4rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.vis-canvas {
|
|
|
|
|
border: 1px solid @ci-highlight;
|
|
|
|
|
border: 1px solid var(--ci-highlight);
|
|
|
|
|
height: 45rem;
|
|
|
|
|
}
|
|
|
|
|
|