Lenn's Fun Stuff

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →
m 2 revisions imported
No edit summary
Line 1: Line 1:
/* ============================================================
/* ============================================================
   PORTABLE INFOBOX - KHWIKI STYLE (REWRITTEN)
   PORTABLE INFOBOX - KINGDOM HEARTS STYLE
   ============================================================ */
   ============================================================ */


/* 1. Main Container - Red border helps us see if it's loading */
/* 1. Main Container - The "Menu" Box */
.portable-infobox {
.portable-infobox {
     border: 3px solid red !important;  
    background-color: #000b1a; /* Very deep KH Blue */
     background-color: #ffffff;
     border: 2px solid #5c5c5c; /* Silver-grey border */
     width: 280px;
     border-radius: 12px;
     width: 300px;
     float: right;
     float: right;
     margin: 0 0 1em 1em;
     margin: 0 0 1em 1em;
     padding: 0;
     padding: 0;
     box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    overflow: hidden; /* Keeps corners rounded */
     font-family: sans-serif;
     box-shadow: 0 0 15px rgba(0, 102, 255, 0.2); /* Subtle blue glow */
     font-size: 12px;
     color: #ffffff;
     font-family: "Georgia", serif;
}
}


/* 2. Top Title Bar - Deep KH Blue */
/* 2. Title Bar - Gradient Blue */
.pi-title {
.pi-title {
     background-color: #003366 !important;  
     background: linear-gradient(to bottom, #003366 0%, #001a33 100%) !important;
     color: #ffffff !important;
     color: #e0f2ff !important;
    font-family: "Georgia", serif;
     font-size: 18px;
     font-size: 14px;
     font-weight: bold;
     font-weight: bold;
     text-align: center;
     text-align: center;
     padding: 10px;
     padding: 12px;
     border-bottom: 2px solid #000;
     border-bottom: 2px solid #5c5c5c;
    text-shadow: 1px 1px 2px #000;
}
}


/* 3. Image Area - HOT PINK for testing.
/* 3. Image Area */
  If this works, your character image should appear inside the pink. */
.pi-image {
.pi-image {
    display: block !important;
     background-color: #000;
    visibility: visible !important;
     padding: 10px;
     background-color: #FFCCE6 !important;
    border: 2px dashed #000 !important;
     min-height: 200px !important;
     text-align: center;
     text-align: center;
     padding: 10px;
     border-bottom: 1px solid #333;
}
}


Line 43: Line 41:
     max-width: 100% !important;
     max-width: 100% !important;
     height: auto !important;
     height: auto !important;
     border: 1px solid #ccc;
     border-radius: 4px;
    background: #fff;
}
}


/* 4. Section Headers (Biography, Physical, etc.) */
/* 4. Section Headers (Biography, Stats, etc.) */
.pi-header {
.pi-header {
     background-color: #4a4a4a !important;
     background-color: #1a1a1a !important; /* Dark grey/black */
     color: #ffffff !important;
     color: #bf9b30 !important; /* KH Gold accent */
     font-weight: bold;
     font-weight: bold;
     text-align: center;
     text-align: left;
     padding: 5px 0 !important;
     padding: 6px 12px !important;
     text-transform: uppercase;
     text-transform: uppercase;
     font-size: 10px;
     font-size: 11px;
     letter-spacing: 1px;
     letter-spacing: 1.5px;
    display: block !important;
     border-top: 1px solid #333;
     border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}
}


/* 5. Data Rows (The Side-by-Side Look) */
/* 5. Data Rows */
.pi-data {
.pi-data {
     display: flex !important;
     display: flex !important;
    flex-direction: row;
     border-bottom: 1px solid #1a1a1a;
     border-bottom: 1px solid #eeeeee;
}
}


/* The Label (Left Side - Grey) */
/* The Label (Left Side) */
.pi-data-label {
.pi-data-label {
     background-color: #e9e9e9 !important;
     background-color: rgba(255, 255, 255, 0.05) !important;
     color: #333 !important;
     color: #8bb6ff !important; /* Light blue techy text */
     font-weight: bold;
     font-weight: bold;
     padding: 6px 8px;
     padding: 8px;
     width: 35% !important;
     width: 40% !important;
    border-right: 1px solid #ccc !important;
     font-size: 11px;
     font-size: 11px;
    border-right: 1px solid #1a1a1a;
}
}


/* The Value (Right Side - White) */
/* The Value (Right Side) */
.pi-data-value {
.pi-data-value {
    background-color: #ffffff !important;
     padding: 8px;
     padding: 6px 8px;
     width: 60% !important;
     width: 65% !important;
     font-size: 12px;
     font-size: 11px;
    color: #efefef;
}
}


/* Remove bottom border from last item */
/* Clean up last item */
.pi-data:last-child {
.pi-data:last-child {
     border-bottom: none;
     border-bottom: none;
}
/* NUCLEAR TEST - IF THE CHARACTER NAME IS LIME GREEN, CSS IS LOADING */
.pi-title {
    background-color: lime !important;
    color: black !important;
    border: 10px solid purple !important;
}
/* Adding the -box suffix to ensure we hit the right target */
.pi-image-box, .pi-media {
    background-color: #FFCCE6 !important;
    border: 5px solid #FF69B4 !important; /* Hot Pink */
    padding: 15px !important;
    display: block !important;
}
}
Retrieved from "https://lennleft.tail8cf621.ts.net/wiki/index.php/MediaWiki:Common.css"