MediaWiki:Citizen.css - Revision history

Technofied: Restore visibility to TOC now that it's restored (in theory)

2025-07-02T01:34:31Z

Restore visibility to TOC now that it's restored (in theory)

← Older revision		Revision as of 01:34, 2 July 2025
Line 76:		Line 76:
	padding-right: var( --space-xs );		padding-right: var( --space-xs );
	grid-template-columns: 1fr;		grid-template-columns: 1fr;
	}
	}

	~~@media screen and ( min-width: 1000px ) {~~
	~~.citizen-page-sidebar {~~
	~~display: none !important;~~
	}		}
	}		}

Technofied: Attempt to restore Table of Contents

2025-07-02T01:33:34Z

Attempt to restore Table of Contents

← Older revision		Revision as of 01:33, 2 July 2025
Line 82:		Line 82:
	.citizen-page-sidebar {		.citizen-page-sidebar {
	display: none !important;		display: none !important;
	}
	~~.citizen-toc-enabled .citizen-body-container {~~
	~~grid-template-areas: 'header header' 'afterHeader afterHeader' 'content content' 'footer footer' !important;~~
	}		}
	}		}

Technofied: Reimplement CSS

2025-02-08T09:32:24Z

Reimplement CSS

← Older revision		Revision as of 09:32, 8 February 2025
Line 4:		Line 4:
	/* Many thanks to Coasterpedia */		/* Many thanks to Coasterpedia */
	/* Make drawer always visible > 1300px */		/* Make drawer always visible > 1300px */

			@media screen and ( min-width: 1300px ) {
			: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-drawer__card {
			bottom: 0;
			/* Put drawer behind other header cards */
			z-index: -1;
			margin: 0;
			/* Compensate header border */
			margin-left: 1px;
			padding: 0;
			min-width: auto;
			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;
			}

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

			@media screen and ( min-width: 1000px ) {
			.citizen-page-sidebar {
			display: none !important;
			}
			.citizen-toc-enabled .citizen-body-container {
			grid-template-areas: 'header header' 'afterHeader afterHeader' 'content content' 'footer footer' !important;
			}
			}

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

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

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

Technofied: Replaced content with "/* All CSS here will be loaded for users of the Citizen skin / / Make sidebar persist / / Many thanks to Coasterpedia / / Make drawer always visible > 1300px */"

2025-02-08T09:31:01Z

Replaced content with "All CSS here will be loaded for users of the Citizen skin: Make sidebar persist: Many thanks to Coasterpedia: Make drawer always visible > 1300px: "

← Older revision		Revision as of 09:31, 8 February 2025
Line 4:		Line 4:
	/* Many thanks to Coasterpedia */		/* Many thanks to Coasterpedia */
	/* Make drawer always visible > 1300px */		/* Make drawer always visible > 1300px */
	~~@media screen and ( min-width: 1300px ) {~~
	~~: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-drawer__card {~~
	~~bottom: 0;~~
	~~/* Put drawer behind other header cards */~~
	~~z-index: -1;~~
	~~margin: 0;~~
	~~/* Compensate header border */~~
	~~margin-left: 1px;~~
	~~padding: 0;~~
	~~min-width: auto;~~
	~~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;~~
	}

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

	~~@media screen and ( min-width: 1000px ) {~~
	~~.citizen-page-sidebar {~~
	~~display: none !important;~~
	}
	~~.citizen-toc-enabled .citizen-body-container {~~
	~~grid-template-areas: 'header header' 'afterHeader afterHeader' 'content content' 'footer footer' !important;~~
	}
	}

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

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

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

Technofied: Another attempt to make drawer (the proper name) persist

2024-11-10T09:42:14Z

Another attempt to make drawer (the proper name) persist

@@ Line 3: / Line 3: @@
 /* Make sidebar persist */
 /* Many thanks to Coasterpedia */
 @media screen and ( min-width: 1000px ) {
 	.citizen-page-sidebar {

Technofied: Try to make sidebar persist

2024-11-10T09:40:48Z

Try to make sidebar persist

@@ Line 1: / Line 1: @@
 /* All CSS here will be loaded for users of the Citizen skin */
-/* Make drawer always visible > 1300px */
+/* Make sidebar persist */
 /* Many thanks to Coasterpedia */
-@media screen and ( min-width: 1300px ) {
+@media screen and ( min-width: 1000px ) {
-    :root {
+	.citizen-page-sidebar {
-        --fixed-menu-width: 240px;
+		display: none !important;
+	}
+	.citizen-toc-enabled .citizen-body-container {
-    .citizen-page-container {
+		grid-template-areas: 'header header' 'afterHeader afterHeader' 'content content' 'footer footer' !important;
-        /* Reserve space for drawer */
-        margin-left: calc( var( --header-size ) + var( --fixed-menu-width ) );
-    .citizen-drawer__header {
+.permissions-errors {
-        padding-left: var( --space-xl );
+	list-style: none;
-        padding-right: var( --space-xl );
+	margin: 0;
+}
-    .citizen-drawer__logo {
+.permissions-errors li {
-        /* Hide drawer header logo */
+	margin-bottom: 1em;
-        display: none;
-    .citizen-drawer__siteinfo  .mw-logo-wordmark {
+#citizen-sidebar-lastmod {
-        font-size: 1.25rem;
+	display: none;
+}

Technofied: Trying to make sidebar more useful

2024-11-10T09:38:45Z

Trying to make sidebar more useful

New page

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

/* Make drawer always visible > 1300px */
/* Many thanks to Coasterpedia */
@media screen and ( min-width: 1300px ) {
: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-drawer__card {
bottom: 0;
/* Put drawer behind other header cards */
z-index: -1;
margin: 0;
/* Compensate header border */
margin-left: 1px;
padding: 0;
min-width: auto;
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;
}

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