MediaWiki:Common.css
Appearance
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
.orb {
padding: 2px 6px;
border-radius: 4px;
color: white;
font-weight: bold;
font-size: 0.95em;
}
.orb-fire {
background-color: #e74c3c;
}
.orb-water {
background-color: #3498db;
}
.orb-wood {
background-color: #27ae60;
}
.orb-light {
background-color: #f1c40f;
color: black;
}
/* Custom Top Navigation */
.custom-top-nav {
background: linear-gradient(90deg, #1a1a2e, #16213e);
border-bottom: 2px solid #0f3460;
padding: 0;
margin: 0;
position: relative;
z-index: 100;
}
.nav-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.nav-item {
position: relative;
}
.nav-link {
display: block;
padding: 15px 20px;
color: #ffffff !important;
text-decoration: none !important;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
transition: background-color 0.3s ease;
}
.nav-link:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #ffffff !important;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background: #2c2c54;
min-width: 200px;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
border: 1px solid #444;
display: none;
z-index: 1000;
list-style: none;
margin: 0;
padding: 0;
}
.nav-item:hover .dropdown-menu {
display: block;
}
.dropdown-menu li {
border-bottom: 1px solid #444;
}
.dropdown-menu li:last-child {
border-bottom: none;
}
.dropdown-menu a {
display: block;
padding: 12px 16px;
color: #ffffff !important;
text-decoration: none !important;
font-size: 13px;
transition: background-color 0.3s ease;
}
.dropdown-menu a:hover {
background-color: #1a1a2e;
color: #4CAF50 !important;
}
/* Position the nav below the site header */
.mw-page-container {
padding-top: 0;
}
.vector-header-container {
border-bottom: none;
}
/* Mobile responsive */
@media (max-width: 768px) {
.nav-menu {
flex-direction: column;
}
.dropdown-menu {
position: static;
display: none;
box-shadow: none;
border: none;
background: #1a1a2e;
}
.nav-item:hover .dropdown-menu {
display: block;
}
}
.orb-dark {
background-color: #8e44ad;
}