diff --git a/.travis.yml b/.travis.yml index 549783c9b..0293030e4 100644 --- a/.travis.yml +++ b/.travis.yml @@ -19,7 +19,7 @@ jobs: - electron-builder -w --ia32 --publish=always -c.productName='Blockbench_32bit' deploy: provider: releases - api_key: GH_TOKEN + api_key: $GH_TOKEN skip_cleanup: true file: dist/win-unpacked/resources/app.asar diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 000000000..4fee95499 --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,15 @@ +{ + // See https://go.microsoft.com/fwlink/?LinkId=733558 + // for the documentation about the tasks.json format + "version": "2.0.0", + "tasks": [ + { + "type": "npm", + "script": "dev", + "group": { + "kind": "build", + "isDefault": true + } + } + ] +} \ No newline at end of file diff --git a/assets/logo_cutout.svg b/assets/logo_cutout.svg new file mode 100644 index 000000000..2670c08b3 --- /dev/null +++ b/assets/logo_cutout.svg @@ -0,0 +1,66 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/css/dialogs.css b/css/dialogs.css index 5b90613fb..e2e27ffc1 100644 --- a/css/dialogs.css +++ b/css/dialogs.css @@ -32,7 +32,7 @@ background-color: var(--color-ui); color: inherit; border: none; - box-shadow: 0 0px 40px #000; + box-shadow: 0 0px 40px rgba(0, 0, 0, 0.5); left: unset; right: unset; bottom: unset; @@ -69,6 +69,7 @@ margin-top: 4px; margin-bottom: 4px; height: auto; + clear: both; } .dialog_bar::after { content: ""; @@ -89,6 +90,12 @@ .dialog_bar input[type=checkbox] { padding: 0 4px; } + .dialog_vector_group { + display: flex; + } + .dialog_vector_group > input { + min-width: 30px; + } .tab_bar { height: 30px; display: flex; @@ -173,6 +180,9 @@ } /*Settings Dialog*/ + dialog#settings { + width: min(100%, 600px); + } #settings_tab_bar { margin: -24px; margin-bottom: 0; @@ -254,7 +264,7 @@ padding-left: 4px; border: 1px solid var(--color-border); } - #settingslist input[type=text] { + #settingslist input[type=text], #settingslist input[type=password] { padding: 10px; margin-left: 5px; } @@ -265,14 +275,22 @@ #settingslist div.bar_select select { width: 100%; } - #settingslist li li i { + #settingslist li li .setting_icon i { font-size: 26pt; width: 34px; margin-top: -6px; } - #settingslist li li:hover i { + #settingslist li li:hover .setting_icon i { color: var(--color-light); } + .password_toggle { + display: inline-block; + margin-left: 4px; + margin-top: -1px; + width: 24px; + text-align: center; + vertical-align: text-bottom; + } /*Keybinds*/ #keybindlist { @@ -356,6 +374,9 @@ background-color: var(--color-back) !important; height: 56px; } + #css_editor { + border: 1px solid var(--color-border); + } /*About*/ #about_page_title { @@ -695,6 +716,47 @@ top: 30px; } + + +/*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; + min-height: 34px; + 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); + } + /*Action Control*/ #action_selector { position: absolute; @@ -707,7 +769,7 @@ top: 200px; width: 360px; height: 42px; - box-shadow: 0 0 5px black; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } #action_selector > input { width: 100%; @@ -727,7 +789,7 @@ color: var(--color-text); width: 340px; margin-left: 8px; - box-shadow: 0 0 5px black; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } #action_selector > div > ul { background-color: var(--color-bright_ui); diff --git a/css/general.css b/css/general.css index f946c9a46..941a84f5f 100644 --- a/css/general.css +++ b/css/general.css @@ -99,7 +99,7 @@ background-color: var(--color-dark) !important; } -/*General*/ +/*UI Elements*/ canvas.preview { background-repeat: no-repeat; } @@ -139,10 +139,16 @@ .list { background-color: var(--color-back); height: calc(100% - 86px); - width: calc(100% - 2px); + width: 100%; overflow-y: scroll; flex-grow: 1; } + #left_bar .list { + width: calc(100% - 2px); + } + .list::-webkit-scrollbar-track { + background: var(--color-back); + } ul.list_style li { list-style: initial; margin-left: 20px; @@ -167,7 +173,7 @@ padding: 0 12px; background-color: var(--color-bright_ui); color: var(--color-accent_text); - box-shadow: 0 0 2px black; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);; text-align: center; overflow-wrap: break-word; cursor: default; @@ -190,7 +196,7 @@ max-width: 200px; background-color: var(--color-bright_ui); color: var(--color-accent_text); - box-shadow: 0 0 2px black; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);; text-align: center; cursor: default; top: 40px; @@ -263,45 +269,6 @@ @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } -/*Menu Bar*/ - ul#menu_bar { - height: 100%; - } - li.menu_bar_point { - font-size: 17px; - padding: 0 8px; - padding-top: 2px; - display: inline-block; - height: 29px; - font-weight: normal; - } - li.menu_bar_point.opened { - color: var(--color-light); - background: var(--color-accent); - } - li.menu_bar_point:hover { - color: var(--color-light); - } - - #mode_selector { - float: right; - font-size: 1.1em; - height: 30px; - } - #mode_selector li { - display: inline-block; - height: 30px; - margin: 0 5px; - overflow: hidden; - padding-top: 2px; - font-size: 18px; - } - #mode_selector li:hover { - color: var(--color-light); - } - #mode_selector li.selected { - border-bottom: 3px solid var(--color-accent); - } /*Actions*/ .toolbar { @@ -312,7 +279,7 @@ float: none; } .toolbar.narrow, .toolbar_wrapper.narrow > .toolbar { - width: auto; + width: fit-content; } .toolbar_wrapper.narrow .toolbar .content { float: left; @@ -328,14 +295,10 @@ .toolbar.vertical .toolbar_menu { height: 24px; padding: 0; - } - .toolbar_wrapper > .toolbar.vertical .tool .tooltip { - } .toolbar > .tool.toolbar_menu { float: right; width: 14px; - margin-left: -4px; } .toolbar > .tool.toolbar_menu > i { width: 16px; @@ -478,7 +441,7 @@ } .contextMenu li.parent::before { content: "\f105"; - display: inline-block; + display: block; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: inherit; @@ -520,248 +483,4 @@ padding: 0; background-color: var(--color-text); } - @media (max-device-width: 480px) { - .contextMenu li.focused > .contextMenu.sub { - - } - } - -/*Start Screen*/ - #start_screen { - flex-grow: 1; - } - #start_screen h3 { - margin: 0; - } - #start_screen .bar.next_to_title { - margin-top: -40px; - margin-right: -12px; - position: relative; - float: right; - } - #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 .recent_project.thumbnail { - width: 242px; - height: 150px; - - width: 168px; - height: 128px; - position: relative; - float: left; - background-color: var(--color-back); - margin: 1px; - background-size: 150px; - background-repeat: no-repeat; - } - #start_screen .recent_project.thumbnail:hover { - background-color: var(--color-ui); - } - #start_screen .recent_project.thumbnail .recent_project_name { - font-size: 1em; - overflow-x: hidden; - flex-shrink: 1; - flex-grow: 1; - height: 24px; - right: 6px; - left: 6px; - bottom: 0; - position: absolute; - } - - #start_screen > content { - display: block; - margin-top: 40px; - max-width: 900px; - height: auto; - max-height: calc(100% - 80px); - margin-left: auto; - margin-right: auto; - background-color: var(--color-ui); - overflow-y: scroll; - image-rendering: auto; - } - #start_screen > content > section { - width: 100%; - height: auto; - display: flex; - position: relative; - } - #start_screen section left, #start_screen section right { - display: block; - padding: 24px; - max-height: 600px; - } - #start_screen section right > ul { - max-height: 465px; - overflow-y: auto; - padding-right: 5px; - } - #start_screen left { - flex-grow: 0; - background-size: cover; - } - #start_screen left i.graphic_icon { - font-size: 40px; - width: 12px; - margin-top: 6px; - } - #start_screen right { - flex-grow: 1; - } - #start_screen i.start_screen_close_button { - position: absolute; - top: 8px; - right: 8px; - } - #start_screen i.start_screen_close_button:not(:hover) { - opacity: 0.8; - } - @media (max-device-width: 480px) { - #start_screen { - width: calc(100% - 40px); - } - #start_screen > content { - margin-top: 0px; - margin-top: 0px; - margin-left: 0; - margin-right: 0; - max-height: 100%; - } - #start_screen > content > section { - display: block; - } - #start_screen content section right { - width: 100% !important; - float: none; - } - #start_screen content section left { - width: 100% !important; - float: none; - } - #start_screen content section left { - width: 100% !important; - float: none; - } - } - - - #start-files li:hover { - color: var(--color-light); - } - #start-files left { - width: 36%; - } - #start-files right { - width: 64%; - border-left: 1px solid var(--color-border); - } - #start_screen left > ul { - margin-bottom: 16px; - } - #start_screen right i { - vertical-align: sub; - } - #start-files left li { - padding: 4px 0; - } - #start-files left span.icon_wrapper { - height: 22px; - } - #start-files left i { - font-size: 20pt; - height: 22px; - margin: 2px 12px 0px 0; - display: inline-block; - } - - -/*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; - min-height: 34px; - 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; - display: block; - background: var(--color-back); - } - #status_bar > div { - float: left; - padding-left: 6px; - padding-right: 6px; - } - #status_bar > div#status_fps { - float: right; - } - #status_bar > div#status_saved { - padding-top: 2px; - } - #status_bar #status_progress { - position: absolute; - height: 4px; - background: var(--color-accent); - bottom: 0; - left: 0; - } diff --git a/css/panels.css b/css/panels.css index d7c5d9cde..03029bbe8 100644 --- a/css/panels.css +++ b/css/panels.css @@ -1,307 +1,4 @@ -/*Layout*/ - #page_wrapper { - display: grid; - grid-template-columns: 332px auto 314px; - grid-template-rows: 30px minmax(200px, 5000px) 26px; - grid-template-areas: - "left_bar toolbar toolbar" - "left_bar center right_bar" - "left_bar status_bar right_bar"; - height: calc(100% - 26px); - width: 100%; - border: 2px solid var(--color-border); - border-top: none; - } - #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);; - display: flex; - flex-direction: column; - } - #left_bar { - grid-area: left_bar; - } - #right_bar { - grid-area: right_bar; - } - - .panel.grow { - display: flex; - flex-direction: column; - flex-grow: 1; - min-height: 133px; - } - .panel:not(:last-child) { - padding-bottom: 8px; - } - - h3.panel_handle { - width: 100%; - height: auto; - padding: 6px 12px; - background: var(--color-ui); - margin: 0; - } - .panel p { - margin-left: 12px; - } - body > h3.panel_handle { - box-shadow: 0 0 16px black; - width: auto; - } - - #center { - grid-area: center; - background-color: var(--color-dark); - overflow: hidden; - min-width: 100px; - display: flex; - flex-direction: column; - } - div#center > div { - max-height: 100%; - } - div#preview { - flex-grow: 1; - background-repeat: no-repeat; - background-size: 1000px; - position: relative; - } - #status_bar { - grid-area: status_bar; - } - .single_canvas_wrapper { - height: 100%; - width: 100%; - overflow: hidden; - position: absolute; - cursor: inherit; - } - .quad_canvas_wrapper { - height: 50%; - width: 50%; - position: absolute; - cursor: inherit; - } - .quad_canvas_wrapper.qcw_x { - border-right: 2px solid var(--color-grid); - } - .quad_canvas_wrapper.qcw_y { - border-bottom: 2px solid var(--color-grid); - } - .quad_canvas_wrapper:not(.qcw_x) { - right: 0; - } - .quad_canvas_wrapper:not(.qcw_y) { - bottom: 0; - } - - .resizer { - position: absolute !important; - z-index: 12; - } - .resizer.vertical { /* | */ - cursor: ew-resize; - width: 6px; - } - .resizer.horizontal { /* __ */ - cursor: ns-resize; - height: 6px; - } - .resizer.disabled { - pointer-events: none; - } - - - -/*Head Bars*/ - #main_toolbar { - background-color: var(--color-ui);; - grid-area: toolbar; - overflow: hidden; - white-space: nowrap; - display: flex; - } - #main_toolbar > * { - display: inline-block; - } - .toolbar_wrapper.tool_options { - flex-grow: 1; - } - header { - background-color: var(--color-border);; - grid-area: titlebar; - overflow: hidden; - display: flex; - white-space: nowrap; - height: 26px; - } - header > * { - display: inline-block; - height: 100%; - } - header ::-webkit-scrollbar { - height: 0; - } - div#title { - width: auto; - padding-right: 8px; - padding-left: 6px; - margin-left: 4px; - font-size: 1.2em; - font-weight: normal; - font-family: montserrat, arial, sans-serif; - color: var(--color-light); - vertical-align: top; - min-width: 62px; - margin-top: -0.6px; - } - div#title i { - display: none; - padding-top: 1px; - margin-left: 6px; - } - #title span { - min-width: 114px; - display: inline-block; - } - @media (max-width:950px) { - #title span { - display: none; - } - div#title i { - display: block; - } - } - - .app-drag-region { - -webkit-app-region: drag; - } - 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; - height: 100%; - padding: 0; - } - #web_download_button a { - text-decoration: none !important; - height: 100%; - width: 100%; - padding: 0 12px; - } - #web_download_button:hover a { - color: var(--color-accent_text); - } - #windows_window_menu { - margin-left: auto; - } - #windows_window_menu li { - float: left; - display: inline-block; - width: 42px; - height: 100%; - text-align: center; - } - #windows_window_menu li:hover { - color: var(--color-light); - background-color: var(--color-selected); - } - #windows_window_menu li.wwm_r:hover { - background-color: var(--color-close); - } - #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; - } - -/*Mobile*/ -@media (max-device-width: 480px) { - - #page_wrapper { - display: grid; - grid-template-rows: auto minmax(200px, 5000px) 26px; - grid-template-areas: - "toolbar" - "center" - "status_bar"; - grid-template-columns: auto !important; - border: none; - } - #main_toolbar { - display: block; - } - #main_toolbar > * { - display: block; - } - #main_toolbar > div.tools { - position: absolute; - z-index: 2; - bottom: 26px; - right: 0px; - } - #main_toolbar > div.mobile_side { - position: absolute; - z-index: 2; - top: 86px; - right: 0px; - } - #main_toolbar > div.tool_options { - background-color: var(--color-back); - } - .resizer.vertical { - display: none; - } - .sidebar { - overflow-y: auto; - } - #left_bar, #right_bar { - width: calc(100% - 40px); - display: none; - } - /*Left*/ - #page_wrapper.show_left { - grid-template-areas: "toolbar" "left_bar" "status_bar"; - } - #page_wrapper.show_left #center { - display: none; - } - #page_wrapper.show_left #left_bar { - display: flex; - } - /*Right*/ - #page_wrapper.show_right { - grid-template-areas: "toolbar" "right_bar" "status_bar"; - } - #page_wrapper.show_right #center { - display: none; - } - #page_wrapper.show_right #right_bar { - display: flex; - } -} - /*Display*/ .tabs_small input[type="radio"]:checked+label { @@ -317,7 +14,6 @@ text-align: center; font-size: 0.9em; flex-grow: 1; - float: left; overflow: hidden; } #color .tabs_small label { @@ -347,6 +43,7 @@ .bar.slider_input_combo { position: relative; display: flex; + margin-right: 2px; } .bar.slider_input_combo input.tool[type="range"] { float: none; @@ -406,6 +103,9 @@ text-align: center; width: 21px; } + .outliner_node .outliner_object i.icon_off { + opacity: 0.56; + } .outliner_opener_placeholder { width: 18px; height: 14px; @@ -416,6 +116,9 @@ padding: 2px; box-sizing: border-box; } + .outliner_object:active { + background-color: var(--color-ui); + } .outliner_object.selected { background-color: var(--color-selected); } @@ -436,6 +139,19 @@ position: absolute; bottom: 0px; } + #cubes_list ul { + position: relative; + } + #cubes_list .outliner_line_guide { + position: absolute; + top: -4px; + bottom: 4px; + width: 4px; + margin-left: 10px; + border-left: 2px solid var(--color-text); + opacity: 0.2; + pointer-events: none; + } .drag_hover[order]::before { content: ''; width: calc(100% - 12px); @@ -482,10 +198,10 @@ font-size: 15px; float: right; } - #cubes_list .outliner_object i.icon-open-state { + i.icon-open-state { opacity: 0.7; } - #cubes_list .outliner_object i.icon-open-state:hover { + i.icon-open-state:hover { opacity: 1; } @@ -735,14 +451,28 @@ #timeline_playhead { position: absolute; pointer-events: none; + z-index: 3; + height: 26px; width: 18px; top: 0; margin-left: -8px; - border: 2px solid var(--color-accent); - border-top-width: 5px; - background-color: rgba(0, 0, 0, 0.2); - z-index: 3; + + border-right: 9px solid transparent; + border-left: 9px solid transparent; + border-top: 12px solid var(--color-accent); + border-radius: 2px; + } + #timeline_playhead::after { + content: ""; + display: block; + position: absolute; + width: 2px; + background-color: var(--color-accent); + pointer-events: none; + margin-left: -1px; + margin-top: -2px; + height: 17px; } #timeline_playhead_line { content: ""; @@ -754,6 +484,21 @@ background-color: var(--color-accent); pointer-events: none; } + #timeline_endbracket { + position: absolute; + z-index: 3; + cursor: pointer; + + height: 26px; + width: 8px; + top: 0; + margin-left: -7px; + + border: 1px solid var(--color-accent); + border-left-width: 0; + border-right-width: 2px; + } + #timeline_body .keyframe { position: absolute; margin-left: -6px; @@ -797,26 +542,53 @@ padding: 3px; padding-left: 8px; overflow: hidden; + background-color: var(--color-back); + z-index: 4; } #timeline_time_wrapper { height: 100%; position: relative; - background-color: var(--color-button); - overflow: hidden; + background-color: var(--color-back); } #timeline_time { height: 100%; position: relative; margin-left: 8px; + border-bottom: 1px solid var(--color-selected); } .timeline_timecode { - border-left: 1px solid var(--color-border); padding-left: 4px; padding-top: 2px; height: 100%; position: absolute; pointer-events: none; } + .timeline_timecode > span { + display: block; + margin-top: -4px; + font-size: 0.9em; + margin-left: -6px; + } + .timeline_timecode > .substeps { + width: 100%; + height: 8px; + position: absolute; + bottom: 0; + left: 0; + display: flex; + } + .timeline_timecode > .substeps > div { + border-left: 1px solid var(--color-text); + height: 4px; + flex-grow: 1; + margin-top: 4px; + opacity: 0.3; + } + .timeline_timecode > .substeps > div:first-child { + height: 100%; + margin-top: 0; + opacity: 0.48; + } #timeline_body_inner { @@ -840,6 +612,7 @@ height: calc(100% + 1px); background-color: var(--color-ui); border-right: 1px solid var(--color-border); + border-left: 2px solid transparent; box-shadow: 1px 8px 10px 0 #00000038; z-index: 5; } @@ -849,6 +622,9 @@ #timeline_body li > .animator_channel_bar .channel_head { padding-left: 16px; } + .animator.selected .channel_head { + border-left-color: var(--color-accent); + } .channel_head .text_button { width: 26px; height: 24px; @@ -862,12 +638,6 @@ .animator_channel_bar .channel_head .text_button .channel_mute { font-size: 11pt; } - .animator.selected .animator_head_bar { - background-color: var(--color-selected); - } - .animator.selected .animator_head_bar .channel_head { - background-color: var(--color-selected); - } .channel_head span { flex-grow: 1; flex-shrink: 1; @@ -895,6 +665,9 @@ .UVEditor { position: relative; } + dialog .UVEditor { + z-index: 20; + } .UVEditor > .toolbar { margin-top: 3px; } @@ -909,7 +682,11 @@ margin-left: -8px; margin-right: -8px; } - .uv_headline.selected { + #uv_dialog_all .UVEditor.selected { + border-color: var(--color-accent); + z-index: 21; + } + .UVEditor.selected .uv_headline { background-color: var(--color-button); } .uv_headline .tool { @@ -1089,7 +866,7 @@ color: var(--color-accent_text); } -/*Edit Session UI*/ +/*Chat*/ #chat { z-index: 16; min-height: 180px; @@ -1149,9 +926,6 @@ } /*Color*/ - .panel#color { - - } #color_panel_head { display: flex; width: 100%; @@ -1200,33 +974,28 @@ width: 36px; } #palette_list { - padding: 2px 1px; + padding: 2px; min-height: 160px; max-height: 232px; } #palette_list .color { display: inline-block; - float: left; - width: 30px; - height: 30px; - padding: 3px; + width: 25px; + height: 25px; + vertical-align: top; } #palette_list .color:hover { - background-color: var(--color-selected); + padding: 1px; } #palette_list .color.selected { - padding: 1px; + padding: 3px; } - #palette_list .color .color_inner { - width: 24px; - height: 24px; - border-radius: 50%; + #palette_list .color.contrast { + background-color: var(--color-text); } - #palette_list .color.selected .color_inner { - border-radius: 4px; - transition: border-radius 20ms ease; - width: 28px; - height: 28px; + #palette_list .color .color_inner { + width: 100%; + height: 100%; } .panel#color input.sp-input { width: calc(100% - 40px); diff --git a/css/setup.css b/css/setup.css index e83ae8c84..33c1b3672 100644 --- a/css/setup.css +++ b/css/setup.css @@ -22,7 +22,7 @@ width: 6px; height: 6px; } - + ::-webkit-scrollbar-track { background: var(--color-ui); } @@ -138,7 +138,6 @@ [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; @@ -147,7 +146,6 @@ font-size: 1.4em; max-width: 24px; - Better Font Rendering =========== -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -399,7 +397,7 @@ appearance: none; border: none; background: transparent; - color: var(--color-text) + color: var(--color-text); font-size: 1em; font-family: inherit; outline: none; @@ -419,6 +417,7 @@ padding-right: 16px; padding-left: 16px; font-weight: normal; + cursor: pointer; } button.disabled { opacity: 0.5; @@ -503,13 +502,16 @@ right: 6px; top: 3px; } - input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button, { + 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); height: 30px; } + input[type=password] { + font-size: 1.2em; + } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; diff --git a/css/spectrum.css b/css/spectrum.css index fa1de35a2..975808772 100644 --- a/css/spectrum.css +++ b/css/spectrum.css @@ -150,10 +150,6 @@ License: MIT height: 28px; } -.sp-container:not(.sp-alpha-enabled) .sp-top { - /*margin-bottom: -20px;*/ -} - /* Don't allow text selection */ .sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button { -webkit-user-select:none; @@ -444,12 +440,6 @@ See http://bgrins.github.io/spectrum/themes/ for instructions. /* Buttons: http://hellohappy.org/css3-buttons/ */ -.sp-container button { - -} -.sp-container button:hover { - -} .sp-cancel { font-size: 11px; margin:0; diff --git a/css/window.css b/css/window.css new file mode 100644 index 000000000..ceaadd5a0 --- /dev/null +++ b/css/window.css @@ -0,0 +1,561 @@ + +/*Layout*/ + #page_wrapper { + display: grid; + grid-template-columns: 332px auto 314px; + grid-template-rows: 30px minmax(200px, 5000px) 26px; + grid-template-areas: + "left_bar toolbar toolbar" + "left_bar center right_bar" + "left_bar status_bar right_bar"; + height: calc(100% - 26px); + width: 100%; + border: 2px solid var(--color-frame); + border-top: none; + opacity: 1; + transition: opacity 0.1s linear; + } + #page_wrapper.hidden { + opacity: 0; + } + body { + background-image: url('../assets/logo_cutout.svg'); + background-repeat: no-repeat; + background-size: 128px; + background-position: center; + } + #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);; + display: flex; + flex-direction: column; + } + #left_bar { + grid-area: left_bar; + } + #right_bar { + grid-area: right_bar; + } + + .panel.grow { + display: flex; + flex-direction: column; + flex-grow: 1; + min-height: 133px; + } + .panel:not(:last-child) { + padding-bottom: 8px; + } + + h3.panel_handle { + width: 100%; + height: auto; + padding: 6px 12px; + background: var(--color-ui); + margin: 0; + } + .panel p { + margin-left: 12px; + } + body > h3.panel_handle { + box-shadow: 0 0 16px black; + width: auto; + } + + #center { + grid-area: center; + background-color: var(--color-dark); + overflow: hidden; + min-width: 100px; + display: flex; + flex-direction: column; + } + div#center > div { + max-height: 100%; + } + div#preview { + flex-grow: 1; + background-repeat: no-repeat; + background-size: 1000px; + position: relative; + } + #status_bar { + grid-area: status_bar; + } + .single_canvas_wrapper { + height: 100%; + width: 100%; + overflow: hidden; + position: absolute; + cursor: inherit; + } + .quad_canvas_wrapper { + height: 50%; + width: 50%; + position: absolute; + cursor: inherit; + } + .quad_canvas_wrapper.qcw_x { + border-right: 2px solid var(--color-grid); + } + .quad_canvas_wrapper.qcw_y { + border-bottom: 2px solid var(--color-grid); + } + .quad_canvas_wrapper:not(.qcw_x) { + right: 0; + } + .quad_canvas_wrapper:not(.qcw_y) { + bottom: 0; + } + + .resizer { + position: absolute !important; + z-index: 12; + } + .resizer.vertical { /* | */ + cursor: ew-resize; + width: 6px; + margin-left: -4px; + } + .resizer.horizontal { /* __ */ + cursor: ns-resize; + height: 6px; + margin-top: -4px; + } + .resizer.disabled { + pointer-events: none; + } + /* + .resizer:hover, .resizer.ui-draggable-dragging { + background-color: var(--color-accent); + opacity: 0.2; + }*/ + + + +/*Head Bars*/ + #main_toolbar { + background-color: var(--color-ui);; + grid-area: toolbar; + overflow: hidden; + white-space: nowrap; + display: flex; + } + #main_toolbar > * { + display: inline-block; + } + .toolbar_wrapper.tool_options { + flex-grow: 1; + } + header { + background-color: var(--color-frame); + grid-area: titlebar; + overflow: hidden; + display: flex; + white-space: nowrap; + height: 26px; + } + header > * { + display: inline-block; + height: 100%; + } + header ::-webkit-scrollbar { + height: 0; + } + div#title { + width: auto; + padding-right: 8px; + padding-left: 6px; + margin-left: 4px; + font-size: 1.2em; + font-weight: normal; + font-family: montserrat, arial, sans-serif; + color: var(--color-light); + vertical-align: top; + min-width: 62px; + margin-top: -0.6px; + } + div#title i { + display: none; + padding-top: 1px; + margin-left: 6px; + } + #title span { + min-width: 114px; + display: inline-block; + } + @media (max-width:950px) { + #title span { + display: none; + } + div#title i { + display: block; + } + } + + .app-drag-region { + -webkit-app-region: drag; + } + 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; + height: 100%; + padding: 0; + } + #web_download_button a { + text-decoration: none !important; + height: 100%; + width: 100%; + padding: 0 12px; + } + #web_download_button:hover a { + color: var(--color-accent_text); + } + #windows_window_menu { + margin-left: auto; + } + #windows_window_menu li { + display: inline-block; + width: 42px; + height: 100%; + text-align: center; + } + #windows_window_menu li:hover { + color: var(--color-light); + background-color: var(--color-selected); + } + #windows_window_menu li.wwm_r:hover { + background-color: var(--color-close); + } + #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; + } + +/*Mobile*/ +@media (max-device-width: 480px) { + + #page_wrapper { + display: grid; + grid-template-rows: auto minmax(200px, 5000px) 26px; + grid-template-areas: + "toolbar" + "center" + "status_bar"; + grid-template-columns: auto !important; + border: none; + } + #main_toolbar { + display: block; + } + #main_toolbar > * { + display: block; + } + #main_toolbar > div.tools { + position: absolute; + z-index: 2; + bottom: 26px; + right: 0px; + } + #main_toolbar > div.mobile_side { + position: absolute; + z-index: 2; + top: 86px; + right: 0px; + } + #main_toolbar > div.tool_options { + background-color: var(--color-back); + } + .resizer.vertical { + display: none; + } + .sidebar { + overflow-y: auto; + } + #left_bar, #right_bar { + width: calc(100% - 40px); + display: none; + } + /*Left*/ + #page_wrapper.show_left { + grid-template-areas: "toolbar" "left_bar" "status_bar"; + } + #page_wrapper.show_left #center { + display: none; + } + #page_wrapper.show_left #left_bar { + display: flex; + } + /*Right*/ + #page_wrapper.show_right { + grid-template-areas: "toolbar" "right_bar" "status_bar"; + } + #page_wrapper.show_right #center { + display: none; + } + #page_wrapper.show_right #right_bar { + display: flex; + } +} + +/*Menu Bar*/ + ul#menu_bar { + height: 100%; + } + li.menu_bar_point { + font-size: 17px; + padding: 0 8px; + padding-top: 2px; + display: inline-block; + height: 29px; + font-weight: normal; + } + li.menu_bar_point.opened { + color: var(--color-light); + background: var(--color-accent); + } + li.menu_bar_point:hover { + color: var(--color-light); + } + + #mode_selector { + float: right; + font-size: 1.1em; + height: 30px; + } + #mode_selector li { + display: inline-block; + height: 30px; + margin: 0 5px; + overflow: hidden; + padding-top: 2px; + font-size: 18px; + } + #mode_selector li:hover { + color: var(--color-light); + } + #mode_selector li.selected { + border-bottom: 3px solid var(--color-accent); + } + + + +/*Start Screen*/ + #start_screen { + flex-grow: 1; + } + #start_screen h3 { + margin: 0; + } + #start_screen .bar.next_to_title { + margin-top: -40px; + margin-right: -12px; + position: relative; + float: right; + } + #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 .recent_project.thumbnail { + width: 242px; + height: 150px; + + width: 168px; + height: 128px; + position: relative; + float: left; + background-color: var(--color-back); + margin: 1px; + background-size: 150px; + background-repeat: no-repeat; + } + #start_screen .recent_project.thumbnail:hover { + background-color: var(--color-ui); + } + #start_screen .recent_project.thumbnail .recent_project_name { + font-size: 1em; + overflow-x: hidden; + flex-shrink: 1; + flex-grow: 1; + height: 24px; + right: 6px; + left: 6px; + bottom: 0; + position: absolute; + } + + #start_screen > content { + display: block; + margin-top: 40px; + max-width: 1000px; + height: auto; + max-height: calc(100% - 80px); + margin-left: auto; + margin-right: auto; + background-color: var(--color-ui); + overflow-y: scroll; + image-rendering: auto; + } + #start_screen > content > section { + width: 100%; + height: auto; + display: flex; + position: relative; + } + #start_screen section left, #start_screen section right { + display: block; + padding: 24px; + max-height: 600px; + } + #start_screen section right > ul { + max-height: 465px; + overflow-y: auto; + padding-right: 5px; + } + #start_screen left { + flex-grow: 0; + background-size: cover; + } + #start_screen left i.graphic_icon { + font-size: 40px; + width: 12px; + margin-top: 6px; + } + #start_screen right { + flex-grow: 1; + } + #start_screen i.start_screen_close_button { + position: absolute; + top: 8px; + right: 8px; + } + #start_screen i.start_screen_close_button:not(:hover) { + opacity: 0.8; + } + @media (max-device-width: 480px) { + #start_screen { + width: calc(100% - 40px); + } + #start_screen > content { + margin-top: 0px; + margin-top: 0px; + margin-left: 0; + margin-right: 0; + max-height: 100%; + } + #start_screen > content > section { + display: block; + } + #start_screen content section right { + width: 100% !important; + float: none; + } + #start_screen content section left { + width: 100% !important; + float: none; + } + #start_screen content section left { + width: 100% !important; + float: none; + } + } + + + + #start-files li:hover { + color: var(--color-light); + } + #start-files left { + width: 38%; + } + #start-files right { + border-left: 1px solid var(--color-border); + } + #start_screen left > ul { + margin-bottom: 16px; + } + #start_screen right i { + vertical-align: sub; + } + #start-files left li { + padding: 4px 0; + } + #start-files left span.icon_wrapper { + height: 22px; + } + #start-files left i { + font-size: 20pt; + height: 22px; + margin: 2px 12px 0px 0; + display: inline-block; + } + +/*Status Bar*/ + #status_bar { + position: relative; + display: block; + background: var(--color-back); + } + #status_bar > div { + float: left; + padding-left: 6px; + padding-right: 6px; + } + #status_bar > div#status_fps { + float: right; + } + #status_bar > div#status_saved { + padding-top: 2px; + } + #status_bar #status_progress { + position: absolute; + height: 4px; + background: var(--color-accent); + bottom: 0; + left: 0; + } diff --git a/icon_full.png b/icon_full.png new file mode 100644 index 000000000..376c90b14 Binary files /dev/null and b/icon_full.png differ diff --git a/index.html b/index.html index d2df302b7..21dc242be 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ Blockbench - + @@ -15,6 +15,7 @@ + @@ -23,10 +24,11 @@ @@ -93,6 +95,7 @@ + @@ -128,7 +131,7 @@

-
+
clear
@@ -158,10 +161,10 @@

expand_more {{ plugin.title }}
-
+
- +
{{ plugin.isInstallable() }}
@@ -174,8 +177,8 @@

dialog.plugins.none_available
-
- +
clear
@@ -238,7 +241,7 @@

- +
clear
@@ -295,46 +298,6 @@

clear
- -
data.texture
- -
- -
- - - -
generic.delete
delete
-
- -

path

- -
-
- -
- -
-
- -
- -
-
- -
- -
-
- -
- -
- -
-
clear
-
-
dialog.scale.title
@@ -511,6 +474,15 @@

+ + +