mirror of
https://github.com/JannisX11/blockbench.git
synced 2025-04-06 17:31:09 +08:00
2274 lines
44 KiB
CSS
2274 lines
44 KiB
CSS
|
|
/*INIT*/
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
user-select: none;
|
|
outline: none;
|
|
outline-color: rgba(0, 0, 0, 0);
|
|
}
|
|
a:-webkit-any-link {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--color-ui);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-selected);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-accent);
|
|
}
|
|
::selection {
|
|
background: var(--color-accent);
|
|
border-radius: 4px;
|
|
}
|
|
@font-face {
|
|
font-family: 'Material Icons';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local('Material Icons'),
|
|
local('MaterialIcons-Regular'),
|
|
url(../font/MaterialIcons-Regular.woff2) format('woff2'),
|
|
url(../font/MaterialIcons-Regular.woff) format('woff'),
|
|
url(../font/MaterialIcons-Regular.ttf) format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'montserrat';
|
|
font-style: normal;
|
|
src: local('Material Icons'),
|
|
local('Montserrat'),
|
|
url(../font/Montserrat-Regular.ttf) format('truetype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'icomoon';
|
|
src: url('../font/icomoon.eot?t564px');
|
|
src: url('../font/icomoon.eot?t564px#iefix') format('embedded-opentype'),
|
|
url('../font/icomoon.ttf?t564px') format('truetype'),
|
|
url('../font/icomoon.woff?t564px') format('woff'),
|
|
url('../font/icomoon.svg?t564px#icomoon') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
[class^="icon-"]:not(.fa), [class*=" icon-"]:not(.fa) {
|
|
/* use !important to prevent issues with browser extensions that change fonts */
|
|
font-family: 'icomoon' !important;
|
|
speak: none;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-variant: normal;
|
|
text-transform: none;
|
|
line-height: 1;
|
|
font-size: 1.4em;
|
|
max-width: 24px;
|
|
|
|
Better Font Rendering ===========
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.icon-mirror_x:before {
|
|
content: "\e915";
|
|
}
|
|
.icon-mirror_y:before {
|
|
content: "\e916";
|
|
}
|
|
.icon-mirror_z:before {
|
|
content: "\e917";
|
|
}
|
|
.icon-saved:before {
|
|
content: "\e913";
|
|
}
|
|
.icon-player:before {
|
|
content: "\e914";
|
|
}
|
|
.icon-vertexsnap:before {
|
|
content: "\e900";
|
|
}
|
|
.icon-optifine_file:before {
|
|
content: "\e912";
|
|
}
|
|
.icon-objects:before {
|
|
content: "\e902";
|
|
}
|
|
.icon-create_bitmap:before {
|
|
content: "\e901";
|
|
}
|
|
.icon-bow:before {
|
|
content: "\e903";
|
|
}
|
|
.icon-bb_interface:before {
|
|
content: "\e904";
|
|
}
|
|
.icon-blockbench_inverted:before {
|
|
content: "\e911";
|
|
}
|
|
.icon-blockbench:before {
|
|
content: "\e905";
|
|
}
|
|
.icon-x11:before {
|
|
content: "\e906";
|
|
}
|
|
.icon-baby_zombie:before {
|
|
content: "\e907";
|
|
}
|
|
.icon-armor_stand:before {
|
|
content: "\e908";
|
|
}
|
|
.icon-armor_stand_small:before {
|
|
content: "\e909";
|
|
}
|
|
.icon-ground:before {
|
|
content: "\e90a";
|
|
}
|
|
.icon-hud:before {
|
|
content: "\e90b";
|
|
}
|
|
.icon-inventory_full:before {
|
|
content: "\e90c";
|
|
}
|
|
.icon-inventory_nine:before {
|
|
content: "\e90d";
|
|
}
|
|
.icon-inventory_single:before {
|
|
content: "\e90e";
|
|
}
|
|
.icon-player_head:before {
|
|
content: "\e90f";
|
|
}
|
|
.icon-zombie:before {
|
|
content: "\e910";
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.material-icons {
|
|
font-family: 'Material Icons';
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-size: 24px;
|
|
display: inline-block;
|
|
line-height: 1;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
word-wrap: normal;
|
|
white-space: nowrap;
|
|
direction: ltr;
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
i.fa_big {
|
|
font-size: 16pt;
|
|
height: 30px;
|
|
width: 24px;
|
|
text-align: center;
|
|
}
|
|
.dialog .message_box_icon {
|
|
font-size: 40pt;
|
|
float: left;
|
|
padding-right: 8px;
|
|
min-width: 61px;
|
|
max-height: 54px;
|
|
max-width: 62px;
|
|
}
|
|
.dialog img.message_box_icon {
|
|
min-width: auto;
|
|
}
|
|
|
|
/*Vars*/
|
|
body {
|
|
--color-back: #21252b;
|
|
--color-dark: #17191d;
|
|
--color-border: #181a1f;
|
|
--color-ui: #282c34;
|
|
--color-accent: #3e90ff;
|
|
--color-button: #3a3f4b;
|
|
--color-selected: #495061;
|
|
--color-text: #cacad4;
|
|
--color-light: #f4f3ff;
|
|
--color-text_acc: #000006;
|
|
--color-bright_ui: #f4f3ff;
|
|
}
|
|
|
|
/*Elements*/
|
|
|
|
html {
|
|
height: 100%;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
|
|
body {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: fixed;
|
|
|
|
font-family: segoe ui, Helvetiva Neue, arial, sans-serif;
|
|
font-size: 18px;
|
|
font-weight: lighter;
|
|
|
|
color: var(--color-text);
|
|
outline-color: var(--color-accent);
|
|
background-color: var(--color-dark);
|
|
image-rendering: pixelated;
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
cursor: default;
|
|
color: inherit;
|
|
}
|
|
i {
|
|
cursor: default;
|
|
}
|
|
|
|
b {
|
|
font-weight: bolder;
|
|
}
|
|
|
|
h2 {
|
|
font-weight: lighter;
|
|
margin: 0;
|
|
font-family: inherit;
|
|
}
|
|
h3 {
|
|
font-size: 1.26em;
|
|
padding-top: 6px;
|
|
padding-bottom: 4px;
|
|
font-family: inherit;
|
|
}
|
|
h4 {
|
|
font-family: inherit;
|
|
}
|
|
li {
|
|
list-style: none;
|
|
cursor: default;
|
|
}
|
|
div {
|
|
cursor: default;
|
|
}
|
|
div.tool.wide {
|
|
width: 79px;
|
|
padding-top: 0px;
|
|
}
|
|
.hidden, .tooltip_shift, .custom_select ul, .mobile_only, .m_disp {
|
|
display: none;
|
|
}
|
|
div.selection_only {
|
|
visibility: hidden;
|
|
}
|
|
a.open-in-browser {
|
|
cursor: pointer;
|
|
}
|
|
.f_left {
|
|
float: left;
|
|
}
|
|
.f_right {
|
|
float: right !important;
|
|
}
|
|
.i_b {
|
|
display: inline-block;
|
|
}
|
|
label.inline_label {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
padding-top: 2px;
|
|
}
|
|
.progress_bar {
|
|
background-color: var(--color-back);
|
|
height: 20px;
|
|
width: 488px;
|
|
margin-left: 12px;
|
|
margin-bottom: 24px;
|
|
margin-top: 12px;
|
|
}
|
|
.progress_bar_inner {
|
|
background-color: var(--color-accent);
|
|
height: 100%;
|
|
width: 0px;
|
|
}
|
|
.accent_color {
|
|
color: var(--color-accent);
|
|
font-weight: normal;
|
|
}
|
|
.slash {
|
|
color: var(--color-light);
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
font-weight: normal;
|
|
display: inline-block;
|
|
}
|
|
|
|
/*Axis Colors*/
|
|
.color_x {
|
|
color: #d50a0a;
|
|
}
|
|
.color_y {
|
|
color: #23d400;
|
|
}
|
|
.color_z {
|
|
color: #0894ed;
|
|
}
|
|
|
|
/*Inputs*/
|
|
input {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--color-text)
|
|
font-size: 1em;
|
|
font-family: inherit;
|
|
font-weight: lighter;
|
|
outline: none;
|
|
}
|
|
button {
|
|
height: 30px;
|
|
width: 40px;
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-button);
|
|
display: inline-block;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
cursor: default;
|
|
outline: none;
|
|
}
|
|
button:hover {
|
|
background: var(--color-accent);
|
|
color: var(--color-text_acc) !important;
|
|
}
|
|
select {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
outline: none;
|
|
outline-color: var(--color-accent);
|
|
border: none;
|
|
background-color: var(--color-back);
|
|
}
|
|
select option {
|
|
-webkit-appearance: none;
|
|
background-color: var(--color-back);
|
|
outline: none;
|
|
border: none;
|
|
font-weight: lighter;
|
|
}
|
|
textarea {
|
|
width: 100%;
|
|
height: -webkit-fill-available;
|
|
padding: 4px;
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-back);
|
|
color: var(--color-text);
|
|
cursor: default;
|
|
resize: none;
|
|
outline: none;
|
|
}
|
|
.code {
|
|
font-family: consolas, monospace;
|
|
font-size: 16px;
|
|
}
|
|
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button, {
|
|
-webkit-appeareance: none;
|
|
}
|
|
input[type=range] {
|
|
background-color: var(--color-back);
|
|
}
|
|
|
|
input[type=range]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
height: 29px;
|
|
width: 14px;
|
|
border:none;
|
|
background-color: var(--color-accent);
|
|
cursor: pointer;
|
|
margin-top: -4px;
|
|
border-radius: 2px;
|
|
}
|
|
input[type=range][disabled=disabled]::-webkit-slider-thumb {
|
|
background-color: var(--color-button);
|
|
}
|
|
input[type=checkbox] {
|
|
height: 22px;
|
|
width: 40px;
|
|
margin-top: 4px;
|
|
background-color: var(--color-button);
|
|
border: 1px solid var(--color-border);
|
|
outline: none;
|
|
}
|
|
input[type=checkbox]::before {
|
|
content: "";
|
|
display: block;
|
|
height: 30px;
|
|
width: 18px;
|
|
margin-top: -5px;
|
|
background-color: var(--color-back);
|
|
border: 1px solid var(--color-border);
|
|
transition: margin-left 100ms ease;
|
|
}
|
|
input[type=checkbox]:checked::before {
|
|
margin-left: 20px;
|
|
background-color: var(--color-accent);
|
|
transition: margin-left 100ms ease;
|
|
}
|
|
input[type=checkbox][disabled=disabled]::before {
|
|
background-color: var(--color-button);
|
|
}
|
|
input.mediun_width {
|
|
width: 64px;
|
|
}
|
|
div.nslide {
|
|
height: 32px;
|
|
width: 79px;
|
|
padding: 4px;
|
|
padding-left: 6px;
|
|
cursor: e-resize;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
outline: none;
|
|
background-color: var(--color-button);
|
|
}
|
|
#nslide_head {
|
|
margin-top: 30px;
|
|
color: var(--color-light);
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
z-index: 1111;
|
|
background-color: var(--color-back);
|
|
}
|
|
div.nslide_arrow {
|
|
position: absolute;
|
|
z-index: 17;
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 24px;
|
|
margin-top: -27px;
|
|
user-select: none;
|
|
margin-left: -42px;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
div.nslide_arrow.na_right {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
input.toggle_panel {
|
|
display: none;
|
|
}
|
|
label.toggle_panel {
|
|
height: 30px;
|
|
width: 56px;
|
|
padding: 2px;
|
|
display: inline-block;
|
|
background-color: var(--color-back);
|
|
text-align: center;
|
|
}
|
|
input:checked + label.toggle_panel {
|
|
background-color: var(--color-selected);
|
|
}
|
|
|
|
/*Menu Bar*/
|
|
ul#menu_bar {
|
|
height: 32px;
|
|
}
|
|
li.menu_bar_point {
|
|
font-size: 1.1em;
|
|
padding: 12px;
|
|
padding-top: 2px;
|
|
padding-bottom: 0;
|
|
float: left;
|
|
}
|
|
li.menu_bar_point.opened {
|
|
color: var(--color-light);
|
|
background: var(--color-accent);
|
|
}
|
|
li.menu_bar_point:hover {
|
|
color: var(--color-light);
|
|
}
|
|
header div#title {
|
|
width: auto;
|
|
padding-right: 16px;
|
|
padding-left: 10px;
|
|
font-size: 1.2em;
|
|
font-weight: normal;
|
|
font-family: montserrat, arial, sans-serif;
|
|
background: transparent !important;
|
|
color: var(--color-light);
|
|
vertical-align: top;
|
|
min-width: 62px;
|
|
}
|
|
header div#title i {
|
|
display: none;
|
|
padding-top: 1px;
|
|
margin-left: 6px;
|
|
}
|
|
#title span {
|
|
min-width: 128px;
|
|
display: inline-block;
|
|
}
|
|
@media (max-width:1260px) {
|
|
#title span {
|
|
display: none;
|
|
}
|
|
header div#title i {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
#mode_selector {
|
|
float: right;
|
|
font-size: 1.1em;
|
|
}
|
|
#mode_selector li {
|
|
display: inline-block;
|
|
height: 32px;
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
overflow: hidden;
|
|
padding-top: 2px;
|
|
}
|
|
#mode_selector li:hover {
|
|
color: var(--color-light);
|
|
}
|
|
#mode_selector li.selected {
|
|
border-bottom: 4px solid var(--color-accent);
|
|
}
|
|
|
|
/*Actions*/
|
|
.toolbar {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
div.toolbar_wrapper {
|
|
float: none;
|
|
}
|
|
.toolbar.narrow, .toolbar_wrapper.narrow > .toolbar {
|
|
width: auto;
|
|
}
|
|
.toolbar_wrapper.narrow .toolbar .content {
|
|
float: left;
|
|
}
|
|
.toolbar > .tool.toolbar_menu {
|
|
float: right;
|
|
width: 14px;
|
|
margin-left: -4px;
|
|
}
|
|
.toolbar > .tool.toolbar_menu > i {
|
|
width: 16px;
|
|
margin-left: -5px;
|
|
}
|
|
|
|
/*Layout*/
|
|
body {
|
|
display: grid;
|
|
grid-template-columns: 328px auto 300px;
|
|
grid-template-rows: 32px calc(100% - 58px) 26px;
|
|
grid-template-areas:
|
|
"header header header"
|
|
"left_bar preview right_bar"
|
|
"left_bar status_bar right_bar";
|
|
}
|
|
header {
|
|
background-color: var(--color-ui);;
|
|
grid-area: header;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
header > * {
|
|
display: inline-block;
|
|
}
|
|
#loading_error_message {
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: var(--color-dark);
|
|
border: 2px solid var(--color-accent);
|
|
text-align: center;
|
|
padding-top: 160px;
|
|
position: absolute;
|
|
z-index: 250;
|
|
}
|
|
|
|
.sidebar {
|
|
background-color: var(--color-ui);;
|
|
border: 1px solid var(--color-border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
#left_bar {
|
|
grid-area: left_bar;
|
|
}
|
|
#right_bar {
|
|
grid-area: right_bar;
|
|
}
|
|
|
|
.panel.grow {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 133px;
|
|
}
|
|
.panel:not(:last-child) {
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
h3.panel_handle {
|
|
width: calc(100% - 6px);
|
|
height: auto;
|
|
margin: 6px;
|
|
padding: 6px;
|
|
background: var(--color-ui);
|
|
}
|
|
.panel p {
|
|
margin-left: 12px;
|
|
}
|
|
body > h3.panel_handle {
|
|
box-shadow: 0 0 16px black;
|
|
width: auto;
|
|
}
|
|
|
|
div#preview {
|
|
grid-area: preview;
|
|
background: var(--color-dark);
|
|
background-repeat: no-repeat;
|
|
background-size: 1000px;
|
|
overflow: hidden;
|
|
min-width: 100px;
|
|
}
|
|
#status_bar {
|
|
grid-area: status_bar;
|
|
}
|
|
.single_canvas_wrapper {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
body.display_mode .single_canvas_wrapper {
|
|
position: relative;
|
|
}
|
|
.quad_canvas_wrapper {
|
|
height: 50%;
|
|
width: 50%;
|
|
float: left;
|
|
}
|
|
.quad_canvas_wrapper.qcw_x {
|
|
border-right: 2px solid var(--color-grid);
|
|
}
|
|
.quad_canvas_wrapper.qcw_y {
|
|
border-bottom: 2px solid var(--color-grid);
|
|
}
|
|
|
|
.resizer {
|
|
position: absolute;
|
|
z-index: 12;
|
|
}
|
|
.resizer.vertical { /* | */
|
|
cursor: ew-resize;
|
|
width: 4px;
|
|
}
|
|
.resizer.horizontal { /* __ */
|
|
cursor: ns-resize;
|
|
height: 4px;
|
|
}
|
|
.resizer.disabled { /* __ */
|
|
pointer-events: none;
|
|
}
|
|
|
|
/*General*/
|
|
hr {
|
|
border-top: 1px solid var(--color-dark);
|
|
}
|
|
.input_wide {
|
|
width: 100%;
|
|
padding: 5px;
|
|
background-color: var(--color-back);
|
|
}
|
|
canvas.preview {
|
|
background-repeat: no-repeat;
|
|
}
|
|
.bar {
|
|
height: 32px;
|
|
margin-top: 2px;
|
|
}
|
|
.bar > * {
|
|
float: left;
|
|
}
|
|
.text_padding {
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
.toolbar_label {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.tool {
|
|
height: 32px;
|
|
width: 40px;
|
|
margin-left: 1px;
|
|
margin-right: 1px;
|
|
background: transparent;
|
|
display: inline-block;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
cursor: default;
|
|
float: left;
|
|
color: var(--color-text);
|
|
}
|
|
.tool i {
|
|
display: inline-block;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.tool.sel {
|
|
border-bottom: 4px solid var(--color-accent);
|
|
}
|
|
|
|
.tool.widget {
|
|
width: auto;
|
|
padding: 0;
|
|
}
|
|
.tool.widget.bar_text {
|
|
padding: 3px;
|
|
}
|
|
|
|
.tool:hover {
|
|
color: var(--color-light);
|
|
}
|
|
.tool.head_right {
|
|
margin-top: -29px;
|
|
height: 24px;
|
|
float: right;
|
|
}
|
|
.tool.right_tool {
|
|
position: relative;
|
|
}
|
|
.toolbar_wrapper.tools > .toolbar {
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.placeholder {
|
|
width: 20px;
|
|
height: 10px;
|
|
float: left;
|
|
}
|
|
.toolbar_separator {
|
|
width: 2px;
|
|
height: 24px;
|
|
float: left;
|
|
background-color: var(--color-border);
|
|
margin: 4px;
|
|
margin-bottom: 0;
|
|
}
|
|
.text_button:hover {
|
|
color: var(--color-light);
|
|
}
|
|
|
|
select.tool {
|
|
-webkit-appearance: none;
|
|
width: 112px;
|
|
padding-left: 5px;
|
|
background-color: var(--color-back);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
.half {
|
|
width: calc(50% - 2px);
|
|
}
|
|
|
|
.tooltip {
|
|
position: absolute;
|
|
height: 30px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
padding-top: 2px;
|
|
color: var(--color-text_acc);
|
|
margin-top: 32px;
|
|
display: none;
|
|
background: var(--color-bright_ui);
|
|
white-space: nowrap;
|
|
z-index: 125;
|
|
box-shadow: 0 0.4px 3.5px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.tool:hover > .tooltip:not(:hover) {
|
|
display: block;
|
|
}
|
|
.tooltip_shift {
|
|
display: inline;
|
|
display: none;
|
|
}
|
|
|
|
.button {
|
|
display: inline-block;
|
|
width: 30px;
|
|
text-align: center;
|
|
cursor: default;
|
|
}
|
|
|
|
button.large {
|
|
padding: 8px;
|
|
margin-bottom: 8px;
|
|
margin-left: 8px;
|
|
height: 40px;
|
|
min-width: 160px;
|
|
width: auto;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.list {
|
|
background-color: var(--color-back);
|
|
height: calc(100% - 86px);
|
|
width: calc(100% - 2px);
|
|
overflow-y: scroll;
|
|
flex-grow: 1;
|
|
}
|
|
body.animation_mode #cubes_list {
|
|
height: calc(100% - 50px);
|
|
}
|
|
body.animation_mode #cubes_list .outliner_object.cube {
|
|
display: none;
|
|
}
|
|
|
|
h3 {
|
|
font-weight: inherit;
|
|
margin-left: 16px;
|
|
min-width: 10px;
|
|
height: 32px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.spinning {
|
|
-webkit-animation: spin 2s linear infinite;
|
|
-moz-animation: spin 2s linear infinite;
|
|
animation: spin 2s linear infinite;
|
|
}
|
|
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
|
|
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
|
|
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
|
|
|
|
/*Displaytabs*/
|
|
|
|
.tabs_small input[type="radio"]:checked+label {
|
|
background: var(--color-selected);
|
|
}
|
|
|
|
.tabs_small input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
.tabs_small label {
|
|
display: inline-block;
|
|
width: 16.6%;
|
|
height: 30px;
|
|
cursor: default;
|
|
text-align: center;
|
|
font-size: 0.9em;
|
|
float: left;
|
|
overflow: hidden;
|
|
}
|
|
.panel#uv .tabs_small label {
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.tabs_small {
|
|
background-color: transparent;
|
|
height: 30px;
|
|
}
|
|
|
|
.tabs_small label:hover {
|
|
background: var(--color-accent);
|
|
color: var(--color-text_acc);
|
|
}
|
|
|
|
/*Outliner*/
|
|
#cubes_list {
|
|
padding-top: 1px;
|
|
}
|
|
#cubes_list > div.vue-tree > ul > li > *:not(ul) {
|
|
display: none;
|
|
}
|
|
.outliner_node .outliner_object i, .outliner_object i[class^="icon-"] {
|
|
text-align: center;
|
|
width: 18px;
|
|
font-size: 17.3px;
|
|
}
|
|
.outliner_opener_placeholder {
|
|
width: 18px;
|
|
height: 14px;
|
|
float: left;
|
|
}
|
|
.outliner_object {
|
|
width: 100%;
|
|
padding: 2px;
|
|
margin-top: -1px;
|
|
box-sizing: border-box;
|
|
background-color: var(--color-back);
|
|
border: 1px solid var(--color-back);
|
|
}
|
|
.outliner_object.selected {
|
|
background-color: var(--color-selected);
|
|
border: 1px solid var(--color-border);
|
|
margin-top: -1px;
|
|
}
|
|
.outliner_object:hover {
|
|
color: var(--color-light);
|
|
}
|
|
.drag_hover {
|
|
border: 2px solid var(--color-accent);
|
|
}
|
|
.drag_hover.drag_hover_insert_before {
|
|
border-top: 2px solid var(--color-accent);
|
|
border-bottom: none;
|
|
border-right: none;
|
|
border-left: none;
|
|
}
|
|
/*Cancel Dragover for main list*/
|
|
#cubes_list > div > ul > li.outliner_node.parent_li {
|
|
border: none !important;
|
|
}
|
|
.outliner_object input.cube_name {
|
|
width: calc(100% - 80px);
|
|
padding-right: 5px;
|
|
padding-left: 5px;
|
|
pointer-events: none;
|
|
}
|
|
.outliner_object input.cube_name.renaming {
|
|
pointer-events: auto;
|
|
}
|
|
.outliner_object a {
|
|
width: 21px;
|
|
display: inline-block;
|
|
font-size: 13pt;
|
|
float: right;
|
|
}
|
|
body > .outliner_object {
|
|
width: 260px;
|
|
box-shadow: 0 0 4px black;
|
|
}
|
|
body > .outliner_object a {
|
|
display: none;
|
|
}
|
|
div#outliner_stats {
|
|
float: right;
|
|
margin-right: 16px;
|
|
margin-top: 4px;
|
|
font-weight: normal;
|
|
}
|
|
#outliner.more_options input.cube_name {
|
|
width: calc(100% - 143px);
|
|
}
|
|
#outliner:not(.more_options) a.advanced_option {
|
|
display: none;
|
|
}
|
|
#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-text_acc);
|
|
background-color: var(--color-accent);
|
|
text-align: center;
|
|
padding: 0 5px 0 5px;
|
|
font-weight: normal;
|
|
position: absolute;
|
|
top: -20px;
|
|
left: 40px;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
|
|
|
|
|
|
/*Context*/
|
|
.contextMenu {
|
|
position: absolute;
|
|
display: block;
|
|
height: auto;
|
|
min-width: 110px;
|
|
background-color: var(--color-bright_ui);
|
|
color: var(--color-text_acc);
|
|
z-index: 20;
|
|
box-shadow: 0 0 5px black;
|
|
cursor: default;
|
|
white-space: nowrap;
|
|
}
|
|
.contextMenu.sub {
|
|
display: none;
|
|
margin-top: -31px;
|
|
}
|
|
.contextMenu li {
|
|
height: 35px;
|
|
padding: 4px;
|
|
padding-left: 34px;
|
|
padding-right: 8px;
|
|
}
|
|
.contextMenu li.parent {
|
|
padding-right: 20px;
|
|
}
|
|
.contextMenu li.parent::before {
|
|
content: "\f105";
|
|
display: inline-block;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: inherit;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
float: right;
|
|
margin-top: 6px;
|
|
margin-right: -12px;
|
|
}
|
|
.contextMenu li.focused, .contextMenu li.parent.opened {
|
|
background-color: var(--color-accent);
|
|
}
|
|
.contextMenu li i {
|
|
float: left;
|
|
margin-bottom: -5px;
|
|
margin-top: 1px;
|
|
margin-right: 4px;
|
|
margin-left: -28px;
|
|
}
|
|
.contextMenu li img {
|
|
cursor: default;
|
|
height: 16px;
|
|
width: 16px;
|
|
color: var(--color-text);
|
|
white-space: nowrap;
|
|
margin-bottom: -1px;
|
|
margin-left: -23px;
|
|
margin-right: 8px;
|
|
}
|
|
.contextMenu li.focused > .contextMenu.sub {
|
|
display: block;
|
|
}
|
|
.contextMenu li.opened > .contextMenu.sub {
|
|
display: block;
|
|
}
|
|
li.menu_separator {
|
|
height: 2px;
|
|
width: 100%;
|
|
padding: 0;
|
|
background-color: var(--color-text);
|
|
}
|
|
|
|
/*Action Select*/
|
|
#action_selector {
|
|
position: absolute;
|
|
right: 0;
|
|
left: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
top: 200px;
|
|
width: 360px;
|
|
height: 42px;
|
|
box-shadow: 0 0 5px black;
|
|
}
|
|
#action_selector > input {
|
|
width: 100%;
|
|
height: 42px;
|
|
padding: 5px;
|
|
padding-left: 12px;
|
|
background-color: var(--color-ui);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
#action_selector > i {
|
|
position: absolute;
|
|
right: 6px;
|
|
top: 9px;
|
|
}
|
|
#action_selector > ul {
|
|
background-color: var(--color-bright_ui);
|
|
color: var(--color-text_acc);
|
|
min-height: 20px;
|
|
width: 300px;
|
|
margin-left: 8px;
|
|
box-shadow: 0 0 5px black;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
#action_selector > ul > li {
|
|
padding: 4px;
|
|
}
|
|
#action_selector > ul > li.selected {
|
|
background-color: var(--color-accent);
|
|
}
|
|
#action_selector > ul > li div.icon_wrapper {
|
|
display: inline-block;
|
|
height: 26px;
|
|
vertical-align: text-top;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#bar_item_list {
|
|
max-height: 400px;
|
|
margin-bottom: 20px;
|
|
overflow-y: scroll;
|
|
min-height: 80px;
|
|
border: 1px solid var(--color-border);
|
|
border-right: none;
|
|
}
|
|
#bar_item_list li {
|
|
padding: 4px;
|
|
}
|
|
#bar_item_list li:hover {
|
|
color: var(--color-light);
|
|
}
|
|
|
|
/*Textures*/
|
|
.texture {
|
|
height: 50px;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
padding: 8px;
|
|
border: 1px solid transparent;
|
|
box-sizing: border-box;
|
|
}
|
|
.texture:hover .texture_name {
|
|
color: var(--color-light);
|
|
}
|
|
.texture.selected {
|
|
background: var(--color-selected);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
.texture > i {
|
|
margin-top: 4px;
|
|
}
|
|
.texture > i.clickable:hover {
|
|
color: var(--color-light);
|
|
}
|
|
.texture > i:not(.clickable) {
|
|
opacity: 0.5;
|
|
}
|
|
.texture > * {
|
|
float: left;
|
|
}
|
|
div.texture_icon_wrapper {
|
|
height: 48px;
|
|
width: 48px;
|
|
margin-top: -8px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.texture.selected img.texture_icon {
|
|
margin-top: 0;
|
|
}
|
|
.texture_drag_helper {
|
|
border: 1px solid var(--color-border);
|
|
z-index: 100;
|
|
box-shadow: 0 0 16px black;
|
|
}
|
|
.icon_placeholder {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
.texture_id {
|
|
display: none !important;
|
|
}
|
|
|
|
.texture_remove {
|
|
width: 24px;
|
|
}
|
|
|
|
.texture_name {
|
|
margin-top: 3px;
|
|
margin-left: 6px;
|
|
margin-right: 4px;
|
|
width: calc(100% - 82px);
|
|
overflow: hidden;
|
|
font-size: 0.94em;
|
|
cursor: default;
|
|
}
|
|
.texture.particle .texture_name {
|
|
width: calc(100% - 106px);
|
|
}
|
|
.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;
|
|
}
|
|
|
|
|
|
/*Animations*/
|
|
.panel#animations #animations_list {
|
|
min-height: 126px;
|
|
max-height: 294px;
|
|
}
|
|
.animation {
|
|
height: 42px;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
padding: 8px;
|
|
border: 1px solid transparent;
|
|
box-sizing: border-box;
|
|
}
|
|
.animation:hover {
|
|
color: var(--color-light);
|
|
}
|
|
.animation.selected {
|
|
background: var(--color-selected);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
.animation > i {
|
|
margin-top: 2px;
|
|
margin-right: 4px;
|
|
}
|
|
.animation > * {
|
|
float: left;
|
|
}
|
|
.animation > .animation_name {
|
|
width: calc(100% - 28px);
|
|
}
|
|
|
|
/*Timeline*/
|
|
#timeline {
|
|
display: none;
|
|
}
|
|
body.animation_mode #timeline {
|
|
display: block;
|
|
height: 130px;
|
|
background-color: var(--color-dark);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
body.animation_mode #preview .single_canvas_wrapper {
|
|
height: calc(100% - 130px);
|
|
}
|
|
#timeline_inner {
|
|
overflow-y: hidden;
|
|
overflow-x: scroll;
|
|
position: relative;
|
|
background-color: var(--color-back);
|
|
height: 129px;
|
|
border-left: 1px solid var(--color-border);
|
|
}
|
|
#timeline_inner #timeline_marker {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
height: 29px;
|
|
width: 20px;
|
|
top: 0;
|
|
margin-left: -9px;
|
|
border: 2px solid var(--color-accent);
|
|
border-top-width: 6px;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
z-index: 3;
|
|
}
|
|
#timeline_inner #timeline_marker:before {
|
|
content: "";
|
|
display: block;
|
|
margin-left: 7px;
|
|
margin-top: 23px;
|
|
height: 200px;
|
|
width: 2px;
|
|
background-color: var(--color-accent);
|
|
}
|
|
#timeline_inner .keyframe {
|
|
position: absolute;
|
|
margin-left: -11px;
|
|
z-index: 3;
|
|
}
|
|
#timeline_inner .keyframe.selected {
|
|
color: var(--color-accent);
|
|
}
|
|
#timeline_head {
|
|
float: left;
|
|
width: 120px;
|
|
background-color: var(--color-ui);
|
|
}
|
|
#timeline_head > * {
|
|
height: 30px;
|
|
width: 100%;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
#timeline_head > #timeline_corner {
|
|
font-family: consolas, monospace;
|
|
background-color: var(--color-back);
|
|
padding: 3px;
|
|
padding-left: 8px;
|
|
overflow: hidden;
|
|
}
|
|
#timeline_head > .channel_head {
|
|
height: 31px;
|
|
padding: 4px;
|
|
text-align: right;
|
|
}
|
|
#timeline_head > .channel_head span {
|
|
width: 86px;
|
|
float: right;
|
|
margin-top: -2px;
|
|
overflow: hidden;
|
|
}
|
|
#timeline_head > .channel_head .text_button {
|
|
width: 26px;
|
|
height: 25px;
|
|
font-size: 16pt;
|
|
float: right;
|
|
}
|
|
#timeline_time {
|
|
height: 30px;
|
|
position: relative;
|
|
background-color: var(--color-ui);
|
|
border-bottom: 1px solid var(--color-border);
|
|
margin-left: 8px;
|
|
}
|
|
div#timeline_time:before, div#timeline_time:after {
|
|
content: "";
|
|
background-color: var(--color-button);
|
|
width: 100%;
|
|
height: 2px;
|
|
display: block;
|
|
position: absolute;
|
|
top: 60px;
|
|
z-index: 0;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
div#timeline_time:after {
|
|
top: 90px;
|
|
}
|
|
.timeline_timecode {
|
|
border-left: 2px solid var(--color-border);
|
|
padding-left: 4px;
|
|
padding-top: 2px;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
.timeline_timecode:first-child:before {
|
|
content: "";
|
|
width: 8px;
|
|
margin-left: -14px;
|
|
z-index: 1;
|
|
top: -28px;
|
|
height: 125px;
|
|
position: absolute;
|
|
background-color: var(--color-ui);
|
|
margin-top: 28px;
|
|
border-right: 1px solid var(--color-border);
|
|
}
|
|
/*Keyframe Panel*/
|
|
.panel#keyframe .tabs_small label {
|
|
font-size: 1em;
|
|
height: 32px;
|
|
width: 25%;
|
|
}
|
|
.panel#keyframe .bar label {
|
|
margin-top: 3px;
|
|
margin-left: 8px;
|
|
width: 32px;
|
|
text-align: center;
|
|
}
|
|
.panel#keyframe .bar input.dark_bordered {
|
|
width: calc(100% - 45px);
|
|
}
|
|
|
|
|
|
/*UV*/
|
|
#uv_dialog {
|
|
width: 1108px;
|
|
}
|
|
#uv_dialog .tab {
|
|
width: calc(14.2% - 7px);
|
|
}
|
|
.UVEditor {
|
|
position: relative;
|
|
}
|
|
.UVEditor > .toolbar {
|
|
margin-top: 3px;
|
|
}
|
|
#uv_dialog_all .UVEditor {
|
|
float: left;
|
|
padding: 8px;
|
|
padding-top: 0px;
|
|
border: 1px solid var(--color-border);
|
|
margin-right: -1px;
|
|
margin-bottom: -1px;
|
|
}
|
|
.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_headline.selected {
|
|
background-color: var(--color-button);
|
|
}
|
|
.uv_headline .tool {
|
|
float: right;
|
|
}
|
|
|
|
#uv_frame {
|
|
height: 320px;
|
|
width: 320px;
|
|
margin-left: 3px;
|
|
margin-top: 3px;
|
|
background-size: 320px;
|
|
background-repeat: no-repeat;
|
|
position: relative;
|
|
}
|
|
.uv_mapping_overlay {
|
|
position: absolute;
|
|
opacity: 0.4;
|
|
cursor: inherit;
|
|
pointer-events: none;
|
|
}
|
|
#uv_dialog_toolbar {
|
|
clear: both;
|
|
padding: 12px;
|
|
height: 42px;
|
|
padding-top: 5px;
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
#uv_dialog h2.dialog_handle.entity_mode_only {
|
|
margin: 0;
|
|
}
|
|
|
|
#uv_size {
|
|
height: 320px;
|
|
width: 320px;
|
|
cursor: move;
|
|
box-sizing: border-box;
|
|
z-index: 1;
|
|
}
|
|
.uv_size_handle {
|
|
position: absolute;
|
|
cursor: move;
|
|
}
|
|
#uv_rotation {
|
|
width: 72px;
|
|
margin-top: 1px;
|
|
}
|
|
.uv_transform_info {
|
|
position: absolute;
|
|
display: block;
|
|
right: 0;
|
|
bottom: -3px;
|
|
font-size: 0.8em;
|
|
cursor: default;
|
|
}
|
|
#uv .bar.next_to_title {
|
|
margin-top: -32px;
|
|
position: relative;
|
|
float: right;
|
|
}
|
|
#uv .bar.next_to_title .tool {
|
|
}
|
|
|
|
/*Options*/
|
|
#cube_axis {
|
|
width: 58px;
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
#options .bar .nslide {
|
|
width: 83px;
|
|
}
|
|
#options .bar .tool.wide {
|
|
width: 83px;
|
|
}
|
|
.tool .tooltip.clip_right {
|
|
right: 0;
|
|
}
|
|
|
|
/*Dialog*/
|
|
#blackout {
|
|
display: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #000;
|
|
opacity: 0.5;
|
|
z-index: 17;
|
|
}
|
|
#dialog_close_button {
|
|
position: absolute;
|
|
z-index: 102;
|
|
right: 5px;
|
|
top: 5px;
|
|
height: 28px;
|
|
}
|
|
#dialog_close_button:hover {
|
|
color: var(--color-light);
|
|
}
|
|
.dialog:not(.draggable) #dialog_close_button {
|
|
top: 8px;
|
|
right: -34px;
|
|
}
|
|
|
|
.dialog {
|
|
display: none;
|
|
position: fixed;
|
|
width: 540px;
|
|
top: 0;
|
|
background-color: var(--color-ui);
|
|
border: 1px solid var(--color-border);
|
|
z-index: 18;
|
|
box-shadow: 0 0px 40px #000;
|
|
}
|
|
.dialog:not(.draggable) {
|
|
left: 0;
|
|
right: 0;
|
|
top:0;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
.dialog_bar {
|
|
min-height: 50px;
|
|
height: auto;
|
|
}
|
|
.dialog_bar.narrow {
|
|
min-height: 30px;
|
|
}
|
|
.dialog_bar.button_bar {
|
|
text-align: right;
|
|
}
|
|
.dialog .tab {
|
|
float: left;
|
|
width: calc(25% - 2px);
|
|
height: 34px;
|
|
text-align: center;
|
|
padding-top: 4px;
|
|
margin-left: 2px;
|
|
background: var(--color-dark);
|
|
vertical-align: middle;
|
|
cursor: default;
|
|
}
|
|
.dialog#settings .tab:firstChild {
|
|
margin-left: 0;
|
|
width: 25%;
|
|
}
|
|
.dialog .tab:hover {
|
|
color: var(--color-light);
|
|
}
|
|
.dialog .tab.open {
|
|
background: transparent;
|
|
border-top: none;
|
|
transition: border-top 200 ease-in;
|
|
}
|
|
.dialog .tab_content {
|
|
height: calc(100% - 90px);
|
|
width: 100%;
|
|
padding-bottom: 16px;
|
|
}
|
|
#settings_tab_bar {
|
|
margin: -24px;
|
|
margin-bottom: 0;
|
|
}
|
|
.dialog p {
|
|
margin-top: 16px;
|
|
}
|
|
.dialog h3 {
|
|
margin-left: 16px;
|
|
}
|
|
.dialog.draggable h2 {
|
|
padding-left: 26px;
|
|
margin-top: -24px;
|
|
margin-left: -24px;
|
|
margin-right: -24px;
|
|
background: var(--color-button);
|
|
height: 32px;
|
|
margin-bottom: 20px;
|
|
font-size: 1.12em;
|
|
}
|
|
.dialog_handle {
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
}
|
|
.dialog_bar label.in_toolbar {
|
|
padding-left: 0;
|
|
}
|
|
|
|
#keybindlist {
|
|
max-height: 600px;
|
|
margin-bottom: 20px;
|
|
overflow-y: scroll;
|
|
}
|
|
#keybindlist > li {
|
|
width: 100%;
|
|
min-height: 34px;
|
|
padding-left: 6px;
|
|
}
|
|
#settings h3 > i {
|
|
margin-top: 5px;
|
|
float: left;
|
|
}
|
|
#settings h3:hover {
|
|
color: var(--color-light);
|
|
}
|
|
#keybindlist .tool {
|
|
height: 32px;
|
|
width: 25px;
|
|
float: right;
|
|
}
|
|
#keybindlist li > div.keybindslot {
|
|
width: calc(48% - 32px);
|
|
padding: 2px;
|
|
padding-left: 8px;
|
|
height: 30px;
|
|
background-color: var(--color-button);
|
|
border: 1px solid var(--color-border);
|
|
font-size: 0.84em;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
}
|
|
#keybindlist li > div.keybindslot:hover {
|
|
background-color: var(--color-selected);
|
|
color: var(--color-light);
|
|
}
|
|
|
|
#keybindlist li > div:first-child {
|
|
background: transparent;
|
|
width: calc(52% - 28px);
|
|
text-align: right;
|
|
padding: 2px;
|
|
padding-left: 8px;
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
}
|
|
#keybindlist > li > div:focus {
|
|
color: transparent;
|
|
text-shadow: 0 0 0 var(--color-light);
|
|
background-color: var(--color-dark);
|
|
}
|
|
#settings li h3 {
|
|
margin: 0;
|
|
padding: 0;
|
|
padding-top: 6px;
|
|
}
|
|
#settingslist {
|
|
max-height: 600px;
|
|
margin-bottom: 20px;
|
|
overflow-y: scroll;
|
|
}
|
|
#settingslist > li {
|
|
padding-left: 6px;
|
|
}
|
|
#settingslist li li {
|
|
padding-top: 7px;
|
|
padding-bottom: 7px;
|
|
}
|
|
#settingslist li > .setting_element {
|
|
width: 50px;
|
|
text-align: center;
|
|
float: left;
|
|
margin-top: 12px;
|
|
}
|
|
#settingslist li > .setting_label {
|
|
display: inline-block;
|
|
margin-left: 8px;
|
|
width: 420px;
|
|
}
|
|
#settingslist .setting_name {
|
|
font-size: 1.1em;
|
|
height: 24px;
|
|
color: var(--color-light);
|
|
}
|
|
#settingslist .setting_description {
|
|
font-size: 0.9em;
|
|
color: var(--color-text);
|
|
}
|
|
#settingslist input[type=number] {
|
|
height: 28px;
|
|
width: 100%;
|
|
background-color: var(--color-button);
|
|
padding-left: 4px;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
#settingslist input[type=text] {
|
|
padding: 10px;
|
|
margin-left: 5px;
|
|
}
|
|
#settingslist select {
|
|
margin: 8px;
|
|
width: 96%;
|
|
}
|
|
#settingslist li li i {
|
|
font-size: 27pt;
|
|
width: 34px;
|
|
margin-top: -6px;
|
|
}
|
|
#settingslist li li:hover i {
|
|
color: var(--color-light);
|
|
}
|
|
|
|
|
|
|
|
#credits a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.dialog#updater .dialog_bar.narrow {
|
|
padding-top: 3px;
|
|
}
|
|
button#update_button {
|
|
margin-right: 12px;
|
|
float: right;
|
|
margin-top: -64px;
|
|
width: 240px;
|
|
}
|
|
.dialog p.multiline_text {
|
|
margin-top: 0;
|
|
margin-bottom: 20px;
|
|
margin-left: 12px;
|
|
margin-right: 12px;
|
|
font-size: 0.86em;
|
|
user-select: text;
|
|
}
|
|
.dialog#texture_edit p.multiline_text {
|
|
width: 344px;
|
|
min-height: 51px;
|
|
}
|
|
p.multiline_text span {
|
|
user-select: inherit;
|
|
}
|
|
#texture_menu_thumbnail {
|
|
float: right;
|
|
margin-top: 3px;
|
|
margin-right: 12px;
|
|
height: 128px;
|
|
background-color: var(--color-back);
|
|
overflow-y: auto;
|
|
}
|
|
#texture_menu_thumbnail img {
|
|
width: 128px;
|
|
margin-bottom: -7px;
|
|
}
|
|
body.entity_mode button.entity_mode_uv_button {
|
|
display: block;
|
|
padding: 0;
|
|
height: 32px;
|
|
width: 73px;
|
|
border: none;
|
|
}
|
|
|
|
/*Display*/
|
|
.mode_tab {
|
|
display: block;
|
|
float: right;
|
|
height: 32px;
|
|
padding-right: 12px;
|
|
padding-left: 12px;
|
|
margin-left: 4px;
|
|
padding-top: 3px;
|
|
font-size: 1.1em;
|
|
font-weight: normal;
|
|
cursor: pointer;
|
|
background-color: var(--color-back);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
.mode_tab.open {
|
|
background-color: var(--color-selected);
|
|
border-bottom: none;
|
|
cursor: default;
|
|
}
|
|
.mode_tab:not(.open):hover {
|
|
color: var(--color-light);
|
|
}
|
|
#display_settings {
|
|
|
|
}
|
|
#display_bar .tool, #display_ref_bar > div {
|
|
width: calc(100% / 8 - 2px);
|
|
max-width: 52px;
|
|
}
|
|
#display_ref_bar > div > label {
|
|
width: 100%;
|
|
}
|
|
.tool.disp_range {
|
|
width: calc(100% - 67px);
|
|
float: none;
|
|
}
|
|
.tool.disp_range.scaleRange {
|
|
width: calc(100% - 109px);
|
|
float: none;
|
|
}
|
|
.tool.disp_text {
|
|
margin-left: -2px;
|
|
width: 60px;
|
|
background-color: var(--color-back);
|
|
float: none;
|
|
}
|
|
.dialog.paddinged {
|
|
padding: 24px;
|
|
}
|
|
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;
|
|
}
|
|
|
|
|
|
/*Scale*/
|
|
#model_scale_range {
|
|
width: calc(100% - 50px);
|
|
float: left;
|
|
height: 31px;
|
|
padding-top: 3px;
|
|
}
|
|
#model_scale_label {
|
|
width: 50px;
|
|
padding-top: 3px;
|
|
text-align: center;
|
|
float: left;
|
|
}
|
|
#scaling_clipping_warning {
|
|
color: #ff384b;
|
|
}
|
|
.borderless {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
|
|
/*Extrusion*/
|
|
#image_extruder label {
|
|
float: left;
|
|
margin-right: 8px;
|
|
padding-top: 5px;
|
|
}
|
|
#scan_tolerance {
|
|
width: 200px;
|
|
}
|
|
#scan_tolerance_label {
|
|
margin-left: 8px;
|
|
}
|
|
#extrusion_canvas {
|
|
margin-left: 12px;
|
|
border-bottom: 1px solid #000;
|
|
border-right: 1px solid #000;
|
|
}
|
|
button.large:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/*Selection Creator*/
|
|
.dark_bordered {
|
|
height: 32px;
|
|
padding-left: 4px;
|
|
background-color: var(--color-back);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
input[type=range].dark_bordered {
|
|
height: 32px;
|
|
padding-top: 3px;
|
|
padding-left: 0;
|
|
}
|
|
select.dark_bordered {
|
|
color: var(--color-text);
|
|
padding: 6px;
|
|
padding-top: 2px;
|
|
height: 32px;
|
|
}
|
|
label.name_space_left {
|
|
float: left;
|
|
min-width: 155px;
|
|
margin-left: 1px;
|
|
margin-right: 8px;
|
|
}
|
|
label.in_toolbar {
|
|
text-align: left;
|
|
color: var(--color-text);
|
|
padding: 8px;
|
|
padding-top: 3px;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/*Layout Menu*/
|
|
div#color_wrapper {
|
|
columns: 2;
|
|
margin-bottom: 20px;
|
|
}
|
|
.color_field {
|
|
min-height: 64px;
|
|
width: 100%
|
|
}
|
|
.color_field .desc {
|
|
width: 172px;
|
|
display: inline-block;
|
|
}
|
|
.color_field p {
|
|
margin: 0;
|
|
font-size: 0.8em;
|
|
}
|
|
.color_field h4 {
|
|
margin: 0;
|
|
font-size: 1.2em;
|
|
}
|
|
input.color_input {
|
|
-webkit-appearance: none;
|
|
display: none;
|
|
}
|
|
label.color_input {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
outline: none;
|
|
height: 36px;
|
|
width: 46px;
|
|
margin: 4px;
|
|
margin-top: 10px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
#quick_message_box {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 420px;
|
|
z-index: 100;
|
|
min-width: 100px;
|
|
max-width: 200px;
|
|
background-color: var(--color-ui);
|
|
color: var(--color-light);
|
|
box-shadow: 0 0 2px black;
|
|
text-align: center;
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
#overlay_message_box {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
z-index: 130;
|
|
text-align: center;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
.uv_message_box {
|
|
position: absolute;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
z-index: 101;
|
|
min-width: 100px;
|
|
max-width: 200px;
|
|
background-color: var(--color-ui);
|
|
color: var(--color-light);
|
|
box-shadow: 0 0 2px black;
|
|
text-align: center;
|
|
cursor: default;
|
|
top: 40px;
|
|
left: 60px;
|
|
}
|
|
|
|
/*PE Import Dialog*/
|
|
#pe_list {
|
|
max-height: 600px;
|
|
margin-bottom: 20px;
|
|
overflow-y: scroll;
|
|
}
|
|
#pe_list li > * {
|
|
margin: 0;
|
|
margin-left: 12px;
|
|
cursor: default;
|
|
overflow-x: hidden;
|
|
}
|
|
#pe_list li.selected {
|
|
background-color: var(--color-selected);
|
|
}
|
|
#pe_list li > .pe_icon {
|
|
height: 48px;
|
|
width: 48px;
|
|
float: left;
|
|
margin: 4px;
|
|
margin-right: 8px;
|
|
}
|
|
#pe_list li > h4 > span {
|
|
font-size: 0.7;
|
|
}
|
|
|
|
/*Plugin Menu*/
|
|
.bar.next_to_title {
|
|
display: inline-block;
|
|
vertical-align: text-bottom;
|
|
}
|
|
.dialog.draggable .bar.next_to_title {
|
|
margin-top: -51px;
|
|
margin-left: 111px;
|
|
float: left;
|
|
}
|
|
.dialog#plugins {
|
|
width: 660px;
|
|
}
|
|
#plugins .tab {
|
|
border: none;
|
|
margin-left: 0px;
|
|
background: transparent;
|
|
}
|
|
#plugins .tab.open {
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-back);
|
|
border-bottom: none;
|
|
}
|
|
#plugin_list {
|
|
max-height: 600px;
|
|
margin-bottom: 20px;
|
|
overflow-y: scroll;
|
|
min-height: 80px;
|
|
}
|
|
#plugin_list li {
|
|
border: 1px solid var(--color-border);
|
|
height: 128px;
|
|
overflow-y: hidden;
|
|
}
|
|
#plugin_list li.expanded {
|
|
min-height: 128px;
|
|
height: auto;
|
|
}
|
|
#plugin_list li.testing {
|
|
border: 3px solid var(--color-accent);
|
|
}
|
|
#plugin_list li > * {
|
|
margin: 0;
|
|
margin-left: 12px;
|
|
cursor: default;
|
|
}
|
|
#plugin_list li .button_bar {
|
|
height: auto;
|
|
float: right;
|
|
margin-left: -1px;
|
|
margin-top: 6px;
|
|
text-align: right;
|
|
}
|
|
#plugin_list li .button_bar.tiny {
|
|
opacity: 0.6;
|
|
font-size: 0.86em;
|
|
padding-right: 2px;
|
|
}
|
|
#plugin_list li button {
|
|
min-width: 100px;
|
|
width: auto;
|
|
height: 36px;
|
|
float: right;
|
|
padding: 4px;
|
|
margin-left: -1px;
|
|
margin-top: 6px;
|
|
color: var(--color-text);
|
|
transition: width 100ms ease-in;
|
|
}
|
|
#plugin_list li button > i {
|
|
float: left;
|
|
margin-top: 2px;
|
|
}
|
|
#plugin_list li .title {
|
|
width: auto;
|
|
float: left;
|
|
font-size: 1.34em;
|
|
padding-top: 8px;
|
|
margin-bottom: -5px;
|
|
}
|
|
#plugin_list li .title i {
|
|
font-size: 0.9em;
|
|
padding: 3px;
|
|
float: left;
|
|
margin-top: 6px;
|
|
}
|
|
#plugin_list li .title i.plugin_expand_icon {
|
|
display: none;
|
|
}
|
|
#plugin_list li .title:hover i.plugin_expand_icon {
|
|
display: inline-block;
|
|
}
|
|
#plugin_list li .title:hover i.plugin_icon {
|
|
display: none;
|
|
}
|
|
|
|
#plugin_list .author {
|
|
opacity: 0.6;
|
|
font-size: 0.86em;
|
|
clear: both;
|
|
}
|
|
#plugin_list .description {
|
|
font-size: 0.9em;
|
|
height: 48px;
|
|
margin-right: 12px;
|
|
}
|
|
#plugin_list .about {
|
|
margin-right: 12px;
|
|
padding-top: 12px;
|
|
overflow-y: auto;
|
|
max-height: 480px;
|
|
}
|
|
.no_plugin_message {
|
|
text-align: center;
|
|
margin-top: 30px;
|
|
opacity: 0.5;
|
|
}
|
|
.search_bar {
|
|
float: right;
|
|
}
|
|
.search_bar input {
|
|
float: right;
|
|
margin-right: 8px;
|
|
margin-top: 2px;
|
|
padding-right: 20px;
|
|
}
|
|
.search_bar i {
|
|
float: right;
|
|
position: absolute;
|
|
right: 26px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
/* Toolbar Dialog */
|
|
|
|
#bar_item_list {
|
|
max-height: 400px;
|
|
margin-bottom: 20px;
|
|
overflow-y: scroll;
|
|
min-height: 80px;
|
|
border: 1px solid var(--color-border);
|
|
border-right: none;
|
|
}
|
|
#bar_item_list li {
|
|
padding: 4px;
|
|
}
|
|
#bar_item_list li:hover {
|
|
color: var(--color-light);
|
|
}
|
|
#bar_item_list li div.icon_wrapper {
|
|
display: inline-block;
|
|
height: 26px;
|
|
vertical-align: text-top;
|
|
}
|
|
#bar_item_list li:not(:hover) div.icon_wrapper.add, #bar_item_list li:hover div.icon_wrapper.normal {
|
|
display: none;
|
|
}
|
|
#bar_items_current {
|
|
background-color: var(--color-back);
|
|
overflow: hidden;
|
|
height: auto;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
#bar_items_current li {
|
|
min-width: 20px;
|
|
}
|
|
#bar_items_current li .toolbar_separator {
|
|
width: 12px;
|
|
background-color: var(--color-button);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
|
|
/*Status Bar*/
|
|
|
|
#status_bar {
|
|
position: relative;
|
|
padding: 2px;
|
|
padding-top: 0;
|
|
box-sizing: border-box;
|
|
display: block;
|
|
font-size: 0.92em;
|
|
background: var(--color-back);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
#status_bar > div {
|
|
float: left;
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
}
|
|
#status_bar > div#status_fps {
|
|
float: right;
|
|
}
|
|
#status_bar #status_progress {
|
|
position: absolute;
|
|
height: 4px;
|
|
background: var(--color-accent);
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
/*Entity Mode*/
|
|
|
|
a.ml5 i.shade_mirror_on:before {
|
|
content: "\f005";
|
|
}
|
|
a.ml5 i.shade_mirror_off:before {
|
|
content: "\f006";
|
|
}
|
|
body.entity_mode a.ml5 i.shade_mirror_on:before {
|
|
content: "\f005";
|
|
}
|
|
body.entity_mode a.ml5 i.shade_mirror_off:before {
|
|
content: "\f005";
|
|
}
|
|
|
|
|
|
#cubes_list > div > ul > li > ul > li:last-child {
|
|
margin-bottom: 180px;
|
|
}
|
|
|
|
|
|
|
|
#selection_box {
|
|
position: absolute;
|
|
display: block;
|
|
border: 1px solid var(--color-accent);
|
|
background-color: rgba(40,50,60,0.5);
|
|
pointer-events: none;
|
|
} |