MediaWiki:Common.css: Difference between revisions

From Twisted
No edit summary
No edit summary
 
(16 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* ===== General Layout ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
body {
 
     font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
body,
     background-color: #101014 !important;
.skin-chameleon,
     color: #e4e4e4 !important;
.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;
}
}


/* Remove ugly serif in page titles */
.mw-parser-output .twisted-card {
#firstHeading {
    background: #21272e;
     font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
     border-radius: 10px;
     font-weight: bold;
    padding: 18px 24px;
     font-size: 1.8em;
    margin: 18px 0 0 0;
     box-shadow: 0 2px 10px #000a;
     color: #e7eaf0;
}
}


/* ===== Header / Search Bar ===== */
a, a:visited, .navbar a, .footer a {
#mw-page-base, #mw-head-base {
     color: #42baff !important;
     background: #15151b !important;
    text-decoration: none !important;
    transition: color 0.2s;
}
}
#p-search {
 
     background: none !important;
a:hover, .navbar a:hover, .footer a:hover {
    color: #1ebaff !important;
     text-decoration: underline !important;
}
}
#simpleSearch {
 
     background: #1f1f27 !important;
h1, h2, h3, h4, h5, h6 {
     border: none !important;
     color: #fff !important;
     border-radius: 5px;
     font-family: 'Inter', 'Roboto', 'Segoe UI', Arial, sans-serif !important;
    font-weight: 700 !important;
     letter-spacing: 0.01em;
}
}
#searchInput {
 
     background: transparent !important;
pre, code, .mw-code, .mw-highlight pre {
     color: #e4e4e4 !important;
     background: #21272e !important;
     color: #67d3fa !important;
    font-family: 'JetBrains Mono', 'Fira Mono', 'Consolas', 'monospace' !important;
    border-radius: 6px;
    padding: 0.5em;
}
}


/* ===== Sidebar ===== */
table, th, td {
#mw-panel {
    background: #23272c !important;
     background: #15151b !important;
    color: #e7eaf0 !important;
     border-color: #32363c !important;
}
}
#mw-panel .portal h3 {
 
     color: #bbb !important;
input[type="search"], input[type="text"], .form-control, textarea {
    background: #22262c !important;
     color: #e7eaf0 !important;
    border: 1px solid #42baff !important;
}
}
#mw-panel .portal .body li a {
 
     color: #a8b3ff !important;
.navbar, .footer, .chameleon-navbar, .chameleon-footer, .chameleon-header {
    background: #14181d !important;
     color: #e7eaf0 !important;
    border: none !important;
}
}
#mw-panel .portal .body li a:hover {
 
     color: #ff7878 !important;
#mw-head, #mw-panel, .navbar-header {
     background: #171b21 !important;
}
}


/* ===== Content Area ===== */
.mw-body, .mw-body-content {
.mw-body {
     background: transparent !important;
    background: #18181f !important;
    border-radius: 8px;
    padding: 15px;
}
.mw-body h1, .mw-body h2, .mw-body h3 {
     color: #ffffff !important;
}
}


/* ===== Links ===== */
::-webkit-scrollbar {
a {
     background: #22262c;
     color: #6fa8ff !important;
    width: 12px;
}
}
a:visited {
::-webkit-scrollbar-thumb {
     color: #a87fff !important;
     background: #42baff;
    border-radius: 8px;
}
}
a:hover {
/* --- SEARCH BAR GLOW-UP --- */
     color: #ff7878 !important;
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;
}
}


/* ===== Tables ===== */
input[type="search"]:focus, .chameleon-search input:focus, .form-control:focus {
table {
     outline: none !important;
     background: #202028 !important;
     border-color: #1ebaff !important;
     border: 1px solid #333 !important;
     box-shadow: 0 0 0 2px rgba(66,186,255,0.17) !important;
     border-radius: 6px;
    background: #232b34 !important;
    color: #fff !important;
}
}
th {
 
     background: #2a2a38 !important;
/* Optional: Modernize the search icon if possible */
     color: #fff !important;
input[type="search"]::placeholder, .form-control::placeholder {
     color: #8ea8be !important;
     opacity: 1 !important;
}
}
td {
/* --- Better search bar + button combo --- */
     color: #ddd !important;
.chameleon-search {
     display: flex !important;
    align-items: center !important;
}
}


/* ===== Footer ===== */
.chameleon-search input[type="search"],
footer, #footer {
.chameleon-search .form-control {
     background: #15151b !important;
    border-radius: 7px 0 0 7px !important; /* Round left side only */
     color: #aaa !important;
    border-right: none !important;
     background: #20262c !important;
     color: #e7eaf0 !important;
    font-size: 1.05rem !important;
    padding: 6px 14px !important;
    height: 38px !important;
}
}
footer .mw-poweredby {
 
     display: none;
.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;
}
}


/* ===== Logo ===== */
.chameleon-search button:hover,
#p-logo {
.chameleon-search .input-group-btn > button:hover {
     width: 200px !important;
     background: #263343 !important;
    border-color: #1ebaff !important;
}
}
#p-logo a {
 
     background-size: contain !important;
/* Make the search icon align and pop */
     background-repeat: no-repeat !important;
.chameleon-search button .fa-search,
.chameleon-search button [class*="icon-"] {
     color: #a8ff0b !important;
     font-size: 1.18em !important;
    margin: 0;
    padding: 0;
}
}
/* --- Base page background & text --- */
 
.skin-timeless body {
/* Remove outline on button click for clean look */
     background-color: #0e0e0e !important;
.chameleon-search button:focus {
    color: #e6e6e6 !important;
     outline: none !important;
}
}


/* Content area */
/* Fix minor spacing if needed */
.skin-timeless #mw-content {
.chameleon-search input[type="search"]:focus {
     background-color: #1a1a1a !important;
     z-index: 1;
    border-radius: 6px;
    padding: 1rem;
}
}
/* --- ULTRA-TARGETED SEARCH BUTTON FIX --- */


/* Links */
/* Style the input */
.skin-timeless a {
input#searchInput, input[name="search"] {
     color: #89b4ff !important;
    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;
}
}
.skin-timeless a:visited {
 
     color: #b890ff !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;
}
}
.skin-timeless a:hover {
 
     color: #ffcc66 !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;
}
}


/* Sidebar background */
button#searchGoButton:hover, button.search-btn:hover, button.searchGoButton:hover {
.skin-timeless #mw-navigation {
     background: #263343 !important;
     background-color: #121212 !important;
    border-color: #1ebaff !important;
}
}


/* Header bar */
/* If your icon is background-image, force it out for this style: */
.skin-timeless #mw-header {
button#searchGoButton, button.search-btn, button.searchGoButton {
     background-color: #181818 !important;
     background-image: none !important;
    border-bottom: 2px solid #ff3c3c !important; /* Accent */
}
}
 
/* Make the search button match the input, neon only for the icon */
/* Footer */
button#searchGoButton, button.search-btn, button.searchGoButton {
.skin-timeless #mw-footer {
     background: #232b34 !important;       /* Same as input background */
     background-color: #101010 !important;
     border: 1.5px solid #42baff !important;
     border-top: 1px solid #333 !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;
}
}


/* Search bar */
/* Neon icon, not neon background */
.skin-timeless #searchInput {
button#searchGoButton::before,
     background-color: #222 !important;
button.search-btn::before,
     color: #eee !important;
button.searchGoButton::before {
     border: 1px solid #555 !important;
     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