blockbench/css/window.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;
	}

	.panel.grow {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		min-height: 133px;
	}

	h3.panel_handle {
		width: 100%;
		height: auto;
		padding: 6px 12px;
		background: var(--color-ui);
		color: var(--color-subtle_text);
		margin: 0;
		text-transform: uppercase;
		font-size: 1.1em;
	}
	.panel p {
		margin-left: 12px;
	}
	body > h3.panel_handle {
		pointer-events: none;
		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;
		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;
	}*/



/*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;
		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;
	}

	div#mobile_panel_overlay {
		position: absolute;
		z-index: 19;
		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: 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*/
	#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 {
		margin-top: -40px;
		margin-right: -12px;
		position: relative;
		float: right;
	}
	#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;
	}
	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;
		background-color: var(--color-ui);
	}
	#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% - 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;
		width: 62%;
	}
	#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: 640px) {
		#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_screen section#start-files left {
		width: 38%;
		overflow: hidden;
		padding: 20px 24px 0px 24px
	}
	#start-files right {
		border-left: 1px solid var(--color-border);
	}
	#start_screen left > ul {
		height: calc(100% - 60px);
		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;
		color: var(--color-subtle_text);
	}
	#start-files left i {
		font-size: 18pt;
		height: 22px;
		margin: 2px 8px 0px 0;
		display: inline-block;
	}

/*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);
	}