blockbench/css/window.css

/*Layout*/
	#page_wrapper {
		height: calc(100% - 26px);
		width: 100%;
		border: 2px solid var(--color-frame);
		border-top: none;
		background-color: var(--color-dark);
	}
	#page_wrapper.invisible {
		visibility: hidden;
	}
	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;
	}
	#work_screen {
		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";
		width: 100%;
		height: calc(100% - 30px);
	}

	#tab_bar {
		height: 30px;
	}
	.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;
		height: 26px;
		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;
		overflow: hidden;
		height: auto;
		padding: 3px;
		color: var(--color-subtle_text);
		text-align: center;
	}
	div#header_free_bar.app-drag-region.resize_space {
		margin-top: 4px;
		padding-top: 0;
		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;
		flex-shrink: 0;
	}
	#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;
		flex-shrink: 0;
	}
	header .tool .icon {
		font-size: 20px;
	}

/*Mobile*/
@media (max-device-width: 640px) {

	#page_wrapper {
		border: none;
	}
	#work_screen {
		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;
	}
	#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 {
		font-size: 1.1em;
		height: 30px;
		margin-left: auto;
		margin-right: 0;
	}
	#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);
	}

/* Tab Bar */
	#tab_bar {
		display: flex;
		flex-direction: row;
		position: relative;
		white-space: nowrap;
		padding-left: 4px;
		background: var(--color-frame);
	}
	#tab_bar #tab_bar_list {
		display: flex;
		flex-direction: row;
		position: relative;
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		margin-right: auto;
	}
	#tab_bar .project_tab {
		background-color: var(--color-back);
		cursor: pointer;
		width: 240px;
		min-width: 120px;
		height: 100%;
		padding: 2px 6px;
		position: relative;
		overflow: hidden;
		display: inline-flex;
		margin-left: 2px;
		border-top: 2px solid transparent;
		left: 0;
		--tabwidth: 202px;
	}
	#tab_bar.drag_mode .project_tab {
		transition: left 100ms ease;
	}
	#tab_bar .project_tab.selected {
		background-color: var(--color-ui);
		cursor: default;
		border-top-color: var(--color-accent);
	}
	#tab_bar .project_tab.selected.new_tab {
		background-color: var(--color-dark);
	}
	#tab_bar .project_tab:not(.selected):hover {
		background-color: var(--color-button);
		color: var(--color-light);
	}
	#tab_bar .project_tab.dragging {
		background-color: var(--color-button);
		color: var(--color-light);
		position: relative;
		z-index: 5;
		box-shadow: 0 0 10px #00000080;
		transition: none;
	}
	#tab_bar .project_tab.move_back {
		left: calc(var(--tabwidth) * -1);
	}
	#tab_bar .project_tab.move_forth {
		left: var(--tabwidth);
	}
	#tab_bar .project_tab > label {
		overflow: hidden;
		width: calc(100% - 20px);
		flex: 1 1 auto;
		padding: 0 4px;
		pointer-events: none;
	}
	#tab_bar .project_tab > * {
		cursor: inherit
	}
	#tab_bar .project_tab_close_button {
		flex: 0 0 24px;
		text-align: center;
		cursor: pointer;
		display: none;
	}
	#tab_bar .project_tab_close_button > * {
		pointer-events: none;
	}
	#tab_bar .project_tab:hover .project_tab_close_button,
	#tab_bar .project_tab.selected .project_tab_close_button,
	#tab_bar .project_tab .project_tab_close_button.unsaved {
		display: block;
	}
	#tab_bar .project_tab_close_button:hover {
		color: var(--color-light);
	}
	#tab_bar .project_tab_close_button.unsaved > i {
		font-size: 13px;
		text-align: center;
	}
	#new_tab_button {
		height: 100%;
		width: 32px;
		text-align: center;
		cursor: pointer;
		padding-top: 4px;
		flex-shrink: 0;
	}
	#new_tab_button:hover {
		color: var(--color-light);
	}
	#search_tab_button {
		height: 100%;
		width: 32px;
		text-align: center;
		cursor: pointer;
		padding-top: 4px;
		flex-shrink: 0;
	}
	#search_tab_button:hover {
		color: var(--color-light);
	}
	#tab_bar .project_tab > label.project_tab_session_badge {
		display: flex;
		flex-grow: 0;
		width: auto;
		color: var(--color-accent);
	}
	#tab_bar .project_tab > label.project_tab_session_badge i {
		margin-right: 2px;
		margin-left: -4px;
	}
	#tab_bar.invisible {
		visibility: hidden;
	}
	.project_thumbnail {
		z-index: 50;
		background-color: var(--color-back);
		position: absolute;
		box-shadow: 0 0 10px rgb(0 0 0 / 40%);
		max-width: 240px;
		image-rendering: auto;
		animation: fade_in_thumbnail 700ms;
		transition: left 100ms ease-in-out;
	}
	@keyframes fade_in_thumbnail {
		0% {
			opacity: 0;
		}
		80% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}


/*Start Screen*/
	#mode_screen_start {
		flex-grow: 1;
	}
	#start_screen {
		height: calc(100% - 30px);
		width: 100%;
		padding: 36px 0;
	}
	#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 {
		display: block;
		margin: 0;
		height: 130px;
		position: relative;
		background-color: var(--color-back);
		cursor: pointer;
	}
	#start_screen .recent_project.thumbnail .thumbnail_image {
		width: 180px;
		height: 100px;
		margin: auto;
		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: 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);
	}
	#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;
		max-width: 1000px;
		height: auto;
		max-height: 100%;
		margin-left: auto;
		margin-right: auto;
		background-color: var(--color-ui);
		overflow-y: scroll;
		overflow-x: hidden;
		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;
    	padding-right: 5px;
		overflow-y: auto;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(170px ,1fr));
		grid-gap: 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);
	}