a46ef2c8d6
Setting `bind:value` or `bind:valueAsNumber` for a number input seems to restrict what you can type in it. We work around this by switching to text inputs for now. We should probably switch back to number inputs if we can, though, because they let us take advantage of the browser's parsing and validation.
131 lines
1.6 KiB
CSS
131 lines
1.6 KiB
CSS
body {
|
|
margin: 0px;
|
|
color: #fcfcfc;
|
|
background-color: #222;
|
|
}
|
|
|
|
/* sidebar */
|
|
|
|
#sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
float: left;
|
|
width: 450px;
|
|
height: 100vh;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
border-width: 0px 1px 0px 0px;
|
|
border-style: solid;
|
|
border-color: #555;
|
|
}
|
|
|
|
/* add-remove */
|
|
|
|
#add-remove {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin: 8px;
|
|
}
|
|
|
|
#add-remove > button {
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: large;
|
|
}
|
|
|
|
/* outline */
|
|
|
|
#outline {
|
|
flex-grow: 1;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
li {
|
|
user-select: none;
|
|
}
|
|
|
|
summary {
|
|
display: flex;
|
|
}
|
|
|
|
summary.selected {
|
|
color: #fff;
|
|
background-color: #444;
|
|
}
|
|
|
|
summary > div, .cst {
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.elt, .cst {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.elt-switch {
|
|
width: 18px;
|
|
padding-left: 2px;
|
|
text-align: center;
|
|
}
|
|
|
|
details:has(li) .elt-switch::after {
|
|
content: '▸';
|
|
}
|
|
|
|
details[open]:has(li) .elt-switch::after {
|
|
content: '▾';
|
|
}
|
|
|
|
.elt-label {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.cst-label {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.elt-rep {
|
|
display: flex;
|
|
}
|
|
|
|
.elt-rep > div {
|
|
padding: 2px 0px 0px 0px;
|
|
font-size: 10pt;
|
|
text-align: center;
|
|
width: 56px;
|
|
}
|
|
|
|
.cst {
|
|
font-style: italic;
|
|
}
|
|
|
|
.cst > input[type=checkbox] {
|
|
margin: 0px 8px 0px 0px;
|
|
}
|
|
|
|
.cst > input[type=text] {
|
|
color: #fcfcfc;
|
|
background-color: inherit;
|
|
border: 1px solid #555;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* display */
|
|
|
|
canvas {
|
|
float: left;
|
|
margin-left: 20px;
|
|
margin-top: 20px;
|
|
background-color: #020202;
|
|
border: 1px solid #555;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
canvas:focus {
|
|
border-color: #aaa;
|
|
} |