266 lines
4.3 KiB
CSS
266 lines
4.3 KiB
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;
|
|
}
|
|
}
|
|
}
|
|
} */
|