From 7bfc9f88d7875d83222dfb5b023e66c1c1eca95d Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Fri, 13 May 2022 13:42:22 -0400
Subject: [PATCH] feat(core): tweak and clean up ToC card styles

---
 .../skins.citizen.styles.toc.less             | 64 +++++++++++--------
 1 file changed, 38 insertions(+), 26 deletions(-)

diff --git a/resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less b/resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less
index 7372ae08..241b11ac 100644
--- a/resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less
+++ b/resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less
@@ -14,7 +14,7 @@
 		width: 100%;
 		max-width: ~'calc( var( --width-toc ) - var( --padding-page ) * 2 )';
 		color: var( --color-base--subtle );
-		font-size: @ui-menu-text;
+		font-size: 0.875rem;
 
 		&::-webkit-scrollbar {
 			width: 0; // Hide bar on toc
@@ -23,7 +23,7 @@
 		&title {
 			h2 {
 				margin: 0;
-				color: var( --color-base--subtle ) !important;
+				color: var( --color-base--subtle );
 				font-size: inherit;
 				font-weight: normal;
 				letter-spacing: 0.75px;
@@ -48,7 +48,7 @@
 			&.toclevel-4,
 			&.toclevel-5,
 			&.toclevel-6 {
-				margin-left: 10px;
+				margin-left: 0.75rem;
 			}
 		}
 
@@ -56,14 +56,16 @@
 			border-color: var( --color-primary );
 			color: var( --color-primary );
 
-			> a {
-				color: inherit !important;
+			> a,
+			> a:hover,
+			> a:active {
+				color: inherit;
 			}
 		}
 
 		a {
 			display: block;
-			padding: 0.25rem 0 0.25rem 10px;
+			padding: 0.25rem 0 0.25rem 0.75rem;
 			color: var( --color-base );
 
 			&:hover {
@@ -77,7 +79,7 @@
 
 		&number {
 			display: none;
-			margin-right: 4px;
+			margin-right: 0.25rem;
 			opacity: 0.7;
 		}
 
@@ -86,7 +88,6 @@
 		}
 
 		ul {
-			margin: 0 !important;
 			list-style: none;
 		}
 
@@ -96,36 +97,34 @@
 			display: block;
 			overflow: visible auto;
 			max-height: ~'calc( 100vh - var( --height-header ) - 3rem )'; // Somehow it works
-			padding-right: 10px;
-			margin: @content-margin-top * 0.75 0 0 0 !important;
+			padding-right: 0.75rem;
+			margin: 0.6rem 0 0 0;
 			font-weight: 450;
 			overscroll-behavior: contain;
+
+			ul {
+				margin: 0;
+			}
 		}
 	}
 
 	@media ( max-width: @width-breakpoint-desktop-wide ) {
 		.toc {
-			z-index: 11; // Higher than header
+			z-index: 3; // Lower than header
 			pointer-events: none;
 
-			&:before,
-			&:after {
-				content: unset; // Disable fade
-			}
-
 			&toggle {
 				&span {
 					display: block;
-					font-size: 0 !important;
+					font-size: 0;
 				}
 
 				&label {
 					--label-position: ~'calc( var( --width-toc ) - 20px )';
 					position: fixed;
-					z-index: 2;
 					left: var( --label-position );
-					width: 40px;
-					height: 40px;
+					width: 2.5rem;
+					height: 2.5rem;
 					border-radius: 0 var( --border-radius--medium ) var( --border-radius--medium ) 0;
 					cursor: pointer;
 					pointer-events: auto;
@@ -150,6 +149,7 @@
 					&:before {
 						.resource-loader-icon;
 						display: block;
+						background-size: 1rem;
 						opacity: var( --opacity-icon-base );
 					}
 				}
@@ -172,17 +172,29 @@
 				position: absolute;
 				z-index: 3;
 				width: ~'calc( 100% - var( --padding-page ) * 2 )';
-				padding: 20px var( --padding-page ) 10px var( --padding-page );
-				background: var( --color-surface-1 );
-				border-radius: var( --border-radius--medium ) 0 0 0;
+				padding: 1rem var( --padding-page );
+
+				&:before {
+					position: absolute;
+					z-index: -1;
+					top: 0;
+					right: 0;
+					left: 0;
+					height: 100%;
+					background: var( --color-surface-1 );
+					border-radius: var( --border-radius--medium );
+					content: '';
+					-webkit-mask-image: linear-gradient( 180deg, #000, transparent );
+					mask-image: linear-gradient( 180deg, #000, transparent );
+				}
 			}
 
 			> ul {
 				display: block !important; // So that animation is visible
 				max-height: ~'calc( 100vh - var( --height-header ) * 3 )';
-				padding: 0 var( --padding-page ) 20px var( --padding-page ); // hardcoded for now
-				margin: 45px 0 0 0 !important;
-				border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
+				padding: 2.6rem var( --padding-page ) 1rem var( --padding-page ); // hardcoded for now
+				margin-top: 0;
+				border-radius: var( --border-radius--medium ) 0 var( --border-radius--medium ) var( --border-radius--medium );
 				pointer-events: auto;
 				.citizen-card( false );
 			}