Jump to content

MediaWiki:Common.css

From C1RCUS

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.
/* ============================================================
   CIRCUS WIKI — MediaWiki:Common.css
   Paste this entire file into Special:EditPage/MediaWiki:Common.css
   ============================================================ */

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

/* --- Global Reset --- */
body,
#content,
#mw-content-text #mw-page-container {
  background-color: #fdf5f0 !important;
  font-family: 'Nunito', sans-serif !important;
  color: #5a3a4a !important;
}

/* Hide default MediaWiki chrome for a cleaner look */
#mw-page-base,
#mw-head-base {
  background: transparent !important;
}

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

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

/* Decorative floating dots */
.circus-hero::before {
  content: '';
  position: absolute;
  top: 60px;
  left: 60px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f9c74f;
}

.circus-hero::after {
  content: '';
  position: absolute;
  top: 120px;
  left: 100px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #90dbf4;
}

/* Book icon circle */
.circus-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f48fb1, #e91e8c);
  box-shadow: 0 6px 24px rgba(233, 30, 140, 0.25);
  margin-bottom: 24px;
  font-size: 58px;
  line-height: 1;
}

/* Inner ring on logo */
.circus-logo-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #f8bbd0;
  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, #f48fb1, #e91e8c);
  font-size: 52px;
  line-height: 1;
}

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

/* Subtitle */
.circus-subtitle {
  font-size: 1.35em;
  color: #9e6b7a;
  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 #f8bbd0;
  border-radius: 20px;
  background: #fff8fb;
  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(233, 30, 140, 0.12);
  text-decoration: none !important;
}

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

/* SVG-style icon using CSS (pen icon) */
.circus-card-icon-edit::before {
  content: '';
  display: inline-block;
  width: 36px;
  height: 36px;
  background-color: #e91e8c;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

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

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

/* ============================================================
   EXTRA DECORATIVE DOTS (add via spans in wikitext)
   ============================================================ */
.dot-green {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #90dbf4;
  right: 120px;
  top: 180px;
}

.dot-red {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f4845f;
  right: 200px;
  top: 300px;
}

/* ============================================================
   ARTICLE CONTENT STYLES (for inner wiki pages)
   ============================================================ */
#mw-content-text h1,
#mw-content-text h2,
#mw-content-text h3 {
  font-family: 'Nunito', sans-serif !important;
  color: #e91e8c !important;
}

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

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

.infobox th {
  background: #f8bbd0 !important;
  color: #9e3a6a !important;
  font-weight: 700 !important;
}

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

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

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

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

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

/* ============================================================
   FULL PAGE BACKGROUND — Circus Wiki theme
   ============================================================ */

/* The very outermost page background */
html, body {
  background-color: #fdf5f0 !important;
}

/* The content area wrapper */
#content,
#mw-content-container,
.mw-body,
.mw-body-content {
  background-color: #fdf5f0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Vector 2022 specific wrappers */
.mw-page-container,
.mw-page-container-inner,
#mw-content-block {
  background-color: #fdf5f0 !important;
}

/* The header/top bar */
#mw-head,
.mw-header,
#vector-page-toolbar {
  background-color: #fdf5f0 !important;
  border-bottom: 2px solid #f8bbd0 !important;
  box-shadow: none !important;
}

/* Search bar to match */
#searchInput,
.vector-search-box input {
  background-color: #fff8fb !important;
  border: 2px solid #f8bbd0 !important;
  border-radius: 20px !important;
  font-family: 'Nunito', sans-serif !important;
  color: #5a3a4a !important;
}

/* Footer */
#footer,
.mw-footer {
  background-color: #fdf5f0 !important;
  border-top: 2px solid #f8bbd0 !important;
  color: #9e6b7a !important;
}

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

#firstHeading,
.mw-first-heading {
  background-image: repeating-linear-gradient(
    90deg,
    #f06292 0px,
    #f06292 44px,
    #ffffff 44px,
    #ffffff 88px
  ) !important;
  padding: 16px 20px !important;
  border-bottom: none !important;
  color: #e91e8c !important;
  font-family: 'Nunito', sans-serif !important;
  font-weight: 900 !important;
  text-shadow: 0 0 8px #fff, 0 0 8px #fff !important; /* white glow so text is readable */
}
Retrieved from "https://komodo.trumpetz.com/index.php?title=MediaWiki:Common.css&oldid=402"