Spaces:
Paused
Paused
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap'); | |
| :root { | |
| /* Telegram Theme Variable Fallbacks (Light Theme Defaults) */ | |
| --tg-bg: var(--tg-theme-bg-color, #ffffff); | |
| --tg-secondary-bg: var(--tg-theme-secondary-bg-color, #f4f4f7); | |
| --tg-text: var(--tg-theme-text-color, #222222); | |
| --tg-hint: var(--tg-theme-hint-color, #8e8e93); | |
| --tg-link: var(--tg-theme-link-color, #2481cc); | |
| --tg-primary: var(--tg-theme-button-color, #2481cc); | |
| --tg-primary-text: var(--tg-theme-button-text-color, #ffffff); | |
| --tg-destructive: var(--tg-theme-destructive-text-color, #ff3b30); | |
| /* Additional Curated Design Variables */ | |
| --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| --font-heading: 'Outfit', var(--font-sans); | |
| --success: #34c759; | |
| --warning: #ff9500; | |
| --border-radius-lg: 20px; | |
| --border-radius-md: 14px; | |
| --border-radius-sm: 10px; | |
| --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.03); | |
| --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.06); | |
| --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| --border-color: rgba(0, 0, 0, 0.06); | |
| --glass-bg: rgba(255, 255, 255, 0.85); | |
| --accent: var(--tg-primary); | |
| --accent-shadow: rgba(36, 129, 204, 0.25); | |
| --accent-bg: rgba(36, 129, 204, 0.05); | |
| } | |
| /* Dark theme overrides for standard browsers */ | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --tg-bg: var(--tg-theme-bg-color, #1c1c1e); | |
| --tg-secondary-bg: var(--tg-theme-secondary-bg-color, #0f0f10); | |
| --tg-text: var(--tg-theme-text-color, #f2f2f7); | |
| --tg-hint: var(--tg-theme-hint-color, #98989f); | |
| --tg-link: var(--tg-theme-link-color, #2f94e9); | |
| --tg-primary: var(--tg-theme-button-color, #2f94e9); | |
| --tg-primary-text: var(--tg-theme-button-text-color, #ffffff); | |
| --tg-destructive: var(--tg-theme-destructive-text-color, #ff453a); | |
| --border-color: rgba(255, 255, 255, 0.08); | |
| --glass-bg: rgba(28, 28, 30, 0.88); | |
| --accent: var(--tg-primary); | |
| --accent-shadow: rgba(47, 148, 233, 0.25); | |
| --accent-bg: rgba(47, 148, 233, 0.05); | |
| } | |
| } | |
| /* Space Type Themes overrides */ | |
| [data-space-type="couple"] { | |
| --accent: #ff4d8d; | |
| --accent-shadow: rgba(255, 77, 141, 0.25); | |
| --accent-bg: rgba(255, 77, 141, 0.05); | |
| } | |
| [data-space-type="family"] { | |
| --accent: #34c759; | |
| --accent-shadow: rgba(52, 199, 89, 0.25); | |
| --accent-bg: rgba(52, 199, 89, 0.05); | |
| } | |
| [data-space-type="friends"] { | |
| --accent: #ff9500; | |
| --accent-shadow: rgba(255, 149, 0, 0.25); | |
| --accent-bg: rgba(255, 149, 0, 0.05); | |
| } | |
| [data-space-type="flat"] { | |
| --accent: #2481cc; | |
| --accent-shadow: rgba(36, 129, 204, 0.25); | |
| --accent-bg: rgba(36, 129, 204, 0.05); | |
| } | |
| /* Base Reset */ | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| body { | |
| font-family: var(--font-sans); | |
| font-size: 15px; | |
| line-height: 1.5; | |
| color: var(--tg-text); | |
| background-color: var(--tg-secondary-bg); | |
| overflow-x: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| #root { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* App Containers */ | |
| .app-layout { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| width: 100%; | |
| } | |
| .mobile-container { | |
| width: 100%; | |
| max-width: 540px; | |
| margin: 0 auto; | |
| min-height: 100vh; | |
| background-color: var(--tg-bg); | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| box-shadow: var(--shadow-md); | |
| border-left: 1px solid var(--border-color); | |
| border-right: 1px solid var(--border-color); | |
| padding-bottom: 84px; /* Space for bottom tab nav */ | |
| } | |
| @media (max-width: 540px) { | |
| .mobile-container { | |
| border-left: none; | |
| border-right: none; | |
| box-shadow: none; | |
| } | |
| } | |
| /* Initials Avatar Gradients */ | |
| .initials-avatar { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #ffffff ; | |
| font-weight: 700; | |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); | |
| font-family: var(--font-heading); | |
| border-radius: 50%; | |
| user-select: none; | |
| } | |
| .avatar { | |
| width: 46px; | |
| height: 46px; | |
| font-size: 18px; | |
| flex-shrink: 0; | |
| } | |
| .avatar-mini { | |
| width: 32px; | |
| height: 32px; | |
| font-size: 13px; | |
| flex-shrink: 0; | |
| } | |
| .avatar-micro { | |
| width: 18px; | |
| height: 18px; | |
| font-size: 8px; | |
| font-weight: 800; | |
| text-shadow: none; | |
| flex-shrink: 0; | |
| } | |
| /* Avatar Gradient Colors */ | |
| .avatar-color-0 { background: linear-gradient(135deg, #ff5e62, #ff9966); } | |
| .avatar-color-1 { background: linear-gradient(135deg, #3a7bd5, #3a6073); } | |
| .avatar-color-2 { background: linear-gradient(135deg, #11998e, #38ef7d); } | |
| .avatar-color-3 { background: linear-gradient(135deg, #fc466b, #3f5efb); } | |
| .avatar-color-4 { background: linear-gradient(135deg, #f12711, #f5af19); } | |
| .avatar-color-5 { background: linear-gradient(135deg, #56ccf2, #2f80ed); } | |
| /* Facepile Overlapping */ | |
| .facepile { | |
| display: inline-flex; | |
| align-items: center; | |
| margin-left: 6px; | |
| vertical-align: middle; | |
| } | |
| .facepile-avatar { | |
| width: 24px; | |
| height: 24px; | |
| border: 2px solid var(--tg-bg); | |
| margin-left: -8px; | |
| font-size: 10px; | |
| transition: var(--transition-smooth); | |
| } | |
| .facepile-avatar:first-child { | |
| margin-left: 0; | |
| } | |
| .facepile-avatar:hover { | |
| transform: translateY(-2px); | |
| z-index: 10; | |
| } | |
| /* Loading & Error Screens */ | |
| .loading-container, | |
| .error-container { | |
| justify-content: center; | |
| align-items: center; | |
| padding: 32px 24px; | |
| text-align: center; | |
| flex: 1; | |
| } | |
| .spinner { | |
| width: 40px; | |
| height: 40px; | |
| border: 3.5px solid var(--accent-bg); | |
| border-top: 3.5px solid var(--accent); | |
| border-radius: 50%; | |
| animation: spin 0.8s cubic-bezier(0.6, 0.2, 0.1, 1) infinite; | |
| margin-bottom: 20px; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .error-emoji, | |
| .logo-emoji { | |
| font-size: 64px; | |
| margin-bottom: 16px; | |
| } | |
| /* Typography Helper */ | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: var(--font-heading); | |
| color: var(--tg-text); | |
| font-weight: 600; | |
| } | |
| .text-secondary { | |
| color: var(--tg-hint); | |
| font-size: 13px; | |
| } | |
| .font-mono { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; | |
| } | |
| /* Buttons and Links */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-family: var(--font-sans); | |
| font-size: 15px; | |
| font-weight: 600; | |
| padding: 13px 20px; | |
| border-radius: var(--border-radius-md); | |
| border: none; | |
| cursor: pointer; | |
| transition: var(--transition-smooth); | |
| width: 100%; | |
| } | |
| .btn-primary { | |
| background-color: var(--accent); | |
| color: var(--tg-primary-text); | |
| } | |
| .btn-primary:hover:not(:disabled) { | |
| opacity: 0.94; | |
| } | |
| .btn-primary:active:not(:disabled) { | |
| transform: scale(0.97); | |
| } | |
| .btn-primary:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .btn-sm { | |
| padding: 9px 16px; | |
| font-size: 13px; | |
| border-radius: var(--border-radius-sm); | |
| width: auto; | |
| } | |
| .btn-link { | |
| background: none; | |
| border: none; | |
| color: var(--tg-link); | |
| font-weight: 600; | |
| cursor: pointer; | |
| text-decoration: none; | |
| font-size: 14px; | |
| transition: var(--transition-smooth); | |
| } | |
| .btn-link:hover { | |
| opacity: 0.8; | |
| } | |
| .btn-link:active { | |
| transform: scale(0.98); | |
| } | |
| .btn-icon-only { | |
| background: rgba(0, 0, 0, 0.04); | |
| border: none; | |
| padding: 6px 12px; | |
| border-radius: var(--border-radius-sm); | |
| color: var(--tg-text); | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition-smooth); | |
| } | |
| .btn-icon-only:active { | |
| transform: scale(0.95); | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| .btn-icon-only { | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| } | |
| /* Cards & Sections */ | |
| .card { | |
| background-color: var(--tg-bg); | |
| border-radius: var(--border-radius-lg); | |
| padding: 20px; | |
| margin: 12px; | |
| box-shadow: var(--shadow-sm); | |
| border: 1px solid var(--border-color); | |
| } | |
| /* Forms styling */ | |
| .tab-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| margin-top: 12px; | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| text-align: left; | |
| } | |
| .form-group label { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--tg-text); | |
| opacity: 0.8; | |
| padding-left: 2px; | |
| } | |
| .form-row { | |
| display: flex; | |
| gap: 12px; | |
| width: 100%; | |
| } | |
| .flex-1 { | |
| flex: 1; | |
| } | |
| input[type="text"], | |
| input[type="email"], | |
| input[type="password"], | |
| input[type="number"], | |
| input[type="date"], | |
| input[type="datetime-local"], | |
| select, | |
| textarea { | |
| font-family: var(--font-sans); | |
| font-size: 15px; | |
| padding: 12px; | |
| border-radius: var(--border-radius-md); | |
| border: 1px solid var(--border-color); | |
| background-color: var(--tg-bg); | |
| color: var(--tg-text); | |
| width: 100%; | |
| transition: var(--transition-smooth); | |
| outline: none; | |
| } | |
| input:focus, | |
| select:focus, | |
| textarea:focus { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px var(--accent-shadow); | |
| } | |
| textarea { | |
| resize: vertical; | |
| } | |
| .inline-form { | |
| flex-direction: row; | |
| gap: 8px; | |
| } | |
| .inline-form input { | |
| flex: 1; | |
| } | |
| .inline-form button { | |
| width: auto; | |
| white-space: nowrap; | |
| } | |
| /* Errors & Success */ | |
| .error-message { | |
| background-color: rgba(255, 59, 48, 0.06); | |
| border: 1px solid rgba(255, 59, 48, 0.15); | |
| color: var(--tg-destructive); | |
| padding: 12px; | |
| border-radius: var(--border-radius-md); | |
| font-size: 13px; | |
| text-align: left; | |
| font-weight: 500; | |
| } | |
| .success-message { | |
| background-color: rgba(52, 199, 89, 0.06); | |
| border: 1px solid rgba(52, 199, 89, 0.15); | |
| color: var(--success); | |
| padding: 12px; | |
| border-radius: var(--border-radius-md); | |
| font-size: 13px; | |
| text-align: left; | |
| font-weight: 500; | |
| } | |
| /* Micro-animations */ | |
| .animate-pop { | |
| animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; | |
| } | |
| @keyframes popIn { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.96) translateY(4px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1) translateY(0); | |
| } | |
| } | |
| .animate-fade { | |
| animation: fadeIn 0.2s ease-out forwards; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| /* E.1 AUTH PAGE */ | |
| .auth-page { | |
| justify-content: center; | |
| align-items: center; | |
| padding: 24px; | |
| } | |
| .auth-card { | |
| width: 90%; | |
| max-width: 400px; | |
| text-align: center; | |
| padding: 36px 24px; | |
| } | |
| .logo-section { | |
| margin-bottom: 28px; | |
| } | |
| .logo-section h2 { | |
| font-size: 28px; | |
| margin-bottom: 8px; | |
| } | |
| .auth-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .auth-toggle { | |
| margin-top: 24px; | |
| } | |
| /* E.2 SPACES PAGE */ | |
| .spaces-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 16px 20px; | |
| border-bottom: 1px solid var(--border-color); | |
| background-color: var(--tg-bg); | |
| } | |
| .user-profile { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .avatar-mini.initials-avatar { | |
| border-radius: 50%; | |
| } | |
| .user-info { | |
| text-align: left; | |
| } | |
| .user-info h4 { | |
| font-size: 15px; | |
| font-weight: 600; | |
| } | |
| .spaces-content { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .spaces-grid { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| margin-top: 12px; | |
| } | |
| .space-btn { | |
| display: flex; | |
| align-items: center; | |
| padding: 16px; | |
| border-radius: var(--border-radius-md); | |
| border: 1px solid var(--border-color); | |
| background-color: var(--tg-bg); | |
| cursor: pointer; | |
| transition: var(--transition-smooth); | |
| text-align: left; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .space-btn:hover { | |
| background-color: var(--tg-secondary-bg); | |
| border-color: var(--tg-primary); | |
| } | |
| .space-btn:active { | |
| transform: scale(0.98); | |
| } | |
| .space-emoji { | |
| font-size: 24px; | |
| margin-right: 14px; | |
| } | |
| .space-info { | |
| display: flex; | |
| flex-direction: column; | |
| flex: 1; | |
| } | |
| .space-name { | |
| font-weight: 600; | |
| font-size: 16px; | |
| color: var(--tg-text); | |
| } | |
| .space-type { | |
| font-size: 12px; | |
| color: var(--tg-hint); | |
| margin-top: 1px; | |
| } | |
| .space-arrow { | |
| font-size: 14px; | |
| color: var(--tg-hint); | |
| opacity: 0.6; | |
| } | |
| .space-btn:hover .space-arrow { | |
| color: var(--tg-primary); | |
| opacity: 1; | |
| } | |
| /* Type Grid chooser for spaces */ | |
| .type-selector { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 10px; | |
| width: 100%; | |
| } | |
| .type-option { | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-md); | |
| padding: 14px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 6px; | |
| cursor: pointer; | |
| transition: var(--transition-smooth); | |
| position: relative; | |
| box-shadow: var(--shadow-sm); | |
| background-color: var(--tg-bg); | |
| } | |
| .type-option input { | |
| position: absolute; | |
| opacity: 0; | |
| } | |
| .type-option:hover { | |
| border-color: var(--tg-primary); | |
| } | |
| .type-option.selected { | |
| border-color: var(--tg-primary); | |
| background-color: rgba(var(--tg-primary), 0.05); | |
| box-shadow: 0 0 0 1px var(--tg-primary); | |
| } | |
| .type-option:active { | |
| transform: scale(0.96); | |
| } | |
| .type-emoji { | |
| font-size: 22px; | |
| } | |
| .type-label { | |
| font-size: 13px; | |
| font-weight: 600; | |
| } | |
| /* E.3 DASHBOARD SHELL */ | |
| .dashboard-header { | |
| padding: 16px 20px; | |
| margin: 12px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .header-top-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .btn-back { | |
| background: none; | |
| border: none; | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--accent); | |
| cursor: pointer; | |
| padding: 4px; | |
| } | |
| .space-title-container { | |
| text-align: left; | |
| flex: 1; | |
| } | |
| .space-name-title { | |
| font-size: 20px; | |
| font-weight: 700; | |
| } | |
| .online-presence { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| margin-top: 2px; | |
| } | |
| .pulse-indicator { | |
| width: 7px; | |
| height: 7px; | |
| background-color: var(--success); | |
| border-radius: 50%; | |
| box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6); | |
| animation: pulse 1.6s infinite; | |
| display: inline-block; | |
| flex-shrink: 0; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(0.95); | |
| box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6); | |
| } | |
| 70% { | |
| transform: scale(1); | |
| box-shadow: 0 0 0 5px rgba(52, 199, 89, 0); | |
| } | |
| 100% { | |
| transform: scale(0.95); | |
| box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); | |
| } | |
| } | |
| .presence-text { | |
| font-size: 12px; | |
| vertical-align: middle; | |
| } | |
| .header-id-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background-color: var(--tg-secondary-bg); | |
| padding: 8px 12px; | |
| border-radius: var(--border-radius-sm); | |
| font-size: 12px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .btn-copy { | |
| background: none; | |
| border: none; | |
| color: var(--accent); | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .dashboard-content { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* Bottom Tab Navigation */ | |
| .tab-navigation { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 74px; | |
| background-color: var(--glass-bg); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-top: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: space-around; | |
| align-items: center; | |
| z-index: 100; | |
| padding-bottom: 8px; | |
| box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.02); | |
| } | |
| .nav-tab-btn { | |
| background: none; | |
| border: none; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 4px; | |
| cursor: pointer; | |
| color: var(--tg-hint); | |
| transition: var(--transition-smooth); | |
| flex: 1; | |
| padding: 8px 0; | |
| position: relative; | |
| } | |
| .tab-icon { | |
| font-size: 20px; | |
| transition: var(--transition-smooth); | |
| } | |
| .tab-label { | |
| font-size: 11px; | |
| font-weight: 500; | |
| } | |
| .nav-tab-btn.active { | |
| color: var(--accent); | |
| } | |
| .nav-tab-btn.active .tab-icon { | |
| transform: translateY(-2px); | |
| filter: drop-shadow(0 2px 6px var(--accent-shadow)); | |
| } | |
| .nav-tab-btn.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0px; | |
| width: 18px; | |
| height: 3px; | |
| background-color: var(--accent); | |
| border-radius: 2px; | |
| } | |
| .nav-tab-btn:active { | |
| transform: scale(0.95); | |
| } | |
| /* E.4 FINANCE MODULE */ | |
| .balance-card h3 { | |
| margin-bottom: 12px; | |
| } | |
| .no-debts { | |
| background-color: rgba(52, 199, 89, 0.05); | |
| border: 1px dashed rgba(52, 199, 89, 0.2); | |
| padding: 16px; | |
| border-radius: var(--border-radius-md); | |
| color: var(--success); | |
| font-weight: 500; | |
| text-align: center; | |
| } | |
| .debts-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| margin-bottom: 16px; | |
| } | |
| .debt-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 12px 16px; | |
| background-color: rgba(255, 149, 0, 0.05); | |
| border: 1px solid rgba(255, 149, 0, 0.1); | |
| border-radius: var(--border-radius-md); | |
| } | |
| .debt-text { | |
| font-size: 14px; | |
| } | |
| .debt-amount { | |
| font-weight: 700; | |
| color: var(--warning); | |
| } | |
| .member-net-balances { | |
| border-top: 1px solid var(--border-color); | |
| padding-top: 14px; | |
| margin-top: 14px; | |
| } | |
| .member-net-balances h4 { | |
| font-size: 13px; | |
| color: var(--tg-hint); | |
| margin-bottom: 10px; | |
| text-align: left; | |
| } | |
| .net-balance-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 10px 12px; | |
| border-radius: var(--border-radius-md); | |
| background-color: var(--tg-secondary-bg); | |
| margin-bottom: 8px; | |
| border: 1px solid var(--border-color); | |
| } | |
| .net-balance-item:last-child { | |
| margin-bottom: 0; | |
| } | |
| .balance-member-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .net-balance-value { | |
| font-weight: 700; | |
| } | |
| .net-balance-value.positive { | |
| color: var(--success); | |
| } | |
| .net-balance-value.negative { | |
| color: var(--tg-destructive); | |
| } | |
| .net-balance-value.neutral { | |
| color: var(--tg-hint); | |
| } | |
| .split-checkboxes { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-top: 6px; | |
| } | |
| /* Custom Checkbox Design */ | |
| .checkbox-label { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| cursor: pointer; | |
| user-select: none; | |
| } | |
| .checkbox-label input { | |
| position: absolute; | |
| opacity: 0; | |
| } | |
| .checkbox-custom { | |
| width: 22px; | |
| height: 22px; | |
| border: 2px solid var(--tg-hint); | |
| border-radius: 50%; /* Circle checkbox */ | |
| display: inline-block; | |
| position: relative; | |
| transition: var(--transition-smooth); | |
| background-color: var(--tg-bg); | |
| flex-shrink: 0; | |
| } | |
| .checkbox-label input:checked ~ .checkbox-custom { | |
| border-color: var(--success); | |
| background-color: var(--success); | |
| } | |
| .checkbox-custom::after { | |
| content: ''; | |
| position: absolute; | |
| display: none; | |
| left: 7px; | |
| top: 3px; | |
| width: 4px; | |
| height: 9px; | |
| border: solid var(--tg-primary-text); | |
| border-width: 0 2px 2px 0; | |
| transform: rotate(45deg); | |
| } | |
| .checkbox-label input:checked ~ .checkbox-custom::after { | |
| display: block; | |
| } | |
| .checkbox-text { | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .transactions-list, | |
| .tasks-list, | |
| .events-list, | |
| .posts-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| margin-top: 12px; | |
| } | |
| .transaction-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 12px 14px; | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-md); | |
| box-shadow: var(--shadow-sm); | |
| background-color: var(--tg-bg); | |
| } | |
| .tx-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| flex: 1; | |
| } | |
| .tx-details { | |
| display: flex; | |
| flex-direction: column; | |
| text-align: left; | |
| } | |
| .tx-title { | |
| font-weight: 600; | |
| font-size: 15px; | |
| } | |
| .tx-meta { | |
| font-size: 12px; | |
| color: var(--tg-hint); | |
| margin-top: 1px; | |
| } | |
| .tx-date { | |
| font-size: 11px; | |
| color: var(--tg-hint); | |
| opacity: 0.7; | |
| } | |
| .tx-amount { | |
| font-weight: 700; | |
| font-size: 16px; | |
| white-space: nowrap; | |
| } | |
| /* E.5 TASKS MODULE */ | |
| .task-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 14px 16px; | |
| background-color: var(--tg-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-md); | |
| transition: var(--transition-smooth); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .task-item:hover { | |
| border-color: var(--accent); | |
| } | |
| .task-item.completed { | |
| opacity: 0.55; | |
| background-color: var(--tg-secondary-bg); | |
| } | |
| .task-item.completed .task-title { | |
| text-decoration: line-through; | |
| color: var(--tg-hint); | |
| } | |
| .task-text-container { | |
| display: flex; | |
| flex-direction: column; | |
| text-align: left; | |
| } | |
| .task-title { | |
| font-weight: 600; | |
| font-size: 15px; | |
| color: var(--tg-text); | |
| } | |
| .task-meta { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-top: 4px; | |
| } | |
| .task-assignee-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| background-color: var(--tg-secondary-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| padding: 1px 8px; | |
| font-size: 11px; | |
| font-weight: 500; | |
| color: var(--tg-text); | |
| } | |
| .task-due { | |
| font-size: 11px; | |
| font-weight: 500; | |
| color: var(--tg-hint); | |
| background-color: var(--tg-secondary-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| padding: 1px 8px; | |
| } | |
| .task-due.overdue { | |
| color: var(--tg-destructive); | |
| border-color: rgba(255, 59, 48, 0.15); | |
| background-color: rgba(255, 59, 48, 0.04); | |
| font-weight: 600; | |
| } | |
| .completed-tasks-card { | |
| margin-top: 0px; | |
| } | |
| /* E.6 FEED MODULE */ | |
| .feed-tab textarea { | |
| min-height: 80px; | |
| } | |
| .form-actions { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-top: 8px; | |
| } | |
| .char-counter { | |
| font-size: 12px; | |
| } | |
| .inline-error { | |
| font-size: 12px; | |
| padding: 4px 8px; | |
| } | |
| .inline-success { | |
| font-size: 12px; | |
| padding: 4px 8px; | |
| } | |
| .post-item { | |
| background-color: var(--tg-bg); | |
| padding: 16px; | |
| border-radius: var(--border-radius-lg); | |
| border: 1px solid var(--border-color); | |
| box-shadow: var(--shadow-sm); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| transition: var(--transition-smooth); | |
| } | |
| .post-item:hover { | |
| box-shadow: var(--shadow-md); | |
| } | |
| .post-item.own-post { | |
| border-color: var(--accent); | |
| background-color: var(--accent-bg); | |
| } | |
| .post-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-size: 12px; | |
| color: var(--tg-hint); | |
| } | |
| .post-author-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .post-author { | |
| font-weight: 600; | |
| color: var(--tg-text); | |
| } | |
| .post-body { | |
| text-align: left; | |
| font-size: 14px; | |
| color: var(--tg-text); | |
| word-break: break-word; | |
| } | |
| /* E.7 CALENDAR MODULE */ | |
| .event-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| padding: 14px 16px; | |
| background-color: var(--tg-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--border-radius-lg); | |
| box-shadow: var(--shadow-sm); | |
| text-align: left; | |
| transition: var(--transition-smooth); | |
| } | |
| .event-item.completed { | |
| opacity: 0.5; | |
| background-color: var(--tg-secondary-bg); | |
| } | |
| .event-date-badge { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| width: 52px; | |
| height: 52px; | |
| border-radius: var(--border-radius-md); | |
| background-color: var(--tg-secondary-bg); | |
| border: 1px solid var(--border-color); | |
| overflow: hidden; | |
| flex-shrink: 0; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .event-badge-month { | |
| font-size: 10px; | |
| font-weight: 700; | |
| color: var(--tg-destructive); | |
| width: 100%; | |
| text-align: center; | |
| background-color: rgba(255, 59, 48, 0.05); | |
| padding: 2px 0; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .event-badge-day { | |
| font-size: 18px; | |
| font-weight: 800; | |
| font-family: var(--font-heading); | |
| color: var(--tg-text); | |
| padding-top: 2px; | |
| } | |
| .event-details { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .event-title { | |
| font-weight: 600; | |
| font-size: 15px; | |
| } | |
| .event-time { | |
| font-size: 12px; | |
| color: var(--tg-hint); | |
| } | |
| .past-events-card { | |
| margin-top: 0px; | |
| } | |
| /* Empty State Styling */ | |
| .empty-state { | |
| text-align: center; | |
| color: var(--tg-hint); | |
| font-size: 14px; | |
| padding: 32px 16px; | |
| opacity: 0.8; | |
| } | |