Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
Line 1: | Line 1: | ||
+ | /* ========================= */ | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
+ | /* ========================= */ | ||
/* ========================= */ | /* ========================= */ | ||
Line 7: | Line 9: | ||
background: #202020; | background: #202020; | ||
color: #F2F3F5; /* Force text color */ | color: #F2F3F5; /* Force text color */ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
border-left: none !important; | border-left: none !important; | ||
outline: none !important; | outline: none !important; | ||
Line 19: | Line 14: | ||
} | } | ||
− | /* | + | /* ========================== */ |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/* CONTENT STYLES */ | /* CONTENT STYLES */ | ||
− | /* ========================= */ | + | /* ========================== */ |
#content { | #content { | ||
background-color: #191919; | background-color: #191919; | ||
Line 34: | Line 22: | ||
} | } | ||
− | |||
#p-logo { | #p-logo { | ||
− | background-color: #202020; | + | background-color: #202020; /* Logo area background */ |
} | } | ||
Line 46: | Line 33: | ||
} | } | ||
− | |||
#p-navigation a { | #p-navigation a { | ||
− | color: #90b7f9 !important; /* | + | color: #90b7f9 !important; /* Default link color */ |
} | } | ||
− | |||
#p-navigation a:hover { | #p-navigation a:hover { | ||
− | color: #955bc2; /* | + | color: #955bc2; /* Hover color for links */ |
} | } | ||
Line 67: | Line 52: | ||
/* HEADING STYLES */ | /* HEADING STYLES */ | ||
/* ========================= */ | /* ========================= */ | ||
− | + | h1, h2, h3 { | |
− | h1 { | ||
color: #F2F3F5 !important; /* Force heading colors */ | color: #F2F3F5 !important; /* Force heading colors */ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
@media screen { | @media screen { | ||
− | + | h1, h2, h3, h4, h5, h6 { | |
− | + | color: #e6e6e6; /* Heading color for all screen sizes */ | |
− | + | } | |
} | } | ||
Line 90: | Line 66: | ||
/* ========================= */ | /* ========================= */ | ||
a { | a { | ||
− | color: #90b7f9; /* | + | color: #90b7f9; /* Default link color */ |
} | } | ||
a:hover { | a:hover { | ||
− | color: #955bc2; /* | + | color: #955bc2; /* Hover color for links */ |
+ | } | ||
+ | |||
+ | a:visited { | ||
+ | color: #955bc2; /* Visited link color */ | ||
} | } | ||
Line 106: | Line 86: | ||
#mw-head a { | #mw-head a { | ||
color: #90b7f9; /* Force link color in top bar */ | color: #90b7f9; /* Force link color in top bar */ | ||
− | padding: 5px 10px; | + | padding: 5px 10px; /* Padding for links in top bar */ |
} | } | ||
Line 126: | Line 106: | ||
/* ========================= */ | /* ========================= */ | ||
#p-tb a { | #p-tb a { | ||
− | color: #90b7f9; /* | + | color: #90b7f9; /* Default link color */ |
} | } | ||
#p-tb a:hover { | #p-tb a:hover { | ||
− | color: #955bc2; /* | + | color: #955bc2; /* Hover color for links */ |
} | } | ||
Line 136: | Line 116: | ||
/* GRADIENT MENU STYLES */ | /* GRADIENT MENU STYLES */ | ||
/* ========================= */ | /* ========================= */ | ||
− | |||
.ca-menu { | .ca-menu { | ||
background: linear-gradient(to right, #252525, rgba(144, 183, 249, 0.5)); /* Fade effect */ | background: linear-gradient(to right, #252525, rgba(144, 183, 249, 0.5)); /* Fade effect */ | ||
} | } | ||
− | |||
.ca-menu a { | .ca-menu a { | ||
− | color: #90b7f9 !important; /* Set | + | color: #90b7f9 !important; /* Set text color */ |
} | } | ||
− | /* | + | /* ========================= */ |
− | /* | + | /* VECTOR TABS STYLES */ |
− | /* | + | /* ========================= */ |
− | + | .vectorTabs li { | |
− | + | padding: 0 !important; /* Remove padding */ | |
+ | margin: 0 !important; /* Remove margin */ | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
.vectorTabs li a { | .vectorTabs li a { | ||
− | background: linear-gradient(to top, #191919 0%, #1a1a1a 15%, #1b1b1b 30%, #1c1c1c 45%, #1d1d1d 60%, #1e1e1e 75%, #202020 100%) !important; /* | + | background: linear-gradient(to top, #191919 0%, #1a1a1a 15%, #1b1b1b 30%, #1c1c1c 45%, #1d1d1d 60%, #1e1e1e 75%, #202020 100%) !important; /* Smooth fade */ |
color: #e6e6e6 !important; | color: #e6e6e6 !important; | ||
− | padding: 5px 10px !important; | + | padding: 5px 10px !important; /* Padding for tabs */ |
− | border: none !important; /* Remove | + | border: none !important; /* Remove borders */ |
border-radius: 0 !important; /* Remove rounded corners */ | border-radius: 0 !important; /* Remove rounded corners */ | ||
text-decoration: none !important; | text-decoration: none !important; | ||
− | position: relative; /* | + | position: relative; /* Enable pseudo-element positioning */ |
− | transition: background 0.3s ease; /* | + | transition: background 0.3s ease; /* Smooth transition */ |
− | margin: 0; /* Remove | + | margin: 0; /* Remove margin */ |
− | box-shadow: none !important; /* | + | box-shadow: none !important; /* No box shadow */ |
} | } | ||
− | |||
.vectorTabs li a:hover { | .vectorTabs li a:hover { | ||
− | background: linear-gradient(to top, #202020 0%, #1e1e1e 15%, #1d1d1d 30%, #1c1c1c 45%, #1b1b1b 60%, #1a1a1a 75%, #191919 100%) !important; /* | + | background: linear-gradient(to top, #202020 0%, #1e1e1e 15%, #1d1d1d 30%, #1c1c1c 45%, #1b1b1b 60%, #1a1a1a 75%, #191919 100%) !important; /* Reverse gradient on hover */ |
} | } | ||
− | |||
.vectorTabs li.selected a { | .vectorTabs li.selected a { | ||
− | background: linear-gradient(to top, #191919 0%, #1a1a1a 15%, #1b1b1b 30%, #1c1c1c 45%, #1d1d1d 60%, #1e1e1e 75%, #202020 100%) !important; /* gradient | + | background: linear-gradient(to top, #191919 0%, #1a1a1a 15%, #1b1b1b 30%, #1c1c1c 45%, #1d1d1d 60%, #1e1e1e 75%, #202020 100%) !important; /* Active tab gradient */ |
} | } | ||
− | |||
.vectorTabs li:not(.selected) a::before { | .vectorTabs li:not(.selected) a::before { | ||
content: ''; | content: ''; | ||
position: absolute; | position: absolute; | ||
− | top: 0; left: | + | top: 0; left: 0; right: 0; bottom: 0; |
− | background: linear-gradient( | + | background: linear-gradient(to top, rgba(30, 144, 255, 0.2), rgba(25, 25, 25, 0.8)); /* Blue fade */ |
− | |||
− | |||
− | |||
− | |||
border-radius: 0 !important; /* No rounded corners */ | border-radius: 0 !important; /* No rounded corners */ | ||
− | pointer-events: none; /* | + | pointer-events: none; /* Allow clicks through this layer */ |
} | } | ||
− | |||
.vectorTabs li.selected a > * { | .vectorTabs li.selected a > * { | ||
position: relative; | position: relative; | ||
− | z-index: 1; | + | z-index: 1; /* Ensure text is above the overlay */ |
} | } | ||
− | + | /* ========================= */ | |
− | + | /* SEARCH BAR CONFIG */ | |
− | + | /* ========================= */ | |
− | |||
− | |||
− | |||
− | /* | ||
− | /* | ||
− | /* | ||
− | |||
@media screen { | @media screen { | ||
− | + | .vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3 { | |
− | + | background-image: url(/wiki/skins/Vector/resources/skins.vector.styles/images/tab-separator.png?09d4b); | |
− | + | background-image: linear-gradient(to bottom, rgba(167, 215, 249, 0) 0, #a7d7f9 100%); | |
− | + | background-repeat: no-repeat; | |
− | + | background-size: 0px 100%; | |
− | + | } | |
} | } | ||
− | |||
− | |||
− | |||
− | |||
− |
Revision as of 20:18, 6 May 2025
/* ========================= */ /* CSS placed here will be applied to all skins */ /* ========================= */ /* ========================= */ /* BODY STYLES */ /* ========================= */ body { background: #202020; color: #F2F3F5; /* Force text color */ border-left: none !important; outline: none !important; box-shadow: none !important; } /* ========================== */ /* CONTENT STYLES */ /* ========================== */ #content { background-color: #191919; color: #F2F3F5 !important; /* Force text color */ } #p-logo { background-color: #202020; /* Logo area background */ } /* ========================= */ /* NAVIGATION MENU STYLES */ /* ========================= */ #p-navigation { background-color: #202020; } #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; border: 1px solid #444241; } /* ========================= */ /* HEADING STYLES */ /* ========================= */ h1, h2, h3 { color: #F2F3F5 !important; /* Force heading colors */ } @media screen { h1, h2, h3, h4, h5, h6 { color: #e6e6e6; /* Heading color for all screen sizes */ } } /* ========================= */ /* 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; } #mw-head a { color: #90b7f9; /* Force link color in top bar */ padding: 5px 10px; /* Padding for links in top bar */ } /* ========================= */ /* NOTABLE MEMBERS STYLES */ /* ========================= */ .notable-members { background-color: #343434 !important; color: #e6e6e6 !important; } .notable-members th, .notable-members td { border: 3px solid #151515; color: #F2F3F5 !important; /* Force cell text color */ } /* ========================= */ /* TOOLS SECTION STYLES */ /* ========================= */ #p-tb a { color: #90b7f9; /* Default link color */ } #p-tb a:hover { color: #955bc2; /* Hover color for links */ } /* ========================= */ /* GRADIENT MENU STYLES */ /* ========================= */ .ca-menu { background: linear-gradient(to right, #252525, rgba(144, 183, 249, 0.5)); /* Fade effect */ } .ca-menu a { color: #90b7f9 !important; /* Set text color */ } /* ========================= */ /* VECTOR TABS STYLES */ /* ========================= */ .vectorTabs li { padding: 0 !important; /* Remove padding */ margin: 0 !important; /* Remove margin */ } .vectorTabs li a { background: linear-gradient(to top, #191919 0%, #1a1a1a 15%, #1b1b1b 30%, #1c1c1c 45%, #1d1d1d 60%, #1e1e1e 75%, #202020 100%) !important; /* Smooth fade */ color: #e6e6e6 !important; padding: 5px 10px !important; /* Padding for tabs */ border: none !important; /* Remove borders */ border-radius: 0 !important; /* Remove rounded corners */ text-decoration: none !important; position: relative; /* Enable pseudo-element positioning */ transition: background 0.3s ease; /* Smooth transition */ margin: 0; /* Remove margin */ box-shadow: none !important; /* No box shadow */ } .vectorTabs li a:hover { background: linear-gradient(to top, #202020 0%, #1e1e1e 15%, #1d1d1d 30%, #1c1c1c 45%, #1b1b1b 60%, #1a1a1a 75%, #191919 100%) !important; /* Reverse gradient on hover */ } .vectorTabs li.selected a { background: linear-gradient(to top, #191919 0%, #1a1a1a 15%, #1b1b1b 30%, #1c1c1c 45%, #1d1d1d 60%, #1e1e1e 75%, #202020 100%) !important; /* Active tab gradient */ } .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)); /* Blue fade */ border-radius: 0 !important; /* No rounded corners */ pointer-events: none; /* Allow clicks through this layer */ } .vectorTabs li.selected a > * { position: relative; z-index: 1; /* Ensure text is above the overlay */ } /* ========================= */ /* SEARCH BAR CONFIG */ /* ========================= */ @media screen { .vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown h3 { background-image: url(/wiki/skins/Vector/resources/skins.vector.styles/images/tab-separator.png?09d4b); background-image: linear-gradient(to bottom, rgba(167, 215, 249, 0) 0, #a7d7f9 100%); background-repeat: no-repeat; background-size: 0px 100%; } }