MediaWiki:Common.css/src/gg.scss

@use "lib";
/***********************************************************************************************************
 * css for wiki.gg top bar and footer bar
 ***********************************************************************************************************/

/********* wiki.gg header *********/
header#wikigg-header{
	z-index: 9999;
	*{
		font-size: 14px;
		line-height: 24px;
	}
	img{
		box-sizing: content-box;
	}
	#p-personal {
		height: 100%;
		.body {
			> ul {
				white-space: nowrap; /*<< for "log out" */
				height: 100%;
				gap: 12px;
				>li:active{
					background: #0b1040;
				}
			}
			height: 100%;
		}
		#pt-anonuserpage, #pt-tmpuserpage, #pt-userpage a {
			padding: 0;
			background: none;
			display: flex;
			align-items: center;
			&::before{
				content: '';
				display: block;
				width: 17px;
				height: 17px;
				@include lib.mask-icon(#666, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%2354595d'%3E%3Cpath d='M10 11c-5.92 0-8 3-8 5v3h16v-3c0-2-2.08-5-8-5z'/%3E%3Ccircle cx='10' cy='5.5' r='4.5'/%3E%3C/g%3E%3C/svg%3E%0A"));
				margin: 0 3px 0 0;
			}
		}
	}
}
/* header responsive */
@media screen and (max-width: lib.$breakpoint-wikigg-header) {
	header#wikigg-header.no-session > #p-personal{
		flex: unset;
		position: absolute;
		right: 0;
	}
	header#wikigg-header #p-personal{
		position: relative;
		box-sizing: content-box;
		padding-right: 0;
		margin-right: 0;
		.body{
			position: absolute;
			right: 0;
			top: var(--layout-topbar-height);
			height: auto;
			background: #000538;
			border-radius: 0 0 6px 6px;
			transition: opacity 0.1s;
			>ul{
				flex-direction: column;
				align-items: stretch;
				gap: 2px;
				li{
					transition: background 0.3s;
					border-radius: 4px;
				}
				a{
					display: block;
					padding: 4px 6px;
					text-decoration: none;
				}
			}
		}
		#pt-anonuserpage, #pt-tmpuserpage, #pt-userpage a{
			padding: 4px 6px;
		}
	}
	header#wikigg-header .mobile-menu{
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		.menu-icon{
			display: block;
			margin: 0;
			cursor: pointer;
			*{
				display:none;
			}
			&::after{
				@include lib.pseudo-block;
				width: var(--layout-topbar-height);
				height: var(--layout-topbar-height);
				@include lib.mask-icon(#fff, var(--icon-user), 19px 19px);
			}
		}
	}
	/* collapsed */
	header#wikigg-header #p-personal .body > ul{
		padding: 0;
		> li{
			display: none;
		}
	}
	/* expanded */
	// #p-themes is a child of #p-personal, when #p-themes get hovered, the #p-personal will be hovered too.
	// I have no idea how to show personal tools menu when it get hovered and not to show it when #p-themes get hovered.
	//header#wikigg-header .mobile-menu:hover ~ #p-personal .body > ul,
	//header#wikigg-header #p-personal .body:hover > ul,
	header#wikigg-header #mobile-toggle:not(:checked) ~ #p-personal .body > ul{
		padding: 4px;
		> li{
			display: block;
		}
	}

	header#wikigg-header .mobile-menu:hover .menu-icon,
	header#wikigg-header #mobile-toggle:not(:checked) ~ .mobile-menu .menu-icon{
		background: rgba(255,255,255,0.25);
	}

	//for echo notifications
	header#wikigg-header #p-personal ul > li a.mw-echo-notifications-badge {
		text-indent:0;
		opacity:1;
		width:auto;
		background-image:none;
		top:unset;
		height:unset;
		filter:unset
	}
	#pt-notifications-alert .mw-echo-notifications-badge::after {
		display:none;
	}
}
/* reset */
@media screen and (max-width: lib.$breakpoint-wikigg-header){
	div.mobile-header{
		text-align: unset;
	}
	#mobile-toggle:checked ~ #p-personal{
		display: block;
	}
	header#wikigg-header #p-personal{
		top: unset;
		width: auto;
		background-color: unset;
		padding: unset;
	}
	header#wikigg-header #p-personal ul {
		font-size: inherit;
	}
	header#wikigg-header #p-personal ul > li {
		width: unset;
		text-align: unset;
		margin: unset;
	}
	header#wikigg-header #p-personal ul > li a:hover{
		background: rgba(255,255,255,0.25);
	}
}
/********* wiki.gg footer *********/
footer#wikigg-footer{
	.footer-right, .footer-left {
		margin: 0;
		text-align: center;
		@media screen and (max-width:479px){
			width: auto;
		}
	}
	@media screen and (max-width:359px) {
		.footer-middle{
			/* hide wiki.gg logo to make room to avoid text wrapping */
			display: none;
		}
	}
}

/* @import extension/ThemeToggle.css */