mediawiki-skins-Citizen/resources/skins.citizen.styles/Footer.less

.last-modified-bar {
	background: @color-footer-background-60;

	&-content {
		margin: 0 auto;
		padding: 12px @margin-side;
		max-width: @footer-width;
		display: flex;
		align-items: center;
	}

	&-icon {
		margin-right: @icon-padding;
		width: 20px;
		height: 20px;
		background-repeat: no-repeat;
		background-position: center;
		opacity: @opacity-icon;
	}

	&-text {
		a {
			margin-right: 5px;
		}
	}
}

.mw-footer {
	z-index: 8; // High enough so it covers the floating UI
	clear: both;
	position: relative;
	direction: ltr;
	margin-top: @margin-side * 2;
	color: @color-footer-text;
	background: @color-footer-background-50;
	font-size: @ui-menu-text;
	line-height: @footer-line-height;

	a {
		color: @color-footer-link;

		&:hover,
		&:active,
		&:focus {
			color: @color-footer-link-active;
			text-decoration: none;
		}
	}

	ul {
		margin: 0;
		display: flex;
		flex-wrap: wrap;
	}

	li {
		list-style: none;
	}
}

#footer {
	&-content {
		margin: 0 auto;
		padding: 0 @margin-side;
		max-width: @footer-width;
		display: flex;
		flex-direction: column;
	}

	&-bottom {
		margin-top: @margin-side * 1.5;
		background-color: @color-footer-background-40;

		&-content {
			margin: 0 auto;
			padding: @margin-side / 2 @margin-side;
			max-width: @footer-width;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
		}
	}

	&-sitetitle {
		margin: @margin-side * 2.5 0 @margin-side / 2 0;
		color: @base-90;
		font-size: 20px;
	}

	&-desc {
		margin: @margin-side / 2 0;
	}

	&-places {
		margin: 0 -@margin-side !important;
		display: flex;
		flex-wrap: wrap;

		li a {
			padding: @margin-side / 2 @margin-side;
			display: block;
		}
	}

	&-info {
		margin-top: @margin-side / 2;
		opacity: 0.5;
		font-size: 12px;

		li {
			margin: @margin-side / 2 0;
		}
	}

	&-tagline {
		padding: @margin-side / 2 0;
	}

	&-icons {
		margin: 0 -@margin-side / 2;
		display: flex;

		li {
			display: flex; // Horizontally aligned with there are two icons in the same li
		}

		a {
			padding: @margin-side * 0.75 @margin-side / 2;
			height: 50px; // CSS hack to force SVG icon to appear
			display: flex;
			justify-content: center;
			align-items: center;
			opacity: 0.5;
			transition: @transition-opacity;

			img {
				display: none; // Hack to hide original icons
			}

			&:before {
				content: '';
				.resource-loader-icon;
				display: block;
				background-size: contain;
			}

			&:hover {
				opacity: 0.7;
			}

			// Icon styles
			&[ href*='starcitizen.tools' ] {
				width: 50px;
			}

			&[ href*='robertsspaceindustries' ] {
				width: 50px;
			}

			&[ href*='gdpr' ] {
				width: 50px;
			}

			&[ href*='wikiapiary' ] {
				width: 95px;
				margin-bottom: -3px; //dirty fix
			}

			&[ href*='mediawiki' ] {
				width: 95px;
			}

			&[ href*='miraheze' ] {
				width: 95px;
			}

			&[ href*='by-sa' ] {
				width: 110px;
			}
		}
	}
}