diff --git a/css/dialogs.css b/css/dialogs.css index 6e307f462..6c59fdd3b 100644 --- a/css/dialogs.css +++ b/css/dialogs.css @@ -8,7 +8,7 @@ opacity: 0.6; z-index: 19; } - #dialog_close_button { + .dialog_close_button { position: absolute; right: 0px; top: 0px; @@ -16,11 +16,11 @@ width: 30px; padding: 4px; } - #dialog_close_button:hover { + .dialog_close_button:hover { color: var(--color-light); background-color: var(--color-close); } - .dialog:not(.draggable) #dialog_close_button { + .dialog:not(.draggable) .dialog_close_button { top: 8px; right: -34px; } @@ -36,6 +36,7 @@ left: unset; right: unset; bottom: unset; + display: none; } @media (max-device-width: 480px) { @@ -55,6 +56,10 @@ margin-right: auto; margin-left: auto; } + .dialog:not(.ui-resizable) { + min-width: 400px; + max-width: 660px; + } .dialog.paddinged { padding: 24px; padding-bottom: 12px; @@ -76,6 +81,9 @@ margin-top: 16px; margin: 16px 4px 0 4px; } + .dialog_bar input[type=checkbox] { + padding: 0 4px; + } .tab_bar { height: 30px; display: flex; @@ -136,9 +144,24 @@ user-select: text; } + dialog .form_bar_file > input { + padding-right: 30px; + } + dialog .form_bar_file > .material-icons { + position: absolute; + margin-left: -28px; + margin-top: 4px; + opacity: 0.75; + } + dialog .form_bar_file:hover > .material-icons { + opacity: 1; + } + /*Settings Dialog*/ dialog#settings { - width: 600px; + min-width: 400px; + max-width: 640px; + width: 100%; } #settings_tab_bar { margin: -24px; @@ -262,6 +285,9 @@ background-color: var(--color-selected); color: var(--color-light); } + #keybindlist li > div.keybindslot.conflict { + border-left: 4px solid var(--color-close); + } #keybindlist li > div:first-child { background: transparent; width: calc(52% - 28px); @@ -291,8 +317,9 @@ margin-bottom: 20px; } .color_field { - min-height: 64px; - width: 100% + min-height: 50px; + width: 100%; + margin: 2px 0; } .color_field .desc { width: calc(100% - 60px); @@ -307,13 +334,15 @@ font-size: 1.2em; } .layout_color_preview { - height: 32px; - width: 42px; + height: 45px; + width: 45px; margin: 4px; - margin-top: 10px; display: inline-block; vertical-align: top; - border: 1px solid var(--color-border); + } + .prism-editor-wrapper .prism-editor__line-numbers { + background-color: var(--color-back) !important; + height: 56px; } /*About*/ @@ -362,6 +391,17 @@ width: 128px; margin-bottom: -7px; } + #import_texture_list li { + height: 112px; + width: 112px; + margin: 4px; + display: inline-block; + background-repeat: no-repeat; + background-size: contain; + } + #import_texture_list li:hover { + background-color: var(--color-selected);; + } body.entity_mode button.entity_mode_uv_button { display: block; padding: 0; @@ -412,6 +452,11 @@ margin-left: 0; } + /*Import entity texture*/ + dialog#select_texture > ul { + max-height: 420px; + } + /*Selection Creator*/ input[type=range].dark_bordered { height: 30px; @@ -502,7 +547,7 @@ float: left; } .dialog#plugins { - width: 660px; + width: 100%; } #plugins .tab_bar { width: calc(100% - 300px); diff --git a/css/general.css b/css/general.css index abe4d12d9..b890329cc 100644 --- a/css/general.css +++ b/css/general.css @@ -48,7 +48,7 @@ display: inline-block; } .code { - font-family: consolas, monospace; + font-family: var(--font-code); font-size: 16px; } .small_text { @@ -84,6 +84,16 @@ input.medium_width { width: 64px; } + .checkerboard { + --color-checker_offset: rgba(0, 0, 0, 0.16); + background-color: var(--color-checkerboard) !important; + background-image: linear-gradient(45deg, var(--color-checkerboard) 25%, transparent 25%), + linear-gradient(-45deg, var(--color-checkerboard) 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, var(--color-checkerboard) 75%), + linear-gradient(-45deg, var(--color-checker_offset) 75%, var(--color-checkerboard) 75%); + background-size: 30px 30px; + background-position: 0 0, 0 15px, 15px -15px, -15px 0px; + } /*General*/ canvas.preview { @@ -195,6 +205,25 @@ display: none !important; } + #center_tip { + top: 0; + left: 0; + right: 0; + margin: auto; + min-width: 200px; + max-width: 100%; + position: absolute; + text-align: center; + background-color: var(--color-accent); + color: var(--color-text_acc); + width: max-content; + padding: 3px 8px; + } + #center_tip i { + vertical-align: text-bottom; + margin-right: 6px; + } + .spinning { -webkit-animation: spin 2s linear infinite; -moz-animation: spin 2s linear infinite; @@ -340,7 +369,7 @@ .text_button:hover { color: var(--color-light); } - .bar_select { + .bar_select_wrapper { position: relative; } .bar_select:hover { @@ -350,7 +379,7 @@ padding-right: 24px; width: 100%; } - .bar_select::before { + .bar_select .bar_select_wrapper::before { content: "\23F7"; display: block; position: absolute; @@ -469,6 +498,32 @@ #start_screen h3 { margin: 0; } + #start_screen .recent_project { + margin: 2px 0; + display: flex; + } + #start_screen .recent_project .icon_wrapper { + flex-shrink: 0; + } + #start_screen .recent_project_name { + font-size: 1.1em; + overflow-x: hidden; + flex-shrink: 1; + flex-grow: 1; + margin: 0 4px; + } + #start_screen .recent_project_date { + flex-shrink: 0; + } + span.recent_project_date:before { + content: ""; + display: block; + position: absolute; + width: 16px; + height: 26px; + margin-left: -20px; + background: linear-gradient(90deg, transparent, var(--color-ui)); + } #start_screen > content { display: block; diff --git a/css/panels.css b/css/panels.css index 8bc4ef079..576c9e689 100644 --- a/css/panels.css +++ b/css/panels.css @@ -61,9 +61,9 @@ width: auto; } - div#center { + #center { grid-area: center; - background: var(--color-dark); + background-color: var(--color-dark); overflow: hidden; min-width: 100px; display: flex; @@ -122,6 +122,7 @@ } + /*Head Bars*/ #main_toolbar { background-color: var(--color-ui);; @@ -187,7 +188,10 @@ } div#header_free_bar.app-drag-region { flex-grow: 1; + } + div#header_free_bar.app-drag-region.resize_space { margin-top: 4px; + height: calc(100% - 4px); } #web_download_button { margin-left: auto; @@ -220,9 +224,12 @@ #windows_window_menu li.wwm_r:hover { background-color: var(--color-close); } - #windows_window_menu li i { + #windows_window_menu li i:not(.material-icons) { font-size: 10pt; } + #windows_window_menu i.material-icons { + vertical-align: bottom; + } #mac_window_menu { width: 68px; } @@ -305,21 +312,25 @@ .tabs_small label { display: inline-block; - width: 16.6%; height: 30px; cursor: default; text-align: center; font-size: 0.9em; + flex-grow: 1; float: left; overflow: hidden; } - .panel#uv .tabs_small label { + #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 { @@ -329,6 +340,19 @@ margin-top: 6px; } +/*Bars*/ + .bar.slider_input_combo input.tool[type="range"] { + width: calc(100% - 67px); + float: none; + } + .bar.slider_input_combo input.tool[type="number"] { + margin-left: -2px; + width: 60px; + background-color: var(--color-back); + float: none; + } + + /*Outliner*/ #cubes_list { padding-top: 1px; @@ -659,6 +683,7 @@ width: 2px; z-index: 2; background-color: var(--color-accent); + pointer-events: none; } #timeline_body .keyframe { position: absolute; @@ -695,7 +720,7 @@ #timeline_corner { width: 144px; flex-shrink: 0; - font-family: consolas, monospace; + font-family: var(--font-code); background-color: var(--color-back); padding: 3px; padding-left: 8px; @@ -815,11 +840,18 @@ .uv_headline .tool { float: right; } + #project_resolution_status { + margin: 3px; + padding: 1px 5px; + pointer-events: auto; + } + #project_resolution_status:hover { + color: var(--color-light); + } #uv_viewport { height: 320px; width: 320px; - background-size: 320px; position: relative; overflow: hidden; } @@ -828,10 +860,16 @@ width: 320px; margin: 4px; margin-bottom: 0; - background-size: 320px; - background-repeat: no-repeat; position: relative; } + #uv_frame > img { + position: absolute; + pointer-events: none; + width: 100%; + height: 100%; + top: 0; + left: 0; + } .uv_mapping_overlay { position: absolute; opacity: 0.4; @@ -983,19 +1021,8 @@ #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; + .bar .tool.disp_range.scaleRange { + max-width: calc(100% - 109px); } input#preset_name { background-color: var(--color-back); @@ -1025,3 +1052,92 @@ margin-left: 50%; margin-right: auto; } + +/*Color*/ + .panel#color { + + } + #color_panel_head { + display: flex; + width: 100%; + height: 50px; + padding: 0 8px; + } + #color_panel_head .main { + width: 32px; + height: 38px; + flex-shrink: 0; + } + #color_panel_head .side { + height: 100%; + flex-grow: 1; + width: calc(100% - 32px); + } + #color_panel_head .side input { + width: 100%; + height: 28px; + padding: 0 8px; + font-family: var(--font-code); + background-color: var(--color-back); + } + #color_panel_head #color_history { + width: 100%; + height: 16px; + overflow-x: scroll; + overflow-y: hidden; + white-space: nowrap; + scroll-behavior: smooth; + } + #color_panel_head #color_history li { + vertical-align: top; + display: inline-block; + width: 30px; + height: 10px; + } + + #main_colorpicker_preview { + margin-top: -35px; + border: 1px solid var(--color-border); + height: 20px; + } + #main_colorpicker_preview > div { + height: 100%; + width: 36px; + } + #palette_list { + padding: 2px 1px; + min-height: 160px; + max-height: 232px; + } + #palette_list .color { + display: inline-block; + float: left; + width: 30px; + height: 30px; + padding: 3px; + } + #palette_list .color:hover { + background-color: var(--color-selected); + } + #palette_list .color.selected { + padding: 1px; + } + #palette_list .color .color_inner { + width: 24px; + height: 24px; + border-radius: 50%; + } + #palette_list .color.selected .color_inner { + border-radius: 4px; + transition: border-radius 20ms ease; + width: 28px; + height: 28px; + } + .panel#color input.sp-input { + width: calc(100% - 40px); + float: left; + } + .panel#color .sp-container.sp-flat { + overflow: visible; + } + diff --git a/css/prism.css b/css/prism.css new file mode 100644 index 000000000..d75255f43 --- /dev/null +++ b/css/prism.css @@ -0,0 +1,128 @@ +/* PrismJS 1.17.1 +https://prismjs.com/download.html#themes=prism-okaidia&languages=css+json */ +/** + * okaidia theme for JavaScript, CSS and HTML + * Loosely based on Monokai textmate theme by http://www.monokai.nl/ + * @author ocodia + */ + + .prism-editor-wrapper code{font-family:inherit;line-height:inherit}.prism-editor-wrapper{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;overflow:auto;-o-tab-size:1.5em;tab-size:1.5em;-moz-tab-size:1.5em}.prism-editor__line-numbers{height:100%;overflow:hidden;-ms-flex-negative:0;flex-shrink:0;padding-top:4px;margin-top:0}.prism-editor__line-number{text-align:right;white-space:nowrap}.prism-editor__code{margin-top:0!important;margin-bottom:0!important;-webkit-box-flex:2;-ms-flex-positive:2;flex-grow:2;min-height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;-o-tab-size:4;tab-size:4;-moz-tab-size:4;outline:none}pre.prism-editor__code:focus{outline:none} + +code[class*="language-"], +pre[class*="language-"] { + color: #f8f8f2; + background: none; + text-shadow: 0 1px rgba(0, 0, 0, 0.3); + font-family: var(--font-code); + font-size: 1em; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; + border-radius: 0.3em; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: var(--color-back); +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #f8f8f2; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.constant, +.token.symbol, +.token.deleted { + color: #f92672; +} + +.token.boolean, +.token.number { + color: #ae81ff; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #a6e22e; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string, +.token.variable { + color: #f8f8f2; +} + +.token.atrule, +.token.attr-value, +.token.function, +.token.class-name { + color: #e6db74; +} + +.token.keyword { + color: #66d9ef; +} + +.token.regex, +.token.important { + color: #fd971f; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + diff --git a/css/setup.css b/css/setup.css index 00ee652dc..15220e76e 100644 --- a/css/setup.css +++ b/css/setup.css @@ -15,6 +15,9 @@ a:-webkit-any-link:hover { color: var(--color-light); } + .bright_ui a:-webkit-any-link:hover { + color: var(--color-accent); + } ::-webkit-scrollbar { width: 6px; height: 6px; @@ -302,8 +305,18 @@ --color-light: #f4f3ff; --color-text_acc: #000006; --color-bright_ui: #f4f3ff; + --color-grid: #495061; + --color-checkerboard: #2f3339; --color-close: #d62e3f; + + --font-custom-main: ''; + --font-custom-headline: ''; + --font-custom-code: ''; + + --font-main: var(--font-custom-main), Assistant, segoe ui, sans-serif; + --font-headline: var(--font-custom-headline), var(--font-custom-main), Assistant, segoe ui, sans-serif; + --font-code: var(--font-custom-code), Consolas, Monospace; } /*Elements*/ @@ -317,7 +330,7 @@ width: 100%; position: fixed; - font-family: Assistant, segoe ui, Helvetiva Neue, arial, sans-serif; + font-family: var(--font-main); font-size: 16px; font-weight: normal; @@ -349,25 +362,24 @@ border-top: 1px solid var(--color-dark); margin: 12px 0; } + h1, h2, h3, h4, h5, h6 { + font-family: var(--font-headline); + } h2 { font-weight: lighter; margin: 0; - font-family: inherit; } h3 { display: inline-block; font-size: 1.28em; padding-bottom: 4px; - font-family: inherit; font-weight: inherit; margin-left: 16px; min-width: 10px; height: 32px; } h4 { - font-family: inherit; font-size: 1.2em; - font-family: inherit; font-weight: inherit; } @@ -404,6 +416,9 @@ background: var(--color-accent); color: var(--color-text_acc) !important; } + button:focus { + text-decoration: underline; + } button.minor { background: transparent; border: none; diff --git a/css/spectrum.css b/css/spectrum.css index 9a46fa5f5..cb0d6c2e5 100644 --- a/css/spectrum.css +++ b/css/spectrum.css @@ -32,7 +32,10 @@ License: MIT box-shadow: none; } .sp-container.sp-flat .sp-picker-container { - width: calc(100% - 70px); + width: calc(100% - 4px); + padding: 2px; + padding-bottom: 0; + margin-bottom: -12px; } .sp-container.sp-flat .sp-button-container { display: none; @@ -260,7 +263,7 @@ License: MIT height: 8px; width: 8px; border: 1px solid var(--color-border); - background: var(--color-back); + background: var(--color-light); cursor: pointer; position:absolute; top:0; @@ -268,23 +271,21 @@ License: MIT margin-top: 3px; margin-left: 3px; } -.sp-val:hover .sp-dragger { - background: var(--color-accent); -} .sp-slider { position: absolute; top:0; cursor:pointer; - height: 12px; + height: 0; left: -3px; right: -3px; - background: white; - background-color: var(--color-ui); - border: 1px solid var(--color-border); - margin-top: 5px; -} -.sp-hue:hover .sp-slider { - background-color: var(--color-accent); + margin-top: -8px; + border-color: var(--color-light); + border-style: solid; + border-width: 8px; + border-top-color: transparent; + border-bottom-color: transparent; + margin-top: -8px; + border-radius: 3px; } /* @@ -306,16 +307,13 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. -ms-box-sizing: border-box; box-sizing: border-box; } -.sp-top { - margin-bottom: 3px; -} /* Input */ .sp-input-container { float: left; width: 64%; margin-bottom: 4px; - margin-top: -2px; + margin-top: -3px; } .sp-input { height: 30px; @@ -323,7 +321,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. padding-left: 4px; background-color: var(--color-back); border: 1px solid var(--color-border); - font-family: monospace; + font-family: var(--font-code); font-size: 0.8em; } .sp-input.sp-validation-error { @@ -333,8 +331,6 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. float:left; position: relative; padding: 10px; - padding-bottom: 300px; - margin-bottom: -300px; } .sp-picker-container { width: 172px; @@ -446,9 +442,6 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. border: 2px solid var(--color-border); } -.sp-container { - padding-bottom: 3px; -} /* Buttons: http://hellohappy.org/css3-buttons/ */ @@ -467,15 +460,6 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. text-decoration:none; } -#main_colorpicker_preview { - width: 100%; - height: 12px; - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); -} -#main_colorpicker_preview > div { - width: 100%; - height: 12px; -} .sp-palette span:hover, .sp-palette span.sp-thumb-active { diff --git a/index.html b/index.html index 6c90b52c0..50c2d12d0 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + Blockbench @@ -12,11 +12,12 @@ + - + -
+
-
{{ checkIfInstallable(plugin) }}
+
{{ plugin.isInstallable() }}
{{ tl('dialog.plugins.author', [plugin.author]) }}
{{ plugin.description }}
@@ -166,7 +172,7 @@

-
clear
+
clear
@@ -195,7 +201,7 @@

-
clear
+
clear
@@ -229,7 +235,7 @@

-
clear
+
clear
@@ -281,7 +287,7 @@

-
clear
+
clear
@@ -321,7 +327,7 @@

-
clear
+
clear
@@ -361,7 +367,7 @@

-
clear
+
clear
@@ -409,7 +415,7 @@

-
clear
+
clear
@@ -444,7 +450,7 @@

-
clear
+
clear
@@ -475,18 +481,18 @@

  • -