active_analytics 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +105 -15
  3. data/app/controllers/active_analytics/application_controller.rb +24 -4
  4. data/app/controllers/active_analytics/assets_controller.rb +29 -0
  5. data/app/controllers/active_analytics/pages_controller.rb +9 -10
  6. data/app/controllers/active_analytics/referrers_controller.rb +9 -5
  7. data/app/controllers/active_analytics/sites_controller.rb +4 -4
  8. data/app/models/active_analytics/views_per_day.rb +22 -3
  9. data/app/views/active_analytics/assets/_charts.css +249 -0
  10. data/app/{assets/stylesheets/active_analytics/style.css → views/active_analytics/assets/_style.css} +37 -38
  11. data/app/views/active_analytics/assets/application.css.erb +2 -0
  12. data/app/{assets/javascripts/active_analytics → views/active_analytics/assets}/application.js +1 -3
  13. data/app/views/active_analytics/assets/ariato.css +875 -0
  14. data/app/views/active_analytics/assets/ariato.js +322 -0
  15. data/app/views/active_analytics/pages/_table.html.erb +6 -17
  16. data/app/views/active_analytics/pages/index.html.erb +1 -1
  17. data/app/views/active_analytics/pages/show.html.erb +7 -8
  18. data/app/views/active_analytics/referrers/_table.html.erb +9 -2
  19. data/app/views/active_analytics/referrers/index.html.erb +2 -2
  20. data/app/views/active_analytics/referrers/show.html.erb +6 -3
  21. data/app/views/active_analytics/sites/_histogram.html.erb +9 -2
  22. data/app/views/active_analytics/sites/_histogram_header.html.erb +10 -0
  23. data/app/views/active_analytics/sites/show.html.erb +2 -2
  24. data/app/views/layouts/active_analytics/_footer.html.erb +3 -3
  25. data/app/views/layouts/active_analytics/_header.html.erb +1 -3
  26. data/app/views/layouts/active_analytics/application.html.erb +5 -3
  27. data/config/routes.rb +2 -1
  28. data/lib/active_analytics/version.rb +1 -1
  29. data/lib/active_analytics.rb +47 -4
  30. metadata +15 -11
  31. data/app/assets/javascripts/active_analytics/ariato.js +0 -746
  32. data/app/assets/stylesheets/active_analytics/application.css +0 -15
  33. data/app/assets/stylesheets/active_analytics/ariato.css +0 -3548
  34. data/app/assets/stylesheets/active_analytics/charts.css +0 -424
@@ -0,0 +1,875 @@
1
+ /*******************************************/
2
+ /* ariato css */
3
+ /* https://github.com/BaseSecrete/ariato */
4
+ /*******************************************/
5
+
6
+ .active-analytics {
7
+ --color-blue-100: 199,231,236;
8
+ --color-blue-200: 147,206,223;
9
+ --color-blue-300: 51,152,207;
10
+ --color-blue-400: 0,115,198;
11
+ --color-blue-500: 0,67,184;
12
+ --color-blue-600: 22,50,155;
13
+ --color-blue-700: 23,20,98;
14
+ --color-red-20: 253,249,248;
15
+ --color-red-200: 233,183,173;
16
+ --color-red-500: 164,0,27;
17
+ --color-red-600: 123,0,15;
18
+ --color-green-500: 119,187,118;
19
+ --color-grey-00: 255,255,248;
20
+ --color-grey-20: 253,253,246;
21
+ --color-grey-35: 249,249,242;
22
+ --color-grey-50: 244,243,236;
23
+ --color-grey-100: 225,224,217;
24
+ --color-grey-200: 195,194,187;
25
+ --color-grey-300: 142,140,134;
26
+ --color-grey-400: 112,109,103;
27
+ --color-grey-500: 80,77,72;
28
+ --color-grey-600: 59,57,51;
29
+ --color-grey-700: 20,21,15;
30
+ --color-black: 0,0.2913950572018906,0;
31
+ --color-bg: var(--color-grey-20);
32
+ --color-body: var(--color-grey-500);
33
+ }
34
+
35
+ @media (prefers-color-scheme: dark) {
36
+ .active-analytics {
37
+ --color-blue-100: 34,44,64;
38
+ --color-blue-200: 57,73,106;
39
+ --color-blue-300: 82,105,152;
40
+ --color-blue-400: 108,138,200;
41
+ --color-blue-500: 135,173,250;
42
+ --color-blue-600: 145,191,252;
43
+ --color-blue-700: 161,208,252;
44
+ --color-red-20: 47,27,24;
45
+ --color-red-200: 103,62,59;
46
+ --color-red-500: 244,146,140;
47
+ --color-red-600: 248,165,157;
48
+ --color-green-500: 119,187,118;
49
+ --color-grey-00: 14,18,26;
50
+ --color-grey-20: 16,20,28;
51
+ --color-grey-35: 21,25,34;
52
+ --color-grey-50: 24,28,36;
53
+ --color-grey-100: 40,44,54;
54
+ --color-grey-200: 69,74,84;
55
+ --color-grey-300: 100,106,116;
56
+ --color-grey-400: 133,139,150;
57
+ --color-grey-500: 168,174,186;
58
+ --color-grey-600: 180,189,200;
59
+ --color-grey-700: 193,204,214;
60
+ --color-grey-800: 206,219,228;
61
+ --color-grey-900: 219,234,241;
62
+
63
+ --color-black: 0,0,0;
64
+ --color-bg: var(--color-grey-20);
65
+ --color-body: var(--color-grey-500);
66
+ }
67
+ }
68
+
69
+ .active-analytics body {
70
+ background: rgba(var(--color-bg), 1);
71
+ color: rgba(var(--color-body), 1);
72
+ }
73
+
74
+ .active-analytics :focus {
75
+ outline: 2px solid rgba(var(--color-blue-200), 1);
76
+ }
77
+
78
+ /* design_tokens/font.css */
79
+ .active-analytics {
80
+ --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
81
+ --base-font-size: var(--space-2x);
82
+ --font-weight-400: 400;
83
+ --font-weight-700: 700;
84
+ --ratio: 1.2;
85
+ --font-size-30: calc(var(--base-font-size) / var(--ratio) / var(--ratio)); /* -2 */
86
+ --font-size-40: calc(var(--base-font-size) / var(--ratio)); /* -1 */
87
+ --font-size-50: var(--base-font-size);
88
+ --font-size-60: calc(var(--base-font-size) * var(--ratio)); /* +1 */
89
+ --font-size-70: calc(var(--base-font-size) * var(--ratio) * var(--ratio)); /* +2 */
90
+ --font-size-80: calc(var(--base-font-size) * var(--ratio) * var(--ratio) * var(--ratio)); /* +4 */
91
+ --font-size-90: calc(var(--base-font-size) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); /* +5 */
92
+ --font-size-100: calc(var(--base-font-size) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); /* +6 */
93
+ --font-size-110: calc(var(--base-font-size) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); /* +7 */
94
+ }
95
+
96
+ .active-analytics,
97
+ .active-analytics body {
98
+ font-size: var(--base-font-size);
99
+ }
100
+
101
+ .active-analytics body {
102
+ font-family: var(--font-sans);
103
+ font-weight: var(--font-weight-400);
104
+ line-height: var(--space-3x);
105
+ }
106
+
107
+ /* design_tokens/shadow.css */
108
+ .active-analytics {
109
+ --box-shadow-s:
110
+ 0 1px 1px 0 rgba(var(--color-black), 0.05),
111
+ 0 1px 2px 0 rgba(var(--color-black), 0.05);
112
+ --box-shadow-l:
113
+ 0 0px 2px 0 rgba(var(--color-black), 0.05),
114
+ 0 1px 2px 0 rgba(var(--color-black), 0.05),
115
+ 0 2px 4px -1px rgba(var(--color-black), 0.05),
116
+ 0 4px 8px -2px rgba(var(--color-black), 0.05),
117
+ 0 8px 16px -4px rgba(var(--color-black), 0.05),
118
+ 0 16px 32px -8px rgba(var(--color-black), 0.05);
119
+ --box-inset-shadow-s: 0 1px 1px 0 rgba(var(--color-black), 0.05) inset;
120
+ --box-inset-shadow-m: 0 1px 1px 0px rgba(var(--color-black), 0.05) inset,
121
+ 0 2px 2px 1px rgba(var(--color-black), 0.05) inset;
122
+ --text-shadow-s: 0 1px 1px rgba(var(--color-black), 0.05);
123
+ }
124
+
125
+ /* design_tokens/shape.css */
126
+ .active-analytics {
127
+ --border-radius-s: calc(var(--space) * 0.25);
128
+ --border-radius-m: var(--space-1-2);
129
+ }
130
+
131
+ /* design_tokens/space.css */
132
+ *,
133
+ *::before,
134
+ *::after {
135
+ box-sizing: border-box;
136
+ }
137
+
138
+ .active-analytics {
139
+ --space: 0.5rem;
140
+ --space-1-4: calc(var(--space) / 4);
141
+ --space-1-2: calc(var(--space) / 2);
142
+ --space-2x: calc(var(--space) * 2);
143
+ --space-3x: calc(var(--space) * 3);
144
+ --space-4x: calc(var(--space) * 4);
145
+ --space-5x: calc(var(--space) * 5);
146
+ --space-6x: calc(var(--space) * 6);
147
+ --space-7x: calc(var(--space) * 7);
148
+ }
149
+
150
+ /* elements */
151
+
152
+ /* text */
153
+ .active-analytics ::-moz-selection {
154
+ background: rgba(var(--color-blue-100), 1);
155
+ text-shadow: none;
156
+ }
157
+
158
+ .active-analytics ::selection {
159
+ background: rgba(var(--color-blue-100), 1);
160
+ text-shadow: none;
161
+ }
162
+
163
+ .active-analytics p {
164
+ margin: 0;
165
+ padding: calc(var(--space) - 2px) 0 calc(var(--space-2x) + 2px);
166
+ }
167
+
168
+ .active-analytics p.is-large {
169
+ font-size: var(--font-size-70);
170
+ line-height: var(--space-4x);
171
+ padding: var(--space) 0 var(--space-2x);
172
+ }
173
+
174
+ .active-analytics p + :not(p) {
175
+ margin-top: var(--space-3x);
176
+ }
177
+
178
+ .active-analytics h1,
179
+ .active-analytics .is-h1 {
180
+ display: inline-block;
181
+ margin: 0;
182
+ padding: calc(var(--space-2x) + 2px) 0 calc(var(--space) - 2px);
183
+ color: rgba(var(--color-grey-700), 1);
184
+ font-size: var(--font-size-110);
185
+ font-weight: 700;
186
+ letter-spacing: -0.05rem;
187
+ line-height: var(--space-7x);
188
+ text-transform: none;
189
+ }
190
+
191
+ .active-analytics h2,
192
+ .active-analytics .is-h2 {
193
+ margin: 0;
194
+ padding: calc(var(--space) + 1px) 0 calc(var(--space-2x) - 1px);
195
+ color: rgba(var(--color-grey-700), 1);
196
+ font-size: var(--font-size-100);
197
+ font-weight: 700;
198
+ letter-spacing: -0.05rem;
199
+ line-height: var(--space-6x);
200
+ text-transform: none;
201
+ }
202
+
203
+ .active-analytics * + h2,
204
+ .active-analytics * + .is-h2 {
205
+ margin-top: var(--space-3x);
206
+ }
207
+
208
+ .active-analytics h3,
209
+ .active-analytics .is-h3 {
210
+ margin: 0;
211
+ padding: calc(var(--space) - 3px) 0 calc(var(--space-2x) + 3px);
212
+ color: rgba(var(--color-grey-700), 1);
213
+ font-size: var(--font-size-60);
214
+ font-weight: 700;
215
+ letter-spacing: 0;
216
+ line-height: var(--space-3x);
217
+ text-transform: none;
218
+ }
219
+
220
+ .active-analytics small {
221
+ font-size: var(--font-size-30);
222
+ font-weight: 400;
223
+ text-transform: none;
224
+ color: rgba(var(--color-grey-400), 1);
225
+ }
226
+
227
+ /**** BUTTONS *****/
228
+ .active-analytics button,
229
+ .active-analytics input[type="submit"],
230
+ .active-analytics input[type="button"],
231
+ .active-analytics input[type="reset"],
232
+ .active-analytics [role="button"],
233
+ .active-analytics :any-link[role="button"] {
234
+ /* Display */
235
+ display: inline-flex;
236
+ width: auto;
237
+ cursor: pointer;
238
+ align-items: center;
239
+ justify-content: center;
240
+ align-self: start;
241
+ transition: 0.2s all ease-in-out;
242
+ background-color: transparent;
243
+ min-height: var(--space-5x);
244
+ margin: 0;
245
+ padding: var(--space) calc(var(--space) * 2);
246
+ border: none;
247
+ border-radius: var(--border-radius-s, 0);
248
+ box-shadow: 0 0 0 1px rgba(var(--color-grey-200), 1) inset,
249
+ var(--box-shadow-s);
250
+ outline: 0;
251
+ color: rgba(var(--color-grey-700), 1);
252
+ font: inherit;
253
+ font-family: inherit;
254
+ font-size: var(--font-size-40);
255
+ font-weight: 700;
256
+ letter-spacing: 0.05rem;
257
+ line-height: var(--space-3x);
258
+ text-align: center;
259
+ text-decoration: none;
260
+ text-transform: uppercase;
261
+ text-shadow: var(--text-shadow-s);
262
+ }
263
+
264
+ .active-analytics button:hover,
265
+ .active-analytics input[type="submit"]:hover,
266
+ .active-analytics input[type="button"]:hover,
267
+ .active-analytics input[type="reset"]:hover,
268
+ .active-analytics [role="button"]:hover,
269
+ .active-analytics :any-link[role="button"]:hover,
270
+ .active-analytics button:active,
271
+ .active-analytics input[type="submit"]:active,
272
+ .active-analytics input[type="button"]:active,
273
+ .active-analytics input[type="reset"]:active,
274
+ [role="button"]:active,
275
+ :any-link[role="button"]:active {
276
+ color: rgba(var(--color-grey-800), 1);
277
+ box-shadow: 0 0 0 1px rgba(var(--color-grey-300), 1) inset,
278
+ var(--box-shadow-s);
279
+ }
280
+
281
+ .active-analytics button:focus,
282
+ .active-analytics input[type="submit"]:focus,
283
+ .active-analytics input[type="button"]:focus,
284
+ .active-analytics input[type="reset"]:focus,
285
+ .active-analytics [role="button"]:focus,
286
+ .active-analytics :any-link[role="button"]:focus {
287
+ outline: 2px solid rgba(var(--color-blue-200), 1);
288
+ border: 0;
289
+ color: rgba(var(--color-grey-900), 1);
290
+ z-index: 1;
291
+ }
292
+
293
+ .active-analytics button[aria-expanded="true"],
294
+ .active-analytics button[type="reset"][aria-expanded="true"],
295
+ .active-analytics input[type="submit"][aria-expanded="true"],
296
+ .active-analytics input[type="button"][aria-expanded="true"],
297
+ .active-analytics input[type="reset"][aria-expanded="true"],
298
+ .active-analytics [role="button"][aria-expanded="true"],
299
+ .active-analytics :any-link[role="button"][aria-expanded="true"] {
300
+ background: rgba(var(--color-grey-100), 1);
301
+ color: rgba(var(--color-grey-600), 1);
302
+ box-shadow: 0 0 0 1px rgba(var(--color-grey-200), 1) inset,
303
+ var(--box-inset-shadow-m);
304
+ }
305
+
306
+ .active-analytics button[type="reset"],
307
+ .active-analytics input[type="reset"],
308
+ .active-analytics button.is-reset,
309
+ .active-analytics input[type="submit"].is-reset,
310
+ .active-analytics input[type="button"].is-reset,
311
+ .active-analytics [role="button"].is-reset,
312
+ .active-analytics :any-link[role="button"].is-reset {
313
+ color: rgba(var(--color-red-500), 1);
314
+ }
315
+
316
+ .active-analytics button[type="reset"]:hover,
317
+ .active-analytics input[type="reset"]:hover,
318
+ .active-analytics button[type="reset"]:hover,
319
+ .active-analytics input[type="reset"]:hover,
320
+ .active-analytics button.is-reset:hover,
321
+ .active-analytics input[type="submit"].is-reset:hover,
322
+ .active-analytics input[type="button"].is-reset:hover,
323
+ .active-analytics [role="button"].is-reset:hover,
324
+ .active-analytics :any-link[role="button"].is-reset:hover,
325
+ .active-analytics button[type="reset"]:active,
326
+ .active-analytics input[type="reset"]:active,
327
+ .active-analytics button.is-reset:active,
328
+ .active-analytics input[type="submit"].is-reset:active,
329
+ .active-analytics input[type="button"].is-reset:active,
330
+ .active-analytics [role="button"].is-reset:active,
331
+ .active-analytics :any-link[role="button"].is-reset:active {
332
+ background: rgba(var(--color-red-500), 1);
333
+ color: rgba(var(--color-red-20), 1);
334
+ box-shadow: 0 0 0 1px rgba(var(--color-red-600), 1) inset,
335
+ var(--box-shadow-s);
336
+ }
337
+
338
+ .active-analytics button[type="reset"]:focus,
339
+ .active-analytics input[type="reset"]:focus,
340
+ .active-analytics button.is-reset:focus,
341
+ .active-analytics input[type="submit"].is-reset:focus,
342
+ .active-analytics input[type="button"].is-reset:focus,
343
+ .active-analytics [role="button"].is-reset:focus,
344
+ .active-analytics :any-link[role="button"].is-reset:focus {
345
+ background: rgba(var(--color-red-500), 1);
346
+ color: rgba(var(--color-red-20), 1);
347
+ outline: 2px solid rgba(var(--color-red-200), 1);
348
+ }
349
+
350
+ .active-analytics button.is-link,
351
+ .active-analytics button[type="reset"].is-link,
352
+ .active-analytics input[type="submit"].is-link,
353
+ .active-analytics input[type="button"].is-link,
354
+ .active-analytics input[type="reset"].is-link,
355
+ .active-analytics [role="button"].is-link,
356
+ .active-analytics :any-link[role="button"].is-link {
357
+ background: transparent;
358
+ color: rgba(var(--color-grey-500), 1);
359
+ text-decoration: underline;
360
+ border-color: transparent;
361
+ box-shadow: none !important;
362
+ }
363
+
364
+ .active-analytics button.is-link:hover,
365
+ .active-analytics button[type="reset"].is-link:hover,
366
+ .active-analytics input[type="submit"].is-link:hover,
367
+ .active-analytics input[type="button"].is-link:hover,
368
+ .active-analytics input[type="reset"].is-link:hover,
369
+ .active-analytics [role="button"].is-link:hover,
370
+ .active-analytics :any-link[role="button"].is-link:hover,
371
+ .active-analytics button.is-link:active,
372
+ .active-analytics button[type="reset"].is-link:active,
373
+ .active-analytics input[type="submit"].is-link:active,
374
+ .active-analytics input[type="button"].is-link:active,
375
+ .active-analytics input[type="reset"].is-link:active,
376
+ .active-analytics [role="button"].is-link:active,
377
+ .active-analytics :any-link[role="button"].is-link:active {
378
+ background: transparent;
379
+ color: rgba(var(--color-grey-700), 1);
380
+ box-shadow: none;
381
+ }
382
+
383
+ .active-analytics button.is-link:focus,
384
+ .active-analytics button[type="reset"].is-link:focus,
385
+ .active-analytics input[type="submit"].is-link:focus,
386
+ .active-analytics input[type="button"].is-link:focus,
387
+ .active-analytics input[type="reset"].is-link:focus,
388
+ .active-analytics [role="button"].is-link:focus,
389
+ .active-analytics :any-link[role="button"].is-link:focus {
390
+ color: rgba(var(--color-grey-700), 1);
391
+ }
392
+
393
+ /* FORMS */
394
+ .active-analytics form {
395
+ overflow: visible;
396
+ }
397
+
398
+ .active-analytics form > * + * {
399
+ margin-top: var(--space-3x, 1em);
400
+ }
401
+
402
+ .active-analytics form *[hidden] {
403
+ margin: 0;
404
+ }
405
+
406
+ .active-analytics label {
407
+ display: block;
408
+ line-height: var(--space-3x);
409
+ padding: 0;
410
+ text-align: left;
411
+ text-transform: uppercase;
412
+ font-size: var(--font-size-30);
413
+ font-weight: 400;
414
+ letter-spacing: 0.1rem;
415
+ color: rgba(var(--color-grey-500), 1);
416
+ -webkit-user-select: none;
417
+ -moz-user-select: none;
418
+ -ms-user-select: none;
419
+ }
420
+
421
+ .active-analytics input {
422
+ display: block;
423
+ width: 100%;
424
+ background-color: rgba(var(--color-grey-00), 1);
425
+ min-height: var(--space-5x);
426
+ padding: calc(var(--space) - 1px) calc(var(--space-2x) - 1px);
427
+ margin: 0;
428
+ border: 1px solid rgba(var(--color-grey-50), 1);
429
+ border-radius: var(--border-radius-s, 0);
430
+ outline: 0 none;
431
+ box-shadow: var(--box-inset-shadow-s);
432
+ color: rgba(var(--color-grey-600), 1);
433
+ font-family: inherit;
434
+ font-size: var(--base-font-size);
435
+ line-height: var(--space-3x);
436
+ }
437
+
438
+ .active-analytics input:focus{
439
+ outline: 0 none;
440
+ border-color: rgba(var(--color-blue-400), 1);
441
+ box-shadow:
442
+ 0 0 0 2px rgba(var(--color-blue-200), 1),
443
+ var(--box-shadow-s);
444
+ }
445
+
446
+ .active-analytics label + input {
447
+ margin-top: 0;
448
+ }
449
+
450
+ .active-analytics ::placeholder {
451
+ color: rgba(var(--color-grey-300), 1);
452
+ }
453
+
454
+ .active-analytics a:any-link {
455
+ color: rgba(var(--color-blue-500, inherit), 1);
456
+ text-decoration: underline;
457
+ }
458
+
459
+ .active-analytics a:any-link:hover {
460
+ color: rgba(var(--color-blue-600), 1);
461
+ }
462
+
463
+ .active-analytics a:any-link > * + * {
464
+ margin-left: var(--space);
465
+ text-decoration: none;
466
+ }
467
+
468
+ .active-analytics a:any-link[target="_blank"] {
469
+ padding-right: 16px;
470
+ position: relative;
471
+ display: inline-block;
472
+ }
473
+
474
+ /* Arrow to signify external links */
475
+ .active-analytics a:any-link[target="_blank"]::after,
476
+ .active-analytics a:any-link[target="_blank"]::before {
477
+ content: "";
478
+ display: block;
479
+ position: absolute;
480
+ right: 0;
481
+ }
482
+
483
+ .active-analytics a:any-link[target="_blank"]::before {
484
+ background: currentColor;
485
+ transform: rotate(-45deg);
486
+ top: 50%;
487
+ height: 2px;
488
+ width: 12px;
489
+ }
490
+
491
+ .active-analytics a:any-link[target="_blank"]::after {
492
+ width: 8px;
493
+ height: 8px;
494
+ border-right: 2px solid;
495
+ border-top: 2px solid;
496
+ top: calc(50% - 5px);
497
+ }
498
+
499
+ .active-analytics table {
500
+ width: 100%;
501
+ padding: 0;
502
+ border-spacing: 0;
503
+ }
504
+
505
+ .active-analytics th {
506
+ text-transform: uppercase;
507
+ font-weight: var(--font-weight-700);
508
+ font-size: calc(var(--base-font-size) / var(--ratio) / var(--ratio));
509
+ letter-spacing: 0.03em;
510
+ transform: translateY(2px);
511
+ padding: 12px 24px;
512
+ text-align: left;
513
+ color: rgba(var(--color-grey-500), 1);
514
+ }
515
+
516
+ .active-analytics tbody tr {
517
+ box-shadow: 0 -1px 0 0 rgba(var(--color-grey-50), 1) inset;
518
+ }
519
+
520
+ .active-analytics tbody tr:hover {
521
+ background: rgba(var(--color-grey-50), 1);
522
+ }
523
+
524
+ .active-analytics td {
525
+ color: rgba(var(--color-grey-500), 1);
526
+ padding: 12px 24px;
527
+ }
528
+
529
+ /* components/breadcrumb.css */
530
+
531
+ .active-analytics .breadcrumb ol {
532
+ margin: 0;
533
+ padding-left: 0;
534
+ list-style: none;
535
+ }
536
+
537
+ .active-analytics .breadcrumb li {
538
+ display: inline;
539
+ }
540
+
541
+ .active-analytics .breadcrumb li + li::before {
542
+ content: '';
543
+ display: inline-block;
544
+ margin: 0 var(--space);
545
+ transform: rotate(20deg);
546
+ border-right: 1px solid rgba(var(--color-grey-400), 1);
547
+ height: 0.75em;
548
+ }
549
+
550
+ .active-analytics .breadcrumb li:last-child {
551
+ color: rgba(var(--color-grey-700), 1);
552
+ font-weight: var(--font-weight-700);
553
+ }
554
+
555
+ /* components/dialog.css */
556
+
557
+ .active-analytics .dialog-backdrop {
558
+ height: 100vh;
559
+ width: 100%;
560
+ position: fixed;
561
+ top: 0;
562
+ left: 0;
563
+ background: rgba(var(--color-grey-300), .7);
564
+ z-index: var(--z-40, 90);
565
+ animation: backdrop 0.1s cubic-bezier(0.165, 0.840, 0.440, 1.000);
566
+ display: flex;
567
+ align-items: center;
568
+ justify-content: center;
569
+ }
570
+
571
+ @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
572
+ .active-analytics .dialog-backdrop {
573
+ -webkit-backdrop-filter: blur(4px);
574
+ backdrop-filter: blur(4px);
575
+ background: rgba(var(--color-grey-300), .7);
576
+ }
577
+ }
578
+
579
+ /* Modale */
580
+
581
+ .active-analytics [role="dialog"] {
582
+ position: relative;
583
+ padding: var(--space-3x);
584
+ background-color: rgba(var(--color-bg), 1);
585
+ border: 1px solid rgba(var(--color-grey-35), 1);
586
+ border-radius: var(--border-radius-m, 0);
587
+ min-width: 480px;
588
+ max-width: 100%;
589
+ max-height: 100vh;
590
+ overflow-y: auto;
591
+ animation: modale 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
592
+ }
593
+
594
+ .active-analytics [role="dialog"] > header {
595
+ width: calc(100% + var(--space-6x));
596
+ display: flex;
597
+ align-items: center;
598
+ border-radius: var(--border-radius-m, 0) var(--border-radius-m, 0) 0 0;
599
+ margin: calc(var(--space-3x) * -1) calc(var(--space-3x) * -1) calc(var(--space-3x) * 1);
600
+ padding: calc(var(--space) * 1.5 - 1px) calc(var(--space-3x) - 1px) calc(var(--space) * 1.5 - 1px);
601
+ border-bottom: 1px solid rgba(var(--color-grey-50), 1);
602
+ color: rgba(var(--color-grey-500), 1);
603
+ }
604
+
605
+ .active-analytics [role="dialog"] > header button {
606
+ margin-left: auto;
607
+ }
608
+
609
+ .active-analytics [role="dialog"] > footer {
610
+ background: rgba(var(--color-grey-50), 1);
611
+ width: calc(100% + var(--space-6x));
612
+ border-radius: 0 0 var(--border-radius-m, 0) var(--border-radius-m, 0);
613
+ margin: var(--space-3x) calc(var(--space-3x) * -1) calc(var(--space-3x) * -1);
614
+ padding: calc(var(--space) * 1.5 - 1px) calc(var(--space-3x) - 1px) calc(var(--space) * 1.5 - 1px);
615
+ border-top: 1px solid rgba(var(--color-grey-50), 1);
616
+ }
617
+
618
+ @media screen and (min-width: 640px) {
619
+ .active-analytics [role="dialog"] {
620
+ min-width: 640px;
621
+ min-height: auto;
622
+ box-shadow: var(--box-shadow-l);
623
+ background-color: rgba(var(--color-bg), 1);
624
+ }
625
+ }
626
+
627
+ @keyframes modale {
628
+ 0% {
629
+ top: -48px;
630
+ opacity: 0;
631
+ }
632
+ 100% {
633
+ top: 0;
634
+ opacity: 1;
635
+ }
636
+ }
637
+
638
+ @keyframes backdrop {
639
+ 0% {
640
+ opacity: 0;
641
+ }
642
+ 100% {
643
+ opacity: 1;
644
+ }
645
+ }
646
+ /* components/grid_auto.css */
647
+
648
+ .active-analytics .grid-auto {
649
+ --gap: var(--space-3x);
650
+ --col-min-width: calc(var(--space) * 38);
651
+ display: grid;
652
+ grid-gap: var(--gap, 0);
653
+ grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr));
654
+ width: 100%;
655
+ padding: 0;
656
+ }
657
+
658
+ .active-analytics .grid-auto > * {
659
+ list-style-type: none;
660
+ margin: 0;
661
+ }
662
+
663
+ .active-analytics .grid-auto * + *,
664
+ .active-analytics .grid-auto * + .card {
665
+ margin-top: 0;
666
+ }
667
+
668
+ .active-analytics .grid-auto + * {
669
+ margin-top: var(--space-3x);
670
+ }
671
+
672
+ /* components/group.css */
673
+
674
+ .active-analytics [role="group"] {
675
+ display: flex;
676
+ align-items: flex-end;
677
+ border-radius: var(--border-radius-s, 0);
678
+ border-radius: 4px;
679
+ max-width: 100%;
680
+ }
681
+
682
+ .active-analytics [role="group"] > * {
683
+ border-radius: 0;
684
+ margin: auto 0 0;
685
+ }
686
+
687
+ .active-analytics [role="group"] > *:first-child {
688
+ border-radius: var(--border-radius-s, 0) 0 0 var(--border-radius-s, 0);
689
+ }
690
+
691
+ .active-analytics [role="group"] > *:last-child {
692
+ border-radius: 0 var(--border-radius-s, 0) var(--border-radius-s, 0) 0;
693
+ }
694
+
695
+ .active-analytics [role="group"] > .input {
696
+ margin: auto var(--space) 0 0;
697
+ }
698
+
699
+ .active-analytics [role="group"] > .input:last-child {
700
+ margin: auto 0 0 0;
701
+ }
702
+
703
+ .active-analytics [role="group"] > label {
704
+ margin: 0;
705
+ }
706
+
707
+ .active-analytics [role="group"].is-block {
708
+ width: 100%;
709
+ }
710
+
711
+ .active-analytics [role="group"].is-block > * {
712
+ flex: 1;
713
+ }
714
+
715
+ /* components/card.css */
716
+ .active-analytics .card {
717
+ background: rgba(var(--color-grey-20), 1);
718
+ border: 0;
719
+ border-radius: var(--border-radius-s, 0);
720
+ box-shadow: 0 0 0 1px inset rgba(var(--color-grey-50), 1), var(--box-shadow-s);
721
+ padding: var(--space-3x);
722
+ list-style-type: none;
723
+ position: relative;
724
+ overflow: visible;
725
+ }
726
+
727
+ .active-analytics .card > header {
728
+ display: flex;
729
+ align-items: center;
730
+ min-height: var(--space-6x);
731
+ width: calc(100% + var(--space-6x));
732
+ border-radius: var(--border-radius-m, 0) var(--border-radius-m, 0) 0 0;
733
+ padding: var(--space) var(--space-3x);
734
+ margin: calc(var(--space-3x) * -1) calc(var(--space-3x) * -1) calc(var(--space-3x) * 1);
735
+ box-shadow: 0 1px 0 0 rgba(var(--color-grey-50), 1);
736
+ color: rgba(var(--color-grey-500), 1);
737
+ }
738
+
739
+ .active-analytics .card > header > * {
740
+ margin: 0 var(--space-1-2);
741
+ padding: 0;
742
+ text-transform: none;
743
+ letter-spacing: 0;
744
+ font-size: var(--font-size-50);
745
+ line-height: var(--space-3x);
746
+ }
747
+
748
+ .active-analytics .card > footer {
749
+ background: rgba(var(--color-grey-50), 1);
750
+ box-shadow: 0 -1px 0 0 rgba(var(--color-grey-100), .8);
751
+ border-radius: 0 0 var(--border-radius-m, 0) var(--border-radius-m, 0);
752
+ margin: var(--space-3x) calc(var(--space-3x) * -1) calc(var(--space-3x) * -1);
753
+ padding: var(--space-2x) calc(var(--space-3x) - 1px);
754
+ width: calc(100% + var(--space-6x));
755
+ }
756
+
757
+ /* components/menu.css */
758
+
759
+ .active-analytics [role="menu"] {
760
+ text-align: left;
761
+ color: rgba(var(--color-grey-500), 1);
762
+ position: relative;
763
+ list-style-type: none;
764
+ margin: 0;
765
+ padding: 6px 0 18px;
766
+ text-transform: none;
767
+ font-size: var(--font-size-50);
768
+ letter-spacing: 0.03em;
769
+ }
770
+
771
+ .active-analytics li[role="menuitem"] {
772
+ display: flex;
773
+ flex-direction: column;
774
+ }
775
+
776
+ .active-analytics a[role="menuitem"]:not(.button) {
777
+ padding: 0 24px;
778
+ margin: 0;
779
+ font-size: inherit;
780
+ text-decoration: none;
781
+ color: rgba(var(--color-grey-700), 1);
782
+ display: flex;
783
+ align-items: center;
784
+ }
785
+
786
+ .active-analytics a[role="menuitem"]:not(.button):hover {
787
+ color: rgba(var(--color-grey-800), 1);
788
+ }
789
+
790
+ .active-analytics a[role="menuitem"]:not(.button)[aria-current="true"] {
791
+ background: rgba(var(--color-grey-100), 1);
792
+ color: rgba(var(--color-blue-700), 1);
793
+ }
794
+
795
+ .active-analytics .menubutton {
796
+ position: relative;
797
+ display: inline-block;
798
+ }
799
+
800
+ .active-analytics .menubutton > button,
801
+ .active-analytics .menubutton > input[type="submit"],
802
+ .active-analytics .menubutton > input[type="button"],
803
+ .active-analytics .menubutton > input[type="reset"],
804
+ .active-analytics .menubutton > [role="button"],
805
+ .active-analytics .menubutton > :any-link[role="button"] {
806
+ position: relative;
807
+ margin: 0;
808
+ }
809
+
810
+ .active-analytics .menubutton > button:after,
811
+ .active-analytics .menubutton > input[type="submit"]:after,
812
+ .active-analytics .menubutton > input[type="button"]:after,
813
+ .active-analytics .menubutton > input[type="reset"]:after,
814
+ .active-analytics .menubutton > [role="button"]:after,
815
+ .active-analytics .menubutton > :any-link[role="button"]:after {
816
+ content: "…";
817
+ margin-left: var(--space);
818
+ }
819
+
820
+ .active-analytics .menubutton > [role="menu"] {
821
+ display: none;
822
+ position: absolute;
823
+ z-index: 1000;
824
+ top: var(--space-7x);
825
+ left: 0;
826
+ margin: 0;
827
+ padding: var(--space, 0) 0;
828
+ border-radius: var(--border-radius-m, 0);
829
+ width: auto;
830
+ background: rgba(var(--color-grey-00), 1);
831
+ box-shadow: var(--box-shadow-l);
832
+ border: 1px solid rgba(var(--color-grey-50), 1);
833
+ }
834
+
835
+ .active-analytics .menubutton > [role="menu"]:after,
836
+ .active-analytics .menubutton > [role="menu"]:before {
837
+ bottom: 100%;
838
+ left: var(--space-3x);
839
+ border: solid transparent;
840
+ content: "";
841
+ height: 0;
842
+ width: 0;
843
+ position: absolute;
844
+ pointer-events: none;
845
+ }
846
+
847
+ .active-analytics .menubutton > [role="menu"]:after {
848
+ border-color: transparent;
849
+ border-bottom-color: rgba(var(--color-grey-00), 1);
850
+ border-width: 6px;
851
+ margin-left: -6px;
852
+ }
853
+
854
+ .active-analytics .menubutton > [role="menu"]:before {
855
+ border-color: transparent;
856
+ border-bottom-color: rgba(var(--color-grey-50), 1);
857
+ border-width: 8px;
858
+ margin-left: -8px;
859
+ }
860
+
861
+ .active-analytics .menubutton > [role="menu"] [role="menuitem"] {
862
+ display: block;
863
+ padding: 0px 16px;
864
+ background: rgba(var(--color-grey-00), 1);
865
+ }
866
+
867
+ .active-analytics .menubutton > [role="menu"] [role="menuitem"]:hover,
868
+ .active-analytics .menubutton > [role="menu"] [role="menuitem"]:focus {
869
+ background: rgba(var(--color-grey-50), 1);
870
+ color: rgba(var(--color-grey-700), 1);
871
+ }
872
+
873
+ .active-analytics *[hidden=true] {
874
+ display: none;
875
+ }