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.

/* CSS placed here will be applied to all skins */


/* --- Main Page Hero Search (Star Citizen Style) --- */

.mainpage-search {
    /* 1. SET YOUR BACKGROUND IMAGE */
    /* !!! YOU MUST CHANGE THIS URL !!! */
    /* Find the correct URL by following the instructions below */
    background-image: url('/w/images/4/49/Screenshot_2025-10-30_023207.png');
    
    /* 2. Style the hero box */
    background-size: cover;
    background-position: center;
    padding: 4em 2em; /* Adds big spacing */
    border-radius: 8px;
    margin-bottom: 2em; /* Space between box and content */

    /* 3. Center the search bar inside */
    text-align: center;
}

/* 4. Style the search INPUT field */
.mainpage-search input[type="search"] {
    font-size: 1.5em; /* Big text */
    padding: 10px;
    width: 60%;
    max-width: 500px;
    border: 1px solid #aaa;
    border-radius: 8px 0 0 8px; /* Rounded left corners */
    box-sizing: border-box; /* Fixes padding calculations */
}

/* 5. Style the search BUTTON */
.mainpage-search input[type="submit"] {
    font-size: 1.5em; /* Match the input */
    padding: 10px;
    border: 1px solid #aaa;
    border-left: none; /* Joins it to the search field */
    border-radius: 0 8px 8px 0; /* Rounded right corners */
    background: #f0f0f0;
    cursor: pointer; /* Clickable hand */
}

/* 6. Add a hover effect */
.mainpage-search input[type="submit"]:hover {
    background: #e0e0e0;
}