MediaWiki:Common.css
MediaWiki interface page
More actions
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.
/*
* Styling for links generated by [[MediaWiki:Edittools]]
* @source www.mediawiki.org/wiki/Extension:CharInsert#Styling
* @updated 2012-02-29
*/
.mw-charinsert-buttons {
margin-top: 10px;
border: 1px solid #a2a9b1;
padding: 1px;
text-align: center;
font-size: 110%;
}
.mw-charinsert-buttons a {
color: black;
background-color: #cde !important;
font-weight: bold;
font-size: .9em;
text-decoration: none;
border: thin #069 outset;
padding: 0 .1em .1em;
}
.mw-charinsert-buttons a:hover,
.mw-charinsert-buttons a:active {
background-color: #bcd;
border-style: inset;
}
.client-js .mw-edittools-section {
display: inline;
}
.client-js .mw-edittools-section input[type="button"] {
font-size: 0.9em;
padding-left: 1px;
padding-right: 1px;
margin-left: 1px;
}
/* To deal with the AddThis Extension Floater */
.mw-parser-output {
clear: both;
}
/* Handling of various Google ads with Citizen skin */
.adsbygoogle {
text-align: center;
}
/* Centered DIV / Table Elements */
.centered {
margin: auto;
}
.infobox {
max-width: 350px !important;
}
/* Inline Video Element Overrides - 5.25.25 */
.video-js.vjs-mediacms .vjs-corner-layer .media-links-top-left .title-link {
padding-left: 0px !important;
padding-top: 0px !important;
overflow: visible !important;
}
.video-js.vjs-mediacms .vjs-corner-layer .media-links-top-left .user-thumb-link {
display: none !important;
visibility: hidden !important;
}
/* For Indicators - 7.19.25 */
/*
* Styles for the EraIndicator Template
* The ID must match the 'name' attribute from the <indicator> tag,
* prefixed with '#mw-indicator-'.
*/
/* Common styles for all indicators */
#mw-indicator-tos-indicator,
#mw-indicator-trs-indicator,
#mw-indicator-caprica-indicator,
#mw-indicator-1980-indicator,
#mw-indicator-bac-indicator,
#mw-indicator-sepcon-indicator,
#mw-indicator-gallery-indicator { /* CHANGED from licensed-indicator */
border: 1px solid #000;
padding: 2px 6px;
font-size: 9pt;
font-weight: bold;
border-radius: 5px;
}
/* TOS Indicator */
#mw-indicator-tos-indicator {
background-color: #D4AF37; /* Gold */
color: #000;
}
/* TRS Indicator */
#mw-indicator-trs-indicator {
border-color: #CCC;
background-color: #444444; /* Dark Gray */
color: #FFF;
}
/* Caprica Indicator */
#mw-indicator-caprica-indicator {
background-color: #A1C6E7; /* Light Blue */
color: #000;
}
/* 1980 Indicator */
#mw-indicator-1980-indicator {
background-color: #CD7F32; /* Bronze */
color: #FFF;
}
/* Separate Continuity Indicator */
#mw-indicator-sepcon-indicator {
background-color: #4B0082; /* Indigo */
color: #FFF;
border-color: #AAA;
}
#mw-indicator-bac-indicator {
background-color: #2F4F4F; /* Dark Slate Gray */
color: #00FFFF; /* Cyan */
border-color: #00FFFF;
}
#mw-indicator-gallery-indicator {
background-color: #36454f; /* Charcoal: Neutral enough for both modes */
color: #00ced1; /* Dark Turquoise: Readable on charcoal and white */
border: 1px solid #00ced1;
}
#mw-indicator-sepcon-indicator a, #mw-indicator-trs-indicator a, #mw-indicator-bac-indicator a, #mw-indicator-gallery-indicator a {
color: white !important;
}
.mw-indicator a {
color: black !important;
}
/* Category Hidden for Spoilerific Content */
.page-Ellen_Tigh #catlinks, .page-Saul_Tigh #catlinks, .page-Galen_Tyrol #catlinks, .page-Tory_Foster #catlinks, .page-Samuel_Anders #catlinks{
display: none;
}
/* iFrame Height Adjust */
iframe {
height: 50vh;
}
iframe.video {
height: revert-layer;
}
/* ============================================================
Portal layout — BattlestarWiki
Add to: MediaWiki:Common.css (or Citizen skin custom CSS)
============================================================ */
/* ── Page shell ─────────────────────────────────────────── */
.portal-page {
max-width: 1100px;
margin: 0 auto;
}
/* ── Header ─────────────────────────────────────────────── */
.portal-header {
background: var(--color-surface-2, #f8f8f6);
border: 1px solid var(--color-border, #e0e0dc);
border-radius: 8px;
padding: 14px 18px;
margin-bottom: 12px;
}
.portal-header-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.portal-title {
font-size: 1.3em;
font-weight: 600;
line-height: 1.3;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.portal-badge {
font-size: 0.65em;
font-weight: 500;
padding: 2px 9px;
border-radius: 999px;
border: 1px solid var(--color-border, #ccc);
color: var(--color-subtle, #666);
background: var(--color-surface-1, #fff);
vertical-align: middle;
}
.portal-breadcrumb {
font-size: 0.8em;
color: var(--color-subtle, #666);
margin-top: 3px;
}
.portal-header-links {
font-size: 0.8em;
color: var(--color-subtle, #666);
white-space: nowrap;
padding-top: 4px;
}
/* ── Stats bar ───────────────────────────────────────────── */
.portal-stats-bar {
display: flex;
gap: 20px;
flex-wrap: wrap;
border-top: 1px solid var(--color-border, #e0e0dc);
padding-top: 10px;
}
.portal-stat {
text-align: center;
min-width: 50px;
}
.portal-stat-num {
font-size: 1.25em;
font-weight: 600;
line-height: 1.2;
color: var(--color-text, #202020);
}
.portal-stat-label {
font-size: 0.72em;
color: var(--color-subtle, #888);
margin-top: 1px;
}
/* ── Series nav pills ────────────────────────────────────── */
.portal-series-nav {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 12px;
align-items: center;
}
.portal-series-pill {
display: inline-block;
font-size: 0.78em;
padding: 4px 12px;
border-radius: 999px;
border: 1px solid var(--color-border, #ccc);
color: var(--color-subtle, #555);
background: var(--color-surface-1, #fff);
cursor: pointer;
text-decoration: none !important;
white-space: nowrap;
transition: background 0.15s, border-color 0.15s;
}
.portal-series-pill:hover {
border-color: var(--color-border-hover, #aaa);
background: var(--color-surface-2, #f4f4f2);
color: var(--color-text, #202020);
}
.portal-series-pill--active {
border-color: var(--color-border-strong, #888);
background: var(--color-surface-2, #f0f0ee);
color: var(--color-text, #202020);
font-weight: 600;
cursor: default;
}
.portal-series-pill--jump {
border-style: dashed;
}
.portal-series-pill-sep {
flex: 0 0 8px; /* visual gap before topic portals */
}
/* Undo MW's default link styling inside pills */
.portal-series-nav a {
color: inherit;
text-decoration: none;
}
/* ── Main two-column grid ────────────────────────────────── */
.portal-main-grid {
display: grid;
grid-template-columns: 1fr 270px;
gap: 12px;
align-items: start;
}
@media screen and (max-width: 800px) {
.portal-main-grid {
grid-template-columns: 1fr;
}
}
.portal-main-col,
.portal-sidebar {
display: flex;
flex-direction: column;
gap: 12px;
}
/* ── Widget card ─────────────────────────────────────────── */
.portal-widget {
background: var(--color-surface-1, #fff);
border: 1px solid var(--color-border, #e0e0dc);
border-radius: 8px;
overflow: hidden;
}
.portal-widget-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
border-bottom: 1px solid var(--color-border, #e0e0dc);
background: var(--color-surface-1, #fff);
gap: 8px;
flex-wrap: wrap;
}
.portal-widget-title {
font-size: 0.85em;
font-weight: 600;
color: var(--color-text, #202020);
}
.portal-widget-meta {
font-size: 0.75em;
color: var(--color-subtle, #888);
flex: 1;
text-align: right;
}
.portal-widget-edit {
font-size: 0.75em;
color: var(--color-link, #3366cc);
white-space: nowrap;
}
.portal-widget-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 14px;
border-top: 1px solid var(--color-border, #e0e0dc);
font-size: 0.75em;
color: var(--color-subtle, #888);
gap: 8px;
flex-wrap: wrap;
}
.portal-widget-body {
padding: 12px 14px;
}
/* ── Image slider ────────────────────────────────────────── */
.portal-slider-wrapper {
padding: 10px;
}
.portal-slider-wrapper img,
.portal-slider-wrapper .portal-image-placeholder {
display: block;
width: 100%;
border-radius: 6px;
max-height: 260px;
object-fit: cover;
}
.portal-image-placeholder {
min-height: 160px;
background: var(--color-surface-2, #f4f4f2);
border: 1px dashed var(--color-border, #ccc);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 0.8em;
color: var(--color-subtle, #999);
padding: 14px;
border-radius: 6px;
}
.portal-slider-nav {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
font-size: 0.78em;
color: var(--color-subtle, #888);
}
.portal-slider-prev,
.portal-slider-next {
width: 26px; height: 26px;
border-radius: 50%;
border: 1px solid var(--color-border, #ccc);
background: var(--color-surface-1, #fff);
cursor: pointer;
font-size: 1.1em;
line-height: 1;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: background 0.15s;
}
.portal-slider-prev:hover,
.portal-slider-next:hover {
background: var(--color-surface-2, #f0f0ee);
}
.portal-slider-dots {
display: flex;
gap: 4px;
flex: 1;
}
.portal-slider-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--color-border, #ccc);
cursor: pointer;
transition: background 0.2s;
}
.portal-slider-dot.is-active {
background: var(--color-text, #444);
}
.portal-slider-counter {
flex-shrink: 0;
}
.portal-slider-source {
white-space: nowrap;
color: var(--color-link, #3366cc);
text-decoration: none;
}
/* ── Newest article ─────────────────────────────────────── */
.portal-newest {
font-size: 0.85em;
}
.portal-newest-label {
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-subtle, #999);
margin-bottom: 4px;
font-weight: 500;
}
.portal-newest-title {
font-size: 1.05em;
font-weight: 600;
margin-bottom: 4px;
}
.portal-newest-meta {
font-size: 0.8em;
color: var(--color-subtle, #999);
margin-top: 4px;
}
.portal-newest-placeholder {
color: var(--color-subtle, #999);
}
/* ── Colonial Calendar ───────────────────────────────────── */
.portal-calendar-date {
font-size: 1.4em;
font-weight: 600;
line-height: 1.2;
}
.portal-calendar-sub {
font-size: 0.75em;
color: var(--color-subtle, #999);
margin-bottom: 10px;
}
.portal-calendar-events {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.portal-calendar-event {
font-size: 0.82em;
color: var(--color-text, #333);
padding: 6px 0;
border-bottom: 1px solid var(--color-border, #eee);
line-height: 1.5;
}
.portal-calendar-event:last-child {
border-bottom: none;
}
.portal-calendar-year {
font-weight: 600;
color: var(--color-subtle, #888);
margin-right: 2px;
}
.portal-calendar-none {
font-size: 0.82em;
color: var(--color-subtle, #aaa);
}
/* ── Related portals grid ────────────────────────────────── */
.portal-related-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.portal-related-tile {
background: var(--color-surface-2, #f8f8f6);
border: 1px solid var(--color-border, #e0e0dc);
border-radius: 6px;
padding: 7px 10px;
font-size: 0.8em;
transition: border-color 0.15s;
}
.portal-related-tile:hover {
border-color: var(--color-border-hover, #aaa);
}
.portal-related-title {
font-weight: 600;
font-size: 1em;
}
.portal-related-title a {
color: var(--color-text, #202020);
text-decoration: none;
}
.portal-related-sub {
font-size: 0.85em;
color: var(--color-subtle, #999);
margin-top: 1px;
}
/* ── DYK body ────────────────────────────────────────────── */
.portal-dyk-body li,
.portal-dyk-body p {
font-size: 0.85em;
line-height: 1.6;
padding: 6px 0;
border-bottom: 1px solid var(--color-border, #eee);
margin: 0;
}
.portal-dyk-body li:last-child,
.portal-dyk-body p:last-child {
border-bottom: none;
}
/* ── Orphaned articles chips ─────────────────────────────── */
.portal-orphan-chips {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.portal-orphan-chip {
font-size: 0.75em;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid var(--color-border-warning, #e0b44a);
color: var(--color-warning, #7a5c00);
background: var(--color-surface-warning, #fdf7e3);
white-space: nowrap;
}
/* ── Categories cloud ────────────────────────────────────── */
.portal-cat-section {
margin-bottom: 8px;
}
.portal-cat-section:last-of-type {
margin-bottom: 0;
}
.portal-cat-label {
font-size: 0.72em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-subtle, #aaa);
margin-bottom: 4px;
}
.portal-cat-cloud {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.portal-cat-tag {
font-size: 0.75em;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid var(--color-border, #ddd);
color: var(--color-subtle, #555);
background: var(--color-surface-2, #f8f8f6);
white-space: nowrap;
text-decoration: none;
transition: border-color 0.15s;
}
.portal-cat-tag:hover {
border-color: var(--color-border-hover, #aaa);
color: var(--color-text, #202020);
}
/* ── Citizen skin overrides ──────────────────────────────── */
/* Citizen uses --color-surface-0/1/2 rather than generic names */
.skin-citizen .portal-header,
.skin-citizen .portal-widget {
background: var(--color-surface-1);
border-color: var(--color-border);
}
.skin-citizen .portal-series-pill {
background: var(--color-surface-0);
}
.skin-citizen .portal-series-pill--active {
background: var(--color-surface-2);
}
/* ── Dark mode (Citizen auto-dark + prefers-color-scheme) ── */
@media (prefers-color-scheme: dark) {
.portal-header,
.portal-widget {
background: #1e1e1e;
border-color: #333;
}
.portal-series-pill {
background: #242424;
border-color: #444;
color: #ccc;
}
.portal-series-pill--active {
background: #2e2e2e;
border-color: #666;
color: #eee;
}
.portal-stats-bar {
border-top-color: #333;
}
.portal-related-tile {
background: #242424;
border-color: #333;
}
.portal-cat-tag {
background: #242424;
border-color: #444;
color: #aaa;
}
.portal-cat-tag:hover {
color: #eee;
}
.portal-orphan-chip {
background: #2a2200;
border-color: #6a4e00;
color: #d4a800;
}
.portal-calendar-event {
border-bottom-color: #333;
}
.portal-image-placeholder {
background: #2a2a2a;
border-color: #444;
}
}