|
|
| (109 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* ============================================================ | | /* Version 36.1 - Restored Anisa Factory Proportions |
| PORTABLE INFOBOX - KH LEAF THEME | | Goal: Original Anisa layout + KH Colors/Fonts + Readable Tabs |
| ============================================================ */
| | */ |
|
| |
|
| /* Main Container */ | | @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Crimson+Pro:wght@400;700&display=swap'); |
| body.mediawiki .portable-infobox {
| |
| background-color: #ffffff !important;
| |
| border: 2px solid #003366 !important;
| |
| width: 300px !important;
| |
| float: right !important;
| |
| clear: right !important;
| |
| margin: 0 0 1em 1em !important;
| |
| padding: 0 !important;
| |
| box-shadow: 2px 2px 8px rgba(0,0,0,0.15) !important;
| |
| font-family: "Georgia", serif !important;
| |
| overflow: hidden !important;
| |
| }
| |
|
| |
|
| /* Title Area */ | | /* --- 1. GLOBAL FONTS --- */ |
| body.mediawiki .pi-title { | | body { |
| background-color: #003366 !important;
| | font-family: 'Crimson Pro', serif !important; |
| color: #ffffff !important;
| |
| font-size: 16px !important;
| |
| font-weight: bold !important; | |
| text-align: center !important;
| |
| padding: 10px !important;
| |
| display: block !important;
| |
| } | | } |
|
| |
|
| /* Section Headers (Forest Green) */ | | /* --- 2. ANISA (DESKTOP) RESTORATION --- */ |
| body.mediawiki .pi-header {
| | /* We remove the forced margins/paddings here to let Anisa look "Factory" */ |
| background-color: #3e5a47 !important;
| | .skin-anisa #content, |
| color: #ffffff !important;
| | .skin-anisa .mw-body { |
| font-weight: bold !important;
| | font-size: 16px !important; |
| text-align: center !important;
| | line-height: 1.6; |
| padding: 6px 0 !important;
| | /* We are NOT forcing margin-top or padding here anymore */ |
| text-transform: uppercase !important;
| |
| font-size: 10px !important; | |
| letter-spacing: 1.2px !important; | |
| border-top: 1px solid #2d4234 !important; | |
| display: block !important;
| |
| } | | } |
|
| |
|
| /* Data Row Layout (Flexbox Alignment) */ | | /* Scaling up the tiny Navigation Labels to a readable "Normal" size */ |
| body.mediawiki .pi-data {
| | .skin-anisa .vector-menu-tabs li a, |
| display: flex !important;
| | .skin-anisa .vector-menu-dropdown .vector-menu-heading-label, |
| flex-direction: row !important;
| | .skin-anisa #p-cactions .vector-menu-heading-label, |
| flex-wrap: nowrap !important;
| | .skin-anisa .vector-menu-tabs li a span { |
| align-items: stretch !important; | | font-size: 16px !important; /* Readable, but fits the skin's design */ |
| border-bottom: 1px solid #e0e0e0 !important; | | font-weight: 400 !important; |
| width: 100% !important; | | text-transform: none !important; |
| } | | } |
|
| |
|
| /* Label Side (Left) */ | | /* Restoring the natural spacing between "Read", "Edit", etc. */ |
| body.mediawiki .pi-data-label {
| | .skin-anisa .vector-menu-tabs li { |
| background-color: #f2f2f2 !important; | | margin-right: 5px !important; |
| color: #333333 !important;
| |
| font-weight: bold !important;
| |
| padding: 8px 12px !important;
| |
| font-size: 11px !important;
| |
| flex: 0 0 40% !important;
| |
| border-right: 1px solid #dddddd !important;
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| } | | } |
|
| |
|
| /* Value Side (Right) */ | | /* --- 3. COSMOS (MOBILE) PRESERVATION --- */ |
| body.mediawiki .pi-data-value {
| | /* This section ensures our mobile view doesn't change */ |
| background-color: #ffffff !important;
| | .skin-cosmos #content { |
| color: #333333 !important;
| | padding: 15px !important; |
| padding: 8px 12px !important; | | font-size: 15px !important; |
| font-size: 11px !important; | |
| flex: 1 !important;
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| } | | } |
|
| |
|
| /* Leaf Bullets for Lists in Infobox */ | | /* --- 4. THE SEAMLESS INFOBOX (THE "LORE" FIX) --- */ |
| body.mediawiki .pi-data-value ul {
| | /* This keeps your Kingdom Hearts style intact across BOTH skins */ |
| list-style: none !important; | | .portable-infobox { |
| margin: 0 !important; | | background-color: #fff !important; |
| padding-left: 0 !important; | | border: 1px solid #a2a9b1 !important; |
| | width: 270px !important; |
| | float: right !important; |
| | margin: 0 0 1em 1.2em !important; |
| | border-collapse: collapse !important; |
| | border-spacing: 0 !important; |
| } | | } |
|
| |
|
| body.mediawiki .pi-data-value li {
| | .portable-infobox .pi-title { |
| padding-left: 1.8em !important; | | background-color: #ffd700 !important; |
| position: relative !important; | | color: #000 !important; |
| }
| | font-family: 'Cinzel', serif !important; |
| | | padding: 15px 10px !important; |
| body.mediawiki .pi-data-value li::before {
| | font-size: 1.25em !important; |
| content: "\1F343" !important; /* Unicode Leaf 🍃 */
| | text-align: center !important; |
| position: absolute !important; | | border-bottom: 1px solid #a2a9b1 !important; |
| left: 0 !important; | |
| font-size: 12px !important; | |
| top: 0 !important; | |
| } | | } |
|
| |
|
| /* Image Styling */
| | .portable-infobox .pi-header { |
| body.mediawiki .pi-image {
| | background-color: #3e5a47 !important; |
| display: block !important; | | color: #fff !important; |
| background-color: #f8f9fa !important; | | font-family: 'Cinzel', serif !important; |
| | padding: 10px 5px !important; |
| text-align: center !important; | | text-align: center !important; |
| padding: 10px !important;
| |
| border-bottom: 1px solid #dddddd !important;
| |
| } | | } |
|
| |
|
| body.mediawiki .pi-image img {
| | .pi-data-label { |
| max-width: 100% !important; | | background-color: #f2f2f2 !important; |
| height: auto !important; | | padding: 8px !important; |
| | border: 1px solid #a2a9b1 !important; |
| | font-weight: bold !important; |
| } | | } |
|
| |
|
| /* ============================================================
| | .pi-data-value { |
| PAGE HEADERS - LEAF DECORATION (SCOPED)
| | padding: 8px !important; |
| ============================================================ */
| | border-bottom: 1px solid #a2a9b1 !important; |
| | |
| /* H2 Headers (Main Content Only) */
| |
| #mw-content-text h2,
| |
| .mw-body-content h2 { | |
| position: relative !important;
| |
| padding-left: 35px !important; | |
| border-bottom: 2px solid #3e5a47 !important; | |
| color: #003366 !important;
| |
| font-family: "Georgia", serif !important;
| |
| margin-top: 1.5em !important;
| |
| } | | } |
|
| |
|
| #mw-content-text h2::before,
| | /* --- 5. TABLE OF CONTENTS --- */ |
| .mw-body-content h2::before { | | #toc, .toc { |
| content: "\1F343" !important; | | background-color: #f8f9fa !important; |
| position: absolute !important; | | border: 1px solid #a2a9b1 !important; |
| left: 0 !important;
| | padding: 8px !important; |
| bottom: 5px !important; | |
| font-size: 22px !important;
| |
| } | | } |
|
| |
|
| /* H3 Headers (Sub-content Only) */ | | /* Styling TabberNeue inside PortableInfobox */ |
| #mw-content-text h3,
| | .pi-image .tabber__tabs { |
| .mw-body-content h3 { | | display: flex !important; |
| position: relative !important; | | justify-content: center !important; |
| padding-left: 28px !important; | | background: #f2f2f2 !important; /* Matches your label color */ |
| color: #3e5a47 !important; | | border-bottom: 1px solid #a2a9b1 !important; |
| font-family: "Georgia", serif !important; | | margin-bottom: 5px !important; |
| } | | } |
|
| |
|
| #mw-content-text h3::before,
| | .pi-image .tabber__tab { |
| .mw-body-content h3::before { | | font-family: 'Crimson Pro', serif !important; |
| content: "\1F343" !important; | | font-size: 14px !important; |
| position: absolute !important; | | padding: 5px 10px !important; |
| left: 0 !important; | | cursor: pointer !important; |
| font-size: 18px !important; | |
| } | | } |
|
| |
|
| /* ============================================================
| | .pi-image .tabber__tab--active { |
| LAYOUT FIXES (SEARCH BAR & ALIGNMENT)
| | background-color: var(--kh-green) !important; |
| ============================================================ */
| | color: white !important; |
| | | font-weight: bold !important; |
| /* Force Search Bar to stay aligned and ignore header padding */
| |
| #p-search,
| |
| #searchform,
| |
| #searchInput,
| |
| .mw-searchInput { | |
| padding-left: 0 !important; | |
| margin-left: 0 !important;
| |
| position: relative !important; | |
| }
| |
| | |
| /* Prevents Leaf Emoji from appearing in the Sidebar navigation */
| |
| #mw-panel h3::before,
| |
| #p-navigation h3::before,
| |
| .vector-menu-heading::before {
| |
| content: none !important;
| |
| }
| |
| | |
| #mw-panel h3,
| |
| .vector-menu-heading {
| |
| padding-left: 0 !important; | |
| } | | } |