@windward/core 0.5.2 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/components/Content/Blocks/Accordion.vue +28 -0
  3. package/components/Content/Blocks/ClickableIcons.vue +31 -21
  4. package/components/Content/Blocks/Email.vue +11 -2
  5. package/components/Content/Blocks/FileDownload.vue +6 -8
  6. package/components/Content/Blocks/GenerateAIQuestionButton.vue +14 -6
  7. package/components/Content/Blocks/HorizontalRule.vue +1 -4
  8. package/components/Content/Blocks/ScenarioChoice.vue +58 -33
  9. package/components/Content/Blocks/Tab.vue +5 -0
  10. package/components/Content/Blocks/UserUpload.vue +1 -8
  11. package/components/Content/Blocks/Video.vue +96 -8
  12. package/components/Settings/AccordionSettings.vue +176 -136
  13. package/components/Settings/BlockQuoteSettings.vue +41 -2
  14. package/components/Settings/ClickableIconsSettings.vue +66 -10
  15. package/components/Settings/EmailSettings.vue +39 -4
  16. package/components/Settings/FileDownloadSettings.vue +38 -7
  17. package/components/Settings/HorizontalRuleSettings.vue +0 -3
  18. package/components/Settings/ScenarioChoiceSettings.vue +47 -9
  19. package/components/Settings/TabSettings.vue +124 -71
  20. package/components/Settings/TextEditorSettings.vue +14 -2
  21. package/components/Settings/UserUploadSettings.vue +42 -23
  22. package/components/Settings/VideoSettings/SourcePicker.vue +222 -0
  23. package/components/Settings/VideoSettings.vue +151 -165
  24. package/components/utils/TinyMCEWrapper.vue +25 -3
  25. package/components/utils/assets/tinymce/content/global.scss +14 -0
  26. package/components/utils/glossary/CourseGlossary.vue +52 -27
  27. package/helpers/tinymce/WindwardPlugins.ts +59 -10
  28. package/i18n/en-US/components/content/blocks/generate_questions.ts +2 -1
  29. package/i18n/en-US/components/content/blocks/video.ts +2 -51
  30. package/i18n/en-US/components/settings/accordion.ts +1 -0
  31. package/i18n/en-US/components/settings/tab.ts +1 -0
  32. package/i18n/en-US/components/settings/user_upload.ts +1 -0
  33. package/i18n/en-US/components/settings/video.ts +51 -0
  34. package/i18n/en-US/components/utils/tiny_mce_wrapper.ts +9 -1
  35. package/i18n/en-US/shared/settings.ts +3 -0
  36. package/i18n/es-ES/components/content/blocks/generate_questions.ts +2 -1
  37. package/i18n/es-ES/components/content/blocks/video.ts +3 -53
  38. package/i18n/es-ES/components/settings/accordion.ts +1 -0
  39. package/i18n/es-ES/components/settings/tab.ts +2 -0
  40. package/i18n/es-ES/components/settings/user_upload.ts +1 -0
  41. package/i18n/es-ES/components/settings/video.ts +53 -0
  42. package/i18n/es-ES/components/utils/tiny_mce_wrapper.ts +9 -0
  43. package/i18n/es-ES/shared/settings.ts +3 -0
  44. package/i18n/sv-SE/components/content/blocks/generate_questions.ts +2 -1
  45. package/i18n/sv-SE/components/content/blocks/video.ts +2 -51
  46. package/i18n/sv-SE/components/settings/accordion.ts +2 -0
  47. package/i18n/sv-SE/components/settings/tab.ts +1 -0
  48. package/i18n/sv-SE/components/settings/user_upload.ts +1 -0
  49. package/i18n/sv-SE/components/settings/video.ts +51 -0
  50. package/i18n/sv-SE/components/utils/tiny_mce_wrapper.ts +8 -0
  51. package/i18n/sv-SE/shared/settings.ts +3 -0
  52. package/package.json +2 -1
  53. package/plugin.js +1 -1
@@ -4,6 +4,9 @@
4
4
  <v-col cols="12">
5
5
  <v-text-field
6
6
  v-model="block.metadata.config.title"
7
+ :counter="50"
8
+ outlined
9
+ :rules="validation.shortInputRules"
7
10
  :label="$t('windward.core.components.settings.video.title')"
8
11
  :disabled="render"
9
12
  ></v-text-field>
@@ -11,6 +14,7 @@
11
14
  v-model="block.metadata.config.description"
12
15
  outlined
13
16
  auto-grow
17
+ :rules="validation.instructionRule"
14
18
  :counter="255"
15
19
  :label="
16
20
  $t(
@@ -27,83 +31,48 @@
27
31
  <v-tab>
28
32
  {{
29
33
  $t(
30
- 'windward.core.components.content.blocks.video.tabs.video'
34
+ 'windward.core.components.settings.video.tabs.source'
31
35
  )
32
36
  }}
33
37
  </v-tab>
34
38
  <v-tab>
35
39
  {{
36
40
  $t(
37
- 'windward.core.components.content.blocks.video.tabs.poster'
41
+ 'windward.core.components.settings.video.tabs.poster'
38
42
  )
39
43
  }}
40
44
  </v-tab>
41
- <v-tab>
45
+ <v-tab v-if="showPreRoll">
42
46
  {{
43
47
  $t(
44
- 'windward.core.components.content.blocks.video.tabs.preroll'
48
+ 'windward.core.components.settings.video.tabs.preroll'
45
49
  )
46
50
  }}
47
51
  </v-tab>
48
- <v-tab>
52
+ <v-tab v-if="showPostRoll">
49
53
  {{
50
54
  $t(
51
- 'windward.core.components.content.blocks.video.tabs.postroll'
55
+ 'windward.core.components.settings.video.tabs.postroll'
52
56
  )
53
57
  }}
54
58
  </v-tab>
55
59
  </v-tabs>
56
60
 
57
- <v-tabs-items v-model="fileTab">
61
+ <v-tabs-items v-model="fileTab" class="mt-2">
58
62
  <v-tab-item class="mb-1">
59
- <ContentBlockAsset
60
- v-model="media.source"
63
+ <SourcePicker
64
+ :source.sync="media.source"
65
+ :track.sync="media.track"
61
66
  :assets.sync="block.assets"
62
- mimes="video/mp4,audio/mpeg,video/webm,video/youtube"
63
- allow-url
64
- class="mb-4"
67
+ :source-label="
68
+ $t(
69
+ 'windward.core.components.settings.video.place_source'
70
+ )
71
+ "
65
72
  :disabled="render"
66
- @change="onSourceSelect"
67
- >
68
- <template #title>
69
- {{
70
- $t(
71
- 'windward.core.components.content.blocks.video.video.title'
72
- )
73
- }}
74
- </template>
75
- <template #description>
76
- {{
77
- $t(
78
- 'windward.core.components.content.blocks.video.video.configure_blurb'
79
- )
80
- }}
81
- </template>
82
- </ContentBlockAsset>
83
- <ContentBlockAsset
84
- v-model="media.track"
85
- :assets.sync="block.assets"
86
- mimes="text/vtt,text/xml"
87
- allow-url
88
- class="mb-4"
89
- :disabled="render"
90
- @change="onTrackSelect"
91
- >
92
- <template #title>
93
- {{
94
- $t(
95
- 'windward.core.components.content.blocks.video.caption.title'
96
- )
97
- }}
98
- </template>
99
- <template #description>
100
- {{
101
- $t(
102
- 'windward.core.components.content.blocks.video.caption.configure_blurb'
103
- )
104
- }}
105
- </template>
106
- </ContentBlockAsset>
73
+ @change:source="onSourceSelect"
74
+ @change:track="onTrackSelect"
75
+ ></SourcePicker>
107
76
  </v-tab-item>
108
77
 
109
78
  <v-tab-item class="mb-1">
@@ -118,120 +87,67 @@
118
87
  <template #title>
119
88
  {{
120
89
  $t(
121
- 'windward.core.components.content.blocks.video.poster.title'
90
+ 'windward.core.components.settings.video.poster.title'
122
91
  )
123
92
  }}
124
93
  </template>
125
94
  <template #description>
126
95
  {{
127
96
  $t(
128
- 'windward.core.components.content.blocks.video.poster.configure_blurb'
97
+ 'windward.core.components.settings.video.poster.configure_blurb'
129
98
  )
130
99
  }}
131
100
  </template>
132
101
  </ContentBlockAsset>
133
102
  </v-tab-item>
134
103
 
135
- <v-tab-item class="mb-1">
136
- <ContentBlockAsset
137
- v-model="media.ads.preroll.source"
138
- :assets.sync="block.assets"
139
- mimes="video/mp4,video/webm"
140
- allow-url
141
- class="mb-4"
142
- :disabled="render"
143
- @change="onAdSourceSelect($event, 0)"
144
- >
145
- <template #title>
146
- {{
147
- $t(
148
- 'windward.core.components.content.blocks.video.preroll.title'
149
- )
150
- }}
151
- </template>
152
- <template #description>
153
- {{
154
- $t(
155
- 'windward.core.components.content.blocks.video.preroll.configure_blurb'
156
- )
157
- }}
158
- </template>
159
- </ContentBlockAsset>
160
-
161
- <ContentBlockAsset
162
- v-model="media.ads.preroll.track"
104
+ <v-tab-item v-if="showPreRoll" class="mb-1">
105
+ <SourcePicker
106
+ :source.sync="media.ads[0].source"
107
+ :track.sync="media.ads[0].track"
163
108
  :assets.sync="block.assets"
164
- mimes="text/vtt,text/xml"
165
- allow-url
109
+ :source-label="
110
+ $t(
111
+ 'windward.core.components.settings.video.preroll.title'
112
+ )
113
+ "
114
+ :source-description="
115
+ $t(
116
+ 'windward.core.components.settings.video.preroll.configure_blurb'
117
+ )
118
+ "
166
119
  :disabled="render"
167
- @change="onAdTrackSelect($event, 0)"
168
- >
169
- <template #title>
170
- {{
171
- $t(
172
- 'windward.core.components.content.blocks.video.caption.title'
173
- )
174
- }}
175
- </template>
176
- <template #description>
177
- {{
178
- $t(
179
- 'windward.core.components.content.blocks.video.caption.configure_blurb'
180
- )
181
- }}
182
- </template>
183
- </ContentBlockAsset>
120
+ @change:source="
121
+ (file, rawFile) =>
122
+ onAdSourceSelect(file, rawFile, 0)
123
+ "
124
+ @change:track="onAdTrackSelect($event, 0)"
125
+ ></SourcePicker>
184
126
  </v-tab-item>
185
127
 
186
128
  <v-tab-item class="mb-1">
187
- <ContentBlockAsset
188
- v-model="media.ads.postroll.source"
129
+ <SourcePicker
130
+ v-if="showPostRoll"
131
+ :source.sync="media.ads[100].source"
132
+ :track.sync="media.ads[100].track"
189
133
  :assets.sync="block.assets"
190
- mimes="video/mp4,video/webm"
191
- allow-url
192
- class="mb-4"
134
+ :source-label="
135
+ $t(
136
+ 'windward.core.components.settings.video.postroll.title'
137
+ )
138
+ "
139
+ :source-description="
140
+ $t(
141
+ 'windward.core.components.settings.video.postroll.configure_blurb'
142
+ )
143
+ "
193
144
  :disabled="render"
194
- @change="onAdSourceSelect($event, 100)"
195
- >
196
- <template #title>
197
- {{
198
- $t(
199
- 'windward.core.components.content.blocks.video.postroll.title'
200
- )
201
- }}
202
- </template>
203
- <template #description>
204
- {{
205
- $t(
206
- 'windward.core.components.content.blocks.video.postroll.configure_blurb'
207
- )
208
- }}
209
- </template>
210
- </ContentBlockAsset>
211
-
212
- <ContentBlockAsset
213
- v-model="media.ads.postroll.track"
214
- :assets.sync="block.assets"
215
- mimes="text/vtt,text/xml"
216
- allow-url
217
- :disabled="render"
218
- @change="onAdTrackSelect($event, 100)"
219
- >
220
- <template #title>
221
- {{
222
- $t(
223
- 'windward.core.components.content.blocks.video.caption.title'
224
- )
225
- }}
226
- </template>
227
- <template #description>
228
- {{
229
- $t(
230
- 'windward.core.components.content.blocks.video.caption.configure_blurb'
231
- )
232
- }}
233
- </template>
234
- </ContentBlockAsset>
145
+ @change:source="
146
+ (file, rawFile) =>
147
+ onAdSourceSelect(file, rawFile, 0)
148
+ "
149
+ @change:track="onAdTrackSelect($event, 0)"
150
+ ></SourcePicker>
235
151
  </v-tab-item>
236
152
  </v-tabs-items>
237
153
  </v-col>
@@ -359,7 +275,7 @@
359
275
  :items="playbackRateOptions"
360
276
  :label="
361
277
  $t(
362
- 'windward.core.components.content.blocks.video.video.playback_rates'
278
+ 'windward.core.components.settings.video.video.playback_rates'
363
279
  )
364
280
  "
365
281
  multiple
@@ -381,7 +297,7 @@
381
297
  "
382
298
  :label="
383
299
  $t(
384
- 'windward.core.components.content.blocks.video.video.controls'
300
+ 'windward.core.components.settings.video.video.controls'
385
301
  )
386
302
  "
387
303
  :disabled="render"
@@ -392,7 +308,7 @@
392
308
  "
393
309
  :label="
394
310
  $t(
395
- 'windward.core.components.content.blocks.video.video.rewind'
311
+ 'windward.core.components.settings.video.video.rewind'
396
312
  )
397
313
  "
398
314
  :disabled="render"
@@ -404,7 +320,7 @@
404
320
  "
405
321
  :label="
406
322
  $t(
407
- 'windward.core.components.content.blocks.video.video.captionsmenu'
323
+ 'windward.core.components.settings.video.video.captionsmenu'
408
324
  )
409
325
  "
410
326
  :disabled="render"
@@ -416,7 +332,7 @@
416
332
  "
417
333
  :label="
418
334
  $t(
419
- 'windward.core.components.content.blocks.video.video.disablepictureinpicture'
335
+ 'windward.core.components.settings.video.video.disablepictureinpicture'
420
336
  )
421
337
  "
422
338
  :disabled="render"
@@ -424,11 +340,11 @@
424
340
  <!--
425
341
  <v-switch
426
342
  v-model="block.metadata.config.attributes.playlistmenu"
427
- :label="$t('windward.core.components.content.blocks.video.video.attributes.playlistmenu')"
343
+ :label="$t('windward.core.components.settings.video.video.attributes.playlistmenu')"
428
344
  ></v-switch>
429
345
  <v-switch
430
346
  v-model="block.metadata.config.attributes.playlistautoadvance"
431
- :label="$t('windward.core.components.content.blocks.video.video.attributes.playlistautoadvance')"
347
+ :label="$t('windward.core.components.settings.video.video.attributes.playlistautoadvance')"
432
348
  ></v-switch>
433
349
  -->
434
350
  </v-col>
@@ -439,7 +355,7 @@
439
355
  "
440
356
  :label="
441
357
  $t(
442
- 'windward.core.components.content.blocks.video.video.muted'
358
+ 'windward.core.components.settings.video.video.muted'
443
359
  )
444
360
  "
445
361
  :disabled="render"
@@ -450,7 +366,7 @@
450
366
  "
451
367
  :label="
452
368
  $t(
453
- 'windward.core.components.content.blocks.video.video.loop'
369
+ 'windward.core.components.settings.video.video.loop'
454
370
  )
455
371
  "
456
372
  :disabled="render"
@@ -462,7 +378,7 @@
462
378
  "
463
379
  :label="
464
380
  $t(
465
- 'windward.core.components.content.blocks.video.video.playsinline'
381
+ 'windward.core.components.settings.video.video.playsinline'
466
382
  )
467
383
  "
468
384
  :disabled="render"
@@ -478,11 +394,13 @@
478
394
  <script>
479
395
  import _ from 'lodash'
480
396
  import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
397
+ import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
398
+ import SourcePicker from './VideoSettings/SourcePicker.vue'
481
399
 
482
400
  export default {
483
401
  name: 'VideoSettings',
484
402
  extends: BaseContentSettings,
485
- components: {},
403
+ components: { ContentBlockAsset, SourcePicker },
486
404
  data() {
487
405
  return {
488
406
  fileTab: null,
@@ -490,19 +408,64 @@ export default {
490
408
  playlistPaginator: 1,
491
409
  media: {
492
410
  source: null,
411
+ sourceInherit: true,
493
412
  track: null,
494
413
  poster: null,
495
414
  ads: {
496
- preroll: {
415
+ // preroll
416
+ 0: {
497
417
  source: null,
498
418
  track: null,
419
+ inherit: true,
499
420
  },
500
- postroll: {
421
+ // postroll
422
+ 100: {
501
423
  source: null,
502
424
  track: null,
425
+ inherit: true,
503
426
  },
504
427
  },
505
428
  },
429
+ validation: {
430
+ shortInputRules: [
431
+ (v) => {
432
+ if (v && v.length >= 50) {
433
+ return this.$t(
434
+ 'windward.core.shared.settings.errors.input_limitations',
435
+ [50]
436
+ )
437
+ } else {
438
+ return true
439
+ }
440
+ },
441
+ ],
442
+ instructionRule: [
443
+ (v) => {
444
+ if (v && v.length >= 255) {
445
+ return this.$t(
446
+ 'windward.core.shared.settings.errors.input_limitations',
447
+ [255]
448
+ )
449
+ } else {
450
+ return true
451
+ }
452
+ },
453
+ ],
454
+ clueRule: [
455
+ (v) => {
456
+ if (v && v.length >= 155) {
457
+ return this.$t(
458
+ 'windward.core.shared.settings.errors.input_limitations',
459
+ [155]
460
+ )
461
+ } else {
462
+ return true
463
+ }
464
+ },
465
+ ],
466
+ },
467
+ showPreRoll: false,
468
+ showPostRoll: false,
506
469
  }
507
470
  },
508
471
  computed: {
@@ -548,7 +511,7 @@ export default {
548
511
  )
549
512
 
550
513
  this.media.ads = {
551
- preroll: {
514
+ 0: {
552
515
  source: this.resolveAsset(
553
516
  _.get(
554
517
  this.block,
@@ -572,7 +535,7 @@ export default {
572
535
  )
573
536
  ),
574
537
  },
575
- postroll: {
538
+ 100: {
576
539
  source: this.resolveAsset(
577
540
  _.get(
578
541
  this.block,
@@ -610,6 +573,17 @@ export default {
610
573
  delete self.block.metadata.config.__isDirty
611
574
  }, 500)
612
575
  },
576
+ getLinkedCaptions(file) {
577
+ // Check to see if the video source has a linked asset and it's a vtt file
578
+ const linkedCaption = _.find(
579
+ _.get(file, 'asset.linked_assets', []),
580
+ function (f) {
581
+ return _.get(f, 'asset.metadata.extension', '') === 'vtt'
582
+ }
583
+ )
584
+
585
+ return linkedCaption || null
586
+ },
613
587
  /**
614
588
  * Returns the next array index for an ad slot
615
589
  * If a slot is already defined then return that index
@@ -683,7 +657,7 @@ export default {
683
657
 
684
658
  this.reloadVideo()
685
659
  },
686
- onSourceSelect(file) {
660
+ onSourceSelect(file, rawFile) {
687
661
  // No file, clear the selection
688
662
  if (_.isEmpty(file)) {
689
663
  delete this.block.metadata.config.playlist[this.playlistIndex]
@@ -692,6 +666,10 @@ export default {
692
666
  this.playlistIndex
693
667
  ].sources = []
694
668
 
669
+ // Clear out any associated captions
670
+ this.media.track = null
671
+ this.onTrackSelect(null)
672
+
695
673
  this.showVideo = false
696
674
  } else {
697
675
  // Apply an updated name
@@ -707,6 +685,10 @@ export default {
707
685
  ].sources = [file]
708
686
 
709
687
  this.showVideo = true
688
+
689
+ // Clear the tracks. it will either be inherited via linked captions or be hard-set by the user
690
+ this.media.track = null
691
+ this.onTrackSelect(null)
710
692
  }
711
693
  this.reloadVideo()
712
694
  },
@@ -721,7 +703,7 @@ export default {
721
703
  }
722
704
  this.reloadVideo()
723
705
  },
724
- onAdSourceSelect(file, playAtPercent) {
706
+ onAdSourceSelect(file, rawFile, playAtPercent) {
725
707
  const adIndex = this.getAdSlot(playAtPercent)
726
708
 
727
709
  // Prep in case the ad slot isn't setup yet
@@ -739,6 +721,10 @@ export default {
739
721
  this.block.metadata.config.playlist[this.playlistIndex].ads[
740
722
  adIndex
741
723
  ].sources = [file]
724
+
725
+ // Clear the tracks. it will either be inherited via linked captions or be hard-set by the user
726
+ this.media.ads[playAtPercent].track = null
727
+ this.onAdTrackSelect(null, playAtPercent)
742
728
  }
743
729
  this.reloadVideo()
744
730
  },
@@ -5,9 +5,12 @@
5
5
  'windward-tinymce-wrapper windward-tinymce-wrapper' +
6
6
  (isDarkTheme ? '--theme-dark' : '--theme-light')
7
7
  "
8
+ :data-cy="dataCy"
8
9
  >
9
10
  <label v-if="label" class="editor-label">{{ label }}</label>
11
+
10
12
  <Editor
13
+ :id="id"
11
14
  :key="seed + (isDarkTheme ? '-theme-dark' : '-theme-light')"
12
15
  v-model="text"
13
16
  initial-value=""
@@ -22,6 +25,8 @@
22
25
  }"
23
26
  >
24
27
  </Editor>
28
+
29
+ <label v-if="hint" class="editor-hint">{{ hint }}</label>
25
30
  </div>
26
31
 
27
32
  <v-btn-toggle dense multiple class="pt-1 d-flex justify-end">
@@ -129,6 +134,7 @@ export default {
129
134
  },
130
135
  props: {
131
136
  value: { type: String, required: true, default: '' },
137
+ id: { type: String, required: false, default: '' },
132
138
  height: { type: Number, required: false, default: null },
133
139
  menubar: {
134
140
  type: String,
@@ -139,10 +145,11 @@ export default {
139
145
  type: String,
140
146
  required: false,
141
147
  default:
142
- 'undo redo | styles | bold italic underline strikethrough removeformat | alignleft aligncenter alignright | table bullist numlist outdent indent | glossaryButton fibFormatButton mathButton ',
148
+ 'undo redo | styles | bold italic underline strikethrough removeformat | alignleft aligncenter alignright | table tablerowprops tablecellprops |bullist numlist outdent indent |glossaryButton fibFormatButton mathButton a11yButton',
143
149
  },
144
150
  root_block: { type: String, required: false, default: 'div' },
145
- label: { type: String, required: true, default: '' },
151
+ label: { type: String, required: false, default: '' },
152
+ hint: { type: String, required: false, default: '' },
146
153
  inline: { type: Boolean, required: false, default: false },
147
154
  allowRead: { type: Boolean, required: false, default: false },
148
155
  },
@@ -168,6 +175,14 @@ export default {
168
175
  },
169
176
  },
170
177
  computed: {
178
+ dataCy() {
179
+ return (
180
+ this.id ||
181
+ this.label.toLowerCase().replaceAll(/[^a-z0-9]/g, '-') ||
182
+ this.hint.toLowerCase().replaceAll(/[^a-z0-9]/g, '-') ||
183
+ _.get(this, '$parent.$parent.$options.name', '')
184
+ )
185
+ },
171
186
  isDarkTheme() {
172
187
  return this.$vuetify.theme.isDark
173
188
  },
@@ -223,7 +238,7 @@ export default {
223
238
  },
224
239
  format: {
225
240
  title: 'Format',
226
- items: ' bold italic underline strikethrough superscript subscript codeformat | formats align | forecolor backcolor | language | removeformat',
241
+ items: ' bold italic underline strikethrough superscript subscript codeformat | formats align | language | removeformat',
227
242
  },
228
243
  },
229
244
  plugins: [
@@ -248,6 +263,7 @@ export default {
248
263
  table_advtab: false,
249
264
  table_cell_advtab: false,
250
265
  table_row_advtab: false,
266
+ table_header_type: 'auto',
251
267
  table_default_attributes: {
252
268
  class: 'default',
253
269
  },
@@ -542,6 +558,12 @@ export default {
542
558
  transform-origin: top left;
543
559
  transform: scale(0.75);
544
560
  }
561
+ .editor-hint {
562
+ font-size: 1rem;
563
+ display: block;
564
+ transform-origin: top left;
565
+ transform: scale(0.75);
566
+ }
545
567
  </style>
546
568
 
547
569
  <style lang="scss">
@@ -206,3 +206,17 @@ html:has(body.editor--theme-light) {
206
206
  html:has(body.editor--theme-dark) {
207
207
  @import './dark/content.scss';
208
208
  }
209
+
210
+ .a11y-error{
211
+ background-color: #cf3f3f;
212
+ border-color: #cf3f3f;
213
+ color: #fff;
214
+ padding: 4px;
215
+ font-size: 0.8333rem;
216
+ border-radius: 4px;
217
+ &--highlight{
218
+ text-decoration-line: underline;
219
+ text-decoration-style: wavy;
220
+ text-decoration-color: #cf3f3f;
221
+ }
222
+ }