MediaWiki:Common.css: Difference between revisions
From Twisted
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); | |||
body, | body, | ||
.skin-chameleon, | .skin-chameleon, | ||
Line 5: | Line 7: | ||
.skin-chameleon .col { | .skin-chameleon .col { | ||
background: #181d22 !important; | background: #181d22 !important; | ||
color: # | color: #e7eaf0 !important; | ||
font-family: 'Inter', 'Roboto', 'Segoe UI', Arial, sans-serif !important; | font-family: 'Inter', 'Roboto', 'Segoe UI', Arial, sans-serif !important; | ||
} | } | ||
a, a:visited, .navbar a, .footer a { | a, a:visited, .navbar a, .footer a { | ||
color: # | color: #42baff !important; | ||
text-decoration: none !important; | text-decoration: none !important; | ||
transition: color 0.2s; | |||
} | } | ||
a:hover, .navbar a:hover, .footer a:hover { | a:hover, .navbar a:hover, .footer a:hover { | ||
color: # | color: #1ebaff !important; | ||
text-decoration: underline !important; | text-decoration: underline !important; | ||
} | } | ||
Line 22: | Line 25: | ||
color: #fff !important; | color: #fff !important; | ||
font-family: 'Inter', 'Roboto', 'Segoe UI', Arial, sans-serif !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 { | pre, code, .mw-code, .mw-highlight pre { | ||
background: #21272e !important; | background: #21272e !important; | ||
color: # | color: #67d3fa !important; | ||
font-family: 'JetBrains Mono', 'Consolas', 'monospace' !important; | font-family: 'JetBrains Mono', 'Fira Mono', 'Consolas', 'monospace' !important; | ||
border-radius: | border-radius: 6px; | ||
padding: 0.5em; | |||
} | } | ||
table, th, td { | table, th, td { | ||
background: # | background: #23272c !important; | ||
color: # | color: #e7eaf0 !important; | ||
border-color: #32363c !important; | border-color: #32363c !important; | ||
} | } | ||
input[type="search"], input[type="text"], .form-control, textarea { | input[type="search"], input[type="text"], .form-control, textarea { | ||
background: # | background: #22262c !important; | ||
color: # | color: #e7eaf0 !important; | ||
border: 1px solid # | border: 1px solid #42baff !important; | ||
} | } | ||
.navbar, .footer, .chameleon-navbar, .chameleon-footer, .chameleon-header { | .navbar, .footer, .chameleon-navbar, .chameleon-footer, .chameleon-header { | ||
background: # | background: #14181d !important; | ||
color: # | color: #e7eaf0 !important; | ||
border: none !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; | |||
} | } |
Revision as of 23:32, 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; }