Ryan Westfall
9040021d1b
bounty board feature buyers to see bounty boards seller profile page (like have theme chooser) Have the game and set name be filters. Add cards to vault manually update card inventory add to have the autocomplete for the card - store analytics, clicks, views, link to store (url/QR code) bulk item inventory creation -- Make the banner feature flag driven so I can have a beta site setup like the primary site don't use primary key values in urls - update to use uuid4 values site analytics. tianji is being sent item potent on the mtg and lorcana populate scripts Card item images for specific listings check that when you buy a card it is in the vault Buys should be able to search on store inventories More pie charts for the seller! post bounty board is slow to load seller reviews/ratings - show a historgram - need a way for someone to rate Report a seller feature for buyer to report Make sure the stlying is consistent based on the theme choosen smart minimum order quantity and shipping amounts (defined by the store itself) put virtual packs behind a feature flag like bounty board proxy service feature flag Terms of Service new description for TCGKof store SSN, ITIN, and EIN optomize for SEO
383 lines
7.5 KiB
CSS
383 lines
7.5 KiB
CSS
:root {
|
|
--primary-color: #6366f1;
|
|
--secondary-color: #a855f7;
|
|
--bg-color: #0f172a;
|
|
--text-color: #f8fafc;
|
|
--card-bg: #1e293b;
|
|
--border-color: #334155;
|
|
--nav-height: 70px;
|
|
/* Semantic colors for theming */
|
|
--muted-text-color: #94a3b8;
|
|
--input-bg: #0f172a;
|
|
--success-color: #34d399;
|
|
--info-color: #60a5fa;
|
|
--danger-color: #ef4444;
|
|
--warning-color: #f59e0b;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--primary-color: #4f46e5;
|
|
--secondary-color: #9333ea;
|
|
--bg-color: #f8fafc;
|
|
--text-color: #0f172a;
|
|
--card-bg: #ffffff;
|
|
--border-color: #e2e8f0;
|
|
--muted-text-color: #64748b;
|
|
--input-bg: #ffffff;
|
|
--success-color: #059669;
|
|
--info-color: #2563eb;
|
|
--danger-color: #dc2626;
|
|
--warning-color: #d97706;
|
|
}
|
|
|
|
[data-theme="compact"] {
|
|
--primary-color: #2563eb;
|
|
--secondary-color: #475569;
|
|
--bg-color: #f1f5f9;
|
|
--text-color: #1e293b;
|
|
--card-bg: #ffffff;
|
|
--border-color: #cbd5e1;
|
|
--gap-size: 0.5rem;
|
|
--muted-text-color: #64748b;
|
|
--input-bg: #ffffff;
|
|
--success-color: #059669;
|
|
--info-color: #2563eb;
|
|
--danger-color: #dc2626;
|
|
--warning-color: #d97706;
|
|
}
|
|
|
|
[data-theme="expressive"] {
|
|
--primary-color: #ec4899;
|
|
--secondary-color: #f59e0b;
|
|
--bg-color: #2a0a2e;
|
|
/* Dark purple */
|
|
--text-color: #fdf2f8;
|
|
--card-bg: #4a1d4b;
|
|
--border-color: #831843;
|
|
--muted-text-color: #f9a8d4;
|
|
--input-bg: #3b0d40;
|
|
--success-color: #34d399;
|
|
--info-color: #a78bfa;
|
|
--danger-color: #fb7185;
|
|
--warning-color: #fbbf24;
|
|
font-family: 'Outfit', sans-serif;
|
|
}
|
|
|
|
[data-theme="technical"] {
|
|
--primary-color: #10b981;
|
|
/* Green */
|
|
--secondary-color: #0ea5e9;
|
|
/* Blue */
|
|
--bg-color: #000000;
|
|
--text-color: #d1d5db;
|
|
--card-bg: #111827;
|
|
--border-color: #374151;
|
|
--muted-text-color: #9ca3af;
|
|
--input-bg: #0a0a0a;
|
|
--success-color: #10b981;
|
|
--info-color: #0ea5e9;
|
|
--danger-color: #ef4444;
|
|
--warning-color: #f59e0b;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
/* Compact specific overrides */
|
|
[data-theme="compact"] .card-grid {
|
|
gap: 1rem;
|
|
}
|
|
|
|
[data-theme="compact"] .tcg-card-body {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
transition: background-color 0.3s, color 0.3s;
|
|
}
|
|
|
|
nav {
|
|
background-color: var(--card-bg);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 0 2rem;
|
|
height: var(--nav-height);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.nav-brand {
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
margin-left: 1.5rem;
|
|
font-weight: 500;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 2rem auto;
|
|
padding: 0 1rem;
|
|
min-height: 80vh;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 0.5rem 1rem;
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 0.375rem;
|
|
font-weight: 600;
|
|
transition: opacity 0.2s;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.card-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
|
|
.tcg-card {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0.5rem;
|
|
overflow: hidden;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.tcg-card:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.tcg-card img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.tcg-card-body {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.messages {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.messages li {
|
|
padding: 1rem;
|
|
border-radius: 0.375rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.messages .success {
|
|
background-color: #064e3b;
|
|
color: #a7f3d0;
|
|
}
|
|
|
|
.messages .error {
|
|
background-color: #7f1d1d;
|
|
color: #fecaca;
|
|
}
|
|
|
|
[data-theme="light"] .messages .success {
|
|
background-color: #d1fae5;
|
|
color: #065f46;
|
|
}
|
|
|
|
[data-theme="light"] .messages .error {
|
|
background-color: #fce7f3;
|
|
color: #9d174d;
|
|
}
|
|
|
|
/* Auth Modal Styles */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.3s, visibility 0.3s;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.modal-overlay.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.auth-modal {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 0.75rem;
|
|
padding: 2rem;
|
|
max-width: 400px;
|
|
width: 90%;
|
|
text-align: center;
|
|
transform: translateY(20px);
|
|
transition: transform 0.3s;
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.modal-overlay.active .auth-modal {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.auth-modal h2 {
|
|
margin-top: 0;
|
|
color: var(--primary-color);
|
|
font-size: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.auth-modal p {
|
|
margin-bottom: 2rem;
|
|
color: var(--text-color);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.auth-modal-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn-outline {
|
|
background-color: transparent;
|
|
border: 1px solid var(--primary-color);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background-color: rgba(99, 102, 241, 0.1);
|
|
}
|
|
|
|
.close-modal {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-color);
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
opacity: 0.5;
|
|
padding: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.close-modal:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Mobile Menu Button */
|
|
.mobile-menu-btn {
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.mobile-menu-btn .bar {
|
|
display: block;
|
|
width: 25px;
|
|
height: 3px;
|
|
margin: 5px auto;
|
|
-webkit-transition: all 0.3s ease-in-out;
|
|
transition: all 0.3s ease-in-out;
|
|
background-color: var(--text-color);
|
|
}
|
|
|
|
/* Media Queries */
|
|
@media (max-width: 768px) {
|
|
|
|
/* Navigation */
|
|
.mobile-menu-btn {
|
|
display: block;
|
|
}
|
|
|
|
.nav-links {
|
|
position: fixed;
|
|
left: -100%;
|
|
top: var(--nav-height);
|
|
gap: 0;
|
|
flex-direction: column;
|
|
background-color: var(--card-bg);
|
|
width: 100%;
|
|
text-align: center;
|
|
transition: 0.3s;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.nav-links.active {
|
|
left: 0;
|
|
}
|
|
|
|
.nav-links a {
|
|
margin: 1rem 0;
|
|
display: block;
|
|
}
|
|
|
|
/* Card Layout - Move filters to top */
|
|
.browse-container {
|
|
grid-template-columns: 1fr !important;
|
|
/* Force single column */
|
|
}
|
|
|
|
.browse-sidebar {
|
|
width: 100% !important;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.browse-sidebar form {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.browse-sidebar button {
|
|
grid-column: span 2;
|
|
}
|
|
} |