@govtechsg/oobee 0.10.21 → 0.10.28

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 (39) hide show
  1. package/.github/workflows/docker-test.yml +1 -1
  2. package/DETAILS.md +40 -25
  3. package/Dockerfile +41 -47
  4. package/LICENSE-3RD-PARTY-REPORT.txt +448 -0
  5. package/LICENSE-3RD-PARTY.txt +19913 -0
  6. package/README.md +10 -2
  7. package/__mocks__/mock-report.html +1503 -1360
  8. package/package.json +8 -4
  9. package/scripts/decodeUnzipParse.js +29 -0
  10. package/scripts/install_oobee_dependencies.command +2 -2
  11. package/scripts/install_oobee_dependencies.ps1 +3 -3
  12. package/src/cli.ts +3 -2
  13. package/src/constants/cliFunctions.ts +16 -2
  14. package/src/constants/common.ts +29 -5
  15. package/src/constants/constants.ts +28 -26
  16. package/src/constants/questions.ts +4 -1
  17. package/src/crawlers/commonCrawlerFunc.ts +114 -152
  18. package/src/crawlers/crawlDomain.ts +25 -25
  19. package/src/crawlers/crawlIntelligentSitemap.ts +7 -1
  20. package/src/crawlers/crawlLocalFile.ts +1 -1
  21. package/src/crawlers/crawlSitemap.ts +1 -1
  22. package/src/crawlers/custom/flagUnlabelledClickableElements.ts +546 -472
  23. package/src/crawlers/customAxeFunctions.ts +1 -1
  24. package/src/index.ts +0 -2
  25. package/src/mergeAxeResults.ts +569 -219
  26. package/src/screenshotFunc/pdfScreenshotFunc.ts +3 -3
  27. package/src/static/ejs/partials/components/wcagCompliance.ejs +10 -29
  28. package/src/static/ejs/partials/footer.ejs +10 -13
  29. package/src/static/ejs/partials/scripts/categorySummary.ejs +2 -2
  30. package/src/static/ejs/partials/scripts/decodeUnzipParse.ejs +3 -0
  31. package/src/static/ejs/partials/scripts/reportSearch.ejs +1 -0
  32. package/src/static/ejs/partials/scripts/ruleOffcanvas.ejs +54 -52
  33. package/src/static/ejs/partials/styles/styles.ejs +4 -0
  34. package/src/static/ejs/partials/summaryMain.ejs +15 -42
  35. package/src/static/ejs/report.ejs +21 -12
  36. package/src/utils.ts +10 -2
  37. package/src/xPathToCss.ts +186 -0
  38. package/a11y-scan-results.zip +0 -0
  39. package/src/types/xpath-to-css.d.ts +0 -3
package/__mocks__/mock-report.html CHANGED
@@ -1,1401 +1,1543 @@
1
1
  <!doctype html>
2
2
  <html lang="en">
3
- <head lang="en">
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <title>Accessibility Report</title>
7
- <link
8
- href="https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700&family=Ubuntu:wght@500&display=swap"
9
- rel="stylesheet"
10
- />
11
- <style>
12
- .container-fluid {
13
- width: 100%;
14
- padding-right: 15px;
15
- padding-left: 15px;
16
- margin-right: auto;
17
- margin-left: auto;
3
+
4
+ <head lang="en">
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
7
+ <title>Accessibility Report</title>
8
+ <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700&family=Ubuntu:wght@500&display=swap"
9
+ rel="stylesheet" />
10
+ <style>
11
+ .container-fluid {
12
+ width: 100%;
13
+ padding-right: 15px;
14
+ padding-left: 15px;
15
+ margin-right: auto;
16
+ margin-left: auto;
17
+ }
18
+
19
+ .row {
20
+ display: -ms-flexbox;
21
+ display: flex;
22
+ -ms-flex-wrap: wrap;
23
+ flex-wrap: wrap;
24
+ margin-right: -15px;
25
+ margin-left: -15px;
26
+ }
27
+
28
+ .col-12,
29
+ .col-md-8,
30
+ .col-sm-12,
31
+ .col-sm-6 {
32
+ position: relative;
33
+ width: 100%;
34
+ padding-right: 15px;
35
+ padding-left: 15px;
36
+ }
37
+
38
+ .col-12 {
39
+ -ms-flex: 0 0 100%;
40
+ flex: 0 0 100%;
41
+ max-width: 100%;
42
+ }
43
+
44
+ @media (min-width: 768px) {
45
+ .col-md-8 {
46
+ -ms-flex: 0 0 66.666667%;
47
+ flex: 0 0 66.666667%;
48
+ max-width: 66.666667%;
18
49
  }
19
- .row {
20
- display: -ms-flexbox;
21
- display: flex;
22
- -ms-flex-wrap: wrap;
23
- flex-wrap: wrap;
24
- margin-right: -15px;
25
- margin-left: -15px;
50
+
51
+ .col-md-6 {
52
+ -ms-flex: 0 0 50%;
53
+ flex: 0 0 50%;
54
+ max-width: 50%;
26
55
  }
27
- .col-12,
28
- .col-md-8,
29
- .col-sm-12,
56
+
57
+ .col-md-4 {
58
+ -ms-flex: 0 0 33.333333%;
59
+ flex: 0 0 33.333333%;
60
+ max-width: 33.333333%;
61
+ }
62
+ }
63
+
64
+ @media (min-width: 576px) {
30
65
  .col-sm-6 {
31
- position: relative;
32
- width: 100%;
33
- padding-right: 15px;
34
- padding-left: 15px;
66
+ -ms-flex: 0 0 50%;
67
+ flex: 0 0 50%;
68
+ max-width: 50%;
35
69
  }
36
- .col-12 {
70
+
71
+ .col-sm-12 {
37
72
  -ms-flex: 0 0 100%;
38
73
  flex: 0 0 100%;
39
74
  max-width: 100%;
40
75
  }
41
- @media (min-width: 768px) {
42
- .col-md-8 {
43
- -ms-flex: 0 0 66.666667%;
44
- flex: 0 0 66.666667%;
45
- max-width: 66.666667%;
46
- }
47
- .col-md-6 {
48
- -ms-flex: 0 0 50%;
49
- flex: 0 0 50%;
50
- max-width: 50%;
51
- }
52
- .col-md-4 {
53
- -ms-flex: 0 0 33.333333%;
54
- flex: 0 0 33.333333%;
55
- max-width: 33.333333%;
56
- }
57
- }
58
- @media (min-width: 576px) {
59
- .col-sm-6 {
60
- -ms-flex: 0 0 50%;
61
- flex: 0 0 50%;
62
- max-width: 50%;
63
- }
64
- .col-sm-12 {
65
- -ms-flex: 0 0 100%;
66
- flex: 0 0 100%;
67
- max-width: 100%;
68
- }
69
- }
70
- .pb-2 {
71
- padding-bottom: 0.5rem !important;
72
- }
73
- .pt-2 {
74
- padding-top: 0.5rem !important;
75
- }
76
- .pl-3 {
77
- padding-left: 1rem !important;
78
- }
79
- .pb-4 {
80
- padding-bottom: 1.5rem !important;
81
- }
82
- .pt-4 {
83
- padding-top: 1.5rem !important;
84
- }
85
- .mb-0 {
86
- margin-bottom: 0 !important;
87
- }
88
- .d-flex {
89
- display: -ms-flexbox !important;
90
- display: flex !important;
91
- }
92
- .flex-shrink-0 {
93
- -ms-flex-negative: 0 !important;
94
- flex-shrink: 0 !important;
95
- }
96
- .text-center {
97
- text-align: center !important;
98
- }
99
- @media (min-width: 576px) {
100
- .text-sm-left {
101
- text-align: left !important;
102
- }
103
- .text-sm-right {
104
- text-align: right !important;
105
- }
106
- .d-sm-none {
107
- display: none !important;
108
- }
109
- }
110
- .form-control {
111
- display: block;
112
- width: 100%;
113
- height: calc(1.5em + 0.75rem + 2px);
114
- padding: 0.375rem 0.75rem;
115
- font-size: 1rem;
116
- font-weight: 400;
117
- line-height: 1.5;
118
- color: #495057;
119
- background-color: #fff;
120
- background-clip: padding-box;
121
- border: 1px solid #ced4da;
122
- border-radius: 0.25rem;
123
- transition:
124
- border-color 0.15s ease-in-out,
125
- box-shadow 0.15s ease-in-out;
126
- }
127
- .form-control-sm {
128
- height: calc(1.5em + 0.5rem + 2px);
129
- padding: 0.25rem 0.5rem;
130
- font-size: 0.875rem;
131
- line-height: 1.5;
132
- border-radius: 0.2rem;
133
- }
134
- .tooltip {
135
- position: absolute;
136
- z-index: 1070;
137
- display: block;
138
- margin: 0;
139
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
140
- 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
141
- 'Noto Color Emoji';
142
- font-style: normal;
143
- font-weight: 400;
144
- line-height: 1.5;
145
- text-align: left;
146
- text-align: start;
147
- text-decoration: none;
148
- text-shadow: none;
149
- text-transform: none;
150
- letter-spacing: normal;
151
- word-break: normal;
152
- word-spacing: normal;
153
- white-space: normal;
154
- line-break: auto;
155
- font-size: 0.875rem;
156
- word-wrap: break-word;
157
- opacity: 0;
158
- }
159
- .tooltip.show {
160
- opacity: 0.9;
161
- }
162
- .bs-tooltip-auto[x-placement^='bottom'],
163
- .bs-tooltip-bottom {
164
- padding: 0.4rem 0;
165
- }
166
- .bs-tooltip-bottom .arrow,
167
- bs-tooltip-auto[x-placement^='bottom'] .arrow {
168
- top: 0;
169
- }
170
- .bs-tooltip-auto[x-placement^='top'] .arrow,
171
- .bs-tooltip-top .arrow {
172
- bottom: 0;
173
- }
174
- .tooltip .arrow {
175
- position: absolute;
176
- display: block;
177
- width: 0.8rem;
178
- height: 0.4rem;
179
- }
180
- .tooltip .arrow::before {
181
- position: absolute;
182
- content: '';
183
- border-color: transparent;
184
- border-style: solid;
185
- }
186
- .bs-tooltip-auto[x-placement^='bottom'] .arrow::before,
187
- .bs-tooltip-bottom .arrow::before {
188
- bottom: 0;
189
- border-width: 0 0.4rem 0.4rem;
190
- border-bottom-color: #000;
191
- }
192
- .bs-tooltip-auto[x-placement^='top'] .arrow::before,
193
- .bs-tooltip-top .arrow::before {
194
- top: 0;
195
- border-width: 0.4rem 0.4rem 0;
196
- border-top-color: #000;
197
- }
198
- .bs-tooltip-auto[x-placement^='top'],
199
- .bs-tooltip-top {
200
- padding: 0.4rem 0;
201
- padding-top: 0.4rem;
202
- padding-right: 0;
203
- padding-bottom: 0.4rem;
204
- padding-left: 0;
205
- }
206
- .tooltip-inner {
207
- max-width: 200px;
208
- padding: 0.25rem 0.5rem;
209
- color: #fff;
210
- text-align: center;
211
- background-color: #000;
212
- border-radius: 0.25rem;
213
- }
214
- div.dataTables_wrapper div.dataTables_filter {
215
- text-align: right;
216
- }
217
- div.dataTables_wrapper div.dataTables_filter label {
218
- font-weight: 400;
219
- white-space: nowrap;
220
- text-align: left;
221
- }
222
- div.dataTables_wrapper div.dataTables_filter input {
223
- margin-left: 0.5em;
224
- display: inline-block;
225
- width: auto;
226
- }
227
- table.dataTable {
228
- clear: both;
229
- margin-top: 6px !important;
230
- margin-bottom: 6px !important;
231
- max-width: none !important;
232
- border-collapse: separate !important;
233
- border-spacing: 0;
234
- }
235
- div.dataTables_scrollBody table {
236
- border-top: none;
237
- margin-top: 0 !important;
238
- margin-bottom: 0 !important;
239
- }
240
- table.dataTable td,
241
- table.dataTable th {
242
- -webkit-box-sizing: content-box;
243
- box-sizing: content-box;
244
- }
245
- div.dataTables_scrollBody table tbody tr:first-child td,
246
- div.dataTables_scrollBody table tbody tr:first-child th {
247
- border-top: none;
248
- position: relative;
249
- }
250
- div.dataTables_scrollHead table.dataTable {
251
- margin-bottom: 0 !important;
252
- }
253
- table.dataTable thead .sorting,
254
- table.dataTable thead .sorting_asc,
255
- table.dataTable thead .sorting_asc_disabled,
256
- table.dataTable thead .sorting_desc,
257
- table.dataTable thead .sorting_desc_disabled {
258
- cursor: pointer;
259
- position: relative;
260
- }
261
- table.dataTable thead > tr > td.sorting,
262
- table.dataTable thead > tr > td.sorting_asc,
263
- table.dataTable thead > tr > td.sorting_desc,
264
- table.dataTable thead > tr > th.sorting,
265
- table.dataTable thead > tr > th.sorting_asc,
266
- table.dataTable thead > tr > th.sorting_desc {
267
- padding-right: 30px;
268
- }
269
- table.dataTable thead .sorting:after,
270
- table.dataTable thead .sorting:before,
271
- table.dataTable thead .sorting_asc:after,
272
- table.dataTable thead .sorting_asc:before,
273
- table.dataTable thead .sorting_asc_disabled:after,
274
- table.dataTable thead .sorting_asc_disabled:before,
275
- table.dataTable thead .sorting_desc:after,
276
- table.dataTable thead .sorting_desc:before,
277
- table.dataTable thead .sorting_desc_disabled:after,
278
- table.dataTable thead .sorting_desc_disabled:before {
279
- position: absolute;
280
- bottom: 0.9em;
281
- display: block;
282
- opacity: 0.3;
283
- }
284
- table.dataTable thead .sorting:before,
285
- table.dataTable thead .sorting_asc:before,
286
- table.dataTable thead .sorting_asc_disabled:before,
287
- table.dataTable thead .sorting_desc:before,
288
- table.dataTable thead .sorting_desc_disabled:before {
289
- right: 1em;
290
- content: '\2191';
291
- }
292
- table.dataTable thead .sorting:after,
293
- table.dataTable thead .sorting_asc:after,
294
- table.dataTable thead .sorting_asc_disabled:after,
295
- table.dataTable thead .sorting_desc:after,
296
- table.dataTable thead .sorting_desc_disabled:after {
297
- right: 0.5em;
298
- content: '\2193';
299
- }
300
- table.dataTable tbody td.select-checkbox:before,
301
- table.dataTable tbody th.select-checkbox:before {
302
- content: ' ';
303
- margin-top: -6px;
304
- margin-left: -11px;
305
- border: 1px solid #000;
306
- border-radius: 3px;
307
- }
308
- table.dataTable tbody td.select-checkbox:after,
309
- table.dataTable tbody td.select-checkbox:before,
310
- table.dataTable tbody th.select-checkbox:after,
311
- table.dataTable tbody th.select-checkbox:before {
312
- display: block;
313
- position: absolute;
314
- top: 1.2em;
315
- left: 50%;
316
- width: 12px;
317
- height: 12px;
318
- box-sizing: border-box;
319
- }
320
- table.dataTable tr.selected td.select-checkbox:after,
321
- table.dataTable tr.selected th.select-checkbox:after {
322
- content: '\2714';
323
- margin-top: -11px;
324
- margin-left: -4px;
325
- text-align: center;
326
- text-shadow:
327
- 1px 1px #b0bed9,
328
- -1px -1px #b0bed9,
329
- 1px -1px #b0bed9,
330
- -1px 1px #b0bed9;
331
- }
332
- table.dataTable tbody td.select-checkbox,
333
- table.dataTable tbody th.select-checkbox {
334
- position: relative;
335
- }
336
- div.dataTables_wrapper div.dataTables_info {
337
- padding-top: 0.85em;
338
- white-space: nowrap;
339
- }
340
- table.dataTable thead .sorting:before,
341
- table.dataTable thead .sorting_asc:before,
342
- table.dataTable thead .sorting_asc_disabled:before,
343
- table.dataTable thead .sorting_desc:before,
344
- table.dataTable thead .sorting_desc_disabled:before {
345
- right: 1em;
346
- content: '\2191';
347
- }
348
- table.dataTable thead .sorting:after,
349
- table.dataTable thead .sorting_asc:after,
350
- table.dataTable thead .sorting_asc_disabled:after,
351
- table.dataTable thead .sorting_desc:after,
352
- table.dataTable thead .sorting_desc_disabled:after {
353
- right: 0.5em;
354
- content: '\2193';
355
- }
356
- table.dataTable thead .sorting:after,
357
- table.dataTable thead .sorting:before,
358
- table.dataTable thead .sorting_asc:after,
359
- table.dataTable thead .sorting_asc:before,
360
- table.dataTable thead .sorting_asc_disabled:after,
361
- table.dataTable thead .sorting_asc_disabled:before,
362
- table.dataTable thead .sorting_desc:after,
363
- table.dataTable thead .sorting_desc:before,
364
- table.dataTable thead .sorting_desc_disabled:after,
365
- table.dataTable thead .sorting_desc_disabled:before {
366
- position: absolute;
367
- bottom: 0.9em;
368
- display: block;
369
- opacity: 0.3;
370
- }
371
- table.dataTable thead .sorting_asc:before,
372
- table.dataTable thead .sorting_desc:after {
373
- opacity: 1;
374
- }
375
- table.dataTable thead .sorting_asc:before,
376
- table.dataTable thead .sorting_desc:after {
377
- opacity: 1;
378
- }
379
- *,
380
- ::after,
381
- ::before {
382
- box-sizing: border-box;
383
- }
384
- body,
385
- html {
386
- font-family: Lato, sans-serif;
387
- background-color: #f6f8f9;
388
- color: #444;
389
- }
390
- body {
391
- display: flex;
392
- -webkit-box-orient: vertical;
393
- -webkit-box-direction: normal;
394
- -webkit-flex-direction: column;
395
- -ms-flex-direction: column;
396
- flex-direction: column;
397
- -webkit-box-flex: 1;
398
- -webkit-flex: 1 0 auto;
399
- -ms-flex: 1 0 auto;
400
- flex: 1 0 auto;
401
- min-height: 100vh;
402
- line-height: 1.5;
403
- margin: 0;
404
- text-align: left;
405
- }
406
- body.dark {
407
- background-color: #121212 !important;
408
- color: #e1e1e1;
409
- }
410
- h1 {
411
- font-family: Ubuntu, sans-serif;
412
- font-size: 28px;
413
- font-weight: 700;
414
- margin-top: 0;
415
- margin-bottom: 0.5rem;
416
- font-weight: 500;
417
- line-height: 1.2;
418
- color: #000;
419
- }
420
- body.dark h1 {
421
- color: #fff;
422
- }
423
- p {
424
- font-size: 16px;
425
- margin-top: 0;
426
- margin-bottom: 1rem;
427
- }
428
- a {
429
- color: #0b02b5;
430
- text-decoration: none;
431
- }
432
- body.dark a {
433
- color: #a68fce !important;
434
- }
435
- a:hover {
436
- color: #08017e;
437
- text-decoration: none;
438
- }
439
- body.dark a:hover {
440
- color: #cfcdfe !important;
441
- }
442
- svg {
443
- overflow: hidden;
444
- vertical-align: middle;
445
- }
446
- hr {
447
- margin-top: 1rem;
448
- margin-bottom: 1rem;
449
- border: 0;
450
- border-top: 1px solid rgba(0, 0, 0, 0.1);
451
- }
452
- body.dark hr {
453
- border-color: #383838;
454
- }
455
- label {
456
- display: inline-block;
457
- margin-bottom: 0.5rem;
458
- }
459
- input {
460
- margin: 0;
461
- font-family: inherit;
462
- font-size: inherit;
463
- line-height: inherit;
464
- }
465
- .form-control:focus {
466
- color: #444;
467
- background-color: #fff;
468
- border-color: #0b02b5;
469
- box-shadow: none;
470
- outline: 0;
471
- }
472
- .form-control-sm {
473
- font-size: 16px;
76
+ }
77
+
78
+ .pb-2 {
79
+ padding-bottom: 0.5rem !important;
80
+ }
81
+
82
+ .pt-2 {
83
+ padding-top: 0.5rem !important;
84
+ }
85
+
86
+ .pl-3 {
87
+ padding-left: 1rem !important;
88
+ }
89
+
90
+ .pb-4 {
91
+ padding-bottom: 1.5rem !important;
92
+ }
93
+
94
+ .pt-4 {
95
+ padding-top: 1.5rem !important;
96
+ }
97
+
98
+ .mb-0 {
99
+ margin-bottom: 0 !important;
100
+ }
101
+
102
+ .d-flex {
103
+ display: -ms-flexbox !important;
104
+ display: flex !important;
105
+ }
106
+
107
+ .flex-shrink-0 {
108
+ -ms-flex-negative: 0 !important;
109
+ flex-shrink: 0 !important;
110
+ }
111
+
112
+ .text-center {
113
+ text-align: center !important;
114
+ }
115
+
116
+ @media (min-width: 576px) {
117
+ .text-sm-left {
118
+ text-align: left !important;
474
119
  }
475
- .header {
476
- background-color: #fff;
477
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
120
+
121
+ .text-sm-right {
122
+ text-align: right !important;
478
123
  }
479
- body.dark .header {
480
- background-color: #272727;
124
+
125
+ .d-sm-none {
126
+ display: none !important;
481
127
  }
128
+ }
129
+
130
+ .form-control {
131
+ display: block;
132
+ width: 100%;
133
+ height: calc(1.5em + 0.75rem + 2px);
134
+ padding: 0.375rem 0.75rem;
135
+ font-size: 1rem;
136
+ font-weight: 400;
137
+ line-height: 1.5;
138
+ color: #495057;
139
+ background-color: #fff;
140
+ background-clip: padding-box;
141
+ border: 1px solid #ced4da;
142
+ border-radius: 0.25rem;
143
+ transition:
144
+ border-color 0.15s ease-in-out,
145
+ box-shadow 0.15s ease-in-out;
146
+ }
147
+
148
+ .form-control-sm {
149
+ height: calc(1.5em + 0.5rem + 2px);
150
+ padding: 0.25rem 0.5rem;
151
+ font-size: 0.875rem;
152
+ line-height: 1.5;
153
+ border-radius: 0.2rem;
154
+ }
155
+
156
+ .tooltip {
157
+ position: absolute;
158
+ z-index: 1070;
159
+ display: block;
160
+ margin: 0;
161
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
162
+ 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
163
+ 'Noto Color Emoji';
164
+ font-style: normal;
165
+ font-weight: 400;
166
+ line-height: 1.5;
167
+ text-align: left;
168
+ text-align: start;
169
+ text-decoration: none;
170
+ text-shadow: none;
171
+ text-transform: none;
172
+ letter-spacing: normal;
173
+ word-break: normal;
174
+ word-spacing: normal;
175
+ white-space: normal;
176
+ line-break: auto;
177
+ font-size: 0.875rem;
178
+ word-wrap: break-word;
179
+ opacity: 0;
180
+ }
181
+
182
+ .tooltip.show {
183
+ opacity: 0.9;
184
+ }
185
+
186
+ .bs-tooltip-auto[x-placement^='bottom'],
187
+ .bs-tooltip-bottom {
188
+ padding: 0.4rem 0;
189
+ }
190
+
191
+ .bs-tooltip-bottom .arrow,
192
+ bs-tooltip-auto[x-placement^='bottom'] .arrow {
193
+ top: 0;
194
+ }
195
+
196
+ .bs-tooltip-auto[x-placement^='top'] .arrow,
197
+ .bs-tooltip-top .arrow {
198
+ bottom: 0;
199
+ }
200
+
201
+ .tooltip .arrow {
202
+ position: absolute;
203
+ display: block;
204
+ width: 0.8rem;
205
+ height: 0.4rem;
206
+ }
207
+
208
+ .tooltip .arrow::before {
209
+ position: absolute;
210
+ content: '';
211
+ border-color: transparent;
212
+ border-style: solid;
213
+ }
214
+
215
+ .bs-tooltip-auto[x-placement^='bottom'] .arrow::before,
216
+ .bs-tooltip-bottom .arrow::before {
217
+ bottom: 0;
218
+ border-width: 0 0.4rem 0.4rem;
219
+ border-bottom-color: #000;
220
+ }
221
+
222
+ .bs-tooltip-auto[x-placement^='top'] .arrow::before,
223
+ .bs-tooltip-top .arrow::before {
224
+ top: 0;
225
+ border-width: 0.4rem 0.4rem 0;
226
+ border-top-color: #000;
227
+ }
228
+
229
+ .bs-tooltip-auto[x-placement^='top'],
230
+ .bs-tooltip-top {
231
+ padding: 0.4rem 0;
232
+ padding-top: 0.4rem;
233
+ padding-right: 0;
234
+ padding-bottom: 0.4rem;
235
+ padding-left: 0;
236
+ }
237
+
238
+ .tooltip-inner {
239
+ max-width: 200px;
240
+ padding: 0.25rem 0.5rem;
241
+ color: #fff;
242
+ text-align: center;
243
+ background-color: #000;
244
+ border-radius: 0.25rem;
245
+ }
246
+
247
+ div.dataTables_wrapper div.dataTables_filter {
248
+ text-align: right;
249
+ }
250
+
251
+ div.dataTables_wrapper div.dataTables_filter label {
252
+ font-weight: 400;
253
+ white-space: nowrap;
254
+ text-align: left;
255
+ }
256
+
257
+ div.dataTables_wrapper div.dataTables_filter input {
258
+ margin-left: 0.5em;
259
+ display: inline-block;
260
+ width: auto;
261
+ }
262
+
263
+ table.dataTable {
264
+ clear: both;
265
+ margin-top: 6px !important;
266
+ margin-bottom: 6px !important;
267
+ max-width: none !important;
268
+ border-collapse: separate !important;
269
+ border-spacing: 0;
270
+ }
271
+
272
+ div.dataTables_scrollBody table {
273
+ border-top: none;
274
+ margin-top: 0 !important;
275
+ margin-bottom: 0 !important;
276
+ }
277
+
278
+ table.dataTable td,
279
+ table.dataTable th {
280
+ -webkit-box-sizing: content-box;
281
+ box-sizing: content-box;
282
+ }
283
+
284
+ div.dataTables_scrollBody table tbody tr:first-child td,
285
+ div.dataTables_scrollBody table tbody tr:first-child th {
286
+ border-top: none;
287
+ position: relative;
288
+ }
289
+
290
+ div.dataTables_scrollHead table.dataTable {
291
+ margin-bottom: 0 !important;
292
+ }
293
+
294
+ table.dataTable thead .sorting,
295
+ table.dataTable thead .sorting_asc,
296
+ table.dataTable thead .sorting_asc_disabled,
297
+ table.dataTable thead .sorting_desc,
298
+ table.dataTable thead .sorting_desc_disabled {
299
+ cursor: pointer;
300
+ position: relative;
301
+ }
302
+
303
+ table.dataTable thead>tr>td.sorting,
304
+ table.dataTable thead>tr>td.sorting_asc,
305
+ table.dataTable thead>tr>td.sorting_desc,
306
+ table.dataTable thead>tr>th.sorting,
307
+ table.dataTable thead>tr>th.sorting_asc,
308
+ table.dataTable thead>tr>th.sorting_desc {
309
+ padding-right: 30px;
310
+ }
311
+
312
+ table.dataTable thead .sorting:after,
313
+ table.dataTable thead .sorting:before,
314
+ table.dataTable thead .sorting_asc:after,
315
+ table.dataTable thead .sorting_asc:before,
316
+ table.dataTable thead .sorting_asc_disabled:after,
317
+ table.dataTable thead .sorting_asc_disabled:before,
318
+ table.dataTable thead .sorting_desc:after,
319
+ table.dataTable thead .sorting_desc:before,
320
+ table.dataTable thead .sorting_desc_disabled:after,
321
+ table.dataTable thead .sorting_desc_disabled:before {
322
+ position: absolute;
323
+ bottom: 0.9em;
324
+ display: block;
325
+ opacity: 0.3;
326
+ }
327
+
328
+ table.dataTable thead .sorting:before,
329
+ table.dataTable thead .sorting_asc:before,
330
+ table.dataTable thead .sorting_asc_disabled:before,
331
+ table.dataTable thead .sorting_desc:before,
332
+ table.dataTable thead .sorting_desc_disabled:before {
333
+ right: 1em;
334
+ content: '\2191';
335
+ }
336
+
337
+ table.dataTable thead .sorting:after,
338
+ table.dataTable thead .sorting_asc:after,
339
+ table.dataTable thead .sorting_asc_disabled:after,
340
+ table.dataTable thead .sorting_desc:after,
341
+ table.dataTable thead .sorting_desc_disabled:after {
342
+ right: 0.5em;
343
+ content: '\2193';
344
+ }
345
+
346
+ table.dataTable tbody td.select-checkbox:before,
347
+ table.dataTable tbody th.select-checkbox:before {
348
+ content: ' ';
349
+ margin-top: -6px;
350
+ margin-left: -11px;
351
+ border: 1px solid #000;
352
+ border-radius: 3px;
353
+ }
354
+
355
+ table.dataTable tbody td.select-checkbox:after,
356
+ table.dataTable tbody td.select-checkbox:before,
357
+ table.dataTable tbody th.select-checkbox:after,
358
+ table.dataTable tbody th.select-checkbox:before {
359
+ display: block;
360
+ position: absolute;
361
+ top: 1.2em;
362
+ left: 50%;
363
+ width: 12px;
364
+ height: 12px;
365
+ box-sizing: border-box;
366
+ }
367
+
368
+ table.dataTable tr.selected td.select-checkbox:after,
369
+ table.dataTable tr.selected th.select-checkbox:after {
370
+ content: '\2714';
371
+ margin-top: -11px;
372
+ margin-left: -4px;
373
+ text-align: center;
374
+ text-shadow:
375
+ 1px 1px #b0bed9,
376
+ -1px -1px #b0bed9,
377
+ 1px -1px #b0bed9,
378
+ -1px 1px #b0bed9;
379
+ }
380
+
381
+ table.dataTable tbody td.select-checkbox,
382
+ table.dataTable tbody th.select-checkbox {
383
+ position: relative;
384
+ }
385
+
386
+ div.dataTables_wrapper div.dataTables_info {
387
+ padding-top: 0.85em;
388
+ white-space: nowrap;
389
+ }
390
+
391
+ table.dataTable thead .sorting:before,
392
+ table.dataTable thead .sorting_asc:before,
393
+ table.dataTable thead .sorting_asc_disabled:before,
394
+ table.dataTable thead .sorting_desc:before,
395
+ table.dataTable thead .sorting_desc_disabled:before {
396
+ right: 1em;
397
+ content: '\2191';
398
+ }
399
+
400
+ table.dataTable thead .sorting:after,
401
+ table.dataTable thead .sorting_asc:after,
402
+ table.dataTable thead .sorting_asc_disabled:after,
403
+ table.dataTable thead .sorting_desc:after,
404
+ table.dataTable thead .sorting_desc_disabled:after {
405
+ right: 0.5em;
406
+ content: '\2193';
407
+ }
408
+
409
+ table.dataTable thead .sorting:after,
410
+ table.dataTable thead .sorting:before,
411
+ table.dataTable thead .sorting_asc:after,
412
+ table.dataTable thead .sorting_asc:before,
413
+ table.dataTable thead .sorting_asc_disabled:after,
414
+ table.dataTable thead .sorting_asc_disabled:before,
415
+ table.dataTable thead .sorting_desc:after,
416
+ table.dataTable thead .sorting_desc:before,
417
+ table.dataTable thead .sorting_desc_disabled:after,
418
+ table.dataTable thead .sorting_desc_disabled:before {
419
+ position: absolute;
420
+ bottom: 0.9em;
421
+ display: block;
422
+ opacity: 0.3;
423
+ }
424
+
425
+ table.dataTable thead .sorting_asc:before,
426
+ table.dataTable thead .sorting_desc:after {
427
+ opacity: 1;
428
+ }
429
+
430
+ table.dataTable thead .sorting_asc:before,
431
+ table.dataTable thead .sorting_desc:after {
432
+ opacity: 1;
433
+ }
434
+
435
+ *,
436
+ ::after,
437
+ ::before {
438
+ box-sizing: border-box;
439
+ }
440
+
441
+ body,
442
+ html {
443
+ font-family: Lato, sans-serif;
444
+ background-color: #f6f8f9;
445
+ color: #444;
446
+ }
447
+
448
+ body {
449
+ display: flex;
450
+ -webkit-box-orient: vertical;
451
+ -webkit-box-direction: normal;
452
+ -webkit-flex-direction: column;
453
+ -ms-flex-direction: column;
454
+ flex-direction: column;
455
+ -webkit-box-flex: 1;
456
+ -webkit-flex: 1 0 auto;
457
+ -ms-flex: 1 0 auto;
458
+ flex: 1 0 auto;
459
+ min-height: 100vh;
460
+ line-height: 1.5;
461
+ margin: 0;
462
+ text-align: left;
463
+ }
464
+
465
+ body.dark {
466
+ background-color: #121212 !important;
467
+ color: #e1e1e1;
468
+ }
469
+
470
+ h1 {
471
+ font-family: Ubuntu, sans-serif;
472
+ font-size: 28px;
473
+ font-weight: 700;
474
+ margin-top: 0;
475
+ margin-bottom: 0.5rem;
476
+ font-weight: 500;
477
+ line-height: 1.2;
478
+ color: #000;
479
+ }
480
+
481
+ body.dark h1 {
482
+ color: #fff;
483
+ }
484
+
485
+ p {
486
+ font-size: 16px;
487
+ margin-top: 0;
488
+ margin-bottom: 1rem;
489
+ }
490
+
491
+ a {
492
+ color: #0b02b5;
493
+ text-decoration: none;
494
+ }
495
+
496
+ body.dark a {
497
+ color: #a68fce !important;
498
+ }
499
+
500
+ a:hover {
501
+ color: #08017e;
502
+ text-decoration: none;
503
+ }
504
+
505
+ body.dark a:hover {
506
+ color: #cfcdfe !important;
507
+ }
508
+
509
+ svg {
510
+ overflow: hidden;
511
+ vertical-align: middle;
512
+ }
513
+
514
+ hr {
515
+ margin-top: 1rem;
516
+ margin-bottom: 1rem;
517
+ border: 0;
518
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
519
+ }
520
+
521
+ body.dark hr {
522
+ border-color: #383838;
523
+ }
524
+
525
+ label {
526
+ display: inline-block;
527
+ margin-bottom: 0.5rem;
528
+ }
529
+
530
+ input {
531
+ margin: 0;
532
+ font-family: inherit;
533
+ font-size: inherit;
534
+ line-height: inherit;
535
+ }
536
+
537
+ .form-control:focus {
538
+ color: #444;
539
+ background-color: #fff;
540
+ border-color: #0b02b5;
541
+ box-shadow: none;
542
+ outline: 0;
543
+ }
544
+
545
+ .form-control-sm {
546
+ font-size: 16px;
547
+ }
548
+
549
+ .header {
550
+ background-color: #fff;
551
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
552
+ }
553
+
554
+ body.dark .header {
555
+ background-color: #272727;
556
+ }
557
+
558
+ .header-meta {
559
+ text-align: right;
560
+ }
561
+
562
+ @media (max-width: 767px) {
482
563
  .header-meta {
483
- text-align: right;
484
- }
485
- @media (max-width: 767px) {
486
- .header-meta {
487
- border-top: 1px solid #e1e7eb;
488
- padding-top: 1.5rem !important;
489
- margin-top: 1.5rem !important;
490
- }
491
- }
492
- .show-ondark {
493
- max-height: 0;
494
- overflow: hidden;
495
- padding-top: 0;
496
- padding-bottom: 0;
497
- border-bottom: 1px solid #e1e7eb;
498
- }
499
- body.dark .show-ondark {
500
- max-height: 100px;
501
- padding-top: 0.5rem;
502
- padding-bottom: 0.5rem;
503
- border-bottom: 1px solid #383838;
504
- -webkit-transition: max-height 0.8s;
505
- -moz-transition: max-height 0.8s;
506
- transition: max-height 0.8s;
507
- }
508
- .main {
509
- -webkit-box-flex: 1;
510
- -webkit-flex: 1 0 auto;
511
- -ms-flex: 1 0 auto;
512
- flex: 1 0 auto;
513
- width: 100%;
514
- }
515
- .footer {
516
- -webkit-box-flex: 0;
517
- -webkit-flex: none;
518
- -ms-flex: none;
519
- flex: none;
520
- background-color: #fff;
521
- box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.1);
522
- }
523
- body.dark .footer {
524
- background-color: #272727;
525
- }
526
- #oobee-table {
527
- background-color: #fff;
528
- width: 100%;
529
- }
530
- body.dark #oobee-table {
531
- background-color: #272727;
532
- }
533
- table.dataTable {
534
- margin-top: 0 !important;
535
- }
536
- .dataTables_scroll {
537
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
538
- background-color: #fff;
539
- }
540
- body.dark .dataTables_scroll {
541
- background-color: #1e1e1e;
542
- }
543
- tbody > tr {
544
- vertical-align: top;
545
- }
546
- tbody > tr:hover {
547
- background-color: #f0f0ff;
548
- }
549
- body.dark tbody > tr:hover {
550
- background-color: #303033;
551
- }
552
- body.dark div.dataTables_wrapper div.dataTables_filter input {
553
- border-color: #383838;
554
- background-color: #333;
555
- color: #e1e1e1;
556
- }
557
- th {
558
- height: 47px;
559
- color: #000;
560
- background-color: #fff;
561
- border-bottom: 2px solid #0b02b5 !important;
562
- padding-left: 16px;
563
- font-weight: 600;
564
- }
565
- body.dark th {
566
- border-bottom: 2px solid #a68fce !important;
567
- background-color: #272727;
568
- color: #e1e1e1;
569
- }
570
- th.sorting_disabled {
571
- padding-right: 16px;
572
- }
573
- td {
574
- padding-top: 12px;
575
- padding-bottom: 12px;
576
- padding-left: 16px;
577
- padding-right: 16px;
578
564
  border-top: 1px solid #e1e7eb;
579
- border-bottom: 1px solid #e1e7eb;
580
- }
581
- body.dark td {
582
- border-top: 1px solid #383838;
583
- border-bottom: 1px solid #383838;
584
- }
585
- .dt-nowrap {
586
- white-space: nowrap;
587
- }
588
- td.issue {
589
- min-width: 400px;
590
- }
591
- td.element {
592
- text-overflow: ellipsis;
593
- white-space: nowrap;
594
- overflow: hidden;
595
- max-width: 300px;
596
- word-break: break-all;
597
- }
598
- td.element:hover {
599
- overflow: visible;
600
- white-space: normal;
601
- height: auto;
602
- }
603
- th.element > span {
604
- padding-left: 5px;
605
- font-size: 14px;
606
- font-weight: 400;
607
- color: #969799;
608
- }
609
- td.page {
610
- color: #0b02b5;
611
- text-overflow: ellipsis;
612
- white-space: nowrap;
613
- overflow: hidden;
614
- max-width: 150px;
615
- word-break: break-all;
616
- }
617
- td.page:hover {
618
- overflow: visible;
619
- white-space: normal;
620
- height: auto;
621
- }
622
- body.dark td.page {
623
- color: #a68fce;
624
- }
625
- .wcag-clause {
626
- font-size: 14px;
627
- }
628
- .hidden {
629
- display: none;
630
- }
631
- .impact {
632
- padding: 3px 5px;
633
- color: #fff;
634
- border-radius: 5px;
635
- font-size: 12px;
636
- font-weight: 700;
637
- text-transform: uppercase;
638
- }
639
- body.dark .impact {
640
- color: #121212;
641
- }
642
- .critical {
643
- background-color: #d0021b;
644
- }
645
- body.dark .critical {
646
- background-color: #d46e78;
647
- }
648
- .serious {
649
- background-color: #fa6400;
650
- }
651
- body.dark .serious {
652
- background-color: #f0a571;
653
- }
654
- .moderate {
655
- background-color: #f7b500;
656
- }
657
- body.dark .moderate {
658
- background-color: #f4d377;
659
- }
660
- .minor {
661
- background-color: #969799;
662
- }
663
- body.dark .minor {
664
- background-color: #c0c1c2;
665
- }
666
- .critical-stroke-icon {
667
- stroke: #d0021b;
668
- }
669
- .critical-fill-icon {
670
- fill: #d0021b;
671
- }
672
- body.dark .critical-stroke-icon {
673
- stroke: #d46e78;
674
- }
675
- body.dark .critical-fill-icon {
676
- fill: #d46e78;
677
- }
678
- .serious-stroke-icon {
679
- stroke: #fa6400;
680
- }
681
- .serious-fill-icon {
682
- fill: #fa6400;
683
- }
684
- body.dark .serious-stroke-icon {
685
- stroke: #f0a571;
686
- }
687
- body.dark .serious-fill-icon {
688
- fill: #f0a571;
689
- }
690
- .moderate-stroke-icon {
691
- stroke: #f7b500;
692
- }
693
- .moderate-fill-icon {
694
- fill: #f7b500;
695
- }
696
- body.dark .moderate-stroke-icon {
697
- stroke: #f4d377;
698
- }
699
- body.dark .moderate-fill-icon {
700
- fill: #f4d377;
701
- }
702
- .minor-stroke-icon {
703
- stroke: #969799;
704
- }
705
- .minor-fill-icon {
706
- fill: #969799;
707
- }
708
- body.dark .minor-stroke-icon {
709
- stroke: #c0c1c2;
710
- }
711
- body.dark .minor-fill-icon {
712
- fill: #c0c1c2;
713
- }
714
- .link-icon {
715
- fill: #0b02b5;
716
- }
717
- .link-icon:hover {
718
- fill: #08017e;
719
- }
720
- body.dark .link-icon {
721
- fill: #a68fce;
722
- }
723
- body.dark .link-icon:hover {
724
- fill: #cfcdfe;
725
- }
726
- table.dataTable tbody > tr.selected,
727
- table.dataTable tbody > tr > .selected,
728
- table.dataTable.display tbody > tr.even.selected > .sorting_1,
729
- table.dataTable.display tbody > tr.odd.selected,
730
- table.dataTable.display tbody > tr.odd.selected > .sorting_1 {
731
- background-color: #f6ffed;
732
- }
733
- body.dark table.dataTable tbody > tr.selected,
734
- body.dark table.dataTable.display tbody > tr.even.selected > .sorting_1,
735
- body.dark table.dataTable.display tbody > tr.odd.selected,
736
- body.dark table.dataTable.display tbody > tr.odd.selected > .sorting_1,
737
- table.dataTable tbody > tr > .selected {
738
- background-color: #2e352c;
739
- }
740
- table.dataTable.display tbody > tr.even.selected:hover > .sorting_1,
741
- table.dataTable.display tbody > tr.odd.selected:hover > .sorting_1,
742
- table.dataTable.display tbody > tr.selected:hover {
743
- background-color: #ecffda;
744
- }
745
- body.dark table.dataTable.display tbody > tr.even.selected:hover > .sorting_1,
746
- body.dark table.dataTable.display tbody > tr.odd.selected:hover > .sorting_1,
747
- body.dark table.dataTable.display tbody > tr.selected:hover {
748
- background-color: #3a4238;
749
- }
750
- tbody > tr:hover .checkbox-label .checkbox-style {
751
- border-color: #969799;
752
- }
753
- body.dark tbody > tr:hover .checkbox-label .checkbox-style {
754
- border-color: #e1e7eb;
755
- }
756
- table.dataTable tbody tr:hover td.select-checkbox:before,
757
- table.dataTable tbody tr:hover th.select-checkbox:before {
758
- border-color: #969799;
759
- }
760
- body.dark table.dataTable tbody tr:hover td.select-checkbox:before,
761
- table.dataTable tbody tr:hover th.select-checkbox:before {
762
- border-color: #e1e7eb;
763
- }
764
- table.dataTable tbody td.select-checkbox:before,
765
- table.dataTable tbody th.select-checkbox:before {
766
- position: absolute;
767
- top: 22px;
768
- height: 20px;
769
- width: 20px;
770
- background-color: transparent;
771
- border-radius: 5px;
772
- transition: all 0.3s ease-out;
773
- -webkit-transition: all 0.3s ease-out;
774
- -moz-transition: all 0.3s ease-out;
775
- -ms-transition: all 0.3s ease-out;
776
- -o-transition: all 0.3s ease-out;
777
- border: 2px solid #e1e7eb;
778
- cursor: pointer;
779
- }
780
- body.dark table.dataTable tbody td.select-checkbox:before,
781
- table.dataTable tbody th.select-checkbox:before {
782
- border-color: #969799;
783
- }
784
- table.dataTable tbody tr.selected td.select-checkbox:before,
785
- table.dataTable tbody tr.selected th.select-checkbox:before {
786
- background-color: #0a0;
787
- color: #fff;
788
- border-radius: 5px;
789
- -webkit-transform: rotate(0) scale(1);
790
- -ms-transform: rotate(0) scale(1);
791
- transform: rotate(0) scale(1);
792
- opacity: 1;
793
- border: 2px solid #0a0 !important;
794
- }
795
- body.dark table.dataTable tbody tr.selected td.select-checkbox:before,
796
- table.dataTable tbody tr.selected th.select-checkbox:before {
797
- background-color: #98d490;
798
- color: #121212;
799
- border: 2px solid #98d490 !important;
800
- }
801
- table.dataTable tr.selected td.select-checkbox:after,
802
- table.dataTable tr.selected th.select-checkbox:after {
803
- content: '';
804
- -webkit-transform: rotate(45deg) scale(1);
805
- -ms-transform: rotate(45deg) scale(1);
806
- transform: rotate(45deg) scale(1);
807
- opacity: 1;
808
- top: 29px;
809
- left: 50%;
810
- width: 6px;
811
- height: 12px;
812
- border: solid #fff;
813
- border-width: 0 2px 2px 0;
814
- background-color: transparent;
815
- border-radius: 0;
816
- }
817
- body.dark table.dataTable tr.selected td.select-checkbox:after,
818
- table.dataTable tr.selected th.select-checkbox:after {
819
- border-color: #121212;
820
- }
821
- div.dataTables_wrapper div.dataTables_info {
822
- visibility: hidden;
823
- }
824
- div.dataTables_wrapper span.select-info,
825
- div.dataTables_wrapper span.select-item {
826
- margin-left: 0;
827
- visibility: visible;
828
- float: left;
829
- }
830
- .toggleWrapper {
831
- padding: 0 50px;
832
- }
833
- .toggleWrapper input {
834
- position: absolute;
835
- left: -99em;
836
- }
837
- .toggle {
838
- cursor: pointer;
839
- display: inline-block;
840
- position: relative;
841
- width: 45px;
842
- height: 26px;
843
- background-color: #83d8ff;
844
- border-radius: 84px;
845
- transition: background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
846
- margin-bottom: 0;
847
- margin-top: 10px;
848
- }
849
- .toggle:before {
850
- content: 'Light';
851
- position: absolute;
852
- left: -50px;
853
- font-size: 18px;
854
- color: #0b02b5;
855
- }
856
- .toggle:after {
857
- content: 'Dark';
858
- position: absolute;
859
- right: -48px;
860
- font-size: 18px;
861
- color: #969799;
862
- }
863
- .toggle__handler {
864
- display: inline-block;
865
- position: relative;
866
- z-index: 1;
867
- top: 2px;
868
- left: -21px;
869
- width: 22px;
870
- height: 22px;
871
- background-color: #fff;
872
- border-radius: 50px;
873
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
874
- transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
875
- transform: rotate(-45deg);
876
- cursor: pointer;
877
- }
878
- .toggle__handler .crater {
879
- position: absolute;
880
- background-color: #e8cda5;
881
- opacity: 0;
882
- transition: opacity 0.2s ease-in-out;
883
- border-radius: 100%;
884
- }
885
- .toggle__handler .crater--1 {
886
- top: 9px;
887
- left: 6px;
888
- width: 2px;
889
- height: 2px;
890
- }
891
- .toggle__handler .crater--2 {
892
- top: 13px;
893
- left: 11px;
894
- width: 3px;
895
- height: 3px;
896
- }
897
- .toggle__handler .crater--3 {
898
- top: 5px;
899
- left: 13px;
900
- width: 4px;
901
- height: 4px;
902
- }
903
- .star {
904
- position: absolute;
905
- background-color: #fff;
906
- transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
907
- border-radius: 50%;
908
- }
909
- .star--1 {
910
- top: 6px;
911
- left: 8px;
912
- z-index: 0;
913
- width: 30px;
914
- height: 1px;
915
- }
916
- .star--2 {
917
- top: 10px;
918
- left: 15px;
919
- z-index: 1;
920
- width: 19px;
921
- height: 1px;
922
- }
923
- .star--3 {
924
- top: 14px;
925
- left: 12px;
926
- z-index: 0;
927
- width: 30px;
928
- height: 1px;
929
- }
930
- .star--4,
931
- .star--5,
932
- .star--6 {
933
- opacity: 0;
934
- transition: all 0.3s 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
935
- }
936
- .star--4 {
937
- top: 19px;
938
- left: 14px;
939
- z-index: 0;
940
- width: 1px;
941
- height: 1px;
942
- transform: translate3d(3px, 0, 0);
943
- }
944
- .star--5 {
945
- top: 6px;
946
- left: 15px;
947
- z-index: 0;
948
- width: 2px;
949
- height: 2px;
950
- transform: translate3d(3px, 0, 0);
951
- }
952
- .star--6 {
953
- top: 16px;
954
- left: 18px;
955
- z-index: 0;
956
- width: 1px;
957
- height: 1px;
958
- transform: translate3d(3px, 0, 0);
959
- }
960
- input:checked + .toggle {
961
- background-color: #749dd6;
962
- }
963
- input:checked + .toggle:before {
964
- color: #969799;
965
- }
966
- input:checked + .toggle:after {
967
- color: #a68fce;
968
- }
969
- input:checked + .toggle .toggle__handler {
970
- background-color: #ffe5b5;
971
- transform: translate3d(19px, 0, 0) rotate(0);
972
- }
973
- input:checked + .toggle .toggle__handler .crater {
974
- opacity: 1;
975
- }
976
- input:checked + .toggle .star--1 {
977
- width: 2px;
978
- height: 2px;
979
- }
980
- input:checked + .toggle .star--2 {
981
- width: 3px;
982
- height: 3px;
983
- transform: translate3d(-5px, 0, 0);
984
- }
985
- input:checked + .toggle .star--3 {
986
- width: 2px;
987
- height: 2px;
988
- transform: translate3d(-7px, 0, 0);
989
- }
990
- input:checked + .toggle .star--4,
991
- input:checked + .toggle .star--5,
992
- input:checked + .toggle .star--6 {
993
- opacity: 1;
994
- transform: translate3d(0, 0, 0);
995
- }
996
- input:checked + .toggle .star--4 {
997
- transition: all 0.3s 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
998
- }
999
- input:checked + .toggle .star--5 {
1000
- transition: all 0.3s 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
1001
- }
1002
- input:checked + .toggle .star--6 {
1003
- transition: all 0.3s 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
1004
- }
1005
- #loader {
1006
- margin: 15vh auto;
1007
- border: 10px solid #cfcdfe;
1008
- border-radius: 50%;
1009
- border-top: 10px solid #5d30cf;
1010
- width: 60px;
1011
- height: 60px;
1012
- -webkit-animation: spin 2s linear infinite;
1013
- animation: spin 2s linear infinite;
1014
- }
1015
- body.dark #loader {
1016
- border: 10px solid #514865 !important;
1017
- border-top: 10px solid #a68fce !important;
565
+ padding-top: 1.5rem !important;
566
+ margin-top: 1.5rem !important;
1018
567
  }
1019
- @-webkit-keyframes spin {
1020
- 0% {
1021
- -webkit-transform: rotate(0);
1022
- }
1023
- 100% {
1024
- -webkit-transform: rotate(360deg);
1025
- }
568
+ }
569
+
570
+ .show-ondark {
571
+ max-height: 0;
572
+ overflow: hidden;
573
+ padding-top: 0;
574
+ padding-bottom: 0;
575
+ border-bottom: 1px solid #e1e7eb;
576
+ }
577
+
578
+ body.dark .show-ondark {
579
+ max-height: 100px;
580
+ padding-top: 0.5rem;
581
+ padding-bottom: 0.5rem;
582
+ border-bottom: 1px solid #383838;
583
+ -webkit-transition: max-height 0.8s;
584
+ -moz-transition: max-height 0.8s;
585
+ transition: max-height 0.8s;
586
+ }
587
+
588
+ .main {
589
+ -webkit-box-flex: 1;
590
+ -webkit-flex: 1 0 auto;
591
+ -ms-flex: 1 0 auto;
592
+ flex: 1 0 auto;
593
+ width: 100%;
594
+ }
595
+
596
+ .footer {
597
+ -webkit-box-flex: 0;
598
+ -webkit-flex: none;
599
+ -ms-flex: none;
600
+ flex: none;
601
+ background-color: #fff;
602
+ box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.1);
603
+ }
604
+
605
+ body.dark .footer {
606
+ background-color: #272727;
607
+ }
608
+
609
+ #oobee-table {
610
+ background-color: #fff;
611
+ width: 100%;
612
+ }
613
+
614
+ body.dark #oobee-table {
615
+ background-color: #272727;
616
+ }
617
+
618
+ table.dataTable {
619
+ margin-top: 0 !important;
620
+ }
621
+
622
+ .dataTables_scroll {
623
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
624
+ background-color: #fff;
625
+ }
626
+
627
+ body.dark .dataTables_scroll {
628
+ background-color: #1e1e1e;
629
+ }
630
+
631
+ tbody>tr {
632
+ vertical-align: top;
633
+ }
634
+
635
+ tbody>tr:hover {
636
+ background-color: #f0f0ff;
637
+ }
638
+
639
+ body.dark tbody>tr:hover {
640
+ background-color: #303033;
641
+ }
642
+
643
+ body.dark div.dataTables_wrapper div.dataTables_filter input {
644
+ border-color: #383838;
645
+ background-color: #333;
646
+ color: #e1e1e1;
647
+ }
648
+
649
+ th {
650
+ height: 47px;
651
+ color: #000;
652
+ background-color: #fff;
653
+ border-bottom: 2px solid #0b02b5 !important;
654
+ padding-left: 16px;
655
+ font-weight: 600;
656
+ }
657
+
658
+ body.dark th {
659
+ border-bottom: 2px solid #a68fce !important;
660
+ background-color: #272727;
661
+ color: #e1e1e1;
662
+ }
663
+
664
+ th.sorting_disabled {
665
+ padding-right: 16px;
666
+ }
667
+
668
+ td {
669
+ padding-top: 12px;
670
+ padding-bottom: 12px;
671
+ padding-left: 16px;
672
+ padding-right: 16px;
673
+ border-top: 1px solid #e1e7eb;
674
+ border-bottom: 1px solid #e1e7eb;
675
+ }
676
+
677
+ body.dark td {
678
+ border-top: 1px solid #383838;
679
+ border-bottom: 1px solid #383838;
680
+ }
681
+
682
+ .dt-nowrap {
683
+ white-space: nowrap;
684
+ }
685
+
686
+ td.issue {
687
+ min-width: 400px;
688
+ }
689
+
690
+ td.element {
691
+ text-overflow: ellipsis;
692
+ white-space: nowrap;
693
+ overflow: hidden;
694
+ max-width: 300px;
695
+ word-break: break-all;
696
+ }
697
+
698
+ td.element:hover {
699
+ overflow: visible;
700
+ white-space: normal;
701
+ height: auto;
702
+ }
703
+
704
+ th.element>span {
705
+ padding-left: 5px;
706
+ font-size: 14px;
707
+ font-weight: 400;
708
+ color: #969799;
709
+ }
710
+
711
+ td.page {
712
+ color: #0b02b5;
713
+ text-overflow: ellipsis;
714
+ white-space: nowrap;
715
+ overflow: hidden;
716
+ max-width: 150px;
717
+ word-break: break-all;
718
+ }
719
+
720
+ td.page:hover {
721
+ overflow: visible;
722
+ white-space: normal;
723
+ height: auto;
724
+ }
725
+
726
+ body.dark td.page {
727
+ color: #a68fce;
728
+ }
729
+
730
+ .wcag-clause {
731
+ font-size: 14px;
732
+ }
733
+
734
+ .hidden {
735
+ display: none;
736
+ }
737
+
738
+ .impact {
739
+ padding: 3px 5px;
740
+ color: #fff;
741
+ border-radius: 5px;
742
+ font-size: 12px;
743
+ font-weight: 700;
744
+ text-transform: uppercase;
745
+ }
746
+
747
+ body.dark .impact {
748
+ color: #121212;
749
+ }
750
+
751
+ .critical {
752
+ background-color: #d0021b;
753
+ }
754
+
755
+ body.dark .critical {
756
+ background-color: #d46e78;
757
+ }
758
+
759
+ .serious {
760
+ background-color: #fa6400;
761
+ }
762
+
763
+ body.dark .serious {
764
+ background-color: #f0a571;
765
+ }
766
+
767
+ .moderate {
768
+ background-color: #f7b500;
769
+ }
770
+
771
+ body.dark .moderate {
772
+ background-color: #f4d377;
773
+ }
774
+
775
+ .minor {
776
+ background-color: #969799;
777
+ }
778
+
779
+ body.dark .minor {
780
+ background-color: #c0c1c2;
781
+ }
782
+
783
+ .critical-stroke-icon {
784
+ stroke: #d0021b;
785
+ }
786
+
787
+ .critical-fill-icon {
788
+ fill: #d0021b;
789
+ }
790
+
791
+ body.dark .critical-stroke-icon {
792
+ stroke: #d46e78;
793
+ }
794
+
795
+ body.dark .critical-fill-icon {
796
+ fill: #d46e78;
797
+ }
798
+
799
+ .serious-stroke-icon {
800
+ stroke: #fa6400;
801
+ }
802
+
803
+ .serious-fill-icon {
804
+ fill: #fa6400;
805
+ }
806
+
807
+ body.dark .serious-stroke-icon {
808
+ stroke: #f0a571;
809
+ }
810
+
811
+ body.dark .serious-fill-icon {
812
+ fill: #f0a571;
813
+ }
814
+
815
+ .moderate-stroke-icon {
816
+ stroke: #f7b500;
817
+ }
818
+
819
+ .moderate-fill-icon {
820
+ fill: #f7b500;
821
+ }
822
+
823
+ body.dark .moderate-stroke-icon {
824
+ stroke: #f4d377;
825
+ }
826
+
827
+ body.dark .moderate-fill-icon {
828
+ fill: #f4d377;
829
+ }
830
+
831
+ .minor-stroke-icon {
832
+ stroke: #969799;
833
+ }
834
+
835
+ .minor-fill-icon {
836
+ fill: #969799;
837
+ }
838
+
839
+ body.dark .minor-stroke-icon {
840
+ stroke: #c0c1c2;
841
+ }
842
+
843
+ body.dark .minor-fill-icon {
844
+ fill: #c0c1c2;
845
+ }
846
+
847
+ .link-icon {
848
+ fill: #0b02b5;
849
+ }
850
+
851
+ .link-icon:hover {
852
+ fill: #08017e;
853
+ }
854
+
855
+ body.dark .link-icon {
856
+ fill: #a68fce;
857
+ }
858
+
859
+ body.dark .link-icon:hover {
860
+ fill: #cfcdfe;
861
+ }
862
+
863
+ table.dataTable tbody>tr.selected,
864
+ table.dataTable tbody>tr>.selected,
865
+ table.dataTable.display tbody>tr.even.selected>.sorting_1,
866
+ table.dataTable.display tbody>tr.odd.selected,
867
+ table.dataTable.display tbody>tr.odd.selected>.sorting_1 {
868
+ background-color: #f6ffed;
869
+ }
870
+
871
+ body.dark table.dataTable tbody>tr.selected,
872
+ body.dark table.dataTable.display tbody>tr.even.selected>.sorting_1,
873
+ body.dark table.dataTable.display tbody>tr.odd.selected,
874
+ body.dark table.dataTable.display tbody>tr.odd.selected>.sorting_1,
875
+ table.dataTable tbody>tr>.selected {
876
+ background-color: #2e352c;
877
+ }
878
+
879
+ table.dataTable.display tbody>tr.even.selected:hover>.sorting_1,
880
+ table.dataTable.display tbody>tr.odd.selected:hover>.sorting_1,
881
+ table.dataTable.display tbody>tr.selected:hover {
882
+ background-color: #ecffda;
883
+ }
884
+
885
+ body.dark table.dataTable.display tbody>tr.even.selected:hover>.sorting_1,
886
+ body.dark table.dataTable.display tbody>tr.odd.selected:hover>.sorting_1,
887
+ body.dark table.dataTable.display tbody>tr.selected:hover {
888
+ background-color: #3a4238;
889
+ }
890
+
891
+ tbody>tr:hover .checkbox-label .checkbox-style {
892
+ border-color: #969799;
893
+ }
894
+
895
+ body.dark tbody>tr:hover .checkbox-label .checkbox-style {
896
+ border-color: #e1e7eb;
897
+ }
898
+
899
+ table.dataTable tbody tr:hover td.select-checkbox:before,
900
+ table.dataTable tbody tr:hover th.select-checkbox:before {
901
+ border-color: #969799;
902
+ }
903
+
904
+ body.dark table.dataTable tbody tr:hover td.select-checkbox:before,
905
+ table.dataTable tbody tr:hover th.select-checkbox:before {
906
+ border-color: #e1e7eb;
907
+ }
908
+
909
+ table.dataTable tbody td.select-checkbox:before,
910
+ table.dataTable tbody th.select-checkbox:before {
911
+ position: absolute;
912
+ top: 22px;
913
+ height: 20px;
914
+ width: 20px;
915
+ background-color: transparent;
916
+ border-radius: 5px;
917
+ transition: all 0.3s ease-out;
918
+ -webkit-transition: all 0.3s ease-out;
919
+ -moz-transition: all 0.3s ease-out;
920
+ -ms-transition: all 0.3s ease-out;
921
+ -o-transition: all 0.3s ease-out;
922
+ border: 2px solid #e1e7eb;
923
+ cursor: pointer;
924
+ }
925
+
926
+ body.dark table.dataTable tbody td.select-checkbox:before,
927
+ table.dataTable tbody th.select-checkbox:before {
928
+ border-color: #969799;
929
+ }
930
+
931
+ table.dataTable tbody tr.selected td.select-checkbox:before,
932
+ table.dataTable tbody tr.selected th.select-checkbox:before {
933
+ background-color: #0a0;
934
+ color: #fff;
935
+ border-radius: 5px;
936
+ -webkit-transform: rotate(0) scale(1);
937
+ -ms-transform: rotate(0) scale(1);
938
+ transform: rotate(0) scale(1);
939
+ opacity: 1;
940
+ border: 2px solid #0a0 !important;
941
+ }
942
+
943
+ body.dark table.dataTable tbody tr.selected td.select-checkbox:before,
944
+ table.dataTable tbody tr.selected th.select-checkbox:before {
945
+ background-color: #98d490;
946
+ color: #121212;
947
+ border: 2px solid #98d490 !important;
948
+ }
949
+
950
+ table.dataTable tr.selected td.select-checkbox:after,
951
+ table.dataTable tr.selected th.select-checkbox:after {
952
+ content: '';
953
+ -webkit-transform: rotate(45deg) scale(1);
954
+ -ms-transform: rotate(45deg) scale(1);
955
+ transform: rotate(45deg) scale(1);
956
+ opacity: 1;
957
+ top: 29px;
958
+ left: 50%;
959
+ width: 6px;
960
+ height: 12px;
961
+ border: solid #fff;
962
+ border-width: 0 2px 2px 0;
963
+ background-color: transparent;
964
+ border-radius: 0;
965
+ }
966
+
967
+ body.dark table.dataTable tr.selected td.select-checkbox:after,
968
+ table.dataTable tr.selected th.select-checkbox:after {
969
+ border-color: #121212;
970
+ }
971
+
972
+ div.dataTables_wrapper div.dataTables_info {
973
+ visibility: hidden;
974
+ }
975
+
976
+ div.dataTables_wrapper span.select-info,
977
+ div.dataTables_wrapper span.select-item {
978
+ margin-left: 0;
979
+ visibility: visible;
980
+ float: left;
981
+ }
982
+
983
+ .toggleWrapper {
984
+ padding: 0 50px;
985
+ }
986
+
987
+ .toggleWrapper input {
988
+ position: absolute;
989
+ left: -99em;
990
+ }
991
+
992
+ .toggle {
993
+ cursor: pointer;
994
+ display: inline-block;
995
+ position: relative;
996
+ width: 45px;
997
+ height: 26px;
998
+ background-color: #83d8ff;
999
+ border-radius: 84px;
1000
+ transition: background-color 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
1001
+ margin-bottom: 0;
1002
+ margin-top: 10px;
1003
+ }
1004
+
1005
+ .toggle:before {
1006
+ content: 'Light';
1007
+ position: absolute;
1008
+ left: -50px;
1009
+ font-size: 18px;
1010
+ color: #0b02b5;
1011
+ }
1012
+
1013
+ .toggle:after {
1014
+ content: 'Dark';
1015
+ position: absolute;
1016
+ right: -48px;
1017
+ font-size: 18px;
1018
+ color: #969799;
1019
+ }
1020
+
1021
+ .toggle__handler {
1022
+ display: inline-block;
1023
+ position: relative;
1024
+ z-index: 1;
1025
+ top: 2px;
1026
+ left: -21px;
1027
+ width: 22px;
1028
+ height: 22px;
1029
+ background-color: #fff;
1030
+ border-radius: 50px;
1031
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
1032
+ transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
1033
+ transform: rotate(-45deg);
1034
+ cursor: pointer;
1035
+ }
1036
+
1037
+ .toggle__handler .crater {
1038
+ position: absolute;
1039
+ background-color: #e8cda5;
1040
+ opacity: 0;
1041
+ transition: opacity 0.2s ease-in-out;
1042
+ border-radius: 100%;
1043
+ }
1044
+
1045
+ .toggle__handler .crater--1 {
1046
+ top: 9px;
1047
+ left: 6px;
1048
+ width: 2px;
1049
+ height: 2px;
1050
+ }
1051
+
1052
+ .toggle__handler .crater--2 {
1053
+ top: 13px;
1054
+ left: 11px;
1055
+ width: 3px;
1056
+ height: 3px;
1057
+ }
1058
+
1059
+ .toggle__handler .crater--3 {
1060
+ top: 5px;
1061
+ left: 13px;
1062
+ width: 4px;
1063
+ height: 4px;
1064
+ }
1065
+
1066
+ .star {
1067
+ position: absolute;
1068
+ background-color: #fff;
1069
+ transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
1070
+ border-radius: 50%;
1071
+ }
1072
+
1073
+ .star--1 {
1074
+ top: 6px;
1075
+ left: 8px;
1076
+ z-index: 0;
1077
+ width: 30px;
1078
+ height: 1px;
1079
+ }
1080
+
1081
+ .star--2 {
1082
+ top: 10px;
1083
+ left: 15px;
1084
+ z-index: 1;
1085
+ width: 19px;
1086
+ height: 1px;
1087
+ }
1088
+
1089
+ .star--3 {
1090
+ top: 14px;
1091
+ left: 12px;
1092
+ z-index: 0;
1093
+ width: 30px;
1094
+ height: 1px;
1095
+ }
1096
+
1097
+ .star--4,
1098
+ .star--5,
1099
+ .star--6 {
1100
+ opacity: 0;
1101
+ transition: all 0.3s 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
1102
+ }
1103
+
1104
+ .star--4 {
1105
+ top: 19px;
1106
+ left: 14px;
1107
+ z-index: 0;
1108
+ width: 1px;
1109
+ height: 1px;
1110
+ transform: translate3d(3px, 0, 0);
1111
+ }
1112
+
1113
+ .star--5 {
1114
+ top: 6px;
1115
+ left: 15px;
1116
+ z-index: 0;
1117
+ width: 2px;
1118
+ height: 2px;
1119
+ transform: translate3d(3px, 0, 0);
1120
+ }
1121
+
1122
+ .star--6 {
1123
+ top: 16px;
1124
+ left: 18px;
1125
+ z-index: 0;
1126
+ width: 1px;
1127
+ height: 1px;
1128
+ transform: translate3d(3px, 0, 0);
1129
+ }
1130
+
1131
+ input:checked+.toggle {
1132
+ background-color: #749dd6;
1133
+ }
1134
+
1135
+ input:checked+.toggle:before {
1136
+ color: #969799;
1137
+ }
1138
+
1139
+ input:checked+.toggle:after {
1140
+ color: #a68fce;
1141
+ }
1142
+
1143
+ input:checked+.toggle .toggle__handler {
1144
+ background-color: #ffe5b5;
1145
+ transform: translate3d(19px, 0, 0) rotate(0);
1146
+ }
1147
+
1148
+ input:checked+.toggle .toggle__handler .crater {
1149
+ opacity: 1;
1150
+ }
1151
+
1152
+ input:checked+.toggle .star--1 {
1153
+ width: 2px;
1154
+ height: 2px;
1155
+ }
1156
+
1157
+ input:checked+.toggle .star--2 {
1158
+ width: 3px;
1159
+ height: 3px;
1160
+ transform: translate3d(-5px, 0, 0);
1161
+ }
1162
+
1163
+ input:checked+.toggle .star--3 {
1164
+ width: 2px;
1165
+ height: 2px;
1166
+ transform: translate3d(-7px, 0, 0);
1167
+ }
1168
+
1169
+ input:checked+.toggle .star--4,
1170
+ input:checked+.toggle .star--5,
1171
+ input:checked+.toggle .star--6 {
1172
+ opacity: 1;
1173
+ transform: translate3d(0, 0, 0);
1174
+ }
1175
+
1176
+ input:checked+.toggle .star--4 {
1177
+ transition: all 0.3s 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
1178
+ }
1179
+
1180
+ input:checked+.toggle .star--5 {
1181
+ transition: all 0.3s 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
1182
+ }
1183
+
1184
+ input:checked+.toggle .star--6 {
1185
+ transition: all 0.3s 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
1186
+ }
1187
+
1188
+ #loader {
1189
+ margin: 15vh auto;
1190
+ border: 10px solid #cfcdfe;
1191
+ border-radius: 50%;
1192
+ border-top: 10px solid #5d30cf;
1193
+ width: 60px;
1194
+ height: 60px;
1195
+ -webkit-animation: spin 2s linear infinite;
1196
+ animation: spin 2s linear infinite;
1197
+ }
1198
+
1199
+ body.dark #loader {
1200
+ border: 10px solid #514865 !important;
1201
+ border-top: 10px solid #a68fce !important;
1202
+ }
1203
+
1204
+ @-webkit-keyframes spin {
1205
+ 0% {
1206
+ -webkit-transform: rotate(0);
1026
1207
  }
1027
- @keyframes spin {
1028
- 0% {
1029
- transform: rotate(0);
1030
- }
1031
- 100% {
1032
- transform: rotate(360deg);
1033
- }
1208
+
1209
+ 100% {
1210
+ -webkit-transform: rotate(360deg);
1034
1211
  }
1035
- .impact-icon-size {
1036
- display: inline-block;
1037
- min-width: 16px;
1212
+ }
1213
+
1214
+ @keyframes spin {
1215
+ 0% {
1216
+ transform: rotate(0);
1038
1217
  }
1039
- .wcag-clause:not(:last-child):after {
1040
- content: ', ';
1218
+
1219
+ 100% {
1220
+ transform: rotate(360deg);
1041
1221
  }
1042
- </style>
1043
- </head>
1044
- <body onbeforeunload="return closeWarning()" onload="load()">
1045
- <div class="header">
1046
- <div class="container-fluid">
1047
- <div class="row pt-4 pb-4">
1048
- <div class="col-md-8 col-12">
1049
- <div class="d-flex">
1050
- <svg class="flex-shrink-0" width="70px" height="70px" viewBox="0 0 60 60">
1051
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1052
- <g transform="translate(-28.000000, -32.000000)">
1053
- <g transform="translate(28.000000, 27.000000)">
1054
- <g transform="translate(0.000000, 5.000000)">
1055
- <circle fill="#533BE2" cx="30" cy="30" r="30"></circle>
1056
- <path
1057
- d="M28.4502649,29.642801 C28.3252903,29.5414933 28.1233305,29.5414933 27.998356,29.6424933 L27.0933986,30.3752304 C26.9688039,30.4764355 26.9688039,30.6402913 27.0937784,30.7415989 L29.6684816,32.8265056 C29.7610412,32.9014609 29.8808243,33 30.0032664,33 C30.1255819,33 30.2585336,32.9014609 30.3510932,32.8265056 L34.9061425,29.1747147 C35.0312436,29.0735096 35.0312436,28.9095512 34.9063957,28.8083461 L34.0016916,28.0757116 C33.8765904,27.9747116 33.6746306,27.9747116 33.5495294,28.0760192 L30.0097241,30.9053522 L28.4502649,29.642801 Z"
1058
- fill="#FFFFFF"
1059
- ></path>
1060
- <path
1061
- d="M30.5,35 C28.0147604,35 26,33.2092086 26,31 C26,28.7908982 28.0147604,27 30.5,27 C32.9852396,27 35,28.7908982 35,31 C35,33.2092086 32.9852396,35 30.5,35 M37.5248476,29.7923531 C36.8297901,29.8155839 36.1869369,29.4327578 35.9256839,28.8409617 C35.6735552,28.2688636 35.858003,27.5330795 36.3480544,27.1193147 C36.5094029,26.9819641 36.5289218,26.7547949 36.395408,26.5947488 C36.0434903,26.1788429 35.6399457,25.8007272 35.1957464,25.4701435 C35.0238877,25.3417854 34.7739534,25.3598776 34.6257715,25.5114665 C34.1531601,25.9954589 33.4009317,26.1522934 32.7548447,25.901037 C32.1616549,25.6706562 31.7613443,25.1209325 31.7419409,24.5238907 L31.7419409,22.1316558 C31.7419409,22.0174288 31.672181,21.9129439 31.5618819,21.861986 L29.7675292,21.0321012 C29.5513199,20.9321125 29.2972277,21.0778134 29.2972277,21.301771 L29.2972277,24.4391037 C29.2934163,25.0723298 28.8916042,25.6335084 28.2702334,25.869456 C27.6309606,26.1115057 26.8855466,25.9553135 26.4158225,25.4806349 C26.2683336,25.3312941 26.0215177,25.3129878 25.8500055,25.4383484 C25.4033807,25.7644358 24.9998362,26.1349506 24.650113,26.5396158 C24.5131342,26.6980561 24.5321911,26.930578 24.696196,27.0680357 C25.1913293,27.4823358 25.3753151,28.2266842 25.1164876,28.8018869 C24.84484,29.4002133 24.1904371,29.7777937 23.4881033,29.7406459 C23.2673896,29.7285487 23.07555,29.8782106 23.0499098,30.082042 C22.9851163,30.6012552 22.9831528,31.1252859 23.0455209,31.645998 C23.0695442,31.8473671 23.2567639,31.9969219 23.4748212,31.9901775 C24.1702252,31.967589 24.8130784,32.3496658 25.0749089,32.9421042 C25.3253051,33.5103483 25.1427053,34.2495581 24.6519609,34.6631088 C24.4903814,34.7997101 24.470516,35.0282709 24.6046074,35.1876748 C24.9573335,35.604223 25.361109,35.9830881 25.8042689,36.3121729 C25.9763586,36.440424 26.2260619,36.4215824 26.3740128,36.2707429 C26.8468552,35.7868576 27.5986216,35.6307724 28.2454016,35.8821359 C28.8485241,36.1167989 29.2786328,36.6901816 29.2972277,37.3508136 L29.2972277,37.868421 C29.2972277,37.97494 29.3621367,38.0723594 29.4650441,38.1198915 L31.3032854,38.9701166 C31.5048267,39.0632539 31.7419409,38.927402 31.7419409,38.7186461 L31.7419409,37.3600202 C31.7421719,37.3544534 31.7434423,37.3488866 31.7434423,37.3434268 C31.7268108,36.7379278 32.0894697,36.1569442 32.7295509,35.9128605 C33.3688237,35.6699543 34.1138913,35.8263606 34.5843083,36.3016816 C34.7317972,36.45038 34.9780356,36.4694357 35.1492014,36.343861 C35.5931697,36.0209853 35.9969452,35.6502563 36.3495559,35.2443065 C36.4881516,35.0849027 36.4686327,34.8532372 36.3043968,34.7151372 C35.8082241,34.2991242 35.6244692,33.5548829 35.8838742,32.9821425 C36.1548289,32.3819962 36.8091162,32.0045228 37.5116811,32.0414565 C37.7323947,32.0535536 37.9248118,31.9035706 37.9498745,31.7003815 C37.9833685,31.4346728 38,31.1674653 38,30.8995085 C38,30.6451475 37.9849855,30.3907865 37.9544944,30.1363185 C37.9304711,29.9347353 37.7430204,29.7855016 37.5248476,29.7923531 Z"
1062
- fill="#FFFFFF"
1063
- ></path>
1064
- <path
1065
- d="M29,17.4279646 C29,17.5512652 29.0705877,17.6640501 29.1820788,17.7191714 L41.4375735,23.766452 L41.4375735,35.734939 C41.4375735,35.8582397 41.5080443,35.9710245 41.6196524,36.0259147 L43.5240006,36.965288 C43.7427757,37.073335 44,36.9160602 44,36.6743123 L44,22.9825046 C44,22.5023599 43.7253625,22.063354 43.2905003,21.8489934 L29.4758825,15.0346369 C29.2571075,14.9267055 29,15.0840959 29,15.3258438 L29,17.4279646 Z"
1066
- fill="#FFFFFF"
1067
- ></path>
1068
- <path
1069
- d="M32,42.5719259 C32,42.4487411 31.9294129,42.3359565 31.8178057,42.2808354 L19.5624065,36.2335699 L19.5624065,24.2651127 C19.5624065,24.1418123 19.4919362,24.0290277 19.3803291,23.9740221 L17.4759957,23.0346512 C17.2572223,22.92672 17,23.0839944 17,23.3257418 L17,37.0173998 C17,37.4976588 17.2746354,37.9366636 17.7094942,38.1510237 L31.5241212,44.9653631 C31.7427777,45.0732943 32,44.9159043 32,44.674157 L32,42.5719259 Z"
1070
- fill="#FFFFFF"
1071
- ></path>
1072
- </g>
1222
+ }
1223
+
1224
+ .impact-icon-size {
1225
+ display: inline-block;
1226
+ min-width: 16px;
1227
+ }
1228
+
1229
+ .wcag-clause:not(:last-child):after {
1230
+ content: ', ';
1231
+ }
1232
+ </style>
1233
+ </head>
1234
+
1235
+ <body onbeforeunload="return closeWarning()" onload="load()">
1236
+ <div class="header">
1237
+ <div class="container-fluid">
1238
+ <div class="row pt-4 pb-4">
1239
+ <div class="col-md-8 col-12">
1240
+ <div class="d-flex">
1241
+ <svg class="flex-shrink-0" width="70px" height="70px" viewBox="0 0 60 60">
1242
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1243
+ <g transform="translate(-28.000000, -32.000000)">
1244
+ <g transform="translate(28.000000, 27.000000)">
1245
+ <g transform="translate(0.000000, 5.000000)">
1246
+ <circle fill="#533BE2" cx="30" cy="30" r="30"></circle>
1247
+ <path
1248
+ d="M28.4502649,29.642801 C28.3252903,29.5414933 28.1233305,29.5414933 27.998356,29.6424933 L27.0933986,30.3752304 C26.9688039,30.4764355 26.9688039,30.6402913 27.0937784,30.7415989 L29.6684816,32.8265056 C29.7610412,32.9014609 29.8808243,33 30.0032664,33 C30.1255819,33 30.2585336,32.9014609 30.3510932,32.8265056 L34.9061425,29.1747147 C35.0312436,29.0735096 35.0312436,28.9095512 34.9063957,28.8083461 L34.0016916,28.0757116 C33.8765904,27.9747116 33.6746306,27.9747116 33.5495294,28.0760192 L30.0097241,30.9053522 L28.4502649,29.642801 Z"
1249
+ fill="#FFFFFF"></path>
1250
+ <path
1251
+ d="M30.5,35 C28.0147604,35 26,33.2092086 26,31 C26,28.7908982 28.0147604,27 30.5,27 C32.9852396,27 35,28.7908982 35,31 C35,33.2092086 32.9852396,35 30.5,35 M37.5248476,29.7923531 C36.8297901,29.8155839 36.1869369,29.4327578 35.9256839,28.8409617 C35.6735552,28.2688636 35.858003,27.5330795 36.3480544,27.1193147 C36.5094029,26.9819641 36.5289218,26.7547949 36.395408,26.5947488 C36.0434903,26.1788429 35.6399457,25.8007272 35.1957464,25.4701435 C35.0238877,25.3417854 34.7739534,25.3598776 34.6257715,25.5114665 C34.1531601,25.9954589 33.4009317,26.1522934 32.7548447,25.901037 C32.1616549,25.6706562 31.7613443,25.1209325 31.7419409,24.5238907 L31.7419409,22.1316558 C31.7419409,22.0174288 31.672181,21.9129439 31.5618819,21.861986 L29.7675292,21.0321012 C29.5513199,20.9321125 29.2972277,21.0778134 29.2972277,21.301771 L29.2972277,24.4391037 C29.2934163,25.0723298 28.8916042,25.6335084 28.2702334,25.869456 C27.6309606,26.1115057 26.8855466,25.9553135 26.4158225,25.4806349 C26.2683336,25.3312941 26.0215177,25.3129878 25.8500055,25.4383484 C25.4033807,25.7644358 24.9998362,26.1349506 24.650113,26.5396158 C24.5131342,26.6980561 24.5321911,26.930578 24.696196,27.0680357 C25.1913293,27.4823358 25.3753151,28.2266842 25.1164876,28.8018869 C24.84484,29.4002133 24.1904371,29.7777937 23.4881033,29.7406459 C23.2673896,29.7285487 23.07555,29.8782106 23.0499098,30.082042 C22.9851163,30.6012552 22.9831528,31.1252859 23.0455209,31.645998 C23.0695442,31.8473671 23.2567639,31.9969219 23.4748212,31.9901775 C24.1702252,31.967589 24.8130784,32.3496658 25.0749089,32.9421042 C25.3253051,33.5103483 25.1427053,34.2495581 24.6519609,34.6631088 C24.4903814,34.7997101 24.470516,35.0282709 24.6046074,35.1876748 C24.9573335,35.604223 25.361109,35.9830881 25.8042689,36.3121729 C25.9763586,36.440424 26.2260619,36.4215824 26.3740128,36.2707429 C26.8468552,35.7868576 27.5986216,35.6307724 28.2454016,35.8821359 C28.8485241,36.1167989 29.2786328,36.6901816 29.2972277,37.3508136 L29.2972277,37.868421 C29.2972277,37.97494 29.3621367,38.0723594 29.4650441,38.1198915 L31.3032854,38.9701166 C31.5048267,39.0632539 31.7419409,38.927402 31.7419409,38.7186461 L31.7419409,37.3600202 C31.7421719,37.3544534 31.7434423,37.3488866 31.7434423,37.3434268 C31.7268108,36.7379278 32.0894697,36.1569442 32.7295509,35.9128605 C33.3688237,35.6699543 34.1138913,35.8263606 34.5843083,36.3016816 C34.7317972,36.45038 34.9780356,36.4694357 35.1492014,36.343861 C35.5931697,36.0209853 35.9969452,35.6502563 36.3495559,35.2443065 C36.4881516,35.0849027 36.4686327,34.8532372 36.3043968,34.7151372 C35.8082241,34.2991242 35.6244692,33.5548829 35.8838742,32.9821425 C36.1548289,32.3819962 36.8091162,32.0045228 37.5116811,32.0414565 C37.7323947,32.0535536 37.9248118,31.9035706 37.9498745,31.7003815 C37.9833685,31.4346728 38,31.1674653 38,30.8995085 C38,30.6451475 37.9849855,30.3907865 37.9544944,30.1363185 C37.9304711,29.9347353 37.7430204,29.7855016 37.5248476,29.7923531 Z"
1252
+ fill="#FFFFFF"></path>
1253
+ <path
1254
+ d="M29,17.4279646 C29,17.5512652 29.0705877,17.6640501 29.1820788,17.7191714 L41.4375735,23.766452 L41.4375735,35.734939 C41.4375735,35.8582397 41.5080443,35.9710245 41.6196524,36.0259147 L43.5240006,36.965288 C43.7427757,37.073335 44,36.9160602 44,36.6743123 L44,22.9825046 C44,22.5023599 43.7253625,22.063354 43.2905003,21.8489934 L29.4758825,15.0346369 C29.2571075,14.9267055 29,15.0840959 29,15.3258438 L29,17.4279646 Z"
1255
+ fill="#FFFFFF"></path>
1256
+ <path
1257
+ d="M32,42.5719259 C32,42.4487411 31.9294129,42.3359565 31.8178057,42.2808354 L19.5624065,36.2335699 L19.5624065,24.2651127 C19.5624065,24.1418123 19.4919362,24.0290277 19.3803291,23.9740221 L17.4759957,23.0346512 C17.2572223,22.92672 17,23.0839944 17,23.3257418 L17,37.0173998 C17,37.4976588 17.2746354,37.9366636 17.7094942,38.1510237 L31.5241212,44.9653631 C31.7427777,45.0732943 32,44.9159043 32,44.674157 L32,42.5719259 Z"
1258
+ fill="#FFFFFF"></path>
1073
1259
  </g>
1074
1260
  </g>
1075
1261
  </g>
1076
- </svg>
1077
- <div class="pl-3">
1078
- <h1>Accessibility Report</h1>
1079
- <p class="mb-0">
1080
- Measure of compliance against GovTech-defined and WCAG 2.1 standards
1081
- </p>
1082
- </div>
1262
+ </g>
1263
+ </svg>
1264
+ <div class="pl-3">
1265
+ <h1>Accessibility Report</h1>
1266
+ <p class="mb-0">
1267
+ Measure of compliance against GovTech-defined and WCAG 2.1 standards
1268
+ </p>
1083
1269
  </div>
1084
1270
  </div>
1085
- <div class="col-md-4 col-12 header-meta">
1086
- <p class="mb-0">Run on 7 Jun 2021, 0:15 am<br /><strong>4 issues spotted</strong></p>
1087
- <div class="toggleWrapper">
1088
- <input type="checkbox" class="dm" id="dm" />
1089
- <label for="dm" class="toggle">
1090
- <span class="toggle__handler">
1091
- <span class="crater crater--1"></span>
1092
- <span class="crater crater--2"></span>
1093
- <span class="crater crater--3"></span>
1094
- </span>
1095
- <span class="star star--1"></span>
1096
- <span class="star star--2"></span>
1097
- <span class="star star--3"></span>
1098
- <span class="star star--4"></span>
1099
- <span class="star star--5"></span>
1100
- <span class="star star--6"></span>
1101
- </label>
1102
- </div>
1271
+ </div>
1272
+ <div class="col-md-4 col-12 header-meta">
1273
+ <p class="mb-0">Run on 7 Jun 2021, 0:15 am<br /><strong>4 issues spotted</strong></p>
1274
+ <div class="toggleWrapper">
1275
+ <input type="checkbox" class="dm" id="dm" />
1276
+ <label for="dm" class="toggle">
1277
+ <span class="toggle__handler">
1278
+ <span class="crater crater--1"></span>
1279
+ <span class="crater crater--2"></span>
1280
+ <span class="crater crater--3"></span>
1281
+ </span>
1282
+ <span class="star star--1"></span>
1283
+ <span class="star star--2"></span>
1284
+ <span class="star star--3"></span>
1285
+ <span class="star star--4"></span>
1286
+ <span class="star star--5"></span>
1287
+ <span class="star star--6"></span>
1288
+ </label>
1103
1289
  </div>
1104
1290
  </div>
1105
1291
  </div>
1106
1292
  </div>
1107
- <div class="show-ondark container-fluid">
1108
- <em
1109
- >Dark mode is an experimental feature, do
1110
- <a href="mailto:enquiries_HATS@tech.gov.sg">drop us an email</a> to let us know what you
1111
- think about it! :)</em
1112
- >
1113
- </div>
1293
+ </div>
1294
+ <div class="show-ondark container-fluid">
1295
+ <em>Dark mode is an experimental feature, do
1296
+ <a href="mailto:enquiries_HATS@tech.gov.sg">drop us an email</a> to let us know what you
1297
+ think about it! :)</em>
1298
+ </div>
1114
1299
 
1115
- <div class="main">
1116
- <div id="loader"></div>
1117
- <div class="container-fluid">
1118
- <div class="row" style="visibility: hidden" id="report">
1119
- <div class="col-12 pt-4 pb-4">
1120
- <table id="oobee-table" class="display" style="width: 100%">
1121
- <thead>
1122
- <tr>
1123
- <th>IMPACT</th>
1124
- <th class="dt-nowrap">ISSUE</th>
1125
- <th class="dt-nowrap">PAGE</th>
1126
- <th class="element">HTML ELEMENT <span>Hover to view full</span></th>
1127
- <th class="dt-nowrap text-center">HELP URL</th>
1128
- <th class="dt-nowrap text-center">FIXED?</th>
1129
- </tr>
1130
- </thead>
1131
- <tbody>
1132
- <tr>
1133
- <td>
1134
- <span class="impact critical"><span class="hidden">3</span>critical</span><br />
1135
- <div class="impact-icon-size">disabilities</div>
1136
- </td>
1137
- <td class="issue">
1138
- Buttons must have discernible text<br />
1139
- <a class="wcag-clause" href="" target="_blank">WCAG </a>
1140
- </td>
1141
- <td class="page">
1142
- <a
1143
- href="https:&#x2F;&#x2F;www.isomer.gov.sg&#x2F;terms-of-use&#x2F;"
1144
- target="_blank"
1145
- >&#x2F;terms-of-use&#x2F;</a
1146
- >
1147
- </td>
1148
- <td class="element">
1149
- &lt;button class&#x3D;&#39;bp-button&#39;&gt;&lt;i class&#x3D;&#39;sgds-icon
1150
- sgds-icon-mail is-size-4&#39;&gt;&lt;&#x2F;i&gt;&#x2F;button&gt;
1151
- </td>
1152
- <td class="text-center dt-nowrap">
1153
- <a
1154
- href="https:&#x2F;&#x2F;dequeuniversity.com&#x2F;rules&#x2F;axe&#x2F;4.2&#x2F;button-name?application&#x3D;oobee"
1155
- target="_blank"
1156
- >
1157
- <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
1158
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1159
- <g
1160
- class="link-icon"
1161
- transform="translate(-1259.000000, -254.000000)"
1162
- fill-rule="nonzero"
1163
- >
1164
- <g transform="translate(24.000000, 184.000000)">
1165
- <g transform="translate(-3.000000, 50.000000)">
1166
- <g transform="translate(1238.000000, 20.000000)">
1167
- <path
1168
- d="M15,2.22044605e-14 L8,2.22044605e-14 L8,2 L12.6,2 L6.3,8.3 L7.7,9.7 L14,3.4 L14,8 L16,8 L16,1 C16,0.4 15.6,2.22044605e-14 15,2.22044605e-14 Z"
1169
- id="Path"
1170
- ></path>
1171
- <path
1172
- d="M14,16 L1,16 C0.4,16 0,15.6 0,15 L0,2 C0,1.4 0.4,1 1,1 L5,1 L5,3 L2,3 L2,14 L13,14 L13,11 L15,11 L15,15 C15,15.6 14.6,16 14,16 Z"
1173
- id="Path"
1174
- ></path>
1175
- </g>
1300
+ <div class="main">
1301
+ <div id="loader"></div>
1302
+ <div class="container-fluid">
1303
+ <div class="row" style="visibility: hidden" id="report">
1304
+ <div class="col-12 pt-4 pb-4">
1305
+ <table id="oobee-table" class="display" style="width: 100%">
1306
+ <thead>
1307
+ <tr>
1308
+ <th>IMPACT</th>
1309
+ <th class="dt-nowrap">ISSUE</th>
1310
+ <th class="dt-nowrap">PAGE</th>
1311
+ <th class="element">HTML ELEMENT <span>Hover to view full</span></th>
1312
+ <th class="dt-nowrap text-center">HELP URL</th>
1313
+ <th class="dt-nowrap text-center">FIXED?</th>
1314
+ </tr>
1315
+ </thead>
1316
+ <tbody>
1317
+ <tr>
1318
+ <td>
1319
+ <span class="impact critical"><span class="hidden">3</span>critical</span><br />
1320
+ <div class="impact-icon-size">disabilities</div>
1321
+ </td>
1322
+ <td class="issue">
1323
+ Buttons must have discernible text<br />
1324
+ <a class="wcag-clause" href="" target="_blank">WCAG </a>
1325
+ </td>
1326
+ <td class="page">
1327
+ <a href="https:&#x2F;&#x2F;www.isomer.gov.sg&#x2F;terms-of-use&#x2F;"
1328
+ target="_blank">&#x2F;terms-of-use&#x2F;</a>
1329
+ </td>
1330
+ <td class="element">
1331
+ &lt;button class&#x3D;&#39;bp-button&#39;&gt;&lt;i class&#x3D;&#39;sgds-icon
1332
+ sgds-icon-mail is-size-4&#39;&gt;&lt;&#x2F;i&gt;&#x2F;button&gt;
1333
+ </td>
1334
+ <td class="text-center dt-nowrap">
1335
+ <a href="https:&#x2F;&#x2F;dequeuniversity.com&#x2F;rules&#x2F;axe&#x2F;4.2&#x2F;button-name?application&#x3D;oobee"
1336
+ target="_blank">
1337
+ <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
1338
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1339
+ <g class="link-icon" transform="translate(-1259.000000, -254.000000)" fill-rule="nonzero">
1340
+ <g transform="translate(24.000000, 184.000000)">
1341
+ <g transform="translate(-3.000000, 50.000000)">
1342
+ <g transform="translate(1238.000000, 20.000000)">
1343
+ <path
1344
+ d="M15,2.22044605e-14 L8,2.22044605e-14 L8,2 L12.6,2 L6.3,8.3 L7.7,9.7 L14,3.4 L14,8 L16,8 L16,1 C16,0.4 15.6,2.22044605e-14 15,2.22044605e-14 Z"
1345
+ id="Path"></path>
1346
+ <path
1347
+ d="M14,16 L1,16 C0.4,16 0,15.6 0,15 L0,2 C0,1.4 0.4,1 1,1 L5,1 L5,3 L2,3 L2,14 L13,14 L13,11 L15,11 L15,15 C15,15.6 14.6,16 14,16 Z"
1348
+ id="Path"></path>
1176
1349
  </g>
1177
1350
  </g>
1178
1351
  </g>
1179
1352
  </g>
1180
- </svg>
1181
- </a>
1182
- </td>
1183
- <td class="text-center dt-nowrap"></td>
1184
- </tr>
1185
- <tr>
1186
- <td>
1187
- <span class="impact serious"><span class="hidden">3</span>serious</span><br />
1188
- <div class="impact-icon-size">disabilities</div>
1189
- </td>
1190
- <td class="issue">
1191
- Buttons must have discernible text<br />
1192
- <a class="wcag-clause" href="" target="_blank">WCAG </a>
1193
- </td>
1194
- <td class="page">
1195
- <a
1196
- href="https:&#x2F;&#x2F;www.isomer.gov.sg&#x2F;terms-of-use&#x2F;"
1197
- target="_blank"
1198
- >&#x2F;terms-of-use&#x2F;</a
1199
- >
1200
- </td>
1201
- <td class="element">
1202
- &lt;button class&#x3D;&#39;bp-button&#39;&gt;&lt;i class&#x3D;&#39;sgds-icon
1203
- sgds-icon-mail is-size-4&#39;&gt;&lt;&#x2F;i&gt;&#x2F;button&gt;
1204
- </td>
1205
- <td class="text-center dt-nowrap">
1206
- <a
1207
- href="https:&#x2F;&#x2F;dequeuniversity.com&#x2F;rules&#x2F;axe&#x2F;4.2&#x2F;button-name?application&#x3D;oobee"
1208
- target="_blank"
1209
- >
1210
- <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
1211
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1212
- <g
1213
- class="link-icon"
1214
- transform="translate(-1259.000000, -254.000000)"
1215
- fill-rule="nonzero"
1216
- >
1217
- <g transform="translate(24.000000, 184.000000)">
1218
- <g transform="translate(-3.000000, 50.000000)">
1219
- <g transform="translate(1238.000000, 20.000000)">
1220
- <path
1221
- d="M15,2.22044605e-14 L8,2.22044605e-14 L8,2 L12.6,2 L6.3,8.3 L7.7,9.7 L14,3.4 L14,8 L16,8 L16,1 C16,0.4 15.6,2.22044605e-14 15,2.22044605e-14 Z"
1222
- id="Path"
1223
- ></path>
1224
- <path
1225
- d="M14,16 L1,16 C0.4,16 0,15.6 0,15 L0,2 C0,1.4 0.4,1 1,1 L5,1 L5,3 L2,3 L2,14 L13,14 L13,11 L15,11 L15,15 C15,15.6 14.6,16 14,16 Z"
1226
- id="Path"
1227
- ></path>
1228
- </g>
1353
+ </g>
1354
+ </svg>
1355
+ </a>
1356
+ </td>
1357
+ <td class="text-center dt-nowrap"></td>
1358
+ </tr>
1359
+ <tr>
1360
+ <td>
1361
+ <span class="impact serious"><span class="hidden">3</span>serious</span><br />
1362
+ <div class="impact-icon-size">disabilities</div>
1363
+ </td>
1364
+ <td class="issue">
1365
+ Buttons must have discernible text<br />
1366
+ <a class="wcag-clause" href="" target="_blank">WCAG </a>
1367
+ </td>
1368
+ <td class="page">
1369
+ <a href="https:&#x2F;&#x2F;www.isomer.gov.sg&#x2F;terms-of-use&#x2F;"
1370
+ target="_blank">&#x2F;terms-of-use&#x2F;</a>
1371
+ </td>
1372
+ <td class="element">
1373
+ &lt;button class&#x3D;&#39;bp-button&#39;&gt;&lt;i class&#x3D;&#39;sgds-icon
1374
+ sgds-icon-mail is-size-4&#39;&gt;&lt;&#x2F;i&gt;&#x2F;button&gt;
1375
+ </td>
1376
+ <td class="text-center dt-nowrap">
1377
+ <a href="https:&#x2F;&#x2F;dequeuniversity.com&#x2F;rules&#x2F;axe&#x2F;4.2&#x2F;button-name?application&#x3D;oobee"
1378
+ target="_blank">
1379
+ <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
1380
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1381
+ <g class="link-icon" transform="translate(-1259.000000, -254.000000)" fill-rule="nonzero">
1382
+ <g transform="translate(24.000000, 184.000000)">
1383
+ <g transform="translate(-3.000000, 50.000000)">
1384
+ <g transform="translate(1238.000000, 20.000000)">
1385
+ <path
1386
+ d="M15,2.22044605e-14 L8,2.22044605e-14 L8,2 L12.6,2 L6.3,8.3 L7.7,9.7 L14,3.4 L14,8 L16,8 L16,1 C16,0.4 15.6,2.22044605e-14 15,2.22044605e-14 Z"
1387
+ id="Path"></path>
1388
+ <path
1389
+ d="M14,16 L1,16 C0.4,16 0,15.6 0,15 L0,2 C0,1.4 0.4,1 1,1 L5,1 L5,3 L2,3 L2,14 L13,14 L13,11 L15,11 L15,15 C15,15.6 14.6,16 14,16 Z"
1390
+ id="Path"></path>
1229
1391
  </g>
1230
1392
  </g>
1231
1393
  </g>
1232
1394
  </g>
1233
- </svg>
1234
- </a>
1235
- </td>
1236
- <td class="text-center dt-nowrap"></td>
1237
- </tr>
1238
- <tr>
1239
- <td>
1240
- <span class="impact minor"><span class="hidden">3</span>minor</span><br />
1241
- <div class="impact-icon-size">disabilities</div>
1242
- </td>
1243
- <td class="issue">
1244
- Buttons must have discernible text<br />
1245
- <a class="wcag-clause" href="" target="_blank">WCAG </a>
1246
- </td>
1247
- <td class="page">
1248
- <a
1249
- href="https:&#x2F;&#x2F;www.isomer.gov.sg&#x2F;terms-of-use&#x2F;"
1250
- target="_blank"
1251
- >&#x2F;terms-of-use&#x2F;</a
1252
- >
1253
- </td>
1254
- <td class="element">
1255
- &lt;button class&#x3D;&#39;bp-button&#39;&gt;&lt;i class&#x3D;&#39;sgds-icon
1256
- sgds-icon-mail is-size-4&#39;&gt;&lt;&#x2F;i&gt;&#x2F;button&gt;
1257
- </td>
1258
- <td class="text-center dt-nowrap">
1259
- <a
1260
- href="https:&#x2F;&#x2F;dequeuniversity.com&#x2F;rules&#x2F;axe&#x2F;4.2&#x2F;button-name?application&#x3D;oobee"
1261
- target="_blank"
1262
- >
1263
- <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
1264
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1265
- <g
1266
- class="link-icon"
1267
- transform="translate(-1259.000000, -254.000000)"
1268
- fill-rule="nonzero"
1269
- >
1270
- <g transform="translate(24.000000, 184.000000)">
1271
- <g transform="translate(-3.000000, 50.000000)">
1272
- <g transform="translate(1238.000000, 20.000000)">
1273
- <path
1274
- d="M15,2.22044605e-14 L8,2.22044605e-14 L8,2 L12.6,2 L6.3,8.3 L7.7,9.7 L14,3.4 L14,8 L16,8 L16,1 C16,0.4 15.6,2.22044605e-14 15,2.22044605e-14 Z"
1275
- id="Path"
1276
- ></path>
1277
- <path
1278
- d="M14,16 L1,16 C0.4,16 0,15.6 0,15 L0,2 C0,1.4 0.4,1 1,1 L5,1 L5,3 L2,3 L2,14 L13,14 L13,11 L15,11 L15,15 C15,15.6 14.6,16 14,16 Z"
1279
- id="Path"
1280
- ></path>
1281
- </g>
1395
+ </g>
1396
+ </svg>
1397
+ </a>
1398
+ </td>
1399
+ <td class="text-center dt-nowrap"></td>
1400
+ </tr>
1401
+ <tr>
1402
+ <td>
1403
+ <span class="impact minor"><span class="hidden">3</span>minor</span><br />
1404
+ <div class="impact-icon-size">disabilities</div>
1405
+ </td>
1406
+ <td class="issue">
1407
+ Buttons must have discernible text<br />
1408
+ <a class="wcag-clause" href="" target="_blank">WCAG </a>
1409
+ </td>
1410
+ <td class="page">
1411
+ <a href="https:&#x2F;&#x2F;www.isomer.gov.sg&#x2F;terms-of-use&#x2F;"
1412
+ target="_blank">&#x2F;terms-of-use&#x2F;</a>
1413
+ </td>
1414
+ <td class="element">
1415
+ &lt;button class&#x3D;&#39;bp-button&#39;&gt;&lt;i class&#x3D;&#39;sgds-icon
1416
+ sgds-icon-mail is-size-4&#39;&gt;&lt;&#x2F;i&gt;&#x2F;button&gt;
1417
+ </td>
1418
+ <td class="text-center dt-nowrap">
1419
+ <a href="https:&#x2F;&#x2F;dequeuniversity.com&#x2F;rules&#x2F;axe&#x2F;4.2&#x2F;button-name?application&#x3D;oobee"
1420
+ target="_blank">
1421
+ <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
1422
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1423
+ <g class="link-icon" transform="translate(-1259.000000, -254.000000)" fill-rule="nonzero">
1424
+ <g transform="translate(24.000000, 184.000000)">
1425
+ <g transform="translate(-3.000000, 50.000000)">
1426
+ <g transform="translate(1238.000000, 20.000000)">
1427
+ <path
1428
+ d="M15,2.22044605e-14 L8,2.22044605e-14 L8,2 L12.6,2 L6.3,8.3 L7.7,9.7 L14,3.4 L14,8 L16,8 L16,1 C16,0.4 15.6,2.22044605e-14 15,2.22044605e-14 Z"
1429
+ id="Path"></path>
1430
+ <path
1431
+ d="M14,16 L1,16 C0.4,16 0,15.6 0,15 L0,2 C0,1.4 0.4,1 1,1 L5,1 L5,3 L2,3 L2,14 L13,14 L13,11 L15,11 L15,15 C15,15.6 14.6,16 14,16 Z"
1432
+ id="Path"></path>
1282
1433
  </g>
1283
1434
  </g>
1284
1435
  </g>
1285
1436
  </g>
1286
- </svg>
1287
- </a>
1288
- </td>
1289
- <td class="text-center dt-nowrap"></td>
1290
- </tr>
1291
- <tr>
1292
- <td>
1293
- <span class="impact moderate"><span class="hidden">3</span>moderate</span><br />
1294
- <div class="impact-icon-size">disabilities</div>
1295
- </td>
1296
- <td class="issue">
1297
- Buttons must have discernible text<br />
1298
- <a class="wcag-clause" href="" target="_blank">WCAG </a>
1299
- </td>
1300
- <td class="page">
1301
- <a
1302
- href="https:&#x2F;&#x2F;www.isomer.gov.sg&#x2F;terms-of-use&#x2F;"
1303
- target="_blank"
1304
- >&#x2F;terms-of-use&#x2F;</a
1305
- >
1306
- </td>
1307
- <td class="element">
1308
- &lt;button class&#x3D;&#39;bp-button&#39;&gt;&lt;i class&#x3D;&#39;sgds-icon
1309
- sgds-icon-mail is-size-4&#39;&gt;&lt;&#x2F;i&gt;&#x2F;button&gt;
1310
- </td>
1311
- <td class="text-center dt-nowrap">
1312
- <a
1313
- href="https:&#x2F;&#x2F;dequeuniversity.com&#x2F;rules&#x2F;axe&#x2F;4.2&#x2F;button-name?application&#x3D;oobee"
1314
- target="_blank"
1315
- >
1316
- <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
1317
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1318
- <g
1319
- class="link-icon"
1320
- transform="translate(-1259.000000, -254.000000)"
1321
- fill-rule="nonzero"
1322
- >
1323
- <g transform="translate(24.000000, 184.000000)">
1324
- <g transform="translate(-3.000000, 50.000000)">
1325
- <g transform="translate(1238.000000, 20.000000)">
1326
- <path
1327
- d="M15,2.22044605e-14 L8,2.22044605e-14 L8,2 L12.6,2 L6.3,8.3 L7.7,9.7 L14,3.4 L14,8 L16,8 L16,1 C16,0.4 15.6,2.22044605e-14 15,2.22044605e-14 Z"
1328
- id="Path"
1329
- ></path>
1330
- <path
1331
- d="M14,16 L1,16 C0.4,16 0,15.6 0,15 L0,2 C0,1.4 0.4,1 1,1 L5,1 L5,3 L2,3 L2,14 L13,14 L13,11 L15,11 L15,15 C15,15.6 14.6,16 14,16 Z"
1332
- id="Path"
1333
- ></path>
1334
- </g>
1437
+ </g>
1438
+ </svg>
1439
+ </a>
1440
+ </td>
1441
+ <td class="text-center dt-nowrap"></td>
1442
+ </tr>
1443
+ <tr>
1444
+ <td>
1445
+ <span class="impact moderate"><span class="hidden">3</span>moderate</span><br />
1446
+ <div class="impact-icon-size">disabilities</div>
1447
+ </td>
1448
+ <td class="issue">
1449
+ Buttons must have discernible text<br />
1450
+ <a class="wcag-clause" href="" target="_blank">WCAG </a>
1451
+ </td>
1452
+ <td class="page">
1453
+ <a href="https:&#x2F;&#x2F;www.isomer.gov.sg&#x2F;terms-of-use&#x2F;"
1454
+ target="_blank">&#x2F;terms-of-use&#x2F;</a>
1455
+ </td>
1456
+ <td class="element">
1457
+ &lt;button class&#x3D;&#39;bp-button&#39;&gt;&lt;i class&#x3D;&#39;sgds-icon
1458
+ sgds-icon-mail is-size-4&#39;&gt;&lt;&#x2F;i&gt;&#x2F;button&gt;
1459
+ </td>
1460
+ <td class="text-center dt-nowrap">
1461
+ <a href="https:&#x2F;&#x2F;dequeuniversity.com&#x2F;rules&#x2F;axe&#x2F;4.2&#x2F;button-name?application&#x3D;oobee"
1462
+ target="_blank">
1463
+ <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
1464
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1465
+ <g class="link-icon" transform="translate(-1259.000000, -254.000000)" fill-rule="nonzero">
1466
+ <g transform="translate(24.000000, 184.000000)">
1467
+ <g transform="translate(-3.000000, 50.000000)">
1468
+ <g transform="translate(1238.000000, 20.000000)">
1469
+ <path
1470
+ d="M15,2.22044605e-14 L8,2.22044605e-14 L8,2 L12.6,2 L6.3,8.3 L7.7,9.7 L14,3.4 L14,8 L16,8 L16,1 C16,0.4 15.6,2.22044605e-14 15,2.22044605e-14 Z"
1471
+ id="Path"></path>
1472
+ <path
1473
+ d="M14,16 L1,16 C0.4,16 0,15.6 0,15 L0,2 C0,1.4 0.4,1 1,1 L5,1 L5,3 L2,3 L2,14 L13,14 L13,11 L15,11 L15,15 C15,15.6 14.6,16 14,16 Z"
1474
+ id="Path"></path>
1335
1475
  </g>
1336
1476
  </g>
1337
1477
  </g>
1338
1478
  </g>
1339
- </svg>
1340
- </a>
1341
- </td>
1342
- <td class="text-center dt-nowrap"></td>
1343
- </tr>
1344
- </tbody>
1345
- </table>
1346
- </div>
1479
+ </g>
1480
+ </svg>
1481
+ </a>
1482
+ </td>
1483
+ <td class="text-center dt-nowrap"></td>
1484
+ </tr>
1485
+ </tbody>
1486
+ </table>
1347
1487
  </div>
1348
1488
  </div>
1349
1489
  </div>
1490
+ </div>
1491
+
1492
+ <div class="footer">
1493
+ <div class="container-fluid">
1494
+ <div class="row text-center pt-2 pb-2">
1495
+ <div class="col-sm-6 text-sm-left">
1496
+ <a href="mailto:enquiries_HATS@tech.gov.sg">Help us improve</a>
1497
+ <hr class="d-sm-none" />
1498
+ </div>
1499
+ <div class="col-sm-6 text-sm-right">
1500
+ Created by
1501
+ <a href="https://form.gov.sg/64d1fcde4d0bb70012010995" target="_blank">GovTech Accessibility Enabling Team</a>
1502
+ |
1503
+ <a href="https://go.gov.sg/oobee-report-third-party-licenses" target="_blank">Third-Party Licenses</a>
1350
1504
 
1351
- <div class="footer">
1352
- <div class="container-fluid">
1353
- <div class="row text-center pt-2 pb-2">
1354
- <div class="col-sm-6 text-sm-left">
1355
- <a href="mailto:enquiries_HATS@tech.gov.sg">Help us improve</a>
1356
- <hr class="d-sm-none" />
1357
- </div>
1358
- <div class="col-sm-6 text-sm-right">
1359
- Created by
1360
- <a href="https://www.hive.gov.sg/" target="_blank"
1361
- >Government Digital Services Singapore</a
1362
- >
1363
- </div>
1364
1505
  </div>
1365
1506
  </div>
1366
1507
  </div>
1508
+ </div>
1367
1509
 
1368
- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
1369
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
1370
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
1371
- <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
1372
- <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
1373
- <script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
1374
- <script>
1375
- function closeWarning() {}
1376
- $(document).ready(function () {
1377
- $('#oobee-table').DataTable({
1378
- paging: !1,
1379
- columnDefs: [
1380
- { targets: [3, 4, 5], orderable: !1 },
1381
- { width: 500, targets: 1 },
1382
- { width: 150, targets: 2 },
1383
- { width: 300, targets: 3 },
1384
- { orderable: !1, className: 'select-checkbox', targets: 5 },
1385
- ],
1386
- select: { style: 'multi', selector: 'td:last-child' },
1387
- language: {
1388
- select: { rows: { _: '%d issues fixed', 0: '0 issue fixed', 1: '1 issue fixed' } },
1389
- emptyTable: 'No issue found in your website.',
1390
- },
1391
- oLanguage: { sInfo: 'Showing _TOTAL_ issues' },
1392
- order: [[0, 'desc']],
1393
- scrollX: !0,
1394
- });
1395
- ((window.onbeforeunload = function (e) {
1396
- var t = 'Sure you want to leave?';
1397
- return void 0 === e && (e = window.event), e && (e.returnValue = t), t;
1398
- }),
1510
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
1511
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
1512
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
1513
+ <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
1514
+ <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
1515
+ <script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
1516
+ <script>
1517
+ function closeWarning() { }
1518
+ $(document).ready(function () {
1519
+ $('#oobee-table').DataTable({
1520
+ paging: !1,
1521
+ columnDefs: [
1522
+ { targets: [3, 4, 5], orderable: !1 },
1523
+ { width: 500, targets: 1 },
1524
+ { width: 150, targets: 2 },
1525
+ { width: 300, targets: 3 },
1526
+ { orderable: !1, className: 'select-checkbox', targets: 5 },
1527
+ ],
1528
+ select: { style: 'multi', selector: 'td:last-child' },
1529
+ language: {
1530
+ select: { rows: { _: '%d issues fixed', 0: '0 issue fixed', 1: '1 issue fixed' } },
1531
+ emptyTable: 'No issue found in your website.',
1532
+ },
1533
+ oLanguage: { sInfo: 'Showing _TOTAL_ issues' },
1534
+ order: [[0, 'desc']],
1535
+ scrollX: !0,
1536
+ });
1537
+ ((window.onbeforeunload = function (e) {
1538
+ var t = 'Sure you want to leave?';
1539
+ return void 0 === e && (e = window.event), e && (e.returnValue = t), t;
1540
+ }),
1399
1541
  $(function () {
1400
1542
  $('[data-toggle="tooltip"]').tooltip();
1401
1543
  }),
@@ -1413,19 +1555,20 @@
1413
1555
  !1,
1414
1556
  ),
1415
1557
  window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
1416
- ? ((document.getElementById('dm').checked = !0), document.body.classList.add('dark'))
1417
- : document.body.classList.remove('dark');
1418
- });
1419
- </script>
1420
- <script>
1421
- var timeout;
1422
- function load() {
1423
- timeout = setTimeout(showPage, 2000);
1424
- }
1425
- function showPage() {
1426
- document.getElementById('loader').style.display = 'none';
1427
- document.getElementById('report').style.visibility = 'visible';
1428
- }
1429
- </script>
1430
- </body>
1431
- </html>
1558
+ ? ((document.getElementById('dm').checked = !0), document.body.classList.add('dark'))
1559
+ : document.body.classList.remove('dark');
1560
+ });
1561
+ </script>
1562
+ <script>
1563
+ var timeout;
1564
+ function load() {
1565
+ timeout = setTimeout(showPage, 2000);
1566
+ }
1567
+ function showPage() {
1568
+ document.getElementById('loader').style.display = 'none';
1569
+ document.getElementById('report').style.visibility = 'visible';
1570
+ }
1571
+ </script>
1572
+ </body>
1573
+
1574
+ </html>