Merge pull request #47343 from nextcloud/feat/31420/add-bidi-support

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 {

apps/dashboard/src/DashboardApp.vue

@@ -569,11 +569,10 @@ export default {
 				background-size: 32px;
 				width: 32px;
 				height: 32px;
-				margin-right: 16px;
 				background-position: center;
 				float: left;
 				margin-top: -6px;
-				margin-left: 6px;
+				margin-inline: 6px 16px;
 			}
 
 			img {
@@ -609,7 +608,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 +660,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 +690,7 @@ export default {
 
 		input[type='checkbox'].checkbox + label:before {
 			position: absolute;
-			right: 12px;
+			inset-inline-end: 12px;
 			top: 16px;
 		}
 

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
-}
+}

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;
 	}
@@ -201,12 +202,12 @@ export default {
 }
 
 .to-text {
-	padding-right: 12px;
+	padding-inline-end: 12px;
 }
 
 .empty-content {
 	color: var(--color-text-lighter);
-	margin-top: 4px;
+	margin-block-start: var(--default-grid-baseline);
 	align-self: center;
 }
 </style>

apps/dav/src/views/CalDavSettings.vue

@@ -150,10 +150,10 @@ export default {
 
 <style scoped>
 	.indented {
-		padding-left: 28px;
+		padding-inline-start: 28px;
 	}
 	/** Use deep selector to affect v-html */
-	* >>> a {
+	* :deep(a) {
 		text-decoration: underline;
 	}
 	.settings-hint {

apps/federatedfilesharing/src/components/PersonalSettings.vue

@@ -125,7 +125,7 @@ export default {
 			return window.location.protocol + '//' + window.location.host + this.logoPath
 		},
 		backgroundStyle() {
-			return `padding:10px;background-color:${this.color};color:${this.textColor};border-radius:3px;padding-left:4px;`
+			return `padding:10px;background-color:${this.color};color:${this.textColor};border-radius:3px;padding-inline-start:4px;`
 		},
 		linkStyle() {
 			return `background-image:url(${this.logoPathAbsolute});width:50px;height:30px;position:relative;top:8px;background-size:contain;display:inline-block;background-repeat:no-repeat; background-position: center center;`
@@ -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>

apps/federation/css/settings-admin.css

@@ -14,22 +14,22 @@
 .removeTrustedServer {
 	display: none;
 	vertical-align:middle;
-	padding-left: 10px;
+	padding-inline-start: 10px;
 }
 
 #ocFederationAddServerButton {
 	cursor: pointer;
 }
 
 #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 {

apps/files/css/detailsView.scss

@@ -34,8 +34,7 @@
 }
 
 .app-sidebar .thumbnailContainer.large {
-	margin-left: -15px;
-	margin-right: -35px; /* 15 + 20 for the close button */
+	margin-inline: -15px -35px; /* 15 + 20 for the close button */
 	margin-top: -15px;
 }
 
@@ -73,15 +72,15 @@
 	overflow-x: hidden;
 	padding-top: 14px;
 	font-size: 80%;
-	margin-left: 0;
+	margin-inline-start: 0;
 }
 
 .app-sidebar .thumbnail {
 	width: 100%;
 	min-height: 75px;
 	display: inline-block;
 	float: left;
-	margin-right: 10px;
+	margin-inline-end: 10px;
 	background-size: contain;
 	background-repeat: no-repeat;
 }
@@ -126,7 +125,7 @@
 .app-sidebar .close {
 	position: absolute;
 	top: 0;
-	right: 0;
+	inset-inline-end: 0;
 	opacity: .5;
 	z-index: 1;
 	width: 44px;