MediaWiki:Vector.css: Difference between revisions

Revision as of 21:51, 11 November 2024

/* Darklands 2.1     */
/* Updated November 2024 */
/* A dark, low-contrast Vector theme for wikipedia                      */
/* see User:Dialectric/common.css for css to hide specific UI elements */
/* screenshots at https://en.wikipedia.org/wiki/User:Dialectric       */
/* please leave comments or suggestions on my wikipedia talk page    */

/* Apply these styles to all pages except the main page */
body:not(.page-Main_Page) .mw-body {
    margin-left: 15vw !important; /* Scalable left margin */
    margin-right: 15vw !important; /* Scalable right margin */
    padding: 1em !important;
    border: 0px solid #250b2d !important;
    margin-top: 1em !important;
    background-color: transparent !important; /* Make background seamless */
    color: #c1c1c1 !important;
    direction: ltr !important;
}

/* Specific style for the header to make it distinct */
body:not(.page-Main_Page) .vector-header-container {
    background-color: rgba(0, 0, 0, 0.7) !important; /* Darker overlay with transparency */
    padding-bottom: 1em !important;
}

/* Adjust space below action buttons */
body:not(.page-Main_Page) #mw-content-text {
    margin-top: 1em !important;
}

/* Reduce space slightly between top bar and content */
body:not(.page-Main_Page) #mw-head-base {
    margin-bottom: 1em !important;
}

/* Styles for the Main Page to reset margins and background */
body.page-Main_Page .mw-body {
    margin-left: 10em !important; /* Keep the left margin */
    margin-right: 0 !important;   /* Remove the right margin */
    border: none !important;      /* Remove border */
    background-color: transparent !important; /* Default background */
}

/* Color adjustments for sidebar and other elements */
#mw-panel .portal h3 {
    color: #f7eac3 !important;
    font-weight: bold !important;
    border-bottom: 2px solid #e4b731 !important;
}

/* Headings color */
h1, h2, h3, h4, h5, h6 { color: #c1c1c1; }

/* Hiding specific UI elements */
#ca-talk, #ca-nstab-main, #ca-view, #footer-places-privacy, #footer-places-about, #footer-places-disclaimers,
body.mw-anonuser #ca-history, body.mw-anonuser #ca-view, body.mw-anonuser #ca-viewsource, body.mw-anonuser #ca-login {
    display: none !important;
}

/* Logo hover effect */
.mw-wiki-logo:hover {
    filter: brightness(0.8);
    -webkit-animation: none;
}

/* Adjusting page header */
.page-header h1.firstHeading {
    display: none;
}

/* Button styles */
.mw-ui-button {    
    background-color: #212121 !important;
    border: 2px solid #333333 !important;
    outline: none !important;
    text-align: center;
    cursor: pointer;
}

.mw-ui-button:hover {
    border-color: #eceada !important;
}

/* Other UI element color and background adjustments */
hr { color: #222; }
.editOptions { background-color: #333; border-color: #4c4c4c; }
input, textarea { background-color: #4c4c4c; border-color: #4c4c4c; color: #c1c1c1; }
a, .mw-body a.external, .mw-body a.extiw { color: #66D9EF; }
a:visited, .mw-body a.external:visited, .mw-body a.extiw:visited { color: #8a7f6c; }
a.new, #p-personal a.new { color: #d44; }
ul { list-style-image: none; }

/* Thumbnail, table of contents, and code element background colors */
div.thumbinner, .catlinks, #toc, div.toc, ul#filetoc, li.gallerybox div.thumb { 
    background-color: #4c4c4c; border-color: #666; 
}

code { border: none; background-color: inherit; color: inherit; }

/* Content box backgrounds for notices, navigation, and table elements */
table.diff, table.ambox, table.imbox, table.tmbox, table.ombox, table.fmbox-system, table.fmbox-warning, .navbox,
.navbox-subgroup, .navbox th, .navbox-title, .toc, .mw-warning, .toccolours {
    background-color: #4c4c4c !important;
}

/* Background image */
html, body {
    background-image: url('https://wiki.cosmicsky.net/images/thumb/4/48/BackgroundThree.png/1600px-BackgroundThree.png?20240916194629') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    height: 100% !important;
}

#content {
    background: transparent !important;
}

/* Ensure max width on content */
.mw-body-content {
    max-width: 1600px;
    padding-left: 12px;
    padding-right: 12px;
}

/* Other styles remain the same for navigation, footer, menu, notifications, and more */
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
    background-image: none;
    color: #676395;
}

/* Footer */
div#footer ul li { color: #E69F66; }

/* Links and buttons */
a.new:visited, #p-personal a.new:visited {
    color: #F92672;
    text-decoration: none;
}
a:visited, .mw-body a.external:visited, .mw-body a.extiw:visited {
    color: #468999;
}
a.new, #p-personal a.new {
    color: #a55858;
}
.mw-rcfilters-ui-table, .oo-ui-popupWidget-popup, .vector-feature-zebra-design-disabled .vector-dropdown .vector-dropdown-content {
    background-color: #333;
}

.vector-feature-zebra-design-disabled .vector-dropdown .vector-dropdown-checkbox {
    max-width: 200px;
    max-height: 200px;
}

.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
    background-color: #000;
    border: 2px solid #4c4c4c;
}

/* Adjustments for responsiveness on smaller screens */
@media (max-width: 640px) {
    .vector-legacy-sidebar { display: none; }
    .mw-body { margin-left: 0px; }
    #left-navigation { margin-left: 10px; }
    #content { margin-top: 3em; }
    img { max-width: 95%; height: auto; }
    .mw-footer { margin-left: 1em; }
}

/* Backgrounds for specific elements */
.mw-parser-output .navbox, .mw-parser-output .navbox-group, .mw-parser-output .navbox-subgroup .navbox-title,
.mw-parser-output .portal>ul, #mp-topbanner, #mp-left, #mp-right, #mp-middle, #mp-lower,
.mw-parser-output .spoken-wikipedia, .module-shortcutboxplain, .ombox-notice, .mw-searchresults-has-iw .iw-resultset,
.mw-parser-output div.documentation, .warningbox, .shortcutbox, .infobox {
    background-color: #272822 !important;
    color: #F8F8F2 !important;
}

.mw-parser-output .quotebox {
    background: #272822 !important;
}

/* Watchlist and other icons */
.vector-menu-tabs .mw-watchlink.icon a::before {
    background-position: 40% 50%;
}
.vector-menu-tabs .selected {
    background: #333;
    color: #468999;
    border: 1px solid #000;
}

.mw-body {
    box-shadow: rgb(121 121 121 / 25%) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

/* Background for the navbar */
.vector-menu-tabs li {
    background-color: rgb(123 153 214 / 95%) !important;
}

.mw-parser-output .quotebox {
    background-color: #291e29 !important;
}

/* End of style updates */