Lenn's Fun Stuff

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →
No edit summary
No edit summary
Line 1: Line 1:
/* ============================================================
/* ============================================================
   KH LEAF THEME - GREEN & GOLD EDITION
   KH LEAF THEME - FULL UI VISIBILITY & COLOR UPDATE
   ============================================================ */
   ============================================================ */


/* 1. THE MAIN INFOBOX CONTAINER */
/* 1. GLOBAL BACKGROUND */
body {
    background-image: url("PASTE_YOUR_IMAGE_LINK_HERE") !important;
    background-repeat: repeat !important;
    background-attachment: fixed !important;
    background-position: center center !important;
}
 
/* 2. THE MAIN INFOBOX (Green & Yellow) */
.portable-infobox {
.portable-infobox {
     background-color: #ffffff !important;
     background-color: #ffffff !important;
     border: 2px solid #3e5a47 !important; /* Changed to Green border */
     border: 2px solid #3e5a47 !important;  
     width: 300px !important;
     width: 300px !important;
     float: right !important;
     float: right !important;
Line 14: Line 22:
     padding: 0 !important;
     padding: 0 !important;
     box-sizing: border-box !important;
     box-sizing: border-box !important;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.1) !important;
}
}


/* 2. INFOBOX TITLE (Yellow Background, Dark Text) */
.portable-infobox .pi-title {
.portable-infobox .pi-title {
     background-color: #ffd700 !important; /* Gold/Yellow */
     background-color: #ffd700 !important; /* Yellow/Gold */
     color: #2d4234 !important; /* Dark Green text for readability */
     color: #2d4234 !important; /* Dark Green Text */
     text-align: center !important;
     text-align: center !important;
     padding: 12px 0 !important;
     padding: 12px 0 !important;
Line 28: Line 34:
     margin: -2px -2px 0 -2px !important;
     margin: -2px -2px 0 -2px !important;
     box-sizing: border-box !important;
     box-sizing: border-box !important;
    font-weight: bold !important;
}
}


/* 3. INFOBOX SECTION HEADERS (Green Background, White Text) */
.portable-infobox .pi-header {
.portable-infobox .pi-header {
     background-color: #3e5a47 !important; /* Forest Green */
     background-color: #3e5a47 !important; /* Green */
     color: #ffffff !important; /* White text */
     color: #ffffff !important; /* White Text */
     text-align: center !important;
     text-align: center !important;
     padding: 8px 0 !important;
     padding: 8px 0 !important;
Line 42: Line 46:
     margin: 0 -2px !important;
     margin: 0 -2px !important;
     box-sizing: border-box !important;
     box-sizing: border-box !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}
}


/* 4. THE CUSTOM SIDEBAR */
/* 3. THE SIDEBAR & LOGO "SHELF" (Visibility Fix) */
/* Targets the sidebar area (Vector skin) */
#mw-panel,
#mw-panel {
#p-logo,
     background-color: #f4f9f6 !important; /* Very faint leaf-green wash */
.mw-sidebar,
     border-right: 2px solid #3e5a47 !important; /* Forest Green divider */
.vector-sidebar-container {
     height: 100vh !important;
     background-color: rgba(255, 255, 255, 0.9) !important;  
     border-right: 3px solid #3e5a47 !important;
     box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
}
}


/* Sidebar Link Styling */
#p-logo { padding: 10px !important; }
#mw-panel .vector-menu-content-list li a {
 
     color: #3e5a47 !important;
/* Sidebar Link Colors */
.vector-menu-heading,
.vector-menu-content-list li a {
     color: #2d4234 !important;
    font-weight: bold !important;
     font-family: "Georgia", serif !important;
     font-family: "Georgia", serif !important;
}
}


#mw-panel .vector-menu-content-list li a:hover {
/* 4. THE TOP HEADER & SEARCH BAR */
     color: #ffd700 !important; /* Glows Yellow on hover */
#mw-head, .mw-header {
     text-decoration: none !important;
     background-color: rgba(255, 255, 255, 0.85) !important;
     border-bottom: 2px solid #3e5a47 !important;
}
}


/* 5. IMAGE AREA (Centered) */
#p-search, .vector-search-box {
.portable-infobox .pi-image {
     background: #ffffff !important;
     background-color: #fcfdfc !important;  
     padding: 2px 10px !important;
     padding: 15px !important;
     border: 1px solid #3e5a47 !important;
     text-align: center !important;
    border-radius: 4px !important;
     display: block;
     margin-top: -10px !important; /* Pulls the search bar higher */
    float: right !important;
}
}


.portable-infobox .pi-image img {
/* 5. ARTICLE CONTENT AREA */
     margin: 0 auto !important;
#content {
     display: block !important;
     background-color: rgba(255, 255, 255, 0.95) !important;
     max-width: 100% !important;
     border: 1px solid #3e5a47 !important;
     border-radius: 5px !important;
}
}


/* 6. DATA ROWS & LEAVES */
/* 6. TABLE OF CONTENTS */
.portable-infobox .pi-data {
#toc, .toc {
     display: flex !important;
     border: 2px solid #3e5a47 !important;
     border-bottom: 1px solid #eee !important;
     background-color: #ffffff !important;
}
}


.portable-infobox .pi-data-label {
.tocnumber { color: #ffd700 !important; }
    background-color: #f9f9f9 !important;
.toctext { color: #2d4234 !important; }
    padding: 10px !important;
    flex: 0 0 40% !important;
    border-right: 1px solid #ddd !important;
    font-size: 11px !important;
    font-weight: bold;
}


.portable-infobox .pi-data-value {
/* 7. LEAF DECORATIONS (H2/H3) */
    padding: 10px !important;
    flex: 1 !important;
    font-size: 11px !important;
}
 
.portable-infobox .pi-data-value li::before {
    content: "\1F343  " !important;
    font-size: 10px !important;
}
 
/* 7. ARTICLE HEADERS (H2/H3) */
.mw-parser-output h2, .mw-parser-output h3 {
.mw-parser-output h2, .mw-parser-output h3 {
     border-bottom: 2px solid #3e5a47 !important;
     border-bottom: 2px solid #3e5a47 !important;
     color: #3e5a47 !important; /* Switched to Green to match theme */
     color: #3e5a47 !important;
}
}


Line 114: Line 108:
.mw-parser-output h3::before { content: "\1F343  " !important; font-size: 16px !important; }
.mw-parser-output h3::before { content: "\1F343  " !important; font-size: 16px !important; }


/* 8. TABLE OF CONTENTS */
/* 8. AUTOMATIC FOOTER */
#toc, .toc {
    border: 2px solid #3e5a47 !important;
    background-color: #fff !important;
}
 
#toctitle h2 { color: #3e5a47 !important; border-bottom: 1px solid #ffd700 !important; }
.tocnumber { color: #ffd700 !important; }
 
/* 9. AUTOMATIC FOOTER */
.mw-parser-output::after {
.mw-parser-output::after {
     content: "🍃\A END OF ENTRY";
     content: "🍃\A END OF ENTRY";
Line 136: Line 121:
     font-size: 10px !important;
     font-size: 10px !important;
     letter-spacing: 3px !important;
     letter-spacing: 3px !important;
}
/* 10. UI FIXES */
#p-search, .vector-search-box {
    float: right !important;
}
/* ============================================================
  GLOBAL BACKGROUND IMAGE
  ============================================================ */
body {
    /* Replace the URL below with your actual uploaded image link */
    background-image: url("http://localhost/wiki/images/a/a4/WIKI_BACKGROUND.jpeg") !important;
   
    /* This keeps the image from repeating and makes it cover the screen */
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center center !important;
    background-size: cover !important;
}
/* OPTIONAL: If your background image makes the text hard to read,
  this adds a slight white tint to the main content area.
*/
#content {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-radius: 8px !important;
}
/* ============================================================
  UI VISIBILITY FIX (SIDEBAR & HEADER SHELVES)
  ============================================================ */
/* 1. THE SIDEBAR SHELF */
#mw-panel {
    background-color: rgba(255, 255, 255, 0.8) !important; /* White glass look */
    border-right: 3px solid #3e5a47 !important; /* Thick Green divider */
    padding-left: 10px !important;
    height: 100vh !important;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
}
/* 2. THE TOP MENU & SEARCH SHELF (Vector Skin) */
#mw-head {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 2px solid #3e5a47 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}
/* 3. SITE TITLE / LOGO AREA FIX */
#p-logo {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 0 0 15px 0 !important; /* Rounded bottom corner */
    padding: 5px !important;
}
/* 4. MAKING SIDEBAR TEXT DARKER FOR VISIBILITY */
#mw-panel .vector-menu-heading,
#mw-panel .vector-menu-content-list li a {
    color: #2d4234 !important; /* Dark Forest Green */
    font-weight: bold !important;
    text-shadow: 1px 1px 0px #ffffff; /* Subtle highlight behind letters */
}
/* 5. SEARCH BAR BACKING */
#p-search {
    background: white !important;
    padding: 5px 15px !important;
    border-radius: 20px !important; /* Gives it a "pill" shape */
    margin-top: 5px !important;
    border: 1px solid #3e5a47 !important;
}
}
Retrieved from "https://lennleft.tail8cf621.ts.net/wiki/index.php/MediaWiki:Common.css"