-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstyles.css
More file actions
223 lines (204 loc) · 15.8 KB
/
Copy pathstyles.css
File metadata and controls
223 lines (204 loc) · 15.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
:root{
--cream:#FAF8F3;--paper:#F3F0E8;--ink:#1A1814;--ink-soft:#4A4640;--ink-muted:#9A948A;
--gold:#C9A84C;--gold-light:#E8D49A;--gold-pale:#F5EDD5;
--green:#2D6A4F;--green-light:#D8EDDF;--red:#9B2335;--red-light:#F5D5D8;
--blue:#2C4A7C;--blue-light:#D5E0F0;--border:#DDD8CE;
--card:#FFFFFF;--nav-h:60px;--bottom-nav-h:64px;
}
[data-theme="dark"]{
--cream:#12110E;--paper:#1C1A16;--ink:#F0EDE6;--ink-soft:#C8C4BC;--ink-muted:#7A7670;
--gold:#C9A84C;--gold-pale:#2A2516;--green:#3D8A65;--green-light:#0F2A1E;
--red:#C94060;--red-light:#2A0F18;--blue:#4C7ABF;--blue-light:#0F1A2A;
--border:#2E2C28;--card:#1C1A16;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Outfit',sans-serif;background:var(--cream);color:var(--ink);min-height:100vh;transition:background 0.3s,color 0.3s;}
/* AUTH */
#auth-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--ink);}
.auth-card{background:var(--card);border-radius:20px;padding:40px;width:400px;max-width:92vw;box-shadow:0 20px 60px rgba(0,0,0,0.3);}
.auth-logo{font-family:'DM Serif Display',serif;font-size:2rem;color:var(--gold);text-align:center;margin-bottom:6px;}
.auth-logo span{color:var(--ink);opacity:0.4;font-style:italic;}
.auth-sub{text-align:center;color:var(--ink-muted);font-size:0.82rem;margin-bottom:28px;}
.auth-tabs{display:flex;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:20px;}
.auth-tab{flex:1;padding:10px;border:none;background:transparent;font-family:'Outfit',sans-serif;font-size:0.85rem;font-weight:600;cursor:pointer;color:var(--ink-muted);transition:all 0.2s;}
.auth-tab.active{background:var(--ink);color:white;}
.auth-form{display:flex;flex-direction:column;gap:12px;}
.auth-input{font-family:'Outfit',sans-serif;font-size:0.9rem;padding:12px 16px;border:1.5px solid var(--border);border-radius:10px;background:var(--cream);color:var(--ink);outline:none;transition:border-color 0.2s;width:100%;}
.auth-input:focus{border-color:var(--gold);}
.auth-btn{padding:13px;border:none;border-radius:10px;font-family:'Outfit',sans-serif;font-size:0.9rem;font-weight:700;cursor:pointer;transition:all 0.2s;width:100%;}
.auth-btn-primary{background:var(--ink);color:white;}
.auth-btn-primary:hover{opacity:0.88;}
.auth-btn-google{background:white;color:#1A1814;border:1.5px solid #DDD8CE;display:flex;align-items:center;justify-content:center;gap:10px;}
.auth-btn-google:hover{border-color:#4A4640;}
.auth-divider{display:flex;align-items:center;gap:12px;color:#9A948A;font-size:0.8rem;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:#DDD8CE;}
.auth-error{font-size:0.78rem;text-align:center;min-height:16px;color:var(--red);}
.auth-success{color:var(--green)!important;}
.auth-forgot{text-align:center;font-size:0.78rem;color:var(--ink-muted);cursor:pointer;text-decoration:underline;}
.auth-forgot:hover{color:var(--gold);}
/* APP */
#app-screen{display:none;padding-bottom:var(--bottom-nav-h);}
header{background:var(--ink);color:white;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);position:sticky;top:0;z-index:100;}
.logo{font-family:'DM Serif Display',serif;font-size:1.3rem;color:var(--gold-light);}
.logo span{color:white;opacity:0.4;font-style:italic;}
.header-right{display:flex;align-items:center;gap:8px;}
.user-email{font-size:0.7rem;color:#888;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* BOTTOM NAV */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--bottom-nav-h);background:var(--card);border-top:1px solid var(--border);display:flex;z-index:100;box-shadow:0 -4px 20px rgba(0,0,0,0.08);}
.bnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:transparent;cursor:pointer;color:var(--ink-muted);font-family:'Outfit',sans-serif;font-size:0.65rem;font-weight:500;transition:all 0.2s;padding:8px 0;}
.bnav-btn.active{color:var(--gold);}
.bnav-btn.active .bnav-icon{background:var(--gold-pale);border-radius:12px;padding:4px 16px;}
.bnav-icon{font-size:1.2rem;transition:all 0.2s;}
/* CONTAINER */
.container{max-width:1100px;margin:0 auto;padding:24px 16px;}
.view{display:none;}.view.active{display:block;}
/* SKELETON */
.skeleton{background:linear-gradient(90deg,var(--paper) 25%,var(--border) 50%,var(--paper) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.skeleton-card{height:90px;border-radius:12px;margin-bottom:14px;}
.skeleton-row{height:44px;border-radius:6px;margin-bottom:8px;}
/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:24px;}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;position:relative;overflow:hidden;transition:transform 0.15s;}
.stat-card:hover{transform:translateY(-2px);}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold);}
.stat-card.green::before{background:var(--green);}
.stat-card.red::before{background:var(--red);}
.stat-card.blue::before{background:var(--blue);}
.stat-card.purple::before{background:#7C4CA8;}
.stat-label{font-size:0.65rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-muted);margin-bottom:6px;}
.stat-value{font-family:'DM Mono',monospace;font-size:1.5rem;font-weight:500;color:var(--ink);line-height:1;}
.stat-sub{font-size:0.7rem;color:var(--ink-muted);margin-top:5px;}
/* CHARTS */
.chart-row{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:24px;}
.chart-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px;}
.chart-title{font-family:'DM Serif Display',serif;font-size:0.9rem;margin-bottom:12px;color:var(--ink-soft);}
.donut-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;}
.donut-legend{display:flex;flex-direction:column;gap:6px;width:100%;}
.legend-item{display:flex;align-items:center;gap:8px;font-size:0.75rem;}
.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
/* WIN RATE BARS */
.rate-bars{display:flex;flex-direction:column;gap:10px;}
.rate-bar-row{display:flex;flex-direction:column;gap:4px;}
.rate-bar-label{display:flex;justify-content:space-between;font-size:0.75rem;color:var(--ink-soft);}
.rate-bar-track{height:8px;background:var(--paper);border-radius:4px;overflow:hidden;}
.rate-bar-fill{height:100%;background:var(--green);border-radius:4px;transition:width 0.6s ease;}
/* CALENDAR */
.cal-day{border-radius:4px;background:var(--paper);border:1px solid var(--border);position:relative;cursor:default;aspect-ratio:1;min-height:28px;}
.cal-day.empty{background:transparent;border:none;}
.cal-day.today{border:2px solid var(--gold)!important;}
.cal-day.win{background:var(--green);}
.cal-day.loss{background:var(--red);}
.cal-day.be{background:var(--blue);}
.cal-day.mixed{background:var(--gold);}
.cal-tooltip{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:4px 8px;border-radius:6px;font-size:0.65rem;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s;z-index:10;}
.cal-day:hover .cal-tooltip{opacity:1;}
/* EMPTY STATE */
.empty-dashboard{text-align:center;padding:60px 20px;}
.empty-dashboard .empty-icon{font-size:3rem;margin-bottom:16px;}
.empty-dashboard h3{font-family:'DM Serif Display',serif;font-size:1.4rem;margin-bottom:8px;}
.empty-dashboard p{color:var(--ink-muted);font-size:0.85rem;margin-bottom:20px;}
/* TABLE */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center;}
.filter-input{font-family:'Outfit',sans-serif;font-size:0.82rem;padding:8px 12px;border:1.5px solid var(--border);border-radius:8px;background:var(--card);color:var(--ink);outline:none;}
.filter-input:focus{border-color:var(--gold);}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.section-title{font-family:'DM Serif Display',serif;font-size:1.3rem;}
.table-wrap{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:auto;}
table{width:100%;border-collapse:collapse;font-size:0.78rem;}
thead{background:var(--paper);}
th{padding:10px 12px;text-align:left;font-size:0.63rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-muted);border-bottom:1px solid var(--border);white-space:nowrap;}
td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--ink-soft);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--gold-pale);}
.mono{font-family:'DM Mono',monospace;font-size:0.75rem;}
.badge{display:inline-block;padding:2px 7px;border-radius:20px;font-size:0.65rem;font-weight:600;}
.badge-win{background:var(--green-light);color:var(--green);}
.badge-loss{background:var(--red-light);color:var(--red);}
.badge-be{background:var(--blue-light);color:var(--blue);}
.badge-buy{background:var(--green-light);color:var(--green);}
.badge-sell{background:var(--red-light);color:var(--red);}
.badge-session{background:var(--gold-pale);color:#8A6A1A;}
.badge-setup{background:var(--paper);color:var(--ink-soft);border:1px solid var(--border);}
.empty-state{text-align:center;padding:50px 20px;color:var(--ink-muted);}
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;}
.page-btn{padding:6px 12px;border:1.5px solid var(--border);border-radius:6px;background:var(--card);color:var(--ink-soft);cursor:pointer;font-family:'Outfit',sans-serif;font-size:0.8rem;}
.page-btn.active{background:var(--ink);color:white;border-color:var(--ink);}
.page-btn:disabled{opacity:0.4;cursor:not-allowed;}
/* FORM */
.form-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;max-width:760px;}
.form-title{font-family:'DM Serif Display',serif;font-size:1.4rem;margin-bottom:22px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-group{display:flex;flex-direction:column;gap:5px;}
.form-group.full{grid-column:1/-1;}
label{font-size:0.68rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-muted);}
input,select,textarea{font-family:'Outfit',sans-serif;font-size:0.88rem;padding:9px 13px;border:1.5px solid var(--border);border-radius:8px;background:var(--cream);color:var(--ink);outline:none;transition:border-color 0.2s;}
input:focus,select:focus,textarea:focus{border-color:var(--gold);background:var(--card);}
textarea{resize:vertical;min-height:75px;}
.form-divider{grid-column:1/-1;border:none;border-top:1px solid var(--border);margin:2px 0;}
.form-section-label{grid-column:1/-1;font-size:0.65rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--gold);margin-bottom:-4px;}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:8px;border:none;font-family:'Outfit',sans-serif;font-size:0.85rem;font-weight:600;cursor:pointer;transition:all 0.15s;}
.btn-primary{background:var(--ink);color:white;}
.btn-primary:hover{opacity:0.88;}
.btn-gold{background:var(--gold);color:white;}
.btn-gold:hover{background:#B8933C;}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--ink-soft);}
.btn-danger{background:var(--red-light);color:var(--red);border:none;padding:5px 9px;font-size:0.7rem;}
.btn-icon{background:transparent;border:1.5px solid var(--border);color:var(--ink-soft);padding:5px 9px;font-size:0.8rem;}
.btn-sm{padding:6px 12px;font-size:0.75rem;}
.btn-red{background:var(--red);color:white;}
.form-actions{grid-column:1/-1;display:flex;gap:10px;margin-top:6px;}
/* UPLOAD */
.upload-area{border:2px dashed var(--border);border-radius:10px;padding:18px;text-align:center;cursor:pointer;background:var(--cream);position:relative;}
.upload-area:hover{border-color:var(--gold);background:var(--gold-pale);}
.upload-area input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.upload-preview{position:relative;margin-top:10px;}
.upload-preview img{width:100%;max-height:160px;object-fit:contain;border-radius:8px;border:1px solid var(--border);}
.upload-remove{position:absolute;top:5px;right:5px;background:var(--red);color:white;border:none;border-radius:50%;width:22px;height:22px;cursor:pointer;font-size:11px;}
.sc-thumb{width:38px;height:28px;object-fit:cover;border-radius:3px;border:1px solid var(--border);cursor:pointer;}
/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(26,24,20,0.55);z-index:200;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal{background:var(--card);border-radius:16px;padding:28px;width:480px;max-width:92vw;box-shadow:0 8px 40px rgba(0,0,0,0.2);}
.modal h3{font-family:'DM Serif Display',serif;font-size:1.2rem;margin-bottom:6px;}
.modal p{font-size:0.82rem;color:var(--ink-muted);margin-bottom:18px;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;}
/* NOTES */
.notes-grid{display:grid;grid-template-columns:280px 1fr;gap:16px;height:calc(100vh - 180px);}
.notes-list{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow-y:auto;}
.note-item{padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.15s;}
.note-item:hover,.note-item.active{background:var(--gold-pale);}
.note-item-date{font-size:0.68rem;color:var(--ink-muted);margin-bottom:3px;}
.note-item-title{font-size:0.82rem;font-weight:600;color:var(--ink);margin-bottom:2px;}
.note-item-preview{font-size:0.78rem;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.note-editor{background:var(--card);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;}
.note-editor-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:10px;}
.note-editor-body{flex:1;padding:16px;display:flex;flex-direction:column;gap:10px;}
.note-textarea{width:100%;height:100%;min-height:300px;border:none;background:transparent;font-family:'Outfit',sans-serif;font-size:0.9rem;color:var(--ink);resize:none;outline:none;}
.note-title-input{font-family:'DM Serif Display',serif;font-size:1.1rem;border:none;background:transparent;color:var(--ink);outline:none;width:100%;}
/* TOAST */
#toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:white;padding:11px 22px;border-radius:20px;font-size:0.82rem;opacity:0;transition:all 0.3s;z-index:400;pointer-events:none;white-space:nowrap;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.dark-toggle{background:transparent;border:1.5px solid #444;color:#ccc;padding:5px 10px;border-radius:6px;cursor:pointer;font-size:1rem;}
/* LOADING */
.loading-overlay{display:none;position:fixed;inset:0;background:rgba(26,24,20,0.65);z-index:500;align-items:center;justify-content:center;flex-direction:column;gap:14px;}
.loading-overlay.show{display:flex;}
.spinner{width:36px;height:36px;border:3px solid rgba(201,168,76,0.3);border-top-color:var(--gold);border-radius:50%;animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-text{color:white;font-size:0.85rem;}
.rr-pos{color:var(--green);font-weight:600;}
.rr-neg{color:var(--red);font-weight:600;}
.edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
.edit-grid .form-group.full{grid-column:1/-1;}
@media(max-width:768px){
.container{padding:16px 12px;}
.form-grid{grid-template-columns:1fr;}
.form-group.full{grid-column:1;}
.form-actions{grid-column:1;}
.chart-row{grid-template-columns:1fr;}
.stats-grid{grid-template-columns:repeat(2,1fr);}
.user-email{display:none;}
.notes-grid{grid-template-columns:1fr;height:auto;}
.edit-grid{grid-template-columns:1fr;}
.edit-grid .form-group.full{grid-column:1;}
}