feat: Add bidi support in core directory

Signed-off-by: Mostafa Ahangarha <ahangarha@riseup.net>
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 /core/css
parent: 23efda911126a60c9af0198a7c842c726a8a4213 (diff)
download: nextcloud-server-723780d18431fad7f653379066796d41ce267cb5.tar.gz
nextcloud-server-723780d18431fad7f653379066796d41ce267cb5.zip
12 files changed, 159 insertions, 156 deletions
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 {
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 /core/css
parent	23efda911126a60c9af0198a7c842c726a8a4213 (diff)
download	nextcloud-server-723780d18431fad7f653379066796d41ce267cb5.tar.gz nextcloud-server-723780d18431fad7f653379066796d41ce267cb5.zip