diff options
| author | Mostafa Ahangarha <ahangarha@riseup.net> | 2023-12-19 21:42:52 +0330 |
|---|---|---|
| committer | nextcloud-command <nextcloud-command@users.noreply.github.com> | 2024-08-29 08:32:47 +0000 |
| commit | 723780d18431fad7f653379066796d41ce267cb5 (patch) | |
| tree | d30c7a9323b9b82b804750d625d3e4b4100914bc | |
| parent | 23efda911126a60c9af0198a7c842c726a8a4213 (diff) | |
| download | nextcloud-server-723780d18431fad7f653379066796d41ce267cb5.tar.gz nextcloud-server-723780d18431fad7f653379066796d41ce267cb5.zip | |
feat: Add bidi support in core directory
Signed-off-by: Mostafa Ahangarha <ahangarha@riseup.net>
83 files changed, 734 insertions, 449 deletions
diff --git a/apps/comments/src/components/Comment.vue b/apps/comments/src/components/Comment.vue index 6a02bcd8c6a..a504f1e4e71 100644 --- a/apps/comments/src/components/Comment.vue +++ b/apps/comments/src/components/Comment.vue @@ -316,7 +316,7 @@ $comment-padding: 10px; } &__actions { - margin-left: $comment-padding !important; + margin-inline-start: $comment-padding !important; } &__author { @@ -328,8 +328,8 @@ $comment-padding: 10px; &_loading, &__timestamp { - margin-left: auto; - text-align: right; + margin-inline-start: auto; + text-align: end; white-space: nowrap; color: var(--color-text-maxcontrast); } @@ -346,7 +346,7 @@ $comment-padding: 10px; &__submit { position: absolute !important; bottom: 5px; - right: 0; + inset-inline-end: 0; } &__message { diff --git a/apps/dashboard/src/DashboardApp.vue b/apps/dashboard/src/DashboardApp.vue index 3f0956e9d60..de668a0be7d 100644 --- a/apps/dashboard/src/DashboardApp.vue +++ b/apps/dashboard/src/DashboardApp.vue @@ -569,7 +569,7 @@ export default { background-size: 32px; width: 32px; height: 32px; - margin-right: 16px; + margin-inline-end: 16px; background-position: center; float: left; margin-top: -6px; @@ -609,7 +609,7 @@ export default { margin:auto; background-position: 16px center; padding: 12px 16px; - padding-left: 36px; + padding-inline-start: 36px; border-radius: var(--border-radius-pill); max-width: 200px; opacity: 1; @@ -661,7 +661,7 @@ export default { background-color: var(--color-background-hover); border: 2px solid var(--color-main-background); border-radius: var(--border-radius-large); - text-align: left; + text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -691,7 +691,7 @@ export default { input[type='checkbox'].checkbox + label:before { position: absolute; - right: 12px; + inset-inline-end: 12px; top: 16px; } diff --git a/apps/dav/css/schedule-response.css b/apps/dav/css/schedule-response.css index 51462766453..eef571027c5 100644 --- a/apps/dav/css/schedule-response.css +++ b/apps/dav/css/schedule-response.css @@ -41,13 +41,13 @@ form #selectPartStatForm label { } form #selectPartStatForm label:first-of-type { - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; + border-start-start-radius: 4px; + border-end-start-radius: 4px; } form #selectPartStatForm label:last-of-type { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; + border-start-end-radius: 4px; + border-end-end-radius: 4px; } form #selectPartStatForm label span { @@ -79,4 +79,4 @@ form input[type="submit"] { display: block; margin: 0 auto; padding: 11px 20px 9px -}
\ No newline at end of file +} diff --git a/apps/dav/src/components/AvailabilityForm.vue b/apps/dav/src/components/AvailabilityForm.vue index 307c62b8c35..fd7ede24ea6 100644 --- a/apps/dav/src/components/AvailabilityForm.vue +++ b/apps/dav/src/components/AvailabilityForm.vue @@ -164,12 +164,13 @@ export default { width: 120px; } .time-zone { - padding: 32px 12px 12px 0; - display: flex; - flex-wrap: wrap; + padding-block: 32px 12px; + padding-inline: 0 12px; + display: flex; + flex-wrap: wrap; &__heading { - margin-right: calc(var(--default-grid-baseline) * 2); + margin-inline-end: calc(var(--default-grid-baseline) * 2); line-height: var(--default-clickable-area); font-weight: bold; } diff --git a/apps/federatedfilesharing/src/components/PersonalSettings.vue b/apps/federatedfilesharing/src/components/PersonalSettings.vue index cbcea0c1e9b..f4f370d6b37 100644 --- a/apps/federatedfilesharing/src/components/PersonalSettings.vue +++ b/apps/federatedfilesharing/src/components/PersonalSettings.vue @@ -164,7 +164,7 @@ export default { margin-top: 0.5rem; button { display: inline-flex; - margin-left: 0.5rem; + margin-inline-start: 0.5rem; margin-top: 1rem; } &__website-button { @@ -184,6 +184,6 @@ export default { white-space: pre-wrap; } #cloudid { - margin-left: 0.25rem; + margin-inline-start: 0.25rem; } </style> diff --git a/apps/federation/css/settings-admin.css b/apps/federation/css/settings-admin.css index 1e298a5d796..6e6fcc6f488 100644 --- a/apps/federation/css/settings-admin.css +++ b/apps/federation/css/settings-admin.css @@ -14,7 +14,7 @@ .removeTrustedServer { display: none; vertical-align:middle; - padding-left: 10px; + padding-inline-start: 10px; } #ocFederationAddServerButton { @@ -22,14 +22,14 @@ } #listOfTrustedServers .status { - margin-right: 10px; + margin-inline-end: 10px; } #listOfTrustedServers .icon { cursor: pointer; display: inline-block; vertical-align: middle; - margin-left: 10px; + margin-inline-start: 10px; } #ocFederationAddServer #serverUrl { diff --git a/apps/files/css/detailsView.scss b/apps/files/css/detailsView.scss index f68c46c1e08..35bbbf17bb3 100644 --- a/apps/files/css/detailsView.scss +++ b/apps/files/css/detailsView.scss @@ -34,8 +34,8 @@ } .app-sidebar .thumbnailContainer.large { - margin-left: -15px; - margin-right: -35px; /* 15 + 20 for the close button */ + margin-inline-start: -15px; + margin-inline-end: -35px; /* 15 + 20 for the close button */ margin-top: -15px; } @@ -73,7 +73,7 @@ overflow-x: hidden; padding-top: 14px; font-size: 80%; - margin-left: 0; + margin-inline-start: 0; } .app-sidebar .thumbnail { @@ -81,7 +81,7 @@ min-height: 75px; display: inline-block; float: left; - margin-right: 10px; + margin-inline-end: 10px; background-size: contain; background-repeat: no-repeat; } @@ -126,7 +126,7 @@ .app-sidebar .close { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; opacity: .5; z-index: 1; width: 44px; diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 0dda28f19c8..2ab8ef716b3 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -29,7 +29,7 @@ display: flex; flex: 1 1; .button:not(:last-child) { - margin-right: 3px; + margin-inline-end: 3px; width: unset; gap: 14px; background-color: var(--color-primary-element-light); @@ -44,7 +44,7 @@ } #trash { - margin-right: 8px; + margin-inline-end: 8px; float: right; z-index: 1010; padding: 10px; @@ -212,21 +212,21 @@ table th .columntitle { } table.multiselect th .columntitle { display: inline-block; - margin-right: -20px; + margin-inline-end: -20px; } table th .columntitle.name { - padding-left: 0; - margin-left: 44px; + padding-inline-start: 0; + margin-inline-start: 44px; } table.multiselect th .columntitle.name { - margin-left: 0; + margin-inline-start: 0; } table th .sort-indicator { width: 10px; height: 8px; - margin-left: 5px; + margin-inline-start: 5px; display: inline-block; vertical-align: text-bottom; opacity: .3; @@ -248,7 +248,7 @@ table th:focus .sort-indicator.hidden { table th, table td { border-bottom: 1px solid var(--color-border); - text-align: left; + text-align: start; font-weight: normal; } table td { @@ -272,7 +272,7 @@ table th.column-selection { padding-top: 2px; } table th.column-size, table td.filesize { - text-align: right; + text-align: end; } table th.column-mtime, table td.date, table th.column-last, table td.column-last { @@ -303,7 +303,7 @@ table.multiselect thead th { } #app-content.with-app-sidebar table.multiselect thead{ - margin-right: 27%; + margin-inline-end: 27%; } table.multiselect .column-name { @@ -352,7 +352,7 @@ table td.filename .thumbnail { background-size: contain; background-position: center; background-repeat: no-repeat; - margin-left: 9px; + margin-inline-start: 9px; margin-top: 9px; border-radius: var(--border-radius); cursor: pointer; @@ -370,7 +370,7 @@ table tr[data-has-preview='true'] .thumbnail { table:not(.view-grid) td.filename input.filename { width: 70% !important; - margin-left: 48px !important; + margin-inline-start: 48px !important; cursor: text; } table td.filename form { @@ -402,7 +402,8 @@ table { text-overflow: ellipsis; height: 100%; z-index: 10; - padding: 0 20px 0 0; + padding: 0; + padding-inline-end: 20px; } } } @@ -435,13 +436,13 @@ table td.filename .uploadtext { position: absolute; font-weight: normal; // checkbox width - margin-left: 50px; - left: 0; + margin-inline-start: 50px; + inset-inline-start: 0; bottom: 0; height: 20px; padding: 0 4px; // align with file name - padding-left: 1px; + padding-inline-start: 1px; font-size: 11px; // double the font size line-height: 22px; @@ -457,7 +458,7 @@ table td.selection { /* File checkboxes */ .files-fileList tr td.selection>.selectCheckBox + label:before { opacity: 0.3; - margin-right: 0; + margin-inline-end: 0; } /* Show checkbox with full opacity when hovering, checked, or selected */ @@ -497,8 +498,7 @@ table td.selection { .files-fileList tr td.filename { position: relative; width: 100%; - padding-left: 0; - padding-right:0; + padding-inline: 0; -webkit-transition:background-image 500ms; -moz-transition:background-image 500ms; -o-transition:background-image 500ms; transition:background-image 500ms; } @@ -517,7 +517,7 @@ table td.selection { position: absolute; display: block; top: -8px; - right: -8px; + inset-inline-end: -8px; line-height: 100%; text-align: center; &.permanent { @@ -634,7 +634,7 @@ a.action.action-setreminder { /* hide text of the share action */ /* .hidden-visually for accessbility */ position: absolute; - left:-10000px; + inset-inline-start:-10000px; top: auto; width: 1px; height: 1px; @@ -648,8 +648,8 @@ a.action.action-setreminder { &.action-menu { padding-top: 17px; padding-bottom: 17px; - padding-left: 14px; - padding-right: 14px; + padding-inline-start: 14px; + padding-inline-end: 14px; } &.no-permission { &:hover, &:focus { @@ -691,11 +691,11 @@ a.action.action-setreminder { overflow: hidden; text-overflow: ellipsis; vertical-align: middle; - margin-left: 6px; + margin-inline-end: 6px; } .files-fileList .remoteAddress .userDomain { - margin-left: 0 !important; + margin-inline-start: 0 !important; } .files-fileList .favorite-mark.permanent { @@ -732,7 +732,7 @@ a.action.action-setreminder { .files-filestable .summary .filesummary { width: 100%; /* Width of checkbox and file preview */ - padding-left: 101px; + padding-inline-start: 101px; } /* Less whitespace needed on link share page * as there is a footer and action menus have fewer entries. @@ -763,23 +763,20 @@ table.dragshadow { z-index: 2000; } table.dragshadow td.filename { - padding-left:60px; - padding-right:16px; + padding-inline-start: 60px; + padding-inline-end: 16px; height: 36px; /* Override "max-width: 0" to prevent file name and size from overlapping */ max-width: unset; } table.dragshadow td.size { - padding-right:8px; + padding-inline-end: 8px; } .mask { z-index: 50; position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; background-color: var(--color-main-background); background-repeat: no-repeat no-repeat; background-position: 50%; @@ -797,14 +794,14 @@ table.dragshadow td.size { .newFileMenu { font-weight: 300; top: 100%; - left: -48px !important; + inset-inline-start: -48px !important; margin-top: 4px; min-width: 100px; z-index: 1001; /* Center triangle */ &::after { - left: 84px !important; + inset-inline-start: 84px !important; } } @@ -824,7 +821,7 @@ table.dragshadow td.size { user-select: none; display: flex; top: 0; - padding-left: 50px; /* width of the nav toggle button; */ + padding-inline-start: 50px; /* width of the nav toggle button; */ .actions { > div, @@ -849,7 +846,7 @@ table.dragshadow td.size { /* position controls for apps with app-navigation */ .viewer-mode #app-navigation + #app-content .files-controls { - left: 0; + inset-inline-start: 0; } .files-filestable .filename .action .icon, @@ -915,8 +912,8 @@ table.dragshadow td.size { } .notCreatable { - margin-left: 12px; - margin-right: 44px; + margin-inline-start: 12px; + margin-inline-end: 44px; margin-top: 12px; color: var(--color-main-text); overflow: auto; @@ -930,7 +927,7 @@ table.dragshadow td.size { .icon-alert-outline { top: -15px; position: relative; - margin-right: 4px; + margin-inline-end: 4px; } } @@ -1022,7 +1019,7 @@ table.dragshadow td.size { height: $grid-size; padding: $grid-pad; // same as action icon bottom and right padding top: 0; - left: 0; + inset-inline-start: 0; z-index: -1; // make sure the default click is the link .thumbnail { @@ -1038,9 +1035,9 @@ table.dragshadow td.size { * Position is inherited from the selection while in grid view */ .favorite-mark { - left: auto; + inset-inline-start: auto; top: -11px; // center in corner of thumbnail - right: -11px; // center in corner of thumbnail + inset-inline-end: -11px; // center in corner of thumbnail } } } @@ -1054,7 +1051,7 @@ table.dragshadow td.size { height: 28px; padding-top: 4px; // checkbox margins - padding-left: calc(44px - 16px); + padding-inline-start: calc(44px - 16px); } .name { @@ -1113,7 +1110,7 @@ table.dragshadow td.size { display: flex; align-items: center; position: absolute; - right: 0; + inset-inline-end: 0; .action { padding: $grid-pad; @@ -1157,7 +1154,7 @@ table.dragshadow td.size { input.filename { width: 100%; - margin-left: 0; + margin-inline-start: 0; cursor: text; } } @@ -1173,7 +1170,7 @@ table.dragshadow td.size { &.filename .favorite-mark { position: absolute; top: -8px; // half the checkbox width, center on corner of thumbnail - left: -8px; // half the checkbox width, center on corner of thumbnail + inset-inline-start: -8px; // half the checkbox width, center on corner of thumbnail display: flex; z-index: 10; @@ -1192,7 +1189,7 @@ table.dragshadow td.size { /* Position actions menu below file */ .popovermenu { - left: 0; + inset-inline-start: 0; width: $grid-size - 10px; // 2 * margin margin: 0 5px; @@ -1228,7 +1225,7 @@ table.dragshadow td.size { } .info { - margin-left: 0; + margin-inline-start: 0; } } } @@ -1243,7 +1240,7 @@ table.dragshadow td.size { padding: 22px; opacity: .5; float: right; - right: var(--default-grid-baseline); + inset-inline-end: var(--default-grid-baseline); top: var(--default-grid-baseline); z-index: 100; position: sticky; @@ -1280,14 +1277,14 @@ table.dragshadow td.size { /* Position actions menu correctly below 3-dot-menu */ .popovermenu { - left: -80px; + inset-inline-start: -80px; } } /* Right-align view toggle on link share page */ #view-toggle { position: absolute; - right: 0; + inset-inline-end: 0; top: 0; } } diff --git a/apps/files/css/mobile.scss b/apps/files/css/mobile.scss index 84c3ce7430f..9efdf1d9d7a 100644 --- a/apps/files/css/mobile.scss +++ b/apps/files/css/mobile.scss @@ -29,21 +29,21 @@ table td { /* remove shift for multiselect bar to account for missing navigation */ table.multiselect thead { - padding-left: 0; + padding-inline-start: 0; } .fileList a.action.action-menu img { - padding-left: 0; + padding-inline-start: 0; } .fileList .fileActionsMenu { - margin-right: 6px; + margin-inline-end: 6px; } /* hide text of the share action on mobile */ /* .hidden-visually for accessbility */ .fileList a.action-share span:not(.icon):not(.avatar) { position: absolute; - left:-10000px; + inset-inline-start: -10000px; top: auto; width: 1px; height: 1px; @@ -90,6 +90,6 @@ table.dragshadow { /* Remove the margin to reduce the overlap between the name and the icons */ table.multiselect th .columntitle.name { - margin-left: 0; + margin-inline-start: 0; } } diff --git a/apps/files/css/upload.scss b/apps/files/css/upload.scss index 12e5067cc39..4ab46d90701 100644 --- a/apps/files/css/upload.scss +++ b/apps/files/css/upload.scss @@ -8,7 +8,7 @@ height: 36px; width: 39px; padding: 0 !important; /* override default control bar button padding */ - margin-left: 3px; + margin-inline-start: 3px; overflow: hidden; vertical-align: top; position: relative; @@ -36,16 +36,16 @@ display: inline-block; vertical-align: top; height: 36px; - margin-left: 3px; + margin-inline-start: 3px; } .uploadprogresswrapper > input[type='button'] { height: 36px; - margin-left: 3px; + margin-inline-start: 3px; } #uploadprogressbar { border-color: var(--color-border-dark); border-radius: var(--border-radius-pill) 0 0 var(--border-radius-pill); - border-right: 0; + border-inline-end: 0; position:relative; float: left; width: 200px; @@ -60,7 +60,7 @@ #uploadprogressbar .ui-progressbar-value.ui-widget-header.ui-corner-left { height: calc(100% + 2px); top: -2px; - left: -1px; + inset-inline-start: -1px; position: absolute; overflow: hidden; background-color: var(--color-primary-element); @@ -90,8 +90,8 @@ } #uploadprogressbar + .stop { - border-top-left-radius: 0; - border-bottom-left-radius: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; } .oc-dialog .fileexists { @@ -121,11 +121,10 @@ width: 100%; } .oc-dialog .fileexists th { - padding-left: 0; - padding-right: 0; + padding-inline: 0; } .oc-dialog .fileexists th input[type='checkbox'] { - margin-right: 3px; + margin-inline-end: 3px; } .oc-dialog .fileexists th:first-child { width: 225px; @@ -135,7 +134,7 @@ color: var(--color-main-text); } .oc-dialog .fileexists th .count { - margin-left: 3px; + margin-inline-start: 3px; } .oc-dialog .fileexists .conflicts .template { display: none; diff --git a/apps/files/src/components/DragAndDropNotice.vue b/apps/files/src/components/DragAndDropNotice.vue index 72a57deeb28..23ebf7cd296 100644 --- a/apps/files/src/components/DragAndDropNotice.vue +++ b/apps/files/src/components/DragAndDropNotice.vue @@ -243,7 +243,7 @@ export default defineComponent({ border-color: black; h3 { - margin-left: 16px; + margin-inline-start: 16px; color: inherit; } diff --git a/apps/files/src/components/DragAndDropPreview.vue b/apps/files/src/components/DragAndDropPreview.vue index c19b166581f..7c9c6f4f1a7 100644 --- a/apps/files/src/components/DragAndDropPreview.vue +++ b/apps/files/src/components/DragAndDropPreview.vue @@ -98,7 +98,7 @@ $stack-shift: 6px; .files-list-drag-image { position: absolute; top: -9999px; - left: -9999px; + inset-inline-start: -9999px; display: flex; overflow: hidden; align-items: center; @@ -119,7 +119,7 @@ $stack-shift: 6px; &__icon { overflow: visible; - margin-right: 12px; + margin-inline-end: 12px; img { max-width: 100%; @@ -140,7 +140,7 @@ $stack-shift: 6px; // Stack effect if more than one element .files-list__row-icon + .files-list__row-icon { margin-top: $stack-shift; - margin-left: $stack-shift - $size; + margin-inline-start: $stack-shift - $size; & + .files-list__row-icon { margin-top: $stack-shift * 2; } diff --git a/apps/files/src/components/FileEntry/FileEntryName.vue b/apps/files/src/components/FileEntry/FileEntryName.vue index 439037b984e..cf425127282 100644 --- a/apps/files/src/components/FileEntry/FileEntryName.vue +++ b/apps/files/src/components/FileEntry/FileEntryName.vue @@ -26,7 +26,8 @@ :aria-hidden="isRenaming" class="files-list__row-name-link" data-cy-files-list-row-name-link - v-bind="linkTo.params"> + v-bind="linkTo.params" + dir="auto"> <!-- Filename --> <span class="files-list__row-name-text"> <!-- Keep the filename stuck to the extension to avoid whitespace rendering issues--> diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue index 75f57924984..743d85beeba 100644 --- a/apps/files/src/components/FilesListVirtual.vue +++ b/apps/files/src/components/FilesListVirtual.vue @@ -443,7 +443,7 @@ export default defineComponent({ display: flex; align-items: center; flex: 0 0 auto; - justify-content: left; + justify-content: start; width: var(--row-height); height: var(--row-height); margin: 0; @@ -465,8 +465,8 @@ export default defineComponent({ position: absolute; display: block; top: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; opacity: .1; z-index: -1; @@ -530,7 +530,7 @@ export default defineComponent({ width: var(--icon-preview-size); height: 100%; // Show same padding as the checkbox right padding for visual balance - margin-right: var(--checkbox-padding); + margin-inline-end: var(--checkbox-padding); color: var(--color-primary-element); // Icon is also clickable @@ -576,7 +576,7 @@ export default defineComponent({ &-favorite { position: absolute; top: 0px; - right: -10px; + inset-inline-end: -10px; } // File and folder overlay @@ -635,7 +635,7 @@ export default defineComponent({ color: var(--color-main-text); // Make some space for the outline padding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline)); - padding-left: 0; + padding-inline-start: -10px; // Align two name and ext display: inline-flex; } @@ -654,7 +654,7 @@ export default defineComponent({ input { width: 100%; // Align with text, 0 - padding - border - margin-left: -8px; + margin-inline-start: -8px; padding: 2px 6px; border-width: 2px; @@ -685,7 +685,7 @@ export default defineComponent({ } .files-list__row-action--inline { - margin-right: 7px; + margin-inline-end: 7px; } .files-list__row-mtime, @@ -754,7 +754,7 @@ tbody.files-list__tbody.files-list__tbody--grid { position: absolute; z-index: 9; top: calc(var(--item-padding)/2); - left: calc(var(--item-padding)/2); + inset-inline-start: calc(var(--item-padding)/2); overflow: hidden; --checkbox-container-size: 44px; width: var(--checkbox-container-size); @@ -777,7 +777,7 @@ tbody.files-list__tbody.files-list__tbody--grid { .files-list__row-icon-favorite { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; display: flex; align-items: center; justify-content: center; @@ -814,7 +814,7 @@ tbody.files-list__tbody.files-list__tbody--grid { .files-list__row-actions { position: absolute; - right: calc(var(--half-clickable-area) / 2); + inset-inline-end: calc(var(--half-clickable-area) / 2); bottom: calc(var(--mtime-height) / 2); width: var(--clickable-area); height: var(--clickable-area); diff --git a/apps/files/src/components/NavigationQuota.vue b/apps/files/src/components/NavigationQuota.vue index 0e5ef510342..2d4e616adc0 100644 --- a/apps/files/src/components/NavigationQuota.vue +++ b/apps/files/src/components/NavigationQuota.vue @@ -174,7 +174,7 @@ export default { progress { position: absolute; bottom: 12px; - margin-left: 44px; + margin-inline-start: 44px; width: calc(100% - 44px - 22px); } } diff --git a/apps/files/src/components/TransferOwnershipDialogue.vue b/apps/files/src/components/TransferOwnershipDialogue.vue index f13e6655354..5496c9edc92 100644 --- a/apps/files/src/components/TransferOwnershipDialogue.vue +++ b/apps/files/src/components/TransferOwnershipDialogue.vue @@ -220,7 +220,7 @@ p { margin-bottom: calc(var(--default-grid-baseline) * 2); span { - margin-right: 8px; + margin-inline-end: 8px; } } @@ -231,7 +231,7 @@ p { } .transfer-select-row { span { - margin-right: 8px; + margin-inline-end: 8px; } &__choose_button { diff --git a/apps/files/src/views/TemplatePicker.vue b/apps/files/src/views/TemplatePicker.vue index e2fb815380d..a62b6f76c6a 100644 --- a/apps/files/src/views/TemplatePicker.vue +++ b/apps/files/src/views/TemplatePicker.vue @@ -328,7 +328,7 @@ export default defineComponent({ &__loading { position: absolute; top: 0; - left: 0; + inset-inline-start: 0; justify-content: center; width: 100%; height: 100%; diff --git a/apps/files_external/css/settings.scss b/apps/files_external/css/settings.scss index 2652edabc0e..6d213172942 100644 --- a/apps/files_external/css/settings.scss +++ b/apps/files_external/css/settings.scss @@ -75,7 +75,7 @@ } #selectBackend { - margin-left: -10px; + margin-inline-start: -10px; width: 150px; } @@ -88,11 +88,11 @@ } #externalStorage td.configuration input.added { - margin-right: 6px; + margin-inline-end: 6px; } #externalStorage label > input[type="checkbox"] { - margin-right: 3px; + margin-inline-end: 3px; } #externalStorage td.configuration label { @@ -120,7 +120,7 @@ } #userMountingBackends { - padding-left: 25px; + padding-inline-start: 25px; } .files-external-select2 .select2-results .select2-result-label { @@ -137,14 +137,14 @@ .files-external-select2 .select2-results .select2-result-label .avatardiv + span { position: absolute; top: 5px; - margin-left: 10px; + margin-inline-start: 10px; } .files-external-select2 .select2-results .select2-result-label .avatardiv[data-type="group"] + span { vertical-align: top; top: 6px; position: absolute; max-width: 80%; - left: 30px; + inset-inline-start: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; @@ -154,7 +154,7 @@ display: flex; .select2-search-choice-close { display: block; - left: auto; + inset-inline-start: auto; position: relative; width: 20px; } diff --git a/apps/files_external/src/css/fileEntryStatus.scss b/apps/files_external/src/css/fileEntryStatus.scss index 3ffd2d61ac1..d5506be654d 100644 --- a/apps/files_external/src/css/fileEntryStatus.scss +++ b/apps/files_external/src/css/fileEntryStatus.scss @@ -23,8 +23,8 @@ position: absolute; display: block; top: 0; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; bottom: 0; opacity: .1; z-index: -1; diff --git a/apps/files_reminders/src/actions/setReminderSuggestionActions.scss b/apps/files_reminders/src/actions/setReminderSuggestionActions.scss index 63d875bd56a..9997e1880dc 100644 --- a/apps/files_reminders/src/actions/setReminderSuggestionActions.scss +++ b/apps/files_reminders/src/actions/setReminderSuggestionActions.scss @@ -10,14 +10,15 @@ &::before { content: ""; - margin: 3px 10px 3px 15px; + margin-block: 3px; + margin-inline: 15px 10px; border-bottom: 1px solid var(--color-border-dark); cursor: default; display: flex; height: 0; position: absolute; - left: 0; - right: 0; + inset-inline-start: 0; + inset-inline-end: 0; top: -10px; } } diff --git a/apps/files_sharing/css/mobile.scss b/apps/files_sharing/css/mobile.scss index 6d95c82155b..1f1a9b74357 100644 --- a/apps/files_sharing/css/mobile.scss +++ b/apps/files_sharing/css/mobile.scss @@ -37,7 +37,8 @@ table td.filename .nametext { /* some padding for better clickability */ .files-fileList a.action img { - padding: 0 6px 0 12px; + padding-block: 0; + padding-inline: 12px 6px; } /* hide text of the actions on mobile */ .files-fileList a.action:not(.menuitem) span { @@ -53,7 +54,7 @@ table td.filename .nametext { } #header .menutoggle { - padding-right: 14px; + padding-inline-end: 14px; background-position: center; } .note { diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss index 2f4a28b761c..c3451ce0aae 100644 --- a/apps/files_sharing/css/public.scss +++ b/apps/files_sharing/css/public.scss @@ -55,8 +55,7 @@ $download-button-section-height: 200px; #imgframe audio { display: block; - margin-left: auto; - margin-right: auto; + margin-inline: auto; } #imgframe #viewer[data-handler=audios] { @@ -71,7 +70,7 @@ $download-button-section-height: 200px; #imgframe .text-preview { display: inline-block; position: relative; - text-align: left; + text-align: start; white-space: pre-wrap; overflow-y: scroll; height: auto; @@ -99,12 +98,12 @@ $download-button-section-height: 200px; /* fix multiselect bar offset on shared page */ thead { - left: 0 !important; + inset-inline-start: 0 !important; } #data-upload-form { position: relative; - right: 0; + inset-inline-end: 0; height: 32px; overflow: hidden; padding: 0; @@ -120,8 +119,7 @@ thead { text-overflow: ellipsis; max-width: 90%; display: inline-block; - margin-left: auto; - margin-right: auto; + margin-inline: auto; margin-top: 16px; } @@ -171,7 +169,7 @@ thead { display: inline-block; vertical-align: text-top; margin-bottom: 0; - margin-right: 5px; + margin-inline-end: 5px; opacity: 1; } @@ -192,13 +190,13 @@ thead { line-height: initial; margin: 20px; padding: 10px 20px; - padding-left: 42px; + padding-inline-start: 42px; } #public-upload .emptycontent ul { width: 230px; margin: 5px auto 5vh; - text-align: left; + text-align: start; } #public-upload .emptycontent li { @@ -209,14 +207,14 @@ thead { } #public-upload .emptycontent li img { - margin-right: 5px; + margin-inline-end: 5px; position: relative; top: 2px; } #drop-upload-progress-indicator span.icon-loading-small { - padding-left: 18px; - margin-right: 7px; + padding-inline-start: 18px; + margin-inline-end: 7px; } #drop-uploaded-files li #drop-upload-name { @@ -235,7 +233,7 @@ thead { .note { margin: 0 auto 30px; max-width: 400px; - text-align: left; + text-align: start; } #note-content { diff --git a/apps/files_sharing/src/components/SharingEntryInherited.vue b/apps/files_sharing/src/components/SharingEntryInherited.vue index fec2bcf6f63..9718a08f763 100644 --- a/apps/files_sharing/src/components/SharingEntryInherited.vue +++ b/apps/files_sharing/src/components/SharingEntryInherited.vue @@ -92,7 +92,7 @@ export default { } } &__actions { - margin-left: auto; + margin-inline-start: auto; } } </style> diff --git a/apps/files_sharing/src/components/SharingEntryLink.vue b/apps/files_sharing/src/components/SharingEntryLink.vue index cf2e2e588d3..b65f3c533e9 100644 --- a/apps/files_sharing/src/components/SharingEntryLink.vue +++ b/apps/files_sharing/src/components/SharingEntryLink.vue @@ -896,7 +896,7 @@ export default { height: 44px; margin: 0; padding: 14px; - margin-left: auto; + margin-inline-start: auto; } // put menus to the left @@ -905,7 +905,7 @@ export default { ~.action-item, ~.sharing-entry__loading { - margin-left: 0; + margin-inline-start: 0; } } diff --git a/apps/files_sharing/src/components/SharingEntrySimple.vue b/apps/files_sharing/src/components/SharingEntrySimple.vue index 5e7ebf2dd93..a7248c685e7 100644 --- a/apps/files_sharing/src/components/SharingEntrySimple.vue +++ b/apps/files_sharing/src/components/SharingEntrySimple.vue @@ -86,7 +86,7 @@ export default { max-width: inherit; } &__actions { - margin-left: auto !important; + margin-inline-start: auto !important; } } </style> diff --git a/apps/files_sharing/src/style/sharebreadcrumb.scss b/apps/files_sharing/src/style/sharebreadcrumb.scss index 944d529b1b3..6ee05c45306 100644 --- a/apps/files_sharing/src/style/sharebreadcrumb.scss +++ b/apps/files_sharing/src/style/sharebreadcrumb.scss @@ -8,7 +8,7 @@ li.crumb span.icon-public { display: inline-block; cursor: pointer; opacity: 0.2; - margin-right: 6px; + margin-inline-end: 6px; } li.crumb span.icon-shared.shared, diff --git a/apps/files_sharing/src/views/SharingDetailsTab.vue b/apps/files_sharing/src/views/SharingDetailsTab.vue index c724a655e92..3b392dfbe02 100644 --- a/apps/files_sharing/src/views/SharingDetailsTab.vue +++ b/apps/files_sharing/src/views/SharingDetailsTab.vue @@ -1116,7 +1116,7 @@ export default { &__advanced { width: 100%; margin-bottom: 0.5em; - text-align: left; + text-align: start; padding-left: 0; section { @@ -1177,10 +1177,10 @@ export default { margin-top: 16px; button { - margin-left: 16px; + margin-inline-start: 16px; &:first-child { - margin-left: 0; + margin-inline-start: 0; } } } diff --git a/apps/files_versions/src/css/versions.css b/apps/files_versions/src/css/versions.css index b9914027738..1637394ef48 100644 --- a/apps/files_versions/src/css/versions.css +++ b/apps/files_versions/src/css/versions.css @@ -41,16 +41,16 @@ .versionsTabView img { cursor: pointer; - padding-right: 4px; + padding-inline-end: 4px; } .versionsTabView img.preview { position: relative; top: 6px; - left: 10px; + inset-inline-start: 10px; border: 1px solid var(--color-border-dark); cursor: default; - padding-right: 0; + padding-inline-end: 0; } .versionsTabView .version-container { @@ -63,7 +63,7 @@ } .versionsTabView .version-details { - text-align: left; + text-align: start; } .versionsTabView .version-details > span { @@ -73,7 +73,7 @@ .versionsTabView .revertVersion { cursor: pointer; float: right; - margin-right: 0; + margin-inline-end: 0; } .versionsTabView li.active .downloadVersion { @@ -95,7 +95,7 @@ } .version-container { - padding-left: 5px; + padding-inline-start: 5px; } .version-details { diff --git a/apps/oauth2/src/App.vue b/apps/oauth2/src/App.vue index 01e7c310612..5498d7ec071 100644 --- a/apps/oauth2/src/App.vue +++ b/apps/oauth2/src/App.vue @@ -146,6 +146,6 @@ export default { } .oauth2-form--input { max-width: 200px; - margin-right: 10px; + margin-inline-end: 10px; } </style> diff --git a/apps/settings/css/help.css b/apps/settings/css/help.css index 56262551bbe..119a2467392 100644 --- a/apps/settings/css/help.css +++ b/apps/settings/css/help.css @@ -16,7 +16,7 @@ } .help-list__text { - margin-left: 20px; + margin-inline-start: 20px; } .help-iframe { diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss index af14f3c249f..c13735bc11b 100644 --- a/apps/settings/css/settings.scss +++ b/apps/settings/css/settings.scss @@ -110,14 +110,14 @@ select { } .personal-info { - margin-right: 10%; + margin-inline-end: 10%; margin-bottom: 12px; margin-top: 12px; } .personal-info[class^='icon-'], .personal-info[class*=' icon-'] { background-position: 0px 2px; - padding-left: 30px; + padding-inline-start: 30px; opacity: 0.7; } } @@ -153,7 +153,7 @@ select { } &.icon-file { - padding-left: calc(var(--default-grid-baseline) + var(--default-clickable-area)); + padding-inline-start: calc(var(--default-grid-baseline) + var(--default-clickable-area)); background-position: calc(2 * var(--default-grid-baseline)); } } @@ -186,7 +186,7 @@ select { > form span { &[class^='icon-checkmark'], &[class^='icon-error'] { position: relative; - right: 8px; + inset-inline-end: 8px; top: -28px; pointer-events: none; float: right; @@ -196,7 +196,7 @@ select { .verify { position: relative; - left: 100%; + inset-inline-start: 100%; top: 0; height: 0; @@ -221,7 +221,7 @@ select { /* only show pointer cursor when popup will be there */ .verification-dialog { display: none; - right: -9px; + inset-inline-end: -9px; top: 40px; width: 275px; @@ -257,7 +257,7 @@ select { } .icon-federation-menu { - padding-left: 16px; + padding-inline-start: 16px; background-size: 16px; background-position: left center; opacity: .3; @@ -349,7 +349,7 @@ input#identity { table.nostyle { label { - margin-right: 2em; + margin-inline-end: 2em; } td { @@ -386,9 +386,9 @@ table.nostyle { } .personal-show-label { top: 34px !important; - margin-right: 0; + margin-inline-end: 0; margin-top: 0 !important; - right: 3px; + inset-inline-end: 3px; } } @@ -402,7 +402,7 @@ table.nostyle { .strengthify-wrapper { position: absolute; - left: 0; + inset-inline-start: 0; width: 100%; border-radius: 0 0 2px 2px; margin-top: 5px; @@ -420,7 +420,7 @@ table.nostyle { } li > div { - margin-left: 20px; + margin-inline-start: 20px; } .two-factor-provider-settings-icon { @@ -462,7 +462,7 @@ li.active { #usersearchform { position: absolute; top: 2px; - right: 0; + inset-inline-end: 0; input { width: 150px; @@ -479,23 +479,25 @@ table.grid { th { height: 2em; - padding: 0 1em 0 0; + padding: 0; + padding-inline-end: 1em; border-bottom: 1px solid var(--color-border); - text-align: left; + text-align: start; font-weight: normal; } td { border-bottom: 1px solid var(--color-border); - padding: 0 1em 0 0; - text-align: left; + padding: 0; + padding-inline-end: 1em; + text-align: start; font-weight: normal; } } td, th { &.name { - padding-left: .8em; + padding-inline-start: .8em; min-width: 5em; max-width: 12em; text-overflow: ellipsis; @@ -503,7 +505,7 @@ td, th { } &.password { - padding-left: .8em; + padding-inline-start: .8em; > img { visibility: hidden; @@ -533,7 +535,7 @@ td, th { } &.password > span { - margin-right: 1.2em; + margin-inline-end: 1.2em; color: #C7C7C7; } } @@ -547,12 +549,12 @@ span.usersLastLoginTooltip { /* Navigation icons */ img { margin-bottom: -3px; - margin-right: 6px; + margin-inline-end: 6px; width: 16px; } li span.no-icon { - padding-left: 32px; + padding-inline-start: 32px; } ul li.active > span.utils { @@ -643,15 +645,15 @@ table.grid td.date { } .indent { - padding-left: 28px; + padding-inline-start: 28px; } .double-indent { - padding-left: 56px; + padding-inline-start: 56px; } .nocheckbox { - padding-left: 20px; + padding-inline-start: 20px; } #s2id_linksExcludedGroups { @@ -660,7 +662,7 @@ table.grid td.date { } #shareApiDefaultPermissionsSection label { - margin-right: 20px; + margin-inline-end: 20px; } #fileSharingSettings h3 { @@ -672,7 +674,7 @@ table.grid td.date { /* 20 px left margin, 3 px right margin */ max-width: 600px; height: 150px; - margin-left: 20px; + margin-inline-start: 20px; box-sizing: border-box; } @@ -694,7 +696,7 @@ table.grid td.date { label:first-child { display: inline-block; width: 300px; - text-align: right; + text-align: end; } select:nth-child(2), @@ -706,7 +708,7 @@ table.grid td.date { @media (max-width: calc(variables.$breakpoint-mobile * 0.75)) { .mail_settings p label:first-child { width: unset; - text-align: left; + text-align: start; display: block; margin-top: calc(var(--default-grid-baseline) * 2); } @@ -717,7 +719,7 @@ table.grid td.date { } .cronlog { - margin-left: 10px; + margin-inline-start: 10px; } .status { @@ -762,7 +764,7 @@ span { /* OPERA hack for strengthify*/ doesnotexist:-o-prefocus, .strengthify-wrapper { - left: 185px; + inset-inline-start: 185px; width: 129px; } @@ -776,7 +778,7 @@ doesnotexist:-o-prefocus, .strengthify-wrapper { #postsetupchecks { ul { - margin-left: 44px; + margin-inline-start: 44px; list-style: disc; li { diff --git a/apps/settings/src/components/AdminAI.vue b/apps/settings/src/components/AdminAI.vue index dc64f64e65b..5796500a434 100644 --- a/apps/settings/src/components/AdminAI.vue +++ b/apps/settings/src/components/AdminAI.vue @@ -231,7 +231,7 @@ export default { border: 2px solid var(--color-primary-element); color: var(--color-primary-element); padding: 0px 7px; - margin-right: 3px; + margin-inline-end: 3px; } .drag-vertical-icon { diff --git a/apps/settings/src/components/AdminTwoFactor.vue b/apps/settings/src/components/AdminTwoFactor.vue index 816bbfd3ea9..9b2b222d5e8 100644 --- a/apps/settings/src/components/AdminTwoFactor.vue +++ b/apps/settings/src/components/AdminTwoFactor.vue @@ -175,8 +175,8 @@ export default { .two-factor-loading { display: inline-block; vertical-align: sub; - margin-left: -2px; - margin-right: 1px; + margin-inline-start: -2px; + margin-inline-end: 1px; } .top-margin { diff --git a/apps/settings/src/components/AppList.vue b/apps/settings/src/components/AppList.vue index b7913c386e9..68df4072ee8 100644 --- a/apps/settings/src/components/AppList.vue +++ b/apps/settings/src/components/AppList.vue @@ -361,11 +361,13 @@ $toolbar-height: 44px + $toolbar-padding * 2; &__bundle-heading { display: flex; align-items: center; - margin: 20px 10px 20px 0; + margin-block: 20px; + margin-inline: 0 10px; } &__bundle-header { - margin: 0 10px 0 50px; + margin-block: 0; + margin-inline: 50px 10px; font-weight: bold; font-size: 20px; line-height: 30px; diff --git a/apps/settings/src/components/AuthTokenSetupDialogue.vue b/apps/settings/src/components/AuthTokenSetupDialogue.vue new file mode 100644 index 00000000000..99ef17dbd6c --- /dev/null +++ b/apps/settings/src/components/AuthTokenSetupDialogue.vue @@ -0,0 +1,239 @@ +<!-- + - @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at> + - + - @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at> + - + - @license GNU AGPL version 3 or any later version + - + - This program is free software: you can redistribute it and/or modify + - it under the terms of the GNU Affero General Public License as + - published by the Free Software Foundation, either version 3 of the + - License, or (at your option) any later version. + - + - This program is distributed in the hope that it will be useful, + - but WITHOUT ANY WARRANTY; without even the implied warranty of + - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + - GNU Affero General Public License for more details. + - + - You should have received a copy of the GNU Affero General Public License + - along with this program. If not, see <http://www.gnu.org/licenses/>. + --> + +<template> + <div v-if="!adding" id="generate-app-token-section" class="row spacing"> + <!-- Port to TextField component when available --> + <NcTextField :value.sync="deviceName" + type="text" + :maxlength="120" + :disabled="loading" + class="app-name-text-field" + :label="t('settings', 'App name')" + :placeholder="t('settings', 'App name')" + @keydown.enter="submit" /> + <NcButton :disabled="loading || deviceName.length === 0" + type="primary" + @click="submit"> + {{ t('settings', 'Create new app password') }} + </NcButton> + </div> + <div v-else class="spacing"> + {{ t('settings', 'Use the credentials below to configure your app or device.') }} + {{ t('settings', 'For security reasons this password will only be shown once.') }} + <div class="app-password-row"> + <label for="app-username" class="app-password-label">{{ t('settings', 'Username') }}</label> + <input id="app-username" + :value="loginName" + type="text" + class="monospaced" + readonly="readonly" + @focus="selectInput"> + </div> + <div class="app-password-row"> + <label for="app-password" class="app-password-label">{{ t('settings', 'Password') }}</label> + <input id="app-password" + ref="appPassword" + :value="appPassword" + type="text" + class="monospaced" + readonly="readonly" + @focus="selectInput"> + <NcButton type="tertiary" + :title="copyTooltipOptions" + :aria-label="copyTooltipOptions" + @click="copyPassword"> + <template #icon> + <Check v-if="copied" :size="20" /> + <ContentCopy v-else :size="20" /> + </template> + </NcButton> + <NcButton @click="reset"> + {{ t('settings', 'Done') }} + </NcButton> + </div> + <div class="app-password-row"> + <span class="app-password-label" /> + <NcButton v-if="!showQR" + @click="showQR = true"> + {{ t('settings', 'Show QR code for mobile apps') }} + </NcButton> + <QR v-else + :value="qrUrl" /> + </div> + </div> +</template> + +<script> +import QR from '@chenfengyuan/vue-qrcode' +import { confirmPassword } from '@nextcloud/password-confirmation' +import '@nextcloud/password-confirmation/dist/style.css' +import { showError } from '@nextcloud/dialogs' +import { getRootUrl } from '@nextcloud/router' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js' + +import Check from 'vue-material-design-icons/Check.vue' +import ContentCopy from 'vue-material-design-icons/ContentCopy.vue' + +export default { + name: 'AuthTokenSetupDialogue', + components: { + Check, + ContentCopy, + NcButton, + QR, + NcTextField, + }, + props: { + add: { + type: Function, + required: true, + }, + }, + data() { + return { + adding: false, + loading: false, + deviceName: '', + appPassword: '', + loginName: '', + copied: false, + showQR: false, + qrUrl: '', + } + }, + computed: { + copyTooltipOptions() { + if (this.copied) { + return t('settings', 'Copied!') + } + return t('settings', 'Copy') + }, + }, + methods: { + selectInput(e) { + e.currentTarget.select() + }, + submit() { + confirmPassword() + .then(() => { + this.loading = true + return this.add(this.deviceName) + }) + .then(token => { + this.adding = true + this.loginName = token.loginName + this.appPassword = token.token + + const server = window.location.protocol + '//' + window.location.host + getRootUrl() + this.qrUrl = `nc://login/user:${token.loginName}&password:${token.token}&server:${server}` + + this.$nextTick(() => { + this.$refs.appPassword.select() + }) + }) + .catch(err => { + console.error('could not create a new app password', err) + OC.Notification.showTemporary(t('settings', 'Error while creating device token')) + + this.reset() + }) + }, + async copyPassword() { + try { + await navigator.clipboard.writeText(this.appPassword) + this.copied = true + } catch (e) { + this.copied = false + console.error(e) + showError(t('settings', 'Could not copy app password. Please copy it manually.')) + } finally { + setTimeout(() => { + this.copied = false + }, 4000) + } + }, + reset() { + this.adding = false + this.loading = false + this.showQR = false + this.qrUrl = '' + this.deviceName = '' + this.appPassword = '' + this.loginName = '' + }, + }, +} +</script> + +<style lang="scss" scoped> + .app-password-row { + display: flex; + align-items: center; + flex-wrap: wrap; + margin-top: calc(var(--default-grid-baseline) * 2); + + .icon { + background-size: 16px 16px; + display: inline-block; + position: relative; + top: 3px; + margin-inline-start: 5px; + margin-inline-end: 8px; + } + + } + + .app-password-label { + display: table-cell; + margin-inline-end: 1em; + text-align: start; + vertical-align: middle; + width: 100px; + } + + .app-name-text-field { + height: 44px !important; + padding-left: 12px; + margin-inline-end: 12px; + width: 200px; + } + + .monospaced { + width: 245px; + font-family: monospace; + } + + .button-vue{ + display:inline-block; + margin: 3px 3px 3px 3px; + } + + .row { + display: flex; + align-items: center; + } + + .spacing { + padding-top: 16px; + } +</style> diff --git a/apps/settings/src/components/Encryption.vue b/apps/settings/src/components/Encryption.vue index 6574f4e728d..c17ef57cc7f 100644 --- a/apps/settings/src/components/Encryption.vue +++ b/apps/settings/src/components/Encryption.vue @@ -178,7 +178,7 @@ export default { li { list-style-type: initial; - margin-left: 1rem; + margin-inline-start: 1rem; padding: 0.25rem 0; } diff --git a/apps/settings/src/components/Markdown.vue b/apps/settings/src/components/Markdown.vue index 18a9ea39018..8f2800825a3 100644 --- a/apps/settings/src/components/Markdown.vue +++ b/apps/settings/src/components/Markdown.vue @@ -161,7 +161,7 @@ export default { ul, ol { padding-left: 10px; - margin-left: 10px; + margin-inline-start: 10px; } ul li { @@ -180,8 +180,8 @@ export default { padding-left: 1em; border-left: 4px solid var(--color-primary-element); color: var(--color-text-maxcontrast); - margin-left: 0; - margin-right: 0; + margin-inline-start: 0; + margin-inline-end: 0; } } diff --git a/apps/settings/src/components/PersonalInfo/DetailsSection.vue b/apps/settings/src/components/PersonalInfo/DetailsSection.vue index 22a0a185db7..a69b6d58ed7 100644 --- a/apps/settings/src/components/PersonalInfo/DetailsSection.vue +++ b/apps/settings/src/components/PersonalInfo/DetailsSection.vue @@ -80,7 +80,8 @@ export default { .details { display: flex; flex-direction: column; - margin: 10px 32px 10px 0; + margin-block: 10px; + margin-inline: 0 32px; gap: 16px 0; color: var(--color-text-maxcontrast); diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue index 4514f11f6d8..3deb5340751 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue @@ -66,7 +66,7 @@ a { display: inline-block; vertical-align: middle; margin-top: 6px; - margin-right: 8px; + margin-inline-end: 8px; } &:hover, diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue index 317544ecbc3..094b3bacc04 100644 --- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue +++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue @@ -113,7 +113,7 @@ export default { // Override Avatar component position to fix positioning on rerender position: absolute !important; top: 40px; - left: 18px; + inset-inline-start: 18px; z-index: 1; &:not(.avatardiv--unknown) { @@ -128,7 +128,7 @@ export default { span { position: absolute; - left: 78px; + inset-inline-start: 78px; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; @@ -151,7 +151,8 @@ export default { color: var(--color-primary-element-text); font-size: 18px; font-weight: bold; - margin: 0 4px 8px 0; + margin-block: 0 8px; + margin-inline: 0 4px; } } @@ -163,7 +164,8 @@ export default { color: var(--color-text-maxcontrast); font-size: 14px; font-weight: normal; - margin: 4px 4px 0 0; + margin-block: 4px 0; + margin-inline: 0 4px; line-height: 1.3; } } diff --git a/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue b/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue index fc7fe7f7984..bd1d18bdd00 100644 --- a/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue +++ b/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue @@ -207,7 +207,7 @@ section { display: flex; gap: 0 2px; - margin-right: 5px; + margin-inline-end: 5px; margin-bottom: 5px; } } @@ -218,7 +218,7 @@ section { align-items: center; &__icon { - margin-right: 8px; + margin-inline-end: 8px; align-self: start; margin-top: 4px; } diff --git a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue index 1dd11c2b6cc..6b7899d4956 100644 --- a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue +++ b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue @@ -143,6 +143,7 @@ export default { } .button-vue { - margin: 0 0 0 auto !important; + margin: 0 !important; + margin-inline-start: auto !important; } </style> diff --git a/apps/settings/src/components/Users/UserListFooter.vue b/apps/settings/src/components/Users/UserListFooter.vue index bfe01b1fcce..9095e67b764 100644 --- a/apps/settings/src/components/Users/UserListFooter.vue +++ b/apps/settings/src/components/Users/UserListFooter.vue @@ -95,7 +95,7 @@ export default Vue.extend({ color: var(--color-text-maxcontrast); &--loading { - left: 0; + inset-inline-start: 0; min-width: var(--avatar-cell-width); width: var(--avatar-cell-width); align-items: center; @@ -103,7 +103,7 @@ export default Vue.extend({ } &--count { - left: var(--avatar-cell-width); + inset-inline-start: var(--avatar-cell-width); min-width: var(--cell-width); width: var(--cell-width); } diff --git a/apps/settings/src/components/Users/VirtualList.vue b/apps/settings/src/components/Users/VirtualList.vue index e0674b9c898..20dc70ef830 100644 --- a/apps/settings/src/components/Users/VirtualList.vue +++ b/apps/settings/src/components/Users/VirtualList.vue @@ -172,7 +172,7 @@ export default Vue.extend({ } &__footer { - left: 0; + inset-inline-start: 0; } &__body { diff --git a/apps/settings/src/components/Users/shared/styles.scss b/apps/settings/src/components/Users/shared/styles.scss index 1b7faa78031..3e4a96811d6 100644 --- a/apps/settings/src/components/Users/shared/styles.scss +++ b/apps/settings/src/components/Users/shared/styles.scss @@ -40,12 +40,12 @@ } &--avatar { - left: 0; + inset-inline-start: 0; } &--displayname { - left: var(--avatar-cell-width); - border-right: 1px solid var(--color-border); + inset-inline-start: var(--avatar-cell-width); + border-inline-end: 1px solid var(--color-border); } } @@ -92,7 +92,7 @@ &--actions { position: sticky; - right: 0; + inset-inline-end: 0; z-index: var(--sticky-column-z-index); display: flex; flex-direction: row; @@ -100,7 +100,7 @@ min-width: 110px; width: 110px; background-color: var(--color-main-background); - border-left: 1px solid var(--color-border); + border-inline-start: 1px solid var(--color-border); } } diff --git a/apps/settings/src/components/WebAuthn/AddDevice.vue b/apps/settings/src/components/WebAuthn/AddDevice.vue index 8e686af9b01..f478da0dbb7 100644 --- a/apps/settings/src/components/WebAuthn/AddDevice.vue +++ b/apps/settings/src/components/WebAuthn/AddDevice.vue @@ -179,8 +179,8 @@ export default { .webauthn-loading { display: inline-block; vertical-align: sub; - margin-left: 2px; - margin-right: 2px; + margin-inline-start: 2px; + margin-inline-end: 2px; } .new-webauthn-device { diff --git a/apps/systemtags/src/css/fileEntryInlineSystemTags.scss b/apps/systemtags/src/css/fileEntryInlineSystemTags.scss index 60e0bca0613..4cf72ed429f 100644 --- a/apps/systemtags/src/css/fileEntryInlineSystemTags.scss +++ b/apps/systemtags/src/css/fileEntryInlineSystemTags.scss @@ -32,7 +32,7 @@ // Proper spacing if multiple shown & + .files-list__system-tag { - margin-left: 5px; + margin-inline-start: 5px; } } diff --git a/apps/theming/src/components/ItemPreview.vue b/apps/theming/src/components/ItemPreview.vue index c5e78607912..9a9c5282af5 100644 --- a/apps/theming/src/components/ItemPreview.vue +++ b/apps/theming/src/components/ItemPreview.vue @@ -132,7 +132,7 @@ export default { flex-basis: calc(16px * var(--ratio)); flex-shrink: 0; height: calc(10px * var(--ratio)); - margin-right: var(--gap); + margin-inline-end: var(--gap); cursor: pointer; border-radius: var(--border-radius); background-repeat: no-repeat; diff --git a/apps/twofactor_backupcodes/css/style.css b/apps/twofactor_backupcodes/css/style.css index 0921622107d..8df541fe3dc 100644 --- a/apps/twofactor_backupcodes/css/style.css +++ b/apps/twofactor_backupcodes/css/style.css @@ -8,17 +8,17 @@ .challenge { margin-top: 0 !important; - margin-left: 0 !important; + margin-inline-start: 0 !important; box-sizing: border-box !important; width: 100% !important; } .confirm-inline { position: absolute; - right: 0; + inset-inline-end: 0; top: 0; margin: 0 !important; - padding-right: 25px !important; + padding-inline-end: 25px !important; background-color: transparent !important; border: none !important; opacity: .5; diff --git a/apps/user_ldap/css/renewPassword.css b/apps/user_ldap/css/renewPassword.css index f19258c0804..0fe8c4d183e 100644 --- a/apps/user_ldap/css/renewPassword.css +++ b/apps/user_ldap/css/renewPassword.css @@ -3,13 +3,13 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ #personal-show + label { - left: 230px !important; + inset-inline-start: 230px !important; margin-top: 8px !important; box-sizing: border-box; } #renewpassword .strengthify-wrapper { - left: 10px; + inset-inline-start: 10px; margin-top: 65px; position: absolute; width: 219px; @@ -63,29 +63,29 @@ } .tooltip.right { - margin-left:3px; + margin-inline-start:3px; padding:0 10px } .tooltip.right .tooltip-arrow { top:50%; - left:0; + inset-inline-start:0; margin-top:-10px; border-width:10px 10px 10px 0; - border-right-color:#fff + border-inline-end-color:#fff } .tooltip.left { - margin-left:-3px; + margin-inline-start:-3px; padding:0 5px } .tooltip.left .tooltip-arrow { top:50%; - right:0; + inset-inline-end:0; margin-top:-10px; border-width:10px 0 10px 10px; - border-left-color:#fff + border-inline-start-color:#fff } .tooltip.top .tooltip-arrow,.tooltip.top-left .tooltip-arrow,.tooltip.top-right .tooltip-arrow { @@ -95,17 +95,17 @@ } .tooltip.top .tooltip-arrow { - left:50%; - margin-left:-10px + inset-inline-start:50%; + margin-inline-start:-10px } .tooltip.top-left .tooltip-arrow { - right:10px; + inset-inline-end:10px; margin-bottom:-10px } .tooltip.top-right .tooltip-arrow { - left:10px; + inset-inline-start:10px; margin-bottom:-10px } @@ -116,17 +116,17 @@ } .tooltip.bottom .tooltip-arrow { - left:50%; - margin-left:-10px + inset-inline-start:50%; + margin-inline-start:-10px } .tooltip.bottom-left .tooltip-arrow { - right:10px; + inset-inline-end:10px; margin-top:-10px } .tooltip.bottom-right .tooltip-arrow { - left:10px; + inset-inline-start:10px; margin-top:-10px } diff --git a/apps/user_ldap/css/settings.css b/apps/user_ldap/css/settings.css index 52962f17d4b..3aa9b2a168e 100644 --- a/apps/user_ldap/css/settings.css +++ b/apps/user_ldap/css/settings.css @@ -17,7 +17,7 @@ display: flex; align-items: center; white-space: nowrap; - text-align: left; + text-align: start; } .tablerow input, .tablerow textarea { @@ -29,7 +29,7 @@ } #ldap .tablerow label { - margin-left: 3px; + margin-inline-start: 3px; } .ldapIconCopy { @@ -50,7 +50,7 @@ .ldapWizardControls { width: 60%; - text-align: right; + text-align: end; } .ldapWizardInfo { @@ -70,31 +70,30 @@ #ldapWizard1 .hostPortCombinatorSpan { width: 14.5%; display: inline-block; - text-align: right; + text-align: end; } #ldapWizard1 .host { width: 100%; - margin-left: 0; - margin-right: 0; + margin-inline: 0; } .tableCellInput { - margin-left: -40%; + margin-inline-start: -40%; width: 100%; } .tableCellLabel { - text-align: right; - padding-right: 25%; + text-align: end; + padding-inline-end: 25%; } .ldapIndent { - margin-left: 50px; + margin-inline-start: 50px; } .ldapwarning { - margin-left: 22px; + margin-inline-start: 22px; color: #FF3B3B; } @@ -116,9 +115,9 @@ max-width: 200px; display: inline-block; vertical-align: top; - text-align: right; + text-align: end; padding-top: 9px; - padding-right: 5px; + padding-inline-end: 5px; } #ldap fieldset input[type=submit] { @@ -159,7 +158,7 @@ input.ldapVerifyInput { .ldapInputColElement { width: 35%; display: inline-block; - padding-left: 10px; + padding-inline-start: 10px; } .ldapToggle { @@ -190,7 +189,7 @@ select[multiple=multiple] + button { } #ldap .ldap_saving { - margin-right: 15px; + margin-inline-end: 15px; color: orange; font-weight: bold; } diff --git a/apps/user_status/src/components/ClearAtSelect.vue b/apps/user_status/src/components/ClearAtSelect.vue index 550ac404b48..cd223b7232c 100644 --- a/apps/user_status/src/components/ClearAtSelect.vue +++ b/apps/user_status/src/components/ClearAtSelect.vue @@ -76,7 +76,7 @@ export default { align-items: center; &__label { - margin-right: 12px; + margin-inline-end: 12px; } &__select { diff --git a/apps/user_status/src/components/OnlineStatusSelect.vue b/apps/user_status/src/components/OnlineStatusSelect.vue index d0e70093489..f6a1c33f74c 100644 --- a/apps/user_status/src/components/OnlineStatusSelect.vue +++ b/apps/user_status/src/components/OnlineStatusSelect.vue @@ -73,7 +73,7 @@ $label-padding: 8px; display: block; margin: $label-padding; padding: $label-padding; - padding-left: $icon-size + $label-padding * 2; + padding-inline-start: $icon-size + $label-padding * 2; border: 2px solid var(--color-main-background); border-radius: var(--border-radius-large); background-color: var(--color-background-hover); @@ -88,7 +88,7 @@ $label-padding: 8px; span { position: absolute; top: calc(50% - 10px); - left: 10px; + inset-inline-start: 10px; display: block; width: $icon-size; height: $icon-size; diff --git a/apps/weather_status/src/App.vue b/apps/weather_status/src/App.vue index a6922362237..437a6c1e01a 100644 --- a/apps/weather_status/src/App.vue +++ b/apps/weather_status/src/App.vue @@ -589,7 +589,7 @@ export default { &.icon-loading-small { &::after { - left: 21px; + inset-inline-start: 21px; } } } diff --git a/apps/workflowengine/src/components/Check.vue b/apps/workflowengine/src/components/Check.vue index 688619865e2..8cc22fc85a1 100644 --- a/apps/workflowengine/src/components/Check.vue +++ b/apps/workflowengine/src/components/Check.vue @@ -186,7 +186,7 @@ export default { & > .v-select, & > .button-vue, & > input[type=text] { - margin-right: 5px; + margin-inline-end: 5px; margin-bottom: 5px; } } diff --git a/apps/workflowengine/src/components/Checks/RequestTime.vue b/apps/workflowengine/src/components/Checks/RequestTime.vue index 9e82c9f99d1..1a09fcbfb31 100644 --- a/apps/workflowengine/src/components/Checks/RequestTime.vue +++ b/apps/workflowengine/src/components/Checks/RequestTime.vue @@ -120,7 +120,7 @@ export default { min-height: 48px; &.timeslot--start { - margin-right: 5px; + margin-inline-end: 5px; width: calc(50% - 5px); } } diff --git a/apps/workflowengine/src/components/Event.vue b/apps/workflowengine/src/components/Event.vue index eb3f87826d8..af00ee9df71 100644 --- a/apps/workflowengine/src/components/Event.vue +++ b/apps/workflowengine/src/components/Event.vue @@ -105,7 +105,7 @@ export default { } .option__title { - margin-left: 5px; + margin-inline-start: 5px; color: var(--color-main-text); } diff --git a/apps/workflowengine/src/components/Rule.vue b/apps/workflowengine/src/components/Rule.vue index bc5d5637600..0056042c118 100644 --- a/apps/workflowengine/src/components/Rule.vue +++ b/apps/workflowengine/src/components/Rule.vue @@ -196,16 +196,16 @@ export default { justify-content: end; button { - margin-left: 5px; + margin-inline-start: 5px; } button:last-child{ - margin-right: 10px; + margin-inline-end: 10px; } } .error-message { float: right; - margin-right: 10px; + margin-inline-end: 10px; } .flow-icon { @@ -230,7 +230,7 @@ export default { .icon-confirm { background-position: right 27px; padding-right: 20px; - margin-right: 20px; + margin-inline-end: 20px; } } .trigger p, .action p { @@ -239,7 +239,7 @@ export default { & > span { min-width: 50px; - text-align: right; + text-align: end; color: var(--color-text-maxcontrast); padding-right: 10px; padding-top: 6px; @@ -265,7 +265,7 @@ export default { border-radius: var(--border-radius); color: var(--color-text-maxcontrast); font-weight: normal; - text-align: left; + text-align: start; font-size: 1em; } diff --git a/apps/workflowengine/src/styles/operation.scss b/apps/workflowengine/src/styles/operation.scss index 9d9f028860b..ea54e605c6e 100644 --- a/apps/workflowengine/src/styles/operation.scss +++ b/apps/workflowengine/src/styles/operation.scss @@ -7,10 +7,10 @@ flex-wrap: wrap; flex-direction: column; flex-grow: 1; - margin-left: -1px; + margin-inline-start: -1px; padding: 10px; border-radius: var(--border-radius-large); - margin-right: 20px; + margin-inline-end: 20px; margin-bottom: 20px; } .actions__item .icon { @@ -33,7 +33,7 @@ .actions__item_options { width: 100%; margin-top: 10px; - padding-left: 60px; + padding-inline-start: 60px; } h3, small { padding: 6px; @@ -61,7 +61,7 @@ small { .actions__item__description { padding-top: 5px; - text-align: left; + text-align: start; width: calc(100% - 105px); small { padding: 0; @@ -70,7 +70,7 @@ small { .icon { width: 50px; margin: 0; - margin-right: 10px; + margin-inline-end: 10px; &:not(.icon-invert) { filter: var(--background-invert-if-bright); } diff --git a/core/css/apps.scss b/core/css/apps.scss index e7590b19eb5..e0529ef17c4 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -84,13 +84,13 @@ dt, dd { display: inline-block; padding: 12px; - padding-left: 0; + padding-inline-start: 0; } dt { width: 130px; white-space: nowrap; - text-align: right; + text-align: end; } kbd { @@ -141,7 +141,7 @@ kbd { box-shadow: none !important; user-select: none; pointer-events:none; - margin-left: 10px; + margin-inline-start: 10px; } } @@ -156,9 +156,9 @@ kbd { display: inline-block; width: 100%; padding: 10px; - padding-left: 34px; + padding-inline-start: 34px; background-position: 10px center; - text-align: left; + text-align: start; margin: 0; } } @@ -202,13 +202,13 @@ kbd { > .app-navigation-entry-deleted { /* Ugly hack for overriding the main entry link */ - padding-left: var(--default-clickable-area) !important; + padding-inline-start: var(--default-clickable-area) !important; } > .app-navigation-entry-edit { /* Ugly hack for overriding the main entry link */ /* align the input correctly with the link text 44px-6px padding for the input */ - padding-left: calc(var(--default-clickable-area) - 6px) !important; + padding-inline-start: calc(var(--default-clickable-area) - 6px) !important; } a:hover, @@ -239,7 +239,7 @@ kbd { /* align loader */ &.icon-loading-small:after { - left: 22px; + inset-inline-start: 22px; top: 22px; } @@ -260,7 +260,7 @@ kbd { > li { display: inline-flex; flex-wrap: wrap; - padding-left: var(--default-clickable-area); + padding-inline-start: var(--default-clickable-area); width: 100%; margin-bottom: 3px; @@ -286,21 +286,21 @@ kbd { /* align loader */ &.icon-loading-small:after { - left: calc(var(--default-clickable-area) / 2); + inset-inline-start: calc(var(--default-clickable-area) / 2); } > .app-navigation-entry-deleted { /* margin to keep active indicator visible */ - margin-left: 4px; - padding-left: 84px; + margin-inline-start: 4px; + padding-inline-start: 84px; } > .app-navigation-entry-edit { /* margin to keep active indicator visible */ - margin-left: 4px; + margin-inline-start: 4px; /* align the input correctly with the link text 44px+44px-4px-6px padding for the input */ - padding-left: calc(2 * var(--default-clickable-area) - 10px) !important; + padding-inline-start: calc(2 * var(--default-clickable-area) - 10px) !important; } } } @@ -346,7 +346,7 @@ kbd { } } &:first-child img { - margin-right: calc(2 * var(--default-grid-baseline)) !important; + margin-inline-end: calc(2 * var(--default-grid-baseline)) !important; width: 16px; height: 16px; // Legacy invert if bright background @@ -358,7 +358,7 @@ kbd { display: inline-block; float: right; .app-navigation-entry-utils-counter { - padding-right: 0 !important; + padding-inline-end: 0 !important; } } } @@ -471,7 +471,7 @@ kbd { /* force padding on link no matter if 'a' has an icon class */ > a:first-child { - padding-left: var(--default-clickable-area); + padding-inline-start: var(--default-clickable-area); } &:hover, &:focus { @@ -527,7 +527,7 @@ kbd { } .app-navigation-entry-utils-counter { overflow: hidden; - text-align: right; + text-align: end; font-size: 9pt; line-height: var(--default-clickable-area); padding: 0 12px; /* Same padding as all li > a in the app-navigation */ @@ -549,8 +549,8 @@ kbd { * Editable entries */ .app-navigation-entry-edit { - padding-left: 5px; - padding-right: 5px; + padding-inline-start: 5px; + padding-inline-end: 5px; display: block; width: calc(100% - 1px); /* Avoid border overlapping */ transition: opacity 250ms ease-in-out; @@ -565,7 +565,7 @@ kbd { } input { padding: 5px; - margin-right: 0; + margin-inline-end: 0; height: 38px; &:hover, &:focus { @@ -576,8 +576,8 @@ kbd { input[type='text'] { width: 100%; min-width: 0; /* firefox hack: override auto */ - border-bottom-right-radius: 0; - border-top-right-radius: 0; + border-end-end-radius: 0; + border-start-end-radius: 0; } button, input:not([type='text']) { @@ -588,13 +588,13 @@ kbd { border-radius: 0 !important; } &:not(:first-child) { - margin-left: -1px; + margin-inline-start: -1px; } &:last-child { - border-bottom-right-radius: var(--border-radius); - border-top-right-radius: var(--border-radius); - border-bottom-left-radius: 0; - border-top-left-radius: 0; + border-end-end-radius: var(--border-radius); + border-start-end-radius: var(--border-radius); + border-end-start-radius: 0; + border-start-start-radius: 0; } } } @@ -604,7 +604,7 @@ kbd { */ .app-navigation-entry-deleted { display: inline-flex; - padding-left: var(--default-clickable-area); + padding-inline-start: var(--default-clickable-area); transform: translateX(#{variables.$navigation-width}); .app-navigation-entry-deleted-description { position: relative; @@ -636,7 +636,7 @@ kbd { opacity 250ms ease-in-out, z-index 250ms ease-in-out; position: absolute; - left: 0; + inset-inline-start: 0; background-color: var(--color-main-background); box-sizing: border-box; } @@ -681,14 +681,14 @@ kbd { @media only screen and (max-width: variables.$breakpoint-mobile) { #content { - border-top-left-radius: var(--border-radius-large); - border-top-right-radius: var(--border-radius-large); + border-start-start-radius: var(--border-radius-large); + border-start-end-radius: var(--border-radius-large); } #app-navigation { - border-top-left-radius: var(--border-radius-large); + border-start-start-radius: var(--border-radius-large); } #app-sidebar { - border-top-right-radius: var(--border-radius-large); + border-start-end-radius: var(--border-radius-large); } } @@ -752,14 +752,14 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - position: -webkit-sticky; position: sticky; top: variables.$header-height; - right:0; + inset-inline-end:0; overflow-y: auto; overflow-x: hidden; z-index: 1500; opacity: 0.7px; height: calc(100vh - #{variables.$header-height}); background: var(--color-main-background); - border-left: 1px solid var(--color-border); + border-inline-start: 1px solid var(--color-border); flex-shrink: 0; // no animations possible, use OC.Apps.showAppSidebar &.disappear { @@ -785,7 +785,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - display: none; padding: calc(var(--default-grid-baseline) * 2); padding-top: 0; - padding-left: calc(var(--default-grid-baseline) * 4); + padding-inline-start: calc(var(--default-grid-baseline) * 4); /* restrict height of settings and make scrollable */ max-height: 300px; overflow-y: auto; @@ -834,7 +834,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - box-shadow: none; border: 0; border-radius: calc(var(--default-clickable-area) / 2); - text-align: left; + text-align: start; font-weight: normal; font-size: 100%; opacity: 0.8; @@ -860,7 +860,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - width: var(--default-clickable-area); height: var(--default-clickable-area); top: 0; - left: 0; + inset-inline-start: 0; display: block; } @@ -884,14 +884,14 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - &[type='checkbox'], &[type='radio'] { vertical-align: -2px; - margin-right: 4px; + margin-inline-end: 4px; } } } .sub-section { position: relative; margin-top: 10px; - margin-left: 27px; + margin-inline-start: 27px; margin-bottom: 10px; } @@ -931,10 +931,10 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - /* Use same amount as sidebar padding */ &:first-child { - padding-left: 15px; + padding-inline-start: 15px; } &:last-child { - padding-right: 15px; + padding-inline-end: 15px; } .icon { @@ -944,7 +944,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width - background-size: 16px; vertical-align: middle; margin-top: -2px; - margin-right: 3px; + margin-inline-end: 3px; opacity: .7; cursor: pointer; } @@ -1015,7 +1015,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2); // = 16px/2 + 14px = 22px // popover right margin is 5px, arrow width is 9px to center and border is 1px // 22px - 9px - 5px - 1px = 7px - right: 7px; + inset-inline-end: 7px; /* change this to adjust the arrow position */ border: solid transparent; content: ' '; @@ -1030,7 +1030,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2); &.menu-center { transform: translateX(50%); right: 50%; - margin-right: 0; + margin-inline-end: 0; &:after { right: 50%; transform: translateX(50%); @@ -1040,7 +1040,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2); &.menu-left { right: auto; left: 0; - margin-right: 0; + margin-inline-end: 0; &:after { left: 6px; right: auto; @@ -1107,7 +1107,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2); > input, > form { &:not([class^='icon-']):not([class*='icon-']):first-child { - margin-left: $popoveritem-height; + margin-inline-start: $popoveritem-height; } } } @@ -1143,11 +1143,11 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2); } > select { margin: 0; - margin-left: 6px; + margin-inline-start: 6px; } /* Add padding if contains icon+text */ &:not(:empty) { - padding-right: $outter-margin !important; + padding-inline-end: $outter-margin !important; } /* DEPRECATED! old img in popover fallback * TODO: to remove */ @@ -1177,13 +1177,13 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2); if there is an element before */ align-items: center; &:not(:first-child) { - margin-left: 5px; + margin-inline-start: 5px; } } /* no margin if hidden span before */ > span.hidden + form, > span[style*='display:none'] + form { - margin-left: 0; + margin-inline-start: 0; } /* Inputs inside popover supports text, submit & reset */ input { @@ -1193,7 +1193,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2); flex: 1 1 auto; // space between inline inputs &:not(:first-child) { - margin-left: 5px; + margin-inline-start: 5px; } } } @@ -1255,7 +1255,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2); position: -webkit-sticky; position: relative; top: 0; - border-right: 1px solid var(--color-border); + border-inline-end: 1px solid var(--color-border); display: flex; flex-direction: column; transition: transform 250ms ease-in-out; @@ -1343,7 +1343,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2); } + label { top: 14px; - left: 7px; + inset-inline-start: 7px; // hidden by default, only chown on hover-focus or if checked display: none; &::before { @@ -1359,7 +1359,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2); .app-content-list-item-star { display: flex; top: 10px; - left: 32px; + inset-inline-start: 32px; background-size: 16px; height: 20px; width: 20px; @@ -1375,7 +1375,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2); line-height: 40px; border-radius: 50%; vertical-align: middle; - margin-right: 10px; + margin-inline-end: 10px; color: #fff; text-align: center; font-size: 1.5em; @@ -1390,13 +1390,13 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2); .app-content-list-item-line-one, .app-content-list-item-line-two { display: block; - padding-left: 50px; + padding-inline-start: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; order: 1; flex: 1 1 0px; - padding-right: 10px; + padding-inline-end: 10px; cursor: pointer; } @@ -1425,7 +1425,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2); margin: 0; // action icon have -7px margin // default popover is normally 5px - right: -2px; + inset-inline-end: -2px; } } } diff --git a/core/css/global.scss b/core/css/global.scss index 5e1478776ca..d0a12dc383d 100644 --- a/core/css/global.scss +++ b/core/css/global.scss @@ -33,7 +33,7 @@ .hidden-visually { position: absolute; - left: -10000px; + inset-inline-start: -10000px; top: -10000px; width: 1px; height: 1px; diff --git a/core/css/guest.scss b/core/css/guest.scss index 4269a4b36bd..bcd23fc8e69 100644 --- a/core/css/guest.scss +++ b/core/css/guest.scss @@ -96,7 +96,7 @@ body { height: 130px; margin: 0 auto; position: relative; - left: unset; + inset-inline-start: unset; } } @@ -123,7 +123,7 @@ form.install-form fieldset input { form.install-form .strengthify-wrapper { bottom: 17px; width: calc(100% - 8px); - left: 4px; + inset-inline-start: 4px; top: unset; } @@ -137,7 +137,7 @@ form #sqliteInformation { } form #adminaccount, form #use_other_db { margin-bottom: 15px; - text-align: left; + text-align: start; } form #adminaccount > legend, form #adminlogin { @@ -188,8 +188,8 @@ form #datadirField legend { .submit-icon { position: absolute; - right: 24px; - transition: right 100ms ease-in-out; + inset-inline-end: 24px; + transition: inset-inline-end 100ms ease-in-out; pointer-events: none; /* The submit icon is positioned on the submit button. From the user point of view the icon is part of the button, so the clicks on the icon have to be @@ -198,13 +198,13 @@ form #datadirField legend { input.login:hover ~ .submit-icon.icon-confirm-white, input.login:focus ~ .submit-icon.icon-confirm-white, input.login:active ~ .submit-icon.icon-confirm-white { - right: 20px; + inset-inline-end: 20px; } .icon-loading-small { position: absolute; top: 22px; - right: 26px; + inset-inline-end: 26px; } } @@ -238,7 +238,7 @@ select { .icon-confirm.input-button-inline { position: absolute; - right: 3px; + inset-inline-end: 3px; top: 5px; } @@ -255,12 +255,12 @@ input[type='email'] { cursor: text; font-family: inherit; font-weight: normal; - margin-left: 0; - margin-right: 0; + margin-inline-start: 0; + margin-inline-end: 0; } input[type='password'].password-with-toggle, input[type='text'].password-with-toggle { width: 238px; - padding-right: 40px !important; + padding-inline-end: 40px !important; } input.login { width: 260px; @@ -302,7 +302,7 @@ a { /* Checkboxes - white only for login */ input[type='checkbox'].checkbox { position: absolute; - left: -10000px; + inset-inline-start: -10000px; top: auto; width: 1px; height: 1px; @@ -358,7 +358,10 @@ input[type='checkbox'].checkbox--white:checked + label:before { position: relative; top: -20px; width: 250px; - border-radius: 0 0 3px 3px; + border-start-start-radius: 0; + border-start-end-radius: 0; + border-end-end-radius: 3px; + border-end-start-radius: 3px; overflow: hidden; height: 3px; } @@ -371,7 +374,7 @@ input[type='checkbox'].checkbox--white:checked + label:before { /* Show password toggle */ #show, #dbpassword-toggle { position: absolute; - right: 2px; + inset-inline-end: 2px; top: -3px; display: flex; justify-content: center; @@ -387,11 +390,11 @@ input[type='checkbox'].checkbox--white:checked + label:before { #personal-show + label { height: 14px; margin-top: -25px; - left: 295px; + inset-inline-start: 295px; display: block; } #passwordbutton { - margin-left: .5em; + margin-inline-start: .5em; } /* Dark subtle label text */ @@ -419,7 +422,7 @@ form .warning input[type='checkbox']+label { border-radius: 3px; /* --border-radius */ margin: 12px 0; border: 1px solid transparent; - text-align: left; + text-align: start; align-items: center; text-decoration: none !important; @@ -535,7 +538,7 @@ form #selectDbType { .body-login-container { display: flex; flex-direction: column; - text-align: left; + text-align: start; word-wrap: break-word; border-radius: 10px; /* --border-radius-large */ cursor: default; @@ -582,9 +585,9 @@ p.info { .appList { list-style: disc; - text-align: left; - margin-left: 25px; - margin-right: 25px; + text-align: start; + margin-inline-start: 25px; + margin-inline-end: 25px; } img.float-spinner { @@ -596,7 +599,7 @@ p.info { } } #update-progress-detailed { - text-align: left; + text-align: start; margin-bottom: 12px; } .update-show-detailed { @@ -663,7 +666,7 @@ p.info { margin: -17px 0 0 -17px; position: absolute; top: 50%; - left: 50%; + inset-inline-start: 50%; border-radius: 100%; -webkit-animation: rotate .8s infinite linear; animation: rotate .8s infinite linear; @@ -741,7 +744,7 @@ footer { label.infield, .hidden-visually { position: absolute; - left: -10000px; + inset-inline-start: -10000px; top: -10000px; width: 1px; height: 1px; @@ -755,11 +758,11 @@ a.legal { .notecard { color: var(--color-text-light); background-color: var(--note-background); - border-left: 4px solid var(--note-theme); + border-inline-start: 4px solid var(--note-theme); border-radius: var(--border-radius); margin: 1rem 0; padding: 1rem; - text-align: left; + text-align: start; &.success { --note-background: rgba(var(--color-success-rgb), 0.1); @@ -805,7 +808,7 @@ a.legal { .guest-box { &.wide { display: block; - text-align: left; + text-align: start; border-radius: var(--border-radius-container-large); } @@ -830,7 +833,7 @@ button.toggle-password { } .text-left { - text-align: left !important; + text-align: start !important; } .hidden { diff --git a/core/css/header.scss b/core/css/header.scss index 8eae2af3992..fb08dda78e5 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -23,7 +23,7 @@ height: 2px; border-radius: 3px; background-color: var(--color-background-plain-text); - left: 50%; + inset-inline-start: 50%; opacity: 1; } @@ -40,7 +40,7 @@ } #expand.menutoggle:focus-visible::after { - left: 40%; + inset-inline-start: 40%; } } @@ -63,7 +63,7 @@ /* LOGO and APP NAME -------------------------------------------------------- */ #nextcloud { padding: 5px 0; - padding-left: 86px; // logo width + 2* pa + padding-inline-start: 86px; // logo width + 2* pa position: relative; height: calc(100% - 4px); box-sizing: border-box; @@ -97,7 +97,7 @@ position: absolute; max-width: 350px; @include header-menu-height(); - right: 8px; // relative to parent + inset-inline-end: 8px; // relative to parent top: variables.$header-height; margin: 0; overflow-y: auto; @@ -116,7 +116,7 @@ width: 0; position: absolute; pointer-events: none; - right: 10px; + inset-inline-end: 10px; } & > div, @@ -133,7 +133,7 @@ background-position: center; width: 62px; position: absolute; - left: 12px; + inset-inline-start: 12px; top: 1px; bottom: 1px; // Invert if not customized and background is bright @@ -142,7 +142,7 @@ .header-appname-container { display: none; - padding-right: 10px; + padding-inline-end: 10px; flex-shrink: 0; } @@ -209,7 +209,7 @@ font-weight: bold; margin: 0; padding: 0; - padding-right: 5px; + padding-inline-end: 5px; overflow: hidden; text-overflow: ellipsis; // Take full width to push the header-shared-by bellow (if any) @@ -243,7 +243,7 @@ overflow: hidden; z-index: 9999; top: -999px; - left: 3px; + inset-inline-start: 3px; padding: 11px; display: flex; flex-wrap: wrap; diff --git a/core/css/icons.scss b/core/css/icons.scss index 46bba2d8e8f..f41e5c22a86 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -33,7 +33,7 @@ margin: -16px 0 0 -16px; position: absolute; top: 50%; - left: 50%; + inset-inline-start: 50%; border-radius: 100%; -webkit-animation: rotate .8s infinite linear; animation: rotate .8s infinite linear; diff --git a/core/css/inputs.scss b/core/css/inputs.scss index a6b4b76a27f..57b97124489 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -280,7 +280,7 @@ select { background: var(--icon-triangle-s-dark) no-repeat right 8px center; appearance: none; background-color: var(--color-main-background); - padding-right: 28px !important; + padding-inline-end: 28px !important; } select, @@ -350,8 +350,8 @@ input { &[type='password'], &[type='email'] { + .icon-confirm { - margin-left: -13px !important; - border-left-color: transparent !important; + margin-inline-start: -13px !important; + border-inline-start-color: transparent !important; border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0 !important; border-width: 2px; background-clip: padding-box; @@ -362,7 +362,7 @@ input { width: var(--default-clickable-area); padding: 7px 6px; cursor: pointer; - margin-right: 0; + margin-inline-end: 0; &:disabled { cursor: default; @include icon-color('confirm-fade', 'actions', variables.$color-black, 2, true); @@ -393,7 +393,7 @@ input { &:focus { + .icon-confirm { border-color: var(--color-primary-element) !important; - border-left-color: transparent !important; + border-inline-start-color: transparent !important; /* above previous input */ z-index: 2; } @@ -422,7 +422,7 @@ input { &.radio, &.checkbox { position: absolute; - left: -10000px; + inset-inline-start: -10000px; top: auto; width: 1px; height: 1px; @@ -473,7 +473,7 @@ input { // Detail description below label of checkbox or radio button & + label ~ em { display: inline-block; - margin-left: 25px; + margin-inline-start: 25px; } & + label ~ em:last-of-type { margin-bottom: $checkbox-radio-size; @@ -546,7 +546,7 @@ div.select2-drop { } .avatar { display: inline-block; - margin-right: 8px; + margin-inline-end: 8px; vertical-align: middle; img { cursor: pointer; @@ -620,7 +620,7 @@ div.select2-container-multi { } .select2-search-choice { line-height: 20px; - padding-left: 5px; + padding-inline-start: 5px; &.select2-search-choice-focus, &:hover, &:active, @@ -671,7 +671,7 @@ div.select2-container { } .select2-search-choice { line-height: 20px; - padding-left: 5px; + padding-inline-start: 5px; background-image: none; background-color: var(--color-background-dark); border-color: var(--color-background-dark); @@ -713,7 +713,7 @@ div.select2-container { flex-wrap: wrap; .selected-tag { line-height: 20px; - padding-left: 5px; + padding-inline-start: 5px; background-image: none; background-color: var(--color-main-background); color: var(--color-text-maxcontrast); @@ -721,7 +721,7 @@ div.select2-container { display: inline-flex; align-items: center; .close { - margin-left: 3px; + margin-inline-start: 3px; } } } @@ -761,7 +761,7 @@ div.select2-container { min-height: 16px; display: block; opacity: 0.5; - margin-right: 5px; + margin-inline-end: 5px; visibility: hidden; } } @@ -843,7 +843,7 @@ progress:not(.vue) { // Same as .hidden-visually label.infield { position: absolute; - left: -10000px; + inset-inline-start: -10000px; top: -10000px; width: 1px; height: 1px; diff --git a/core/css/mobile.scss b/core/css/mobile.scss index 6e3e9c722df..2b6514d0930 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -8,7 +8,7 @@ /* position share dropdown */ #dropdown { - margin-right: 10% !important; + margin-inline-end: 10% !important; width: 80% !important; } @@ -20,7 +20,7 @@ /* fix error display on smaller screens */ .error-wide { width: 100%; - margin-left: 0 !important; + margin-inline-start: 0 !important; box-sizing: border-box; } @@ -37,12 +37,12 @@ } #app-navigation:not(.hidden) + #app-content { - margin-left: 0; + margin-inline-start: 0; } .skip-navigation.skip-content { - left: 3px; - margin-left: 0; + inset-inline-start: 3px; + margin-inline-start: 0; } /* full width for message list on mobile */ @@ -73,7 +73,7 @@ position: fixed; display: inline-block !important; top: variables.$header-height; - left: 0; + inset-inline-start: 0; width: 44px; height: 44px; z-index: 1050; // above app-content @@ -91,7 +91,7 @@ #app-navigation-toggle { position: fixed; display: inline-block !important; - left: 0; + inset-inline-start: 0; width: 44px; height: 44px; z-index: 1050; // above app-content @@ -105,19 +105,19 @@ /* position controls for apps with app-navigation */ #app-navigation + #app-content .files-controls { - padding-left: 44px; + padding-inline-start: 44px; } /* .viewer-mode is when text editor, PDF viewer, etc is open */ #body-user .app-files.viewer-mode .files-controls { - padding-left: 0 !important; + padding-inline-start: 0 !important; } .app-files.viewer-mode #app-navigation-toggle { display: none !important; } table.multiselect thead { - left: 0 !important; + inset-inline-start: 0 !important; } /* prevent overflow in user management controls bar */ @@ -155,14 +155,14 @@ width: 0; position: absolute; pointer-events: none; - right: 15px; + inset-inline-end: 15px; z-index: 2001; display: none; } /* settings need a different offset, since they have a right padding */ &#settings::after { - right: 27px; + inset-inline-end: 27px; } } } diff --git a/core/css/styles.scss b/core/css/styles.scss index ef85a7964d6..90efa9c1990 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -55,7 +55,7 @@ table { } caption, th, td { - text-align: left; + text-align: start; font-weight: normal; } @@ -130,7 +130,7 @@ body { position: fixed; top: 0; bottom: 0; - left: 0; + inset-inline-start: 0; height: 100%; width: 100%; z-index: 9000; @@ -246,13 +246,13 @@ body { #show, #dbpassword { position: absolute; - right: 1em; + inset-inline-end: 1em; top: .8em; float: right; } #show + label, #dbpassword + label { - right: 21px; + inset-inline-end: 21px; top: 15px !important; margin: -14px !important; padding: 14px !important; @@ -294,19 +294,19 @@ body { } #pass2, input[name='personal-password-clone'] { - padding-right: 30px; + padding-inline-end: 30px; } .personal-show-container { position: relative; display: inline-block; - margin-right: 6px; + margin-inline-end: 6px; } #personal-show + label { display: block; - right: 0; + inset-inline-end: 0; margin-top: -43px; - margin-right: -4px; + margin-inline-end: -4px; padding: 22px; } @@ -338,13 +338,13 @@ body { } pre { white-space: pre-wrap; - text-align: left; + text-align: start; } } .error-wide { width: 700px; - margin-left: -200px !important; + margin-inline-start: -200px !important; .button { color: black !important; } @@ -566,7 +566,7 @@ code { } /* AM/PM fix */ table.ui-timepicker tr .ui-timepicker-hour-cell:first-child { - margin-left: 30px; + margin-inline-start: 30px; } .ui-timepicker-table { th { @@ -597,7 +597,7 @@ code { } &.ui-timepicker-hours { - border-right: 1px solid var(--color-border); + border-inline-end: 1px solid var(--color-border); } } } @@ -648,7 +648,7 @@ span.ui-icon { /* ---- TOOLTIPS ---- */ .extra-data { - padding-right: 5px !important; + padding-inline-end: 5px !important; } /* ---- TAGS ---- */ @@ -703,7 +703,7 @@ li.crumb { background-size: auto 24px; flex: 0 0 auto; order: 1; - padding-right: 7px; + padding-inline-end: 7px; &.crumbmenu { order: 2; position: relative; @@ -719,12 +719,12 @@ li.crumb { // Fix because of the display flex .popovermenu { top: 100%; - margin-right: 3px; + margin-inline-end: 3px; ul { max-height: 345px; overflow-y: auto; overflow-x: hidden; - padding-right: 5px; + padding-inline-end: 5px; li.canDrop span:first-child { background-image: url('../img/filetypes/folder-drag-accept.svg?v=1') !important; } @@ -766,10 +766,10 @@ li.crumb { } &:last-child { font-weight: bold; - margin-right: 10px; + margin-inline-end: 10px; // Allow multiple span next to the main 'a' a ~ span { - padding-left: 0; + padding-inline-start: 0; } } &:hover, &:focus, a:focus, &:active { diff --git a/core/css/systemtags.scss b/core/css/systemtags.scss index b3d8bcaac0f..52de3af83f1 100644 --- a/core/css/systemtags.scss +++ b/core/css/systemtags.scss @@ -8,8 +8,8 @@ .select2-result-label { .checkmark { visibility: hidden; - margin-left: -5px; - margin-right: 5px; + margin-inline-start: -5px; + margin-inline-end: 5px; padding: 4px; } .new-item .systemtags-actions { @@ -28,7 +28,7 @@ } .systemtags-actions { position: absolute; - right: 5px; + inset-inline-end: 5px; } .systemtags-rename-form { display: inline-block; diff --git a/core/css/toast.scss b/core/css/toast.scss index a8348c92632..582713ec329 100644 --- a/core/css/toast.scss +++ b/core/css/toast.scss @@ -12,7 +12,7 @@ color: var(--color-main-text); box-shadow: 0 0 6px 0 var(--color-box-shadow); padding: 12px; - padding-right: 34px; + padding-inline-end: 34px; margin-top: 45px; position: fixed; z-index: 9000; @@ -21,7 +21,7 @@ .toast-close { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; width: 38px; opacity: 0.4; padding: 12px; @@ -39,18 +39,18 @@ } } .toastify.toastify-top { - right: 10px; + inset-inline-end: 10px; } .toast-error { - border-left: 3px solid var(--color-error); + border-inline-start: 3px solid var(--color-error); } .toast-info { - border-left: 3px solid var(--color-primary-element); + border-inline-start: 3px solid var(--color-primary-element); } .toast-warning { - border-left: 3px solid var(--color-warning); + border-inline-start: 3px solid var(--color-warning); } .toast-success { - border-left: 3px solid var(--color-success); + border-inline-start: 3px solid var(--color-success); } diff --git a/core/css/tooltip.scss b/core/css/tooltip.scss index c430fa7ac20..c1c4173395e 100644 --- a/core/css/tooltip.scss +++ b/core/css/tooltip.scss @@ -13,7 +13,7 @@ letter-spacing: normal; line-break: auto; line-height: 1.6; - text-align: left; + text-align: start; text-align: start; text-decoration: none; text-shadow: none; diff --git a/core/css/whatsnew.scss b/core/css/whatsnew.scss index b4c168e0511..c4698e397cc 100644 --- a/core/css/whatsnew.scss +++ b/core/css/whatsnew.scss @@ -4,7 +4,7 @@ */ .whatsNewPopover { bottom: 35px !important; - left: 15px !important; + inset-inline-start: 15px !important; width: 270px; z-index: 700; } @@ -20,7 +20,7 @@ .whatsNewPopover .icon-close { position: absolute; - right: 0; + inset-inline-end: 0; } .whatsNewPopover::after { diff --git a/core/src/components/ContactsMenu/Contact.vue b/core/src/components/ContactsMenu/Contact.vue index e57c0d067db..a9d4f46d685 100644 --- a/core/src/components/ContactsMenu/Contact.vue +++ b/core/src/components/ContactsMenu/Contact.vue @@ -88,7 +88,8 @@ export default { display: flex; position: relative; align-items: center; - padding: 3px 3px 3px 10px; + padding: 3px; + padding-inline-start: 10px; &__action { &__icon { @@ -108,8 +109,8 @@ export default { &__body { flex-grow: 1; - padding-left: 10px; - margin-left: 10px; + padding-inline-start: 10px; + margin-inline-start: 10px; min-width: 0; div { @@ -162,7 +163,7 @@ export default { /* actions menu */ .menu { top: 47px; - margin-right: 13px; + margin-inline-end: 13px; } .popovermenu::after { diff --git a/core/src/components/Profile/PrimaryActionButton.vue b/core/src/components/Profile/PrimaryActionButton.vue index 8ec77e88ea2..636fd9c0ee3 100644 --- a/core/src/components/Profile/PrimaryActionButton.vue +++ b/core/src/components/Profile/PrimaryActionButton.vue @@ -61,4 +61,37 @@ export default defineComponent({ .icon { filter: var(--primary-invert-if-dark); } + + .profile__primary-action-button { + font-size: var(--default-font-size); + font-weight: bold; + width: 188px; + height: 44px; + padding: 0 16px; + line-height: 44px; + text-align: center; + border-radius: var(--border-radius-pill); + color: var(--color-primary-element-text); + background-color: var(--color-primary-element); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + .icon { + display: inline-block; + vertical-align: middle; + margin-bottom: 2px; + margin-inline-end: 4px; + + &.icon-invert { + filter: invert(1); + } + } + + &:hover, + &:focus, + &:active { + background-color: var(--color-primary-element-light); + } + } </style> diff --git a/core/src/components/UnifiedSearch/LegacySearchResult.vue b/core/src/components/UnifiedSearch/LegacySearchResult.vue index 29553dfc661..085a6936f2b 100644 --- a/core/src/components/UnifiedSearch/LegacySearchResult.vue +++ b/core/src/components/UnifiedSearch/LegacySearchResult.vue @@ -219,7 +219,7 @@ $margin: 10px; flex-wrap: wrap; // Set to minimum and gro from it min-width: 0; - padding-left: $margin; + padding-inline-start: $margin; } &-line-one, diff --git a/core/src/components/UnifiedSearch/SearchFilterChip.vue b/core/src/components/UnifiedSearch/SearchFilterChip.vue index f3945b78153..e08ddd58a4b 100644 --- a/core/src/components/UnifiedSearch/SearchFilterChip.vue +++ b/core/src/components/UnifiedSearch/SearchFilterChip.vue @@ -54,7 +54,7 @@ export default { .icon { display: flex; align-items: center; - padding-right: 5px; + padding-inline-end: 5px; img { width: 20px; diff --git a/core/src/components/login/LoginForm.vue b/core/src/components/login/LoginForm.vue index 4ba12cbb3c4..d031f14140a 100644 --- a/core/src/components/login/LoginForm.vue +++ b/core/src/components/login/LoginForm.vue @@ -290,7 +290,7 @@ export default { <style lang="scss" scoped> .login-form { - text-align: left; + text-align: start; font-size: 1rem; &__fieldset { diff --git a/core/src/components/login/ResetPassword.vue b/core/src/components/login/ResetPassword.vue index 2e01d800640..0d23e300d0e 100644 --- a/core/src/components/login/ResetPassword.vue +++ b/core/src/components/login/ResetPassword.vue @@ -117,7 +117,7 @@ export default { <style lang="scss" scoped> .login-form { - text-align: left; + text-align: start; font-size: 1rem; &__fieldset { diff --git a/core/src/components/setup/RecommendedApps.vue b/core/src/components/setup/RecommendedApps.vue index 29ad04bcfe0..b8d213ed559 100644 --- a/core/src/components/setup/RecommendedApps.vue +++ b/core/src/components/setup/RecommendedApps.vue @@ -246,7 +246,7 @@ p { .info { h3, p { - text-align: left; + text-align: start; } h3 { diff --git a/core/src/jquery/css/jquery-ui-fixes.scss b/core/src/jquery/css/jquery-ui-fixes.scss index b248e99f831..5e9fe447147 100644 --- a/core/src/jquery/css/jquery-ui-fixes.scss +++ b/core/src/jquery/css/jquery-ui-fixes.scss @@ -143,8 +143,8 @@ border: none; .ui-tabs-nav.ui-corner-all { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-end-start-radius: 0; + border-end-end-radius: 0; } .ui-tabs-nav { @@ -205,8 +205,8 @@ &.ui-corner-all { border-radius: 0; - border-bottom-left-radius: var(--border-radius); - border-bottom-right-radius: var(--border-radius); + border-end-start-radius: var(--border-radius); + border-end-end-radius: var(--border-radius); } .ui-state-hover, .ui-widget-content .ui-state-hover, diff --git a/core/src/views/ContactsMenu.vue b/core/src/views/ContactsMenu.vue index 17bb9d5725c..b1f8a96f730 100644 --- a/core/src/views/ContactsMenu.vue +++ b/core/src/views/ContactsMenu.vue @@ -185,7 +185,7 @@ export default { label[for="contactsmenu__menu__search"] { font-weight: bold; font-size: 19px; - margin-left: 13px; + margin-inline-start: 13px; } &__input-wrapper { diff --git a/core/src/views/LegacyUnifiedSearch.vue b/core/src/views/LegacyUnifiedSearch.vue index 72a30b5b708..265475212bc 100644 --- a/core/src/views/LegacyUnifiedSearch.vue +++ b/core/src/views/LegacyUnifiedSearch.vue @@ -724,7 +724,7 @@ $input-padding: 10px; align-self: flex-start; font-weight: bold; font-size: 19px; - margin-left: 13px; + margin-inline-start: 13px; } } @@ -745,7 +745,9 @@ $input-padding: 10px; } &__filters { - margin: $margin 0 $margin math.div($margin, 2); + margin-block: $margin; + margin-inline-end: 0; + margin-inline-start: math.div($margin, 2); padding-top: 5px; ul { display: inline-flex; @@ -802,7 +804,7 @@ $input-padding: 10px; opacity: .5; border: none; background-color: transparent; - margin-right: 0; + margin-inline-end: 0; &:hover, &:focus, @@ -821,7 +823,7 @@ $input-padding: 10px; display: block; margin: $margin; margin-bottom: $margin - 4px; - margin-left: 13px; + margin-inline-start: 13px; color: var(--color-primary-element); font-size: 19px; font-weight: bold; diff --git a/core/src/views/Profile.vue b/core/src/views/Profile.vue index ab63cadc57d..efb5095a984 100644 --- a/core/src/views/Profile.vue +++ b/core/src/views/Profile.vue @@ -311,7 +311,9 @@ $content-max-width: 640px; align-self: flex-start; padding-top: 20px; min-width: 220px; - margin: -150px 20px 0 0; + margin: 0; + margin-top: -150px; + margin-inline-end: 20px; // Specificity hack is needed to override Avatar component styles :deep(.avatar.avatardiv) { diff --git a/core/src/views/UnsupportedBrowser.vue b/core/src/views/UnsupportedBrowser.vue index e760ef71a81..daeac632e3c 100644 --- a/core/src/views/UnsupportedBrowser.vue +++ b/core/src/views/UnsupportedBrowser.vue @@ -178,7 +178,7 @@ $spacing: 30px; margin-top: 2 * $spacing; margin-bottom: $spacing; li { - text-align: left; + text-align: start; } } } |