Weezerpedia:Main Page navigation/styles.css

/* Hide the default "Hide/Expand" button */
.mw-collapsible-toggle-default {
	display:none;
}

/* Hide the default "Hide/Expand" button in mobile view */
.mw-collapsible::before,
.mw-collapsible::after {
	display: none;
}

/* Outer box style */
.mp-navigation-box {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid #ddd;
    margin-top: 4px;
}

/* Header style */
.mp-navigation-button.mp-navigation-button-collapsetoggle {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-between;
    cursor: pointer;
    background-color: #f9f9f9;
    padding: 5px 10px;
    font-weight: bold;
}

/* Pink chevron arrow using clip-path */
.mp-navigation-button.mp-navigation-button-collapsetoggle::after {
    content: "";
    display: block;
    width: 16px;
    height: 10px;
    background-color: pink; /* Pink triangle */
    clip-path: polygon(
        0% 0%,
        50% 100%,
        100% 0%
    ); /* ▼ Downward triangle */
    transition: transform 300ms ease;
    margin-left: 10px;
}

/* Rotate arrow when expanded */
.mp-navigation-box:not(.mw-collapsed) .mp-navigation-button.mp-navigation-button-collapsetoggle::after {
    transform: rotate(180deg); /* ▲ */
}

.mw-collapsible > .mw-collapsible-content {
    display: grid;
    padding: 10px;
    gap: 10px;
}

.mw-collapsible-content {
  grid-template-columns: max-content .15fr .15fr 1fr;
  gap: 10px 5px; /* row-gap: 10px, column-gap: 20px */
  padding: 10px;
  align-items: center; /* vertically center all grid items */
  white-space: nowrap;
  overflow: auto;
}

.category {
  font-weight: bold;
  white-space: nowrap;
}