MediaWiki:Common.css/src/interface/sidebar.scss

@use '../lib';
/********* side panel START *********/
#mw-panel, #mw-panel *{
	box-sizing: border-box;
}
#mw-panel {
	--list-body-font-size: 14px;
	--list-body-padding-x: 6px;
	--list-body-padding-y: 6px;

	display: flex;
	flex-direction: column;
	gap: var(--layout-box-gap-y) var(--layout-box-gap-x);

	#t-print{
		/* hide the "Printable version" link. */
		display: none;
	}

	a:not(:focus) {
		/* remove the underline from links, unless the links are focused (accessibility: focused links must be distinguishable in some way) */
		text-decoration: none;
	}

	.menu-toggle{
		display: none;
	}

	.portal {
		/* section box */
		@include lib.widget-style(var(--theme-section-background));
		margin: 0;
		padding: 0;
		.vector-menu-heading{
			/* section heading */
			border-radius: var(--theme-widget-border-radius) var(--theme-widget-border-radius) 0 0;
			background: var(--theme-heading-background);
			margin: 0;
			padding: 6px 10px;
			font-size: 16px;
			line-height: 18px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: var(--theme-heading-color);

			&::after {
				@include lib.pseudo-block;
				width: 14px;
				height: 14px;
				margin-top: 1px; /* offset */
				@include lib.mask-icon(var(--theme-icon-color), var(--icon-chevron-down));
				transform: scaleY(-1);
			}

			.client-nojs & {
				/* the cursor should not be pointer if JavaScript is disabled
				 * (because the heading can't be clicked in that case); see also
				 * https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS#.client-js_and_.client-nojs */
				cursor: unset;
				&::after {
					/* don't display the arrow if JavaScript is disabled (because
					 * the heading can't be collapsed in that case); see also
					 * https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS#.client-js_and_.client-nojs */
					display: none;
				}
			}
		}

		&:hover .vector-menu-heading::after {
			@include lib.mask-icon(var(--theme-icon-color-hover));
		}

		&.collapsed .vector-menu-heading::after{
			transform: none;
		}
	}

	#p-logo + .portal {
		/* first section */
		position: relative;/* for the "grass" */

		.vector-menu-heading { /* show the heading of first section */
			display: flex;
		}

		&::before { /* the "grass" */
			content: '';
			display: block;
			box-sizing: content-box;
			@include lib.the-grass();
			padding: 0 1px; /* compensate .portal border width */
			margin-top: -1px; /* compensate .portal border width */
			left: -1px;
		}
	}

	.portal .body {
		/* list body */
		background: none;
		border: 0;
		padding: 0;
		margin: 0;

		&::before {
			/* line between header and body */
			@include lib.pseudo-block;
			@include lib.hr;
		}

		ul {
			padding: 4px;
		}

		li {
			margin: 0;
			padding: 0;
			font-size: var(--list-body-font-size);
			line-height: calc(var(--list-body-font-size) + 2px);
			border-radius: calc(var(--theme-widget-border-radius) - 2px);
			transition: background 0.3s;

			&:hover {
				background: var(--theme-highlight-background);
			}

			a {
				display: block;
				padding: var(--list-body-padding-y) var(--list-body-padding-x);
				color: var(--theme-link-color);

				&:visited {
					color: var(--theme-link-color-visited);
				}

				&:hover {
					color: var(--theme-link-color-hover);
				}

				&.feedlink{
					/* "Atom" RSS Feed */
					text-indent: calc( var(--list-body-font-size) + 2px );
					background-position: var(--list-body-padding-x) center; /* align icon with other text */
				}
			}
		}
	}
}

/********* side panel END *********/