MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* --- BORDERCONNECT MODERN WIKI THEME --- */ | /* --- BORDERCONNECT MODERN WIKI THEME (TEAL BRANDING) --- */ | ||
:root { | :root { | ||
--bc-blue: # | --bc-blue: #266065; /* BRAND COLOR: Teal/Slate */ | ||
--bc-blue-dark: # | --bc-blue-dark: #1b4d52; /* Darker shade for gradients/hover */ | ||
--bc-accent: # | --bc-accent: #eef5f6; /* Very light teal for backgrounds */ | ||
--bc-accent-border: #bce0e3; /* Border color for highlights */ | |||
--bc-text: #2c3e50; /* Main Text */ | --bc-text: #2c3e50; /* Main Text */ | ||
--bc-text-muted: # | --bc-text-muted: #546e7a; /* Subtitles */ | ||
--bc- | --bc-bg-page: #f4f7f9; /* Light Gray background for the "surface" */ | ||
--bc-radius: 8px; /* Soft Corners */ | --bc-radius: 8px; /* Soft Corners */ | ||
--bc-shadow: 0 4px | --bc-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Stronger Card Lift */ | ||
--bc-shadow-hover: 0 | --bc-shadow-hover: 0 10px 20px rgba(0,0,0,0.12); | ||
} | } | ||
/* Global Wrapper */ | /* Global Wrapper - Creates the "Surface" for cards to sit on */ | ||
.bc-wrap { | .bc-wrap { | ||
max-width: | max-width: 1240px; | ||
margin: 0 auto; | margin: 0 auto; | ||
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; | font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; | ||
color: var(--bc-text); | color: var(--bc-text); | ||
line-height: 1.6; | line-height: 1.6; | ||
background-color: var(--bc-bg-page); /* The light gray background you asked for */ | |||
padding: 30px; | |||
border-radius: var(--bc-radius); | |||
} | } | ||
| Line 26: | Line 32: | ||
background: linear-gradient(135deg, var(--bc-blue) 0%, var(--bc-blue-dark) 100%); | background: linear-gradient(135deg, var(--bc-blue) 0%, var(--bc-blue-dark) 100%); | ||
color: white; | color: white; | ||
padding: 60px | padding: 60px 30px; | ||
text-align: center; | text-align: center; | ||
border-radius: var(--bc-radius); | border-radius: var(--bc-radius); | ||
margin-bottom: 40px; | margin-bottom: 40px; | ||
box-shadow: var(--bc-shadow); | box-shadow: var(--bc-shadow); | ||
border-bottom: 6px solid rgba(0,0,0,0.2); /* Subtle 3D effect at bottom */ | |||
} | } | ||
| Line 38: | Line 45: | ||
margin: 0 0 10px 0; | margin: 0 0 10px 0; | ||
color: white; | color: white; | ||
border: none; | border: none; | ||
text-shadow: 0 2px 4px rgba(0,0,0,0.2); | |||
} | } | ||
.bc-hero p { | .bc-hero p { | ||
font-size: 1. | font-size: 1.25rem; | ||
opacity: 0. | opacity: 0.95; | ||
margin-bottom: 30px; | margin-bottom: 30px; | ||
font-weight: 400; | |||
} | } | ||
/* Search Box Container */ | /* Search Box Container */ | ||
.bc-search-container { | .bc-search-container { | ||
max-width: | max-width: 650px; | ||
margin: 0 auto | margin: 0 auto 10px auto; | ||
} | } | ||
/* Wiki InputBox Override | /* Wiki InputBox Override */ | ||
.bc-search-container input.mw-ui-input { | .bc-search-container input.mw-ui-input { | ||
padding: | padding: 16px; | ||
border-radius: | border-radius: 50px; | ||
border: | border: 2px solid rgba(255,255,255,0.2); | ||
box-shadow: 0 4px | box-shadow: 0 4px 15px rgba(0,0,0,0.15); | ||
font-size: 1.1rem; | font-size: 1.1rem; | ||
width: 100%; | width: 100%; | ||
| Line 66: | Line 75: | ||
.bc-meta { | .bc-meta { | ||
font-size: 0.9rem; | font-size: 0.9rem; | ||
opacity: 0. | opacity: 0.8; | ||
margin-top: | margin-top: 25px; | ||
color: #e0f2f1; /* Light teal text */ | |||
} | } | ||
| Line 73: | Line 83: | ||
.bc-grid { | .bc-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(auto-fit, minmax( | grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | ||
gap: | gap: 30px; | ||
margin-bottom: 30px; | margin-bottom: 30px; | ||
} | } | ||
| Line 80: | Line 90: | ||
.bc-2col { | .bc-2col { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(auto-fit, minmax( | grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); | ||
gap: | gap: 30px; | ||
margin-bottom: 30px; | margin-bottom: 30px; | ||
} | } | ||
| Line 88: | Line 98: | ||
.bc-card { | .bc-card { | ||
background: white; | background: white; | ||
border: | /* Removed the grey border, replaced with shadow and top-accent */ | ||
border: none; | |||
border-top: 5px solid var(--bc-blue); /* The "Modern Border" you requested */ | |||
border-radius: var(--bc-radius); | border-radius: var(--bc-radius); | ||
padding: | padding: 30px; | ||
transition: transform 0.2s ease, box-shadow 0.2s ease; | transition: transform 0.2s ease, box-shadow 0.2s ease; | ||
height: 100%; | height: 100%; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
box-shadow: var(--bc-shadow); /* Makes it pop off the gray background */ | |||
} | } | ||
.bc-card:hover { | .bc-card:hover { | ||
transform: translateY(- | transform: translateY(-4px); | ||
box-shadow: var(--bc-shadow-hover); | box-shadow: var(--bc-shadow-hover); | ||
} | } | ||
| Line 103: | Line 116: | ||
.bc-card h2 { | .bc-card h2 { | ||
margin-top: 0; | margin-top: 0; | ||
font-size: 1. | font-size: 1.4rem; | ||
font-weight: 700; | |||
color: var(--bc-blue); | color: var(--bc-blue); | ||
border-bottom: 2px solid var(--bc-accent); | border-bottom: 2px solid var(--bc-accent); | ||
padding-bottom: | padding-bottom: 12px; | ||
margin-bottom: | margin-bottom: 20px; | ||
} | } | ||
.bc-subtle { | .bc-subtle { | ||
color: var(--bc-text-muted); | color: var(--bc-text-muted); | ||
font-size: | font-size: 1rem; | ||
margin-bottom: | margin-bottom: 20px; | ||
line-height: 1.5; | |||
} | } | ||
| Line 120: | Line 135: | ||
display: grid; | display: grid; | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
gap: | gap: 12px; | ||
} | } | ||
.bc-btn { | .bc-btn { | ||
display: block; | display: block; | ||
background: | background: white; | ||
padding: | padding: 14px 18px; | ||
border-radius: 6px; | border-radius: 6px; | ||
text-decoration: none; | text-decoration: none; | ||
color: var(--bc-blue); | color: var(--bc-blue); | ||
font-weight: 600; | font-weight: 600; | ||
transition: | transition: all 0.2s; | ||
border-left: | border: 1px solid var(--bc-border); | ||
border-left: 5px solid var(--bc-blue); /* Stronger left accent */ | |||
box-shadow: 0 2px 4px rgba(0,0,0,0.03); | |||
} | } | ||
.bc-btn:hover { | .bc-btn:hover { | ||
background: | background: var(--bc-blue); | ||
color: white; /* Invert colors on hover for modern feel */ | |||
text-decoration: none; | text-decoration: none; | ||
border-left-color: var(--bc-blue-dark); | |||
} | } | ||
.bc-btn strong { | .bc-btn strong { | ||
display: block; | display: block; | ||
color: | color: inherit; /* Matches parent color (turns white on hover) */ | ||
font-size: 0. | font-size: 0.85rem; | ||
margin-bottom: | margin-bottom: 3px; | ||
text-transform: uppercase; | |||
letter-spacing: 0.5px; | |||
opacity: 0.9; | |||
} | } | ||
.bc-btn span { | .bc-btn span { | ||
font-size: | font-size: 1.05rem; | ||
} | } | ||
| Line 154: | Line 176: | ||
/* "Did You Know" boxes */ | /* "Did You Know" boxes */ | ||
.bc-did-you-know { | .bc-did-you-know { | ||
background: #fff8e1; | background: #fff8e1; | ||
border-left: | border-left: 5px solid #ffc107; | ||
padding: | padding: 20px; | ||
margin-top: | margin-top: 25px; | ||
border-radius: 4px; | border-radius: 4px; | ||
font-size: 0.95rem; | font-size: 0.95rem; | ||
box-shadow: inset 0 0 10px rgba(0,0,0,0.02); | |||
} | } | ||
| Line 165: | Line 188: | ||
margin-top: 0; | margin-top: 0; | ||
color: #b78a02; | color: #b78a02; | ||
font-size: | font-size: 0.9rem; | ||
font-weight: 800; | |||
text-transform: uppercase; | text-transform: uppercase; | ||
letter-spacing: 1px; | letter-spacing: 1px; | ||
margin-bottom: 8px; | |||
} | } | ||
/* Clean Lists | /* Clean Lists */ | ||
.bc-cleanlist ul { | .bc-cleanlist ul { | ||
list-style: none; | list-style: none; | ||
| Line 178: | Line 203: | ||
.bc-cleanlist li { | .bc-cleanlist li { | ||
padding: | padding: 10px 0; | ||
border-bottom: 1px solid #f0f0f0; | border-bottom: 1px solid #f0f0f0; | ||
font-size: 1.05rem; | |||
} | } | ||
.bc-cleanlist li:last-child { | .bc-cleanlist li:last-child { | ||
border-bottom: none; | border-bottom: none; | ||
} | |||
/* Links inside lists */ | |||
.bc-cleanlist a { | |||
color: var(--bc-blue); | |||
font-weight: 500; | |||
text-decoration: none; | |||
} | |||
.bc-cleanlist a:hover { | |||
text-decoration: underline; | |||
color: var(--bc-blue-dark); | |||
} | } | ||
| Line 189: | Line 226: | ||
.bc-linkgrid { | .bc-linkgrid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(auto-fill, minmax( | grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); | ||
gap: | gap: 20px; | ||
} | } | ||
| Line 196: | Line 233: | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
padding: | padding: 20px; | ||
background: # | background: #ffffff; | ||
border: 1px solid #eee; | |||
border-radius: var(--bc-radius); | border-radius: var(--bc-radius); | ||
text-decoration: none; | text-decoration: none; | ||
color: var(--bc-text); | color: var(--bc-text); | ||
transition: | transition: all 0.2s; | ||
box-shadow: 0 2px 4px rgba(0,0,0,0.03); | |||
} | } | ||
.bc-linktile a:hover { | .bc-linktile a:hover { | ||
background: var(--bc- | background: white; | ||
border-color: var(--bc-blue); | |||
transform: translateY(-2px); | |||
box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |||
} | } | ||
.bc-linkicon { | .bc-linkicon { | ||
font-size: | font-size: 28px; | ||
margin-right: 15px; | margin-right: 15px; | ||
} | } | ||
| Line 219: | Line 261: | ||
.bc-linktitle { | .bc-linktitle { | ||
font-weight: | font-weight: 700; | ||
color: var(--bc-blue); | color: var(--bc-blue); | ||
font-size: 1.1rem; | |||
} | } | ||
.bc-linkdesc { | .bc-linkdesc { | ||
font-size: 0. | font-size: 0.85rem; | ||
color: var(--bc-text-muted); | color: var(--bc-text-muted); | ||
margin-top: 4px; | |||
} | } | ||
/* | /* --- VECTOR SKIN OVERRIDES (Logo/Header fixes) --- */ | ||
.mw-logo-wordmark, | .mw-logo-wordmark, | ||
.mw-logo-tagline { | .mw-logo-tagline { | ||
| Line 234: | Line 278: | ||
} | } | ||
.mw-logo a, | .mw-logo a, | ||
.mw-logo a * { | .mw-logo a * { | ||
| Line 241: | Line 284: | ||
} | } | ||
.vector-header { | .vector-header { | ||
background: #fff; | background: #fff; | ||
| Line 257: | Line 299: | ||
} | } | ||
.mw-header { | .mw-header { | ||
height: 90px; | height: 90px; | ||
| Line 265: | Line 306: | ||
} | } | ||
.mw-header, | .mw-header, | ||
.vector-header, | .vector-header, | ||
| Line 272: | Line 312: | ||
} | } | ||
.vector-header-start { | .vector-header-start { | ||
margin-left: 0 !important; | margin-left: 0 !important; | ||
| Line 278: | Line 317: | ||
} | } | ||
#mw-panel-button, | #mw-panel-button, | ||
.vector-main-menu-dropdown { | .vector-main-menu-dropdown { | ||
| Line 284: | Line 322: | ||
} | } | ||
.mw-logo { | .mw-logo { | ||
display: flex; | display: flex; | ||
| Line 298: | Line 335: | ||
} | } | ||
.mw-parser-output > p:empty, | .mw-parser-output > p:empty, | ||
.mw-parser-output > p > br:only-child { | .mw-parser-output > p > br:only-child { | ||