|
|
| Line 1: |
Line 1: |
| /* 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;
| |
| }
| |
