Jump to content

MediaWiki:Common.css: Difference between revisions

From P1NK AN1MAL C00K13 G1RAFF3 PLUSH13
← Older edit
Buildababe (talk | contribs)
Bureaucrats, Interface administrators, Administrators
169 edits
No edit summary
No edit summary
 
Line 481: Line 481:
   border: none !important;
   border: none !important;
   background: none !important;
   background: none !important;
}
.portable-infobox .pi-data-value {
  text-align: center;
}
}

Latest revision as of 17:33, 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;
}


/* ── Portrait border rings ─────────────────────────────────────────── */
.portrait-ring {
  padding: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 4px 20px #f7339a33;
}
.portrait-ring.shape-square { border-radius: 16px; }
.portrait-ring img {
  width: 148px; height: 148px;
  object-fit: cover; object-position: top center;
  border-radius: 50%; display: block;
}
.portrait-ring.shape-square img { border-radius: 11px; }

.pb-pink       { background: linear-gradient(135deg,#f7339a 0%,#fff 35%,#ff9dd1 55%,#fff 75%,#f7339a 100%); }
.pb-red        { background: linear-gradient(135deg,#5a0000 0%,#ff4444 22%,#cc0000 44%,#ff8888 66%,#8b0000 88%,#ff4444 100%); }
.pb-orange     { background: linear-gradient(135deg,#5a1e00 0%,#ff8c00 22%,#e05a00 44%,#ffb347 66%,#7a3000 88%,#ff8c00 100%); }
.pb-gold       { background: linear-gradient(135deg,#5a3e00 0%,#ffd700 18%,#fff0a0 36%,#c8960c 54%,#ffe566 72%,#8a6000 90%,#ffd700 100%); }
.pb-yellow     { background: linear-gradient(135deg,#666600 0%,#ffff44 25%,#eeee00 50%,#ffffaa 75%,#888800 100%); }
.pb-green      { background: linear-gradient(135deg,#002200 0%,#22cc44 22%,#00882a 44%,#77ee99 66%,#004410 88%,#22cc44 100%); }
.pb-cyan       { background: linear-gradient(135deg,#002233 0%,#00ccdd 22%,#007799 44%,#88eeff 66%,#003344 88%,#00ccdd 100%); }
.pb-blue       { background: linear-gradient(135deg,#000066 0%,#4488ff 22%,#1133cc 44%,#99bbff 66%,#000088 88%,#4488ff 100%); }
.pb-purple     { background: linear-gradient(135deg,#1a0033 0%,#9933ff 22%,#6600bb 44%,#cc99ff 66%,#2a0055 88%,#9933ff 100%); }
.pb-pink-metal { background: linear-gradient(135deg,#550033 0%,#ff44aa 22%,#cc0066 44%,#ff99cc 66%,#7a0044 88%,#ff44aa 100%); }
.pb-brown      { background: linear-gradient(135deg,#1a0800 0%,#8b5e3c 22%,#5a2e10 44%,#c4956a 66%,#2a1000 88%,#8b5e3c 100%); }
.pb-bronze     { background: linear-gradient(135deg,#2a1200 0%,#cd7f32 18%,#8b4513 36%,#eaaa6a 54%,#cd7f32 72%,#3a1800 90%,#cd7f32 100%); }
.pb-silver     { background: linear-gradient(135deg,#444 0%,#ddd 18%,#999 36%,#fff 54%,#bbb 72%,#eee 88%,#555 100%); }
.pb-gray       { background: linear-gradient(135deg,#111 0%,#777 25%,#444 50%,#aaa 75%,#222 100%); }
.pb-black      { background: linear-gradient(135deg,#000 0%,#333 22%,#000 44%,#555 66%,#111 88%,#444 100%); }
.pb-white      { background: linear-gradient(135deg,#bbb 0%,#fff 25%,#ddd 50%,#fff 75%,#ccc 100%); }
.pb-rainbow    { background: conic-gradient(#ff0000,#ff8800,#ffff00,#00cc44,#0088ff,#8800ff,#ff00cc,#ff0000);
                 animation: pb-rainbow-spin 2.5s linear infinite; }

@keyframes pb-rainbow-spin {
  0%   { filter: hue-rotate(0deg)   brightness(1.1); }
  50%  { filter: hue-rotate(180deg) brightness(1.2); }
  100% { filter: hue-rotate(360deg) brightness(1.1); }
}

@keyframes pb-rainbow-spin {
  0%   { filter: hue-rotate(0deg)   brightness(1.05); }
  100% { filter: hue-rotate(360deg) brightness(1.05); }
}


@keyframes pb-rainbow-spin {
  0%   { filter: hue-rotate(0deg)   brightness(1.05) saturate(1.2); }
  100% { filter: hue-rotate(360deg) brightness(1.05) saturate(1.2); }
}

.pb-rainbow-ring {
  background: conic-gradient(#ff0000,#ff8800,#ffff00,#00cc44,#0088ff,#8800ff,#ff00cc,#ff0000) !important;
  animation: pb-rainbow-spin 3s linear infinite !important;
}

@keyframes pb-rainbow-spin {
  0%   { filter: hue-rotate(0deg)   brightness(1.05) saturate(1.3); }
  100% { filter: hue-rotate(360deg) brightness(1.05) saturate(1.3); }
}

.pb-rainbow-ring {
  background: conic-gradient(#ff0000,#ff8800,#ffff00,#00cc44,#0088ff,#8800ff,#ff00cc,#ff0000) !important;
  animation: pb-rainbow-spin 3s linear infinite !important;
}

/* Force Portrait template image cropping */
.portrait-ring-wrap {
  overflow: hidden;
  border-radius: 50%;
  width: 148px;
  height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portrait-ring-wrap.shape-square {
  border-radius: 11px;
}

.portrait-ring-wrap figure,
.portrait-ring-wrap figure a,
.portrait-ring-wrap figure img,
.portrait-ring-wrap .mw-file-element,
.portrait-ring-wrap a,
.portrait-ring-wrap img {
  width: 148px !important;
  height: 148px !important;
  object-fit: cover !important;
  object-position: top center !important;
  border-radius: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.portrait-ring-wrap figure {
  border: none !important;
  background: none !important;
}

.portable-infobox .pi-data-value {
  text-align: center;
}
Retrieved from "https://animalcookie.trumpetz.com/index.php?title=MediaWiki:Common.css&oldid=402"