Template:SubpageNav/styles.css
Template page
More actions
/* =============================================================================
Template:SubpageNav/styles.css
UnfinishedProjects Wiki
TABLE OF CONTENTS
1. Wrapper
2. Main Bar
3. Brand / Root Title
4. Links Container & Top-Level List
5. Nav Item Links & Folder Labels
6. Caret Toggle Button
7. Dropdown Panel (1st level)
8. Dropdown Items
9. Deep Nesting (3rd level+)
10. Current-Page Highlight
11. Hide raw PrefixIndex output
12. Mobile
============================================================================= */
/* =============================================================================
1. WRAPPER
clear:both prevents the nav from overlapping a floated ProjectInfobox.
============================================================================= */
.subpage-nav-wrapper {
margin-bottom: 0.75em;
clear: both;
width: 100%;
}
/* =============================================================================
2. MAIN BAR
Compact single-row bar. overflow:visible is required so that absolutely-
positioned dropdowns can escape the bar's bounds.
============================================================================= */
.subpage-nav {
display: flex;
align-items: center;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 6px;
padding: 0 12px;
min-height: 38px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
font-size: 0.875em;
overflow: visible;
}
/* =============================================================================
3. BRAND / ROOT TITLE
Separated from the links with a vertical divider. flex-shrink:0 stops
the brand from squishing when there are many nav links.
============================================================================= */
.subpage-nav-brand {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
padding-right: 12px;
margin-right: 12px;
border-right: 1px solid var(--border-color-base);
white-space: nowrap;
flex-shrink: 0;
}
.subpage-nav-brand img {
flex-shrink: 0;
}
.subpage-nav-title a {
color: var(--color-base);
text-decoration: none;
}
.subpage-nav-title a:hover {
color: var(--wiki-primary);
}
/* =============================================================================
4. LINKS CONTAINER & TOP-LEVEL LIST
The container is a flex row; the <ul> inside is also a flex row so
items sit side-by-side. flex:1 lets the links area take remaining space.
============================================================================= */
.subpage-nav-links {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
position: relative;
}
.subpage-nav-links > ul {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
gap: 2px;
}
.subpage-nav-links li {
position: relative;
margin: 0 !important;
list-style: none !important;
}
/* =============================================================================
5. NAV ITEM LINKS & FOLDER LABELS
<a> for real pages, <span> for virtual folders with no direct page.
Both use inline-flex so the caret button sits flush next to the text.
============================================================================= */
.subpage-nav-links li > a,
.subpage-nav-links li > span {
display: inline-flex;
align-items: center;
padding: 4px 10px;
font-weight: 600;
color: var(--color-base--subtle);
border-radius: 4px;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background 0.1s, color 0.1s;
line-height: 1.4;
}
.subpage-nav-links li > a:hover,
.subpage-nav-links li > span:hover,
.subpage-nav-links li.is-open > span {
background: var(--wiki-primary-subtle);
color: var(--wiki-primary);
}
/* =============================================================================
6. CARET TOGGLE BUTTON
Rendered as a <button> SIBLING to the <a> (not inside it).
This means clicking the link navigates normally; only the caret toggles.
Padding is tight so the button hugs the label.
============================================================================= */
.subpage-nav-caret {
background: none;
border: none;
padding: 4px 2px 4px 0;
margin: 0;
cursor: pointer;
font-size: 0.7em;
line-height: 1;
color: var(--color-base--subtle);
vertical-align: middle;
border-radius: 3px;
transition: color 0.1s, transform 0.15s;
}
.subpage-nav-caret:hover,
.is-open > .subpage-nav-caret {
color: var(--wiki-primary);
}
/* Rotate caret when dropdown is open */
.is-open > .subpage-nav-caret {
transform: rotate(180deg);
}
/* =============================================================================
7. DROPDOWN PANEL (1st level)
Appears below the triggering <li>. z-index:1000 ensures it floats over
infoboxes and other page content.
============================================================================= */
.subpage-nav-links li > ul {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 160px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
z-index: 1000;
padding: 4px 0 !important;
list-style: none !important;
}
.subpage-nav-links li.is-open > ul {
display: block;
}
/* =============================================================================
8. DROPDOWN ITEMS (1st level children)
border-radius:0 so items fill the panel edge-to-edge.
padding-right is generous to give room before any nested caret.
============================================================================= */
.subpage-nav-links li > ul > li > a,
.subpage-nav-links li > ul > li > span {
display: flex;
align-items: center;
padding: 6px 14px;
border-radius: 0;
white-space: nowrap;
}
/* =============================================================================
9. DEEP NESTING (3rd level and deeper)
Sub-sub-menus open as an indented inline accordion WITHIN the dropdown
panel rather than as a second floating panel. This keeps the nav readable
without complex flyout positioning logic.
============================================================================= */
.subpage-nav-links li > ul li > ul {
/* Override the absolute positioning set for 1st-level dropdowns */
position: static;
box-shadow: none;
background: transparent;
border: none;
border-left: 2px solid var(--border-color-base);
border-radius: 0;
margin: 0 0 0 14px !important;
padding: 0 !important;
/* is-open controls display â handled by the same .is-open rule below */
display: none;
}
.subpage-nav-links li > ul li.is-open > ul {
display: block;
}
.subpage-nav-links li > ul li > ul li > a,
.subpage-nav-links li > ul li > ul li > span {
padding: 5px 10px;
font-size: 0.95em;
}
/* =============================================================================
10. CURRENT-PAGE HIGHLIGHT
Applied by the gadget JS to the <a> that matches the current wgPageName.
Parent .has-dropdown items are also opened via JS (is-open class).
============================================================================= */
.subpage-nav-links li > a.is-current {
color: var(--wiki-primary);
background: var(--wiki-primary-subtle);
}
/* =============================================================================
11. HIDE RAW PREFIXINDEX OUTPUT
Special:PrefixIndex renders a full <ul> of links before the gadget runs.
Hiding this element prevents a flash of unstyled content. The gadget
removes .subpage-auto-list entirely and inserts the clean nested list.
============================================================================= */
.subpage-auto-list {
display: none;
}
/* =============================================================================
12. MOBILE (⤠720 px)
On small screens the bar stacks vertically. Dropdowns expand inline
(position:static) instead of floating, acting as an accordion.
============================================================================= */
@media (max-width: 720px) {
.subpage-nav {
flex-direction: column;
align-items: stretch;
padding: 0;
font-size: 1em; /* restore base size on mobile */
}
.subpage-nav-brand {
border-right: none;
border-bottom: 1px solid var(--border-color-base);
padding: 8px 14px;
margin-right: 0;
}
.subpage-nav-links {
flex-direction: column;
align-items: stretch;
}
.subpage-nav-links > ul {
flex-direction: column;
gap: 0;
}
/* Full-width tap targets on mobile */
.subpage-nav-links li > a,
.subpage-nav-links li > span {
padding: 10px 14px;
border-radius: 0;
width: 100%;
box-sizing: border-box;
}
.subpage-nav-caret {
margin-left: auto; /* push caret to right edge */
padding-right: 14px;
}
/* 1st-level dropdown: expand inline, accent with primary-colour left border */
.subpage-nav-links li > ul {
position: static;
box-shadow: none;
border: none;
border-left: 3px solid var(--wiki-primary);
border-radius: 0;
background: var(--color-surface-2);
min-width: 0;
margin: 0 !important;
padding: 0 !important;
}
.subpage-nav-links li > ul > li > a,
.subpage-nav-links li > ul > li > span {
padding: 8px 14px 8px 24px; /* indent to show hierarchy */
}
/* 3rd-level+: extra indent */
.subpage-nav-links li > ul li > ul {
border-left: 3px solid var(--border-color-base);
margin: 0 !important;
}
.subpage-nav-links li > ul li > ul li > a,
.subpage-nav-links li > ul li > ul li > span {
padding: 8px 14px 8px 36px;
}
}