blockbench/css/general.css

/*Defaults*/
	div.tool.wide {
		width: 72px;
		padding: 1px 0;
	}
	.hidden, .tooltip_shift, .custom_select ul, .mobile_only, .m_disp {
		display: none;
	}
	div.selection_only {
		visibility: hidden;
	}
	a.open-in-browser {
		cursor: pointer;
	}
	.f_left {
		float: left;
	}
	.f_right {
		float: right !important;
	}
	.i_b {
		display: inline-block;
	}
	label.inline_label {
		padding-left: 8px;
		padding-right: 8px;
		padding-top: 2px;
	}
	.progress_bar {
		background-color: var(--color-back);
		height: 20px;
		margin-top: 12px;
	}
	.progress_bar_inner {
		background-color: var(--color-accent);
		height: 100%;
		width: 0px;
	}
	.accent_color {
		color: var(--color-accent);
		font-weight: normal; 
	}
	.slash {
		color: var(--color-light);
		padding-left: 3px;
		padding-right: 3px;
		font-weight: normal; 
		display: inline-block;
	}
	.code {
		font-family: var(--font-code);
		font-size: 16px;
	}
	.small_text {
		font-size: 0.94em;
	}
	.color_x {
		color: var(--color-axis-x);
	}
	.color_y {
		color: var(--color-axis-y);
	}
	.color_z {
		color: var(--color-axis-z);
	}
	.button {
		display: inline-block;
		width: 30px;
		text-align: center;
		cursor: default;
	}
	.dark_bordered {
		height: 30px;
		padding-left: 4px;
		background-color: var(--color-back);
		border: 1px solid var(--color-border);
	}
	.input_wide {
		width: 100%;
		padding: 8px;
		height: 40px;
		padding-bottom: 5px;
	}
	input.medium_width {
		width: 64px;
	}
	.checkerboard, .checkerboard_trigger .checkerboard_target {
		--color-checker_offset: rgba(0, 0, 0, 0.16);
		background-color: var(--color-checkerboard) !important;
		background-image: linear-gradient(45deg, var(--color-checkerboard) 25%, transparent 25%),
						  linear-gradient(-45deg, var(--color-checkerboard) 25%, transparent 25%),
						  linear-gradient(45deg, transparent 75%, var(--color-checkerboard) 75%),
						  linear-gradient(-45deg, var(--color-checker_offset) 75%, var(--color-checkerboard) 75%);
		background-size: 30px 30px;
		background-position: 0 0, 0 15px, 15px -15px, -15px 0px;
	}
	body[mode=start] div#center.checkerboard {
		background-image: none;
		background-color: var(--color-dark) !important;
	}

/*UI Elements*/
	div.preview {
		height: 100%;
		width: 100%;
		position: relative;
		cursor: inherit;
	}
	.preview > canvas {
		background-repeat: no-repeat;
	}
	.preview .preview_menu {
		position: absolute;
		right: -1px;
		top: 0;
		width: 20px;
		background-color: var(--color-dark);
	}
	.checkerboard .tool.preview_menu {
		background-color: var(--color-checkerboard);
	}
	.preview .preview_menu > i {
		width: 20px;
		margin-left: -2px;
	}
	.text_padding {
		margin-left: 5px;
		margin-right: 5px;
	}
	.toolbar_label {
		padding: 2px;
		margin-left: 4px;
	}
	.bar {
		height: 30px;
		margin-top: 2px;
	}
	.bar > * {
		float: left;
	}
	.bar.flex {
		display: flex;
	}
	.bar.flex > * {
		float: none;
	}
	.bar.flex > label {
		flex-grow: 0;
	}
	.scroll_horizontal {
		overflow-x: scroll;
		overflow-y: hidden;
		height: 100%;
		scrollbar-width: none;
	}
	.scroll_horizontal ::-webkit-scrollbar {
		height: 0px;
	}
	.list {
		background-color: var(--color-back);
		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;
	}
	body.animation_mode #cubes_list {
		height: calc(100% - 50px);
	}
	body.animation_mode #cubes_list .outliner_object.cube {
		display: none;
	}
	#quick_message_box {
		position: absolute;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		top: 420px;
		z-index: 100;
		min-width: 150px;
		max-width: 250px;
		width: min-content;
		padding: 0 12px;
		background-color: var(--color-bright_ui);
		color: var(--color-accent_text);
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);;
		text-align: center;
		overflow-wrap: break-word;
		cursor: default;
		pointer-events: none;
	}

	@media (max-device-width: 640px) {
		#quick_message_box {
			bottom: 26px;
			top: unset;
			padding: 6px;
		}
	}
	.uv_message_box {
		position: absolute;
		margin-left: auto;
		margin-right: auto;
		z-index: 101;
		min-width: 100px;
		max-width: 200px;
		background-color: var(--color-bright_ui);
		color: var(--color-accent_text);
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);;
		text-align: center;
		cursor: default;
		top: 40px;
		right: 0px;
		left: 0px;
		pointer-events: none;
	}
	#uv_dialog_all .uv_message_box {
		top: 60px;
	}
	.selection_rectangle {
		position: absolute;
		display: block;
		border: 1px solid var(--color-accent);
		background-color: rgba(40,50,60,0.5);
		pointer-events: none;
	}

	#no_css_message {
		display: none !important;
	}

	#center_tip {
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
		min-width: 200px;
		max-width: 100%;
		position: absolute;
		text-align: center;
		background-color: var(--color-accent);
		color: var(--color-accent_text);
		width: max-content;
		padding: 3px 8px;
	}
	#center_tip i {
		vertical-align: text-bottom;
		margin-right: 6px;
	}

	.annotation {
		min-width: 40px;
		max-width: 100%;
		width: max-content;
		position: absolute;
		text-align: center;
		background-color: var(--color-bright_ui);
		color: var(--color-accent_text);
		padding: 3px 8px;
		pointer-events: none;
	}
	.annotation.transparent {
		background: transparent;
		font-weight: normal;
		font-size: 1.2em;
		padding: 0;
		margin: -4px;
		min-width: 15px;
		color: var(--color-light);
		text-shadow: 0 0 5px black;
	}

	.spinning {
		-webkit-animation: spin 2s linear infinite;
		-moz-animation: spin 2s linear infinite;
		animation: spin 2s linear infinite;
	}
	@-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); } }


/*Actions*/
	.toolbar {
		width: 100%;
		overflow: hidden;
	}
	div.toolbar_wrapper {
		float: none;
	}
	.toolbar.narrow, .toolbar_wrapper.narrow > .toolbar {
		width: fit-content;
		display: flex;
		flex-flow: row-reverse;
		height: 100%;
	}
	.toolbar.narrow, .toolbar_wrapper.narrow > .toolbar > .content {
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.toolbar_wrapper > .toolbar.vertical {
		width: 40px;
		flex-direction: column-reverse;
	}
	.toolbar_wrapper > .toolbar.vertical .tool {
		height: 36px;
		width: 40px;
		padding: 2px;
	}
	.toolbar.vertical .toolbar_menu {
		height: 24px;
		padding: 0;
	}
	.toolbar > .tool.toolbar_menu {
		float: right;
		width: 14px;
	}
	.toolbar > .tool.toolbar_menu > i {
		width: 16px;
		margin-left: -5px;
	}
	.tool {
		height: 30px;
		width: 36px;
		margin-left: 1px;
		margin-right: 1px;
		background: transparent;
		display: inline-block;
		text-align: center;
		vertical-align: middle;
		cursor: default;
		float: left;
		color: var(--color-text);
	}
	.tool i {
		display: inline-block;
		margin-top: 4px;
	}

	.tool.sel {
		border-bottom: 3px solid var(--color-accent);
	}

	.tool.widget {
		width: auto;
		padding: 0;
	}
	.tool.widget.bar_text {
		padding: 2px 3px;
	}
	.tool.has_label {
		width: auto;
	}

	.tool:hover {
		color: var(--color-light);
	}
	.tool.head_right {
		margin-top: -29px;
		height: 24px;
		float: right;
	}
	.tool.right_tool {
		position: relative;
	}

	.placeholder {
		width: 20px;
		height: 10px;
		float: left;
	}
	.toolbar_separator {
		width: 2px;
		height: 24px;
		float: left;
		background-color: var(--color-border);
		margin: 4px;
		margin-bottom: 0;
	}
	.text_button:hover {
		color: var(--color-light);
	}
	.bar_select_wrapper {
		position: relative;
	}
	.bar_select:hover {
		color: var(--color-light);
	}
	.bar_select select {
		padding-right: 24px;
		width: 100%;
	}
	.bar_select .bar_select_wrapper::before {
		content: "\f0d7";
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		display: block;
		position: absolute;
		height: 12px;
		width: 16px;
	    pointer-events: none;
	    right: 6px;
	    top: 3px;
	}
	.half {
		display: inline-block;
		width: calc(50% - 4px);
	}
	.tooltip {
		position: absolute;
		height: 28px;
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 2px;
		color: var(--color-accent_text);
		margin-top: 30px;
		display: none;
		background: var(--color-bright_ui);
		white-space: nowrap;
		z-index: 18;
		box-shadow: 0 0.4px 3.5px rgba(0, 0, 0, 0.6);
	}
	.tool:hover > .tooltip:not(:hover) {
		display: block;
	}
	.tooltip_shift {
		display: inline;
		display: none;
	}

/*(Context-)Menu*/
	.contextMenu {
		position: absolute;
		display: block;
		height: auto;
		min-width: 110px;
		background-color: var(--color-bright_ui);
		color: var(--color-accent_text);
		z-index: 20;
		box-shadow: 0.4px 0.4px 4px rgba(0, 0, 0, 0.7);
		cursor: default;
		white-space: nowrap;
	}
	.contextMenu.sub {
		display: none;
		margin-top: -28px;
	}
	.contextMenu li {
		height: 30px;
		padding: 4px;
		padding-left: 34px;
		padding-right: 8px;
	}
	.contextMenu li.parent {
		padding-right: 20px;
	}
	.contextMenu li.parent::before {
		content: "\f105";
		display: block;
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		font-size: inherit;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		float: right;
		margin-right: -12px;
		pointer-events: none;
	}
	.contextMenu li.focused, .contextMenu li.parent.opened {
		background-color: var(--color-accent);
	}
	.contextMenu li i {
		float: left;
		margin-top: 1px; 
		margin-right: 4px;
		margin-left: -28px;
		pointer-events: none;
	}
	.contextMenu li img {
		cursor: default;
		height: 16px;
		width: 16px;
		color: var(--color-text);
		white-space: nowrap;
		margin-bottom: -1px;
		margin-left: -23px;
		margin-right: 8px;
	}
	.contextMenu li.focused > .contextMenu.sub {
		display: block;
	}
	.contextMenu li.opened > .contextMenu.sub {
		display: block;
	}
	li.menu_separator {
		height: 2px;
		width: 100%;
		padding: 0;
		background-color: var(--color-text);
	}