MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Constrain external images in article content to a reasonable size */
.mw-parser-output img:not(.mw-file-element) {
max-width: 200px;
max-height: 250px;
width: auto;
height: auto;
}
/* Hero banner image on Main Page - override the constraint above */
.mw-parser-output .cs-hero-banner img {
max-width: 100% !important;
max-height: 350px !important;
width: 100% !important;
height: auto !important;
object-fit: cover;
border-radius: 6px;
display: block;
}
.cs-hero-banner {
text-align: center;
margin-bottom: 1em;
overflow: hidden;
border-radius: 6px;
}
/* ══════════════════════════════════════════════════════════════════════
DevClub neon theme — full-page dark mode
══════════════════════════════════════════════════════════════════════ */
/* ── Full-page dark shell (Vector 2022 skin) ── */
body.page-DevClub {
background: #0a0a1a !important;
}
body.page-DevClub .vector-header,
body.page-DevClub .vector-header-container {
background: #0a0a1a !important;
border-bottom: 1px solid rgba(0, 255, 136, 0.08) !important;
}
body.page-DevClub .vector-header .mw-logo-wordmark,
body.page-DevClub .vector-header .mw-logo-tagline {
filter: brightness(10);
}
body.page-DevClub .vector-header a,
body.page-DevClub .vector-header .vector-menu-heading {
color: #aaa !important;
}
body.page-DevClub .vector-header a:hover {
color: #00ff88 !important;
}
body.page-DevClub .mw-body,
body.page-DevClub .vector-body,
body.page-DevClub .mw-page-container {
background: #0a0a1a !important;
color: #e0e0e0 !important;
}
body.page-DevClub .vector-column-start,
body.page-DevClub .vector-main-menu,
body.page-DevClub .vector-main-menu-container {
background: #0a0a1a !important;
}
/* Sidebar */
body.page-DevClub .vector-main-menu a,
body.page-DevClub .vector-main-menu .vector-menu-heading {
color: #888 !important;
}
body.page-DevClub .vector-main-menu a:hover {
color: #00ff88 !important;
}
/* Tabs (Page, Discussion, Read, etc.) */
body.page-DevClub .vector-tabs a,
body.page-DevClub .vector-menu-tabs a {
color: #888 !important;
}
body.page-DevClub .vector-tabs a:hover,
body.page-DevClub .vector-menu-tabs a:hover {
color: #00ff88 !important;
}
body.page-DevClub .vector-tabs .selected a,
body.page-DevClub .mw-list-item-active a {
color: #00ff88 !important;
}
/* Page heading */
body.page-DevClub #firstHeading,
body.page-DevClub .mw-page-title-main,
body.page-DevClub .mw-first-heading {
color: #00ff88 !important;
}
/* TOC sidebar */
body.page-DevClub .vector-toc,
body.page-DevClub .vector-toc-landmark,
body.page-DevClub .sidebar-toc {
background: #0a0a1a !important;
border-color: rgba(0, 255, 136, 0.08) !important;
}
body.page-DevClub .vector-toc a,
body.page-DevClub .sidebar-toc a {
color: #777 !important;
}
body.page-DevClub .vector-toc a:hover,
body.page-DevClub .sidebar-toc a:hover {
color: #00ff88 !important;
}
body.page-DevClub .vector-toc .vector-toc-toggle,
body.page-DevClub .sidebar-toc .sidebar-toc-toggle {
color: #555 !important;
}
/* Footer */
body.page-DevClub .vector-footer,
body.page-DevClub #footer {
background: #0a0a1a !important;
border-top: 1px solid rgba(0, 255, 136, 0.08) !important;
color: #555 !important;
}
body.page-DevClub .vector-footer a,
body.page-DevClub #footer a {
color: #555 !important;
}
body.page-DevClub .vector-footer a:hover,
body.page-DevClub #footer a:hover {
color: #00ff88 !important;
}
/* Categories */
body.page-DevClub .mw-normal-catlinks,
body.page-DevClub .catlinks {
background: rgba(0, 255, 136, 0.03) !important;
border: 1px solid rgba(0, 255, 136, 0.08) !important;
color: #666 !important;
}
body.page-DevClub .catlinks a {
color: #00aaff !important;
}
/* Search box */
body.page-DevClub .vector-search-box input {
background: #12122a !important;
border-color: rgba(0, 255, 136, 0.15) !important;
color: #ccc !important;
}
/* Tools dropdown, misc menus */
body.page-DevClub .vector-menu-content,
body.page-DevClub .vector-dropdown-content {
background: #12122a !important;
border-color: rgba(0, 255, 136, 0.12) !important;
}
body.page-DevClub .vector-menu-content a {
color: #aaa !important;
}
body.page-DevClub .vector-menu-content a:hover {
color: #00ff88 !important;
}
/* ── Content container (seamless, no rounded border) ── */
.dc-page {
background: #0a0a1a;
color: #e0e0e0;
border-radius: 0;
padding: 1em 0 2em;
margin: 0;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
position: relative;
overflow: hidden;
}
.dc-page::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background:
radial-gradient(ellipse at 15% 0%, rgba(0, 255, 136, 0.10) 0%, transparent 50%),
radial-gradient(ellipse at 85% 100%, rgba(0, 170, 255, 0.07) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
.dc-page > * { position: relative; z-index: 1; }
/* ── Header ── */
.dc-header {
text-align: center;
padding: 2em 0 1.5em;
border-bottom: 1px solid rgba(0, 255, 136, 0.12);
margin-bottom: 2em;
}
.dc-title {
font-size: 3.2em;
font-weight: 800;
letter-spacing: 0.06em;
color: #00ff88;
text-shadow: 0 0 30px rgba(0, 255, 136, 0.35), 0 0 80px rgba(0, 255, 136, 0.10);
margin: 0;
line-height: 1.2;
}
.dc-tagline {
color: #777;
font-size: 0.95em;
margin-top: 0.6em;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 400;
}
/* ── Link pills ── */
.dc-links {
display: flex;
justify-content: center;
gap: 0.8em;
margin-top: 1.5em;
flex-wrap: wrap;
}
.dc-links a {
color: #00aaff !important;
text-decoration: none !important;
padding: 0.4em 1.2em;
border: 1px solid rgba(0, 170, 255, 0.25);
border-radius: 20px;
font-size: 0.85em;
font-weight: 600;
transition: all 0.25s;
}
.dc-links a:hover {
background: rgba(0, 170, 255, 0.12);
border-color: #00aaff;
box-shadow: 0 0 15px rgba(0, 170, 255, 0.15);
color: #fff !important;
}
/* ── Section headings ── */
.dc-page h2,
.dc-page .mw-heading2 h2 {
color: #00ff88 !important;
font-size: 1.2em !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
border: none !important;
border-bottom: 1px solid rgba(0, 255, 136, 0.12) !important;
padding-bottom: 0.5em !important;
margin-top: 2.5em !important;
text-shadow: 0 0 10px rgba(0, 255, 136, 0.15);
}
.dc-page .mw-editsection a {
color: rgba(0, 255, 136, 0.3) !important;
font-size: 0.75em;
}
.dc-page .mw-editsection a:hover {
color: #00ff88 !important;
}
/* ── Intro ── */
.dc-intro {
font-size: 1.05em;
line-height: 1.8;
color: #aaa;
max-width: 650px;
margin: 0 auto 0.5em;
text-align: center;
}
/* ── Stats ── */
.dc-stats {
display: flex;
justify-content: center;
gap: 3em;
margin: 2em 0 0.5em;
flex-wrap: wrap;
}
.dc-stat { text-align: center; }
.dc-stat-num {
color: #00ff88;
font-size: 2.4em;
font-weight: 800;
line-height: 1;
text-shadow: 0 0 20px rgba(0, 255, 136, 0.25);
}
.dc-stat-label {
color: #555;
font-size: 0.7em;
text-transform: uppercase;
letter-spacing: 0.15em;
margin-top: 0.3em;
}
/* ── Cards ── */
.dc-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1em;
margin: 1.2em 0;
}
.dc-card {
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(0, 255, 136, 0.08);
border-radius: 10px;
padding: 1.4em;
transition: all 0.25s;
}
.dc-card:hover {
border-color: rgba(0, 255, 136, 0.3);
background: rgba(0, 255, 136, 0.03);
box-shadow: 0 0 25px rgba(0, 255, 136, 0.05);
transform: translateY(-2px);
}
.dc-card-title {
color: #00ff88;
font-weight: 700;
font-size: 1.05em;
margin-bottom: 0.5em;
}
.dc-card div {
color: #888;
font-size: 0.88em;
line-height: 1.6;
}
/* ── Timeline ── */
.dc-timeline {
border-left: 2px solid rgba(0, 255, 136, 0.15);
margin: 1.2em 0 1em 0.6em;
padding-left: 1.8em;
}
.dc-event {
position: relative;
margin-bottom: 1.8em;
}
.dc-event::before {
content: '';
position: absolute;
left: -2.15em;
top: 0.4em;
width: 10px;
height: 10px;
background: #00ff88;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}
.dc-event-date {
color: #00aaff;
font-size: 0.78em;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.dc-event-title {
color: #e0e0e0;
font-weight: 700;
font-size: 1.05em;
margin: 0.15em 0;
}
.dc-event-desc {
color: #777;
font-size: 0.88em;
line-height: 1.6;
}
/* ── Partner tags ── */
.dc-partners {
display: flex;
flex-wrap: wrap;
gap: 0.6em;
margin: 1em 0;
}
.dc-tag {
background: rgba(0, 170, 255, 0.06);
border: 1px solid rgba(0, 170, 255, 0.18);
color: #00aaff;
padding: 0.3em 1em;
border-radius: 16px;
font-size: 0.82em;
font-weight: 500;
transition: all 0.2s;
}
.dc-tag:hover {
background: rgba(0, 170, 255, 0.12);
border-color: rgba(0, 170, 255, 0.4);
}
/* ── Footer ── */
.dc-footer {
text-align: center;
margin-top: 2.5em;
padding-top: 1.2em;
border-top: 1px solid rgba(0, 255, 136, 0.08);
color: #444;
font-size: 0.85em;
}
.dc-footer a {
color: #444 !important;
text-decoration: none !important;
margin: 0 0.8em;
transition: color 0.2s;
}
.dc-footer a:hover {
color: #00ff88 !important;
}
/* ── Bullet lists ── */
.dc-page ul { list-style: none; padding-left: 0; }
.dc-page ul li {
padding: 0.35em 0 0.35em 1.4em;
position: relative;
color: #999;
}
.dc-page ul li::before {
content: '\25B9';
position: absolute;
left: 0;
color: #00ff88;
font-weight: bold;
}
/* ── Wiki tables ── */
.dc-page .wikitable {
background: transparent !important;
border: 1px solid rgba(0, 255, 136, 0.12) !important;
color: #c0c0c0;
}
.dc-page .wikitable th {
background: rgba(0, 255, 136, 0.06) !important;
color: #00ff88 !important;
border-color: rgba(0, 255, 136, 0.12) !important;
}
.dc-page .wikitable td {
border-color: rgba(0, 255, 136, 0.08) !important;
background: transparent !important;
}
/* ── Content links ── */
.dc-page a:not(.dc-links a):not(.dc-footer a):not(.mw-editsection a) {
color: #00aaff !important;
}
/* Right sidebar panels (Tools, Appearance) */
body.page-DevClub .vector-column-end,
body.page-DevClub .vector-settings,
body.page-DevClub .vector-page-tools,
body.page-DevClub .vector-page-tools-landmark,
body.page-DevClub .vector-pinnable-header,
body.page-DevClub .vector-pinnable-element,
body.page-DevClub #vector-page-tools,
body.page-DevClub #vector-page-tools .vector-menu-content,
body.page-DevClub .vector-page-toolbar-container,
body.page-DevClub .mw-portlet,
body.page-DevClub .mw-portlet-body {
background: #0a0a1a !important;
color: #888 !important;
border-color: rgba(0, 255, 136, 0.08) !important;
}
body.page-DevClub .mw-portlet a {
color: #888 !important;
}
body.page-DevClub .mw-portlet a:hover {
color: #00ff88 !important;
}
body.page-DevClub .vector-pinnable-header-label,
body.page-DevClub .mw-portlet h3,
body.page-DevClub .vector-menu-heading {
color: #666 !important;
}
body.page-DevClub .vector-pinnable-header-toggle-button,
body.page-DevClub .cdx-button {
color: #555 !important;
background: rgba(0, 255, 136, 0.05) !important;
border-color: rgba(0, 255, 136, 0.1) !important;
}
/* Appearance panel radios/labels */
body.page-DevClub .cdx-radio__label,
body.page-DevClub .cdx-label__label__text,
body.page-DevClub .vector-settings label {
color: #888 !important;
}
/* Sticky header area */
body.page-DevClub .vector-sticky-header {
background: #0a0a1a !important;
border-bottom: 1px solid rgba(0, 255, 136, 0.08) !important;
}
body.page-DevClub .vector-sticky-header a {
color: #aaa !important;
}