/* * 🦝 Bandit Bay Design System v1.0 * Unified component library for all Bandit Bay apps * * USAGE: * * Add theme class to : theme-bay, theme-green, theme-coral, theme-gold, theme-berry * * RULE: Every new component MUST be added here first, then used in apps. */ @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600;700&family=Pacifico&display=swap'); /* ========== RESET ========== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ========== THEMES ========== */ :root { /* Shared tokens */ --font-body: 'Comfortaa', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Pacifico', cursive; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --shadow-sm: 0 1px 4px rgba(0,0,0,0.04), 0 2px 10px rgba(0,0,0,0.03); --shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04); --glass-bg: rgba(255,254,251,0.75); --glass-bg-light: rgba(255,254,251,0.5); --glass-blur: blur(8px); --glass-blur-heavy: blur(10px); --green: #5a9a6a; --red: #c05050; } /* Bandit Bay (turquoise → sand) */ .theme-bay { --gradient: linear-gradient(180deg, #c5e8e0 0%, #e0d8c8 30%, #f5ede4 100%); --primary: #4a9a8a; --primary-light: rgba(74,154,138,0.12); --primary-border: rgba(74,154,138,0.2); --text: #2a3830; --text-mid: #5a6e62; --text-light: #8a9e92; --accent-bg: rgba(74,154,138,0.08); } /* GreenPaw (green → sand) */ .theme-green { --gradient: linear-gradient(180deg, #c5e0c5 0%, #d8e0c8 30%, #f5f0e4 100%); --primary: #4a8a50; --primary-light: rgba(74,138,80,0.12); --primary-border: rgba(74,138,80,0.2); --text: #2a3828; --text-mid: #5a6e52; --text-light: #8a9e80; --accent-bg: rgba(74,138,80,0.08); } /* PawPlanner (coral → sand) */ .theme-coral { --gradient: linear-gradient(180deg, #e8c5c0 0%, #e0d0c8 30%, #f5ede4 100%); --primary: #c07060; --primary-light: rgba(192,112,96,0.12); --primary-border: rgba(192,112,96,0.2); --text: #3a2828; --text-mid: #6e5a52; --text-light: #9e8a80; --accent-bg: rgba(192,112,96,0.08); } /* CoinBandit (gold → sand) */ .theme-gold { --gradient: linear-gradient(180deg, #f5ecd0 0%, #f0e4d0 30%, #fdfaf5 100%); --primary: #c9a84c; --primary-light: rgba(201,168,76,0.12); --primary-border: rgba(201,168,76,0.2); --text: #3a3028; --text-mid: #6b5f52; --text-light: #9a8e80; --accent-bg: rgba(201,168,76,0.08); } /* SnackBandit (berry → cream) */ .theme-berry { --gradient: linear-gradient(180deg, #e8d0e0 0%, #f0ddd5 30%, #fdf8f4 100%); --primary: #9b5a80; --primary-light: rgba(155,90,128,0.12); --primary-border: rgba(155,90,128,0.2); --text: #3a2830; --text-mid: #6e5a62; --text-light: #7a6570; --accent-bg: rgba(155,90,128,0.08); } /* Routinen (lavender → cream) */ .theme-lavender { --gradient: linear-gradient(180deg, #d8d0e8 0%, #e0d8e8 30%, #f8f5fc 100%); --primary: #7a6aa0; --primary-light: rgba(122,106,160,0.12); --primary-border: rgba(122,106,160,0.2); --text: #2a2838; --text-mid: #5a5670; --text-light: #8a85a0; --accent-bg: rgba(122,106,160,0.08); } /* PowerPaws (deep rose → warm cream) */ .theme-power { --gradient: linear-gradient(180deg, #e0c8d0 0%, #e8d8d0 30%, #faf5f0 100%); --primary: #a05070; --primary-light: rgba(160,80,112,0.12); --primary-border: rgba(160,80,112,0.2); --text: #382028; --text-mid: #6e4a58; --text-light: #9a7888; --accent-bg: rgba(160,80,112,0.08); } /* CleanPaws (mint → fresh white) */ .theme-mint { --gradient: linear-gradient(180deg, #c0e8d8 0%, #d8ece0 30%, #f5faf8 100%); --primary: #3a9a7a; --primary-light: rgba(58,154,122,0.12); --primary-border: rgba(58,154,122,0.2); --text: #1a3828; --text-mid: #4a6e58; --text-light: #7a9e88; --accent-bg: rgba(58,154,122,0.08); } /* People Profiles (ocean blue → mist) */ .theme-ocean { --gradient: linear-gradient(180deg, #c0d8e8 0%, #d0dce8 30%, #f0f4f8 100%); --primary: #3a7ca5; --primary-light: rgba(58,124,165,0.12); --primary-border: rgba(58,124,165,0.2); --text: #1a2a38; --text-mid: #4a6070; --text-light: #7a90a0; --accent-bg: rgba(58,124,165,0.08); } /* ========== BASE ========== */ body { font-family: var(--font-body); background: var(--gradient); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; } /* ========== LAYOUT ========== */ .bb-container { max-width: 700px; margin: 0 auto; padding: 0 1rem 3rem; } /* ========== HEADER ========== */ .bb-header { display: flex; align-items: center; padding: 1rem 1.2rem; background: rgba(255,254,251,0.7); backdrop-filter: var(--glass-blur-heavy); border-bottom: 1px solid var(--primary-border); position: sticky; top: 0; z-index: 10; } .bb-header a { color: var(--text-light); text-decoration: none; font-size: 0.85rem; font-weight: 600; } .bb-header .bb-title { flex: 1; text-align: center; font-size: 1rem; font-weight: 700; } /* ========== HERO ========== */ .bb-hero { text-align: center; padding: 1.5rem 1rem 0.5rem; } .bb-hero .icon { font-size: 2.5rem; } .bb-hero h1 { font-size: 1.5rem; font-weight: 700; } .bb-hero p { color: var(--text-light); font-size: 0.8rem; margin-top: 0.1rem; } /* ========== CARDS ========== */ .bb-card { background: var(--glass-bg); backdrop-filter: var(--glass-blur); border: 1px solid rgba(0,0,0,0.04); border-radius: var(--radius-lg); padding: 1.2rem; margin-bottom: 0.8rem; box-shadow: var(--shadow-sm); } .bb-card-title { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-light); margin-bottom: 0.8rem; } /* ========== TABS ========== */ .bb-tabs { display: flex; gap: 0.3rem; margin-bottom: 1rem; } .bb-tab { flex: 1; padding: 0.6rem; text-align: center; border-radius: var(--radius-md); border: 1px solid var(--primary-border); background: var(--glass-bg-light); color: var(--text-mid); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.15s; } .bb-tab:hover { background: var(--accent-bg); } .bb-tab.active { background: var(--primary-light); color: var(--primary); border-color: var(--primary-border); } /* ========== BUTTONS ========== */ .bb-btn { padding: 0.5rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--primary-border); background: var(--primary-light); color: var(--primary); font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.15s; } .bb-btn:hover { background: var(--primary-border); } .bb-btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); } .bb-btn.primary:hover { opacity: 0.9; } .bb-btn.danger { background: rgba(192,80,80,0.1); color: var(--red); border-color: rgba(192,80,80,0.2); } .bb-btn.small { padding: 0.3rem 0.6rem; font-size: 0.7rem; } /* ========== INPUTS ========== */ .bb-input, .bb-select { padding: 0.5rem 0.65rem; border-radius: var(--radius-md); border: 1px solid var(--primary-border); background: rgba(255,254,251,0.7); color: var(--text); font-size: 0.8rem; font-family: var(--font-body); transition: border-color 0.15s; } .bb-input:focus, .bb-select:focus { outline: none; border-color: var(--primary); } .bb-label { font-size: 0.6rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 0.15rem; } /* ========== FORM ROW ========== */ .bb-form-row { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: end; } .bb-field { display: flex; flex-direction: column; gap: 0.15rem; } /* ========== LIST ITEMS ========== */ .bb-list-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; margin-bottom: 0.3rem; border-radius: var(--radius-md); background: var(--glass-bg); border: 1px solid rgba(0,0,0,0.04); font-size: 0.8rem; position: relative; } .bb-list-item:hover .bb-item-delete { opacity: 1; } .bb-item-delete { opacity: 0; background: none; border: none; cursor: pointer; font-size: 0.7rem; color: var(--text-light); padding: 0.2rem; border-radius: 4px; transition: all 0.15s; } .bb-item-delete:hover { color: var(--red); background: rgba(0,0,0,0.04); } /* ========== BAR CHARTS ========== */ .bb-bar-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; font-size: 0.78rem; } .bb-bar-label { width: 110px; min-width: 110px; max-width: 110px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bb-bar-track { flex: 1; height: 20px; background: rgba(0,0,0,0.04); border-radius: 6px; overflow: hidden; } .bb-bar-fill { height: 100%; border-radius: 6px; transition: width 0.4s; } .bb-bar-fill.expense { background: linear-gradient(90deg, var(--red), #e07060); } .bb-bar-fill.income { background: linear-gradient(90deg, var(--green), #6ab47a); } .bb-bar-fill.primary { background: linear-gradient(90deg, var(--primary), var(--primary)); } .bb-bar-val { min-width: 70px; text-align: right; font-weight: 700; font-size: 0.78rem; } /* ========== BALANCE CARD ========== */ .bb-balance { text-align: center; } .bb-balance-amount { font-size: 2rem; font-weight: 700; } .bb-balance-amount.positive { color: var(--green); } .bb-balance-amount.negative { color: var(--red); } .bb-balance-label { font-size: 0.7rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-top: 0.2rem; } .bb-balance-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1rem; } .bb-balance-sub { padding: 0.7rem; border-radius: var(--radius-md); text-align: center; } .bb-balance-sub.income { background: rgba(90,154,106,0.08); border: 1px solid rgba(90,154,106,0.2); } .bb-balance-sub.expense { background: rgba(192,80,80,0.08); border: 1px solid rgba(192,80,80,0.2); } /* ========== MONTH NAV ========== */ .bb-month-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0; } .bb-month-nav button { background: var(--primary-light); border: 1px solid var(--primary-border); border-radius: var(--radius-md); padding: 0.5rem 0.8rem; cursor: pointer; font-size: 1rem; color: var(--text); font-family: var(--font-body); } .bb-month-label { font-size: 1.2rem; font-weight: 700; min-width: 160px; text-align: center; } /* ========== EMPTY STATE ========== */ .bb-empty { text-align: center; padding: 2rem; color: var(--text-light); font-size: 0.85rem; } /* ========== FOOTER ========== */ .bb-footer { text-align: center; padding: 1.5rem; color: var(--text-light); font-size: 0.72rem; } .bb-footer a { color: var(--primary); text-decoration: none; } /* ========== UTILITIES ========== */ .text-green { color: var(--green); } .text-red { color: var(--red); } .text-primary { color: var(--primary); } .text-light { color: var(--text-light); } .fw-700 { font-weight: 700; } .fs-sm { font-size: 0.75rem; } .fs-xs { font-size: 0.65rem; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .gap-1 { gap: 0.5rem; } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .w-full { width: 100%; } /* ========== RESPONSIVE ========== */ @media (max-width: 600px) { .bb-form-row { flex-direction: column; } .bb-field { width: 100%; } .bb-field .bb-input, .bb-field .bb-select, .bb-btn.w-full-mobile { width: 100%; } }