MediaWiki:Vector.css: Difference between revisions

From GPhys Developer Community
Jump to navigation Jump to search
No edit summary
No edit summary
 
Line 1: Line 1:
/* ── GPhys Developer Community – Vector Skin Theme ── */
/* ── GPhys Developer Community – Vector Skin Theme ── */
/* Page background */
/* Page background: White body, blue header */
html, body,
html, body, #mw-page-base {
#mw-page-base, #mw-head-base {
   background-color: #ffffff !important;
   background-color:  
#5271ff !important;
}
}
/* Header bar */
#mw-head-base {
  background-color: #5271ff !important;
}
 
/* Header bar - Spans full width */
#mw-head {
#mw-head {
   background-color:  
   background-color: #5271ff !important;
#5271ff !important;
   border-radius: 0 !important; /* Removed rounding */
   border-radius: 0 0 12px 12px !important;
  left: 0 !important;
  right: 0 !important;
}
}
/* Personal links (top right) */
 
#p-personal li,
/* Fix Logo Size & Position inside header */
#p-personal li a {
#p-logo {
   color:  
  position: absolute !important;
#ffffff !important;
  top: 5px !important;
   font-weight: bold !important;
  left: 15px !important;
   width: 65px !important;
  height: 65px !important;
   z-index: 1000 !important;
}
}
/* Navigation tabs */
.mw-wiki-logo {
#p-views li a,
   width: 100% !important;
#p-cactions li a,
  height: 100% !important;
#left-navigation a,
   background-size: contain !important;
#right-navigation a {
   background-position: center !important;
   color:  
   background-repeat: no-repeat !important;
#ffffff !important;
   font-weight: bold !important;
   background-color:  
#5271ff !important;
   border-radius: 8px 8px 0 0 !important;
}
}
#p-views li.selected a,
 
#p-views li a:hover,
/* Push left navigation right to make room for the logo */
#p-cactions li a:hover {
#left-navigation {
   background-color:
   left: 90px !important;
#5271ff !important;
  color:  
#c0c8ff !important;
}
}
/* Sidebar */
 
/* Push sidebar down so it doesn't overlap the new full-width header */
#mw-panel {
#mw-panel {
   background-color:  
  padding-top: 80px !important;
#5271ff !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 {
#mw-panel .portal {
   background-color:  
   background-color: #ffffff !important;
#5271ff !important;
   border-radius: 10px !important;
   border-radius: 10px !important;
   margin-bottom: 8px !important;
   margin-bottom: 8px !important;
}
}
#mw-panel .portal h3 {
#mw-panel .portal h3 {
   color:  
   color: #333333 !important;
#ffffff !important;
   font-weight: normal !important;
   font-weight: bold !important;
}
}
#mw-panel .portal a,
#mw-panel .portal a,
#mw-panel div.body a {
#mw-panel div.body a {
   color:  
   color: #5271ff !important;
#c0c8ff !important;
   font-weight: normal !important;
   font-weight: bold !important;
}
}
#mw-panel .portal a:hover {
#mw-panel .portal a:hover {
   color:  
   color: #3a5ce8 !important;
#ffffff !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 area */
#content, .mw-body {
#content, .mw-body {
   background-color:  
   background-color: #ffffff !important;
#5271ff !important;
   color: #333333 !important;
   color:  
   border: 1px solid #cccccc !important;
#ffffff !important;
   border: 2px solid  
#ffffff !important;
   border-radius: 12px !important;
   border-radius: 12px !important;
}
}
#content a, .mw-body a {
#content a, .mw-body a {
   color:  
   color: #5271ff !important;
#c0c8ff !important;
   font-weight: normal !important;
   font-weight: bold !important;
}
}
#content a:hover, .mw-body a:hover {
#content a:hover, .mw-body a:hover {
   color:  
   color: #3a5ce8 !important;
#ffffff !important;
}
}
/* Headings & text */
/* Headings & text */
#firstHeading, .mw-first-heading {
#firstHeading, .mw-first-heading {
   color:  
   color: #000000 !important;
#ffffff !important;
   font-weight: normal !important;
   font-weight: bold !important;
   border-bottom: 1px solid #cccccc !important;
   border-bottom: 2px solid  
#ffffff !important;
}
}
#content p, #content li, #content td, #content th,
#content p, #content li, #content td, #content th,
#content h1, #content h2, #content h3,
#content h1, #content h2, #content h3,
#content h4, #content h5, #content h6 {
#content h4, #content h5, #content h6 {
   color:  
   color: #333333 !important;
#ffffff !important;
   font-weight: normal !important;
   font-weight: bold !important;
}
}
/* Notices / info boxes */
/* Notices / info boxes */
.mw-message-box,
.mw-message-box,
.warningbox, .errorbox, .successbox {
.warningbox, .errorbox, .successbox {
   border-radius: 10px !important;
   border-radius: 10px !important;
   border: 2px solid  
   border: 1px solid #5271ff !important;
#ffffff !important;
   background-color: #f0f4ff !important;
   background-color:  
   color: #333333 !important;
#5271ff !important;
   font-weight: normal !important;
   color:  
#ffffff !important;
   font-weight: bold !important;
}
}
/* Search box */
/* Search box */
#p-search input#searchInput {
#p-search input#searchInput {
   background-color:  
   background-color: #ffffff !important;
#5271ff !important;
   color: #333333 !important;
   color:  
   border: 1px solid #cccccc !important;
#ffffff !important;
   border: 2px solid  
#ffffff !important;
   border-radius: 8px !important;
   border-radius: 8px !important;
   font-weight: bold !important;
   font-weight: normal !important;
}
}
#p-search input#searchInput::placeholder {
#p-search input#searchInput::placeholder {
   color:  
   color: #888888 !important;
#c0c8ff !important;
}
}
/* Footer */
/* Footer */
#footer {
#footer {
   background-color:  
   background-color: #ffffff !important;
#5271ff !important;
   color: #333333 !important;
   color:  
   border-top: 1px solid #cccccc !important;
#ffffff !important;
   border-top: 2px solid  
#ffffff !important;
   border-radius: 12px 12px 0 0 !important;
   border-radius: 12px 12px 0 0 !important;
}
}
#footer a, #footer li {
#footer a, #footer li {
   color:  
   color: #5271ff !important;
#c0c8ff !important;
   font-weight: normal !important;
   font-weight: bold !important;
}
}
#footer a:hover {
#footer a:hover {
   color:  
   color: #3a5ce8 !important;
#ffffff !important;
}
}


/* ── FIXES ── */
/* ── FIXES ── */
 
#p-namespaces ul,
/* Fix white bleed behind rounded nav tabs */
#p-views li,
#p-cactions li {
  background-color: #5271ff !important;
}
#p-views ul,
#p-views ul,
#p-cactions ul,
#p-cactions ul,
#left-navigation,
#left-navigation,
#right-navigation,
#right-navigation {
#mw-head-base {
   background: transparent !important;
   background: transparent !important;
  background-image: none !important;
}
}


/* Fix code / pre blocks */
/* Fix code / pre blocks */
code, tt {
code, tt {
   background-color: #3a5ce8 !important;
   background-color: #f8f9fa !important;
   color: #c0c8ff !important;
   color: #333333 !important;
   border: 1px solid #ffffff !important;
   border: 1px solid #cccccc !important;
   border-radius: 5px !important;
   border-radius: 5px !important;
   padding: 1px 4px !important;
   padding: 1px 4px !important;
Line 171: Line 201:
}
}
pre, .mw-code {
pre, .mw-code {
   background-color: #3a5ce8 !important;
   background-color: #f8f9fa !important;
   color: #c0c8ff !important;
   color: #333333 !important;
   border: 2px solid #ffffff !important;
   border: 1px solid #cccccc !important;
   border-radius: 8px !important;
   border-radius: 8px !important;
   padding: 10px !important;
   padding: 10px !important;
Line 183: Line 213:
table.wikitable th,
table.wikitable th,
table.wikitable td {
table.wikitable td {
   border: 1px solid #ffffff !important;
   border: 1px solid #cccccc !important;
   color: #ffffff !important;
   color: #333333 !important;
}
}
table.wikitable {
table.wikitable {
   background-color: #5271ff !important;
   background-color: #ffffff !important;
   border-radius: 10px !important;
   border-radius: 10px !important;
   overflow: hidden !important;
   overflow: hidden !important;
}
}
table.wikitable th {
table.wikitable th {
   background-color: #3a5ce8 !important;
   background-color: #f0f4ff !important;
}
}
table.wikitable td {
table.wikitable td {
   background-color: #5271ff !important;
   background-color: #ffffff !important;
}
}


Line 201: Line 231:
.ambox, .tmbox, .ombox, .cmbox, .fmbox,
.ambox, .tmbox, .ombox, .cmbox, .fmbox,
.infobox, .mbox-small, .navbox, .navbox-subgroup {
.infobox, .mbox-small, .navbox, .navbox-subgroup {
   background-color: #5271ff !important;
   background-color: #ffffff !important;
   color: #ffffff !important;
   color: #333333 !important;
   border: 2px solid #ffffff !important;
   border: 1px solid #cccccc !important;
   border-radius: 10px !important;
   border-radius: 10px !important;
}
}
.ambox td, .infobox td, .infobox th,
.ambox td, .infobox td, .infobox th,
.navbox td, .navbox th {
.navbox td, .navbox th {
   color: #ffffff !important;
   color: #333333 !important;
   border-color: #c0c8ff !important;
   border-color: #cccccc !important;
}
}

Latest revision as of 13:55, 1 May 2026

/* ── 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;
}