Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
Line 1: | Line 1: | ||
− | /* | + | /* Base tab style */ |
− | + | .vectorTabs li a { | |
− | /* | + | background-color: #191919 !important; /* dark base */ |
− | + | color: #e6e6e6 !important; | |
− | + | padding: 5px 10px !important; | |
− | + | border: none !important; | |
− | + | border-radius: 0 !important; | |
− | + | text-decoration: none !important; | |
+ | position: relative; /* enable pseudo-element positioning */ | ||
+ | transition: background-color 0.3s ease; | ||
} | } | ||
− | /* | + | /* Hover effect */ |
− | + | .vectorTabs li a:hover { | |
− | + | background-color: #212121 !important; | |
− | + | color: white !important; | |
− | background-color: # | ||
− | color: | ||
} | } | ||
− | /* | + | /* Active tab with blue fading overlay */ |
− | + | .vectorTabs li.selected a { | |
− | + | background-color: #191919 !important; | |
− | + | color: #cce4ff !important; | |
− | + | font-weight: bold !important; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | . | ||
− | background- | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | color: # | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | . | + | /* Blue fading overlay using a pseudo-element */ |
− | border: | + | .vectorTabs li.selected a::before { |
− | + | content: ''; | |
+ | position: absolute; | ||
+ | top: 0; left: 0; right: 0; bottom: 0; | ||
+ | background: linear-gradient( | ||
+ | to bottom right, | ||
+ | rgba(30, 144, 255, 0.6), /* DodgerBlue with opacity */ | ||
+ | rgba(25, 25, 25, 0.8) /* dark fade */ | ||
+ | ); | ||
+ | border-radius: 0 !important; | ||
+ | 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; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | .vectorTabs li.selected a { | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } |
Revision as of 05:31, 5 May 2025
/* Base tab style */ .vectorTabs li a { background-color: #191919 !important; /* dark base */ color: #e6e6e6 !important; padding: 5px 10px !important; border: none !important; border-radius: 0 !important; text-decoration: none !important; position: relative; /* enable pseudo-element positioning */ transition: background-color 0.3s ease; } /* Hover effect */ .vectorTabs li a:hover { background-color: #212121 !important; color: white !important; } /* Active tab with blue fading overlay */ .vectorTabs li.selected a { background-color: #191919 !important; color: #cce4ff !important; font-weight: bold !important; } /* Blue fading overlay using a pseudo-element */ .vectorTabs li.selected a::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( to bottom right, rgba(30, 144, 255, 0.6), /* DodgerBlue with opacity */ rgba(25, 25, 25, 0.8) /* dark fade */ ); border-radius: 0 !important; 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; }