MediaWiki:Common.css: Difference between revisions
m Removed test CSS Tag: Manual revert |
m adding new definitions for future changes to the wiki design. |
||
| Line 297: | Line 297: | ||
.wikiEditor-ui-toolbar .tabs, .wikiEditor-ui-toolbar .section-main { | .wikiEditor-ui-toolbar .tabs, .wikiEditor-ui-toolbar .section-main { | ||
height: auto; | height: auto; | ||
} | |||
/* ============================================================ | |||
TENTH FLEET WIKI — MAIN PAGE STYLES | |||
Paste at the BOTTOM of MediaWiki:Common.css, after whatever is | |||
already there. Everything is nested under .tf-mainpage so it | |||
cannot affect any other page on the wiki. | |||
Before pasting: search the existing Common.css for "tf-" to | |||
confirm none of these class names are already in use. | |||
============================================================ */ | |||
.tf-mainpage { | |||
--tf-black: #0B0B0D; | |||
--tf-panel: #141416; | |||
--tf-gold-hi: #F4D736; | |||
--tf-gold: #F5BD3F; | |||
--tf-gold-shadow: #F4A345; | |||
--tf-red: #BE2F24; | |||
--tf-text: #E9E6E0; | |||
--tf-muted: #9A9792; | |||
--tf-border: #2A2A2C; | |||
background: var(--tf-black); | |||
color: var(--tf-text); | |||
border-radius: 12px; | |||
position: relative; | |||
overflow: hidden; | |||
} | |||
/* Corner flash — the single deliberate red accent */ | |||
.tf-mainpage .tf-flash { | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
width: 80px; | |||
height: 44px; | |||
background: var(--tf-red); | |||
} | |||
/* Hero: crest, wordmark, motto */ | |||
.tf-mainpage .tf-hero { | |||
display: flex; | |||
align-items: center; | |||
gap: 28px; | |||
padding: 36px 40px 30px; | |||
} | |||
.tf-mainpage .tf-hero img { | |||
border: 0; | |||
flex-shrink: 0; | |||
} | |||
.tf-mainpage .tf-word { | |||
font-size: 32px; | |||
font-weight: 600; | |||
color: var(--tf-gold); | |||
letter-spacing: 0.01em; | |||
} | |||
.tf-mainpage .tf-motto { | |||
font-size: 16px; | |||
color: var(--tf-muted); | |||
margin-top: 6px; | |||
} | |||
.tf-mainpage .tf-trim { | |||
height: 3px; | |||
background: var(--tf-gold); | |||
} | |||
/* Four-section navigation grid */ | |||
.tf-mainpage .tf-navgrid { | |||
display: flex; | |||
gap: 14px; | |||
padding: 26px 40px; | |||
flex-wrap: wrap; | |||
} | |||
.tf-mainpage .tf-navcard { | |||
flex: 1 1 180px; | |||
border: 1px solid var(--tf-gold-shadow); | |||
border-radius: 8px; | |||
padding: 16px 14px; | |||
background: var(--tf-panel); | |||
} | |||
.tf-mainpage .tf-navcard-title { | |||
font-size: 11px; | |||
letter-spacing: 0.06em; | |||
color: var(--tf-gold); | |||
margin-bottom: 8px; | |||
text-transform: uppercase; | |||
} | |||
.tf-mainpage .tf-navcard-title a, | |||
.tf-mainpage .tf-navcard-title a:visited { | |||
color: var(--tf-gold) !important; | |||
} | |||
.tf-mainpage .tf-navcard-desc { | |||
font-size: 12px; | |||
color: var(--tf-muted); | |||
line-height: 1.5; | |||
} | |||
/* Featured article / news / roster columns */ | |||
.tf-mainpage .tf-content { | |||
display: flex; | |||
gap: 24px; | |||
padding: 8px 40px 30px; | |||
border-top: 1px solid var(--tf-border); | |||
margin-top: 10px; | |||
flex-wrap: wrap; | |||
} | |||
.tf-mainpage .tf-col { | |||
flex: 1 1 320px; | |||
padding-top: 24px; | |||
} | |||
.tf-mainpage .tf-section-label { | |||
font-size: 11px; | |||
letter-spacing: 0.05em; | |||
color: var(--tf-gold-shadow); | |||
margin-bottom: 10px; | |||
text-transform: uppercase; | |||
} | |||
.tf-mainpage .tf-featured { | |||
font-size: 13px; | |||
line-height: 1.65; | |||
color: var(--tf-text); | |||
} | |||
.tf-mainpage .tf-newsitem { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 2px; | |||
border-left: 3px solid var(--tf-red); | |||
padding: 6px 0 10px 12px; | |||
font-size: 12px; | |||
color: #cccccc; | |||
margin-bottom: 6px; | |||
} | |||
.tf-mainpage .tf-cat { | |||
color: var(--tf-red); | |||
font-size: 10px; | |||
letter-spacing: 0.04em; | |||
display: block; | |||
} | |||
.tf-mainpage .tf-roster { | |||
display: flex; | |||
flex-direction: column; | |||
gap: 8px; | |||
} | |||
.tf-mainpage .tf-ship { | |||
display: flex; | |||
justify-content: space-between; | |||
border: 1px solid var(--tf-border); | |||
border-radius: 6px; | |||
padding: 8px 12px; | |||
font-size: 12px; | |||
color: var(--tf-text); | |||
} | |||
.tf-mainpage .tf-ship a, | |||
.tf-mainpage .tf-ship a:visited { | |||
color: var(--tf-text) !important; | |||
} | |||
.tf-mainpage .tf-hull { | |||
color: var(--tf-gold); | |||
} | |||
/* Footer motto repeat */ | |||
.tf-mainpage .tf-footer { | |||
text-align: center; | |||
padding: 20px; | |||
border-top: 1px solid var(--tf-border); | |||
} | |||
.tf-mainpage .tf-motto2 { | |||
font-size: 12px; | |||
color: var(--tf-muted); | |||
} | |||
/* Mobile: stack everything to one column below 700px */ | |||
@media (max-width: 700px) { | |||
.tf-mainpage .tf-hero { | |||
flex-direction: column; | |||
text-align: center; | |||
padding: 28px 20px 24px; | |||
} | |||
.tf-mainpage .tf-navgrid, | |||
.tf-mainpage .tf-content { | |||
padding-left: 20px; | |||
padding-right: 20px; | |||
} | |||
.tf-mainpage .tf-navcard { | |||
flex: 1 1 100%; | |||
} | |||
.tf-mainpage .tf-col { | |||
flex: 1 1 100%; | |||
} | |||
} | } | ||