From 307a26546e66e5676edb1df9e9c928948cef14a1 Mon Sep 17 00:00:00 2001
From: Richard Steinmetz <richard@steinmetz.cloud>
Date: Mon, 22 Jul 2024 15:37:26 +0200
Subject: [PATCH] fix(navigation): scope all styles to the calendar app

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
---
 css/app-navigation.scss | 434 ++++++++++++++++++++--------------------
 1 file changed, 218 insertions(+), 216 deletions(-)

diff --git a/css/app-navigation.scss b/css/app-navigation.scss
index 95475913a..56e4b891f 100644
--- a/css/app-navigation.scss
+++ b/css/app-navigation.scss
@@ -3,294 +3,296 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-.datepicker-button-section,
-.today-button-section,
-.view-button-section {
-	display: flex;
-
-	.button {
-		// this border-radius affects the button in the middle of the group
-		// for the rounded corner buttons on the sides, see further below
-		border-radius: 0;
-		font-weight: normal;
-		margin: 0 0 var(--default-grid-baseline) 0;
-		flex-grow: 1;
-	}
-
-	.button:first-child:not(:only-of-type) {
-		border-radius: var(--border-radius-element) 0 0 var(--border-radius-element);
-	}
-
-	.button:last-child:not(:only-of-type) {
-		border-radius: 0 var(--border-radius-element) var(--border-radius-element) 0;
-	}
-
-	.button:not(:only-of-type):not(:first-child):not(:last-child) {
-		border-radius: 0;
-	}
+.app-calendar {
+	.datepicker-button-section,
+	.today-button-section,
+	.view-button-section {
+		display: flex;
+
+		.button {
+			// this border-radius affects the button in the middle of the group
+			// for the rounded corner buttons on the sides, see further below
+			border-radius: 0;
+			font-weight: normal;
+			margin: 0 0 var(--default-grid-baseline) 0;
+			flex-grow: 1;
+		}
 
-	.button:only-child {
-		border-radius: var(--border-radius-pill);
-	}
+		.button:first-child:not(:only-of-type) {
+			border-radius: var(--border-radius-element) 0 0 var(--border-radius-element);
+		}
 
-	.button:hover,
-	.button:focus,
-	.button.active {
-		z-index: 50;
-	}
-}
+		.button:last-child:not(:only-of-type) {
+			border-radius: 0 var(--border-radius-element) var(--border-radius-element) 0;
+		}
 
-.datepicker-button-section {
-	&__datepicker-label {
-		flex-grow: 4 !important;
-		text-align: center;
-	}
+		.button:not(:only-of-type):not(:first-child):not(:last-child) {
+			border-radius: 0;
+		}
 
-	&__datepicker {
-		margin-left: 26px;
-		margin-top: 48px;
-		position: absolute !important;
-		width: 0 !important;
+		.button:only-child {
+			border-radius: var(--border-radius-pill);
+		}
 
-		.mx-input-wrapper {
-			display: none !important;
+		.button:hover,
+		.button:focus,
+		.button.active {
+			z-index: 50;
 		}
 	}
 
-	&__previous,
-	&__next {
-		background-size: 10px;
-		flex-grow: 0 !important;
-		width: 34px;
-		padding: 0 6px !important;
-	}
-}
+	.datepicker-button-section {
+		&__datepicker-label {
+			flex-grow: 4 !important;
+			text-align: center;
+		}
 
-.app-navigation-header {
-	padding: calc(var(--default-grid-baseline, 4px) * 2);
-}
+		&__datepicker {
+			margin-left: 26px;
+			margin-top: 48px;
+			position: absolute !important;
+			width: 0 !important;
 
-.new-event-today-view-section {
-	display: flex;
+			.mx-input-wrapper {
+				display: none !important;
+			}
+		}
 
-	// Fix margins from core
-	.button {
-		margin: 0 var(--default-grid-baseline) 0 0;
+		&__previous,
+		&__next {
+			background-size: 10px;
+			flex-grow: 0 !important;
+			width: 34px;
+			padding: 0 6px !important;
+		}
 	}
 
-	.new-event {
-		flex-grow: 5;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		overflow: hidden;
+	.app-navigation-header {
+		padding: calc(var(--default-grid-baseline, 4px) * 2);
 	}
 
-	.today {
-		flex-grow: 1;
-		font-weight: normal !important;
-	}
-}
+	.new-event-today-view-section {
+		display: flex;
 
-// Add background to navigation toggle to fix overlap with calendar elements
-.app-navigation-toggle {
-	background-color: var(--color-main-background) !important;
-}
+		// Fix margins from core
+		.button {
+			margin: 0 var(--default-grid-baseline) 0 0;
+		}
 
-.app-navigation {
-	button.icon-share {
-		opacity: 0.3 !important;
-	}
+		.new-event {
+			flex-grow: 5;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+		}
 
-	button.icon-shared,
-	button.icon-public {
-		opacity: 0.7 !important;
+		.today {
+			flex-grow: 1;
+			font-weight: normal !important;
+		}
 	}
 
-	button.icon-share:active,
-	button.icon-share:focus,
-	button.icon-share:hover,
-	button.icon-shared:active,
-	button.icon-shared:focus,
-	button.icon-shared:hover,
-	button.icon-public:active,
-	button.icon-public:focus,
-	button.icon-public:hover {
-		opacity: 1 !important;
+	// Add background to navigation toggle to fix overlap with calendar elements
+	.app-navigation-toggle {
+		background-color: var(--color-main-background) !important;
 	}
 
-	#calendars-list {
-		display: block !important;
-	}
+	.app-navigation {
+		button.icon-share {
+			opacity: 0.3 !important;
+		}
 
-	li.app-navigation-loading-placeholder-entry {
-		div.icon.icon-loading {
-			min-height: 44px;
+		button.icon-shared,
+		button.icon-public {
+			opacity: 0.7 !important;
 		}
-	}
 
-	.app-navigation-entry-wrapper.deleted {
-		.app-navigation-entry__name {
-			text-decoration: line-through;
+		button.icon-share:active,
+		button.icon-share:focus,
+		button.icon-share:hover,
+		button.icon-shared:active,
+		button.icon-shared:focus,
+		button.icon-shared:hover,
+		button.icon-public:active,
+		button.icon-public:focus,
+		button.icon-public:hover {
+			opacity: 1 !important;
 		}
-	}
 
-	.app-navigation-entry-wrapper.open-sharing {
-		box-shadow: inset 4px 0 var(--color-primary-element) !important;
-		margin-left: -6px;
-		padding-left: 6px;
-	}
+		#calendars-list {
+			display: block !important;
+		}
 
-	.app-navigation-entry-wrapper.disabled {
-		.app-navigation-entry__name {
-			color: var(--color-text-lighter) !important;
+		li.app-navigation-loading-placeholder-entry {
+			div.icon.icon-loading {
+				min-height: 44px;
+			}
 		}
-	}
 
-	.app-navigation-entry-wrapper .app-navigation-entry__children .app-navigation-entry {
-		padding-left: 0 !important;
+		.app-navigation-entry-wrapper.deleted {
+			.app-navigation-entry__name {
+				text-decoration: line-through;
+			}
+		}
 
-		.avatar {
-			width: 32px;
-			height: 32px;
-			background-color: var(--color-border-dark);
-			background-size: 16px;
+		.app-navigation-entry-wrapper.open-sharing {
+			box-shadow: inset 4px 0 var(--color-primary-element) !important;
+			margin-left: -6px;
+			padding-left: 6px;
 		}
 
-		.avatar.published {
-			background-color: var(--color-primary-element);
-			color: white;
+		.app-navigation-entry-wrapper.disabled {
+			.app-navigation-entry__name {
+				color: var(--color-text-lighter) !important;
+			}
 		}
-	}
 
-	.app-navigation-entry__multiselect {
-		padding: 0 8px;
+		.app-navigation-entry-wrapper .app-navigation-entry__children .app-navigation-entry {
+			padding-left: 0 !important;
 
-		.multiselect {
-			width: 100%;
-		  	border-radius: var(--border-radius-large);
+			.avatar {
+				width: 32px;
+				height: 32px;
+				background-color: var(--color-border-dark);
+				background-size: 16px;
+			}
 
-			&__content-wrapper {
-				z-index: 200 !important;
+			.avatar.published {
+				background-color: var(--color-primary-element);
+				color: white;
 			}
 		}
-	}
 
-	.app-navigation-entry__utils {
-		.action-checkbox__label {
-			padding-right: 0 !important;
-		}
+		.app-navigation-entry__multiselect {
+			padding: 0 8px;
 
-		.action-checkbox__label::before {
-			margin: 0 4px 0 !important;
-		}
-	}
+			.multiselect {
+				width: 100%;
+				border-radius: var(--border-radius-large);
 
-	.app-navigation-entry-new-calendar {
-		.app-navigation-entry__name {
-			color: var(--color-text-maxcontrast) !important;
+				&__content-wrapper {
+					z-index: 200 !important;
+				}
+			}
 		}
 
-		&:hover,
-		&--open {
-			.app-navigation-entry__name{
-				color: var(--color-text-light) !important;
+		.app-navigation-entry__utils {
+			.action-checkbox__label {
+				padding-right: 0 !important;
 			}
-		}
 
-		.action-item:not(.action-item--open) {
-			.action-item__menutoggle:not(:hover):not(:focus):not(:active) {
-				opacity: .5;
+			.action-checkbox__label::before {
+				margin: 0 4px 0 !important;
 			}
 		}
 
-	}
+		.app-navigation-entry-new-calendar {
+			.app-navigation-entry__name {
+				color: var(--color-text-maxcontrast) !important;
+			}
 
+			&:hover,
+			&--open {
+				.app-navigation-entry__name{
+					color: var(--color-text-light) !important;
+				}
+			}
 
-	ul {
+			.action-item:not(.action-item--open) {
+				.action-item__menutoggle:not(:hover):not(:focus):not(:active) {
+					opacity: .5;
+				}
+			}
 
-		// Calendar list items / Subscription list items
-		> li.app-navigation-entry-wrapper {
+		}
 
-			div.sharing-section {
-				//box-shadow: inset 4px 0 var(--color-primary-element);
-				//padding-left: 12px;
-				//padding-right: 12px;
-				//width: 100%;
 
-				div.multiselect {
-					width: calc(100% - 14px);
-					max-width: none;
-					z-index: 105;
-				}
+		ul {
 
-				.oneline {
-					white-space: nowrap;
-					position: relative;
-				}
+			// Calendar list items / Subscription list items
+			> li.app-navigation-entry-wrapper {
+
+				div.sharing-section {
+					//box-shadow: inset 4px 0 var(--color-primary-element);
+					//padding-left: 12px;
+					//padding-right: 12px;
+					//width: 100%;
 
-				.shareWithList {
-					list-style-type: none;
-					display: flex;
-					flex-direction: column;
+					div.multiselect {
+						width: calc(100% - 14px);
+						max-width: none;
+						z-index: 105;
+					}
 
-					> li {
-						height: 44px;
-						white-space: normal;
-						display: inline-flex;
-						align-items: center;
+					.oneline {
+						white-space: nowrap;
 						position: relative;
+					}
 
+					.shareWithList {
+						list-style-type: none;
+						display: flex;
+						flex-direction: column;
 
+						> li {
+							height: 44px;
+							white-space: normal;
+							display: inline-flex;
+							align-items: center;
+							position: relative;
 
-						.username {
-							padding: 0 8px;
-							overflow: hidden;
-							white-space: nowrap;
-							text-overflow: ellipsis;
-						}
 
-						> .sharingOptionsGroup {
-							margin-left: auto;
-							display: flex;
-							align-items: center;
-							white-space: nowrap;
-
-							> a:hover,
-							> a:focus,
-							> .share-menu > a:hover,
-							> .share-menu > a:focus {
-								box-shadow: none !important;
-								opacity: 1 !important;
-							}
 
-							> .icon:not(.hidden),
-							> .share-menu .icon:not(.hidden){
-								padding: 14px;
-								height: 44px;
-								width: 44px;
-								opacity: 0.5;
-								display: block;
-								cursor: pointer;
+							.username {
+								padding: 0 8px;
+								overflow: hidden;
+								white-space: nowrap;
+								text-overflow: ellipsis;
 							}
 
-							> .share-menu {
-								position: relative;
-								display: block;
+							> .sharingOptionsGroup {
+								margin-left: auto;
+								display: flex;
+								align-items: center;
+								white-space: nowrap;
+
+								> a:hover,
+								> a:focus,
+								> .share-menu > a:hover,
+								> .share-menu > a:focus {
+									box-shadow: none !important;
+									opacity: 1 !important;
+								}
+
+								> .icon:not(.hidden),
+								> .share-menu .icon:not(.hidden){
+									padding: 14px;
+									height: 44px;
+									width: 44px;
+									opacity: 0.5;
+									display: block;
+									cursor: pointer;
+								}
+
+								> .share-menu {
+									position: relative;
+									display: block;
+								}
 							}
 						}
 					}
 				}
 			}
-		}
 
-		.appointment-config-list {
-			.app-navigation-caption {
-				margin-top: 22px;
-			}
+			.appointment-config-list {
+				.app-navigation-caption {
+					margin-top: 22px;
+				}
 
-			.app-navigation-entry-link,
-			.app-navigation-entry-link * {
-				cursor: default;
+				.app-navigation-entry-link,
+				.app-navigation-entry-link * {
+					cursor: default;
+				}
 			}
 		}
 	}