fffiloni commited on
Commit
8f4e637
·
verified ·
1 Parent(s): e9cd1c3

Create styles.css

Browse files
Files changed (1) hide show
  1. styles.css +464 -0
styles.css ADDED
@@ -0,0 +1,464 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --gh-text: var(--body-text-color, #e6edf3);
3
+ --gh-muted: var(--body-text-color-subdued, #9aa4b2);
4
+ --gh-border: rgba(127, 127, 127, 0.22);
5
+ --gh-tooltip-bg: #161b22;
6
+ --gh-tooltip-text: #f0f6fc;
7
+ --gh-empty-cell: #ebedf0;
8
+ --gh-weekday-width: 6px;
9
+ --gh-grid-gap: 4px;
10
+ --gh-month-offset: calc(var(--gh-weekday-width) + var(--gh-grid-gap));
11
+ --gh-cell-size: clamp(10px, 1.2vw, 14px);
12
+ --gh-cell-gap: 2px;
13
+ --gh-month-font-size: 12px;
14
+ --gh-weekday-font-size: 12px;
15
+ --gh-legend-font-size: 13px;
16
+ --gh-legend-cell-size: 10px;
17
+ --gh-legend-gap: 4px;
18
+ --gh-title-size: 18px;
19
+ --gh-meta-size: 14px;
20
+ }
21
+ .dark, .gradio-container.dark {
22
+ --gh-text: #e6edf3;
23
+ --gh-muted: #9aa4b2;
24
+ --gh-border: rgba(240, 246, 252, 0.12);
25
+ --gh-empty-cell: #161b22;
26
+ }
27
+ .light, .gradio-container.light {
28
+ --gh-text: #1f2328;
29
+ --gh-muted: #57606a;
30
+ --gh-border: rgba(31, 35, 40, 0.12);
31
+ --gh-empty-cell: #ebedf0;
32
+ }
33
+ .gradio-container {
34
+ width: min(100%, 1080px) !important;
35
+ max-width: 1080px !important;
36
+ margin: 0 auto !important;
37
+ padding-left: 20px !important;
38
+ padding-right: 20px !important;
39
+ box-sizing: border-box !important;
40
+ }
41
+ #top-controls .wrap {
42
+ align-items: end;
43
+ }
44
+ .gh-status,
45
+ .gh-card,
46
+ .gh-chart-card {
47
+ color: var(--gh-text);
48
+ }
49
+ .gh-status {
50
+ border: 1px solid var(--gh-border);
51
+ background: transparent;
52
+ border-radius: 14px;
53
+ padding: 12px 14px;
54
+ font-size: 14px;
55
+ }
56
+ .stats-grid {
57
+ display: grid;
58
+ grid-template-columns: repeat(4, minmax(0, 1fr));
59
+ gap: 12px;
60
+ }
61
+ .gh-card {
62
+ border: 1px solid var(--gh-border);
63
+ background: transparent;
64
+ border-radius: 16px;
65
+ padding: 14px 16px;
66
+ }
67
+ .gh-card-label,
68
+ .gh-card-sub,
69
+ .gh-chart-subtitle,
70
+ .gh-chart-total,
71
+ .gh-month-label,
72
+ .gh-weekday,
73
+ .gh-legend-text,
74
+ .gh-empty {
75
+ color: var(--gh-muted);
76
+ }
77
+ .gh-card-label {
78
+ font-size: 13px;
79
+ margin-bottom: 8px;
80
+ }
81
+ .gh-card-value {
82
+ font-size: 28px;
83
+ line-height: 1;
84
+ font-weight: 700;
85
+ color: var(--gh-text);
86
+ }
87
+ .gh-card-sub {
88
+ margin-top: 10px;
89
+ font-size: 13px;
90
+ }
91
+ .gh-chart-card {
92
+ border: 1px solid var(--gh-border);
93
+ background: transparent;
94
+ border-radius: 16px;
95
+ padding: 14px 16px;
96
+ margin-bottom: 14px;
97
+ min-width: 0;
98
+ }
99
+ .gh-chart-header {
100
+ display: flex;
101
+ justify-content: space-between;
102
+ align-items: flex-start;
103
+ gap: 16px;
104
+ margin-bottom: 12px;
105
+ }
106
+ .gh-chart-title {
107
+ font-size: var(--gh-title-size);
108
+ font-weight: 700;
109
+ color: var(--gh-text);
110
+ line-height: 1.2;
111
+ }
112
+ .gh-chart-subtitle,
113
+ .gh-chart-total,
114
+ .gh-empty {
115
+ font-size: var(--gh-meta-size);
116
+ }
117
+ .gh-chart-wrap {
118
+ width: 100%;
119
+ overflow: visible;
120
+ padding-bottom: 4px;
121
+ }
122
+ .gh-chart-inner {
123
+ width: 100%;
124
+ min-width: 0;
125
+ max-width: 100%;
126
+ }
127
+ .gh-months {
128
+ display: grid;
129
+ grid-template-columns: repeat(55, minmax(0, 1fr));
130
+ column-gap: var(--gh-cell-gap);
131
+ margin-left: var(--gh-month-offset);
132
+ margin-bottom: 6px;
133
+ width: calc(100% - var(--gh-month-offset));
134
+ align-items: end;
135
+ min-height: 14px;
136
+ line-height: 0;
137
+ }
138
+ .gh-month-label {
139
+ font-size: var(--gh-month-font-size);
140
+ line-height: 1;
141
+ white-space: nowrap;
142
+ }
143
+ .gh-grid-area {
144
+ display: grid;
145
+ grid-template-columns: var(--gh-weekday-width) 1fr;
146
+ grid-template-rows: repeat(7, minmax(0, var(--gh-cell-size)));
147
+ column-gap: var(--gh-grid-gap);
148
+ row-gap: var(--gh-cell-gap);
149
+ align-items: center;
150
+ width: 100%;
151
+ min-width: 0;
152
+ }
153
+ .gh-weekday {
154
+ font-size: var(--gh-weekday-font-size);
155
+ display: flex;
156
+ align-items: center;
157
+ justify-content: flex-start;
158
+ line-height: 1;
159
+ }
160
+ .weekday-mon {
161
+ grid-column: 1;
162
+ grid-row: 1;
163
+ }
164
+ .weekday-wed {
165
+ grid-column: 1;
166
+ grid-row: 3;
167
+ }
168
+ .weekday-fri {
169
+ grid-column: 1;
170
+ grid-row: 5;
171
+ }
172
+ .gh-grid {
173
+ grid-column: 2;
174
+ grid-row: 1 / span 7;
175
+ display: grid;
176
+ grid-template-columns: repeat(55, minmax(0, 1fr));
177
+ grid-template-rows: repeat(0, minmax(0, var(--gh-cell-size)));
178
+ gap: var(--gh-cell-gap);
179
+ width: 100%;
180
+ min-width: 0;
181
+ align-items: start;
182
+ align-content: start;
183
+ line-height: 0;
184
+ }
185
+ button.gh-cell {
186
+ appearance: none;
187
+ -webkit-appearance: none;
188
+ border: 1px solid rgba(255, 255, 255, 0.04);
189
+ padding: 0;
190
+ margin: 0;
191
+ font: inherit;
192
+ color: inherit;
193
+ background-clip: padding-box;
194
+ }
195
+ .gh-cell {
196
+ width: 100%;
197
+ aspect-ratio: 1 / 1;
198
+ max-height: var(--gh-cell-size);
199
+ border-radius: clamp(1px, 0.2vw, 3px);
200
+ box-sizing: border-box;
201
+ position: relative;
202
+ cursor: pointer;
203
+ background: transparent;
204
+ min-width: 0;
205
+ }
206
+ .light .gh-cell,
207
+ .gradio-container.light .gh-cell {
208
+ border-color: rgba(27, 31, 36, 0.06);
209
+ }
210
+ .gh-cell:hover,
211
+ .gh-cell:focus-visible,
212
+ .gh-cell:focus {
213
+ outline: 1px solid rgba(255, 255, 255, 0.35);
214
+ outline-offset: 1px;
215
+ z-index: 20;
216
+ }
217
+ .light .gh-cell:hover,
218
+ .light .gh-cell:focus-visible,
219
+ .light .gh-cell:focus,
220
+ .gradio-container.light .gh-cell:hover,
221
+ .gradio-container.light .gh-cell:focus-visible,
222
+ .gradio-container.light .gh-cell:focus {
223
+ outline-color: rgba(31, 35, 40, 0.35);
224
+ }
225
+ .gh-cell-outside {
226
+ background: transparent !important;
227
+ border-color: transparent !important;
228
+ cursor: default;
229
+ }
230
+ .gh-tooltip {
231
+ position: absolute;
232
+ left: 50%;
233
+ bottom: calc(100% + 8px);
234
+ transform: translateX(-50%);
235
+ background: var(--gh-tooltip-bg);
236
+ color: var(--gh-tooltip-text);
237
+ font-size: 12px;
238
+ line-height: 1.2;
239
+ padding: 6px 8px;
240
+ border-radius: 6px;
241
+ white-space: nowrap;
242
+ pointer-events: none;
243
+ opacity: 0;
244
+ visibility: hidden;
245
+ transition: opacity 0.08s ease;
246
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
247
+ z-index: 999;
248
+ }
249
+ .gh-tooltip::after {
250
+ content: "";
251
+ position: absolute;
252
+ top: 100%;
253
+ left: 50%;
254
+ transform: translateX(-50%);
255
+ border-width: 5px;
256
+ border-style: solid;
257
+ border-color: var(--gh-tooltip-bg) transparent transparent transparent;
258
+ }
259
+ .gh-cell:hover .gh-tooltip,
260
+ .gh-cell:focus .gh-tooltip,
261
+ .gh-cell:focus-visible .gh-tooltip,
262
+ .gh-cell:active .gh-tooltip {
263
+ opacity: 1;
264
+ visibility: visible;
265
+ }
266
+ .gh-tooltip-bottom .gh-tooltip {
267
+ top: calc(100% + 8px);
268
+ bottom: auto;
269
+ }
270
+ .gh-tooltip-bottom .gh-tooltip::after {
271
+ top: auto;
272
+ bottom: 100%;
273
+ border-color: transparent transparent var(--gh-tooltip-bg) transparent;
274
+ }
275
+ .gh-tooltip-right .gh-tooltip {
276
+ left: 0;
277
+ transform: translateX(0);
278
+ }
279
+ .gh-tooltip-right .gh-tooltip::after {
280
+ left: 10px;
281
+ transform: none;
282
+ }
283
+ .gh-tooltip-left .gh-tooltip {
284
+ left: auto;
285
+ right: 0;
286
+ transform: translateX(0);
287
+ }
288
+ .gh-tooltip-left .gh-tooltip::after {
289
+ left: auto;
290
+ right: 10px;
291
+ transform: none;
292
+ }
293
+ .gh-tooltip-bottom.gh-tooltip-right .gh-tooltip::after {
294
+ left: 10px;
295
+ right: auto;
296
+ }
297
+ .gh-tooltip-bottom.gh-tooltip-left .gh-tooltip::after {
298
+ left: auto;
299
+ right: 10px;
300
+ }
301
+ .gh-legend {
302
+ display: flex;
303
+ justify-content: flex-end;
304
+ align-items: center;
305
+ gap: var(--gh-legend-gap);
306
+ margin-top: 12px;
307
+ }
308
+ .gh-legend-text {
309
+ font-size: var(--gh-meta-size);
310
+ line-height: 1;
311
+ }
312
+ .gh-legend-cell {
313
+ width: var(--gh-legend-cell-size);
314
+ height: var(--gh-legend-cell-size);
315
+ border-radius: clamp(1px, 0.2vw, 3px);
316
+ display: inline-block;
317
+ border: 1px solid rgba(255, 255, 255, 0.04);
318
+ flex: 0 0 auto;
319
+ }
320
+ .light .gh-legend-cell,
321
+ .gradio-container.light .gh-legend-cell {
322
+ border-color: rgba(27, 31, 36, 0.06);
323
+ }
324
+ #repo-visibility-toggle,
325
+ #pr-view-toggle,
326
+ #discussion-view-toggle,
327
+ #upvotes-view-toggle,
328
+ #likes-view-toggle,
329
+ #papers-view-toggle,
330
+ #space-updates-view-toggle {
331
+ border: none !important;
332
+ box-shadow: none !important;
333
+ outline: none !important;
334
+ background: transparent !important;
335
+ padding: 10px !important;
336
+ margin: 0 !important;
337
+ }
338
+ #repo-visibility-toggle > div,
339
+ #pr-view-toggle > div,
340
+ #discussion-view-toggle > div,
341
+ #upvotes-view-toggle > div,
342
+ #likes-view-toggle > div,
343
+ #papers-view-toggle > div,
344
+ #space-updates-view-toggle > div {
345
+ border: none !important;
346
+ box-shadow: none !important;
347
+ background: transparent !important;
348
+ padding: 0 !important;
349
+ margin: 0 !important;
350
+ }
351
+ .gh-toggle-radio fieldset {
352
+ border: none !important;
353
+ box-shadow: none !important;
354
+ background: transparent !important;
355
+ padding: 0 !important;
356
+ margin: 0 !important;
357
+ min-width: 0 !important;
358
+ }
359
+ .gh-toggle-radio [data-testid="block-info"] {
360
+ color: var(--gh-muted);
361
+ font-size: 13px;
362
+ margin-bottom: 8px;
363
+ display: block;
364
+ }
365
+ .gh-toggle-radio .wrap {
366
+ display: flex !important;
367
+ flex-wrap: wrap !important;
368
+ gap: 8px !important;
369
+ padding: 0 !important;
370
+ margin: 0 !important;
371
+ border: none !important;
372
+ background: transparent !important;
373
+ box-shadow: none !important;
374
+ width: auto !important;
375
+ }
376
+ .gh-toggle-radio label {
377
+ position: relative !important;
378
+ margin: 0 !important;
379
+ padding: 0 !important;
380
+ border: none !important;
381
+ background: transparent !important;
382
+ box-shadow: none !important;
383
+ cursor: pointer !important;
384
+ }
385
+ .gh-toggle-radio input[type="radio"] {
386
+ position: absolute !important;
387
+ inset: 0 !important;
388
+ opacity: 0 !important;
389
+ margin: 0 !important;
390
+ width: 100% !important;
391
+ height: 100% !important;
392
+ cursor: pointer !important;
393
+ }
394
+ .gh-toggle-radio label span {
395
+ display: inline-flex !important;
396
+ align-items: center !important;
397
+ justify-content: center !important;
398
+ padding: 7px 12px !important;
399
+ border-radius: 999px !important;
400
+ font-size: 13px !important;
401
+ line-height: 1 !important;
402
+ white-space: nowrap !important;
403
+ color: var(--gh-muted) !important;
404
+ background: transparent !important;
405
+ border: 1px solid var(--gh-border) !important;
406
+ box-shadow: none !important;
407
+ transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease !important;
408
+ }
409
+ .gh-toggle-radio label:hover span {
410
+ color: var(--gh-text) !important;
411
+ border-color: rgba(127, 127, 127, 0.32) !important;
412
+ }
413
+ .gh-toggle-radio label.selected span {
414
+ background: rgba(127, 127, 127, 0.14) !important;
415
+ color: var(--gh-text) !important;
416
+ border-color: rgba(127, 127, 127, 0.28) !important;
417
+ }
418
+ .gh-toggle-radio input:focus-visible + span {
419
+ outline: 1px solid rgba(127, 127, 127, 0.35) !important;
420
+ outline-offset: 1px !important;
421
+ }
422
+ .toggles-container,
423
+ .toggles-container > div,
424
+ .toggles-container > .svelte-d5xbca {
425
+ background: transparent !important;
426
+ }
427
+ .toggles-container > .svelte-d5xbca {
428
+ border: none !important;
429
+ margin-bottom: -20px;
430
+ }
431
+ @media (max-width: 980px) {
432
+ .stats-grid {
433
+ grid-template-columns: repeat(2, minmax(0, 1fr));
434
+ }
435
+ }
436
+ @media (max-width: 640px) {
437
+ :root {
438
+ --gh-weekday-width: 16px;
439
+ --gh-grid-gap: 3px;
440
+ --gh-month-offset: calc(var(--gh-weekday-width) + var(--gh-grid-gap));
441
+ --gh-month-font-size: 10px;
442
+ --gh-weekday-font-size: 9px;
443
+ --gh-cell-size: 10px;
444
+ --gh-cell-gap: 1px;
445
+ }
446
+ .stats-grid {
447
+ grid-template-columns: 1fr;
448
+ }
449
+ .gh-chart-header {
450
+ flex-direction: column;
451
+ align-items: flex-start;
452
+ }
453
+ .gradio-container {
454
+ padding-left: 14px !important;
455
+ padding-right: 14px !important;
456
+ }
457
+ .gh-toggle-radio .wrap {
458
+ gap: 6px !important;
459
+ }
460
+ .gh-toggle-radio label span {
461
+ padding: 7px 10px !important;
462
+ font-size: 12px !important;
463
+ }
464
+ }