mirror of
https://github.com/JannisX11/blockbench.git
synced 2024-11-21 01:13:37 +08:00
767 lines
15 KiB
CSS
767 lines
15 KiB
CSS
|
|
/*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;
|
|
}
|
|
|
|
#center {
|
|
grid-area: center;
|
|
background-color: var(--color-dark);
|
|
min-width: 100px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
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;
|
|
}*/
|
|
|
|
/* Toast Notification */
|
|
#toast_notification_list {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 8;
|
|
}
|
|
.toast_notification {
|
|
position: relative;
|
|
background-color: var(--color-accent);
|
|
color: var(--color-accent_text);
|
|
min-height: 30px;
|
|
margin: 2px;
|
|
padding: 3px 28px 3px 10px;
|
|
width: calc(100% - 4px);
|
|
box-shadow: 0.4px 0.4px 4px rgba(0, 0, 0, 0.7);
|
|
}
|
|
.toast_notification .icon {
|
|
float: left;
|
|
}
|
|
.toast_close_button {
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
height: 30px;
|
|
width: 30px;
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.toast_close_button:hover {
|
|
color: var(--color-light);
|
|
}
|
|
|
|
|
|
/*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#corner_logo {
|
|
width: auto;
|
|
padding-right: 8px;
|
|
padding-left: 6px;
|
|
margin-left: 4px;
|
|
font-size: 1.2em;
|
|
font-weight: normal;
|
|
color: var(--color-light);
|
|
vertical-align: top;
|
|
margin-top: -0.6px;
|
|
}
|
|
div#corner_logo img {
|
|
margin-top: 3px;
|
|
width: 134px;
|
|
}
|
|
@media (max-width:950px) {
|
|
div#corner_logo {
|
|
width: 36px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
cursor: pointer;
|
|
}
|
|
#web_download_button a {
|
|
text-decoration: none !important;
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 0 12px;
|
|
cursor: inherit;
|
|
}
|
|
#web_download_button:hover a {
|
|
color: var(--color-accent_text);
|
|
}
|
|
#windows_window_menu {
|
|
margin-left: auto;
|
|
}
|
|
#windows_window_menu li {
|
|
display: block;
|
|
width: 42px;
|
|
height: 100%;
|
|
text-align: center;
|
|
float: left;
|
|
}
|
|
#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: 640px) {
|
|
|
|
#page_wrapper {
|
|
display: grid;
|
|
grid-template-rows: auto minmax(200px, 5000px) 26px 36px;
|
|
grid-template-areas:
|
|
"toolbar"
|
|
"center"
|
|
"status_bar"
|
|
"panel_selector";
|
|
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: 62px;
|
|
right: 0px;
|
|
}
|
|
#main_toolbar > div.mobile_side {
|
|
position: absolute;
|
|
z-index: 2;
|
|
right: 0px;
|
|
margin-top: 30px;
|
|
}
|
|
#main_toolbar > div.tool_options {
|
|
background-color: var(--color-back);
|
|
}
|
|
.preview .preview_menu {
|
|
left: 0;
|
|
right: unset;
|
|
}
|
|
.resizer.vertical {
|
|
display: none;
|
|
}
|
|
.sidebar {
|
|
overflow-y: auto;
|
|
}
|
|
#left_bar, #right_bar {
|
|
width: calc(100% - 40px);
|
|
display: none;
|
|
}
|
|
|
|
#panel_selector_bar {
|
|
display: flex;
|
|
grid-area: panel_selector;
|
|
}
|
|
#panel_selector_bar .panel_selector {
|
|
height: 36px;
|
|
flex: 36px 1 0;
|
|
text-align: center;
|
|
cursor: default;
|
|
color: var(--color-text);
|
|
}
|
|
#panel_selector_bar .panel_selector.selected {
|
|
border-bottom: 3px solid var(--color-accent);
|
|
}
|
|
.panel_selector:only-child {
|
|
display: none;
|
|
}
|
|
#panel_selector_bar .panel_selector .icon_wrapper {
|
|
margin-top: 6px;
|
|
}
|
|
#mobile_keyboard_menu {
|
|
width: 40px;
|
|
text-align: center;
|
|
padding: 6px;
|
|
position: relative;
|
|
}
|
|
#mobile_keyboard_menu:hover {
|
|
color: var(--color-light);
|
|
}
|
|
#mobile_keyboard_menu.enabled::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
height: 8px;
|
|
width: 8px;
|
|
border-radius: 50%;
|
|
background-color: var(--color-accent);
|
|
bottom: 2px;
|
|
right: 15px;
|
|
}
|
|
|
|
div#mobile_panel_overlay {
|
|
position: absolute;
|
|
z-index: 12;
|
|
top: 0;
|
|
left: 0;
|
|
right: 40px;
|
|
bottom: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
background: var(--color-ui);
|
|
}
|
|
div#mobile_panel_overlay > .panel {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
/*Menu Bar*/
|
|
ul#menu_bar {
|
|
height: 100%;
|
|
}
|
|
li.menu_bar_point {
|
|
font-size: 17px;
|
|
padding: 0 8px;
|
|
padding-top: 2px;
|
|
display: inline-block;
|
|
height: 100%;
|
|
font-weight: normal;
|
|
}
|
|
li.menu_bar_point.opened {
|
|
color: var(--color-accent_text);
|
|
background: var(--color-accent);
|
|
}
|
|
li.menu_bar_point.highlighted {
|
|
animation: menu_item_highlight 1s infinite ease-in-out;
|
|
}
|
|
|
|
#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*/
|
|
#mode_screen_start {
|
|
flex-grow: 1;
|
|
}
|
|
#start_screen {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
#start_screen h3 {
|
|
margin: 0;
|
|
padding-bottom: 0;
|
|
height: auto;
|
|
font-size: 18px;
|
|
}
|
|
#start_screen .bar.next_to_title {
|
|
position: absolute;
|
|
right: 8px;
|
|
}
|
|
#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_list_type {
|
|
height: 30px;
|
|
position: absolute;
|
|
top: 32px;
|
|
right: 20px;
|
|
}
|
|
#start_screen_list_type li.selected {
|
|
border-bottom: 3px solid var(--color-accent);
|
|
}
|
|
|
|
#start_screen .recent_project.thumbnail {
|
|
width: 180px;
|
|
height: 130px;
|
|
position: relative;
|
|
float: left;
|
|
margin: 2px;
|
|
background-color: var(--color-back);
|
|
cursor: pointer;
|
|
}
|
|
#start_screen .recent_project.thumbnail .thumbnail_image {
|
|
width: 180px;
|
|
height: 100px;
|
|
background-size: 180px;
|
|
background-repeat: no-repeat;
|
|
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: 4px;
|
|
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);
|
|
}
|
|
#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 > content {
|
|
display: block;
|
|
margin-top: 40px;
|
|
max-width: 1000px;
|
|
height: auto;
|
|
max-height: calc(100% - 50px);
|
|
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;
|
|
width: 62%;
|
|
}
|
|
#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;
|
|
}
|
|
@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 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_screen section#start-files left {
|
|
width: 38%;
|
|
padding: 20px 24px 0px 24px;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
#start-files right {
|
|
border-left: 1px solid var(--color-border);
|
|
}
|
|
#start_screen left > ul {
|
|
margin-bottom: 16px;
|
|
overflow-y: auto;
|
|
}
|
|
#start_screen right i {
|
|
vertical-align: sub;
|
|
}
|
|
#start-files left li {
|
|
padding: 4px 0;
|
|
cursor: pointer;
|
|
}
|
|
#start-files left span.icon_wrapper {
|
|
height: 22px;
|
|
}
|
|
#start-files left li p {
|
|
font-size: 0.94em;
|
|
line-height: normal;
|
|
color: var(--color-subtle_text);
|
|
}
|
|
#start-files left i {
|
|
font-size: 18pt;
|
|
height: 22px;
|
|
margin: 2px 8px 0px 0;
|
|
display: inline-block;
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
/*Status Bar*/
|
|
#status_bar {
|
|
position: relative;
|
|
display: flex;
|
|
background: var(--color-back);
|
|
}
|
|
#status_bar > div {
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
padding-top: 1px;
|
|
flex-shrink: 0;
|
|
}
|
|
#status_bar > div#status_saved {
|
|
padding-top: 2px;
|
|
}
|
|
#status_bar > div#status_name {
|
|
width: 0;
|
|
flex-grow: 1;
|
|
overflow: hidden;
|
|
}
|
|
#status_bar #status_progress {
|
|
position: absolute;
|
|
height: 4px;
|
|
background: var(--color-accent);
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
#status_bar .sidebar_toggle_button {
|
|
cursor: pointer;
|
|
padding: 2px;
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
}
|
|
.sidebar_toggle_button > i {
|
|
cursor: inherit;
|
|
}
|
|
.sidebar_toggle_button:hover {
|
|
color: var(--color-light);
|
|
}
|
|
|
|
/* Preview */
|
|
.orbit_gizmo {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
width: 80px;
|
|
height: 80px;
|
|
bottom: 0;
|
|
right: 0;
|
|
opacity: 0.6;
|
|
overflow: hidden;
|
|
}
|
|
.orbit_gizmo:hover, .orbit_gizmo.mouse_active {
|
|
background-color: #00000040;
|
|
opacity: 1;
|
|
}
|
|
.orbit_gizmo > svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
pointer-events: none;
|
|
filter: brightness(0.7);
|
|
}
|
|
.orbit_gizmo > svg path {
|
|
stroke-width: 2px;
|
|
fill: none;
|
|
}
|
|
.orbit_gizmo_side {
|
|
color: var(--color-accent_text);
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: -8px;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
font-family: var(--font-code);
|
|
}
|
|
.orbit_gizmo.mouse_active .orbit_gizmo_side {
|
|
pointer-events: none;
|
|
}
|
|
.orbit_gizmo_side[axis="x"], .orbit_gizmo > svg path[axis="x"] {
|
|
background-color: var(--color-axis-x);
|
|
stroke: var(--color-axis-x);
|
|
}
|
|
.orbit_gizmo_side[axis="y"], .orbit_gizmo > svg path[axis="y"] {
|
|
background-color: var(--color-axis-y);
|
|
stroke: var(--color-axis-y);
|
|
}
|
|
.orbit_gizmo_side[axis="z"], .orbit_gizmo > svg path[axis="z"] {
|
|
background-color: var(--color-axis-z);
|
|
stroke: var(--color-axis-z);
|
|
}
|
|
.orbit_gizmo_side.background {
|
|
z-index: 0;
|
|
filter: brightness(0.7);
|
|
}
|
|
.orbit_gizmo:not(.mouse_active) .orbit_gizmo_side:hover {
|
|
background-color: var(--color-bright_ui) !important;
|
|
filter: brightness(1);
|
|
} |