feat: add DLC page

2026-06-18 22:42:34 -03:00
parent c2e2f4c216
commit 8066ad4434
4 changed files with 351 additions and 1 deletions
@@ -0,0 +1,174 @@
+/*
+    toggles
+*/
+.overrideToggle {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.6rem 1rem;
+    border: 1px solid #1a1a1a;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    user-select: none;
+}
+
+.overrideToggle:hover {
+    border-color: #333333;
+}
+
+.overrideToggleActive {
+    border-color: #4a0000;
+    background: #0d0000;
+}
+
+.overrideToggleActive:hover {
+    border-color: #a30000;
+    box-shadow: 0 0 10px rgba(163, 0, 0, 0.2);
+}
+
+.overrideIndicator {
+    width: 10px;
+    height: 10px;
+    border: 1px solid #2a2a2a;
+    background: transparent;
+    flex-shrink: 0;
+    transition: all 0.15s ease;
+}
+
+.overrideToggleActive .overrideIndicator {
+    background: #a30000;
+    border-color: #ff0000;
+    box-shadow: 0 0 6px rgba(163, 0, 0, 0.6);
+}
+
+.overrideLabel {
+    font-family: 'Oswald', sans-serif;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #444444;
+    transition: color 0.15s ease;
+}
+
+.overrideToggleActive .overrideLabel {
+    color: #c9c9c9;
+}
+
+.overrideWarning {
+    font-size: 0.65rem;
+    color: #5a0000;
+    font-family: 'Roboto Condensed', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+
+.overrideToggleActive .overrideWarning {
+    color: #883333;
+}
+
+/*
+    grid
+*/
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 0.5rem;
+    overflow-y: auto;
+    flex: 1;
+    align-content: start;
+    padding-right: 0.5rem;
+}
+
+/*
+    cards
+*/
+.card {
+    background: #0d0d0d;
+    border: 1px solid #1a1a1a;
+    border-left: 3px solid #1a1a1a;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.85rem 1rem 0.85rem 1.1rem;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    user-select: none;
+}
+
+.card:hover {
+    background: #111111;
+    border-left-color: #330000;
+}
+
+.cardUnlocked {
+    border-left-color: #a30000;
+    background: #0d0000;
+}
+
+.cardUnlocked:hover {
+    background: #100000;
+    border-left-color: #cc0000;
+    box-shadow: -3px 0 12px rgba(163, 0, 0, 0.15);
+}
+
+.cardName {
+    flex: 1;
+    font-family: 'Oswald', sans-serif;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: #444444;
+    line-height: 1.3;
+    transition: color 0.15s ease;
+}
+
+.cardUnlocked .cardName {
+    color: #ffffff;
+}
+
+.card:hover .cardName {
+    color: #666666;
+}
+
+.cardUnlocked:hover .cardName {
+    color: #ffffff;
+}
+
+/*
+    platform badges
+*/
+.platforms {
+    display: flex;
+    gap: 0.3rem;
+    flex-shrink: 0;
+}
+
+.badge {
+    font-family: 'Oswald', sans-serif;
+    font-size: 0.6rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: 0.15rem 0.4rem;
+    border: 1px solid;
+    line-height: 1.4;
+}
+
+.badgeOff {
+    color: #1e1e1e;
+    border-color: #181818;
+}
+
+.badgeSteam {
+    color: #5a9cc4;
+    border-color: #2a4a66;
+}
+
+.badgeEpic {
+    color: #888888;
+    border-color: #3a3a3a;
+}
+
+.badgeXbox {
+    color: #4a9e40;
+    border-color: #225520;
+}