MediaWiki:Common.css: Difference between revisions

From Twisted
(Created page with "→‎CSS placed here will be applied to all skins: →‎=== Base page background and text ===: body { background-color: #0d0f15; →‎deep navy/black: color: #e4e9f7; →‎light gray-blue text: font-family: "Segoe UI", Roboto, Arial, sans-serif; } →‎=== Links ===: a { color: #5cb8ff; →‎radar blue: text-decoration: none; } a:visited { color: #8ab4ff; } a:hover { color: #79ff97; →‎green glow hover: } →‎=== Main content area ===: .m...")
 
No edit summary
 
(19 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
/* === Base page background and text === */
 
body {
body,
     background-color: #0d0f15; /* deep navy/black */
.skin-chameleon,
     color: #e4e9f7; /* light gray-blue text */
.skin-chameleon .container,
     font-family: "Segoe UI", Roboto, Arial, sans-serif;
.skin-chameleon .row,
.skin-chameleon .col {
     background: #181d22 !important;
     color: #e7eaf0 !important;
     font-family: 'Inter', 'Roboto', 'Segoe UI', Arial, sans-serif !important;
}
/* Hide the page title on the Home page */
body.page-Home h1.firstHeading {
    display: none !important;
}
body.page-Home .mw-redirectedfrom {
    display: none !important;
}
.mw-parser-output .twisted-hero {
    background: #181d22;
    border-radius: 10px;
    box-shadow: 0 2px 8px #000a;
    padding: 24px 24px 12px 24px;
    margin: 0 auto 24px auto;
    display: flex;
    align-items: center;
    max-width: 900px;
    gap: 30px;
}
.mw-parser-output .twisted-hero-logo {
    flex: 0 0 auto;
}
.mw-parser-output .twisted-hero-main {
    flex: 1 1 auto;
}
.mw-parser-output .twisted-btn {
    display: inline-block;
    font-weight: 600;
    border-radius: 7px;
    padding: 7px 20px;
    font-size: 1em;
    background: #42baff;
    color: #181d22;
    text-decoration: none !important;
    margin: 0 7px 5px 0;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 8px #0004;
}
.mw-parser-output .twisted-btn.discord {
    background: #232b34;
    color: #42baff;
}
.mw-parser-output .twisted-btn:hover {
    background: #1ebaff;
    color: #fff;
    box-shadow: 0 4px 18px #42baff44;
}
.mw-parser-output .twisted-card {
    background: #21272e;
    border-radius: 10px;
    padding: 18px 24px;
    margin: 18px 0 0 0;
    box-shadow: 0 2px 10px #000a;
    color: #e7eaf0;
}
}


/* === Links === */
.mw-parser-output .twisted-card {
a {
     background: #21272e;
     color: #5cb8ff; /* radar blue */
     border-radius: 10px;
     text-decoration: none;
    padding: 18px 24px;
    margin: 18px 0 0 0;
    box-shadow: 0 2px 10px #000a;
    color: #e7eaf0;
}
}
a:visited {
 
     color: #8ab4ff;
a, a:visited, .navbar a, .footer a {
     color: #42baff !important;
    text-decoration: none !important;
    transition: color 0.2s;
}
}
a:hover {
 
     color: #79ff97; /* green glow hover */
a:hover, .navbar a:hover, .footer a:hover {
     color: #1ebaff !important;
    text-decoration: underline !important;
}
}


/* === Main content area === */
h1, h2, h3, h4, h5, h6 {
.mw-body, .mw-body-content, #content {
    color: #fff !important;
     background-color: #1a1f27;
    font-family: 'Inter', 'Roboto', 'Segoe UI', Arial, sans-serif !important;
     border: 1px solid #2a2f3c;
    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;
     border-radius: 6px;
     padding: 1rem;
     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;
}
}


/* === Sidebar / navigation panel === */
/* Optional: Modernize the search icon if possible */
#mw-panel {
input[type="search"]::placeholder, .form-control::placeholder {
     background-color: #12151c;
    color: #8ea8be !important;
     border-right: 1px solid #2a2f3c;
    opacity: 1 !important;
}
/* --- Better search bar + button combo --- */
.chameleon-search {
     display: flex !important;
     align-items: center !important;
}
}
#mw-panel .portal .body {
 
     background: none;
.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;
}
}
#mw-panel a {
 
     color: #5cb8ff;
.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;
}
}
#mw-panel a:hover {
 
     color: #79ff97;
/* 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;
}
}


/* === Headings === */
/* Remove outline on button click for clean look */
h1, h2, h3, h4 {
.chameleon-search button:focus {
    color: #ffffff;
     outline: none !important;
    border-bottom: 1px solid #2a2f3c;
     padding-bottom: 4px;
}
}


/* === Table styles === */
/* Fix minor spacing if needed */
table {
.chameleon-search input[type="search"]:focus {
    border-collapse: collapse;
     z-index: 1;
     background-color: #141922;
    color: #e4e9f7;
}
}
th, td {
/* --- ULTRA-TARGETED SEARCH BUTTON FIX --- */
     border: 1px solid #2a2f3c;
 
     padding: 6px 10px;
/* 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;
}
}
th {
 
     background-color: #1f2633;
/* Style the button */
     color: #ffffff;
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;
}
}


/* === Infobox style (for right-hand side info) === */
/* Add glow and color to icon via pseudo-element */
.infobox {
button#searchGoButton::before,
     background-color: #1f2633;
button.search-btn::before,
     border: 1px solid #2a2f3c;
button.searchGoButton::before {
     color: #ffffff;
     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;
}
}
.infobox th {
 
     background-color: #273142;
button#searchGoButton:hover, button.search-btn:hover, button.searchGoButton:hover {
     background: #263343 !important;
    border-color: #1ebaff !important;
}
}


/* === Search bar === */
/* If your icon is background-image, force it out for this style: */
#searchInput {
button#searchGoButton, button.search-btn, button.searchGoButton {
     background-color: #12151c;
     background-image: none !important;
     border: 1px solid #2a2f3c;
}
     color: #e4e9f7;
/* 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;
}
}


/* === Footer === */
/* Neon icon, not neon background */
#footer {
button#searchGoButton::before,
     background-color: #0d0f15;
button.search-btn::before,
     border-top: 1px solid #2a2f3c;
button.searchGoButton::before {
     color: #7f8da5;
     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;
}
}

Latest revision as of 02:21, 14 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;
}
/* Hide the page title on the Home page */
body.page-Home h1.firstHeading {
    display: none !important;
}
body.page-Home .mw-redirectedfrom {
    display: none !important;
}
.mw-parser-output .twisted-hero {
    background: #181d22;
    border-radius: 10px;
    box-shadow: 0 2px 8px #000a;
    padding: 24px 24px 12px 24px;
    margin: 0 auto 24px auto;
    display: flex;
    align-items: center;
    max-width: 900px;
    gap: 30px;
}
.mw-parser-output .twisted-hero-logo {
    flex: 0 0 auto;
}
.mw-parser-output .twisted-hero-main {
    flex: 1 1 auto;
}
.mw-parser-output .twisted-btn {
    display: inline-block;
    font-weight: 600;
    border-radius: 7px;
    padding: 7px 20px;
    font-size: 1em;
    background: #42baff;
    color: #181d22;
    text-decoration: none !important;
    margin: 0 7px 5px 0;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 8px #0004;
}
.mw-parser-output .twisted-btn.discord {
    background: #232b34;
    color: #42baff;
}
.mw-parser-output .twisted-btn:hover {
    background: #1ebaff;
    color: #fff;
    box-shadow: 0 4px 18px #42baff44;
}
.mw-parser-output .twisted-card {
    background: #21272e;
    border-radius: 10px;
    padding: 18px 24px;
    margin: 18px 0 0 0;
    box-shadow: 0 2px 10px #000a;
    color: #e7eaf0;
}

.mw-parser-output .twisted-card {
    background: #21272e;
    border-radius: 10px;
    padding: 18px 24px;
    margin: 18px 0 0 0;
    box-shadow: 0 2px 10px #000a;
    color: #e7eaf0;
}

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;
}
/* 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;
}
Retrieved from "http://twisted.wiki/index.php?title=MediaWiki:Common.css&oldid=47"
Powered by MediaWiki