MediaWiki:Citizen.css: Difference between revisions

Revision as of 03:40, 25 February 2025

/* Align icon opacity with skin default */
.mw-logo-icon {
	opacity: var( --opacity-icon-base );
	filter: var( --filter-invert );
}

/* All CSS here will be loaded for users of the Citizen skin */
/* Icons */
.citizen-drawer__menu [id^="n-sidebar-icon-"] a {
	font-size: 0;
    content-visibility: auto;

}

.citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {
	display: block;
    content: "";
    width: var( --size-icon );
    height: var( --size-icon );
    background-color: currentColor;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}

#n-sidebar-icon-discord a:before {
	mask-image: url( https://wiki.cosmicpe.me/images/7/77/Discord_-_Simple_Icons.svg );
}

#n-sidebar-icon-twitter a:before {
	mask-image: url( https://wiki.cosmicpe.me/images/6/6a/Twitter_-_Simple_Icons.svg );
}

#n-sidebar-icon-github a:before {
	mask-image: url( https://wiki.cosmicpe.me/images/8/85/Github_-_Simple_Icons.svg );
}

#n-sidebar-icon-youtube a:before {
	mask-image: url( https://wiki.cosmicpe.me/images/6/6b/Youtube_-_Simple_Icons.svg );
}

/*
 * Footer icons
 * We use custom footer icons so we need to fine tune it
*/
#footer-icons a {
	border: 0;
	padding: 0;
	background: transparent;
	opacity: var( --opacity-icon-base );
	transition: opacity 250ms ease;
}

#footer-icons a:hover {
	opacity: var( --opacity-icon-base--hover );
}

#footer-icons a:active {
	opacity: var( --opacity-icon-base--active );
}

/* More space between icons */
#footer-icons ul,
#footer-icons li {
	gap: var( --space-md );
}

#footer-icons img {
	width: auto;
	height: 32px;
}

/* Divide footer links into two columns */
#footer-places {
	column-count: 2;
}

/* Fix misalignment in Safari and Firefox when using two columns */
#footer-places ul {
	display: initial;
}

/* Darken the footer icon in light mode */
.skin-citizen-light #footer-icons a {
	filter: invert( 1 ) hue-rotate( 180deg );
}

/*
 * Very important checkmark
 * Blue checkmark near wordmark
*/
.mw-logo-wordmark {
    display: flex;
    align-items: center;
    gap: var( --space-sm );
}

.mw-portlet-External {
    position: sticky;
    bottom: 0;
    margin-top: var(--space-md);
    padding: var(--space-xs) 0;
    border-top: 1px solid var(--border-color-base);
    background: var(--color-surface-1);
    font-size: var(--font-size-x-small);
    grid-column: 1 / -1;
    white-space: nowrap
}

.mw-portlet-External .citizen-menu__heading {
    display: none
}

.mw-portlet-External ul {
    display: flex;
    overflow: auto
}

.mw-portlet-External .mw-list-item a {
    gap: 0
}

.citizen-drawer__menu [id^="n-sidebar-label-"] a {
    pointer-events: none;
    margin-left: var(--space-xs);
    padding-left: var(--space-md);
    padding-right: var(--space-xs);
    border-left: 1px solid var(--border-color-base);
    border-radius: 0;
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-normal);
    color: var(--color-subtle) !important
}