Skip to content

Commit c048740

Browse files
committed
draft
1 parent 3c828cc commit c048740

18 files changed

+2634
-149
lines changed
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
claude --dangerously-skip-permissions

css/dashboard.css

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
/* Dashboard Styles */
22
.dashboard-container {
33
padding: 16px;
4-
overflow-y: auto;
5-
max-height: calc(100vh - 100px);
64
}
75

86
.dashboard-header {
@@ -35,33 +33,32 @@
3533
background: #d32f2f;
3634
}
3735

38-
/* Summary Cards */
36+
/* Summary Cards - Compact grid */
3937
.dashboard-summary {
4038
display: grid;
41-
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
42-
gap: 12px;
43-
margin-bottom: 24px;
39+
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
40+
gap: 8px;
41+
margin-bottom: 16px;
4442
}
4543

4644
.summary-card {
4745
background: #252525;
48-
border-radius: 8px;
49-
padding: 16px;
46+
border-radius: 6px;
47+
padding: 8px 10px;
5048
text-align: center;
5149
border: 1px solid #333;
5250
}
5351

5452
.summary-value {
55-
font-size: 24px;
53+
font-size: 16px;
5654
font-weight: bold;
5755
color: #00bcd4;
58-
margin-bottom: 4px;
56+
margin-bottom: 2px;
5957
}
6058

6159
.summary-label {
62-
font-size: 11px;
60+
font-size: 10px;
6361
color: #888;
64-
text-transform: uppercase;
6562
}
6663

6764
/* Dashboard Sections */
@@ -310,12 +307,14 @@
310307
background: #1a1a1a;
311308
border-radius: 4px;
312309
padding: 8px;
310+
overflow: visible;
313311
}
314312

315313
#dashboardWordcloud {
316314
width: 100%;
317315
height: 300px;
318316
display: block;
317+
max-width: 100%;
319318
}
320319

321320
/* Scrollbar Styles */
@@ -343,11 +342,16 @@
343342
/* Responsive */
344343
@media (max-width: 768px) {
345344
.dashboard-summary {
346-
grid-template-columns: repeat(2, 1fr);
345+
grid-template-columns: repeat(4, 1fr);
346+
gap: 6px;
347+
}
348+
349+
.summary-card {
350+
padding: 6px 8px;
347351
}
348352

349353
.summary-value {
350-
font-size: 20px;
354+
font-size: 14px;
351355
}
352356

353357
.stats-table {

css/settings.css

Lines changed: 272 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
1+
/* Settings Button in Sidebar */
2+
.sidebar-settings {
3+
margin-top: auto;
4+
padding-top: 12px;
5+
border-top: 1px solid var(--border-color, #404040);
6+
display: flex;
7+
flex-direction: column;
8+
gap: 8px;
9+
}
10+
11+
/* Language Dropdown in Sidebar */
12+
.sidebar-lang-selector {
13+
width: 100%;
14+
}
15+
16+
.sidebar-lang-selector .language-dropdown {
17+
position: relative;
18+
width: 100%;
19+
}
20+
21+
.sidebar-lang-selector .language-dropdown-btn {
22+
display: flex;
23+
align-items: center;
24+
gap: 8px;
25+
width: 100%;
26+
padding: 8px 10px;
27+
background: var(--bg-secondary, #3a3a3a);
28+
border: 1px solid var(--border-color, #404040);
29+
border-radius: 6px;
30+
color: var(--text-primary, #e0e0e0);
31+
font-size: 13px;
32+
cursor: pointer;
33+
transition: all 0.2s;
34+
}
35+
36+
.sidebar-lang-selector .language-dropdown-btn:hover {
37+
border-color: var(--accent-color, #00bcd4);
38+
background: var(--bg-hover, #4a4a4a);
39+
}
40+
41+
.sidebar-lang-selector .language-dropdown-btn .fi {
42+
width: 18px;
43+
height: 14px;
44+
border-radius: 2px;
45+
flex-shrink: 0;
46+
}
47+
48+
.sidebar-lang-selector .language-text {
49+
flex: 1;
50+
text-align: left;
51+
}
52+
53+
.sidebar-lang-selector .dropdown-arrow {
54+
width: 0;
55+
height: 0;
56+
border-left: 4px solid transparent;
57+
border-right: 4px solid transparent;
58+
border-top: 5px solid var(--text-muted, #888);
59+
transition: transform 0.2s ease;
60+
}
61+
62+
.sidebar-lang-selector .language-dropdown.open .dropdown-arrow {
63+
transform: rotate(180deg);
64+
}
65+
66+
.sidebar-lang-selector .language-dropdown-menu {
67+
position: absolute;
68+
bottom: 100%;
69+
left: 0;
70+
right: 0;
71+
margin-bottom: 4px;
72+
background: var(--bg-primary, #2a2a2a);
73+
border: 1px solid var(--border-color, #404040);
74+
border-radius: 6px;
75+
box-shadow: 0 4px 12px var(--shadow-color, rgba(0, 0, 0, 0.4));
76+
overflow: hidden;
77+
opacity: 0;
78+
visibility: hidden;
79+
transform: translateY(8px);
80+
transition: all 0.2s ease;
81+
z-index: 100;
82+
}
83+
84+
.sidebar-lang-selector .language-dropdown.open .language-dropdown-menu {
85+
opacity: 1;
86+
visibility: visible;
87+
transform: translateY(0);
88+
}
89+
90+
.sidebar-lang-selector .language-option {
91+
display: flex;
92+
align-items: center;
93+
gap: 8px;
94+
padding: 8px 10px;
95+
cursor: pointer;
96+
font-size: 13px;
97+
color: var(--text-primary, #e0e0e0);
98+
transition: background-color 0.15s ease;
99+
}
100+
101+
.sidebar-lang-selector .language-option:hover {
102+
background: var(--bg-hover, #3a3a3a);
103+
}
104+
105+
.sidebar-lang-selector .language-option.selected {
106+
background: var(--accent-bg, rgba(0, 188, 212, 0.2));
107+
}
108+
109+
.sidebar-lang-selector .language-option .fi {
110+
width: 18px;
111+
height: 14px;
112+
border-radius: 2px;
113+
flex-shrink: 0;
114+
}
115+
116+
.settings-button {
117+
display: flex;
118+
align-items: center;
119+
gap: 8px;
120+
width: 100%;
121+
padding: 10px 12px;
122+
background: var(--bg-secondary, #3a3a3a);
123+
border: 1px solid var(--border-color, #404040);
124+
border-radius: 6px;
125+
color: var(--text-primary, #e0e0e0);
126+
cursor: pointer;
127+
font-size: 13px;
128+
transition: all 0.2s;
129+
}
130+
131+
.settings-button:hover {
132+
background: var(--bg-hover, #4a4a4a);
133+
border-color: var(--accent-color, #00bcd4);
134+
}
135+
136+
.settings-button svg {
137+
flex-shrink: 0;
138+
}
139+
140+
/* Settings Modal */
141+
.settings-modal-overlay {
142+
position: fixed;
143+
top: 0;
144+
left: 0;
145+
right: 0;
146+
bottom: 0;
147+
background: rgba(0, 0, 0, 0.6);
148+
display: none;
149+
align-items: center;
150+
justify-content: center;
151+
z-index: 10000;
152+
}
153+
154+
.settings-modal-overlay.active {
155+
display: flex;
156+
}
157+
158+
.settings-modal {
159+
background: var(--bg-primary, #2a2a2a);
160+
border: 1px solid var(--border-color, #404040);
161+
border-radius: 12px;
162+
width: 90%;
163+
max-width: 400px;
164+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
165+
}
166+
167+
.settings-modal-header {
168+
display: flex;
169+
justify-content: space-between;
170+
align-items: center;
171+
padding: 16px 20px;
172+
border-bottom: 1px solid var(--border-color, #404040);
173+
}
174+
175+
.settings-modal-header h3 {
176+
margin: 0;
177+
color: var(--accent-color, #00bcd4);
178+
font-size: 18px;
179+
}
180+
181+
.settings-modal-close {
182+
background: none;
183+
border: none;
184+
color: var(--text-secondary, #888);
185+
font-size: 24px;
186+
cursor: pointer;
187+
padding: 0;
188+
line-height: 1;
189+
transition: color 0.2s;
190+
}
191+
192+
.settings-modal-close:hover {
193+
color: var(--text-primary, #e0e0e0);
194+
}
195+
196+
.settings-modal-body {
197+
padding: 20px;
198+
}
199+
200+
.settings-group {
201+
margin-bottom: 20px;
202+
}
203+
204+
.settings-group:last-child {
205+
margin-bottom: 0;
206+
}
207+
208+
.settings-label {
209+
display: block;
210+
color: var(--text-secondary, #888);
211+
font-size: 12px;
212+
text-transform: uppercase;
213+
letter-spacing: 0.5px;
214+
margin-bottom: 10px;
215+
}
216+
217+
.settings-options {
218+
display: flex;
219+
gap: 8px;
220+
}
221+
222+
/* Theme Options */
223+
.theme-option {
224+
flex: 1;
225+
display: flex;
226+
flex-direction: column;
227+
align-items: center;
228+
gap: 6px;
229+
padding: 12px;
230+
background: var(--bg-secondary, #3a3a3a);
231+
border: 2px solid var(--border-color, #404040);
232+
border-radius: 8px;
233+
color: var(--text-primary, #e0e0e0);
234+
cursor: pointer;
235+
font-size: 13px;
236+
transition: all 0.2s;
237+
}
238+
239+
.theme-option:hover {
240+
background: var(--bg-hover, #4a4a4a);
241+
}
242+
243+
.theme-option.active {
244+
border-color: var(--accent-color, #00bcd4);
245+
background: var(--accent-bg, rgba(0, 188, 212, 0.1));
246+
}
247+
248+
.theme-icon {
249+
font-size: 24px;
250+
}
251+
252+
/* Language Options */
253+
.lang-option {
254+
flex: 1;
255+
padding: 10px 12px;
256+
background: var(--bg-secondary, #3a3a3a);
257+
border: 2px solid var(--border-color, #404040);
258+
border-radius: 6px;
259+
color: var(--text-primary, #e0e0e0);
260+
cursor: pointer;
261+
font-size: 13px;
262+
transition: all 0.2s;
263+
}
264+
265+
.lang-option:hover {
266+
background: var(--bg-hover, #4a4a4a);
267+
}
268+
269+
.lang-option.active {
270+
border-color: var(--accent-color, #00bcd4);
271+
background: var(--accent-bg, rgba(0, 188, 212, 0.1));
272+
}

0 commit comments

Comments
 (0)