Jump to content

MediaWiki:Common.css: Difference between revisions

From Shadowed Eclipse
Created page with "Shadowed Eclipse MediaWiki Custom Dark Theme: Save this as: htdocs/alla/w/skins/Vector/resources/shadowedeclipse-custom.css: Import fonts: @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Anton&family=Bebas+Neue&family=Fjalla+One&display=swap'); Root color variables to match your main site: :root { --shadow-bg-primary: #111; --shadow-bg-secondary: #1a1a1a; --shadow-accent: #66ccff; --shadow-tex..."
 
Codex (talk | contribs)
Hide category footer on bot command cheatsheet
 
(10 intermediate revisions by 3 users not shown)
Line 1: Line 1:
/* Shadowed Eclipse MediaWiki Custom Dark Theme */
/* Shadowed Eclipse public wiki chrome cleanup */ #pt-createaccount, #pt-login, .mw-list-item#pt-createaccount, .mw-list-item#pt-login, .vector-user-links .mw-list-item#pt-createaccount, .vector-user-links .mw-list-item#pt-login, .mw-portlet-personal li#pt-createaccount, .mw-portlet-personal li#pt-login {    display: none !important; } /* Hide empty personal/user tool areas after login/create links are removed. */ .vector-user-links, #p-personal {    display: none !important; } /* Hide Vector 2022 logged-out login overflow entry. */ #pt-login-2, .mw-list-item#pt-login-2, #p-vector-user-menu-overflow, #vector-user-links-dropdown, .vector-user-menu-logged-out, .vector-user-links-wide[aria-label="Personal tools"] {     display: none !important; } /* Shadowed Eclipse: hide public login/user tools and discussion tab. */ #pt-login, #pt-login-2, #pt-createaccount, #p-personal, #p-vector-user-menu-overflow, #vector-user-links-dropdown, .vector-user-links, .vector-user-links-wide, .vector-user-menu, .vector-user-menu-logged-out, .mw-portlet-personal, li#ca-talk, #ca-talk, .ca-talk {    display: none !important; } /* Keep the search box aligned after user tools are hidden. */ .vector-header-end {    margin-left: auto !important; }   /* Velious Tower of Frozen Shadows badge links. */ .se-tofs-badge {     display: inline-flex;    align-items: center;    justify-content: center;    width: 75px;    min-height: 42px;    box-sizing: border-box;    padding: 4px 5px;    margin: 2px 0;    border: 1px solid #8dc7ff;    border-radius: 3px;    background:         linear-gradient(135deg, rgba(185, 227, 255, 0.15), transparent 22%, rgba(27, 42, 67, 0.8) 48%, rgba(7, 10, 17, 0.95) 100%),        radial-gradient(circle at 12% 50%, rgba(159, 221, 255, 0.28), transparent 28%),         radial-gradient(circle at 88% 50%, rgba(234, 196, 116, 0.20), transparent 25%);    box-shadow:         inset 0 0 10px rgba(186, 232, 255, 0.26),        0 0 7px rgba(104, 188, 255, 0.45),        0 0 16px rgba(44, 89, 134, 0.25);    color: #f7d88f;    font-family: Georgia, "Times New Roman", serif;    font-size: 8px;    font-variant: small-caps;    font-weight: 700;    letter-spacing: 0;    line-height: 0.95;    text-align: center;     text-shadow:         0 0 3px #0b1d2b,        0 0 7px rgba(141, 199, 255, 0.75),        0 0 10px rgba(243, 202, 116, 0.45); } .se-tofs-badge a, .se-tofs-badge a:visited {    color: #f7d88f !important;    text-decoration: none !important; } .se-tofs-badge:hover {    border-color: #d9f2ff;    box-shadow:         inset 0 0 12px rgba(218, 244, 255, 0.36),         0 0 10px rgba(151, 216, 255, 0.75),         0 0 20px rgba(236, 198, 116, 0.28); }
/* Save this as: htdocs/alla/w/skins/Vector/resources/shadowedeclipse-custom.css */
/* Hide category footer on bot command cheatsheet */
 
body.page-Bot_Command_Cheatsheet #catlinks {
/* Import fonts */
     display: none !important;
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Anton&family=Bebas+Neue&family=Fjalla+One&display=swap');
 
/* Root color variables to match your main site */
:root {
    --shadow-bg-primary: #111;
    --shadow-bg-secondary: #1a1a1a;
    --shadow-accent: #66ccff;
    --shadow-text: #e0e0e0;
    --shadow-text-muted: #aaa;
    --shadow-border: #444;
    --shadow-border-light: #666;
}
 
/* Global background and text colors */
body {
    background-color: var(--shadow-bg-primary) !important;
    color: var(--shadow-text) !important;
    font-family: 'Oswald', Arial, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
}
 
/* Header styling */
.mw-header,
.vector-header {
    background-color: var(--shadow-bg-secondary) !important;
    border-bottom: 2px solid var(--shadow-border) !important;
}
 
/* Main content area */
.mw-page-container,
.vector-page-container {
    background-color: var(--shadow-bg-primary) !important;
}
 
.mw-content-container,
.vector-content-container,
.mw-article-toolbar-container {
     background-color: var(--shadow-bg-secondary) !important;
    border: 1px solid var(--shadow-border) !important;
    border-radius: 5px !important;
    margin: 10px !important;
}
 
/* Article content */
.mw-body,
.vector-body,
#content {
     background-color: var(--shadow-bg-secondary) !important;
    color: var(--shadow-text) !important;
    border: 1px solid var(--shadow-border) !important;
    border-radius: 5px !important;
}
 
/* Sidebar styling */
.mw-sidebar,
.vector-sidebar,
#mw-sidebar {
    background-color: var(--shadow-bg-primary) !important;
    border-right: 2px solid var(--shadow-border) !important;
}
 
.vector-menu-portal,
.portal {
    background-color: var(--shadow-bg-secondary) !important;
    border: 1px solid var(--shadow-border) !important;
    border-radius: 5px !important;
    margin-bottom: 10px !important;
}
 
/* Menu headings */
.vector-menu-portal h3,
.portal h3,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Bebas Neue', Arial, sans-serif !important;
    color: var(--shadow-accent) !important;
     letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--shadow-accent) !important;
    padding-bottom: 5px !important;
}
 
/* Article title */
.firstHeading,
#firstHeading {
    font-family: 'Bebas Neue', Arial, sans-serif !important;
    color: var(--shadow-accent) !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid var(--shadow-accent) !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
}
 
/* Links */
a {
    color: var(--shadow-accent) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
 
a:hover {
    color: #88ddff !important;
    text-decoration: underline !important;
}
 
a:visited {
    color: #5599cc !important;
}
 
/* Navigation tabs */
.vector-menu-tabs,
#p-views ul,
#p-cactions ul {
    background-color: var(--shadow-bg-secondary) !important;
}
 
.vector-menu-tabs li,
#p-views li,
#p-cactions li {
    background-color: var(--shadow-bg-secondary) !important;
    border: 1px solid var(--shadow-border) !important;
    border-radius: 5px 5px 0 0 !important;
    margin-right: 2px !important;
}
 
.vector-menu-tabs li.selected,
.vector-menu-tabs li:hover,
#p-views li.selected,
#p-views li:hover {
    background-color: var(--shadow-accent) !important;
}
 
.vector-menu-tabs li.selected a,
.vector-menu-tabs li:hover a,
#p-views li.selected a,
#p-views li:hover a {
    color: var(--shadow-bg-primary) !important;
    font-weight: 600 !important;
}
 
/* Search box styling */
.vector-search-box,
#simpleSearch {
    background-color: var(--shadow-bg-secondary) !important;
    border: 2px solid var(--shadow-accent) !important;
    border-radius: 4px !important;
}
 
.vector-search-box-input,
#searchInput {
    background-color: var(--shadow-bg-secondary) !important;
    color: var(--shadow-text) !important;
    font-family: 'Oswald', Arial, sans-serif !important;
    border: none !important;
    padding: 8px 12px !important;
}
 
.vector-search-box-input:focus,
#searchInput:focus {
    outline: none !important;
    box-shadow: 0 0 5px rgba(102, 204, 255, 0.3) !important;
}
 
/* Search button */
.searchButton,
#searchButton {
    background-color: var(--shadow-accent) !important;
    color: var(--shadow-bg-primary) !important;
    font-family: 'Oswald', Arial, sans-serif !important;
    font-weight: 600 !important;
    border: none !important;
    padding: 8px 15px !important;
    border-radius: 0 4px 4px 0 !important;
}
 
/* Footer */
.mw-footer,
.vector-footer,
#footer {
     background-color: var(--shadow-bg-primary) !important;
    border-top: 2px solid var(--shadow-border) !important;
    color: var(--shadow-text-muted) !important;
    font-family: 'Oswald', Arial, sans-serif !important;
}
 
/* Edit buttons and tools */
.vector-menu-dropdown,
.vector-menu-dropdown-content {
     background-color: var(--shadow-bg-secondary) !important;
    border: 1px solid var(--shadow-border) !important;
    border-radius: 5px !important;
}
 
/* Tables */
table {
    background-color: var(--shadow-bg-secondary) !important;
     border: 1px solid var(--shadow-border) !important;
     border-radius: 5px !important;
}
 
th {
     background-color: var(--shadow-accent) !important;
    color: var(--shadow-bg-primary) !important;
     font-family: 'Fjalla One', Arial, sans-serif !important;
     text-transform: uppercase !important;
     letter-spacing: 1px !important;
}
 
td {
    border-bottom: 1px solid var(--shadow-border) !important;
     color: var(--shadow-text) !important;
}
 
/* Code blocks */
code, pre {
     background-color: var(--shadow-bg-primary) !important;
    color: var(--shadow-accent) !important;
     border: 1px solid var(--shadow-border) !important;
     border-radius: 3px !important;
    font-family: 'Courier New', monospace !important;
}
 
/* Blockquotes */
blockquote {
     background-color: var(--shadow-bg-primary) !important;
    border-left: 4px solid var(--shadow-accent) !important;
    color: var(--shadow-text-muted) !important;
    padding: 10px 15px !important;
    margin: 10px 0 !important;
    font-style: italic !important;
}
 
/* Input fields */
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
    background-color: var(--shadow-bg-secondary) !important;
    color: var(--shadow-text) !important;
    border: 1px solid var(--shadow-border) !important;
    border-radius: 3px !important;
    font-family: 'Oswald', Arial, sans-serif !important;
    padding: 8px 10px !important;
}
 
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
    border-color: var(--shadow-accent) !important;
    outline: none !important;
     box-shadow: 0 0 3px rgba(102, 204, 255, 0.3) !important;
}
 
/* Buttons */
.mw-ui-button,
button,
input[type="submit"],
input[type="button"] {
    background-color: var(--shadow-accent) !important;
     color: var(--shadow-bg-primary) !important;
     font-family: 'Oswald', Arial, sans-serif !important;
     font-weight: 600 !important;
     border: none !important;
     padding: 8px 15px !important;
     border-radius: 4px !important;
     letter-spacing: 0.5px !important;
     text-transform: uppercase !important;
}
 
.mw-ui-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: #88ddff !important;
    cursor: pointer !important;
}
 
/* Special pages styling */
.mw-special-page {
    background-color: var(--shadow-bg-secondary) !important;
    padding: 20px !important;
    border-radius: 5px !important;
    border: 1px solid var(--shadow-border) !important;
}
 
/* Recent changes, watchlist, etc. */
.mw-changeslist-legend {
    background-color: var(--shadow-bg-primary) !important;
    border: 1px solid var(--shadow-border) !important;
    border-radius: 5px !important;
    padding: 10px !important;
}
 
/* Warning and info boxes */
.mw-message-box {
    background-color: var(--shadow-bg-secondary) !important;
    border: 1px solid var(--shadow-accent) !important;
    border-radius: 5px !important;
    color: var(--shadow-text) !important;
}
 
.mw-message-box-warning {
     border-color: #ffaa00 !important;
}
 
.mw-message-box-error {
     border-color: #ff6666 !important;
}
 
/* Hide/show elements improvements */
.vector-menu-dropdown-checkbox:checked ~ .vector-menu-dropdown-content {
     background-color: var(--shadow-bg-secondary) !important;
     border: 1px solid var(--shadow-border) !important;
}
 
/* User menu */
.vector-user-menu {
    background-color: var(--shadow-bg-secondary) !important;
}
 
/* Ensure proper contrast for all text */
.mw-body-content p,
.mw-body-content li,
.mw-body-content span,
.vector-body p,
.vector-body li,
.vector-body span {
    color: var(--shadow-text) !important;
}
 
/* Logo area */
.mw-logo,
.vector-logo {
    filter: brightness(1.2) !important;
}
 
/* Content navigation */
.vector-menu-content-list {
     background-color: var(--shadow-bg-secondary) !important;
}
 
/* Print styles override */
@media print {
    body {
        background-color: white !important;
        color: black !important;
    }
}
}

Latest revision as of 05:10, 1 July 2026

/* Shadowed Eclipse public wiki chrome cleanup */ #pt-createaccount, #pt-login, .mw-list-item#pt-createaccount, .mw-list-item#pt-login, .vector-user-links .mw-list-item#pt-createaccount, .vector-user-links .mw-list-item#pt-login, .mw-portlet-personal li#pt-createaccount, .mw-portlet-personal li#pt-login {     display: none !important; }  /* Hide empty personal/user tool areas after login/create links are removed. */ .vector-user-links, #p-personal {     display: none !important; }  /* Hide Vector 2022 logged-out login overflow entry. */ #pt-login-2, .mw-list-item#pt-login-2, #p-vector-user-menu-overflow, #vector-user-links-dropdown, .vector-user-menu-logged-out, .vector-user-links-wide[aria-label="Personal tools"] {     display: none !important; }  /* Shadowed Eclipse: hide public login/user tools and discussion tab. */ #pt-login, #pt-login-2, #pt-createaccount, #p-personal, #p-vector-user-menu-overflow, #vector-user-links-dropdown, .vector-user-links, .vector-user-links-wide, .vector-user-menu, .vector-user-menu-logged-out, .mw-portlet-personal, li#ca-talk, #ca-talk, .ca-talk {     display: none !important; }  /* Keep the search box aligned after user tools are hidden. */ .vector-header-end {     margin-left: auto !important; }    /* Velious Tower of Frozen Shadows badge links. */ .se-tofs-badge {     display: inline-flex;     align-items: center;     justify-content: center;     width: 75px;     min-height: 42px;     box-sizing: border-box;     padding: 4px 5px;     margin: 2px 0;     border: 1px solid #8dc7ff;     border-radius: 3px;     background:         linear-gradient(135deg, rgba(185, 227, 255, 0.15), transparent 22%, rgba(27, 42, 67, 0.8) 48%, rgba(7, 10, 17, 0.95) 100%),         radial-gradient(circle at 12% 50%, rgba(159, 221, 255, 0.28), transparent 28%),         radial-gradient(circle at 88% 50%, rgba(234, 196, 116, 0.20), transparent 25%);     box-shadow:         inset 0 0 10px rgba(186, 232, 255, 0.26),         0 0 7px rgba(104, 188, 255, 0.45),         0 0 16px rgba(44, 89, 134, 0.25);     color: #f7d88f;     font-family: Georgia, "Times New Roman", serif;     font-size: 8px;     font-variant: small-caps;     font-weight: 700;     letter-spacing: 0;     line-height: 0.95;     text-align: center;     text-shadow:         0 0 3px #0b1d2b,         0 0 7px rgba(141, 199, 255, 0.75),         0 0 10px rgba(243, 202, 116, 0.45); }  .se-tofs-badge a, .se-tofs-badge a:visited {     color: #f7d88f !important;     text-decoration: none !important; }  .se-tofs-badge:hover {     border-color: #d9f2ff;     box-shadow:         inset 0 0 12px rgba(218, 244, 255, 0.36),         0 0 10px rgba(151, 216, 255, 0.75),         0 0 20px rgba(236, 198, 116, 0.28); }
/* Hide category footer on bot command cheatsheet */
body.page-Bot_Command_Cheatsheet #catlinks {
    display: none !important;
}