MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* ============================================================
   PORTABLE INFOBOX - KHWIKI STYLE (REWRITTEN)
   ============================================================ */

/* 1. Main Container - Red border helps us see if it's loading */
.portable-infobox {
    border: 3px solid red !important; 
    background-color: #ffffff;
    width: 280px;
    float: right;
    margin: 0 0 1em 1em;
    padding: 0;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    font-family: sans-serif;
    font-size: 12px;
}

/* 2. Top Title Bar - Deep KH Blue */
.pi-title {
    background-color: #003366 !important; 
    color: #ffffff !important;
    font-family: "Georgia", serif;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border-bottom: 2px solid #000;
}

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

.pi-image img {
    max-width: 100% !important;
    height: auto !important;
    border: 1px solid #ccc;
    background: #fff;
}

/* 4. Section Headers (Biography, Physical, etc.) */
.pi-header {
    background-color: #4a4a4a !important;
    color: #ffffff !important;
    font-weight: bold;
    text-align: center;
    padding: 5px 0 !important;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    display: block !important;
    border-top: 1px solid #333;
}

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

/* The Label (Left Side - Grey) */
.pi-data-label {
    background-color: #e9e9e9 !important;
    color: #333 !important;
    font-weight: bold;
    padding: 6px 8px;
    width: 35% !important;
    border-right: 1px solid #ccc !important;
    font-size: 11px;
}

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

/* Remove bottom border from last item */
.pi-data:last-child {
    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;
}