MediaWiki:Common.css: Difference between revisions

Revision as of 23:37, 13 August 2025

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

body,
.skin-chameleon,
.skin-chameleon .container,
.skin-chameleon .row,
.skin-chameleon .col {
    background: #181d22 !important;
    color: #e7eaf0 !important;
    font-family: 'Inter', 'Roboto', 'Segoe UI', Arial, sans-serif !important;
}

a, a:visited, .navbar a, .footer a {
    color: #42baff !important;
    text-decoration: none !important;
    transition: color 0.2s;
}

a:hover, .navbar a:hover, .footer a:hover {
    color: #1ebaff !important;
    text-decoration: underline !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #fff !important;
    font-family: 'Inter', 'Roboto', 'Segoe UI', Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
}

pre, code, .mw-code, .mw-highlight pre {
    background: #21272e !important;
    color: #67d3fa !important;
    font-family: 'JetBrains Mono', 'Fira Mono', 'Consolas', 'monospace' !important;
    border-radius: 6px;
    padding: 0.5em;
}

table, th, td {
    background: #23272c !important;
    color: #e7eaf0 !important;
    border-color: #32363c !important;
}

input[type="search"], input[type="text"], .form-control, textarea {
    background: #22262c !important;
    color: #e7eaf0 !important;
    border: 1px solid #42baff !important;
}

.navbar, .footer, .chameleon-navbar, .chameleon-footer, .chameleon-header {
    background: #14181d !important;
    color: #e7eaf0 !important;
    border: none !important;
}

#mw-head, #mw-panel, .navbar-header {
    background: #171b21 !important;
}

.mw-body, .mw-body-content {
    background: transparent !important;
}

::-webkit-scrollbar {
    background: #22262c;
    width: 12px;
}
::-webkit-scrollbar-thumb {
    background: #42baff;
    border-radius: 8px;
}
/* --- SEARCH BAR GLOW-UP --- */
input[type="search"], .chameleon-search input, .form-control {
    background: #20262c !important;
    color: #e7eaf0 !important;
    border: 1.5px solid #42baff !important;
    border-radius: 7px !important;
    padding: 6px 14px !important;
    font-size: 1.05rem !important;
    font-family: 'Inter', 'Roboto', 'Segoe UI', Arial, sans-serif !important;
    box-shadow: none !important;
    transition: border-color 0.18s, box-shadow 0.18s;
}

input[type="search"]:focus, .chameleon-search input:focus, .form-control:focus {
    outline: none !important;
    border-color: #1ebaff !important;
    box-shadow: 0 0 0 2px rgba(66,186,255,0.17) !important;
    background: #232b34 !important;
    color: #fff !important;
}

/* Optional: Modernize the search icon if possible */
input[type="search"]::placeholder, .form-control::placeholder {
    color: #8ea8be !important;
    opacity: 1 !important;
}
/* --- Better search bar + button combo --- */
.chameleon-search {
    display: flex !important;
    align-items: center !important;
}

.chameleon-search input[type="search"], 
.chameleon-search .form-control {
    border-radius: 7px 0 0 7px !important; /* Round left side only */
    border-right: none !important;
    background: #20262c !important;
    color: #e7eaf0 !important;
    font-size: 1.05rem !important;
    padding: 6px 14px !important;
    height: 38px !important;
}

.chameleon-search button,
.chameleon-search .input-group-btn > button {
    border-radius: 0 7px 7px 0 !important;  /* Round right side only */
    border: 1.5px solid #42baff !important;
    border-left: none !important;
    background: #232b34 !important;
    height: 38px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    transition: background 0.18s, border-color 0.18s;
}

.chameleon-search button:hover,
.chameleon-search .input-group-btn > button:hover {
    background: #263343 !important;
    border-color: #1ebaff !important;
}

/* Make the search icon align and pop */
.chameleon-search button .fa-search,
.chameleon-search button [class*="icon-"] {
    color: #a8ff0b !important;
    font-size: 1.18em !important;
    margin: 0;
    padding: 0;
}

/* Remove outline on button click for clean look */
.chameleon-search button:focus {
    outline: none !important;
}

/* Fix minor spacing if needed */
.chameleon-search input[type="search"]:focus {
    z-index: 1;
}
/* --- ULTRA-TARGETED SEARCH BUTTON FIX --- */

/* Style the input */
input#searchInput, input[name="search"] {
    background: #20262c !important;
    color: #e7eaf0 !important;
    border: 1.5px solid #42baff !important;
    border-right: none !important;
    border-radius: 7px 0 0 7px !important;
    padding: 6px 14px !important;
    font-size: 1.05rem !important;
    font-family: 'Inter', 'Roboto', 'Segoe UI', Arial, sans-serif !important;
    height: 38px !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Style the button */
button#searchGoButton, button.search-btn, button.searchGoButton {
    background: #232b34 !important;
    border: 1.5px solid #42baff !important;
    border-left: none !important;
    border-radius: 0 7px 7px 0 !important;
    height: 38px !important;
    min-width: 44px !important;
    margin-left: -3px !important;  /* Prevents gap */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.18s, border-color 0.18s;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
}

/* Add glow and color to icon via pseudo-element */
button#searchGoButton::before,
button.search-btn::before,
button.searchGoButton::before {
    content: "\f002"; /* FontAwesome search icon */
    font-family: "Font Awesome 5 Free", "FontAwesome", Arial, sans-serif;
    font-weight: 900;
    color: #a8ff0b;
    font-size: 1.3em;
    text-shadow: 0 0 8px #a8ff0b33;
    display: block;
}

button#searchGoButton:hover, button.search-btn:hover, button.searchGoButton:hover {
    background: #263343 !important;
    border-color: #1ebaff !important;
}

/* If your icon is background-image, force it out for this style: */
button#searchGoButton, button.search-btn, button.searchGoButton {
    background-image: none !important;
}
/* --- FULL-WIDTH FOOTER FIX --- */
.chameleon-footer,
.footer,
#footer,
#footer-info,  /* Sometimes Chameleon uses this */
#footer-places,
#footer-icons {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50%;
    transform: translateX(-50%);
    border-radius: 0 !important;
    box-sizing: border-box !important;
    background: #14181d !important; /* match your navbar/footer bg */
    color: #e7eaf0 !important;
    padding: 18px 0 12px 0 !important; /* add top/bottom breathing room */
}

.chameleon-footer .container,
.footer .container,
#footer .container {
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Make the search button match the input, neon only for the icon */
button#searchGoButton, button.search-btn, button.searchGoButton {
    background: #232b34 !important;       /* Same as input background */
    border: 1.5px solid #42baff !important;
    border-left: none !important;
    border-radius: 0 7px 7px 0 !important;
    height: 38px !important;
    min-width: 44px !important;
    margin-left: -3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.18s, border-color 0.18s;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
}

/* Neon icon, not neon background */
button#searchGoButton::before,
button.search-btn::before,
button.searchGoButton::before {
    content: "\f002";
    font-family: "Font Awesome 5 Free", "FontAwesome", Arial, sans-serif;
    font-weight: 900;
    color: #a8ff0b;
    font-size: 1.3em;
    text-shadow: 0 0 8px #a8ff0b33;
    display: block;
    background: none !important;
}