diff --git a/apps/client/src/desktop.ts b/apps/client/src/desktop.ts index 6fa428656..cca6c8c0f 100644 --- a/apps/client/src/desktop.ts +++ b/apps/client/src/desktop.ts @@ -10,7 +10,6 @@ import { t } from "./services/i18n.js"; import options from "./services/options.js"; import type ElectronRemote from "@electron/remote"; import type Electron from "electron"; -import "bootstrap/dist/css/bootstrap.min.css"; import "boxicons/css/boxicons.min.css"; import "autocomplete.js/index_jquery.js"; diff --git a/apps/client/src/layouts/mobile_layout.tsx b/apps/client/src/layouts/mobile_layout.tsx index 1bc944418..3d21b9405 100644 --- a/apps/client/src/layouts/mobile_layout.tsx +++ b/apps/client/src/layouts/mobile_layout.tsx @@ -40,8 +40,8 @@ kbd { border: none; cursor: pointer; font-size: 1.25em; - padding-left: 0.5em; - padding-right: 0.5em; + padding-inline-start: 0.5em; + padding-inline-end: 0.5em; color: var(--main-text-color); } .quick-search { @@ -59,7 +59,7 @@ const FANCYTREE_CSS = ` margin-top: 0px; overflow-y: auto; contain: content; - padding-left: 10px; + padding-inline-start: 10px; } .fancytree-custom-icon { @@ -68,7 +68,7 @@ const FANCYTREE_CSS = ` .fancytree-title { font-size: 1.5em; - margin-left: 0.6em !important; + margin-inline-start: 0.6em !important; } .fancytree-node { @@ -81,7 +81,7 @@ const FANCYTREE_CSS = ` span.fancytree-expander { width: 24px !important; - margin-right: 5px; + margin-inline-end: 5px; } .fancytree-loading span.fancytree-expander { @@ -101,7 +101,7 @@ span.fancytree-expander { .tree-wrapper .scroll-to-active-note-button, .tree-wrapper .tree-settings-button { position: fixed; - margin-right: 16px; + margin-inline-end: 16px; display: none; } @@ -126,8 +126,8 @@ export default class MobileLayout { .class("d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-3 col-xl-3") .id("mobile-sidebar-wrapper") .css("max-height", "100%") - .css("padding-left", "0") - .css("padding-right", "0") + .css("padding-inline-start", "0") + .css("padding-inline-end", "0") .css("contain", "content") .child(new FlexContainer("column").filling().id("mobile-sidebar-wrapper").child(new QuickSearchWidget()).child(new NoteTreeWidget().cssBlock(FANCYTREE_CSS))) ) diff --git a/apps/client/src/login.ts b/apps/client/src/login.ts index 351ed4c1e..e70767840 100644 --- a/apps/client/src/login.ts +++ b/apps/client/src/login.ts @@ -1,5 +1,3 @@ -import "bootstrap/dist/css/bootstrap.min.css"; - // @ts-ignore - module = undefined // Required for correct loading of scripts in Electron if (typeof module === 'object') {window.module = module; module = undefined;} diff --git a/apps/client/src/menus/context_menu.ts b/apps/client/src/menus/context_menu.ts index 574d3091c..9efdac65f 100644 --- a/apps/client/src/menus/context_menu.ts +++ b/apps/client/src/menus/context_menu.ts @@ -150,8 +150,8 @@ class ContextMenu { this.$widget .css({ display: "block", - top: top, - left: left + top, + left }) .addClass("show"); } @@ -187,7 +187,7 @@ class ContextMenu { } // Create a new group to avoid column breaks before and after the seaparator / header. - // This is a workaround for Firefox not supporting break-before / break-after: avoid + // This is a workaround for Firefox not supporting break-before / break-after: avoid // for columns. if (shouldStartNewGroup) { $group = $("
"); @@ -313,7 +313,7 @@ class ContextMenu { } $group.append($item); - + // After adding a menu item, if the previous item was a separator or header, // reset the group so that the next item will be appended directly to the parent. if (shouldResetGroup) { diff --git a/apps/client/src/mobile.ts b/apps/client/src/mobile.ts index 507b9ff5a..f4daedc16 100644 --- a/apps/client/src/mobile.ts +++ b/apps/client/src/mobile.ts @@ -1,7 +1,6 @@ import appContext from "./components/app_context.js"; import noteAutocompleteService from "./services/note_autocomplete.js"; import glob from "./services/glob.js"; -import "bootstrap/dist/css/bootstrap.min.css"; import "boxicons/css/boxicons.min.css"; import "autocomplete.js/index_jquery.js"; diff --git a/apps/client/src/runtime.ts b/apps/client/src/runtime.ts index 50c385778..4c82481b1 100644 --- a/apps/client/src/runtime.ts +++ b/apps/client/src/runtime.ts @@ -1,5 +1,15 @@ import $ from "jquery"; + +async function loadBootstrap() { + if (document.body.dir === "rtl") { + await import("bootstrap/dist/css/bootstrap.rtl.min.css"); + } else { + await import("bootstrap/dist/css/bootstrap.min.css"); + } +} + (window as any).$ = $; (window as any).jQuery = $; +await loadBootstrap(); $("body").show(); diff --git a/apps/client/src/services/i18n.spec.ts b/apps/client/src/services/i18n.spec.ts index e64605949..e40881643 100644 --- a/apps/client/src/services/i18n.spec.ts +++ b/apps/client/src/services/i18n.spec.ts @@ -6,7 +6,7 @@ import { describe, expect, it } from "vitest"; describe("i18n", () => { it("translations are valid JSON", () => { for (const locale of LOCALES) { - if (locale.contentOnly) { + if (locale.contentOnly || locale.id === "en_rtl") { continue; } diff --git a/apps/client/src/services/utils.ts b/apps/client/src/services/utils.ts index 3c83d3e86..0f17bdc79 100644 --- a/apps/client/src/services/utils.ts +++ b/apps/client/src/services/utils.ts @@ -869,6 +869,18 @@ export function getErrorMessage(e: unknown) { } } +/** + * Handles left or right placement of e.g. tooltips in case of right-to-left languages. If the current language is a RTL one, then left and right are swapped. Other directions are unaffected. + * @param placement a string optionally containing a "left" or "right" value. + * @returns a left/right value swapped if needed, or the same as input otherwise. + */ +export function handleRightToLeftPlacement(placement: T) { + if (!glob.isRtl) return placement; + if (placement === "left") return "right"; + if (placement === "right") return "left"; + return placement; +} + export default { reloadFrontendApp, restartDesktopApp, diff --git a/apps/client/src/set_password.ts b/apps/client/src/set_password.ts index 47e02f1d1..13be761ec 100644 --- a/apps/client/src/set_password.ts +++ b/apps/client/src/set_password.ts @@ -1,4 +1,3 @@ -import "bootstrap/dist/css/bootstrap.min.css"; import "./stylesheets/auth.css"; // @TriliumNextTODO: is this even needed anymore? diff --git a/apps/client/src/setup.ts b/apps/client/src/setup.ts index d5659645e..29fbd15c0 100644 --- a/apps/client/src/setup.ts +++ b/apps/client/src/setup.ts @@ -1,7 +1,6 @@ import "jquery"; import utils from "./services/utils.js"; import ko from "knockout"; -import "bootstrap/dist/css/bootstrap.min.css"; // TriliumNextTODO: properly make use of below types // type SetupModelSetupType = "new-document" | "sync-from-desktop" | "sync-from-server" | ""; diff --git a/apps/client/src/stylesheets/calendar.css b/apps/client/src/stylesheets/calendar.css index a3ad89c34..48f01a9b8 100644 --- a/apps/client/src/stylesheets/calendar.css +++ b/apps/client/src/stylesheets/calendar.css @@ -60,7 +60,7 @@ appearance: none; text-align: center; border: 0; - border-left: unset; + border-inline-start: unset; background-color: var(--menu-background-color); font-weight: bold; outline: 0; @@ -102,7 +102,7 @@ content: ''; position: absolute; top: 0; - right: 0; + inset-inline-end: 0; bottom: 0; width: 1px; background-color: var(--main-border-color); diff --git a/apps/client/src/stylesheets/llm_chat.css b/apps/client/src/stylesheets/llm_chat.css index 9199d44c7..5bb4ecd1b 100644 --- a/apps/client/src/stylesheets/llm_chat.css +++ b/apps/client/src/stylesheets/llm_chat.css @@ -299,7 +299,7 @@ content: ''; position: absolute; top: 0; - left: -100%; + inset-inline-start: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, var(--hover-item-background-color, rgba(0, 0, 0, 0.03)), transparent); @@ -406,10 +406,10 @@ @keyframes shimmer { 0% { - left: -100%; + inset-inline-start: -100%; } 100% { - left: 100%; + inset-inline-start: 100%; } } diff --git a/apps/client/src/stylesheets/print.css b/apps/client/src/stylesheets/print.css index 114a52559..842570bde 100644 --- a/apps/client/src/stylesheets/print.css +++ b/apps/client/src/stylesheets/print.css @@ -218,7 +218,7 @@ span[style] { --box-vert-offset: calc((1lh - var(--box-size)) / 2); display: inline-block; - padding-left: calc(var(--box-size) + var(--box-text-gap)); + padding-inline-start: calc(var(--box-size) + var(--box-text-gap)); /* Source: https://pictogrammers.com/library/mdi/icon/checkbox-blank-outline/ */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5C3.89%2c3 3%2c3.89 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5C21%2c3.89 20.1%2c3 19%2c3M19%2c5V19H5V5H19Z' /%3e%3c/svg%3e"); background-position: 0 var(--box-vert-offset); @@ -281,7 +281,7 @@ span[style] { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: 100%; height: 100%; } diff --git a/apps/client/src/stylesheets/relation_map.css b/apps/client/src/stylesheets/relation_map.css index 7213da78f..67444e5aa 100644 --- a/apps/client/src/stylesheets/relation_map.css +++ b/apps/client/src/stylesheets/relation_map.css @@ -62,7 +62,7 @@ .note-detail-relation-map .endpoint { position: absolute; bottom: 37%; - right: 5px; + inset-inline-end: 5px; width: 1em; height: 1em; background-color: #333; diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index eb9449aef..ff9c30850 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -174,12 +174,12 @@ textarea, /* Add a gap between consecutive radios / check boxes */ label.tn-radio + label.tn-radio, label.tn-checkbox + label.tn-checkbox { - margin-left: 12px; + margin-inline-start: 12px; } label.tn-radio input[type="radio"], label.tn-checkbox input[type="checkbox"] { - margin-right: .5em; + margin-inline-end: .5em; } #left-pane input, @@ -226,7 +226,7 @@ samp { .badge { --bs-badge-color: var(--muted-text-color); - margin-left: 8px; + margin-inline-start: 8px; background: var(--accented-background-color); } @@ -338,8 +338,8 @@ button kbd { } .ui-menu kbd { - margin-left: 30px; - float: right; + margin-inline-start: 30px; + float: inline-end; } .suppressed { @@ -392,7 +392,7 @@ body.desktop .tabulator-popup-container { } .dropend .dropdown-toggle::after { - margin-left: 0.5em; + margin-inline-start: 0.5em; color: var(--muted-text-color); } @@ -403,7 +403,7 @@ body.desktop .tabulator-popup-container { .dropdown-menu .disabled .disabled-tooltip { pointer-events: all; - margin-left: 8px; + margin-inline-start: 8px; font-size: 0.5em; color: var(--disabled-tooltip-icon-color); cursor: help; @@ -443,7 +443,7 @@ body #context-menu-container .dropdown-item > span { .dropdown-item span.keyboard-shortcut, .dropdown-item *:not(.keyboard-shortcut) > kbd { flex-grow: 1; - text-align: right; + text-align: end; padding-inline-start: 12px; } @@ -504,7 +504,7 @@ body #context-menu-container .dropdown-item > span { body .cm-editor .cm-gutters { background-color: inherit !important; - border-right: none; + border-inline-end: none; } body .cm-editor .cm-placeholder { @@ -586,6 +586,10 @@ button.btn-sm { z-index: 1000; } +body[dir=rtl] .ck.ck-block-toolbar-button { + transform: translateX(-7px); +} + pre:not(.hljs) { color: var(--main-text-color) !important; white-space: pre-wrap; @@ -604,11 +608,11 @@ pre:not(.hljs) { pre > button.copy-button { position: absolute; top: var(--copy-button-margin-size); - right: var(--copy-button-margin-size); + inset-inline-end: var(--copy-button-margin-size); } :root pre:has(> button.copy-button) { - padding-right: calc(var(--copy-button-width) + (var(--copy-button-margin-size) * 2)); + padding-inline-end: calc(var(--copy-button-width) + (var(--copy-button-margin-size) * 2)); } pre > button.copy-button:hover { @@ -634,31 +638,31 @@ pre > button.copy-button:active { .full-text-search-button { cursor: pointer; font-size: 1.3em; - padding-left: 5px; - padding-right: 5px; + padding-inline-start: 5px; + padding-inline-end: 5px; } .input-clearer-button { cursor: pointer; font-size: 1.3em; background: inherit !important; - padding-left: 5px; - padding-right: 5px; + padding-inline-start: 5px; + padding-inline-end: 5px; } .open-external-link-button { cursor: pointer; font-size: 1.3em; - padding-left: 5px; - padding-right: 5px; + padding-inline-start: 5px; + padding-inline-end: 5px; padding-top: 8px; } .go-to-selected-note-button { cursor: pointer; font-size: 1.3em; - padding-left: 4px; - padding-right: 3px; + padding-inline-start: 4px; + padding-inline-end: 3px; } .go-to-selected-note-button.disabled, @@ -671,7 +675,7 @@ pre > button.copy-button:active { .note-autocomplete-input { /* this is for seamless integration of "input clearer" button */ - border-right: 0; + border-inline-end: 0; } table.promoted-attributes-in-tooltip { @@ -704,10 +708,10 @@ table.promoted-attributes-in-tooltip th { border-top-color: var(--main-border-color) !important; } .bs-tooltip-left .tooltip-arrow::before { - border-left-color: var(--main-border-color) !important; + border-inline-start-color: var(--main-border-color) !important; } .bs-tooltip-right .tooltip-arrow::before { - border-right-color: var(--main-border-color) !important; + border-inline-end-color: var(--main-border-color) !important; } .bs-tooltip-bottom .tooltip-arrow::after { @@ -717,17 +721,17 @@ table.promoted-attributes-in-tooltip th { border-top-color: var(--tooltip-background-color) !important; } .bs-tooltip-left .tooltip-arrow::after { - border-left-color: var(--tooltip-background-color) !important; + border-inline-start-color: var(--tooltip-background-color) !important; } .bs-tooltip-right .tooltip-arrow::after { - border-right-color: var(--tooltip-background-color) !important; + border-inline-end-color: var(--tooltip-background-color) !important; } .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before, .bs-tooltip-left .tooltip-arrow::before { - left: -1px; + inset-inline-start: -1px; border-width: 0.4rem 0 0.4rem 0.4rem; - border-left-color: var(--main-border-color) !important; + border-inline-start-color: var(--main-border-color) !important; } .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before, @@ -739,9 +743,9 @@ table.promoted-attributes-in-tooltip th { .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before, .bs-tooltip-right .tooltip-arrow::before { - right: -1px; + inset-inline-end: -1px; border-width: 0.4rem 0.4rem 0.4rem 0; - border-right-color: var(--main-border-color) !important; + border-inline-end-color: var(--main-border-color) !important; } .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before, @@ -753,9 +757,9 @@ table.promoted-attributes-in-tooltip th { .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::after, .bs-tooltip-left .tooltip-arrow::after { - left: -1px; + inset-inline-start: -1px; border-width: 0.4rem 0 0.4rem 0.4rem; - border-left-color: var(--tooltip-background-color) !important; + border-inline-start-color: var(--tooltip-background-color) !important; } .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::after, @@ -767,9 +771,9 @@ table.promoted-attributes-in-tooltip th { .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::after, .bs-tooltip-right .tooltip-arrow::after { - right: -1px; + inset-inline-end: -1px; border-width: 0.4rem 0.4rem 0.4rem 0; - border-right-color: var(--tooltip-background-color) !important; + border-inline-end-color: var(--tooltip-background-color) !important; } .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::after, @@ -788,7 +792,7 @@ table.promoted-attributes-in-tooltip th { background-color: var(--tooltip-background-color) !important; border: 1px solid var(--main-border-color); border-radius: 5px; - text-align: left; + text-align: start; color: var(--main-text-color) !important; max-width: 500px; box-shadow: 10px 10px 93px -25px #aaaaaa; @@ -821,7 +825,7 @@ table.promoted-attributes-in-tooltip th { .note-tooltip-content .open-popup-button { position: absolute; - right: 15px; + inset-inline-end: 15px; bottom: 8px; font-size: 1.2em; color: inherit; @@ -841,7 +845,7 @@ table.promoted-attributes-in-tooltip th { } .tooltip-inner figure.image-style-side { - float: right; + float: inline-end; } .tooltip.show { @@ -890,7 +894,7 @@ table.promoted-attributes-in-tooltip th { .aa-dropdown-menu .aa-suggestion .text { display: inline-block; width: calc(100% - 20px); - padding-left: 4px; + padding-inline-start: 4px; } .aa-dropdown-menu .aa-suggestion .search-result-title { @@ -916,7 +920,7 @@ table.promoted-attributes-in-tooltip th { } .help-button { - float: right; + float: inline-end; background: none; font-weight: 900; color: orange; @@ -1033,7 +1037,7 @@ svg.ck-icon .note-icon { counter-increment: footnote-counter; display: flex; list-style: none; - margin-left: 0.5em; + margin-inline-start: 0.5em; } .ck-content .footnote-item > * { @@ -1041,13 +1045,13 @@ svg.ck-icon .note-icon { } .ck-content .footnote-back-link { - margin-right: 0.1em; + margin-inline-end: 0.1em; position: relative; top: -0.2em; } .ck-content .footnotes .footnote-back-link > sup { - margin-right: 0; + margin-inline-end: 0; } .ck-content .footnote-item:before { @@ -1055,8 +1059,8 @@ svg.ck-icon .note-icon { display: inline-block; min-width: fit-content; position: relative; - right: 0.2em; - text-align: right; + inset-inline-end: 0.2em; + text-align: end; } .ck-content .footnote-content { @@ -1072,11 +1076,11 @@ svg.ck-icon .note-icon { } #options-dialog input[type="number"] { - text-align: right; + text-align: end; } .help-cards ul { - padding-left: 20px; + padding-inline-start: 20px; } .help-cards kbd { @@ -1153,8 +1157,8 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href } .toast.no-title .toast-body { - padding-left: 0; - padding-right: 0; + padding-inline-start: 0; + padding-inline-end: 0; } .toast.no-title .toast-header { @@ -1274,8 +1278,8 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href #context-menu-cover.show { position: fixed; top: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; z-index: 1000; background: rgba(0, 0, 0, 0.1); @@ -1288,8 +1292,8 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href body.mobile #context-menu-container.mobile-bottom-menu { position: fixed !important; - left: 0 !important; - right: 0 !important; + inset-inline-start: 0 !important; + inset-inline-end: 0 !important; bottom: 0 !important; top: unset !important; max-height: 70vh; @@ -1339,7 +1343,7 @@ body.desktop li.dropdown-submenu:hover > ul.dropdown-menu { .dropdown-submenu > .dropdown-menu { top: 0; - left: calc(100% - 2px); /* -2px, otherwise there's a small gap between menu and submenu where the hover can disappear */ + inset-inline-start: calc(100% - 2px); /* -2px, otherwise there's a small gap between menu and submenu where the hover can disappear */ margin-top: -10px; min-width: 15rem; /* to make submenu scrollable https://github.com/zadam/trilium/issues/3136 */ @@ -1348,7 +1352,7 @@ body.desktop li.dropdown-submenu:hover > ul.dropdown-menu { } body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu { - left: calc(-100% + 10px); + inset-inline-start: calc(-100% + 10px); } .right-dropdown-widget { @@ -1414,7 +1418,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu { .ck.ck-slash-command-button__text-part, .ck.ck-template-form__text-part { - margin-left: 0.5em; + margin-inline-start: 0.5em; line-height: 1.2em !important; } @@ -1445,8 +1449,8 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu { } .area-expander-text { - padding-left: 20px; - padding-right: 20px; + padding-inline-start: 20px; + padding-inline-end: 20px; white-space: nowrap; } @@ -1533,16 +1537,16 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu { position: fixed !important; bottom: calc(var(--mobile-bottom-offset) + var(--launcher-pane-size)) !important; top: unset !important; - left: 0 !important; - right: 0 !important; + inset-inline-start: 0 !important; + inset-inline-end: 0 !important; transform: unset !important; } #mobile-sidebar-container { position: fixed; top: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; z-index: 1000; transition: background-color 250ms ease-in-out; @@ -1557,7 +1561,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu { #mobile-sidebar-wrapper { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; bottom: 0; width: 85vw; padding-top: env(safe-area-inset-top); @@ -1589,8 +1593,8 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu { body.mobile .modal-dialog { position: fixed; bottom: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; margin: 0 !important; max-height: 85vh; display: flex; @@ -1748,8 +1752,8 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu { display: flex; flex-shrink: 0; flex-direction: column; - margin-left: 10px; - margin-right: 5px; + margin-inline-start: 10px; + margin-inline-end: 5px; } #right-pane .card-header { @@ -1789,7 +1793,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu { } #right-pane .card-body ul { - padding-left: 25px; + padding-inline-start: 25px; margin-bottom: 5px; } @@ -1800,8 +1804,8 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu { } .note-split { - margin-left: auto; - margin-right: auto; + margin-inline-start: auto; + margin-inline-end: auto; } .note-split.full-content-width { @@ -1820,7 +1824,7 @@ button.close:hover { .reference-link .bx { position: relative; top: 1px; - margin-right: 3px; + margin-inline-end: 3px; } .options-section:first-of-type h4 { @@ -1858,7 +1862,7 @@ textarea { .attachment-help-button { display: inline-block; - margin-left: 10px; + margin-inline-start: 10px; vertical-align: middle; font-size: 1em; } @@ -1966,7 +1970,7 @@ textarea { } body.electron.platform-darwin:not(.native-titlebar) .tab-row-container { - padding-left: 1em; + padding-inline-start: 1em; } #tab-row-left-spacer { @@ -1975,7 +1979,7 @@ body.electron.platform-darwin:not(.native-titlebar) .tab-row-container { } .tab-row-widget { - padding-right: calc(100vw - env(titlebar-area-width, 100vw)); + padding-inline-end: calc(100vw - env(titlebar-area-width, 100vw)); } .tab-row-container .toggle-button { @@ -2038,7 +2042,7 @@ body.zen .split-note-container-widget > .gutter { body.zen #launcher-pane { position: absolute !important; top: 0 !important; - right: 0 !important; + inset-inline-end: 0 !important; width: 64px !important; height: 64px !important; background: transparent !important; @@ -2049,8 +2053,8 @@ body.zen .title-row { display: block !important; height: unset !important; -webkit-app-region: drag; - padding-left: env(titlebar-area-x); - padding-right: calc(100vw - env(titlebar-area-width, 100vw) + 2.5em); + padding-inline-start: env(titlebar-area-x); + padding-inline-end: calc(100vw - env(titlebar-area-width, 100vw) + 2.5em); } body.zen .floating-buttons { @@ -2058,7 +2062,7 @@ body.zen .floating-buttons { } body.zen .floating-buttons-children { - right: 0; + inset-inline-end: 0; } body.zen .floating-buttons-children .button-widget { @@ -2217,7 +2221,7 @@ footer.webview-footer button { .chat-input { width: 100%; resize: none; - padding-right: 40px; + padding-inline-end: 40px; } .chat-buttons { @@ -2280,7 +2284,7 @@ footer.webview-footer button { padding: 1em; margin: 1.25em 0; position: relative; - padding-left: 2.5em; + padding-inline-start: 2.5em; overflow: hidden; } @@ -2293,7 +2297,7 @@ footer.webview-footer button { font-family: boxicons !important; position: absolute; top: 1em; - left: 1em; + inset-inline-start: 1em; } .admonition.note { --accent-color: var(--admonition-note-accent-color); } @@ -2319,18 +2323,18 @@ footer.webview-footer button { display: flex; align-items: center; font-size: 0.9em; - margin-right: 15px; + margin-inline-end: 15px; cursor: pointer; } .chat-option input[type="checkbox"] { - margin-right: 5px; + margin-inline-end: 5px; } /* Style for thinking process in chat responses */ .thinking-process { background-color: rgba(0, 0, 0, 0.05); - border-left: 3px solid var(--main-text-color); + border-inline-start: 3px solid var(--main-text-color); padding: 10px; margin: 10px 0; border-radius: 4px; @@ -2338,23 +2342,23 @@ footer.webview-footer button { .thinking-step { margin-bottom: 8px; - padding-left: 10px; + padding-inline-start: 10px; } .thinking-step.observation { - border-left: 2px solid #69c7ff; + border-inline-start: 2px solid #69c7ff; } .thinking-step.hypothesis { - border-left: 2px solid #9839f7; + border-inline-start: 2px solid #9839f7; } .thinking-step.evidence { - border-left: 2px solid #40c025; + border-inline-start: 2px solid #40c025; } .thinking-step.conclusion { - border-left: 2px solid #e2aa03; + border-inline-start: 2px solid #e2aa03; font-weight: bold; } @@ -2369,17 +2373,17 @@ footer.webview-footer button { .content-floating-buttons.top-left { top: 10px; - left: 10px; + inset-inline-start: 10px; } .content-floating-buttons.bottom-left { bottom: 10px; - left: 10px; + inset-inline-start: 10px; } .content-floating-buttons.bottom-right { bottom: 10px; - right: 10px; + inset-inline-end: 10px; } .content-floating-buttons button.bx { diff --git a/apps/client/src/stylesheets/table.css b/apps/client/src/stylesheets/table.css index 211f5d7c6..11e401fcb 100644 --- a/apps/client/src/stylesheets/table.css +++ b/apps/client/src/stylesheets/table.css @@ -67,13 +67,13 @@ } .tabulator div.tabulator-header .tabulator-frozen.tabulator-frozen-left { - margin-left: var(--cell-editing-border-width); + margin-inline-start: var(--cell-editing-border-width); } .tabulator div.tabulator-header .tabulator-col, .tabulator div.tabulator-header .tabulator-frozen.tabulator-frozen-left { background: var(--col-header-background-color); - border-right: var(--col-header-separator-border); + border-inline-end: var(--col-header-separator-border); } /* Table body */ @@ -90,8 +90,8 @@ } .tabulator-row .tabulator-cell input { - padding-left: var(--cell-horiz-padding-size) !important; - padding-right: var(--cell-horiz-padding-size) !important; + padding-inline-start: var(--cell-horiz-padding-size) !important; + padding-inline-end: var(--cell-horiz-padding-size) !important; } .tabulator-row { @@ -117,12 +117,12 @@ /* Cell */ .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left { - margin-right: var(--cell-editing-border-width); + margin-inline-end: var(--cell-editing-border-width); } .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left, .tabulator-row .tabulator-cell { - border-right-color: transparent; + border-inline-end-color: transparent; } .tabulator-row .tabulator-cell:not(.tabulator-editable) { @@ -156,14 +156,14 @@ /* Align items without children/expander to the ones with. */ .tabulator-cell[tabulator-field="title"] > span:first-child, /* 1st level */ .tabulator-cell[tabulator-field="title"] > div:first-child + span { /* sub-level */ - padding-left: 21px; + padding-inline-start: 21px; } /* Checkbox cells */ .tabulator .tabulator-cell:has(svg), .tabulator .tabulator-cell:has(input[type="checkbox"]) { - padding-left: 8px; + padding-inline-start: 8px; display: inline-flex; flex-direction: column; justify-content: center; diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css index 7bf49a02d..a167c08b5 100644 --- a/apps/client/src/stylesheets/theme-next/base.css +++ b/apps/client/src/stylesheets/theme-next/base.css @@ -120,8 +120,8 @@ body.desktop .dropdown-menu::before, border-radius: var(--dropdown-border-radius); position: absolute; top: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; z-index: -1; } @@ -211,7 +211,7 @@ html body .dropdown-item[disabled] { .dropdown-item span.keyboard-shortcut { color: var(--menu-item-keyboard-shortcut-color) !important; - margin-left: 16px; + margin-inline-start: 16px; } .dropdown-divider { @@ -224,8 +224,8 @@ html body .dropdown-item[disabled] { position: absolute; content: ""; top: -1px; - left: calc(0px - var(--menu-padding-size)); - right: calc(0px - var(--menu-padding-size)); + inset-inline-start: calc(0px - var(--menu-padding-size)); + inset-inline-end: calc(0px - var(--menu-padding-size)); border-top: 1px solid var(--menu-item-delimiter-color); } @@ -237,7 +237,7 @@ html body .dropdown-item[disabled] { align-items: center; justify-content: center; top: 0; - right: 0; + inset-inline-end: 0; margin: unset !important; border: unset !important; padding: 0 4px; @@ -246,6 +246,10 @@ html body .dropdown-item[disabled] { color: var(--menu-item-arrow-color) !important; } +body[dir=rtl] .dropdown-menu:not([data-popper-placement="bottom-start"]) .dropdown-toggle::after { + content: "\ea4d" !important; +} + /* Menu item group heading */ /* The heading body */ @@ -264,8 +268,8 @@ html body .dropdown-item[disabled] { content: ""; position: absolute; bottom: 8px; - left: calc(0px - var(--menu-padding-size)); - right: calc(0px - var(--menu-padding-size)); + inset-inline-start: calc(0px - var(--menu-padding-size)); + inset-inline-end: calc(0px - var(--menu-padding-size)); border-top: 1px solid var(--menu-item-delimiter-color); } @@ -357,13 +361,13 @@ li.dropdown-item a.dropdown-item-button:focus-visible { } #toast-container .toast:not(.no-title) .bx { - margin-right: 0.5em; + margin-inline-end: 0.5em; font-size: 1.1em; opacity: 0.85; } #toast-container .toast.no-title .bx { - margin-right: 0; + margin-inline-end: 0; font-size: 1.3em; } diff --git a/apps/client/src/stylesheets/theme-next/dialogs.css b/apps/client/src/stylesheets/theme-next/dialogs.css index 357a541ff..c3b1d5238 100644 --- a/apps/client/src/stylesheets/theme-next/dialogs.css +++ b/apps/client/src/stylesheets/theme-next/dialogs.css @@ -29,7 +29,7 @@ display: flex; justify-content: center; align-items: center; - margin-left: 8px; + margin-inline-start: 8px; border: 0; border-radius: 50%; padding: 0; @@ -56,7 +56,7 @@ } .modal .modal-header .help-button { - margin-right: 0; + margin-inline-end: 0; font-size: calc(var(--modal-control-button-size) * .75); font-family: unset; font-weight: bold; @@ -141,7 +141,7 @@ div.tn-tool-dialog { /* Search box wrapper */ .jump-to-note-dialog .input-group { - margin-right: 16px; + margin-inline-end: 16px; } .jump-to-note-dialog .input-group:hover { @@ -197,8 +197,8 @@ div.tn-tool-dialog { border: unset; padding-top: var(--timeline-item-top-padding); padding-bottom: var(--timeline-item-bottom-padding); - padding-left: calc(var(--timeline-left-gap) + var(--timeline-right-gap)); - padding-right: var(--timeline-left-gap); + padding-inline-start: calc(var(--timeline-left-gap) + var(--timeline-right-gap)); + padding-inline-end: var(--timeline-left-gap); color: var(--active-item-text-color); } @@ -259,7 +259,7 @@ div.tn-tool-dialog { position: absolute; content: ""; top: var(--connector-top, 0); - left: calc(var(--timeline-left-gap) + ((var(--timeline-bullet-size) - var(--timeline-connector-size)) / 2)); + inset-inline-start: calc(var(--timeline-left-gap) + ((var(--timeline-bullet-size) - var(--timeline-connector-size)) / 2)); bottom: var(--connector-bottom, 0); width: var(--timeline-connector-size); border-radius: var(--connector-radius, 0) var(--connector-radius, 0) 0 0; @@ -291,7 +291,7 @@ div.tn-tool-dialog { position: absolute; content: ""; top: calc(var(--timeline-item-top-padding) + var(--timeline-bullet-vertical-pos)); - left: var(--timeline-left-gap); + inset-inline-start: var(--timeline-left-gap); width: var(--timeline-bullet-size); height: var(--timeline-bullet-size); border-radius: 50%; @@ -374,7 +374,7 @@ div.tn-tool-dialog { } .help-dialog .help-cards kbd:first-child { - margin-left: 0; + margin-inline-start: 0; } /* Inline code - used for Markdown samples */ @@ -392,7 +392,7 @@ div.tn-tool-dialog { } .delete-notes-list .note-path { - padding-left: 8px; + padding-inline-end: 8px; } /* @@ -401,7 +401,7 @@ div.tn-tool-dialog { /* Labels */ .attr-edit-table th { - padding-right: 12px; + padding-inline-end: 12px; font-weight: normal; white-space: nowrap; } @@ -419,5 +419,5 @@ div.tn-tool-dialog { } .note-type-chooser-dialog div.note-type-dropdown .dropdown-item span.bx { - margin-right: .25em; + margin-inline-end: .25em; } \ No newline at end of file diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css index b5cf73428..31144eaa2 100644 --- a/apps/client/src/stylesheets/theme-next/forms.css +++ b/apps/client/src/stylesheets/theme-next/forms.css @@ -62,7 +62,7 @@ button.btn.btn-secondary span.bx, button.btn.btn-sm span.bx, button.btn.btn-success span.bx { color: var(--cmd-button-icon-color); - padding-right: 0.35em; + padding-inline-end: 0.35em; font-size: 1.2em; } @@ -71,7 +71,7 @@ button.btn.btn-primary kbd, button.btn.btn-secondary kbd, button.btn.btn-sm kbd, button.btn.btn-success kbd { - margin-left: 0.5em; + margin-inline-start: 0.5em; background: var(--cmd-button-keyboard-shortcut-background); color: var(--cmd-button-keyboard-shortcut-color); font-size: 0.6em; @@ -102,7 +102,7 @@ button.btn.btn-success kbd { } .btn-group .tn-tool-button + .tn-tool-button { - margin-left: 4px !important; + margin-inline-start: 4px !important; } /* The "x" icon button */ @@ -237,7 +237,7 @@ input::selection, outline-offset: 6px; background: var(--input-background-color); border-radius: 6px; - padding-right: 8px; + padding-inline-end: 8px; color: var(--quick-search-color); flex-wrap: nowrap; } @@ -357,13 +357,20 @@ select.form-control, outline: 3px solid transparent; outline-offset: 6px; - padding-right: calc(15px + 1.5rem); - background: var(--input-background-color) var(--dropdown-arrow); + padding-inline-end: calc(15px + 1.5rem); + background: var(--input-background-color) var(--dropdown-arrow);; color: var(--input-text-color); border: unset; border-radius: 0.375rem; } +body[dir=rtl] select, +body[dir=rtl] select.form-select, +body[dir=rtl] select.form-control, +body[dir=rtl] .select-button.dropdown-toggle.btn { + background-position: left 0.75rem center; +} + select:hover, select.form-select:hover, select.form-control:hover, @@ -444,7 +451,7 @@ optgroup { content: "\eae1"; width: 2em; height: 100%; - right: 0; + inset-inline-end: 0; top: 0; font-size: 1.2em; font-family: boxicons; @@ -462,7 +469,7 @@ optgroup { --box-label-gap: 0.5em; position: relative; - padding-left: calc(var(--box-size) + var(--box-label-gap)) !important; + padding-inline-start: calc(var(--box-size) + var(--box-label-gap)) !important; user-select: none; } @@ -471,7 +478,7 @@ optgroup { label.tn-checkbox > input[type="checkbox"] { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; width: var(--box-size); height: 100%; margin: unset; @@ -485,7 +492,7 @@ optgroup { content: ""; position: absolute; top: 50%; - left: 0; + inset-inline-start: 0; translate: 0 -50%; width: var(--box-size); height: var(--box-size); diff --git a/apps/client/src/stylesheets/theme-next/llm-chat.css b/apps/client/src/stylesheets/theme-next/llm-chat.css index dc3342485..da5b47895 100644 --- a/apps/client/src/stylesheets/theme-next/llm-chat.css +++ b/apps/client/src/stylesheets/theme-next/llm-chat.css @@ -19,11 +19,11 @@ } .chat-message.user-message { - margin-left: auto; + margin-inline-start: auto; } .chat-message.assistant-message { - margin-right: auto; + margin-inline-end: auto; } .message-avatar { @@ -33,7 +33,7 @@ display: flex; align-items: center; justify-content: center; - margin-right: 8px; + margin-inline-end: 8px; } .user-message .message-avatar { diff --git a/apps/client/src/stylesheets/theme-next/notes/text.css b/apps/client/src/stylesheets/theme-next/notes/text.css index 6499fa0b4..a16afb8aa 100644 --- a/apps/client/src/stylesheets/theme-next/notes/text.css +++ b/apps/client/src/stylesheets/theme-next/notes/text.css @@ -117,9 +117,9 @@ content: ""; position: absolute; top: var(--negative-padding); - right: var(--negative-padding); + inset-inline-end: var(--negative-padding); bottom: var(--negative-padding); - left: var(--negative-padding); + inset-inline-start: var(--negative-padding); border-radius: var(--dropdown-border-radius); backdrop-filter: var(--dropdown-backdrop-filter); z-index: -1; @@ -210,7 +210,7 @@ /* Separator */ :root .ck .ck-list__separator { margin: .5em 0; - margin-left: calc(0px - var(--ck-editor-popup-padding)); + margin-inline-start: calc(0px - var(--ck-editor-popup-padding)); width: calc(100% + (var(--ck-editor-popup-padding) * 2)); background: var(--menu-item-delimiter-color); } @@ -233,8 +233,8 @@ position: absolute; top: 0; bottom: var(--negative-padding); - left: var(--negative-padding); - right: var(--negative-padding); + inset-inline-start: var(--negative-padding); + inset-inline-end: var(--negative-padding); border-top: 1px solid var(--ck-editor-popup-border-color); background: var(--menu-section-background-color); } @@ -255,7 +255,7 @@ :root .ck.ck-toolbar .ck.ck-toolbar__separator { background: transparent; - border-left: 1px solid var(--ck-color-toolbar-border); + border-inline-start: 1px solid var(--ck-color-toolbar-border); } /* The last separator of the toolbar */ @@ -354,7 +354,7 @@ align-items: center; width: 100%; margin: 4px; - padding-right: 2em; + padding-inline-end: 2em; border: 1px solid var(--accent); border-radius: 6px; } @@ -492,7 +492,7 @@ button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck /* Move the label above the text box regardless of the text box state */ transform: translate(0, calc(-.2em - var(--ck-input-label-height))) !important; - padding-left: 0 !important; + padding-inline-start: 0 !important; background: transparent; font-size: .85em; font-weight: 600; @@ -556,7 +556,7 @@ pre button.copy-button.icon-action { } :root pre:has(> button.copy-button) { - padding-right: calc(var(--icon-button-size) + (var(--copy-button-margin-size) * 2)); + padding-inline-end: calc(var(--icon-button-size) + (var(--copy-button-margin-size) * 2)); } html .note-detail-editable-text :not(figure, .include-note, hr):first-child { @@ -615,12 +615,12 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child { .ck-content blockquote:before { content: "“"; - left: 0.2em; + inset-inline-start: 0.2em; } .ck-content blockquote:after { content: "”"; - right: 0.35em; + inset-inline-end: 0.35em; } .ck-content h2, diff --git a/apps/client/src/stylesheets/theme-next/pages.css b/apps/client/src/stylesheets/theme-next/pages.css index b15801f71..d0c092321 100644 --- a/apps/client/src/stylesheets/theme-next/pages.css +++ b/apps/client/src/stylesheets/theme-next/pages.css @@ -52,7 +52,7 @@ background-color: #f5f5f5; } .google-login-btn img { - margin-right: 10px; + margin-inline-end: 10px; width: 18px; height: 18px; } @@ -199,7 +199,7 @@ body.desktop .option-section:not(.tn-no-card) { color: var(--launcher-pane-text-color); margin-top: calc(-1 * var(--options-card-padding) - var(--options-title-font-size) - var(--options-title-offset)) !important; margin-bottom: calc(var(--options-title-offset) + var(--options-card-padding)) !important; - margin-left: calc(-1 * var(--options-card-padding)); + margin-inline-start: calc(-1 * var(--options-card-padding)); } .options-section:not(.tn-no-card) h5 { @@ -216,8 +216,8 @@ body.desktop .option-section:not(.tn-no-card) { .options-section hr { --bs-border-width: 2px; - margin-left: calc(var(--options-card-padding) * -1); - margin-right: calc(var(--options-card-padding) * -1); + margin-inline-start: calc(var(--options-card-padding) * -1); + margin-inline-end: calc(var(--options-card-padding) * -1); opacity: 1; color: var(--root-background); } diff --git a/apps/client/src/stylesheets/theme-next/ribbon.css b/apps/client/src/stylesheets/theme-next/ribbon.css index c20ecb488..192cfa6f4 100644 --- a/apps/client/src/stylesheets/theme-next/ribbon.css +++ b/apps/client/src/stylesheets/theme-next/ribbon.css @@ -95,7 +95,7 @@ div.promoted-attributes-container { /* Note type dropdown */ ul.note-type-dropdown .check { - margin-right: 6px; + margin-inline-end: 6px; } ul.note-type-dropdown li.dropdown-item { @@ -105,7 +105,7 @@ ul.note-type-dropdown li.dropdown-item { /* Editability dropdown */ ul.editability-dropdown li.dropdown-item > div { - margin-left: 4px; + margin-inline-start: 4px; } .editability-dropdown .dropdown-item .description { @@ -142,12 +142,12 @@ ul.editability-dropdown li.dropdown-item > div { } .attribute-list .save-attributes-button { - right: 30px; + inset-inline-end: 30px; } /* Note path in attribute detail dialog */ .attr-detail .note-path { - margin-left: 8px; + margin-inline-start: 8px; } /* diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index 28679abc7..bbae31685 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -69,7 +69,7 @@ body.background-effects.platform-win32.layout-vertical #vertical-main-container /* Add a border to the vertical launch bar if collapsed. */ body.layout-vertical #horizontal-main-container.left-pane-hidden #launcher-pane.vertical { - border-right: 2px solid var(--left-pane-collapsed-border-color); + border-inline-end: 2px solid var(--left-pane-collapsed-border-color); } body.background-effects.zen #root-widget { @@ -284,7 +284,7 @@ body.layout-horizontal > .horizontal { } #launcher-pane.horizontal .global-menu-button .global-menu-button-update-available { - right: -23px; + inset-inline-end: -23px; bottom: -22px; transform: scale(0.85); } @@ -400,9 +400,9 @@ body.layout-horizontal > .horizontal { content: ""; position: absolute; top: var(--vertical-margin); - right: var(--horiz-margin); + inset-inline-end: var(--horiz-margin); bottom: var(--vertical-margin); - left: var(--horiz-margin); + inset-inline-start: var(--horiz-margin); border-radius: 6px; background: var(--calendar-day-highlight-background); z-index: -1; @@ -450,7 +450,7 @@ div.bookmark-folder-widget .note-link:hover { } div.bookmark-folder-widget .note-link a { - padding-left: 8px; + padding-inline-start: 8px; color: var(--menu-text-color); cursor: default; } @@ -471,8 +471,8 @@ div.bookmark-folder-widget .note-link .bx { div.quick-search { --padding-top: 8px; - --padding-left: 8px; - --padding-right: 8px; + --padding-inline-start: 8px; + --padding-inline-end: 8px; --padding-bottom: 8px; position: relative; @@ -480,7 +480,7 @@ div.quick-search { align-items: center; height: unset; contain: unset; - padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left); + padding: var(--padding-top) var(--padding-inline-end) var(--padding-bottom) var(--padding-inline-start); } div.quick-search, @@ -496,9 +496,9 @@ div.quick-search::before { position: absolute; content: ""; top: var(--padding-top); - left: var(--padding-left); + inset-inline-start: var(--padding-inline-start); bottom: var(--padding-bottom); - right: var(--padding-right); + inset-inline-end: var(--padding-inline-end); z-index: 0; border: 2px solid transparent; border-radius: 6px; @@ -520,7 +520,7 @@ div.quick-search:focus-within:before { } div.quick-search input { - padding-left: 15px !important; + padding-inline-start: 15px !important; box-shadow: unset !important; background: transparent !important; } @@ -539,7 +539,7 @@ div.quick-search .search-button { justify-content: center; width: 25px; height: 25px; - margin-right: 8px; + margin-inline-end: 8px; border-radius: 50%; padding: 0; color: var(--quick-search-color) !important; @@ -631,12 +631,12 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu { } #left-pane .ui-fancytree ul { - padding-left: 10px; + padding-inline-start: 10px; } /* The root element of the tree */ #left-pane .fancytree-container > li:first-child > span { - padding-left: 12px; + padding-inline-start: 12px; } #left-pane span.fancytree-node.fancytree-active { @@ -658,9 +658,9 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu { position: absolute; content: ""; top: var(--left-pane-item-selected-shadow-size); - left: var(--left-pane-item-selected-shadow-size); + inset-inline-start: var(--left-pane-item-selected-shadow-size); bottom: var(--left-pane-item-selected-shadow-size); - right: var(--left-pane-item-selected-shadow-size); + inset-inline-end: var(--left-pane-item-selected-shadow-size); background: var(--left-pane-item-selected-background) !important; box-shadow: var(--left-pane-item-selected-shadow); border-radius: 6px; @@ -676,7 +676,7 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu { #left-pane span.fancytree-node.protected > span.fancytree-custom-icon:after { position: absolute; bottom: 0; - right: 0; + inset-inline-end: 0; font-size: 14px; content: "\eb4a"; font-family: "boxicons"; @@ -685,6 +685,10 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu { border-radius: 50%; } +body[dir=rtl] #left-pane span.fancytree-node.protected > span.fancytree-custom-icon:after { + transform: translateX(-25%); +} + body.mobile .fancytree-expander::before, body.mobile .fancytree-title, body.mobile .fancytree-node > span { @@ -699,7 +703,7 @@ body.mobile .fancytree-node > span { body.mobile:not(.force-fixed-tree) #mobile-sidebar-wrapper { border-top-right-radius: 12px; border-bottom-right-radius: 12px; - border-right: 1px solid var(--subtle-border-color); + border-inline-end: 1px solid var(--subtle-border-color); } } @@ -734,7 +738,7 @@ body.mobile .fancytree-node > span { } #left-pane .tree-item-button { - margin-right: 6px; + margin-inline-end: 6px; border: unset; border-radius: 50%; background: var(--left-pane-item-action-button-background); @@ -768,12 +772,12 @@ body.mobile .fancytree-node > span { /* Toolbar container (collapsed state) */ #left-pane .tree-actions { max-width: var(--tree-actions-toolbar-collapsed-width); - right: var(--tree-actions-toolbar-horizontal-margin); + inset-inline-end: var(--tree-actions-toolbar-horizontal-margin); bottom: var(--tree-actions-toolbar-vertical-margin); overflow: hidden; border: 1px solid transparent; padding: var(--tree-actions-toolbar-padding-size); - padding-right: var(--tree-actions-toolbar-collapsed-width); + padding-inline-end: var(--tree-actions-toolbar-collapsed-width); background: transparent; transition: max-width 400ms ease-out, @@ -817,7 +821,7 @@ body.mobile .fancytree-node > span { justify-content: center; align-items: center; top: 50%; - right: calc((var(--tree-actions-toolbar-collapsed-width) - var(--tree-actions-toolbar-expand-button-size)) / 2); + inset-inline-end: calc((var(--tree-actions-toolbar-collapsed-width) - var(--tree-actions-toolbar-expand-button-size)) / 2); width: var(--tree-actions-toolbar-expand-button-size); height: var(--tree-actions-toolbar-expand-button-size); box-shadow: 2px 2px 6px var(--left-pane-background-color); @@ -906,8 +910,8 @@ body.electron.background-effects.layout-horizontal .tab-row-container .toggle-bu content: ""; position: absolute; bottom: 0; - left: -10px; - right: -10px; + inset-inline-start: -10px; + inset-inline-end: -10px; top: 32px; height: 1px; border-bottom: 1px solid var(--launcher-pane-horiz-border-color); @@ -918,13 +922,13 @@ body.electron.background-effects.layout-horizontal .tab-row-container .tab-scrol position: relative; } -body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-left:after, -body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-right:after { +body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-inset-inline-start:after, +body.electron.background-effects.layout-horizontal .tab-row-container .tab-scroll-button-inset-inline-end:after { content: ""; position: absolute; bottom: 0; - left: 0px; - right: 0px; + inset-inline-start: 0px; + inset-inline-end: 0px; height: 1px; border-bottom: 1px solid var(--launcher-pane-horiz-border-color); } @@ -933,9 +937,9 @@ body.electron.background-effects.layout-horizontal .tab-row-container .note-tab[ content: ""; position: absolute; bottom: 0; - left: -32768px; + inset-inline-start: -32768px; top: var(--tab-height); - right: calc(100% - 1px); + inset-inline-end: calc(100% - 1px); height: 1px; border-bottom: 1px solid var(--launcher-pane-horiz-border-color); } @@ -944,9 +948,9 @@ body.electron.background-effects.layout-horizontal .tab-row-container .note-tab[ content: ""; position: absolute; bottom: 0; - left: 100%; + inset-inline-start: 100%; top: var(--tab-height); - right: 0; + inset-inline-end: 0; width: 100vw; height: 1px; border-bottom: 1px solid var(--launcher-pane-horiz-border-color); @@ -956,9 +960,9 @@ body.electron.background-effects.layout-horizontal .tab-row-container .note-new- content: ""; position: absolute; bottom: 0; - left: -4px; + inset-inline-start: -4px; top: calc(var(--tab-height), -1); - right: 0; + inset-inline-end: 0; width: 100vw; height: 1px; border-bottom: 1px solid var(--launcher-pane-horiz-border-color); @@ -1045,18 +1049,18 @@ body.layout-horizontal .tab-row-widget .note-tab .note-tab-wrapper { content: ""; position: absolute; top: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; height: 3px; background-color: var(--workspace-tab-background-color); } -.tab-row-widget .note-tab:nth-child(1) { +body:not([dir=rtl]) .tab-row-widget .note-tab:nth-child(1) { transform: translate3d(var(--tab-first-item-horiz-offset), 0, 0); } :root .tab-row-widget .note-tab .note-tab-icon { - padding-right: 5px; /* The gap between the icon and the title */ + padding-inline-end: 5px; /* The gap between the icon and the title */ } .tab-row-widget .note-tab[active] .note-tab-icon { @@ -1101,7 +1105,7 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging . .tab-row-widget .note-new-tab { position: relative; - margin-left: 3px; + margin-inline-start: 3px; color: transparent; /* Prevent the original "+" from being displayed */ } @@ -1114,7 +1118,7 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging . position: absolute; content: ""; top: calc((var(--tab-height) - var(--new-tab-button-size)) / 2); - left: calc((var(--tab-height) - var(--new-tab-button-size)) / 2); + inset-inline-start: calc((var(--tab-height) - var(--new-tab-button-size)) / 2); width: var(--new-tab-button-size); height: var(--new-tab-button-size); background: var(--new-tab-button-background); @@ -1139,7 +1143,7 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging . display: flex; position: absolute; content: "\ebc0"; - left: 0; + inset-inline-start: 0; top: 0; width: 100%; height: 100%; @@ -1221,23 +1225,23 @@ body.mobile .note-title { } .title-row > *:first-child { - margin-right: 0; + margin-inline-end: 0; } .title-row > *:nth-child(2) { - margin-left: 0; + margin-inline-start: 0; } .title-row { /* Aligns the "Create new split" button with the note menu button (the three dots button) */ - padding-right: 3px; + padding-inline-end: 3px; } .note-title-widget input { --input-background-color: transparent; border-radius: 8px; - padding-left: 12px; + padding-inline-start: 12px; } /* The "Change note icon" button */ @@ -1312,7 +1316,7 @@ body.mobile .note-title { /* The promoted attributes section */ div.promoted-attributes-container { display: flex; - margin-right: 10%; + margin-inline-end: 10%; padding: 6px 0; gap: 8px; align-items: stretch; @@ -1326,8 +1330,8 @@ div.promoted-attributes-container input { /* A promoted attribute card */ div.promoted-attribute-cell { - --pa-card-padding-left: 16px; - --pa-card-padding-right: 2px; + --pa-card-padding-inline-start: 16px; + --pa-card-padding-inline-end: 2px; --input-background-color: transparent; box-shadow: 1px 1px 2px var(--promoted-attribute-card-shadow-color); @@ -1335,7 +1339,7 @@ div.promoted-attribute-cell { display: inline-flex; margin: 0; border-radius: 8px; - padding: 2px var(--pa-card-padding-right) 2px var(--pa-card-padding-left); + padding: 2px var(--pa-card-padding-inline-end) 2px var(--pa-card-padding-inline-start); background: var(--promoted-attribute-card-background-color); overflow-y: visible; } @@ -1350,7 +1354,7 @@ div.promoted-attribute-cell { /* A promoted attribute card (boolean attribute) */ div.promoted-attribute-cell:has(input[type="checkbox"]):not(:has(.multiplicity > span)) { /* Checbox attribute, without multiplicity */ - padding-right: var(--pa-card-padding-left); + padding-inline-end: var(--pa-card-padding-inline-start); } div.promoted-attribute-cell > * { @@ -1400,15 +1404,15 @@ div.promoted-attribute-cell .tn-checkbox { /* Relocate the checkbox before the label */ div.promoted-attribute-cell.promoted-attribute-label-boolean > div:first-of-type { order: -1; - margin-right: 1.5em; + margin-inline-end: 1.5em; } /* The element containing the "new attribute" and "remove this attribute button" */ div.promoted-attribute-cell .multiplicity:has(span) { --icon-button-size: 24px; - margin-left: 8px; - margin-right: calc(var(--pa-card-padding-left) - var(--pa-card-padding-right)); + margin-inline-start: 8px; + margin-inline-end: calc(var(--pa-card-padding-inline-start) - var(--pa-card-padding-inline-end)); font-size: 0; /* Prevent whitespaces creating a gap between buttons */ display: flex; } @@ -1436,6 +1440,10 @@ div#center-pane .floating-buttons-children { opacity 250ms ease-out; } +body[dir=rtl] div#center-pane .floating-buttons-children { + transform-origin: left; +} + /* Floating buttons container (collapsed) */ div#center-pane .floating-buttons-children.temporarily-hidden { display: flex !important; @@ -1547,7 +1555,7 @@ div.floating-buttons-children .close-floating-buttons { } div.floating-buttons-children .close-floating-buttons { - margin-left: 0 !important; + margin-inline-start: 0 !important; background: var(--floating-button-hide-button-background); color: var(--floating-button-hide-button-color); } @@ -1637,12 +1645,12 @@ div.find-replace-widget div.find-widget-found-wrapper > span { } .find-replace-widget .form-check { - padding-left: 0; + padding-inline-start: 0; white-space: nowrap; } .find-replace-widget .form-check .form-check-input { - margin-left: 0; + margin-inline-start: 0; } /* Narrow version */ @@ -1662,13 +1670,13 @@ div.find-replace-widget div.find-widget-found-wrapper > span { .find-widget-box, .replace-widget-box { - padding-right: 3em !important; + padding-inline-end: 3em !important; } .find-widget-close-button { position: absolute; top: .85em; - right: .5em; + inset-inline-end: .5em; } .find-widget-box > * { @@ -1700,7 +1708,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span { } .replace-widget-box > * { - margin-right: unset !important; + margin-inline-end: unset !important; } div.replace-widget-box button.btn.btn-sm { @@ -1743,7 +1751,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span { #right-pane .toc li, #right-pane .highlights-list li { padding-top: 2px; - padding-right: 8px; + padding-inline-end: 8px; padding-bottom: 2px; border-radius: 4px; text-align: unset; @@ -1806,8 +1814,8 @@ div.find-replace-widget div.find-widget-found-wrapper > span { } .excalidraw .dropdown-menu .dropdown-menu-container > div:not([class]):not(:last-child) { - margin-left: calc(var(--padding) * var(--space-factor) * -1) !important; - margin-right: calc(var(--padding) * var(--space-factor) * -1) !important; + margin-inline-start: calc(var(--padding) * var(--space-factor) * -1) !important; + margin-inline-end: calc(var(--padding) * var(--space-factor) * -1) !important; } .excalidraw .dropdown-menu:before { diff --git a/apps/client/src/stylesheets/tree.css b/apps/client/src/stylesheets/tree.css index 385e596dd..976b434e2 100644 --- a/apps/client/src/stylesheets/tree.css +++ b/apps/client/src/stylesheets/tree.css @@ -1,5 +1,5 @@ ul.fancytree-container { - padding-left: 0; + padding-inline-start: 0; } ul.fancytree-container li { @@ -15,7 +15,7 @@ span.fancytree-node.fancytree-hide { flex-shrink: 1; flex-grow: 1; overflow: hidden; - margin-left: 7px; + margin-inline-start: 7px; outline: none; position: relative; top: 2px; @@ -59,7 +59,11 @@ span.fancytree-node.fancytree-hide { line-height: 1; position: relative; top: 2px; - margin-right: 5px; + margin-inline-end: 5px; +} + +body[dir=rtl] .fancytree-node:not(.fancytree-loading):not(.fancytree-expanded) .fancytree-expander:before { + content: "\ea4d"; /* bx bx-chevron-left */ } .fancytree-loading span.fancytree-expander { @@ -80,7 +84,7 @@ span.fancytree-node.fancytree-hide { width: 12px; height: 12px; margin-top: 2px; - margin-left: 1px; + margin-inline-start: 1px; border-width: 1px; border-style: solid; } @@ -169,11 +173,11 @@ span.fancytree-node.fancytree-active-clone:not(.fancytree-active) .fancytree-tit /* first nesting level has lower left padding to avoid extra left padding. Other levels are not affected */ .ui-fancytree > li > ul { - padding-left: 5px; + padding-inline-start: 5px; } .ui-fancytree ul { - padding-left: 20px; + padding-inline-start: 20px; } span.fancytree-active { @@ -229,14 +233,14 @@ span.fancytree-node.archived { display: none; font-size: 120%; cursor: pointer; - margin-left: 8px; + margin-inline-start: 8px; padding: 1px; border: 1px solid transparent; border-radius: 5px; } .unhoist-button.bx.tree-item-button { - margin-left: 0; /* unhoist button is on the left and doesn't need more margin */ + margin-inline-start: 0; /* unhoist button is on the left and doesn't need more margin */ display: block; /* keep always visible */ } diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index c6565fdfc..0d962270d 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -736,6 +736,7 @@ "mobile_detail_menu": { "insert_child_note": "Insert child note", "delete_this_note": "Delete this note", + "note_revisions": "Note revisions", "error_cannot_get_branch_id": "Cannot get branchId for notePath '{{notePath}}'", "error_unrecognized_command": "Unrecognized command {{command}}" }, @@ -1423,7 +1424,8 @@ "min-days-in-first-week": "Minimum days in first week", "first-week-info": "First week contains first Thursday of the year is based on ISO 8601 standard.", "first-week-warning": "Changing first week options may cause duplicate with existing Week Notes and the existing Week Notes will not be updated accordingly.", - "formatting-locale": "Date & number format" + "formatting-locale": "Date & number format", + "formatting-locale-auto": "Based on the application's language" }, "backup": { "automatic_backup": "Automatic backup", diff --git a/apps/client/src/types.d.ts b/apps/client/src/types.d.ts index fedad1662..36b56b9a6 100644 --- a/apps/client/src/types.d.ts +++ b/apps/client/src/types.d.ts @@ -46,6 +46,7 @@ interface CustomGlobals { platform?: typeof process.platform; linter: typeof lint; hasNativeTitleBar: boolean; + isRtl: boolean; } type RequireMethod = (moduleName: string) => any; diff --git a/apps/client/src/utils/formatters.ts b/apps/client/src/utils/formatters.ts index d3209be7b..40f97e673 100644 --- a/apps/client/src/utils/formatters.ts +++ b/apps/client/src/utils/formatters.ts @@ -1,3 +1,5 @@ +import options from "../services/options"; + type DateTimeStyle = "full" | "long" | "medium" | "short" | "none" | undefined; /** @@ -8,7 +10,7 @@ export function formatDateTime(date: string | Date | number | null | undefined, return ""; } - const locale = navigator.language; + const locale = options.get("formattingLocale") || options.get("locale") || navigator.language; let parsedDate; if (typeof date === "string" || typeof date === "number") { @@ -24,7 +26,7 @@ export function formatDateTime(date: string | Date | number | null | undefined, if (timeStyle !== "none" && dateStyle !== "none") { // Format the date and time - const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle, timeStyle }); + const formatter = new Intl.DateTimeFormat(locale, { dateStyle, timeStyle }); return formatter.format(parsedDate); } else if (timeStyle === "none" && dateStyle !== "none") { // Format only the date diff --git a/apps/client/src/widgets/FloatingButtons.css b/apps/client/src/widgets/FloatingButtons.css index f4fc8a092..88257cd67 100644 --- a/apps/client/src/widgets/FloatingButtons.css +++ b/apps/client/src/widgets/FloatingButtons.css @@ -7,7 +7,7 @@ .show-floating-buttons { position: absolute; top: var(--floating-buttons-vert-offset, 10px); - right: var(--floating-buttons-horiz-offset, 10px); + inset-inline-end: var(--floating-buttons-horiz-offset, 10px); display: flex; flex-direction: row; z-index: 100; @@ -15,8 +15,7 @@ .note-split.rtl .floating-buttons-children, .note-split.rtl .show-floating-buttons { - right: unset; - left: 10px; + inset-inline-end: 10px; } .note-split.rtl .close-floating-buttons { @@ -74,7 +73,7 @@ .show-floating-buttons { /* display: none;*/ - margin-left: 5px !important; + margin-inline-start: 5px !important; } .show-floating-buttons-button { @@ -97,7 +96,7 @@ /* #region Close floating buttons */ .close-floating-buttons { - margin-left: 5px !important; + margin-inline-start: 5px !important; } .close-floating-buttons:first-child { @@ -140,7 +139,7 @@ z-index: 10; position: absolute; top: 50px; - right: 10px; + inset-inline-end: 10px; width: 400px; border-radius: 10px; background-color: var(--accented-background-color); @@ -150,8 +149,8 @@ } .backlink-excerpt { - border-left: 2px solid var(--main-border-color); - padding-left: 10px; + border-inline-start: 2px solid var(--main-border-color); + padding-inline-start: 10px; opacity: 80%; font-size: 90%; } diff --git a/apps/client/src/widgets/api_log.css b/apps/client/src/widgets/api_log.css index ba874cab8..c370adbbc 100644 --- a/apps/client/src/widgets/api_log.css +++ b/apps/client/src/widgets/api_log.css @@ -23,6 +23,6 @@ color: var(--button-text-color); position: absolute; top: 10px; - right: 10px; + inset-inline-end: 10px; cursor: pointer; } \ No newline at end of file diff --git a/apps/client/src/widgets/attachment_detail.ts b/apps/client/src/widgets/attachment_detail.ts index 1d2eab902..31be61536 100644 --- a/apps/client/src/widgets/attachment_detail.ts +++ b/apps/client/src/widgets/attachment_detail.ts @@ -30,7 +30,7 @@ const TPL = /*html*/` } .attachment-details { - margin-left: 10px; + margin-inline-start: 10px; } .attachment-content-wrapper { diff --git a/apps/client/src/widgets/attribute_widgets/attribute_detail.ts b/apps/client/src/widgets/attribute_widgets/attribute_detail.ts index cdb7c7b43..2a7a55aef 100644 --- a/apps/client/src/widgets/attribute_widgets/attribute_detail.ts +++ b/apps/client/src/widgets/attribute_widgets/attribute_detail.ts @@ -36,7 +36,7 @@ const TPL = /*html*/` } .related-notes-list { - padding-left: 20px; + padding-inline-start: 20px; margin-top: 10px; margin-bottom: 10px; } @@ -46,7 +46,7 @@ const TPL = /*html*/` } .attr-edit-table th { - text-align: left; + text-align: start; } .attr-edit-table td input[not(type="checkbox")] { @@ -150,7 +150,7 @@ const TPL = /*html*/` ${t("attribute_detail.precision")}
- + ${t("attribute_detail.digits")}
@@ -176,7 +176,7 @@ const TPL = /*html*/`
); -}); \ No newline at end of file +}); diff --git a/apps/client/src/widgets/buttons/abstract_button.ts b/apps/client/src/widgets/buttons/abstract_button.ts index 7e0923b41..308009fa6 100644 --- a/apps/client/src/widgets/buttons/abstract_button.ts +++ b/apps/client/src/widgets/buttons/abstract_button.ts @@ -1,5 +1,6 @@ import { Tooltip } from "bootstrap"; import NoteContextAwareWidget from "../note_context_aware_widget.js"; +import { handleRightToLeftPlacement } from "../../services/utils.js"; const TPL = /*html*/`