From dfc98bd65b7e346db389a09b97f33f5056839c86 Mon Sep 17 00:00:00 2001 From: Maxim Likhachev Date: Tue, 19 Apr 2022 18:48:02 +0500 Subject: [PATCH] joplin: adjust css --- etc/soft/joplin/userchrome-light.css | 2283 ++++++++++++++++++++++++++++++++++ etc/soft/joplin/userchrome.css | 30 +- etc/soft/joplin/userstyle-light.css | 525 ++++++++ etc/soft/joplin/userstyle.css | 237 ++-- 4 files changed, 2952 insertions(+), 123 deletions(-) create mode 100644 etc/soft/joplin/userchrome-light.css create mode 100644 etc/soft/joplin/userstyle-light.css diff --git a/etc/soft/joplin/userchrome-light.css b/etc/soft/joplin/userchrome-light.css new file mode 100644 index 0000000..ca5bdd2 --- /dev/null +++ b/etc/soft/joplin/userchrome-light.css @@ -0,0 +1,2283 @@ +/* MACOS */ + +@charset "UTF-8"; +/* Uncomment and tweak the variables prefixed with `--u-` below */ +:root { + /* + General ------------------------------ + */ + /* --u-base-font-size: 120%; */ + /* + the accent color is in hsl. To convert from a different color model may want + to use: https://convertacolor.com/ + */ + /* --u-accentColor--h: 243; */ + /* --u-accentColor--s: 75%; */ + /* --u-accentColor--l: 59%; */ + /* + + Sidebar --------------------------------- + */ + --u-sidebar-note-count-label: block; + /* --u-sidebar-label-font-size: 1.5rem;*/ + /* + + Uncomment these lines for a dark sidebar in light mode + + --u-sidebar-note-count-label-color: hsla(0, 0%, 100%, 0.55); + --u-sidebar-background-color: hsl(0, 0%, 20%); + --u-sidebar-label-color: hsla(0, 0%, 100%, 0.25); + --u-sidebar-item-color: hsla(0, 0%, 100%, 0.85); + --u-sidebar-icon-color: hsl(210, 100%, 52%); + --u-sidebar-chevron-color: hsla(0, 0%, 100%, 0.55); + --u-sidebar-synchronise-color: hsla(0, 0%, 100%, 0.55); + --u-sidebar-selected-item-color: hsl(0, 0%, 27%); + */ + /* + ⚠️ IMPORTANT: The synchronise status is hidden by default, and only shown + after a timeout on hover by default. Any sync errors you might not notice. + Uncomment the line below to always show the sync status. + */ + --u-sidebar-synchronise-label: ''; + --u-sidebar-synchronise-label-color: hsl(0, 0%, 50%); + /* + + Note list ----------------------------- + */ + /* uncomment to remove note-list-dividers */ + /* --u-note-list-dividers: none; */ + /* uncomment to use zebra stripes (or change color) */ + --u-note-list-zebra-color-odd: transparent; + --u-note-list-zebra-color-even: transparent; + /* + + Editor -------------------------------- + */ + /* paragraph spacing in editor - default 1.5rem */ + /* --u-editor-paragraph-spacing: 0rem; */ + /* --u-editor-max-width: none; */ +} + +:root { + --s-accentColor--h: var(--u-accentColor--h, var(--g-systemBlue--h)); + --s-accentColor--s: var(--u-accentColor--s, var(--g-systemBlue--s)); + --s-accentColor--l: var(--u-accentColor--l, var(--g-systemBlue--l)); + --s-accentColor--hs: var(--s-accentColor--h), var(--s-accentColor--s); + --s-accentColor--hsl: var(--s-accentColor--hs), var(--s-accentColor--l); + --s-accentColor: hsl(var(--s-accentColor--hsl)); + --s-selectedContentBackgroundColor--h: var(--u-accentColor--h, var(--g-selectedContentBackgroundColor--h)); + --s-selectedContentBackgroundColor--s: var(--u-accentColor--s, var(--g-selectedContentBackgroundColor--s)); + --s-selectedContentBackgroundColor--l: var(--u-accentColor--l, var(--g-selectedContentBackgroundColor--l)); + --s-selectedContentBackgroundColor: hsl(var(--s-selectedContentBackgroundColor--h), var(--s-selectedContentBackgroundColor--s), var(--s-selectedContentBackgroundColor--l)); + --s-accentColor--selected: var(--s-selectedContentBackgroundColor); + --s-controlAccentColor--h: var(--u-accentColor--h, var(--g-controlAccentColor--h)); + --s-controlAccentColor--s: var(--u-accentColor--s, var(--g-controlAccentColor--s)); + --s-controlAccentColor--l: var(--u-accentColor--l, var(--g-controlAccentColor--l)); + --s-controlAccentColor--hsl: var(--s-controlAccentColor--h), var(--s-controlAccentColor--s), var(--s-controlAccentColor--l); + --s-controlAccentColor: hsl(var(--s-controlAccentColor--hsl)); + --s-controlAccentColor--selected: var(--s-controlAccentColor); + --s-sidebar__BackgroundColor: var(--u-sidebar-background-color, var(--g-windowBackgroundColor)); + --s-sidebar__label-FontSize: var(--u-sidebar-label-font-size, var(--g-font-size--1)); + --s-sidebar__label-Color: var(--u-sidebar-label-color, var(--g-tertiaryLabelColor)); + --s-sidebar__item-Color: var(--u-sidebar-item-color, var(--g-labelColor)); + --s-sidebar__item--selected-BackgroundColor: var(--u-sidebar-selected-item-color, var(var(--g-unemphasizedSelectedTextBackgroundColor))); + --s-sidebar__icon-Color: var(--u-sidebar-icon-color, var(--s-accentColor)); + --s-sidebar__chevron-Color: var(--u-sidebar-chevron-color, var(--g-secondaryLabelColor)); + --s-sidebar__synchronise-Color: var(--u-sidebar-synchronise-color, var(--g-secondaryLabelColor)); + --s-sidebar__synchronise-label-Color: var(--u-sidebar-synchronise-label-color, var(--g-textColor)); +} + +:root { + --g-systemBlue: rgba(0, 122, 255, 1); + --g-systemBlue--h: 211; + --g-systemBlue--s: 100%; + --g-systemBlue--l: 50%; + --g-systemBrown: rgba(162, 132, 94, 1); + --g-systemGray: rgba(142, 142, 147, 1); + --g-systemGreen: rgba(40, 205, 65, 1); + --g-systemIndigo: rgba(88, 86, 214, 1); + --g-systemOrange: rgba(255, 149, 0, 1); + --g-systemPink: rgba(255, 45, 85, 1); + --g-systemPurple: rgba(175, 82, 222, 1); + --g-systemRed: rgba(255, 59, 48, 1); + --g-systemTeal: rgba(85, 190, 240, 1); + --g-systemYellow: rgba(255, 204, 0, 1); + --g-labelColor: rgba(0, 0, 0, 0.847); + --g-secondaryLabelColor: rgba(0, 0, 0, 0.498); + --g-tertiaryLabelColor: rgba(0, 0, 0, 0.259); + --g-quaternaryLabelColor: rgba(0, 0, 0, 0.098); + --g-textColor: rgba(0, 0, 0, 1); + --g-placeholderTextColor: rgba(0, 0, 0, 0.247); + --g-selectedTextColor: rgba(0, 0, 0, 1); + --g-textBackgroundColor: rgba(255, 255, 255, 1); + --g-selectedTextBackgroundColor: rgba(179, 215, 255, 1); + --g-keyboardFocusIndicatorColor: rgba(0, 103, 244, 0.247); + --g-unemphasizedSelectedTextColor: rgba(0, 0, 0, 1); + --g-unemphasizedSelectedTextBackgroundColor: rgba(220, 220, 220, 1); + --g-alternatingContentBackgroundColorsEven: rgba(255, 255, 255, 1); + --g-alternatingContentBackgroundColorsOdd: rgba(244, 245, 245, 1); + --g-linkColor: rgba(0, 104, 218, 1); + --g-separatorColor: rgba(0, 0, 0, 0.098); + --g-selectedContentBackgroundColor: rgba(0, 99, 225, 1); + --g-selectedContentBackgroundColor--h: 214; + --g-selectedContentBackgroundColor--s: 100%; + --g-selectedContentBackgroundColor--l: 44%; + --g-unemphasizedSelectedContentBackgroundColor: rgba(220, 220, 220, 1); + --g-selectedMenuItemTextColor: rgba(255, 255, 255, 1); + --g-gridColor: rgba(230, 230, 230, 1); + --g-headerTextColor: rgba(0, 0, 0, 0.847); + --g-controlAccentColor--h: 211; + --g-controlAccentColor--s: 100%; + --g-controlAccentColor--l: 50%; + --g-controlAccentColor--hsl: var(--g-controlAccentColor--h), var(--g-controlAccentColor--s), var(--g-controlAccentColor--l); + --g-controlAccentColor: hsla(var(--g-controlAccentColor--hsl), 1); + --g-controlColor--rgb: 255, 255, 255; + --g-controlColor: rgba(var(--g-controlColor--rgb), 1); + --g-controlColor--hsl: 0, 0%, 100%; + --g-controlBackgroundColor: rgba(255, 255, 255, 1); + --g-controlTextColor: rgba(0, 0, 0, 0.847); + --g-disabledControlTextColor: rgba(0, 0, 0, 0.247); + --g-scrubberTexturedBackground: rgba(255, 255, 255, 1); + --g-selectedControlColor: rgba(179, 215, 255, 1); + --g-selectedControlTextColor: rgba(0, 0, 0, 0.847); + --g-alternateSelectedControlTextColor--rgb: 255, 255, 255; + --g-alternateSelectedControlTextColor: rgba( + var(--g-alternateSelectedControlTextColor--rgb), + 1 + ); + --g-windowBackgroundColor: rgba(236, 236, 236, 1); + --g-windowFrameTextColor: rgba(0, 0, 0, 0.847); + --g-underPageBackgroundColor: rgba(150, 150, 150, 0.898); + --g-underPageBackgroundColor--rgb: 150, 150, 150; + --g-findHighlightColor: rgba(255, 255, 0, 1); + --g-highlightColor: rgba(255, 255, 255, 1); + --g-highlightColor--rgb: 255, 255, 255; + --g-shadowColor: rgba(0, 0, 0, 1); + --g-shadowColor--rgb: 0, 0, 0; + --g-primary-Background: var(--g-textBackgroundColor); + --g-primary-Color: var(--g-textColor); + --g-spacing-00: 0px; + --g-spacing-01: 0.2rem; + --g-spacing-02: 0.4rem; + --g-spacing-03: 0.8rem; + --g-spacing-04: 1.2rem; + --g-spacing-05: 1.6rem; + --g-spacing-06: 2.4rem; + --g-spacing-07: 3.2rem; + --g-spacing-08: 4.8rem; + --g-spacing-09: 6.4rem; + --g-spacing-10: 9.6rem; + --g-spacing-11: 12.8rem; + --g-spacing-12: 19.2rem; + --g-spacing-13: 25.6rem; + --g-spacing-14: 38.4rem; + --g-spacing-15: 51.2rem; + --g-spacing-16: 76.8rem; + --g-spacing-17: 102.4rem; + --g-spacing-18: 144rem; + --g-box-shadow-0: 0 0 #0000; + --g-box-shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --g-box-shadow-2: 0 1px 3px 0 rgba(0, 0, 0, 0.1), + 0 1px 2px 0 rgba(0, 0, 0, 0.06); + --g-box-shadow-3: 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --g-box-shadow-4: 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); + --g-box-shadow-5: 0 20px 25px -5px rgba(0, 0, 0, 0.1), + 0 10px 10px -5px rgba(0, 0, 0, 0.04); + --g-box-shadow-6: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + --g-box-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); + --g-border-radius-0: 0px; + --g-border-radius-1: 0.2rem; + --g-border-radius-2: 0.4rem; + --g-border-radius-3: 0.8rem; + --g-border-radius-4: 1.2rem; + --g-border-radius-5: 1.6rem; + --g-border-radius-6: 2.4rem; + --g-border-radius-7: 3.2rem; + --g-border-radius-8: 4.8rem; + --g-border-radius-9: 6.4rem; + --g-border-radius-full: 9999px; + --g-border-width-0: 0px; + --g-border-width-1: 0.1rem; + --g-border-width-2: 0.2rem; + --g-border-width-3: 0.4rem; + --g-border-width-4: 0.8rem; + --g-border-width-5: 1.2rem; + --g-border-width-6: 1.6rem; + --g-font-family-icon-font: "NotoMono Nerd Font", + --g-font-family-system-rounded: "NotoMono Nerd Font", "SF Pro Rounded", "SF Pro", -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", + sans-serif; + --g-font-family-system: "NotoMono Nerd Font", "Font Awesome 5 Free", "SF Pro", -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif; + --g-font-family-mono: "NotoMono Nerd Font", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace; + --g-font-size--1: 1.1rem; + --g-font-size-0: 1.2rem; + --g-font-size-1: 1.4rem; + --g-font-size-2: 1.6rem; + --g-font-size-3: 1.8rem; + --g-font-size-4: 2rem; + --g-font-size-5: 2.4rem; + --g-font-size-6: 3rem; + --g-font-size-7: 3.6rem; + --g-font-size-8: 4.8rem; + --g-font-size-9: 6rem; + --g-font-size-10: 7.2rem; + --g-font-size-11: 9.6rem; + --g-font-size-12: 12.8rem; + --g-font-weight-thin: 100; + --g-font-weight-extralight: 200; + --g-font-weight-light: 300; + --g-font-weight-normal: 400; + --g-font-weight-medium: 500; + --g-font-weight-semibold: 600; + --g-font-weight-bold: 700; + --g-font-weight-extrabold: 800; + --g-font-weight-black: 900; + --g-line-height-0: 1.6rem; + --g-line-height-1: 2rem; + --g-line-height-2: 2.4rem; + --g-line-height-3: 2.8rem; + --g-line-height-4: 2.8rem; + --g-line-height-5: 3.2rem; + --g-line-height-6: 3.6rem; + --g-line-height-7: 4rem; + --g-line-height-8: 1; + --g-line-height-9: 1; + --g-line-height-10: 1; + --g-line-height-11: 1; + --g-line-height-12: 1; +} +@media (prefers-color-scheme: dark) { + :root { + --g-systemBlue: rgba(10, 132, 255, 1); + --g-systemBlue--h: 210; + --g-systemBlue--s: 100%; + --g-systemBlue--l: 52%; + --g-systemBrown: rgba(172, 142, 104, 1); + --g-systemGray: rgba(152, 152, 157, 1); + --g-systemGreen: rgba(50, 215, 75, 1); + --g-systemIndigo: rgba(94, 92, 230, 1); + --g-systemOrange: rgba(255, 159, 10, 1); + --g-systemPink: rgba(255, 55, 95, 1); + --g-systemPurple: rgba(191, 90, 242, 1); + --g-systemRed: rgba(255, 69, 58, 1); + --g-systemTeal: rgba(90, 200, 245, 1); + --g-systemYellow: rgba(255, 214, 10, 1); + --g-labelColor: rgba(255, 255, 255, 0.847); + --g-secondaryLabelColor: rgba(255, 255, 255, 0.549); + --g-tertiaryLabelColor: rgba(255, 255, 255, 0.247); + --g-quaternaryLabelColor: rgba(255, 255, 255, 0.098); + --g-textColor: rgba(255, 255, 255, 1); + --g-placeholderTextColor: rgba(255, 255, 255, 0.247); + --g-selectedTextColor: rgba(255, 255, 255, 1); + --g-textBackgroundColor: rgba(30, 30, 30, 1); + --g-selectedTextBackgroundColor: rgba(63, 99, 139, 1); + --g-keyboardFocusIndicatorColor: rgba(26, 169, 255, 0.298); + --g-unemphasizedSelectedTextColor: rgba(255, 255, 255, 1); + --g-unemphasizedSelectedTextBackgroundColor: rgba(70, 70, 70, 1); + --g-alternatingContentBackgroundColorsEven: rgba(30, 30, 30, 1); + --g-alternatingContentBackgroundColorsOdd: rgba(255, 255, 255, 0.047); + --g-linkColor: rgba(65, 156, 255, 1); + --g-separatorColor: rgba(255, 255, 255, 0.098); + --g-selectedContentBackgroundColor: rgba(0, 88, 208, 1); + --g-selectedContentBackgroundColor--h: 215; + --g-selectedContentBackgroundColor--s: 100%; + --g-selectedContentBackgroundColor--l: 41%; + --g-unemphasizedSelectedContentBackgroundColor: rgba(70, 70, 70, 1); + --g-selectedMenuItemTextColor: rgba(255, 255, 255, 1); + --g-gridColor: rgba(26, 26, 26, 1); + --g-headerTextColor: rgba(255, 255, 255, 1); + --g-controlAccentColor--h: 211; + --g-controlAccentColor--s: 100%; + --g-controlAccentColor--l: 50%; + --g-controlAccentColor--hsl: var(--g-controlAccentColor--h), var(--g-controlAccentColor--s), var(--g-controlAccentColor--l); + --g-controlAccentColor: hsla(var(--g-controlAccentColor--hsl), 1); + --g-controlColor: rgba(255, 255, 255, 0.247); + --g-controlColor--rgb: 255, 255, 255; + --g-controlColor--hsl: 0, 0%, 100%; + --g-controlBackgroundColor: rgba(30, 30, 30, 1); + --g-controlTextColor: rgba(255, 255, 255, 0.847); + --g-disabledControlTextColor: rgba(255, 255, 255, 0.247); + --g-scrubberTexturedBackground: rgba(255, 255, 255, 1); + --g-selectedControlColor: rgba(63, 99, 139, 1); + --g-selectedControlTextColor: rgba(255, 255, 255, 0.847); + --g-alternateSelectedControlTextColor: rgba(255, 255, 255, 1); + --g-alternateSelectedControlTextColor--rgb: 255, 255, 255; + --g-windowBackgroundColor: rgba(50, 50, 50, 1); + --g-windowFrameTextColor: rgba(255, 255, 255, 0.847); + --g-underPageBackgroundColor: rgba(40, 40, 40, 1); + --g-underPageBackgroundColor--rgb: 40, 40, 40; + --g-findHighlightColor: rgba(255, 255, 0, 1); + --g-highlightColor: rgba(180, 180, 180, 1); + --g-highlightColor--rgb: 180, 180, 180; + --g-shadowColor: rgba(0, 0, 0, 1); + --g-shadowColor--rgb: 0, 0, 0; + } +} + +:root { + /* --g-icon-folder: "􀈕"; */ + --g-icon-folder: ""; + --g-icon-tag: ""; + --g-icon-arrow-triangle-2-circlepath: ""; + --g-icon-bold: ""; + --g-icon-italic: ""; + --g-icon-highlighter: "􀦇"; + --g-icon-strikethrough: ""; + --g-icon-textformat-abc-dottedunderline: ""; + --g-icon-alarm: ""; + --g-icon-square-split-2x1: ""; + --g-icon-info-circle: ""; + --g-icon-chevron-backward: ""; + --g-icon-chevron-forward: ""; + --g-icon-chevron-down: ""; + --g-icon-chevron-up-chevron-down: ""; + --g-icon-arrow-up-forward-app: ""; + --g-icon-arrow-up-right-square-fill: "􀄕"; + --g-icon-ellipsis: ""; + --g-icon-link: ""; + --g-icon-chevron-left-slash-chevron-right: ""; + --g-icon-curlybraces: ""; + --g-icon-paperclip: ""; + --g-icon-list-bullet: ""; + --g-icon-list-number: ""; + --g-icon-text-badge-checkmark: ""; + --g-icon-minus: ""; + --g-icon-text-quote: ""; + --g-icon-tablecells-badge-ellipsis: "􀏥"; + --g-icon-clock: ""; + --g-icon-calendar-badge-clock: ""; + --g-icon-doc-richtext: ""; + --g-icon-square-and-pencil: ""; + --g-icon-doc-on-clipboard: ""; + --g-icon-square-and-arrow-down: "􀈄"; + --g-icon-xmark-circle-fill: ""; + --g-icon-xmark: ""; + /* --g-icon-xmark-circle-fill: "􀁡"; */ + /* --g-icon-xmark: "􀆄"; */ + + --text: #32373f; + --code: #383a42; + --link: #4286f4; +} + +.fa-caret-right::before { + content: "􀆊"; +} + +.fa-caret-down::before { + content: "􀆈"; +} + +.fa-plus::before { + content: "􀁌"; +} + +/* 1rem = 10px */ +html { + font-size: calc(62.5 * (var(--u-base-font-size, 100%) / 100)); +} + +html, +body { + background: var(--g-primary-Background) !important; +} + +body { + font-family: var(--g-font-family-system); + /* set default font-size back to 16px */ + font-size: 1.6rem; +} +body div, +body span, +body a, +body input, +body button { + color: var(--g-primary-Color); + font-family: var(--g-font-family-system); +} +body a { + cursor: default; +} + +#react-root > div > div { + background: transparent !important; +} + +*[style*=Roboto] { + font-family: var(--g-font-family-system) !important; +} + +*[style*="color:"] { + color: inherit !important; +} + +.rli-editor .tox .tox-edit-area__iframe, +.rli-editor .tox .tox-toolbar, +.rli-editor .tox .tox-toolbar__overflow, +.rli-editor .tox .tox-toolbar__primary, +.rli-editor .tox-editor-header .tox-toolbar__primary, +.rli-editor .tox .tox-toolbar-overlord, +.rli-editor .tox.tox-tinymce-aux .tox-toolbar__overflow, +.rli-editor .tox .tox-statusbar, +.rli-editor .tox .tox-dialog__header, +.rli-editor .tox .tox-dialog, +.rli-editor .tox textarea, +.rli-editor .tox input, +.rli-editor .tox .tox-dialog__footer, +.rli-editor *[style*=background] { + background-color: transparent !important; +} +.rli-editor > div > div { + background-color: transparent !important; +} +.rli-editor > div > div > div > div:first-child .title-input { + color: var(--g-headerTextColor) !important; + margin: 0.5rem 1rem 0; + padding-top: 1.4rem !important; + font-weight: 700 !important; + font-size: 2rem !important; +} +.rli-editor > div > div > div > div:first-child .updated-time-label { + color: var(--g-secondaryLabelColor) !important; + font-family: var(--g-font-family-system) !important; + font-size: 1.1rem; + margin-top: 0.3rem; + margin-right: 1rem; +} +.rli-editor > div > div > div > div:first-child .editor-toolbar div:nth-child(2) a { + color: var(--g-secondaryLabelColor); + margin: 0 0.2rem; + font-family: var(--g-font-family-system); + line-height: 1; +} +.rli-editor > div > div > div > div:first-child .editor-toolbar div:nth-child(2) a > * { + display: none; +} +.rli-editor > div > div > div > div:first-child .editor-toolbar div:nth-child(2) a:hover { + background: var(--g-quaternaryLabelColor); +} +.rli-editor > div > div > div > div:first-child .editor-toolbar div:nth-child(2) a:nth-child(1) { + font-size: 0; + overflow: hidden; + width: 2.6rem; +} +.rli-editor > div > div > div > div:first-child .editor-toolbar div:nth-child(2) a:nth-child(1) i { + display: block; + color: var(--g-secondaryLabelColor); + margin: 0.2rem 0.2rem 0; + font-family: var(--g-font-family-system); + line-height: 1; + font-size: 1.4rem; + font-weight: 400; +} +.rli-editor > div > div > div > div:first-child .editor-toolbar div:nth-child(2) a:nth-child(1) i::before { + content: var(--g-icon-textformat-abc-dottedunderline); + text-transform: uppercase; +} +.rli-editor > div > div > div > div:first-child .editor-toolbar div:nth-child(2) a:nth-child(1) i[title]:not([title=""])::before { + content: attr(title); + font-family: var(--g-font-family-system-rounded); + font-size: 1.4rem !important; + font-weight: 400; + line-height: 2.6rem; + letter-spacing: -0.05rem; + margin-top: 0; +} +.rli-editor > div > div > div > div:first-child .editor-toolbar div:nth-child(2) a:nth-child(2):before { + content: var(--g-icon-alarm); +} +.rli-editor > div > div > div > div:first-child .editor-toolbar div:nth-child(2) a:nth-child(3).disabled { + display: none; +} +.rli-editor > div > div > div > div:first-child .editor-toolbar div:nth-child(2) a:nth-child(3):before { + content: var(--g-icon-square-split-2x1); +} +.rli-editor > div > div > div > div:first-child .editor-toolbar div:nth-child(2) a:nth-child(4):before { + content: var(--g-icon-info-circle); +} +.rli-editor > div > div > div > div .tox-tbtn--enabled { + background-color: var(--g-quaternaryLabelColor); +} +.rli-editor > div > div > div > div .tox-tbtn { + display: flex; + align-items: center; + margin: 0 0.25rem; + line-height: 1; + padding: 0 !important; + height: 2.6rem; + width: 2.6rem !important; + min-width: 2.6rem !important; + line-height: 2.6rem !important; + border-radius: 0.5rem; +} +.rli-editor > div > div > div > div .tox-tbtn:focus, .rli-editor > div > div > div > div .tox-tbtn:hover { + background: var(--g-quaternaryLabelColor) !important; +} +.rli-editor > div > div > div > div .tox-tbtn * { + display: none !important; +} +.rli-editor > div > div > div > div .tox-tbtn::after { + font-family: var(--g-font-family-icon-font); + font-size: var(--g-font-size-1) !important; + font-weight: normal !important; + -webkit-font-smoothing: antialiased; + color: var(--g-secondaryLabelColor); + vertical-align: bottom; + color: var(--g-secondaryLabelColor); + width: 2.6rem; +} +.rli-editor > div > div > div > div .tox-tbtn.markdown-active::after { + content: "MD"; + font-family: var(--g-font-family-system-rounded); + font-size: 1.2rem !important; + line-height: 2.6rem; + font-weight: 500 !important; +} +.rli-editor > div > div > div > div .tox-tbtn.richText-active::after { + content: "􀲱"; +} +.rli-editor > div > div > div > div:nth-child(2)[style*=padding-top] { + padding: 0 !important; +} +.rli-editor > div > div > div > div:nth-child(2)[style*=padding-top] button { + align-items: baseline; + background: transparent; + color: red !important; + font-size: 1.3rem; + margin-bottom: 0.4rem; + margin-left: 1.6rem; + min-width: 0 !important; + padding: 0; +} +.rli-editor > div > div > div > div:nth-child(2)[style*=padding-top] button span { + color: var(--g-textColor); +} +.rli-editor > div > div > div > div:nth-child(2)[style*=padding-top] button .icon-notebooks::before { + content: var(--g-icon-folder); + color: var(--s-accentColor); + font-family: var(--g-font-family-system); + font-size: 1.3rem; + font-weight: 400; +} +.rli-editor .joplin-tinymce > div, +.rli-editor .editor-toolbar, +.rli-editor .tox .tox-toolbar__group, +.rli-editor .tox .tox-toolbar__primary { + background-color: transparent !important; +} +.rli-editor .joplin-tinymce > div:first-child { + padding-top: 0.4rem !important; + margin-top: 0.2rem; +} +.rli-editor .joplin-tinymce > div:first-child, +.rli-editor .editor-toolbar > div:first-child { + margin-left: -0.6rem; +} +.rli-editor .joplin-tinymce > div:first-child > a, +.rli-editor .editor-toolbar > div:first-child > a { + display: flex; + align-items: center; + margin: 0 0.25rem; + line-height: 1; + padding: 0 !important; + height: 2.6rem; + width: 2.6rem !important; + min-width: 2.6rem !important; + line-height: 2.6rem !important; + border-radius: 0.5rem; + display: flex; + align-items: center; + justify-content: center; +} +.rli-editor .joplin-tinymce > div:first-child > a:focus, .rli-editor .joplin-tinymce > div:first-child > a:hover, +.rli-editor .editor-toolbar > div:first-child > a:focus, +.rli-editor .editor-toolbar > div:first-child > a:hover { + background: var(--g-quaternaryLabelColor) !important; +} +.rli-editor .joplin-tinymce > div:first-child > a span, +.rli-editor .editor-toolbar > div:first-child > a span { + display: block; + font-size: 1.4rem; +} +.rli-editor .joplin-tinymce > div:first-child > a span:before, +.rli-editor .editor-toolbar > div:first-child > a span:before { + font-family: "NotoMono Nerd Font"; + font-size: var(--g-font-size-1) !important; + font-weight: normal !important; + -webkit-font-smoothing: antialiased; + color: var(--g-secondaryLabelColor); + vertical-align: bottom; +} +.rli-editor .joplin-tinymce > div:first-child > a:nth-of-type(1) span:before, +.rli-editor .editor-toolbar > div:first-child > a:nth-of-type(1) span:before { + content: var(--g-icon-chevron-backward); +} +.rli-editor .joplin-tinymce > div:first-child > a:nth-of-type(2) span:before, +.rli-editor .editor-toolbar > div:first-child > a:nth-of-type(2) span:before { + content: var(--g-icon-chevron-forward); +} +.rli-editor .joplin-tinymce > div:first-child > a:nth-of-type(3):nth-of-type(3), +.rli-editor .editor-toolbar > div:first-child > a:nth-of-type(3):nth-of-type(3) { + min-width: 2.6rem !important; + font-size: 0 !important; +} +.rli-editor .joplin-tinymce > div:first-child > a:nth-of-type(3):nth-of-type(3) span, +.rli-editor .editor-toolbar > div:first-child > a:nth-of-type(3):nth-of-type(3) span { + margin-right: 0 !important; +} +.rli-editor .joplin-tinymce > div:first-child > a:nth-of-type(3):nth-of-type(3) span[title]:not([title=""])::before, +.rli-editor .editor-toolbar > div:first-child > a:nth-of-type(3):nth-of-type(3) span[title]:not([title=""])::before { + color: var(--s-accentColor) !important; + content: var(--g-icon-arrow-up-right-square-fill); +} +.rli-editor .joplin-tinymce > div:first-child > a:nth-of-type(3):nth-of-type(3) span::before, +.rli-editor .editor-toolbar > div:first-child > a:nth-of-type(3):nth-of-type(3) span::before { + content: var(--g-icon-arrow-up-forward-app); +} +.rli-editor .tox-toolbar__group { + padding-left: 0; + padding-right: 0; + padding-left: 0 !important; + padding-right: 0 !important; +} +.rli-editor .tox-toolbar__group::before { + content: ""; + background-color: var(--g-separatorColor); + height: 100%; + width: 0.1rem; + margin: 0 0.65rem; +} +.rli-editor .tox-toolbar__group button, +.rli-editor .tox-toolbar__group button[aria-haspopup=true] { + display: flex; + align-items: center; + margin: 0 0.25rem; + line-height: 1; + padding: 0 !important; + height: 2.6rem; + width: 2.6rem !important; + min-width: 2.6rem !important; + line-height: 2.6rem !important; + border-radius: 0.5rem; +} +.rli-editor .tox-toolbar__group button:focus, .rli-editor .tox-toolbar__group button:hover, +.rli-editor .tox-toolbar__group button[aria-haspopup=true]:focus, +.rli-editor .tox-toolbar__group button[aria-haspopup=true]:hover { + background: var(--g-quaternaryLabelColor) !important; +} +.rli-editor .tox-toolbar__group button:before, +.rli-editor .tox-toolbar__group button[aria-haspopup=true]:before { + font-family: "NotoMono Nerd Font"; + font-size: var(--g-font-size-1) !important; + font-weight: normal !important; + -webkit-font-smoothing: antialiased; + color: var(--g-secondaryLabelColor); + vertical-align: bottom; +} +.rli-editor .tox-toolbar__group svg { + display: none !important; +} +.rli-editor .tox-toolbar__group:nth-child(1) button:nth-child(1):before { + content: var(--g-icon-bold); +} +.rli-editor .tox-toolbar__group:nth-child(1) button:nth-child(2):before { + content: var(--g-icon-italic); +} +.rli-editor .tox-toolbar__group:nth-child(1) button:nth-child(3):before { + content: var(--g-icon-highlighter); +} +.rli-editor .tox-toolbar__group:nth-child(1) button:nth-child(4):before { + content: var(--g-icon-strikethrough); +} +.rli-editor .tox-toolbar__group:nth-child(1) button:nth-child(5) { + width: 2.6rem !important; + min-width: 0; +} +.rli-editor .tox-toolbar__group:nth-child(1) button:nth-child(5):before { + content: var(--g-icon-ellipsis); +} +.rli-editor .tox-toolbar__group:nth-child(2) button:nth-child(1):before { + content: var(--g-icon-link); +} +.rli-editor .tox-toolbar__group:nth-child(2) button:nth-child(2):before { + content: var(--g-icon-chevron-left-slash-chevron-right); +} +.rli-editor .tox-toolbar__group:nth-child(2) button:nth-child(3):before { + content: var(--g-icon-curlybraces); +} +.rli-editor .tox-toolbar__group:nth-child(2) button:nth-child(4):before { + content: var(--g-icon-paperclip); +} +.rli-editor .tox-toolbar__group:nth-child(3) button:nth-child(1):before { + content: var(--g-icon-list-bullet); +} +.rli-editor .tox-toolbar__group:nth-child(3) button:nth-child(2):before { + content: var(--g-icon-list-number); +} +.rli-editor .tox-toolbar__group:nth-child(3) button:nth-child(3):before { + content: var(--g-icon-text-badge-checkmark); +} +.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(1):before, +.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(2):before, +.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(3):before { + font-family: var(--g-font-family-system); +} +.rli-editor .tox-toolbar__group:nth-child(4) .tox-tbtn__select-label { + display: none; +} +.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(1):before, +.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(2):before, +.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(3):before { + font-family: var(--g-font-family-system-rounded); +} +.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(1):before { + content: "H1"; +} +.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(2):before { + content: "H2"; +} +.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(3):before { + content: "H3"; +} +.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(4):before { + content: var(--g-icon-minus); +} +.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(5):before { + content: var(--g-icon-text-quote); +} +.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(6):before { + content: var(--g-icon-tablecells-badge-ellipsis); +} +.rli-editor .tox-toolbar__group:nth-child(4) button:nth-child(7):before { + content: var(--g-icon-clock); +} +.rli-editor .tox-editor-header { + margin-left: 0px; + padding-left: 9.35rem; + padding-right: 6rem; +} +.rli-editor .tox-editor-header:after { + content: ""; + background-color: var(--g-separatorColor); + height: 0.1rem; + position: absolute; + left: -1.4rem; + right: -1.4rem; +} +.rli-editor .tox-tinymce { + overflow: unset; +} +.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar:after { + content: ""; + background-color: var(--g-separatorColor); + height: 0.1rem; + position: absolute; + left: -1.4rem; + right: -1.4rem; + bottom: 0; +} +.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar div > span { + padding-left: 0 !important; + padding-right: 0 !important; +} +.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar div > span::before { + content: ""; + background-color: var(--g-separatorColor); + height: 100%; + width: 0.1rem; + margin: 0 0.65rem; +} +.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button { + display: flex; + align-items: center; + margin: 0 0.25rem; + line-height: 1; + padding: 0 !important; + height: 2.6rem; + width: 2.6rem !important; + min-width: 2.6rem !important; + line-height: 2.6rem !important; + border-radius: 0.5rem; +} +.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button:focus, .rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button:hover { + background: var(--g-quaternaryLabelColor) !important; +} +.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button span { + font-size: 0; +} +.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button span::before, +.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button i::before { + font-family: "NotoMono Nerd Font"; + font-size: var(--g-font-size-1) !important; + font-weight: normal !important; + -webkit-font-smoothing: antialiased; + color: var(--g-secondaryLabelColor); + vertical-align: bottom; +} +.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-bold::before { + content: var(--g-icon-bold); +} +.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-italic::before { + content: var(--g-icon-italic); +} +.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-link::before { + content: var(--g-icon-link); +} +.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-code::before { + content: var(--g-icon-chevron-left-slash-chevron-right); +} +.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-attachment::before { + content: var(--g-icon-paperclip); +} +.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-bulleted-list::before { + content: var(--g-icon-list-bullet); +} +.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-numbered-list::before { + content: var(--g-icon-list-number); +} +.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-to-do-list::before { + content: var(--g-icon-text-badge-checkmark); +} +.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-heading::before { + content: "H2"; + font-family: var(--g-font-family-system-rounded); +} +.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .fa-ellipsis-h::before { + content: var(--g-icon-minus); +} +.rli-editor > div > div > div > div:not(:first-child) .editor-toolbar a.button .icon-add-date::before { + content: var(--g-icon-calendar-badge-clock); +} + +.tox .tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow { + background: var(--g-windowBackgroundColor) !important; + box-shadow: 0 0 1px rgba(var(--g-shadowColor--rgb), 0.4), 0 2px 8px rgba(var(--g-shadowColor--rgb), 0.2) !important; + max-width: none !important; + padding: 0.5rem !important; + border-color: transparent !important; +} +.tox .tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group { + align-items: flex-start; + display: flex; + flex-direction: column; + justify-content: stretch; + padding: 0; +} +.tox .tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group:focus-within:hover button:focus:not(:hover) { + background-color: transparent !important; + border-radius: 0.4rem; + color: var(--g-controlTextColor) !important; + line-height: 1; + min-height: 2.2rem; + height: 2.2rem; + padding: 0 1rem !important; + font-size: 1.3rem !important; +} +.tox .tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group:focus-within:hover button:focus:not(:hover) * { + font-size: 1.3rem !important; +} +.tox .tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group:focus-within:hover button:focus:not(:hover) svg { + fill: var(--g-controlTextColor) !important; +} +.tox .tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group button { + background-color: transparent !important; + border-radius: 0.4rem; + color: var(--g-controlTextColor) !important; + line-height: 1; + min-height: 2.2rem; + height: 2.2rem; + padding: 0 1rem !important; + font-size: 1.3rem !important; + justify-content: flex-start; + flex: 1; + text-align: left; + width: calc(100% - 2rem); +} +.tox .tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group button * { + font-size: 1.3rem !important; +} +.tox .tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group button svg { + fill: var(--g-controlTextColor) !important; +} +.tox .tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group button:focus, .tox .tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group button:hover { + background: var(--s-accentColor) !important; + color: #fff !important; +} +.tox .tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group button:focus svg, .tox .tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group button:hover svg { + fill: #fff !important; +} +.tox .tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group button:after { + color: inherit; + content: attr(aria-label); + text-align: left; +} +.tox .tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow.tox-toolbar__overflow .tox-toolbar__group span { + display: none; +} + +.tox-menu { + background: var(--g-windowBackgroundColor) !important; + box-shadow: 0 0 1px rgba(var(--g-shadowColor--rgb), 0.4), 0 2px 8px rgba(var(--g-shadowColor--rgb), 0.2) !important; + max-width: none !important; + padding: 0.5rem !important; + border-color: transparent !important; +} +.tox-menu .tox-collection__group { + border: none !important; + padding: 0 !important; +} +.tox-menu .tox-collection__group + *:before { + content: ""; + display: block; + height: 0.1rem; + margin: 0.5rem 0.8rem !important; + background-color: var(--g-separatorColor); +} +.tox-menu .tox-collection:focus-within:hover__item:focus:not(:hover) { + background-color: transparent !important; + border-radius: 0.4rem; + color: var(--g-controlTextColor) !important; + line-height: 1; + min-height: 2.2rem; + height: 2.2rem; + padding: 0 1rem !important; + font-size: 1.3rem !important; +} +.tox-menu .tox-collection:focus-within:hover__item:focus:not(:hover) * { + font-size: 1.3rem !important; +} +.tox-menu .tox-collection:focus-within:hover__item:focus:not(:hover) svg { + fill: var(--g-controlTextColor) !important; +} +.tox-menu .tox-collection__item { + background-color: transparent !important; + border-radius: 0.4rem; + color: var(--g-controlTextColor) !important; + line-height: 1; + min-height: 2.2rem; + height: 2.2rem; + padding: 0 1rem !important; + font-size: 1.3rem !important; +} +.tox-menu .tox-collection__item * { + font-size: 1.3rem !important; +} +.tox-menu .tox-collection__item svg { + fill: var(--g-controlTextColor) !important; +} +.tox-menu .tox-collection__item:focus, .tox-menu .tox-collection__item:hover { + background: var(--s-accentColor) !important; + color: #fff !important; +} +.tox-menu .tox-collection__item:focus svg, .tox-menu .tox-collection__item:hover svg { + fill: #fff !important; +} +.tox-menu .tox-collection__item-icon { + display: none !important; +} +.tox-menu .tox-collection__item-label { + font-size: inherit; + margin-left: 0 !important; +} + +.tox-insert-table-picker { + color: var(--g-textColor) !important; +} +.tox-insert-table-picker > div { + background: var(--g-windowBackgroundColor) !important; + border-color: var(--g-separatorColor) !important; +} +.tox-insert-table-picker > div.tox-insert-table-picker__selected { + background-color: var(--s-accentColor) !important; +} +.tox-insert-table-picker .tox-insert-table-picker__label { + background: var(--g-windowBackgroundColor) !important; + color: inherit !important; +} + +.rli-editor > div > div > div > div:last-child > div { + position: relative; +} +.rli-editor > div > div > div > div:last-child a.button { + padding: 0 !important; + width: 1.8rem; +} +.rli-editor > div > div > div > div:last-child a.button:hover { + background-color: transparent !important; +} +.rli-editor > div > div > div > div:last-child div > span { + color: var(--g-secondaryLabelColor) !important; +} +.rli-editor > div > div > div > div:last-child div > span::after { + content: ""; + position: absolute; + left: 0; + right: 0; + height: 100%; +} +.rli-editor > div > div > div > div:last-child .icon-tags { + font-family: "NotoMono Nerd Font"; + font-size: var(--g-font-size-1) !important; + font-weight: normal !important; + -webkit-font-smoothing: antialiased; + color: var(--g-secondaryLabelColor); + vertical-align: bottom; + height: 1.8rem; +} +.rli-editor > div > div > div > div:last-child .icon-tags::before { + font-family: "NotoMono Nerd Font"; + content: var(--g-icon-tag) !important; +} +.rli-editor > div > div > div > div:last-child .tag-list span { + background-color: var(--g-gridColor) !important; + border-radius: 0.2rem !important; + color: var(--g-textColor) !important; + font-size: 1.1rem !important; + line-height: 1.4rem !important; + margin-right: 0.4rem !important; + padding: 0 0.4rem !important; +} +.rli-editor > div > div > div > div:last-child .tag-list span:last-child { + margin-right: 0.8rem !important; +} + +.rli-noteList { + --notelist--Background: var(--g-primary-Background); + --notelist--item--Line-height: 3.6rem; +} +.rli-noteList > div:first-child { + border-right: 1px solid var(--g-gridColor); +} +.rli-noteList > div > div { + background-color: var(--notelist--Background); +} +.rli-noteList > div > div > div:first-child { + background-color: transparent; + height: auto; + width: 100%; +} +.rli-noteList > div > div div:nth-child(2) > div { + background-color: transparent !important; +} +.rli-noteList .search-bar input[type=text] { + box-shadow: 0 0 0 16px hsla(var(--g-controlAccentColor--hsl), 0); + border: 1px solid var(--g-separatorColor); + background: var(--g-controlBackgroundColor); + border-radius: 0.6rem; + color: var(--g-controlTextColor); + font-size: 1.3rem; + height: 2.8rem; + max-height: none; + padding: 0 2.5rem 0 3rem !important; + width: 100%; + flex: 1 0 100%; +} +.rli-noteList .search-bar input[type=text]:focus { + transition: 0.25s box-shadow cubic-bezier(0.61, 1, 0.88, 1); + transition-delay: 0.125s; + box-shadow: 0 0 0 0.35rem hsla(var(--g-controlAccentColor--hsl), 0.5); +} +.rli-noteList .search-bar input[type=text]::placeholder { + color: var(--g-tertiaryLabelColor); +} +.rli-noteList .search-bar input[type=text] + button { + flex: 0; + position: unset; + padding: 0; + right: auto; + top: 1px; +} +.rli-noteList .search-bar input[type=text] + button span::before { + position: absolute; + left: 0; + content: "" !important; + color: var(--g-secondaryLabelColor); + font-size: 1.6rem; + font-family: var(--g-font-family-system); + font-weight: normal !important; + top: 0.5rem; + left: 0.8rem; + pointer-events: none; +} +.rli-noteList .search-bar .fa-times { + font-size: 13px; + font-weight: normal; +} +.rli-noteList .search-bar .fa-times::after { + color: var(--g-secondaryLabelColor); + content: var(--g-icon-xmark-circle-fill); + display: block; + font-family: var(--g-font-family-system) !important; + position: absolute; + right: 0.7rem; + top: 0.7rem; +} +.rli-noteList .search-bar + div { + position: relative; + overflow: hidden; + width: auto; + max-height: 2.8rem; + flex: 1 0 auto; +} +.rli-noteList .search-bar + div button { + background: none; + border-radius: 0.6rem; + margin-left: 0.6rem; + max-height: none; + max-width: none; + height: 2.6rem; + width: 2.6rem; +} +.rli-noteList .search-bar + div button + button { + margin-left: 0.1rem; +} +.rli-noteList .search-bar + div button:focus, .rli-noteList .search-bar + div button:hover { + background: var(--g-quaternaryLabelColor); +} +.rli-noteList .search-bar + div button span:before { + color: var(--g-secondaryLabelColor); + display: block; + font-family: var(--g-font-family-system); + font-size: var(--g-font-size-2); + font-weight: 500; + -webkit-font-smoothing: antialiased; + transform: translateY(0.05rem); +} +.rli-noteList .search-bar + div button.new-todo-button span:before { + content: ""; +} +.rli-noteList .search-bar + div button.new-note-button span:before { + content: ""; +} +.rli-noteList .note-list { + padding: 0 1rem 1rem; +} +.rli-noteList .note-list > div:last-child:empty { + height: 0.1rem !important; + background: var(--notelist--Background); + position: absolute; + margin-top: -0.1rem; + left: 0; + right: 0; +} +.rli-noteList .todo-list-item, +.rli-noteList .note-list-item { + border-radius: 0.4rem; + height: auto; + line-height: var(--notelist--item--Line-height); +} +.rli-noteList .todo-list-item.odd::before, .rli-noteList .todo-list-item.even::before, +.rli-noteList .note-list-item.odd::before, +.rli-noteList .note-list-item.even::before { + content: var(--u-note-list-dividers, ""); +} +.rli-noteList .todo-list-item.odd, +.rli-noteList .note-list-item.odd { + background: var(--u-note-list-zebra-color-odd, var(--g-alternatingContentBackgroundColorsOdd)); +} +.rli-noteList .todo-list-item.even, +.rli-noteList .note-list-item.even { + background: var(--u-note-list-zebra-color-even, var(--g-alternatingContentBackgroundColorsEven)); +} +.rli-noteList .todo-list-item a, +.rli-noteList .note-list-item a { + padding: 0 1rem !important; + font-size: 1.2rem !important; + color: var(--g-labelColor) !important; +} +.rli-noteList .todo-list-item .fa-share-square, +.rli-noteList .note-list-item .fa-share-square { + order: 1; + margin-left: auto; +} +.rli-noteList .todo-list-item .fa-share-square::before, +.rli-noteList .note-list-item .fa-share-square::before { + content: var(--g-icon-arrow-up-right-square-fill); + color: var(--s-accentColor); + font-weight: 400; + font-family: var(--g-font-family-system); +} +.rli-noteList .todo-list-item mark, +.rli-noteList .note-list-item mark { + background: var(--g-systemYellow); + color: var(--g-shadowColor) !important; + border-radius: 0.2rem; +} +.rli-noteList .todo-list-item.selected, +.rli-noteList .note-list-item.selected { + background: var(--s-accentColor--selected) !important; +} +.rli-noteList .todo-list-item.selected a, +.rli-noteList .todo-list-item.selected span, +.rli-noteList .note-list-item.selected a, +.rli-noteList .note-list-item.selected span { + color: var(--g-alternateSelectedControlTextColor) !important; +} +.rli-noteList .todo-list-item.selected mark, +.rli-noteList .note-list-item.selected mark { + background: var(--g-systemYellow); + color: var(--g-shadowColor) !important; +} +.rli-noteList .todo-list-item.selected:before, +.rli-noteList .note-list-item.selected:before { + top: -2px; + bottom: auto; + border-color: var(--notelist--Background); +} +.rli-noteList .todo-list-item.selected .fa-share-square::before, +.rli-noteList .note-list-item.selected .fa-share-square::before { + color: var(--g-alternateSelectedControlTextColor); +} +.rli-noteList .todo-list-item.selected + .selected, +.rli-noteList .note-list-item.selected + .selected { + border-top-left-radius: 0; + border-top-right-radius: 0; + margin-top: -0.4rem; + padding-top: 0.4rem; +} +.rli-noteList .todo-list-item.selected + .selected:before, +.rli-noteList .note-list-item.selected + .selected:before { + border-color: transparent; +} +.rli-noteList .todo-list-item.selected + .selected:after, +.rli-noteList .note-list-item.selected + .selected:after { + content: ""; + background-color: var(--g-separatorColor); + position: absolute; + height: 0.1rem; + top: 0.4rem; + left: 1rem; + right: 1rem; +} +.rli-noteList .todo-list-item.selected:first-of-type, +.rli-noteList .note-list-item.selected:first-of-type { + border-top-left-radius: 0.4rem; + border-top-right-radius: 0.4rem; +} +.rli-noteList .todo-list-item.selected:last-of-type, +.rli-noteList .note-list-item.selected:last-of-type { + border-bottom-right-radius: 0.4rem; + border-bottom-right-radius: 0.4rem; +} +.rli-noteList .todo-list-item::before, +.rli-noteList .note-list-item::before { + border-color: var(--g-separatorColor); + left: 10px; + right: 0px; + width: auto; +} +.rli-noteList .todo-list-item > a > span, +.rli-noteList .note-list-item > a > span { + overflow: hidden; + text-overflow: ellipsis; + color: inherit; +} +.rli-noteList .todo-list-item > div { + padding-left: 1rem !important; +} +.rli-noteList .todo-list-item input { + border: 0.1rem solid var(--g-tertiaryLabelColor); + margin: 0 -0.3rem -0.2rem 0 !important; + border-radius: 50%; + appearance: none; + height: 1.5rem; + width: 1.5rem; + position: relative; +} +.rli-noteList .todo-list-item input:checked { + background-color: var(--s-controlAccentColor); + border-color: transparent; +} +.rli-noteList .todo-list-item input:checked:after { + position: absolute; + content: "􀆅"; + color: var(--g-alternateSelectedControlTextColor); + left: 0.15rem; + top: 0.1rem; + font-size: 0.9rem; +} +.rli-noteList .todo-list-item.selected input { + border-color: hsla(var(--g-controlColor--hsl), 0.5); +} +.rli-noteList .todo-list-item.selected input:checked { + border-color: transparent; + background-color: rgba(var(--g-alternateSelectedControlTextColor--rgb), 0.898); +} +.rli-noteList .todo-list-item.selected input:checked:after { + color: var(--s-accentColor); +} +.rli-noteList > div > div > div:last-child { + background-color: transparent !important; +} +.rli-noteList > div > div > div:last-child { + border-right: none; +} + +.modal-layer { + background: rgba(var(--g-underPageBackgroundColor--rgb), 0.5) !important; + height: 100% !important; +} + +.modal-dialog { + backdrop-filter: blur(10px) saturate(100%) contrast(45%) brightness(130%); + background-color: var(--g-windowBackgroundColor) !important; + padding: 2rem !important; + border-radius: 1.2rem !important; + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.8), 0px 0px 20px rgba(0, 0, 0, 0.15), 0px 25px 30px rgba(0, 0, 0, 0.35) !important; +} +.modal-dialog > div:first-child input[type=text], +.modal-dialog .datetime-picker input[type=text] { + border: none !important; + background-color: var(--g-controlBackgroundColor) !important; + border-radius: 0.5rem; + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 0px 1px rgba(0, 0, 0, 0.15), 0 0 0 16px hsla(var(--s-controlAccentColor--hsl), 0) !important; + height: 2rem; + padding-left: 1rem; +} +.modal-dialog > div:first-child input[type=text]:focus-within, .modal-dialog > div:first-child input[type=text]:focus, +.modal-dialog .datetime-picker input[type=text]:focus-within, +.modal-dialog .datetime-picker input[type=text]:focus { + transition: 0.25s box-shadow cubic-bezier(0.61, 1, 0.88, 1); + transition-delay: 0.125s; + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 0px 1px rgba(0, 0, 0, 0.15), 0 0 0 0.35rem hsla(var(--s-controlAccentColor--hsl), 0.5) !important; +} +.modal-dialog input[type=text] { + border: none !important; + background-color: var(--g-controlBackgroundColor) !important; + border-radius: 0.5rem; + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 0px 1px rgba(0, 0, 0, 0.15), 0 0 0 16px hsla(var(--s-controlAccentColor--hsl), 0) !important; + height: 2rem; + padding-left: 1rem; +} +.modal-dialog input[type=text]:focus-within, .modal-dialog input[type=text]:focus { + transition: 0.25s box-shadow cubic-bezier(0.61, 1, 0.88, 1); + transition-delay: 0.125s; + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 0px 1px rgba(0, 0, 0, 0.15), 0 0 0 0.35rem hsla(var(--s-controlAccentColor--hsl), 0.5) !important; +} +.modal-dialog input + a { + font-size: 1.5rem; + right: 2.7rem; + position: absolute; +} +.modal-dialog input + a .fa-question-circle::before { + content: "" !important; + color: var(--g-secondaryLabelColor) !important; + font-family: var(--g-font-family-system) !important; + font-weight: 400; + -webkit-font-smoothing: antialiased; +} +.modal-dialog label + div[style] { + background: none !important; +} +.modal-dialog button { + color: var(--g-controlTextColor) !important; + border: none !important; + border-radius: 0.5rem !important; + box-shadow: 0px 0px 1px rgba(var(--g-shadowColor--rgb), 0.3), 0px 1px 1.5px rgba(var(--g-shadowColor--rgb), 0.15); + background-color: var(--g-controlColor) !important; + cursor: default !important; + margin: revert !important; + height: 1.9rem !important; + line-height: 1.9rem !important; + min-width: 7.2rem !important; + min-height: 0 !important; + font-size: 1.4rem !important; + font-weight: 400 !important; + padding: 0 2rem !important; + text-decoration: none !important; +} +.modal-dialog button:active { + color: rgba(255, 255, 255, 0.75) !important; + background-image: linear-gradient(hsl(var(--s-accentColor--h), var(--s-accentColor--s), calc(var(--s-accentColor--l) - 5%)), hsl(var(--s-accentColor--h), var(--s-accentColor--s), calc(var(--s-accentColor--l) - 10%))); +} +.modal-dialog button + button { + margin-left: 7px; +} +.modal-dialog button:nth-child(1) { + color: var(--g-controlTextColor) !important; + border: none !important; + border-radius: 0.5rem !important; + box-shadow: 0px 0px 1px rgba(var(--g-shadowColor--rgb), 0.3), 0px 1px 1.5px rgba(var(--g-shadowColor--rgb), 0.15); + background-color: var(--g-controlColor) !important; + cursor: default !important; + margin: revert !important; + height: 1.9rem !important; + line-height: 1.9rem !important; + min-width: 7.2rem !important; + min-height: 0 !important; + font-size: 1.4rem !important; + font-weight: 400 !important; + padding: 0 2rem !important; + text-decoration: none !important; + color: var(--g-alternateSelectedControlTextColor) !important; + background-color: hsl(var(--s-accentColor--hsl)); + background-image: linear-gradient(hsl(var(--s-accentColor--hsl)), hsl(var(--s-accentColor--hs), calc(var(--s-accentColor--l) - 5%))); + box-shadow: 0px 0px 1px hsla(var(--s-accentColor--hsl), 0.3), 0px 1px 1.5px hsla(var(--s-accentColor--hsl), 0.15); +} +.modal-dialog button:nth-child(1):active { + color: rgba(255, 255, 255, 0.75) !important; + background-image: linear-gradient(hsl(var(--s-accentColor--h), var(--s-accentColor--s), calc(var(--s-accentColor--l) - 5%)), hsl(var(--s-accentColor--h), var(--s-accentColor--s), calc(var(--s-accentColor--l) - 10%))); +} +.modal-dialog button:nth-child(2) { + margin-left: auto !important; +} +.modal-dialog button:nth-child(3):not(:active) { + color: var(--g-systemRed) !important; +} +.modal-dialog > div:last-child { + display: flex; + justify-content: space-between; + flex-direction: row-reverse; + gap: 0.7rem; + position: relative; + margin-top: 2rem !important; + padding-top: 2rem !important; +} +.modal-dialog > div:last-child:before { + content: ""; + top: 0; + left: -2rem; + right: -2rem; + background: var(--g-separatorColor); + height: 0.1rem; + position: absolute; +} +.modal-dialog .item-list.item-list { + display: block !important; + padding-top: 0 !important; + margin-left: -0.5rem; + margin-right: -0.5rem; + height: auto !important; +} +.modal-dialog .item-list.item-list:before { + content: none; +} +.modal-dialog .item-list.item-list > div { + border-bottom: none !important; + padding: 1.5rem 1.5rem !important; + position: relative; +} +.modal-dialog .item-list.item-list > div::before { + content: ""; + top: 0; + left: 1rem; + right: 1rem; + background: var(--g-separatorColor); + height: 0.1rem; + position: absolute; +} +.modal-dialog .item-list.item-list > div:nth-child(2)::before { + content: none !important; +} +.modal-dialog .item-list.item-list > div * { + opacity: 1 !important; +} +.modal-dialog .item-list.item-list > div > div { + color: var(--g-secondaryLabelColor) !important; +} +.modal-dialog .item-list.item-list > div > div:first-child[style] { + margin-bottom: 0 !important; +} +.modal-dialog .item-list.item-list > div > div:first-child:not(:last-child) { + font-size: 1.5rem !important; + margin-bottom: 0.4rem !important; +} +.modal-dialog .item-list.item-list > div > div span { + color: var(--g-textColor) !important; + font-weight: normal !important; +} +.modal-dialog .item-list.item-list > div:empty { + display: none; +} +.modal-dialog .item-list.item-list > div.selected { + background: var(--s-accentColor) !important; + border-radius: 0.5rem; +} +.modal-dialog .item-list.item-list > div.selected > div { + color: rgba(255, 255, 255, 0.75) !important; +} +.modal-dialog .item-list.item-list > div.selected > div span { + color: var(--g-highlightColor) !important; +} +.modal-dialog .item-list.item-list > div.selected i.fa:before { + color: rgba(var(--g-highlightColor--rgb) 0.75); +} +.modal-dialog .item-list.item-list > div:not(.selected) > div:last-child { + color: var(--g-secondaryLabelColor) !important; +} +.modal-dialog .item-list.item-list > div i.fa:before { + color: var(--s-accentColor); + font-family: var(--g-font-family-system) !important; + font-weight: 400; + -webkit-font-smoothing: antialiased; +} +.modal-dialog .item-list.item-list > div .fa-book:before { + content: var(--g-icon-folder); +} + +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) { + background: rgba(var(--g-underPageBackgroundColor--rgb), 0.5) !important; + height: 100% !important; +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) > div { + backdrop-filter: blur(10px) saturate(100%) contrast(45%) brightness(130%); + background-color: var(--g-windowBackgroundColor) !important; + padding: 2rem !important; + border-radius: 1.2rem !important; + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.8), 0px 0px 20px rgba(0, 0, 0, 0.15), 0px 25px 30px rgba(0, 0, 0, 0.35) !important; + max-height: none !important; +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) > div > div:first-child { + color: var(--g-labelColor) !important; + font-size: 1.3rem !important; + text-align: center; +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) > div > div:last-child { + display: flex; + flex-direction: row-reverse; + gap: 0.8rem; + position: relative; + margin-top: 2rem !important; + padding-top: 2rem !important; +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) > div > div:last-child:before { + content: ""; + top: 0; + left: -2rem; + right: -2rem; + background: var(--g-separatorColor); + height: 0.1rem; + position: absolute; +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) > div > div:last-child button:first-child { + color: var(--g-controlTextColor) !important; + border: none !important; + border-radius: 0.5rem !important; + box-shadow: 0px 0px 1px rgba(var(--g-shadowColor--rgb), 0.3), 0px 1px 1.5px rgba(var(--g-shadowColor--rgb), 0.15); + background-color: var(--g-controlColor) !important; + cursor: default !important; + margin: revert !important; + height: 1.9rem !important; + line-height: 1.9rem !important; + min-width: 7.2rem !important; + min-height: 0 !important; + font-size: 1.4rem !important; + font-weight: 400 !important; + padding: 0 2rem !important; + text-decoration: none !important; + color: var(--g-alternateSelectedControlTextColor) !important; + background-color: hsl(var(--s-accentColor--hsl)); + background-image: linear-gradient(hsl(var(--s-accentColor--hsl)), hsl(var(--s-accentColor--hs), calc(var(--s-accentColor--l) - 5%))); + box-shadow: 0px 0px 1px hsla(var(--s-accentColor--hsl), 0.3), 0px 1px 1.5px hsla(var(--s-accentColor--hsl), 0.15); +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) > div > div:last-child button:first-child:active { + color: rgba(255, 255, 255, 0.75) !important; + background-image: linear-gradient(hsl(var(--s-accentColor--h), var(--s-accentColor--s), calc(var(--s-accentColor--l) - 5%)), hsl(var(--s-accentColor--h), var(--s-accentColor--s), calc(var(--s-accentColor--l) - 10%))); +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) > div > div:last-child button:last-child { + color: var(--g-controlTextColor) !important; + border: none !important; + border-radius: 0.5rem !important; + box-shadow: 0px 0px 1px rgba(var(--g-shadowColor--rgb), 0.3), 0px 1px 1.5px rgba(var(--g-shadowColor--rgb), 0.15); + background-color: var(--g-controlColor) !important; + cursor: default !important; + margin: revert !important; + height: 1.9rem !important; + line-height: 1.9rem !important; + min-width: 7.2rem !important; + min-height: 0 !important; + font-size: 1.4rem !important; + font-weight: 400 !important; + padding: 0 2rem !important; + text-decoration: none !important; +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) > div > div:last-child button:last-child:active { + color: rgba(255, 255, 255, 0.75) !important; + background-image: linear-gradient(hsl(var(--s-accentColor--h), var(--s-accentColor--s), calc(var(--s-accentColor--l) - 5%)), hsl(var(--s-accentColor--h), var(--s-accentColor--s), calc(var(--s-accentColor--l) - 10%))); +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) .note-property-box { + margin-bottom: 1rem !important; +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) .note-property-box input[type=text] { + border: none !important; + background-color: var(--g-controlBackgroundColor) !important; + border-radius: 0.5rem; + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 0px 1px rgba(0, 0, 0, 0.15), 0 0 0 16px hsla(var(--s-controlAccentColor--hsl), 0) !important; + height: 2rem; + padding-left: 1rem; +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) .note-property-box input[type=text]:focus-within, div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) .note-property-box input[type=text]:focus { + transition: 0.25s box-shadow cubic-bezier(0.61, 1, 0.88, 1); + transition-delay: 0.125s; + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 0px 1px rgba(0, 0, 0, 0.15), 0 0 0 0.35rem hsla(var(--s-controlAccentColor--hsl), 0.5) !important; +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) .note-property-box a:not(:empty) { + background-color: transparent !important; + color: var(--s-controlAccentColor); + text-decoration: none !important; + margin-left: 0 !important; +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) .note-property-box a:not(:empty) .fas { + color: var(--s-controlAccentColor) !important; +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) .note-property-box a:not(:empty) .fas::before { + font-family: var(--g-font-family-system) !important; + font-weight: 400; +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) .note-property-box a:not(:empty) .fas.fa-edit::before { + content: var(--g-icon-square-and-pencil); +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) .note-property-box a:not(:empty) .fas.fa-copy::before { + content: var(--g-icon-doc-on-clipboard); +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) .note-property-box a:not(:empty) .fas.fa-save::before { + content: var(--g-icon-square-and-arrow-down); +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) .note-property-box div + a[style] { + margin-left: 1rem !important; +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) .note-property-box label { + color: var(--g-secondaryLabelColor) !important; + font-weight: 400 !important; + text-align: right !important; + margin-right: 0.8rem !important; +} +div[style*="z-index: 9999;"][style*="background-color: rgba(0, 0, 0, 0.6);"][style*="align-items: flex-start;"]:not(.modal-layer) .note-property-box label::after { + content: ":"; +} + +.tag-selector [class*=control] { + border: none !important; + background-color: var(--g-controlBackgroundColor) !important; + border-radius: 0.5rem; + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 0px 1px rgba(0, 0, 0, 0.15), 0 0 0 16px hsla(var(--s-controlAccentColor--hsl), 0) !important; + height: 2rem; + padding-left: 1rem; + top: 0.6rem; + height: 1.8rem !important; + min-height: 0; + padding: 0 0 0 0.4rem; +} +.tag-selector [class*=control]:focus-within, .tag-selector [class*=control]:focus { + transition: 0.25s box-shadow cubic-bezier(0.61, 1, 0.88, 1); + transition-delay: 0.125s; + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 0px 1px rgba(0, 0, 0, 0.15), 0 0 0 0.35rem hsla(var(--s-controlAccentColor--hsl), 0.5) !important; +} +.tag-selector [class*=control] > div { + padding: 0; + height: 1.8rem; +} +.tag-selector input[type=text], +.tag-selector input[type=text]:focus { + box-shadow: none !important; + font-size: var(--g-font-size--1) !important; +} +.tag-selector [class*=indicatorSeparator] { + display: none; +} +.tag-selector [class*=indicatorContainer] { + padding: 0 0.2rem; +} +.tag-selector [class*=indicatorContainer]:after { + color: var(--g-controlTextColor) !important; + border: none !important; + border-radius: 0.5rem !important; + box-shadow: 0px 0px 1px rgba(var(--g-shadowColor--rgb), 0.3), 0px 1px 1.5px rgba(var(--g-shadowColor--rgb), 0.15); + background-color: var(--g-controlColor) !important; + cursor: default !important; + margin: revert !important; + height: 1.9rem !important; + line-height: 1.9rem !important; + min-width: 7.2rem !important; + min-height: 0 !important; + font-size: 1.4rem !important; + font-weight: 400 !important; + padding: 0 2rem !important; + text-decoration: none !important; + color: var(--g-alternateSelectedControlTextColor) !important; + background-color: hsl(var(--s-accentColor--hsl)); + background-image: linear-gradient(hsl(var(--s-accentColor--hsl)), hsl(var(--s-accentColor--hs), calc(var(--s-accentColor--l) - 5%))); + box-shadow: 0px 0px 1px hsla(var(--s-accentColor--hsl), 0.3), 0px 1px 1.5px hsla(var(--s-accentColor--hsl), 0.15); + content: var(--g-icon-chevron-up-chevron-down); + font-size: var(--g-font-size--1) !important; + min-width: 0 !important; + height: 1.6rem !important; + padding: 0 !important; + min-width: 0; + text-align: center; + line-height: 1.8rem !important; + width: 1.6rem !important; +} +.tag-selector [class*=indicatorContainer]:after:active { + color: rgba(255, 255, 255, 0.75) !important; + background-image: linear-gradient(hsl(var(--s-accentColor--h), var(--s-accentColor--s), calc(var(--s-accentColor--l) - 5%)), hsl(var(--s-accentColor--h), var(--s-accentColor--s), calc(var(--s-accentColor--l) - 10%))); +} +.tag-selector [class*=indicatorContainer] * { + display: none; +} +.tag-selector > div > div:first-child > div + div { + margin-left: 0rem; +} +.tag-selector > div > div:first-child input { + background: transparent !important; + line-height: 1.2rem; +} +.tag-selector [class*=multiValue] { + background-color: var(--g-gridColor) !important; + border-radius: 0.2rem !important; + margin: 0 0.4rem 0 0 !important; + padding: 0 0.4rem !important; +} +.tag-selector [class*=multiValue] * { + color: var(--g-textColor) !important; + font-size: 1.1rem !important; + font-family: var(--g-font-family-system); + line-height: 1.2rem !important; + height: 1.2rem !important; + padding: 0; +} +.tag-selector [class*=multiValue] > div:first-child { + flex: 1 0 auto; +} +.tag-selector [class*=multiValue] > div:last-child { + flex: 1 0 auto; + margin: 0 0 0 0.4rem !important; + line-height: 22px; + background-color: transparent !important; +} +.tag-selector [class*=multiValue] > div:last-child::after { + content: var(--g-icon-xmark); + color: var(--g-controlTextColor); + font-size: 0.8rem; + font-weight: 600; +} +.tag-selector [class*=multiValue] > div:last-child:hover { + background-color: transparent; +} +.tag-selector [class*=multiValue] > div:last-child svg { + display: none; +} + +.rdtPicker { + background: var(--g-windowBackgroundColor) !important; + box-shadow: 0 0 1px rgba(var(--g-shadowColor--rgb), 0.4), 0 2px 8px rgba(var(--g-shadowColor--rgb), 0.2) !important; + max-width: none !important; + padding: 0.5rem !important; + border-color: transparent !important; + border-radius: 0.4rem; + color: var(--g-text-color); + min-width: 0; + padding: 0.6rem 0.2rem 0 0.2rem !important; + min-width: 16rem; +} +.rdtPicker *, +.rdtPicker *:hover { + background-color: transparent !important; + cursor: default !important; + user-select: none; +} +.rdtPicker thead .rdtSwitch { + order: -1; + flex: 1; + text-align: left; + width: auto; +} +.rdtPicker thead .rdtPrev, +.rdtPicker thead .rdtNext { + flex: 0 0 auto; + margin: 0 0.2rem; +} +.rdtPicker thead tr th { + border-bottom: transparent; +} +.rdtPicker thead tr:first-child th { + margin-left: 0.4rem; + font-size: 1.2rem; + color: var(--g-text-color); +} +.rdtPicker thead tr:last-child { + border-bottom: 0.1rem solid var(--g-separatorColor); + margin-bottom: 0.4rem; + padding: 0 0 0.4rem; +} +.rdtPicker thead tr:last-child th { + border-bottom: transparent; + color: var(--g-secondaryLabelColor); + font-size: 1rem; + height: auto; +} +.rdtPicker tfoot { + border-top-color: var(--g-separatorColor); +} +.rdtPicker tfoot .rdtTimeToggle { + font-size: 1.4rem; + display: flex; + align-items: center; + justify-content: center; +} +.rdtPicker tr { + display: flex; + justify-content: space-between; + align-items: center; +} +.rdtPicker tr th, +.rdtPicker tr td { + padding: 0; + flex: 1; +} +.rdtPicker td[data-value] { + padding: 0 0.5rem !important; + font-size: 1rem !important; + height: 1.6rem; + min-height: 0; + min-width: 2.5rem; +} +.rdtPicker td[data-value].rdtToday { + color: var(--g-systemRed) !important; +} +.rdtPicker td[data-value].rdtToday:before { + border-color: transparent; +} +.rdtPicker td[data-value].rdtActive { + color: var(--g-textColor); + background-color: var(--g-quaternaryLabelColor) !important; + border-radius: 0.2rem; + bottom: 0; + left: 0; + right: 0; + text-shadow: none; + top: 0; + z-index: -1; +} +.rdtPicker * { + border-color: transparent; +} + +.rli-sideBar:first-child { + width: auto !important; +} +.rli-sideBar > span > div { + z-index: 1; +} + +.sidebar.sidebar { + background: var(--s-sidebar__BackgroundColor); + padding-top: 1rem; +} +.sidebar.sidebar * { + font-family: var(--g-font-family-system) !important; +} +.sidebar.sidebar > div > div button { + display: none; + margin-right: 1.5rem; +} +.sidebar.sidebar > div > div button span::before { + content: "􀁌"; +} +.sidebar.sidebar > div > div:hover button { + display: block; +} +.sidebar.sidebar > div > div:first-child span, +.sidebar.sidebar > div .folders + div span { + text-transform: none; + color: var(--s-sidebar__label-Color); + font-size: var(--s-sidebar__label-FontSize); + font-weight: 700; + margin-left: 6px; + letter-spacing: -0.025em; +} +.sidebar.sidebar > div .all-notes { + background: none; + color: var(--s-sidebar__item-Color); +} +.sidebar.sidebar > div .all-notes a { + font-size: 1.3rem !important; + color: inherit; +} +.sidebar.sidebar > div .list-item-container { + border-radius: 4px; + height: 2.8rem; + margin: 0 10px; + padding: 0; + transition: none; +} +.sidebar.sidebar > div .list-item-container:hover { + background: transparent; +} +.sidebar.sidebar > div .list-item-container.selected { + background: var(--u-sidebar-selected-item-color, var(--g-unemphasizedSelectedTextBackgroundColor)); +} +.sidebar.sidebar > div .list-item-container a:first-of-type { + opacity: 1; + margin-top: -3px; + padding-right: 0; +} +.sidebar.sidebar > div .list-item { + opacity: 1; + display: flex; + line-height: 2.8rem; + /* overflow: hidden; */ + width: 100%; +} +.sidebar.sidebar > div .list-item .title, +.sidebar.sidebar > div .list-item .tag-label { + color: var(--s-sidebar__item-Color); + font-size: 1.3rem; + /* overflow: hidden; */ + text-overflow: ellipsis; + flex: 1; +} +.sidebar.sidebar > div .list-item .note-count-label { + display: var(--u-sidebar-note-count-label, block); + padding-left: 5px; + padding-right: 8px; + color: var(--u-sidebar-note-count-label-color, var(--g-secondaryLabelColor)); + opacity: 0.5; + font-size: 1.1rem; + line-height: 1; + font-weight: 500; +} +.sidebar.sidebar > div .folders .list-item::before, +.sidebar.sidebar > div .tags .list-item::before { + color: var(--s-sidebar__icon-Color); + margin-right: 0.7rem; + font-weight: 400; + font-size: 13px; + -webkit-font-smoothing: antialiased; +} +.sidebar.sidebar > div .folders .list-item::before { + content: var(--g-icon-folder); +} +.sidebar.sidebar > div .tags .list-item::before { + content: var(--g-icon-tag); +} +.sidebar.sidebar > div .list-item-depth-0 { + padding-left: 0.2rem; +} +.sidebar.sidebar > div .list-item-depth-1 { + padding-left: 1.8rem; +} +.sidebar.sidebar > div .list-item-depth-2 { + padding-left: 3.4rem; +} +.sidebar.sidebar > div .list-item-depth-3 { + padding-left: 5rem; +} +.sidebar.sidebar > div .list-item-depth-4 { + padding-left: 6.6rem; +} +.sidebar.sidebar > div .list-item-depth-5 { + padding-left: 8.2rem; +} +.sidebar.sidebar > div .list-item-depth-6 { + padding-left: 9.8rem; +} +.sidebar.sidebar > div .list-item-depth-7 { + padding-left: 11.4rem; +} +.sidebar.sidebar > div .list-item-depth-8 { + padding-left: 13rem; +} +.sidebar.sidebar > div .list-item-depth-9 { + padding-left: 14.6rem; +} +.sidebar.sidebar .fas { + opacity: 1 !important; +} +.sidebar.sidebar .fas::before { + font-family: var(--g-font-family-system); + font-size: 9px; + font-weight: 700; + -webkit-font-smoothing: antialiased; +} +.sidebar.sidebar .fas.fa-caret-right::before { + content: var(--g-icon-chevron-forward); + color: var(--s-sidebar__chevron-Color); +} +.sidebar.sidebar .fas.fa-caret-down::before { + content: var(--g-icon-chevron-down); + color: var(--s-sidebar__chevron-Color); +} +.sidebar.sidebar .fas.fa-plus::before { + color: var(--g-tertiaryLabelColor); + font-weight: 500; + font-size: 14px; + -webkit-font-smoothing: unset; +} +.sidebar.sidebar .icon-notebooks, +.sidebar.sidebar .icon-tags, +.sidebar.sidebar .icon-notes { + display: none; +} +.sidebar.sidebar > div:last-child { + padding-bottom: 0.4rem !important; +} +@keyframes tooltipTimeout { + 0% { + opacity: 0; + } + 99% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +.sidebar.sidebar > div:last-child > div:first-child { + opacity: var(--u-sidebar-synchronise-label, 0); + pointer-events: none; + background-color: var(--u-sidebar-synchronise-label, var(--g-unemphasizedSelectedContentBackgroundColor)); + padding: var(--u-sidebar-synchronise-label, 0.4rem); + position: var(--u-sidebar-synchronise-label, absolute); + width: auto; + bottom: 20px; + box-shadow: var(--u-sidebar-synchronise-label, 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2)); +} +.sidebar.sidebar > div:last-child > div:first-child div { + color: var(--s-sidebar__synchronise-label-Color); +} +.sidebar.sidebar > div:last-child:hover > div:first-child { + animation: var(--u-sidebar-synchronise-label, tooltipTimeout 1s); + opacity: 1; +} +.sidebar.sidebar > div:last-child button { + border: none; + justify-content: flex-start; + padding: 0; + text-align: left; + font-size: 1.3rem; +} +.sidebar.sidebar > div:last-child button span { + color: var(--s-sidebar__synchronise-Color); +} +.sidebar.sidebar > div:last-child button:hover span { + color: var(--s-sidebar__synchronise-Color); +} +.sidebar.sidebar > div:last-child button .icon-sync { + font-size: inherit; + transform-origin: 50% 55%; +} +.sidebar.sidebar > div:last-child button .icon-sync::before { + content: var(--g-icon-arrow-triangle-2-circlepath); + font-family: var(--g-font-family-system); + font-size: 1.2rem; + -webkit-font-smoothing: antialiased; +} + +.cm-header { + color: var(--g-headerTextColor) !important; +} + +.cm-link-text { + color: var(--g-linkColor); +} + +.cm-url { + color: var(--g-systemGray) !important; +} + +body { + background: var(--g-primary-Background); +} + +#rendered-md { + font-size: 1.5rem; + line-height: 1.6; + padding: 2.8rem; + max-width: var(--u-editor-max-width, 75ch) !important; + color: var(--g-textColor); + -webkit-font-smoothing: antialiased; +} + +#rendered-md a { + color: var(--g-linkColor); +} +#rendered-md > * { + margin: 0 0 1.4rem; +} +#rendered-md h1, +#rendered-md h2, +#rendered-md h3, +#rendered-md h4, +#rendered-md h5 { + color: var(--g-headerTextColor); + margin-bottom: 0 !important; + padding: 0; + line-height: 1.25; + margin-bottom: 0.4rem !important; +} +#rendered-md h1 { + font-size: 2.4rem; + border-bottom: none; + margin-bottom: 0; + line-height: 1; +} +#rendered-md strong { + color: var(--g-textColor); +} +#rendered-md img { + margin-top: 1.4rem; +} +#rendered-md ul, +#rendered-md ol { + margin-left: 1.8rem; + margin-bottom: var(--u-editor-paragraph-spacing, 1.5rem); +} +#rendered-md ul li, +#rendered-md ol li { + margin-bottom: 0.35rem; +} +#rendered-md p { + margin-bottom: var(--u-editor-paragraph-spacing, 1.5rem); +} +#rendered-md table th { + background: var(--g-alternatingContentBackgroundColorsOdd); + border-bottom-width: 0.1rem; +} +#rendered-md table tr:nth-child(even) { + background: var(--g-alternatingContentBackgroundColorsOdd); +} +#rendered-md table tr:nth-child(odd) { + background: var(--g-alternatingContentBackgroundColorsEven); +} +#rendered-md table th, +#rendered-md table td { + font-family: var(--g-global-font-family-system); + border-color: var(--g-gridColor); +} +#rendered-md pre { + background-color: var(--g-alternatingContentBackgroundColorsOdd); + color: var(--g-textColor); + border-radius: 0.4rem; +} +@media (prefers-color-scheme: dark) { + #rendered-md pre { + background-color: rgba(var(--g-shadowColor--rgb), 0.2); + } +} +#rendered-md pre * { + font-family: var(--g-font-family-mono) !important; +} +#rendered-md ul.joplin-checklist { + margin-left: 2.2rem; +} +#rendered-md ul.joplin-checklist li { + position: relative; +} +#rendered-md ul.joplin-checklist li:before { + content: ""; + border-radius: 50%; + border: 0.1rem solid var(--g-tertiaryLabelColor); + display: flex; + height: 1.4rem; + justify-content: center; + margin-left: -2.4rem; + width: 1.4rem; + left: 0; + top: 0.3rem; +} +#rendered-md ul.joplin-checklist li.checked { + opacity: 1; +} +#rendered-md ul.joplin-checklist li.checked:before { + background-color: var(--s-controlAccentColor); + border-color: transparent; + color: var(--g-alternateSelectedControlTextColor); + content: "􀆅"; + font-family: var(--g-font-family-system); + font-size: 1rem; + line-height: 1.5rem; + position: absolute; +} +#rendered-md [data-mce-selected=inline-boundary].inline-code { + background-color: #f3f3f3; +} + +/*# sourceMappingURL=macos-theme-for-joplin.css.map */ + +.CodeMirror { + font-family: "NotoMono Nerd Font" !important; + font-size: 1.6rem !important; + line-height: 1.6 !important; +} + +.CodeMirror .cm-header { + color: darkslategray; +} + +.CodeMirror .cm-quote { + color: #090; +} + +.CodeMirror-sizer { + /*keeps the text width manageable*/ + margin-right: auto !important; + margin-left: auto !important; + max-width: 100ch !important; + line-height: 2.6ch !important; +} + +.cm-jn-code-block-background { + background-color: white !important; +} + +/* Default theme */ +.cm-s-default .cm-attribute {color: #00c !important;} +.cm-s-default .cm-bracket {color: #997 !important;} +.cm-s-default .cm-builtin {color: #30a !important;} +.cm-s-default .cm-comment {color: #a50 !important;} +.cm-s-default .cm-hr {color: #999 !important;} +.cm-s-default .cm-keyword {color: #708 !important;} +.cm-s-default .cm-link {color: #00c !important;} +.cm-s-default .cm-meta {color: #555 !important;} +.cm-s-default .cm-qualifier {color: #555 !important;} +.cm-s-default .cm-string {color: #a11 !important;} +.cm-s-default .cm-string-2 {color: #f50 !important;} +.cm-s-default .cm-tag {color: #170 !important;} +.cm-s-default .cm-variable-2 {color: #05a !important;} +.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085 !important;} + +.cm-comment.cm-jn-inline-code:not(.cm-search-marker):not(.cm-fat-cursor-mark):not(.cm-search-marker-selected):not(.CodeMirror-selectedtext) { + color: rgb(250, 255, 195) !important; + background-color: var(--code) !important; +} + +#note-editor{ + color: black !important; +} + +.ace_emphasis{ + color: black !important; + font-weight: bold; +} + +.ace_blockquote{ + color: #797979 !important; +} + +/* MARKDOWN EDITOR */ + +span.cm-rm-checkbox.cm-property + span.cm-rm-checkbox + span.cm-rm-checkbox { + /*adds a strike through on completed checkmarks*/ + text-decoration: line-through; + opacity: 0.7; +} + +.cm-header.cm-rm-header-token{ + /*makes the markdown #, ##, ###, etc less noticable*/ + color: #cccccc !important; + /* font-size: 90%; */ + margin-left: -50px; + max-width: 50px; + width: 50px; + /* overflow: hidden; */ + display: inline-block; + text-align: right; +} + diff --git a/etc/soft/joplin/userchrome.css b/etc/soft/joplin/userchrome.css index ca5bdd2..d9ae84a 100644 --- a/etc/soft/joplin/userchrome.css +++ b/etc/soft/joplin/userchrome.css @@ -363,7 +363,8 @@ --text: #32373f; --code: #383a42; - --link: #4286f4; + /* --link: #4286f4; */ + --link: #00a7da; } .fa-caret-right::before { @@ -2243,11 +2244,6 @@ body { .cm-s-default .cm-variable-2 {color: #05a !important;} .cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085 !important;} -.cm-comment.cm-jn-inline-code:not(.cm-search-marker):not(.cm-fat-cursor-mark):not(.cm-search-marker-selected):not(.CodeMirror-selectedtext) { - color: rgb(250, 255, 195) !important; - background-color: var(--code) !important; -} - #note-editor{ color: black !important; } @@ -2281,3 +2277,25 @@ span.cm-rm-checkbox.cm-property + span.cm-rm-checkbox + span.cm-rm-checkbox { text-align: right; } +/* CODE */ + +.cm-comment.cm-jn-inline-code:not(.cm-search-marker):not(.cm-fat-cursor-mark):not(.cm-search-marker-selected):not(.CodeMirror-selectedtext) { + background: #ffc0cb54 !important; + padding: 3px 6px; + color: hsl(333deg, 100%, 45%) !important; + border: none !important; +} + +/* MARKER */ + +.cm-rm-highlight { + background-color: rgba(255, 225, 0, 0.8) !important; +} + +/* INSERT */ + +.cm-rm-ins { + text-decoration: underline; + color: hsl(333deg, 100%, 45%) !important; +} + diff --git a/etc/soft/joplin/userstyle-light.css b/etc/soft/joplin/userstyle-light.css new file mode 100644 index 0000000..d4ba36d --- /dev/null +++ b/etc/soft/joplin/userstyle-light.css @@ -0,0 +1,525 @@ +/* KW */ + +:root { + --text: #32373f; + --code: #383a42; + --link: #4286f4; +} + +#joplin-container-content{ + padding-left: 0 !important; + padding-right: 0 !important; +} + +#rendered-md { + padding: 3%; +} + +body { + font-size: 1.2rem; + color: var(--text); + word-wrap: break-word; + line-height: 1.6em; + /* background-color: #ffffff; */ + font-family: 'Avenir', 'Arial', sans-serif; + padding-bottom: 0px; + padding-top: 0px; +} + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + color: var(--code); + background: var(--code); + padding: 1em; + /* background: #000; */ + /* color: #f8f8f8; */ +} + +code.hljs { + padding: 3px 5px; +} + +/* Editor / pre */ +.cm-jn-monospace { + font-family: "NotoMono Nerd Font" !important; +} + +.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, +.hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number, +.hljs-built_in, .hljs-class .hljs-title { + color: #ffc13d; +} +.hljs-comment, +.hljs-meta, +.hljs-quote { + color: #7c7c7c; +} +.hljs-keyword, +.hljs-name, +.hljs-selector-tag, +.hljs-tag { + color: #96cbfe; +} +.hljs-attribute, +.hljs-selector-id { + color: #ffffb6; +} +.hljs-addition, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-string { + color: #a8ff60; +} +.hljs-subst { + color: #daefa3; +} +.hljs-link, +.hljs-regexp { + color: #e9c062; +} +.hljs-doctag, +.hljs-section, +.hljs-title, +.hljs-type { + color: #ffffb6; +} +.hljs-bullet, +.hljs-literal, +.hljs-symbol, +.hljs-template-variable, +.hljs-variable { + color: #c6c5fe; +} +.hljs-deletion, +.hljs-number { + color: #ff73fd; +} +.hljs-emphasis { + font-style: italic; +} +.hljs-strong { + font-weight: 700; +} + + +/* CUSTOM */ + +h1, h2, h3, h4, h5, h6 { + font-weight: 700; + color: #2c3e50 !important; + margin-bottom: 0.5rem; +} + +h1 { + font-size: 1.8rem; + color: #2c3e50 !important; + margin-bottom: 0.5rem; + text-transform: uppercase!important; + text-align: center!important; + line-height: 1.2; + margin-top: 0; + margin-bottom: 1em; +} + +h2 { + font-size: 1.8rem; +} + +h3 { + font-size: 1.6rem; +} + +h4 { + font-size: 1.4rem; +} + +h5 { + font-size: 1.2rem; +} + +h6 { + font-size: 1rem; +} + +code { + color: #faffc3 !important; + background-color: var(--code) !important; +} + +code, pre { + font-family: "NotoMono Nerd Font" !important; + font-size: 1.2rem; +} + +/* pre > code { */ +/* background-color: #2c3e50 !important; */ +/* color: #fff !important; */ +/* } */ + +p { + display: block; + margin-block-end: 1em; + margin-block-start: 1em; + margin-bottom: 1rem; + margin-inline-end: 0px; + margin-inline-start: 0px; + margin-top: 0; +} + +a { + color: var(--link); + text-decoration: none; +} + +a:focus, +a:hover, +a:active { + text-decoration: none; + /* color: #26e4bb; */ + color: #007c7c; +} + +blockquote { + border-left: 4px solid #4286f4; + display: block; + margin-block-end: 1em; + margin-block-start: 1em; + margin-inline-end: 40px; + margin-inline-start: 40px; + margin: 0 0 1rem; + padding-left: 2%; +} + +/* LISTS */ + +ol { + margin: 0 0 1.5em; + padding: 0; + counter-reset: item; +} +ol li { + margin: 0; + padding: 0 0 0 1.5em; + list-style-type: none; + counter-increment: item; +} +ol li:before { + color: var(--link); + /* content: counter(item, decimal-leading-zero) "."; */ + content: "00" counter(item) "."; + /* display: inline-block; */ + /* float: left; */ + font-weight: bold; + padding-right: 0.5em; + width: 1em; +} + +ol li:nth-child(n+10):before { + content: "0" counter(item) "."; +} + +ol li:nth-child(n+100):before { + content: counter(item) "."; +} + +ul { + margin: 0 0 1.5em; + padding: 0; + list-style: none; +} +ul li { + margin: 0; + padding: 0 0 0 1.5em; + list-style-type: none; +} +ul li::before { + color: var(--link); + content: "\2022"; + /* display: inline-block; */ + float: left; + font-weight: bold; + /* padding-right: 0.3em; */ + width: 1em; +} + +/* Timeline dt */ +dt { + font-weight: bold; +} + +dl:before { + content: ' '; + background: darkgray; + display: inline-block; + position: absolute; + left: 29px; + width: 2px; + height: 50%; + z-index: 400; +} + +dl > dt:before { + content: ' '; + background: gray; + display: inline-block; + position: absolute; + border-radius: 50%; + left: 20px; + width: 20px; + height: 20px; + z-index: 400; +} + +dl > dt, dl > dd { + margin: 6pt 0; + padding-left: 60px; +} + +ins { + text-decoration: none; + color: #007c7c; + font-weight: bold; +} + +/* BADGES */ + +b-error, b-success, b-info, b-warning, b-help { + display: block; + margin-bottom: 10px; + padding: 10px 10px 10px 50px; + border: 1px solid; + border-left: 5px solid; + border-radius: 2px; + word-wrap: break-word; + text-align: left; + box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.3); + color: gray; + background-color: transparent; +} + +b-error::before, +b-success::before, +b-info::before, +b-warning::before, +b-help::before { + font-weight: 700; + font-size: 1.5em; + left: 1.6em; + /* position: absolute; */ +} + +b-error { + border-color: red; + color: red; +} + +b-error::before { + content: "❌"; + font-family: "Font Awesome 5 Free" !important; + color: red; +} + +b-success { + border-color: forestgreen; + color: forestgreen; +} + +b-success::before { + content: "✅"; + font-family: "Font Awesome 5 Free" !important; + color: forestgreen; +} + +b-warning { + border-color: darkorange; + color: darkorange; +} + +b-warning::before { + content: "⚠️"; + font-family: "Font Awesome 5 Free" !important; + color: orange !important; +} + +b-info { + border-color: cornflowerblue; + color: cornflowerblue; +} + +b-info::before { + content: "ℹ️"; + font-family: "Font Awesome 5 Free" !important; + color: cornflowerblue; +} + +b-help { + border-color: blueviolet; + color: blueviolet; +} + +b-help::before { + content: "🔔"; + font-family: "Font Awesome 5 Free" !important; + color: blueviolet; +} + +hr { + border: none; + border-bottom: 1px solid gray !important; + margin: 2.5em 0 !important; +} + +input[type='checkbox'], +.md-checkbox .checkbox-label-unchecked, +.md-checkbox .checkbox-label-checked, +li.md-checkbox { + cursor: pointer !important; +} + +li.md-checkbox [type="checkbox"]:not(:checked), +li.md-checkbox [type="checkbox"]:checked { + position: absolute; + left: -9999px; +} +li.md-checkbox [type="checkbox"]:not(:checked) + label, +li.md-checkbox [type="checkbox"]:checked + label { + position: relative; + padding-left: 1.5em; + cursor: pointer; +} + +/* .md-checkbox input[type=checkbox]:checked { */ +/* opacity: 1; */ +/* } */ + +li.md-checkbox [type="checkbox"]:not(:checked) + label:before, +li.md-checkbox [type="checkbox"]:checked + label:before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 1em; + height: 1em; + border: 1px solid darkgray; + /* background: var(--light-gray); */ + border-radius: 50%; +} + +li.md-checkbox [type="checkbox"]:checked + label { + opacity: 1 !important; +} + +li.md-checkbox [type="checkbox"]:checked + label:before { + background: palegreen; + opacity: 1 !important; +} + +.checkbox-label-checked { + text-decoration: line-through; + text-decoration-color: darkgray; +} + +li.md-checkbox [type="checkbox"]:not(:checked) + label:after, +li.md-checkbox [type="checkbox"]:checked + label:after { + /* content: '\2713\0020'; */ + position: absolute; + top: -3px; + left: 4px; + color: white; + font-weight: bold; + font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial; + opacity: 1 !important; +} + +li.md-checkbox [type="checkbox"]:not(:checked) + label:after { + opacity: 0; + transform: scale(0); +} + +li.md-checkbox [type="checkbox"]:checked + label:after { + opacity: 1; + transform: scale(1); +} + +.resource-icon { + display: inline-block; + position: relative; + top: 4px; + text-decoration: none; + width: 18px; + height: 21px; + margin-right: 5px; + background-color: #155bda; +} + +/* TOC */ + +nav.table-of-contents ul { + list-style-type: none; + margin-top: 0px !important; + margin-bottom: 0px !important; + margin-left: 1em !important; +} + +nav.table-of-contents>ul { + top: 5px; + right: 0px; + z-index: 99; + + font-size: 0.8em !important; + position: fixed; + padding: 15px; + + border-radius: 10px 0px 0px 10px; + margin: 0px; + + overflow: hidden; + height: 90%; + width: 5px; + transition: .2s; +} + +nav.table-of-contents::after { + content: ""; + color: black; +} + +nav.table-of-contents > ul:hover { + background: #F8F8F8; + box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.15); + + width: 30%; + color: none; + overflow: scroll; +} + +nav.table-of-contents > ul:hover::before { + content: "Содержание"; + font-weight: bold; +} + +nav.table-of-contents>ul:hover li { + display: list-item; +} + +nav.table-of-contents li { + display: none; + white-space: nowrap; + overflow: hidden; + margin: 0px; + padding: 0px; +} + +nav.table-of-contents li:before { + content: "" !important; +} + +/* BADGES */ + +progress { + height: 1.8em; + vertical-align: bottom; +} + diff --git a/etc/soft/joplin/userstyle.css b/etc/soft/joplin/userstyle.css index d4ba36d..d1d292b 100644 --- a/etc/soft/joplin/userstyle.css +++ b/etc/soft/joplin/userstyle.css @@ -2,7 +2,11 @@ :root { --text: #32373f; - --code: #383a42; + + --code-block: #383a42; + --code-bg: #ffc0cb54; + --code-fg: hsl(333deg, 100%, 45%); + --link: #4286f4; } @@ -26,21 +30,6 @@ body { padding-top: 0px; } -.hljs { - display: block; - overflow-x: auto; - padding: 0.5em; - color: var(--code); - background: var(--code); - padding: 1em; - /* background: #000; */ - /* color: #f8f8f8; */ -} - -code.hljs { - padding: 3px 5px; -} - /* Editor / pre */ .cm-jn-monospace { font-family: "NotoMono Nerd Font" !important; @@ -143,16 +132,6 @@ h6 { font-size: 1rem; } -code { - color: #faffc3 !important; - background-color: var(--code) !important; -} - -code, pre { - font-family: "NotoMono Nerd Font" !important; - font-size: 1.2rem; -} - /* pre > code { */ /* background-color: #2c3e50 !important; */ /* color: #fff !important; */ @@ -278,97 +257,10 @@ dl > dt, dl > dd { } ins { - text-decoration: none; - color: #007c7c; - font-weight: bold; -} - -/* BADGES */ - -b-error, b-success, b-info, b-warning, b-help { - display: block; - margin-bottom: 10px; - padding: 10px 10px 10px 50px; - border: 1px solid; - border-left: 5px solid; - border-radius: 2px; - word-wrap: break-word; - text-align: left; - box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.3); - color: gray; - background-color: transparent; -} - -b-error::before, -b-success::before, -b-info::before, -b-warning::before, -b-help::before { - font-weight: 700; - font-size: 1.5em; - left: 1.6em; - /* position: absolute; */ -} - -b-error { - border-color: red; - color: red; -} - -b-error::before { - content: "❌"; - font-family: "Font Awesome 5 Free" !important; - color: red; -} - -b-success { - border-color: forestgreen; - color: forestgreen; -} - -b-success::before { - content: "✅"; - font-family: "Font Awesome 5 Free" !important; - color: forestgreen; -} - -b-warning { - border-color: darkorange; - color: darkorange; -} - -b-warning::before { - content: "⚠️"; - font-family: "Font Awesome 5 Free" !important; - color: orange !important; -} - -b-info { - border-color: cornflowerblue; - color: cornflowerblue; -} - -b-info::before { - content: "ℹ️"; - font-family: "Font Awesome 5 Free" !important; - color: cornflowerblue; -} - -b-help { - border-color: blueviolet; - color: blueviolet; -} - -b-help::before { - content: "🔔"; - font-family: "Font Awesome 5 Free" !important; - color: blueviolet; -} - -hr { - border: none; - border-bottom: 1px solid gray !important; - margin: 2.5em 0 !important; + text-decoration: underline; + text-decoration-style: wavy; + text-decoration-thickness: from-font; + color: hsl(333deg, 100%, 45%); } input[type='checkbox'], @@ -523,3 +415,114 @@ progress { vertical-align: bottom; } +/* MARKER */ + +/* https://stackoverflow.com/a/64127605 */ +mark { + margin: 0 -0.4em; + padding: 0.1em 0.4em; + border-radius: 0.8em 0.3em; + background: transparent; + background-image: linear-gradient( + to right, + rgba(255, 225, 0, 0.1), + rgba(255, 225, 0, 0.7) 4%, + rgba(255, 225, 0, 0.3) + ); + -webkit-box-decoration-break: clone; + box-decoration-break: clone; +} + +mark::selection { + background: #99CCCC; +} + +/* KEYBOARD */ + +/* https://auth0.github.io/kbd/ */ +/* https://dylanatsmith.com/wrote/styling-the-kbd-element */ +kbd:active, kbd:active * { + color: black; + box-shadow: 1px 1px 0px #ddd inset; +} + +kbd { + font-family: Consolas, "Lucida Console", monospace; + border-radius: 3px; + border-radius: 0.25rem; + padding: 2px 8px; + box-shadow: 1px 1px 1px #777; + box-shadow: 0 2px 0 1px #cbcccd; + margin: 2px; + vertical-align: text-bottom; + background: #eee; + background: #f7f7f7; + color: #555; + cursor: pointer; + font-weight: 600; + letter-spacing: 1px; +} + +/* HR */ + +/* https://stackoverflow.com/a/37948993 */ +hr { + overflow: visible; /* For IE */ + padding: 0; + border: none; + border-top: 1px solid #8c8b8b; + color: #8c8b8b; + text-align: center; + margin-top: 2em; + margin-bottom: 2em; +} + +hr:after { + content: "§"; + display: inline-block; + position: relative; + top: -0.55em; + font-size: 1.3em; + padding: 0 0.25em; + background: white; + color: #8c8b8b; + -webkit-transform: rotate(60deg); + -moz-transform: rotate(60deg); + transform: rotate(60deg); +} + +/* CODE */ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + color: white; + background: var(--code-block); + padding: 1em; + /* background: #000; */ + /* color: #f8f8f8; */ +} + +code.hljs { + padding: 3px 5px; +} + +/* code { */ +/* color: #faffc3 !important; */ +/* background-color: var(--code) !important; */ +/* } */ + +code, pre { + font-family: "NotoMono Nerd Font" !important; + font-size: 1.2rem; +} + +code.inline-code { + display: -ms-inline-flexbox; + display: inline-flex; + background: #ffc0cb54; + padding: 0 6px; + color: hsl(333deg, 100%, 45%); + border: none; +}