From 2191b1b9fdbaf038f7da403a95e737a6ad86df02 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 20 Mar 2025 10:04:05 +0200 Subject: [PATCH] style(next): reorganize CSS --- src/public/stylesheets/theme-next/base.css | 377 ++++++++ src/public/stylesheets/theme-next/pages.css | 8 + src/public/stylesheets/theme-next/shell.css | 934 ++++++-------------- 3 files changed, 661 insertions(+), 658 deletions(-) diff --git a/src/public/stylesheets/theme-next/base.css b/src/public/stylesheets/theme-next/base.css index fb8630e11..cf24bc40c 100644 --- a/src/public/stylesheets/theme-next/base.css +++ b/src/public/stylesheets/theme-next/base.css @@ -74,6 +74,191 @@ --tab-note-icons: true; } +/* + * MENUS + * + * Note: apply the "tn-dropdown-list" class for scrollable dropdown menus. Submenus are not + * supported when this class is used. + */ + + .dropdown-menu:not(.static) { + border-radius: var(--dropdown-border-radius); + padding: var(--menu-padding-size) !important; + font-size: 0.9rem !important; +} + +.dropdown-menu::-webkit-scrollbar-track { + background: var(--menu-background-color); +} + +body.mobile .dropdown-menu { + backdrop-filter: var(--dropdown-backdrop-filter); + border-radius: var(--dropdown-border-radius); + position: relative; +} + +body.mobile .dropdown-menu .dropdown-menu { + backdrop-filter: unset !important; + border-radius: unset !important; +} + +body.desktop .dropdown-menu::before { + content: ""; + backdrop-filter: var(--dropdown-backdrop-filter); + border-radius: var(--dropdown-border-radius); + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; +} + +body.desktop .dropdown-menu.tn-dropdown-list { + backdrop-filter: var(--dropdown-backdrop-filter); +} + +body.desktop .dropdown-menu.tn-dropdown-list::before { + display: none; +} + +body.desktop .dropdown-submenu .dropdown-menu::before { + content: unset; +} + +body.mobile .dropdown-submenu .dropdown-menu { + background: transparent !important; +} + +body.desktop .dropdown-submenu .dropdown-menu { + backdrop-filter: var(--dropdown-backdrop-filter); + background: transparent; +} + +.dropdown-item, +body.mobile .dropdown-submenu .dropdown-toggle { + padding: 2px 2px 2px 8px !important; + padding-inline-end: 16px !important; + /* Note: the right padding should also accommodate the submenu arrow. */ + border-radius: 6px; + cursor: default !important; +} + +body.mobile .dropdown-submenu { + padding: 0 !important; +} + +body.mobile .dropdown-item:not(:last-of-type) { + margin-bottom: 0.5em; +} + +body.mobile .dropdown-submenu:hover { + background: transparent !important; +} + +html body .dropdown-item.disabled, +html body .dropdown-item[disabled] { + color: var(--menu-text-color) !important; + opacity: var(--menu-item-disabled-opacity); +} + +/* Menu item icon */ +.dropdown-item .bx { + transform: translateY(var(--menu-item-icon-vert-offset)); + color: var(--menu-item-icon-color) !important; + font-size: 1.1em; +} + +/* Menu item keyboard shortcut */ +.dropdown-item kbd { + margin-left: 16px; + font-family: unset !important; + font-size: unset !important; + color: var(--menu-item-keyboard-shortcut-color) !important; + padding-top: 0; +} + +.dropdown-divider { + position: relative; + border-color: transparent !important; + overflow: visible; +} + +.dropdown-divider::after { + position: absolute; + content: ""; + top: -1px; + left: calc(0px - var(--menu-padding-size)); + right: calc(0px - var(--menu-padding-size)); + border-top: 1px solid var(--menu-item-delimiter-color); +} + +/* Menu item arrow */ +.dropdown-menu .dropdown-toggle::after { + content: "\ed3b" !important; + position: absolute; + display: flex !important; + align-items: center; + justify-content: center; + top: 0; + right: 0; + margin: unset !important; + border: unset !important; + padding: 0 4px; + font-family: boxicons; + font-size: 1.2em; + color: var(--menu-item-arrow-color) !important; +} + +/* Menu item group heading */ + +/* The heading body */ +.dropdown-menu h6 { + position: relative; + background: transparent; + padding: 1em 8px 14px 8px; + text-transform: uppercase; + font-size: 0.8em; + letter-spacing: 1pt; + color: var(--menu-item-group-header-color) !important; +} + +/* The delimiter line */ +.dropdown-menu h6::before { + content: ""; + position: absolute; + bottom: 8px; + left: calc(0px - var(--menu-padding-size)); + right: calc(0px - var(--menu-padding-size)); + border-top: 1px solid var(--menu-item-delimiter-color); +} + +/* Static menus (used as a list, such as on the note revisions dialog) */ +body.desktop .dropdown-menu.static { + box-shadow: unset; + border-radius: 4px; + border: unset; + background-color: var(--card-background-color) !important; + padding: var(--menu-padding-size) !important; + user-select: none; +} + +body.desktop .dropdown-menu.static .dropdown-item.active { + --active-item-text-color: var(--menu-text-color); +} + +body.desktop .dropdown-menu .dropdown-toggle::after { + height: 100%; +} + +body.mobile .dropdown-menu .dropdown-toggle::after { + transform: rotate(90deg); +} + +body.mobile .dropdown-menu .dropdown-item.submenu-open .dropdown-toggle::after { + transform: rotate(270deg); +} + /* Tool dialogs - small dialogs without a backdrop */ div.tn-tool-dialog { border-radius: 10px; @@ -82,6 +267,74 @@ div.tn-tool-dialog { box-shadow: 10px 10px 93px -25px var(--tool-dialog-shadow-color); } +/* + * NOTE TOOLTIP + */ + + .tooltip .tooltip-inner:has(.note-tooltip-content) { + border-radius: 8px; +} + +.note-tooltip-content { + padding: 8px; + min-height: 56px; +} + +.note-tooltip-title .note-title-with-path { + display: flex; + flex-direction: column-reverse; +} + +.note-tooltip-title a { + color: inherit !important; +} + +.note-tooltip-title.note-no-content { + margin: 0; +} + +.note-tooltip-title:not(.note-no-content) .note-title-with-path { + padding-bottom: 6px; + border-bottom: 2px solid currentColor; +} + +.note-tooltip-content .note-path { + display: block; + color: var(--muted-text-color); + font-size: 0.75em; +} + +.note-tooltip-content .note-tooltip-attributes { + margin-top: -4px; + font-size: 0.75em; +} + +.note-tooltip-content .rendered-content { + padding-top: 12px; +} + +/* NOTE PATHS */ + +.note-path .path-bracket { + /* Hide the leading and trailing bracket from the path */ + display: none; +} + +.note-path .path-delimiter { + /* Hide the path delimiters (slashes) */ + display: none; +} + +.note-path .path-delimiter + span::before { + /* Replace the path delimiters with arrows */ + display: inline-block; + content: "\ed3b"; + padding: 0 0.25em; + font-family: boxicons; + opacity: 0.75; + transform: translateY(4%); +} + /* * Note search suggestions */ @@ -148,4 +401,128 @@ div.tn-tool-dialog { #toast-container .toast .toast-body { flex-grow: 1; +} + +/* + * NOTE LIST + */ + .note-list .note-book-card { + --note-list-horizontal-padding: 22px; + --note-list-vertical-padding: 15px; + background-color: var(--card-background-color); + border: 1px solid var(--card-border-color) !important; + box-shadow: 2px 3px 4px var(--card-shadow-color); + border-radius: 12px; + user-select: none; + padding: 0; + margin: 5px 10px 5px 0; +} + +.note-list.list-view .note-book-card { + box-shadow: 0 0 3px var(--card-shadow-color); +} + +.note-list.list-view .note-book-card .note-book-header .note-icon { + vertical-align: middle; +} + +.note-list-wrapper .note-book-card:active { + background-color: var(--card-background-press-color); +} + +.note-list-wrapper .note-book-card a { + color: inherit !important; +} + +.note-list-wrapper .note-book-card .note-book-header { + font-size: 1em; + font-weight: bold; + padding: 0.5em 1rem; + border-bottom-color: var(--card-border-color); +} + +.note-list-wrapper .note-book-card .note-book-header .note-icon { + font-size: 17px; + vertical-align: text-bottom; +} + +.note-list-wrapper .note-book-card .note-book-header .note-book-title { + font-size: 1em; + color: var(--active-item-text-color); + vertical-align: middle; +} + +.note-list-wrapper .note-book-card .note-book-header .rendered-note-attributes { + font-size: 0.7em; + font-weight: normal; + margin-bottom: 0; +} + +.note-list-wrapper .note-book-card .note-book-header:last-child { + border-bottom: 0; +} + +.note-list-wrapper .note-book-card .note-book-content { + padding: 0 !important; + font-size: 0.8rem; +} + +.note-list-wrapper .note-book-card .note-book-content .rendered-content { + padding: 1rem; +} + +.note-list-wrapper .note-book-card .note-book-content .rendered-content.text-with-ellipsis { + padding: 1rem !important; +} + +.note-list-wrapper .note-book-card .note-book-content h1, +.note-list-wrapper .note-book-card .note-book-content h2, +.note-list-wrapper .note-book-card .note-book-content h3, +.note-list-wrapper .note-book-card .note-book-content h4, +.note-list-wrapper .note-book-card .note-book-content h5, +.note-list-wrapper .note-book-card .note-book-content h6 { + font-size: 1rem; + color: var(--active-item-text-color); +} + +.note-list-wrapper .note-book-card .note-book-content p:last-child { + margin-bottom: 0; +} + +.note-list-wrapper .note-book-card .note-book-content.type-canvas .rendered-content, +.note-list-wrapper .note-book-card .note-book-content.type-mindMap .rendered-content, +.note-list-wrapper .note-book-card .note-book-content.type-code .rendered-content, +.note-list-wrapper .note-book-card .note-book-content.type-video .rendered-content { + padding: 0; +} + +.note-list-wrapper .note-book-card .note-book-content.type-code pre { + height: 100%; + padding: 1em; +} + +.note-list-wrapper .note-book-card .bx { + color: var(--left-pane-icon-color) !important; +} + +.note-list.grid-view .note-book-card:hover { + background: var(--card-background-color) !important; + filter: contrast(105%); +} + +.note-list.grid-view .note-book-card img { + object-fit: cover !important; + width: 100%; +} + +.note-list.grid-view .ck-content { + line-height: 1.3; +} + +.note-list.grid-view .ck-content p { + margin-bottom: 0.5em; +} + +.note-list.grid-view .ck-content figure.image { + width: 25%; } \ No newline at end of file diff --git a/src/public/stylesheets/theme-next/pages.css b/src/public/stylesheets/theme-next/pages.css index 1afc729df..bd87ac092 100644 --- a/src/public/stylesheets/theme-next/pages.css +++ b/src/public/stylesheets/theme-next/pages.css @@ -93,6 +93,14 @@ color: var(--muted-text-color); } +/* + * NOTE MAP + */ + + .note-detail-note-map .fixnodes-type-switcher .tn-tool-button.toggled { + color: var(--tab-close-button-hover-background); +} + /* * OPTIONS PAGES */ diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index 68dfc0f67..05d0cb119 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -1,7 +1,3 @@ -/* - * USER INTERFACE - */ - @keyframes fade-in { from { opacity: 0; @@ -90,21 +86,29 @@ body.background-effects.platform-win32.layout-vertical #vertical-main-container border-right: 2px solid var(--left-pane-collapsed-border-color); } -/* - * Global menu - */ - -.global-menu div.zoom-buttons a { - border: unset; -} - -.global-menu div.zoom-buttons a.bx { - color: var(--menu-text-color) !important; +body.background-effects.zen #root-widget { + --main-background-color: transparent; + --root-background: transparent; } /* - * Launcher pane + * Gutter */ + + .gutter { + background: var(--gutter-color) !important; + transition: background 150ms ease-out; +} + +.gutter:hover { + background: var(--gutter-hover-color) !important; + transition: background 300ms ease-in; +} + +/* + * LAUNCHER PANE / TOOLBAR + */ + #launcher-container, body.layout-horizontal > .horizontal { align-items: center; @@ -295,9 +299,169 @@ body.layout-horizontal > .horizontal { color: var(--tooltip-foreground-color) !important; } +/* + * Global menu + */ + + .global-menu div.zoom-buttons a { + border: unset; +} + +.global-menu div.zoom-buttons a.bx { + color: var(--menu-text-color) !important; +} + +/* + * Calendar + */ + + .calendar-dropdown-widget { + width: unset !important; + padding: 12px; + color: var(--calendar-color); + user-select: none; +} + +.calendar-dropdown-widget .calendar-header { + padding: 8px 0 20px 0; + gap: 10px; +} + +.calendar-dropdown-widget .calendar-header input, +.calendar-dropdown-widget .calendar-header [data-calendar-input="month"] { + --input-background-color: transparent; + --menu-background-color: transparent; + + text-align: center; + font-size: 1.4em; + font-weight: 300; +} + +.calendar-dropdown-widget .calendar-header input:not(:focus) { + outline: 3px solid transparent; +} + +.calendar-dropdown-widget .calendar-header .calendar-month-selector .select-button { + --select-arrow-svg: ""; /* Disable the dropdown arrow */ +} + +@media (max-width: 992px) { + .calendar-dropdown-widget .calendar-header button { + margin: 0 !important; + padding: 0; + } + + .calendar-dropdown-widget .calendar-header .calendar-month-selector .select-button { + padding: 0 8px; + flex-grow: 1; + } +} + +@media (min-width: 992px) { + .calendar-dropdown-widget .calendar-header .calendar-month-selector .select-button { + min-width: 120px; + padding: 0 10px; + } +} + +.calendar-dropdown-widget .calendar-header .dropdown-toggle::after { + content: unset !important; +} + +.calendar-dropdown-widget .calendar-week span { + font-size: 0.85em; + font-weight: 500; + color: var(--calendar-weekday-labels-color); +} + +.calendar-dropdown-widget .calendar-body { + font-size: 0.9em; +} + +.calendar-dropdown-widget .calendar-body a { + background: transparent; + color: var(--calendar-color); +} + +.calendar-dropdown-widget .calendar-body a.calendar-date-exists { + position: relative; + text-decoration: none !important; +} + +.calendar-dropdown-widget .calendar-body a.calendar-date-exists:not(:hover)::before { + --vertical-margin: 13%; + --horiz-margin: 18%; + content: ""; + position: absolute; + top: var(--vertical-margin); + right: var(--horiz-margin); + bottom: var(--vertical-margin); + left: var(--horiz-margin); + border-radius: 6px; + background: var(--calendar-day-highlight-background); + z-index: -1; +} + +body .calendar-dropdown-widget .calendar-body a:hover { + border-radius: 6px; + background: var(--calendar-day-hover-background); + color: var(--calendar-day-hover-color) !important; + text-decoration: unset; +} + +/* + * Bookmarks folder popup + */ + +div.bookmark-folder-widget { + min-width: auto; + max-width: 40vw; + padding: 0; + font-size: 1.1em; +} + +div.bookmark-folder-widget .children-notes { + margin: 0; +} + +/* Item */ +div.bookmark-folder-widget span.note-link { + display: flex; + align-items: center; + white-space: nowrap; + border-radius: 6px; + padding: 6px 25px; +} + +/* Item: the parent note */ +div.bookmark-folder-widget .parent-note .note-link { + padding: 6px 8px; + font-weight: bold; +} + +div.bookmark-folder-widget .note-link:hover { + background: var(--hover-item-background-color); +} + +div.bookmark-folder-widget .note-link a { + padding-left: 8px; + color: var(--menu-text-color); + cursor: default; +} + +div.bookmark-folder-widget .note-link:hover a { + color: var(--hover-item-text-color); +} + +/* The item's icon */ +div.bookmark-folder-widget .note-link .bx { + color: var(--menu-item-icon-color); + font-size: 1.2em; +} + /* - * Search Box - */ + * QUICK SEARCH BOX + */ div.quick-search { --padding-top: 8px; @@ -429,11 +593,9 @@ div.quick-search .search-button.show { } /* - * Left pane + * TREE PANE */ -/* Tree */ - #left-pane div.tree { padding: 3px 6px 40px 6px; animation: fade-in 200ms ease-in; @@ -576,7 +738,9 @@ body.mobile .fancytree-node > span { --menu-item-icon-vert-offset: -1px; } -/* Tree actions toolbar */ +/* + * Tree actions toolbar + */ /* Toolbar container (collapsed state) */ #left-pane .tree-actions { @@ -673,21 +837,7 @@ body.mobile .fancytree-node > span { } /* - * Gutter - */ - -.gutter { - background: var(--gutter-color) !important; - transition: background 150ms ease-out; -} - -.gutter:hover { - background: var(--gutter-hover-color) !important; - transition: background 300ms ease-in; -} - -/* - * Tab bar + * TAB BAR */ /* The parent element of the tab bar */ @@ -919,7 +1069,7 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab[active] .note-tab-wrap } /* - * Center pane + * CENTER PANE */ #center-pane { @@ -930,16 +1080,15 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab[active] .note-tab-wrap border-radius: var(--center-pane-border-radius) 0 0 0; } +.note-split { + padding-top: 2px; + animation: note-entrance 100ms linear; + /* will-change: opacity; -- causes some weird artifacts to the note menu in split view */ +} + /* * Ribbon & note header */ -.note-title.protected { - text-shadow: unset !important; -} - -body.mobile .note-title { - background: transparent; -} .ribbon-container { margin-bottom: 0 !important; @@ -957,612 +1106,18 @@ body.mobile .note-title { } } -.note-split { - padding-top: 2px; - animation: note-entrance 100ms linear; - /* will-change: opacity; -- causes some weird artifacts to the note menu in split view */ -} - /* - * Table of contents & Highlights list + * Note title */ -#right-pane { - background: var(--main-background-color); +.note-title.protected { + text-shadow: unset !important; } -#right-pane div.card-header { - align-items: center; - border: 0; -} - -#right-pane .card-header-title { - margin-top: 2px; - font-weight: 600; - font-size: .85em; - letter-spacing: .3pt; - color: var(--right-pane-heading-color); -} - -#right-pane .card-header-buttons { - align-items: center; - top: 0; -} - -#right-pane .toc-widget, -#right-pane .highlights-list-widget { - padding: 0 0 0 10px; -} - -#right-pane .toc li, -#right-pane .highlights-list li { - padding: 2px 8px; - border-radius: 4px; - text-align: unset; - transition: - background-color 150ms ease-in, - color 150ms ease-in; -} - -#right-pane .highlights-list li { - line-height: 1.2; - padding: 8px; -} - -#right-pane .toc li::marker, -#right-pane .highlights-list li::marker { - color: var(--muted-text-color); -} - -#right-pane .toc li:hover, -#right-pane .highlights-list li:hover { - background: var(--right-pane-item-hover-background); - color: var(--right-pane-item-hover-color); - font-weight: normal; - transition: background-color 300ms ease-out color 300ms ease-out; -} - -#right-pane .toc li:active, -#right-pane .highlights-list li:active { - background: transparent; - transition: none; -} - -/* - * Menus - * - * Note: apply the "tn-dropdown-list" class for scrollable dropdown menus. Submenus are not - * supported when this class is used. - */ - -.dropdown-menu:not(.static) { - border-radius: var(--dropdown-border-radius); - padding: var(--menu-padding-size) !important; - font-size: 0.9rem !important; -} - -.dropdown-menu::-webkit-scrollbar-track { - background: var(--menu-background-color); -} - -body.mobile .dropdown-menu { - backdrop-filter: var(--dropdown-backdrop-filter); - border-radius: var(--dropdown-border-radius); - position: relative; -} - -body.mobile .dropdown-menu .dropdown-menu { - backdrop-filter: unset !important; - border-radius: unset !important; -} - -body.desktop .dropdown-menu::before { - content: ""; - backdrop-filter: var(--dropdown-backdrop-filter); - border-radius: var(--dropdown-border-radius); - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: -1; -} - -body.desktop .dropdown-menu.tn-dropdown-list { - backdrop-filter: var(--dropdown-backdrop-filter); -} - -body.desktop .dropdown-menu.tn-dropdown-list::before { - display: none; -} - -body.desktop .dropdown-submenu .dropdown-menu::before { - content: unset; -} - -body.mobile .dropdown-submenu .dropdown-menu { - background: transparent !important; -} - -body.desktop .dropdown-submenu .dropdown-menu { - backdrop-filter: var(--dropdown-backdrop-filter); +body.mobile .note-title { background: transparent; } -.dropdown-item, -body.mobile .dropdown-submenu .dropdown-toggle { - padding: 2px 2px 2px 8px !important; - padding-inline-end: 16px !important; - /* Note: the right padding should also accommodate the submenu arrow. */ - border-radius: 6px; - cursor: default !important; -} - -body.mobile .dropdown-submenu { - padding: 0 !important; -} - -body.mobile .dropdown-item:not(:last-of-type) { - margin-bottom: 0.5em; -} - -body.mobile .dropdown-submenu:hover { - background: transparent !important; -} - -html body .dropdown-item.disabled, -html body .dropdown-item[disabled] { - color: var(--menu-text-color) !important; - opacity: var(--menu-item-disabled-opacity); -} - -/* Menu item icon */ -.dropdown-item .bx { - transform: translateY(var(--menu-item-icon-vert-offset)); - color: var(--menu-item-icon-color) !important; - font-size: 1.1em; -} - -/* Menu item keyboard shortcut */ -.dropdown-item kbd { - margin-left: 16px; - font-family: unset !important; - font-size: unset !important; - color: var(--menu-item-keyboard-shortcut-color) !important; - padding-top: 0; -} - -.dropdown-divider { - position: relative; - border-color: transparent !important; - overflow: visible; -} - -.dropdown-divider::after { - position: absolute; - content: ""; - top: -1px; - left: calc(0px - var(--menu-padding-size)); - right: calc(0px - var(--menu-padding-size)); - border-top: 1px solid var(--menu-item-delimiter-color); -} - -/* Menu item arrow */ -.dropdown-menu .dropdown-toggle::after { - content: "\ed3b" !important; - position: absolute; - display: flex !important; - align-items: center; - justify-content: center; - top: 0; - right: 0; - margin: unset !important; - border: unset !important; - padding: 0 4px; - font-family: boxicons; - font-size: 1.2em; - color: var(--menu-item-arrow-color) !important; -} - -/* Menu item group heading */ - -/* The heading body */ -.dropdown-menu h6 { - position: relative; - background: transparent; - padding: 1em 8px 14px 8px; - text-transform: uppercase; - font-size: 0.8em; - letter-spacing: 1pt; - color: var(--menu-item-group-header-color) !important; -} - -/* The delimiter line */ -.dropdown-menu h6::before { - content: ""; - position: absolute; - bottom: 8px; - left: calc(0px - var(--menu-padding-size)); - right: calc(0px - var(--menu-padding-size)); - border-top: 1px solid var(--menu-item-delimiter-color); -} - -/* Static menus (used as a list, such as on the note revisions dialog) */ -body.desktop .dropdown-menu.static { - box-shadow: unset; - border-radius: 4px; - border: unset; - background-color: var(--card-background-color) !important; - padding: var(--menu-padding-size) !important; - user-select: none; -} - -body.desktop .dropdown-menu.static .dropdown-item.active { - --active-item-text-color: var(--menu-text-color); -} - -body.desktop .dropdown-menu .dropdown-toggle::after { - height: 100%; -} - -body.mobile .dropdown-menu .dropdown-toggle::after { - transform: rotate(90deg); -} - -body.mobile .dropdown-menu .dropdown-item.submenu-open .dropdown-toggle::after { - transform: rotate(270deg); -} - -/* - * Calendar - */ - -.calendar-dropdown-widget { - width: unset !important; - padding: 12px; - color: var(--calendar-color); - user-select: none; -} - -.calendar-dropdown-widget .calendar-header { - padding: 8px 0 20px 0; - gap: 10px; -} - -.calendar-dropdown-widget .calendar-header input, -.calendar-dropdown-widget .calendar-header [data-calendar-input="month"] { - --input-background-color: transparent; - --menu-background-color: transparent; - - text-align: center; - font-size: 1.4em; - font-weight: 300; -} - -.calendar-dropdown-widget .calendar-header input:not(:focus) { - outline: 3px solid transparent; -} - -.calendar-dropdown-widget .calendar-header .calendar-month-selector .select-button { - --select-arrow-svg: ""; /* Disable the dropdown arrow */ -} - -@media (max-width: 992px) { - .calendar-dropdown-widget .calendar-header button { - margin: 0 !important; - padding: 0; - } - - .calendar-dropdown-widget .calendar-header .calendar-month-selector .select-button { - padding: 0 8px; - flex-grow: 1; - } -} - -@media (min-width: 992px) { - .calendar-dropdown-widget .calendar-header .calendar-month-selector .select-button { - min-width: 120px; - padding: 0 10px; - } -} - -.calendar-dropdown-widget .calendar-header .dropdown-toggle::after { - content: unset !important; -} - -.calendar-dropdown-widget .calendar-week span { - font-size: 0.85em; - font-weight: 500; - color: var(--calendar-weekday-labels-color); -} - -.calendar-dropdown-widget .calendar-body { - font-size: 0.9em; -} - -.calendar-dropdown-widget .calendar-body a { - background: transparent; - color: var(--calendar-color); -} - -.calendar-dropdown-widget .calendar-body a.calendar-date-exists { - position: relative; - text-decoration: none !important; -} - -.calendar-dropdown-widget .calendar-body a.calendar-date-exists:not(:hover)::before { - --vertical-margin: 13%; - --horiz-margin: 18%; - content: ""; - position: absolute; - top: var(--vertical-margin); - right: var(--horiz-margin); - bottom: var(--vertical-margin); - left: var(--horiz-margin); - border-radius: 6px; - background: var(--calendar-day-highlight-background); - z-index: -1; -} - -body .calendar-dropdown-widget .calendar-body a:hover { - border-radius: 6px; - background: var(--calendar-day-hover-background); - color: var(--calendar-day-hover-color) !important; - text-decoration: unset; -} - -/* - * Note tooltip - */ - -.tooltip .tooltip-inner:has(.note-tooltip-content) { - border-radius: 8px; -} - -.note-tooltip-content { - padding: 8px; - min-height: 56px; -} - -.note-tooltip-title .note-title-with-path { - display: flex; - flex-direction: column-reverse; -} - -.note-tooltip-title a { - color: inherit !important; -} - -.note-tooltip-title.note-no-content { - margin: 0; -} - -.note-tooltip-title:not(.note-no-content) .note-title-with-path { - padding-bottom: 6px; - border-bottom: 2px solid currentColor; -} - -.note-tooltip-content .note-path { - display: block; - color: var(--muted-text-color); - font-size: 0.75em; -} - -.note-tooltip-content .note-tooltip-attributes { - margin-top: -4px; - font-size: 0.75em; -} - -.note-tooltip-content .rendered-content { - padding-top: 12px; -} - -/* - * Note Map - */ - -.note-detail-note-map .fixnodes-type-switcher .tn-tool-button.toggled { - color: var(--tab-close-button-hover-background); -} - -/* - * Bookmarks folder popup - */ - -div.bookmark-folder-widget { - min-width: auto; - max-width: 40vw; - padding: 0; - font-size: 1.1em; -} - -div.bookmark-folder-widget .children-notes { - margin: 0; -} - -/* Item */ -div.bookmark-folder-widget span.note-link { - display: flex; - align-items: center; - white-space: nowrap; - border-radius: 6px; - padding: 6px 25px; -} - -/* Item: the parent note */ -div.bookmark-folder-widget .parent-note .note-link { - padding: 6px 8px; - font-weight: bold; -} - -div.bookmark-folder-widget .note-link:hover { - background: var(--hover-item-background-color); -} - -div.bookmark-folder-widget .note-link a { - padding-left: 8px; - color: var(--menu-text-color); - cursor: default; -} - -div.bookmark-folder-widget .note-link:hover a { - color: var(--hover-item-text-color); -} - -/* The item's icon */ -div.bookmark-folder-widget .note-link .bx { - color: var(--menu-item-icon-color); - font-size: 1.2em; -} - -/* - * Note list - */ -.note-list .note-book-card { - --note-list-horizontal-padding: 22px; - --note-list-vertical-padding: 15px; - background-color: var(--card-background-color); - border: 1px solid var(--card-border-color) !important; - box-shadow: 2px 3px 4px var(--card-shadow-color); - border-radius: 12px; - user-select: none; - padding: 0; - margin: 5px 10px 5px 0; -} - -.note-list.list-view .note-book-card { - box-shadow: 0 0 3px var(--card-shadow-color); -} - -.note-list.list-view .note-book-card .note-book-header .note-icon { - vertical-align: middle; -} - -.note-list-wrapper .note-book-card:active { - background-color: var(--card-background-press-color); -} - -.note-list-wrapper .note-book-card a { - color: inherit !important; -} - -.note-list-wrapper .note-book-card .note-book-header { - font-size: 1em; - font-weight: bold; - padding: 0.5em 1rem; - border-bottom-color: var(--card-border-color); -} - -.note-list-wrapper .note-book-card .note-book-header .note-icon { - font-size: 17px; - vertical-align: text-bottom; -} - -.note-list-wrapper .note-book-card .note-book-header .note-book-title { - font-size: 1em; - color: var(--active-item-text-color); - vertical-align: middle; -} - -.note-list-wrapper .note-book-card .note-book-header .rendered-note-attributes { - font-size: 0.7em; - font-weight: normal; - margin-bottom: 0; -} - -.note-list-wrapper .note-book-card .note-book-header:last-child { - border-bottom: 0; -} - -.note-list-wrapper .note-book-card .note-book-content { - padding: 0 !important; - font-size: 0.8rem; -} - -.note-list-wrapper .note-book-card .note-book-content .rendered-content { - padding: 1rem; -} - -.note-list-wrapper .note-book-card .note-book-content .rendered-content.text-with-ellipsis { - padding: 1rem !important; -} - -.note-list-wrapper .note-book-card .note-book-content h1, -.note-list-wrapper .note-book-card .note-book-content h2, -.note-list-wrapper .note-book-card .note-book-content h3, -.note-list-wrapper .note-book-card .note-book-content h4, -.note-list-wrapper .note-book-card .note-book-content h5, -.note-list-wrapper .note-book-card .note-book-content h6 { - font-size: 1rem; - color: var(--active-item-text-color); -} - -.note-list-wrapper .note-book-card .note-book-content p:last-child { - margin-bottom: 0; -} - -.note-list-wrapper .note-book-card .note-book-content.type-canvas .rendered-content, -.note-list-wrapper .note-book-card .note-book-content.type-mindMap .rendered-content, -.note-list-wrapper .note-book-card .note-book-content.type-code .rendered-content, -.note-list-wrapper .note-book-card .note-book-content.type-video .rendered-content { - padding: 0; -} - -.note-list-wrapper .note-book-card .note-book-content.type-code pre { - height: 100%; - padding: 1em; -} - -.note-list-wrapper .note-book-card .bx { - color: var(--left-pane-icon-color) !important; -} - -.note-list.grid-view .note-book-card:hover { - background: var(--card-background-color) !important; - filter: contrast(105%); -} - -.note-list.grid-view .note-book-card img { - object-fit: cover !important; - width: 100%; -} - -.note-list.grid-view .ck-content { - line-height: 1.3; -} - -.note-list.grid-view .ck-content p { - margin-bottom: 0.5em; -} - -.note-list.grid-view .ck-content figure.image { - width: 25%; -} - -/* Note paths */ - -.note-path .path-bracket { - /* Hide the leading and trailing bracket from the path */ - display: none; -} - -.note-path .path-delimiter { - /* Hide the path delimiters (slashes) */ - display: none; -} - -.note-path .path-delimiter + span::before { - /* Replace the path delimiters with arrows */ - display: inline-block; - content: "\ed3b"; - padding: 0 0.25em; - font-family: boxicons; - opacity: 0.75; - transform: translateY(4%); -} - -/* Note area */ - .title-row > *:first-child { margin-right: 0; } @@ -1583,15 +1138,6 @@ div.bookmark-folder-widget .note-link .bx { padding-left: 12px; } -.note-actions { - --menu-item-icon-vert-offset: -2.5px; -} - -/* Promoted attributes */ -.promoted-attribute-cell div.input-group { - margin: 1px 0; -} - /* The "Change note icon" button */ .note-icon-widget .note-icon { @@ -1604,7 +1150,13 @@ div.bookmark-folder-widget .note-link .bx { color: var(--icon-button-hover-color); } -/* Note icon popup */ +.note-actions { + --menu-item-icon-vert-offset: -2.5px; +} + +/* + * Note icon popup + */ .note-icon-widget .icon-list span { border-radius: 8px; @@ -1615,12 +1167,9 @@ div.bookmark-folder-widget .note-link .bx { color: var(--hover-item-text-color); } -body.background-effects.zen #root-widget { - --main-background-color: transparent; - --root-background: transparent; -} - -/* Alert bar */ +/* + * Alert bar + */ @keyframes alert-show { from { @@ -1648,6 +1197,10 @@ body.background-effects.zen #root-widget { * Promoted attributes */ +.promoted-attribute-cell div.input-group { + margin: 1px 0; +} + /* The promoted attributes section */ div.promoted-attributes-container { display: flex; @@ -1749,4 +1302,69 @@ div.promoted-attribute-cell .multiplicity:has(span) { margin-left: 8px; margin-right: calc(var(--pa-card-padding-left) - var(--pa-card-padding-right)); font-size: 0; /* Prevent whitespaces creating a gap between buttons */ +} + +/* + * RIGHT PANE: TABLE OF CONTENTS AND HIGHLIGHT LIST + */ + +#right-pane { + background: var(--main-background-color); +} + +#right-pane div.card-header { + align-items: center; + border: 0; +} + +#right-pane .card-header-title { + margin-top: 2px; + font-weight: 600; + font-size: .85em; + letter-spacing: .3pt; + color: var(--right-pane-heading-color); +} + +#right-pane .card-header-buttons { + align-items: center; + top: 0; +} + +#right-pane .toc-widget, +#right-pane .highlights-list-widget { + padding: 0 0 0 10px; +} + +#right-pane .toc li, +#right-pane .highlights-list li { + padding: 2px 8px; + border-radius: 4px; + text-align: unset; + transition: + background-color 150ms ease-in, + color 150ms ease-in; +} + +#right-pane .highlights-list li { + line-height: 1.2; + padding: 8px; +} + +#right-pane .toc li::marker, +#right-pane .highlights-list li::marker { + color: var(--muted-text-color); +} + +#right-pane .toc li:hover, +#right-pane .highlights-list li:hover { + background: var(--right-pane-item-hover-background); + color: var(--right-pane-item-hover-color); + font-weight: normal; + transition: background-color 300ms ease-out color 300ms ease-out; +} + +#right-pane .toc li:active, +#right-pane .highlights-list li:active { + background: transparent; + transition: none; } \ No newline at end of file