active_analytics 0.2.1 → 0.3.0

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