MediaWiki:Citizen.css

/*
 * MediaWiki:Citizen.css
 * This stylesheet contains site-wide styles.
 * For template-specific styles, check the template documentation.
*/

/* 
 * Global Styles
 * Styles that apply to the entire site.
*/

/* Universal box-sizing set to border-box */
html {
    box-sizing: border-box;
    scroll-padding-top: 6rem; /* Adjust scroll padding */
}

html, body {
    min-height: 100vh;
    padding: 0;
    margin: 0;
    color: var(--color-base); /* Base text color */
    accent-color: var(--color-progressive); /* Accent color */
    background: var(--color-surface-0); /* Background color */
}

/* Apply border-box universally unless overwritten */
*, *::before, *::after {
    box-sizing: inherit;
}

/* Focus outline styles */
:focus {
    outline-color: var(--color-progressive);
}

/* Ensure focus-visible outline is styled */
:focus-visible {
    outline: 2px solid var(--color-progressive);
    outline-offset: 1px;
}

/* Input, select, and textarea styles */
input, select, textarea {
    color: var(--color-emphasized);
    background-color: transparent;
    border: 1px solid var(--border-color-interactive);
}

/* Option elements in select inputs */
select option {
    background-color: var(--color-surface-1);
}

/* Textarea width to fill its container */
textarea {
    width: 100%;
}

/* Superscript and subscript line height adjustment */
sup, sub {
    line-height: 1;
}

/*
 * Menu Styles
 * Styling for the rich format menu to ensure proper hierarchy and layout.
*/

/* Remove bottom spacing in the drawer menu, handled in footer portlet */
.citizen-drawer__menu {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* External portlet styling for sticky positioning at the bottom */
.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;
}

/* Hide the heading in the external portlet */
.mw-portlet-External .citizen-menu__heading {
    display: none;
}

/* Flex layout for the external portlet's list */
.mw-portlet-External ul {
    display: flex;
    overflow: auto;
}

/* Remove gap in the list items of the external portlet */
.mw-portlet-External .mw-list-item a {
    gap: 0;
}

/* Label styling in the drawer menu */
.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-base--subtle) !important;
}

/* Icon styling in the drawer menu */
.citizen-drawer__menu [id^="n-sidebar-icon-"] a {
    font-size: 0;
}

/* Ensure icons are displayed correctly with specific size and background */
.citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {
    display: block;
    content: "";
    width: var(--size-icon);
    height: var(--size-icon);
    background: transparent center/contain no-repeat;
    opacity: var(--opacity-icon-base);
    filter: var(--filter-invert);
}

/*
 * Footer Styles
 * Adjust the appearance and layout of custom footer icons and elements.
*/

/* Display flex for logo wordmark with alignment */
.mw-logo-wordmark {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Custom cookie warning styling */
.mw-cookiewarning-container {
    max-width: 480px;
}

/* Adjust gap in cookie warning text */
.mw-cookiewarning-text {
    gap: var(--space-xs);
}

/* Add a cookie emoji before the warning text */
.mw-cookiewarning-text::before {
    content: '🍪';
    font-size: 2rem;
}

/* Hide cookie warning on page load to prevent Flash of Unstyled Content (FoUC) */
.client-js .mw-cookiewarning-container {
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms ease, visibility 250ms ease;
}

/* Show cookie warning when scripts are loaded */
.client-js.citizen-animations-ready .mw-cookiewarning-container {
    opacity: 1;
    visibility: visible;
}

/*
 * Blockquote Styles
 * Custom styling for blockquotes.
*/

/* Add left border and background color to visually indicate blockquote */
blockquote {
    border-left: 4px solid var(--border-color-base); /* Add left border */
    background-color: var(--color-surface-1); /* Add background color */
    padding: var(--space-md); /* Add padding around the text */
    margin: var(--space-md) 0; /* Add vertical margin */
    border-radius: var(--border-radius-base); /* Optional: Add border radius for rounded corners */
    color: var(--color-subtle); /* Optional: Change text color for blockquotes */
}

/* Ensure citations appear inline within blockquotes */
blockquote cite {
    display: inline; /* Make citation inline */
    margin-bottom: 0; /* Reset bottom margin */
}

/* Remove the unwanted emdash before citations in blockquotes */
blockquote cite::before {
    content: ''; /* Remove the unwanted emdash */
}

/* Ensure there's space after the last child element in blockquotes */
blockquote > *:last-child {
    margin-bottom: var(--space-md); /* Add bottom margin to the last child in blockquote */
}