MediaWiki:Citizen.css

:root {
    /* Set Coasterpedia primary color */
    --color-progressive-oklch__l: 68.11%;
	--color-progressive-oklch__c: 0.1827;
	--color-progressive-oklch__h: 135.19;
	--color-surface-0-oklch__l: 100%;
	--color-surface-1-oklch__l: 100%;
	--color-surface-1-oklch__c: 0;
	--color-surface-2-oklch__c: 0;
	--color-visited: #36c;
}

:root.skin-theme-clientpref-night {
	--color-surface-0-oklch__l: 16%;
	--color-surface-1-oklch__l: calc( var( --color-surface-0-oklch__l ) + var( --delta-lightness-surface-base ) );
}

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

@media screen and (prefers-color-scheme: dark) {
    :root.skin-theme-clientpref-os {
		--color-surface-0-oklch__l: 16%;
		--color-surface-1-oklch__l: calc( var( --color-surface-0-oklch__l ) + var( --delta-lightness-surface-base ) );	
    }
}

a {
    /* Make links blue */
    --color-link: #36c;
}

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

.citizen-header {
    /* Change header color */
    background-color: var( --color-progressive );
}

.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;
}

@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;
}

/* Kartographer */

img.leaflet-marker-icon {
	clip-path: none;
}

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


/* Related Articles */
/*.read-more-container {*/
/*	 max-width: var(--width-layout--extended);*/
/*	 padding: var(--space-md) 0 0;*/
/*	 margin-inline: auto;*/
/*}*/
/* .read-more-container h2 {*/
/*	 padding-bottom: 0;*/
/*	 margin-top: 0;*/
/*	 font-size: var(--font-size-x-small);*/
/*	 font-weight: var(--font-weight-normal);*/
/*	 color: var(--color-subtle);*/
/*	 text-transform: none;*/
/*	 letter-spacing: 0.05em;*/
/*}*/
/* .read-more-container-card-list {*/
/*	 gap: var(--space-xs);*/
/*}*/
/* .read-more-container-card-list .cdx-card__text__title {*/
/*	 font-weight: var(--font-weight-semi-bold);*/
/*	 line-height: var(--line-height-xxx-small);*/
/*	 color: var(--color-emphasized);*/
/*}*/

/* .read-more-container-card-list .cdx-card {*/
/*	 overflow: hidden;*/
/*	 background-color: var(--color-surface-2);*/
/*	 border-color: var(--border-color-base) !important;*/
/*	 border-radius: var(--border-radius-medium) !important;*/
/*	 padding: 0;*/
/*	 align-items: center;*/
/*	 min-height: 6em;*/
/*}*/
/* .read-more-container-card-list .cdx-card:hover {*/
/*	 background-color: var(--background-color-button-quiet--hover);*/
/*	 box-shadow: var(--box-shadow-drop-medium);*/
/*}*/
/* .read-more-container-card-list .cdx-card:active {*/
/*	 background-color: var(--background-color-button-quiet--active);*/
/*}*/
/* .read-more-container-card-list .cdx-card__text {*/
/*	 margin-top: var(--space-xxs);*/
/*	 font-size: var(--font-size-x-small);*/
/*	 color: var(--color-subtle);*/
/*	 padding: 1em 1em 1em 8em;*/
/*}*/
/* .read-more-container-card-list .cdx-card__thumbnail {*/
/*	 margin-right: var(--space-sm);*/
/*	 height: 100%;*/
/*}*/

/*.cdx-card__thumbnail.cdx-thumbnail .cdx-thumbnail__placeholder, .cdx-card__thumbnail.cdx-thumbnail .cdx-thumbnail__image {*/
/*	width: 6rem;*/
/*	height: 100%;*/
/*	border: 0;*/
/*	position: absolute;*/
/*}*/

/*.cdx-thumbnail__placeholder {*/
/*	filter: var( --filter-invert );*/
/*}*/
/*.mw-special-Nearby .mw-vue-page-list .cdx-card {*/
/*	padding:0;*/
/*}*/
/*.mw-special-Nearby .mw-vue-page-list .cdx-card__text {*/
/*	margin-left:6rem;*/
/*}*/