|
|
| Line 1: |
Line 1: |
| .mp-top {
| | /* Main page (Sandbox) content styles */ |
| display: flex;
| |
| /* row-reverse: when it wraps on smaller displays, the logo appears first */
| |
| flex-flow: row-reverse wrap;
| |
| justify-content: center;
| |
| gap: 24px;
| |
| margin-bottom: 0;
| |
| }
| |
|
| |
|
| .mp-top .mp-header {
| | /* Social links: icon row, left to right */ |
| flex: 1;
| | ul.mp-socials { |
| flex-basis: 400px;
| |
| min-width: 0;
| |
| }
| |
| | |
| .mp-header-subtitle {
| |
| font-family: Poppins, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
| |
| font-size: 24px;
| |
| font-weight: 400;
| |
| line-height: 1.3;
| |
| color: var(--mp-header-text, #d7d9db);
| |
| margin: 0;
| |
| }
| |
| | |
| .mp-header-subtitle b {
| |
| font-weight: 700;
| |
| }
| |
| | |
| .mp-header-stats { | |
| display: flex; | | display: flex; |
| | flex-direction: row; |
| | flex-wrap: wrap; |
| | align-items: center; |
| gap: 8px; | | gap: 8px; |
| align-items: center;
| | margin: 12px 0; |
| }
| |
| | |
| /* Gray bars to the left and right of the stats */
| |
| .mp-header-stats-sep {
| |
| height: 0;
| |
| border-top: 2px solid var(--mp-header-sep, var(--color-surface-2, #8b949e));
| |
| flex: 1;
| |
| }
| |
| | |
| .mp-header-stats > ul {
| |
| text-align: center;
| |
| margin: 0; | |
| padding: 0; | | padding: 0; |
| list-style: none; | | list-style: none; |
| } | | } |
|
| |
|
| .mp-header-stats li { | | ul.mp-socials li { |
| display: inline; | | display: block; |
| color: var(--mp-header-muted, #8b949e);
| |
| }
| |
| | |
| .mp-header-stats li:not(:last-child)::after {
| |
| content: " · ";
| |
| font-weight: bold;
| |
| }
| |
| | |
| .mp-header-stats a {
| |
| color: var(--mp-header-link, #58a6ff);
| |
| }
| |
| | |
| /* Vertical spacing between header blocks */
| |
| .mp-header > * {
| |
| margin: 12px 0;
| |
| }
| |
| | |
| .mp-header > :first-child {
| |
| margin-top: 0;
| |
| }
| |
| | |
| .mp-header > :last-child {
| |
| margin-bottom: 0;
| |
| }
| |
| | |
| .mp-header-intro {
| |
| font-size: 0.95rem;
| |
| color: var(--mp-header-muted, #8b949e);
| |
| margin: 0;
| |
| } | | } |
|
| |
|
| .mp-header-intro a { | | ul.mp-socials img { |
| color: var(--mp-header-link, #58a6ff);
| |
| }
| |
| | |
| /* Logo: theme-aware (black for light mode, white for dark mode) */
| |
| .mp-logo {
| |
| flex-shrink: 0;
| |
| }
| |
| .mp-logo img {
| |
| vertical-align: middle; | | vertical-align: middle; |
| }
| |
| /* Default: show white logo (dark), hide black logo. Theme switch uses only
| |
| prefers-color-scheme so selectors stay within template scope and work
| |
| when transcluded (TemplateStyles strips html/body selectors). */
| |
| .mp-logo--light {
| |
| display: none;
| |
| }
| |
| .mp-logo--dark {
| |
| display: inline;
| |
| }
| |
| .mp-logo--dark a {
| |
| display: inline-block;
| |
| }
| |
| @media screen and ( prefers-color-scheme: light ) {
| |
| .mp-logo--light {
| |
| display: inline;
| |
| }
| |
| .mp-logo--light a {
| |
| display: inline-block;
| |
| }
| |
| .mp-logo--dark {
| |
| display: none;
| |
| }
| |
| } | | } |
|
| |
|
| /* Light mode: readable text and links on light background. | | /* Social cards: colored icons (Discord, Twitter, etc.) must keep their |
| Per MediaWiki: support explicit (skin-theme-clientpref-day) and
| | colors; do not invert them in light mode (unlike white monochrome icons). */ |
| automatic/OS mode (skin-theme-clientpref-os + prefers-color-scheme: light). */ | | .mp-socials-grid .home-card__icon img { |
| @media screen {
| | filter: none !important; |
| html.skin-theme-clientpref-day .mp-header-subtitle,
| |
| html.skin-theme-clientpref-day .mp-header-intro {
| |
| --mp-header-text: #24292f;
| |
| --mp-header-muted: #57606a;
| |
| --mp-header-link: #0969da;
| |
| }
| |
| html.skin-theme-clientpref-day .mp-header-stats-sep {
| |
| --mp-header-sep: #d0d7de;
| |
| }
| |
| html.skin-theme-clientpref-day .mp-header-stats li {
| |
| --mp-header-muted: #57606a;
| |
| } | |
| html.skin-theme-clientpref-day .mp-header-stats a,
| |
| html.skin-theme-clientpref-day .mp-header-intro a {
| |
| --mp-header-link: #0969da;
| |
| }
| |
| }
| |
| @media screen and ( prefers-color-scheme: light ) {
| |
| html.skin-theme-clientpref-os .mp-header-subtitle,
| |
| html.skin-theme-clientpref-os .mp-header-intro {
| |
| --mp-header-text: #24292f;
| |
| --mp-header-muted: #57606a;
| |
| --mp-header-link: #0969da;
| |
| }
| |
| html.skin-theme-clientpref-os .mp-header-stats-sep {
| |
| --mp-header-sep: #d0d7de;
| |
| }
| |
| html.skin-theme-clientpref-os .mp-header-stats li {
| |
| --mp-header-muted: #57606a;
| |
| }
| |
| html.skin-theme-clientpref-os .mp-header-stats a,
| |
| html.skin-theme-clientpref-os .mp-header-intro a {
| |
| --mp-header-link: #0969da;
| |
| }
| |
| } | | } |
/* Main page (Sandbox) content styles */
/* Social links: icon row, left to right */
ul.mp-socials {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 12px 0;
padding: 0;
list-style: none;
}
ul.mp-socials li {
display: block;
}
ul.mp-socials img {
vertical-align: middle;
}
/* Social cards: colored icons (Discord, Twitter, etc.) must keep their
colors; do not invert them in light mode (unlike white monochrome icons). */
.mp-socials-grid .home-card__icon img {
filter: none !important;
}
