|
|
| Line 1: |
Line 1: |
| /* =========================== | | /* Dark mode styles */ |
| InsaneUO-inspired Timeless skin tweaks
| | body.dark-mode { |
| Paste into MediaWiki:Common.css
| | background-color: #111 !important; |
| =========================== */
| | color: #eee !important; |
| | |
| /* ---------- Variables (edit to taste) ---------- */
| |
| :root{
| |
| --iuo-accent: #1f9d4a; /* green accent used for CTAs */
| |
| --iuo-dark: #0f1112; /* header/footer background */
| |
| --iuo-muted: #6b6f75; /* muted text */
| |
| --iuo-bg: #f4f6f8; /* page background */
| |
| --iuo-card: #ffffff; /* content card background */
| |
| --iuo-shadow: 0 6px 20px rgba(17,20,24,0.08);
| |
| --max-width: 1200px;
| |
| --radius: 10px;
| |
| }
| |
| | |
| /* ---------- Global page setup ---------- */
| |
| html, body {
| |
| background: var(--iuo-bg);
| |
| font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
| |
| color: #222;
| |
| -webkit-font-smoothing: antialiased;
| |
| -moz-osx-font-smoothing: grayscale;
| |
| }
| |
| | |
| /* Container: center main content like the reference */
| |
| #content,
| |
| .mw-body {
| |
| max-width: var(--max-width);
| |
| margin: 1.25rem auto;
| |
| padding: 1rem;
| |
| }
| |
| | |
| /* ---------- Header / Branding ---------- */
| |
| /* Make the Timeless header darker, center logo + site title */
| |
| #mw-head {
| |
| background: linear-gradient(180deg, rgba(15,17,18,0.98), rgba(15,17,18,0.95));
| |
| border-bottom: 1px solid rgba(255,255,255,0.02);
| |
| position: sticky;
| |
| top: 0;
| |
| z-index: 1200;
| |
| box-shadow: 0 2px 8px rgba(3,4,6,0.06);
| |
| }
| |
| | |
| /* center the brand within the header */
| |
| #mw-head .mw-shell {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| gap: 1rem;
| |
| padding: 10px 1rem;
| |
| max-width: var(--max-width);
| |
| margin: 0 auto;
| |
| }
| |
| | |
| /* logo + title group */
| |
| #p-logo, #mw-site-name {
| |
| display: flex;
| |
| align-items: center;
| |
| }
| |
| | |
| /* logo sizing - change width to match your logo */
| |
| #p-logo img {
| |
| width: 56px;
| |
| height: auto;
| |
| border-radius: 6px;
| |
| box-shadow: 0 4px 10px rgba(0,0,0,0.25);
| |
| margin-right: 0.75rem;
| |
| }
| |
| | |
| /* site title look */
| |
| #mw-site-name a, #p-logo a {
| |
| color: #fff;
| |
| text-decoration: none;
| |
| font-weight: 700;
| |
| font-size: 1.25rem;
| |
| letter-spacing: -0.2px;
| |
| }
| |
| | |
| /* nav links in header (compact) */
| |
| #mw-head .mw-navigation, #mw-head .mw-navigation a {
| |
| color: rgba(255,255,255,0.9);
| |
| font-weight: 600;
| |
| }
| |
| #mw-head .mw-navigation a:hover {
| |
| color: var(--iuo-accent);
| |
| text-decoration: none;
| |
| }
| |
| | |
| /* small discord/play CTAs to the right */
| |
| #iuo-top-cta {
| |
| display: flex;
| |
| gap: 0.5rem;
| |
| align-items: center;
| |
| }
| |
| .iuo-cta {
| |
| background: transparent;
| |
| border: 1px solid rgba(255,255,255,0.08);
| |
| color: #fff;
| |
| padding: 6px 10px;
| |
| border-radius: 8px;
| |
| font-weight: 600;
| |
| text-decoration: none;
| |
| }
| |
| .iuo-cta:hover { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.12); }
| |
| | |
| /* ---------- Hero / Intro ---------- */
| |
| /* Create a large hero card just after the header */
| |
| #mw-content-text > .iuo-hero {
| |
| background-image: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
| |
| background-size: cover;
| |
| border-radius: var(--radius);
| |
| padding: 2rem;
| |
| margin-bottom: 1rem;
| |
| box-shadow: var(--iuo-shadow);
| |
| display: grid;
| |
| grid-template-columns: 1fr;
| |
| gap: 1rem;
| |
| }
| |
| | |
| /* hero heading */
| |
| .iuo-hero h1 {
| |
| margin: 0 0 0.5rem 0;
| |
| color: #fff;
| |
| text-shadow: 0 2px 8px rgba(0,0,0,0.45);
| |
| font-size: 2rem;
| |
| }
| |
| | |
| /* hero subtitle */
| |
| .iuo-hero p.lead {
| |
| color: rgba(255,255,255,0.85);
| |
| margin: 0;
| |
| font-size: 1rem;
| |
| }
| |
| | |
| /* If you have a hero image, place it right */
| |
| .iuo-hero .iuo-hero-img {
| |
| width: 100%;
| |
| border-radius: 8px;
| |
| overflow: hidden;
| |
| margin-top: 1rem;
| |
| }
| |
| | |
| /* ---------- Content cards ---------- */
| |
| .mw-body h2, .mw-body h3 {
| |
| color: #222;
| |
| font-weight: 700;
| |
| margin-top: 1.25rem;
| |
| margin-bottom: 0.6rem;
| |
| }
| |
| | |
| /* turn content body into card-like look */
| |
| .mw-body-content, .mw-parser-output {
| |
| background: var(--iuo-card);
| |
| border-radius: var(--radius);
| |
| padding: 1.25rem 1.5rem;
| |
| box-shadow: var(--iuo-shadow);
| |
| }
| |
| | |
| /* images inside content: rounded and shadowed */
| |
| .mw-parser-output img {
| |
| border-radius: 8px;
| |
| box-shadow: 0 6px 22px rgba(9,11,12,0.06);
| |
| max-width: 100%;
| |
| height: auto;
| |
| }
| |
| | |
| /* staff/project thumbnails grid */
| |
| .iuo-team-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
| |
| gap: 1rem;
| |
| align-items: start;
| |
| }
| |
| .iuo-team-grid .member {
| |
| text-align: center;
| |
| background: rgba(245,247,248,0.7);
| |
| padding: 0.75rem;
| |
| border-radius: 8px;
| |
| }
| |
| .iuo-team-grid .member img {
| |
| width: 86px;
| |
| height: 86px;
| |
| object-fit: cover;
| |
| border-radius: 999px;
| |
| margin-bottom: 0.5rem;
| |
| }
| |
| | |
| /* ---------- News / list styling ---------- */
| |
| .iuo-news-list {
| |
| list-style: none;
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
| .iuo-news-list li {
| |
| padding: 0.75rem 0;
| |
| border-bottom: 1px dashed rgba(30,33,36,0.04);
| |
| display: flex;
| |
| gap: 1rem;
| |
| align-items: center;
| |
| }
| |
| .iuo-news-list li time {
| |
| color: var(--iuo-muted);
| |
| min-width: 120px;
| |
| font-size: 0.9rem;
| |
| }
| |
| | |
| /* news title link */
| |
| .iuo-news-list li a {
| |
| font-weight: 700;
| |
| color: #111;
| |
| text-decoration: none;
| |
| }
| |
| .iuo-news-list li a:hover { color: var(--iuo-accent); }
| |
| | |
| /* ---------- Sidebar (navigation) ---------- */
| |
| #mw-navigation {
| |
| background: transparent;
| |
| border-radius: 8px;
| |
| padding: 0.5rem;
| |
| }
| |
| #mw-navigation .portal {
| |
| background: rgba(255,255,255,0.03);
| |
| border-radius: 8px;
| |
| padding: 0.5rem;
| |
| }
| |
| #mw-navigation a {
| |
| color: var(--iuo-dark);
| |
| font-weight: 600;
| |
| }
| |
| #mw-navigation .mw-portlet h3 {
| |
| color: #444;
| |
| }
| |
| | |
| /* ---------- Buttons and CTAs ---------- */
| |
| .button, .mw-button {
| |
| background: var(--iuo-accent);
| |
| color: #fff !important;
| |
| border: 0;
| |
| padding: 0.55rem 0.85rem;
| |
| border-radius: 8px;
| |
| font-weight: 700;
| |
| text-decoration: none;
| |
| display: inline-block;
| |
| }
| |
| .button:hover, .mw-button:hover {
| |
| transform: translateY(-1px);
| |
| box-shadow: 0 6px 18px rgba(31,157,74,0.16);
| |
| }
| |
| | |
| /* special donate CTA (match Insane UO's "Buy me a coffee" emphasis) */
| |
| .iuo-donate {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| gap: 0.5rem;
| |
| padding: 0.5rem 0.75rem;
| |
| border-radius: 10px;
| |
| background: linear-gradient(90deg,var(--iuo-accent), #0b7b3a);
| |
| color: #fff;
| |
| font-weight: 800;
| |
| }
| |
| | |
| /* ---------- Footer ---------- */
| |
| #footer {
| |
| margin-top: 2rem;
| |
| background: var(--iuo-dark);
| |
| color: rgba(255,255,255,0.78);
| |
| padding: 1rem 0;
| |
| border-top: 1px solid rgba(255,255,255,0.02);
| |
| } | | } |
| #footer a { color: rgba(255,255,255,0.9); }
| |
|
| |
|
| /* ---------- Responsive tweaks ---------- */
| | body.dark-mode a { |
| @media (max-width: 900px) {
| | color: #80c0ff !important; |
| #mw-head .mw-shell { flex-direction: column; gap: 8px; align-items: stretch; }
| |
| .iuo-hero { padding: 1rem; }
| |
| .iuo-team-grid { grid-template-columns: repeat(2, 1fr); }
| |
| } | | } |
|
| |
|
| /* ---------- Utility classes for templates ---------- */
| | body.dark-mode #mw-panel, |
| .iuo-callout { | | body.dark-mode #mw-head, |
| border-left: 4px solid var(--iuo-accent);
| | body.dark-mode #footer { |
| background: linear-gradient(180deg, rgba(31,157,74,0.03), transparent);
| | background: #222 !important; |
| padding: 0.8rem;
| |
| border-radius: 6px;
| |
| margin: 0.75rem 0;
| |
| color: #111;
| |
| } | | } |
