Difference between revisions of "MediaWiki:Common.css"

Revision as of 07:52, 6 May 2025

/* CSS placed here will be applied to all skins */

/* ========================= */
/* GLOBAL STYLES             */
/* ========================= */
body {
    background: #202020;  /* Dark background */
    color: #F2F3F5;       /* Default text color */
}

/* ========================= */
/* CONTENT STYLES            */
/* ========================= */
#content {
    background-color: #191919; /* Darker content background */
    color: #F2F3F5 !important;  /* Force text color */
}

/* Logo area background */
#p-logo {
    background-color: #202020;
}

/* ========================= */
/* NAVIGATION MENU STYLES    */
/* ========================= */
#p-navigation {
    background-color: #202020; /* Navigation background */
}

#p-navigation a {
    color: #90b7f9 !important; /* Default link color */
}

#p-navigation a:hover {
    color: #955bc2; /* Hover color for links */
}

/* ========================= */
/* TABLE OF CONTENTS STYLES  */
/* ========================= */
.mw-parser-output .toc {
    background-color: #343434;  /* Table of contents background */
    border: 1px solid #444241;   /* Border around TOC */
}

/* ========================= */
/* HEADING STYLES            */
/* ========================= */
h1, h2, h3 {
    color: #F2F3F5 !important;  /* Force heading colors */
}

@media screen {
    h1, h2, h3, h4, h5, h6 {
        color: #e6e6e6; /* Lighter heading color for screens */
    }
}

/* ========================= */
/* LINK STYLES               */
/* ========================= */
a {
    color: #90b7f9; /* Default link color */
}

a:hover {
    color: #955bc2; /* Hover color for links */
}

a:visited {
    color: #955bc2; /* Visited link color */
}

/* ========================= */
/* TOP BAR STYLES            */
/* ========================= */
#mw-head {
    background-color: #202020; /* Top bar background */
}

#mw-head a {
    color: #90b7f9; /* Link color in top bar */
    padding: 5px 10px; /* Padding for links */
}

/* ========================= */
/* NOTABLE MEMBERS STYLES     */
/* ========================= */
.notable-members {
    background-color: #343434 !important; /* Notable members background */
    color: #e6e6e6 !important; /* Text color in notable members */
}

.notable-members th, .notable-members td {
    border: 3px solid #151515; /* Border for table cells */
    color: #F2F3F5 !important; /* Cell text color */
}

/* ========================= */
/* TOOLS SECTION STYLES      */
/* ========================= */
#p-tb a {
    color: #90b7f9; /* Default link color in tools */
}

#p-tb a:hover {
    color: #955bc2; /* Hover color for tools links */
}

/* ========================= */
/* GRADIENT MENU STYLES      */
/* ========================= */
.ca-menu {
    background: linear-gradient(to right, #252525, rgba(144, 183, 249, 0.5)); /* Gradient background */
}

.ca-menu a {
    color: #90b7f9 !important; /* Link color in menu */
}

/* ========================= */
/* VECTOR TABS STYLES       */
/* ========================= */
.vectorTabs li a {
    background: linear-gradient(to top, #191919 0%, #202020 100%) !important; /* Tab background */
    color: #F2F3F5 !important; /* Tab text color */
    padding: 5px 10px !important; /* Tab padding */
    border: none !important; /* Remove borders */
    text-decoration: none !important; /* Remove underlines */
    transition: background 0.3s ease; /* Smooth transition */
}

.vectorTabs li a:hover {
    background: linear-gradient(to top, #202020 0%, #191919 100%) !important; /* Hover effect */
}

.vectorTabs li.selected a {
    background: linear-gradient(to top, #191919 0%, #202020 100%) !important; /* Active tab style */
}

.vectorTabs li:not(.selected) a::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(30, 144, 255, 0.2), rgba(25, 25, 25, 0.8)); /* Overlay for inactive tabs */
    pointer-events: none; /* Allow clicks through */
}

.vectorTabs li.selected a > * {
    position: relative;
    z-index: 1; /* Ensure text is above overlay */
}

.vectorTabs li {
    padding: 0 !important; /* Remove padding from list items */
    margin: 0 !important; /* Remove margin */
}

/* ========================= */
/* SEARCH BAR CONFIG         */
/* ========================= */
#searchInput {
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent background */
    color: #000000; /* Input text color */
    width: 100%; /* Full width */
    border: 1px solid #a2a9b1; /* Border style */
    border-radius: 10px; /* Rounded corners */
    padding: 0.4em; /* Padding inside input */
    transition: border-color 250ms, box-shadow 250ms; /* Smooth transition */
    -webkit-appearance: none; /* Remove default styling */
    -moz-appearance: textfield; /* Remove default styling */
}

/* ========================= */
/* END OF STYLES            */
/* ========================= */