TeamSpec Wiki

MediaWiki:Common.css: Difference between revisions

Newer edit →
Starter content
 
TeamSpec theme: colours move from inline styles to MediaWiki:Common.css classes
Line 1: Line 1:
/* Site-wide CSS, live at MediaWiki:Common.css; edit it on the wiki, not here.
/* Site-wide CSS for page content, live at MediaWiki:Common.css; edit it on the wiki, not
   The var() names are Vector 2022's design tokens, so night mode recolours these too. */
  here (this copy only seeds a fresh install).
 
  Colours come from the TeamSpec theme the server adds to the default skins
   (mediawiki/assets/theme/palette.css in the wiki's repo): Codex token names such as
  --background-color-base, and the theme's own --ts-* names. Each var() falls back to the
  Wikipedia colour, for the skins the theme leaves alone. Templates use these classes
  rather than inline colours, so a palette change reaches every page. */


.page-Main_Page .mw-first-heading {
.page-Main_Page .mw-first-heading {
display: none;
display: none;
}
}
/* --- Main Page --------------------------------------------------------------------- */


.mp-banner {
.mp-banner {
Line 10: Line 18:
margin-bottom: 1em;
margin-bottom: 1em;
border-radius: 4px;
border-radius: 4px;
background: #3d78c4;
background: var( --ts-stripes, none ) bottom / 100% 4px no-repeat, var( --ts-topbar, #3d78c4 );
color: #fff;
color: var( --ts-topbar-ink, #fff );
text-align: center;
text-align: center;
box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.25 );
}
}


.mp-banner-title {
.mp-banner-title {
font-family: var( --ts-font-display, inherit );
font-size: 1.9em;
font-size: 1.9em;
font-weight: bold;
font-weight: 600;
}
}


.mp-banner-sub a {
.mp-banner-sub a,
color: #fff;
.mp-banner-sub a:visited {
color: var( --ts-topbar-ink, #fff );
text-decoration: underline;
text-decoration: underline;
}
}
Line 40: Line 51:
.mp-box-title {
.mp-box-title {
margin-bottom: 0.4em;
margin-bottom: 0.4em;
font-family: var( --ts-font-display, inherit );
font-size: 1.2em;
font-size: 1.2em;
font-weight: bold;
font-weight: 600;
border-bottom: 1px solid var( --border-color-subtle, #c8ccd1 );
border-bottom: 1px solid var( --border-color-subtle, #c8ccd1 );
}
/* --- Infoboxes and navboxes ({{Infobox weapon}}, {{Game nav}} and the rest) ---------- */
.ts-infobox,
.ts-navbox {
border: 1px solid var( --border-color-base, #a2a9b1 );
background: var( --background-color-neutral-subtle, #f8f9fa );
color: var( --color-base, #202122 );
}
.ts-infobox {
box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.18 );
}
/* The title bar: the top bar's grey with the brand stripes along its top edge. */
.ts-infobox-title,
.ts-navbox-title {
background: var( --ts-stripes, none ) top / 100% 3px no-repeat, var( --ts-topbar, #eaecf0 );
color: var( --ts-topbar-ink, #202122 );
font-family: var( --ts-font-display, inherit );
font-weight: 600;
}
.ts-infobox-title a,
.ts-infobox-title a:visited,
.ts-navbox-title a,
.ts-navbox-title a:visited {
color: inherit;
}
.ts-infobox-section,
.ts-navbox-group {
background: var( --background-color-neutral, #eaecf0 );
}
.ts-infobox-image {
background: var( --background-color-base, #fff );
}
/* --- {{Note}}, {{Tip}}, {{Warning}} ---------------------------------------------------- */
.ts-callout {
padding: 8px 12px;
margin: 10px 0;
border: 1px solid var( --border-color-base, #a2a9b1 );
border-left-width: 5px;
border-radius: 2px;
background: var( --background-color-neutral-subtle, #f8f9fa );
color: var( --color-base, #202122 );
}
.ts-callout-note {
border-left-color: var( --ts-brand-blue, #36c );
}
.ts-callout-tip {
border-left-color: var( --ts-brand-green, #14866d );
}
.ts-callout-warning {
border-left-color: var( --ts-brand-red, #d33 );
}
/* --- {{Key}}: a key cap, the dashboard's dark button ----------------------------------- */
.ts-key {
border: 1px solid var( --border-color-base, #a2a9b1 );
border-bottom-width: 2px;
border-radius: 3px;
background: var( --ts-btn, #f8f9fa );
color: var( --ts-btn-ink, #202122 );
}
/* --- {{API member}} --------------------------------------------------------------------- */
.ts-api {
padding: 8px 12px;
margin: 6px 0 14px 0;
border: 1px solid var( --border-color-subtle, #c8ccd1 );
border-left: 4px solid var( --ts-brand-blue, #36c );
border-radius: 2px;
background: var( --background-color-neutral-subtle, #f8f9fa );
color: var( --color-base, #202122 );
}
.ts-api-signature {
padding: 4px 8px;
margin-bottom: 6px;
border-radius: 2px;
background: var( --background-color-neutral, #eaecf0 );
font-family: monospace;
font-size: 1.05em;
overflow-x: auto;
white-space: pre-wrap;
}
.ts-api-kind {
margin-bottom: 6px;
color: var( --color-subtle, #54595d );
font-size: 0.9em;
}
/* --- {{Falloff chart}} (Module:Falloff draws it, the falloff gadget adds the cursor) --- */
.ts-falloff-plot {
position: relative;
display: flex;
align-items: flex-end;
height: 180px;
border-left: 1px solid var( --border-color-base, #a2a9b1 );
border-bottom: 1px solid var( --border-color-base, #a2a9b1 );
}
.ts-falloff-full {
position: absolute;
left: 0;
right: 0;
border-top: 1px dashed var( --border-color-base, #a2a9b1 );
}
.ts-falloff-threshold {
position: absolute;
top: 0;
bottom: 0;
border-left: 1px dotted var( --border-color-base, #a2a9b1 );
}
.ts-falloff-bar {
flex: 1;
border-right: 1px solid var( --background-color-base, #fff );
background: var( --ts-brand-blue, #5b8def );
cursor: crosshair;
}
.ts-falloff-caption {
color: var( --color-subtle, #54595d );
font-size: 85%;
}
.ts-falloff-cursor {
display: none;
position: absolute;
top: 0;
bottom: 0;
width: 0;
border-left: 2px solid var( --color-base, #202122 );
pointer-events: none;
}
.ts-falloff-readout {
display: none;
position: absolute;
top: 4px;
z-index: 1;
padding: 2px 6px;
border: 1px solid var( --border-color-base, #a2a9b1 );
border-radius: 3px;
background: var( --background-color-base, #fff );
font-size: 85%;
white-space: pre;
pointer-events: none;
}
}
Retrieved from "https://wiki.teamspec.net/wiki/MediaWiki:Common.css"