active_analytics 0.2.1 → 0.4.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 (55) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +97 -15
  3. data/app/controllers/active_analytics/application_controller.rb +29 -6
  4. data/app/controllers/active_analytics/assets_controller.rb +36 -0
  5. data/app/controllers/active_analytics/browsers_controller.rb +27 -0
  6. data/app/controllers/active_analytics/pages_controller.rb +9 -10
  7. data/app/controllers/active_analytics/referrers_controller.rb +9 -5
  8. data/app/controllers/active_analytics/sites_controller.rb +5 -4
  9. data/app/helpers/active_analytics/browsers_helper.rb +12 -0
  10. data/app/lib/active_analytics/histogram.rb +47 -0
  11. data/app/models/active_analytics/browsers_per_day.rb +40 -0
  12. data/app/models/active_analytics/views_per_day.rb +16 -53
  13. data/app/views/active_analytics/assets/_charts.css +249 -0
  14. data/app/{assets/stylesheets/active_analytics/style.css → views/active_analytics/assets/_style.css} +36 -26
  15. data/app/views/active_analytics/assets/application.css.erb +2 -0
  16. data/app/{assets/javascripts/active_analytics → views/active_analytics/assets}/application.js +1 -3
  17. data/app/{assets/stylesheets/active_analytics → views/active_analytics/assets}/ariato.css +237 -234
  18. data/app/views/active_analytics/assets/browsers/arc.svg +1 -0
  19. data/app/views/active_analytics/assets/browsers/brave.svg +1 -0
  20. data/app/views/active_analytics/assets/browsers/chrome.svg +1 -0
  21. data/app/views/active_analytics/assets/browsers/default.svg +8 -0
  22. data/app/views/active_analytics/assets/browsers/firefox.svg +1 -0
  23. data/app/views/active_analytics/assets/browsers/internet_explorer.svg +1 -0
  24. data/app/views/active_analytics/assets/browsers/microsoft_edge.svg +1 -0
  25. data/app/views/active_analytics/assets/browsers/opera.svg +1 -0
  26. data/app/views/active_analytics/assets/browsers/safari.svg +1 -0
  27. data/app/views/active_analytics/assets/browsers/samsung_internet.svg +1 -0
  28. data/app/views/active_analytics/assets/browsers/vivaldi.svg +1 -0
  29. data/app/views/active_analytics/assets/browsers/yandex.svg +1 -0
  30. data/app/views/active_analytics/browsers/_table.html.erb +17 -0
  31. data/app/views/active_analytics/browsers/_version_table.html.erb +16 -0
  32. data/app/views/active_analytics/browsers/index.html.erb +9 -0
  33. data/app/views/active_analytics/browsers/show.html.erb +17 -0
  34. data/app/views/active_analytics/pages/_table.html.erb +6 -17
  35. data/app/views/active_analytics/pages/index.html.erb +2 -2
  36. data/app/views/active_analytics/pages/show.html.erb +7 -4
  37. data/app/views/active_analytics/referrers/_table.html.erb +9 -2
  38. data/app/views/active_analytics/referrers/index.html.erb +3 -3
  39. data/app/views/active_analytics/referrers/show.html.erb +6 -3
  40. data/app/views/active_analytics/sites/_histogram.html.erb +11 -4
  41. data/app/views/active_analytics/sites/_histogram_header.html.erb +10 -0
  42. data/app/views/active_analytics/sites/show.html.erb +9 -4
  43. data/app/views/layouts/active_analytics/_footer.html.erb +7 -7
  44. data/app/views/layouts/active_analytics/_header.html.erb +1 -3
  45. data/app/views/layouts/active_analytics/application.html.erb +5 -3
  46. data/config/routes.rb +7 -1
  47. data/db/migrate/20210303094108_create_active_analytics_views_per_days.rb +2 -3
  48. data/db/migrate/20240823150626_create_active_analytics_browsers_per_days.rb +13 -0
  49. data/lib/active_analytics/engine.rb +0 -4
  50. data/lib/active_analytics/version.rb +1 -1
  51. data/lib/active_analytics.rb +77 -3
  52. metadata +49 -12
  53. data/app/assets/stylesheets/active_analytics/application.css +0 -15
  54. data/app/assets/stylesheets/active_analytics/charts.css +0 -296
  55. /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
  }