style_switcher.scss (5639B)
1 @import '../../_variables.scss';
2 .style-switcher {
3 .theme-warning {
4 display: flex;
5 align-items: baseline;
6 margin-bottom: .5em;
7 .buttons {
8 .btn {
9 margin-bottom: .5em;
10 }
11 }
12 }
13 .preset-switcher {
14 margin-right: 1em;
15 }
16
17 .style-control {
18 display: flex;
19 align-items: baseline;
20 margin-bottom: 5px;
21
22 .label {
23 flex: 1;
24 }
25
26 &.disabled {
27 input, select {
28 opacity: .5
29 }
30 }
31
32 .opt {
33 margin: .5em;
34 }
35
36 .color-input {
37 flex: 0 0 0;
38 }
39
40 input, select {
41 min-width: 3em;
42 margin: 0;
43 flex: 0;
44
45 &[type=number] {
46 min-width: 5em;
47 }
48
49 &[type=range] {
50 flex: 1;
51 min-width: 3em;
52 align-self: flex-start;
53 }
54 }
55 }
56
57 .tab-switcher {
58 margin: 0 -1em;
59 }
60
61 .reset-container {
62 flex-wrap: wrap;
63 }
64
65 .fonts-container,
66 .reset-container,
67 .apply-container,
68 .radius-container,
69 .color-container,
70 {
71 display: flex;
72 }
73
74 .fonts-container,
75 .radius-container {
76 flex-direction: column;
77 }
78
79 .color-container{
80 > h4 {
81 width: 99%;
82 }
83 flex-wrap: wrap;
84 justify-content: space-between;
85 }
86
87 .fonts-container,
88 .color-container,
89 .shadow-container,
90 .radius-container,
91 .presets-container {
92 margin: 1em 1em 0;
93 }
94
95 .tab-header {
96 display: flex;
97 justify-content: space-between;
98 align-items: baseline;
99 width: 100%;
100 min-height: 30px;
101
102 .btn {
103 min-width: 1px;
104 flex: 0 auto;
105 padding: 0 1em;
106 }
107
108 p {
109 flex: 1;
110 margin: 0;
111 margin-right: .5em;
112 }
113
114 margin-bottom: 1em;
115 }
116
117 .shadow-selector {
118 .override {
119 flex: 1;
120 margin-left: .5em;
121 }
122 .select-container {
123 margin-top: -4px;
124 margin-bottom: -3px;
125 }
126 }
127
128 .save-load,
129 .save-load-options {
130 display: flex;
131 justify-content: center;
132 align-items: baseline;
133 flex-wrap: wrap;
134
135 .presets,
136 .import-export {
137 margin-bottom: .5em;
138 }
139
140 .import-export {
141 display: flex;
142 }
143
144 .override {
145 margin-left: .5em;
146 }
147 }
148
149 .save-load-options {
150 flex-wrap: wrap;
151 margin-top: .5em;
152 justify-content: center;
153 .keep-option {
154 margin: 0 .5em .5em;
155 min-width: 25%;
156 }
157 }
158
159 .preview-container {
160 border-top: 1px dashed;
161 border-bottom: 1px dashed;
162 border-color: $fallback--border;
163 border-color: var(--border, $fallback--border);
164 margin: 1em -1em 0;
165 padding: 1em;
166 background: var(--body-background-image);
167 background-size: cover;
168 background-position: 50% 50%;
169
170 .dummy {
171 .post {
172 font-family: var(--postFont);
173 display: flex;
174
175 .content {
176 flex: 1;
177
178 h4 {
179 margin-bottom: .25em;
180 }
181
182 .icons {
183 margin-top: .5em;
184 display: flex;
185
186 i {
187 margin-right: 1em;
188 }
189 }
190 }
191 }
192
193 .after-post {
194 margin-top: 1em;
195 display: flex;
196 align-items: center;
197 }
198
199 .avatar, .avatar-alt{
200 background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
201 color: black;
202 font-family: sans-serif;
203 text-align: center;
204 margin-right: 1em;
205 }
206
207 .avatar-alt {
208 flex: 0 auto;
209 margin-left: 28px;
210 font-size: 12px;
211 min-width: 20px;
212 min-height: 20px;
213 line-height: 20px;
214 border-radius: $fallback--avatarAltRadius;
215 border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
216 }
217
218 .avatar {
219 flex: 0 auto;
220 width: 48px;
221 height: 48px;
222 font-size: 14px;
223 line-height: 48px;
224 }
225
226 .actions {
227 display: flex;
228 align-items: baseline;
229
230 .checkbox {
231 display: inline-flex;
232 align-items: baseline;
233 margin-right: 1em;
234 flex: 1;
235 }
236 }
237
238 .separator {
239 margin: 1em;
240 border-bottom: 1px solid;
241 border-color: $fallback--border;
242 border-color: var(--border, $fallback--border);
243 }
244
245 .panel-heading {
246 .badge, .alert, .btn, .faint {
247 margin-left: 1em;
248 white-space: nowrap;
249 }
250 .faint {
251 text-overflow: ellipsis;
252 min-width: 2em;
253 overflow-x: hidden;
254 }
255 .flex-spacer {
256 flex: 1;
257 }
258 }
259 .btn {
260 margin-left: 0;
261 padding: 0 1em;
262 min-width: 3em;
263 min-height: 30px;
264 }
265 }
266 }
267
268 .apply-container {
269 justify-content: center;
270 }
271
272 .radius-item,
273 .color-item {
274 min-width: 20em;
275 margin: 5px 6px 0 0;
276 display:flex;
277 flex-direction: column;
278 flex: 1 1 0;
279
280 &.wide {
281 min-width: 60%
282 }
283
284 &:not(.wide):nth-child(2n+1) {
285 margin-right: 7px;
286
287 }
288
289 .color, .opacity {
290 display:flex;
291 align-items: baseline;
292 }
293 }
294
295 .radius-item {
296 flex-basis: auto;
297 }
298
299 .theme-radius-rn,
300 .theme-color-cl {
301 border: 0;
302 box-shadow: none;
303 background: transparent;
304 color: var(--faint, $fallback--faint);
305 align-self: stretch;
306 }
307
308 .theme-color-cl,
309 .theme-radius-in,
310 .theme-color-in {
311 margin-left: 4px;
312 }
313
314 .theme-radius-in {
315 min-width: 1em;
316 }
317
318 .theme-radius-in {
319 max-width: 7em;
320 flex: 1;
321 }
322
323 .theme-radius-lb{
324 max-width: 50em;
325 }
326
327 .theme-preview-content {
328 padding: 20px;
329 }
330
331 .btn {
332 margin-left: .25em;
333 margin-right: .25em;
334 }
335 }