blockbench/source/css/style.css
2017-10-14 14:09:42 +02:00

1847 lines
43 KiB
CSS

/*INIT*/
* {
margin: 0;
padding: 0;
user-select: none;
outline: none;
outline-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: var(--color-ui);
}
::-webkit-scrollbar-thumb {
background: var(--color-button);
}
::-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;
Better Font Rendering ===========
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-ground:before {
content: "\e904";
}
.icon-player:before {
content: "\e909";
}
.icon-baby_zombie:before {
content: "\e901";
}
.icon-hud:before {
content: "\e905";
}
.icon-inventory_full:before {
content: "\e906";
}
.icon-inventory_nine:before {
content: "\e907";
}
.icon-inventory_single:before {
content: "\e908";
}
.icon-zombie:before {
content: "\e90a";
}
.icon-x11:before {
content: "\e900";
}
.icon-armor_stand:before {
content: "\e902";
}
.icon-armor_stand_small:before {
content: "\e903";
}
.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;
}
/*Vars*/
body {
--color-back: #21252b;
--color-dark: #17191d;
--color-border: #181a1f;
--color-ui: #282c34;
--color-accent: #3e90ff;
--color-button: #3a3f4b;
--color-hover: #495061;
--color-text: #cacad4;
--color-light: #f4f3ff;
--color-text_acc: #000006;
}
/*Elements*/
html {
height: 100%;
overflow-y: hidden;
}
body {
font-family: segoe ui, arial, sans-serif;
font-size: 18px;
font-weight: lighter;
color: var(--color-text);
height: 100%;
width: 100%;
outline-color: var(--color-accent);
background-color: var(--color-dark);
position: fixed;
}
a {
text-decoration: none;
cursor: default;
}
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;
}
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;
}
label.inline_label {
float: left;
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;
}
/*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;
}
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;
}
.custom_select.ctx ul {
display: block;
}
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);
}
div.nslide:hover {
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;
}
/*Menu Bar*/
.check_label {
float: left;
margin-left: 8px;
}
header div#title {
width: auto;
padding-right: 16px;
padding-left: 06px;
padding-top: 2px;
font-size: 1.24em;
font-weight: normal;
font-family: montserrat, arial, sans-serif;
background: transparent !important;
color: var(--color-light);
float: left;
margin-bottom: -10px;
}
header > ul {
cursor: default;
height: 32px;
float: left;
padding-right: 24px;
}
header ul.dropdown li:hover {
color: var(--color-light);
}
header > ul > li {
height: 32px;
float: left;
padding-top: 3px;
padding-left: 16px;
padding-right: 16px;
}
header > ul > li:hover {
color: var(--color-light);
}
header > ul > li > div {
font-size: 1.1em;
}
header ul li ul.dropdown {
color: var(--color-text);
position: absolute;
display: none;
margin-left: -20px;
background-color: var(--color-back);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
min-width: 160px;
}
header li.ctx > ul.dropdown {
display: block;
}
header li ul li:hover > ul.dropdown {
display: block;
}
header ul.dropdown li {
display: block;
padding: 8px;
padding: 6px;
padding-right: 12px;
margin-left: 30px;
}
header ul.dropdown li i {
position: absolute;
margin-left: -30px;
margin-top: 1px;
}
header ul.dropdown li i.more_icon {
margin-left: 0px;
margin-right: -8px;
margin-top: 1px;
float: right;
position: static;
}
ul.dropdown.level2 {
position: absolute;
left: 180px;
margin-top: -32px;
margin-right: -200px;
}
header ul.dropdown li.menu_seperator {
height: 2px;
widows: 100%;
padding: 0;
margin: 0 8px 0 8px;
background-color: var(--color-border);
}
/*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";
}
body.rtl {
display: grid;
grid-template-columns: 300px auto 328px;
grid-template-rows: 32px auto 26px;
grid-template-areas:
"header header header"
"right_bar preview left_bar"
"right_bar status_bar left_bar";
}
body.rtl div#rotation_main_bar > * {
float: right;
}
body.rtl input#cube_rotate {
right: 0;
}
body.display_mode {
display: grid;
grid-template-columns: 328px auto;
grid-template-rows: 32px auto 26px;
grid-template-areas:
"header header"
"left_bar preview"
"left_bar status_bar";
}
body.display_mode #right_bar {
display: none;
}
body.display_mode #scene_controls {
right: 20px;
}
header {
background-color: var(--color-ui);;
grid-area: header;
overflow: hidden;
z-index: 10;
}
.sidebar {
overflow: hidden;
background-color: var(--color-ui);;
border: 1px solid var(--color-border);
}
#right_bar {
grid-area: right_bar;
}
#left_bar {
grid-area: left_bar;
}
div#preview {
grid-area: preview;
background: var(--color-dark);
background-repeat: no-repeat;
background-size: 1000px;
image-rendering: pixelated;
overflow: hidden;
min-width: 100px;
}
#status_bar {
grid-area: status_bar;
}
.ui {
border-bottom: 1px solid var(--color-border);
}
#donation_hint {
position: absolute;
top: 32px;
background-color: var(--color-ui);
z-index: 17;
left: calc(50% - 150px);
padding: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
opacity: 0.75;
}
#donation_hint a {
text-decoration: underline;
}
.ui#options {
height: 200px;
}
.ui#textures {
bottom: 0;
position: fixed;
top: 520px;
width: 328px;
}
.ui#uv {
height: 482px;
}
.ui#outliner {
height: calc(100% - 200px);
width: 298px;
}
.input_wide {
width: 100%;
padding: 5px;
background-color: var(--color-back);
}
/*General*/
hr {
border-top: 1px solid var(--color-dark);
}
canvas#canvas {
height: 100%;
}
.bar {
height: 32px;
margin-top: 2px;
}
.bar > * {
float: left;
}
.text_padding {
margin-left: 5px;
margin-right: 5px;
}
.toolbar_label {
margin-top: 4px;
}
.tool {
height: 31px;
width: 40px;
padding-top: 4px;
margin-left: 2px;
background: transparent;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: default;
float: left;
color: var(--color-text);
}
.tool.sel {
border-bottom: 4px solid var(--color-accent);
}
.tool:hover {
color: var(--color-light);
}
.tool.head_right {
position: absolute;
margin-left: 285px;
margin-top: -29px;
}
.tool.right_tool {
position: relative;
}
.placeholder {
width: 20px;
height: 10px;
float: left;
}
.toolbar_seperator {
width: 8px;
height: 30px;
float: left;
border-left: 1px solid var(--color-border);
margin-left: 8px;
}
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: 29px;
padding-left: 5px;
padding-right: 5px;
color: var(--color-text);
margin-top: -3px;
display: none;
background: var(--color-button);
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;
width: 160px;
color: var(--color-text);
}
.texture {
vertical-align: middle;
padding: 8px;
border: 1px solid var(--color-border);
box-sizing: border-box;
}
.list {
background-color: var(--color-back);
height: calc(100% - 86px);
width: calc(100% - 2px);
overflow-y: scroll;
}
body.display_mode #cubes_list {
height: calc(100% - 50px);
}
h3 {
font-weight: inherit;
margin-left: 16px;
min-width: 10px;
height: 32px;
display: inline-block;
}
#scene_controls {
position: fixed;
z-index: 14;
bottom: 38px;
right: 320px;
background-color: var(--color-back);
border: 1px solid var(--color-border);
}
#scene_controls_panel {
background-color: var(--color-ui);
}
#scene_controls > img {
margin-right: 5px;
}
#scene_controls_panel > * {
float: left;
}
#scene_controls_panel > .dark_bordered {
width: 60px;
}
#scene_controls_panel > label {
margin-right: 4px;
margin-left: 12px;
}
#scene_controls_panel > input.tool {
margin-top: 2px;
height: 27px;
}
.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); } }
/*Texture*/
.tabs_small input[type="radio"]:checked+label {
background: var(--color-hover);
}
.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;
padding-top: 5px;
float: left;
}
.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;
}
#cubes_list > div > ul > li > ul > li > ul > li > div {
padding-left: 20px;
}
#cubes_list > div > ul > li > ul > li > ul > li > ul > li > div {
padding-left: 40px;
}
#cubes_list > div > ul > li > ul > li > ul > li > ul > li > ul > li > div {
padding-left: 60px;
}
#cubes_list > div > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > div {
padding-left: 80px;
}
#cubes_list > div > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > div {
padding-left: 100px;
}
#cubes_list > div > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul li > div {
padding-left: 120px;
}
.outliner_object i.fa {
text-align: center;
width: 18px;
}
.outliner_opener_placeholder {
width: 18px;
height: 14px;
float: left;
}
.outliner_object {
width: 100%;
max-width: 300px;
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-hover);
border: 1px solid var(--color-border);
margin-top: -1px;
}
.drag_hover {
border: 2px solid var(--color-accent);
}
/*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;
}
.outliner_object a {
width: 21px;
display: inline-block;
font-size: 13pt;
}
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-back);
z-index: 20;
box-shadow: 0 0 8px black;
}
.contextMenu.sub {
display: none;
margin-top: -30px;
}
.contextMenu li {
cursor: default;
padding: 4px;
color: var(--color-text);
white-space: nowrap;
padding-left: 34px;
}
.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;
}
.contextMenu li:hover {
color: var(--color-light);
}
.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:hover > .contextMenu.sub {
display: block;
}
/*Textures*/
.texture {
height: 50px;
background-color: var(--color-button);
white-space: nowrap;
position: relative;
}
.texture.selected {
background: var(--color-hover);
}
.texture > i {
margin-top: 4px;
}
.texture > i:hover {
color: var(--color-light);
}
.texture > * {
float: left;
}
div.texture_icon_wrapper {
height: 48px;
width: 48px;
margin-top: -8px;
overflow: hidden;
position: relative;
}
img.texture_icon {
image-rendering: pixelated;
}
.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: 2px;
margin-left: 6px;
margin-right: 4px;
width: calc(100% - 82px);
overflow: hidden;
}
.texture_error {
position: absolute;
color: red;
margin-left: 5px;
margin-top: 5px;
text-shadow: 0 0 5px #000;
font-size: 28pt;
left: 0;
}
.texture_movie {
position: absolute;
margin-left: -41px;
margin-top: 8px;
text-shadow: 0 0 5px #000;
font-size: 24pt !important;
}
/*UV*/
#uv_dialog {
width: 1108px;
}
#uv_dialog .tab {
width: calc(14.2% - 7px);
}
.UVEditor {
position: relative;
}
#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: cover;
image-rendering: pixelated;
position: relative;
}
#uv_dialog_toolbar {
clear: both;
padding: 12px;
height: 42px;
padding-top: 5px;
border-top: 1px solid var(--color-border);
}
#uv_size {
height: 320px;
width: 320px;
cursor: move;
box-sizing: border-box;
z-index: 1;
}
#uv_rotation {
width: 72px;
margin-top: 1px;
}
.uv_transform_info {
position: absolute;
display: block;
right: 0;
bottom: -3px;
font-size: 0.8em;
cursor: default;
}
/*Options*/
#cube_axis {
width: 58px;
position: relative;
z-index: 5;
}
#options .bar .nslide {
width: 83px;
}
#options .bar .tool.wide {
width: 83px;
}
.tool#origin2geometry .tooltip {
right: 0;
}
#cube_rescale {
margin-top: 1px;
}
input#cube_rotate {
width: 195px;
margin-left: -24px;
margin-right: -24px;
background: transparent;
z-index: 4;
position: absolute;
display: block;
top: 0px;
}
#cube_rotate_dummy {
position: relative;
width: 142px;
height: 31px;
margin-left: 2px;
margin-right: 2px;
background: var(--color-back);
z-index: 0;
}
#cube_rescale_tool {
margin-left: 8px;
}
#cube_rescale_tool .tooltip {
margin-left: -24px;
}
/*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 {
padding-left: 12px;
padding-right: 12px;
height: 50px;
}
.dialog_bar.narrow {
height: 30px;
}
.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: 16px;
}
.dialog p {
margin-top: 16px;
}
.dialog h3 {
margin-left: 16px;
}
.dialog.draggable h2 {
padding-left: 26px;
margin-top: -14px;
margin-left: -14px;
margin-right: -14px;
background: var(--color-button);
height: 32px;
margin-bottom: 20px;
font-size: 1.12em;
}
.dialog_handle {
cursor: pointer;
}
#keybindlist {
max-height: 600px;
margin-bottom: 20px;
overflow-y: scroll;
}
#keybindlist li {
width: 100%;
min-height: 30px;
padding-left: 6px;
}
#keybindlist .tool {
height: 32px;
width: 25px;
}
#keybindlist > li > div.keybindslot {
outline: none;
width: calc(42% - 30px);
float: left;
margin: 2px;
padding: 2px;
padding-left: 8px;
height: 28px;
background-color: var(--color-back);
}
#keybindlist li div:first-child {
background: transparent;
width: calc(58% - 8px);
float: left;
padding: 2px;
padding-left: 8px;
}
#keybindlist > li > div:focus {
color: transparent;
text-shadow: 0 0 0 var(--color-light);
background-color: var(--color-dark);
}
#keybindlist li h3 {
margin: 0;
padding: 0;
padding-top: 6px;
}
#settingslist {
max-height: 600px;
margin-bottom: 20px;
overflow-y: scroll;
}
#settingslist li {
height: 56px;
}
#settingslist li > * {
float: left;
margin-left: 6px;
}
#settingslist li h3 {
margin: 0;
padding: 0;
padding-left: 6px;
margin-top: 10px;
}
#settingslist .setting_name {
display: block;
font-size: 1.1em;
margin-top: -6px;
color: var(--color-light);
}
#settingslist .setting_description {
display: block;
font-size: 0.9em;
margin-top: -7px;
color: var(--color-text);
}
#settingslist input[type=number] {
height: 28px;
width: 40px;
background-color: var(--color-button);
padding-left: 4px;
border: 1px solid var(--color-border);
}
#default_path_icon {
font-size: 27pt;
padding-right: 3px;
}
#credits a:hover {
text-decoration: underline;
}
.blue_icon {
color: var(--color-accent);
margin-top: 1px;
float: left;
margin-right: 5px;
}
.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;
word-wrap: break-word;
font-size: 0.86em;
user-select: text;
}
.dialog#texture_edit p.multiline_text {
width: 344px;
min-height: 51px;
}
#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;
image-rendering: pixelated;
margin-bottom: -7px;
}
/*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-hover);
border-bottom: none;
cursor: default;
}
.mode_tab:not(.open):hover {
color: var(--color-light);
}
#display_settings {
}
#display_bar .tool, #display_ref_bar .tool {
width: 38.5px;
}
.tool.disp_range {
width: 260px;
background-color: var(--color-back);
}
.tool.disp_text {
width: 60px;
background-color: var(--color-back);
}
#display_presets {
margin-left: 5px;
cursor: default;
}
#display_presets ul {
display: none;
position: absolute;
max-height: 214px;
overflow-y: auto;
}
#display_presets.ctx ul {
display: block;
background-color: var(--color-dark)
}
#display_presets ul li {
cursor: default;
height: 36px;
padding: 4px;
}
#display_presets ul li > * {
float: left;
margin-right: 5px;
}
#display_presets ul li > *:hover {
color: var(--color-light);
}
.paddinged {
padding: 14px;
}
input#preset_name {
background-color: var(--color-back);
}
#create_preset .dialog_bar > * {
float: left;
margin-left: 8px;
}
#display_settings p {
padding-left: 6px;
}
/*Web*/
#web_import_btn {
margin-left: 0;
}
#file_upload_label {
height: 40px;
width: 200px;
border: 1px solid var(--color-border);
background: var(--color-button);
display: inline-block;
cursor: default;
padding-top: 6px;
}
#file_upload_label:hover {
background: var(--color-accent);
color: var(--color-text_acc);
}
#file_upload_label i {
float: left;
margin-left: 30px;
margin-right: 5px;
margin-top: 2px;
}
#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);
float: left;
}
label.name_space_left {
float: left;
width: 155px;
}
/*Layout Menu*/
div#color_wrapper {
columns: 2;
}
.color_field {
height: 64px;
width: 100%
}
.color_field .desc {
float: left;
margin-left: 12px;
}
.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;
border: none;
height: 36px;
width: 46px;
margin-top: 10px;
border-radius: 6px;
border-bottom: 2px solid var(--color-button);
float: left;
outline: none;
}
#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;
}
.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;
}
#pe_list li.selected {
background-color: var(--color-hover);
}
/*Plugin Menu*/
.bar.next_to_title {
position: absolute;
margin-left: 146px;
margin-top: -36px;
}
.dialog.draggable .bar.next_to_title {
margin-top: -51px;
margin-left: 111px;
}
.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;
}
#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: 36px;
float: right;
margin-left: -1px;
margin-top: 6px;
}
.tiny {
opacity: 0.6;
font-size: 0.86em;
}
#plugin_list li button {
width: 112px;
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 > * {
float: left;
margin-top: 2px;
}
#plugin_list li button:hover {
width: 130px;
transition: width 100ms ease-in;
}
#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: 7px;
}
.author {
opacity: 0.6;
font-size: 0.86em;
clear: both;
}
.description {
font-size: 0.9em;
}
.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;
}
header ul li.plugin_submenu_hide {
display: none;
}
/*Status Bar*/
#status_bar {
background: var(--color-back);
padding: 2px;
padding-top: 0;
box-sizing: border-box;
display: block;
font-size: 0.92em;
border: 1px solid var(--color-border);
}
#status_bar > div {
float: left;
padding-left: 6px;
padding-right: 6px;
}
#status_bar > div#status_fps {
float: right;
}
@media (max-width:1090px) {
header > ul > li {
padding-right: 3px;
padding-left: 3px;
}
}
@media (max-width:990px) {
#title {
display: none;
}
}
@media (max-width:790px) {
.mode_tab {
display: none;
}
}
@media (max-width:628px) {
body {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 40px calc(100% - 66px) 26px;
grid-template-areas:
"mode_bar"
"main"
"status_bar";
}
.mobile_only {
display: block;
}
.dialog {
width: 100%;
height: 100%;
margin-top: 0;
}
header > ul > li.menu_bar_point {
display: block;
float: none;
height: 42px;
}
header ul div#title {
display: block;
float: none;
height: 42px;
}
header > ul {
width: 100%;
height: 400px;
}
header {
height: 100%;
}
header > ul > li > ul.dropdown {
margin-left: 0;
}
#mobile_tab_bar {
grid-area: mode_bar;
height: 40px;
background-color: var(--color-ui);
}
.mobile_mode_tab {
height: 40px;
width: 25%;
float: left;
padding-top: 8px;
cursor: default;
text-align: center;
color: var(--color-text);
}
.mobile_mode_tab:hover {
color: var(--color-light);
}
.mobile_mode_tab.open {
background-color: var(--color-hover);
color: var(--color-light);
}
}
#cubes_list > div > ul > li > ul > li:last-child {
margin-bottom: 180px;
}