diff --git a/bin/build-server.sh b/bin/build-server.sh index de98c7795..b3c385679 100755 --- a/bin/build-server.sh +++ b/bin/build-server.sh @@ -1,7 +1,7 @@ #!/usr/bin/env bash PKG_DIR=dist/trilium-linux-x64-server -NODE_VERSION=14.16.1 +NODE_VERSION=14.17.0 if [ "$1" != "DONTCOPY" ] then diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index 89f1eb864..d1b4abe9b 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -34,6 +34,7 @@ import CreatePaneButton from "../widgets/buttons/create_pane_button.js"; import ClosePaneButton from "../widgets/buttons/close_pane_button.js"; import BasicPropertiesWidget from "../widgets/type_property_widgets/basic_properties.js"; import NoteInfoWidget from "../widgets/type_property_widgets/note_info_widget.js"; +import BookPropertiesWidget from "../widgets/type_property_widgets/book_properties.js"; export default class DesktopLayout { constructor(customWidgets) { @@ -102,6 +103,7 @@ export default class DesktopLayout { new CollapsibleSectionContainer() .section(new SearchDefinitionWidget()) .section(new BasicPropertiesWidget()) + .section(new BookPropertiesWidget()) .section(new NotePropertiesWidget()) .section(new FilePropertiesWidget()) .section(new ImagePropertiesWidget()) diff --git a/src/public/app/services/note_list_renderer.js b/src/public/app/services/note_list_renderer.js index 2cb7df6c9..f29d4dc6c 100644 --- a/src/public/app/services/note_list_renderer.js +++ b/src/public/app/services/note_list_renderer.js @@ -132,30 +132,6 @@ const TPL = ` } -
- - -   - - - -   - - - -   - - -
-
@@ -202,26 +178,6 @@ class NoteListRenderer { this.$noteList.addClass(this.viewType + '-view'); - this.$noteList.find('.list-view-button').on('click', () => this.toggleViewType('list')); - this.$noteList.find('.grid-view-button').on('click', () => this.toggleViewType('grid')); - - this.$noteList.find('.expand-children-button').on('click', async () => { - if (!this.parentNote.hasLabel('expanded')) { - await attributeService.addLabel(this.parentNote.noteId, 'expanded'); - } - - await this.renderList(); - }); - - this.$noteList.find('.collapse-all-button').on('click', async () => { - // owned is important - we shouldn't remove inherited expanded labels - for (const expandedAttr of this.parentNote.getOwnedLabels('expanded')) { - await attributeService.removeAttributeById(this.parentNote.noteId, expandedAttr.attributeId); - } - - await this.renderList(); - }); - this.showNotePath = showNotePath; } @@ -235,23 +191,6 @@ class NoteListRenderer { return new Set(includedLinks.map(rel => rel.value)); } - async toggleViewType(type) { - if (type !== 'list' && type !== 'grid') { - throw new Error(`Invalid view type ${type}`); - } - - this.viewType = type; - - this.$noteList - .removeClass('grid-view') - .removeClass('list-view') - .addClass(this.viewType + '-view'); - - await attributeService.setLabel(this.parentNote.noteId, 'viewType', type); - - await this.renderList(); - } - async renderList() { if (this.noteIds.length === 0) { this.$noteList.hide(); diff --git a/src/public/app/widgets/containers/collapsible_section_container.js b/src/public/app/widgets/containers/collapsible_section_container.js index f4ff66820..66a6705ec 100644 --- a/src/public/app/widgets/containers/collapsible_section_container.js +++ b/src/public/app/widgets/containers/collapsible_section_container.js @@ -62,6 +62,10 @@ const TPL = ` .section-button-container .bx { padding: 5px; + font-size: 150%; + position: relative; + top: -3px; + margin-right: 5px; } .section-body { @@ -207,4 +211,14 @@ export default class CollapsibleSectionContainer extends NoteContextAwareWidget refreshSectionContainerCommand() { this.refreshWithNote(this.note, true); } + + entitiesReloadedEvent({loadResults}) { + if (loadResults.isNoteReloaded(this.noteId) && this.lastNoteType !== this.note.type) { + // note type influences the list of available sections the most + // check for type is so that we don't update on each title rename + this.lastNoteType = this.note.type; + + this.refresh(); + } + } } diff --git a/src/public/app/widgets/note_list.js b/src/public/app/widgets/note_list.js index 5c996bf10..32cd5eb88 100644 --- a/src/public/app/widgets/note_list.js +++ b/src/public/app/widgets/note_list.js @@ -92,4 +92,12 @@ export default class NoteListWidget extends NoteContextAwareWidget { this.refresh(); } } + + entitiesReloadedEvent({loadResults}) { + if (loadResults.getAttributes().find(attr => attr.noteId === this.noteId && attr.name === 'viewType')) { + this.shownNoteId = null; // force render + + this.checkRenderStatus(); + } + } } diff --git a/src/public/app/widgets/note_tree.js b/src/public/app/widgets/note_tree.js index 96760e7ef..690d00775 100644 --- a/src/public/app/widgets/note_tree.js +++ b/src/public/app/widgets/note_tree.js @@ -36,26 +36,33 @@ const TPL = ` padding-bottom: 35px; padding-top: 5px; } - - .collapse-tree-button { - position: absolute; - bottom: 10px; - right: 80px; + + button.tree-floating-button { + font-size: 1.5em; + padding: 2px; + max-height: 34px; + color: var(--button-text-color); + border-radius: var(--button-border-radius); + border: 1px solid transparent; z-index: 100; + position: absolute; + bottom: 13px; + } + + button.tree-floating-button:hover { + border: 1px solid var(--button-border-color); + } + + .collapse-tree-button { + right: 100px; } .scroll-to-active-note-button { - position: absolute; - bottom: 10px; - right: 45px; - z-index: 100; + right: 55px; } .tree-settings-button { - position: absolute; - bottom: 10px; right: 10px; - z-index: 100; } .tree-settings-popup { @@ -65,16 +72,23 @@ const TPL = ` border: 1px solid var(--main-border-color); padding: 20px; z-index: 1000; - width: 320px; + width: 340px; border-radius: 10px; } - +
- + - + + +
@@ -107,8 +121,6 @@ const TPL = `
- -
`; diff --git a/src/public/app/widgets/type_property_widgets/basic_properties.js b/src/public/app/widgets/type_property_widgets/basic_properties.js index 1f0437189..83587cc59 100644 --- a/src/public/app/widgets/type_property_widgets/basic_properties.js +++ b/src/public/app/widgets/type_property_widgets/basic_properties.js @@ -6,7 +6,7 @@ const TPL = `
+ +
+ View type:    + + +
+ + + + +
+`; +export default class BookPropertiesWidget extends NoteContextAwareWidget { + static getType() { return "book-properties"; } + + isEnabled() { + return this.note && this.note.type === 'book'; + } + + getTitle() { + return { + show: this.isEnabled(), + activate: true, + title: 'Book Properties', + icon: 'bx bx-book' + }; + } + + doRender() { + this.$widget = $(TPL); + this.overflowing(); + + this.$viewTypeSelect = this.$widget.find('.view-type-select'); + this.$viewTypeSelect.on('change', () => this.toggleViewType(this.$viewTypeSelect.val())); + + this.$expandChildrenButton = this.$widget.find('.expand-children-button'); + this.$expandChildrenButton.on('click', async () => { + if (!this.note.hasLabel('expanded')) { + await attributeService.addLabel(this.noteId, 'expanded'); + } + }); + + this.$collapseAllButton = this.$widget.find('.collapse-all-button'); + this.$collapseAllButton.on('click', async () => { + // owned is important - we shouldn't remove inherited expanded labels + for (const expandedAttr of this.note.getOwnedLabels('expanded')) { + await attributeService.removeAttributeById(this.noteId, expandedAttr.attributeId); + } + }); + } + + async refreshWithNote(note) { + const viewType = this.note.getLabelValue('viewType') || 'grid'; + + this.$viewTypeSelect.val(viewType); + + this.$expandChildrenButton.toggle(viewType === 'list'); + this.$collapseAllButton.toggle(viewType === 'list'); + } + + async toggleViewType(type) { + if (type !== 'list' && type !== 'grid') { + throw new Error(`Invalid view type ${type}`); + } + + await attributeService.setLabel(this.noteId, 'viewType', type); + } + + entitiesReloadedEvent({loadResults}) { + if (loadResults.getAttributes().find(attr => attr.noteId === this.noteId && attr.name === 'viewType')) { + this.refresh(); + } + } +} diff --git a/src/public/stylesheets/allure.css b/src/public/stylesheets/allure.css deleted file mode 100644 index 6225b225f..000000000 --- a/src/public/stylesheets/allure.css +++ /dev/null @@ -1,3111 +0,0 @@ -/* ----------------------------------------------------------------------------- */ -/* FONT DECLARATIONS */ -/* ----------------------------------------------------------------------------- */ - -/* Icons */ -@font-face { - font-family: 'trilium-allure-icons'; /* project id 2347067 */ - src: url('//at.alicdn.com/t/font_2347067_inu6k6cjpm.eot'); - src: url('//at.alicdn.com/t/font_2347067_inu6k6cjpm.eot?#iefix') format('embedded-opentype'), - url('//at.alicdn.com/t/font_2347067_inu6k6cjpm.woff2') format('woff2'), - url('//at.alicdn.com/t/font_2347067_inu6k6cjpm.woff') format('woff'), - url('//at.alicdn.com/t/font_2347067_inu6k6cjpm.ttf') format('truetype'), - url('//at.alicdn.com/t/font_2347067_inu6k6cjpm.svg#trilium-allure-icons') format('svg'); -} - -/* Open Sans */ -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 400; - src: url('/custom/fonts/open-sans-v17-latin-regular.woff') format('woff'); -} - -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: 400; - src: url('/custom/fonts/open-sans-v17-latin-italic.woff') format('woff'); -} - -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: 600; - src: url('/custom/fonts/open-sans-v17-latin-600italic.woff') format('woff'); -} - -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 600; - src: url('/custom/fonts/open-sans-v17-latin-600.woff') format('woff'); -} - -@font-face { - font-family: 'Fira Mono'; - font-style: normal; - font-weight: 400; - src: url('/custom/fonts/FiraMono-Regular.woff') format('woff'); -} - -/* Fira Code */ -@font-face { - font-family: 'Fira Code'; - font-style: normal; - font-weight: 300; - src: url('/custom/fonts/FiraCode-Regular.woff2') format('woff2'); -} - -@font-face { - font-family: 'Fira Code'; - font-style: normal; - font-weight: 600; - src: url('/custom/fonts/FiraCode-Bold.woff2') format('woff2'); -} - -/* Roboto-slab */ -@font-face { - font-family: 'Roboto Slab'; - font-style: normal; - font-weight: 300; - src: url('/custom/fonts/roboto-slab-v11-latin-300.woff') format('woff'); -} - -@font-face { - font-family: 'Roboto Slab'; - font-style: normal; - font-weight: 400; - src: url('/custom/fonts/roboto-slab-v11-latin-regular.woff') format('woff'); -} - -@font-face { - font-family: 'Roboto Slab'; - font-style: normal; - font-weight: 600; - src: url('/custom/fonts/roboto-slab-v11-latin-600.woff') format('woff'); -} - - -html { - /* ----------------------------------------------------------------------------- */ - /* COLOR VARIABLES */ - /* ----------------------------------------------------------------------------- */ - - --color-gray-lighter : #F3F3F3; - --color-gray-light : #DADCDB; - --color-gray : #8e8787; - --color-gray-dark : #666; - --color-gray-darker : #525051; - --color-gray-darkest : #393939; - --color-blue : #526DE9; - --color-white : #FFF; - --color-red : #FF5252; - --color-black-light : #282828; - --color-black : #1E1E1E; - - --color-dialog-translucent : rgb(126,126,126, 0.5); - --color-background-translucent : rgb(126,126,126, 0.1); - - - /* ------------------- Fixed variable ------------------ */ - --color-text-danger : var(--color-red); - --color-text-highlight : var(--color-blue); - - /* ------------------ Default mode start ------------- */ - --color-text-accent : var(--color-gray-darkest); - --color-text-primary : var(--color-gray-darker); - --color-text-secondary : var(--color-gray); - --color-text-inconspicuous : var(--color-gray-light); - - --color-background-primary : var(--color-gray-lighter); - --color-background-secondary : var(--color-white); - --color-background-accent : var(--color-gray-light); - --color-background-item : var(--color-gray-lighter); - - --color-button-primary : var(--color-gray-lighter); - --color-button-accent : var(--color-gray-light); - --color-button-hover-center : var(--color-gray-lighter); - /* ------------------- Default mode end -------------- */ - - - - /* ------------------ Night mode start --------------- */ - --color-text-accent : var(--color-gray-lighter); - --color-text-primary : var(--color-gray-light); - --color-text-secondary : var(--color-gray); - --color-text-inconspicuous : var(--color-gray-dark); - - --color-background-primary : var(--color-black); - --color-background-secondary : var(--color-black-light); - --color-background-accent : var(--color-gray-darkest); - --color-background-item : var(--color-gray-darkest); - - --color-button-primary : var(--color-gray-darker); - --color-button-accent : var(--color-gray-dark); - --color-button-hover-center : var(--color-black-light); - /* ------------------- Night mode end ---------------- */ - - - /* ------------------- Alternate variable ------------------ */ - --color-background-highlight : var(--color-text-highlight); - --color-button-highlight : var(--color-text-highlight); - --color-button-disabled : var(--color-background-accent); - - /* ----------------------------------------------------------------------------- */ - /* BORDER VARIABLES */ - /* ----------------------------------------------------------------------------- */ - - --border-radius-standard : 3px; - --border-radius-large : 12px; - - --border-standard : 1px solid var(--color-button-accent); - --border-transparent : 1px solid transparent; - --border-accent : 2px solid var(--color-button-accent); - --border-accent-alt : 2px solid var(--color-background-primary); - --border-option : 2px solid var(--color-text-inconspicuous); - --border-option-active : 2px solid var(--color-text-highlight); - --border-link : 1px dashed var(--color-text-secondary); - - --shadow-card : 0px 0px 18px -8px var(--color-background-accent); - --shadow-mobile : 0px 0px 12px 0px var(--color-text-inconspicuous); - --shadow-standard : 3px 4px 3px -3px var(--color-background-accent); - --shadow-accented : 2px 2px 5px -2px var(--color-gray-dark); - --shadow-mobile-popup : 0px 0px 16px 0px var(--color-background-accent); - - - /* ----------------------------------------------------------------------------- */ - /* FONT VARIABLES */ - /* ----------------------------------------------------------------------------- */ - - --font-headers : 'Open Sans', Noto Sans CJK SC, 'Source Sans Pro', 'Liberation Sans', Helvetica Neue, Microsoft YaHei, Sans-serif; - --font-body : 'Open Sans', Noto Sans CJK SC, 'Source Sans Pro', 'Liberation Sans', Helvetica Neue, Microsoft YaHei, Sans-serif; - --font-code : 'Fira Code', 'Source Code Pro', Courier, Monospace; - - /* ----------------------------------------------------------------------------- */ - /* LAYOUT VARIABLES */ - /* ----------------------------------------------------------------------------- */ - - /* Use larger spacing to separate paragraphs */ - --spacing-content-small : .4em; - --spacing-content-normal : .8em; - --spacing-content-large : 1.8em; - --spacing-center-pane : 42px; - - --width-note-body : 680px; - --width-left-button-pane : 50px; - - /* Use a larger size for the frequently used buttons on the left */ - --size-left-pane-button : 1.2em; - - --height-quick-search : 52px; -} - - -body.theme-allure-clear { - color: var(--color-text-primary); - line-height: 1.6em; -} - -/* ----------------------------------------------------------------------------- */ -/* HYPERLINKS */ -/* ----------------------------------------------------------------------------- */ - -body.theme-allure-clear a, -body.theme-allure-clear a:visited, -body.theme-allure-clear a:hover, -body.theme-allure-clear .note-detail a, -body.theme-allure-clear .modal-dialog a { - color: var(--color-text-primary); - text-decoration: none; - word-break: break-all; -} - -/* Hide the help link and the icon after a link */ -body.theme-allure-clear a:after, -body.theme-allure-clear a.external:not(.page-url) { - display: none; -} - - -/* ----------------------------------------------------------------------------- */ -/* LAYOUT */ -/* ----------------------------------------------------------------------------- */ - -/* Hr line of the note details */ -body.theme-allure-clear .gutter.gutter-horizontal { - /* ------------------ With tabs version start ------------- */ - background: var(--color-background-secondary); - /* ------------------ With tabs version end ------------- */ - - /* ------------------ No tabs version start ------------- */ - background: var(--color-background-primary); - z-index: 1; - width: 2px !important; - /* ------------------ No tabs version end ------------- */ -} - -/* ------------------ No tabs version start ------------- */ -/*body.theme-allure-clear .gutter.gutter-horizontal:nth-of-type(2) { - background: var(--color-background-secondary); -} -body.theme-allure-clear .gutter.gutter-horizontal:nth-of-type(4) { - background: var(--color-background-primary); -}*/ -/* ------------------ No tabs version end ------------- */ - -/*body.theme-allure-clear .gutter.gutter-horizontal:hover { - background: var(--color-background-accent); -}*/ - -/* buttons */ -body.theme-allure-clear .btn { - border-radius: var(--border-radius-standard); - color: var(--color-text-primary); -} -body.theme-allure-clear .btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger) { - background: inherit; - border: none; - box-shadow: none; - padding: 6px; -} -body.theme-allure-clear .btn.btn-primary { - border: var(--border-standard); - background-color: var(--color-button-primary); -} -/*body.theme-allure-clear *, ::after, ::before { - font-family: 'trilium-allure-icons'; -}*/ - - -/* Image */ -body.theme-allure-clear img { - max-width: 100%; -} - -/* Root */ -body.theme-allure-clear div#root-widget { - background: var(--color-background-primary); -} -body.theme-allure-clear div#root-widget > div:nth-of-type(3) { - margin-left: var(--width-left-button-pane); - /*background: var(--color-background-secondary);*/ -} - -/* List */ -/*body.theme-allure-clear .ck-content dl, -body.theme-allure-clear .ck-content ol, -body.theme-allure-clear .ck-content ul { - padding-inline-start: 32px; - margin: var(--spacing-content-normal) 0 var(--spacing-content-large); -}*/ -body.theme-allure-clear .ck-content li { - margin: var(--spacing-content-small) 0; -} -body.theme-allure-clear .ck-content li:last-child { - margin-bottom: 0; -} - -/* Input */ -body.theme-allure-clear .input-group-text { - background: var(--color-background-item) !important; - border: none; -} - -/* Strong */ -body.theme-allure-clear b, -body.theme-allure-clear strong { - color: var(--color-text-accent); -} - - -/* ----------------------------------------------------------------------------- */ -/* CONTEXT MENU & FLOATING ELEMENTS */ -/* ----------------------------------------------------------------------------- */ - -/* Title bar button */ -body.theme-allure-clear .title-bar-buttons { - position: absolute; - right: 0; - top: 0; - margin-right: 8px; - z-index: 999; -} -body.theme-allure-clear .title-bar-buttons button { - /*border: none !important;*/ - font-size: .9rem; - background: var(--color-button-accent) !important; - padding: 0 !important; - border-radius: 12px; - margin: 2px; - color: var(--color-button-accent) !important; -} -body.theme-allure-clear .title-bar-buttons button:hover { - border: none !important; - color: var(--color-text-primary) !important; - background: var(--color-button-accent) !important; -} -body.theme-allure-clear .title-bar-buttons button:before { - font-family: 'trilium-allure-icons'; -} -body.theme-allure-clear .title-bar-buttons button.minimize-btn:before { - content: '\e9c0'; -} -body.theme-allure-clear .title-bar-buttons button.maximize-btn:before { - content: '\e9bc'; -} -body.theme-allure-clear .title-bar-buttons button.close-btn:before { - content: '\e9bb'; -} - - -/* Ctrl + F search */ -body.theme-allure-clear .find-box { - box-shadow: none !important; - background: var(--color-background-accent) !important; - border-radius: 3px; -} -body.theme-allure-clear .find-box .find-input { - border: none !important; -} -body.theme-allure-clear .find-box .find-input, -body.theme-allure-clear .find-box .find-case, -body.theme-allure-clear .find-box .find-back, -body.theme-allure-clear .find-box .find-forward, -body.theme-allure-clear .find-box .find-close { - background: none !important; -} - - -body.theme-allure-clear #context-menu-container { - border-radius: var(--border-radius-standard); - box-shadow: var(--shadow-accented); - border: var(--border-standard); - /*border-top: var(--border-accent);*/ - /*border-bottom: var(--border-accent);*/ - padding: 8px 0; -} - -body.theme-allure-clear .help-button { - display: none; -} - -body.theme-allure-clear #context-menu-container li.dropdown-item { - font-size: 1rem; - font-family: var(--font-headers); - height: 30px; - line-height: 30px; -} - -/* menu item divider */ -body.theme-allure-clear #context-menu-container .dropdown-divider, -body.theme-allure-clear #center-pane .dropdown-divider { - border: none; - /*height: 2px;*/ - margin: 2px 0px; - overflow: hidden; - /*background-color: var(--color-background-primary);*/ -} - - -/* note type and note actions buttons */ -body.theme-allure-clear #center-pane .note-type-dropdown, -body.theme-allure-clear #center-pane .dropdown-menu, -body.theme-allure-clear .global-menu .dropdown-menu { - border-radius: var(--border-radius-standard); - box-shadow: var(--shadow-accented); - border: var(--border-standard); - /*border-top: var(--border-accent);*/ - /*border-bottom: var(--border-accent);*/ - font-family: var(--font-family-monospace); - font-size: 1rem; - width: auto; -} - -body.theme-allure-clear #center-pane .dropdown-menu, { /* add by wenjinyu */ - left: -3em !important; -} - -/* toggle note protection switch in note actions dropdown */ -body.theme-allure-clear #center-pane .dropdown-item .switch { - height: auto; - margin-left: 20px; -} -body.theme-allure-clear #center-pane .dropdown-item .slider { - height: 18px; - border-radius: 10px; - margin-top: 11px; - /* background: var(--color-background-accent); */ - background: var(--color-button-accent); - width: 45px; -} -body.theme-allure-clear #center-pane .dropdown-item .slider::before { - height: 10px; - width: 10px; - border-radius: 8px; - background: var(--color-text-secondary); -} -body.theme-allure-clear #center-pane .dropdown-item.protect-button .slider { - background: var(--color-button-accent); -} -body.theme-allure-clear #center-pane .dropdown-item.protect-button .slider::before { - background: var(--color-background-secondary); -} -body.theme-allure-clear #center-pane .dropdown-item.unprotect-button .slider { - background: var(--color-button-highlight); -} -body.theme-allure-clear #center-pane .dropdown-item.unprotect-button .slider::before { - background: var(--color-background-secondary); -} - -/* MODALS */ - -body.theme-allure-clear div.modal { - font-size: 1.05rem; - background: var(--color-dialog-translucent); -} - -/* modal header */ -body.theme-allure-clear div.modal-content > div.modal-header { - display: flex; - align-items: center; - background: var(--color-background-primary); - color: var(--color-text-primary); - border: none; -} - -/* modal header title */ -body.theme-allure-clear div.modal-content > div.modal-header h5 { - font-family: var(--font-headers); - font-weight: bold; - margin-bottom: 0 !important; -} - -/* modal recent changes */ -body.theme-allure-clear div#recent-changes-content div b { - font-family: var(--font-headers); - display:block; - border-bottom: var(--border-accent-alt); -} - -body.theme-allure-clear div#recent-changes-content div ul { - list-style-type: none; - padding-left: 6rem; - margin-top: 0.3rem; - font-family: var(--font-body); - font-size: 90%; -} - -/* modal body primary button */ -/*body.theme-allure-clear div.modal-content button.btn-primary { - color: var(--color-text-primary); - background-color: var(--color-button-accent); - border: var(--border-standard); - margin: 0; -}*/ - -/* textareae in modals*/ -body.theme-allure-clear .modal-content .modal-body textarea { - font-family: var(--font-code); - border: var(--border-standard); - padding: 5px 5px 5px 15px; -} - -/* MODAL BODY */ -body.theme-allure-clear .modal-content .modal-body { - font-family: var(--font-body); - /*padding: 0;*/ - /*margin-top: -1px;*/ -} - -/* MODAL BODY - Appearance */ -/*body.theme-allure-clear .modal-content .input-group-append .input-group-text { - background: var(--color-button-accent) !important; - border: none; - color: var(--color-text-accent) !important; -}*/ -body.theme-allure-clear input:not(:disabled), -body.theme-allure-clear select:not(:disabled), -body.theme-allure-clear textarea:not(:disabled) { - background: var(--color-background-item) !important; - border: none; - color: var(--color-text-accent) !important; -} -body.theme-allure-clear input:disabled, -body.theme-allure-clear select:disabled, -body.theme-allure-clear textarea:disabled { - background: var(--color-button-disabled) !important; - border: none; - color: var(--color-text-accent) !important; -} -body.theme-allure-clear input:focus, -body.theme-allure-clear select:focus, -body.theme-allure-clear textarea:focus { - box-shadow: none; - /*border: var(--border-accent);*/ -} - -/* MODAL BODY - Keyboard shortcuts */ -body.theme-allure-clear #keyboard-shortcut-table td, -body.theme-allure-clear #keyboard-shortcut-table th { - color: var(--color-text-primary); -} -body.theme-allure-clear #keyboard-shortcut-table td[colspan="4"] { - background: var(--color-background-accent) !important; -} - -/* MODAL BODY - Username & password */ -body.theme-allure-clear #options-credentials .alert.alert-warning { - background: var(--color-background-accent) !important; - border: none; -} - -/* Modals - Code notes */ -body.theme-allure-clear ul#options-mime-types { - padding: 0 12px 12px 12px; - margin-bottom: 0; - margin-top: 16px; -} -body.theme-allure-clear ul#options-mime-types li { - display: inline-block; - margin: 6px; - font-size: 0; -} -body.theme-allure-clear ul#options-mime-types li label { - font-size: 1rem; - margin: 0; - padding: 8px 22px; - border-radius: 30px; - border: var(--border-option); - color: var(--color-text-secondary); - font-weight: bold; -} -body.theme-allure-clear ul#options-mime-types li label:hover { - background: var(--color-background-primary); -} -/*body.theme-allure-clear ul#options-mime-types li input[type="checkbox"]:checked+label:before { - content: '\e611'; - font-family: 'trilium-allure-icons'; - display: inline-block; - width: 20px; - height: 20px; -}*/ -/* input (checkbox) */ -body.theme-allure-clear ul#options-mime-types li input { - display: none; -} -body.theme-allure-clear ul#options-mime-types li input[type="checkbox"]:checked+label { - color: var(--color-text-highlight); - border: var(--border-option-active); - /*padding: 8px 12px;*/ -} - -/* modal body - button */ -body.theme-allure-clear div.modal-content .modal-body .tab-content button.btn { - background: var(--color-button-primary); - padding: 6px 12px; -} -body.theme-allure-clear div.modal-content .modal-body .tab-content button.btn:hover { - background: var(--color-button-accent); -} - -body.theme-allure-clear form#clone-to-form { - padding: 20px; -} - -body.theme-allure-clear form#clone-to-form .modal-footer { - padding: .75rem 0; -} - -body.theme-allure-clear span.fancytree-folder, -body.theme-allure-clear span.fancytree-node { - padding: 4px; -} - -body.theme-allure-clear span.fancytree-custom-icon { - /*margin: 2px 3px; - line-height: 28px; - width: auto; - height: auto;*/ - display: none; -} - -body.theme-allure-clear .tree-settings-popup.show { - background: var(--color-background-primary) !important; -} - - -body.theme-allure-clear button.icon-button { - font-size: 1em; - padding: 3px; -} - -body.theme-allure-clear .modal-header .close { - color: var(--color-text-primary); - font-weight: normal; - padding: 2px 4px; - margin: 0 5px; - outline: none; - /*border: var(--border-transparent);*/ - border-radius: var(--border-radius-standard); -} - -body.theme-allure-clear .modal-header .close:hover { - /*border: var(--border-standard);*/ - background: var(--color-button-accent); -} - -body.theme-allure-clear .owned-and-inherited-wrapper { - display: block; - /*padding-bottom: 8px;*/ -} - -body.theme-allure-clear .modal-dialog.modal-md form.protected-session-password-form { - padding: 20px; -} - -body.theme-allure-clear .btn.btn-primary kbd { - color: var(--color-text-secondary); - line-height: 1rem; - display: inline-block; -} - -body.theme-allure-clear .modal-dialog { - background: var(--color-background-primary); - border-radius: var(--border-radius-large); -} -body.theme-allure-clear .modal-dialog .modal-content { - background: var(--color-background-secondary) !important; -} - -/* Popup tabs */ -body.theme-allure-clear .nav-tabs .nav-link:hover { - background: var(--color-background-accent); - border: var(--border-transparent); -} -body.theme-allure-clear .nav-tabs .nav-item.show .nav-link, -body.theme-allure-clear .nav-tabs .nav-link.active { - /*color: var(--color-text-primary) !important;*/ - border: var(--border-transparent); -} -body.theme-allure-clear .nav-tabs .nav-link { - /*border-bottom: var(--border-standard);*/ - border-top-left-radius: var(--border-radius-standard); - border-top-right-radius: var(--border-radius-standard); -} -body.theme-allure-clear .nav-tabs { - background: var(--color-background-primary); - margin: -1rem -1rem 0 -1rem; - padding: 0 20px; - border: none; -} -/*body.theme-allure-clear .modal-header { - border-bottom: var(--border-standard); -}*/ -body.theme-allure-clear div#options-dialog .modal-body > div > br { - display: none; -} -body.theme-allure-clear .tab-content { - background: var(--color-background-secondary); - padding: 24px; -} - -body.theme-allure-clear .nav-item a.active { - background: var(--color-background-secondary) !important; - color: var(--color-text-primary) !important; -} - -body.theme-allure-clear .modal-footer { - border-top: 0; - padding: .75rem; -} - -/*body.theme-allure-clear .form-group { - margin-bottom: 0; -}*/ - -body.theme-allure-clear p { - font-size: 1em; - margin: var(--spacing-content-normal) 0; - font-family: var(--font-body); -} - -body.theme-allure-clear blockquote { - margin: var(--spacing-content-large) 0; - font-style: normal; - border-left: solid 3px var(--color-text-highlight); - /*color: var(--color-text-secondary);*/ - border-radius: var(--border-radius-standard); - background: var(--color-background-primary); - padding: var(--spacing-content-normal) 1.2em; -} -/*body.theme-allure-clear blockquote p { - margin: var(--spacing-content-normal) 0; -}*/ -body.theme-allure-clear blockquote p:last-child, -body.mobilx blockquote p:last-child { - margin-bottom: 0; -} - - -/* note action */ -body.theme-allure-clear .dropdown-item { - margin: 0 8px; - height: 40px; - padding: 0 1rem; - width: auto; - border-radius: 5px; - line-height: 40px; - min-width: max-content; - color: var(--color-text-primary) !important; -} -body.theme-allure-clear .dropdown-item:hover:not(.disabled) { - background: var(--color-background-primary) !important; - color: var(--color-text-accent) !important; -} -/* button - note protect*/ -body.theme-allure-clear .slider.checked { - background: var(--color-button-highlight); -} - -body.theme-allure-clear kbd { - padding: .1rem .4rem .1rem 3rem; -} - -body.theme-allure-clear .dropdown-menu { - margin: 0; - background: var(--color-background-secondary) !important; - left: 0; - right: unset; -} - - -/* NOTE REVISIONS */ - -/* Background */ -body.theme-allure-clear #note-revisions-dialog { - background: var(--color-dialog-translucent); -} -body.theme-allure-clear #note-revision-list { - /*border: var(--border-standard);*/ - background: var(--color-background-primary) !important; - width: 295px; -} -body.theme-allure-clear #note-revisions-dialog .modal-body { - padding: 0; -} -body.theme-allure-clear #note-revisions-dialog .modal-content > .modal-header { - padding: 0 !important; - background: var(--color-background-secondary); -} -body.theme-allure-clear #note-revisions-dialog .modal-content > .modal-header h5 { - background: var(--color-background-primary); - padding: 10px 20px; - width: 295px; -} - -/* Header - Delete all button */ -body.theme-allure-clear button#note-revisions-erase-all-revisions-button { - height: 30px; - margin: 0 10px 0 5px; -} -body.theme-allure-clear button#note-revisions-erase-all-revisions-button:hover { - background: var(--color-button-accent); -} - -/* Left - Revision list*/ -body.theme-allure-clear div#note-revision-list { - border: none; - padding: 0; - border-radius: unset; - border-right: none; -} -body.theme-allure-clear div#note-revision-list a.dropdown-item { - margin: 0; - border-radius: unset; -} -body.theme-allure-clear div#note-revision-list a.dropdown-item.active { - outline: none; - background: var(--color-background-accent) !important; -} - -/* Right - All */ -/*body.theme-allure-clear div#note-revision-content-wrapper { - margin-left: 0 !important; - padding-left: 0; - background: var(--color-background-secondary); -}*/ - -/* Right - Title */ -body.theme-allure-clear h3#note-revision-title { - padding: 10px; - /*background-color: var(--color-background-primary);*/ - margin: 0 !important; -} - -/* Right - Title border */ -/*body.theme-allure-clear div#note-revision-content-wrapper > div:nth-of-type(1) { - border-bottom: var(--border-standard); -}*/ - -/* Right - Three operation buttons */ -body.theme-allure-clear div#note-revision-title-buttons { - /*background: var(--color-background-primary);*/ - padding: 8px; -} -body.theme-allure-clear div#note-revision-title-buttons button { - font-size: 0; -} -body.theme-allure-clear div#note-revision-title-buttons button:nth-of-type(1):after { - content: '\2713'; - font-size: initial; -} -body.theme-allure-clear div#note-revision-title-buttons button:nth-of-type(2):after { - content: '\2715'; - font-size: initial; -} -body.theme-allure-clear div#note-revision-title-buttons button:nth-of-type(3) { - font-size: initial; -} -body.theme-allure-clear div#note-revision-title-buttons button:hover { - background: var(--color-button-accent); -} - -/* Right - Note revision content */ -body.theme-allure-clear div#note-revision-content { - padding: 12px; - background: var(--color-background-secondary); - margin: 4px; -} - - -body.theme-allure-clear .note-detail-book { - padding: 0; -} - -body.theme-allure-clear .btn:hover { - /*border: none !important;*/ - box-shadow: none !important; - /*background: var(--color-background-secondary) !important;*/ - /*border: transparent;*/ -} - - -/* LINK MAP DIALOG*/ - -/* Link Map Dialog - title */ -body.theme-allure-clear div#link-map-dialog > div { - top: 0 !important; -} - -/* Link Map Dialog - note */ -body.theme-allure-clear .link-map-container .note-box { - background: var(--color-background-primary); - color: var(--color-text-primary); -} -body.theme-allure-clear .link-map-active-note { - background: var(--color-background-accent) !important; -} - -/* Link Map Dialog - note preview */ -body.theme-allure-clear .tooltip-inner { - background: var(--color-background-secondary) !important; - color: var(--color-text-secondary) !important; - box-shadow: none; - border: var(--border-standard); -} -body.theme-allure-clear .note-tooltip-title { - color: var(--color-text-primary) !important; -} -body.theme-allure-clear .rendered-note-attributes { - color: var(--color-text-inconspicuous); -} - -/* Link Map Dialog - link */ -body.theme-allure-clear .link-map-container .jsplumb-connection-hover path { - stroke: var(--color-text-primary); -} - - - -/* OPTIONS DIALOG */ - -/* Options Dialog - hide the border bottom of the header*/ -body.theme-allure-clear div#options-dialog .modal-body { - margin-top: -1px; - /*overflow: hidden;*/ - position: static; -} - -body.theme-allure-clear div#options-keyboard-shortcuts div { - margin-top: 12px; -} - -/* float button */ -body.theme-allure-clear .btn-group.floating-button { - right: 8px !important; - top: 0px !important; -} -body.theme-allure-clear div.note-detail-relation-map div.floating-button { - top: auto !important; -} - - - -/* SCROLLBAR */ - -/* ¹ö¶¯ÌõµÄ³ß´ç */ -body.theme-allure-clear ::-webkit-scrollbar { - width: 12px; - height: 12px; - background-color: transparent; -} -/* ¹ö¶¯Ìõ¹ìµÀ */ -body.theme-allure-clear ::-webkit-scrollbar-track { - background-color: unset; - border: solid 4px transparent; -} -/* »¬¿é */ -body.theme-allure-clear ::-webkit-scrollbar-thumb { - border-radius: 10px; - box-shadow: inset 0 0 10px 10px var(--color-button-accent); - border: solid 4px transparent; -} -body.theme-allure-clear ::-webkit-scrollbar-thumb:hover { - border: solid 2px transparent; -} - - -/* ----------------------------------------------------------------------------- */ -/* TOP PANE */ -/* ----------------------------------------------------------------------------- */ - -/* NOTE TABS */ - -body.theme-allure-clear #root-widget > div.component:first-of-type, -body.theme-allure-clear .standard-top-widget { - position: absolute; - width: 100%; -} - -body.theme-allure-clear .note-tab-row-container .note-tab, -body.theme-allure-clear .note-tab-row-container .note-new-tab { - - /* ------------------ With tabs version start ------------- */ - margin-top: 12px; - /* ------------------ With tabs version end ------------- */ - - /* ------------------ No tabs version start ------------- */ - display: none; - /* ------------------ No tabs version end ------------- */ - -} - -/* Note tabs - New tab button */ -body.theme-allure-clear .note-new-tab { - border: none; - /*line-height: 1.6em;*/ - font-size: 0; -} -body.theme-allure-clear .note-new-tab:before { - font-size: 1rem; - content: '\e622'; - font-family: 'trilium-allure-icons'; - line-height: 33px; -} -body.theme-allure-clear .note-new-tab:hover { - background: var(--color-background-accent); -} -body.theme-allure-clear .note-tab-row { - background: unset; - margin: 0; - right: 72px; - position: absolute; - width: calc(100% - 354px); - - /* ------------------ With tabs version start ------------- */ - height: 48px; - /* ------------------ With tabs version end ------------- */ - - /* ------------------ No tabs version start ------------- */ - height: 28px; - /* ------------------ No tabs version end ------------- */ -} -body.theme-allure-clear .tab-row-filler .tab-row-border { - background: unset; -} -/*body.theme-allure-clear .tab-row-filler { - height: 20px; - margin-left: -50px; - left: -26px; -}*/ -/*body.theme-allure-clear .note-tab-row { - display: none !important; -}*/ -body.theme-allure-clear .note-tab-row .note-tab .note-tab-wrapper { - background: var(--color-background-item); - margin: 0 4px; - color: var(--color-text-secondary); - border: none; - border-radius: 20px; - position: unset; - padding: 5px 12px; - height: calc(1.6em + 8px); - text-align: center; -} -body.theme-allure-clear .note-tab-row .note-tab .note-tab-wrapper:hover { - background: var(--color-background-accent); - /*text-align: left;*/ - /*border: var(--border-standard);*/ -} -body.theme-allure-clear .note-tab-row .note-tab[active] .note-tab-wrapper { - color: var(--color-text-highlight); - font-weight: normal; -} - -/* TAB - Title */ -body.theme-allure-clear .note-tab-row .note-tab .note-tab-title { - line-height: 1.6em; - width: calc(100% - 14px); - text-overflow: ellipsis; - color: inherit; - min-height: 1.6em; -} - -/* TAB - Button */ -body.theme-allure-clear div.tab-row-filler { - /* display: none; */ - height: 28px; -} -body.theme-allure-clear .note-tab-row .note-tab .note-tab-close { - display: none; - position: absolute; - right: 14px; - padding: 1px 4px; -} -body.theme-allure-clear .note-tab-row .note-tab .note-tab-wrapper:hover .note-tab-close { - display: block; - background: var(--color-background-accent); -} -body.theme-allure-clear .note-tab-row .note-tab .note-tab-close:hover { - background-color: unset; - /*border: var(--border-standard);*/ - color: var(--color-text-accent); -} -body.theme-allure-clear .note-tab-row .note-tab .note-tab-close span { - top: unset; -} - - - -body.theme-allure-clear ul.fancytree-container { - height: 100%; - overflow: auto; - padding: 0; -} - - -/* LEFT BUTTON */ - -body.theme-allure-clear div.global-menu button, -body.theme-allure-clear div.standard-top-widget button { - font-size: 0; - margin: 8px; -} -body.theme-allure-clear div.global-menu button.btn.btn-sm:hover, -body.theme-allure-clear div.standard-top-widget button.btn.btn-sm:hover, -body.theme-allure-clear div.tree-wrapper > button.btn.btn-sm:hover, -body.theme-allure-clear button.btn.btn-sm.icon-button.hide-left-pane-button:hover, -body.theme-allure-clear button.btn.btn-sm.icon-button.show-left-pane-button:hover { - background: var(--color-background-accent); -} -body.theme-allure-clear .history-navigation { - display: none; -} - -/* LEFT BUTTON - Global menu */ -body.theme-allure-clear .global-menu-wrapper { - border: none; - padding: 0; -} -body.theme-allure-clear .global-menu-wrapper .global-menu button { - font-family: var(--font-headers); - font-size: var(--size-left-pane-button); -} -body.theme-allure-clear div.global-menu button.dropdown-toggle span { - font-size: initial; - display: flex; -} - -/* LEFT BUTTON - Button above */ -body.theme-allure-clear .standard-top-widget { - position: absolute; - background: var(--color-background-primary); - width: var(--width-left-button-pane); - display: inline-block; - margin-left: 0; - margin-top: var(--spacing-center-pane); -} -body.theme-allure-clear .standard-top-widget > div:not(.component) { - flex-flow: column; -} -body.theme-allure-clear .standard-top-widget button span:first-of-type { - font-size: initial; - top: inherit; -} -body.theme-allure-clear .standard-top-widget button span:before { - font-family: 'trilium-allure-icons'; - font-size: var(--size-left-pane-button); -} -body.theme-allure-clear .standard-top-widget .bx-file-blank:before { - content: '\eaec'; -} -body.theme-allure-clear .standard-top-widget .bx-search:before { - content: '\eb54'; -} -/* hide button because the function of it coincides with another button */ -/* jump to note = quick search */ -body.theme-allure-clear .standard-top-widget button[data-trigger-command="jumpToNote"] { - display: none; -} -/*body.theme-allure-clear div.standard-top-widget .bx-send:before { - content: '\e601'; -}*/ -body.theme-allure-clear .standard-top-widget .bx-history:before { - content: '\f1e2'; -} -body.theme-allure-clear button.enter-protected-session-button span:before { - content: '\e736'; -} -body.theme-allure-clear button.leave-protected-session-button span:before { - content: '\e605'; - font-weight: bold; - color: var(--color-button-highlight); -} -body.theme-allure-clear button#toolbar-button-Today span:before { - content: '\e745'; -} -body.theme-allure-clear .standard-top-widget .quick-search { - margin: 0 10px; - position: absolute; - top: -30px; - left: var(--width-left-button-pane); - width: 170px !important; - /*display: flex !important;*/ -} -body.theme-allure-clear .btn-outline-secondary.search-button { - display: none; -} - -/* Quick search */ -body.theme-allure-clear .standard-top-widget .quick-search:before { - content: '\eb54'; - font-family: 'trilium-allure-icons'; - display: table-caption; - line-height: calc(1.5em + .5rem + 4px); - font-size: 14px; -} -body.theme-allure-clear div.standard-top-widget input.search-string { - padding: 1em; - box-shadow: none; - border: none; - background: transparent !important; - /*border-left: var(--border-standard);*/ -} -/*body.theme-allure-clear div.standard-top-widget input.search-string:hover, -body.theme-allure-clear div.standard-top-widget input.search-string:focus { - background: var(--color-background-secondary) !important; -}*/ - - -/* LEFT BUTTON - Buttons below - collapse tree, tree settings */ -body.theme-allure-clear button.btn.btn-sm.icon-button.tree-settings-button { - bottom: calc(var(--height-quick-search) + 8px); - left: -40px; - font-size: var(--size-left-pane-button); -} -body.theme-allure-clear button.scroll-to-active-note-button { - display: none; -} -body.theme-allure-clear button.btn.btn-sm.icon-button.collapse-tree-button { - bottom: calc(var(--height-quick-search) + 50px); - left: -40px; - font-size: var(--size-left-pane-button); -} - -/* LEFT BUTTON - Buttons below - hide/show pane */ -body.theme-allure-clear .hide-right-pane-button, -body.theme-allure-clear .show-right-pane-button { - bottom: 2px; - right: 6px; - font-size: var(--size-left-pane-button); - color: var(--color-text-secondary); -} -body.theme-allure-clear .show-right-pane-button.btn.icon-button:hover { - background: var(--color-background-primary); -} -body.theme-allure-clear .hide-right-pane-button.btn.icon-button:hover { - background: var(--color-background-accent); -} -body.theme-allure-clear button.btn.btn-sm.icon-button.hide-left-pane-button, -body.theme-allure-clear button.btn.btn-sm.icon-button.show-left-pane-button { - /*bottom: 3px;*/ - left: 10px; - font-size: var(--size-left-pane-button); -} - -/* LEFT BUTTON - Buttons below - tree settings popup */ -body.theme-allure-clear div#left-pane div.tree-settings-popup { - border-radius: 3px; - box-shadow: var(--shadow-standard); - background: var(--color-background-secondary) !important; - width: auto; -} -body.theme-allure-clear div#left-pane div.tree-settings-popup button { - background: var(--color-background-primary); - border: var(--border-standard); - font-size: 0; -} -body.theme-allure-clear div#left-pane button.save-tree-settings-button:after { - content: 'Save'; - font-size: initial; -} -body.theme-allure-clear div#left-pane label.form-check-label { - min-width: max-content; -} - - - - -/* Search Result - note list */ -body.theme-allure-clear .input-group-append .dropdown-menu-right span.dropdown-item { - min-width: unset; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -body.theme-allure-clear .input-group-append .dropdown-menu-right span.dropdown-item small { - color: var(--color-text-secondary); - margin-left: 8px; -} -body.theme-allure-clear .input-group-append .dropdown-menu-right span.dropdown-item:before { - content: '\e659'; - font-family: 'trilium-allure-icons'; - margin-right: 12px; -} - -/* Search Result - `Show in full search` button */ -body.theme-allure-clear .input-group-append .dropdown-menu-right a.dropdown-item { - padding-left: 38px; -} -body.theme-allure-clear .input-group-append .dropdown-menu-right button.btn.btn-sm { - font-size: inherit; - background-color: transparent; - border: none; - margin: 0; -} -body.theme-allure-clear .input-group-append .dropdown-menu-right button.btn.btn-sm:hover { - border: none !important; - background: none !important; - box-shadow: none !important; -} - -/* ----------------------------------------------------------------------------- */ -/* LEFT PANE */ -/* ----------------------------------------------------------------------------- */ - -/* GLOBAL BUTTONS */ -/* Create new note botton */ -body.theme-allure-clear div#left-pane .global-buttons { - border: none; - margin: 0; - position: absolute; - top: 4px; - right: 168px; - font-size: 12px; -} -body.theme-allure-clear div#left-pane .global-buttons a { - color: var(--color-button-accent) !important; -} -body.theme-allure-clear div#left-pane .global-buttons a:hover { - background: var(--color-background-secondary); -} - -/* hide the breadcrumbs/path widget */ -body.theme-allure-clear div.note-paths-widget { - display: none; -} - -/* Setting button of the note list pop-up window */ -body.theme-allure-clear div#left-pane button.tree-settings-button:before { - content: '\e651'; - line-height: 18px; - font-family: 'trilium-allure-icons'; -} - -/* SIDEBAR */ -body.theme-allure-clear div#left-pane { - background-color: var(--color-background-primary); - /*box-sizing: unset;*/ - /*box-shadow: unset;*/ - margin-top: 52px; - /*padding: 4px 0;*/ - padding-bottom: 44px; -} -body.theme-allure-clear div.tree span.fancytree-expander { - position: absolute; - left: 0; - top: 3px; - color: var(--color-text-primary); -} - - -/* TREE MENU */ - -/* hide caret of childless nodes */ -body.theme-allure-clear .fancytree-node:not(.fancytree-folder) .fancytree-expander::before { - display: none; -} - -/* style the caret icon on expandable nodes*/ -body.theme-allure-clear .fancytree-node .fancytree-expander::before { - font-size: 1rem; - margin-right: 0; - line-height: 28px; -} -body.theme-allure-clear .fancytree-active .fancytree-expander::before { - color: var(--color-text-highlight); - font-weight: bold; -} - -body.theme-allure-clear div.tree-wrapper, -body.theme-allure-clear div.tree { - font-family: var(--font-headers); - font-weight: 400; -} -/*body.theme-allure-clear div.tree-wrapper { - padding-bottom: 38px; -}*/ -body.theme-allure-clear div.tree { - padding: 0; - padding-bottom: 12px; -} - -/* SIDEBAR MENU ITEM [SECONDARY SELECTED] */ -body.theme-allure-clear span.fancytree-selected .fancytree-title { - background: var(--color-background-accent); - border-color: var(--main-background-color) ; /* invisible border */ - border-radius: 0; - color: var(--color-text-primary); - font-style: normal; -} - -/* SIDEBAR MENU ITEM [FOCUSED] */ -body.theme-allure-clear span.fancytree-focus .fancytree-title, -body.theme-allure-clear span.fancytree-focus .fancytree-selected .fancytree-title { - border: none; - background-color: none; - line-height: 28px; -} - -/* Note list - normal */ -body.theme-allure-clear span.fancytree-title { - border: none; - line-height: 24px; - padding: 2px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - display: block; - max-width: calc(100% - 18px); - margin-left: 4px !important; - font-size: .9em; -} -body.theme-allure-clear span.fancytree-node { - margin-left: 18px; - display: flex; - border-radius: var(--border-radius-standard) 0 0 var(--border-radius-standard); - width: 100%; -} -/* remove the margin-left of the "root" note */ -body.theme-allure-clear div.tree > ul > li > span { - margin-left: 0; -} -body.theme-allure-clear span.fancytree-node:hover { - background: var(--color-background-accent); -} -body.theme-allure-clear span.fancytree-node:hover span.fancytree-title { - border: none; - max-width: calc(100% - 46px); -} - -/* Note list - add note button */ -body.theme-allure-clear .add-note-button { - border: none; - right: 7px; - position: absolute; - margin: 4px 0; - color: var(--color-text-primary); -} - -/* Note list - Refresh search button */ -body.theme-allure-clear .refresh-search-button { - border: none; - margin: auto 5px; - display: none; -} -body.theme-allure-clear span.fancytree-node:hover .refresh-search-button { - display: inline-block; -} - -/* Note list - active note */ -body.theme-allure-clear span.fancytree-active span.add-note-button { - color: var(--color-text-highlight); -} -/*body.theme-allure-clear span.fancytree-active:not(.fancytree-focused) .fancytree-title { - font-weight: normal; -}*/ -/*body.theme-allure-clear span.fancytree-active:hover { - background: var(--color-background-highlight); -}*/ - -body.theme-allure-clear div.tree-wrapper.component .fancytree-container li[role=treeitem] { - padding: 0; -} -body.theme-allure-clear ul.fancytree-container ul ul { - padding-left: 12px; -} - -/* protected nodes */ -body.theme-allure-clear span.fancytree-node.protected, -body.theme-allure-clear span.fancytree-node.protected span { - color: var(--color-text-secondary); -} -body.theme-allure-clear span.fancytree-node.protected .fancytree-title:before { - content: '\e621'; - font-family: 'trilium-allure-icons'; - margin-right: 8px; -} -body.theme-allure-clear span.fancytree-node.fancytree-active.protected, -body.theme-allure-clear span.fancytree-node.fancytree-active.protected > span { - color: var(--color-text-danger) !important; -} -/* note title - protected notes*/ -body.theme-allure-clear input.note-title.protected { - text-shadow: none; - color: var(--color-text-danger) !important; -} - - -/* CONTEXT MENU ITEM [ACTIVE (on click)]*/ -body.theme-allure-clear .fancytree-node .fancytree-title:active { - background: transparent; -} - -/* CONTEXT MENU ITEM [active item background ("fix"?!)]*/ -body.theme-allure-clear span.fancytree-active .fancytree-title { - background: transparent !important; - /*border-radius: 3px;*/ - color: var(--color-text-highlight) !important; -} - - -/* ----------------------------------------------------------------------------- */ -/* CENTER PANE */ -/* ----------------------------------------------------------------------------- */ - -body.theme-allure-clear div#center-pane { - background: var(--color-background-secondary); - overflow: auto; - - /* ------------------ With tabs version start ------------- */ - padding: 62px 0 0 12px; - /* ------------------ With tabs version end ------------- */ - - /* ------------------ No tabs version start ------------- */ - padding: 4px 0 0 12px; - /* ------------------ No tabs version end ------------- */ -} - -/* BUTTON */ -body.theme-allure-clear #center-pane .btn:hover, -body.theme-allure-clear .edit-text-note-container:hover, -body.theme-allure-clear .edit-code-note-container:hover { - background: var(--color-button-hover-center) !important; -} - -/* ATTRIBUTE */ - -/* Attribute - title */ -body.theme-allure-clear .section-body { - border: none; - padding: 12px; - background: var(--color-background-primary); - border-radius: var(--border-radius-standard); - margin: 0; -} -body.theme-allure-clear .section-title-real { - border: none; - font-size: 14px; - color: var(--color-text-secondary); - padding: 4px 10px; - border-radius: var(--border-radius-standard); -} -body.theme-allure-clear .section-title:hover, -body.theme-allure-clear .section-title-real.active { - background: var(--color-background-primary); - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; -} -body.theme-allure-clear .section-title-empty { - display: none; -} - - -/* Owned attrs */ -body.theme-allure-clear .attribute-list .save-attributes-button, -body.theme-allure-clear .attribute-list .add-new-attribute-button { - font-size: 1em; - border-radius: var(--border-radius-standard); - padding: 3px; - bottom: 0; - - /* ------------------ No tabs version start ------------- */ - margin-right: 28px; - /* ------------------ No tabs version end ------------- */ -} -body.theme-allure-clear .attribute-list .save-attributes-button:hover, -body.theme-allure-clear .attribute-list .add-new-attribute-button:hover { - background: var(--color-background-secondary); -} - -/* similar notes - content */ -body.theme-allure-clear div#center-pane hr.w-100 { - display: none !important; -} -body.theme-allure-clear div#center-pane div.similar-notes-widget a { - border: none; - font-size: .9rem; - font-family: var(--font-headers); - text-overflow: ellipsis; - max-width: 100%; - padding: 4px 15px; - background: var(--color-background-item); - line-height: 1.6em; - margin: 2px 8px; -} -body.theme-allure-clear div#center-pane div.similar-notes-widget a:before { - content: '\e659'; - font-family: 'trilium-allure-icons'; - margin-right: 10px; - color: var(--color-text-secondary); - /*margin: 2px 4px;*/ -} - -/* Attr details */ -body.theme-allure-clear .attr-detail { - background: var(--color-background-primary); - color: var(--color-text-primary); - border: var(--border-standard); - box-shadow: var(--shadow-accented); -} -body.theme-allure-clear .attr-detail input[readonly] { - background: var(--color-background-secondary) !important; - border: none; -} - - -/* TITLE */ - -/* Title - Note icon button */ -body.theme-allure-clear .note-icon-container { - display: none; -} - -/* Title - Title content*/ -body.theme-allure-clear .title-row { - width: 100%; - display: block !important; - flex-direction: unset !important; - - /* ------------------ With tabs version start ------------- */ - max-width: var(--width-note-body); - padding: 0 var(--spacing-center-pane); - margin: 0 auto; - /* ------------------ With tabs version end ------------- */ -} -body.theme-allure-clear .title-row > * { - margin: 0 5px; -} - -/* Title - Note type and more menu button */ -body.theme-allure-clear div#center-pane .title-row button.btn:not(.execute-script-button) { - font-size: 0; - border-radius: var(--border-radius-standard); - background-color: unset; - color: var(--color-text-secondary); - position: absolute; - - /* ------------------ With tabs version start ------------- */ - padding: 4px 10px; - top: -2px; - /* ------------------ With tabs version end ------------- */ - - /* ------------------ No tabs version start ------------- */ - padding: 0 4px; - right: 8px; - z-index: 1; - /* ------------------ No tabs version end ------------- */ -} - -/* ------------------ With tabs version start ------------- */ -body.theme-allure-clear .title-row button span { - line-height: 1.4rem; - font-size: 0.9rem; -} -/* ------------------ With tabs version end ------------- */ - -body.theme-allure-clear button.note-type-button span.note-type-desc:before { - font-family: 'trilium-allure-icons'; - content: "\e659"; - - /* ------------------ With tabs version start ------------- */ - margin-right: 4px; - /* ------------------ With tabs version end ------------- */ - - /* ------------------ No tabs version start ------------- */ - font-size: 1rem; - /* ------------------ No tabs version end ------------- */ -} -body.theme-allure-clear .note-actions button.dropdown-toggle:before { - font-size: initial; - content: '\e60c'; - font-family: 'trilium-allure-icons'; -} -/* Title - Note type button */ -body.theme-allure-clear .note-type button.btn.btn-sm.note-type-button { - /* ------------------ With tabs version start ------------- */ - right: 36px; - /* ------------------ With tabs version end ------------- */ - - /* ------------------ No tabs version start ------------- */ - top: 72px; - /* ------------------ No tabs version end ------------- */ -} -/* Title - More menu button */ -body.theme-allure-clear .note-actions button.btn.btn-sm.dropdown-toggle { - - /* ------------------ With tabs version start ------------- */ - right: 0; - /* ------------------ With tabs version end ------------- */ - - /* ------------------ No tabs version start ------------- */ - top: 38px; - /* ------------------ No tabs version end ------------- */ -} - - -/* INFO AND ATTRS */ - -body.theme-allure-clear .section-body-container { - - /* ------------------ With tabs version start ------------- */ - max-width: var(--width-note-body); - padding: 0 var(--spacing-center-pane); - margin: 0 auto; - /* ------------------ With tabs version end ------------- */ - - /* ------------------ No tabs version start ------------- */ - padding-right: 17px; - /* ------------------ No tabs version end ------------- */ -} - -/* Info */ -body.theme-allure-clear .section-body-container .note-properties-widget div { - font-size: 0; - - /* ------------------ No tabs version start ------------- */ - display: flex; - /* ------------------ No tabs version end ------------- */ -} -body.theme-allure-clear .section-body-container .note-properties-widget div:before { - font-size: initial; - content: 'source'; - color: var(--color-text-secondary); - white-space: pre; - margin-right: 12px; -} -body.theme-allure-clear .section-body-container .note-properties-widget a.page-url { - display: initial; - white-space: break-spaces; - /*margin: 12px 0 0 18px;*/ - border-bottom: var(--border-transparent); - font-size: initial; - - /* ------------------ With tabs version start ------------- */ - line-height: 1em; - /* ------------------ With tabs version end ------------- */ -} -body.theme-allure-clear .section-body-container .note-properties-widget a.page-url:hover { - color: var(--color-text-highlight); - border-bottom: var(--border-link); -} - -/* Attr */ - -/* ------------------ No tabs version start ------------- */ -body.theme-allure-clear .section-container { - position: absolute; - bottom: -5px; - z-index: 1; - background: var(--color-background-secondary); - width: inherit; - margin-left: -12px; -} -/* ------------------ No tabs version end ------------- */ - -body.theme-allure-clear .section-title-container { - justify-content: left; - max-width: var(--width-note-body); - - /* ------------------ With tabs version start ------------- */ - padding: 0 var(--spacing-center-pane); - margin: 0 auto; - /* ------------------ With tabs version end ------------- */ - - /* ------------------ No tabs version start ------------- */ - margin: 0; - padding-left: 12px; - /* ------------------ No tabs version end ------------- */ -} -body.theme-allure-clear .note-properties-widget, -body.theme-allure-clear .attribute-list > div:nth-of-type(1), -body.theme-allure-clear .inherited-attributes-container { - padding: 0 !important; - color: var(--color-text-secondary); -} -body.theme-allure-clear .attribute-list p { - /* ------------------ With tabs version start ------------- */ - margin-right: 50px !important; - /* ------------------ With tabs version end ------------- */ - - /* ------------------ No tabs version start ------------- */ - margin-right: 78px !important; - /* ------------------ No tabs version end ------------- */ -} -body.theme-allure-clear div.note-title-container { - /* ------------------ With tabs version start ------------- */ - margin: 0; - /* ------------------ With tabs version end ------------- */ - - /* ------------------ No tabs version start ------------- */ - margin: 0 0 4px; - /* ------------------ No tabs version end ------------- */ -} -body.theme-allure-clear .attribute-list-editor { - padding-left: 0 !important; -} - -/* Attr popup */ -body.theme-allure-claer table td, -body.theme-allure-claer table th { - color: var(--color-text-primary); -} - -/* message on top of notes and book view */ -/*body.theme-allure-clear .note-book-auto-message { - background: unset; - border-radius: unset; - text-align: left; - margin: 0.5rem 0; - width: calc(100% - 90px); -}*/ - -/* book view - mute hide/show children button */ -/*body.theme-allure-clear .note-book-children .note-book-hide-children-button, -body.theme-allure-clear .note-book-children .note-book-open-children-button { - font-size: 90%; - margin: 10px 0; - display: block; - text-align: center; -}*/ - -/* edit mode */ -body.theme-allure-clear .CodeMirror { - color: var(--color-text-primary); -} - -/* book view */ -body.theme-allure-clear .note-detail-book > .note-detail-book-content > div.note-book-card .note-book-content { - flex-grow: 0; - margin: 12px; - background: var(--color-background-secondary); -} -body.theme-allure-clear .note-detail-book > .note-detail-book-content > div.note-book-card .note-book-content * { - margin: .5rem 0; -} -body.theme-allure-clear pre:not(.CodeMirror-line) { - color: var(--color-text-primary) !important; -} - - -/* structure nested notes in book view */ -body.theme-allure-clear .note-detail > .note-book-card .note-book-card { - /*align-items: flex-start;*/ - /* border-left: var(--border-standard); */ - margin: 10px 0 35px; - background: var(--color-background-primary); -} - -/* include notes */ -body.theme-allure-clear .ck-content .include-note { - border-radius: var(--border-radius-standard); - border: var(--border-standard); - background: unset; - box-shadow: var(--shadow-card); - padding: 0; - margin: 20px 0; - display: block; -} -body.theme-allure-clear .ck-content .include-note-title { - font-size: 1.1rem; - margin-bottom: 0; - padding: 16px; - font-family: var(--font-headers); - font-weight: bold; -} -body.theme-allure-clear .ck-content .include-note-title a { - border-bottom: none; -} -body.theme-allure-clear .ck-content a, -body.theme-allure-clear .ck-content a * { - border-bottom: var(--border-link); -} -body.theme-allure-clear .ck-content a:hover, -body.theme-allure-clear .ck-content a *:hover { - color: var(--color-text-highlight); - border-color: var(--color-text-highlight); -} -body.theme-allure-clear .ck-content a:after, -body.theme-allure-clear .ck-content a *:after { - font-size: smaller; - content: none; - vertical-align: top; -} -body.theme-allure-clear .ck-content .include-note-title a { - text-decoration: none; - white-space: nowrap; - text-overflow: ellipsis; - display: block; - overflow: hidden; -} -body.theme-allure-clear h4.include-note-title a:before { - content: "\e659"; - font-family: trilium-allure-icons; - margin-right: 8px; -} -body.theme-allure-clear section.include-note img { - display: none; -} -body.theme-allure-clear section.include-note .image:after { - display: block; - content: '[img]'; - font-size: 1rem; -} -body.theme-allure-clear .ck-content .image > figcaption { - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 16px; - text-align: center; - color: var(--color-text-secondary) !important; - margin-top: 6px; - background-color: unset !important; - /*padding: 0;*/ - display: block; -} -body.theme-allure-clear section[data-box-size=small].include-note > div:nth-of-type(1) > div { - height: 4.5rem; - overflow: hidden; - margin: 0 16px 16px; -} -body.theme-allure-clear section[data-box-size=medium].include-note > div:nth-of-type(1) > div { - height: 12rem; - overflow: hidden; - margin: 0 16px 16px; -} -body.theme-allure-clear section[data-box-size=medium].include-note img { - object-fit: cover; - width: 10rem; - height: 10rem; -} -body.theme-allure-clear section[data-box-size=full].include-note > div:nth-of-type(1) > div { - overflow: hidden; - margin: 0 16px 16px; -} -body.theme-allure-clear section:not([data-box-size=full]).include-note div.ck-content *:not(.image):not(img) { - font-weight: normal !important; - display: inline !important; - background: unset !important; - border: unset !important; - outline: unset !important; - margin: unset !important; - padding: unset !important; - font-size: 1rem !important; - color: var(--color-text-primary) !important; - white-space: initial !important; - line-height: 1.6rem; -} -body.theme-allure-clear section.include-note div.include-note-content.type-text br { - display: none; -} - - -/* Table */ -body.theme-allure-clear .ck-content .table { - width: auto; - /*border: var(--border-standard);*/ - margin: 1em; -} -body.theme-allure-clear .ck-content .table td { - padding: .6em .8em; - border-left: none; - border-right: none; - color: var(--color-text-primary); - position: relative; - vertical-align: middle; - border: var(--border-standard); -} -body.theme-allure-clear .ck-content .table td:focus { - background: var(--color-background-primary); - border: var(--border-standard); -} -body.theme-allure-clear .ck-content .table th { - background: var(--color-button-accent); - color: var(--color-text-primary); - border: var(--border-standard); -} -body.theme-allure-clear .ck-content ol, -body.theme-allure-clear .ck-content ul, -body.theme-allure-clear table ol, -body.theme-allure-clear table ul { - display: block; - /*width: max-content;*/ - margin: 0; - position: relative; - padding-left: 40px; -} -body.theme-allure-clear .ck-content ul ul, -body.theme-allure-clear .ck-content ul ol, -body.theme-allure-clear .ck-content ol ul, -body.theme-allure-clear .ck-content ol ol, -body.theme-allure-clear table ul ul, -body.theme-allure-clear table ul ol, -body.theme-allure-clear table ol ul, -body.theme-allure-clear table ol ol { - padding-left: 20px; -} -body.theme-allure-clear .ck-content li, -body.theme-allure-clear table li { - text-align: left; - line-height: 1.6rem; - /*padding-left: 0;*/ -} -body.theme-allure-clear .ck-widget, -body.theme-allure-clear .ck-widget.ck-widget_with-selection-handle { - width: auto; - margin-left: 0; -} -/* Table - header */ -body.theme-allure-clear .ck-content table tr:first-child { - background: var(--color-background-primary); - text-align: center; -} -/*body.theme-allure-clear .ck-content table tr:first-child td { - color: var(--color-text-grey); -}*/ -/* Table - body */ -body.theme-allure-clear .ck-widget_selected, -body.theme-allure-clear .ck-widget_selected:hover { - width: auto; -} -body.theme-allure-clear .ck-editor__nested-editable.ck-editor__nested-editable_focused, -body.theme-allure-clear .ck-editor__nested-editable:focus, -body.theme-allure-clear .ck-editor__nested-editable.ck-editor__nested-editable_focused, -body.theme-allure-clear .ck-editor__nested-editable:focus { - background: var(--color-background-grey); - border-style: none; - outline: none; - outline-offset: unset; - box-shadow: none; -} - -/* note title */ -body.theme-allure-clear input.note-title { - padding: 0; - outline: none; - background: unset !important; - line-height: 1.5em; - border: 2px solid transparent; - color: var(--color-text-primary) !important; - - /* ------------------ With tabs version start ------------- */ - font-size: 1.5em; - text-align: center; - /* ------------------ With tabs version end ------------- */ - - /* ------------------ No tabs version start ------------- */ - font-size: .8em; - text-align: left; - /* ------------------ No tabs version end ------------- */ -} - -body.theme-allure-clear input.note-title:focus { - color: var(--color-text-highlight) !important; -} -/*body.theme-allure-clear button.note-icon:before { - font-size: 1.6rem; -}*/ - -/* note type dropdown */ -body.theme-allure-clear .dropdown-item strong { - font-weight: normal; -} -body.theme-allure-clear .dropdown-item span.check { - float: right; - margin-left: 14px; -} -body.theme-allure-clear .dropdown-item[data-mime-type] { - padding: 0 1rem 0 2.6rem; -} -body.theme-allure-clear .dropdown-item[data-note-type=text] strong:before { - content: '\e61c'; - font-family: 'trilium-allure-icons'; - font-size: 1rem; - margin-right: 10px; -} -body.theme-allure-clear .dropdown-item[data-note-type=relation-map] strong:before { - content: '\e617'; - font-family: 'trilium-allure-icons'; - font-size: 1rem; - margin-right: 10px; -} -body.theme-allure-clear .dropdown-item[data-note-type=render] strong:before { - content: '\e60f'; - font-family: 'trilium-allure-icons'; - font-size: 1rem; - margin-right: 10px; -} -body.theme-allure-clear .dropdown-item[data-note-type=book] strong:before { - content: '\eb1f'; - font-family: 'trilium-allure-icons'; - font-size: 1rem; - margin-right: 10px; -} -body.theme-allure-clear .dropdown-item[data-note-type=code] strong:before { - content: '\efa4'; - font-family: 'trilium-allure-icons'; - font-size: 1rem; - margin-right: 10px; -} -body.theme-allure-clear .dropdown-item[data-note-type=code] strong:before { - content: '\e6b0'; - font-family: 'trilium-allure-icons'; - font-size: 1rem; - margin-right: 10px; -} - -/* NOTE BODY */ - -/* note details */ -/*body.theme-allure-clear div#center-pane .component:nth-of-type(10) { - background: var(--color-background-secondary); - padding: 4px; - border: var(--border-standard); - box-shadow: var(--shadow-card); - border-radius: var(--border-radius-standard); -}*/ -/*body.theme-allure-clear div#center-pane div:nth-of-type(11) { - margin: 4px 0; -}*/ - -/* ------------------ With tabs version start ------------- */ -body.theme-allure-clear .note-detail { -/* ------------------ With tabs version end ------------- */ - -/* ------------------ No tabs version start ------------- */ -body.theme-allure-clear :not(.rendered-note-content) > .ck-content, -body.theme-allure-clear .note-detail-code-editor, -body.theme-allure-clear #confirm-dialog-content, -body.theme-allure-clear .note-detail-readonly-text, -body.theme-allure-clear .note-detail-relation-map, -body.theme-allure-clear .note-detail-editable-text, -body.theme-allure-clear .note-detail-read-only-code-content, -body.theme-allure-clear .note-detail-read-only-code { - padding: 12px var(--spacing-center-pane) 0; - /* ------------------ No tabs version end ------------- */ - font-family: monospace; - margin: 0 auto; - max-width: var(--width-note-body); - font-size: 16px; - /*background: var(--color-background-secondary);*/ -} -body.theme-allure-clear #confirm-dialog-content, -body.theme-allure-clear .note-detail-readonly-text, -body.theme-allure-clear .note-detail-relation-map, -body.theme-allure-clear .note-detail-editable-text, -body.theme-allure-clear .note-detail-read-only-code-content, -body.theme-allure-clear .note-detail-read-only-code { - overflow: hidden; - margin-bottom: 0; - color: var(--color-text-primary) !important; - min-height: 28px; - - /* ------------------ With tabs version start ------------- */ - padding: 24px var(--spacing-center-pane); - /* ------------------ With tabs version end ------------- */ - - /* ------------------ No tabs version start ------------- */ - padding: 0 var(--spacing-center-pane) 33px; - /* ------------------ No tabs version end ------------- */ -} - -/* ------------------ With tabs version start ------------- */ -body.theme-allure-clear .note-detail-code { - padding-right: var(--spacing-center-pane); -} -/* ------------------ With tabs version end ------------- */ - -body.theme-allure-clear .ck-content :not(pre) code { - font-size: 0.7rem; - padding: 4px 8px; - margin: 0 4px; - /*border: var(--border-standard);*/ - font-family: var(--font-code); - color: var(--color-text-primary); - background: var(--color-background-accent); - vertical-align: middle; -} -body.theme-allure-clear p br:not([data-cke-filler]) { - height: var(--spacing-content-normal); - display: block; - content: " "; -} -/* Insert math */ -body.theme-allure-clear .ck-math-view input { - font-family: var(--font-code); - font-size: 1rem; - padding: 4px 8px; - box-shadow: none; -} -body.theme-allure-clear button.ck-button-save, -body.theme-allure-clear button.ck-button-cancel { - display: none; -} -body.theme-allure-clear .ck-math-view .ck-labeled-input__status, -body.theme-allure-clear .ck-math-view .ck-label { - color: var(--color-text-secondary); - font-weight: normal; -} -body.theme-allure-clear button.ck-button-display-toggle { - border: var(--border-standard); - margin: 6px; -} - -/* Edit button */ -body.theme-allure-clear .edit-note { - font-size: 0; -} -body.theme-allure-clear div.note-detail a.edit-note:before { - content: '\e6e5'; - padding: 6px; - font-family: 'trilium-allure-icons'; - - /* ------------------ With tabs version start ------------- */ - font-size: 1.3rem; - /* ------------------ With tabs version end ------------- */ - - /* ------------------ No tabs version start ------------- */ - font-size: 1rem; - /* ------------------ No tabs version end ------------- */ -} -body.theme-allure-clear .edit-text-note-container, -body.theme-allure-clear .edit-code-note-container { - padding: 0; - background: transparent !important; - border: var(--border-transparent) !important; - line-height: 1.4; - - /* ------------------ With tabs version start ------------- */ - top: 0; - right: 28px; - /* ------------------ With tabs version end ------------- */ - - /* ------------------ No tabs version start ------------- */ - top: 4px; - right: 8px; - /* ------------------ No tabs version end ------------- */ -} -/*body.theme-allure-clear div#center-pane.component div.note-detail-read-only-code div.alert { - padding: 0; -}*/ -/*body.theme-allure-clear div.note-detail-readonly-text div.edit-text-note-container { - top: 58px; - right: unset; - position: fixed; - margin-left: -30px; - background: none; - border: var(--border-transparent) !important; -}*/ -/*body.theme-allure-clear div.note-detail-read-only-code div.edit-code-note-container { - top: 58px; - right: unset; - position: fixed; - margin-left: -5px; - background: none; - border: var(--border-transparent) !important; -}*/ - -body.theme-allure-clear .note-detail-text { - line-height: 1.45; -} - -body.theme-allure-clear .ck-content > *:not(figure):first-child { - margin-top: 0; -} - -/* images */ -body.theme-allure-clear .ck-content .image { - margin: 2em auto; - display: block; -} - -/* line */ -body.theme-allure-clear .ck-content hr { - margin: 4em auto; - width: 240px; - max-width: 100%; - border: none; - height: 1px; -} - -/* p */ -body.theme-allure-clear .ck-content i { - color: var(--color-text-secondary); -} - - -/* HEADING */ - -body.theme-allure-clear .ck-content h2, -body.theme-allure-clear .ck-content h3, -body.theme-allure-clear .ck-content h4:not(.include-note-title), -body.theme-allure-clear .ck-content h5:not(.modal-title):not(.note-book-title), -body.theme-allure-clear .ck-content h6 { - color: var(--color-text-accent); - font-family: var(--font-headers); - font-weight: bold; -} -body.theme-allure-clear .note-detail .ck-content h2::before, -body.theme-allure-clear .note-detail .ck-content h3::before, -body.theme-allure-clear .note-detail .ck-content h4:not(.include-note-title)::before, -body.theme-allure-clear .note-detail .ck-content h5::before, -body.theme-allure-clear .note-detail .ck-content h6::before { - position: absolute; - margin-left: -38px; - font-size: 1rem; - color: var(--color-text-inconspicuous); - line-height: 2em; -} -body.theme-allure-clear .note-detail .ck-content h2::before { - content: 'H2'; -} -body.theme-allure-clear .note-detail .ck-content h3::before { - content: 'H3'; -} -body.theme-allure-clear .note-detail .ck-content h4:not(.include-note-title)::before { - content: 'H4'; -} -body.theme-allure-clear .note-detail .ck-content h5::before { - content: 'H5'; -} -body.theme-allure-clear .note-detail .ck-content h6::before { - content: 'H6'; -} - -/* h1 */ -/*body.theme-allure-clear .ck-content h1 { - display: table; - font-family: var(--font-headers); - font-size: 2rem; - font-weight: 600; - margin-top: 4rem; - margin-bottom: 1rem; -}*/ - -/* h2 */ -body.theme-allure-clear .ck-content h2 { - font-size: 1.4em; - margin-bottom: 1.4rem; - margin-top: 3.4rem; -} -/*body.theme-allure-clear .ck-content h2:after, -body.mobile .ck-content h2:after { - content: ''; - display: block; - width: 30px; - margin-top: 10px; - border-radius: 5px; -}*/ - -/* h3, h4, h5, h6 following directly after h2, h3, h4, h5 */ -body.theme-allure-clear .ck-content h2 + h3, -body.theme-allure-clear .ck-content h3 + h4, -body.theme-allure-clear .ck-content h4 + h5, -body.theme-allure-clear .ck-content h5 + h6 { - margin-top: var(--spacing-content-normal); -} - -/* h3 */ -body.theme-allure-clear .ck-content h3 { - font-size: 1.3em; - margin-bottom: 1.4rem; - margin-top: 3.0rem; -} - -/* h4, h5, h6 */ -body.theme-allure-clear .ck-content h4:not(.include-note-title), -body.theme-allure-clear .ck-content h5:not(.modal-title):not(.note-book-title), -body.theme-allure-clear .ck-content h6 { - font-size: 1.2em; - margin-bottom: 1.2rem; - margin-top: 2.6rem; -} - -/* The first heading */ -/*body.theme-allure-clear .ck-content h1:first-child, -body.theme-allure-clear .ck-content h2:first-child, -body.theme-allure-clear .ck-content h3:first-child, -body.theme-allure-clear .ck-content h4:first-child, -body.theme-allure-clear .ck-content h5:first-child, -body.theme-allure-clear .ck-content h6:first-child { - margin-top: 0; -}*/ - -/* code */ - -body.theme-allure-clear .ck-content pre { - background: var(--color-background-primary); - border: none; - margin: var(--spacing-content-normal) 0; - color: var(--color-text-primary) !important; -} - -body.theme-allure-clear .ck-content pre code { - font-family: var(--font-code); -} - -/* Checklists */ -body.theme-allure-clear .ck-content ul.todo-list { - padding-top: 4px; -} -body.theme-allure-clear .ck-content .todo-list .todo-list__label > input::before { - background: var(--color-button-accent); - border: none !important; - border-radius: 10px; -} -body.theme-allure-clear .ck-content .todo-list .todo-list__label > input[checked]::before { - background: var(--color-button-highlight); -} -body.theme-allure-clear label.todo-list__label { - margin-bottom: 0; -} -body.theme-allure-clear .todo-list li { - margin-bottom: 1rem; - line-height: 1.4rem; -} -body.theme-allure-clear .todo-list input[type="checkbox"] { - outline: none; - background: unset !important; -} - - -/* NOTE LIST WIDGET */ - -/* Note List - All */ -body.theme-allure-clear .note-list-widget { - padding: 0 var(--spacing-center-pane); - margin: 0 auto; - max-width: var(--width-note-body); -} -body.theme-allure-clear .note-list-widget .note-list { - padding: 0; -} -body.theme-allure-clear .note-book-card.expanded .note-book-content { - padding: 0 16px; - /*margin-bottom: 1em;*/ - overflow: hidden; -} -body.theme-allure-clear .note-book-card.expanded .note-book-content .ck-content { - padding: 0; - max-height: 6em; -} - -/* Note List - Content - Grid view */ -body.theme-allure-clear .note-list.grid-view .note-book-card { - background-color: var(--color-background-secondary); - /*border: var(--border-standard);*/ - flex-grow: 1; - margin: 6px 0; - /*box-shadow: var(--shadow-card);*/ - padding: 0; - border-radius: var(--border-radius-standard); - max-height: 12em; -} -body.theme-allure-clear .grid-view .note-book-card.expanded .ck-content * { - color: var(--color-text-secondary) !important; - font-weight: normal; - border: none; - margin: var(--spacing-content-small) 0; - line-height: 1em; - display: inline; - font-size: 1em; - padding: 0; - background: inherit; -} -body.theme-allure-clear .grid-view .note-book-card.expanded .ck-content br { - display: none; -} -body.theme-allure-clear .grid-view .note-book-card.expanded .ck-content img { - float: left; - max-width: 9em; - max-height: 9em; - margin: 9px 18px 0 0; - border-radius: 3px; -} -body.theme-allure-clear .grid-view .note-book-card .note-book-title a { - display: block; -} - -/* Note List - Content - List view */ -body.theme-allure-clear .note-list.list-view .note-list-container { - margin-top: 30px; -} -body.theme-allure-clear .note-list.list-view .note-book-card { - background-color: var(--color-background-secondary); - border: var(--border-standard); - margin: 12px 12px 12px 0; - box-shadow: var(--shadow-card); - padding: 0; - border-radius: var(--border-radius-standard); -} - -/* Note List - Button */ -body.theme-allure-clear .note-list.grid-view .note-list-container { - margin-top: 20px; -} - -/* Note List - Title */ -body.theme-allure-clear .note-book-card .note-book-title a { - /*font-size: 1.4em;*/ - font-family: var(--font-headers); - font-weight: normal; - margin: 0; - border-top-left-radius: var(--border-radius-standard); - border-top-right-radius: var(--border-radius-standard); - padding: 12px 16px 6px 16px; - font-size: 1.2rem; - width: 100%; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - /*background-color: var(--color-background-primary);*/ - /*border-bottom: var(--border-standard);*/ -} -body.theme-allure-clear .list-view .note-book-card .note-book-title a { - padding-left: 0; -} -body.theme-allure-clear .note-book-card .note-book-title a:hover { - color: var(--color-text-highlight); -} -body.theme-allure-clear .note-book-card .note-book-title .note-expander { - padding: 14px; -} - -/* Note List - Title - Attrs */ -body.theme-allure-clear .note-book-title .rendered-note-attributes { - display: none; - /*font-size: 14px; - font-weight: normal; - display: block; - margin: 0; - padding: 10px 16px 0; - line-height: 1.4em; - color: var(--color-text-secondary);*/ -} -/*body.theme-allure-clear .note-book-title .rendered-note-attributes:before { - content: ''; -}*/ - - -/* SIMILAR NOTE */ -/* ------------------ With tabs version start ------------- */ -body.theme-allure-clear .similar-notes-widget .area-expander-text { - padding: 4px 0; - color: var(--color-text-secondary); -} -body.theme-allure-clear .similar-notes-widget .area-expander-text:hover { - color: var(--color-text-accent); -} -body.theme-allure-clear .similar-notes-widget .similar-notes-wrapper { - max-height: 30em; -} -/* ------------------ With tabs version end ------------- */ - -/* ------------------ No tabs version start ------------- */ -body.theme-allure-clear .similar-notes-widget { - display: none; -} -/* ------------------ No tabs version end ------------- */ - - -/* ----------------------------------------------------------------------------- */ -/* RIGHT PANE */ -/* ----------------------------------------------------------------------------- */ -body.theme-allure-clear div#right-pane { - padding: 16px 22px 16px 17px; - background: var(--color-background-primary); - margin-top: 12px; - - /* ------------------ No tabs version start ------------- */ - z-index: 1; - /* ------------------ No tabs version end ------------- */ -} - -/* List Items */ -body.theme-allure-clear div#right-pane li { - list-style-type: none; -} -body.theme-allure-clear div#right-pane li strong { - font-weight: normal; - color: var(--color-text-secondary); -} -body.theme-allure-clear div#right-pane li a { - border-bottom: var(--border-link); -} - - -/* WIDGET */ - -body.theme-allure-clear div#right-pane .card { - /*border-bottom: var(--border-standard);*/ - /*border-radius: unset;*/ - /*background-color: var(--color-background-secondary);*/ - margin: 2px 0; -} -body.theme-allure-clear div#right-pane .body-wrapper { - overflow: hidden; -} - -/* Widget - Icon before title */ -body.theme-allure-clear .card-header .widget-title:before { - font-family: "trilium-allure-icons"; - margin-right: 12px; -} -body.theme-allure-clear a[data-target*="NoteInfo"] .widget-title:before { - content: '\e650'; -} -body.theme-allure-clear a[data-target*="Calendar"] .widget-title:before { - content: '\e64a'; -} -body.theme-allure-clear a[data-target*="EditedNotes"] .widget-title:before { - content: '\e603'; -} -body.theme-allure-clear a[data-target*="LinkMap"] .widget-title:before { - content: '\e754'; -} -body.theme-allure-clear a[data-target*="NoteRevisions"] .widget-title:before { - content: '\e71f'; -} -body.theme-allure-clear a[data-target*="WhatLinksHere"] .widget-title:before { - content: '\ec57'; -} - - -/* Widget Header */ -body.theme-allure-clear div#right-pane .card-header { - /*border-bottom-left-radius: 0;*/ - /*border-bottom-right-radius: 0;*/ - /*border-bottom: var(--border-accent-alt);*/ - border: none; - width: 100%; - height: 38px; - justify-content: space-between; - align-items: center; - background: var(--color-background-primary); - padding: 0; -} -body.theme-allure-clear div.card-header div:nth-of-type(1) { - width: 100%; - display: inherit; -} -/* Remove the space in front of the show/hide button */ -body.theme-allure-clear div#right-pane .card-header div:nth-of-type(2) { - font-size: 0; -} -body.theme-allure-clear #right-pane .widget-title { - font-weight: 600; - font-family: var(--font-headers); - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - margin-right: 48px; - display: block; - color: var(--color-text-primary) !important; -} -body.theme-allure-clear div#right-pane .card-header .widget-header-actions a.widget-header-action { - color: var(--color-text-primary) !important; - font-size: 0.8rem; - padding: 6px; - /*border: var(--border-transparent);*/ - border-radius: var(--border-radius-standard); - position: absolute; - right: 28px; - margin: 4px 0; -} -body.theme-allure-clear div#right-pane .card-header .widget-header-actions a.widget-header-action:hover { - background: var(--color-button-accent); - /*border: var(--border-standard);*/ -} - -/* Widget Body */ -body.theme-allure-clear div#right-pane .card-body { - font-family: var(--font-body); - margin-left: 36px; - padding-left: 0; - padding-right: 34px; - /*background: var(--color-background-secondary);*/ - /*border-top: var(--border-standard);*/ -} -body.theme-allure-clear div#right-pane .card-body ul { - padding-left: 0; - margin-bottom: 0; - margin-right: -8px; -} -body.theme-allure-clear .link-map-widget { - margin: -8px; -} -body.theme-allure-clear .note-info-widget-table { - display: unset; -} -body.theme-allure-clear .note-info-widget-table th { - padding-left: 0; - color: var(--color-text-secondary); - font-weight: normal; -} -body.theme-allure-clear .note-info-widget-table td { - color: var(--color-text-primary); -} - -/* Widget button */ -body.theme-allure-clear a.widget-toggle-button { - /*border: var(--border-transparent);*/ - border-radius: var(--border-radius-standard); - padding: 8px; - width: 100%; -} -body.theme-allure-clear #right-pane .widget-toggle-icon { - float: right; - top: 4px; - color: var(--color-text-primary); -} -body.theme-allure-clear a.widget-toggle-button:hover { - /*border: var(--border-standard);*/ - background: var(--color-background-accent); -} -body.theme-allure-clear a.widget-help.external.no-arrow.bx-info-circle { - display: none; -} - -/* Calendar widget */ -body.theme-allure-clear div.calendar-widget div.calendar-header-label { - height: 24px; - overflow: hidden; -} -body.theme-allure-clear div.calendar-widget div.calendar-week span { - text-transform: inherit; - overflow: hidden; - height: 34px; - padding: 5px; -} -body.theme-allure-clear a.widget-toggle-button.no-arrow.bx-window:before { - content: "\e9ac"; -} - - - - - - - -/* ----------------------------------------------------------------------------- */ -/* MOBILE */ -/* ----------------------------------------------------------------------------- */ - -/* LAYOUT */ -body.mobile #root-widget > div.component:first-of-type { - border: none; - background: var(--color-background-secondary); -} -body.mobile .btn:focus { - box-shadow: none; -} -body.mobile :not(.fancytree-custom-icon):after, -body.mobile :not(.fancytree-custom-icon):before { - font-size: 1.3rem; - font-family: 'trilium-allure-icons'; - color: var(--color-text-primary); -} -body.mobile div#global-buttons { - top: 0; - padding: 9px 0; - margin: 0; - - /* --------- Default mode start -------- */ - box-shadow: var(--shadow-mobile); - /* ---------- Default mode end --------- */ - - /* ---------- Night mode start --------- */ - background: var(--color-background-accent); - /* ----------- Night mode end ---------- */ -} -body.mobile .btn.btn-primary { - border: none; - background: var(--color-button-highlight); -} -body.mobile div#root-widget { - background: var(--color-background-secondary); -} -body.mobile a.external { - display: none; -} - - -/* Menu */ - -/* Expanded menu in the upper left corner */ -body.mobile div#context-menu-container { - padding: 12px; - top: 16px !important; - left: 240px !important; - border-radius: var(--border-radius-standard); - border: none; - box-shadow: var(--shadow-mobile-popup); -} -body.mobile div#context-menu-container .dropdown-item { - margin-left: -12px; - font-size: 1rem; -} -body.mobile div#context-menu-container li.dropdown-item + li.dropdown-item { - margin-top: 20px; -} -/* The expanded menu in the upper right corner of the notebook */ -body.mobile div.dropdown-menu.dropdown-menu-right.show { - font-size: inherit; - border: none; - box-shadow: var(--shadow-mobile-popup); - padding: 12px; -} -body.mobile div#global-buttons a.dropdown-item { - font-size: 1rem; - padding: 0; -} -body.mobile div#global-buttons a.dropdown-item + a.dropdown-item { - margin-top: 20px; -} - - -body.mobile div.note-title-container input.note-title { - font-size: inherit; - height: 100%; - /*margin-right: 48px;*/ -} - -body.mobile div.note-detail.type-text.mime-text-html { - padding: 0 !important; - margin: 0 !important; -} -body.mobile div.note-detail-readonly-text-content, -body.mobile div.note-detail-read-only-code-content, -body.mobile div.note-detail-editable-text-editor, -body.mobile div.note-detail-readonly-text { - padding: 12px 0 12px 14px; - margin-left: 16px; -} -body.mobile div.component div.tree { - margin-bottom: 12px; -} - -body.mobile div#readability-page-1 { - line-height: 1.8rem; - padding: 0; -} - -body.mobile button.action-button.d-sm-none.d-md-none.d-lg-none.d-xl-none.component { - /*padding-top: 0 !important;*/ - margin-right: 4px; - order: -1; -} -body.mobile button.action-button span { - font-size: 0; -} -body.mobile button.action-button span:before { - content: '\e65c'; -} - -/* note detail menu */ -body.mobile button.bx-menu { - padding: 14px; - outline: none; - order: 1; -} -body.mobile button.bx-menu:before { - content: '\e60c'; -} -body.mobile .tree-item-button.add-note-button, -body.mobile .bx-plus, -body.mobile .bx-trash { - display: none !important; -} - -/* Note list */ - -body.mobile ul[role="group"] { - background: var(--color-background-translucent); -} -body.mobile div.component { - padding: 0; -} -body.mobile #root-widget > .component:nth-of-type(2) > .component:first-of-type { - position: inherit !important; - - /* --------- Default mode start -------- */ - box-shadow: var(--shadow-mobile); - /* ---------- Default mode end --------- */ - - /* ---------- Night mode start --------- */ - background: var(--color-background-accent); - /* ----------- Night mode end ---------- */ -} -body.mobile div.component div.tree-wrapper { - /*box-shadow: none;*/ - /*width: 100%;*/ - margin-top: 54px; - /*overflow: hidden;*/ -} - -body.mobile div.note-detail-printable.component { - margin: 5px; - box-shadow: none; -} -body.mobile span.fancytree-node { - padding: 8px 0; - border-radius: var(--border-radius-standard); - margin-left: 0; -} -body.mobile span.fancytree-node:active, -body.mobile span.fancytree-node:hover { - background: unset; -} -body.mobile span.fancytree-title { - font-size: inherit; - line-height: 28px; - border: none; - max-width: calc(100% - 48px); - display: inline-block; - margin-left: 0 !important; -} -body.mobile span.fancytree-custom-icon { - font-size: x-large; - margin-right: 6px; -} -body.mobile span.fancytree-expander { - font-size: 12px; -} -body.mobile span.fancytree-node:not(.fancytree-folder) span.fancytree-expander:before { - color: transparent; -} -body.mobile div.tree > ul > li > ul > li { - /*background: var(--color-background-primary);*/ - /*margin-top: 12px;*/ - /*padding: 6px;*/ - border-radius: 6px; -} -body.mobile div.tree span.fancytree-expander { - position: absolute; - margin: 8px 88%; -} -body.mobile div.tree span.fancytree-expander:before { - line-height: inherit; -} - -/* Selected notes */ -body.theme-allure-clear span.fancytree-selected { - background: var(--color-background-accent); - border-radius: unset; -} -body.theme-allure-clear span.fancytree-selected .fancytree-title { - background: unset !important; -} - -/* protected nodes */ -body.mobile div.protected-session-password-component.note-detail-printable { - margin: 80px auto auto; -} - -body.mobile div.note-detail.type-code.mime-text-css { - padding: 3px !important; -} - -body.mobile div.component div.note-title-container.component { - box-shadow: none; - display: contents; -} - -body.mobile input.note-title { - background: unset !important; -} - -body.mobile div span.fancytree-active .fancytree-title { - background: none !important; - font-weight: inherit; - color: inherit !important; -} - -body.mobile ul.ui-fancytree.fancytree-container { - padding: 0 6px; - /*background: var(--color-background-secondary) !important;*/ -} - -/* TOP BUTTON */ -body.mobile a { - color: var(--color-text-primary); -} -body.mobile .icon-action, -body.mobile a.edit-note { - border: none; - font-size: 1.3em; -} -body.mobile a[data-trigger-command="createNoteIntoInbox"]:before { - content: '\eaec'; -} -body.mobile a[data-trigger-command="collapseTree"]:before { - content: '\e620'; -} -body.mobile .bx-cog:before { - content: '\e713'; -} -body.mobile .bx-cog:after { - content: none; -} -body.mobile .bx-laptop:before, -body.mobile .bx-log-out:before { - content: none; -} -body.mobile .bx-info-circle:before { - font-size: 0; -} -body.mobile a[data-trigger-command="scrollToActiveNote"] { - display: none; -} -body.mobile .bx-extension:before { - content: '\e626'; -} - -/* dialog */ -body.mobile div.modal-dialog.modal-dialog-scrollable { - margin: 0; -} -body.mobile div.modal-dialog-scrollable .modal-content { - border: none; - border-radius: unset; -} -body.mobile div.modal-footer { - padding: 0; -} -body.mobile div.modal-footer button { - margin: 0; - border: none !important; - padding: 14px; - min-width: 110px; - border-radius: unset; - outline: none; - box-shadow: unset; -} -body.mobile .tree-settings-popup { - border-radius: var(--border-radius-standard); - background: var(--color-background-secondary); - border: none; - box-shadow: var(--shadow-mobile-popup); - padding: 0; -} -body.mobile .tree-settings-popup .form-check { - padding-left: 0; -} -body.mobile .tree-settings-popup .form-check-label { - width: 100%; - padding: 14px 20px; -} -body.mobile .tree-settings-popup .form-check-label:active { - background: var(--color-background-primary); -} -body.mobile .tree-settings-popup .form-check-label .form-check-input { - position: relative; - float: right; -} -body.mobile .tree-settings-popup button.save-tree-settings-button { - width: calc(100% - 32px); - height: 44px; - border-radius: 0 0 var(--border-radius-standard) var(--border-radius-standard); - margin: 10px 16px 16px; -} -body.mobile .tree-settings-popup > br { - display: none; -} - - -/* Note details */ -body.mobile blockquote { - padding: 1.5em 1.5em .5em 1.5em; -} -body.mobile .note-detail .ck-content h2::before, -body.mobile .note-detail .ck-content h3::before, -body.mobile .note-detail .ck-content h4:not(.include-note-title)::before, -body.mobile .note-detail .ck-content h5::before, -body.mobile .note-detail .ck-content h6::before { - margin-left: -24px; - font-size: .8rem; -} - -/* Edit button */ -body.mobile div.alert.alert-warning.no-print { - position: absolute; - right: 0px; - top: 0; - font-size: 0; - border: none; - padding: 6px 10px; -} -body.mobile div.edit-text-note-container a.edit-note:before, -body.mobile div.edit-code-note-container a.edit-note:before { - content: '\e6e5'; -} - -/* Expanded button */ -body.mobile span.fancytree-node.fancytree-active span.fancytree-expander:before { - color: transparent; -} -body.mobile span.fancytree-node.fancytree-active.fancytree-folder span.fancytree-expander:before { - color: unset; -} - diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 9bc3cb6eb..5e92e6c41 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -269,12 +269,6 @@ div.ui-tooltip { opacity: 0.4; } -button.icon-button { - font-size: 1.5em; - padding: 2px; - max-height: 34px; -} - .ck.ck-block-toolbar-button { transform: translateX(7px); color: var(--muted-text-color); @@ -893,14 +887,15 @@ ul.fancytree-container li { .button-widget .bx { font-size: 120%; - display: inline-block; - position: relative; - padding: 15px 15px; - cursor: pointer; + } #launcher-pane .button-widget .bx { font-size: 150%; + display: inline-block; + position: relative; + padding: 15px 15px; + cursor: pointer; } .button-widget:hover .bx {