cours/.obsidian/snippets/Excalidraw - Compact.css

/*
    Excalidraw plugin
    Compact layout. Only tested on Desktop.

    https://github.com/replete/obsidian-minimal-theme-css-snippets
*/

.excalidraw {

	/* Fix illegible island contrast */
	--island-bg-color:#dde4eb  !important;
	&.theme--dark {
		--island-bg-color:#292929 !important;
	}

	/* Better looking floating utility island */
	> .Island:not(.sidebar) {
		width:180px !important;

		> div:first-child {
			border-bottom-left-radius: 0 !important;
			svg {
				opacity:0.2;
				/* height:16px; */

				> path {
					display:none
				}
			}
		}
		> .Island {
			padding:4px;
			border-top-left-radius: 0 !important;
			border-top-right-radius: 0 !important;
			margin-top:-4px;
			border-top:1px solid rgba(255,255,255,.2);

			legend {
				opacity:0.5;
				margin:4px 0 -2px 5px;
				/* text-align:center; */
				text-transform:uppercase;
				letter-spacing:0.04em;
				font-size:10px;
				/* border-bottom:1px solid rgba(255,255,255,0.5); */
				width:100%;
			}

			.buttonList {
				gap:2px
			}

			.ToolIcon_type_button {
				padding:2px !important;
				border-radius:0 !important;
				background:none;

				.ToolIcon__icon {
					transform: scale(1.3) !important;
				}
			}
		}
	}

	.App-toolbar {
		padding:0;

		/* Increase icon size toolbar */
		.ToolIcon {
			.ToolIcon__icon svg {
				transform:scale(1.4) !important;
			}
		}

		/* make keyboard shortcut numbers more visible */
		.ToolIcon__keybinding {
			font-size:8px !important;
			top:30px;
			left:12px;
		}

		.App-toolbar__divider {
			margin-right:0;
			margin-left:0;
		}
	}

	.HintViewer {
		margin-top:20px
	}

	/* Remove padding around canvas UI */
	.FixedSideContainer.FixedSideContainer_side_top {
		padding:0;
		top:2px !important;
		left:10px !important;
		bottom:0 !important;
		right:2px !important;
	}
	.App-menu_top__left,
	.layer-ui__wrapper__top-right {
		margin-top:4px !important;
	}

	.dropdown-menu .Island /* desktop */,
	.dropdown-menu--mobile > .Stack /*mobile*/{
		padding:0 !important;

		[data-testid=canvas-background-label] {
			padding-left:8px;
			opacity:0.5;
			margin-bottom:0px !important;
		}

		.dropdown-menu-item {
			margin:0;
			height:1.5rem !important;
			font-size:0.85rem;

			+ div[style]:empty {
				margin:4px 0 !important;
			}
		}
	}

	.dropdown-menu-container {
		gap:0; /* mobile */
	}

	.sidebar-trigger {
		padding-top:12px;
	}

	[role=contentinfo] {
		bottom:-1px !important;
		left:0 !important;
		padding-left:34px;

		.help-icon {
			position:fixed;
			bottom: -1px;
			padding:0;
			left: 2px;
			opacity:0.8;
		}

		.reset-zoom-button {
			font-size:75% !important;
			opacity: 0.8;
		}
	}

	/* Library sidebar */
	.Island.sidebar {
		width:400px;
		background: var(--island-bg-color);

		.sidebar-tabs-root {
			padding-top:4px;
		}

		.sidebar__header {
			padding-bottom:0;
		}

		.library-menu-items-container__items {
			padding-top:0;
		}

		.library-menu-dropdown-container {
			margin-top:-14px;
		}

		.library-menu-items-container__grid {
			width:100%;
			gap:5px;

			.library-unit {
				width:100%;
			}

			.library-unit__active {
				border-radius:2px;
			}

			.library-unit__dragger {
				width:100%;
				height:100%;
			}
		}

		.library-menu-control-buttons--at-bottom[style] {
			padding-top:4px !important;
			width:40%;

		}
	}

	/* Smaller on mobile */
	&.excalidraw--mobile .Island.sidebar {
		width:250px !important;

		.Checkbox-box {
			width:12px;
			height:12px;
			border-radius:2px;
		}

		.library-menu-control-buttons--at-bottom[style] {
			width:60%;
		}
	}

	/* Fix sidebar trigger bg color */
	.sidebar-trigger:not(:hover) {
		background-color:transparent !important
	}

	/* Tray mode - sidebar*/
	.mobile-misc-tools-container {
		right:0;

		.ToolIcon {
			svg {
				transform:scale(1.4)
			}
		}
	}

	/* Tray mode - bottom bar */
	.App-bottom-bar[style] {
		margin-bottom:0 !important;

		.Island {
			padding:0;
			background-color:transparent;

			> .Stack > .Stack {
				padding:0 !important;
			}
		}

		.App-toolbar-content {
			padding:0;
		}

		.dropdown-menu-container {
			background:var(--island-bg-color);
			margin-bottom:-20px;
		}


	}
}

/* Show excalidraw right footer help icon above minimal statusbar */
/* @container style(--status-bar-position: fixed) {
	.excalidraw-container {
		[role=contentinfo] {
			.help-icon {
				margin-top:-40px;
			}
		}
	}
} */