style.css

* {
scrollbar-width: auto;
scrollbar-color: #176f3a #ffffff;
}

*::-webkit-scrollbar {
width: 8px;
}

*::-webkit-scrollbar-track {
background: #0001;
}

*::-webkit-scrollbar-thumb {
background-color: #176f3a;
border-radius: 10px;
border: 0;
}
  
html,body {
height:100%;
margin:0;
font-family:sans-serif
}
body {
    display: flex;
    flex-direction: column;
    /* overflow: hidden; */
}
button,a{cursor:pointer}
aside {min-width:300px;width:300px;background:#eee;padding:5px;border-right: 1px solid #ddd;position: relative;/* max-height: 99%; *//* height: 100%; */overflow: hidden;/* display: flex; */flex-direction: column;}

main {
width:100%;
padding:10px;
background-image:linear-gradient(45deg,#0001 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#0001 75%),linear-gradient(45deg,transparent 75%,#0001 75%),linear-gradient(45deg,#0001 25%,transparent 25%);
background-size:20px 20px;
background-position:0 0,0 0,-50px -50px,50px 50px
}

#spider {
width:100%;
height:100%
}

input {
margin:5px
}

.flex {display:flex;height: calc(100% - 41px);}

aside .flex>* {
width:100%;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden
}

aside>div[label] {border:1px solid #0002;padding:5px 2px;margin:5px 0;border-radius:3px;background:#fff8;display: none;user-select:none;position: relative;overflow: auto;max-height: 450px;padding-top: 15px;}

aside .flex>label {line-height:31.5px;text-align:right;padding-right:5px;/* max-width:105px; */font-variant-caps:all-small-caps;font-size:14px}

aside>div[label]:before {content:attr(label);font-size:12px;font-variant-caps:all-small-caps;color:#888;text-align:center;display:block;border-bottom:1px solid #e5e5e5;position: sticky;top: -15px;/* position: fixed; */padding: 2px;margin-top: -15px;background: #f7f7f7;}

input#values,label[for=values] {
cursor:pointer
}
nav {
    height: 40px;
    display: flex;
    background: #176f3a;
    border-bottom: 1px solid #146032;
}
nav>a{
    line-height: 40px;
    padding: 0 10px;
    height: 40px;
    min-width: 90px;
    text-align: center;
    outline: 0;
    display: block;
    color: #ddd;
    text-decoration: none;
    font-variant: small-caps;
    transition: color .3s,box-shadow .3s,background .3s;
}

nav>a:hover,nav>a.active {
    color: #fff;
    box-shadow: 0 1px 0 #12bc55;
    background: #fff1;
}

nav>a.logo {
    background: url(favicon.ico) center no-repeat;
    background-size: 70% auto;
    filter: invert(1) contrast(3.5) saturate(0) brightness(1.2);
    padding: 0 20px;
    transition: filter .5s;
    margin: 0 15px 0 5px;
    min-width: 0;
    box-shadow: none!important;
}

nav>a.logo:hover{
    filter: invert(1) contrast(3.5) saturate(0) brightness(2);
}

.flex>aside input {
    outline: 0;
    border: 1px solid #ccc;
    padding: 3px 5px;
    border-radius: 4px;
    transition: border .4s;
}
.flex>aside input:not([type=color]):hover {
    border: 1px solid #5ca97a;
}

.flex>aside input[type=checkbox]{
    filter: hue-rotate(240deg) brightness(0.9) contrast(1.3);
}
.flex>aside input[type=checkbox],.flex>aside input[type=color] {
    cursor:pointer
}

.flex>aside input:focus {
    border: 1px solid #176f3a;
}

aside[v=diagram]>.diagram,aside[v=theme]>.theme,
aside[v=view]>.view,aside[v=file]>.file{
    display: block;
}

aside .table>div {
    display: flex;
    width: 100%;
}

aside .table>div input,aside #data.table>div a {
    width: 100%;
    border: 1px solid #0000;
    height: 100%;
    border-radius: 2px;
    margin: 1px 1px;
    background: #eee;
    transition: border .4s, background .4s;
}

aside .table>div input:first-child {
    text-align: right;
}

aside .table>div input:hover {
    background: #f3f3f3;
    border-color: #ccc0!important;
}

aside .table>div input:focus {
    border-color: #eee!important;
    background: #f9f9f9;
}

aside div>a.add {
    position: sticky;
    top: -13px;
    right: 2px;
    float: right;
    margin-top: -17px;
    padding: 0;
    text-decoration: none;
    line-height: 15px;
    width: 15px;
    font-size: 19px;
    text-align: center;
    color: #dedede;
    background: #22894b;
    border-radius: 3px;
    transition: color .4s,background .3s;
}

aside div>a.add:hover {
    background: #176f3a;
    color: #fff;
}

aside #data.table>div a {
    width: 20px;
    height: 20px;
    min-width: 20px;
    text-align: center;
    text-decoration: none;
    color: #e7c8c8;
    margin: auto 1px;
}

aside #data.table>div a:hover {
    background: #ccc;
    color: #8f3333;
}

aside .table>div input:first-child+input {
    width: 30%;
    text-align: center;
}

svg#spider text,svg#spider #values>g>*{
    cursor: pointer;
}

aside>.file button {
    margin: 4px 2px 0;
}

aside button {
    border: 0;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 4px;
    background: #eee;
    color: #333;
	outline: 0;
    transition: color .3s, background .3s;
}

aside button:hover {
    background: #ccc;
    color: #000;
}

body>nav+label {
    position: absolute;
    right: 10px;
    height: 40px;
    width: 40px;
    cursor: pointer;
    text-align: center;
    line-height: 40px;
    font-size: 22px;
    filter: saturate(.2);
    transition: filter .3s
}
html.dark body>nav+label {
    filter: saturate(1.4);
}
body>nav+label:hover {
    filter: saturate(.7)!important;
}
body>nav+label:before {
    content:"\1F4A1";
}
body>nav+label>input {display:none}


aside:after {
    content: "Radar Chart Designer - v0.4 - by owhs";
    font-size: 11px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: #0002;
    line-height: 20px;
    text-align: center;
    color: #000;
    opacity: .2;
    pointer-events: none;
	transition: opacity .5s
}

aside:hover:after {
    opacity: 0;
}

nav:hover~.flex>aside:after {
    opacity: .6;
}

.flex>aside .flex>input:not(:only-child) {
    max-width: 100px;
    min-width: 100px;
    width: 100px;
}

.flex>aside .flex>input[type=number] {
    max-width: 88px;
    min-width: 88px;
    width: 88px;
}

/* dark */

html.dark aside:after {
    color: #fff;
}
html.dark {
    background-color: #181a1b !important;
}
html.dark {
    color-scheme: dark !important;
}
html.dark, html.dark body, html.dark input, html.dark textarea, html.dark select, html.dark button, html.dark dialog {
    background-color: #181a1b;
}
html.dark, html.dark body, html.dark input, html.dark textarea, html.dark select, html.dark button {
    border-color: #726a5d;
    color: #e6e4e1;
}
html.dark a {
    color: #3290fc;
}
html.dark table {
    border-color: #535a5d;
}
html.dark ::placeholder {
    color: #b0a99f;
}
html.dark input:-webkit-autofill,
html.dark textarea:-webkit-autofill,
html.dark select:-webkit-autofill {
    background-color: #3f4300 !important;
    color: #e6e4e1 !important;
}
html.dark ::selection {
    background-color: #004ca8 !important;
    color: #e6e4e1 !important;
}
html.dark ::-moz-selection {
    background-color: #004ca8 !important;
    color: #e6e4e1 !important;
}
:root {
   --darkreader-neutral-background: #131516;
   --darkreader-neutral-text: #d6d2cd;
   --darkreader-selection-background: #004ca8;
   --darkreader-selection-text: #e6e4e1;
}
html.dark aside {
    background-image: initial;
    background-color: rgb(34, 36, 38);
    border-right-color: rgb(57, 61, 64);
}
html.dark main {
    background-image: linear-gradient(45deg,
    rgba(0, 0, 0, 0.07) 25%,
    rgba(0, 0, 0, 0) 25%),
    linear-gradient(45deg,
    rgba(0, 0, 0, 0) 75%,
    rgba(0, 0, 0, 0.07) 75%),
    linear-gradient(45deg,
    rgba(0, 0, 0, 0) 75%,
    rgba(0, 0, 0, 0.07) 75%),
    linear-gradient(45deg,
    rgba(0, 0, 0, 0.07) 25%,
    rgba(0, 0, 0, 0) 25%);
}
html.dark aside > div[label] {
    border-color: rgba(139, 129, 114, 0.13);
    background-image: initial;
    background-color: rgba(24, 26, 27, 0.53);
}
html.dark aside > div[label]::before {
    color: rgb(155, 147, 135);
    border-bottom-color: rgb(54, 59, 61);
    background-color: rgb(25 27 28);
}
html.dark nav {
    background-image: initial;
    background-color: rgb(18, 88, 46);
    border-bottom-color: rgb(38, 180, 94);
}
html.dark nav > a {
    color: rgb(209, 205, 199);
    text-decoration-color: initial;
}
html.dark nav > a:hover,
html.dark nav > a.active {
    color: rgb(230, 228, 225);
}
html.dark nav > a.logo {
    background-image: url("favicon.ico");
    background-color: initial;
}
html.dark .flex > aside input {
    outline-color: initial;
    border-color: rgb(61, 67, 69);
}
html.dark .flex > aside input:hover {
    border-color: rgb(60, 115, 81);
}
html.dark .flex > aside input:focus {
    border-color: rgb(37, 176, 92);
}
html.dark aside .table > div input,
html.dark aside #data.table > div a {
    border-color: rgba(139, 129, 114, 0);
    background-image: initial;
    background-color: rgb(34, 36, 38);
}
html.dark aside .table > div input:hover {
    background-image: initial;
    background-color: rgb(31, 33, 35);
    border-color: rgba(61, 67, 69, 0) !important;
}
html.dark aside .table > div input:focus {
    background-image: initial;
    background-color: rgb(27, 30, 31);
    border-color: rgb(52, 56, 58) !important;
}
html.dark aside #data.table > div a {
    text-decoration-color: initial;
    color: rgb(221, 179, 179);
}
html.dark aside #data.table > div a:hover {
    background-image: initial;
    background-color: rgb(52, 56, 58);
    color: rgb(204, 116, 116);
}