MediaWiki:Common.css: Difference between revisions

Revision as of 00:39, 11 April 2026

/* ============================================================
   PORTABLE INFOBOX — Blue Circus Wiki Theme
   Paste into Special:EditPage/MediaWiki:Common.css
   ============================================================ */

.portable-infobox .pi-secondary-background {
	background: linear-gradient(to bottom, #4fc3f7, #01579b);
	border: 4px solid #01407a;
}

.pi-border-color {
	border-color: #01407a;
	border-width: 4px;
	border-radius: 20px;
}

.portable-infobox .pi-image {
	background: repeating-linear-gradient(-45deg, rgba(1, 64, 122, 0.15) 6%, rgba(1, 64, 122, 0.15) 10%, transparent 10%, transparent 15%);
	background-color: rgba(79, 195, 247, 0.2);
}

.portable-infobox .pi-title {
	border-radius: 15px 15px 0 0;
	border-width: 0 0 3px 0;
	border-style: solid;
	border-color: #01407a;
	background: linear-gradient(to bottom, #29b6f6, #0277bd);
	color: white;
	font-size: 25px !important;
	font-family: Nunito, sans-serif !important;
	font-weight: 900 !important;
	text-shadow: 2px 0 0 #01407a, -2px 0 0 #01407a, 0 2px 0 #01407a, 0 -2px 0 #01407a,
	             2px 2px 0 #01407a, -2px -2px 0 #01407a, -2px 2px 0 #01407a, 2px -2px 0 #01407a;
}

.portable-infobox .pi-header {
	border-width: 3px 0 3px 0 !important;
	border-style: solid !important;
	border-color: #01407a !important;
	background: linear-gradient(to bottom, #81d4fa, #0288d1);
	color: white;
	font-size: 16px !important;
	font-family: Nunito, sans-serif !important;
	font-weight: 700 !important;
	text-shadow: 1px 0 0 #01407a, -1px 0 0 #01407a, 0 1px 0 #01407a, 0 -1px 0 #01407a,
	             1px 1px 0 #01407a, -1px -1px 0 #01407a, -1px 1px 0 #01407a, 1px -1px 0 #01407a;
}

.portable-infobox .pi-data-label {
	color: #01579b !important;
	font-family: Nunito, sans-serif !important;
	font-weight: 700 !important;
}

.portable-infobox .pi-data-value {
	color: #0d2b4a !important;
	font-family: Nunito, sans-serif !important;
}

.portable-infobox {
	background-color: #f0f8ff !important;
}

#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
	background-color: transparent;
	color: #0277bd;
	padding: 0.3em;
	border: none;
	font-family: Nunito, sans-serif;
	font-weight: 700;
}



/* ============================================================
   SKY BLUE WIKI THEME — MediaWiki:Common.css
   Drop-in replacement for the Circus Wiki pink theme.
   Paste into Special:EditPage/MediaWiki:Common.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');

/* --- Global --- */
body,
#content,
#mw-content-text {
  background-color: #f0f8ff !important;
  font-family: 'Nunito', sans-serif !important;
  color: #1a3a5a !important;
}

/* ============================================================
   STRIPE BANNER
   ============================================================ */
.circus-banner {
  width: 100%;
  height: 80px;
  background-image: repeating-linear-gradient(
    90deg,
    #29b6f6 0px,
    #29b6f6 44px,
    #ffffff 44px,
    #ffffff 88px
  );
}

/* Page-wide stripe banner via pseudo-element */
body::before {
  content: '';
  display: block;
  width: 100%;
  height: 80px;
  background-image: repeating-linear-gradient(
    90deg,
    #29b6f6 0px,
    #29b6f6 44px,
    #ffffff 44px,
    #ffffff 88px
  );
}

/* Page title bar stripes */
#firstHeading,
.mw-first-heading {
  background-image: repeating-linear-gradient(
    90deg,
    #29b6f6 0px,
    #29b6f6 44px,
    #ffffff 44px,
    #ffffff 88px
  ) !important;
  padding: 16px 20px !important;
  border-bottom: none !important;
  color: #0277bd !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
  text-shadow: 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff !important;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.circus-hero {
  text-align: center;
  padding: 40px 20px 20px;
  position: relative;
}

.circus-logo-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #b3e5fc;
  padding: 8px;
  margin-bottom: 24px;
}

.circus-logo-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(145deg, #4fc3f7, #0288d1);
  font-size: 52px;
  line-height: 1;
}

.circus-title {
  font-family: 'Nunito', sans-serif !important;
  font-size: 3.6em !important;
  font-weight: 900 !important;
  color: #0288d1 !important;
  margin: 0 0 8px !important;
  line-height: 1.1 !important;
  border: none !important;
}

.circus-subtitle {
  font-size: 1.35em;
  color: #4a7a9e;
  font-weight: 400;
  margin: 0 0 40px;
}

/* ============================================================
   FEATURE CARDS
   ============================================================ */
.circus-cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 10px 20px 50px;
  max-width: 900px;
  margin: 0 auto;
}

.circus-card {
  flex: 1;
  min-width: 200px;
  max-width: 260px;
  border: 2px solid #b3e5fc;
  border-radius: 20px;
  background: #f0f8ff;
  padding: 32px 20px 28px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none !important;
  color: inherit !important;
  display: block;
}

.circus-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(2, 136, 209, 0.15);
  text-decoration: none !important;
}

.circus-card-icon {
  font-size: 38px;
  margin-bottom: 14px;
  color: #0288d1;
  display: block;
}

.circus-card-title {
  font-size: 1.15em;
  font-weight: 700;
  color: #1a3a5a;
  margin: 0 0 8px;
}

.circus-card-desc {
  font-size: 0.95em;
  color: #4a7a9e;
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
#mw-panel,
#mw-navigation {
  background-color: #f0f8ff !important;
  border-right: 2px solid #b3e5fc !important;
  box-shadow: none !important;
}

#mw-panel .portal h3 {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
  color: #0288d1 !important;
  border-bottom: 2px solid #b3e5fc !important;
}

#mw-panel .portal li a {
  font-family: 'Nunito', sans-serif !important;
  color: #4a7a9e !important;
  font-weight: 600 !important;
}

#mw-panel .portal li a:hover {
  color: #0288d1 !important;
  text-decoration: none !important;
}

/* Vector 2022 sidebar */
.vector-menu-portal,
.mw-sidebar {
  background-color: #f0f8ff !important;
}

.vector-menu-portal .vector-menu-heading {
  color: #0288d1 !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
}

.vector-menu-portal .vector-menu-content a {
  color: #4a7a9e !important;
  font-family: 'Nunito', sans-serif !important;
}

.vector-menu-portal .vector-menu-content a:hover {
  color: #0288d1 !important;
}

/* ============================================================
   FULL PAGE BACKGROUND
   ============================================================ */
html, body {
  background-color: #f0f8ff !important;
}

#content,
#mw-content-container,
.mw-body,
.mw-body-content,
.mw-page-container,
.mw-page-container-inner {
  background-color: #f0f8ff !important;
  border: none !important;
  box-shadow: none !important;
}

#mw-head,
.mw-header,
#vector-page-toolbar {
  background-color: #f0f8ff !important;
  border-bottom: 2px solid #b3e5fc !important;
  box-shadow: none !important;
}

/* Search bar */
#searchInput,
.vector-search-box input {
  background-color: #e1f5fe !important;
  border: 2px solid #b3e5fc !important;
  border-radius: 20px !important;
  font-family: 'Nunito', sans-serif !important;
  color: #1a3a5a !important;
}

/* Footer */
#footer,
.mw-footer {
  background-color: #f0f8ff !important;
  border-top: 2px solid #b3e5fc !important;
  color: #4a7a9e !important;
}

#footer a,
.mw-footer a {
  color: #0288d1 !important;
}

/* Infobox */
.infobox {
  border: 2px solid #b3e5fc !important;
  border-radius: 12px !important;
  background: #e1f5fe !important;
  font-family: 'Nunito', sans-serif !important;
}

.infobox th {
  background: #b3e5fc !important;
  color: #01579b !important;
  font-weight: 700 !important;
}

/* Category links */
#catlinks {
  border: 2px solid #b3e5fc !important;
  border-radius: 10px !important;
  background: #e1f5fe !important;
  font-family: 'Nunito', sans-serif !important;
}

/* Article headings */
#mw-content-text h1,
#mw-content-text h2,
#mw-content-text h3 {
  font-family: 'Nunito', sans-serif !important;
  color: #0288d1 !important;
}

#mw-content-text h2 {
  border-bottom: 2px solid #b3e5fc !important;
}