MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary Tag: Manual revert |
mNo edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
. | /* ============================================ | ||
MANA BREAK WIKI - MAIN STYLESHEET | |||
============================================ | |||
Table of Contents: | |||
1. Variables & Theme Definitions | |||
2. Base Styles & Animations | |||
3. Header & Navigation | |||
4. Sidebar (mw-panel) | |||
5. Footer | |||
6. Content & Typography | |||
7. Tables & Infoboxes | |||
8. Components (Cards, Quotes, Social, etc.) | |||
9. Responsive Design | |||
============================================ */ | |||
/* | /* ===== 1. VARIABLES & THEME DEFINITIONS ===== */ | ||
:root { | :root { | ||
/* Universal Base Styles */ | /* Universal Base Styles */ | ||
--font-size: 16px; | --font-size: 16px; | ||
--font-size-small: 14px; | --font-size-small: 14px; | ||
--font-size-large: 18px; | --font-size-large: 18px; | ||
--font-size-h1: 32px; | --font-size-h1: 32px; | ||
--font-size-h2: 26px; | --font-size-h2: 26px; | ||
| Line 34: | Line 27: | ||
--line-height: 1.6; | --line-height: 1.6; | ||
--line-height-headings: 1.3; | --line-height-headings: 1.3; | ||
--line-height-tight: 1.25; | --line-height-tight: 1.25; | ||
| Line 42: | Line 34: | ||
--font-weight-semibold: 600; | --font-weight-semibold: 600; | ||
--font-weight-bold: 700; | --font-weight-bold: 700; | ||
/* | /* Spacing */ | ||
--spacing-xs: 4px; | --spacing-xs: 4px; | ||
--spacing-sm: 8px; | --spacing-sm: 8px; | ||
| Line 52: | Line 43: | ||
--spacing-2xl: 48px; | --spacing-2xl: 48px; | ||
/* | /* Shadows */ | ||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12); | --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12); | ||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); | --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); | ||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); | --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); | ||
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15); | --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15); | ||
/* | /* Borders */ | ||
--border-radius-sm: 4px; | --border-radius-sm: 4px; | ||
--border-radius-md: 8px; | --border-radius-md: 8px; | ||
--border-radius-lg: | --border-radius-lg: 12px; | ||
--border-radius-full: 9999px; | --border-radius-full: 9999px; | ||
--border-width: 1px; | --border-width: 1px; | ||
/* | /* Transitions */ | ||
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); | --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); | ||
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); | --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); | ||
--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); | --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); | ||
/* | /* Focus States */ | ||
--focus-ring-color: rgba(79, 209, 199, 0.6); | --focus-ring-color: rgba(79, 209, 199, 0.6); | ||
--focus-ring-width: 3px; | --focus-ring-width: 3px; | ||
--focus-ring-offset: 2px; | --focus-ring-offset: 2px; | ||
/* | /* Gray Scale */ | ||
--gray-950: #0f1419; | --gray-950: #0f1419; | ||
--gray-900: #1a202c; | --gray-900: #1a202c; | ||
| Line 101: | Line 77: | ||
--gray-200: #edf2f7; | --gray-200: #edf2f7; | ||
--gray-100: #f7fafc; | --gray-100: #f7fafc; | ||
/* | /* Teal Scale */ | ||
--teal-900: #1d4044; | --teal-900: #1d4044; | ||
--teal-800: #234e52; | --teal-800: #234e52; | ||
| Line 113: | Line 88: | ||
--teal-200: #81e6d9; | --teal-200: #81e6d9; | ||
--teal-100: #b2f5ea; | --teal-100: #b2f5ea; | ||
--teal- | --teal-50: #e6fffa; | ||
/* Navigation Variables */ | |||
/*Navigation*/ | |||
--mb-navigation-left-spacing: 0px; | --mb-navigation-left-spacing: 0px; | ||
--mb-navigation-right-spacing: 0px; | --mb-navigation-right-spacing: 0px; | ||
--mb-navigation-tab-padding-top: 1.25em; | --mb-navigation-tab-padding-top: 1.25em; | ||
--mb-navigation-tab-padding-x: 0.75em; | --mb-navigation-tab-padding-x: 0.75em; | ||
| Line 147: | Line 98: | ||
--mb-navigation-border-radius: 4px 4px 0 0; | --mb-navigation-border-radius: 4px 4px 0 0; | ||
--mb-navigation-font-size: 0.8125em; | --mb-navigation-font-size: 0.8125em; | ||
} | } | ||
/* Light Theme */ | /* Light Theme */ | ||
:root body:not(.skin-vector-dark) { | :root body:not(.skin-vector-dark) { | ||
--theme-page-text-color: #1a2a2a; | --theme-page-text-color: #1a2a2a; | ||
--theme-page-background-color: #f5fdfb; | --theme-page-background-color: #f5fdfb; | ||
--theme-page-background-color--secondary: #e8f5f3; | --theme-page-background-color--secondary: #e8f5f3; | ||
--theme-link-color: #007d7a; | --theme-link-color: #007d7a; | ||
--theme-link-color--hover: #005652; | --theme-link-color--hover: #005652; | ||
--theme-accent-color: #38b2ac; | --theme-accent-color: #38b2ac; | ||
--theme-accent-color--hover: #2c9c96; | --theme-accent-color--hover: #2c9c96; | ||
--theme-accent-label-color: #ffffff; | --theme-accent-label-color: #ffffff; | ||
--theme-border-color: #a1e9dc; | --theme-border-color: #a1e9dc; | ||
--theme-border-color--subtle: #d1f5ee; | --theme-border-color--subtle: #d1f5ee; | ||
--card-bg-main: #ffffff; | --card-bg-main: #ffffff; | ||
--card-bg-elevated: #ffffff; | --card-bg-elevated: #ffffff; | ||
--input-bg: #ffffff; | --input-bg: #ffffff; | ||
--input-border: #cbd5e0; | --input-border: #cbd5e0; | ||
} | } | ||
/* Dark Theme */ | /* Dark Theme */ | ||
:root .skin-vector-dark { | :root .skin-vector-dark { | ||
--theme-page-text-color: #e6f7f5; | --theme-page-text-color: #e6f7f5; | ||
--theme-page-background-color: rgba(22, 28, 36, 0.98); | --theme-page-background-color: rgba(22, 28, 36, 0.98); | ||
--theme-page-background-color--secondary: #2a363d; | --theme-page-background-color--secondary: #2a363d; | ||
--theme-link-color: #5fd9cf; | --theme-link-color: #5fd9cf; | ||
--theme-link-color--hover: #81e6d9; | --theme-link-color--hover: #81e6d9; | ||
--theme-accent-color: #5fd9cf; | --theme-accent-color: #5fd9cf; | ||
--theme-accent-color--hover: #81e6d9; | --theme-accent-color--hover: #81e6d9; | ||
--theme-accent-label-color: #1a202c; | --theme-accent-label-color: #1a202c; | ||
--theme-border-color: #4d6872; | --theme-border-color: #4d6872; | ||
--theme-border-color--subtle: #3a5059; | --theme-border-color--subtle: #3a5059; | ||
--card-bg-main: #2a363d; | --card-bg-main: #2a363d; | ||
--card-bg-elevated: #34444d; | --card-bg-elevated: #34444d; | ||
--input-bg: #2d3748; | --input-bg: #2d3748; | ||
--input-border: #4a5568; | --input-border: #4a5568; | ||
} | |||
/* ===== 2. BASE STYLES & ANIMATIONS ===== */ | |||
@keyframes pulse { | @keyframes pulse { | ||
0%, 100% { opacity: 1; } | |||
0%, | 50% { opacity: 0.5; } | ||
50% { | |||
} | } | ||
@keyframes | @keyframes shimmer { | ||
0% { background-position: 100% 0; } | |||
100% { background-position: -100% 0; } | |||
} | |||
} | |||
} | } | ||
| Line 551: | Line 154: | ||
} | } | ||
@media (prefers-reduced-motion: reduce) { | @media (prefers-reduced-motion: reduce) { | ||
:root { | :root { | ||
| Line 558: | Line 160: | ||
--transition-slow: 0ms; | --transition-slow: 0ms; | ||
} | } | ||
* { | * { | ||
animation-duration: 0.01ms !important; | animation-duration: 0.01ms !important; | ||
transition-duration: 0.01ms !important; | transition-duration: 0.01ms !important; | ||
} | } | ||
} | } | ||
body { | |||
font-family: Helvetica, Arial, sans-serif !important; | |||
background-color: var(--theme-page-background-color) !important; | |||
overflow-y: scroll; | |||
} | } | ||
.mw-body, | |||
.parsoid-body { | |||
background-color: var(--theme-page-background-color) !important; | |||
color: var(--theme-page-text-color); | |||
padding: 1em; | |||
margin-left: 10em; | |||
border-left: 3px solid var(--teal-400); | |||
} | } | ||
.mw-body-content { | |||
. | line-height: 1.6; | ||
} | } | ||
. | /* ===== 3. HEADER & NAVIGATION ===== */ | ||
/* Header Container */ | |||
#mw-head { | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
width: 100%; | |||
z-index: 100; | |||
} | } | ||
#mw-head-base { | |||
position: relative; | |||
margin-top: -5em; | |||
margin-left: 10em; | |||
height: 5em; | |||
} | } | ||
/* Left Navigation (Page Tabs) */ | |||
#left-navigation { | |||
position: absolute; | |||
left: 10em; | |||
top: 2.5em; | |||
} | } | ||
. | /* Right Navigation (View History, Search, etc.) */ | ||
#right-navigation { | |||
position: absolute; | |||
right: 1em; | |||
top: 2.5em; | |||
} | } | ||
/* Search Box */ | |||
#p-search { | |||
float: left; | |||
margin: 0 0.5em; | |||
position: relative; | |||
} | } | ||
. | .vector-search-box-input { | ||
background-color: var(-- | background-color: var(--input-bg); | ||
border: 1px solid var(--input-border); | |||
border-radius: var(--border-radius-md); | |||
padding: 6px 28px 6px 8px; | |||
font-size: 0.85em; | |||
width: 200px; | |||
transition: all var(--transition-fast) ease; | |||
} | } | ||
. | .vector-search-box-input:focus { | ||
border-color: var(--theme-accent-color); | |||
outline: none; | |||
width: 250px; | |||
} | } | ||
. | .vector-search-box-button { | ||
background | background: transparent; | ||
border: none; | |||
cursor: pointer; | |||
margin-left: -28px; | |||
position: relative; | |||
z-index: 1; | |||
color: var(--theme-page-text-color); | color: var(--theme-page-text-color); | ||
opacity: 0.7; | |||
} | } | ||
.vector- | .vector-search-box-button:hover { | ||
opacity: 1; | |||
color: var(--theme-accent-color); | |||
} | } | ||
/* | /* Personal Tools (User Menu) */ | ||
#p-personal { | |||
position: absolute; | |||
. | top: 0.5em; | ||
right: 1em; | |||
z-index: 1000; | |||
} | } | ||
#p-personal .vector-menu-content-list { | |||
display: flex; | |||
flex-wrap: wrap; | |||
# | gap: 0.5em; | ||
list-style: none; | |||
margin: 0; | |||
padding: 0; | |||
} | } | ||
#p-personal .mw-list-item a { | |||
padding: 0.25em 0.5em; | |||
. | color: var(--theme-link-color); | ||
text-decoration: none; | |||
border-radius: var(--border-radius-sm); | |||
transition: all var(--transition-fast) ease; | |||
} | } | ||
. | #p-personal .mw-list-item a:hover { | ||
color: var(--theme- | background: rgba(79, 209, 199, 0.1); | ||
color: var(--theme-link-color--hover); | |||
} | } | ||
. | /* Navigation Tabs */ | ||
.vector-menu-tabs ul { | |||
display: flex; | |||
flex-direction: row; | |||
list-style: none; | |||
margin: 0; | |||
padding: 0; | |||
} | } | ||
. | .vector-menu-tabs li { | ||
float: left; | |||
margin: 0 2px; | |||
padding: 0; | |||
} | } | ||
. | .vector-menu-tabs .mw-list-item a { | ||
padding: 12px 16px; | |||
border- | display: inline-block; | ||
font-weight: var(--font-weight-medium); | |||
color: var(--theme- | transition: all var(--transition-fast) ease; | ||
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; | |||
color: var(--theme-page-text-color); | |||
text-decoration: none; | |||
} | } | ||
. | .vector-menu-tabs .mw-list-item a:hover { | ||
background | background: rgba(79, 209, 199, 0.1); | ||
color: var(--theme- | color: var(--theme-link-color); | ||
text-decoration: none; | |||
} | } | ||
. | .vector-menu-tabs .selected a { | ||
background: | background: var(--theme-page-background-color); | ||
color: var(--theme-accent-color); | |||
font-weight: var(--font-weight-semibold); | |||
border-bottom: 3px solid var(--theme-accent-color); | |||
} | } | ||
/* | /* ===== 4. SIDEBAR (mw-panel) ===== */ | ||
. | |||
#mw-panel { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 10em; | |||
padding: 0 0 1em 0; | |||
background: var(--theme-page-background-color--secondary); | background: var(--theme-page-background-color--secondary); | ||
height: 100%; | |||
overflow-y: auto; | |||
z-index: 10; | |||
border-right: 1px solid var(--theme-border-color); | border-right: 1px solid var(--theme-border-color); | ||
} | } | ||
/* | /* Scrollbar Styling */ | ||
#mw-panel::-webkit-scrollbar { | |||
width: 4px; | |||
} | } | ||
#mw-panel::-webkit-scrollbar-track { | |||
background: var(--theme-page-background-color--secondary); | |||
} | } | ||
#mw-panel::-webkit-scrollbar-thumb { | |||
background: var(--teal-300); | |||
border-radius: var(--border-radius-full); | |||
} | } | ||
/* Logo */ | |||
#p-logo { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 10em; | |||
height: 160px; | |||
margin: 0; | |||
padding: 0; | |||
} | } | ||
#p-logo a { | |||
display: block; | |||
width: 10em; | |||
height: 160px; | |||
background-repeat: no-repeat; | |||
background-position: center center; | |||
background-size: contain; | |||
} | } | ||
/* | /* Sidebar Sections */ | ||
.mw-portlet { | |||
margin: 0 0 1.5em 0; | |||
} | } | ||
.vector-menu-heading { | |||
. | padding: 8px 12px; | ||
margin: 5px 0; | |||
font-size: 0.85em; | |||
font-weight: var(--font-weight-semibold); | |||
text-transform: uppercase; | |||
letter-spacing: 0.5px; | |||
background: linear-gradient(90deg, var(--teal-700) 0%, var(--teal-900) 100%); | |||
color: white; | |||
border-radius: var(--border-radius-md); | |||
} | } | ||
/* | /* Sidebar Links */ | ||
.vector-menu-content-list { | |||
list-style: none; | |||
margin: 4px 0; | |||
padding: 4px 0; | |||
} | } | ||
.vector-menu-content-list .mw-list-item { | |||
margin: 0; | |||
padding: 0; | |||
} | } | ||
.vector-menu-content-list .mw-list-item a { | |||
.mw- | display: block; | ||
padding: 6px 12px; | |||
border: | color: var(--theme-link-color); | ||
font-size: 0.85em; | |||
text-decoration: none; | |||
transition: all var(--transition-fast) ease; | |||
border-radius: var(--border-radius-sm); | |||
margin: 1px 4px; | |||
} | } | ||
.mw- | .vector-menu-content-list .mw-list-item a:hover { | ||
background-color: var(--theme- | background: rgba(79, 209, 199, 0.1); | ||
padding-left: 20px; | |||
color: var(--theme-link-color--hover); | |||
} | } | ||
.mw- | .vector-menu-content-list .mw-list-item.selected a { | ||
border: | background: rgba(79, 209, 199, 0.15); | ||
font-weight: var(--font-weight-semibold); | |||
border-left: 3px solid var(--theme-accent-color); | |||
padding-left: 16px; | |||
} | } | ||
/* ===== 5. FOOTER ===== */ | |||
. | .mw-footer { | ||
margin-left: 10em; | |||
. | margin-top: 2em; | ||
padding: 1.5em 2em; | |||
background: var(--theme-page-background-color--secondary) !important; | |||
border-top: 3px solid var(--teal-300); | |||
position: relative; | |||
clear: both; | |||
} | } | ||
/* | /* Animated Top Border */ | ||
. | .mw-footer:before { | ||
content: ""; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
height: 3px; | |||
background: linear-gradient(90deg, | |||
var(--teal-400), | |||
var(--teal-300), | |||
var(--teal-200), | |||
var(--teal-300), | |||
var(--teal-400)); | |||
background-size: 200% 100%; | |||
animation: shimmer 3s infinite linear; | |||
} | } | ||
/* Footer Info Section */ | |||
#footer-info { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 16px; | |||
justify-content: center; | |||
margin-bottom: 24px; | |||
padding-bottom: 16px; | |||
border-bottom: 1px solid var(--theme-border-color--subtle); | |||
} | } | ||
#footer-info li { | |||
color: var(--theme-page-text-color) !important; | |||
font-size: 0.85em; | |||
line-height: 1.4; | |||
padding: 0 8px; | |||
border-right: 1px solid var(--theme-border-color--subtle); | |||
} | } | ||
#footer-info li:last-child { | |||
border-right: none; | |||
} | } | ||
#footer-info li a { | |||
color: var(--theme-link-color); | color: var(--theme-link-color); | ||
text-decoration: none; | |||
} | } | ||
# | #footer-info li a:hover { | ||
color: var(-- | color: var(--theme-link-color--hover); | ||
text-decoration: underline; | |||
} | } | ||
# | /* Footer Places */ | ||
#footer-places { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 16px; | |||
justify-content: center; | |||
margin: 16px 0; | |||
padding: 12px 0; | |||
} | } | ||
#footer-places li a { | |||
color: var(--theme-page-text-color); | |||
font-size: | text-decoration: none; | ||
opacity: 0.7; | |||
font-size: 0.8em; | |||
} | } | ||
#footer-places li a:hover { | |||
opacity: 1; | |||
color: var(--theme-link-color); | |||
text-decoration: underline; | |||
} | } | ||
/* Copyright */ | |||
font: | #footer-copyright { | ||
text-align: center; | |||
font-size: 0.75em; | |||
color: var(--gray-600); | |||
padding: 16px 0 8px; | |||
border-top: 1px solid var(--theme-border-color--subtle); | |||
margin-top: 8px; | |||
} | } | ||
/* ===== 6. CONTENT & TYPOGRAPHY ===== */ | |||
.mw- | .mw-body a:not(.new) { | ||
text-decoration: none; | |||
color: var(--theme-link-color); | |||
transition: color var(--transition-fast) ease; | |||
} | } | ||
.mw-body a:not(.new):hover { | |||
text-decoration: underline; | |||
text-decoration-thickness: 2px; | |||
text-underline-offset: 2px; | |||
color: var(--theme-link-color--hover); | |||
} | } | ||
.mw-body a.new { | |||
. | color: var(--teal-500) !important; | ||
font-weight: var(--font-weight-semibold) !important; | |||
border-bottom: 1px dashed rgba(0, 163, 163, 0.4) !important; | |||
background-color: rgba(0, 163, 163, 0.08) !important; | |||
padding: 1px 3px !important; | |||
border-radius: var(--border-radius-sm) !important; | |||
} | } | ||
.mw-body a.new:hover { | |||
.mw- | background-color: rgba(0, 163, 163, 0.15) !important; | ||
border-bottom-style: solid !important; | |||
text-decoration: none !important; | |||
} | } | ||
h1, h2, h3, h4, h5, h6 { | |||
color: var(--theme-page-text-color); | color: var(--theme-page-text-color); | ||
} | } | ||
.toc { | .toc { | ||
padding: 8px 12px; | padding: 8px 12px; | ||
| Line 1,030: | Line 564: | ||
} | } | ||
. | /* ===== 7. TABLES & INFOBOXES ===== */ | ||
. | .wikitable { | ||
width: 100%; | |||
margin: 1.5em 0; | |||
border-collapse: separate; | |||
border-spacing: 0; | |||
border: 1px solid var(--theme-border-color); | |||
background-color: var(--card-bg-main); | |||
border-radius: var(--border-radius-md); | |||
overflow: hidden; | |||
box-shadow: var(--shadow-sm); | |||
} | } | ||
. | .wikitable > tr > th, | ||
font- | .wikitable > * > tr > th { | ||
background: linear-gradient(135deg, var(--teal-600) 0%, var(--teal-700) 100%) !important; | |||
color: var(--theme-accent-label-color) !important; | |||
font-weight: var(--font-weight-semibold); | |||
padding: 0.75rem 1rem !important; | |||
text-align: center; | |||
} | } | ||
.wikitable > tr > td, | |||
.wikitable > * > tr > td { | |||
. | padding: 0.75rem 1rem !important; | ||
border-bottom: 1px solid var(--theme-border-color--subtle); | |||
color: var(--theme-page-text-color); | |||
} | } | ||
.wikitable > tr:nth-child(even):not(:first-child), | |||
.wikitable > * > tr:nth-child(even):not(:first-child) { | |||
background-color: rgba(56, 178, 172, 0.03); | |||
} | } | ||
. | .wikitable > tr:hover:not(:first-child), | ||
.wikitable > * > tr:hover:not(:first-child) { | |||
background-color: rgba(56, 178, 172, 0.08) !important; | |||
- | |||
} | } | ||
. | /* Portable Infobox */ | ||
.portable-infobox { | |||
float: right; | |||
clear: right; | |||
margin: 0 0 15px 15px; | |||
max-width: 300px; | |||
width: 100%; | |||
border: 1px solid var(--theme-border-color); | border: 1px solid var(--theme-border-color); | ||
border- | border-radius: 8px; | ||
background-color: var(--card-bg-main); | |||
font-size: 14px; | |||
} | } | ||
.portable-infobox .pi-title { | |||
background: var(--teal-600); | |||
color: var(--theme-accent-label-color); | |||
padding: 8px 10px; | |||
border-top-left-radius: 8px; | |||
border-top-right-radius: 8px; | |||
text-align: center; | |||
font-weight: bold; | |||
font-size: 1.2em; | |||
} | } | ||
. | .portable-infobox .pi-item { | ||
. | |||
display: flex; | display: flex; | ||
justify-content: space-between; | |||
padding: 5px 10px; | |||
border-bottom: 1px dotted var(--theme-border-color--subtle); | |||
} | } | ||
. | .portable-infobox .pi-data-label { | ||
font-weight: 500; | |||
color: var(--gray-700); | |||
min-width: 40%; | |||
} | } | ||
. | .portable-infobox .pi-data-value { | ||
text-align: right; | |||
flex-grow: 1; | |||
} | } | ||
/* | /* ===== 8. COMPONENTS ===== */ | ||
. | /* Cards */ | ||
.card { | |||
background-color: var(--card-bg-main); | |||
border-radius: var(--border-radius-md); | |||
border: 1px solid var(--theme-border-color); | |||
box-shadow: var(--shadow-sm); | |||
transition: all var(--transition-base) ease; | |||
} | } | ||
. | .card:hover { | ||
box-shadow: var(--shadow-md); | |||
transform: translateY(-2px); | |||
} | } | ||
. | /* Status Messages */ | ||
background-color: var(-- | .status-alert { | ||
border- | background-color: rgba(213, 63, 63, 0.1); | ||
color: var(--theme-alert-color); | |||
border-left: 4px solid var(--theme-alert-color); | |||
padding: 12px; | |||
} | } | ||
. | .status-warning { | ||
background-color: var(--color- | background-color: rgba(192, 86, 33, 0.1); | ||
color: var(--theme-warning-color); | |||
border-left: 4px solid var(--theme-warning-color); | |||
padding: 12px; | |||
} | } | ||
.status-success { | |||
background-color: rgba(46, 139, 87, 0.1); | |||
color: var(--theme-success-color); | |||
border-left: 4px solid var(--theme-success-color); | |||
padding: 12px; | |||
. | |||
} | } | ||
/* Social Links | /* Social Links */ | ||
.social { | .social { | ||
position: relative; | position: relative; | ||
| Line 1,295: | Line 692: | ||
padding: 15px 0; | padding: 15px 0; | ||
max-width: 85%; | max-width: 85%; | ||
background: var(--theme-page-background-color--secondary); | background: var(--theme-page-background-color--secondary); | ||
border-radius: 12px; | border-radius: 12px; | ||
border: 1px solid var(--theme-border-color); | border: 1px solid var(--theme-border-color); | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
| Line 1,307: | Line 702: | ||
} | } | ||
.social .iconname { | .social .iconname { | ||
display: inline-flex; | display: inline-flex; | ||
| Line 1,318: | Line 712: | ||
border: 1px solid var(--theme-border-color); | border: 1px solid var(--theme-border-color); | ||
transition: all 0.3s ease; | transition: all 0.3s ease; | ||
} | } | ||
.social .iconname:hover { | .social .iconname:hover { | ||
background: var(-- | background: var(--teal-50) !important; | ||
transform: translateY(-2px); | transform: translateY(-2px); | ||
border-color: var(--theme-accent-color); | border-color: var(--theme-accent-color); | ||
} | } | ||
/* | /* Quotes */ | ||
. | .pull-quote { | ||
font-style: italic; | |||
margin: 0; | margin: 0; | ||
padding: 0 30px 8px !important; | |||
} | } | ||
.pull-quote::before { | |||
. | |||
color: var(--teal-400); | color: var(--teal-400); | ||
content: "“"; | |||
display: block; | |||
font-size: 96px; | |||
font-style: normal; | |||
line-height: 72px; | |||
margin: 4px 0 -45px -5px; | |||
} | } | ||
/* ===== 9. RESPONSIVE DESIGN ===== */ | |||
/* ===== | |||
@media screen and (max-width: 1024px) { | @media screen and (max-width: 1024px) { | ||
.mw-body, | |||
#mw-data-after-content, | |||
.mw-footer { | |||
margin-left: 0; | |||
.mw-body, | |||
.mw- | |||
} | } | ||
#mw-panel { | |||
display: none; | |||
} | } | ||
#left-navigation { | |||
left: 1em; | |||
} | } | ||
#mw-head-base { | |||
margin-left: 0; | |||
#mw-head-base { | |||
} | } | ||
.wikitable { | |||
font-size: 0.95em; | |||
. | |||
} | } | ||
.wikitable > tr > th, | |||
.wikitable > * > tr > th, | |||
.wikitable > tr > td, | |||
. | .wikitable > * > tr > td { | ||
padding: 0.625rem 0.75rem !important; | |||
} | } | ||
} | } | ||
@media screen and (max-width: 768px) { | |||
.mw-body { | |||
padding: 0.75em; | |||
.mw- | |||
padding | |||
} | } | ||
#left-navigation, | |||
#right-navigation { | |||
position: static; | |||
float: none; | float: none; | ||
margin: 0; | margin: 0; | ||
} | } | ||
#mw-head { | |||
position: relative; | |||
height: auto; | |||
#mw- | |||
} | } | ||
.vector- | .vector-menu-tabs ul { | ||
flex-wrap: wrap; | |||
} | } | ||
.vector-search-box-input { | .vector-search-box-input { | ||
width: 100%; | width: 100%; | ||
} | } | ||
.vector-search-box-input:focus { | |||
. | |||
width: 100%; | width: 100%; | ||
} | } | ||
.wikitable { | |||
display: block; | |||
overflow-x: auto; | |||
. | |||
} | } | ||
.portable-infobox { | .portable-infobox { | ||
float: none; | float: none; | ||
| Line 3,710: | Line 809: | ||
margin: 0 0 16px 0; | margin: 0 0 16px 0; | ||
} | } | ||
.portable-infobox .pi-item { | .portable-infobox .pi-item { | ||
flex-direction: column; | flex-direction: column; | ||
} | } | ||
.portable-infobox .pi-data-label, | .portable-infobox .pi-data-label, | ||
.portable-infobox .pi-data-value { | .portable-infobox .pi-data-value { | ||
min-width: 100%; | min-width: 100%; | ||
text-align: left; | text-align: left; | ||
} | } | ||
. | .social { | ||
flex-direction: column; | |||
gap: 8px; | |||
} | } | ||
. | .social .iconname { | ||
width: 100%; | |||
max-width: 100%; | |||
} | } | ||
#footer-info, | |||
#footer-places { | |||
flex-direction: column; | |||
align-items: center; | |||
gap: 8px; | |||
} | } | ||
#footer-info li { | |||
border-right: none; | |||
text-align: center; | |||
} | } | ||
} | } | ||
@media print { | |||
:root { | |||
--theme-page-text-color: #000000; | |||
--theme-page-background-color: #ffffff; | |||
} | } | ||
a { | |||
color: #000000 !important; | |||
text-decoration: underline !important; | |||
} | } | ||
#mw-panel, | |||
#p-personal, | |||
.social { | |||
display: none !important; | |||
. | |||
} | } | ||
} | } | ||
Revision as of 05:06, 25 March 2026
/* ============================================
MANA BREAK WIKI - MAIN STYLESHEET
============================================
Table of Contents:
1. Variables & Theme Definitions
2. Base Styles & Animations
3. Header & Navigation
4. Sidebar (mw-panel)
5. Footer
6. Content & Typography
7. Tables & Infoboxes
8. Components (Cards, Quotes, Social, etc.)
9. Responsive Design
============================================ */
/* ===== 1. VARIABLES & THEME DEFINITIONS ===== */
:root {
/* Universal Base Styles */
--font-size: 16px;
--font-size-small: 14px;
--font-size-large: 18px;
--font-size-h1: 32px;
--font-size-h2: 26px;
--font-size-h3: 22px;
--font-size-h4: 18px;
--line-height: 1.6;
--line-height-headings: 1.3;
--line-height-tight: 1.25;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Spacing */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
/* Borders */
--border-radius-sm: 4px;
--border-radius-md: 8px;
--border-radius-lg: 12px;
--border-radius-full: 9999px;
--border-width: 1px;
/* Transitions */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
/* Focus States */
--focus-ring-color: rgba(79, 209, 199, 0.6);
--focus-ring-width: 3px;
--focus-ring-offset: 2px;
/* Gray Scale */
--gray-950: #0f1419;
--gray-900: #1a202c;
--gray-800: #2d3748;
--gray-700: #4a5568;
--gray-600: #718096;
--gray-500: #a0aec0;
--gray-400: #cbd5e0;
--gray-300: #e2e8f0;
--gray-200: #edf2f7;
--gray-100: #f7fafc;
/* Teal Scale */
--teal-900: #1d4044;
--teal-800: #234e52;
--teal-700: #285e61;
--teal-600: #2c7a7b;
--teal-500: #319795;
--teal-400: #38b2ac;
--teal-300: #4fd1c7;
--teal-200: #81e6d9;
--teal-100: #b2f5ea;
--teal-50: #e6fffa;
/* Navigation Variables */
--mb-navigation-left-spacing: 0px;
--mb-navigation-right-spacing: 0px;
--mb-navigation-tab-padding-top: 1.25em;
--mb-navigation-tab-padding-x: 0.75em;
--mb-navigation-tab-padding-bottom: 4px;
--mb-navigation-border-radius: 4px 4px 0 0;
--mb-navigation-font-size: 0.8125em;
}
/* Light Theme */
:root body:not(.skin-vector-dark) {
--theme-page-text-color: #1a2a2a;
--theme-page-background-color: #f5fdfb;
--theme-page-background-color--secondary: #e8f5f3;
--theme-link-color: #007d7a;
--theme-link-color--hover: #005652;
--theme-accent-color: #38b2ac;
--theme-accent-color--hover: #2c9c96;
--theme-accent-label-color: #ffffff;
--theme-border-color: #a1e9dc;
--theme-border-color--subtle: #d1f5ee;
--card-bg-main: #ffffff;
--card-bg-elevated: #ffffff;
--input-bg: #ffffff;
--input-border: #cbd5e0;
}
/* Dark Theme */
:root .skin-vector-dark {
--theme-page-text-color: #e6f7f5;
--theme-page-background-color: rgba(22, 28, 36, 0.98);
--theme-page-background-color--secondary: #2a363d;
--theme-link-color: #5fd9cf;
--theme-link-color--hover: #81e6d9;
--theme-accent-color: #5fd9cf;
--theme-accent-color--hover: #81e6d9;
--theme-accent-label-color: #1a202c;
--theme-border-color: #4d6872;
--theme-border-color--subtle: #3a5059;
--card-bg-main: #2a363d;
--card-bg-elevated: #34444d;
--input-bg: #2d3748;
--input-border: #4a5568;
}
/* ===== 2. BASE STYLES & ANIMATIONS ===== */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
*:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
outline-offset: var(--focus-ring-offset) !important;
border-radius: var(--border-radius-sm) !important;
}
@media (prefers-reduced-motion: reduce) {
:root {
--transition-fast: 0ms;
--transition-base: 0ms;
--transition-slow: 0ms;
}
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
body {
font-family: Helvetica, Arial, sans-serif !important;
background-color: var(--theme-page-background-color) !important;
overflow-y: scroll;
}
.mw-body,
.parsoid-body {
background-color: var(--theme-page-background-color) !important;
color: var(--theme-page-text-color);
padding: 1em;
margin-left: 10em;
border-left: 3px solid var(--teal-400);
}
.mw-body-content {
line-height: 1.6;
}
/* ===== 3. HEADER & NAVIGATION ===== */
/* Header Container */
#mw-head {
position: absolute;
top: 0;
right: 0;
width: 100%;
z-index: 100;
}
#mw-head-base {
position: relative;
margin-top: -5em;
margin-left: 10em;
height: 5em;
}
/* Left Navigation (Page Tabs) */
#left-navigation {
position: absolute;
left: 10em;
top: 2.5em;
}
/* Right Navigation (View History, Search, etc.) */
#right-navigation {
position: absolute;
right: 1em;
top: 2.5em;
}
/* Search Box */
#p-search {
float: left;
margin: 0 0.5em;
position: relative;
}
.vector-search-box-input {
background-color: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--border-radius-md);
padding: 6px 28px 6px 8px;
font-size: 0.85em;
width: 200px;
transition: all var(--transition-fast) ease;
}
.vector-search-box-input:focus {
border-color: var(--theme-accent-color);
outline: none;
width: 250px;
}
.vector-search-box-button {
background: transparent;
border: none;
cursor: pointer;
margin-left: -28px;
position: relative;
z-index: 1;
color: var(--theme-page-text-color);
opacity: 0.7;
}
.vector-search-box-button:hover {
opacity: 1;
color: var(--theme-accent-color);
}
/* Personal Tools (User Menu) */
#p-personal {
position: absolute;
top: 0.5em;
right: 1em;
z-index: 1000;
}
#p-personal .vector-menu-content-list {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
list-style: none;
margin: 0;
padding: 0;
}
#p-personal .mw-list-item a {
padding: 0.25em 0.5em;
color: var(--theme-link-color);
text-decoration: none;
border-radius: var(--border-radius-sm);
transition: all var(--transition-fast) ease;
}
#p-personal .mw-list-item a:hover {
background: rgba(79, 209, 199, 0.1);
color: var(--theme-link-color--hover);
}
/* Navigation Tabs */
.vector-menu-tabs ul {
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
}
.vector-menu-tabs li {
float: left;
margin: 0 2px;
padding: 0;
}
.vector-menu-tabs .mw-list-item a {
padding: 12px 16px;
display: inline-block;
font-weight: var(--font-weight-medium);
transition: all var(--transition-fast) ease;
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
color: var(--theme-page-text-color);
text-decoration: none;
}
.vector-menu-tabs .mw-list-item a:hover {
background: rgba(79, 209, 199, 0.1);
color: var(--theme-link-color);
text-decoration: none;
}
.vector-menu-tabs .selected a {
background: var(--theme-page-background-color);
color: var(--theme-accent-color);
font-weight: var(--font-weight-semibold);
border-bottom: 3px solid var(--theme-accent-color);
}
/* ===== 4. SIDEBAR (mw-panel) ===== */
#mw-panel {
position: absolute;
top: 0;
left: 0;
width: 10em;
padding: 0 0 1em 0;
background: var(--theme-page-background-color--secondary);
height: 100%;
overflow-y: auto;
z-index: 10;
border-right: 1px solid var(--theme-border-color);
}
/* Scrollbar Styling */
#mw-panel::-webkit-scrollbar {
width: 4px;
}
#mw-panel::-webkit-scrollbar-track {
background: var(--theme-page-background-color--secondary);
}
#mw-panel::-webkit-scrollbar-thumb {
background: var(--teal-300);
border-radius: var(--border-radius-full);
}
/* Logo */
#p-logo {
position: absolute;
top: 0;
left: 0;
width: 10em;
height: 160px;
margin: 0;
padding: 0;
}
#p-logo a {
display: block;
width: 10em;
height: 160px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
/* Sidebar Sections */
.mw-portlet {
margin: 0 0 1.5em 0;
}
.vector-menu-heading {
padding: 8px 12px;
margin: 5px 0;
font-size: 0.85em;
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
background: linear-gradient(90deg, var(--teal-700) 0%, var(--teal-900) 100%);
color: white;
border-radius: var(--border-radius-md);
}
/* Sidebar Links */
.vector-menu-content-list {
list-style: none;
margin: 4px 0;
padding: 4px 0;
}
.vector-menu-content-list .mw-list-item {
margin: 0;
padding: 0;
}
.vector-menu-content-list .mw-list-item a {
display: block;
padding: 6px 12px;
color: var(--theme-link-color);
font-size: 0.85em;
text-decoration: none;
transition: all var(--transition-fast) ease;
border-radius: var(--border-radius-sm);
margin: 1px 4px;
}
.vector-menu-content-list .mw-list-item a:hover {
background: rgba(79, 209, 199, 0.1);
padding-left: 20px;
color: var(--theme-link-color--hover);
}
.vector-menu-content-list .mw-list-item.selected a {
background: rgba(79, 209, 199, 0.15);
font-weight: var(--font-weight-semibold);
border-left: 3px solid var(--theme-accent-color);
padding-left: 16px;
}
/* ===== 5. FOOTER ===== */
.mw-footer {
margin-left: 10em;
margin-top: 2em;
padding: 1.5em 2em;
background: var(--theme-page-background-color--secondary) !important;
border-top: 3px solid var(--teal-300);
position: relative;
clear: both;
}
/* Animated Top Border */
.mw-footer:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
var(--teal-400),
var(--teal-300),
var(--teal-200),
var(--teal-300),
var(--teal-400));
background-size: 200% 100%;
animation: shimmer 3s infinite linear;
}
/* Footer Info Section */
#footer-info {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--theme-border-color--subtle);
}
#footer-info li {
color: var(--theme-page-text-color) !important;
font-size: 0.85em;
line-height: 1.4;
padding: 0 8px;
border-right: 1px solid var(--theme-border-color--subtle);
}
#footer-info li:last-child {
border-right: none;
}
#footer-info li a {
color: var(--theme-link-color);
text-decoration: none;
}
#footer-info li a:hover {
color: var(--theme-link-color--hover);
text-decoration: underline;
}
/* Footer Places */
#footer-places {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
margin: 16px 0;
padding: 12px 0;
}
#footer-places li a {
color: var(--theme-page-text-color);
text-decoration: none;
opacity: 0.7;
font-size: 0.8em;
}
#footer-places li a:hover {
opacity: 1;
color: var(--theme-link-color);
text-decoration: underline;
}
/* Copyright */
#footer-copyright {
text-align: center;
font-size: 0.75em;
color: var(--gray-600);
padding: 16px 0 8px;
border-top: 1px solid var(--theme-border-color--subtle);
margin-top: 8px;
}
/* ===== 6. CONTENT & TYPOGRAPHY ===== */
.mw-body a:not(.new) {
text-decoration: none;
color: var(--theme-link-color);
transition: color var(--transition-fast) ease;
}
.mw-body a:not(.new):hover {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 2px;
color: var(--theme-link-color--hover);
}
.mw-body a.new {
color: var(--teal-500) !important;
font-weight: var(--font-weight-semibold) !important;
border-bottom: 1px dashed rgba(0, 163, 163, 0.4) !important;
background-color: rgba(0, 163, 163, 0.08) !important;
padding: 1px 3px !important;
border-radius: var(--border-radius-sm) !important;
}
.mw-body a.new:hover {
background-color: rgba(0, 163, 163, 0.15) !important;
border-bottom-style: solid !important;
text-decoration: none !important;
}
h1, h2, h3, h4, h5, h6 {
color: var(--theme-page-text-color);
}
.toc {
padding: 8px 12px;
border-radius: 4px;
background-color: var(--theme-page-background-color--secondary);
border: 1px solid var(--theme-border-color);
margin-top: 16px;
}
/* ===== 7. TABLES & INFOBOXES ===== */
.wikitable {
width: 100%;
margin: 1.5em 0;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--theme-border-color);
background-color: var(--card-bg-main);
border-radius: var(--border-radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.wikitable > tr > th,
.wikitable > * > tr > th {
background: linear-gradient(135deg, var(--teal-600) 0%, var(--teal-700) 100%) !important;
color: var(--theme-accent-label-color) !important;
font-weight: var(--font-weight-semibold);
padding: 0.75rem 1rem !important;
text-align: center;
}
.wikitable > tr > td,
.wikitable > * > tr > td {
padding: 0.75rem 1rem !important;
border-bottom: 1px solid var(--theme-border-color--subtle);
color: var(--theme-page-text-color);
}
.wikitable > tr:nth-child(even):not(:first-child),
.wikitable > * > tr:nth-child(even):not(:first-child) {
background-color: rgba(56, 178, 172, 0.03);
}
.wikitable > tr:hover:not(:first-child),
.wikitable > * > tr:hover:not(:first-child) {
background-color: rgba(56, 178, 172, 0.08) !important;
}
/* Portable Infobox */
.portable-infobox {
float: right;
clear: right;
margin: 0 0 15px 15px;
max-width: 300px;
width: 100%;
border: 1px solid var(--theme-border-color);
border-radius: 8px;
background-color: var(--card-bg-main);
font-size: 14px;
}
.portable-infobox .pi-title {
background: var(--teal-600);
color: var(--theme-accent-label-color);
padding: 8px 10px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
text-align: center;
font-weight: bold;
font-size: 1.2em;
}
.portable-infobox .pi-item {
display: flex;
justify-content: space-between;
padding: 5px 10px;
border-bottom: 1px dotted var(--theme-border-color--subtle);
}
.portable-infobox .pi-data-label {
font-weight: 500;
color: var(--gray-700);
min-width: 40%;
}
.portable-infobox .pi-data-value {
text-align: right;
flex-grow: 1;
}
/* ===== 8. COMPONENTS ===== */
/* Cards */
.card {
background-color: var(--card-bg-main);
border-radius: var(--border-radius-md);
border: 1px solid var(--theme-border-color);
box-shadow: var(--shadow-sm);
transition: all var(--transition-base) ease;
}
.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
/* Status Messages */
.status-alert {
background-color: rgba(213, 63, 63, 0.1);
color: var(--theme-alert-color);
border-left: 4px solid var(--theme-alert-color);
padding: 12px;
}
.status-warning {
background-color: rgba(192, 86, 33, 0.1);
color: var(--theme-warning-color);
border-left: 4px solid var(--theme-warning-color);
padding: 12px;
}
.status-success {
background-color: rgba(46, 139, 87, 0.1);
color: var(--theme-success-color);
border-left: 4px solid var(--theme-success-color);
padding: 12px;
}
/* Social Links */
.social {
position: relative;
z-index: 999;
text-align: center;
margin: 20px auto;
padding: 15px 0;
max-width: 85%;
background: var(--theme-page-background-color--secondary);
border-radius: 12px;
border: 1px solid var(--theme-border-color);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 15px;
}
.social .iconname {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 180px;
padding: 12px 20px;
background: var(--theme-page-background-color);
border-radius: 8px;
border: 1px solid var(--theme-border-color);
transition: all 0.3s ease;
}
.social .iconname:hover {
background: var(--teal-50) !important;
transform: translateY(-2px);
border-color: var(--theme-accent-color);
}
/* Quotes */
.pull-quote {
font-style: italic;
margin: 0;
padding: 0 30px 8px !important;
}
.pull-quote::before {
color: var(--teal-400);
content: "“";
display: block;
font-size: 96px;
font-style: normal;
line-height: 72px;
margin: 4px 0 -45px -5px;
}
/* ===== 9. RESPONSIVE DESIGN ===== */
@media screen and (max-width: 1024px) {
.mw-body,
#mw-data-after-content,
.mw-footer {
margin-left: 0;
}
#mw-panel {
display: none;
}
#left-navigation {
left: 1em;
}
#mw-head-base {
margin-left: 0;
}
.wikitable {
font-size: 0.95em;
}
.wikitable > tr > th,
.wikitable > * > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > td {
padding: 0.625rem 0.75rem !important;
}
}
@media screen and (max-width: 768px) {
.mw-body {
padding: 0.75em;
}
#left-navigation,
#right-navigation {
position: static;
float: none;
margin: 0;
}
#mw-head {
position: relative;
height: auto;
}
.vector-menu-tabs ul {
flex-wrap: wrap;
}
.vector-search-box-input {
width: 100%;
}
.vector-search-box-input:focus {
width: 100%;
}
.wikitable {
display: block;
overflow-x: auto;
}
.portable-infobox {
float: none;
max-width: 100%;
margin: 0 0 16px 0;
}
.portable-infobox .pi-item {
flex-direction: column;
}
.portable-infobox .pi-data-label,
.portable-infobox .pi-data-value {
min-width: 100%;
text-align: left;
}
.social {
flex-direction: column;
gap: 8px;
}
.social .iconname {
width: 100%;
max-width: 100%;
}
#footer-info,
#footer-places {
flex-direction: column;
align-items: center;
gap: 8px;
}
#footer-info li {
border-right: none;
text-align: center;
}
}
@media print {
:root {
--theme-page-text-color: #000000;
--theme-page-background-color: #ffffff;
}
a {
color: #000000 !important;
text-decoration: underline !important;
}
#mw-panel,
#p-personal,
.social {
display: none !important;
}
}