MediaWiki:Citizen.css: Difference between revisions

Revision as of 22:22, 4 September 2025

/* All CSS here will be loaded for users of the Citizen skin */


.external-link-rcdb {
	filter: var(--filter-invert);
}

.mw-logo-icon {
	/* Temp fix to icon aspect ratio until it is fixed upstream */
	height: auto;
}


.infobox__snippet::-webkit-details-marker, .template-navplate__header::-webkit-details-marker {
  display: none;
} 

/* Tweak header icon to work better with primary color header */
#pt-notifications-alert .citizen-ui-icon,
.citizen-search .citizen-dropdown-summary > .citizen-ui-icon > span,
#citizen-preferences-details .citizen-ui-icon,
#pt-notifications-notice .citizen-ui-icon,
.citizen-userMenu .citizen-dropdown-summary .citizen-ui-icon,
#pt-notifications-alert .mw-echo-notifications-badge,
#pt-notifications-notice .mw-echo-notifications-badge {
    /* Make icon always solid */
    --opacity-icon-base: 1;
    color: var( --color-surface-0 );
}

.citizen-drawer .citizen-dropdown-summary > .citizen-ui-icon > span {
	background-color: var( --color-surface-0 );
}

#footer-sitetitle {
	content: url(https://images.coasterpedia.net/8/8c/Coasterpedia_with_circle.png);
	height: 54px;
	width: 152px;
}

.mw-collapsible-toggle {
	color: white;
}

.infobox-video th {
	color: white;
}

/* Merge navplates & infoboxes */
.template-navplate ~ .template-navplate, 
.infobox ~ .infobox {
	border-top: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.template-navplate:has(~ .template-navplate),
.infobox:has(~ .infobox) {
	margin-bottom: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.infobox:not(:has(~ .infobox)) {
	margin-bottom: var(--space-md) !important;
}

@media screen and ( min-width: 1120px ) {
    :root {
        --fixed-menu-width: 240px;
    }
    
    .citizen-page-container {
        /* Reserve space for drawer */
        margin-left: calc( var( --header-size ) + var( --fixed-menu-width ) );
    }
    
    .citizen-drawer .citizen-dropdown-details {
        /* Hide drawer button */
        display: none;
    }
    
    .citizen-dropdown .citizen-menu__card, .citizen-dropdown .citizen-menu__card .citizen-ui-icon {
    	content-visibility: visible;
    }
    
    .citizen-drawer__card {
        bottom: 0;
        /* Put drawer behind other header cards */
        z-index: -1 !important;
        margin: 0;
        /* Compensate header border */
        margin-left: 1px;
        padding: 0;
        min-width: auto !important;
        width: var( --fixed-menu-width );
        max-height: none;
        border-right: 1px solid var( --border-color-base );
        border-radius: 0;
        background-color: var( --color-surface-0 );
        box-shadow: none;
        /* Force drawer to show */
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        visibility: visible !important;
        left:56px;
        overflow-x:hidden;
        overflow-y:auto;
    }
    
    .citizen-drawer__card > * {
        /* Force drawer content to show */
        opacity: 1 !important;
    }

    .citizen-drawer__header {
        padding-left: var( --space-xl );
        padding-right: var( --space-xl );
    }
    
    .citizen-sticky-header-container {
    	margin-left: calc(var(--header-size) + var(--fixed-menu-width));
    }

    .citizen-drawer__logo {
        /* Hide drawer header logo */
        display: none;
    }

    .citizen-drawer__siteinfo  .mw-logo-wordmark {
        font-size: 1.25rem;
    }

    .citizen-siteStats {
        font-size: 0.8125rem;
    }

    #citizen-siteStats__item--images,
    #citizen-siteStats__item--users {
        /* Hide image and user stats to make space */
        display: none;
    }
    
    .citizen-drawer__menu {
        padding-left: var( --space-xs );
        padding-right: var( --space-xs );
        grid-template-columns: 1fr;
    }
    
    .citizen-toc-enabled {
    	--width-page: calc(var(--width-layout) + var(--space-lg));
    }
}

/* Template styles */
.navbox-subheader {
    background-color: var( --color-surface-3 );
}

.infobox-new {
	border: 1px solid var( --border-color-base ) !important;
}

.infobox-new td {
	border-bottom: 1px solid var( --border-color-base );
}

.skin-citizen-dark .box-blue,
.skin-citizen-dark .box-purple,
.skin-citizen-dark .box-red,
.skin-citizen-dark .box-yellow,
.skin-citizen-dark .box-green,
.skin-citizen-dark .box-grey,
.skin-citizen-dark .main-page-box {
    background: none !important;
}

.table-unknown,
.table-na,
#elementbox,
.infobox-new,
.cp-navbox,
.double-image {
	background-color: var( --color-surface-2 ) !important;
}
/* Hotcat styles */
.catlinks li {
    position: relative;
}

.nav-card__foreground {
	background: oklch(var(--color-progressive-oklch__l) var(--color-progressive-oklch__c) var(--color-progressive-oklch__h) / 80%);
}

.hotcatlink {
    position: absolute;
    right: calc( var( --space-xs ) * -1 );
    top: calc( var( --space-xs ) * -1 );
    left: calc( var( --space-xs ) * -1 );
    text-align: center;
}
.oo-ui-windowManager-modal > .oo-ui-dialog {
	z-index:500;
}

@media screen and (max-width: 720px){
.hide-on-mobile,
.action-edit .mw-page-title-main,
.action-edit .page-actions,
.action-edit .infobox-video__content {
	display:none;
}
.elementbox-wide { /* wide elementbox can approach full width of phone screen, so just make it 100% */
   width:100% !important;
}
.citizen-header .oo-ui-popupWidget {
	z-index:300; /* more than the header (200) but less than the windows in the VisualEditor (500) */
}
.ve-init-mw-desktopArticleTarget-toolbar > .oo-ui-toolbar-bar > .oo-ui-toolbar-tools:first-child { 
	display:inline;
}
}

@media screen and ( min-width: 1000px ) {
	.citizen-page-sidebar {
		display: none !important;
	}
	.citizen-body-container {
		grid-template-columns: minmax(0,var(--width-layout)) !important;
		grid-template-areas: 'content' 'footer' !important;
	}
	.citizen-page-header-inner {
		max-width: var(--width-layout) !important;
	}
}

.permissions-errors {
	list-style: none;
	margin: 0;
}

.permissions-errors li {
	margin-bottom: 1em;
}

#citizen-sidebar-lastmod {
	display: none;
}

/*
 * 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--selected );
}

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

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

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

.citizen-footer {
	padding-bottom: 0;
	margin-bottom: 0;
}

.citizen-main-menu .citizen-keyboard-hint-key {
	display: none;
}

/* Hide secure login button on login */
.mw-secure {
	display: none !important;
}