MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| (10 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* ========================================== */ | /* ========================================== */ | ||
/* | /* BigBro Orange Design System — BigBro Know */ | ||
/* ========================================== */ | /* ========================================== */ | ||
| Line 33: | Line 33: | ||
.mw-parser-output h3, | .mw-parser-output h3, | ||
.mw-parser-output h4 { | .mw-parser-output h4 { | ||
color: # | color: #FF7900 !important; | ||
border-bottom: 1px solid #2E2E2E !important; | border-bottom: 1px solid #2E2E2E !important; | ||
} | } | ||
| Line 39: | Line 39: | ||
/* Links */ | /* Links */ | ||
a, a:visited { | a, a:visited { | ||
color: # | color: #FF7900 !important; | ||
} | } | ||
a:hover { | a:hover { | ||
color: # | color: #FFA24A !important; | ||
text-decoration: underline; | text-decoration: underline; | ||
} | } | ||
| Line 60: | Line 60: | ||
} | } | ||
#mw-panel a:hover, .vector-menu a:hover { | #mw-panel a:hover, .vector-menu a:hover { | ||
color: # | color: #FF7900 !important; | ||
} | } | ||
| Line 73: | Line 73: | ||
} | } | ||
.mw-portlet-personal a:hover { | .mw-portlet-personal a:hover { | ||
color: # | color: #FF7900 !important; | ||
} | } | ||
| Line 79: | Line 79: | ||
#p-cactions .selected a, | #p-cactions .selected a, | ||
.mw-portlet-views .selected a { | .mw-portlet-views .selected a { | ||
color: # | color: #FF7900 !important; | ||
border-bottom: 2px solid # | border-bottom: 2px solid #FF7900 !important; | ||
background: transparent !important; | background: transparent !important; | ||
} | } | ||
| Line 91: | Line 91: | ||
} | } | ||
#p-views li a:hover { | #p-views li a:hover { | ||
color: # | color: #FF7900 !important; | ||
} | } | ||
| Line 124: | Line 124: | ||
} | } | ||
.toc a { | .toc a { | ||
color: # | color: #FF7900 !important; | ||
} | } | ||
.toc .tocnumber { | .toc .tocnumber { | ||
color: # | color: #FF7900 !important; | ||
} | } | ||
| Line 154: | Line 154: | ||
} | } | ||
#footer a:hover { | #footer a:hover { | ||
color: # | color: #FF7900 !important; | ||
} | } | ||
| Line 164: | Line 164: | ||
/* ============================================ */ | /* ============================================ */ | ||
/* | /* BigBro Orange Component Classes */ | ||
/* ============================================ */ | /* ============================================ */ | ||
| Line 236: | Line 236: | ||
margin: 4px 0; | margin: 4px 0; | ||
text-decoration: none; | text-decoration: none; | ||
color: # | color: #FF7900 !important; | ||
} | } | ||
.ax-card a:hover { | .ax-card a:hover { | ||
text-decoration: underline; | text-decoration: underline; | ||
color: # | color: #FFA24A !important; | ||
} | } | ||
.ax-card-title a { | .ax-card-title a { | ||
| Line 247: | Line 247: | ||
} | } | ||
.ax-card-title a:hover { | .ax-card-title a:hover { | ||
color: # | color: #FF7900 !important; | ||
} | } | ||
| Line 345: | Line 345: | ||
background: rgba(255,102,0,0.08); | background: rgba(255,102,0,0.08); | ||
border-color: rgba(255,102,0,0.35); | border-color: rgba(255,102,0,0.35); | ||
color: # | color: #FFA24A !important; | ||
} | } | ||
.ax-link-row a { | .ax-link-row a { | ||
| Line 351: | Line 351: | ||
} | } | ||
.ax-link-row:hover a { | .ax-link-row:hover a { | ||
color: # | color: #FFA24A !important; | ||
} | } | ||
| Line 369: | Line 369: | ||
.ax-accent-bar { | .ax-accent-bar { | ||
height: 2px; | height: 2px; | ||
background: linear-gradient(to right, # | background: linear-gradient(to right, #FF7900, #FFA24A); | ||
border-radius: 2px; | border-radius: 2px; | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
| Line 384: | Line 384: | ||
/* Sexual Health card hero image */ | /* Sexual Health card hero image */ | ||
#ax-sexual-health-hero { | #ax-sexual-health-hero { | ||
background-image: url(" | background-image: url("/images/4/43/Sexual_Health_Hero.jpg"); | ||
background-size: cover; | background-size: cover; | ||
background-position: center; | background-position: center; | ||
| Line 454: | Line 454: | ||
.ax-cat-title a { | .ax-cat-title a { | ||
color: # | color: #FF7900 !important; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
.ax-cat-title a:hover { | .ax-cat-title a:hover { | ||
color: # | color: #FFA24A !important; | ||
text-decoration: underline; | text-decoration: underline; | ||
} | } | ||
| Line 503: | Line 503: | ||
} | } | ||
/* | /* BigBro Know Landing Page Styles */ | ||
@keyframes scrollUp{0%{transform:translateY(0)}100%{transform:translateY(-50%)}} | @keyframes scrollUp{0%{transform:translateY(0)}100%{transform:translateY(-50%)}} | ||
@keyframes glowLine{0%,100%{box-shadow:0 0 18px 4px rgba(255,107,26,0.5)}50%{box-shadow:0 0 36px 10px rgba(255,107,26,0.9)}} | @keyframes glowLine{0%,100%{box-shadow:0 0 18px 4px rgba(255,107,26,0.5)}50%{box-shadow:0 0 36px 10px rgba(255,107,26,0.9)}} | ||
| Line 528: | Line 528: | ||
/* Hide leaked template parameter labels in translated /de articles */ | /* Hide leaked template parameter labels in translated /de articles */ | ||
.ka-article pre { display: none !important; } | .ka-article pre { display: none !important; } | ||
/* ============================================ */ | |||
/* BigBro Orange — Button Text Color Fix */ | |||
/* Ensures white text on orange gradient btns */ | |||
/* ============================================ */ | |||
.btn-primary, | |||
.btn-primary:visited, | |||
.btn-nav, | |||
.btn-nav:visited { | |||
color: #ffffff !important; | |||
-webkit-text-fill-color: #ffffff !important; | |||
} | |||
.btn-primary:hover, | |||
.btn-nav:hover { | |||
color: #ffffff !important; | |||
-webkit-text-fill-color: #ffffff !important; | |||
} | |||
/* ===================================================================== */ | |||
/* FULL-BLEED LANDING — Homepage only */ | |||
/* Hides Vector skin chrome so the custom landing renders edge-to-edge */ | |||
/* like bigbro.men. The page's own fixed nav becomes the top bar. */ | |||
/* Scoped to body.page-Homepage — inner wiki articles are untouched. */ | |||
/* ===================================================================== */ | |||
body.page-Homepage #mw-head, | |||
body.page-Homepage #mw-head-base, | |||
body.page-Homepage #mw-page-base, | |||
body.page-Homepage #mw-panel, | |||
body.page-Homepage #left-navigation, | |||
body.page-Homepage #right-navigation, | |||
body.page-Homepage #p-logo, | |||
body.page-Homepage .mw-indicators, | |||
body.page-Homepage #siteSub, | |||
body.page-Homepage #contentSub, | |||
body.page-Homepage #contentSub2, | |||
body.page-Homepage .mw-first-heading, | |||
body.page-Homepage h1.firstHeading, | |||
body.page-Homepage #jump-to-nav, | |||
body.page-Homepage .mw-jump-link, | |||
body.page-Homepage #footer, | |||
body.page-Homepage #mw-footer, | |||
body.page-Homepage .printfooter, | |||
body.page-Homepage .catlinks, | |||
body.page-Homepage #catlinks, | |||
body.page-Homepage #mw-data-after-content, | |||
body.page-Homepage #mw-navigation-heading { | |||
display: none !important; | |||
} | |||
/* Content area: full width, no skin offset, no padding/border */ | |||
body.page-Homepage, | |||
body.page-Homepage #content, | |||
body.page-Homepage .mw-body, | |||
body.page-Homepage #mw-content, | |||
body.page-Homepage #mw-content-text, | |||
body.page-Homepage #bodyContent, | |||
body.page-Homepage .mw-content-ltr, | |||
body.page-Homepage .mw-parser-output { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: 0 !important; | |||
background: #0D0D0D !important; | |||
max-width: none !important; | |||
width: auto !important; | |||
} | |||
body.page-Homepage #content, | |||
body.page-Homepage .mw-body { | |||
margin-left: 0 !important; | |||
box-shadow: none !important; | |||
} | |||
/* Let the custom landing manage its own scroll/overflow */ | |||
body.page-Homepage { overflow-x: hidden !important; } | |||
/* Restore landing button / nav text colors (override global orange link rule) */ | |||
/* Filled gradient buttons: dark ink (matches bigbro.men .btn-primary) */ | |||
body.page-Homepage .btn-p, | |||
body.page-Homepage .btn-p:visited, | |||
body.page-Homepage .hcp, | |||
body.page-Homepage .hcp:visited, | |||
body.page-Homepage .ab-cta, | |||
body.page-Homepage .ab-cta:visited, | |||
body.page-Homepage .nlb, | |||
body.page-Homepage .lb.on, | |||
body.page-Homepage .lb.on:visited, | |||
body.page-Homepage_de .btn-p, | |||
body.page-Homepage_de .btn-p:visited, | |||
body.page-Homepage_de .hcp, | |||
body.page-Homepage_de .hcp:visited, | |||
body.page-Homepage_de .ab-cta, | |||
body.page-Homepage_de .ab-cta:visited, | |||
body.page-Homepage_de .nlb, | |||
body.page-Homepage_de .lb.on, | |||
body.page-Homepage_de .lb.on:visited, | |||
body.page-Homepage_fr .btn-p, | |||
body.page-Homepage_fr .btn-p:visited, | |||
body.page-Homepage_fr .hcp, | |||
body.page-Homepage_fr .hcp:visited, | |||
body.page-Homepage_fr .ab-cta, | |||
body.page-Homepage_fr .ab-cta:visited, | |||
body.page-Homepage_fr .nlb, | |||
body.page-Homepage_fr .lb.on, | |||
body.page-Homepage_fr .lb.on:visited, | |||
body.page-Homepage_es .btn-p, | |||
body.page-Homepage_es .btn-p:visited, | |||
body.page-Homepage_es .hcp, | |||
body.page-Homepage_es .hcp:visited, | |||
body.page-Homepage_es .ab-cta, | |||
body.page-Homepage_es .ab-cta:visited, | |||
body.page-Homepage_es .nlb, | |||
body.page-Homepage_es .lb.on, | |||
body.page-Homepage_es .lb.on:visited, | |||
body.page-Homepage_pt .btn-p, | |||
body.page-Homepage_pt .btn-p:visited, | |||
body.page-Homepage_pt .hcp, | |||
body.page-Homepage_pt .hcp:visited, | |||
body.page-Homepage_pt .ab-cta, | |||
body.page-Homepage_pt .ab-cta:visited, | |||
body.page-Homepage_pt .nlb, | |||
body.page-Homepage_pt .lb.on, | |||
body.page-Homepage_pt .lb.on:visited { | |||
color: #0D0D0D !important; | |||
-webkit-text-fill-color: #0D0D0D !important; | |||
} | |||
/* Ghost button + over-image labels stay light */ | |||
body.page-Homepage .hcs, | |||
body.page-Homepage .hcs:visited, | |||
body.page-Homepage .tn, | |||
body.page-Homepage_de .hcs, | |||
body.page-Homepage_de .hcs:visited, | |||
body.page-Homepage_de .tn, | |||
body.page-Homepage_fr .hcs, | |||
body.page-Homepage_fr .hcs:visited, | |||
body.page-Homepage_fr .tn, | |||
body.page-Homepage_es .hcs, | |||
body.page-Homepage_es .hcs:visited, | |||
body.page-Homepage_es .tn, | |||
body.page-Homepage_pt .hcs, | |||
body.page-Homepage_pt .hcs:visited, | |||
body.page-Homepage_pt .tn { | |||
color: #ffffff !important; | |||
-webkit-text-fill-color: #ffffff !important; | |||
} | |||
body.page-Homepage .nl, | |||
body.page-Homepage .nl:visited, | |||
body.page-Homepage .lb.av, | |||
body.page-Homepage .lb.av:visited { | |||
color: #888888 !important; | |||
-webkit-text-fill-color: #888888 !important; | |||
} | |||
body.page-Homepage .nl:hover, | |||
body.page-Homepage .lb.av:hover { color: #ffffff !important; -webkit-text-fill-color:#ffffff !important; } | |||
body.page-Homepage .lb.dim { color: #333333 !important; -webkit-text-fill-color:#333333 !important; } | |||
/* Footer + section links inherit the design, not the global orange underline */ | |||
body.page-Homepage .fl a:hover { text-decoration: none !important; } | |||
/* ===================================================================== */ | |||
/* FULL-BLEED LANDING — Homepage language subpages (DE, FR, ES, PT) */ | |||
/* Identical to body.page-Homepage rules above */ | |||
/* ===================================================================== */ | |||
/* --- DE --- */ | |||
body.page-Homepage_de #mw-head, | |||
body.page-Homepage_de #mw-head-base, | |||
body.page-Homepage_de #mw-page-base, | |||
body.page-Homepage_de #mw-panel, | |||
body.page-Homepage_de #left-navigation, | |||
body.page-Homepage_de #right-navigation, | |||
body.page-Homepage_de #p-logo, | |||
body.page-Homepage_de .mw-indicators, | |||
body.page-Homepage_de #siteSub, | |||
body.page-Homepage_de #contentSub, | |||
body.page-Homepage_de #contentSub2, | |||
body.page-Homepage_de .mw-first-heading, | |||
body.page-Homepage_de h1.firstHeading, | |||
body.page-Homepage_de #jump-to-nav, | |||
body.page-Homepage_de .mw-jump-link, | |||
body.page-Homepage_de #footer, | |||
body.page-Homepage_de #mw-footer, | |||
body.page-Homepage_de .printfooter, | |||
body.page-Homepage_de .catlinks, | |||
body.page-Homepage_de #catlinks, | |||
body.page-Homepage_de #mw-data-after-content, | |||
body.page-Homepage_de #mw-navigation-heading { | |||
display: none !important; | |||
} | |||
body.page-Homepage_de, | |||
body.page-Homepage_de #content, | |||
body.page-Homepage_de .mw-body, | |||
body.page-Homepage_de #mw-content, | |||
body.page-Homepage_de #mw-content-text, | |||
body.page-Homepage_de #bodyContent, | |||
body.page-Homepage_de .mw-content-ltr, | |||
body.page-Homepage_de .mw-parser-output { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: 0 !important; | |||
background: #0D0D0D !important; | |||
max-width: none !important; | |||
width: auto !important; | |||
} | |||
body.page-Homepage_de #content, | |||
body.page-Homepage_de .mw-body { | |||
margin-left: 0 !important; | |||
box-shadow: none !important; | |||
} | |||
body.page-Homepage_de { overflow-x: hidden !important; } | |||
/* --- FR --- */ | |||
body.page-Homepage_fr #mw-head, | |||
body.page-Homepage_fr #mw-head-base, | |||
body.page-Homepage_fr #mw-page-base, | |||
body.page-Homepage_fr #mw-panel, | |||
body.page-Homepage_fr #left-navigation, | |||
body.page-Homepage_fr #right-navigation, | |||
body.page-Homepage_fr #p-logo, | |||
body.page-Homepage_fr .mw-indicators, | |||
body.page-Homepage_fr #siteSub, | |||
body.page-Homepage_fr #contentSub, | |||
body.page-Homepage_fr #contentSub2, | |||
body.page-Homepage_fr .mw-first-heading, | |||
body.page-Homepage_fr h1.firstHeading, | |||
body.page-Homepage_fr #jump-to-nav, | |||
body.page-Homepage_fr .mw-jump-link, | |||
body.page-Homepage_fr #footer, | |||
body.page-Homepage_fr #mw-footer, | |||
body.page-Homepage_fr .printfooter, | |||
body.page-Homepage_fr .catlinks, | |||
body.page-Homepage_fr #catlinks, | |||
body.page-Homepage_fr #mw-data-after-content, | |||
body.page-Homepage_fr #mw-navigation-heading { | |||
display: none !important; | |||
} | |||
body.page-Homepage_fr, | |||
body.page-Homepage_fr #content, | |||
body.page-Homepage_fr .mw-body, | |||
body.page-Homepage_fr #mw-content, | |||
body.page-Homepage_fr #mw-content-text, | |||
body.page-Homepage_fr #bodyContent, | |||
body.page-Homepage_fr .mw-content-ltr, | |||
body.page-Homepage_fr .mw-parser-output { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: 0 !important; | |||
background: #0D0D0D !important; | |||
max-width: none !important; | |||
width: auto !important; | |||
} | |||
body.page-Homepage_fr #content, | |||
body.page-Homepage_fr .mw-body { | |||
margin-left: 0 !important; | |||
box-shadow: none !important; | |||
} | |||
body.page-Homepage_fr { overflow-x: hidden !important; } | |||
/* --- ES --- */ | |||
body.page-Homepage_es #mw-head, | |||
body.page-Homepage_es #mw-head-base, | |||
body.page-Homepage_es #mw-page-base, | |||
body.page-Homepage_es #mw-panel, | |||
body.page-Homepage_es #left-navigation, | |||
body.page-Homepage_es #right-navigation, | |||
body.page-Homepage_es #p-logo, | |||
body.page-Homepage_es .mw-indicators, | |||
body.page-Homepage_es #siteSub, | |||
body.page-Homepage_es #contentSub, | |||
body.page-Homepage_es #contentSub2, | |||
body.page-Homepage_es .mw-first-heading, | |||
body.page-Homepage_es h1.firstHeading, | |||
body.page-Homepage_es #jump-to-nav, | |||
body.page-Homepage_es .mw-jump-link, | |||
body.page-Homepage_es #footer, | |||
body.page-Homepage_es #mw-footer, | |||
body.page-Homepage_es .printfooter, | |||
body.page-Homepage_es .catlinks, | |||
body.page-Homepage_es #catlinks, | |||
body.page-Homepage_es #mw-data-after-content, | |||
body.page-Homepage_es #mw-navigation-heading { | |||
display: none !important; | |||
} | |||
body.page-Homepage_es, | |||
body.page-Homepage_es #content, | |||
body.page-Homepage_es .mw-body, | |||
body.page-Homepage_es #mw-content, | |||
body.page-Homepage_es #mw-content-text, | |||
body.page-Homepage_es #bodyContent, | |||
body.page-Homepage_es .mw-content-ltr, | |||
body.page-Homepage_es .mw-parser-output { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: 0 !important; | |||
background: #0D0D0D !important; | |||
max-width: none !important; | |||
width: auto !important; | |||
} | |||
body.page-Homepage_es #content, | |||
body.page-Homepage_es .mw-body { | |||
margin-left: 0 !important; | |||
box-shadow: none !important; | |||
} | |||
body.page-Homepage_es { overflow-x: hidden !important; } | |||
/* --- PT --- */ | |||
body.page-Homepage_pt #mw-head, | |||
body.page-Homepage_pt #mw-head-base, | |||
body.page-Homepage_pt #mw-page-base, | |||
body.page-Homepage_pt #mw-panel, | |||
body.page-Homepage_pt #left-navigation, | |||
body.page-Homepage_pt #right-navigation, | |||
body.page-Homepage_pt #p-logo, | |||
body.page-Homepage_pt .mw-indicators, | |||
body.page-Homepage_pt #siteSub, | |||
body.page-Homepage_pt #contentSub, | |||
body.page-Homepage_pt #contentSub2, | |||
body.page-Homepage_pt .mw-first-heading, | |||
body.page-Homepage_pt h1.firstHeading, | |||
body.page-Homepage_pt #jump-to-nav, | |||
body.page-Homepage_pt .mw-jump-link, | |||
body.page-Homepage_pt #footer, | |||
body.page-Homepage_pt #mw-footer, | |||
body.page-Homepage_pt .printfooter, | |||
body.page-Homepage_pt .catlinks, | |||
body.page-Homepage_pt #catlinks, | |||
body.page-Homepage_pt #mw-data-after-content, | |||
body.page-Homepage_pt #mw-navigation-heading { | |||
display: none !important; | |||
} | |||
body.page-Homepage_pt, | |||
body.page-Homepage_pt #content, | |||
body.page-Homepage_pt .mw-body, | |||
body.page-Homepage_pt #mw-content, | |||
body.page-Homepage_pt #mw-content-text, | |||
body.page-Homepage_pt #bodyContent, | |||
body.page-Homepage_pt .mw-content-ltr, | |||
body.page-Homepage_pt .mw-parser-output { | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
border: 0 !important; | |||
background: #0D0D0D !important; | |||
max-width: none !important; | |||
width: auto !important; | |||
} | |||
body.page-Homepage_pt #content, | |||
body.page-Homepage_pt .mw-body { | |||
margin-left: 0 !important; | |||
box-shadow: none !important; | |||
} | |||
body.page-Homepage_pt { overflow-x: hidden !important; } | |||
/* ===================================================================== */ | |||
/* Homepage section headings: white + no underline (article pages keep */ | |||
/* the global orange heading style). */ | |||
/* ===================================================================== */ | |||
body.page-Homepage .mw-parser-output h1, | |||
body.page-Homepage .mw-parser-output h2, | |||
body.page-Homepage .mw-parser-output h3, | |||
body.page-Homepage .mw-parser-output h4, | |||
body.page-Homepage_de .mw-parser-output h1, | |||
body.page-Homepage_de .mw-parser-output h2, | |||
body.page-Homepage_de .mw-parser-output h3, | |||
body.page-Homepage_de .mw-parser-output h4, | |||
body.page-Homepage_fr .mw-parser-output h1, | |||
body.page-Homepage_fr .mw-parser-output h2, | |||
body.page-Homepage_fr .mw-parser-output h3, | |||
body.page-Homepage_fr .mw-parser-output h4, | |||
body.page-Homepage_es .mw-parser-output h1, | |||
body.page-Homepage_es .mw-parser-output h2, | |||
body.page-Homepage_es .mw-parser-output h3, | |||
body.page-Homepage_es .mw-parser-output h4, | |||
body.page-Homepage_pt .mw-parser-output h1, | |||
body.page-Homepage_pt .mw-parser-output h2, | |||
body.page-Homepage_pt .mw-parser-output h3, | |||
body.page-Homepage_pt .mw-parser-output h4 { | |||
color: #FFFFFF !important; | |||
border-bottom: none !important; | |||
} | |||
/* BigBro logo size constraint */ | |||
div[style*="max-width:280px"] .mw-file-element { | |||
max-width: 280px !important; | |||
width: 100% !important; | |||
height: auto !important; | |||
} | |||