MediaWiki:Common.css: Difference between revisions
No edit summary |
add styling for FPV parts |
||
| Line 517: | Line 517: | ||
.mw-body a.new[title*="User talk:"] { | .mw-body a.new[title*="User talk:"] { | ||
font-style: italic; | font-style: italic; | ||
} | |||
/* FPV part infobox styling */ | |||
/* FPV Part Infobox Styling */ | |||
.fpvpart-infobox { | |||
float: right; | |||
width: 300px; | |||
margin: 0 0 1em 1em; | |||
border: 1px solid #aaa; | |||
background: #f9f9f9; | |||
padding: 5px; | |||
font-size: 88%; | |||
clear: right; | |||
} | |||
.fpvpart-header { | |||
background: #333; | |||
color: white; | |||
padding: 5px; | |||
font-weight: bold; | |||
text-align: center; | |||
font-size: 110%; | |||
} | |||
.fpvpart-type { | |||
background: #666; | |||
color: white; | |||
padding: 3px; | |||
text-align: center; | |||
font-size: 90%; | |||
} | |||
.fpvpart-specs { | |||
width: 100%; | |||
margin: 5px 0; | |||
} | |||
.fpvpart-specs th { | |||
background: #e0e0e0; | |||
padding: 3px; | |||
text-align: left; | |||
width: 40%; | |||
font-weight: bold; | |||
} | |||
.fpvpart-specs td { | |||
padding: 3px; | |||
} | |||
.fpvpart-status { | |||
padding: 5px; | |||
text-align: center; | |||
font-weight: bold; | |||
margin: 5px 0; | |||
} | |||
.fpvpart-status.status-IN_STOCK { | |||
background: #90EE90; | |||
color: darkgreen; | |||
} | |||
.fpvpart-status.status-OUT_OF_STOCK { | |||
background: #FFB6C1; | |||
color: darkred; | |||
} | |||
.fpvpart-status.status-LIMITED { | |||
background: #FFD700; | |||
color: #8B4513; | |||
} | |||
.fpvpart-notes { | |||
background: #ffffcc; | |||
border: 1px solid #cccc00; | |||
padding: 5px; | |||
margin-top: 5px; | |||
font-size: 85%; | |||
} | } | ||
Revision as of 13:39, 14 August 2025
/* EJ Fox MediaWiki Theme - Consistent with main site */
/* ==================== IMPORTS ==================== */
@import url('https://fonts.googleapis.com/css2?family=Signika+Negative:wght@200;300;400;500;600;700;800&family=Red+Hat+Mono:wght@300;400&family=Fjalla+One:wght@400&display=swap');
/* ==================== ROOT VARIABLES ==================== */
:root {
/* Typography */
--font-primary: 'Signika Negative', sans-serif;
--font-mono: 'Red Hat Mono', monospace;
--font-heading: 'Fjalla One', sans-serif;
/* Font Sizes - slightly reduced */
--text-base: 1rem; /* 16px - reduced from 18px */
--text-lg: 1.125rem; /* 18px - reduced from 20px */
--text-sm: 0.875rem; /* 14px */
--text-xs: 0.75rem; /* 12px */
--text-3xl: 1.75rem; /* 28px - reduced from 30px */
--text-4xl: 2rem; /* 32px - reduced from 36px */
--text-5xl: 2.75rem; /* 44px - reduced from 48px */
/* Spacing - tightened up */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
/* Layout */
--max-width-3xl: 48rem; /* 768px */
--max-width-4xl: 56rem; /* 896px */
/* Transitions */
--transition-fast: 200ms ease-out;
--transition-normal: 300ms ease-out;
}
/* Light mode colors */
:root {
--bg-primary: rgb(250, 250, 250); /* zinc-50 */
--bg-secondary: rgb(244, 244, 245); /* zinc-100 */
--bg-tertiary: rgb(228, 228, 231); /* zinc-200 */
--border-light: rgb(228, 228, 231); /* zinc-200 */
--border-medium: rgb(212, 212, 216); /* zinc-300 */
--border-dark: rgb(161, 161, 170); /* zinc-400 */
--text-primary: rgb(39, 39, 42); /* zinc-800 */
--text-secondary: rgb(82, 82, 91); /* zinc-600 */
--text-tertiary: rgb(113, 113, 122); /* zinc-500 */
--text-muted: rgb(161, 161, 170); /* zinc-400 */
--accent-primary: rgb(22, 163, 74); /* green-600 */
--accent-error: rgb(220, 38, 38); /* red-600 */
--hover-bg: rgb(228, 228, 231, 0.3); /* zinc-200/30 */
--focus-ring: rgb(161, 161, 170); /* zinc-400 */
}
/* Dark mode colors */
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: rgb(24, 24, 27); /* zinc-900 */
--bg-secondary: rgb(39, 39, 42); /* zinc-800 */
--bg-tertiary: rgb(63, 63, 70); /* zinc-700 */
--border-light: rgb(63, 63, 70); /* zinc-700 */
--border-medium: rgb(82, 82, 91); /* zinc-600 */
--border-dark: rgb(113, 113, 122); /* zinc-500 */
--text-primary: rgb(244, 244, 245); /* zinc-100 */
--text-secondary: rgb(212, 212, 216); /* zinc-300 */
--text-tertiary: rgb(161, 161, 170); /* zinc-400 */
--text-muted: rgb(113, 113, 122); /* zinc-500 */
--accent-primary: rgb(74, 222, 128); /* green-400 */
--accent-error: rgb(248, 113, 113); /* red-400 */
--hover-bg: rgb(63, 63, 70, 0.3); /* zinc-700/30 */
--focus-ring: rgb(82, 82, 91); /* zinc-600 */
}
}
/* ==================== RESET & BASE ==================== */
/* Specific font overrides - don't use universal selector */
body, html,
#mw-page-base, #mw-head, #mw-panel, #content, #bodyContent,
.mw-body, .mw-body-content, .mw-content,
#p-logo, #p-navigation, #p-search, #p-tb, #p-lang,
.vectorTabs, .vectorMenu, .vectorMenuCheckbox,
#ca-edit, #ca-history, #ca-talk, #ca-viewsource,
.oo-ui-widget, .oo-ui-element, .oo-ui-layout,
#mw-head-base, .mw-wiki-logo, .vector-menu,
.mw-portlet, .mw-portlet-body, .mw-list-item,
input, select, textarea, button,
.suggestions, .suggestions-result,
.vector-menu-content,
.vector-menu-heading,
.vector-menu-content-list {
font-family: var(--font-primary) !important;
}
/* Force headings to use heading font */
h1, h2, h3, h4, h5, h6,
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6,
.firstHeading {
font-family: var(--font-heading) !important;
}
/* Force monospace where appropriate */
code, pre, kbd, samp, tt,
.mw-code, .mw-pre, .codehilite,
.mw-changeslist-time, .mw-diff-bytes,
#searchInput {
font-family: var(--font-mono) !important;
}
body {
background: var(--bg-primary) !important;
color: var(--text-primary) !important;
font-size: var(--text-base) !important;
line-height: 1.6 !important; /* Reduced from 2rem for tighter spacing */
margin: 0 !important;
padding: 0 !important;
transition: background-color var(--transition-normal), color var(--transition-normal) !important;
}
/* ==================== CLEANUP - Keep edit buttons visible ==================== */
#p-search,
#p-logo,
.mw-wiki-logo,
#footer,
.printfooter,
#catlinks,
#f-poweredbyico,
#f-copyrightico {
display: none !important;
}
/* Keep edit buttons visible - removed #p-views and #p-cactions from hidden list */
/* ==================== EDIT BUTTONS STYLING - Minimal ==================== */
#p-views, #p-cactions {
margin: var(--space-3) 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
#p-views ul, #p-cactions ul {
display: flex !important;
gap: var(--space-4) !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
#p-views li, #p-cactions li {
margin: 0 !important;
}
#p-views a, #p-cactions a {
color: var(--text-tertiary) !important;
font-family: var(--font-mono) !important;
font-size: var(--text-sm) !important;
text-decoration: none !important;
border-bottom: 1px dotted var(--border-medium) !important;
padding: 1px 2px !important;
transition: all var(--transition-fast) !important;
background: transparent !important;
border-radius: 0 !important;
}
#p-views a:hover, #p-cactions a:hover {
color: var(--text-primary) !important;
border-bottom-color: var(--text-primary) !important;
background: transparent !important;
}
/* ==================== LAYOUT ==================== */
.mw-body {
margin: 0 !important;
border: none !important;
padding: var(--space-6) !important; /* Reduced from space-8 */
background: transparent !important;
max-width: var(--max-width-3xl) !important;
margin: 0 auto !important;
}
#content {
margin-left: 0 !important;
background: transparent !important;
border: none !important;
}
/* ==================== TYPOGRAPHY ==================== */
.mw-body h1 {
color: var(--text-primary) !important;
font-family: var(--font-heading) !important;
font-size: var(--text-4xl) !important;
font-weight: 400 !important;
line-height: 1.2 !important;
margin: 0 0 var(--space-5) 0 !important; /* Reduced from space-6 */
border-bottom: none !important;
}
.mw-body h2 {
color: var(--text-primary) !important;
font-family: var(--font-heading) !important;
font-size: var(--text-3xl) !important;
font-weight: 400 !important;
line-height: 1.3 !important;
margin: var(--space-6) 0 var(--space-3) 0 !important; /* Reduced bottom margin */
border-bottom: 1px dotted var(--border-medium) !important;
padding-bottom: var(--space-2) !important;
}
.mw-body h3 {
color: var(--text-primary) !important;
font-family: var(--font-primary) !important;
font-size: var(--text-lg) !important;
font-weight: 600 !important;
margin: var(--space-5) 0 var(--space-3) 0 !important; /* Reduced margins */
}
/* Removed geometric symbols */
/* Body text */
.mw-body p {
color: var(--text-primary) !important;
font-family: var(--font-primary) !important;
font-size: var(--text-base) !important;
line-height: 1.6 !important; /* Reduced from 2rem */
margin-bottom: var(--space-4) !important; /* Reduced from space-6 */
}
/* ==================== LINKS - Clean and simple ==================== */
.mw-body a:not(.external) {
color: var(--text-primary) !important;
text-decoration: none !important;
border-bottom: 1px solid var(--border-medium) !important;
padding: 1px 2px !important;
transition: all var(--transition-fast) !important;
}
.mw-body a:not(.external):hover {
color: var(--text-primary) !important;
border-bottom-color: var(--text-primary) !important;
background: var(--hover-bg) !important;
}
/* External links - keep accent color and fix icon overlap */
.mw-body a.external {
color: var(--accent-primary) !important;
text-decoration: none !important;
border-bottom: 1px solid var(--accent-primary) !important;
padding: 1px 15px 1px 2px !important; /* Extra right padding for icon */
transition: all var(--transition-fast) !important;
}
.mw-body a.external:hover {
background: var(--hover-bg) !important;
border-bottom-color: var(--accent-primary) !important;
}
/* Fix external link icon positioning */
.mw-body .external {
background-position: right center !important;
background-repeat: no-repeat !important;
}
/* ==================== TABLES ==================== */
.wikitable {
background: var(--bg-secondary) !important;
border: 1px solid var(--border-light) !important;
border-collapse: collapse !important;
font-family: var(--font-mono) !important;
font-size: var(--text-sm) !important;
margin: var(--space-5) 0 !important; /* Reduced from space-6 */
width: 100% !important;
border-radius: 4px !important;
overflow: hidden !important;
}
.wikitable th {
background: var(--bg-tertiary) !important;
border: 1px solid var(--border-medium) !important;
color: var(--text-primary) !important;
padding: var(--space-3) !important; /* Reduced from space-4 */
font-weight: 600 !important;
text-align: left !important;
}
.wikitable td {
border: 1px solid var(--border-light) !important;
color: var(--text-primary) !important;
padding: var(--space-3) !important; /* Reduced from space-4 */
}
.wikitable tr:nth-child(even) td {
background: rgba(0, 0, 0, 0.02) !important;
}
@media (prefers-color-scheme: dark) {
.wikitable tr:nth-child(even) td {
background: rgba(255, 255, 255, 0.02) !important;
}
}
/* ==================== CODE ==================== */
code, pre {
font-family: var(--font-mono) !important;
font-feature-settings: "tnum", "zero" !important;
background: var(--bg-secondary) !important;
border: 1px solid var(--border-light) !important;
border-radius: 4px !important;
color: var(--text-primary) !important;
}
code {
padding: 2px 4px !important;
font-size: var(--text-sm) !important;
}
pre {
padding: var(--space-4) !important;
margin: var(--space-5) 0 !important; /* Reduced from space-6 */
overflow-x: auto !important;
line-height: 1.5 !important;
}
/* ==================== LISTS ==================== */
.mw-body ul, .mw-body ol {
margin: var(--space-3) 0 !important; /* Reduced from space-4 */
padding-left: var(--space-6) !important;
}
.mw-body li {
margin-bottom: var(--space-1) !important; /* Reduced from space-2 */
color: var(--text-primary) !important;
}
/* ==================== SPECIAL PAGES - Basic fixes only ==================== */
/* Fix overlapping issues on special pages */
.ns-special .mw-body {
padding: var(--space-4) !important;
line-height: 1.4 !important;
}
.ns-special .mw-body p {
margin-bottom: var(--space-3) !important;
line-height: 1.4 !important;
}
/* Recent Changes specific fixes */
.mw-changeslist-line {
margin-bottom: var(--space-2) !important;
line-height: 1.3 !important;
clear: both !important;
}
.mw-changeslist .mw-title {
display: inline !important;
margin-right: var(--space-2) !important;
}
.mw-changeslist-date {
margin-bottom: var(--space-3) !important;
font-weight: 600 !important;
}
/* Fix timestamps and metadata */
.mw-changeslist-time {
font-family: var(--font-mono) !important;
font-size: var(--text-sm) !important;
margin-right: var(--space-2) !important;
}
.mw-usertoollinks {
font-size: var(--text-xs) !important;
margin-left: var(--space-1) !important;
}
/* Fix diff links and counters */
.mw-diff-bytes {
font-family: var(--font-mono) !important;
font-size: var(--text-xs) !important;
margin: 0 var(--space-1) !important;
}
/* Fix summary text */
.comment {
font-style: italic !important;
color: var(--text-tertiary) !important;
margin-left: var(--space-2) !important;
}
/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
:root {
--text-base: 0.95rem; /* Slightly smaller on mobile */
}
.mw-body {
padding: var(--space-4) !important;
margin-left: 0 !important;
}
#mw-panel {
position: relative !important;
width: 100% !important;
margin: 0 0 var(--space-4) 0 !important; /* Reduced from space-6 */
backdrop-filter: blur(16px) !important;
background: rgba(var(--bg-secondary), 0.8) !important;
}
.mw-body h1 {
font-size: var(--text-3xl) !important;
}
.mw-body h2 {
font-size: var(--text-lg) !important;
}
/* Simple mobile edit buttons */
#p-views ul, #p-cactions ul {
flex-direction: column !important;
gap: var(--space-2) !important;
}
/* Mobile fixes for special pages */
.ns-special .mw-changeslist-line {
font-size: var(--text-sm) !important;
padding: var(--space-1) 0 !important;
}
.ns-special .mw-changeslist-time {
display: block !important;
margin-bottom: var(--space-1) !important;
}
}
/* ==================== SEARCH (if you want to show it) ==================== */
#searchform {
background: var(--bg-secondary) !important;
border: 1px solid var(--border-light) !important;
border-radius: 4px !important;
margin: var(--space-4) 0 !important;
overflow: hidden !important;
}
#searchInput {
background: transparent !important;
border: none !important;
color: var(--text-primary) !important;
font-family: var(--font-mono) !important;
font-size: var(--text-sm) !important;
padding: var(--space-2) var(--space-4) !important;
width: calc(100% - var(--space-8)) !important;
}
#searchInput::placeholder {
color: var(--text-muted) !important;
}
#searchInput:focus {
outline: none !important;
box-shadow: 0 0 0 1px var(--focus-ring) !important;
}
/* ==================== GEOMETRIC ACCENTS ==================== */
.mw-body::before {
content: "";
position: fixed;
top: var(--space-4);
right: var(--space-4);
width: 8px;
height: 8px;
background: var(--accent-primary);
border-radius: 50%;
z-index: 1000;
}
/* ==================== UNCREATED PAGES (RED LINKS) ==================== */
/* Override styles for non-existent pages */
.mw-body a.new,
.mw-body a.new:visited {
color: var(--accent-error) !important;
border-bottom-color: var(--accent-error) !important;
opacity: 0.8;
}
.mw-body a.new:hover {
color: var(--accent-error) !important;
border-bottom-color: var(--accent-error) !important;
background: var(--hover-bg) !important;
opacity: 1;
}
/* Question mark indicator for uncreated pages */
.mw-body a.new::after {
content: "?";
font-size: 0.75em;
margin-left: 2px;
opacity: 0.6;
font-weight: 400;
}
/* Special styling for uncreated user/talk pages */
.mw-body a.new.mw-userlink,
.mw-body a.new[title*="User:"],
.mw-body a.new[title*="User talk:"] {
font-style: italic;
}
/* FPV part infobox styling */
/* FPV Part Infobox Styling */
.fpvpart-infobox {
float: right;
width: 300px;
margin: 0 0 1em 1em;
border: 1px solid #aaa;
background: #f9f9f9;
padding: 5px;
font-size: 88%;
clear: right;
}
.fpvpart-header {
background: #333;
color: white;
padding: 5px;
font-weight: bold;
text-align: center;
font-size: 110%;
}
.fpvpart-type {
background: #666;
color: white;
padding: 3px;
text-align: center;
font-size: 90%;
}
.fpvpart-specs {
width: 100%;
margin: 5px 0;
}
.fpvpart-specs th {
background: #e0e0e0;
padding: 3px;
text-align: left;
width: 40%;
font-weight: bold;
}
.fpvpart-specs td {
padding: 3px;
}
.fpvpart-status {
padding: 5px;
text-align: center;
font-weight: bold;
margin: 5px 0;
}
.fpvpart-status.status-IN_STOCK {
background: #90EE90;
color: darkgreen;
}
.fpvpart-status.status-OUT_OF_STOCK {
background: #FFB6C1;
color: darkred;
}
.fpvpart-status.status-LIMITED {
background: #FFD700;
color: #8B4513;
}
.fpvpart-notes {
background: #ffffcc;
border: 1px solid #cccc00;
padding: 5px;
margin-top: 5px;
font-size: 85%;
}