Fix Dashboard CSS indentation

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
Signed-off-by: npmbuildbot[bot] <npmbuildbot[bot]@users.noreply.github.com>

apps/dashboard/src/App.vue

@@ -370,243 +370,242 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	#app-dashboard {
-		width: 100%;
-		background-size: cover;
-		background-position: center center;
-		background-repeat: no-repeat;
-		background-attachment: fixed;
-		background-color: var(--color-primary);
-		--color-background-translucent: rgba(255, 255, 255, 0.8);
-		--background-blur: blur(10px);
-
-		#body-user.theme--dark & {
-			background-color: var(--color-main-background);
-			--color-background-translucent: rgba(24, 24, 24, 0.8);
-		}
-
-		#body-user.theme--highcontrast & {
-			background-color: var(--color-main-background);
-			--color-background-translucent: var(--color-main-background);
-		}
-
-		> h2 {
-			color: var(--color-primary-text);
-			text-align: center;
-			font-size: 32px;
-			line-height: 130%;
-			padding: 120px 16px 0px;
-		}
+#app-dashboard {
+	width: 100%;
+	background-size: cover;
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-attachment: fixed;
+	background-color: var(--color-primary);
+	--color-background-translucent: rgba(255, 255, 255, 0.8);
+	--background-blur: blur(10px);
+
+	#body-user.theme--dark & {
+		background-color: var(--color-main-background);
+		--color-background-translucent: rgba(24, 24, 24, 0.8);
 	}
 
-	.panels {
-		width: auto;
-		margin: auto;
-		max-width: 1500px;
-		display: flex;
-		justify-content: center;
-		flex-direction: row;
-		align-items: flex-start;
-		flex-wrap: wrap;
+	#body-user.theme--highcontrast & {
+		background-color: var(--color-main-background);
+		--color-background-translucent: var(--color-main-background);
 	}
 
-	.panel, .panels > div {
-		width: 320px;
-		max-width: 100%;
-		margin: 16px;
-		background-color: var(--color-background-translucent);
-		-webkit-backdrop-filter: var(--background-blur);
-		backdrop-filter: var(--background-blur);
-		border-radius: var(--border-radius-large);
-
-		#body-user.theme--highcontrast & {
-			border: 2px solid var(--color-border);
-		}
-
-		&.sortable-ghost {
-			 opacity: 0.1;
-		}
+	> h2 {
+		color: var(--color-primary-text);
+		text-align: center;
+		font-size: 32px;
+		line-height: 130%;
+		padding: 120px 16px 0px;
+	}
+}
 
-		& > .panel--header {
-			display: flex;
-			z-index: 1;
-			top: 50px;
-			padding: 16px;
-			cursor: grab;
+.panels {
+	width: auto;
+	margin: auto;
+	max-width: 1500px;
+	display: flex;
+	justify-content: center;
+	flex-direction: row;
+	align-items: flex-start;
+	flex-wrap: wrap;
+}
 
-			&, ::v-deep * {
-				-webkit-touch-callout: none;
-				-webkit-user-select: none;
-				-khtml-user-select: none;
-				-moz-user-select: none;
-				-ms-user-select: none;
-				user-select: none;
-			}
+.panel, .panels > div {
+	width: 320px;
+	max-width: 100%;
+	margin: 16px;
+	background-color: var(--color-background-translucent);
+	-webkit-backdrop-filter: var(--background-blur);
+	backdrop-filter: var(--background-blur);
+	border-radius: var(--border-radius-large);
+
+	#body-user.theme--highcontrast & {
+		border: 2px solid var(--color-border);
+	}
 
-			&:active {
-				cursor: grabbing;
-			}
+	&.sortable-ghost {
+		 opacity: 0.1;
+	}
 
-			a {
-				flex-grow: 1;
-			}
+	& > .panel--header {
+		display: flex;
+		z-index: 1;
+		top: 50px;
+		padding: 16px;
+		cursor: grab;
+
+		&, ::v-deep * {
+			-webkit-touch-callout: none;
+			-webkit-user-select: none;
+			-khtml-user-select: none;
+			-moz-user-select: none;
+			-ms-user-select: none;
+			user-select: none;
+		}
 
-			> h2 {
-				display: block;
-				flex-grow: 1;
-				margin: 0;
-				font-size: 20px;
-				line-height: 24px;
-				font-weight: bold;
-				background-size: 32px;
-				background-position: 14px 12px;
-				padding: 16px 8px 16px 60px;
-				height: 56px;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				cursor: grab;
-			}
+		&:active {
+			cursor: grabbing;
 		}
 
-		& > .panel--content {
-			margin: 0 16px 16px 16px;
-			height: 420px;
-			// We specifically do not want scrollbars inside widgets
-			overflow: hidden;
+		a {
+			flex-grow: 1;
 		}
 
-		// No need to extend height of widgets if only one column is shown
-		@media only screen and (max-width: 709px) {
-			& > .panel--content {
-				height: auto;
-			}
+		> h2 {
+			display: block;
+			flex-grow: 1;
+			margin: 0;
+			font-size: 20px;
+			line-height: 24px;
+			font-weight: bold;
+			background-size: 32px;
+			background-position: 14px 12px;
+			padding: 16px 8px 16px 60px;
+			height: 56px;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			cursor: grab;
 		}
 	}
 
-	.footer {
-		text-align: center;
-		transition: bottom var(--animation-slow) ease-in-out;
-		bottom: 0;
-		padding: 44px 0;
+	& > .panel--content {
+		margin: 0 16px 16px 16px;
+		height: 420px;
+		// We specifically do not want scrollbars inside widgets
+		overflow: hidden;
+	}
 
-		&.firstrun {
-			position: sticky;
-			bottom: 10px;
+	// No need to extend height of widgets if only one column is shown
+	@media only screen and (max-width: 709px) {
+		& > .panel--content {
+			height: auto;
 		}
 	}
+}
 
-	.edit-panels {
-		display: inline-block;
-		margin:auto;
-		background-position: 16px center;
-		padding: 12px 16px;
-		padding-left: 36px;
-		border-radius: var(--border-radius-pill);
-		max-width: 200px;
-		opacity: 1;
-		text-align: center;
+.footer {
+	text-align: center;
+	transition: bottom var(--animation-slow) ease-in-out;
+	bottom: 0;
+	padding: 44px 0;
+
+	&.firstrun {
+		position: sticky;
+		bottom: 10px;
 	}
+}
 
-	.edit-panels,
-	.statuses ::v-deep .action-item > button,
-	.statuses ::v-deep .action-item.action-item--open .action-item__menutoggle {
-		background-color: var(--color-background-translucent);
-		-webkit-backdrop-filter: var(--background-blur);
-		backdrop-filter: var(--background-blur);
+.edit-panels {
+	display: inline-block;
+	margin:auto;
+	background-position: 16px center;
+	padding: 12px 16px;
+	padding-left: 36px;
+	border-radius: var(--border-radius-pill);
+	max-width: 200px;
+	opacity: 1;
+	text-align: center;
+}
 
-		&:hover,
-		&:focus,
-		&:active {
-			background-color: var(--color-background-hover);
-		}
+.edit-panels,
+.statuses ::v-deep .action-item > button,
+.statuses ::v-deep .action-item.action-item--open .action-item__menutoggle {
+	background-color: var(--color-background-translucent);
+	-webkit-backdrop-filter: var(--background-blur);
+	backdrop-filter: var(--background-blur);
+
+	&:hover,
+	&:focus,
+	&:active {
+		background-color: var(--color-background-hover);
 	}
+}
 
-	.modal__content {
-		padding: 32px 16px;
-		max-height: 70vh;
-		text-align: center;
-		overflow: auto;
-
-		ol {
-			display: flex;
-			flex-direction: row;
-			justify-content: center;
-			list-style-type: none;
-			padding-bottom: 16px;
-		}
-		li {
-			label {
-				display: block;
-				padding: 48px 8px 16px 8px;
-				margin: 8px;
-				width: 160px;
-				background-color: var(--color-background-hover);
-				border: 2px solid var(--color-main-background);
-				border-radius: var(--border-radius-large);
-				background-size: 24px;
-				background-position: center 16px;
-				text-align: center;
-
-				&:hover {
-					border-color: var(--color-primary);
-				}
-			}
+.modal__content {
+	padding: 32px 16px;
+	max-height: 70vh;
+	text-align: center;
+	overflow: auto;
 
-			input:focus + label {
+	ol {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		list-style-type: none;
+		padding-bottom: 16px;
+	}
+	li {
+		label {
+			display: block;
+			padding: 48px 8px 16px 8px;
+			margin: 8px;
+			width: 160px;
+			background-color: var(--color-background-hover);
+			border: 2px solid var(--color-main-background);
+			border-radius: var(--border-radius-large);
+			background-size: 24px;
+			background-position: center 16px;
+			text-align: center;
+
+			&:hover {
 				border-color: var(--color-primary);
 			}
 		}
 
-		h3 {
-			font-weight: bold;
-
-			&:not(:first-of-type) {
-				margin-top: 64px;
-			}
+		input:focus + label {
+			border-color: var(--color-primary);
 		}
+	}
 
-		// Adjust design of 'Get more widgets' button
-		.button {
-			display: inline-block;
-			padding: 12px 24px;
-			margin: 0;
+	h3 {
+		font-weight: bold;
+
+		&:not(:first-of-type) {
+			margin-top: 64px;
 		}
+	}
 
-		p {
-			max-width: 650px;
-			margin: 0 auto;
+	// Adjust design of 'Get more widgets' button
+	.button {
+		display: inline-block;
+		padding: 12px 24px;
+		margin: 0;
+	}
 
-			a:hover,
-			a:focus {
-				border-bottom: 2px solid var(--color-border);
-			}
+	p {
+		max-width: 650px;
+		margin: 0 auto;
+
+		a:hover,
+		a:focus {
+			border-bottom: 2px solid var(--color-border);
 		}
+	}
 
-		.credits--end {
-			padding-bottom: 32px;
-			color: var(--color-text-maxcontrast);
+	.credits--end {
+		padding-bottom: 32px;
+		color: var(--color-text-maxcontrast);
 
-			a {
-				color: var(--color-text-maxcontrast);
-			}
+		a {
+			color: var(--color-text-maxcontrast);
 		}
 	}
+}
 
-	.flip-list-move {
-		transition: transform var(--animation-slow);
-	}
+.flip-list-move {
+	transition: transform var(--animation-slow);
+}
 
-	.statuses {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		flex-wrap: wrap;
-		margin-bottom: 36px;
+.statuses {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	flex-wrap: wrap;
+	margin-bottom: 36px;
 
-		& > div {
-			margin: 8px;
-		}
+	& > div {
+		margin: 8px;
 	}
-
+}
 </style>

apps/dashboard/src/components/BackgroundSettings.vue

@@ -134,56 +134,54 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.background-selector {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
 
-	.background-selector {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: center;
+	.background {
+		width: 176px;
+		height: 96px;
+		margin: 8px;
+		background-size: cover;
+		background-position: center center;
+		text-align: center;
+		border-radius: var(--border-radius-large);
+		border: 2px solid var(--color-main-background);
+		overflow: hidden;
 
-		.background {
-			width: 176px;
-			height: 96px;
-			margin: 8px;
-			background-size: cover;
-			background-position: center center;
-			text-align: center;
-			border-radius: var(--border-radius-large);
-			border: 2px solid var(--color-main-background);
-			overflow: hidden;
-
-			&.current {
-				background-image: var(--color-background-dark);
-			}
+		&.current {
+			background-image: var(--color-background-dark);
+		}
 
-			&.filepicker, &.default, &.color {
-				border-color: var(--color-border);
-			}
+		&.filepicker, &.default, &.color {
+			border-color: var(--color-border);
+		}
 
-			&.color {
-				background-color: var(--color-primary);
-				color: var(--color-primary-text);
-			}
+		&.color {
+			background-color: var(--color-primary);
+			color: var(--color-primary-text);
+		}
 
-			&.active,
-			&:hover,
-			&:focus {
-				border: 2px solid var(--color-primary);
-			}
+		&.active,
+		&:hover,
+		&:focus {
+			border: 2px solid var(--color-primary);
+		}
 
-			&.active:not(.icon-loading):after {
-				background-image: var(--icon-checkmark-fff);
-				background-repeat: no-repeat;
-				background-position: center;
-				background-size: 44px;
-				content: '';
-				display: block;
-				height: 100%;
+		&.active:not(.icon-loading):after {
+			background-image: var(--icon-checkmark-fff);
+			background-repeat: no-repeat;
+			background-position: center;
+			background-size: 44px;
+			content: '';
+			display: block;
+			height: 100%;
 
-				body.theme--dark & {
-					background-image: var(--icon-checkmark-000);
-				}
+			body.theme--dark & {
+				background-image: var(--icon-checkmark-000);
 			}
 		}
 	}
-
+}
 </style>