mirror of
https://github.com/zadam/trilium.git
synced 2025-10-19 06:38:59 +02:00
Update the Canvas Notes UI styling (#7372)
This commit is contained in:
Adorian Doran
GitHub
commit
c71cab4951
@ -360,7 +360,8 @@ button kbd {
|
||||
}
|
||||
|
||||
.dropdown-menu,
|
||||
.tabulator-popup-container {
|
||||
.tabulator-popup-container,
|
||||
:root .excalidraw .popover {
|
||||
color: var(--menu-text-color) !important;
|
||||
font-size: inherit;
|
||||
background: var(--menu-background-color) !important;
|
||||
@ -371,7 +372,9 @@ button kbd {
|
||||
}
|
||||
|
||||
body.desktop .dropdown-menu,
|
||||
body.desktop .tabulator-popup-container {
|
||||
body.desktop .tabulator-popup-container,
|
||||
:root .excalidraw .dropdown-menu .dropdown-menu-container,
|
||||
:root .excalidraw .popover {
|
||||
border: 1px solid var(--dropdown-border-color);
|
||||
column-rule: 1px solid var(--dropdown-border-color);
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
|
||||
@ -416,7 +419,8 @@ body.desktop .tabulator-popup-container {
|
||||
|
||||
.dropdown-menu a:hover:not(.disabled),
|
||||
.dropdown-item:hover:not(.disabled, .dropdown-container-item),
|
||||
.tabulator-menu-item:hover {
|
||||
.tabulator-menu-item:hover,
|
||||
:root .excalidraw .context-menu .context-menu-item:hover {
|
||||
color: var(--hover-item-text-color) !important;
|
||||
background-color: var(--hover-item-background-color) !important;
|
||||
border-color: var(--hover-item-border-color) !important;
|
||||
@ -457,7 +461,8 @@ body #context-menu-container .dropdown-item > span {
|
||||
}
|
||||
|
||||
.dropdown-item,
|
||||
.dropdown-header {
|
||||
.dropdown-header,
|
||||
:root .excalidraw .context-menu .context-menu-item:hover {
|
||||
color: var(--menu-text-color) !important;
|
||||
border: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
@import url(./pages.css);
|
||||
@import url(./ribbon.css);
|
||||
@import url(./notes/text.css);
|
||||
@import url(./notes/canvas.css);
|
||||
@import url(./notes/collections/table.css);
|
||||
|
||||
@font-face {
|
||||
@ -96,9 +97,10 @@ body.backdrop-effects-disabled {
|
||||
* supported when this class is used.
|
||||
*/
|
||||
|
||||
.dropdown-menu:not(.static) {
|
||||
.dropdown-menu:not(.static),
|
||||
:root .excalidraw .popover {
|
||||
border-radius: var(--dropdown-border-radius);
|
||||
padding: var(--menu-padding-size) !important;
|
||||
padding: var(--padding, var(--menu-padding-size)) !important;
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
@ -114,7 +116,8 @@ body.mobile .dropdown-menu .dropdown-menu {
|
||||
}
|
||||
|
||||
body.desktop .dropdown-menu::before,
|
||||
:root .ck.ck-dropdown__panel::before {
|
||||
:root .ck.ck-dropdown__panel::before,
|
||||
:root .excalidraw .popover::before {
|
||||
content: "";
|
||||
backdrop-filter: var(--dropdown-backdrop-filter);
|
||||
border-radius: var(--dropdown-border-radius);
|
||||
@ -148,9 +151,17 @@ body.desktop .dropdown-submenu .dropdown-menu {
|
||||
}
|
||||
|
||||
.dropdown-item,
|
||||
body.mobile .dropdown-submenu .dropdown-toggle {
|
||||
padding: 2px 2px 2px 8px !important;
|
||||
padding-inline-end: 22px !important;
|
||||
body.mobile .dropdown-submenu .dropdown-toggle,
|
||||
.excalidraw .context-menu .context-menu-item {
|
||||
--menu-item-start-padding: 8px;
|
||||
--menu-item-end-padding: 22px;
|
||||
--menu-item-vertical-padding: 2px;
|
||||
|
||||
padding-top: var(--menu-item-vertical-padding) !important;
|
||||
padding-bottom: var(--menu-item-vertical-padding) !important;
|
||||
padding-inline-start: var(--menu-item-start-padding) !important;
|
||||
padding-inline-end: var(--menu-item-end-padding) !important;
|
||||
|
||||
/* Note: the right padding should also accommodate the submenu arrow. */
|
||||
border-radius: 6px;
|
||||
cursor: default !important;
|
||||
@ -202,7 +213,8 @@ html body .dropdown-item[disabled] {
|
||||
}
|
||||
|
||||
/* Menu item keyboard shortcut */
|
||||
.dropdown-item kbd {
|
||||
.dropdown-item kbd,
|
||||
.excalidraw .context-menu-item__shortcut {
|
||||
font-family: unset !important;
|
||||
font-size: unset !important;
|
||||
color: var(--menu-item-keyboard-shortcut-color) !important;
|
||||
@ -214,13 +226,15 @@ html body .dropdown-item[disabled] {
|
||||
margin-inline-start: 16px;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
.dropdown-divider,
|
||||
.excalidraw .context-menu hr {
|
||||
position: relative;
|
||||
border-color: transparent !important;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.dropdown-divider::after {
|
||||
.dropdown-divider::after,
|
||||
.excalidraw .context-menu hr::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: -1px;
|
||||
@ -253,7 +267,9 @@ body[dir=rtl] .dropdown-menu:not([data-popper-placement="bottom-start"]) .dropdo
|
||||
/* Menu item group heading */
|
||||
|
||||
/* The heading body */
|
||||
.dropdown-menu h6 {
|
||||
.dropdown-menu h6,
|
||||
.excalidraw .dropdown-menu-container .dropdown-menu-group-title,
|
||||
.excalidraw .dropdown-menu-container div[data-testid="canvas-background-label"] {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
padding: 1em 8px 14px 8px;
|
||||
@ -264,7 +280,9 @@ body[dir=rtl] .dropdown-menu:not([data-popper-placement="bottom-start"]) .dropdo
|
||||
}
|
||||
|
||||
/* The delimiter line */
|
||||
.dropdown-menu h6::before {
|
||||
.dropdown-menu h6::before,
|
||||
.excalidraw .dropdown-menu-container .dropdown-menu-group-title::before,
|
||||
.excalidraw .dropdown-menu-container div[data-testid="canvas-background-label"]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
|
||||
229
apps/client/src/stylesheets/theme-next/notes/canvas.css
Normal file
229
apps/client/src/stylesheets/theme-next/notes/canvas.css
Normal file
@ -0,0 +1,229 @@
|
||||
: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 item icon */
|
||||
:root .excalidraw .dropdown-menu-item__icon {
|
||||
color: var(--menu-item-icon-color);
|
||||
}
|
||||
|
||||
/* Context menu item 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=rtl] .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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user