mirror of
https://github.com/JannisX11/blockbench.git
synced 2024-11-21 01:13:37 +08:00
1420 lines
27 KiB
CSS
1420 lines
27 KiB
CSS
/*Panel*/
|
|
.panel.grow {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
min-height: 133px;
|
|
}
|
|
.panel.grow > .panel_inside {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
h3.panel_handle {
|
|
display: flex;
|
|
width: 100%;
|
|
height: auto;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: inherit;
|
|
background: var(--color-ui);
|
|
place-content: space-between;
|
|
}
|
|
body > h3.panel_handle {
|
|
pointer-events: none;
|
|
box-shadow: 0 0 16px black;
|
|
width: auto;
|
|
}
|
|
h3.panel_handle > label {
|
|
flex: 0 1 auto;
|
|
font-size: 1.1em;
|
|
text-transform: uppercase;
|
|
color: var(--color-subtle_text);
|
|
margin: 6px 8px;
|
|
padding: 0px 4px;
|
|
cursor: move;
|
|
}
|
|
h3.panel_handle > .tool.panel_folding_button {
|
|
flex: 0 0 auto;
|
|
margin-top: 4px;
|
|
opacity: 0.7;
|
|
cursor: pointer;
|
|
}
|
|
h3.panel_handle > .tool.panel_folding_button:hover {
|
|
opacity: 1;
|
|
}
|
|
.panel p {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.panel.folded {
|
|
min-height: auto;
|
|
flex-grow: 0;
|
|
}
|
|
.panel.folded > .panel_inside {
|
|
display: none;
|
|
}
|
|
|
|
.panel[order]::before {
|
|
content: '';
|
|
height: 2px;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--color-accent);
|
|
z-index: 3;
|
|
display: block;
|
|
position: absolute;
|
|
}
|
|
.panel[order] {
|
|
position: relative;
|
|
}
|
|
.panel[order="-1"]::before {
|
|
margin-top: -2px;
|
|
}
|
|
.panel[order="1"]::before {
|
|
bottom: 0px;
|
|
}
|
|
|
|
/*Display*/
|
|
|
|
.tabs_small input[type="radio"]:checked+label {
|
|
border-bottom: 3px solid var(--color-accent);
|
|
}
|
|
.tabs_small input[type="radio"] {
|
|
display: none;
|
|
}
|
|
.tabs_small label {
|
|
display: inline-block;
|
|
height: 30px;
|
|
cursor: default;
|
|
text-align: center;
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
}
|
|
#color .tabs_small label {
|
|
font-size: 1em;
|
|
}
|
|
div.tabs_small:not(.icon_bar) label {
|
|
padding-top: 4px;
|
|
}
|
|
.tabs_small {
|
|
background-color: transparent;
|
|
height: 30px;
|
|
display: flex;
|
|
}
|
|
.tabs_small label:hover {
|
|
color: var(--color-light);
|
|
}
|
|
#display_sliders p {
|
|
margin-top: 6px;
|
|
}
|
|
#display_bar .tool, #display_ref_bar > div {
|
|
width: calc(100% / 8 - 2px);
|
|
max-width: 52px;
|
|
}
|
|
#display_ref_bar > div > label {
|
|
width: 100%;
|
|
}
|
|
.bar.slider_input_combo {
|
|
position: relative;
|
|
display: flex;
|
|
margin-right: 2px;
|
|
margin-top: 2px;
|
|
}
|
|
.bar.slider_input_combo input.tool[type="range"] {
|
|
float: none;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
.bar.slider_input_combo input.tool[type="number"] {
|
|
width: 60px;
|
|
background-color: var(--color-back);
|
|
float: none;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.tool.display_scale_invert {
|
|
position: relative;
|
|
}
|
|
|
|
input#preset_name {
|
|
background-color: var(--color-back);
|
|
}
|
|
#create_preset .dialog_bar > * {
|
|
float: left;
|
|
margin-left: 8px;
|
|
}
|
|
#display_settings p {
|
|
padding-left: 6px;
|
|
}
|
|
div#display_crosshair:after {
|
|
content: "";
|
|
width: 20px;
|
|
height: 2px;
|
|
background-color: var(--color-grid);
|
|
position: absolute;
|
|
margin-left: -9px;
|
|
margin-top: 9px;
|
|
}
|
|
div#display_crosshair {
|
|
width: 2px;
|
|
height: 20px;
|
|
background-color: var(--color-grid);
|
|
position: absolute;
|
|
top: calc(50% - 10px);
|
|
margin-left: 50%;
|
|
margin-right: auto;
|
|
}
|
|
|
|
|
|
|
|
/*Outliner*/
|
|
#cubes_list {
|
|
padding-top: 1px;
|
|
}
|
|
#cubes_list > li:last-child {
|
|
margin-bottom: 180px;
|
|
}
|
|
.outliner_node .outliner_object i, .outliner_object i[class^="icon-"] {
|
|
flex: 0 0 20px;
|
|
text-align: center;
|
|
padding-top: 4px;
|
|
}
|
|
.outliner_node .outliner_object i.icon_off {
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.outliner_opener_placeholder {
|
|
width: 18px;
|
|
height: 14px;
|
|
float: left;
|
|
}
|
|
.outliner_object {
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 2px;
|
|
box-sizing: border-box;
|
|
}
|
|
.outliner_object:active {
|
|
background-color: var(--color-ui);
|
|
}
|
|
.outliner_object.selected {
|
|
background-color: var(--color-selected);
|
|
}
|
|
.outliner_object:hover {
|
|
color: var(--color-light);
|
|
}
|
|
#cubes_list.drag_hover > li:last-child {
|
|
position: relative;
|
|
}
|
|
#cubes_list.drag_hover > li:last-child::after {
|
|
content: '';
|
|
width: calc(100% - 12px);
|
|
height: 2px;
|
|
margin-left: 6px;
|
|
background: var(--color-accent);
|
|
z-index: 3;
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
}
|
|
#cubes_list ul {
|
|
position: relative;
|
|
}
|
|
#cubes_list .outliner_line_guide {
|
|
position: absolute;
|
|
top: -4px;
|
|
bottom: 4px;
|
|
width: 4px;
|
|
margin-left: 10px;
|
|
border-left: 2px solid var(--color-text);
|
|
opacity: 0.2;
|
|
pointer-events: none;
|
|
}
|
|
.drag_hover[order]::before {
|
|
content: '';
|
|
width: calc(100% - 12px);
|
|
height: 2px;
|
|
margin-left: 6px;
|
|
background: var(--color-accent);
|
|
z-index: 3;
|
|
display: block;
|
|
position: absolute;
|
|
}
|
|
.drag_hover[order] {
|
|
position: relative;
|
|
}
|
|
.drag_hover[order="-1"]::before {
|
|
margin-top: -1px;
|
|
}
|
|
.drag_hover[order="1"]::before {
|
|
bottom: -1px;
|
|
}
|
|
.drag_hover[order="0"]::before {
|
|
width: 5px;
|
|
height: 30px;
|
|
margin-left: 0;
|
|
border-top-right-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
#outliner_drag_helper {
|
|
position: absolute;
|
|
width: auto;
|
|
min-width: 150px;
|
|
height: 28px;
|
|
pointer-events: none;
|
|
background-color: var(--color-selected);
|
|
box-shadow: 0 0.4px 3.5px rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
padding: 2px 15px 2px 8px;
|
|
z-index: 18;
|
|
}
|
|
#outliner_drag_helper > i {
|
|
padding: 4px;
|
|
}
|
|
.outliner_object > input {
|
|
width: 0;
|
|
flex: 1 0 0;
|
|
padding-right: 5px;
|
|
padding-left: 5px;
|
|
pointer-events: none;
|
|
}
|
|
.outliner_object > input.renaming {
|
|
pointer-events: auto;
|
|
}
|
|
i.outliner_toggle {
|
|
font-size: 15px;
|
|
}
|
|
i.icon-open-state {
|
|
opacity: 0.7;
|
|
}
|
|
i.icon-open-state:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.outliner_object i.ec_0 {
|
|
color: #A2EBFF; /*light_blue*/
|
|
}
|
|
.outliner_object i.ec_1 {
|
|
color: #FFF899; /*yellow*/
|
|
}
|
|
.outliner_object i.ec_2 {
|
|
color: #E8BD7B; /*orange*/
|
|
}
|
|
.outliner_object i.ec_3 {
|
|
color: #FFA7A4; /*red*/
|
|
}
|
|
.outliner_object i.ec_4 {
|
|
color: #C5A6E8; /*purple*/
|
|
}
|
|
.outliner_object i.ec_5 {
|
|
color: #A6C8FF; /*blue*/
|
|
}
|
|
.outliner_object i.ec_6 {
|
|
color: #7BFFA3; /*green*/
|
|
}
|
|
.outliner_object i.ec_7 {
|
|
color: #BDFFA6; /*lime*/
|
|
}
|
|
div#outliner_stats {
|
|
float: right;
|
|
margin-right: 16px;
|
|
margin-top: 4px;
|
|
font-weight: normal;
|
|
}
|
|
#particle_label {
|
|
float: right;
|
|
margin-right: 10px;
|
|
margin-top: 8px;
|
|
font-weight: normal;
|
|
opacity: 0.8;
|
|
font-size: 0.9em;
|
|
cursor: default;
|
|
}
|
|
.outliner_drag_number {
|
|
color: var(--color-accent_text);
|
|
background-color: var(--color-accent);
|
|
text-align: center;
|
|
padding: 0 5px 0 5px;
|
|
font-weight: normal;
|
|
position: absolute;
|
|
top: -20px;
|
|
left: 20px;
|
|
box-shadow: 0 0 3px black;
|
|
}
|
|
#options .bar .nslide, #options .bar .tool.wide {
|
|
width: 83px;
|
|
}
|
|
|
|
/*Textures*/
|
|
.texture {
|
|
display: flex;
|
|
height: 48px;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
.texture.selected {
|
|
background: var(--color-selected);
|
|
}
|
|
.texture > i {
|
|
margin-top: 12px;
|
|
}
|
|
.texture > i.clickable:hover {
|
|
color: var(--color-light);
|
|
}
|
|
.texture > i:not(.clickable) {
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.texture i.icon_off {
|
|
color: var(--color-subtle_text);
|
|
}
|
|
div.texture_icon_wrapper {
|
|
height: 48px;
|
|
width: 48px;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.texture.selected img.texture_icon {
|
|
margin-top: 0;
|
|
}
|
|
.texture_drag_helper {
|
|
z-index: 100;
|
|
box-shadow: 0 0 16px black;
|
|
}
|
|
.icon_placeholder {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
.texture_description_wrapper {
|
|
flex-grow: 1;
|
|
|
|
}
|
|
.texture_name {
|
|
margin-top: 2px;
|
|
margin-left: 6px;
|
|
margin-right: 4px;
|
|
overflow: hidden;
|
|
cursor: default;
|
|
}
|
|
.texture:hover .texture_name {
|
|
color: var(--color-light);
|
|
}
|
|
.texture_res {
|
|
margin-top: -3px;
|
|
margin-left: 6px;
|
|
margin-right: 4px;
|
|
width: 100%;
|
|
height: 20px;
|
|
overflow: hidden;
|
|
font-size: 0.9em;
|
|
color: var(--color-subtle_text);
|
|
cursor: default;
|
|
}
|
|
.texture_error {
|
|
position: absolute;
|
|
color: red;
|
|
margin-left: 21px;
|
|
margin-top: 21px;
|
|
text-shadow: 0 0 5px #000;
|
|
font-size: 20pt;
|
|
left: 0;
|
|
}
|
|
.texture_movie {
|
|
position: absolute;
|
|
margin-left: -26px;
|
|
margin-top: 24px;
|
|
text-shadow: 0 0 5px #000;
|
|
}
|
|
.texture[order]::before {
|
|
content: '';
|
|
height: 2px;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--color-accent);
|
|
z-index: 3;
|
|
display: block;
|
|
position: absolute;
|
|
}
|
|
.texture[order] {
|
|
position: relative;
|
|
}
|
|
.texture[order="-1"]::before {
|
|
margin-top: -1px;
|
|
}
|
|
.texture[order="1"]::before {
|
|
bottom: 0px;
|
|
}
|
|
.texture[order="0"]::before {
|
|
width: 5px;
|
|
height: 30px;
|
|
margin-left: 0;
|
|
border-top-right-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
|
|
#texture_animation_playback {
|
|
display: flex;
|
|
}
|
|
#texture_animation_timeline {
|
|
display: flex;
|
|
position: relative;
|
|
width: 0;
|
|
flex-grow: 1;
|
|
padding-left: 6px;
|
|
padding-right: 2px;
|
|
background-color: var(--color-back);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
#texture_animation_timeline .texture_animation_frame {
|
|
flex-grow: 1;
|
|
width: 1px;
|
|
height: 8px;
|
|
margin-top: 20px;
|
|
border-left: 1px solid var(--color-text);
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
}
|
|
#texture_animation_timeline #animated_texture_playhead {
|
|
position: absolute;
|
|
height: 28px;
|
|
border-style: solid;
|
|
border-width: 8px;
|
|
border-color: transparent;
|
|
border-top-color: var(--color-accent);
|
|
border-radius: 3px;
|
|
margin-left: -2px;
|
|
pointer-events: none;
|
|
}
|
|
#texture_animation_timeline #animated_texture_playhead::before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 28px;
|
|
border-left: 2px solid var(--color-accent);
|
|
top: -8px;
|
|
left: -1px;
|
|
}
|
|
|
|
/*Animations*/
|
|
.panel#animations #animations_list {
|
|
min-height: 126px;
|
|
padding-bottom: 12px;
|
|
}
|
|
.animation {
|
|
height: 38px;
|
|
display: flex;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
padding: 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
.animation:hover {
|
|
color: var(--color-light);
|
|
}
|
|
.animation.selected {
|
|
background: var(--color-selected);
|
|
}
|
|
ul.indented .animation {
|
|
padding-left: 16px;
|
|
}
|
|
.animation > i {
|
|
margin-right: 4px;
|
|
}
|
|
.animation > * {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.animation > label {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
overflow: hidden;
|
|
}
|
|
.in_list_button {
|
|
width: 22px;
|
|
color: var(--color-text);
|
|
}
|
|
.in_list_button:hover {
|
|
color: var(--color-light);
|
|
}
|
|
.in_list_button {
|
|
width: 22px;
|
|
color: var(--color-text);
|
|
}
|
|
.in_list_button:hover {
|
|
color: var(--color-light);
|
|
}
|
|
.in_list_button.unclickable {
|
|
color: var(--color-subtle_text) !important;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.animation_file_head {
|
|
height: 28px;
|
|
padding: 2px;
|
|
padding-right: 8px;
|
|
display: flex;
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.animation_file_head:hover {
|
|
color: var(--color-text);
|
|
}
|
|
.animation_file_head > .icon-open-state {
|
|
text-align: center;
|
|
width: 21px;
|
|
margin-top: 4px;
|
|
}
|
|
.animation_file_head > label {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.animation[order]::before {
|
|
content: '';
|
|
height: 2px;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--color-accent);
|
|
z-index: 3;
|
|
display: block;
|
|
position: absolute;
|
|
}
|
|
.animation[order] {
|
|
position: relative;
|
|
}
|
|
.animation[order="-1"]::before {
|
|
margin-top: -9px;
|
|
}
|
|
.animation[order="1"]::before {
|
|
bottom: -1px;
|
|
}
|
|
#animation_drag_helper {
|
|
position: absolute;
|
|
height: 38px;
|
|
display: flex;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
padding: 8px;
|
|
box-sizing: border-box;
|
|
width: auto;
|
|
min-width: 150px;
|
|
pointer-events: none;
|
|
background-color: var(--color-selected);
|
|
box-shadow: 0 0.4px 3.5px rgba(0, 0, 0, 0.6);
|
|
z-index: 18;
|
|
}
|
|
|
|
/* Keyframe Panel */
|
|
.panel#keyframe .bar {
|
|
margin-top: 2px;
|
|
}
|
|
.panel#keyframe .tabs_small label {
|
|
font-size: 1em;
|
|
height: 30px;
|
|
width: 25%;
|
|
}
|
|
#keyframe_type_label {
|
|
display: flex;
|
|
padding: 4px 8px;
|
|
height: 30px;
|
|
}
|
|
#keyframe_type_label label {
|
|
flex: 1 0 40px;
|
|
}
|
|
.keyframe_data_point_header {
|
|
display: flex;
|
|
padding: 2px 8px;
|
|
height: 26px;
|
|
}
|
|
.keyframe_data_point_header label {
|
|
flex: 0 0 auto;
|
|
}
|
|
.flex_fill_line {
|
|
flex: 1 0 0;
|
|
border-bottom: 2px solid var(--color-text);
|
|
height: 0;
|
|
margin: 0 10px;
|
|
margin-top: 11px;
|
|
opacity: 0.5;
|
|
}
|
|
.panel#keyframe .bar.flex {
|
|
height: auto;
|
|
min-height: 30px;
|
|
}
|
|
.panel#keyframe .bar.flex label {
|
|
padding: 3px 8px;
|
|
min-width: 20px;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
background-color: var(--color-button);
|
|
}
|
|
.panel#keyframe .bar input.dark_bordered {
|
|
width: 100%;
|
|
flex-shrink: 1;
|
|
}
|
|
.panel#keyframe .list {
|
|
max-height: 260px;
|
|
overflow-y: auto;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.prism-editor-wrapper {
|
|
caret-color: var(--color-text);
|
|
}
|
|
.molang_input {
|
|
overflow-y: hidden;
|
|
min-height: 30px;
|
|
height: auto;
|
|
}
|
|
.molang_input pre {
|
|
padding: 2px;
|
|
height: 100%;
|
|
min-height: 28px;
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
cursor: default;
|
|
}
|
|
.molang_input pre code {
|
|
color: #bec2ca;
|
|
padding: 0;
|
|
cursor: auto;
|
|
display: inline-block;
|
|
width: 100%;
|
|
min-height: 24px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.molang_input pre .token.punctuation {
|
|
color: #5ba8c5
|
|
}
|
|
.molang_input pre .token.operator, .molang_input pre .token.keyword {
|
|
color: #fc2f40
|
|
}
|
|
.molang_input pre .token.number, .molang_input pre .token.boolean {
|
|
color: #b99cff
|
|
}
|
|
.molang_input pre .token.function-name {
|
|
color: #94e400
|
|
}
|
|
.molang_input pre .token.selector {
|
|
color: #92dcff;
|
|
}
|
|
.molang_input pre .string {
|
|
color: #e8df6a;
|
|
}
|
|
|
|
|
|
|
|
/*Timeline*/
|
|
#timeline {
|
|
display: block;
|
|
height: 300px;
|
|
background-color: var(--color-ui);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
#timeline_vue {
|
|
flex-grow: 1;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
#timeline_body {
|
|
overflow-y: scroll;
|
|
overflow-x: scroll;
|
|
position: relative;
|
|
background-color: var(--color-back);
|
|
height: calc(100% - 30px);
|
|
}
|
|
.timeline_marker {
|
|
position: absolute;
|
|
margin-left: -9px;
|
|
z-index: 5;
|
|
height: 10px;
|
|
width: 20px;
|
|
}
|
|
.timeline_marker::before {
|
|
content: "";
|
|
position: absolute;
|
|
border-style: solid;
|
|
border-bottom-color: transparent !important;
|
|
border-left-color: transparent !important;
|
|
border-right-color: transparent !important;
|
|
border-width: 10px;
|
|
border-radius: 3px;
|
|
pointer-events: none;
|
|
border-color: inherit;
|
|
}
|
|
.timeline_marker:hover::before {
|
|
border-width: 11px;
|
|
margin-left: -1px;
|
|
}
|
|
#timeline_playhead {
|
|
position: absolute;
|
|
z-index: 3;
|
|
cursor: ew-resize;
|
|
|
|
height: 26px;
|
|
width: 18px;
|
|
top: 0;
|
|
margin-left: -8px;
|
|
|
|
border-right: 9px solid transparent;
|
|
border-left: 9px solid transparent;
|
|
border-top: 12px solid var(--color-accent);
|
|
border-radius: 2px;
|
|
}
|
|
#timeline_playhead::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
width: 2px;
|
|
background-color: var(--color-accent);
|
|
pointer-events: none;
|
|
margin-left: -1px;
|
|
margin-top: -2px;
|
|
height: 5000px;
|
|
}
|
|
#timeline_endbracket {
|
|
position: absolute;
|
|
z-index: 2;
|
|
cursor: col-resize;
|
|
|
|
height: 26px;
|
|
width: 8px;
|
|
top: 0;
|
|
margin-left: -7px;
|
|
|
|
border: 1px solid var(--color-accent);
|
|
border-left-width: 0;
|
|
border-right-width: 2px;
|
|
}
|
|
div#timeline_endbracket::after {
|
|
content: "";
|
|
width: 16px;
|
|
height: 100%;
|
|
display: block;
|
|
margin-left: -2px;
|
|
}
|
|
|
|
#timeline .keyframe {
|
|
position: absolute;
|
|
margin-left: -6px;
|
|
z-index: 3;
|
|
text-align: center;
|
|
width: 13.5px;
|
|
height: 23px;
|
|
}
|
|
#timeline .keyframe i {
|
|
margin-top: 3px;
|
|
font-size: 16px;
|
|
margin-left: -1px;
|
|
pointer-events: none;
|
|
display: block;
|
|
}
|
|
#timeline .keyframe i.keyframe_icon_smaller {
|
|
font-size: 11pt;
|
|
margin-top: 4px;
|
|
margin-left: -1px;
|
|
}
|
|
#timeline_body .animator_head_bar .keyframe {
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
#timeline_body .animator_head_bar .keyframe i {
|
|
transform: none;
|
|
font-size: 6pt;
|
|
color: var(--color-grid);
|
|
}
|
|
#timeline .keyframe.selected {
|
|
color: var(--color-accent) !important;
|
|
z-index: 4;
|
|
}
|
|
|
|
#timeline_header {
|
|
height: 28px;
|
|
display: flex;
|
|
border-bottom: 1px solid var(--color-border);
|
|
border-top: 1px solid var(--color-border);
|
|
position: relative;
|
|
}
|
|
#timeline_corner {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 144px;
|
|
flex-shrink: 0;
|
|
background-color: var(--color-back);
|
|
z-index: 4;
|
|
}
|
|
#timeline_timestamp {
|
|
font-family: var(--font-code);
|
|
padding: 2px;
|
|
padding-left: 8px;
|
|
overflow: hidden;
|
|
}
|
|
#timeline_corner > .tool {
|
|
height: 26px;
|
|
}
|
|
#timeline_corner > .tool > i {
|
|
margin-top: 3px;
|
|
}
|
|
#timeline_time_wrapper {
|
|
height: 100%;
|
|
position: relative;
|
|
background-color: var(--color-back);
|
|
}
|
|
#timeline_time {
|
|
height: 100%;
|
|
position: relative;
|
|
margin-left: 8px;
|
|
border-bottom: 1px solid var(--color-selected);
|
|
}
|
|
.timeline_timecode {
|
|
padding-left: 4px;
|
|
padding-top: 2px;
|
|
height: 100%;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
.timeline_timecode > span {
|
|
display: block;
|
|
margin-top: -4px;
|
|
font-size: 0.9em;
|
|
margin-left: -6px;
|
|
}
|
|
.timeline_timecode > .substeps {
|
|
width: 100%;
|
|
height: 8px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
}
|
|
.timeline_timecode > .substeps > div {
|
|
border-left: 1px solid var(--color-text);
|
|
height: 4px;
|
|
flex-grow: 1;
|
|
margin-top: 4px;
|
|
opacity: 0.3;
|
|
}
|
|
.timeline_timecode > .substeps > div:first-child {
|
|
height: 100%;
|
|
margin-top: 0;
|
|
opacity: 0.48;
|
|
}
|
|
|
|
|
|
#timeline_body_inner {
|
|
min-height: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
#timeline_selector {
|
|
display: none;
|
|
}
|
|
#timeline_body li > div {
|
|
display: flex;
|
|
min-height: 24px;
|
|
}
|
|
li.animator {
|
|
width: fit-content;
|
|
}
|
|
#timeline_vue.graph_editor li.animator > div {
|
|
width: fit-content !important;
|
|
}
|
|
.channel_head {
|
|
position: relative;
|
|
display: flex;
|
|
width: 144px;
|
|
background-color: var(--color-ui);
|
|
border-right: 1px solid var(--color-border);
|
|
border-left: 2px solid transparent;
|
|
box-shadow: 1px 8px 10px 0 #00000038;
|
|
z-index: 5;
|
|
}
|
|
#timeline_vue.graph_editor .channel_head {
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
.channel_axis_selector {
|
|
height: 26px;
|
|
margin-right: 1px;
|
|
display: flex;
|
|
}
|
|
.channel_axis_selector > div {
|
|
font-weight: bolder;
|
|
text-align: center;
|
|
width: 22px;
|
|
height: inherit;
|
|
padding-top: 2px;
|
|
}
|
|
.channel_axis_selector > div.selected {
|
|
border-bottom: 3px solid var(--color-accent);
|
|
}
|
|
.channel_axis_selector > div:hover {
|
|
filter: brightness(1.4);
|
|
}
|
|
#timeline_body li > .animator_head_bar .channel_head:hover {
|
|
color: var(--color-light);
|
|
}
|
|
#timeline_body li > .animator_channel_bar .channel_head {
|
|
padding-left: 16px;
|
|
}
|
|
.animator.selected .channel_head {
|
|
border-left-color: var(--color-accent);
|
|
}
|
|
.channel_head.selected {
|
|
background-color: var(--color-selected);
|
|
}
|
|
.channel_head .text_button {
|
|
width: 26px;
|
|
height: 24px;
|
|
text-align: center;
|
|
float: left;
|
|
flex-shrink: 0;
|
|
}
|
|
.animator_channel_bar .channel_head .text_button {
|
|
float: right;
|
|
}
|
|
.animator_channel_bar .channel_head .text_button .channel_mute {
|
|
font-size: 11pt;
|
|
}
|
|
.animator_channel_bar .channel_head .text_button .fa-eye-slash {
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.channel_head span {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
overflow: hidden;
|
|
}
|
|
.animator_channel_bar .channel_head:not(.selected) span {
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.keyframe_section {
|
|
flex-grow: 1;
|
|
position: relative;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
.animator_channel_bar > .keyframe_section {
|
|
background-color: var(--color-ui);
|
|
}
|
|
.animator_close_button:hover {
|
|
background-color: var(--color-close);
|
|
}
|
|
#timeline_empty_head {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.keyframe .keyframe_waveform {
|
|
height: 23px;
|
|
width: 8000px;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
.keyframe .keyframe_waveform > polygon {
|
|
fill: var(--color-grid);
|
|
stroke: none;
|
|
stroke-width: 0;
|
|
}
|
|
|
|
#timeline_graph_editor {
|
|
position: absolute;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
}
|
|
#timeline_graph_editor svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-left: 9px;
|
|
pointer-events: none;
|
|
}
|
|
#timeline_graph_editor svg path {
|
|
stroke: #f72858;
|
|
stroke-width: 2px;
|
|
fill: none;
|
|
}
|
|
#timeline_graph_editor .keyframe {
|
|
height: 16px;
|
|
width: 11px;
|
|
font-size: 10px;
|
|
}
|
|
#timeline_graph_editor .keyframe > i {
|
|
font-size: 13px;
|
|
margin-top: 2px;
|
|
margin-left: -2px;
|
|
}
|
|
#timeline_graph_editor .keyframe > i.keyframe_icon_smaller {
|
|
font-size: 12px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
|
|
/*UV*/
|
|
.UVEditor {
|
|
position: relative;
|
|
}
|
|
dialog .UVEditor {
|
|
z-index: 20;
|
|
}
|
|
.UVEditor > .toolbar {
|
|
margin-top: 3px;
|
|
}
|
|
.uv_headline .uv_title {
|
|
float: left;
|
|
padding-top: 3px;
|
|
padding-left: 10px;
|
|
}
|
|
.uv_headline {
|
|
height: 30px;
|
|
background-color: var(--color-back);
|
|
margin-left: -8px;
|
|
margin-right: -8px;
|
|
}
|
|
#uv_dialog_all .UVEditor.selected {
|
|
border-color: var(--color-accent);
|
|
z-index: 21;
|
|
}
|
|
.UVEditor.selected .uv_headline {
|
|
background-color: var(--color-button);
|
|
}
|
|
.uv_headline .tool {
|
|
float: right;
|
|
}
|
|
#project_resolution_status {
|
|
margin: 3px;
|
|
padding: 1px 5px;
|
|
pointer-events: auto;
|
|
}
|
|
#project_resolution_status:hover {
|
|
color: var(--color-light);
|
|
}
|
|
|
|
#uv_viewport {
|
|
height: 320px;
|
|
width: 320px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
#uv_frame {
|
|
height: 320px;
|
|
width: 320px;
|
|
margin-bottom: 0;
|
|
position: relative;
|
|
border: 4px solid var(--color-ui);
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
body[mode=paint] #uv_frame {
|
|
cursor: crosshair !important;
|
|
}
|
|
#uv_frame > img {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
object-fit: cover;
|
|
object-position: 0 0;
|
|
}
|
|
div#uv_brush_outline {
|
|
border: 1px solid white;
|
|
width: 0;
|
|
height: 0;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
mix-blend-mode: difference;
|
|
}
|
|
.uv_mapping_overlay {
|
|
position: absolute;
|
|
opacity: 0.4;
|
|
cursor: inherit;
|
|
pointer-events: none;
|
|
}
|
|
#uv_size {
|
|
height: 320px;
|
|
width: 320px;
|
|
cursor: move;
|
|
box-sizing: border-box;
|
|
z-index: 1;
|
|
box-shadow: 0 0 0 1.5px #ffffff;
|
|
mix-blend-mode: difference;
|
|
}
|
|
.uv_size_handle {
|
|
position: absolute;
|
|
cursor: move;
|
|
}
|
|
#uv_rotation {
|
|
width: 72px;
|
|
margin-top: 1px;
|
|
}
|
|
.uv_transform_info {
|
|
position: absolute;
|
|
display: block;
|
|
right: 8px;
|
|
top: 8px;
|
|
font-size: 0.9em;
|
|
cursor: default;
|
|
pointer-events: none;
|
|
z-index: 5;
|
|
color: white;
|
|
mix-blend-mode: difference;
|
|
font-weight: 300;
|
|
}
|
|
.panel .bar.next_to_title {
|
|
margin-top: -34px;
|
|
margin-right: 32px;
|
|
position: relative;
|
|
float: right;
|
|
pointer-events: none;
|
|
}
|
|
.panel .bar.next_to_title > .tool {
|
|
float: right;
|
|
pointer-events: initial;
|
|
}
|
|
#uv_size .ui-resizable-se:before,
|
|
#uv_size .ui-resizable-sw:before,
|
|
#uv_size .ui-resizable-ne:before,
|
|
#uv_size .ui-resizable-nw:before {
|
|
content: "";
|
|
position: absolute;
|
|
height: 7px;
|
|
width: 7px;
|
|
background-color: var(--color-text);
|
|
}
|
|
#uv_size .ui-resizable-se,
|
|
#uv_size .ui-resizable-sw,
|
|
#uv_size .ui-resizable-ne,
|
|
#uv_size .ui-resizable-nw {
|
|
height: 9px;
|
|
width: 9px;
|
|
}
|
|
#uv_size .ui-resizable-se {right: -6px; bottom: -6px; z-index: 91 !important;}
|
|
#uv_size .ui-resizable-sw {left: -6px; bottom: -6px;}
|
|
#uv_size .ui-resizable-ne {right: -6px; top: -6px;}
|
|
#uv_size .ui-resizable-nw {left: -6px; top: -6px;}
|
|
|
|
#uv_frame:hover #uv_size .ui-resizable-handle:before {
|
|
background-color: white;
|
|
}
|
|
#uv_frame:hover #uv_size.dark_frame .ui-resizable-handle:before {
|
|
background-color: black;
|
|
}
|
|
#uv_frame:hover #uv_size .ui-resizable-handle:hover:before {
|
|
background-color: var(--color-accent);
|
|
}
|
|
#uv_size .ui-resizable-se:before {
|
|
bottom: 2px;
|
|
right: 2px;
|
|
}
|
|
#uv_size .ui-resizable-sw:before {
|
|
bottom: 2px;
|
|
left: 2px;
|
|
}
|
|
#uv_size .ui-resizable-ne:before {
|
|
top: 2px;
|
|
right: 2px;
|
|
}
|
|
#uv_size .ui-resizable-nw:before {
|
|
top: 2px;
|
|
left: 2px;
|
|
}
|
|
|
|
#texture_selection_rect {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
border: 1px dashed white;
|
|
mix-blend-mode: difference;
|
|
}
|
|
#texture_pasting_overlay {
|
|
position: absolute;
|
|
}
|
|
#texture_pasting_overlay::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
border: 1px dashed white;
|
|
pointer-events: none;
|
|
z-index: 6;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
#texture_pasting_overlay > canvas {
|
|
box-shadow: 1px 1px 20px black;
|
|
cursor: move;
|
|
z-index: 5;
|
|
float: left;
|
|
}
|
|
#texture_pasting_overlay > div.control {
|
|
background-color: var(--color-bright_ui);
|
|
position: absolute;
|
|
box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.5);
|
|
width: 30px;
|
|
height: 30px;
|
|
bottom: -30px;
|
|
width: max-content;
|
|
}
|
|
#texture_pasting_overlay > div.control > div {
|
|
width: 30px;
|
|
height: 30px;
|
|
padding: 3px;
|
|
float: left;
|
|
color: var(--color-accent_text);
|
|
text-align: center;
|
|
}
|
|
#texture_pasting_overlay > div.control > div:hover {
|
|
background-color: var(--color-accent);
|
|
color: var(--color-accent_text);
|
|
}
|
|
|
|
/*Chat*/
|
|
#chat {
|
|
z-index: 16;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
#chat_history {
|
|
background: var(--color-back);
|
|
color: var(--color-text);
|
|
min-height: 81px;
|
|
max-height: 320px;
|
|
padding: 5px;
|
|
font-size: 12pt;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
word-break: break-word;
|
|
}
|
|
#chat_history li {
|
|
padding-top: 1px;
|
|
padding-left: 7px;
|
|
}
|
|
#chat_history li b {
|
|
margin-left: -6px;
|
|
user-select: text;
|
|
color: var(--color-text);
|
|
background-color: var(--color-button);
|
|
border-radius: 4px;
|
|
padding: 1px 4px;
|
|
}
|
|
#chat_history li b.self {
|
|
color: var(--color-accent_text);
|
|
background-color: var(--color-accent);
|
|
}
|
|
#chat_history li span.text {
|
|
user-select: text;
|
|
}
|
|
#chat_history li span.timestamp {
|
|
color: var(--color-subtle_text);
|
|
font-size: 0.8em;
|
|
float: right;
|
|
clear: both;
|
|
}
|
|
#chat_bar {
|
|
height: 32px;
|
|
margin-bottom: 6px;
|
|
margin-top: 5px;
|
|
}
|
|
#chat_input {
|
|
padding: 5px;
|
|
width: calc(100% - 36px);
|
|
margin-left: 2px;
|
|
}
|
|
#chat_bar > i {
|
|
margin: 4px;
|
|
}
|
|
#chat_bar > i:hover {
|
|
color: var(--color-light);
|
|
}
|
|
|
|
/*Color*/
|
|
#color_panel_head {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 50px;
|
|
padding: 0 8px;
|
|
}
|
|
#color_panel_head .main {
|
|
width: 32px;
|
|
height: 38px;
|
|
flex-shrink: 0;
|
|
}
|
|
#color_panel_head .side {
|
|
height: 100%;
|
|
flex-grow: 1;
|
|
width: calc(100% - 32px);
|
|
}
|
|
#color_panel_head .side input {
|
|
width: 100%;
|
|
height: 28px;
|
|
padding: 0 8px;
|
|
font-family: var(--font-code);
|
|
background-color: var(--color-back);
|
|
}
|
|
#color_panel_head #color_history {
|
|
width: 100%;
|
|
height: 16px;
|
|
overflow-x: scroll;
|
|
overflow-y: hidden;
|
|
white-space: nowrap;
|
|
scroll-behavior: smooth;
|
|
}
|
|
#color_panel_head #color_history li {
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
width: 30px;
|
|
height: 10px;
|
|
}
|
|
|
|
#main_colorpicker_preview {
|
|
margin-top: -35px;
|
|
border: 1px solid var(--color-border);
|
|
height: 20px;
|
|
}
|
|
#main_colorpicker_preview > div {
|
|
height: 100%;
|
|
width: 36px;
|
|
}
|
|
#palette_list {
|
|
padding: 2px;
|
|
min-height: 160px;
|
|
max-height: 232px;
|
|
}
|
|
#palette_list .color {
|
|
display: inline-block;
|
|
width: 25px;
|
|
height: 25px;
|
|
vertical-align: top;
|
|
}
|
|
#palette_list .color:hover {
|
|
padding: 1px;
|
|
}
|
|
#palette_list .color.selected {
|
|
padding: 3px;
|
|
}
|
|
#palette_list .color.contrast {
|
|
background-color: var(--color-text);
|
|
}
|
|
#palette_list .color .color_inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.panel#color input.sp-input {
|
|
width: calc(100% - 40px);
|
|
float: left;
|
|
}
|
|
.panel#color .sp-container.sp-flat {
|
|
overflow: visible;
|
|
margin: 2px 4px 0 4px;
|
|
width: calc(100% - 8px);
|
|
}
|
|
|