27,635
edits
Weezerpedia:Main Page navigation/styles.css: Difference between revisions
Weezerpedia:Main Page navigation/styles.css (view source)
Revision as of 13:31, 2 December 2025
, Yesterday at 13:31new layout
m (Protected "Weezerpedia:Main Page navigation/styles.css" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))) |
(new layout) |
||
| Line 1: | Line 1: | ||
/* Hide the default "Hide/Expand" button */ | /* Hide the default "Hide/Expand" button */ | ||
.mw-collapsible-toggle-default { | .mw-collapsible-toggle-default { | ||
display:none; | |||
} | } | ||
/* Hide the default | /* Hide the default mobile toggle icons */ | ||
.mw-collapsible::before, | .mw-collapsible::before, | ||
.mw-collapsible::after { | .mw-collapsible::after { | ||
display: none; | |||
} | } | ||
/* Outer box | /* Outer box */ | ||
.mp-navigation-box { | .mp-navigation-box { | ||
background-color: rgba(0, 0, 0, 0); | background-color: rgba(0, 0, 0, 0); | ||
| Line 17: | Line 17: | ||
} | } | ||
/* Header | /* Header toggle bar */ | ||
.mp-navigation-button.mp-navigation-button-collapsetoggle { | .mp-navigation-button.mp-navigation-button-collapsetoggle { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: space-between; | justify-content: space-between; | ||
cursor: pointer; | cursor: pointer; | ||
| Line 27: | Line 26: | ||
padding: 5px 10px; | padding: 5px 10px; | ||
font-weight: bold; | font-weight: bold; | ||
box-sizing: border-box; | |||
} | } | ||
/* Pink chevron arrow | /* Pink chevron arrow */ | ||
.mp-navigation-button.mp-navigation-button-collapsetoggle::after { | .mp-navigation-button.mp-navigation-button-collapsetoggle::after { | ||
content: ""; | content: ""; | ||
| Line 35: | Line 35: | ||
width: 16px; | width: 16px; | ||
height: 10px; | height: 10px; | ||
background-color: pink; | background-color: pink; | ||
clip-path: polygon( | clip-path: polygon(0% 0%, 50% 100%, 100% 0%); | ||
transition: transform 300ms ease; | transition: transform 300ms ease; | ||
margin-left: 10px; | margin-left: 10px; | ||
} | } | ||
/* | /* Arrow rotates when expanded */ | ||
.mp-navigation-box:not(.mw-collapsed) .mp-navigation-button.mp-navigation-button-collapsetoggle::after { | .mp-navigation-box:not(.mw-collapsed) | ||
transform: rotate(180deg); | .mp-navigation-button.mp-navigation-button-collapsetoggle::after { | ||
transform: rotate(180deg); | |||
} | } | ||
/* Collapsible content base */ | |||
.mw-collapsible > .mw-collapsible-content { | .mw-collapsible > .mw-collapsible-content { | ||
padding: 10px; | |||
} | |||
/* NEW: 6–column grid layout */ | |||
.navigation-grid { | |||
display: grid; | display: grid; | ||
grid-template-columns: max-content 1fr max-content 1fr max-content 1fr; | |||
gap: | column-gap: 20px; | ||
overflow-wrap: break-word; | |||
word-break: break-word; /* optional fallback */ | |||
grid-row-gap: 6px; | |||
align-items: flex-start; | |||
} | } | ||
. | .navigation-grid .cat { | ||
font-weight: bold; | |||
} | } | ||
. | @media (max-width: 800px) { | ||
.navigation-grid { | |||
grid-template-columns: max-content 1fr; | |||
} | |||
} | } | ||