MediaWiki:Common.css: Difference between revisions

Revision as of 23:34, 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;
}