MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* =========================================
   1. Imports
   ========================================= */
/* Core Layouts */
@import url('/index.php?title=MediaWiki:BentoGrid.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:Navbar.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:Breadcrumb.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:LandingPage.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:WikiTable.css&action=raw&ctype=text/css');

/* Features & Components */
@import url('/index.php?title=MediaWiki:MotifBadges.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:CustomFiltered.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:CustomDatatable.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:InfoBox.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:CollapsibleTree.css&action=raw&ctype=text/css');

/* NEW: Offloaded Files (Create these files below) */
@import url('/index.php?title=MediaWiki:Search.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:UIComponents.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:VersionTree.css&action=raw&ctype=text/css');


/* =========================================
   2. Fonts & Typography
   ========================================= */
@font-face {
    font-family: 'Inter';
    src: url('/images/f/f1/Inter.ttf') format('ttf');
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url("/images/9/94/Inter-Italic.ttf") format('ttf');
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Prata';
    src: url('/images/3/36/Prata-Regular.ttf') format('ttf');
    font-weight: 100 900;
    font-display: swap;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #FCFCFA;
}

#firstHeading {
    font-family: 'Prata', 'serif';
}

/* List Resets & Styling */
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul ul, ul ol, ol ul, ol ol {
    padding-left: 1.5rem;
    list-style-type: disc;
}


/* =========================================
   3. MediaWiki Core Overrides
   ========================================= */
.mw-body {
    padding: 0 1rem !important;
}

/* Hide Editor View if needed */
.editor-view {
    display: none;
}

/* Category Links Box */
#catlinks {
    border-radius: 0.75rem;
    background-color: white;
    padding: 0.5rem 1rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

@media (max-width: 768px) {
    .mw-body.content {
        padding: 0 !important;
    }
}


/* =========================================
   4. Extension Overrides
   ========================================= */

/* Semantic MediaWiki (SMW) */
.smw-datatable {
    font-family: 'Inter', sans-serif !important;
}

.smw-datatable select {
    background: #fff;
}

.smw-datatable th a {
    color: black;
}

/* PageForms */
#pfForm .createboxInput,
#pfForm .mandatoryField,
#pfForm textarea {
    max-width: 98%;
}

#pfForm :not(.dateInput):not(.monthInput):not(.yearInput) > input,
#pfForm :not(.dateInput):not(.monthInput):not(.yearInput) > .select2,
#pfForm :not(.dateInput):not(.monthInput):not(.yearInput) > .pf-select2-container,
#pfForm :not(.dateInput):not(.monthInput):not(.yearInput) > .oo-ui-comboBoxInputWidget {
    width: 100% !important;
}

/* Maps */
.maps-map {
    border-radius: 0.5rem;
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
}

/* DataTables Fixed Header */
.dtfh-floatingparent {
    top: 48px !important;
}

/* OOUI (Dialogs & Popups) */
.oo-ui-windowManager-modal > .oo-ui-dialog,
.oo-ui-menuSelectWidget {
    z-index: 999 !important;
}

.oo-ui-popupToolGroup-tools.oo-ui-popupToolGroup-active-tools .oo-ui-iconElement-icon {
    position: static !important;
}

/* Tag Cloud */
.srf-tagcloud-wordcloud {
    width: unset !important;
}

.srf-tagcloud-wordcloud a {
    font-family: "Inter", sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: -1px;
}

.srf-tagcloud-wordcloud a:hover {
    text-decoration: underline !important;
}

/* Skeleton active by default */
.tabber__panel {
    position: relative;
    min-height: 200px;
    pointer-events: none;
    overflow: hidden;
}

.tabber__panel > * {
    opacity: 0;
    visibility: hidden;
}

.tabber__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    background:
        linear-gradient(#e0e0e0 28px, transparent 28px),
        repeating-linear-gradient(
            transparent,
            transparent 44px,
            #e0e0e0 44px,
            #e0e0e0 68px
        );
    background-color: #f5f5f5;
    border-radius: 4px;
}

.tabber__panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 11;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.65) 45%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(255, 255, 255, 0.65) 55%,
        transparent 100%
    );
    animation: smw-shimmer 1.6s infinite ease-in-out;
    transform: translateX(-100%);
}

@keyframes smw-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.tabber__panel.smw-loaded > * {
    animation: smw-fadein 0.35s ease forwards;
}

@keyframes smw-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}