MediaWiki:Common.css: Difference between revisions

Latest revision as of 23:05, 15 April 2026

/*
 * 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
   Base classes shared across all portal pages.
   New components (hero, char grid, etc.) are in MediaWiki:Portal.css
   ============================================================ */

/* ── Page shell ─────────────────────────────────────────── */
.portal-page {
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Header ─────────────────────────────────────────────── */
.portal-header {
    background: var( --color-surface-2 );
    border: 1px solid var( --border-color-base );
    border-radius: var( --border-radius-large, 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;
    color: var( --color-base );
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.portal-badge {
    font-size: var( --font-size-x-small, 0.75em );
    font-weight: 500;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var( --border-color-base );
    color: var( --color-base--subtle );
    background: var( --color-surface-1 );
    vertical-align: middle;
}
.portal-breadcrumb {
    font-size: var( --font-size-small, 0.8125em );
    color: var( --color-base--subtle );
    margin-top: 3px;
}
.portal-header-links {
    font-size: var( --font-size-small, 0.8125em );
    color: var( --color-base--subtle );
    white-space: nowrap;
    padding-top: 4px;
}

/* ── Stats bar ───────────────────────────────────────────── */
.portal-stats-bar {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    border-top: 1px solid var( --border-color-base );
    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-base );
}
.portal-stat-label {
    font-size: var( --font-size-x-small, 0.72em );
    color: var( --color-base--subtle );
    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: var( --font-size-small, 0.8125em );
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var( --border-color-base );
    color: var( --color-base--subtle );
    background: var( --color-surface-0 );
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.portal-series-pill:hover {
    border-color: var( --border-color-interactive );
    background: var( --color-surface-2 );
    color: var( --color-base );
}
.portal-series-pill--active {
    border-color: var( --border-color-interactive );
    background: var( --color-surface-2 );
    color: var( --color-base );
    font-weight: 600;
    cursor: default;
}
.portal-series-pill--jump {
    border-style: dashed;
}
.portal-series-pill-sep {
    flex: 0 0 8px;
}
.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 );
    border: 1px solid var( --border-color-base );
    border-radius: var( --border-radius-large, 8px );
    overflow: hidden;
}
.portal-widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var( --border-color-base );
    background: var( --color-surface-2 );
    gap: 8px;
    flex-wrap: wrap;
}
.portal-widget-title {
    font-size: var( --font-size-small, 0.875em );
    font-weight: 600;
    color: var( --color-base );
}
.portal-widget-meta {
    font-size: var( --font-size-x-small, 0.75em );
    color: var( --color-base--subtle );
    flex: 1;
    text-align: right;
}
.portal-widget-edit {
    font-size: var( --font-size-x-small, 0.75em );
    color: var( --color-link );
    white-space: nowrap;
}
.portal-widget-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    border-top: 1px solid var( --border-color-base );
    font-size: var( --font-size-x-small, 0.75em );
    color: var( --color-base--subtle );
    gap: 8px;
    flex-wrap: wrap;
}
.portal-widget-body {
    padding: 12px 14px;
}

/* ── Newest article ─────────────────────────────────────── */
.portal-newest-title {
    font-size: 1.05em;
    font-weight: 600;
    margin-bottom: 4px;
}
.portal-newest-meta {
    font-size: var( --font-size-x-small, 0.8em );
    color: var( --color-base--subtle );
    margin-top: 4px;
}

/* ── Colonial Calendar ───────────────────────────────────── */
.portal-calendar-date {
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1.2;
    color: var( --color-base );
}
.portal-calendar-sub {
    font-size: var( --font-size-x-small, 0.75em );
    color: var( --color-base--subtle );
    margin-bottom: 10px;
}
.portal-calendar-events {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.portal-calendar-event {
    font-size: var( --font-size-small, 0.82em );
    color: var( --color-base );
    padding: 6px 0;
    border-bottom: 1px solid var( --border-color-base );
    line-height: 1.5;
}
.portal-calendar-event:last-child {
    border-bottom: none;
}
.portal-calendar-year {
    font-weight: 600;
    color: var( --color-base--subtle );
    margin-right: 2px;
}
.portal-calendar-none {
    font-size: var( --font-size-small, 0.82em );
    color: var( --color-base--subtle );
}

/* ── Related portals grid ────────────────────────────────── */
.portal-related-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.portal-related-tile {
    background: var( --color-surface-2 );
    border: 1px solid var( --border-color-base );
    border-radius: var( --border-radius-medium, 6px );
    padding: 7px 10px;
    font-size: var( --font-size-small, 0.8em );
    transition: border-color 0.15s;
}
.portal-related-tile:hover {
    border-color: var( --border-color-interactive );
}
.portal-related-title {
    font-weight: 600;
    font-size: 1em;
}
.portal-related-title a {
    color: var( --color-base );
    text-decoration: none;
}
.portal-related-sub {
    font-size: 0.85em;
    color: var( --color-base--subtle );
    margin-top: 1px;
}

/* ── DYK body ────────────────────────────────────────────── */
.portal-dyk-body li,
.portal-dyk-body p {
    font-size: var( --font-size-small, 0.85em );
    line-height: 1.6;
    padding: 6px 0;
    border-bottom: 1px solid var( --border-color-base );
    margin: 0;
}
.portal-dyk-body li:last-child,
.portal-dyk-body p:last-child {
    border-bottom: none;
}

/* ── Orphaned articles ───────────────────────────────────── */
.portal-orphan-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.portal-orphan-chip {
    font-size: var( --font-size-x-small, 0.75em );
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var( --color-warning-subtle, #e0b44a );
    color: var( --color-warning, #7a5c00 );
    background: var( --color-surface-2 );
    white-space: nowrap;
}

/* ── Browse by topic bar ─────────────────────────────────── */
.portal-browse-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0;
}
.portal-browse-topic {
    display: inline-block;
}
.portal-browse-topic a {
    display: inline-block;
    font-size: var( --font-size-small, 0.8125rem );
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var( --border-color-base );
    color: var( --color-base ) !important;
    background: var( --color-surface-2 );
    text-decoration: none !important;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.portal-browse-topic a:hover {
    background: var( --color-surface-3 );
    border-color: var( --border-color-interactive );
}

/* ── Podcast teaser ──────────────────────────────────────── */
.portal-podcast-teaser {
    font-size: var( --font-size-small, 0.8125rem );
    color: var( --color-base--subtle );
    line-height: 1.5;
}
.portal-podcast-teaser a {
    display: inline-block;
    margin-top: 6px;
    font-weight: 500;
}

/* ── Subportals ──────────────────────────────────────────── */
.portal-subportals {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
    gap: 12px;
}
.portal-subportals-heading {
    font-size: var( --font-size-small, 0.8125em );
    font-weight: 600;
    color: var( --color-base--subtle );
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    border-bottom: 1px solid var( --border-color-base );
    padding-bottom: 4px;
}
.portal-subportals-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var( --font-size-small, 0.8125em );
}
.portal-subportals-list li::before {
    content: "› ";
    color: var( --color-base--subtle );
}

/* ── Loading spinner (matches bsw-loading / bsw-spinner) ─── */
.portal-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var( --font-size-small, 0.8125em );
    color: var( --color-base--subtle );
    padding: 8px 0;
}
.portal-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var( --border-color-base );
    border-top-color: var( --color-progressive, #3366cc );
    border-radius: 50%;
    animation: portal-spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes portal-spin {
    to { transform: rotate( 360deg ); }
}