MediaWiki:Common.css

From The Seven Sages of Rome
Revision as of 10:24, 21 May 2026 by Noeth (talk | contribs)

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');
@import url('/index.php?title=MediaWiki:Skeleton.css&action=raw&ctype=text/css');
@import url('/index.php?title=MediaWiki:BodyCards.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');

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




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

.cc-card-body--table .dataTable {
	padding-left: 0.5rem;
}

/* =========================================
   5. Print
   ========================================= */
@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

/* =========================================
   6. Global HTML overrides
   ========================================= */
:root {
  --checkbox-size: 1rem;
  --checkbox-radius: 0.25rem;
  --checkbox-border: hsl(240 5.9% 90%);
  --checkbox-bg: hsl(0 0% 100%);
  --checkbox-checked-bg: hsl(240 5.9% 10%);
  --checkbox-checked-border: hsl(240 5.9% 10%);
  --checkbox-focus-ring: hsl(240 5.9% 10%);
  --checkbox-disabled-opacity: 0.5;
}
 
/* ── Core styles ── */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
 
  position: relative;
  flex-shrink: 0;
 
  width: var(--checkbox-size);
  height: var(--checkbox-size);
 
  border: 1px solid var(--checkbox-border);
  border-radius: var(--checkbox-radius);
  background-color: var(--checkbox-bg);
 
  cursor: pointer;
  vertical-align: middle; /* keeps it inline with label text */
 
  transition:
    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color     150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow       150ms cubic-bezier(0.4, 0, 0.2, 1);
}
 
/* ── Focus ring ── */
input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--checkbox-bg),
    0 0 0 4px var(--checkbox-focus-ring);
}
 
/* ── Checked ── */
input[type="checkbox"]:checked {
  background-color: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-border);
}
 
/* ── Checkmark via pseudo-element ── */
input[type="checkbox"]::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 6.5 11.5 13 4.5'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity   100ms ease,
    transform 100ms ease;
}
 
input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: scale(1);
}
 
/* ── Indeterminate ── */
input[type="checkbox"]:indeterminate {
  background-color: var(--checkbox-checked-bg);
  border-color: var(--checkbox-checked-border);
}
 
input[type="checkbox"]:indeterminate::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='3' y1='8' x2='13' y2='8'/%3E%3C/svg%3E");
  opacity: 1;
  transform: scale(1);
}
 
/* ── Disabled ── */
input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: var(--checkbox-disabled-opacity);
}
 
/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  :root {
    --checkbox-border: hsl(240 3.7% 35%);
    --checkbox-bg: hsl(240 10% 3.9%);
    --checkbox-checked-bg: hsl(0 0% 98%);
    --checkbox-checked-border: hsl(0 0% 98%);
    --checkbox-focus-ring: hsl(0 0% 98%);
  }
 
  input[type="checkbox"]:checked::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a1a2e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 6.5 11.5 13 4.5'/%3E%3C/svg%3E");
  }
 
  input[type="checkbox"]:indeterminate::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a1a2e' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='3' y1='8' x2='13' y2='8'/%3E%3C/svg%3E");
  }
}
Retrieved from "https://db.seven-sages-of-rome.org/index.php?title=MediaWiki:Common.css&oldid=16705"
This page was last edited on 21 May 2026, at 10:24.
Privacy policy
About The Seven Sages of Rome
Disclaimers