preview.vue (3207B)
1 <template>
2 <div class="preview-container">
3 <div class="underlay underlay-preview" />
4 <div class="panel dummy">
5 <div class="panel-heading">
6 <div class="title">
7 {{ $t('settings.style.preview.header') }}
8 <span class="badge badge-notification">
9 99
10 </span>
11 </div>
12 <span class="faint">
13 {{ $t('settings.style.preview.header_faint') }}
14 </span>
15 <span class="alert error">
16 {{ $t('settings.style.preview.error') }}
17 </span>
18 <button class="btn">
19 {{ $t('settings.style.preview.button') }}
20 </button>
21 </div>
22 <div class="panel-body theme-preview-content">
23 <div class="post">
24 <div class="avatar still-image">
25 ( ͡° ͜ʖ ͡°)
26 </div>
27 <div class="content">
28 <h4>
29 {{ $t('settings.style.preview.content') }}
30 </h4>
31
32 <i18n path="settings.style.preview.text">
33 <code style="font-family: var(--postCodeFont)">
34 {{ $t('settings.style.preview.mono') }}
35 </code>
36 <a style="color: var(--link)">
37 {{ $t('settings.style.preview.link') }}
38 </a>
39 </i18n>
40
41 <div class="icons">
42 <i
43 style="color: var(--cBlue)"
44 class="button-icon icon-reply"
45 />
46 <i
47 style="color: var(--cGreen)"
48 class="button-icon icon-retweet"
49 />
50 <i
51 style="color: var(--cOrange)"
52 class="button-icon icon-star"
53 />
54 <i
55 style="color: var(--cRed)"
56 class="button-icon icon-cancel"
57 />
58 </div>
59 </div>
60 </div>
61
62 <div class="after-post">
63 <div class="avatar-alt">
64 :^)
65 </div>
66 <div class="content">
67 <i18n
68 path="settings.style.preview.fine_print"
69 tag="span"
70 class="faint"
71 >
72 <a style="color: var(--faintLink)">
73 {{ $t('settings.style.preview.faint_link') }}
74 </a>
75 </i18n>
76 </div>
77 </div>
78 <div class="separator" />
79
80 <span class="alert error">
81 {{ $t('settings.style.preview.error') }}
82 </span>
83 <input
84 :value="$t('settings.style.preview.input')"
85 type="text"
86 >
87
88 <div class="actions">
89 <span class="checkbox">
90 <input
91 id="preview_checkbox"
92 checked="very yes"
93 type="checkbox"
94 >
95 <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
96 </span>
97 <button class="btn">
98 {{ $t('settings.style.preview.button') }}
99 </button>
100 </div>
101 </div>
102 </div>
103 </div>
104 </template>
105
106 <style lang="scss">
107 .preview-container {
108 position: relative;
109 }
110 .underlay-preview {
111 position: absolute;
112 top: 0;
113 bottom: 0;
114 left: 10px;
115 right: 10px;
116 }
117 </style>