mirror of
https://github.com/zadam/trilium.git
synced 2025-10-19 22:58:52 +02:00
224 lines
5.4 KiB
CSS
224 lines
5.4 KiB
CSS
:root .excalidraw {
|
|
--ui-font: var(--main-font-family);
|
|
|
|
|
|
/* Button hover background color */
|
|
--button-hover-bg: var(--hover-item-background-color);
|
|
--color-surface-high: var(--hover-item-background-color);
|
|
|
|
|
|
--button-active-border: transparent;
|
|
--color-brand-active: transparent;
|
|
|
|
--color-surface-mid: transparent;
|
|
--color-surface-low: transparent;
|
|
|
|
/* Slider colors */
|
|
--color-slider-track: var(--menu-item-delimiter-color);
|
|
--color-slider-thumb: var(--muted-text-color);
|
|
|
|
/* Selected button icon fill color */
|
|
--color-on-primary-container: var(--ck-editor-toolbar-button-on-color);
|
|
--color-primary: var(--ck-editor-toolbar-button-on-color);
|
|
|
|
/* Selected button icon background color */
|
|
--color-surface-primary-container: var(--ck-editor-toolbar-button-on-background);
|
|
--color-primary-light: var(--ck-editor-toolbar-button-on-background);
|
|
|
|
--island-bg-color: var(--floating-button-background-color);
|
|
|
|
}
|
|
|
|
/* Dark theme tweaks */
|
|
|
|
:root body .excalidraw.theme--dark {
|
|
--color-surface-high: transparent;
|
|
--color-brand-hover: transparent;
|
|
}
|
|
|
|
:root .excalidraw.theme--dark.excalidraw .App-mobile-menu,
|
|
:root .excalidraw.theme--dark.excalidraw .App-menu__left {
|
|
--button-hover-bg: var(--hover-item-background-color);
|
|
}
|
|
|
|
:root .excalidraw.theme--dark.excalidraw .dropdown-menu-button:hover {
|
|
--background: var(--hover-item-background-color);
|
|
}
|
|
|
|
|
|
/* Note's root */
|
|
|
|
:root .type-canvas {
|
|
--floating-buttons-vert-offset: 20px;
|
|
}
|
|
|
|
/* Context menus */
|
|
|
|
/* Context menu - outer wrapper */
|
|
:root .excalidraw .popover {
|
|
--padding: 0;
|
|
|
|
max-width: unset;
|
|
overflow: hidden;
|
|
font-family: var(--main-font-family);
|
|
}
|
|
|
|
/* Context menu - inner wrapper */
|
|
:root .excalidraw .popover > .context-menu {
|
|
margin: 0;
|
|
padding: 8px !important;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: 100%;
|
|
border: none;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Context menu item */
|
|
:root .excalidraw .context-menu .context-menu-item {
|
|
--menu-item-start-padding: 22px;
|
|
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
/* Context menu label */
|
|
:root .excalidraw .context-menu-item__label,
|
|
:root .excalidraw .context-menu-item.dangerous .context-menu-item__label {
|
|
color: var(--menu-text-color);
|
|
}
|
|
|
|
:root .excalidraw .context-menu-item:hover .context-menu-item__label {
|
|
color: var(--hover-item-text-color);
|
|
}
|
|
|
|
/* Context menu item keyboard shortcut */
|
|
:root .excalidraw .context-menu-item__shortcut {
|
|
padding: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Context menu separator */
|
|
.excalidraw .context-menu .context-menu-item-separator {
|
|
margin: 8px 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Main menu */
|
|
|
|
/* Hide separators - no longer needed as the menu group headers feature a delimiter line */
|
|
.excalidraw .Island.dropdown-menu-container>div:not(:has(>*)) {
|
|
display: none;
|
|
}
|
|
|
|
/* Menu group header */
|
|
.excalidraw .dropdown-menu-container .dropdown-menu-group-title,
|
|
.excalidraw .Island.dropdown-menu-container div[data-testid="canvas-background-label"] {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* Header */
|
|
|
|
.excalidraw .App-menu.App-menu_top {
|
|
align-items: center;
|
|
}
|
|
|
|
.excalidraw .App-menu.App-menu_top .App-menu_top__left {
|
|
/* Fixes a layout glitch with the header when the options panel is visbile */
|
|
--gap: 0 !important;
|
|
}
|
|
|
|
/* The parent element of the "Library" button */
|
|
.excalidraw .App-menu.App-menu_top > div:nth-child(3) {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
/* Panels */
|
|
|
|
.excalidraw .Island:not(.App-menu__left),
|
|
.excalidraw .zoom-actions,
|
|
.undo-redo-buttons {
|
|
box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
|
|
backdrop-filter: blur(10px) saturate(6);
|
|
}
|
|
|
|
:root .excalidraw .main-menu-trigger,
|
|
:root .excalidraw .sidebar-trigger,
|
|
:root .excalidraw .help-icon {
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Selected color outline */
|
|
:root .excalidraw .color-picker__button.active .color-picker__button-outline {
|
|
box-shadow: 0 0 0 2px var(--input-focus-outline-color)
|
|
}
|
|
|
|
:root .excalidraw .buttonList label.active {
|
|
border-color: transparent;
|
|
}
|
|
|
|
/* Options panel */
|
|
|
|
.excalidraw .Island.App-menu__left {
|
|
box-shadow: none;
|
|
background: transparent;
|
|
backdrop-filter: none;
|
|
width: 13.2em;
|
|
}
|
|
|
|
body[dir=ltr] .excalidraw .Island.App-menu__left {
|
|
right: 0;
|
|
}
|
|
|
|
body[dir=rtl] .excalidraw .Island.App-menu__left {
|
|
left: 0;
|
|
}
|
|
|
|
:root .App-menu__left > .panelColumn {
|
|
row-gap: 5px;
|
|
}
|
|
|
|
/* Options panel card */
|
|
:root .App-menu__left > .panelColumn > fieldset,
|
|
:root .App-menu__left > .panelColumn > label,
|
|
:root .App-menu__left > .panelColumn > div:has(> *) {
|
|
margin: 0;
|
|
border-radius: 4px;
|
|
box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
|
|
background: var(--floating-button-background-color);
|
|
padding: 8px 12px;
|
|
backdrop-filter: blur(10px) saturate(6);
|
|
}
|
|
|
|
/* Options panel card title */
|
|
:root .App-menu__left fieldset > legend,
|
|
:root .App-menu__left div > h3,
|
|
:root .App-menu__left > .panelColumn > label {
|
|
text-transform: uppercase;
|
|
font-size: .65rem;
|
|
letter-spacing: 1pt;
|
|
color: var(--muted-text-color);
|
|
}
|
|
|
|
/* Options panel button bar */
|
|
:root .excalidraw .App-menu__left .buttonList {
|
|
padding: 0;
|
|
}
|
|
|
|
/* Properties panel */
|
|
|
|
body[dir=ltr] .excalidraw .exc-stats {
|
|
left: 0;
|
|
}
|
|
|
|
body[dir=ltr] .excalidraw .exc-stats {
|
|
right: 0;
|
|
}
|
|
|
|
/* Sidebar */
|
|
|
|
.split-note-container-widget > .component.type-canvas:has(.excalidraw-container > .Island.default-sidebar) > .floating-buttons {
|
|
/* Hide the floating buttons when the sidebar is open */
|
|
display: none;
|
|
} |