MediaWiki:Common.css: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* ================= NAV ================= */ | |||
.navtable{ | |||
border: none; | |||
text-align: center; | |||
margin: 0 auto; | |||
border-collapse: collapse; | |||
} | |||
.navcell{ | |||
padding: 0 18px 10px 18px; | |||
vertical-align: top; | |||
} | |||
.navimg img{ | |||
display:block; | |||
margin:0 auto; | |||
} | |||
.navicon{ | |||
display:flex; | |||
align-items:flex-end; | |||
justify-content:center; | |||
width: 200px; | |||
} | |||
.navicon--row1{ height: 150px; } | |||
.navicon--row2{ height: 200px; } | |||
.navlabel{ | |||
text-align: center; | |||
width: 100%; | |||
margin-top: 4px; | |||
line-height: 1.05; | |||
font-weight: 800; | |||
} | |||
.navlabel--tight{ margin-top: 2px; } | |||
.navicon--empty, | |||
.navlabel--empty{ | |||
visibility:hidden; | |||
} | |||
body.page-Main_Page h1.firstHeading { | |||
display: none; | |||
} | |||
/* ================= TAB SYSTEM ================= */ | |||
.mw-tab-buttons { | |||
display: flex; | |||
gap: 8px; | |||
margin-bottom: 10px; | |||
flex-wrap: wrap; | |||
} | |||
.mw-tab-btn { | |||
padding: 8px 14px; | |||
background: #111; | |||
color: #ccc; | |||
border: 1px solid #444; | |||
border-radius: 6px; | |||
cursor: pointer; | |||
font-weight: bold; | |||
} | |||
.mw-tab-btn:hover { | |||
border-color: #00bfff; | |||
color: #fff; | |||
} | |||
.mw-tab-btn.active { | |||
background: #00bfff; | |||
color: #000; | |||
} | |||
.mw-tab-content { | |||
display: none; | |||
overflow: visible !important; /* 🔥 FIX: prevents dropdown blocking */ | |||
} | |||
.mw-tab-content.active { | |||
display: block; | |||
} | |||
/* ================= DROPDOWN SYSTEM (FULL FIX) ================= */ | /* ================= DROPDOWN SYSTEM (FULL FIX) ================= */ | ||
| Line 9: | Line 97: | ||
box-shadow: 0 0 12px rgba(0,0,0,0.6); | box-shadow: 0 0 12px rgba(0,0,0,0.6); | ||
max-width: 420px; | max-width: 420px; | ||
position: relative; | position: relative; | ||
overflow: visible !important; | |||
z-index: 1; | |||
} | } | ||
| Line 22: | Line 113: | ||
} | } | ||
/* | /* Container */ | ||
.mod-dropdown { | .mod-dropdown { | ||
position: relative; | position: relative; | ||
width: 100%; | width: 100%; | ||
z-index: 2; | |||
} | } | ||
| Line 48: | Line 139: | ||
} | } | ||
/* | /* LIST — FIXED SCROLL + INTERACTION */ | ||
.mod-dropdown-list { | .mod-dropdown-list { | ||
display: none; | display: none; | ||
position: absolute; | position: absolute; | ||
top: 100%; | top: 100%; | ||
left: 0; | left: 0; | ||
width: 100%; | width: 100%; | ||
max-height: 250px; | |||
background: #1a1a1a; | background: #1a1a1a; | ||
border: 1px solid #444; | border: 1px solid #444; | ||
border-radius: 6px; | border-radius: 6px; | ||
overflow-y: auto; | |||
overflow-y: auto; | |||
overflow-x: hidden; | overflow-x: hidden; | ||
z-index: 99999; | |||
pointer-events: auto; /* 🔥 FIXES mouse scroll */ | |||
} | } | ||
| Line 95: | Line 190: | ||
} | } | ||
/* | /* Scrollbar */ | ||
.mod-dropdown-list::-webkit-scrollbar { | .mod-dropdown-list::-webkit-scrollbar { | ||
width: 6px; | width: 6px; | ||
| Line 106: | Line 200: | ||
} | } | ||
/* | /* ================= CUSTOM DROPDOWN (MOD SYSTEM) ================= */ | ||
.mw-dropdown- | |||
. | .dropdown-list { | ||
position: absolute; | |||
background: #1a1a1a; | |||
border: 1px solid #444; | |||
padding: 5px; | |||
z-index: 9999; | |||
} | |||
.dropdown-list div { | |||
padding: 6px; | |||
cursor: pointer; | |||
color: #ccc; | |||
} | |||
.dropdown-list div:hover { | |||
background: #00bfff; | |||
color: #000; | |||
} | |||
/* ================= CLEANUP ================= */ | |||
/* Remove legacy broken dropdowns */ | |||
.mw-dropdown, | |||
.mw-dropdown-content { | |||
display: none !important; | |||
} | |||
/* Prevent empty containers */ | |||
[data-left]:empty, | |||
[data-right]:empty { | |||
display: none !important; | |||
} | |||
/* Remove empty junk blocks safely */ | |||
.mw-tab-content div:empty { | |||
display: none !important; | |||
} | } | ||
Revision as of 21:16, 21 April 2026
/* ================= NAV ================= */
.navtable{
border: none;
text-align: center;
margin: 0 auto;
border-collapse: collapse;
}
.navcell{
padding: 0 18px 10px 18px;
vertical-align: top;
}
.navimg img{
display:block;
margin:0 auto;
}
.navicon{
display:flex;
align-items:flex-end;
justify-content:center;
width: 200px;
}
.navicon--row1{ height: 150px; }
.navicon--row2{ height: 200px; }
.navlabel{
text-align: center;
width: 100%;
margin-top: 4px;
line-height: 1.05;
font-weight: 800;
}
.navlabel--tight{ margin-top: 2px; }
.navicon--empty,
.navlabel--empty{
visibility:hidden;
}
body.page-Main_Page h1.firstHeading {
display: none;
}
/* ================= TAB SYSTEM ================= */
.mw-tab-buttons {
display: flex;
gap: 8px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.mw-tab-btn {
padding: 8px 14px;
background: #111;
color: #ccc;
border: 1px solid #444;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
}
.mw-tab-btn:hover {
border-color: #00bfff;
color: #fff;
}
.mw-tab-btn.active {
background: #00bfff;
color: #000;
}
.mw-tab-content {
display: none;
overflow: visible !important; /* 🔥 FIX: prevents dropdown blocking */
}
.mw-tab-content.active {
display: block;
}
/* ================= DROPDOWN SYSTEM (FULL FIX) ================= */
.mw-dropdown-ui {
background: linear-gradient(145deg, #1a1a1a, #111);
border: 1px solid #333;
border-radius: 12px;
padding: 14px;
margin: 18px 0;
box-shadow: 0 0 12px rgba(0,0,0,0.6);
max-width: 420px;
position: relative;
overflow: visible !important;
z-index: 1;
}
/* Header label */
.mw-dropdown-ui::before {
content: attr(data-label);
display: block;
font-weight: bold;
font-size: 15px;
margin-bottom: 8px;
color: #00bfff;
}
/* Container */
.mod-dropdown {
position: relative;
width: 100%;
z-index: 2;
}
/* Button */
.mod-dropdown-btn {
width: 100%;
padding: 10px;
background: #0f0f0f;
color: #eee;
border: 1px solid #444;
border-radius: 6px;
cursor: pointer;
text-align: left;
font-weight: bold;
transition: 0.2s;
}
.mod-dropdown-btn:hover {
border-color: #00bfff;
color: #fff;
}
/* LIST — FIXED SCROLL + INTERACTION */
.mod-dropdown-list {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-height: 250px;
background: #1a1a1a;
border: 1px solid #444;
border-radius: 6px;
overflow-y: auto;
overflow-x: hidden;
z-index: 99999;
pointer-events: auto; /* 🔥 FIXES mouse scroll */
}
/* Items */
.mod-dropdown-item {
padding: 8px;
cursor: pointer;
color: #ccc;
border-bottom: 1px solid #222;
transition: 0.15s;
}
.mod-dropdown-item:last-child {
border-bottom: none;
}
.mod-dropdown-item:hover {
background: #00bfff;
color: #000;
}
/* Output box */
.mw-dropdown-output {
margin-top: 10px;
background: #0a0a0a;
border: 1px solid #222;
padding: 12px;
border-radius: 6px;
color: #ddd;
font-size: 13px;
line-height: 1.4;
}
/* Scrollbar */
.mod-dropdown-list::-webkit-scrollbar {
width: 6px;
}
.mod-dropdown-list::-webkit-scrollbar-thumb {
background: #00bfff;
border-radius: 3px;
}
/* ================= CUSTOM DROPDOWN (MOD SYSTEM) ================= */
.dropdown-list {
position: absolute;
background: #1a1a1a;
border: 1px solid #444;
padding: 5px;
z-index: 9999;
}
.dropdown-list div {
padding: 6px;
cursor: pointer;
color: #ccc;
}
.dropdown-list div:hover {
background: #00bfff;
color: #000;
}
/* ================= CLEANUP ================= */
/* Remove legacy broken dropdowns */
.mw-dropdown,
.mw-dropdown-content {
display: none !important;
}
/* Prevent empty containers */
[data-left]:empty,
[data-right]:empty {
display: none !important;
}
/* Remove empty junk blocks safely */
.mw-tab-content div:empty {
display: none !important;
}