feat(client/rtl): handle padding-left

This commit is contained in:
Elian Doran
2025-10-08 17:45:58 +03:00
parent 6b93013674
commit 34117fa9ad
26 changed files with 65 additions and 65 deletions

View File

@@ -40,7 +40,7 @@ kbd {
border: none;
cursor: pointer;
font-size: 1.25em;
padding-left: 0.5em;
padding-inline-start: 0.5em;
padding-right: 0.5em;
color: var(--main-text-color);
}
@@ -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 {
@@ -126,7 +126,7 @@ 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-inline-start", "0")
.css("padding-right", "0")
.css("contain", "content")
.child(new FlexContainer("column").filling().id("mobile-sidebar-wrapper").child(new QuickSearchWidget()).child(new NoteTreeWidget().cssBlock(FANCYTREE_CSS)))

View File

@@ -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);

View File

@@ -634,7 +634,7 @@ pre > button.copy-button:active {
.full-text-search-button {
cursor: pointer;
font-size: 1.3em;
padding-left: 5px;
padding-inline-start: 5px;
padding-right: 5px;
}
@@ -642,14 +642,14 @@ pre > button.copy-button:active {
cursor: pointer;
font-size: 1.3em;
background: inherit !important;
padding-left: 5px;
padding-inline-start: 5px;
padding-right: 5px;
}
.open-external-link-button {
cursor: pointer;
font-size: 1.3em;
padding-left: 5px;
padding-inline-start: 5px;
padding-right: 5px;
padding-top: 8px;
}
@@ -657,7 +657,7 @@ pre > button.copy-button:active {
.go-to-selected-note-button {
cursor: pointer;
font-size: 1.3em;
padding-left: 4px;
padding-inline-start: 4px;
padding-right: 3px;
}
@@ -890,7 +890,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 {
@@ -1076,7 +1076,7 @@ svg.ck-icon .note-icon {
}
.help-cards ul {
padding-left: 20px;
padding-inline-start: 20px;
}
.help-cards kbd {
@@ -1153,7 +1153,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
}
.toast.no-title .toast-body {
padding-left: 0;
padding-inline-start: 0;
padding-right: 0;
}
@@ -1445,7 +1445,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
}
.area-expander-text {
padding-left: 20px;
padding-inline-start: 20px;
padding-right: 20px;
white-space: nowrap;
}
@@ -1789,7 +1789,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;
}
@@ -1966,7 +1966,7 @@ textarea {
}
body.electron.platform-darwin:not(.native-titlebar) .tab-row-container {
padding-left: 1em;
padding-inline-start: 1em;
}
#tab-row-left-spacer {
@@ -2049,7 +2049,7 @@ body.zen .title-row {
display: block !important;
height: unset !important;
-webkit-app-region: drag;
padding-left: env(titlebar-area-x);
padding-inline-start: env(titlebar-area-x);
padding-right: calc(100vw - env(titlebar-area-width, 100vw) + 2.5em);
}
@@ -2280,7 +2280,7 @@ footer.webview-footer button {
padding: 1em;
margin: 1.25em 0;
position: relative;
padding-left: 2.5em;
padding-inline-start: 2.5em;
overflow: hidden;
}
@@ -2338,7 +2338,7 @@ footer.webview-footer button {
.thinking-step {
margin-bottom: 8px;
padding-left: 10px;
padding-inline-start: 10px;
}
.thinking-step.observation {

View File

@@ -90,7 +90,7 @@
}
.tabulator-row .tabulator-cell input {
padding-left: var(--cell-horiz-padding-size) !important;
padding-inline-start: var(--cell-horiz-padding-size) !important;
padding-right: var(--cell-horiz-padding-size) !important;
}
@@ -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;

View File

@@ -197,7 +197,7 @@ 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-inline-start: calc(var(--timeline-left-gap) + var(--timeline-right-gap));
padding-right: var(--timeline-left-gap);
color: var(--active-item-text-color);
}
@@ -392,7 +392,7 @@ div.tn-tool-dialog {
}
.delete-notes-list .note-path {
padding-left: 8px;
padding-inline-start: 8px;
}
/*

View File

@@ -462,7 +462,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;
}

View File

@@ -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;

View File

@@ -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,7 +471,7 @@ div.bookmark-folder-widget .note-link .bx {
div.quick-search {
--padding-top: 8px;
--padding-left: 8px;
--padding-inline-start: 8px;
--padding-right: 8px;
--padding-bottom: 8px;
@@ -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-right) var(--padding-bottom) var(--padding-inline-start);
}
div.quick-search,
@@ -496,7 +496,7 @@ div.quick-search::before {
position: absolute;
content: "";
top: var(--padding-top);
left: var(--padding-left);
left: var(--padding-inline-start);
bottom: var(--padding-bottom);
right: var(--padding-right);
z-index: 0;
@@ -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;
}
@@ -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 {
@@ -1237,7 +1237,7 @@ body.mobile .note-title {
--input-background-color: transparent;
border-radius: 8px;
padding-left: 12px;
padding-inline-start: 12px;
}
/* The "Change note icon" button */
@@ -1326,7 +1326,7 @@ div.promoted-attributes-container input {
/* A promoted attribute card */
div.promoted-attribute-cell {
--pa-card-padding-left: 16px;
--pa-card-padding-inline-start: 16px;
--pa-card-padding-right: 2px;
--input-background-color: transparent;
@@ -1335,7 +1335,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-right) 2px var(--pa-card-padding-inline-start);
background: var(--promoted-attribute-card-background-color);
overflow-y: visible;
}
@@ -1350,7 +1350,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-right: var(--pa-card-padding-inline-start);
}
div.promoted-attribute-cell > * {
@@ -1408,7 +1408,7 @@ div.promoted-attribute-cell .multiplicity:has(span) {
--icon-button-size: 24px;
margin-inline-start: 8px;
margin-inline-end: calc(var(--pa-card-padding-left) - var(--pa-card-padding-right));
margin-inline-end: calc(var(--pa-card-padding-inline-start) - var(--pa-card-padding-right));
font-size: 0; /* Prevent whitespaces creating a gap between buttons */
display: flex;
}
@@ -1637,7 +1637,7 @@ 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;
}

View File

@@ -1,5 +1,5 @@
ul.fancytree-container {
padding-left: 0;
padding-inline-start: 0;
}
ul.fancytree-container li {
@@ -169,11 +169,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 {

View File

@@ -151,7 +151,7 @@
.backlink-excerpt {
border-left: 2px solid var(--main-border-color);
padding-left: 10px;
padding-inline-start: 10px;
opacity: 80%;
font-size: 90%;
}

View File

@@ -36,7 +36,7 @@ const TPL = /*html*/`
}
.related-notes-list {
padding-left: 20px;
padding-inline-start: 20px;
margin-top: 10px;
margin-bottom: 10px;
}

View File

@@ -76,7 +76,7 @@ export class TypedBasicWidget<T extends TypedComponent<any>> extends TypedCompon
/**
* Sets the CSS attribute of the given name to the given value.
*
* @param name the name of the CSS attribute to set (e.g. `padding-left`).
* @param name the name of the CSS attribute to set (e.g. `padding-inline-start`).
* @param value the value of the CSS attribute to set (e.g. `12px`).
* @returns self for chaining.
*/
@@ -89,7 +89,7 @@ export class TypedBasicWidget<T extends TypedComponent<any>> extends TypedCompon
* Sets the CSS attribute of the given name to the given value, but only if the condition provided is truthy.
*
* @param condition `true` in order to apply the CSS, `false` to ignore it.
* @param name the name of the CSS attribute to set (e.g. `padding-left`).
* @param name the name of the CSS attribute to set (e.g. `padding-inline-start`).
* @param value the value of the CSS attribute to set (e.g. `12px`).
* @returns self for chaining.
*/

View File

@@ -35,7 +35,7 @@ const DROPDOWN_TPL = `
}
.bookmark-folder-widget li .note-link {
padding-left: 35px;
padding-inline-start: 35px;
}
</style>

View File

@@ -168,7 +168,7 @@
right: 4px;
color: var(--main-text-color);
background-color: var(--main-background-color);
padding-left: 6px;
padding-inline-start: 6px;
}
.board-view-container .board-note.fade-in {

View File

@@ -4,11 +4,11 @@
}
.export-dialog form .format-choice {
padding-left: 40px;
padding-inline-start: 40px;
}
.export-dialog form .opml-versions {
padding-left: 60px;
padding-inline-start: 60px;
}
.export-dialog form .form-check-label {

View File

@@ -24,7 +24,7 @@ const TPL = /*html*/`<div class="highlights-list-widget">
}
.highlights-list > ol {
padding-left: 20px;
padding-inline-start: 20px;
}
.highlights-list li {

View File

@@ -9,7 +9,7 @@ import { formatMarkdown, applyHighlighting } from "./utils.js";
export const TPL = `
<div class="note-context-chat h-100 w-100 d-flex flex-column">
<!-- Move validation warning outside the card with better styling -->
<div class="provider-validation-warning alert alert-warning m-2 border-left border-warning" style="display: none; padding-left: 15px; border-left: 4px solid #ffc107; background-color: rgba(255, 248, 230, 0.9); font-size: 0.9rem; box-shadow: 0 2px 5px rgba(0,0,0,0.05);"></div>
<div class="provider-validation-warning alert alert-warning m-2 border-left border-warning" style="display: none; padding-inline-start: 15px; border-left: 4px solid #ffc107; background-color: rgba(255, 248, 230, 0.9); font-size: 0.9rem; box-shadow: 0 2px 5px rgba(0,0,0,0.05);"></div>
<div class="note-context-chat-container flex-grow-1 overflow-auto p-3">
<div class="note-context-chat-messages"></div>

View File

@@ -1,5 +1,5 @@
.note-icon-widget {
padding-left: 7px;
padding-inline-start: 7px;
margin-inline-end: 0;
width: 50px;
height: 50px;
@@ -36,7 +36,7 @@
.note-icon-widget .filter-row span {
display: block;
padding-left: 15px;
padding-inline-start: 15px;
padding-right: 15px;
font-weight: bold;
}

View File

@@ -49,7 +49,7 @@
}
.ribbon-tab-title:first-of-type {
padding-left: 10px;
padding-inline-start: 10px;
}
.ribbon-tab-spacer {

View File

@@ -155,7 +155,7 @@ const TAB_ROW_TPL = `
}
.tab-row-widget .note-tab[is-mini] .note-tab-wrapper {
padding-left: 2px;
padding-inline-start: 2px;
padding-right: 2px;
}

View File

@@ -29,13 +29,13 @@ const TPL = /*html*/`<div class="toc-widget">
contain: none;
overflow: auto;
position: relative;
padding-left:0px !important;
padding-inline-start:0px !important;
}
.toc ol {
position: relative;
overflow: hidden;
padding-left: 0px;
padding-inline-start: 0px;
transition: max-height 0.3s ease;
}
@@ -56,7 +56,7 @@ const TPL = /*html*/`<div class="toc-widget">
position: relative;
list-style: none;
align-items: center;
padding-left: 7px;
padding-inline-start: 7px;
cursor: pointer;
text-align: justify;
word-wrap: break-word;
@@ -84,7 +84,7 @@ const TPL = /*html*/`<div class="toc-widget">
}
.toc li {
padding-left: calc((var(--toc-depth-level) - 1) * 20px + 4px);
padding-inline-start: calc((var(--toc-depth-level) - 1) * 20px + 4px);
}
.toc li .collapse-button {

View File

@@ -11,7 +11,7 @@ const TPL = /*html*/`
<div class="attachment-detail note-detail-printable">
<style>
.attachment-detail {
padding-left: 15px;
padding-inline-start: 15px;
padding-right: 15px;
height: 100%;
display: flex;

View File

@@ -9,7 +9,7 @@ const TPL = /*html*/`
<div class="attachment-list note-detail-printable">
<style>
.attachment-list {
padding-left: 15px;
padding-inline-start: 15px;
padding-right: 15px;
}

View File

@@ -21,7 +21,7 @@ const TPL = /*html*/`
<style>
.note-detail-editable-text {
font-family: var(--detail-font-family);
padding-left: 14px;
padding-inline-start: 14px;
padding-top: 10px;
height: 100%;
}
@@ -32,7 +32,7 @@ const TPL = /*html*/`
}
body.mobile .note-detail-editable-text {
padding-left: 4px;
padding-inline-start: 4px;
}
.note-detail-editable-text a:hover {

View File

@@ -2,7 +2,7 @@
.options-mime-types {
list-style-type: none;
column-width: 250px;
padding-left: 0;
padding-inline-start: 0;
}
.options-mime-types > section {
@@ -11,6 +11,6 @@
}
.options-mime-types ul {
padding-left: 0;
padding-inline-start: 0;
}
/* #endregion */

View File

@@ -41,7 +41,7 @@ const TPL = /*html*/`
}
body.mobile .note-detail-readonly-text {
padding-left: 10px;
padding-inline-start: 10px;
}
.note-detail-readonly-text p:first-child, .note-detail-readonly-text::before {