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 */ |
− | / BODY STYLES / | + | |
− | / ========================= / | + | /* ========================= */ |
− | body { | + | /* BODY STYLES */ |
− | background: #202020; | + | /* ========================= */ |
− | color: #e6e6e6; / Force text color */ | + | body { |
+ | background: #202020; | ||
+ | color: #e6e6e6; /* Force text color */ | ||
} | } | ||
− | /* ========================= / | + | /* ========================= */ |
− | / CONTENT STYLES / | + | /* CONTENT STYLES */ |
− | / ========================= / | + | /* ========================= */ |
− | #content { | + | #content { |
− | background-color: #191919; | + | background-color: #191919; |
− | color: #e6e6e6 !important; / Force text color */ | + | color: #e6e6e6 !important; /* Force text color */ |
} | } | ||
− | /* Sets background color of the logo area */ | + | /* Sets background color of the logo area */ |
− | #p-logo { | + | #p-logo { |
− | background-color: #202020; | + | background-color: #202020; |
} | } | ||
− | /* ========================= / | + | /* ========================= */ |
− | / NAVIGATION MENU STYLES / | + | /* NAVIGATION MENU STYLES */ |
− | / ========================= */ | + | /* ========================= */ |
− | #p-navigation { | + | #p-navigation { |
− | background-color: #202020; | + | background-color: #202020; |
} | } | ||
− | /* Change color for all links in the navigation menu / | + | /* Change color for all links in the navigation menu */ |
#p-navigation a { | #p-navigation a { | ||
− | color: #90b7f9 !important; / Set the default link color */ | + | color: #90b7f9 !important; /* Set the default link color */ |
} | } | ||
− | /* Change hover color for all links in the navigation menu / | + | /* Change hover color for all links in the navigation menu */ |
#p-navigation a:hover { | #p-navigation a:hover { | ||
− | color: #955bc2; / Set the hover color for links */ | + | color: #955bc2; /* Set the hover color for links */ |
} | } | ||
− | /* ========================= / | + | /* ========================= */ |
− | / TABLE OF CONTENTS STYLES / | + | /* TABLE OF CONTENTS STYLES */ |
− | / ========================= */ | + | /* ========================= */ |
.mw-parser-output .toc { | .mw-parser-output .toc { | ||
− | background-color: #343434; | + | background-color: #343434; |
− | border: 1px solid #444241; | + | border: 1px solid #444241; |
} | } | ||
− | /* ========================= / | + | /* ========================= */ |
− | / HEADING STYLES / | + | /* HEADING STYLES */ |
− | / ========================= */ | + | /* ========================= */ |
h1 { | h1 { | ||
− | color: #e6e6e6 !important; /* Force heading colors */ | + | color: #e6e6e6 !important; /* Force heading colors */ |
} | } | ||
h2 { | h2 { | ||
− | color: #e6e6e6 !important; /* Force Heading Colors */ | + | color: #e6e6e6 !important; /* Force Heading Colors */ |
} | } | ||
h3 { | h3 { | ||
− | color; #e6e6e6 !important; /* Force Heading Colors */ | + | color; #e6e6e6 !important; /* Force Heading Colors */ |
} | } | ||
− | /* ========================= / | + | /* ========================= */ |
− | / LINK STYLES / | + | /* LINK STYLES */ |
− | / ========================= / | + | /* ========================= */ |
a { | a { | ||
− | color: #90b7f9; / Set the default link color */ | + | color: #90b7f9; /* Set the default link color */ |
} | } | ||
a:hover { | a:hover { | ||
− | color: #955bc2; /* Set the hover color for links */ | + | color: #955bc2; /* Set the hover color for links */ |
} | } | ||
− | /* ========================= / | + | /* ========================= */ |
− | / TOP BAR STYLES / | + | /* TOP BAR STYLES */ |
− | / ========================= */ | + | /* ========================= */ |
#mw-head { | #mw-head { | ||
− | background-color: #202020; | + | background-color: #202020; |
} | } | ||
#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; |
} | } | ||
− | /* ========================= / | + | /* ========================= */ |
− | / NOTABLE MEMBERS STYLES / | + | /* NOTABLE MEMBERS STYLES */ |
− | / ========================= */ | + | /* ========================= */ |
.notable-members { | .notable-members { | ||
− | background-color: #343434 !important; | + | background-color: #343434 !important; |
− | color: #e6e6e6 !important; | + | color: #e6e6e6 !important; |
} | } | ||
.notable-members th, .notable-members td { | .notable-members th, .notable-members td { | ||
− | border: 2px solid #e6e6e6; | + | border: 2px solid #e6e6e6; |
− | color: #e6e6e6 !important; /* Force cell text color */ | + | color: #e6e6e6 !important; /* Force cell text color */ |
} | } | ||
− | /* ========================= / | + | /* ========================= */ |
− | / TOOLS SECTION STYLES / | + | /* TOOLS SECTION STYLES */ |
− | / ========================= / | + | /* ========================= */ |
#p-tb a { | #p-tb a { | ||
− | color: #90b7f9; / Set the default link color */ | + | color: #90b7f9; /* Set the default link color */ |
} | } | ||
#p-tb a:hover { | #p-tb a:hover { | ||
− | color: #955bc2; /* Set the hover color for links */ | + | color: #955bc2; /* Set the hover color for links */ |
} | } | ||
− | /* ========================= / | + | /* ========================= */ |
− | / GRADIENT MENU STYLES / | + | /* GRADIENT MENU STYLES */ |
− | / ========================= / | + | /* ========================= */ |
− | / Change background for the "Read," "Edit," and "View history" links / | + | /* Change background for the "Read," "Edit," and "View history" links */ |
.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 */ |
} | } | ||
− | /* Change text color for the links / | + | /* Change text color for the links */ |
.ca-menu a { | .ca-menu a { | ||
− | color: #90b7f9 !important; / Set the text color */ | + | color: #90b7f9 !important; /* Set the text color */ |
} | } | ||
− | /* ============================= / | + | /* ============================= */ |
− | / Change color of visited links / | + | /* Change color of visited links */ |
− | / ============================= / | + | /* ============================= */ |
a:visited { | a:visited { | ||
− | color: #955bc2; / Set the visited link color */ | + | color: #955bc2; /* Set the visited link color */ |
} | } | ||
− | /* ========================================================================= / | + | /* ========================================================================= */ |
− | / THIS IS FOR THE "MAIN PAGE, VIEW, EDIT, READ" BARS ON THE TOP OF THE PAGE / | + | /* THIS IS FOR THE "MAIN PAGE, VIEW, EDIT, READ" BARS ON THE TOP OF THE PAGE */ |
− | / ========================================================================= */ | + | /* ========================================================================= */ |
− | /* Base tab style / | + | /* Base tab style */ |
.vectorTabs li a { | .vectorTabs li a { | ||
− | background: | + | background-color: #191919 !important; /* dark base */ |
− | color: #e6e6e6 !important; | + | color: #e6e6e6 !important; |
− | padding: 5px 10px !important; | + | padding: 5px 10px !important; |
− | border: none !important; / Remove any borders / | + | border: none !important; /* Remove any 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; / enable pseudo-element positioning / | + | position: relative; /* enable pseudo-element positioning */ |
− | transition: background 0.3s ease; | + | transition: background-color 0.3s ease; |
− | margin: 0; / Remove any margin / | + | margin: 0; /* Remove any margin */ |
− | box-shadow: none !important; / Ensure no box shadow is applied */ | + | box-shadow: none !important; /* Ensure no box shadow is applied */ |
} | } | ||
− | /* Hover effect | + | /* Hover effect */ |
.vectorTabs li a:hover { | .vectorTabs li a:hover { | ||
− | background: | + | background-color: #212121 !important; |
+ | color: white !important; | ||
} | } | ||
− | + | /* Styles for all tabs */ | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | /* Styles for all tabs / | ||
.vectorTabs li a { | .vectorTabs li a { | ||
− | background-color: #191919 !important; | + | background-color: #191919 !important; |
− | color: #cce4ff !important; / lighter text color */ | + | color: #cce4ff !important; /* lighter text color */ |
− | font-weight: bold !important; | + | font-weight: bold !important; |
} | } | ||
− | /* Blue fading overlay using a pseudo-element for inactive tabs / | + | /* Blue fading overlay using a pseudo-element for inactive tabs */ |
.vectorTabs li:not(.selected) a::before { | .vectorTabs li:not(.selected) a::before { | ||
− | content: ''; | + | content: ''; |
− | position: absolute; | + | position: absolute; |
− | top: 0; left: 0; right: 0; bottom: 0; | + | top: 0; left: 0; right: 0; bottom: 0; |
− | background: linear-gradient( | + | background: linear-gradient( |
− | to top, | + | to top, |
− | rgba(30, 144, 255, 0.2), / DodgerBlue with opacity from bottom / | + | rgba(30, 144, 255, 0.2), /* DodgerBlue with opacity from bottom */ |
− | rgba(25, 25, 25, 0.8) / dark fade at the top / | + | rgba(25, 25, 25, 0.8) /* dark fade at the top */ |
− | ); | + | ); |
− | border-radius: 0 !important; / No rounded corners / | + | border-radius: 0 !important; /* No rounded corners */ |
− | pointer-events: none; / allow clicks through this layer */ | + | pointer-events: none; /* allow clicks through this layer */ |
− | z-index: 0; | + | z-index: 0; |
} | } | ||
/* Ensure text is above the overlay */ | /* Ensure text is above the overlay */ | ||
.vectorTabs li.selected a > * { | .vectorTabs li.selected a > * { | ||
− | position: relative; | + | position: relative; |
− | z-index: 1; | + | z-index: 1; |
} | } | ||
− | /* Remove any padding on list items / | + | /* Remove any padding on list items */ |
.vectorTabs li { | .vectorTabs li { | ||
− | padding: 0 !important; / Remove padding / | + | padding: 0 !important; /* Remove padding */ |
− | margin: 0 !important; / Remove margin */ | + | margin: 0 !important; /* Remove margin */ |
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |
Revision as of 03:19, 6 May 2025
/* CSS placed here will be applied to all skins */ /* ========================= */ /* BODY STYLES */ /* ========================= */ body { background: #202020; color: #e6e6e6; /* Force text color */ } /* ========================= */ /* CONTENT STYLES */ /* ========================= */ #content { background-color: #191919; color: #e6e6e6 !important; /* Force text color */ } /* Sets background color of the logo area */ #p-logo { background-color: #202020; } /* ========================= */ /* NAVIGATION MENU STYLES */ /* ========================= */ #p-navigation { background-color: #202020; } /* Change color for all links in the navigation menu */ #p-navigation a { color: #90b7f9 !important; /* Set the default link color */ } /* Change hover color for all links in the navigation menu */ #p-navigation a:hover { color: #955bc2; /* Set the hover color for links */ } /* ========================= */ /* TABLE OF CONTENTS STYLES */ /* ========================= */ .mw-parser-output .toc { background-color: #343434; border: 1px solid #444241; } /* ========================= */ /* HEADING STYLES */ /* ========================= */ h1 { color: #e6e6e6 !important; /* Force heading colors */ } h2 { color: #e6e6e6 !important; /* Force Heading Colors */ } h3 { color; #e6e6e6 !important; /* Force Heading Colors */ } /* ========================= */ /* LINK STYLES */ /* ========================= */ a { color: #90b7f9; /* Set the default link color */ } a:hover { color: #955bc2; /* Set the hover color for links */ } /* ========================= */ /* TOP BAR STYLES */ /* ========================= */ #mw-head { background-color: #202020; } #mw-head a { color: #90b7f9; /* Force link color in top bar */ padding: 5px 10px; } /* ========================= */ /* NOTABLE MEMBERS STYLES */ /* ========================= */ .notable-members { background-color: #343434 !important; color: #e6e6e6 !important; } .notable-members th, .notable-members td { border: 2px solid #e6e6e6; color: #e6e6e6 !important; /* Force cell text color */ } /* ========================= */ /* TOOLS SECTION STYLES */ /* ========================= */ #p-tb a { color: #90b7f9; /* Set the default link color */ } #p-tb a:hover { color: #955bc2; /* Set the hover color for links */ } /* ========================= */ /* GRADIENT MENU STYLES */ /* ========================= */ /* Change background for the "Read," "Edit," and "View history" links */ .ca-menu { background: linear-gradient(to right, #252525, rgba(144, 183, 249, 0.5)); /* Fade effect */ } /* Change text color for the links */ .ca-menu a { color: #90b7f9 !important; /* Set the text color */ } /* ============================= */ /* Change color of visited links */ /* ============================= */ a:visited { color: #955bc2; /* Set the visited link color */ } /* ========================================================================= */ /* THIS IS FOR THE "MAIN PAGE, VIEW, EDIT, READ" BARS ON THE TOP OF THE PAGE */ /* ========================================================================= */ /* Base tab style */ .vectorTabs li a { background-color: #191919 !important; /* dark base */ color: #e6e6e6 !important; padding: 5px 10px !important; border: none !important; /* Remove any borders */ border-radius: 0 !important; /* Remove rounded corners */ text-decoration: none !important; position: relative; /* enable pseudo-element positioning */ transition: background-color 0.3s ease; margin: 0; /* Remove any margin */ box-shadow: none !important; /* Ensure no box shadow is applied */ } /* Hover effect */ .vectorTabs li a:hover { background-color: #212121 !important; color: white !important; } /* Styles for all tabs */ .vectorTabs li a { background-color: #191919 !important; color: #cce4ff !important; /* lighter text color */ font-weight: bold !important; } /* Blue fading overlay using a pseudo-element for inactive tabs */ .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), /* DodgerBlue with opacity from bottom */ rgba(25, 25, 25, 0.8) /* dark fade at the top */ ); border-radius: 0 !important; /* No rounded corners */ pointer-events: none; /* allow clicks through this layer */ z-index: 0; } /* Ensure text is above the overlay */ .vectorTabs li.selected a > * { position: relative; z-index: 1; } /* Remove any padding on list items */ .vectorTabs li { padding: 0 !important; /* Remove padding */ margin: 0 !important; /* Remove margin */ }