feat: reduce TaskDetailView selector specificity

src/views/tasks/TaskDetailView.vue

@@ -2,8 +2,7 @@
 	<div
 		class="loader-container task-view-container"
 		:class="{
-			'is-loading': taskService.loading,
-			'visible': visible,
+			'is-loading': taskService.loading || !visible,
 			'is-modal': isModal,
 		}"
 	>
@@ -801,47 +800,64 @@ async function setPercentDone(percentDone: number) {
 <style lang="scss" scoped>
 $flash-background-duration: 750ms;
 
-.task-view {
-  padding: 1rem;
-  background-color: var(--site-background);
-
-  @media screen and (max-width: $desktop) {
+.task-view-container {
+	// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
+	--primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
 	padding-bottom: 0;
+	
+  @media screen and (min-width: $desktop) {
+		padding-bottom: 1rem;
   }
 }
 
-  .subtitle {
+.task-view {
+	padding: 1rem;
+	padding-bottom: 0;
+  background-color: var(--site-background);
+	
+  @media screen and (min-width: $desktop) {
+		padding: 1rem;
+  }
+}
+
+.task-view * {
+	transition: opacity 50ms ease;
+}
+
+.is-loading .task-view * {
+	opacity: 0;
+}
+
+
+.subtitle {
 	color: var(--grey-500);
 	margin-bottom: 1rem;
 
 	a {
 		color: var(--grey-800);
 	}
-  }
+}
 
-  h3 .button {
+h3 .button {
 	vertical-align: middle;
-  }
+}
 
-  .icon.is-grey {
+.icon.is-grey {
 	color: var(--grey-400);
-  }
-
-
-
-  .date-input {
+}
+.date-input {
 	display: flex;
 	align-items: center;
-  }
+}
 
-  .remove {
-	color: var(--danger);
-	vertical-align: middle;
-	padding-left: .5rem;
-	line-height: 1;
-  }
+.remove {
+color: var(--danger);
+vertical-align: middle;
+padding-left: .5rem;
+line-height: 1;
+}
 
-  :deep(.datepicker) {
+:deep(.datepicker) {
 	width: 100%;
 
 	.show {
@@ -862,9 +878,9 @@ $flash-background-duration: 750ms;
 	&.disabled .show:hover {
 		background: transparent;
 	}
-  }
+}
 
-  .details {
+.details {
 	padding-bottom: 0.75rem;
 	flex-flow: row wrap;
 	margin-bottom: 0;
@@ -884,8 +900,10 @@ $flash-background-duration: 750ms;
 		break-after: always; // New syntax
 	}
 
-    &.labels-list,
-    .assignees {
+}
+
+.details.labels-list,
+.assignees {
 	:deep(.multiselect) {
 		.input-wrapper {
 			&:not(:focus-within):not(:hover) {
@@ -894,11 +912,10 @@ $flash-background-duration: 750ms;
 			}
 		}
 	}
-    }
-  }
+}
 
-  :deep(.details),
-  :deep(.heading) {
+:deep(.details),
+:deep(.heading) {
 	.input:not(.has-defaults),
 	.textarea,
 	.select:not(.has-defaults) select {
@@ -935,17 +952,17 @@ $flash-background-duration: 750ms;
 	.select:not(.has-defaults):hover:after {
 		opacity: 1;
 	}
-  }
+}
 
-  .attachments {
+.attachments {
 	margin-bottom: 0;
 
 	table tr:last-child td {
 		border-bottom: none;
 	}
-  }
+}
 
-  .action-buttons {
+.action-buttons {
 	@media screen and (min-width: $tablet) {
 		position: sticky;
 		top: $navbar-height + 1.5rem;
@@ -961,9 +978,9 @@ $flash-background-duration: 750ms;
 			color: var(--white);
 		}
 	}
-  }
+}
 
-	.is-modal .action-buttons {
+.is-modal .action-buttons {
 	// we need same top margin for the modal close button 
 	@media screen and (min-width: $tablet) {
 		top: 6.5rem;
@@ -973,41 +990,10 @@ $flash-background-duration: 750ms;
 	@media screen and (min-width: calc(#{$desktop} + 84px)) {
 		top: 0;
 	}
-	}
-
-  .checklist-summary {
-    padding-left: .25rem;
-  }
-
-
-.task-view-container {
-  padding-bottom: 1rem;
-
-  @media screen and (max-width: $desktop) {
-    padding-bottom: 0;
-  }
-
-  .task-view * {
-    opacity: 0;
-    transition: opacity 50ms ease;
-  }
-
-  &.is-loading {
-    opacity: 1;
-
-    .task-view * {
-      opacity: 0;
-    }
-  }
-
-  &.visible:not(.is-loading) .task-view * {
-    opacity: 1;
-  }
 }
 
-.task-view-container {
-  // simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
-  --primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
+.checklist-summary {
+	padding-left: .25rem;
 }
 
 .flash-background-enter-from,