feat: add customizations page

2026-06-18 21:54:12 -03:00
parent 7b08860b4e
commit 952de164b9
6 changed files with 787 additions and 0 deletions
@@ -0,0 +1,208 @@
+/*
+  tabs
+*/
+.tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid #1a1a1a;
+  margin-bottom: 1.5rem;
+  flex-shrink: 0;
+}
+
+.tab {
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  color: #444444;
+  padding: 0.7rem 1.4rem;
+  font-family: 'Oswald', sans-serif;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.tab:hover {
+  color: #888888;
+}
+
+.tabActive {
+  color: #ffffff;
+  border-bottom-color: #a30000;
+}
+
+/*
+  page btns
+*/
+.pageActionBtn {
+  background: transparent;
+  border: 1px solid #1e1e1e;
+  color: #3a3a3a;
+  padding: 0.6rem 1rem;
+  font-family: 'Oswald', sans-serif;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.pageActionBtn:hover {
+  color: #666666;
+  border-color: #2e2e2e;
+}
+
+/*
+  char picker
+*/
+.charGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+  gap: 0.75rem;
+  overflow-y: auto;
+  flex: 1;
+  align-content: start;
+  padding-right: 0.5rem;
+}
+
+.charCard {
+  background: #0d0d0d;
+  border: 1px solid #1a1a1a;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.75rem 0.5rem 0.6rem;
+  gap: 0.4rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+}
+
+.charCard:hover {
+  border-color: #333333;
+  background: #111111;
+}
+
+.charCardSelected {
+  border-color: #a30000;
+  background: #0d0000;
+}
+
+.charCardIcon {
+  width: 56px;
+  height: 56px;
+  object-fit: contain;
+}
+
+.charCardName {
+  font-size: 0.62rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  text-align: center;
+  color: #555555;
+  line-height: 1.3;
+}
+
+.charCardSelected .charCardName {
+  color: #c9c9c9;
+}
+
+.charCardFullyUnlocked {
+  border-color: #6b4c00;
+  background: #0d0900;
+}
+
+.charCardFullyUnlocked:hover {
+  border-color: #b37a00;
+  box-shadow: 0 0 18px rgba(160, 110, 0, 0.3);
+}
+
+.charCardFullyUnlocked .charCardName {
+  color: #9a7020;
+}
+
+/*
+  sel view
+*/
+.cosmeticsView {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.cosmeticsHeader {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  margin-bottom: 1.5rem;
+  flex-shrink: 0;
+}
+
+.backBtn {
+  background: transparent;
+  border: 1px solid #1a1a1a;
+  color: #555555;
+  padding: 0.5rem 1rem;
+  font-family: 'Oswald', sans-serif;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.backBtn:hover {
+  color: #ffffff;
+  border-color: #333333;
+}
+
+.cosmeticsCharName {
+  font-family: 'Oswald', sans-serif;
+  font-size: 1.25rem;
+  color: #ffffff;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.cosmeticsBody {
+  overflow-y: auto;
+  flex: 1;
+  padding-right: 0.5rem;
+}
+
+.categoryGroup {
+  margin-bottom: 2.5rem;
+}
+
+.categoryTitle {
+  font-family: 'Oswald', sans-serif;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: #444444;
+  border-bottom: 1px solid #1a1a1a;
+  padding-bottom: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+/*
+  grid
+*/
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 0.75rem;
+  overflow-y: auto;
+  flex: 1;
+  align-content: start;
+  padding-right: 0.5rem;
+}
+
+.gridInline {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 0.75rem;
+}