nextcloud · Antreesy · Jan 28, 2025 · Jan 20, 2025 · Jan 20, 2025 · Jan 20, 2025
diff --git a/src/PublicShareAuthSidebar.vue b/src/PublicShareAuthSidebar.vue
@@ -235,7 +235,7 @@ body .modal-wrapper * {
 	height: 100%;
 
 	background: var(--color-main-background);
-	border-left: 1px solid var(--color-border);
+	border-inline-start: 1px solid var(--color-border);
 
 	overflow-x: hidden;
 	overflow-y: auto;
@@ -246,7 +246,7 @@ body .modal-wrapper * {
 	justify-content: center;
 
 	/* Unset conflicting rules from guest.css for the sidebar. */
-	text-align: left;
+	text-align: start;
 
 	& > .emptycontent {
 		/* Remove default margin-top as it is unneeded when showing only the empty

diff --git a/src/PublicShareSidebar.vue b/src/PublicShareSidebar.vue
@@ -287,7 +287,7 @@ footer {
 	width: clamp(300px, 27vw, 500px);
 
 	background: var(--color-main-background);
-	border-left: 1px solid var(--color-border);
+	border-inline-start: 1px solid var(--color-border);
 
 	overflow-x: hidden;
 	overflow-y: auto;
@@ -304,19 +304,6 @@ footer {
 	margin-top: 0;
 }
 
-#talk-sidebar .emptycontent button .icon {
-	/* Override rules set for the main icon of an empty content area when an
-	 * icon is shown in a button. */
-	background-size: unset;
-	width: unset;
-	height: unset;
-	margin: unset;
-
-	/* Frame the loading icon on the right border of the button. */
-	top: -3px;
-	right: -5px;
-}
-
 #talk-sidebar .call-button {
 	margin: calc(var(--default-grid-baseline) * 2) auto;
 }

diff --git a/src/PublicShareSidebarTrigger.vue b/src/PublicShareSidebarTrigger.vue
@@ -40,6 +40,6 @@ const ariaLabel = computed(() => {
 
 <style scoped>
 #talk-sidebar-trigger {
-	margin-left: var(--default-grid-baseline);
+	margin-inline-start: var(--default-grid-baseline);
 }
 </style>
diff --git a/src/assets/markdown.scss b/src/assets/markdown.scss
@@ -15,6 +15,7 @@
 
 	ul,
 	ol {
+		/* stylelint-disable-next-line csstools/use-logical */
 		padding-left: 0;
 		padding-inline-start: 15px;
 
@@ -54,8 +55,10 @@
 	}
 
 	blockquote {
+		/* stylelint-disable-next-line csstools/use-logical */
 		padding-left: 0;
 		padding-inline-start: 13px;
+		/* stylelint-disable-next-line csstools/use-logical */
 		border-left: none;
 		border-inline-start: 4px solid var(--color-border);
 	}

diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -241,7 +241,7 @@ export default {
 		}
 
 		&.bot {
-			padding-left: 5px;
+			padding-inline-start: 5px;
 			background-color: var(--color-background-darker);
 		}
 
@@ -250,15 +250,14 @@ export default {
 			padding: 0;
 			display: block;
 			text-align: center;
-			margin-left: auto;
-			margin-right: auto;
+			margin-inline: auto;
 		}
 	}
 
 	&--condensed {
 		width: unset;
 		height: unset;
-		margin-left: calc(var(--condensed-overlap) * -1px);
+		margin-inline-start: calc(var(--condensed-overlap) * -1px);
 		display: flex;
 
 		& > .icon,
@@ -282,7 +281,7 @@ export default {
 
 	&__user-status {
 		position: absolute;
-		right: -4px;
+		inset-inline-end: -4px;
 		bottom: -4px;
 		height: 18px;
 		width: 18px;
@@ -295,7 +294,7 @@ export default {
 .loading-avatar {
 	position: absolute;
 	top: 0;
-	left: 0;
+	inset-inline-start: 0;
 	width: 100%;
 	height: 100%;
 }

diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsParticipantsEditor.vue
@@ -366,18 +366,13 @@ export default {
 	}
 }
 
-// TODO: upstream collapse icon position fix
-:deep(.icon-collapse) {
-	position: absolute !important;
-	left: 0;
-}
-
+// Warning dialog when deleting breakout rooms
 :deep(.dialog) {
 	padding-block: 0px 8px;
 	padding-inline: 12px 8px;
 }
 
 .delete {
-	margin-right: auto;
+	margin-inline-end: auto;
 }
 </style>
diff --git a/src/components/BreakoutRoomsEditor/SelectableParticipant.vue b/src/components/BreakoutRoomsEditor/SelectableParticipant.vue
@@ -199,7 +199,7 @@ export default {
 	&__checkbox {
 		position: absolute;
 		top: 0;
-		left: 0;
+		inset-inline-start: 0;
 		z-index: -1;
 		opacity: 0;
 	}
@@ -220,7 +220,7 @@ export default {
 
 	&__check-icon {
 		display: none;
-		margin-left: auto;
+		margin-inline-start: auto;
 		width: var(--default-clickable-area);
 		flex-shrink: 0;
 	}

diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
@@ -806,7 +806,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../assets/variables';
-
+/* stylelint-disable csstools/use-logical */
 #call-container {
 	width: 100%;
 	height: 100%;

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
@@ -958,6 +958,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+/* stylelint-disable csstools/use-logical */
 .grid-main-wrapper {
 	--navigation-position: calc(var(--default-grid-baseline) * 2);
 	position: relative;

diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
@@ -360,6 +360,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+/* stylelint-disable csstools/use-logical */
 .not-connected {
 	video,
 	.avatar-container {

diff --git a/src/components/CallView/shared/PresenterOverlay.vue b/src/components/CallView/shared/PresenterOverlay.vue
@@ -150,6 +150,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+/* stylelint-disable csstools/use-logical */
 .presenter-overlay {
 	position: absolute;
 	top: 0;

diff --git a/src/components/CallView/shared/ReactionToaster.vue b/src/components/CallView/shared/ReactionToaster.vue
@@ -216,6 +216,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+/* stylelint-disable csstools/use-logical */
 .toaster {
 	position: absolute;
 	bottom: 20px;

diff --git a/src/components/CallView/shared/Screen.vue b/src/components/CallView/shared/Screen.vue
@@ -204,7 +204,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+/* stylelint-disable csstools/use-logical */
 .screenContainer {
 	width: 100%;
 	height: 100%;

diff --git a/src/components/CallView/shared/VideoBackground.vue b/src/components/CallView/shared/VideoBackground.vue
@@ -40,6 +40,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+/* stylelint-disable csstools/use-logical */
 .video-background {
 	position: absolute;
 	left: 0;

diff --git a/src/components/CallView/shared/VideoBottomBar.vue b/src/components/CallView/shared/VideoBottomBar.vue
@@ -318,7 +318,7 @@ export default {
 		}
 
 		& .participant-name {
-			margin-right: 0;
+			margin-inline-end: 0;
 		}
 	}
 }
@@ -346,7 +346,8 @@ export default {
 
 .participant-name {
 	color: white;
-	margin: 0 auto 0 8px;
+	margin-block: 0px;
+	margin-inline: 8px auto;
 	position: relative;
 	white-space: nowrap;
 	overflow: hidden;

diff --git a/src/components/CallView/shared/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue
@@ -628,6 +628,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+/* stylelint-disable csstools/use-logical */
 .not-connected {
 	video,
 	.avatar-container {

diff --git a/src/components/CallView/shared/ViewerOverlayCallView.vue b/src/components/CallView/shared/ViewerOverlayCallView.vue
@@ -242,6 +242,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+/* stylelint-disable csstools/use-logical */
 .viewer-overlay-ghost {
 	position: absolute;
 	bottom: 8px;

diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue
@@ -218,10 +218,7 @@ export default {
 
 .dragover {
 	position: absolute;
-	top: 10%;
-	left: 10%;
-	width: 80%;
-	height: 80%;
+	inset: 10%;
 	background: var(--color-primary-element-light);
 	z-index: 11;
 	display: flex;
@@ -247,7 +244,7 @@ export default {
 	&__button {
 		position: absolute !important;
 		bottom: 8px;
-		right: 24px;
+		inset-inline-end: 24px;
 		z-index: 2;
 	}
 }

diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
@@ -263,7 +263,7 @@ export default {
 
 	&__type {
 		position: absolute;
-		right: -2px;
+		inset-inline-end: -2px;
 		bottom: -2px;
 		display: flex;
 		align-content: center;
@@ -279,7 +279,7 @@ export default {
 	.overlap-icon {
 		position: absolute;
 		top: 0;
-		left: calc(var(--icon-size) - 12px);
+		inset-inline-start: calc(var(--icon-size) - 12px);
 		line-height: 100%;
 		display: inline-block;
 		vertical-align: middle;

diff --git a/src/components/ConversationSettings/BotsSettings.vue b/src/components/ConversationSettings/BotsSettings.vue
@@ -158,7 +158,7 @@ export default {
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			margin-left: auto;
+			margin-inline-start: auto;
 		}
 
 		&-button {

diff --git a/src/components/ConversationSettings/ConversationPermissionsSettings.vue b/src/components/ConversationSettings/ConversationPermissionsSettings.vue
@@ -57,6 +57,7 @@
 
 			<!-- Edit advanced permissions -->
 			<NcButton v-show="showEditButton"
+				class="edit-button"
 				type="tertiary"
 				:aria-label="t('spreed', 'Edit permissions')"
 				@click="showPermissionsEditor = true">
@@ -248,15 +249,14 @@ export default {
 		&--advanced {
 			display: flex;
 			justify-content: flex-start;
-
-			// Edit button
-			button {
-				margin-left: 16px;
-			}
 		}
 	}
 }
 
+.edit-button {
+	margin-inline-start: 16px;
+}
+
 .conversation-permissions-editor__hint {
 	color: var(--color-text-maxcontrast);
 	margin-bottom: 16px;

diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue
@@ -311,18 +311,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-:deep(button.icon) {
-	height: 32px;
-	width: 32px;
-	display: inline-block;
-	margin-left: 5px;
-	vertical-align: middle;
-}
-
-:deep(.modal-container) {
-	display: flex !important;
-}
-
 :deep(.app-settings-section__hint) {
 	color: var(--color-text-maxcontrast);
 	padding: 8px 0;
@@ -335,11 +323,7 @@ export default {
 	margin: calc(var(--default-grid-baseline) * 4) 0 var(--default-grid-baseline) 0;
 }
 
-:deep(.app-settings-subsection) {
+:deep(.app-settings-subsection:not(:first-child)) {
 	margin-top: 25px;
-
-	&:first-child {
-		margin-top: 0;
-	}
 }
 </style>