MediaWiki:Vector.css: Difference between revisions
Jump to navigation
Jump to search
Rhosyn Celyn (talk | contribs) Created page with "→── GPhys Developer Community – Vector Skin Theme ──: →Page background: html, body, #mw-page-base, #mw-head-base { background-color: #5271ff !important; } →Header bar: #mw-head { background-color: #5271ff !important; border-radius: 0 0 12px 12px !important; } →Personal links (top right): #p-personal li, #p-personal li a { color: #ffffff !important; font-weight: bold !important; } →Nav tabs – text only: div.vectorTabs li { b..." |
Rhosyn Celyn (talk | contribs) No edit summary |
||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* ── GPhys Developer Community – Vector Skin Theme ── */ | /* ── GPhys Developer Community – Vector Skin Theme ── */ | ||
/* Page background: White body, blue header */ | |||
/* Page background */ | html, body, #mw-page-base { | ||
html, body, | background-color: #ffffff !important; | ||
#mw-page-base | } | ||
#mw-head-base { | |||
background-color: #5271ff !important; | background-color: #5271ff !important; | ||
} | } | ||
/* Header bar */ | /* Header bar - Spans full width */ | ||
#mw-head { | #mw-head { | ||
background-color: #5271ff !important; | background-color: #5271ff !important; | ||
border-radius: 0 0 | border-radius: 0 !important; /* Removed rounding */ | ||
left: 0 !important; | |||
right: 0 !important; | |||
} | } | ||
/* | /* Fix Logo Size & Position inside header */ | ||
#p- | #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 */ | |||
background: | |||
} | } | ||
# | /* FAKE HEADER for LOGO */ | ||
#mw-panel::before { | |||
background: #5271ff !important; | 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; | ||
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; | ||
font-weight: | font-weight: normal !important; | ||
} | } | ||
#mw-panel .portal a, | #mw-panel .portal a, | ||
#mw-panel div.body a { | #mw-panel div.body a { | ||
color: # | color: #5271ff !important; | ||
font-weight: | font-weight: normal !important; | ||
} | } | ||
#mw-panel .portal a:hover { | #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; | 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; | ||
color: # | color: #333333 !important; | ||
border: | border: 1px solid #cccccc !important; | ||
border-radius: 12px !important; | border-radius: 12px !important; | ||
} | } | ||
#content a, .mw-body a { | #content a, .mw-body a { | ||
color: # | color: #5271ff !important; | ||
font-weight: | font-weight: normal !important; | ||
} | } | ||
#content a:hover, .mw-body a:hover { | #content a:hover, .mw-body a:hover { | ||
color: # | color: #3a5ce8 !important; | ||
} | } | ||
/* Headings & text */ | /* Headings & text */ | ||
#firstHeading, .mw-first-heading { | #firstHeading, .mw-first-heading { | ||
color: # | color: #000000 !important; | ||
font-weight: | font-weight: normal !important; | ||
border-bottom: | border-bottom: 1px solid #cccccc !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; | ||
font-weight: | font-weight: normal !important; | ||
} | } | ||
| Line 117: | Line 148: | ||
.warningbox, .errorbox, .successbox { | .warningbox, .errorbox, .successbox { | ||
border-radius: 10px !important; | border-radius: 10px !important; | ||
border: | border: 1px solid #5271ff !important; | ||
background-color: # | background-color: #f0f4ff !important; | ||
color: # | color: #333333 !important; | ||
font-weight: | font-weight: normal !important; | ||
} | } | ||
/* Search box */ | /* Search box */ | ||
#p-search input#searchInput { | #p-search input#searchInput { | ||
background-color: # | background-color: #ffffff !important; | ||
color: # | color: #333333 !important; | ||
border: | border: 1px solid #cccccc !important; | ||
border-radius: 8px !important; | border-radius: 8px !important; | ||
font-weight: | font-weight: normal !important; | ||
} | } | ||
#p-search input#searchInput::placeholder { | #p-search input#searchInput::placeholder { | ||
color: # | color: #888888 !important; | ||
} | } | ||
/* Footer */ | /* Footer */ | ||
#footer { | #footer { | ||
background-color: # | background-color: #ffffff !important; | ||
color: # | color: #333333 !important; | ||
border-top: | border-top: 1px solid #cccccc !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; | ||
font-weight: | font-weight: normal !important; | ||
} | } | ||
#footer a:hover { | #footer a:hover { | ||
color: # | 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 { | code, tt { | ||
background-color: # | background-color: #f8f9fa !important; | ||
color: # | color: #333333 !important; | ||
border: 1px solid # | border: 1px solid #cccccc !important; | ||
border-radius: 5px !important; | border-radius: 5px !important; | ||
padding: 1px 4px !important; | padding: 1px 4px !important; | ||
| Line 160: | Line 201: | ||
} | } | ||
pre, .mw-code { | pre, .mw-code { | ||
background-color: # | background-color: #f8f9fa !important; | ||
color: # | color: #333333 !important; | ||
border: | border: 1px solid #cccccc !important; | ||
border-radius: 8px !important; | border-radius: 8px !important; | ||
padding: 10px !important; | padding: 10px !important; | ||
| Line 168: | Line 209: | ||
} | } | ||
/* | /* Fix wikitables */ | ||
table.wikitable, | table.wikitable, | ||
table.wikitable th, | table.wikitable th, | ||
table.wikitable td { | table.wikitable td { | ||
border: 1px solid # | border: 1px solid #cccccc !important; | ||
color: # | color: #333333 !important; | ||
} | } | ||
table.wikitable { | table.wikitable { | ||
background-color: # | 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: # | background-color: #f0f4ff !important; | ||
} | } | ||
table.wikitable td { | table.wikitable td { | ||
background-color: # | background-color: #ffffff !important; | ||
} | } | ||
/* | /* Fix ambox / infobox / maintenance boxes */ | ||
.ambox, .tmbox, .ombox, .cmbox, .fmbox, | .ambox, .tmbox, .ombox, .cmbox, .fmbox, | ||
.infobox, .mbox-small, .navbox, .navbox-subgroup { | .infobox, .mbox-small, .navbox, .navbox-subgroup { | ||
background-color: # | background-color: #ffffff !important; | ||
color: # | color: #333333 !important; | ||
border: | 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: # | color: #333333 !important; | ||
border-color: # | 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;
}