MediaWiki:Vector.css

From GPhys Developer Community
Jump to navigation Jump to search

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* ── GPhys Developer Community – Vector Skin Theme ── */
/* Page background: White body, blue header */
html, body, #mw-page-base {
  background-color: #ffffff !important;
}
#mw-head-base {
  background-color: #5271ff !important;
}

/* Header bar - Spans full width */
#mw-head {
  background-color: #5271ff !important;
  border-radius: 0 !important; /* Removed rounding */
  left: 0 !important;
  right: 0 !important;
}

/* Fix Logo Size & Position inside header */
#p-logo {
  position: absolute !important;
  top: 5px !important;
  left: 15px !important;
  width: 65px !important;
  height: 65px !important;
  z-index: 1000 !important;
}
.mw-wiki-logo {
  width: 100% !important;
  height: 100% !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Push left navigation right to make room for the logo */
#left-navigation {
  left: 90px !important;
}

/* Push sidebar down so it doesn't overlap the new full-width header */
#mw-panel {
  padding-top: 80px !important;
  background-color: transparent !important; /* Make panel background transparent to see the fake header */
}

/* FAKE HEADER for LOGO */
#mw-panel::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important; /* It can be full width, as content will cover it */
  height: 75px !important; /* Match the height of the real header */
  background-color: #5271ff !important; /* Match the header color */
  z-index: -1 !important; /* Place it behind the logo and sidebar content */
}


#mw-panel .portal {
  background-color: #ffffff !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
}
#mw-panel .portal h3 {
  color: #333333 !important;
  font-weight: normal !important;
}
#mw-panel .portal a,
#mw-panel div.body a {
  color: #5271ff !important;
  font-weight: normal !important;
}
#mw-panel .portal a:hover {
  color: #3a5ce8 !important;
}

/* Personal links (top right) */
#p-personal li,
#p-personal li a {
  color: #ffffff !important;
  font-weight: normal !important;
}

/* Navigation tabs */
#left-navigation .mw-list-item,
#right-navigation .mw-list-item,
#p-namespaces li,
#p-views li,
#p-cactions li,
.vector-menu-tabs li {
  background-color: transparent !important;
  background-image: none !important;
}

#left-navigation .mw-list-item a,
#right-navigation .mw-list-item a,
#p-namespaces li a,
#p-views li a,
#p-cactions li a,
.vector-menu-tabs li a,
.vector-menu-tabs li span {
  background-color: transparent !important;
  background-image: none !important;
  color: #ffffff !important;
  font-weight: normal !important;
}

#left-navigation .mw-list-item.selected a,
#p-namespaces li.selected a,
#p-views li.selected a,
#p-views li a:hover,
#p-cactions li a:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border-radius: 8px 8px 0 0 !important;
}

/* Content area */
#content, .mw-body {
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #cccccc !important;
  border-radius: 12px !important;
}
#content a, .mw-body a {
  color: #5271ff !important;
  font-weight: normal !important;
}
#content a:hover, .mw-body a:hover {
  color: #3a5ce8 !important;
}

/* Headings & text */
#firstHeading, .mw-first-heading {
  color: #000000 !important;
  font-weight: normal !important;
  border-bottom: 1px solid #cccccc !important;
}
#content p, #content li, #content td, #content th,
#content h1, #content h2, #content h3,
#content h4, #content h5, #content h6 {
  color: #333333 !important;
  font-weight: normal !important;
}

/* Notices / info boxes */
.mw-message-box,
.warningbox, .errorbox, .successbox {
  border-radius: 10px !important;
  border: 1px solid #5271ff !important;
  background-color: #f0f4ff !important;
  color: #333333 !important;
  font-weight: normal !important;
}

/* Search box */
#p-search input#searchInput {
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #cccccc !important;
  border-radius: 8px !important;
  font-weight: normal !important;
}
#p-search input#searchInput::placeholder {
  color: #888888 !important;
}

/* Footer */
#footer {
  background-color: #ffffff !important;
  color: #333333 !important;
  border-top: 1px solid #cccccc !important;
  border-radius: 12px 12px 0 0 !important;
}
#footer a, #footer li {
  color: #5271ff !important;
  font-weight: normal !important;
}
#footer a:hover {
  color: #3a5ce8 !important;
}

/* ── FIXES ── */
#p-namespaces ul,
#p-views ul,
#p-cactions ul,
#left-navigation,
#right-navigation {
  background: transparent !important;
  background-image: none !important;
}

/* Fix code / pre blocks */
code, tt {
  background-color: #f8f9fa !important;
  color: #333333 !important;
  border: 1px solid #cccccc !important;
  border-radius: 5px !important;
  padding: 1px 4px !important;
  font-weight: normal !important;
}
pre, .mw-code {
  background-color: #f8f9fa !important;
  color: #333333 !important;
  border: 1px solid #cccccc !important;
  border-radius: 8px !important;
  padding: 10px !important;
  font-weight: normal !important;
}

/* Fix wikitables */
table.wikitable,
table.wikitable th,
table.wikitable td {
  border: 1px solid #cccccc !important;
  color: #333333 !important;
}
table.wikitable {
  background-color: #ffffff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
table.wikitable th {
  background-color: #f0f4ff !important;
}
table.wikitable td {
  background-color: #ffffff !important;
}

/* Fix ambox / infobox / maintenance boxes */
.ambox, .tmbox, .ombox, .cmbox, .fmbox,
.infobox, .mbox-small, .navbox, .navbox-subgroup {
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #cccccc !important;
  border-radius: 10px !important;
}
.ambox td, .infobox td, .infobox th,
.navbox td, .navbox th {
  color: #333333 !important;
  border-color: #cccccc !important;
}