refactor(styles): Adjust code style in SCSS sources to match our stylelint config

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

apps/dashboard/src/DashboardApp.vue

@@ -507,7 +507,6 @@ export default {
 .panel, .panels > div {
 	// Ensure the maxcontrast color is set for the background
 	--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
-
 	width: 320px;
 	max-width: 100%;
 	margin: 16px;
@@ -532,7 +531,8 @@ export default {
 		padding: 16px;
 		cursor: grab;
 
-		&, ::v-deep * {
+		&,
+		:deep(*) {
 			-webkit-touch-callout: none;
 			-webkit-user-select: none;
 			-khtml-user-select: none;
@@ -618,11 +618,10 @@ export default {
 .button,
 .button-vue,
 .edit-panels,
-.statuses ::v-deep .action-item .action-item__menutoggle,
+.statuses :deep(.action-item .action-item__menutoggle),
-.statuses ::v-deep .action-item.action-item--open .action-item__menutoggle {
+.statuses :deep(.action-item.action-item--open .action-item__menutoggle) {
 	// Ensure the maxcontrast color is set for the background
 	--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
-
 	background-color: var(--color-main-background-blur);
 	-webkit-backdrop-filter: var(--filter-background-blur);
 	backdrop-filter: var(--filter-background-blur);

apps/dashboard/src/components/ApiDashboardWidget.vue

@@ -117,6 +117,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-</style>

apps/dav/src/components/AbsenceForm.vue

@@ -261,7 +261,7 @@ export default {
 		&__picker {
 			flex: 1 auto;
 
-			::v-deep .native-datetime-picker--input {
+			:deep(.native-datetime-picker--input) {
 				margin-bottom: 0;
 			}
 		}

apps/dav/src/components/AvailabilityForm.vue

@@ -139,30 +139,37 @@ export default {
 	padding: 0 10px 0 10px;
 	position: absolute;
 }
+
 :deep(.availability-slots) {
 	display: flex;
 	white-space: normal;
 }
+
 :deep(.availability-slot) {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	flex-wrap: wrap;
 }
+
 :deep(.availability-slot-group) {
 	display: flex;
 	flex-direction: column;
 }
+
 :deep(.mx-input-wrapper) {
 	width: 85px;
 }
+
 :deep(.mx-datepicker) {
 	width: 97px;
 }
+
 :deep(.multiselect) {
 	border: 1px solid var(--color-border-dark);
 	width: 120px;
 }
+
 .time-zone {
 	padding-block: 32px 12px;
 	padding-inline: 0 12px;
@@ -175,6 +182,7 @@ export default {
 		font-weight: bold;
 	}
 }
+
 .grid-table {
 	display: grid;
 	margin-bottom: 32px;
@@ -183,9 +191,11 @@ export default {
 	grid-template-columns: min-content auto min-content;
 	max-width: 500px;
 }
+
 .button {
 	align-self: flex-end;
 }
+
 :deep(.label-weekday) {
 	position: relative;
 	display: inline-flex;

apps/dav/src/views/CalDavSettings.vue

@@ -156,6 +156,7 @@ export default {
 	* :deep(a) {
 		text-decoration: underline;
 	}
+
 	.settings-hint {
 		margin-top: -.2em;
 		margin-bottom: 1em;

apps/files/src/components/FilesListVirtual.vue

@@ -350,7 +350,6 @@ export default defineComponent({
 	--icon-preview-size: 32px;
 
 	--fixed-block-start-position: var(--default-clickable-area);
-
 	overflow: auto;
 	height: 100%;
 	will-change: scroll-position;
@@ -453,7 +452,6 @@ export default defineComponent({
 			display: flex;
 			align-items: center;
 			width: 100%;
-			user-select: none;
 			border-block-end: 1px solid var(--color-border);
 			box-sizing: border-box;
 			user-select: none;
@@ -764,7 +762,6 @@ tbody.files-list__tbody.files-list__tbody--grid {
 	--row-width: calc(var(--icon-preview-size) + var(--item-padding) * 2);
 	--row-height: calc(var(--icon-preview-size) + var(--name-height) + var(--mtime-height) + var(--item-padding) * 2);
 	--checkbox-padding: 0px;
-
 	display: grid;
 	grid-template-columns: repeat(auto-fill, var(--row-width));
 
@@ -787,8 +784,8 @@ tbody.files-list__tbody.files-list__tbody--grid {
 	.files-list__row-checkbox {
 		position: absolute;
 		z-index: 9;
-		top: calc(var(--item-padding)/2);
+		top: calc(var(--item-padding) / 2);
-		inset-inline-start: calc(var(--item-padding)/2);
+		inset-inline-start: calc(var(--item-padding) / 2);
 		overflow: hidden;
 		--checkbox-container-size: 44px;
 		width: var(--checkbox-container-size);

apps/files/src/components/LegacyView.vue

@@ -38,5 +38,3 @@ export default {
 	},
 }
 </script>
-<style>
-</style>

apps/files/src/components/TemplatePreview.vue

@@ -198,7 +198,7 @@ export default {
 	&__title {
 		overflow: hidden;
 		// also count preview border
-		max-width: calc(var(--width) + 2*2px);
+		max-width: calc(var(--width) + 2 * 2px);
 		padding: var(--margin);
 		white-space: nowrap;
 		text-overflow: ellipsis;

apps/files/src/components/TransferOwnershipDialogue.vue

@@ -206,10 +206,12 @@ export default {
 .middle-align {
 	vertical-align: middle;
 }
+
 p {
 	margin-top: 12px;
 	margin-bottom: 12px;
 }
+
 .new-owner-row {
 	display: flex;
 	flex-wrap: wrap;
@@ -229,6 +231,7 @@ p {
 		max-width: 280px;
 	}
 }
+
 .transfer-select-row {
 	span {
 		margin-inline-end: 8px;

apps/files/src/views/Navigation.vue

@@ -201,19 +201,15 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-// TODO: remove when https://github.com/nextcloud/nextcloud-vue/pull/3539 is in
+.app-navigation {
-.app-navigation::v-deep .app-navigation-entry-icon {
+	:deep(.app-navigation-entry.active .button-vue.icon-collapse:not(:hover)) {
-	background-repeat: no-repeat;
+		color: var(--color-primary-element-text);
-	background-position: center;
+	}
-}
 
-.app-navigation::v-deep .app-navigation-entry.active .button-vue.icon-collapse:not(:hover) {
+	> ul.app-navigation__list {
-	color: var(--color-primary-element-text);
+		// Use flex gap value for more elegant spacing
-}
+		padding-bottom: var(--default-grid-baseline, 4px);
-
+	}
-.app-navigation > ul.app-navigation__list {
-	// Use flex gap value for more elegant spacing
-	padding-bottom: var(--default-grid-baseline, 4px);
 }
 
 .app-navigation-entry__settings {

apps/files/src/views/Sidebar.vue

@@ -612,7 +612,7 @@ export default {
 	}
 
 	.svg-icon {
-		::v-deep svg {
+		:deep(svg) {
 			width: 20px;
 			height: 20px;
 			fill: currentColor;

apps/files/src/views/TemplatePicker.vue

@@ -313,7 +313,7 @@ export default defineComponent({
 		padding: calc(var(--margin) * 2) var(--margin);
 		position: sticky;
 		bottom: 0;
-		background-image: linear-gradient(0, var(--gradient-main-background));
+		background-image: linear-gradient(0deg, var(--gradient-main-background));
 
 		button, input[type='submit'] {
 			height: 44px;
@@ -321,7 +321,7 @@ export default defineComponent({
 	}
 
 	// Make sure we're relative for the loading emptycontent on top
-	::v-deep .modal-container {
+	:deep(.modal-container) {
 		position: relative;
 	}
 

apps/files_external/css/settings.scss

@@ -12,70 +12,82 @@
 	tr.externalStorageLoading > td {
 		text-align: center;
 	}
-}
 
-#externalStorage td {
+	td {
-	& > input:not(.applicableToAllUsers), & > select {
+		height: 50px;
-		width: 100%;
-	}
-}
 
-#externalStorage .popovermenu li > .menuitem {
+		&.mountOptionsToggle,
-    width: fit-content !important;
+		&.remove,
-}
+		&.save {
-
+			position: relative;
-#externalStorage td.status {
+			padding: 0 !important;
-	/* overwrite conflicting core styles */
-	display: table-cell;
-	vertical-align: middle;
-	/* ensure width does not change even if internal span is not displayed */
-	width: 43px;
-}
-
-#externalStorage td.status > span {
-	display: inline-block;
-	height: 28px;
-	width: 28px;
-	vertical-align: text-bottom;
-	border-radius: 50%;
-	cursor: pointer;
-}
-#externalStorage {
-	td.mountPoint, td.backend, td.authentication, td.configuration {
-		min-width: 160px;
-		width: 15%;
-	}
-}
-#externalStorage td>img { padding-top:7px; opacity: 0.5; }
-#externalStorage td>img:hover { padding-top:7px; cursor:pointer; opacity: 1; }
-#addMountPoint>td { border:none; }
-#addMountPoint>td.applicable { visibility:hidden; }
-#addMountPoint>td.hidden { visibility:hidden; }
-
-#externalStorage td {
-	height: 50px;
-	&.mountOptionsToggle,
-	&.remove,
-	&.save {
-		position: relative;
-		padding: 0 !important;
-		width: 44px;
-		[class^='icon-'],
-		[class*=' icon-'] {
 			width: 44px;
-			height: 44px;
+			[class^='icon-'],
-			margin: 3px;
+			[class*=' icon-'] {
+				width: 44px;
+				height: 44px;
+				margin: 3px;
+				opacity: 0.5;
+				padding: 14px;
+				vertical-align: text-bottom;
+				cursor: pointer;
+				&:hover {
+					opacity: 1;
+				}
+			}
+		}
+
+		&.mountPoint,
+		&.backend,
+		&.authentication,
+		&.configuration {
+			min-width: 160px;
+			width: 15%;
+		}
+
+		&.status {
+			/* overwrite conflicting core styles */
+			display: table-cell;
+			vertical-align: middle;
+			/* ensure width does not change even if internal span is not displayed */
+			width: 43px;
+
+			> span {
+				display: inline-block;
+				height: 28px;
+				width: 28px;
+				vertical-align: text-bottom;
+				border-radius: 50%;
+				cursor: pointer;
+			}
+		}
+
+		> input:not(.applicableToAllUsers), & > select {
+			width: 100%;
+		}
+
+		> img {
+			padding-top: 7px;
 			opacity: 0.5;
-			padding: 14px;
+
-			vertical-align: text-bottom;
-			cursor: pointer;
 			&:hover {
+				cursor:pointer;
 				opacity: 1;
 			}
 		}
 	}
+
+	.popovermenu li > .menuitem {
+		width: fit-content !important;
+	}
 }
 
+#addMountPoint>td { border:none; }
+
+#addMountPoint>td.applicable { visibility:hidden; }
+
+#addMountPoint>td.hidden { visibility:hidden; }
+
 #selectBackend {
 	margin-inline-start: -10px;
 	width: 150px;
@@ -85,6 +97,7 @@
 #externalStorage td.backend {
 	white-space: normal;
 }
+
 #externalStorage td.configuration > * {
 	white-space: nowrap;
 }
@@ -129,18 +142,22 @@
 	height: 32px;
 	padding: 3px;
 }
+
 .files-external-select2 .select2-results .select2-result-label > span {
 	display: block;
 	position: relative;
 }
+
 .files-external-select2 .select2-results .select2-result-label .avatardiv {
 	display:inline-block;
 }
+
 .files-external-select2 .select2-results .select2-result-label .avatardiv + span {
 	position: absolute;
 	top: 5px;
 	margin-inline-start: 10px;
 }
+
 .files-external-select2 .select2-results .select2-result-label .avatardiv[data-type="group"] + span {
 	vertical-align: top;
 	top: 6px;

apps/files_sharing/css/icons.scss

@@ -9,9 +9,11 @@
 .icon-room {
 	background-image: var(--icon-talk-dark);
 }
+
 .icon-circle {
 	background-image: var(--icon-circles-dark);
 }
+
 .icon-guests {
 	background-image: var(--icon-user-dark);
 }

apps/files_sharing/css/public.scss

@@ -63,10 +63,6 @@ $download-button-section-height: 200px;
     margin-top: 400px;
 }
 
-#imgframe .plyr {
-    top: 0px !important;
-}
-
 #imgframe .text-preview {
 	display: inline-block;
 	position: relative;
@@ -88,10 +84,10 @@ $download-button-section-height: 200px;
 }
 
 #imgframe .plyr {
+	top: 0px !important;
 	max-height: 100%;
 }
 
-
 .app-files_sharing #app-content footer {
 	position: sticky !important;
 }
@@ -131,12 +127,14 @@ thead {
 #details {
 	display: inline-flex;
 }
+
 #details button,
 #details input,
 #details .button {
 	margin: 0 5px;
 	line-height: normal;
 }
+
 #details button:hover,
 #details input:hover,
 #details .button:hover {

apps/files_sharing/css/publicView.scss

@@ -2,5 +2,5 @@
  * SPDX-FileCopyrightText: 2017 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'public.scss';
+@use 'public';
-@use 'mobile.scss';
+@use 'mobile';

apps/files_sharing/src/components/SharingEntryLink.vue

@@ -917,7 +917,7 @@ export default {
 		}
 	}
 
-	::v-deep .avatar-link-share {
+	:deep(.avatar-link-share) {
 		background-color: var(--color-primary-element);
 	}
 

apps/files_sharing/src/views/SharingDetailsTab.vue

@@ -350,7 +350,7 @@ export default {
 			case this.SHARE_TYPES.SHARE_TYPE_USER:
 				return t('files_sharing', 'Share with {userName}', { userName: this.share.shareWithDisplayName })
 			case this.SHARE_TYPES.SHARE_TYPE_EMAIL:
-			    return t('files_sharing', 'Share with email {email}', { email: this.share.shareWith })
+				return t('files_sharing', 'Share with email {email}', { email: this.share.shareWith })
 			case this.SHARE_TYPES.SHARE_TYPE_LINK:
 				return t('files_sharing', 'Share link')
 			case this.SHARE_TYPES.SHARE_TYPE_GROUP:
@@ -366,12 +366,12 @@ export default {
 			case this.SHARE_TYPES.SHARE_TYPE_GUEST:
 				return t('files_sharing', 'Share with guest')
 			default: {
-			        if (this.share.id) {
+					if (this.share.id) {
-					    // Share already exists
+						// Share already exists
-					    return t('files_sharing', 'Update share')
+						return t('files_sharing', 'Update share')
-				    } else {
+					} else {
-					    return t('files_sharing', 'Create share')
+						return t('files_sharing', 'Create share')
-				    }
+					}
 			}
 			}
 		},
@@ -1104,12 +1104,9 @@ export default {
 					padding: 0.1em;
 				}
 
-				::v-deep label {
+				:deep(label span) {
-
+					display: flex;
-					span {
+					flex-direction: column;
-						display: flex;
-						flex-direction: column;
-					}
 				}
 
 				/* Target component based style in NcCheckboxRadioSwitch slot content*/
@@ -1154,20 +1151,18 @@ export default {
 			}
 
 			/*
-              The following style is applied out of the component's scope
+			  The following style is applied out of the component's scope
-              to remove padding from the label.checkbox-radio-switch__label,
+			  to remove padding from the label.checkbox-radio-switch__label,
-              which is used to group radio checkbox items. The use of ::v-deep
+			  which is used to group radio checkbox items. The use of ::v-deep
-              ensures that the padding is modified without being affected by
+			  ensures that the padding is modified without being affected by
-              the component's scoping.
+			  the component's scoping.
-              Without this achieving left alignment for the checkboxes would not
+			  Without this achieving left alignment for the checkboxes would not
-              be possible.
+			  be possible.
-            */
+			*/
-			span {
+			span :deep(label) {
-				::v-deep label {
+				padding-inline-start: 0 !important;
-					padding-inline-start: 0 !important;
+				background-color: initial !important;
-					background-color: initial !important;
+				border: none !important;
-					border: none !important;
-				}
 			}
 
 			section.custom-permissions-group {
@@ -1177,7 +1172,7 @@ export default {
 	}
 
 	&__delete {
-		>button:first-child {
+		> button:first-child {
 			color: rgb(223, 7, 7);
 		}
 	}

apps/oauth2/src/App.vue

@@ -148,10 +148,12 @@ export default {
 		min-height: 34px !important;
 		display: inline-flex !important;
 	}
+
 	.oauth2-form {
 		display: flex;
 		flex-direction: row;
 	}
+
 	.oauth2-form--input {
 		max-width: 200px;
 		margin-inline-end: 10px;

apps/oauth2/src/components/OAuthItem.vue

@@ -90,13 +90,16 @@ export default {
 		display: flex;
 		align-items: center;
 	}
+
 	.action-secret code {
 		padding-top: 5px;
 	}
+
 	td code {
 		display: inline-block;
 		vertical-align: middle;
 	}
+
 	table.inline td {
 		border: none;
 		padding: 5px;

apps/settings/src/components/AppStoreSidebar/AppDetailsTab.vue

@@ -427,6 +427,7 @@ export default {
 	border-color: var(--color-error);
 	background: var(--color-main-background);
 }
+
 .force:hover,
 .force:active {
 	color: var(--color-main-background);

apps/settings/src/components/BasicSettings/BackgroundJob.vue

@@ -185,6 +185,7 @@ export default {
 	background-color: var(--color-error);
 	width: initial;
 }
+
 .warning {
 	margin-top: 8px;
 	padding: 5px;
@@ -193,6 +194,7 @@ export default {
 	background-color: var(--color-warning);
 	width: initial;
 }
+
 .ajaxSwitch {
 	margin-top: 1rem;
 }

apps/settings/src/components/BasicSettings/ProfileSettings.vue

@@ -80,6 +80,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-</style>

apps/settings/src/components/Markdown.vue

@@ -100,7 +100,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.settings-markdown::v-deep {
+.settings-markdown :deep {
 	a {
 		text-decoration: underline;
 		&::after {

apps/settings/src/components/PersonalInfo/AvatarSection.vue

@@ -257,6 +257,7 @@ section {
 	grid-row: 1/3;
 	padding: 10px 10px;
 }
+
 .avatar {
 	&__container {
 		margin: calc(var(--default-grid-baseline) * 2) auto 0 auto;
@@ -296,7 +297,7 @@ section {
 			justify-content: space-between;
 		}
 
-		&::v-deep .cropper-view-box {
+		:deep(.cropper-view-box) {
 			border-radius: 50%;
 		}
 	}

apps/settings/src/components/PersonalInfo/BirthdaySection.vue

@@ -118,7 +118,7 @@ export default {
 section {
 	padding: 10px 10px;
 
-	&::v-deep button:disabled {
+	:deep(button:disabled) {
 		cursor: default;
 	}
 

apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue

@@ -104,7 +104,7 @@ export default {
 		box-shadow: 0 0 3px var(--color-box-shadow);
 
 		& *,
-		&::v-deep * {
+		&:deep(*) {
 			cursor: default;
 		}
 	}

apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue

@@ -82,7 +82,7 @@ export default {
 section {
 	padding: 10px 10px;
 
-	&::v-deep button:disabled {
+	&:deep(button:disabled) {
 		cursor: default;
 	}
 }

apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue

@@ -118,7 +118,7 @@ section {
 			pointer-events: none;
 
 			& *,
-			&::v-deep * {
+			&:deep(*) {
 				cursor: default;
 				pointer-events: none;
 			}

apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue

@@ -142,7 +142,7 @@ export default {
 		pointer-events: none;
 
 		& *,
-		&::v-deep * {
+		&:deep(*) {
 			cursor: default;
 			pointer-events: none;
 		}

apps/settings/src/components/UserList.vue

@@ -398,7 +398,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import './Users/shared/styles.scss';
+@use './Users/shared/styles' as *;
 
 .empty {
 	:deep {

apps/settings/src/components/Users/UserListFooter.vue

@@ -84,11 +84,11 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-@import './shared/styles.scss';
+@use './shared/styles';
 
 .footer {
-	@include row;
+	@include styles.row;
-	@include cell;
+	@include styles.cell;
 
 	&__cell {
 		position: sticky;

apps/settings/src/components/Users/UserListHeader.vue

@@ -140,12 +140,12 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
-@import './shared/styles.scss';
+@use './shared/styles';
 
 .header {
 	border-bottom: 1px solid var(--color-border);
 
-	@include row;
+	@include styles.row;
-	@include cell;
+	@include styles.cell;
 }
 </style>

apps/settings/src/components/Users/UserRow.vue

@@ -907,10 +907,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import './shared/styles.scss';
+@use './shared/styles';
 
 .user-list__row {
-	@include row;
+	@include styles.row;
 
 	&:hover {
 		background-color: var(--color-background-hover);
@@ -927,7 +927,7 @@ export default {
 }
 
 .row {
-	@include cell;
+	@include styles.cell;
 
 	&__cell {
 		border-bottom: 1px solid var(--color-border);

apps/theming/src/UserTheming.vue

@@ -301,7 +301,7 @@ export default {
 	}
 
 	// Proper highlight for links and focus feedback
-	&::v-deep a {
+	:deep(a) {
 		font-weight: bold;
 
 		&:hover,
@@ -312,7 +312,6 @@ export default {
 
 	&__preview-list {
 		--gap: 30px;
-
 		display: grid;
 		margin-top: var(--gap);
 		column-gap: var(--gap);

apps/theming/src/components/BackgroundSettings.vue

@@ -339,7 +339,6 @@ export default {
 		background-size: cover;
 
 		&__filepicker {
-			background-color: var(--color-main-text);
 			background-color: var(--color-background-dark);
 
 			&.background--active {

apps/theming/src/components/ItemPreview.vue

@@ -117,7 +117,6 @@ export default {
 .theming__preview {
 	// We make previews on 16/10 screens
 	--ratio: 16;
-
 	position: relative;
 	display: flex;
 	justify-content: flex-start;

apps/theming/src/components/admin/AppMenuSection.vue

@@ -115,6 +115,7 @@ export default defineComponent({
 h3, h4 {
 	font-weight: bold;
 }
+
 h4, h5 {
 	margin-block-start: 12px;
 }

apps/theming/src/components/admin/CheckboxField.vue

@@ -75,7 +75,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import './shared/field.scss';
+@use './shared/field' as *;
 
 .field {
 	&__description {

apps/theming/src/components/admin/ColorPickerField.vue

@@ -136,7 +136,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import './shared/field.scss';
+@use './shared/field' as *;
+
 .description {
 	color: var(--color-text-maxcontrast);
 }

apps/theming/src/components/admin/FileInputField.vue

@@ -209,7 +209,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import './shared/field.scss';
+@use './shared/field' as *;
 
 .field {
 	&__loading-icon {

apps/user_status/src/components/PreviousStatus.vue

@@ -94,6 +94,7 @@ export default {
 		}
 	}
 }
+
 .backup-status {
 	&__reset-button {
 		justify-content: flex-end;

apps/weather_status/src/App.vue

@@ -570,6 +570,7 @@ export default {
 	align-items: center;
 	justify-content: center;
 }
+
 .weather-image {
 	width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));
 }

apps/workflowengine/src/components/Check.vue

@@ -190,9 +190,11 @@ export default {
 			margin-bottom: 5px;
 		}
 	}
+
 	input[type=text] {
 		margin: 0;
 	}
+
 	.invalid {
 		border-color: var(--color-error) !important;
 	}

apps/workflowengine/src/components/Checks/FileSystemTag.vue

@@ -49,7 +49,3 @@ export default {
 	},
 }
 </script>
-
-<style scoped>
-
-</style>

apps/workflowengine/src/components/Checks/RequestTime.vue

@@ -109,7 +109,7 @@ export default {
 			margin-bottom: 5px;
 		}
 
-		.multiselect::v-deep .multiselect__tags:not(:hover):not(:focus):not(:active) {
+		.multiselect:deep(.multiselect__tags:not(:hover):not(:focus):not(:active)) {
 			border: 1px solid transparent;
 		}
 

apps/workflowengine/src/components/Checks/RequestURL.vue

@@ -117,6 +117,7 @@ export default {
 	input[type='text'] {
 		width: 100%;
 	}
+
 	input[type='text'] {
 		min-height: 48px;
 	}

apps/workflowengine/src/components/Checks/RequestUserAgent.vue

@@ -109,6 +109,7 @@ export default {
 	input[type='text'] {
 		width: 100%;
 	}
+
 	input[type='text'] {
 		min-height: 48px;
 	}

apps/workflowengine/src/components/Event.vue

@@ -94,6 +94,7 @@ export default {
 			max-width: 550px;
 		}
 	}
+
 	.isComplex {
 		img {
 			vertical-align: text-top;

apps/workflowengine/src/components/Operation.vue

@@ -40,5 +40,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-	@import "./../styles/operation";
+@use "./../styles/operation" as *;
 </style>

apps/workflowengine/src/components/Rule.vue

@@ -233,6 +233,7 @@ export default {
 			margin-inline-end: 20px;
 		}
 	}
+
 	.trigger p, .action p {
 		min-height: 34px;
 		display: flex;
@@ -249,9 +250,11 @@ export default {
 			max-width: 300px;
 		}
 	}
+
 	.trigger p:first-child span {
 			padding-top: 3px;
 	}
+
 	.trigger p:last-child {
 			padding-top: 8px;
 	}

apps/workflowengine/src/components/Workflow.vue

@@ -140,9 +140,12 @@ export default {
 </script>
 
 <style scoped lang="scss">
+	@use "./../styles/operation";
+
 	#workflowengine {
 		border-bottom: 1px solid var(--color-border);
 	}
+
 	.section {
 		max-width: 100vw;
 
@@ -151,6 +154,7 @@ export default {
 			margin-bottom: 0;
 		}
 	}
+
 	.actions {
 		display: flex;
 		flex-wrap: wrap;
@@ -160,6 +164,7 @@ export default {
 			flex-basis: 250px;
 		}
 	}
+
 	.actions__more {
 		margin-bottom: 10px;
 	}
@@ -198,8 +203,6 @@ export default {
 		padding-bottom: 0;
 	}
 
-	@import "./../styles/operation";
-
 	.actions__item.more {
 		background-color: var(--color-background-dark);
 	}

apps/workflowengine/src/styles/operation.scss

@@ -12,6 +12,7 @@
 	margin-inline: -1px 20px;
 	margin-bottom: 20px;
 }
+
 .actions__item .icon {
 	display: block;
 	width: 100%;
@@ -22,6 +23,7 @@
 	margin-bottom: 10px;
 	background-repeat: no-repeat;
 }
+
 .actions__item__description {
 	text-align: center;
 	flex-grow: 1;
@@ -29,20 +31,24 @@
 	flex-direction: column;
 	align-items: center;
 }
+
 .actions__item_options {
 	width: 100%;
 	margin-top: 10px;
 	padding-inline-start: 60px;
 }
+
 h3, small {
 	padding: 6px;
 	display: block;
 }
+
 h3 {
 	margin: 0;
 	padding: 0;
 	font-weight: 600;
 }
+
 small {
 	font-size: 10pt;
 	flex-grow: 1;

core/css/apps.scss

@@ -114,7 +114,6 @@ kbd {
 #app-navigation:not(.vue) {
 	// Ensure the maxcontrast color is set for the background
 	--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
-
 	width: variables.$navigation-width;
 	z-index: 500;
 	overflow-y: auto;
@@ -454,7 +453,6 @@ kbd {
 			background-repeat: no-repeat;
 			background-position: center;
 			border: none;
-			border-radius: 0;
 			outline: none !important;
 			box-shadow: none;
 			content: ' ';
@@ -677,6 +675,7 @@ body[dir='ltr'] {
 		}
 	}
 }
+
 body[dir='rtl'] {
 	.app-navigation-personal,
 	.app-navigation-administration {
@@ -912,6 +911,7 @@ body[dir='ltr'] #app-settings-header .settings-button {
 		background-position: left 12px center;
 	}
 }
+
 body[dir='rtl'] #app-settings-header .settings-button {
 	&::before {
 		background-position: right 14px center;
@@ -937,6 +937,7 @@ body[dir='rtl'] #app-settings-header .settings-button {
 		}
 	}
 }
+
 .sub-section {
 	position: relative;
 	margin-top: 10px;
@@ -1016,6 +1017,7 @@ body[dir='rtl'] #app-settings-header .settings-button {
 		}
 	}
 }
+
 .tabsContainer {
 	.tab {
 		padding: 0 15px 15px;
@@ -1026,6 +1028,7 @@ body[dir='rtl'] #app-settings-header .settings-button {
 body[dir='ltr'] .tabsContainer {
 	clear: left;
 }
+
 body[dir='rtl'] .tabsContainer {
 	clear: right;
 }
@@ -1486,6 +1489,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
 		display: flex;
 	}
 }
+
 .button.primary.skip-navigation:focus-visible {
 	box-shadow: 0 0 0 4px var(--color-main-background) !important;
 	outline: 2px solid var(--color-main-text) !important;

core/css/guest.scss

@@ -3,24 +3,36 @@
  * SPDX-FileCopyrightText: 2016 ownCloud, Inc.
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'animations.scss';
+@use 'animations';
 
 /* Default and reset */
 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; cursor:default; }
+
 html { height:100%; }
+
 article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }
-body { line-height:1.5; }
+
 table { border-collapse:separate; border-spacing:0; white-space:nowrap; }
-caption, th, td { text-align:left; font-weight:normal; }
+
+caption, th, td { text-align:start; font-weight:normal; }
+
 table, td, th { vertical-align:middle; }
+
 a { border:0; color: var(--color-main-text); text-decoration:none;}
+
 a, a *, input, input *, select, .button span, label { cursor:pointer; }
+
 ul { list-style:none; }
 
 body {
-	font-weight: normal;
+	/* Guest content uses flexbox */
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
 	/* bring the default font size up to 14px */
 	font-size: .875em;
+	font-weight: normal;
 	line-height: 1.6em;
 	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 	color: var(--color-background-plain-text, #ffffff);
@@ -73,19 +85,13 @@ h2 {
 	margin-bottom: 12px;
 	line-height: 140%;
 }
+
 h3 {
 	font-size: 15px;
 	margin: 12px 0;
 }
 
 /* Global content */
-body {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-}
-
 #header {
 	.logo {
 		background-image: var(--image-logo, url('../../core/img/logo/logo.svg'));
@@ -112,6 +118,7 @@ form {
 	margin: auto;
 	padding: 0;
 }
+
 form.install-form {
 	max-width: 300px;
 }
@@ -120,6 +127,7 @@ form.install-form fieldset,
 form.install-form fieldset input {
 	width: 100%;
 }
+
 form.install-form .strengthify-wrapper {
 	bottom: 17px;
 	width: calc(100% - 8px);
@@ -135,24 +143,30 @@ form #sqliteInformation {
 	margin-top: 0.5rem;
 	margin-bottom: 20px;
 }
+
 form #adminaccount, form #use_other_db {
 	margin-bottom: 15px;
 	text-align: start;
 }
+
 form #adminaccount > legend,
 form #adminlogin {
 	margin-bottom: 1rem;
 }
+
 form #advancedHeader {
 	width: 100%;
 }
+
 form fieldset legend, #datadirContent label {
 	width: 100%;
 }
+
 #datadirContent label {
 	display: block;
 	margin: 0;
 }
+
 form #datadirField legend {
 	margin-bottom: 15px;
 }
@@ -161,19 +175,12 @@ form #datadirField legend {
 #showAdvanced {
 	padding: 13px; /* increase clickable area of Advanced dropdown */
 }
+
 #showAdvanced img {
 	vertical-align: middle; /* adjust position of Advanced dropdown arrow */
 }
 
 /* Buttons and input */
-#submit-wrapper {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 10px 5px;
-	position: relative; /* Make the wrapper the containing block of its
-						   absolutely positioned descendant icons */
-}
 
 @media only screen and (max-width: 1024px) {
 	.wrapper {
@@ -181,10 +188,14 @@ form #datadirField legend {
 	}
 }
 
-
-
 #submit-wrapper {
 	margin: 0 auto;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 10px 5px;
+	position: relative; /* Make the wrapper the containing block of its
+						   absolutely positioned descendant icons */
 
 	.submit-icon {
 		position: absolute;
@@ -245,6 +256,7 @@ select {
 input[type='submit']:focus {
 	box-shadow: 0 0 0 2px inset var(--color-main-text) !important;
 }
+
 input[type='text'],
 input[type='tel'],
 input[type='password'],
@@ -257,15 +269,18 @@ input[type='email'] {
 	font-weight: normal;
 	margin-inline: 0;
 }
+
 input[type='password'].password-with-toggle, input[type='text'].password-with-toggle {
 	width: 238px;
 	padding-inline-end: 40px !important;
 }
+
 input.login {
 	width: 260px;
 	height: 50px;
 	background-position: right 16px center;
 }
+
 input[type='submit'],
 input[type='submit'].icon-confirm,
 input.updateButton,
@@ -307,13 +322,16 @@ input[type='checkbox'].checkbox {
 	height: 1px;
 	overflow: hidden;
 }
+
 input[type='checkbox'].checkbox + label {
 	user-select: none;
 }
+
 input[type='checkbox'].checkbox:disabled + label,
 input[type='checkbox'].checkbox:disabled + label:before {
 	cursor: default;
 }
+
 input[type='checkbox'].checkbox + label:before {
 	content: '';
 	display: inline-block;
@@ -326,25 +344,26 @@ input[type='checkbox'].checkbox + label:before {
 	width: 10px;
 	background-position: center;
 }
+
 input[type='checkbox'].checkbox--white + label:before {
 	border-color: #ddd;
 }
+
 input[type='checkbox'].checkbox--white:not(:disabled):not(:checked) + label:hover:before,
 input[type='checkbox'].checkbox--white:focus + label:before {
 	border-color: #fff;
 }
-input[type='checkbox'].checkbox--white:checked + label:before {
+
-	background-color: #eee;
-	border-color: #eee;
-}
 input[type='checkbox'].checkbox--white:disabled + label:before {
 	background-color: #666 !important;
 	border-color: #999 !important;
 }
+
 input[type='checkbox'].checkbox--white:checked:disabled + label:before {
 	border-color: #666;
 	background-color: #222;
 }
+
 input[type='checkbox'].checkbox--white:checked + label:before {
 	background-color: transparent !important;
 	border-color: #fff !important;
@@ -364,6 +383,7 @@ input[type='checkbox'].checkbox--white:checked + label:before {
 	overflow: hidden;
 	height: 3px;
 }
+
 .tooltip-inner {
 	font-weight: bold;
 	padding: 3px 6px;
@@ -386,12 +406,14 @@ input[type='checkbox'].checkbox--white:checked + label:before {
 	padding: .6em 2.5em .4em .4em;
 	width: 8em;
 }
+
 #personal-show + label {
 	height: 14px;
 	margin-top: -25px;
 	inset-inline-start: 295px;
 	display: block;
 }
+
 #passwordbutton {
 	margin-inline-start: .5em;
 }
@@ -416,6 +438,7 @@ form .warning input[type='checkbox']+label {
 	width: 320px;
 	box-sizing: border-box;
 }
+
 .two-factor-provider {
 	display: flex;
 	border-radius: 3px; /* --border-radius */
@@ -445,11 +468,13 @@ form .warning input[type='checkbox']+label {
 		font-weight: normal;
 	}
 }
+
 .two-factor-icon {
 	width: 100px;
 	display: block;
 	margin: 0 auto;
 }
+
 .two-factor-submit {
 	width: 100%;
 	padding: 10px;
@@ -457,11 +482,13 @@ form .warning input[type='checkbox']+label {
 	border-radius: 100px; /* --border-radius-pill */
 	font-size: 20px;
 }
+
 .two-factor-primary {
 	/* Fix for 'Use backup codes' button not taking correct styles */
 	padding: 14px !important;
 	width: 226px;
 }
+
 .two-factor-secondary {
 	display: inline-block;
 	padding: 12px;
@@ -519,15 +546,19 @@ form #selectDbType {
 	position: relative;
 	user-select: none;
 }
+
 .grouptop, .groupmiddle {
 	margin-bottom: 8px !important;
 }
+
 .groupbottom {
 	margin-bottom: 13px;
 }
+
 .groupbottom input[type=submit] {
 	box-shadow: none !important;
 }
+
 .grouptop.groupbottom input {
 	border-radius: 3px !important;
 	margin: 5px 0 !important;
@@ -567,9 +598,11 @@ form #selectDbType {
 .infogroup {
 	margin: 8px 0;
 }
+
 .infogroup:last-child {
 	margin-bottom: 0;
 }
+
 p.info {
 	margin: 20px auto;
 	-webkit-user-select: none;
@@ -598,6 +631,7 @@ p.info {
 body[dir='ltr'] .update img.float-spinner {
 	float: left;
 }
+
 body[dir='rtl'] .update img.float-spinner {
 	float: right;
 }
@@ -606,6 +640,7 @@ body[dir='rtl'] .update img.float-spinner {
 	text-align: start;
 	margin-bottom: 12px;
 }
+
 .update-show-detailed {
 	padding: 12px;
 	display: block;
@@ -628,18 +663,23 @@ body[dir='rtl'] .update img.float-spinner {
 .icon-info-white {
 	background-image: url('../img/actions/info-white.svg?v=2');
 }
+
 .icon-error-white {
 	background-image: url('../img/actions/error-white.svg?v=1');
 }
+
 .icon-caret-white {
 	background-image: url('../img/actions/caret-white.svg?v=1');
 }
+
 .icon-confirm {
 	background-image: url('../img/actions/confirm.svg?v=2');
 }
+
 .icon-confirm-white {
 	background-image: url('../img/actions/confirm-white.svg?v=2');
 }
+
 .icon-checkmark-white {
 	background-image: url('../img/actions/checkmark-white.svg?v=1');
 }
@@ -652,17 +692,24 @@ body[dir='rtl'] .update img.float-spinner {
 	height: 32px;
 	display: none;
 }
+
 [class^='icon-'], [class*=' icon-'] {
 	background-repeat: no-repeat;
 	background-position: center;
 	min-width: 16px;
 	min-height: 16px;
 }
+
 .loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark {
 	position: relative;
 	filter: var(--background-invert-if-dark)
 }
+
 .loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after {
+	border: 2px solid rgba(150, 150, 150, 0.5);
+	border-radius: 100%;
+	border-top-color: #646464;
+
 	z-index: 2;
 	content: '';
 	height: 32px;
@@ -671,24 +718,22 @@ body[dir='rtl'] .update img.float-spinner {
 	position: absolute;
 	top: 50%;
 	inset-inline-start: 50%;
-	border-radius: 100%;
 	-webkit-animation: rotate .8s infinite linear;
 	animation: rotate .8s infinite linear;
 	-webkit-transform-origin: center;
 	-ms-transform-origin: center;
 	transform-origin: center;
 }
+
 .primary .loading,.primary+.loading,.primary .loading-small,.primary+.loading-small,.primary .icon-loading,.primary+.icon-loading,.primary .icon-loading-dark,.primary+.icon-loading-dark,.primary .icon-loading-small,.primary+.icon-loading-small,.primary .icon-loading-small-dark,.primary+.icon-loading-small-dark {
 	filter: var(--primary-invert-if-bright)
 }
-.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after {
+
-	border: 2px solid rgba(150, 150, 150, 0.5);
-	border-top-color: #646464;
-}
 .icon-loading-dark:after, .icon-loading-small-dark:after {
 	border: 2px solid rgba(187, 187, 187, 0.5);
 	border-top-color: #bbb;
 }
+
 .icon-loading-small:after, .icon-loading-small-dark:after {
 	height: 16px;
 	width: 16px;
@@ -698,12 +743,15 @@ body[dir='rtl'] .update img.float-spinner {
 img.icon-loading, object.icon-loading, video.icon-loading, button.icon-loading, textarea.icon-loading, input.icon-loading, select.icon-loading, div[contenteditable=true].icon-loading {
 	background-image: url('../img/loading.gif');
 }
+
 img.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark, button.icon-loading-dark, textarea.icon-loading-dark, input.icon-loading-dark, select.icon-loading-dark, div[contenteditable=true].icon-loading-dark {
 	background-image: url('../img/loading-dark.gif');
 }
+
 img.icon-loading-small, object.icon-loading-small, video.icon-loading-small, button.icon-loading-small, textarea.icon-loading-small, input.icon-loading-small, select.icon-loading-small, div[contenteditable=true].icon-loading-small {
 	background-image: url('../img/loading-small.gif');
 }
+
 img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-small-dark, button.icon-loading-small-dark, textarea.icon-loading-small-dark, input.icon-loading-small-dark, select.icon-loading-small-dark, div[contenteditable=true].icon-loading-small-dark {
 	background-image: url('../img/loading-small-dark.gif');
 }
@@ -798,7 +846,6 @@ a.legal {
 .guest-box, .body-login-container {
 	// Ensure the maxcontrast color is set for the background
 	--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
-
 	color: var(--color-main-text);
 	background-color: var(--color-main-background-blur);
 	padding: calc(3 * var(--default-grid-baseline));

core/css/icons.scss

@@ -116,4 +116,6 @@ audio, canvas, embed, iframe, img, input, object, video {
  * or have some additional styling like drop shadows
  */
 
-@import url('../../dist/icons.css');
+// plain CSS import and not SCSS so disable the `@import` rule
+/* stylelint-disable-next-line no-invalid-position-at-import-rule */
+@import '../../dist/icons.css';

core/css/inputs.scss

@@ -11,9 +11,11 @@
 input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
 	font-family: var(--font-face);
 }
+
 .select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget {
 	font-family: var(--font-face) !important;
 }
+
 .select2-container.select2-drop-above .select2-choice {
 	background-image: unset !important;
 }
@@ -69,7 +71,6 @@ button:not(
 .button,
 .pager li a {
 	padding: 7px 14px;
-	font-size: 13px;
 	background-color: var(--color-main-background);
 	color: var(--color-main-text);
 	border: 1px solid var(--color-border-dark);
@@ -158,8 +159,6 @@ div[contenteditable=false] {
 	margin-inline-start: 0;
 	padding: 7px 6px;
 	font-size: 13px;
-	background-color: var(--color-main-background);
-	color: var(--color-text-maxcontrast);
 	border: 1px solid var(--color-background-darker);
 	outline: none;
 	border-radius: var(--border-radius);
@@ -339,6 +338,7 @@ input[type='reset'] {
 		}
 	}
 }
+
 button:not(
 	.button-vue,
 	.action-button,
@@ -357,58 +357,56 @@ button:not(
 }
 
 /* Confirm inputs */
-input {
+input[type='text'],
-	&[type='text'],
+input[type='password'],
-	&[type='password'],
+input[type='email'] {
-	&[type='email'] {
+	+ .icon-confirm {
-		+ .icon-confirm {
+		margin-inline-start: -13px !important;
-			margin-inline-start: -13px !important;
+		border-inline-start-color: transparent !important;
-			border-inline-start-color: transparent !important;
+		border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0 !important;
-			border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0 !important;
+		border-width: 2px;
-			border-width: 2px;
+		background-clip: padding-box;
-			background-clip: padding-box;
+		/* Avoid background under border */
-			/* Avoid background under border */
+		background-color: var(--color-main-background) !important;
-			background-color: var(--color-main-background) !important;
+		opacity: 1;
-			opacity: 1;
+		height: var(--default-clickable-area);
-			height: var(--default-clickable-area);
+		width: var(--default-clickable-area);
-			width: var(--default-clickable-area);
+		padding: 7px 6px;
-			padding: 7px 6px;
+		cursor: pointer;
-			cursor: pointer;
+		margin-inline-end: 0;
-			margin-inline-end: 0;
+		&:disabled {
-			&:disabled {
+			cursor: default;
-				cursor: default;
+			@include functions.icon-color('confirm-fade', 'actions', variables.$color-black, 2, true);
-				@include functions.icon-color('confirm-fade', 'actions', variables.$color-black, 2, true);
-			}
 		}
+	}
 
-		/* only show confirm borders if input is not focused */
+	/* only show confirm borders if input is not focused */
-		&:not(:active):not(:hover):not(:focus){
+	&:not(:active):not(:hover):not(:focus){
-			&:invalid {
+		&:invalid {
-				+ .icon-confirm {
-					border-color: var(--color-error);
-				}
-			}
 			+ .icon-confirm {
-				&:active,
+				border-color: var(--color-error);
-				&:hover,
+			}
-				&:focus {
+		}
-					border-color: var(--color-primary-element) !important;
+		+ .icon-confirm {
-					border-radius: var(--border-radius) !important;
+			&:active,
-					&:disabled {
+			&:hover,
-						border-color: var(--color-background-darker) !important;
+			&:focus {
-					}
+				border-color: var(--color-primary-element) !important;
+				border-radius: var(--border-radius) !important;
+				&:disabled {
+					border-color: var(--color-background-darker) !important;
 				}
 			}
 		}
-		&:active,
+	}
-		&:hover,
+	&:active,
-		&:focus {
+	&:hover,
-			+ .icon-confirm {
+	&:focus {
-				border-color: var(--color-primary-element) !important;
+		+ .icon-confirm {
-				border-inline-start-color: transparent !important;
+			border-color: var(--color-primary-element) !important;
-				/* above previous input */
+			border-inline-start-color: transparent !important;
-				z-index: 2;
+			/* above previous input */
-			}
+			z-index: 2;
 		}
 	}
 }
@@ -419,6 +417,7 @@ button img,
 .button img {
 	cursor: pointer;
 }
+
 select,
 .button.multiselect {
 	font-weight: normal;
@@ -428,124 +427,122 @@ select,
 $checkbox-radio-size: 14px;
 $color-checkbox-radio-white: #fff;
 
-input {
+input[type='checkbox'],
-	&[type='checkbox'],
+input[type='radio'] {
-	&[type='radio'] {
+	&.radio,
-		&.radio,
+	&.checkbox {
-		&.checkbox {
+		position: absolute;
-			position: absolute;
+		inset-inline-start: -10000px;
-			inset-inline-start: -10000px;
+		top: auto;
-			top: auto;
+		width: 1px;
-			width: 1px;
+		height: 1px;
-			height: 1px;
+		overflow: hidden;
-			overflow: hidden;
+		+ label {
-			+ label {
+			user-select: none;
-				user-select: none;
-			}
-			&:disabled + label,
-			&:disabled + label:before {
-				cursor: default;
-			}
-			+ label:before {
-				content: '';
-				display: inline-block;
-				height: $checkbox-radio-size;
-				width: $checkbox-radio-size;
-				vertical-align: middle;
-				border-radius: 50%;
-				margin: 0 3px;
-				margin-inline: 3px 6px;
-				border: 1px solid var(--color-text-maxcontrast);
-			}
-			&:not(:disabled):not(:checked) + label:hover:before,
-			&:focus + label:before {
-				border-color: var(--color-primary-element);
-			}
-			&:focus-visible + label {
-				outline-style: solid;
-				outline-color: var(--color-main-text);
-				outline-width: 1px;
-				outline-offset: 2px;
-			}
-			&:checked + label:before,
-			&.checkbox:indeterminate + label:before {
-			/* ^ :indeterminate have a strange behavior on radio,
-			so we respecified the checkbox class again to be safe */
-				box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
-				background-color: var(--color-primary-element);
-				border-color: var(--color-primary-element);
-			}
-			&:disabled + label:before {
-				border: 1px solid var(--color-text-maxcontrast);
-				background-color: var(--color-text-maxcontrast) !important; /* override other status */
-			}
-			&:checked:disabled + label:before {
-				background-color: var(--color-text-maxcontrast);
-			}
-
-			// Detail description below label of checkbox or radio button
-			& + label ~ em {
-				display: inline-block;
-				margin-inline-start: 25px;
-			}
-			& + label ~ em:last-of-type {
-				margin-bottom: $checkbox-radio-size;
-			}
 		}
-		&.checkbox {
+		&:disabled + label,
-			+ label:before {
+		&:disabled + label:before {
-				border-radius: 1px;
+			cursor: default;
-				height: $checkbox-radio-size;
+		}
-				width: $checkbox-radio-size;
+		+ label:before {
-				box-shadow: none !important;
+			content: '';
-				background-position: center;
+			display: inline-block;
-			}
+			height: $checkbox-radio-size;
-			&:checked + label:before {
+			width: $checkbox-radio-size;
-				background-image: url('../img/actions/checkbox-mark.svg');
+			vertical-align: middle;
-			}
+			border-radius: 50%;
-			&:indeterminate + label:before {
+			margin: 0 3px;
-				background-image: url('../img/actions/checkbox-mixed.svg');
+			margin-inline: 3px 6px;
-			}
+			border: 1px solid var(--color-text-maxcontrast);
+		}
+		&:not(:disabled):not(:checked) + label:hover:before,
+		&:focus + label:before {
+			border-color: var(--color-primary-element);
+		}
+		&:focus-visible + label {
+			outline-style: solid;
+			outline-color: var(--color-main-text);
+			outline-width: 1px;
+			outline-offset: 2px;
+		}
+		&:checked + label:before,
+		&.checkbox:indeterminate + label:before {
+		/* ^ :indeterminate have a strange behavior on radio,
+		so we respecified the checkbox class again to be safe */
+			box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
+			background-color: var(--color-primary-element);
+			border-color: var(--color-primary-element);
+		}
+		&:disabled + label:before {
+			border: 1px solid var(--color-text-maxcontrast);
+			background-color: var(--color-text-maxcontrast) !important; /* override other status */
+		}
+		&:checked:disabled + label:before {
+			background-color: var(--color-text-maxcontrast);
 		}
 
-		/* We do not use the variables as we keep the colours as white for this variant */
+		// Detail description below label of checkbox or radio button
-		&.radio--white,
+		& + label ~ em {
-		&.checkbox--white {
+			display: inline-block;
-			+ label:before,
+			margin-inline-start: 25px;
-			&:focus + label:before {
-				border-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl);
-			}
-			&:not(:disabled):not(:checked) + label:hover:before {
-				border-color: $color-checkbox-radio-white;
-			}
-			&:checked + label:before {
-				box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
-				background-color: color.adjust($color-checkbox-radio-white, $lightness: -14%, $space: hsl);
-				border-color: color.adjust($color-checkbox-radio-white, $lightness: -14%, $space: hsl);
-			}
-			&:disabled + label:before {
-				background-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl) !important; /* override other status */
-				border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
-			}
-			&:checked:disabled + label:before {
-				box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
-				border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
-				background-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl);
-			}
 		}
-		&.checkbox--white {
+		& + label ~ em:last-of-type {
-			&:checked + label:before,
+			margin-bottom: $checkbox-radio-size;
-			&:indeterminate + label:before {
+		}
-				background-color: transparent !important; /* Override default checked */
+	}
-				border-color: $color-checkbox-radio-white !important; /* Override default checked */
+	&.checkbox {
-				background-image: url('../img/actions/checkbox-mark-white.svg');
+		+ label:before {
-			}
+			border-radius: 1px;
-			&:indeterminate + label:before {
+			height: $checkbox-radio-size;
-				background-image: url('../img/actions/checkbox-mixed-white.svg');
+			width: $checkbox-radio-size;
-			}
+			box-shadow: none !important;
-			&:disabled + label:before {
+			background-position: center;
-				opacity: 0.7; /* No other choice for white background image */
+		}
-			}
+		&:checked + label:before {
+			background-image: url('../img/actions/checkbox-mark.svg');
+		}
+		&:indeterminate + label:before {
+			background-image: url('../img/actions/checkbox-mixed.svg');
+		}
+	}
+
+	/* We do not use the variables as we keep the colours as white for this variant */
+	&.radio--white,
+	&.checkbox--white {
+		+ label:before,
+		&:focus + label:before {
+			border-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl);
+		}
+		&:not(:disabled):not(:checked) + label:hover:before {
+			border-color: $color-checkbox-radio-white;
+		}
+		&:checked + label:before {
+			box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
+			background-color: color.adjust($color-checkbox-radio-white, $lightness: -14%, $space: hsl);
+			border-color: color.adjust($color-checkbox-radio-white, $lightness: -14%, $space: hsl);
+		}
+		&:disabled + label:before {
+			background-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl) !important; /* override other status */
+			border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
+		}
+		&:checked:disabled + label:before {
+			box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
+			border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
+			background-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl);
+		}
+	}
+	&.checkbox--white {
+		&:checked + label:before,
+		&:indeterminate + label:before {
+			background-color: transparent !important; /* Override default checked */
+			border-color: $color-checkbox-radio-white !important; /* Override default checked */
+			background-image: url('../img/actions/checkbox-mark-white.svg');
+		}
+		&:indeterminate + label:before {
+			background-image: url('../img/actions/checkbox-mixed-white.svg');
+		}
+		&:disabled + label:before {
+			opacity: 0.7; /* No other choice for white background image */
 		}
 	}
 }
@@ -623,6 +620,7 @@ body[dir='rtl'] div.select2-drop .select2-search input {
 		cursor: pointer;
 	}
 }
+
 div.select2-container-multi {
 	.select2-choices,
 	&.select2-container-active .select2-choices {
@@ -667,6 +665,7 @@ div.select2-container-multi {
 		}
 	}
 }
+
 div.select2-container {
 	margin: 3px;
 	margin-inline-start: 0;
@@ -858,6 +857,7 @@ progress:not(.vue) {
 		transform: translate(4px);
 	}
 }
+
 .shake {
 	animation-name: shake;
 	animation-duration: .7s;

core/css/mobile.scss

@@ -4,7 +4,7 @@
  */
 @use 'variables';
 
-@media only screen and (width < variables.$breakpoint-mobile) {
+@media only screen and (width < #{variables.$breakpoint-mobile}) {
 
 	/* position share dropdown */
 	#dropdown {

core/css/server.scss

@@ -2,15 +2,15 @@
  * SPDX-FileCopyrightText: 2017 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-@use 'styles.scss';
+@use 'styles';
-@use 'inputs.scss';
+@use 'inputs';
-@use 'header.scss';
+@use 'header';
-@use 'icons.scss';
+@use 'icons';
-@use 'apps.scss';
+@use 'apps';
-@use 'global.scss';
+@use 'global';
-@use 'fixes.scss';
+@use 'fixes';
-@use 'mobile.scss';
+@use 'mobile';
-@use 'tooltip.scss';
+@use 'tooltip';
 // If you include .css, it will be imported as url
 @use '../../node_modules/@nextcloud/dialogs/dist/style';
-@use 'public.scss';
+@use 'public';

core/css/styles.scss

@@ -43,10 +43,6 @@ article, aside, dialog, figure, footer, header, hgroup, nav, section {
 	display: block;
 }
 
-body {
-	line-height: 1.5;
-}
-
 table {
 	border-collapse: separate;
 	border-spacing: 0;
@@ -267,6 +263,7 @@ body[dir='rtl'] #dbpassword {
 #show:checked + label, #dbpassword:checked + label, #personal-show:checked + label {
 	opacity: .8;
 }
+
 #show:focus-visible + label, #dbpassword-toggle:focus-visible + label, #personal-show:focus-visible + label {
 	box-shadow: var(--color-primary-element) 0 0 0 2px;
 	opacity: 1;
@@ -308,6 +305,7 @@ body[dir='rtl'] #dbpassword {
 	display: inline-block;
 	margin-inline-end: 6px;
 }
+
 #personal-show + label {
 	display: block;
 	inset-inline-end: 0;
@@ -385,6 +383,16 @@ tr .action:not(.permanent), .selectedActions > a {
 }
 
 tr {
+	.action {
+		width: 16px;
+		height: 16px;
+	}
+
+	&:hover .action:hover,
+	&:focus .action:focus {
+		opacity: 1;
+	}
+
 	&:hover .action:not(.menuitem),
 	&:focus .action:not(.menuitem),
 	.action.permanent:not(.menuitem) {
@@ -402,21 +410,6 @@ tr {
 	}
 }
 
-tr .action {
-	width: 16px;
-	height: 16px;
-}
-
-.header-action {
-	opacity: .8;
-}
-
-tr {
-	&:hover .action:hover, &:focus .action:focus {
-		opacity: 1;
-	}
-}
-
 .selectedActions a {
 	&:hover, &:focus {
 		opacity: 1;
@@ -424,6 +417,8 @@ tr {
 }
 
 .header-action {
+	opacity: .8;
+
 	&:hover, &:focus {
 		opacity: 1;
 	}
@@ -718,6 +713,7 @@ span.ui-icon {
 	display: inline-flex;
 	height: 50px;
 }
+
 li.crumb {
 	display: inline-flex;
 	background-image: url('../img/breadcrumb.svg?v=1');
@@ -786,8 +782,7 @@ li.crumb {
 		padding: 0;
 		width: 44px;
 	}
-	&:not(:first-child) a {
+
-	}
 	&:last-child {
 		font-weight: bold;
 		margin-inline-end: 10px;

core/css/systemtags.scss

@@ -6,6 +6,8 @@
 
 .systemtags-select2-dropdown {
 	.select2-result-label {
+		height: 25px;
+
 		.checkmark {
 			visibility: hidden;
 			margin-inline: -5px 5px;
@@ -57,9 +59,6 @@
 		height: 25px;
 		width: 100%;
 	}
-	.select2-result-label {
-		height: 25px;
-	}
 }
 
 .systemtags-select2-container {

core/css/toast.scss

@@ -38,6 +38,7 @@
 		}
 	}
 }
+
 .toastify.toastify-top {
 	inset-inline-end: 10px;
 }
@@ -45,12 +46,15 @@
 .toast-error {
 	border-inline-start: 3px solid var(--color-error);
 }
+
 .toast-info {
 	border-inline-start: 3px solid var(--color-primary-element);
 }
+
 .toast-warning {
 	border-inline-start: 3px solid var(--color-warning);
 }
+
 .toast-success {
 	border-inline-start: 3px solid var(--color-success);
 }

core/css/variables.scss

@@ -6,7 +6,7 @@
  */
 // SCSS darken/lighten function override
 @function nc-darken($color, $value) {
-	@return color.adjust($color, $lightness: -$value, $space: hsl);
+	@return color.adjust($color, $lightness: - $value, $space: hsl);
 }
 
 @function nc-lighten($color, $value) {

core/src/components/UnifiedSearch/SearchResult.vue

@@ -106,68 +106,67 @@ $clickable-area: 44px;
 $margin: 10px;
 
 .result-items {
-    &__item {
+	&__item:deep {
 
-    ::v-deep a {
+		a {
-            border-radius: 12px;
+			border: 2px solid transparent;
-            border: 2px solid transparent;
+			border-radius: var(--border-radius-large) !important;
-            border-radius: var(--border-radius-large) !important;
 
-            &--focused {
+			&--focused {
-                background-color: var(--color-background-hover);
+				background-color: var(--color-background-hover);
-            }
+			}
 
-            &:active,
+			&:active,
-            &:hover,
+			&:hover,
-            &:focus {
+			&:focus {
-                background-color: var(--color-background-hover);
+				background-color: var(--color-background-hover);
-                border: 2px solid var(--color-border-maxcontrast);
+				border: 2px solid var(--color-border-maxcontrast);
-            }
+			}
 
-            * {
+			* {
-                cursor: pointer;
+				cursor: pointer;
-            }
+			}
 
-        }
+		}
 
-        &-icon {
+		&-icon {
-            overflow: hidden;
+			overflow: hidden;
-            width: $clickable-area;
+			width: $clickable-area;
-            height: $clickable-area;
+			height: $clickable-area;
-            border-radius: var(--border-radius);
+			border-radius: var(--border-radius);
-            background-repeat: no-repeat;
+			background-repeat: no-repeat;
-            background-position: center center;
+			background-position: center center;
-            background-size: 32px;
+			background-size: 32px;
 
-            &--rounded {
+			&--rounded {
-                border-radius: math.div($clickable-area, 2);
+				border-radius: math.div($clickable-area, 2);
-            }
+			}
 
-            &--no-preview {
+			&--no-preview {
-                background-size: 32px;
+				background-size: 32px;
-            }
+			}
 
-            &--with-thumbnail {
+			&--with-thumbnail {
-                background-size: cover;
+				background-size: cover;
-            }
+			}
 
-            &--with-thumbnail:not(&--rounded) {
+			&--with-thumbnail:not(&--rounded) {
-                // compensate for border
+				// compensate for border
-                max-width: $clickable-area - 2px;
+				max-width: $clickable-area - 2px;
-                max-height: $clickable-area - 2px;
+				max-height: $clickable-area - 2px;
-                border: 1px solid var(--color-border);
+				border: 1px solid var(--color-border);
-            }
+			}
 
-            img {
+			img {
-                // Make sure to keep ratio
+				// Make sure to keep ratio
-                width: 100%;
+				width: 100%;
-                height: 100%;
+				height: 100%;
 
-                object-fit: cover;
+				object-fit: cover;
-                object-position: center;
+				object-position: center;
-            }
+			}
-        }
+		}
 
-    }
+	}
 }
 </style>

core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue

@@ -93,7 +93,6 @@ function clearAndCloseSearch() {
 <style scoped lang="scss">
 .local-unified-search {
 	--local-search-width: min(calc(250px + v-bind('searchGlobalButtonCSSWidth')), 95vw);
-
 	box-sizing: border-box;
 	position: relative;
 	height: var(--header-height);

core/src/jquery/css/jquery-ui-fixes.scss

@@ -9,14 +9,17 @@
 	background: var(--color-main-background) none;
 	color: var(--color-main-text);
 }
+
 .ui-widget-content a {
 	color: var(--color-main-text);
 }
+
 .ui-widget-header {
 	border: none;
 	color: var(--color-main-text);
 	background-image: none;
 }
+
 .ui-widget-header a {
 	color: var(--color-main-text);
 }
@@ -31,11 +34,13 @@
 	font-weight: bold;
 	color: #555;
 }
+
 .ui-state-default a,
 .ui-state-default a:link,
 .ui-state-default a:visited {
 	color: #555;
 }
+
 .ui-state-hover,
 .ui-widget-content .ui-state-hover,
 .ui-widget-header .ui-state-hover,
@@ -47,12 +52,14 @@
 	font-weight: bold;
 	color: var(--color-main-text);
 }
+
 .ui-state-hover a,
 .ui-state-hover a:hover,
 .ui-state-hover a:link,
 .ui-state-hover a:visited {
 	color: var(--color-main-text);
 }
+
 .ui-state-active,
 .ui-widget-content .ui-state-active,
 .ui-widget-header .ui-state-active {
@@ -61,6 +68,7 @@
 	font-weight: bold;
 	color: var(--color-main-text);
 }
+
 .ui-state-active a,
 .ui-state-active a:link,
 .ui-state-active a:visited {
@@ -77,11 +85,13 @@
 	color: var(--color-text-light);
 	font-weight: 600;
 }
+
 .ui-state-highlight a,
 .ui-widget-content .ui-state-highlight a,
 .ui-widget-header .ui-state-highlight a {
 	color: var(--color-text-lighter);
 }
+
 .ui-state-error,
 .ui-widget-content .ui-state-error,
 .ui-widget-header .ui-state-error {
@@ -89,11 +99,13 @@
 	background: var(--color-error) none;
 	color: #ffffff;
 }
+
 .ui-state-error a,
 .ui-widget-content .ui-state-error a,
 .ui-widget-header .ui-state-error a {
 	color: #ffffff;
 }
+
 .ui-state-error-text,
 .ui-widget-content .ui-state-error-text,
 .ui-widget-header .ui-state-error-text {
@@ -105,20 +117,25 @@
 .ui-state-default .ui-icon {
 	background-image: url('images/ui-icons_1d2d44_256x240.png');
 }
+
 .ui-state-hover .ui-icon,
 .ui-state-focus .ui-icon {
 	background-image: url('images/ui-icons_1d2d44_256x240.png');
 }
+
 .ui-state-active .ui-icon {
 	background-image: url('images/ui-icons_1d2d44_256x240.png');
 }
+
 .ui-state-highlight .ui-icon {
 	background-image: url('images/ui-icons_ffffff_256x240.png');
 }
+
 .ui-state-error .ui-icon,
 .ui-state-error-text .ui-icon {
 	background-image: url('images/ui-icons_ffd27a_256x240.png');
 }
+
 .ui-icon.ui-icon-none {
 	display: none;
 }
@@ -130,6 +147,7 @@
 	background: #666666 url('images/ui-bg_diagonals-thick_20_666666_40x40.png') 50% 50% repeat;
 	opacity: .5;
 }
+
 .ui-widget-shadow {
 	margin: -5px 0 0 -5px;
 	padding: 5px;

core/src/jquery/css/jquery.ocdialog.scss

@@ -19,14 +19,16 @@
 	max-width: calc(100% - 20px);
 	overflow: auto;
 }
+
 .oc-dialog-title {
 	background: var(--color-main-background);
 }
+
 .oc-dialog-buttonrow {
 	position: relative;
 	display: flex;
 	background: transparent;
-	right: 0;
+	inset-inline-end: 0;
 	bottom: 0;
 	padding: 0;
 	padding-top: 10px;
@@ -57,7 +59,7 @@
 	width: 44px !important;
 	height: 44px !important;
 	top: 4px;
-	right: 4px;
+	inset-inline-end: 4px;
 	padding: 25px;
 	background: var(--icon-close-dark) no-repeat center;
 	opacity: .5;
@@ -76,7 +78,7 @@
 	z-index: 100001;
 	position: fixed;
 	top: 0;
-	left: 0;
+	inset-inline-start: 0;
 	width: 100%;
 	height: 100%;
 }

core/src/views/LegacyUnifiedSearch.vue

@@ -728,16 +728,6 @@ $input-padding: 10px;
 		}
 	}
 
-	&__form-input {
-		margin: 0 !important;
-		&:focus,
-		&:focus-visible,
-		&:active {
-			border-color: 2px solid var(--color-main-text) !important;
-			box-shadow: 0 0 0 2px var(--color-main-background) !important;
-		}
-	}
-
 	&__input-row {
 		display: flex;
 		width: 100%;
@@ -774,6 +764,13 @@ $input-padding: 10px;
 			height: $input-height;
 			padding: $input-padding;
 
+			&:focus,
+			&:focus-visible,
+			&:active {
+				border-color: 2px solid var(--color-main-text) !important;
+				box-shadow: 0 0 0 2px var(--color-main-background) !important;
+			}
+
 			&,
 			&[placeholder],
 			&::placeholder {
@@ -791,7 +788,8 @@ $input-padding: 10px;
 			}
 		}
 
-		&-reset, &-submit {
+		&-reset,
+		&-submit {
 			position: absolute;
 			top: 0;
 			inset-inline-end: 4px;
@@ -832,16 +830,16 @@ $input-padding: 10px;
 		}
 	}
 
-	.unified-search__result-more::v-deep {
+	:deep(.unified-search__result-more) {
 		color: var(--color-text-maxcontrast);
 	}
 
 	.empty-content {
 		margin: 10vh 0;
 
-		::v-deep .empty-content__title {
+		:deep(.empty-content__title) {
 			font-weight: normal;
-            font-size: var(--default-font-size);
+			font-size: var(--default-font-size);
 			text-align: center;
 		}
 	}

core/src/views/Login.vue

@@ -196,6 +196,7 @@ body {
 .fade-enter-active, .fade-leave-active {
 	transition: opacity .3s;
 }
+
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
 	opacity: 0;
 }

core/src/views/UnsupportedBrowser.vue

@@ -164,7 +164,8 @@ $spacing: 30px;
 
 	.empty-content {
 		margin: 0;
-		&::v-deep .empty-content__icon {
+
+		:deep(.empty-content__icon) {
 			opacity: 1;
 		}
 	}

stylelint.config.js

@@ -19,6 +19,28 @@ const config = {
 			},
 		],
 	},
+	overrides: [
+		{
+			files: ['**/*.vue'],
+			// Override the nextcloud rules to also allow :global (we should put this into the config...)
+			rules: {
+				'selector-pseudo-element-no-unknown': [
+					true,
+					{
+						// Vue deep and global pseudo-element
+						ignorePseudoElements: ['deep', 'global'],
+					},
+				],
+				'selector-pseudo-class-no-unknown': [
+					true,
+					{
+						// vue deep and global pseudo-class
+						ignorePseudoClasses: ['deep', 'global'],
+					},
+				],
+			}
+		}
+	],
 }
 
 module.exports = config