refactor(core): clean up personal menu

This is a part of the header refactor
* Clean up DOM strcture
* Clean up unnessecary styles
* Clean up HTML classes
* Add active state to button

resources/skins.citizen.styles/Drawer__button.less

@@ -1,6 +1,4 @@
 .citizen-drawer__button {
-	position: relative; // prevent overlap by drawer
-
 	&Icon {
 		display: grid;
 		place-content: center;

resources/skins.citizen.styles/Header.less

@@ -6,6 +6,8 @@
 	--size-icon--header: 1.25rem;
 	--margin-header: 0.5rem;
 	--padding-header: ~'calc( var( --padding-page ) / 2 )';
+	--size-dialog-min--header: 16rem;
+
 	position: fixed;
 	z-index: 4;
 	top: 0;
@@ -59,10 +61,10 @@
 
 		// Background image icons
 		&--icon:after {
-			content: '';
 			width: var( --size-icon--header );
 			height: var( --size-icon--header );
 			background-size: var( --size-icon--header );
+			content: '';
 		}
 
 		&Icon,
@@ -95,16 +97,22 @@
 		min-width: 0;
 		flex-grow: 1;
 		justify-content: space-between;
+
+		.mw-checkbox-hack-checkbox:checked {
+			~ .citizen-header__button {
+				background-color: var( --background-color-primary--active );
+			}
+		}
 	}
 
 	&__start,
 	&__end {
 		display: flex;
-		align-items: center;
 	}
 
 	&__start {
 		min-width: 0;
+		align-items: center;
 	}
 
 	&__title {
@@ -137,6 +145,12 @@
 			display: none;
 		}
 	}
+
+	// Reset
+	ul {
+		margin: 0;
+		list-style: none;
+	}
 }
 
 .skin-citizen--titlehidden {
@@ -163,16 +177,6 @@
 }
 
 .mw-header {
-	ul {
-		list-style: none;
-	}
-
-	ul,
-	li {
-		display: block;
-		margin: 0;
-	}
-
 	&-button {
 		width: var( --size-icon );
 		height: var( --size-icon );

resources/skins.citizen.styles/Menu.less

@@ -19,3 +19,9 @@
 		display: none !important;
 	}
 }
+
+.skin-citizen-dark {
+	.mw-list-item > a:after {
+		filter: invert( 1 );
+	}
+}

resources/skins.citizen.styles/Personalmenu.less

@@ -1,96 +1,24 @@
 .citizen-personalMenu {
+	position: relative; // anchor card
 
-}
+	&__card {
-
+		position: absolute;
-// Checkbox hack
+		top: 100%;
-#citizen-personalMenu__checkbox:checked {
+		right: 0;
-	~ .citizen-personalMenu__card {
+		overflow: hidden; // rounded corner
-		#p-personal {
+		min-width: var( --size-dialog-min--header );
-			// Child element is a container
+		font-size: 0.875rem;
-			.citizen-card-show( false );
+		.citizen-card;
-
+		.citizen-card-hide( 100% 0 );
-			ul {
-				.citizen-card-content-show;
-			}
-		}
-	}
-}
-
-#personalmenu {
-	position: relative;
-	font-size: @ui-menu-text;
-	user-select: none;
-
-	&-checkbox {
-		&:checked {
-			~ #personalmenu {
-				#p-personal {
-					// Child element is a container
-					.citizen-card-show( false );
-
-					ul {
-						.citizen-card-content-show;
-					}
-				}
-
-				&-button {
-					&:after {
-						opacity: var( --opacity-icon-base--hover );
-					}
-
-					&:active:after {
-						opacity: var( --opacity-icon-base--active );
-					}
-				}
-			}
-		}
-	}
-
-	&-button {
-		position: relative;
-		font-size: 0; // Hide label text
-
-		&:after {
-			display: block;
-			width: inherit;
-			height: inherit;
-			background-position: center;
-			background-repeat: no-repeat;
-			content: '';
-			opacity: var( --opacity-icon-base );
-			transition: @transition-opacity;
-		}
-
-		&:hover:after {
-			opacity: var( --opacity-icon-base--hover );
-		}
-
-		&:active:after {
-			opacity: var( --opacity-icon-base--active );
-		}
-	}
-}
-
-#p-personal {
-	position: fixed;
-	top: var( --height-header );
-	right: var( --padding-page );
-	left: var( --padding-page );
-	overflow: hidden; // So that hover state is rounded
-	margin: 0;
-	.citizen-card;
-	.citizen-card-hide( 100% 0 );
-
-	ul {
-		opacity: 0;
 	}
 
+	// TODO: This mess needs refactor
 	li:not( #pt-usergroups ):not( #pt-userpage ) {
 		a {
 			.menu-item-link;
 			align-items: center;
 			justify-content: space-between;
-			padding: 10px 20px;
+			padding: 0.625rem 1.25rem;
 
 			&:after {
 				.resource-loader-list-icon;
@@ -151,13 +79,13 @@
 	#pt {
 		&-user {
 			&page {
-				padding: 16px 12px 0 12px;
+				padding: 1rem 0.75rem 0 0.75rem;
 
 				a {
 					justify-content: flex-start;
-					padding: 4px 8px;
+					padding: 0.25rem 0.5rem;
 					color: var( --color-base--emphasized ) !important;
-					font-size: 16px;
+					font-size: 1rem;
 					font-weight: 600;
 					word-break: break-word;
 				}
@@ -166,11 +94,11 @@
 			&groups {
 				display: flex;
 				flex-wrap: wrap;
-				padding: 0 16px;
+				padding: 0 1rem;
-				margin-bottom: 8px;
+				margin-bottom: 0.5rem;
 
 				a {
-					padding: 2px 4px;
+					padding: 0.125rem 0.25rem;
 					color: var( --color-base--subtle );
 				}
 			}
@@ -194,9 +122,9 @@
 			}
 
 			&contris {
-				padding: 0 20px 10px 20px;
+				padding: 0 1.25rem 0.625rem 1.25rem;
 				border-bottom: 1px solid var( --border-color-base );
-				font-weight: 450;
+				font-weight: 500;
 			}
 		}
 
@@ -206,24 +134,26 @@
 	}
 }
 
-.skin-citizen-dark {
+// Checkbox hack
-	#personalmenu-button:after,
+#citizen-personalMenu__checkbox:checked {
-	#p-personal a:after {
+	~ .citizen-personalMenu__card {
-		filter: invert( 1 );
+		.citizen-card-show();
 	}
 }
 
 .citizen-animations-ready {
-	#p-personal {
+	.citizen-personalMenu__card {
 		.citizen-card-transition();
 	}
 }
 
-@media ( min-width: @width-breakpoint-tablet ) {
+@media ( max-width: @width-breakpoint-tablet ) {
-	#p-personal {
+	.citizen-personalMenu {
-		position: absolute;
+		&__card {
-		right: 0;
+			position: fixed;
-		left: unset;
+			top: var( --height-header );
-		min-width: 250px;
+			right: var( --padding-page );
+			left: var( --padding-page );
+		}
 	}
 }

resources/skins.citizen.styles/Search__button.less

@@ -1,6 +1,4 @@
 .citizen-search__button {
-	position: relative;
-
 	&Icon {
 		display: flex;
 		align-items: center;

resources/skins.citizen.styles/common/hacks.less

@@ -14,31 +14,13 @@ a.feedlink {
 		cursor: pointer;
 
 		> span {
-			position: absolute !important;
+			.mixin-screen-reader-text;
-			//.mixin-screen-reader-text;
-			display: block;
-			overflow: hidden;
-			width: 1px;
-			height: 1px;
-			padding: 0;
-			border: 0;
-			margin: -1px;
-			clip: rect( 1px, 1px, 1px, 1px );
 		}
 	}
 }
 
 .screen-reader-text {
-	position: absolute !important;
+	.mixin-screen-reader-text;
-	//.mixin-screen-reader-text;
-	display: block !important;
-	overflow: hidden !important;
-	width: 1px !important;
-	height: 1px !important;
-	padding: 0 !important;
-	border: 0 !important;
-	margin: -1px !important;
-	clip: rect( 1px, 1px, 1px, 1px ) !important;
 }
 
 .mw-empty-elt {