mirror of
https://github.com/JannisX11/blockbench.git
synced 2024-11-21 01:13:37 +08:00
2856 lines
57 KiB
CSS
2856 lines
57 KiB
CSS
/*Panel*/
|
|
.panel {
|
|
background-color: var(--color-ui);
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
.panel.hidden {
|
|
display: none !important;
|
|
}
|
|
.panel.grow {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
min-height: 133px;
|
|
}
|
|
.panel.grow > .panel_vue_wrapper:not(.list) {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
}
|
|
.panel.floating {
|
|
position: absolute;
|
|
border: 1px solid var(--color-accent);
|
|
box-shadow: 0 0 10px rgb(0 0 0 / 40%);
|
|
box-sizing: content-box;
|
|
z-index: 14;
|
|
}
|
|
.panel.floating > .panel_vue_wrapper:not(.list) {
|
|
overflow: hidden;
|
|
}
|
|
.panel.floating.dragging {
|
|
opacity: 0.6;
|
|
}
|
|
body.is_mobile .panel {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
h3.panel_handle {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 40px;
|
|
flex-shrink: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: inherit;
|
|
background: var(--color-ui);
|
|
place-content: space-between;
|
|
align-items: center;
|
|
}
|
|
h3.panel_handle > label {
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
font-size: 1.1em;
|
|
text-transform: uppercase;
|
|
color: var(--color-subtle_text);
|
|
margin-left: 8px;
|
|
padding: 0 4px;
|
|
cursor: move;
|
|
}
|
|
#center h3.panel_handle {
|
|
height: 32px;
|
|
}
|
|
h3.panel_handle > label > span {
|
|
cursor: inherit;
|
|
}
|
|
body.is_mobile.is_landscape h3.panel_handle > label > span::before {
|
|
content: "\f337";
|
|
font-family: 'Font Awesome 6 Free';
|
|
font-weight: 900;
|
|
display: inline-block;
|
|
pointer-events: none;
|
|
margin-right: 7px;
|
|
}
|
|
body.is_mobile:not(.is_landscape) h3.panel_handle > label > span::after {
|
|
content: "\f338";
|
|
font-family: 'Font Awesome 6 Free';
|
|
font-weight: 900;
|
|
display: inline-block;
|
|
pointer-events: none;
|
|
margin-left: 7px;
|
|
}
|
|
h3.panel_handle > .tool.panel_control {
|
|
flex: 0 0 24px;
|
|
opacity: 0.7;
|
|
cursor: pointer;
|
|
}
|
|
h3.panel_handle > .tool.panel_control:hover {
|
|
opacity: 1;
|
|
}
|
|
body.is_touch h3.panel_handle > .tool.panel_control {
|
|
flex-basis: 36px;
|
|
}
|
|
.panel p {
|
|
margin-left: 12px;
|
|
}
|
|
.panel p.panel_toolbar_label {
|
|
margin-bottom: -4px;
|
|
color: var(--color-subtle_text);
|
|
}
|
|
|
|
.panel.folded {
|
|
min-height: auto;
|
|
flex-grow: 0;
|
|
}
|
|
.panel.folded > *:not(.panel_handle) {
|
|
display: none !important;
|
|
}
|
|
.panel.fixed_height {
|
|
flex-grow: 0;
|
|
}
|
|
.panel.bottommost_panel {
|
|
margin-top: auto;
|
|
}
|
|
|
|
.panel[order]::before {
|
|
content: '';
|
|
height: 2px;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: var(--color-accent);
|
|
z-index: 3;
|
|
display: block;
|
|
position: absolute;
|
|
box-shadow: 0 0 20px #ffffff80;
|
|
}
|
|
.panel[order] {
|
|
position: relative;
|
|
}
|
|
.panel[order="-1"]::before {
|
|
margin-top: 0;
|
|
}
|
|
.panel[order="1"]::before {
|
|
bottom: 0px;
|
|
}
|
|
|
|
/* Panel Resize Lines */
|
|
.panel_sidebar_resize_handle {
|
|
cursor: ns-resize;
|
|
top: unset;
|
|
bottom: -3px;
|
|
width: 100%;
|
|
height: 6px;
|
|
position: absolute;
|
|
z-index: 10;
|
|
}
|
|
.panel.bottommost_panel > .panel_sidebar_resize_handle {
|
|
top: -3px;
|
|
bottom: unset;
|
|
}
|
|
.panel_sidebar_resize_handle:hover:not(.dragging) {
|
|
animation: resize_line_fade_in 500ms;
|
|
}
|
|
.panel_sidebar_resize_handle:hover, .panel_sidebar_resize_handle.dragging {
|
|
background-color: var(--color-accent);
|
|
opacity: 0.3;
|
|
}
|
|
.panel:not(.floating) > .panel_resize_handle_wrapper {
|
|
display: none;
|
|
}
|
|
.panel_resize_side {
|
|
width: 6px;
|
|
height: 6px;
|
|
position: absolute;
|
|
top: 3px;
|
|
bottom: 3px;
|
|
left: 3px;
|
|
right: 3px;
|
|
}
|
|
.panel_resize_corner {
|
|
width: 8px;
|
|
height: 8px;
|
|
position: absolute;
|
|
}
|
|
.panel_resize_side.resize_top {
|
|
cursor: ns-resize;
|
|
top: -3px;
|
|
bottom: unset;
|
|
width: auto;
|
|
}
|
|
.panel_resize_side.resize_bottom {
|
|
cursor: ns-resize;
|
|
top: unset;
|
|
bottom: -3px;
|
|
width: auto;
|
|
}
|
|
.panel_resize_side.resize_left {
|
|
cursor: ew-resize;
|
|
left: -3px;
|
|
right: unset;
|
|
height: auto;
|
|
}
|
|
.panel_resize_side.resize_right {
|
|
cursor: ew-resize;
|
|
left: unset;
|
|
right: -3px;
|
|
height: auto;
|
|
}
|
|
.panel_resize_corner.resize_top_left {
|
|
cursor: nw-resize;
|
|
left: -4px;
|
|
top: -4px;
|
|
}
|
|
.panel_resize_corner.resize_top_right {
|
|
cursor: ne-resize;
|
|
right: -4px;
|
|
top: -4px;
|
|
}
|
|
.panel_resize_corner.resize_bottom_left {
|
|
cursor: sw-resize;
|
|
left: -4px;
|
|
bottom: -4px;
|
|
}
|
|
.panel_resize_corner.resize_bottom_right {
|
|
cursor: se-resize;
|
|
right: -4px;
|
|
bottom: -4px;
|
|
}
|
|
|
|
/*Snapping*/
|
|
.sidebar.drop_target {
|
|
position: relative;
|
|
}
|
|
.sidebar.drop_target::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: var(--color-accent);
|
|
opacity: 0.1;
|
|
}
|
|
#center[snapside]::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background-color: var(--color-accent);
|
|
box-shadow: 0 0 20px #ffffff80;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 6;
|
|
}
|
|
#center[snapside=top]::after {
|
|
bottom: unset;
|
|
height: 3px;
|
|
}
|
|
#center[snapside=bottom]::after {
|
|
top: unset;
|
|
height: 3px;
|
|
}
|
|
#center[snapside=left_bar]::after {
|
|
right: unset;
|
|
width: 3px;
|
|
}
|
|
#center[snapside=right_bar]::after {
|
|
left: unset;
|
|
width: 3px;
|
|
}
|
|
#center[snapside=top]::before,
|
|
#center[snapside=bottom]::before {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: var(--color-accent);
|
|
opacity: 0.1;
|
|
height: 64px;
|
|
z-index: 6;
|
|
}
|
|
#center[snapside=bottom]::before {
|
|
top: unset;
|
|
bottom: 0;
|
|
}
|
|
|
|
body.is_mobile #panel_uv,
|
|
body.is_mobile #panel_color {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/*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_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;
|
|
}
|
|
.bar.slider_input_combo input.tool[type="range"] {
|
|
float: none;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
.bar.slider_input_combo > .numeric_input {
|
|
width: 72px;
|
|
float: none;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.bar.slider_input_combo > .numeric_input > input {
|
|
padding-left: 8px;
|
|
padding-bottom: 3px;
|
|
border: none;
|
|
background-color: transparent;
|
|
}
|
|
.bar.slider_input_combo > input.tool[type="number"] {
|
|
width: 52px;
|
|
float: none;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
text-align: left;
|
|
padding-left: 8px;
|
|
padding-bottom: 3px;
|
|
}
|
|
.tool.display_scale_invert {
|
|
position: relative;
|
|
}
|
|
.bar.display_slot_section_bar {
|
|
display: flex;
|
|
margin-right: 2px;
|
|
margin-top: 2px;
|
|
}
|
|
.bar.display_slot_section_bar p {
|
|
flex-grow: 1;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
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*/
|
|
#outliner_search_bar {
|
|
width: 100%;
|
|
}
|
|
#cubes_list {
|
|
padding-top: 1px;
|
|
overflow-y: scroll;
|
|
--indentation-offset: 16px;
|
|
}
|
|
#cubes_list > li:last-child {
|
|
margin-bottom: 180px;
|
|
}
|
|
.outliner_object > i {
|
|
flex: 0 0 20px;
|
|
text-align: center;
|
|
padding-top: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.outliner_object > i.fa_big {
|
|
font-size: unset;
|
|
}
|
|
.outliner_object > i[class*=" icon-"]:not(.fa) {
|
|
padding-top: 0px;
|
|
}
|
|
.outliner_object > i.icon_off {
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.outliner_object > i.material-icons,
|
|
#outliner_drag_helper > i.material-icons {
|
|
padding-top: 2px;
|
|
width: 20px;
|
|
font-size: 19px;
|
|
}
|
|
.outliner_opener_placeholder {
|
|
width: 18px;
|
|
height: 14px;
|
|
float: left;
|
|
}
|
|
.outliner_object {
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 2px;
|
|
box-sizing: border-box;
|
|
padding-left: calc(var(--indentation) * var(--indentation-offset));
|
|
}
|
|
.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-guidelines);
|
|
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;
|
|
top: 0;
|
|
}
|
|
.drag_hover[order="1"]::before {
|
|
bottom: -1px;
|
|
}
|
|
.drag_hover[order="0"]::before {
|
|
width: 5px;
|
|
height: 28px;
|
|
margin-left: 0;
|
|
border-top-right-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
.drag_hover_level, .drag_hover[order="0"] {
|
|
background-color: var(--color-ui);
|
|
}
|
|
#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_drag_helper > label {
|
|
padding-right: 5px;
|
|
padding-left: 5px;
|
|
}
|
|
input.cube_name {
|
|
width: 0;
|
|
flex: 1 0 0;
|
|
padding-right: 5px;
|
|
padding-left: 5px;
|
|
pointer-events: none;
|
|
color: inherit;
|
|
}
|
|
input.cube_name.renaming {
|
|
pointer-events: auto;
|
|
}
|
|
input.cube_name.locked {
|
|
color: var(--color-subtle_text);
|
|
}
|
|
i.outliner_toggle {
|
|
font-size: 15px;
|
|
}
|
|
i.icon-open-state {
|
|
opacity: 0.7;
|
|
}
|
|
i.icon-open-state:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
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_list {
|
|
padding-bottom: 20px;
|
|
}
|
|
.texture {
|
|
display: flex;
|
|
height: 48px;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
.texture.multi_selected {
|
|
color: var(--color-light);
|
|
background-color: var(--color-button);
|
|
}
|
|
.texture.selected {
|
|
background: var(--color-selected);
|
|
color: var(--color-light);
|
|
}
|
|
.texture > i {
|
|
margin-top: 12px;
|
|
}
|
|
.texture > i.clickable:hover {
|
|
color: var(--color-light);
|
|
}
|
|
.texture > i.icon_off.clickable:hover {
|
|
color: var(--color-text);
|
|
}
|
|
.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 > i.texture_multi_select_icon {
|
|
color: var(--color-accent);
|
|
position: absolute;
|
|
font-size: 26px;
|
|
right: 10px;
|
|
}
|
|
.texture.selected > i.texture_multi_select_icon {
|
|
display: none;
|
|
}
|
|
.texture_drag_helper {
|
|
z-index: 100;
|
|
border: 2px solid var(--color-accent);
|
|
box-shadow: 0 0 16px black;
|
|
height: 48px;
|
|
width: 48px;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
.texture_group_drag_helper {
|
|
position: absolute;
|
|
z-index: 100;
|
|
min-height: 24px;
|
|
min-width: 120px;
|
|
padding: 4px;
|
|
border: 2px solid var(--color-accent);
|
|
background-color: var(--color-ui);
|
|
box-shadow: 0 0 16px black;
|
|
pointer-events: none;
|
|
}
|
|
.icon_placeholder {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
.texture_description_wrapper {
|
|
flex-grow: 1;
|
|
overflow-x: hidden;
|
|
}
|
|
.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_group {
|
|
padding-bottom: 4px;
|
|
}
|
|
.texture_group_head {
|
|
height: 32px;
|
|
padding: 4px;
|
|
padding-right: 8px;
|
|
display: flex;
|
|
gap: 5px;
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.texture_group_head:hover {
|
|
color: var(--color-text);
|
|
}
|
|
.texture_group_head > .icon-open-state {
|
|
text-align: center;
|
|
width: 21px;
|
|
margin-top: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
.texture_group_head > label {
|
|
flex-shrink: 1;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
.texture_group_head.folded > label {
|
|
max-width: calc(60% - 50px);
|
|
min-width: 30px;
|
|
}
|
|
.texture_group_head > .in_list_button {
|
|
margin-left: auto;
|
|
}
|
|
.texture_group_mini_icon_list {
|
|
display: flex;
|
|
gap: 2px;
|
|
margin-right: auto;
|
|
margin-left: 4px;
|
|
max-width: 36%;
|
|
overflow: hidden;
|
|
}
|
|
.texture_group_mini_icon_list > .texture_mini_icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
background-color: var(--color-ui);
|
|
flex-shrink: 0;
|
|
margin-right: -8px;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
.texture_group_list {
|
|
margin-left: 14px;
|
|
padding-left: 6px;
|
|
border-left: 2px solid var(--color-guidelines);
|
|
}
|
|
|
|
#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);
|
|
border-bottom: none;
|
|
}
|
|
#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;
|
|
}
|
|
/* Layers */
|
|
#layers_list {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
justify-content: flex-start;
|
|
padding-bottom: 20px;
|
|
}
|
|
.texture_layer {
|
|
display: flex;
|
|
height: 40px;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.texture_layer:first-child {
|
|
margin-bottom: auto;
|
|
}
|
|
.texture_layer:hover {
|
|
color: var(--color-light);
|
|
}
|
|
.texture_layer.selected {
|
|
background-color: var(--color-selected);
|
|
}
|
|
.texture_layer.in_limbo {
|
|
border: 2px dashed var(--color-accent);
|
|
font-style: italic;
|
|
}
|
|
.texture_layer .layer_icon_wrapper {
|
|
height: 40px;
|
|
width: 40px;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
}
|
|
.texture_layer canvas {
|
|
width: 100%;
|
|
}
|
|
.texture_layer > label {
|
|
flex-grow: 1;
|
|
}
|
|
.texture_layer i.toggle_disabled {
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.texture_layer i.icon {
|
|
font-size: 19px;
|
|
margin-top: 1px;
|
|
}
|
|
.texture_layer.drag_hover[order]::before {
|
|
left: -6px;
|
|
}
|
|
|
|
/*Animations*/
|
|
#panel_animations #animations_list {
|
|
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;
|
|
}
|
|
.animation > label > span {
|
|
color: var(--color-subtle_text);
|
|
font-size: 0.92em;
|
|
}
|
|
.in_list_button {
|
|
width: 22px;
|
|
color: var(--color-text);
|
|
}
|
|
.in_list_button:hover {
|
|
color: var(--color-light);
|
|
}
|
|
.in_list_button {
|
|
width: 22px;
|
|
height: 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;
|
|
}
|
|
.keyframe_data_point {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 250px;
|
|
}
|
|
#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.flex label.slidable_input {
|
|
cursor: ew-resize;
|
|
}
|
|
#panel_keyframe .bar input.dark_bordered {
|
|
width: 100%;
|
|
flex-shrink: 1;
|
|
}
|
|
#panel_keyframe .list {
|
|
max-height: 260px;
|
|
overflow-y: auto;
|
|
background-color: transparent;
|
|
}
|
|
#keyframe_bar_effect .tool {
|
|
padding-top: 3px;
|
|
width: 34px;
|
|
text-align: center;
|
|
}
|
|
#keyframe_bar_effect .tool > i {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.bar.flex > .prism-editor-component {
|
|
width: 20px;
|
|
flex-grow: 1;
|
|
}
|
|
.molang_input.prism-editor-component {
|
|
caret-color: var(--color-text);
|
|
min-height: 0;
|
|
}
|
|
.molang_input .prism-editor-placeholder {
|
|
font-family: var(--font-code);
|
|
margin-top: 2px;
|
|
}
|
|
.molang_input pre {
|
|
padding: 2px;
|
|
padding-bottom: 1px;
|
|
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;
|
|
}
|
|
|
|
/* Placeholders */
|
|
#placeholder_buttons li {
|
|
padding: 0px 8px;
|
|
height: 30px;
|
|
margin: 1px;
|
|
padding: 0 8px;
|
|
float: left;
|
|
max-width: 100%;
|
|
background-color: var(--color-button);
|
|
display: flex;
|
|
}
|
|
#placeholder_buttons li[buttontype="impulse"] {
|
|
cursor: pointer;
|
|
}
|
|
#placeholder_buttons li[buttontype="impulse"]:hover {
|
|
color: var(--color-light);
|
|
}
|
|
#placeholder_buttons li > label {
|
|
padding: 4px 3px;
|
|
cursor: inherit;
|
|
}
|
|
#placeholder_buttons li > i {
|
|
padding-top: 4px;
|
|
cursor: inherit;
|
|
}
|
|
#placeholder_buttons li input.dark_bordered {
|
|
width: 54px;
|
|
height: 26px;
|
|
margin-top: 2px;
|
|
}
|
|
#placeholder_buttons li.placeholder_slider label {
|
|
cursor: ew-resize;
|
|
margin-left: 4px;
|
|
min-width: 22px;
|
|
display: inline-block;
|
|
text-align: center;
|
|
}
|
|
#placeholder_buttons li.placeholder_slider label:hover {
|
|
color: var(--color-light);
|
|
}
|
|
|
|
|
|
|
|
/*Timeline*/
|
|
#panel_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;
|
|
cursor: pointer;
|
|
}
|
|
.timeline_marker > i {
|
|
position: relative;
|
|
pointer-events: none;
|
|
left: 5px;
|
|
top: -4px;
|
|
color: var(--color);
|
|
}
|
|
.timeline_marker:hover > i {
|
|
top: -3px;
|
|
}
|
|
#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: calc(var(--timeline-height) - 24px);
|
|
}
|
|
#timeline_onion_skin_point {
|
|
position: absolute;
|
|
z-index: 2;
|
|
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-text);
|
|
border-radius: 2px;
|
|
}
|
|
#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_custom_range_indicator {
|
|
position: absolute;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
height: 100%;
|
|
top: 0;
|
|
opacity: 0.86;
|
|
border-radius: 3px;
|
|
background-color: var(--color-button);
|
|
border-right: 1px solid var(--color-border);
|
|
border-left: 1px solid var(--color-border);
|
|
}
|
|
|
|
#panel_timeline .keyframe {
|
|
position: absolute;
|
|
margin-left: -6px;
|
|
z-index: 3;
|
|
text-align: center;
|
|
width: 13.5px;
|
|
height: 23px;
|
|
}
|
|
#panel_timeline .keyframe i {
|
|
margin-top: 3px;
|
|
font-size: 16px;
|
|
margin-left: -1px;
|
|
pointer-events: none;
|
|
display: block;
|
|
}
|
|
#panel_timeline .keyframe i.keyframe_icon_smaller {
|
|
font-size: 11pt;
|
|
margin-top: 4px;
|
|
margin-left: -1px;
|
|
}
|
|
#panel_timeline .keyframe i.keyframe_icon_step {
|
|
font-size: 16pt;
|
|
margin-top: 4px;
|
|
margin-left: -2px;
|
|
transform: rotate(-90deg);
|
|
}
|
|
#panel_timeline .keyframe.has_expressions::after {
|
|
content: "M";
|
|
position: absolute;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 10px;
|
|
color: var(--color-back);
|
|
top: 3px;
|
|
left: 0;
|
|
font-weight: 600;
|
|
}
|
|
#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);
|
|
}
|
|
#panel_timeline .keyframe.selected i {
|
|
color: var(--color-accent) !important;
|
|
z-index: 4;
|
|
}
|
|
#panel_timeline .keyframe:hover {
|
|
z-index: 4;
|
|
}
|
|
|
|
.keyframe_bezier_handle {
|
|
background-color: var(--color-back);
|
|
border: 2px solid var(--color-text);
|
|
border-radius: 50%;
|
|
height: 10px;
|
|
width: 10px;
|
|
margin: 1px;
|
|
margin-top: 3px;
|
|
cursor: move;
|
|
position: absolute;
|
|
}
|
|
.keyframe_bezier_handle:hover, .keyframe_bezier_handle:active {
|
|
border-color: var(--color-accent);
|
|
}
|
|
.keyframe_bezier_handle::after {
|
|
content: "";
|
|
display: block;
|
|
position: relative;
|
|
background-color: var(--color-grid);
|
|
height: 2px;
|
|
width: var(--length);
|
|
transform-origin: left;
|
|
transform: rotate(var(--angle));
|
|
top: 2px;
|
|
left: 3px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#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;
|
|
border-bottom: 1px solid var(--color-border);
|
|
height: calc(100% + 1px);
|
|
}
|
|
#timeline_timestamp {
|
|
font-family: var(--font-code);
|
|
padding: 2px;
|
|
padding-left: 8px;
|
|
overflow: hidden;
|
|
}
|
|
#timeline_corner > span {
|
|
color: var(--color-subtle_text);
|
|
font-family: var(--font-code);
|
|
text-align: center;
|
|
padding: 2px;
|
|
width: 24px;
|
|
flex-shrink: 100;
|
|
}
|
|
#timeline_framenumber {
|
|
color: var(--color-subtle_text);
|
|
font-family: var(--font-code);
|
|
margin-right: auto;
|
|
padding: 2px;
|
|
white-space: nowrap;
|
|
}
|
|
#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;
|
|
}
|
|
#timeline_vue.graph_editor li.animator {
|
|
width: fit-content;
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 5;
|
|
}
|
|
#timeline_vue.graph_editor li.animator > div {
|
|
width: fit-content !important;
|
|
}
|
|
.channel_head {
|
|
position: sticky;
|
|
left: 0;
|
|
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.off {
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.animator_channel_bar .channel_head .text_button .channel_mute {
|
|
font-size: 11pt;
|
|
}
|
|
.animator_channel_bar .channel_head .text_button .fa-eye-slash,
|
|
.animator_channel_bar .channel_head .text_button .fa-volume-mute {
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.animator_channel_bar .channel_head .text_button.rotation_global {
|
|
width: 20px;
|
|
}
|
|
.animator_channel_bar .channel_head .text_button.rotation_global > i {
|
|
font-size: 18px;
|
|
margin: 2px;
|
|
}
|
|
.channel_head span {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
overflow: hidden;
|
|
}
|
|
.animator_channel_bar .channel_head:not(.selected) span {
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.animator.boneless .animator_head_bar .channel_head span {
|
|
color: #ff6b6b;
|
|
}
|
|
.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;
|
|
pointer-events: none;
|
|
}
|
|
.keyframe .keyframe_waveform > polygon {
|
|
fill: var(--color-grid);
|
|
stroke: none;
|
|
stroke-width: 0;
|
|
pointer-events: initial;
|
|
}
|
|
.keyframe .keyframe_waveform > polygon:hover {
|
|
fill: var(--color-accent);
|
|
}
|
|
|
|
#timeline_graph_editor {
|
|
position: absolute;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
overflow: hidden;
|
|
}
|
|
#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 svg text {
|
|
stroke: var(--color-subtle_text);
|
|
font-weight: 200;
|
|
opacity: 0.8;
|
|
}
|
|
#timeline_graph_editor svg .main_graph:not(.selected) {
|
|
opacity: 0.35;
|
|
}
|
|
#timeline_graph_editor svg .loop_graph:not(.selected) {
|
|
opacity: 0.25;
|
|
}
|
|
#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;
|
|
}
|
|
|
|
#timeline_graph_editor_amplifier {
|
|
position: absolute;
|
|
width: 14px;
|
|
border-radius: 7px;
|
|
background-color: var(--color-ui);
|
|
right: 12px;
|
|
margin-top: 29px;
|
|
z-index: 5;
|
|
}
|
|
#timeline_graph_editor_amplifier > div {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: auto;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 7px;
|
|
cursor: ns-resize;
|
|
background-color: var(--color-button);
|
|
}
|
|
#timeline_graph_editor_amplifier > div:hover {
|
|
background-color: var(--color-accent);
|
|
}
|
|
#timeline_graph_editor_amplifier > div:last-child {
|
|
top: auto;
|
|
bottom: 0;
|
|
}
|
|
|
|
/* Animation Controllers */
|
|
#animation_controllers_wrapper {
|
|
flex-grow: 1;
|
|
background-color: var(--color-back);
|
|
overflow: auto;
|
|
}
|
|
#animation_controller_presets {
|
|
width: 240px;
|
|
position: absolute;
|
|
margin: auto;
|
|
left: 0;
|
|
right: 0;
|
|
margin-top: 16px;
|
|
}
|
|
#animation_controller_presets li {
|
|
cursor: pointer;
|
|
margin-bottom: 2px;
|
|
text-decoration: underline;
|
|
}
|
|
#animation_controller_presets li:hover {
|
|
color: var(--color-light);
|
|
}
|
|
#animation_controllers_wrapper > ul {
|
|
display: flex;
|
|
flex-direction: row;
|
|
min-width: fit-content;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
#animation_controllers_wrapper .controller_state {
|
|
width: 300px;
|
|
flex-shrink: 0;
|
|
padding-bottom: 8px;
|
|
background-color: var(--color-ui);
|
|
box-shadow: 0 0 10px rgb(0 0 0 / 22%);
|
|
border: 1px solid transparent;
|
|
transition: width 100ms ease-in-out;
|
|
position: relative;
|
|
}
|
|
#animation_controllers_wrapper .controller_state.selected {
|
|
width: min(100vw, 300px);
|
|
border-color: var(--color-accent);
|
|
z-index: 19;
|
|
}
|
|
#animation_controllers_wrapper .controller_state:focus-within {
|
|
z-index: 20;
|
|
}
|
|
#animation_controllers_wrapper .controller_state.folded {
|
|
width: 54px;
|
|
}
|
|
.controller_state_title_bar {
|
|
height: 30px;
|
|
background-color: var(--color-button);
|
|
display: flex;
|
|
cursor: pointer;
|
|
transition: background-color var(--blend-transition) linear, color var(--blend-transition) linear;
|
|
}
|
|
.controller_state_title_bar > label {
|
|
padding: 3px 10px;
|
|
flex-grow: 1;
|
|
cursor: inherit;
|
|
overflow: hidden;
|
|
}
|
|
.controller_state_title_bar.folded > label {
|
|
padding: 3px 4px;
|
|
}
|
|
.initial_state .controller_state_title_bar > label {
|
|
text-decoration: underline;
|
|
}
|
|
.controller_state_title_bar > .tool {
|
|
width: 28px;
|
|
color: inherit;
|
|
}
|
|
.controller_state.selected .controller_state_title_bar {
|
|
background-color: var(--color-accent);
|
|
color: var(--color-accent_text);
|
|
}
|
|
.controller_state_section_title {
|
|
cursor: pointer;
|
|
padding: 2px 10px;
|
|
padding-right: 5px;
|
|
height: 30px;
|
|
display: flex;
|
|
margin-top: 6px;
|
|
}
|
|
.controller_state_section_title:hover > i.icon-open-state {
|
|
color: var(--color-light);
|
|
}
|
|
.controller_state_section_title > i {
|
|
width: 18px;
|
|
margin-top: 3px;
|
|
}
|
|
.controller_state_section_title > label {
|
|
cursor: inherit;
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.controller_state_section_title > .text_button {
|
|
width: 24px;
|
|
text-align: center;
|
|
}
|
|
.controller_state_section_title > .text_button:first-of-type {
|
|
margin-left: auto;
|
|
}
|
|
.controller_state > .prism-editor-component:focus-within {
|
|
width: calc(200% + 20px);
|
|
box-shadow: 0 0 0 1px var(--color-accent);
|
|
}
|
|
.controller_animation {
|
|
display: flex;
|
|
gap: 3px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.controller_animation input {
|
|
background-color: transparent;
|
|
border: none;
|
|
width: 50%;
|
|
}
|
|
.controller_transition {
|
|
display: flex;
|
|
gap: 3px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.controller_transition:focus-within,
|
|
.controller_animation:focus-within {
|
|
width: calc(200% + 20px);
|
|
box-shadow: 0 0 0 1px var(--color-accent);
|
|
}
|
|
.controller_transition bb-select {
|
|
flex-grow: 1;
|
|
}
|
|
.controller_transition .prism-editor-component {
|
|
width: calc(100% - 110px);
|
|
}
|
|
.controller_particle:not(:last-child),
|
|
.controller_sound:not(:last-child) {
|
|
margin-bottom: 10px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 2px solid var(--color-button);
|
|
}
|
|
.controller_particle > .bar,
|
|
.controller_sound > .bar {
|
|
height: auto;
|
|
min-height: 30px;
|
|
margin-top: 2px;
|
|
}
|
|
.controller_particle > .bar > label,
|
|
.controller_sound > .bar > label {
|
|
padding: 3px 8px;
|
|
min-width: 20px;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
background-color: var(--color-button);
|
|
}
|
|
|
|
.controller_item_drag_handle {
|
|
width: 15px;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
cursor: grab;
|
|
background-color: var(--color-button);
|
|
margin-right: 2px;
|
|
}
|
|
.controller_transition .controller_item_drag_handle {
|
|
background-color: var(--color-marker);
|
|
}
|
|
span.controller_state_section_info {
|
|
margin: 0 8px;
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.controller_state_input_bar {
|
|
display: flex;
|
|
padding-right: 8px;
|
|
}
|
|
.controller_state_input_bar label {
|
|
flex-grow: 1;
|
|
padding: 3px 8px;
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.controller_state .prism-editor-wrapper {
|
|
font-size: 0.9em;
|
|
padding-top: 2px;
|
|
}
|
|
.controller_state input[type=text] {
|
|
font-size: 0.96em;
|
|
flex-grow: 1;
|
|
}
|
|
.controller_state input[type=checkbox] {
|
|
width: 38px;
|
|
}
|
|
.controller_add_column {
|
|
width: 20px;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
margin: 12px 0px;
|
|
position: relative;
|
|
}
|
|
.controller_add_column > i {
|
|
top: calc(50% - 26px);
|
|
left: -1px;
|
|
position: absolute;
|
|
}
|
|
.controller_add_column:hover {
|
|
color: var(--color-light);
|
|
background-color: var(--color-ui);
|
|
}
|
|
|
|
.controller_state_gate {
|
|
--height: 10px;
|
|
background-color: var(--color-button);
|
|
height: var(--height);
|
|
min-width: 28px;
|
|
max-width: 210px;
|
|
border-radius: calc(var(--height) * 0.5);
|
|
position: absolute;
|
|
cursor: crosshair;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
z-index: 19;
|
|
}
|
|
.controller_state.selected .controller_state_gate {
|
|
background-color: var(--color-accent);
|
|
}
|
|
.controller_state_gate:hover {
|
|
background-color: var(--color-selected);
|
|
}
|
|
.controller_state_gate_top {
|
|
top: calc(var(--height) * -0.5);
|
|
box-shadow: 0 1px 0 var(--color-ui);
|
|
}
|
|
.controller_state_gate_bottom {
|
|
bottom: calc(var(--height) * -0.5);
|
|
}
|
|
#animation_controllers_pickwhip {
|
|
position: relative;
|
|
height: 2px;
|
|
transform-origin: left;
|
|
background-color: var(--color-accent);
|
|
pointer-events: none;
|
|
z-index: 50;
|
|
}
|
|
#animation_controllers_pickwhip::before {
|
|
content: "\f0da";
|
|
font-family: 'Font Awesome 6 Free';
|
|
font-weight: 900;
|
|
font-size: 20px;
|
|
display: block;
|
|
position: absolute;
|
|
right: 0;
|
|
top: -5px;
|
|
height: 13px;
|
|
width: 10px;
|
|
line-height: 11px;
|
|
color: var(--color-accent);
|
|
}
|
|
#animation_controllers_wrapper.connecting_controllers .controller_state:hover:not(.selected) {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.controller_state_connection_wrapper_top,
|
|
.controller_state_connection_wrapper_bottom {
|
|
height: calc(20px + var(--max-layer) * 10px);
|
|
position: relative;
|
|
}
|
|
.controller_state_connection {
|
|
position: absolute;
|
|
height: calc(15px + var(--layer) * 10px);
|
|
--color-connection: var(--color-grid);
|
|
border: 2px solid var(--color-connection);
|
|
--corner-radius: 5px;
|
|
cursor: pointer;
|
|
transition: border-color var(--blend-transition) linear;
|
|
}
|
|
.controller_state_connection_wrapper_top > .controller_state_connection {
|
|
border-bottom: none;
|
|
border-top-left-radius: var(--corner-radius);
|
|
border-top-right-radius: var(--corner-radius);
|
|
bottom: 0;
|
|
}
|
|
.controller_state_connection_wrapper_bottom > .controller_state_connection {
|
|
border-top: none;
|
|
border-bottom-left-radius: var(--corner-radius);
|
|
border-bottom-right-radius: var(--corner-radius);
|
|
}
|
|
.controller_state_connection::before {
|
|
content: "\f0d9";
|
|
font-family: 'Font Awesome 6 Free';
|
|
font-weight: 900;
|
|
font-size: 20px;
|
|
display: block;
|
|
position: absolute;
|
|
text-align: center;
|
|
left: 0;
|
|
right: 0;
|
|
height: 13px;
|
|
line-height: 11px;
|
|
color: var(--color-connection);
|
|
}
|
|
.controller_state_connection_wrapper_top > .controller_state_connection::before {
|
|
content: "\f0d9";
|
|
top: -7px;
|
|
}
|
|
.controller_state_connection_wrapper_bottom > .controller_state_connection::before {
|
|
content: "\f0da";
|
|
bottom: -8px;
|
|
}
|
|
.controller_state_connection::after {
|
|
content: "\f0d9";
|
|
font-family: 'Font Awesome 6 Free';
|
|
font-weight: 900;
|
|
font-size: 21px;
|
|
display: block;
|
|
position: absolute;
|
|
width: 12px;
|
|
line-height: 11px;
|
|
height: 10px;
|
|
color: var(--color-connection);
|
|
}
|
|
.controller_state_connection_wrapper_top > .controller_state_connection::after {
|
|
content: "\f0d7";
|
|
bottom: -2px;
|
|
left: -8px;
|
|
}
|
|
.controller_state_connection_wrapper_bottom > .controller_state_connection::after {
|
|
content: "\f0d8";
|
|
top: -2px;
|
|
right: -6px;
|
|
}
|
|
.controller_state_connection.relevant {
|
|
--color-connection: var(--color-text);
|
|
}
|
|
.controller_state_connection.selected {
|
|
--color-connection: var(--color-marker);
|
|
z-index: 1;
|
|
}
|
|
.controller_state_connection:hover {
|
|
--color-connection: var(--color-light);
|
|
}
|
|
|
|
|
|
/*UV*/
|
|
.UVEditor {
|
|
position: relative;
|
|
--color-background: var(--color-back);
|
|
--color-frame: var(--color-ui);
|
|
}
|
|
#preview > .UVEditor {
|
|
--color-background: var(--color-dark);
|
|
--color-frame: var(--color-back);
|
|
background-color: var(--color-background);
|
|
}
|
|
#preview > .UVEditor > #uv_title_bar,
|
|
#preview > .UVEditor #toggle_uv_overlay_anchor
|
|
{
|
|
display: none;
|
|
}
|
|
.UVEditor > .toolbar {
|
|
margin-top: 3px;
|
|
}
|
|
#uv_resolution_status {
|
|
margin: 2px;
|
|
padding: 0px 5px;
|
|
pointer-events: auto;
|
|
}
|
|
#uv_resolution_status:hover {
|
|
color: var(--color-light);
|
|
}
|
|
|
|
#uv_viewport {
|
|
height: 320px;
|
|
width: 320px;
|
|
margin: auto;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
#uv_frame {
|
|
height: 320px;
|
|
width: 320px;
|
|
margin-bottom: 0;
|
|
position: relative;
|
|
border: 4px solid var(--color-frame);
|
|
box-shadow: 0 0 0 1800px var(--color-background);
|
|
box-sizing: content-box;
|
|
--color-uv-unselected: var(--color-grid);
|
|
--color-uv-selected: white;
|
|
--color-uv-hover: var(--color-accent);
|
|
--color-uv-background: rgba(50, 70, 240, 0.14);
|
|
--color-uv-background-hover: rgba(50, 70, 240, 0.3);
|
|
--uv-line-width: 2px;
|
|
}
|
|
#uv_frame .selection_rectangle {
|
|
z-index: 8;
|
|
}
|
|
#uv_frame.overlay_mode {
|
|
--color-uv-unselected: var(--color-grid);
|
|
--color-uv-selected: var(--color-grid);
|
|
--color-uv-hover: var(--color-grid);
|
|
--color-uv-background: transparent;
|
|
--uv-line-width: 1px;
|
|
}
|
|
#uv_frame.overlay_mode .uv_face,
|
|
#uv_frame.overlay_mode .uv_face * {
|
|
pointer-events: none;
|
|
}
|
|
|
|
body[mode=paint] #uv_frame {
|
|
cursor: crosshair;
|
|
}
|
|
#uv_frame > #texture_canvas_wrapper > canvas,
|
|
#uv_frame > img {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
object-fit: cover;
|
|
object-position: 0 0;
|
|
}
|
|
/* Fix in Firefox + iPadOS */
|
|
#uv_frame_spacer {
|
|
width: 1px;
|
|
height: 1px;
|
|
pointer-events: none;
|
|
position: relative;
|
|
}
|
|
#uv_texture_grid {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
object-fit: cover;
|
|
object-position: 0 0;
|
|
}
|
|
#uv_texture_grid path {
|
|
fill: none;
|
|
stroke-width: 0.4px;
|
|
stroke: var(--color-grid);
|
|
}
|
|
#uv_texture_grid path.bold_grid {
|
|
stroke-width: 0.86px;
|
|
}
|
|
div#uv_brush_outline {
|
|
border: 2px solid white;
|
|
width: calc(var(--radius) * 2px);
|
|
height: calc(var(--radius) * 2px);
|
|
margin: calc(var(--radius) * -1px);
|
|
position: absolute;
|
|
pointer-events: none;
|
|
mix-blend-mode: difference;
|
|
z-index: 1;
|
|
}
|
|
div#uv_brush_outline.circle {
|
|
border-radius: 50%;
|
|
}
|
|
div#uv_copy_brush_outline {
|
|
border: 2px dashed white;
|
|
width: calc(var(--radius) * 2px);
|
|
height: calc(var(--radius) * 2px);
|
|
margin: calc(var(--radius) * -1px);
|
|
position: absolute;
|
|
pointer-events: none;
|
|
mix-blend-mode: difference;
|
|
z-index: 1;
|
|
}
|
|
div#uv_copy_brush_outline::after {
|
|
content: "\2b";
|
|
font-family: 'Font Awesome 6 Free';
|
|
font-weight: 900;
|
|
font-size: 19px;
|
|
position: absolute;
|
|
margin: auto;
|
|
top: calc(50% - 15px);
|
|
right: -10px;
|
|
left: -10px;
|
|
color: white;
|
|
width: 16px;
|
|
}
|
|
div#uv_brush_line_preview {
|
|
margin: calc(var(--radius) * 1px);
|
|
position: relative;
|
|
height: 2px;
|
|
transform-origin: left;
|
|
background-color: #cccccc;
|
|
pointer-events: none;
|
|
}
|
|
canvas.move_texture_with_uv {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.uv_panel_texture_name:hover {
|
|
color: var(--color-light);
|
|
cursor: pointer;
|
|
}
|
|
#uv_selection_frame {
|
|
border: 2px dashed var(--color-grid);
|
|
pointer-events: none;
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-top: -1px;
|
|
}
|
|
#uv_rotate_handle {
|
|
width: 21.4px;
|
|
height: 21.4px;
|
|
left: -21px;
|
|
top: -21px;
|
|
position: absolute;
|
|
text-align: center;
|
|
cursor: url('../assets/rotate_cursor.png') 9 9, auto;
|
|
background: var(--color-back);
|
|
border-radius: 12px;
|
|
pointer-events: initial;
|
|
}
|
|
#uv_rotate_handle:hover {
|
|
color: var(--color-light);
|
|
}
|
|
#uv_scale_handle {
|
|
width: 18px;
|
|
height: 18px;
|
|
right: -16px;
|
|
bottom: -16px;
|
|
position: absolute;
|
|
text-align: center;
|
|
cursor: nw-resize;
|
|
background-color: var(--color-back);
|
|
pointer-events: initial;
|
|
}
|
|
#uv_scale_handle:hover {
|
|
color: var(--color-light);
|
|
}
|
|
#uv_scale_handle i {
|
|
transform: scaleY(-1);
|
|
font-size: 16px;
|
|
padding-top: 2px;
|
|
}
|
|
#uv_selection_outline {
|
|
--color-selection-outline-a: black;
|
|
--color-selection-outline-b: white;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
width: calc(100% + 2px);
|
|
height: calc(100% + 2px);
|
|
top: -1px;
|
|
left: -1px;
|
|
object-fit: cover;
|
|
object-position: 0 0;
|
|
}
|
|
#uv_selection_outline path {
|
|
fill: none;
|
|
stroke-width: 2px;
|
|
stroke: var(--color-selection-outline-a);
|
|
}
|
|
#uv_selection_outline path.dash_overlay {
|
|
stroke: var(--color-selection-outline-b);
|
|
stroke-dasharray: 6px 4px;
|
|
stroke-dashoffset: 0;
|
|
animation: selection-outline-shift 700ms linear infinite;
|
|
animation-timing-function: steps(3, end);
|
|
}
|
|
@keyframes selection-outline-shift {
|
|
0% {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
100% {
|
|
stroke-dashoffset: -10px;
|
|
}
|
|
}
|
|
|
|
.face_properties_toggle {
|
|
width: 32px;
|
|
flex-grow: 0 !important;
|
|
}
|
|
.face_properties_toggle > i {
|
|
margin: 1px auto;
|
|
}
|
|
#face_properties_header_bar {
|
|
display: flex;
|
|
height: 28px;
|
|
color: var(--color-subtle_text);
|
|
}
|
|
#face_properties_header_bar li:first-child {
|
|
flex-grow: 1;
|
|
text-align: center;
|
|
}
|
|
#uv_face_properties > ul {
|
|
overflow-y: auto;
|
|
margin-bottom: 8px;
|
|
}
|
|
.uv_face_properties_labels {
|
|
height: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 6px;
|
|
gap: 2px;
|
|
text-align: center;
|
|
color: var(--color-subtle_text);
|
|
white-space: nowrap;
|
|
}
|
|
.uv_face_properties_labels > .flexible {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
width: 50px;
|
|
}
|
|
.uv_face_properties_labels label > i {
|
|
vertical-align: top;
|
|
}
|
|
.uv_face_properties_line {
|
|
height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 6px;
|
|
gap: 2px;
|
|
}
|
|
.uv_face_properties_line.selected > label:first-of-type {
|
|
text-decoration: underline;
|
|
}
|
|
.uv_face_properties_line:nth-child(even) {
|
|
background-color: var(--color-back);
|
|
}
|
|
.uv_face_properties_line:nth-child(even) .dark_bordered {
|
|
background-color: var(--color-ui);
|
|
}
|
|
.uv_face_properties_line.disabled {
|
|
color: var(--color-subtle_text);
|
|
opacity: 0.64;
|
|
}
|
|
.uv_face_properties_line > * {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.uv_face_properties_line > .flexible {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
width: 50px;
|
|
}
|
|
.uv_face_properties_line label {
|
|
width: 48px;
|
|
}
|
|
.uv_face_properties_line input[type=checkbox] {
|
|
width: 28px;
|
|
text-align: center;
|
|
}
|
|
.face_properties_texture {
|
|
width: 120px;
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.face_properties_texture:hover {
|
|
color: var(--color-text);
|
|
}
|
|
.face_properties_texture img {
|
|
vertical-align: middle;
|
|
pointer-events: none;
|
|
object-fit: cover;
|
|
margin-right: 2px;
|
|
}
|
|
.face_properties_texture .texture_dummy_icon {
|
|
vertical-align: middle;
|
|
pointer-events: none;
|
|
margin-right: 2px;
|
|
display: inline-block;
|
|
width: 32px;
|
|
height: 32px;
|
|
background-color: var(--color-dark);
|
|
}
|
|
|
|
.cube_box_uv {
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
.cube_box_uv > div {
|
|
position: absolute;
|
|
z-index: 2;
|
|
cursor: move;
|
|
border: var(--uv-line-width) solid var(--color-accent);
|
|
box-sizing: border-box;
|
|
}
|
|
.cube_box_uv > div.uv_fill {
|
|
background-color: var(--color-uv-background);
|
|
}
|
|
.cube_box_uv:hover > div {
|
|
border-color: var(--color-uv-selected);
|
|
z-index: 3;
|
|
}
|
|
.cube_uv_face {
|
|
position: absolute;
|
|
z-index: 2;
|
|
width: var(--width);
|
|
height: var(--height);
|
|
cursor: move;
|
|
border: var(--uv-line-width) solid var(--color-text);
|
|
box-sizing: border-box;
|
|
background-color: var(--color-uv-background);
|
|
text-align: center;
|
|
color: var(--color-subtle_text);
|
|
}
|
|
.cube_uv_face:hover {
|
|
border-color: var(--color-uv-hover);
|
|
background-color: var(--color-uv-background-hover);
|
|
z-index: 3;
|
|
}
|
|
.cube_uv_face.selected:not(.unselected) {
|
|
border-color: var(--color-uv-hover);
|
|
z-index: 4;
|
|
outline: 1px solid var(--color-border);
|
|
}
|
|
.cube_uv_face.unselected,
|
|
.cube_box_uv.unselected {
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
.cube_uv_face.unselected > div,
|
|
.cube_box_uv.unselected > div {
|
|
border-color: var(--color-uv-unselected) !important;
|
|
}
|
|
|
|
.uv_resize_side {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.uv_resize_side.horizontal {
|
|
cursor: n-resize;
|
|
height: 6px;
|
|
margin-top: -4px;
|
|
}
|
|
.uv_resize_side.vertical {
|
|
cursor: w-resize;
|
|
width: 6px;
|
|
margin-left: -4px;
|
|
}
|
|
.uv_resize_corner {
|
|
position: absolute;
|
|
margin: -6px;
|
|
height: 9px;
|
|
width: 9px;
|
|
background-color: white;
|
|
border: 1px solid black;
|
|
z-index: 3;
|
|
}
|
|
.uv_resize_corner.uv_c_nw {cursor: nw-resize;}
|
|
.uv_resize_corner.uv_c_ne {cursor: ne-resize;}
|
|
.uv_resize_corner.uv_c_sw {cursor: sw-resize;}
|
|
.uv_resize_corner.uv_c_se {cursor: se-resize;}
|
|
.uv_resize_corner.uv_c_n {cursor: n-resize;}
|
|
.uv_resize_corner.uv_c_s {cursor: s-resize;}
|
|
.uv_resize_corner.uv_c_w {cursor: w-resize;}
|
|
.uv_resize_corner.uv_c_e {cursor: e-resize;}
|
|
|
|
#uv_seleced_faces {
|
|
display: flex;
|
|
}
|
|
#uv_seleced_faces li {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.mesh_uv_face {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
.mesh_uv_face.selected {
|
|
z-index: 2;
|
|
}
|
|
.mesh_uv_face svg {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
}
|
|
.mesh_uv_face polygon {
|
|
pointer-events: initial;
|
|
fill: var(--color-uv-background);
|
|
stroke: var(--color-uv-unselected);
|
|
stroke-width: var(--uv-line-width);
|
|
}
|
|
.mesh_uv_face:hover polygon {
|
|
stroke: var(--color-uv-hover);
|
|
fill: var(--color-uv-background-hover);
|
|
}
|
|
.mesh_uv_face.selected polygon {
|
|
stroke: var(--color-uv-selected);
|
|
}
|
|
.uv_mesh_vertex {
|
|
position: absolute;
|
|
pointer-events: initial;
|
|
z-index: 3;
|
|
margin: -6px;
|
|
height: 9px;
|
|
width: 9px;
|
|
background-color: white;
|
|
border: 1px solid black;
|
|
cursor: move;
|
|
}
|
|
.uv_mesh_vertex.selected {
|
|
background-color: var(--color-accent);
|
|
}
|
|
.uv_helper_line_x {
|
|
top: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
background-color: var(--color-accent);
|
|
width: 1px;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
.uv_helper_line_y {
|
|
top: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
background-color: var(--color-accent);
|
|
width: 100%;
|
|
height: 1px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.bar.uv_editor_sliders {
|
|
display: flex;
|
|
}
|
|
.bar.uv_editor_sliders > .nslide_tool {
|
|
flex-grow: 1;
|
|
}
|
|
.bar.uv_editor_sliders > .edit_mode_uv_overlay {
|
|
flex-grow: 0;
|
|
margin-left: auto;
|
|
}
|
|
.uv_painter_info {
|
|
display: flex;
|
|
}
|
|
.uv_painter_info span {
|
|
margin: 3px 6px;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
}
|
|
|
|
.main_corner {
|
|
position: absolute;
|
|
}
|
|
.main_corner::after {
|
|
content: "";
|
|
display: block;
|
|
margin: -2px;
|
|
height: 11px;
|
|
width: 11px;
|
|
border: 1px solid white;
|
|
}
|
|
.main_corner.selected::after {
|
|
border-color: var(--color-accent);
|
|
}
|
|
.uv_rotate_field {
|
|
position: absolute;
|
|
width: 15px;
|
|
height: 15px;
|
|
bottom: 6px;
|
|
right: 6px;
|
|
cursor: url('../assets/rotate_cursor.png') 9 9, auto;
|
|
}
|
|
|
|
.joined_uv_bar {
|
|
display: flex;
|
|
}
|
|
.joined_uv_bar > * {
|
|
flex: 1 0 0;
|
|
}
|
|
|
|
.panel .bar.next_to_title {
|
|
margin-top: -34px;
|
|
margin-right: 78px;
|
|
position: relative;
|
|
float: right;
|
|
pointer-events: none;
|
|
}
|
|
body.is_mobile .panel .bar.next_to_title {
|
|
margin-right: 32px;
|
|
}
|
|
.panel .bar.next_to_title > .tool {
|
|
float: right;
|
|
pointer-events: initial;
|
|
}
|
|
|
|
#uv_cube_face_bar {
|
|
display: flex;
|
|
height: 28px;
|
|
}
|
|
#uv_cube_face_bar li {
|
|
flex-grow: 1;
|
|
text-align: center;
|
|
padding: 2px;
|
|
margin: 0 1px;
|
|
}
|
|
#uv_cube_face_bar li:hover {
|
|
color: var(--color-light);
|
|
}
|
|
#uv_cube_face_bar li.selected {
|
|
border-bottom: 3px solid var(--color-accent);
|
|
}
|
|
#uv_cube_face_bar li.disabled {
|
|
color: var(--color-subtle_text);
|
|
}
|
|
|
|
#texture_selection_rect {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
border: 1px dashed white;
|
|
margin: -1px;
|
|
box-sizing: content-box;
|
|
background-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
|
|
}
|
|
#texture_selection_rect.ellipse {
|
|
border-radius: 50%;
|
|
}
|
|
#texture_pasting_overlay {
|
|
position: absolute;
|
|
pointer-events: initial !important;
|
|
}
|
|
#texture_pasting_overlay canvas {
|
|
pointer-events: initial !important;
|
|
}
|
|
#texture_pasting_overlay::before {
|
|
content: "";
|
|
display: block;
|
|
box-sizing: content-box;
|
|
position: absolute;
|
|
border: 1px dashed white;
|
|
margin: -1px;
|
|
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;
|
|
}
|
|
.uv_transparent_face {
|
|
margin: 8px auto auto;
|
|
color: var(--color-subtle_text);
|
|
max-width: fit-content;
|
|
}
|
|
.copy_paste_tool_control {
|
|
height: 30px;
|
|
flex-grow: 1;
|
|
}
|
|
.copy_paste_tool_control .tool.button_place {
|
|
color: var(--color-confirm);
|
|
float: right;
|
|
}
|
|
.copy_paste_tool_control .tool.button_cancel {
|
|
color: var(--color-close);
|
|
float: right;
|
|
}
|
|
.uv_layer_limbo_options {
|
|
position: absolute;
|
|
bottom: 52px;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
padding: 0 4px;
|
|
width: fit-content;
|
|
z-index: 20;
|
|
}
|
|
.uv_layer_limbo_options > button {
|
|
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.uv_layer_transform_handles {
|
|
border: 1px solid var(--color-text);
|
|
position: absolute;
|
|
cursor: move;
|
|
}
|
|
|
|
/*Chat*/
|
|
#panel_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;
|
|
clear: both;
|
|
}
|
|
#chat_history li b {
|
|
margin-left: -6px;
|
|
user-select: text;
|
|
-webkit-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;
|
|
-webkit-user-select: text;
|
|
}
|
|
#chat_history li span.timestamp {
|
|
color: var(--color-subtle_text);
|
|
font-size: 0.8em;
|
|
margin-top: 2px;
|
|
float: right;
|
|
}
|
|
#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 .chosen {
|
|
width: 56px;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
#color_panel_head .chosen > .main,
|
|
#color_panel_head .chosen > .secondary {
|
|
width: 32px;
|
|
height: 28px;
|
|
border: 1px solid var(--color-border);
|
|
position: absolute;
|
|
}
|
|
#color_panel_head .chosen > .main {
|
|
top: 2px;
|
|
left: 0;
|
|
width: 34px;
|
|
height: 30px;
|
|
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
|
}
|
|
#color_panel_head .chosen > .secondary {
|
|
top: 18px;
|
|
left: 18px;
|
|
}
|
|
#color_panel_head .chosen > .selected {
|
|
border-color: var(--color-accent);
|
|
border-width: 2px;
|
|
}
|
|
#color_panel_head .chosen > .switcher {
|
|
top: 0;
|
|
right: 0;
|
|
position: absolute;
|
|
height: 22px;
|
|
width: 22px;
|
|
}
|
|
#color_panel_head .chosen > .switcher > .icon {
|
|
margin-top: 0;
|
|
font-size: 19px;
|
|
}
|
|
|
|
#color_panel_head .side {
|
|
height: 100%;
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
}
|
|
#color_panel_head .side input {
|
|
width: 100%;
|
|
height: 26px;
|
|
padding: 0 8px;
|
|
font-family: var(--font-code);
|
|
background-color: var(--color-back);
|
|
}
|
|
#color_history {
|
|
width: 100%;
|
|
height: 17px;
|
|
margin-top: 1px;
|
|
display: flex;
|
|
}
|
|
#color_history > li {
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
width: 30px;
|
|
height: 100%;
|
|
min-width: 18px;
|
|
cursor: pointer;
|
|
}
|
|
#color_history > li:hover {
|
|
border: 1px solid var(--color-back);
|
|
}
|
|
|
|
#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;
|
|
line-height: 0;
|
|
}
|
|
#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);
|
|
}
|
|
#center #panel_color .sp-top.sp-cf {
|
|
height: var(--height);
|
|
}
|
|
/* Skin Pose */
|
|
#skin_pose_selector {
|
|
display: flex;
|
|
}
|
|
#skin_pose_selector > li {
|
|
flex-grow: 1;
|
|
height: 48px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
}
|
|
#skin_pose_selector > li:hover {
|
|
color: var(--color-light);
|
|
}
|
|
#skin_pose_selector > li.selected {
|
|
border-bottom: 3px solid var(--color-accent);
|
|
}
|
|
#skin_pose_selector > li:active {
|
|
padding-top: 1px;
|
|
}
|
|
#skin_pose_selector > li .pose_icon {
|
|
background-color: var(--color-text);
|
|
pointer-events: none;
|
|
width: 100%;
|
|
height: 44px;
|
|
mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
-webkit-mask-size: contain;
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
}
|
|
#skin_pose_selector > li:hover .pose_icon {
|
|
background-color: var(--color-light);
|
|
}
|