master @ 126 LINES
[ HISTORY ] [ UP ]
┌─ SCSS ─────────────────────────────────────────────────────────────────────┐
│ @use "../../../styles/core/tokens" as *; │
│ │
│ .player-best-runs { │
│ width: 100%; │
│ │
│ .dungeon-cell { │
│ display: inline-flex; │
│ align-items: center; │
│ │
│ .dungeon-icon { │
│ margin-right: 0.4rem; │
│ } │
│ } │
│ │
│ .best-runs-controls { │
│ display: flex; │
│ justify-content: flex-end; │
│ flex-wrap: wrap; │
│ gap: $spacing-sm; │
│ margin-bottom: $spacing-md; │
│ │
│ .filter-group { │
│ margin-bottom: 0; │
│ } │
│ } │
│ │
│ .best-runs-season { │
│ &[data-active="false"] { │
│ display: none; │
│ } │
│ } │
│ } │
│ │
│ // Mobile layout │
│ @media (max-width: 1024px) { │
│ .player-best-runs { │
│ .table-container[data-mode="best-runs"] { │
│ .table-row { │
│ display: grid; │
│ grid-template-columns: 1fr 1fr 1fr; │
│ grid-template-rows: auto auto auto; │
│ gap: 8px; │
│ padding: 12px; │
│ background: var(--bg-secondary); │
│ border-radius: 6px; │
│ margin-bottom: 8px; │
│ } │
│ │
│ .table-cell::before { │
│ display: none; │
│ } │
│ │
│ // First row: Dungeon spans 2 cols | Time │
│ .table-cell:nth-child(1) { │
│ grid-column: 1 / 3; │
│ grid-row: 1; │
│ padding: 0; │
│ } │
│ │
│ .table-cell:nth-child(2) { │
│ grid-column: 3; │
│ grid-row: 1; │
│ font-weight: 600; │
│ font-size: 1.1em; │
│ padding: 0; │
│ text-align: right; │
│ } │
│ │
│ // Second row: Team spans full width │
│ .table-cell:nth-child(3) { │
│ grid-column: 1 / -1; │
│ grid-row: 2; │
│ padding: 0; │
│ margin-top: 4px; │
│ } │
│ │
│ // Third row: Rankings in 3 equal columns │
│ .table-cell:nth-child(4), │
│ .table-cell:nth-child(5), │
│ .table-cell:nth-child(6) { │
│ grid-row: 3; │
│ padding: 0; │
│ margin-top: 8px; │
│ font-size: 0.85em; │
│ } │
│ │
│ .table-cell:nth-child(4) { │
│ grid-column: 1; │
│ │
│ &.ranking-global::before { │
│ content: "Global: "; │
│ font-weight: 600; │
│ color: var(--text-secondary); │
│ display: inline; │
│ margin-right: 4px; │
│ } │
│ } │
│ │
│ .table-cell:nth-child(5) { │
│ grid-column: 2; │
│ │
│ &.ranking-region::before { │
│ content: "Region: "; │
│ font-weight: 600; │
│ color: var(--text-secondary); │
│ display: inline; │
│ margin-right: 4px; │
│ } │
│ } │
│ │
│ .table-cell:nth-child(6) { │
│ grid-column: 3; │
│ text-align: right; │
│ │
│ &.ranking-realm::before { │
│ content: "Realm: "; │
│ font-weight: 600; │
│ color: var(--text-secondary); │
│ display: inline; │
│ margin-right: 4px; │
│ } │
│ } │
│ } │
│ } │
│ } │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ SCSS ───────────────────────────────┐
│ @use "../../../styles/core/tokens" as *; │
│ │
│ .player-best-runs { │
│ width: 100%; │
│ │
│ .dungeon-cell { │
│ display: inline-flex; │
│ align-items: center; │
│ │
│ .dungeon-icon { │
│ margin-right: 0.4rem; │
│ } │
│ } │
│ │
│ .best-runs-controls { │
│ display: flex; │
│ justify-content: flex-end; │
│ flex-wrap: wrap; │
│ gap: $spacing-sm; │
│ margin-bottom: $spacing-md; │
│ │
│ .filter-group { │
│ margin-bottom: 0; │
│ } │
│ } │
│ │
│ .best-runs-season { │
│ &[data-active="false"] { │
│ display: none; │
│ } │
│ } │
│ } │
│ │
│ // Mobile layout │
│ @media (max-width: 1024px) { │
│ .player-best-runs { │
│ .table-container[data-mode="best-runs"] │
│ { │
│ .table-row { │
│ display: grid; │
│ grid-template-columns: 1fr 1fr 1fr; │
│ grid-template-rows: auto auto auto; │
│ gap: 8px; │
│ padding: 12px; │
│ background: var(--bg-secondary); │
│ border-radius: 6px; │
│ margin-bottom: 8px; │
│ } │
│ │
│ .table-cell::before { │
│ display: none; │
│ } │
│ │
│ // First row: Dungeon spans 2 cols | T │
│ ime │
│ .table-cell:nth-child(1) { │
│ grid-column: 1 / 3; │
│ grid-row: 1; │
│ padding: 0; │
│ } │
│ │
│ .table-cell:nth-child(2) { │
│ grid-column: 3; │
│ grid-row: 1; │
│ font-weight: 600; │
│ font-size: 1.1em; │
│ padding: 0; │
│ text-align: right; │
│ } │
│ │
│ // Second row: Team spans full width │
│ .table-cell:nth-child(3) { │
│ grid-column: 1 / -1; │
│ grid-row: 2; │
│ padding: 0; │
│ margin-top: 4px; │
│ } │
│ │
│ // Third row: Rankings in 3 equal colu │
│ mns │
│ .table-cell:nth-child(4), │
│ .table-cell:nth-child(5), │
│ .table-cell:nth-child(6) { │
│ grid-row: 3; │
│ padding: 0; │
│ margin-top: 8px; │
│ font-size: 0.85em; │
│ } │
│ │
│ .table-cell:nth-child(4) { │
│ grid-column: 1; │
│ │
│ &.ranking-global::before { │
│ content: "Global: "; │
│ font-weight: 600; │
│ color: var(--text-secondary); │
│ display: inline; │
│ margin-right: 4px; │
│ } │
│ } │
│ │
│ .table-cell:nth-child(5) { │
│ grid-column: 2; │
│ │
│ &.ranking-region::before { │
│ content: "Region: "; │
│ font-weight: 600; │
│ color: var(--text-secondary); │
│ display: inline; │
│ margin-right: 4px; │
│ } │
│ } │
│ │
│ .table-cell:nth-child(6) { │
│ grid-column: 3; │
│ text-align: right; │
│ │
│ &.ranking-realm::before { │
│ content: "Realm: "; │
│ font-weight: 600; │
│ color: var(--text-secondary); │
│ display: inline; │
│ margin-right: 4px; │
│ } │
│ } │
│ } │
│ } │
│ } │
└──────────────────────────────────────────────┘
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET