mirror of
https://github.com/JannisX11/blockbench.git
synced 2025-04-06 17:31:09 +08:00
Start screen design and content
This commit is contained in:
JannisX11
parent
dd833969dd
commit
bf8b220beb
@ -265,7 +265,14 @@
|
||||
@-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); } }
|
||||
|
||||
/*Markdown*/
|
||||
.markdown li {
|
||||
list-style: initial;
|
||||
cursor: inherit;
|
||||
}
|
||||
.markdown ul {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
/*Actions*/
|
||||
.toolbar {
|
||||
|
||||
487
css/start_screen.css
Normal file
487
css/start_screen.css
Normal file
@ -0,0 +1,487 @@
|
||||
/*Start Screen*/
|
||||
#mode_screen_start {
|
||||
flex-grow: 1;
|
||||
}
|
||||
#start_screen {
|
||||
min-height: 300px;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
padding: 36px 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#start_screen h3 {
|
||||
margin: 0;
|
||||
}
|
||||
#start_screen .bar.next_to_title {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
}
|
||||
#start_screen button {
|
||||
margin-right: 4px;
|
||||
}
|
||||
#start_screen .recent_project {
|
||||
margin: 2px 0;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
#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;
|
||||
position: relative;
|
||||
color: var(--color-subtle_text);
|
||||
}
|
||||
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_view_menu {
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
right: 20px;
|
||||
}
|
||||
#start_screen_view_menu li.selected {
|
||||
border-bottom: 3px solid var(--color-accent);
|
||||
}
|
||||
|
||||
#start_screen .recent_project.thumbnail {
|
||||
display: block;
|
||||
margin: 0;
|
||||
height: 130px;
|
||||
position: relative;
|
||||
background-color: var(--color-back);
|
||||
cursor: pointer;
|
||||
}
|
||||
#start_screen .recent_project.thumbnail .thumbnail_image {
|
||||
display: block;
|
||||
width: 180px;
|
||||
height: 100px;
|
||||
margin: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
#start_screen .recent_project.thumbnail:hover {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
#start_screen .recent_project.thumbnail .recent_project_name {
|
||||
font-size: 1em;
|
||||
overflow-x: hidden;
|
||||
height: 30px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
padding-top: 2px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
#start_screen .recent_project.thumbnail .icon_wrapper {
|
||||
position: absolute;
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
padding: 2px;
|
||||
color: var(--color-accent_text);
|
||||
background-color: var(--color-accent);
|
||||
top: 0;
|
||||
}
|
||||
#start_screen .recent_project.thumbnail:hover .recent_project_name {
|
||||
color: var(--color-accent_text);
|
||||
background-color: transparent;
|
||||
}
|
||||
#start_files ul.redact li.recent_project.thumbnail .thumbnail_image {
|
||||
background: transparent !important;
|
||||
}
|
||||
#start_screen .recent_project.thumbnail:hover .icon_wrapper {
|
||||
display: block;
|
||||
}
|
||||
#start_screen_view_menu .search_bar {
|
||||
min-width: 38px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#start_screen > content {
|
||||
display: block;
|
||||
max-width: 1000px;
|
||||
height: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: var(--color-ui);
|
||||
box-shadow: 0 0 50px #00000060;
|
||||
overflow-x: hidden;
|
||||
image-rendering: auto;
|
||||
}
|
||||
#start_screen > content > section {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
#start_screen > content > section.vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
div.start_screen_left, div.start_screen_right {
|
||||
display: block;
|
||||
padding: 24px;
|
||||
max-height: 606px;
|
||||
}
|
||||
div.start_screen_right > ul {
|
||||
max-height: 470px;
|
||||
padding-right: 5px;
|
||||
overflow-y: auto;
|
||||
grid-template-columns: repeat(auto-fit, minmax(170px ,1fr));
|
||||
grid-gap: 5px;
|
||||
}
|
||||
#start_screen div.start_screen_left {
|
||||
max-width: 100%;
|
||||
flex-grow: 0;
|
||||
}
|
||||
#start_screen div.graphic:not(.graphic_icon) {
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
}
|
||||
#start_screen div.graphic p {
|
||||
position: absolute;
|
||||
font-size: 0.96em;
|
||||
}
|
||||
#start_screen div.graphic.graphic_icon i {
|
||||
font-size: 40px;
|
||||
width: 12px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
#start_screen div.start_screen_right {
|
||||
flex-grow: 1;
|
||||
width: 70%;
|
||||
}
|
||||
#start_screen section.vertical div.start_screen_right {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
}
|
||||
#start_screen i.start_screen_close_button {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#start_screen i.start_screen_close_button:not(:hover) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
#start_screen section.vertical.bright_ui .start_screen_right {
|
||||
box-shadow: 0 0 14px #00103030;
|
||||
}
|
||||
#start_screen .start_screen_features {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
padding: 12px;
|
||||
background: #00004006;
|
||||
}
|
||||
#start_screen .start_screen_features > li {
|
||||
width: 30%;
|
||||
flex-grow: 1;
|
||||
min-width: 250px;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
margin: 7px;
|
||||
padding: 7px;
|
||||
}
|
||||
#start_screen .start_screen_features > li > * {
|
||||
max-width: 100%;
|
||||
font-weight: 300;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
#start_screen .start_screen_features > li > h3 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
@media (max-device-width: 640px) {
|
||||
#start_screen {
|
||||
width: 100%;
|
||||
}
|
||||
#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 div.start_screen_right {
|
||||
width: 100% !important;
|
||||
float: none;
|
||||
}
|
||||
#start_screen content section div.start_screen_left {
|
||||
width: 100% !important;
|
||||
float: none;
|
||||
}
|
||||
#start_screen content section div.start_screen_left {
|
||||
width: 100% !important;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#start_files div.start_screen_left {
|
||||
width: 30%;
|
||||
padding: 20px 0 0px 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-back);
|
||||
}
|
||||
#start_files div.start_screen_right {
|
||||
position: relative;
|
||||
min-height: 250px;
|
||||
}
|
||||
#start_files div.start_screen_left h2 {
|
||||
margin-left: 24px;
|
||||
}
|
||||
#start_files div.start_screen_left > ul {
|
||||
margin-bottom: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#start_files div.start_screen_right i {
|
||||
vertical-align: sub;
|
||||
}
|
||||
.tool.quickstart_button i {
|
||||
font-size: 17pt;
|
||||
}
|
||||
|
||||
|
||||
#start_files li.format_category {
|
||||
margin-top: 16px;
|
||||
}
|
||||
#start_files li.format_category > label {
|
||||
color: var(--color-subtle_text);
|
||||
font-size: 18px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
#start_files li.format_entry {
|
||||
padding: 4px 0;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
#start_files li.format_entry span.icon_wrapper {
|
||||
height: 22px;
|
||||
width: 32px;
|
||||
}
|
||||
#start_files li.format_entry > * {
|
||||
cursor: inherit;
|
||||
}
|
||||
#start_files li.format_entry:hover {
|
||||
color: var(--color-light);
|
||||
}
|
||||
#start_files li.format_entry.selected {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent_text);
|
||||
}
|
||||
#start_files li.format_entry.selected::after {
|
||||
float: right;
|
||||
content: "\f105";
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.format_entry i {
|
||||
font-size: 18pt;
|
||||
height: 22px;
|
||||
margin: 2px 8px 0px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.format_entry i.fa_big {
|
||||
font-size: 16pt;
|
||||
}
|
||||
.format_entry.start_screen_link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.format_entry.start_screen_link::after {
|
||||
float: right;
|
||||
content: "\f08e";
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
color: var(--color-subtle_text);
|
||||
font-size: 15px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#start_screen .start_screen_format_page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.format_target {
|
||||
padding: 10px 0;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.format_target span {
|
||||
padding: 2px 4px;
|
||||
margin: 0 2px;
|
||||
background-color: var(--color-accent);
|
||||
border-radius: 5px;
|
||||
color: var(--color-accent_text);
|
||||
}
|
||||
#start_files .button_bar {
|
||||
text-align: left;
|
||||
padding-right: 14px;
|
||||
margin-top: auto;
|
||||
}
|
||||
#start_files .format_page_close_button {
|
||||
margin-top: 8px;
|
||||
margin-left: -2px;
|
||||
cursor: pointer;
|
||||
width: 28px;
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
}
|
||||
.start_screen_format_page button#create_new_model_button {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.start_screen_format_page button#create_new_model_button > i {
|
||||
vertical-align: bottom;
|
||||
margin-right: 3px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
section#keymap_preference {
|
||||
display: block !important;
|
||||
}
|
||||
section#keymap_preference > ul {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
grid-gap: 6px;
|
||||
padding: 12px;
|
||||
}
|
||||
section#keymap_preference > h2 {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
section#keymap_preference > p {
|
||||
padding: 0 20px;
|
||||
}
|
||||
section#keymap_preference .keymap_select_box {
|
||||
display: inline-block;
|
||||
padding: 12px;
|
||||
min-height: 132px;
|
||||
background-color: var(--color-back);
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
section#keymap_preference .keymap_select_box:hover {
|
||||
color: var(--color-light);
|
||||
border-color: var(--color-accent);
|
||||
background-color: var(--color-ui);
|
||||
}
|
||||
section#keymap_preference .keymap_select_box p {
|
||||
color: var(--color-subtle_text);
|
||||
}
|
||||
|
||||
#start_screen section#quick_setup {
|
||||
padding: 20px 24px;
|
||||
display: block;
|
||||
border-bottom: 5px solid var(--color-border);
|
||||
}
|
||||
section#quick_setup > h2 {
|
||||
display: block;
|
||||
}
|
||||
section#quick_setup > div {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
width: 420px;
|
||||
max-width: 100%;
|
||||
margin-right: 48px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
section#quick_setup > div > label {
|
||||
min-width: 120px;
|
||||
display: inline-block;
|
||||
}
|
||||
section#quick_setup > div bb-select {
|
||||
flex-grow: 1;
|
||||
}
|
||||
section#quick_setup > div > p {
|
||||
color: var(--color-subtle_text);
|
||||
}
|
||||
.quick_setup_theme {
|
||||
cursor: pointer;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.quick_setup_theme > div {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border: 2px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
padding-top: 8px;
|
||||
background-color: var(--color-ui);
|
||||
cursor: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
.quick_setup_theme:hover,
|
||||
.quick_setup_theme.selected {
|
||||
color: var(--color-light);
|
||||
}
|
||||
.quick_setup_theme:hover > div,
|
||||
.quick_setup_theme.selected > div {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
|
||||
#amend_edit_menu {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-right: 30px;
|
||||
margin: auto;
|
||||
width: fit-content;
|
||||
}
|
||||
#amend_edit_menu > div.amend_edit_line {
|
||||
background-color: var(--color-ui);
|
||||
padding: 0px 8px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
}
|
||||
#amend_edit_menu > div.amend_edit_line .nslide_tool {
|
||||
float: none;
|
||||
}
|
||||
#amend_edit_menu > div.amend_edit_line > label {
|
||||
padding: 4px 6px;
|
||||
}
|
||||
.amend_edit_close_button {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.amend_edit_close_button:hover {
|
||||
color: var(--color-light);
|
||||
}
|
||||
435
css/window.css
435
css/window.css
@ -647,441 +647,6 @@
|
||||
}
|
||||
|
||||
|
||||
/*Start Screen*/
|
||||
#mode_screen_start {
|
||||
flex-grow: 1;
|
||||
}
|
||||
#start_screen {
|
||||
min-height: 300px;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
padding: 36px 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#start_screen h3 {
|
||||
margin: 0;
|
||||
}
|
||||
#start_screen .bar.next_to_title {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
}
|
||||
#start_screen button {
|
||||
margin-right: 4px;
|
||||
}
|
||||
#start_screen .recent_project {
|
||||
margin: 2px 0;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
#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;
|
||||
position: relative;
|
||||
color: var(--color-subtle_text);
|
||||
}
|
||||
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_view_menu {
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
right: 20px;
|
||||
}
|
||||
#start_screen_view_menu li.selected {
|
||||
border-bottom: 3px solid var(--color-accent);
|
||||
}
|
||||
|
||||
#start_screen .recent_project.thumbnail {
|
||||
display: block;
|
||||
margin: 0;
|
||||
height: 130px;
|
||||
position: relative;
|
||||
background-color: var(--color-back);
|
||||
cursor: pointer;
|
||||
}
|
||||
#start_screen .recent_project.thumbnail .thumbnail_image {
|
||||
display: block;
|
||||
width: 180px;
|
||||
height: 100px;
|
||||
margin: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
#start_screen .recent_project.thumbnail:hover {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
#start_screen .recent_project.thumbnail .recent_project_name {
|
||||
font-size: 1em;
|
||||
overflow-x: hidden;
|
||||
height: 30px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
padding-top: 2px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
#start_screen .recent_project.thumbnail .icon_wrapper {
|
||||
position: absolute;
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
padding: 2px;
|
||||
color: var(--color-accent_text);
|
||||
background-color: var(--color-accent);
|
||||
top: 0;
|
||||
}
|
||||
#start_screen .recent_project.thumbnail:hover .recent_project_name {
|
||||
color: var(--color-accent_text);
|
||||
background-color: transparent;
|
||||
}
|
||||
#start_files ul.redact li.recent_project.thumbnail .thumbnail_image {
|
||||
background: transparent !important;
|
||||
}
|
||||
#start_screen .recent_project.thumbnail:hover .icon_wrapper {
|
||||
display: block;
|
||||
}
|
||||
#start_screen_view_menu .search_bar {
|
||||
min-width: 38px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#start_screen > content {
|
||||
display: block;
|
||||
max-width: 1000px;
|
||||
height: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: var(--color-ui);
|
||||
box-shadow: 0 0 50px #00000060;
|
||||
overflow-x: hidden;
|
||||
image-rendering: auto;
|
||||
}
|
||||
#start_screen > content > section {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
#start_screen > content > section.vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
div.start_screen_left, div.start_screen_right {
|
||||
display: block;
|
||||
padding: 24px;
|
||||
max-height: 606px;
|
||||
}
|
||||
div.start_screen_right > ul {
|
||||
max-height: 470px;
|
||||
padding-right: 5px;
|
||||
overflow-y: auto;
|
||||
grid-template-columns: repeat(auto-fit, minmax(170px ,1fr));
|
||||
grid-gap: 5px;
|
||||
}
|
||||
#start_screen div.start_screen_left {
|
||||
max-width: 100%;
|
||||
flex-grow: 0;
|
||||
}
|
||||
#start_screen div.graphic:not(.graphic_icon) {
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
}
|
||||
#start_screen div.graphic p {
|
||||
position: absolute;
|
||||
font-size: 0.96em;
|
||||
}
|
||||
#start_screen div.graphic.graphic_icon i {
|
||||
font-size: 40px;
|
||||
width: 12px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
#start_screen div.start_screen_right {
|
||||
flex-grow: 1;
|
||||
width: 70%;
|
||||
}
|
||||
#start_screen section.vertical div.start_screen_right {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
}
|
||||
#start_screen i.start_screen_close_button {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#start_screen i.start_screen_close_button:not(:hover) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
#start_screen section.vertical.bright_ui .start_screen_right {
|
||||
box-shadow: 0 0 14px #00103030;
|
||||
}
|
||||
#start_screen .start_screen_features {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
padding: 12px;
|
||||
background: #00004006;
|
||||
}
|
||||
#start_screen .start_screen_features > li {
|
||||
width: 30%;
|
||||
flex-grow: 1;
|
||||
min-width: 250px;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
margin: 7px;
|
||||
padding: 7px;
|
||||
}
|
||||
#start_screen .start_screen_features > li > * {
|
||||
max-width: 100%;
|
||||
font-weight: 300;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
#start_screen .start_screen_features > li > h3 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
@media (max-device-width: 640px) {
|
||||
#start_screen {
|
||||
width: 100%;
|
||||
}
|
||||
#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 div.start_screen_right {
|
||||
width: 100% !important;
|
||||
float: none;
|
||||
}
|
||||
#start_screen content section div.start_screen_left {
|
||||
width: 100% !important;
|
||||
float: none;
|
||||
}
|
||||
#start_screen content section div.start_screen_left {
|
||||
width: 100% !important;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#start_files div.start_screen_left {
|
||||
width: 30%;
|
||||
padding: 20px 0 0px 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-back);
|
||||
}
|
||||
#start_files div.start_screen_right {
|
||||
position: relative;
|
||||
min-height: 250px;
|
||||
}
|
||||
#start_files div.start_screen_left h2 {
|
||||
margin-left: 24px;
|
||||
}
|
||||
#start_files div.start_screen_left > ul {
|
||||
margin-bottom: 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#start_files div.start_screen_right i {
|
||||
vertical-align: sub;
|
||||
}
|
||||
.tool.quickstart_button i {
|
||||
font-size: 17pt;
|
||||
}
|
||||
|
||||
#start_files li.format_category {
|
||||
margin-top: 16px;
|
||||
}
|
||||
#start_files li.format_category > label {
|
||||
color: var(--color-subtle_text);
|
||||
font-size: 18px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
#start_files li.format_entry {
|
||||
padding: 4px 0;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
#start_files li.format_entry span.icon_wrapper {
|
||||
height: 22px;
|
||||
width: 32px;
|
||||
}
|
||||
#start_files li.format_entry > * {
|
||||
cursor: inherit;
|
||||
}
|
||||
#start_files li.format_entry:hover {
|
||||
color: var(--color-light);
|
||||
}
|
||||
#start_files li.format_entry.selected {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent_text);
|
||||
}
|
||||
#start_files li.format_entry.selected::after {
|
||||
float: right;
|
||||
content: "\f105";
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.format_entry i {
|
||||
font-size: 18pt;
|
||||
height: 22px;
|
||||
margin: 2px 8px 0px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.format_entry i.fa_big {
|
||||
font-size: 16pt;
|
||||
}
|
||||
.format_entry.start_screen_link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.format_entry.start_screen_link::after {
|
||||
float: right;
|
||||
content: "\f08e";
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
color: var(--color-subtle_text);
|
||||
font-size: 15px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.format_target {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.format_target span {
|
||||
padding: 2px 4px;
|
||||
margin: 0 2px;
|
||||
background-color: var(--color-accent);
|
||||
border-radius: 5px;
|
||||
color: var(--color-accent_text);
|
||||
}
|
||||
#start_files .button_bar {
|
||||
text-align: left;
|
||||
padding-right: 14px;
|
||||
}
|
||||
#start_files .format_page_close_button {
|
||||
margin-top: 8px;
|
||||
margin-left: -2px;
|
||||
cursor: pointer;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
section#keymap_preference {
|
||||
display: block !important;
|
||||
}
|
||||
section#keymap_preference > ul {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
grid-gap: 6px;
|
||||
padding: 12px;
|
||||
}
|
||||
section#keymap_preference > h2 {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
section#keymap_preference > p {
|
||||
padding: 0 20px;
|
||||
}
|
||||
section#keymap_preference .keymap_select_box {
|
||||
display: inline-block;
|
||||
padding: 12px;
|
||||
min-height: 132px;
|
||||
background-color: var(--color-back);
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
section#keymap_preference .keymap_select_box:hover {
|
||||
color: var(--color-light);
|
||||
border-color: var(--color-accent);
|
||||
background-color: var(--color-ui);
|
||||
}
|
||||
section#keymap_preference .keymap_select_box p {
|
||||
color: var(--color-subtle_text);
|
||||
}
|
||||
|
||||
#start_screen section#quick_setup {
|
||||
padding: 20px 24px;
|
||||
display: block;
|
||||
border-bottom: 5px solid var(--color-border);
|
||||
}
|
||||
section#quick_setup > h2 {
|
||||
display: block;
|
||||
}
|
||||
section#quick_setup > div {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
width: 420px;
|
||||
max-width: 100%;
|
||||
margin-right: 48px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
section#quick_setup > div > label {
|
||||
min-width: 120px;
|
||||
display: inline-block;
|
||||
}
|
||||
section#quick_setup > div bb-select {
|
||||
flex-grow: 1;
|
||||
}
|
||||
section#quick_setup > div > p {
|
||||
color: var(--color-subtle_text);
|
||||
}
|
||||
.quick_setup_theme {
|
||||
cursor: pointer;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.quick_setup_theme > div {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border: 2px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
padding-top: 8px;
|
||||
background-color: var(--color-ui);
|
||||
cursor: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
.quick_setup_theme:hover,
|
||||
.quick_setup_theme.selected {
|
||||
color: var(--color-light);
|
||||
}
|
||||
.quick_setup_theme:hover > div,
|
||||
.quick_setup_theme.selected > div {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/*Status Bar*/
|
||||
#status_bar {
|
||||
position: relative;
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
<link rel="stylesheet" href="css/setup.css">
|
||||
<link rel="stylesheet" href="css/general.css">
|
||||
<link rel="stylesheet" href="css/window.css">
|
||||
<link rel="stylesheet" href="css/start_screen.css">
|
||||
<link rel="stylesheet" href="css/panels.css">
|
||||
<link rel="stylesheet" href="css/dialogs.css">
|
||||
<style type="text/css" id="theme_css"></style>
|
||||
|
||||
@ -206,7 +206,7 @@ const Blockbench = {
|
||||
<div class="dialog_close_button" onclick="open_interface.cancel()"><i class="material-icons">clear</i></div>
|
||||
</dialog>`)
|
||||
|
||||
jq_dialog.append('<div class="dialog_content"><div class="dialog_bar" style="height: auto; min-height: 56px; margin-bottom: 16px;">'+
|
||||
jq_dialog.append('<div class="dialog_content"><div class="dialog_bar markdown" style="height: auto; min-height: 56px; margin-bottom: 16px;">'+
|
||||
marked(tl(options.message))+
|
||||
'</div></div>'
|
||||
)
|
||||
|
||||
@ -266,7 +266,7 @@ onVueSetup(function() {
|
||||
</div>
|
||||
|
||||
<div class="start_screen_right start_screen_format_page" v-if="viewed_format = (selected_format_id && (formats[selected_format_id] || loaders[selected_format_id]) )" :id="'format_page_'+selected_format_id">
|
||||
<div class="tool format_page_close_button" @click="selected_format_id = ''"><i class="material-icons">arrow_back_ios</i></div>
|
||||
<div class="tool format_page_close_button" @click="selected_format_id = ''"><i class="material-icons">clear</i></div>
|
||||
|
||||
<h2 style="margin-bottom: 12px;">{{ viewed_format.name }}</h2>
|
||||
|
||||
@ -289,14 +289,19 @@ onVueSetup(function() {
|
||||
<template v-for="item in viewed_format.format_page.content">
|
||||
|
||||
<img v-if="item.type == 'image'" :src="item.source" :width="item.width" :height="item.height">
|
||||
<h2 v-if="item.type == 'h2'" v-html="marked(item.text.replace(/\\n/g, '\\n\\n'))"></h2>
|
||||
<label v-if="item.type == 'label'" v-html="marked(item.text.replace(/\\n/g, '\\n\\n'))"></label>
|
||||
<p v-else v-html="marked((item.text || item).replace(/\\n/g, '\\n\\n'))"></p>
|
||||
<h2 v-else-if="item.type == 'h2'" class="markdown" v-html="marked(item.text.replace(/\\n/g, '\\n\\n'))"></h2>
|
||||
<h3 v-else-if="item.type == 'h3'" class="markdown" v-html="marked(item.text.replace(/\\n/g, '\\n\\n'))"></h3>
|
||||
<h4 v-else-if="item.type == 'h4'" class="markdown" v-html="marked(item.text.replace(/\\n/g, '\\n\\n'))"></h4>
|
||||
<label v-else-if="item.type == 'label'" class="markdown" v-html="marked(item.text.replace(/\\n/g, '\\n\\n'))"></label>
|
||||
<p v-else class="markdown" v-html="marked((item.text || item).replace(/\\n/g, '\\n\\n'))"></p>
|
||||
</template>
|
||||
</content>
|
||||
|
||||
<div class="button_bar">
|
||||
<button style="margin-top: 20px;" @click="confirmSetupScreen(viewed_format)">${tl('mode.start.start')}</button>
|
||||
<div class="button_bar" v-if="!viewed_format.format_page || viewed_format.format_page.button_text !== ''">
|
||||
<button style="margin-top: 20px;" id="create_new_model_button" @click="confirmSetupScreen(viewed_format)">
|
||||
<i class="material-icons">arrow_forward</i>
|
||||
{{ viewed_format.format_page && viewed_format.format_page.button_text ? tl(viewed_format.format_page.button_text) : '${tl('mode.start.create_new')}' }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@ -1210,6 +1210,16 @@ var entity_format = new ModelFormat({
|
||||
icon: 'icon-format_bedrock',
|
||||
category: 'minecraft',
|
||||
target: 'Minecraft: Bedrock Edition',
|
||||
format_page: {
|
||||
content: [
|
||||
{type: 'h3', text: tl('mode.start.format.informations')},
|
||||
{text: `* ${tl('format.bedrock.info.textures')}`},
|
||||
{type: 'h3', text: tl('mode.start.format.resources')},
|
||||
{text: `* [Article on modeling and implementation](https://www.blockbench.net/wiki/guides/bedrock-modeling)
|
||||
* [Modeling Tutorial Series](https://www.youtube.com/watch?v=U9FLteWmFzg&list=PLvULVkjBtg2SezfUA8kHcPUGpxIS26uJR)`.replace(/\t+/g, '')
|
||||
}
|
||||
]
|
||||
},
|
||||
rotate_cubes: true,
|
||||
box_uv: true,
|
||||
optional_box_uv: true,
|
||||
|
||||
@ -4,6 +4,16 @@ new ModelFormat({
|
||||
icon: 'icon-format_free',
|
||||
category: 'low_poly',
|
||||
target: ['Blender', 'Unity', 'Unreal Engine', 'Sketchfab'],
|
||||
format_page: {
|
||||
content: [
|
||||
{type: 'h3', text: tl('mode.start.format.informations')},
|
||||
{text: `* ${tl('format.free.info.meshes')}
|
||||
* ${tl('format.free.info.limitation')}`.replace(/\t+/g, '')
|
||||
},
|
||||
{type: 'h3', text: tl('mode.start.format.resources')},
|
||||
{text: `* [Low-Poly Modeling Tutorial](https://www.youtube.com/watch?v=WbyCbA1c8BM)`}
|
||||
]
|
||||
},
|
||||
meshes: true,
|
||||
rotate_cubes: true,
|
||||
bone_rig: true,
|
||||
|
||||
@ -456,6 +456,15 @@ var format = new ModelFormat({
|
||||
icon: 'icon-format_block',
|
||||
category: 'minecraft',
|
||||
target: 'Minecraft: Java Edition',
|
||||
format_page: {
|
||||
content: [
|
||||
{type: 'h3', text: tl('mode.start.format.informations')},
|
||||
{text: `* ${tl('format.java_block.info.rotation')}
|
||||
* ${tl('format.java_block.info.size')}
|
||||
* ${tl('format.java_block.info.animation')}`.replace(/\t+/g, '')
|
||||
}
|
||||
]
|
||||
},
|
||||
render_sides() {
|
||||
if (Modes.display && ['thirdperson_righthand', 'thirdperson_lefthand', 'head'].includes(display_slot)) {
|
||||
return 'double';
|
||||
|
||||
@ -878,6 +878,14 @@ var format = new ModelFormat({
|
||||
icon: 'icon-format_java',
|
||||
category: 'minecraft',
|
||||
target: 'Minecraft: Java Edition',
|
||||
format_page: {
|
||||
content: [
|
||||
{type: 'h3', text: tl('mode.start.format.informations')},
|
||||
{text: `* ${tl('format.modded_entity.info.integer_size')}
|
||||
* ${tl('format.modded_entity.info.format')}`.replace(/\t+/g, '')
|
||||
}
|
||||
]
|
||||
},
|
||||
codec,
|
||||
box_uv: true,
|
||||
single_texture: true,
|
||||
|
||||
@ -303,6 +303,16 @@ var format = new ModelFormat({
|
||||
icon: 'icon-format_optifine',
|
||||
category: 'minecraft',
|
||||
target: 'Minecraft: Java Edition with OptiFine',
|
||||
format_page: {
|
||||
content: [
|
||||
{type: 'h3', text: tl('mode.start.format.informations')},
|
||||
{text: `* ${tl('format.optifine_entity.info.optifine_required')}
|
||||
* ${tl('format.optifine_entity.info.pivots')}`.replace(/\t+/g, '')
|
||||
},
|
||||
{type: 'h3', text: tl('mode.start.format.resources')},
|
||||
{text: `* [OptiFine Modeling and Animation Tutorial](https://youtu.be/arj2eim42KI)`}
|
||||
]
|
||||
},
|
||||
model_identifier: false,
|
||||
box_uv: true,
|
||||
optional_box_uv: true,
|
||||
|
||||
@ -157,6 +157,16 @@ const format = new ModelFormat('skin', {
|
||||
icon: 'icon-player',
|
||||
category: 'minecraft',
|
||||
target: ['Minecraft: Java Edition', 'Minecraft: Bedrock Edition'],
|
||||
format_page: {
|
||||
content: [
|
||||
{type: 'h3', text: tl('mode.start.format.informations')},
|
||||
{text: `* ${tl('format.skin.info.skin')}
|
||||
* ${tl('format.skin.info.model')}`.replace(/\t+/g, '')
|
||||
},
|
||||
{type: 'h3', text: tl('mode.start.format.resources')},
|
||||
{text: `* [Skin Design Tutorial](https://youtu.be/xC81Q3HGraE)`}
|
||||
]
|
||||
},
|
||||
can_convert_to: false,
|
||||
model_identifier: false,
|
||||
bone_rig: true,
|
||||
|
||||
@ -595,7 +595,7 @@ BARS.defineActions(function() {
|
||||
|
||||
<div class="author">{{ tl('dialog.plugins.author', [plugin.author]) }}</div>
|
||||
<div class="description">{{ plugin.description }}</div>
|
||||
<div v-if="plugin.expanded" class="about" v-html="marked(plugin.about.replace(/\\n/g, '\\n\\n'))"><button>a</button></div>
|
||||
<div v-if="plugin.expanded" class="about markdown" v-html="marked(plugin.about.replace(/\\n/g, '\\n\\n'))"><button>a</button></div>
|
||||
<div v-if="plugin.expanded" v-on:click="plugin.toggleInfo()" style="text-decoration: underline;">${tl('dialog.plugins.show_less')}</div>
|
||||
<ul class="plugin_tag_list">
|
||||
<li v-for="tag in plugin.tags" :class="getTagClass(tag)" :key="tag" @click="search_term = tag;">{{tag}}</li>
|
||||
|
||||
File diff suppressed because one or more lines are too long
25
lang/en.json
25
lang/en.json
@ -88,6 +88,10 @@
|
||||
"mode.start.info": "Info",
|
||||
"mode.start.target": "Target",
|
||||
"mode.start.start": "Start",
|
||||
"mode.start.create_new": "Create New Model",
|
||||
"mode.start.format.informations": "Good to know:",
|
||||
"mode.start.format.resources": "Resources:",
|
||||
|
||||
"mode.start.quick_setup": "Quick Setup",
|
||||
"mode.start.keymap_preference.desc": "If you are new to Blockbench and you are coming from another 3D program, you can select a keymap to make your transition easier. You can change the keymap or individual keybindings later in the settings.",
|
||||
"mode.start.keymap": "Keymap",
|
||||
@ -98,20 +102,39 @@
|
||||
|
||||
"format.free": "Generic Model",
|
||||
"format.free.desc": "Model without restrictions. For game engines, rendering etc.",
|
||||
"format.free.info.meshes": "In this format, you can create low poly models using cubes and custom shaped meshes.",
|
||||
"format.free.info.limitation": "Models cannot be loaded into games that need specialized formats, such as Minecraft.",
|
||||
|
||||
"format.skin": "Minecraft Skin",
|
||||
"format.skin.desc": "Edit player and entity skins",
|
||||
"format.skin.info.skin": "This format is designed to create Minecraft skins and entity textures.",
|
||||
"format.skin.info.model": "The model cannot be changed. In order to make changes to the model, first convert to a different format via **File** > **Convert**.",
|
||||
|
||||
"format.java_block": "Java Block/Item",
|
||||
"format.java_block.desc": "Block or item model for Minecraft Java Edition.",
|
||||
"format.java_block.info.rotation": "Rotations are limited to 22.5 degree steps and one axis per element",
|
||||
"format.java_block.info.size": "The model is limited to a size of 3 by 3 by 3 blocks. Display settings can make item models larger though",
|
||||
"format.java_block.info.animation": "This format does not support animations in vanilla Minecraft. If you are creating a mod, you can use GeckoLib to animate models. If not, the only way to animate is to switch out the model using commands or animated textures.",
|
||||
|
||||
"format.bedrock": "Bedrock Entity",
|
||||
"format.bedrock.desc": "Entity model for Minecraft Bedrock Edition",
|
||||
"format.bedrock.info.textures": "Each model can only have one texture",
|
||||
|
||||
"format.bedrock_block": "Bedrock Block",
|
||||
"format.bedrock_block.desc": "Block model for Minecraft Bedrock Edition",
|
||||
"format.bedrock_old": "Bedrock Legacy Model",
|
||||
"format.bedrock_old.desc": "Pre-1.12 Minecraft Bedrock Edition entity model",
|
||||
|
||||
"format.modded_entity": "Modded Entity",
|
||||
"format.modded_entity.desc": "Entity model for Minecraft mods. Can be exported as .java class files.",
|
||||
"format.modded_entity.info.integer_size": "The size of individual cubes is limited to integers.",
|
||||
"format.modded_entity.info.format": "Models are written in Java code instead of dedicated data structures like all other Blockbench export formats.",
|
||||
|
||||
"format.optifine_entity": "OptiFine Entity",
|
||||
"format.optifine_entity.desc": "Custom entity model for OptiFine",
|
||||
"format.optifine_entity.desc": "Custom entity model for the OptiFine mod",
|
||||
"format.optifine_entity.info.optifine_required": "Users without OptiFine installed won't see the model.",
|
||||
"format.optifine_entity.info.pivots": "Bone pivots are locked, so it is a good idea to leave them untouched.",
|
||||
|
||||
"format.optifine_part": "OptiFine Part",
|
||||
"format.optifine_part.desc": "JPM part for OptiFine entity models",
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user