style_switcher.vue (37744B)
1 <template>
2 <div class="style-switcher">
3 <div class="presets-container">
4 <div class="save-load">
5 <div
6 v-if="themeWarning"
7 class="theme-warning"
8 >
9 <div class="alert warning">
10 {{ themeWarningHelp }}
11 </div>
12 <div class="buttons">
13 <template v-if="themeWarning.type === 'snapshot_source_mismatch'">
14 <button
15 class="btn"
16 @click="forceLoad"
17 >
18 {{ $t('settings.style.switcher.use_source') }}
19 </button>
20 <button
21 class="btn"
22 @click="forceSnapshot"
23 >
24 {{ $t('settings.style.switcher.use_snapshot') }}
25 </button>
26 </template>
27 <template v-else-if="themeWarning.noActionsPossible">
28 <button
29 class="btn"
30 @click="dismissWarning"
31 >
32 {{ $t('general.dismiss') }}
33 </button>
34 </template>
35 <template v-else>
36 <button
37 class="btn"
38 @click="forceLoad"
39 >
40 {{ $t('settings.style.switcher.load_theme') }}
41 </button>
42 <button
43 class="btn"
44 @click="dismissWarning"
45 >
46 {{ $t('settings.style.switcher.keep_as_is') }}
47 </button>
48 </template>
49 </div>
50 </div>
51 <ExportImport
52 :export-object="exportedTheme"
53 :export-label="$t("settings.export_theme")"
54 :import-label="$t("settings.import_theme")"
55 :import-failed-text="$t("settings.invalid_theme_imported")"
56 :on-import="onImport"
57 :validator="importValidator"
58 >
59 <template slot="before">
60 <div class="presets">
61 {{ $t('settings.presets') }}
62 <label
63 for="preset-switcher"
64 class="select"
65 >
66 <select
67 id="preset-switcher"
68 v-model="selected"
69 class="preset-switcher"
70 >
71 <option
72 v-for="style in availableStyles"
73 :key="style.name"
74 :value="style"
75 :style="{
76 backgroundColor: style[1] || (style.theme || style.source).colors.bg,
77 color: style[3] || (style.theme || style.source).colors.text
78 }"
79 >
80 {{ style[0] || style.name }}
81 </option>
82 </select>
83 <i class="icon-down-open" />
84 </label>
85 </div>
86 </template>
87 </ExportImport>
88 </div>
89 <div class="save-load-options">
90 <span class="keep-option">
91 <Checkbox v-model="keepColor">
92 {{ $t('settings.style.switcher.keep_color') }}
93 </Checkbox>
94 </span>
95 <span class="keep-option">
96 <Checkbox v-model="keepShadows">
97 {{ $t('settings.style.switcher.keep_shadows') }}
98 </Checkbox>
99 </span>
100 <span class="keep-option">
101 <Checkbox v-model="keepOpacity">
102 {{ $t('settings.style.switcher.keep_opacity') }}
103 </Checkbox>
104 </span>
105 <span class="keep-option">
106 <Checkbox v-model="keepRoundness">
107 {{ $t('settings.style.switcher.keep_roundness') }}
108 </Checkbox>
109 </span>
110 <span class="keep-option">
111 <Checkbox v-model="keepFonts">
112 {{ $t('settings.style.switcher.keep_fonts') }}
113 </Checkbox>
114 </span>
115 <p>{{ $t('settings.style.switcher.save_load_hint') }}</p>
116 </div>
117 </div>
118
119 <preview :style="previewRules" />
120
121 <keep-alive>
122 <tab-switcher key="style-tweak">
123 <div
124 :label="$t('settings.style.common_colors._tab_label')"
125 class="color-container"
126 >
127 <div class="tab-header">
128 <p>{{ $t('settings.theme_help') }}</p>
129 <button
130 class="btn"
131 @click="clearOpacity"
132 >
133 {{ $t('settings.style.switcher.clear_opacity') }}
134 </button>
135 <button
136 class="btn"
137 @click="clearV1"
138 >
139 {{ $t('settings.style.switcher.clear_all') }}
140 </button>
141 </div>
142 <p>{{ $t('settings.theme_help_v2_1') }}</p>
143 <h4>{{ $t('settings.style.common_colors.main') }}</h4>
144 <div class="color-item">
145 <ColorInput
146 v-model="bgColorLocal"
147 name="bgColor"
148 :label="$t('settings.background')"
149 />
150 <OpacityInput
151 v-model="bgOpacityLocal"
152 name="bgOpacity"
153 :fallback="previewTheme.opacity.bg"
154 />
155 <ColorInput
156 v-model="textColorLocal"
157 name="textColor"
158 :label="$t('settings.text')"
159 />
160 <ContrastRatio :contrast="previewContrast.bgText" />
161 <ColorInput
162 v-model="accentColorLocal"
163 name="accentColor"
164 :fallback="previewTheme.colors.link"
165 :label="$t('settings.accent')"
166 :show-optional-tickbox="typeof linkColorLocal !== 'undefined'"
167 />
168 <ColorInput
169 v-model="linkColorLocal"
170 name="linkColor"
171 :fallback="previewTheme.colors.accent"
172 :label="$t('settings.links')"
173 :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
174 />
175 <ContrastRatio :contrast="previewContrast.bgLink" />
176 </div>
177 <div class="color-item">
178 <ColorInput
179 v-model="fgColorLocal"
180 name="fgColor"
181 :label="$t('settings.foreground')"
182 />
183 <ColorInput
184 v-model="fgTextColorLocal"
185 name="fgTextColor"
186 :label="$t('settings.text')"
187 :fallback="previewTheme.colors.fgText"
188 />
189 <ColorInput
190 v-model="fgLinkColorLocal"
191 name="fgLinkColor"
192 :label="$t('settings.links')"
193 :fallback="previewTheme.colors.fgLink"
194 />
195 <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
196 </div>
197 <h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
198 <div class="color-item">
199 <ColorInput
200 v-model="cRedColorLocal"
201 name="cRedColor"
202 :label="$t('settings.cRed')"
203 />
204 <ContrastRatio :contrast="previewContrast.bgCRed" />
205 <ColorInput
206 v-model="cBlueColorLocal"
207 name="cBlueColor"
208 :label="$t('settings.cBlue')"
209 />
210 <ContrastRatio :contrast="previewContrast.bgCBlue" />
211 </div>
212 <div class="color-item">
213 <ColorInput
214 v-model="cGreenColorLocal"
215 name="cGreenColor"
216 :label="$t('settings.cGreen')"
217 />
218 <ContrastRatio :contrast="previewContrast.bgCGreen" />
219 <ColorInput
220 v-model="cOrangeColorLocal"
221 name="cOrangeColor"
222 :label="$t('settings.cOrange')"
223 />
224 <ContrastRatio :contrast="previewContrast.bgCOrange" />
225 </div>
226 <p>{{ $t('settings.theme_help_v2_2') }}</p>
227 </div>
228
229 <div
230 :label="$t('settings.style.advanced_colors._tab_label')"
231 class="color-container"
232 >
233 <div class="tab-header">
234 <p>{{ $t('settings.theme_help') }}</p>
235 <button
236 class="btn"
237 @click="clearOpacity"
238 >
239 {{ $t('settings.style.switcher.clear_opacity') }}
240 </button>
241 <button
242 class="btn"
243 @click="clearV1"
244 >
245 {{ $t('settings.style.switcher.clear_all') }}
246 </button>
247 </div>
248 <div class="color-item">
249 <h4>{{ $t('settings.style.advanced_colors.post') }}</h4>
250 <ColorInput
251 v-model="postLinkColorLocal"
252 name="postLinkColor"
253 :fallback="previewTheme.colors.accent"
254 :label="$t('settings.links')"
255 />
256 <ContrastRatio :contrast="previewContrast.postLink" />
257 <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
258 <ColorInput
259 v-model="alertErrorColorLocal"
260 name="alertError"
261 :label="$t('settings.style.advanced_colors.alert_error')"
262 :fallback="previewTheme.colors.alertError"
263 />
264 <ColorInput
265 v-model="alertErrorTextColorLocal"
266 name="alertErrorText"
267 :label="$t('settings.text')"
268 :fallback="previewTheme.colors.alertErrorText"
269 />
270 <ContrastRatio
271 :contrast="previewContrast.alertErrorText"
272 large="true"
273 />
274 <ColorInput
275 v-model="alertWarningColorLocal"
276 name="alertWarning"
277 :label="$t('settings.style.advanced_colors.alert_warning')"
278 :fallback="previewTheme.colors.alertWarning"
279 />
280 <ColorInput
281 v-model="alertWarningTextColorLocal"
282 name="alertWarningText"
283 :label="$t('settings.text')"
284 :fallback="previewTheme.colors.alertWarningText"
285 />
286 <ContrastRatio
287 :contrast="previewContrast.alertWarningText"
288 large="true"
289 />
290 <ColorInput
291 v-model="alertNeutralColorLocal"
292 name="alertNeutral"
293 :label="$t('settings.style.advanced_colors.alert_neutral')"
294 :fallback="previewTheme.colors.alertNeutral"
295 />
296 <ColorInput
297 v-model="alertNeutralTextColorLocal"
298 name="alertNeutralText"
299 :label="$t('settings.text')"
300 :fallback="previewTheme.colors.alertNeutralText"
301 />
302 <ContrastRatio
303 :contrast="previewContrast.alertNeutralText"
304 large="true"
305 />
306 <OpacityInput
307 v-model="alertOpacityLocal"
308 name="alertOpacity"
309 :fallback="previewTheme.opacity.alert"
310 />
311 </div>
312 <div class="color-item">
313 <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
314 <ColorInput
315 v-model="badgeNotificationColorLocal"
316 name="badgeNotification"
317 :label="$t('settings.style.advanced_colors.badge_notification')"
318 :fallback="previewTheme.colors.badgeNotification"
319 />
320 <ColorInput
321 v-model="badgeNotificationTextColorLocal"
322 name="badgeNotificationText"
323 :label="$t('settings.text')"
324 :fallback="previewTheme.colors.badgeNotificationText"
325 />
326 <ContrastRatio
327 :contrast="previewContrast.badgeNotificationText"
328 large="true"
329 />
330 </div>
331 <div class="color-item">
332 <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
333 <ColorInput
334 v-model="panelColorLocal"
335 name="panelColor"
336 :fallback="previewTheme.colors.panel"
337 :label="$t('settings.background')"
338 />
339 <OpacityInput
340 v-model="panelOpacityLocal"
341 name="panelOpacity"
342 :fallback="previewTheme.opacity.panel"
343 :disabled="panelColorLocal === 'transparent'"
344 />
345 <ColorInput
346 v-model="panelTextColorLocal"
347 name="panelTextColor"
348 :fallback="previewTheme.colors.panelText"
349 :label="$t('settings.text')"
350 />
351 <ContrastRatio
352 :contrast="previewContrast.panelText"
353 large="true"
354 />
355 <ColorInput
356 v-model="panelLinkColorLocal"
357 name="panelLinkColor"
358 :fallback="previewTheme.colors.panelLink"
359 :label="$t('settings.links')"
360 />
361 <ContrastRatio
362 :contrast="previewContrast.panelLink"
363 large="true"
364 />
365 </div>
366 <div class="color-item">
367 <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
368 <ColorInput
369 v-model="topBarColorLocal"
370 name="topBarColor"
371 :fallback="previewTheme.colors.topBar"
372 :label="$t('settings.background')"
373 />
374 <ColorInput
375 v-model="topBarTextColorLocal"
376 name="topBarTextColor"
377 :fallback="previewTheme.colors.topBarText"
378 :label="$t('settings.text')"
379 />
380 <ContrastRatio :contrast="previewContrast.topBarText" />
381 <ColorInput
382 v-model="topBarLinkColorLocal"
383 name="topBarLinkColor"
384 :fallback="previewTheme.colors.topBarLink"
385 :label="$t('settings.links')"
386 />
387 <ContrastRatio :contrast="previewContrast.topBarLink" />
388 </div>
389 <div class="color-item">
390 <h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4>
391 <ColorInput
392 v-model="inputColorLocal"
393 name="inputColor"
394 :fallback="previewTheme.colors.input"
395 :label="$t('settings.background')"
396 />
397 <OpacityInput
398 v-model="inputOpacityLocal"
399 name="inputOpacity"
400 :fallback="previewTheme.opacity.input"
401 :disabled="inputColorLocal === 'transparent'"
402 />
403 <ColorInput
404 v-model="inputTextColorLocal"
405 name="inputTextColor"
406 :fallback="previewTheme.colors.inputText"
407 :label="$t('settings.text')"
408 />
409 <ContrastRatio :contrast="previewContrast.inputText" />
410 </div>
411 <div class="color-item">
412 <h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4>
413 <ColorInput
414 v-model="btnColorLocal"
415 name="btnColor"
416 :fallback="previewTheme.colors.btn"
417 :label="$t('settings.background')"
418 />
419 <OpacityInput
420 v-model="btnOpacityLocal"
421 name="btnOpacity"
422 :fallback="previewTheme.opacity.btn"
423 :disabled="btnColorLocal === 'transparent'"
424 />
425 <ColorInput
426 v-model="btnTextColorLocal"
427 name="btnTextColor"
428 :fallback="previewTheme.colors.btnText"
429 :label="$t('settings.text')"
430 />
431 <ContrastRatio :contrast="previewContrast.btnText" />
432 <ColorInput
433 v-model="btnPanelTextColorLocal"
434 name="btnPanelTextColor"
435 :fallback="previewTheme.colors.btnPanelText"
436 :label="$t('settings.style.advanced_colors.panel_header')"
437 />
438 <ContrastRatio :contrast="previewContrast.btnPanelText" />
439 <ColorInput
440 v-model="btnTopBarTextColorLocal"
441 name="btnTopBarTextColor"
442 :fallback="previewTheme.colors.btnTopBarText"
443 :label="$t('settings.style.advanced_colors.top_bar')"
444 />
445 <ContrastRatio :contrast="previewContrast.btnTopBarText" />
446 <h5>{{ $t('settings.style.advanced_colors.pressed') }}</h5>
447 <ColorInput
448 v-model="btnPressedColorLocal"
449 name="btnPressedColor"
450 :fallback="previewTheme.colors.btnPressed"
451 :label="$t('settings.background')"
452 />
453 <ColorInput
454 v-model="btnPressedTextColorLocal"
455 name="btnPressedTextColor"
456 :fallback="previewTheme.colors.btnPressedText"
457 :label="$t('settings.text')"
458 />
459 <ContrastRatio :contrast="previewContrast.btnPressedText" />
460 <ColorInput
461 v-model="btnPressedPanelTextColorLocal"
462 name="btnPressedPanelTextColor"
463 :fallback="previewTheme.colors.btnPressedPanelText"
464 :label="$t('settings.style.advanced_colors.panel_header')"
465 />
466 <ContrastRatio :contrast="previewContrast.btnPressedPanelText" />
467 <ColorInput
468 v-model="btnPressedTopBarTextColorLocal"
469 name="btnPressedTopBarTextColor"
470 :fallback="previewTheme.colors.btnPressedTopBarText"
471 :label="$t('settings.style.advanced_colors.top_bar')"
472 />
473 <ContrastRatio :contrast="previewContrast.btnPressedTopBarText" />
474 <h5>{{ $t('settings.style.advanced_colors.disabled') }}</h5>
475 <ColorInput
476 v-model="btnDisabledColorLocal"
477 name="btnDisabledColor"
478 :fallback="previewTheme.colors.btnDisabled"
479 :label="$t('settings.background')"
480 />
481 <ColorInput
482 v-model="btnDisabledTextColorLocal"
483 name="btnDisabledTextColor"
484 :fallback="previewTheme.colors.btnDisabledText"
485 :label="$t('settings.text')"
486 />
487 <ColorInput
488 v-model="btnDisabledPanelTextColorLocal"
489 name="btnDisabledPanelTextColor"
490 :fallback="previewTheme.colors.btnDisabledPanelText"
491 :label="$t('settings.style.advanced_colors.panel_header')"
492 />
493 <ColorInput
494 v-model="btnDisabledTopBarTextColorLocal"
495 name="btnDisabledTopBarTextColor"
496 :fallback="previewTheme.colors.btnDisabledTopBarText"
497 :label="$t('settings.style.advanced_colors.top_bar')"
498 />
499 <h5>{{ $t('settings.style.advanced_colors.toggled') }}</h5>
500 <ColorInput
501 v-model="btnToggledColorLocal"
502 name="btnToggledColor"
503 :fallback="previewTheme.colors.btnToggled"
504 :label="$t('settings.background')"
505 />
506 <ColorInput
507 v-model="btnToggledTextColorLocal"
508 name="btnToggledTextColor"
509 :fallback="previewTheme.colors.btnToggledText"
510 :label="$t('settings.text')"
511 />
512 <ContrastRatio :contrast="previewContrast.btnToggledText" />
513 <ColorInput
514 v-model="btnToggledPanelTextColorLocal"
515 name="btnToggledPanelTextColor"
516 :fallback="previewTheme.colors.btnToggledPanelText"
517 :label="$t('settings.style.advanced_colors.panel_header')"
518 />
519 <ContrastRatio :contrast="previewContrast.btnToggledPanelText" />
520 <ColorInput
521 v-model="btnToggledTopBarTextColorLocal"
522 name="btnToggledTopBarTextColor"
523 :fallback="previewTheme.colors.btnToggledTopBarText"
524 :label="$t('settings.style.advanced_colors.top_bar')"
525 />
526 <ContrastRatio :contrast="previewContrast.btnToggledTopBarText" />
527 </div>
528 <div class="color-item">
529 <h4>{{ $t('settings.style.advanced_colors.tabs') }}</h4>
530 <ColorInput
531 v-model="tabColorLocal"
532 name="tabColor"
533 :fallback="previewTheme.colors.tab"
534 :label="$t('settings.background')"
535 />
536 <ColorInput
537 v-model="tabTextColorLocal"
538 name="tabTextColor"
539 :fallback="previewTheme.colors.tabText"
540 :label="$t('settings.text')"
541 />
542 <ContrastRatio :contrast="previewContrast.tabText" />
543 <ColorInput
544 v-model="tabActiveTextColorLocal"
545 name="tabActiveTextColor"
546 :fallback="previewTheme.colors.tabActiveText"
547 :label="$t('settings.text')"
548 />
549 <ContrastRatio :contrast="previewContrast.tabActiveText" />
550 </div>
551 <div class="color-item">
552 <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
553 <ColorInput
554 v-model="borderColorLocal"
555 name="borderColor"
556 :fallback="previewTheme.colors.border"
557 :label="$t('settings.style.common.color')"
558 />
559 <OpacityInput
560 v-model="borderOpacityLocal"
561 name="borderOpacity"
562 :fallback="previewTheme.opacity.border"
563 :disabled="borderColorLocal === 'transparent'"
564 />
565 </div>
566 <div class="color-item">
567 <h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4>
568 <ColorInput
569 v-model="faintColorLocal"
570 name="faintColor"
571 :fallback="previewTheme.colors.faint"
572 :label="$t('settings.text')"
573 />
574 <ColorInput
575 v-model="faintLinkColorLocal"
576 name="faintLinkColor"
577 :fallback="previewTheme.colors.faintLink"
578 :label="$t('settings.links')"
579 />
580 <ColorInput
581 v-model="panelFaintColorLocal"
582 name="panelFaintColor"
583 :fallback="previewTheme.colors.panelFaint"
584 :label="$t('settings.style.advanced_colors.panel_header')"
585 />
586 <OpacityInput
587 v-model="faintOpacityLocal"
588 name="faintOpacity"
589 :fallback="previewTheme.opacity.faint"
590 />
591 </div>
592 <div class="color-item">
593 <h4>{{ $t('settings.style.advanced_colors.underlay') }}</h4>
594 <ColorInput
595 v-model="underlayColorLocal"
596 name="underlay"
597 :label="$t('settings.style.advanced_colors.underlay')"
598 :fallback="previewTheme.colors.underlay"
599 />
600 <OpacityInput
601 v-model="underlayOpacityLocal"
602 name="underlayOpacity"
603 :fallback="previewTheme.opacity.underlay"
604 :disabled="underlayOpacityLocal === 'transparent'"
605 />
606 </div>
607 <div class="color-item">
608 <h4>{{ $t('settings.style.advanced_colors.poll') }}</h4>
609 <ColorInput
610 v-model="pollColorLocal"
611 name="poll"
612 :label="$t('settings.background')"
613 :fallback="previewTheme.colors.poll"
614 />
615 <ColorInput
616 v-model="pollTextColorLocal"
617 name="pollText"
618 :label="$t('settings.text')"
619 :fallback="previewTheme.colors.pollText"
620 />
621 </div>
622 <div class="color-item">
623 <h4>{{ $t('settings.style.advanced_colors.icons') }}</h4>
624 <ColorInput
625 v-model="iconColorLocal"
626 name="icon"
627 :label="$t('settings.style.advanced_colors.icons')"
628 :fallback="previewTheme.colors.icon"
629 />
630 </div>
631 <div class="color-item">
632 <h4>{{ $t('settings.style.advanced_colors.highlight') }}</h4>
633 <ColorInput
634 v-model="highlightColorLocal"
635 name="highlight"
636 :label="$t('settings.background')"
637 :fallback="previewTheme.colors.highlight"
638 />
639 <ColorInput
640 v-model="highlightTextColorLocal"
641 name="highlightText"
642 :label="$t('settings.text')"
643 :fallback="previewTheme.colors.highlightText"
644 />
645 <ContrastRatio :contrast="previewContrast.highlightText" />
646 <ColorInput
647 v-model="highlightLinkColorLocal"
648 name="highlightLink"
649 :label="$t('settings.links')"
650 :fallback="previewTheme.colors.highlightLink"
651 />
652 <ContrastRatio :contrast="previewContrast.highlightLink" />
653 </div>
654 <div class="color-item">
655 <h4>{{ $t('settings.style.advanced_colors.popover') }}</h4>
656 <ColorInput
657 v-model="popoverColorLocal"
658 name="popover"
659 :label="$t('settings.background')"
660 :fallback="previewTheme.colors.popover"
661 />
662 <OpacityInput
663 v-model="popoverOpacityLocal"
664 name="popoverOpacity"
665 :fallback="previewTheme.opacity.popover"
666 :disabled="popoverOpacityLocal === 'transparent'"
667 />
668 <ColorInput
669 v-model="popoverTextColorLocal"
670 name="popoverText"
671 :label="$t('settings.text')"
672 :fallback="previewTheme.colors.popoverText"
673 />
674 <ContrastRatio :contrast="previewContrast.popoverText" />
675 <ColorInput
676 v-model="popoverLinkColorLocal"
677 name="popoverLink"
678 :label="$t('settings.links')"
679 :fallback="previewTheme.colors.popoverLink"
680 />
681 <ContrastRatio :contrast="previewContrast.popoverLink" />
682 </div>
683 <div class="color-item">
684 <h4>{{ $t('settings.style.advanced_colors.selectedPost') }}</h4>
685 <ColorInput
686 v-model="selectedPostColorLocal"
687 name="selectedPost"
688 :label="$t('settings.background')"
689 :fallback="previewTheme.colors.selectedPost"
690 />
691 <ColorInput
692 v-model="selectedPostTextColorLocal"
693 name="selectedPostText"
694 :label="$t('settings.text')"
695 :fallback="previewTheme.colors.selectedPostText"
696 />
697 <ContrastRatio :contrast="previewContrast.selectedPostText" />
698 <ColorInput
699 v-model="selectedPostLinkColorLocal"
700 name="selectedPostLink"
701 :label="$t('settings.links')"
702 :fallback="previewTheme.colors.selectedPostLink"
703 />
704 <ContrastRatio :contrast="previewContrast.selectedPostLink" />
705 </div>
706 <div class="color-item">
707 <h4>{{ $t('settings.style.advanced_colors.selectedMenu') }}</h4>
708 <ColorInput
709 v-model="selectedMenuColorLocal"
710 name="selectedMenu"
711 :label="$t('settings.background')"
712 :fallback="previewTheme.colors.selectedMenu"
713 />
714 <ColorInput
715 v-model="selectedMenuTextColorLocal"
716 name="selectedMenuText"
717 :label="$t('settings.text')"
718 :fallback="previewTheme.colors.selectedMenuText"
719 />
720 <ContrastRatio :contrast="previewContrast.selectedMenuText" />
721 <ColorInput
722 v-model="selectedMenuLinkColorLocal"
723 name="selectedMenuLink"
724 :label="$t('settings.links')"
725 :fallback="previewTheme.colors.selectedMenuLink"
726 />
727 <ContrastRatio :contrast="previewContrast.selectedMenuLink" />
728 </div>
729 <div class="color-item">
730 <h4>{{ $t('chats.chats') }}</h4>
731 <ColorInput
732 v-model="chatBgColorLocal"
733 name="chatBgColor"
734 :fallback="previewTheme.colors.bg || 1"
735 :label="$t('settings.background')"
736 />
737 <ColorInput
738 v-model="chatMessageIncomingBgColorLocal"
739 name="chatMessageIncomingBgColor"
740 :fallback="previewTheme.colors.bg || 1"
741 :label="$t('settings.style.advanced_colors.chat.incoming_background')"
742 />
743 <ColorInput
744 v-model="chatMessageIncomingTextColorLocal"
745 name="chatMessageIncomingTextColor"
746 :fallback="previewTheme.colors.text || 1"
747 :label="$t('settings.style.advanced_colors.chat.incoming_text')"
748 />
749 <ColorInput
750 v-model="chatMessageIncomingLinkColorLocal"
751 name="chatMessageIncomingLinkColor"
752 :fallback="previewTheme.colors.link || 1"
753 :label="$t('settings.style.advanced_colors.chat.incoming_link')"
754 />
755 <ColorInput
756 v-model="chatMessageIncomingBorderColorLocal"
757 name="chatMessageIncomingBorderLinkColor"
758 :fallback="previewTheme.colors.fg || 1"
759 :label="$t('settings.style.advanced_colors.chat.incoming_border')"
760 />
761 <ColorInput
762 v-model="chatMessageOutgoingBgColorLocal"
763 name="chatMessageOutgoingBgColor"
764 :fallback="previewTheme.colors.bg || 1"
765 :label="$t('settings.style.advanced_colors.chat.outgoing_background')"
766 />
767 <ColorInput
768 v-model="chatMessageOutgoingTextColorLocal"
769 name="chatMessageOutgoingTextColor"
770 :fallback="previewTheme.colors.text || 1"
771 :label="$t('settings.style.advanced_colors.chat.outgoing_text')"
772 />
773 <ColorInput
774 v-model="chatMessageOutgoingLinkColorLocal"
775 name="chatMessageOutgoingLinkColor"
776 :fallback="previewTheme.colors.link || 1"
777 :label="$t('settings.style.advanced_colors.chat.outgoing_link')"
778 />
779 <ColorInput
780 v-model="chatMessageOutgoingBorderColorLocal"
781 name="chatMessageOutgoingBorderLinkColor"
782 :fallback="previewTheme.colors.bg || 1"
783 :label="$t('settings.style.advanced_colors.chat.outgoing_border')"
784 />
785 </div>
786 </div>
787
788 <div
789 :label="$t('settings.style.radii._tab_label')"
790 class="radius-container"
791 >
792 <div class="tab-header">
793 <p>{{ $t('settings.radii_help') }}</p>
794 <button
795 class="btn"
796 @click="clearRoundness"
797 >
798 {{ $t('settings.style.switcher.clear_all') }}
799 </button>
800 </div>
801 <RangeInput
802 v-model="btnRadiusLocal"
803 name="btnRadius"
804 :label="$t('settings.btnRadius')"
805 :fallback="previewTheme.radii.btn"
806 max="16"
807 hard-min="0"
808 />
809 <RangeInput
810 v-model="inputRadiusLocal"
811 name="inputRadius"
812 :label="$t('settings.inputRadius')"
813 :fallback="previewTheme.radii.input"
814 max="9"
815 hard-min="0"
816 />
817 <RangeInput
818 v-model="checkboxRadiusLocal"
819 name="checkboxRadius"
820 :label="$t('settings.checkboxRadius')"
821 :fallback="previewTheme.radii.checkbox"
822 max="16"
823 hard-min="0"
824 />
825 <RangeInput
826 v-model="panelRadiusLocal"
827 name="panelRadius"
828 :label="$t('settings.panelRadius')"
829 :fallback="previewTheme.radii.panel"
830 max="50"
831 hard-min="0"
832 />
833 <RangeInput
834 v-model="avatarRadiusLocal"
835 name="avatarRadius"
836 :label="$t('settings.avatarRadius')"
837 :fallback="previewTheme.radii.avatar"
838 max="28"
839 hard-min="0"
840 />
841 <RangeInput
842 v-model="avatarAltRadiusLocal"
843 name="avatarAltRadius"
844 :label="$t('settings.avatarAltRadius')"
845 :fallback="previewTheme.radii.avatarAlt"
846 max="28"
847 hard-min="0"
848 />
849 <RangeInput
850 v-model="attachmentRadiusLocal"
851 name="attachmentRadius"
852 :label="$t('settings.attachmentRadius')"
853 :fallback="previewTheme.radii.attachment"
854 max="50"
855 hard-min="0"
856 />
857 <RangeInput
858 v-model="tooltipRadiusLocal"
859 name="tooltipRadius"
860 :label="$t('settings.tooltipRadius')"
861 :fallback="previewTheme.radii.tooltip"
862 max="50"
863 hard-min="0"
864 />
865 <RangeInput
866 v-model="chatMessageRadiusLocal"
867 name="chatMessageRadius"
868 :label="$t('settings.chatMessageRadius')"
869 :fallback="previewTheme.radii.chatMessage || 2"
870 max="50"
871 hard-min="0"
872 />
873 </div>
874
875 <div
876 :label="$t('settings.style.shadows._tab_label')"
877 class="shadow-container"
878 >
879 <div class="tab-header shadow-selector">
880 <div class="select-container">
881 {{ $t('settings.style.shadows.component') }}
882 <label
883 for="shadow-switcher"
884 class="select"
885 >
886 <select
887 id="shadow-switcher"
888 v-model="shadowSelected"
889 class="shadow-switcher"
890 >
891 <option
892 v-for="shadow in shadowsAvailable"
893 :key="shadow"
894 :value="shadow"
895 >
896 {{ $t('settings.style.shadows.components.' + shadow) }}
897 </option>
898 </select>
899 <i class="icon-down-open" />
900 </label>
901 </div>
902 <div class="override">
903 <label
904 for="override"
905 class="label"
906 >
907 {{ $t('settings.style.shadows.override') }}
908 </label>
909 <input
910 id="override"
911 v-model="currentShadowOverriden"
912 name="override"
913 class="input-override"
914 type="checkbox"
915 >
916 <label
917 class="checkbox-label"
918 for="override"
919 />
920 </div>
921 <button
922 class="btn"
923 @click="clearShadows"
924 >
925 {{ $t('settings.style.switcher.clear_all') }}
926 </button>
927 </div>
928 <ShadowControl
929 v-model="currentShadow"
930 :ready="!!currentShadowFallback"
931 :fallback="currentShadowFallback"
932 />
933 <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
934 <i18n
935 path="settings.style.shadows.filter_hint.always_drop_shadow"
936 tag="p"
937 >
938 <code>filter: drop-shadow()</code>
939 </i18n>
940 <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
941 <i18n
942 path="settings.style.shadows.filter_hint.drop_shadow_syntax"
943 tag="p"
944 >
945 <code>drop-shadow</code>
946 <code>spread-radius</code>
947 <code>inset</code>
948 </i18n>
949 <i18n
950 path="settings.style.shadows.filter_hint.inset_classic"
951 tag="p"
952 >
953 <code>box-shadow</code>
954 </i18n>
955 <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
956 </div>
957 </div>
958
959 <div
960 :label="$t('settings.style.fonts._tab_label')"
961 class="fonts-container"
962 >
963 <div class="tab-header">
964 <p>{{ $t('settings.style.fonts.help') }}</p>
965 <button
966 class="btn"
967 @click="clearFonts"
968 >
969 {{ $t('settings.style.switcher.clear_all') }}
970 </button>
971 </div>
972 <FontControl
973 v-model="fontsLocal.interface"
974 name="ui"
975 :label="$t('settings.style.fonts.components.interface')"
976 :fallback="previewTheme.fonts.interface"
977 no-inherit="1"
978 />
979 <FontControl
980 v-model="fontsLocal.input"
981 name="input"
982 :label="$t('settings.style.fonts.components.input')"
983 :fallback="previewTheme.fonts.input"
984 />
985 <FontControl
986 v-model="fontsLocal.post"
987 name="post"
988 :label="$t('settings.style.fonts.components.post')"
989 :fallback="previewTheme.fonts.post"
990 />
991 <FontControl
992 v-model="fontsLocal.postCode"
993 name="postCode"
994 :label="$t('settings.style.fonts.components.postCode')"
995 :fallback="previewTheme.fonts.postCode"
996 />
997 </div>
998 </tab-switcher>
999 </keep-alive>
1000
1001 <div class="apply-container">
1002 <button
1003 class="btn submit"
1004 :disabled="!themeValid"
1005 @click="setCustomTheme"
1006 >
1007 {{ $t('general.apply') }}
1008 </button>
1009 <button
1010 class="btn"
1011 @click="clearAll"
1012 >
1013 {{ $t('settings.style.switcher.reset') }}
1014 </button>
1015 </div>
1016 </div>
1017 </template>
1018
1019 <script src="./style_switcher.js"></script>
1020
1021 <style src="./style_switcher.scss" lang="scss"></style>