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)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

a:hover,
.navbar a:hover,
.footer a:hover,
.nav-link.active,
.nav-link:active,
.nav-link:focus,
.nav-link:hover,
.n-mainpage-description:hover,
.n-mainpage-description:active,
.n-mainpage-description:focus {
    color: #45eaff !important;  /* Club Penguin blue? */
    text-shadow: none !important;
    background: none !important;
    text-decoration: underline !important;
    filter: none !important;
}

.p-navbar,
#mw-navigation,
.chameleon-navbar,
.chameleon-header {
    background: linear-gradient(90deg, #0c2336cc 0%, #187fcfcc 100%) !important;
    box-shadow: 0 6px 24px #00203f33;
    min-height: 64px;
    border: none !important;
    padding: 0 !important;
}

.p-navbar .navbar-nav,
.chameleon-navbar .navbar-nav {
    display: flex !important;
    align-items: center !important;
    height: 64px !important;
}

.p-navbar .nav-link,
.chameleon-navbar .nav-link {
    font-size: 1.08em !important;
    font-family: 'Inter', 'Roboto', 'Segoe UI', Arial, sans-serif !important;
    color: #45eaff !important;
    font-weight: 700 !important;
    padding: 0 14px !important;
    background: none !important;
}

/* Fix "Tools" dropdown and prevent ugly gaps */
.p-navbar .dropup,
.p-navbar .dropdown,
.p-navbar .nav-item {
    margin: 0 !important;
    padding: 0 !important;
}

.p-navbar .dropdown-menu {
    background: #14283b !important;
    border-radius: 10px !important;
    border: 1.5px solid #23a3ce !important;
    margin-top: 8px !important;
    box-shadow: 0 4px 24px #0008;
    min-width: 200px;
}

.p-navbar .dropdown-menu .nav-link {
    color: #5deaff !important;
    font-weight: 600 !important;
    padding: 10px 18px !important;
    background: none !important;
    border-radius: 8px !important;
    transition: background 0.12s, color 0.12s;
}

.p-navbar .dropdown-menu .nav-link:hover,
.p-navbar .dropdown-menu .nav-link:focus {
    color: #fff !important;
    background: #23a3ce !important;
    text-decoration: none !important;
}

/* Hide any empty .col or .row in footer or toolbars */
.chameleon-footer .row > .col:empty,
#footer .row > .col:empty,
.chameleon-footer .tools:empty,
.footer-tools:empty {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}


.p-navbar.not-collapsible.small.mb-2 {
    margin-bottom: 0 !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
}
.p-navbar .navbar-nav {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}


.chameleon-footer,
#footer {
    background: linear-gradient(90deg, #102c43 0%, #153952 100%) !important;
    color: #75eaff !important;
    border-top: 2px solid #18bcf9 !important;
    font-size: 0.97em !important;
    border-radius: 18px 18px 0 0 !important;
    margin: 0 auto !important;
    padding: 12px 18px !important;
    box-shadow: 0 -4px 30px #00eaff22 !important;
    max-width: 1080px !important;
}

.chameleon-footer .row,
#footer .row {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Footer columns tighter */
.chameleon-footer .col,
#footer .col {
    padding: 0 8px !important;
    margin: 0 !important;
    min-height: 0 !important;
}

/* Footer links row clean-up */
#footer-places,
.footer-places {
    display: flex !important;
    flex-wrap: wrap;
    gap: 14px;
    padding: 0 !important;
    margin: 0 !important;
}

/* Footer info */
#footer-info,
.footer-info {
    font-size: 1em !important;
    color: #75eaff !important;
    margin-bottom: 0.5em !important;
}

/* Footer icons right-aligned, no giant gap */
.footer-icons,
#footer-icons {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

.footer-icons img,
#footer-icons img {
    height: 31px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.chameleon-footer .row,
#footer .row {
    border: none !important;
    background: none !important;
}

.chameleon-footer .tools,
#footer .tools,
.chameleon-footer .row > .col:empty,
#footer .row > .col:empty {
    display: none !important;
}

@media (max-width: 700px) {
    #footer-places, .footer-places {
        flex-direction: column !important;
        gap: 6px;
    }
    .chameleon-footer, #footer {
        padding: 12px 4vw !important;
        border-radius: 18px 18px 0 0 !important;
    }
}