372 lines
7.5 KiB
CSS
372 lines
7.5 KiB
CSS
@font-face {
|
|
font-family: Nunito Sans;
|
|
src: url('fonts/Nunito_Sans/NunitoSans-Regular.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: Nunito Sans;
|
|
src: url('fonts/Nunito_Sans/NunitoSans-Bold.ttf');
|
|
font-weight: bold;
|
|
}
|
|
@font-face {
|
|
font-family: Hammersmith One;
|
|
src: url('fonts/HammersmithOne/HammersmithOne-Regular.ttf');
|
|
}
|
|
|
|
:root {
|
|
--main-font-size: 16px;
|
|
--display-font-family: Hammersmith One;
|
|
--text-font-family: Nunito Sans;
|
|
--main-background: #444;
|
|
--main-color: #dcdcdc;
|
|
--caption-font-size: 75%;
|
|
--sub-background: #333;
|
|
--sub-color: #ccc;
|
|
--section-font-size: 80%;
|
|
--section-color: #bbb;
|
|
--section-background: linear-gradient(to bottom, #1c1c1c 75%, #2c2c2c 100%);
|
|
--section-border-bottom: 1px solid #4c4c4c;
|
|
--section-border-top: 1px solid #0c0c0c;
|
|
--section-border-left: 1px solid #2c2c2c;
|
|
--section-border-right: 1px solid #3c3c3c;
|
|
--input-background: #111;
|
|
--input-color: #aaa;
|
|
--input-placeholder-color: #666;
|
|
--input-font-size: 75%;
|
|
--input-border: 1px solid #000;
|
|
--input-border-radius: 2px;
|
|
--button-background: #444;
|
|
--button-color: #ccc;
|
|
--button-border-left: 1px solid #4c4c4c;
|
|
--button-border-right: 1px solid #0c0c0c;
|
|
--button-border-bottom: 1px solid #2c2c2c;
|
|
--button-border-top: 1px solid #3c3c3c;
|
|
--selected-background: #8AD;
|
|
--selected-color: #153;
|
|
--default-transition: 0.1s all;
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
*::-webkit-scrollbar-track {
|
|
background: #111;
|
|
border-radius: 2px;
|
|
box-shadow: inset 0 0 1px 1px #000;
|
|
}
|
|
*::-webkit-scrollbar-thumb {
|
|
background: #333;
|
|
border-radius: 2px;
|
|
box-shadow: inset 1px 1px 1px 0 #444;
|
|
}
|
|
|
|
html, body {
|
|
width: 100%; height: 100%;
|
|
margin: 0; padding: 0;
|
|
font-family: var(--text-font-family);
|
|
font-size: var(--main-font-size);
|
|
background: var(--main-background);
|
|
color: var(--main-color);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
/* When any element has a display set, the hidden flag doesn't apply unless the following is provided. */
|
|
*[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.cursor-col-resize, .cursor-col-resize * { cursor: col-resize !important; }
|
|
|
|
body {
|
|
display: flex;
|
|
align-items: stretch;
|
|
align-content: stretch;
|
|
}
|
|
|
|
cat-vbox, cat-hbox {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: stretch;
|
|
align-content: stretch;
|
|
flex: 1;
|
|
}
|
|
cat-vbox {
|
|
flex-direction: column;
|
|
}
|
|
cat-hbox {
|
|
flex-direction: row;
|
|
}
|
|
|
|
cat-splitter {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 8px;
|
|
border: 2px solid green;
|
|
}
|
|
cat-vbox > cat-splitter {
|
|
top: 50%;
|
|
right: 0;
|
|
}
|
|
cat-hbox > cat-splitter {
|
|
top: 50%;
|
|
right: 0;
|
|
}
|
|
|
|
cat-gripper {
|
|
position: relative;
|
|
display: block;
|
|
padding: 0; margin: 0;
|
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFklEQVQImWNgYGD4r6Oj85+BGIBdJQDN6AUFzuZQgQAAAABJRU5ErkJggg==) repeat;
|
|
}
|
|
|
|
cat-caption {
|
|
width: 100%;
|
|
display: block;
|
|
font-family: var(--display-font-family);
|
|
font-size: var(--caption-font-size);
|
|
vertical-align: middle;
|
|
padding: 0.25em;
|
|
user-select: none;
|
|
}
|
|
|
|
cat-checkbox {
|
|
display: inline-block;
|
|
background-image: url('images/icon_arrows.png');
|
|
background-position: -16px 0;
|
|
background-repeat: no-repeat;
|
|
background-color: transparent;
|
|
width: 16px; height: 16px;
|
|
border: 0; padding: 0; margin:0;
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
cat-checkbox[checked] {
|
|
background-position: 0 0;
|
|
}
|
|
|
|
cat-control-group > cat-caption {
|
|
display: flex;
|
|
cursor: pointer;
|
|
background: linear-gradient(to bottom, #4c4c4c 75%, #3c3c3c 100%);
|
|
border-top: 1px solid #6c6c6c;
|
|
border-bottom: 1px solid #1c1c1c;
|
|
}
|
|
|
|
cat-control-group {
|
|
background: var(--sub-background);
|
|
color: var(--sub-color);
|
|
}
|
|
cat-control-group > cat-box {
|
|
display: flex;
|
|
padding: 0.25em 0.5em 0.5em 0.5em;
|
|
}
|
|
|
|
cat-control-section {
|
|
}
|
|
cat-control-section label {
|
|
font-size: 75%;
|
|
margin: 0.25em 0.5em 0.25em 1.0em;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
cat-control-section input {
|
|
background: var(--input-background);
|
|
color: var(--input-color);
|
|
font-size: var(--input-font-size);
|
|
border: var(--input-border);
|
|
border-radius: var(--input-border-radius);
|
|
margin: 0.25em;
|
|
padding: 0.25em 0.5em;
|
|
flex: 1 0 4em;
|
|
width: 100%;
|
|
min-width: 5em; /* yo ho, this be required to prevent too much shrinkage! */
|
|
transition: var(--default-transition);
|
|
}
|
|
cat-control-section input[type=number] {
|
|
}
|
|
/* */
|
|
.section-heading {
|
|
font-size: var(--section-font-size);
|
|
background: var(--section-background);
|
|
color: var(--section-color);
|
|
border-left: var(--section-border-left);
|
|
border-right: var(--section-border-right);
|
|
border-top: var(--section-border-top);
|
|
border-bottom: var(--section-border-bottom);
|
|
padding: 0.25em;
|
|
}
|
|
|
|
cat-tabview {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
}
|
|
cat-tabview-selects {
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 1.5em;
|
|
}
|
|
cat-tabview-select {
|
|
display: flex;
|
|
flex: 0 1 6em;
|
|
background: linear-gradient(to bottom, #3c3c3c 75%, #2c2c2c 100%);
|
|
border-top: 1px solid #6c6c6c;
|
|
border-bottom: 1px solid #1c1c1c;
|
|
overflow: hidden;
|
|
}
|
|
cat-tabview-select:hover {
|
|
cursor: pointer;
|
|
}
|
|
cat-tabview-tabs {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
cat-tab {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
cat-tab > iframe {
|
|
flex: 1;
|
|
}
|
|
cat-tabview-select.selected cat-caption {
|
|
background: #555;
|
|
}
|
|
|
|
/* */
|
|
button {
|
|
min-width: 1em;
|
|
min-height: 1em;
|
|
border-left: var(--button-border-left);
|
|
border-right: var(--button-border-right);
|
|
border-top: var(--button-border-top);
|
|
border-bottom: var(--button-border-bottom);
|
|
color: var(--button-color);
|
|
background: var(--button-background);
|
|
}
|
|
button:hover {
|
|
cursor: pointer;
|
|
}
|
|
button.close {
|
|
content: 'x';
|
|
}
|
|
|
|
/* */
|
|
#view {
|
|
background-color: black;
|
|
}
|
|
#view > cat-tabs {
|
|
padding: 1em;
|
|
background: var(--main-background);
|
|
}
|
|
|
|
.project-view {
|
|
flex: 1;
|
|
}
|
|
|
|
cat-projectview {
|
|
display: flex;
|
|
}
|
|
|
|
cat-projectview iframe {
|
|
flex: 1;
|
|
}
|
|
/* */
|
|
cat-input {
|
|
flex: 1;
|
|
}
|
|
|
|
/* */
|
|
cat-tree {
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
cat-tree-head {
|
|
display: table-row;
|
|
}
|
|
cat-tree-row {
|
|
display: table-row;
|
|
transition: var(--default-transition);
|
|
}
|
|
cat-tree-row[selected] {
|
|
background: var(--selected-background);
|
|
color: var(--selected-color);
|
|
}
|
|
cat-tree-cell {
|
|
display: table-cell;
|
|
cursor: default;
|
|
}
|
|
|
|
cat-tree-row[depth="1"] cat-tree-cell:first-child {
|
|
padding-left: 0.5em;
|
|
}
|
|
cat-tree-row[depth="2"] cat-tree-cell:first-child {
|
|
padding-left: 1em;
|
|
}
|
|
cat-tree-row[depth="3"] cat-tree-cell:first-child {
|
|
padding-left: 1.5em;
|
|
}
|
|
cat-tree-row[depth="4"] cat-tree-cell:first-child {
|
|
padding-left: 2em;
|
|
}
|
|
cat-tree-row[depth="5"] cat-tree-cell:first-child {
|
|
padding-left: 2.5em;
|
|
}
|
|
|
|
/* cat-timeline */
|
|
cat-timeline {
|
|
flex: 1;
|
|
overflow-x: scroll;
|
|
background-color: #111;
|
|
padding: 0 1em;
|
|
}
|
|
cat-timeline-view {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
height: 2em;
|
|
}
|
|
cat-timeline-view:before {
|
|
content: '';
|
|
background-color: #ddd;
|
|
display: block;
|
|
height: 1px;
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: calc(50% - 1px);
|
|
}
|
|
|
|
cat-timeline-keyframe {
|
|
position: absolute;
|
|
display: block;
|
|
background-image: url('images/icon_buttons.png');
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-color: transparent;
|
|
width: 16px; height: 16px;
|
|
margin-left: -8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
cat-timeline-keyframe[selected] {
|
|
background-position: -16px 0;
|
|
}
|
|
|
|
/* icons */
|
|
.icon-play {
|
|
display: block;
|
|
background-image: url('images/icon_controls.png');
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-color: transparent;
|
|
padding: 0;
|
|
border: 0;
|
|
width: 16px; height: 16px;
|
|
}
|
|
.icon-play[selected] {
|
|
background-position: -8px 0;
|
|
}
|