@magicfeedback/popup-sdk 1.5.0 → 1.6.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.
- package/dist/assets/assets/style.css +1487 -593
- package/dist/chunk-AN7JIVWB.mjs +1965 -0
- package/dist/chunk-AN7JIVWB.mjs.map +1 -0
- package/dist/chunk-Z3LLJMSH.mjs +1944 -0
- package/dist/chunk-Z3LLJMSH.mjs.map +1 -0
- package/dist/index.js +3030 -549
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +13 -11
- package/dist/index.mjs.map +1 -1
- package/dist/react-native.js +1825 -56
- package/dist/react-native.js.map +1 -1
- package/dist/react-native.mjs +13 -11
- package/dist/react-native.mjs.map +1 -1
- package/dist/{renderPopup-PXJEND4Y.mjs → renderPopup-M6MKTDEH.mjs} +1232 -528
- package/dist/renderPopup-M6MKTDEH.mjs.map +1 -0
- package/dist/{renderPopup-4WZ7V435.mjs → renderPopup-SELXQ3UE.mjs} +41 -49
- package/dist/renderPopup-SELXQ3UE.mjs.map +1 -0
- package/package.json +2 -2
- package/dist/chunk-D7QAGWGC.mjs +0 -176
- package/dist/chunk-D7QAGWGC.mjs.map +0 -1
- package/dist/chunk-JSBMP4MI.mjs +0 -197
- package/dist/chunk-JSBMP4MI.mjs.map +0 -1
- package/dist/renderPopup-4WZ7V435.mjs.map +0 -1
- package/dist/renderPopup-PXJEND4Y.mjs.map +0 -1
|
@@ -1,874 +1,1768 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* NO EDITAR A MANO — generado por scripts/vendor-survey-css.mjs
|
|
3
|
+
*
|
|
4
|
+
* Copia de @magicfeedback/native@2.2.8 → dist/styles/magicfeedback-default.css
|
|
5
|
+
* (la hoja canónica del paquete, la que apunta su campo "style"), con estos cambios locales:
|
|
6
|
+
*
|
|
7
|
+
* 1. Sin el @import de Google Fonts (Nunito): no queremos una petición externa desde la
|
|
8
|
+
* página del host, y la tipografía la decide el popup.
|
|
9
|
+
* 2. .magicfeedback-container hereda la fuente del popup (var(--deepdots-font, inherit)).
|
|
10
|
+
* 3. Los selectores desnudos (h2, p, input, textarea, select, ::placeholder, .error) van
|
|
11
|
+
* acotados a .deepdots-popup: este CSS se inyecta en el <head> del host y sin acotar
|
|
12
|
+
* repintaría su web.
|
|
13
|
+
* 4. El grupo .magicfeedback-radio se cualifica como div.magicfeedback-radio (la clase acaba
|
|
14
|
+
* también en el <input> del boolean).
|
|
15
|
+
* 5. Al final, un bloque de reglas propias del popup (fuente en los controles y padding del
|
|
16
|
+
* radio nativo).
|
|
17
|
+
*
|
|
18
|
+
* Las variables --mf-* se dejan en :root a propósito: el modal del priority-list se portea a
|
|
19
|
+
* <body>, fuera de .deepdots-popup, y ahí las necesita.
|
|
20
|
+
*
|
|
21
|
+
* Para subir de versión: npm i @magicfeedback/native@<v> && node scripts/vendor-survey-css.mjs
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* @magicfeedback/native - Default Styles
|
|
26
|
+
* Clean, minimal, and elegant survey rendering
|
|
27
|
+
*/
|
|
28
|
+
|
|
29
|
+
/* @import de Google Fonts (Nunito) eliminado al vendorizar: la fuente la pone el popup. */
|
|
30
|
+
|
|
31
|
+
/* ========================================
|
|
32
|
+
CSS VARIABLES - Design SYSTEM
|
|
33
|
+
======================================== */
|
|
34
|
+
:root {
|
|
35
|
+
/* Colors - Minimal Pastel */
|
|
36
|
+
/* --mf-primary is the one source of truth for brand/accent color —
|
|
37
|
+
every token below derives from it via color-mix() (or references
|
|
38
|
+
it directly) so changing this single value, here or via a
|
|
39
|
+
per-integration override, keeps hover/light/border states in
|
|
40
|
+
sync automatically instead of going stale independently. Scoped
|
|
41
|
+
to genuinely interactive/accent surfaces (buttons, selected
|
|
42
|
+
chips, focus rings) — general body text stays on its own neutral
|
|
43
|
+
scale below, not tied to the brand color. */
|
|
44
|
+
--mf-primary: #5d7bad;
|
|
45
|
+
--mf-primary-hover: color-mix(in srgb, var(--mf-primary) 85%, black);
|
|
46
|
+
--mf-primary-light: color-mix(in srgb, var(--mf-primary) 15%, white);
|
|
47
|
+
/* a translucent tint — mixed with transparent (opacity), not white,
|
|
48
|
+
so it reads as a soft shadow of the brand color rather than a
|
|
49
|
+
pastel of it. */
|
|
50
|
+
--mf-primary-border: color-mix(in srgb, var(--mf-primary) 35%, transparent);
|
|
51
|
+
|
|
52
|
+
--mf-text-primary: #1E293B;
|
|
53
|
+
--mf-text-secondary: #475569;
|
|
54
|
+
--mf-text-muted: #94A3B8;
|
|
55
|
+
|
|
56
|
+
--mf-bg-primary: #F8FAFC;
|
|
57
|
+
--mf-bg-secondary: #FFFFFF;
|
|
58
|
+
--mf-bg-hover: #EEF2F6;
|
|
59
|
+
|
|
60
|
+
--mf-border: #E2E8F0;
|
|
61
|
+
--mf-border-focus: var(--mf-primary);
|
|
62
|
+
|
|
63
|
+
--mf-success: #16A34A;
|
|
64
|
+
--mf-error: #EF4444;
|
|
65
|
+
--mf-warning: #F59E0B;
|
|
66
|
+
|
|
67
|
+
--mf-surface: #FFFFFF;
|
|
68
|
+
--mf-surface-alt: #F1F5F9;
|
|
69
|
+
--mf-accent: #38BDF8;
|
|
70
|
+
|
|
71
|
+
/* Spacing */
|
|
72
|
+
--mf-space-xs: 0.25rem;
|
|
73
|
+
--mf-space-sm: 0.5rem;
|
|
74
|
+
--mf-space-md: 0.75rem;
|
|
75
|
+
--mf-space-lg: 1rem;
|
|
76
|
+
--mf-space-xl: 1.5rem;
|
|
77
|
+
|
|
78
|
+
/* Border Radius */
|
|
79
|
+
--mf-radius-sm: 0.5rem;
|
|
80
|
+
--mf-radius-md: 0.75rem;
|
|
81
|
+
--mf-radius-lg: 1.25rem;
|
|
82
|
+
--mf-radius-full: 9999px;
|
|
83
|
+
|
|
84
|
+
/* Shadows */
|
|
85
|
+
--mf-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
|
|
86
|
+
--mf-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08);
|
|
87
|
+
--mf-shadow-lg: 0 16px 30px rgba(15, 23, 42, 0.12);
|
|
88
|
+
--mf-shadow-focus: 0 0 0 3px rgba(30, 41, 59, 0.15);
|
|
89
|
+
--mf-shadow-card: 0 18px 40px rgba(15, 23, 42, 0.08);
|
|
90
|
+
|
|
91
|
+
/* Typography */
|
|
92
|
+
--mf-font-sans: "Nunito", "Quicksand", "Avenir Next", "Trebuchet MS", sans-serif;
|
|
93
|
+
--mf-font-size-sm: 0.875rem;
|
|
94
|
+
--mf-font-size-base: 1rem;
|
|
95
|
+
--mf-font-size-lg: 1.125rem;
|
|
96
|
+
--mf-font-size-xl: 1.25rem;
|
|
97
|
+
--mf-line-height: 1.6;
|
|
98
|
+
|
|
99
|
+
/* Font Weights */
|
|
100
|
+
--mf-font-weight-normal: 400;
|
|
101
|
+
--mf-font-weight-medium: 500;
|
|
102
|
+
--mf-font-weight-semibold: 600;
|
|
103
|
+
--mf-font-weight-bold: 700;
|
|
104
|
+
--mf-font-weight-extrabold: 800;
|
|
105
|
+
|
|
106
|
+
/* Transitions */
|
|
107
|
+
--mf-transition: all 0.2s ease;
|
|
108
|
+
--mf-transition-fast: all 0.15s ease;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* ========================================
|
|
112
|
+
ANIMATIONS
|
|
113
|
+
======================================== */
|
|
114
|
+
@keyframes mf-fade-in {
|
|
115
|
+
from {
|
|
116
|
+
opacity: 0;
|
|
117
|
+
transform: translateY(8px);
|
|
118
|
+
}
|
|
119
|
+
to {
|
|
120
|
+
opacity: 1;
|
|
121
|
+
transform: translateY(0);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
@keyframes mf-slide-in {
|
|
126
|
+
from {
|
|
127
|
+
opacity: 0;
|
|
128
|
+
transform: translateX(-16px);
|
|
129
|
+
}
|
|
130
|
+
to {
|
|
131
|
+
opacity: 1;
|
|
132
|
+
transform: translateX(0);
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
@keyframes mf-scale-in {
|
|
137
|
+
from {
|
|
138
|
+
opacity: 0;
|
|
139
|
+
transform: scale(0.95);
|
|
140
|
+
}
|
|
141
|
+
to {
|
|
142
|
+
opacity: 1;
|
|
143
|
+
transform: scale(1);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
@keyframes mf-pulse {
|
|
148
|
+
0%,
|
|
149
|
+
100% {
|
|
150
|
+
opacity: 1;
|
|
151
|
+
}
|
|
152
|
+
50% {
|
|
153
|
+
opacity: 0.8;
|
|
154
|
+
}
|
|
3
155
|
}
|
|
4
156
|
|
|
157
|
+
/* ========================================
|
|
158
|
+
BASE CONTAINER
|
|
159
|
+
======================================== */
|
|
160
|
+
.magicfeedback-container {
|
|
161
|
+
/* Local: hereda la fuente del popup; --deepdots-font viene de PopupStyle.font. */
|
|
162
|
+
font-family: var(--deepdots-font, inherit);
|
|
163
|
+
color: var(--mf-text-primary);
|
|
164
|
+
line-height: var(--mf-line-height);
|
|
165
|
+
animation: mf-fade-in 0.4s ease-out;
|
|
166
|
+
border-radius: var(--mf-radius-lg);
|
|
167
|
+
}
|
|
5
168
|
|
|
169
|
+
/* ========================================
|
|
170
|
+
MESSAGES
|
|
171
|
+
======================================== */
|
|
6
172
|
.magicfeedback-success-message,
|
|
7
173
|
.magicfeedback-info-message,
|
|
8
|
-
.magicfeedback-start-message
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
animation
|
|
12
|
-
|
|
13
|
-
|
|
174
|
+
.magicfeedback-start-message {
|
|
175
|
+
padding: var(--mf-space-lg);
|
|
176
|
+
margin: var(--mf-space-lg) 0;
|
|
177
|
+
animation: mf-scale-in 0.3s ease-out;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/* .magicfeedback-info-message/-start-message are set via innerHTML (see
|
|
181
|
+
renderInfoPage.ts / questions.service.ts's renderStartMessage) — whatever
|
|
182
|
+
rich text a survey author writes lands here as real HTML, not just the
|
|
183
|
+
<p>/<img> pair this used to style. Covering the rest of what a rich-text
|
|
184
|
+
editor commonly outputs (headings, lists, links, emphasis, quotes, code,
|
|
185
|
+
rules) keeps that content on the same type scale and palette as the rest
|
|
186
|
+
of the widget instead of falling back to unstyled browser defaults. */
|
|
187
|
+
.magicfeedback-success-message > :first-child,
|
|
188
|
+
.magicfeedback-info-message > :first-child,
|
|
189
|
+
.magicfeedback-start-message > :first-child {
|
|
190
|
+
margin-top: 0;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.magicfeedback-success-message > :last-child,
|
|
194
|
+
.magicfeedback-info-message > :last-child,
|
|
195
|
+
.magicfeedback-start-message > :last-child {
|
|
196
|
+
margin-bottom: 0;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.magicfeedback-success-message p,
|
|
200
|
+
.magicfeedback-info-message p,
|
|
201
|
+
.magicfeedback-start-message p {
|
|
202
|
+
font-size: var(--mf-font-size-base);
|
|
203
|
+
color: var(--mf-text-secondary);
|
|
204
|
+
margin: 0 0 var(--mf-space-md);
|
|
205
|
+
line-height: var(--mf-line-height);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.magicfeedback-info-message h1,
|
|
209
|
+
.magicfeedback-info-message h2,
|
|
210
|
+
.magicfeedback-info-message h3,
|
|
211
|
+
.magicfeedback-info-message h4,
|
|
212
|
+
.magicfeedback-info-message h5,
|
|
213
|
+
.magicfeedback-info-message h6,
|
|
214
|
+
.magicfeedback-start-message h1,
|
|
215
|
+
.magicfeedback-start-message h2,
|
|
216
|
+
.magicfeedback-start-message h3,
|
|
217
|
+
.magicfeedback-start-message h4,
|
|
218
|
+
.magicfeedback-start-message h5,
|
|
219
|
+
.magicfeedback-start-message h6 {
|
|
220
|
+
color: var(--mf-text-primary);
|
|
221
|
+
font-weight: var(--mf-font-weight-bold);
|
|
222
|
+
line-height: 1.3;
|
|
223
|
+
margin: var(--mf-space-lg) 0 var(--mf-space-sm);
|
|
224
|
+
text-align: left;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.magicfeedback-info-message h1, .magicfeedback-start-message h1 { font-size: var(--mf-font-size-xl); }
|
|
228
|
+
.magicfeedback-info-message h2, .magicfeedback-start-message h2 { font-size: var(--mf-font-size-lg); }
|
|
229
|
+
.magicfeedback-info-message h3,
|
|
230
|
+
.magicfeedback-info-message h4,
|
|
231
|
+
.magicfeedback-info-message h5,
|
|
232
|
+
.magicfeedback-info-message h6,
|
|
233
|
+
.magicfeedback-start-message h3,
|
|
234
|
+
.magicfeedback-start-message h4,
|
|
235
|
+
.magicfeedback-start-message h5,
|
|
236
|
+
.magicfeedback-start-message h6 { font-size: var(--mf-font-size-base); }
|
|
237
|
+
|
|
238
|
+
.magicfeedback-info-message strong,
|
|
239
|
+
.magicfeedback-info-message b,
|
|
240
|
+
.magicfeedback-start-message strong,
|
|
241
|
+
.magicfeedback-start-message b {
|
|
242
|
+
font-weight: var(--mf-font-weight-bold);
|
|
243
|
+
color: var(--mf-text-primary);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.magicfeedback-info-message a,
|
|
247
|
+
.magicfeedback-start-message a {
|
|
248
|
+
color: var(--mf-primary);
|
|
249
|
+
text-decoration: underline;
|
|
250
|
+
text-underline-offset: 2px;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.magicfeedback-info-message a:hover,
|
|
254
|
+
.magicfeedback-start-message a:hover {
|
|
255
|
+
color: var(--mf-primary-hover);
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.magicfeedback-info-message ul,
|
|
259
|
+
.magicfeedback-info-message ol,
|
|
260
|
+
.magicfeedback-start-message ul,
|
|
261
|
+
.magicfeedback-start-message ol {
|
|
262
|
+
margin: 0 0 var(--mf-space-md);
|
|
263
|
+
padding-left: var(--mf-space-xl);
|
|
264
|
+
color: var(--mf-text-secondary);
|
|
265
|
+
line-height: var(--mf-line-height);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.magicfeedback-info-message li + li,
|
|
269
|
+
.magicfeedback-start-message li + li {
|
|
270
|
+
margin-top: var(--mf-space-xs);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.magicfeedback-info-message blockquote,
|
|
274
|
+
.magicfeedback-start-message blockquote {
|
|
275
|
+
margin: 0 0 var(--mf-space-md);
|
|
276
|
+
padding: var(--mf-space-sm) var(--mf-space-md);
|
|
277
|
+
border-left: 3px solid var(--mf-primary-border);
|
|
278
|
+
color: var(--mf-text-secondary);
|
|
279
|
+
font-style: italic;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.magicfeedback-info-message code,
|
|
283
|
+
.magicfeedback-start-message code {
|
|
284
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
285
|
+
font-size: 0.9em;
|
|
286
|
+
background: var(--mf-bg-hover);
|
|
287
|
+
padding: 0.15em 0.4em;
|
|
288
|
+
border-radius: var(--mf-radius-sm);
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.magicfeedback-info-message pre,
|
|
292
|
+
.magicfeedback-start-message pre {
|
|
293
|
+
margin: 0 0 var(--mf-space-md);
|
|
294
|
+
padding: var(--mf-space-md);
|
|
295
|
+
background: var(--mf-bg-hover);
|
|
296
|
+
border-radius: var(--mf-radius-md);
|
|
297
|
+
overflow-x: auto;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.magicfeedback-info-message pre code,
|
|
301
|
+
.magicfeedback-start-message pre code {
|
|
302
|
+
background: none;
|
|
303
|
+
padding: 0;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.magicfeedback-info-message hr,
|
|
307
|
+
.magicfeedback-start-message hr {
|
|
308
|
+
border: none;
|
|
309
|
+
border-top: 1px solid var(--mf-border);
|
|
310
|
+
margin: var(--mf-space-lg) 0;
|
|
311
|
+
}
|
|
14
312
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
313
|
+
.magicfeedback-success-message img,
|
|
314
|
+
.magicfeedback-info-message img,
|
|
315
|
+
.magicfeedback-start-message img {
|
|
316
|
+
max-width: 100%;
|
|
317
|
+
height: auto;
|
|
318
|
+
margin: var(--mf-space-lg) auto;
|
|
319
|
+
display: block;
|
|
320
|
+
border-radius: var(--mf-radius-md);
|
|
21
321
|
}
|
|
22
322
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
323
|
+
.magicfeedback-image {
|
|
324
|
+
max-height: 400px;
|
|
325
|
+
height: auto;
|
|
326
|
+
max-width: 100%;
|
|
327
|
+
margin: var(--mf-space-lg) auto;
|
|
328
|
+
display: block;
|
|
329
|
+
border-radius: var(--mf-radius-md);
|
|
26
330
|
}
|
|
27
331
|
|
|
332
|
+
/* ========================================
|
|
333
|
+
FORM STRUCTURE
|
|
334
|
+
======================================== */
|
|
28
335
|
.magicfeedback-form {
|
|
29
336
|
display: flex;
|
|
30
337
|
flex-direction: column;
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
width: 100%;
|
|
338
|
+
gap: var(--mf-space-lg);
|
|
339
|
+
padding: clamp(16px, 2.5vw, 28px);
|
|
34
340
|
}
|
|
341
|
+
|
|
35
342
|
.magicfeedback-questions {
|
|
36
343
|
display: flex;
|
|
37
344
|
flex-direction: column;
|
|
38
|
-
|
|
39
|
-
align-items: flex-start;
|
|
345
|
+
gap: var(--mf-space-xl);
|
|
40
346
|
width: 100%;
|
|
41
347
|
}
|
|
42
348
|
|
|
43
349
|
.magicfeedback-div {
|
|
44
350
|
display: flex;
|
|
45
351
|
flex-direction: column;
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
352
|
+
gap: var(--mf-space-sm);
|
|
353
|
+
animation: mf-slide-in 0.3s ease-out;
|
|
354
|
+
background: var(--mf-bg-secondary);
|
|
355
|
+
border-radius: var(--mf-radius-md);
|
|
50
356
|
}
|
|
51
357
|
|
|
358
|
+
/* ========================================
|
|
359
|
+
LABELS & TYPOGRAPHY
|
|
360
|
+
======================================== */
|
|
52
361
|
.magicfeedback-label {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
362
|
+
font-size: var(--mf-font-size-lg);
|
|
363
|
+
font-weight: var(--mf-font-weight-bold);
|
|
364
|
+
color: var(--mf-text-primary);
|
|
365
|
+
line-height: var(--mf-line-height);
|
|
366
|
+
text-align: left;
|
|
367
|
+
letter-spacing: -0.01em;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.magicfeedback-sublabel {
|
|
371
|
+
font-size: var(--mf-font-size-base);
|
|
372
|
+
font-weight: var(--mf-font-weight-normal);
|
|
373
|
+
color: var(--mf-text-secondary);
|
|
374
|
+
margin-bottom: var(--mf-space-sm);
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
.deepdots-popup h2 {
|
|
378
|
+
font-size: var(--mf-font-size-xl);
|
|
379
|
+
font-weight: 600;
|
|
380
|
+
color: var(--mf-text-primary);
|
|
381
|
+
margin: 0 0 var(--mf-space-xl) 0;
|
|
382
|
+
text-align: center;
|
|
383
|
+
letter-spacing: -0.01em;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
.deepdots-popup p {
|
|
387
|
+
margin: 0;
|
|
388
|
+
font-size: var(--mf-font-size-sm);
|
|
389
|
+
color: var(--mf-text-secondary);
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
/* ========================================
|
|
393
|
+
FORM INPUTS
|
|
394
|
+
======================================== */
|
|
395
|
+
.deepdots-popup input[type="date"],
|
|
396
|
+
.deepdots-popup input[type="text"],
|
|
397
|
+
.deepdots-popup input[type="number"],
|
|
398
|
+
.deepdots-popup input[type="email"],
|
|
399
|
+
.deepdots-popup input[type="password"],
|
|
400
|
+
.deepdots-popup textarea,
|
|
401
|
+
.deepdots-popup select {
|
|
402
|
+
padding: 0.75rem 0.9rem;
|
|
403
|
+
font-size: var(--mf-font-size-base);
|
|
56
404
|
font-family: inherit;
|
|
57
|
-
|
|
58
|
-
color:
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
405
|
+
color: var(--mf-text-primary);
|
|
406
|
+
background-color: var(--mf-surface);
|
|
407
|
+
border: 2px solid var(--mf-border);
|
|
408
|
+
border-radius: var(--mf-radius-md);
|
|
409
|
+
outline: none;
|
|
410
|
+
transition: var(--mf-transition);
|
|
411
|
+
-webkit-appearance: none;
|
|
412
|
+
appearance: none;
|
|
413
|
+
box-shadow: var(--mf-shadow-sm);
|
|
414
|
+
}
|
|
62
415
|
|
|
416
|
+
.deepdots-popup textarea {
|
|
417
|
+
min-height: 100px;
|
|
418
|
+
resize: vertical;
|
|
63
419
|
}
|
|
64
420
|
|
|
65
|
-
.
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
flex-wrap: wrap;
|
|
69
|
-
width: 100%;
|
|
421
|
+
.deepdots-popup input::placeholder,
|
|
422
|
+
.deepdots-popup textarea::placeholder {
|
|
423
|
+
color: var(--mf-text-muted);
|
|
70
424
|
}
|
|
71
425
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
426
|
+
/* Remove number input spinners */
|
|
427
|
+
.deepdots-popup input::-webkit-outer-spin-button,
|
|
428
|
+
.deepdots-popup input::-webkit-inner-spin-button {
|
|
429
|
+
-webkit-appearance: none;
|
|
430
|
+
margin: 0;
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
.deepdots-popup input[type="number"] {
|
|
434
|
+
/* -moz-appearance: textfield; removed for lint compatibility */
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
/* Custom Select Arrow */
|
|
438
|
+
.deepdots-popup select {
|
|
439
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
|
|
440
|
+
background-repeat: no-repeat;
|
|
441
|
+
background-position: right var(--mf-space-md) center;
|
|
442
|
+
padding-right: var(--mf-space-xl);
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
/* Error State */
|
|
446
|
+
.deepdots-popup input.error,
|
|
447
|
+
.deepdots-popup select.error,
|
|
448
|
+
.deepdots-popup textarea.error {
|
|
449
|
+
border-color: var(--mf-error);
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.magicfeedback-error {
|
|
453
|
+
margin-top: var(--mf-space-xs);
|
|
454
|
+
font-size: var(--mf-font-size-sm);
|
|
455
|
+
color: var(--mf-error);
|
|
79
456
|
}
|
|
80
457
|
|
|
81
|
-
/*
|
|
82
|
-
|
|
83
|
-
|
|
458
|
+
/* ========================================
|
|
459
|
+
CHECKBOX & RADIO OPTIONS
|
|
460
|
+
======================================== */
|
|
461
|
+
.magicfeedback-checkbox,
|
|
84
462
|
div.magicfeedback-radio {
|
|
85
463
|
display: flex;
|
|
86
464
|
flex-direction: column;
|
|
87
|
-
|
|
88
|
-
flex-wrap: wrap;
|
|
465
|
+
gap: var(--mf-space-sm);
|
|
89
466
|
width: 100%;
|
|
90
|
-
margin-right: 5px;
|
|
91
|
-
padding: 5px;
|
|
92
|
-
box-sizing: border-box;
|
|
93
467
|
}
|
|
94
468
|
|
|
95
469
|
.magicfeedback-checkbox-container,
|
|
96
470
|
.magicfeedback-radio-container {
|
|
97
471
|
display: flex;
|
|
98
|
-
flex-direction: row;
|
|
99
|
-
justify-content: flex-start;
|
|
100
472
|
align-items: center;
|
|
101
|
-
|
|
102
|
-
padding:
|
|
103
|
-
|
|
104
|
-
border-radius:
|
|
105
|
-
|
|
473
|
+
gap: var(--mf-space-sm);
|
|
474
|
+
padding: var(--mf-space-md);
|
|
475
|
+
border: 1.5px solid var(--mf-border);
|
|
476
|
+
border-radius: var(--mf-radius-md);
|
|
477
|
+
cursor: pointer;
|
|
478
|
+
transition: var(--mf-transition-fast);
|
|
106
479
|
}
|
|
107
480
|
|
|
108
|
-
.
|
|
109
|
-
.
|
|
110
|
-
-
|
|
111
|
-
-
|
|
481
|
+
.magicfeedback-checkbox-container:hover,
|
|
482
|
+
.magicfeedback-radio-container:hover {
|
|
483
|
+
background-color: var(--mf-bg-hover);
|
|
484
|
+
border-color: var(--mf-primary);
|
|
112
485
|
}
|
|
113
486
|
|
|
114
|
-
.magicfeedback-checkbox
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
height: 20px;
|
|
119
|
-
cursor: pointer;
|
|
487
|
+
.magicfeedback-checkbox-container:has(input:checked),
|
|
488
|
+
.magicfeedback-radio-container:has(input:checked) {
|
|
489
|
+
background-color: var(--mf-primary-light);
|
|
490
|
+
border-color: var(--mf-primary);
|
|
120
491
|
}
|
|
121
492
|
|
|
493
|
+
.magicfeedback-checkbox input[type="checkbox"],
|
|
494
|
+
.magicfeedback-radio-container input[type="radio"] {
|
|
495
|
+
width: 18px;
|
|
496
|
+
height: 18px;
|
|
497
|
+
margin: 0;
|
|
498
|
+
cursor: pointer;
|
|
499
|
+
flex-shrink: 0;
|
|
500
|
+
accent-color: var(--mf-primary);
|
|
501
|
+
}
|
|
122
502
|
|
|
123
503
|
.magicfeedback-checkbox label,
|
|
124
504
|
.magicfeedback-radio-container label {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
505
|
+
font-size: var(--mf-font-size-base);
|
|
506
|
+
text-align: left;
|
|
507
|
+
color: var(--mf-text-primary);
|
|
508
|
+
cursor: pointer;
|
|
509
|
+
margin: 0;
|
|
510
|
+
flex: 1;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
/* ========================================
|
|
514
|
+
BOOLEAN OPTIONS
|
|
515
|
+
======================================== */
|
|
516
|
+
.magicfeedback-boolean-container {
|
|
517
|
+
display: flex;
|
|
518
|
+
gap: var(--mf-space-md);
|
|
131
519
|
width: 100%;
|
|
132
520
|
}
|
|
133
521
|
|
|
134
|
-
.
|
|
135
|
-
|
|
136
|
-
|
|
522
|
+
.magicfeedback-boolean-option {
|
|
523
|
+
flex: 1;
|
|
524
|
+
position: relative;
|
|
137
525
|
}
|
|
138
526
|
|
|
139
|
-
.
|
|
140
|
-
|
|
527
|
+
.magicfeedback-boolean-option input[type="radio"] {
|
|
528
|
+
position: absolute;
|
|
529
|
+
opacity: 0;
|
|
530
|
+
width: 0;
|
|
531
|
+
height: 0;
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
.magicfeedback-boolean-option label {
|
|
535
|
+
display: flex;
|
|
536
|
+
align-items: center;
|
|
537
|
+
justify-content: center;
|
|
538
|
+
padding: var(--mf-space-md);
|
|
539
|
+
font-size: var(--mf-font-size-base);
|
|
540
|
+
font-weight: 500;
|
|
541
|
+
color: var(--mf-text-secondary);
|
|
542
|
+
border: 1.5px solid var(--mf-border);
|
|
543
|
+
border-radius: var(--mf-radius-md);
|
|
544
|
+
cursor: pointer;
|
|
545
|
+
transition: var(--mf-transition-fast);
|
|
141
546
|
margin: 0;
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
color: #222;
|
|
145
|
-
font-family: var(--deepdots-font, 'Montserrat');
|
|
146
|
-
font-size: 18px;
|
|
147
|
-
text-transform: uppercase;
|
|
148
|
-
text-align: center;
|
|
149
|
-
margin-bottom: 40px;
|
|
547
|
+
width: -webkit-fill-available;
|
|
548
|
+
height: inherit;
|
|
150
549
|
}
|
|
151
550
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
.deepdots-popup.deepdots-has-font input,
|
|
156
|
-
.deepdots-popup.deepdots-has-font textarea,
|
|
157
|
-
.deepdots-popup.deepdots-has-font select {
|
|
158
|
-
font-family: var(--deepdots-font, inherit);
|
|
551
|
+
.magicfeedback-boolean-option label:hover {
|
|
552
|
+
background-color: var(--mf-bg-hover);
|
|
553
|
+
border-color: var(--mf-primary);
|
|
159
554
|
}
|
|
160
555
|
|
|
161
|
-
.
|
|
162
|
-
|
|
556
|
+
.magicfeedback-boolean-option input[type="radio"]:checked + label {
|
|
557
|
+
color: var(--mf-primary);
|
|
558
|
+
background-color: var(--mf-primary-light);
|
|
559
|
+
border-color: var(--mf-primary);
|
|
560
|
+
font-weight: 600;
|
|
163
561
|
}
|
|
164
562
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
.
|
|
169
|
-
.
|
|
170
|
-
.
|
|
171
|
-
.deepdots-popup select {
|
|
172
|
-
box-sizing: border-box;
|
|
173
|
-
padding: 10px;
|
|
174
|
-
margin: 10px 0;
|
|
563
|
+
/* ========================================
|
|
564
|
+
RATING SYSTEMS
|
|
565
|
+
======================================== */
|
|
566
|
+
.magicfeedback-rating,
|
|
567
|
+
.magicfeedback-rating-number,
|
|
568
|
+
.magicfeedback-rating-star {
|
|
175
569
|
width: 100%;
|
|
176
|
-
border: 2px solid #ccc; /* Default border color - you can customize this */
|
|
177
|
-
border-radius: 5px;
|
|
178
|
-
font-size: 18px;
|
|
179
|
-
outline: none;
|
|
180
|
-
transition: border-color 0.3s ease;
|
|
181
|
-
min-height: 50px;
|
|
182
|
-
font-family: inherit;
|
|
183
|
-
-webkit-appearance: none;
|
|
184
570
|
}
|
|
185
571
|
|
|
186
|
-
.
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
572
|
+
.magicfeedback-rating-container,
|
|
573
|
+
.magicfeedback-rating-number-container,
|
|
574
|
+
.magicfeedback-rating-star-container {
|
|
575
|
+
display: flex;
|
|
576
|
+
flex-wrap: wrap;
|
|
577
|
+
gap: var(--mf-space-sm);
|
|
578
|
+
justify-content: center;
|
|
579
|
+
align-items: center;
|
|
580
|
+
padding: var(--mf-space-md) 0;
|
|
581
|
+
list-style: none;
|
|
582
|
+
margin: 0;
|
|
197
583
|
}
|
|
198
584
|
|
|
199
|
-
|
|
585
|
+
/* Caption line below the row — min on one side, max on the other (swapped
|
|
586
|
+
for order: "rtl") — same simple, non-responsive pattern as the
|
|
587
|
+
rating-number row caption. Used by rating-star and rating-emoji. */
|
|
588
|
+
.magicfeedback-rating-placeholder {
|
|
200
589
|
display: flex;
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
align-items: center;
|
|
204
|
-
margin: 10px 0;
|
|
590
|
+
justify-content: space-between;
|
|
591
|
+
gap: var(--mf-space-md);
|
|
205
592
|
width: 100%;
|
|
593
|
+
margin-top: var(--mf-space-sm);
|
|
594
|
+
font-size: var(--mf-font-size-sm);
|
|
595
|
+
font-weight: var(--mf-font-weight-semibold);
|
|
596
|
+
color: var(--mf-text-secondary);
|
|
206
597
|
}
|
|
207
598
|
|
|
208
|
-
.magicfeedback-
|
|
209
|
-
|
|
210
|
-
font-weight: 400;
|
|
211
|
-
font-size: 16px;
|
|
212
|
-
width: 100%;
|
|
213
|
-
padding-top: 5px;
|
|
599
|
+
.magicfeedback-rating-placeholder-value {
|
|
600
|
+
overflow-wrap: anywhere;
|
|
214
601
|
}
|
|
215
602
|
|
|
216
|
-
.magicfeedback-
|
|
217
|
-
|
|
218
|
-
margin-left: 10px;
|
|
219
|
-
width: 100%;
|
|
220
|
-
height: 38px;
|
|
221
|
-
border-radius: 8px;
|
|
222
|
-
font-size: 16px;
|
|
223
|
-
cursor: pointer;
|
|
224
|
-
border: 1px solid #ced4da !important;
|
|
603
|
+
.magicfeedback-rating-placeholder-value:last-child {
|
|
604
|
+
text-align: right;
|
|
225
605
|
}
|
|
226
606
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
607
|
+
/* Rating with Images */
|
|
608
|
+
.magicfeedback-rating-option-label-container input[type="radio"] {
|
|
609
|
+
position: absolute;
|
|
610
|
+
opacity: 0;
|
|
611
|
+
width: 0;
|
|
612
|
+
height: 0;
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
.magicfeedback-rating-option-label-container img {
|
|
616
|
+
width: 56px;
|
|
617
|
+
height: 56px;
|
|
231
618
|
cursor: pointer;
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
justify-content: center;
|
|
236
|
-
align-items: center;
|
|
237
|
-
border-radius: inherit;
|
|
619
|
+
transition: var(--mf-transition-fast);
|
|
620
|
+
border-radius: var(--mf-radius-full);
|
|
621
|
+
border: 2px solid transparent;
|
|
238
622
|
}
|
|
239
623
|
|
|
240
|
-
.magicfeedback-
|
|
241
|
-
|
|
624
|
+
.magicfeedback-rating-option-label-container img:hover {
|
|
625
|
+
transform: scale(1.1);
|
|
626
|
+
border-color: var(--mf-primary);
|
|
242
627
|
}
|
|
243
628
|
|
|
244
|
-
.magicfeedback-
|
|
245
|
-
color:
|
|
246
|
-
|
|
629
|
+
.magicfeedback-rating-option-label-container input[type="radio"]:checked + img {
|
|
630
|
+
border-color: var(--mf-primary);
|
|
631
|
+
box-shadow: 0 0 0 3px var(--mf-primary-light);
|
|
247
632
|
}
|
|
248
633
|
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
width: 20px;
|
|
257
|
-
height: 20px;
|
|
258
|
-
min-width: 20px;
|
|
259
|
-
flex: 0 0 auto;
|
|
260
|
-
background-color: #fff;
|
|
261
|
-
box-shadow: none;
|
|
634
|
+
.magicfeedback-rating-option-label-container label {
|
|
635
|
+
display: block;
|
|
636
|
+
text-align: center;
|
|
637
|
+
font-size: var(--mf-font-size-sm);
|
|
638
|
+
color: var(--mf-text-secondary);
|
|
639
|
+
margin-top: var(--mf-space-xs);
|
|
640
|
+
cursor: pointer;
|
|
262
641
|
}
|
|
263
642
|
|
|
264
|
-
/*
|
|
265
|
-
|
|
266
|
-
|
|
643
|
+
/* Rating Numbers — each option is its own outlined chip in the survey's
|
|
644
|
+
primary color, with a gap between them. Row and column use the same
|
|
645
|
+
chip; column additionally has room to show each option's own text
|
|
646
|
+
plainly next to its number. */
|
|
647
|
+
|
|
648
|
+
/* Every size here is width:100%/flex:1 combined with the chip's own
|
|
649
|
+
padding and border. Without border-box, the browser's default
|
|
650
|
+
content-box adds that padding/border on TOP of the declared size, so
|
|
651
|
+
the chip quietly overflows past its flex slot — reading as "not quite
|
|
652
|
+
full width" or, worse, pushing into the next chip. */
|
|
653
|
+
.magicfeedback-rating-number-container,
|
|
654
|
+
.magicfeedback-rating-number-option,
|
|
655
|
+
.magicfeedback-rating-number-option-label-container,
|
|
656
|
+
.magicfeedback-rating-number-value {
|
|
657
|
+
box-sizing: border-box;
|
|
267
658
|
}
|
|
268
659
|
|
|
269
|
-
/*
|
|
270
|
-
|
|
271
|
-
|
|
660
|
+
/* The shared rating-container rule (above, reused by star rating) sets
|
|
661
|
+
align-items:center for its row-of-chips layout — in a stacked column
|
|
662
|
+
that still nudges a 100%-wide chip inward instead of a true 0 offset.
|
|
663
|
+
Force stretch so every chip fills the exact same width, flush on
|
|
664
|
+
both sides. */
|
|
665
|
+
.magicfeedback-rating-number-container-column,
|
|
666
|
+
.magicfeedback-rating-number-container-column-reverse {
|
|
667
|
+
align-items: stretch;
|
|
272
668
|
}
|
|
273
669
|
|
|
274
|
-
|
|
670
|
+
/* Caption line below the row — the single place min/max labels live
|
|
671
|
+
for row mode, shared by mobile and desktop. */
|
|
672
|
+
.magicfeedback-rating-number-scale-labels {
|
|
275
673
|
display: flex;
|
|
276
|
-
flex-direction: row;
|
|
277
674
|
justify-content: space-between;
|
|
278
|
-
|
|
279
|
-
margin-top:
|
|
280
|
-
|
|
675
|
+
gap: var(--mf-space-md);
|
|
676
|
+
margin-top: var(--mf-space-sm);
|
|
677
|
+
font-size: var(--mf-font-size-sm);
|
|
678
|
+
font-weight: var(--mf-font-weight-semibold);
|
|
679
|
+
color: var(--mf-text-secondary);
|
|
281
680
|
}
|
|
282
681
|
|
|
283
|
-
.magicfeedback-
|
|
284
|
-
|
|
285
|
-
padding: 10px;
|
|
286
|
-
margin: 10px 0;
|
|
287
|
-
width: 100px;
|
|
288
|
-
border-radius: 8px;
|
|
289
|
-
font-size: 16px;
|
|
290
|
-
outline: none;
|
|
291
|
-
transition: border-color 0.3s ease;
|
|
292
|
-
background-color: #1E293B;
|
|
293
|
-
color: white;
|
|
682
|
+
.magicfeedback-rating-number-scale-label {
|
|
683
|
+
overflow-wrap: anywhere;
|
|
294
684
|
}
|
|
295
685
|
|
|
296
|
-
.magicfeedback-
|
|
297
|
-
|
|
298
|
-
padding: 10px;
|
|
299
|
-
margin: 10px 0;
|
|
300
|
-
width: 100px;
|
|
301
|
-
border: 0;
|
|
302
|
-
border-radius: 8px;
|
|
303
|
-
font-size: 16px;
|
|
304
|
-
outline: none;
|
|
305
|
-
transition: border-color 0.3s ease;
|
|
306
|
-
background-color: transparent;
|
|
307
|
-
color: #212529;
|
|
686
|
+
.magicfeedback-rating-number-scale-label:last-child {
|
|
687
|
+
text-align: right;
|
|
308
688
|
}
|
|
309
689
|
|
|
690
|
+
/* Column, no per-option text: each row is its own separated chip, so
|
|
691
|
+
the min/max labels bookend the stack from outside it — one line
|
|
692
|
+
above the first chip, one below the last. Margin goes on whichever
|
|
693
|
+
side actually faces the list — the "before" label (always the first
|
|
694
|
+
child) gets space below it, the "after" one (always right after the
|
|
695
|
+
container, extra option row or not) gets space above it — so both
|
|
696
|
+
sit the same distance from the chips regardless of which one it is. */
|
|
697
|
+
.magicfeedback-rating-number-scale-label-block {
|
|
698
|
+
font-size: var(--mf-font-size-sm);
|
|
699
|
+
font-weight: var(--mf-font-weight-semibold);
|
|
700
|
+
color: var(--mf-text-secondary);
|
|
701
|
+
text-align: center;
|
|
702
|
+
}
|
|
310
703
|
|
|
704
|
+
.magicfeedback-rating-number-scale-label-block:first-child {
|
|
705
|
+
margin-bottom: var(--mf-space-sm);
|
|
706
|
+
}
|
|
311
707
|
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
width: 100%;
|
|
708
|
+
.magicfeedback-rating-number-container + .magicfeedback-rating-number-scale-label-block {
|
|
709
|
+
margin-top: var(--mf-space-sm);
|
|
315
710
|
}
|
|
316
711
|
|
|
317
|
-
.magicfeedback-rating-
|
|
712
|
+
.magicfeedback-rating-number-option {
|
|
318
713
|
display: flex;
|
|
319
|
-
|
|
320
|
-
justify-content: space-around;
|
|
321
|
-
flex-wrap: wrap;
|
|
322
|
-
align-items: center;
|
|
323
|
-
|
|
324
|
-
margin: 15px 5px;
|
|
325
|
-
padding: 0;
|
|
714
|
+
}
|
|
326
715
|
|
|
327
|
-
|
|
328
|
-
|
|
716
|
+
.magicfeedback-rating-number-option-label-container {
|
|
717
|
+
position: relative;
|
|
718
|
+
width: 100%;
|
|
719
|
+
display: flex;
|
|
329
720
|
cursor: pointer;
|
|
330
|
-
user-select: none;
|
|
331
|
-
-webkit-user-select: none;
|
|
332
|
-
-moz-user-select: none;
|
|
333
|
-
-ms-user-select: none;
|
|
334
721
|
}
|
|
335
722
|
|
|
336
|
-
.magicfeedback-rating-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
723
|
+
.magicfeedback-rating-number-option-label-container input[type="radio"] {
|
|
724
|
+
position: absolute;
|
|
725
|
+
opacity: 0;
|
|
726
|
+
width: 0;
|
|
727
|
+
height: 0;
|
|
728
|
+
}
|
|
729
|
+
|
|
730
|
+
.magicfeedback-rating-number-value {
|
|
731
|
+
display: flex;
|
|
732
|
+
align-items: center;
|
|
340
733
|
justify-content: center;
|
|
341
|
-
|
|
734
|
+
width: 100%;
|
|
735
|
+
transition: var(--mf-transition-fast);
|
|
736
|
+
color: var(--mf-text-secondary);
|
|
737
|
+
font-weight: var(--mf-font-weight-semibold);
|
|
342
738
|
}
|
|
343
739
|
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
740
|
+
/* Row: individual outlined chips in the survey's own primary color —
|
|
741
|
+
var(--mf-primary) so whatever brand color a given survey sets carries
|
|
742
|
+
through automatically, no color hardcoded here. */
|
|
743
|
+
.magicfeedback-rating-number-container-row,
|
|
744
|
+
.magicfeedback-rating-number-container-row-reverse {
|
|
745
|
+
flex-wrap: nowrap;
|
|
746
|
+
gap: var(--mf-space-sm);
|
|
347
747
|
}
|
|
348
748
|
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
display: flex;
|
|
355
|
-
justify-content: center;
|
|
356
|
-
}
|
|
749
|
+
.magicfeedback-rating-number-option-row,
|
|
750
|
+
.magicfeedback-rating-number-option-row-reverse {
|
|
751
|
+
flex: 1 1 0;
|
|
752
|
+
min-width: 0;
|
|
753
|
+
}
|
|
357
754
|
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
755
|
+
.magicfeedback-rating-number-option-row .magicfeedback-rating-number-value,
|
|
756
|
+
.magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-value {
|
|
757
|
+
min-height: 56px;
|
|
758
|
+
padding: var(--mf-space-sm);
|
|
759
|
+
border: 2px solid var(--mf-primary-border);
|
|
760
|
+
border-radius: var(--mf-radius-md);
|
|
761
|
+
background: var(--mf-bg-secondary);
|
|
762
|
+
color: var(--mf-primary);
|
|
763
|
+
font-size: var(--mf-font-size-lg);
|
|
764
|
+
font-weight: var(--mf-font-weight-bold);
|
|
765
|
+
}
|
|
365
766
|
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
767
|
+
/* More than 6 options (e.g. a 0-10 NPS scale): still one row, never
|
|
768
|
+
wraps — but scaled down on purpose, so it reads as a compact chip
|
|
769
|
+
rather than the same 56px button stretched thin. */
|
|
770
|
+
.magicfeedback-rating-number-container-row--dense .magicfeedback-rating-number-option-row .magicfeedback-rating-number-value,
|
|
771
|
+
.magicfeedback-rating-number-container-row--dense .magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-value {
|
|
772
|
+
min-height: 36px;
|
|
773
|
+
padding: var(--mf-space-xs);
|
|
774
|
+
border-radius: var(--mf-radius-sm);
|
|
775
|
+
font-size: 0.8rem;
|
|
776
|
+
}
|
|
777
|
+
|
|
778
|
+
.magicfeedback-rating-number-option-row .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value,
|
|
779
|
+
.magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
|
|
780
|
+
background: var(--mf-primary-light);
|
|
370
781
|
}
|
|
371
782
|
|
|
783
|
+
.magicfeedback-rating-number-option-row .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value,
|
|
784
|
+
.magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value {
|
|
785
|
+
color: #fff;
|
|
786
|
+
background-color: var(--mf-primary);
|
|
787
|
+
box-shadow: var(--mf-shadow-md);
|
|
788
|
+
}
|
|
372
789
|
|
|
373
|
-
|
|
790
|
+
/* Extra option: always its own row below the scale, and styled like every
|
|
791
|
+
other chip now — "doesn't apply" is still not a point on the 1..N
|
|
792
|
+
continuum, but it no longer needs a different border style to say so. */
|
|
793
|
+
.magicfeedback-rating-number-extra-row {
|
|
374
794
|
display: flex;
|
|
375
|
-
|
|
795
|
+
justify-content: center;
|
|
796
|
+
margin-top: var(--mf-space-sm);
|
|
376
797
|
}
|
|
377
798
|
|
|
799
|
+
.magicfeedback-rating-number-option--extra {
|
|
800
|
+
flex: 0 1 auto;
|
|
801
|
+
}
|
|
378
802
|
|
|
379
|
-
.magicfeedback-rating-option-label-container
|
|
380
|
-
|
|
381
|
-
text-align: center;
|
|
382
|
-
margin-bottom: 0;
|
|
383
|
-
font-weight: 600;
|
|
384
|
-
font-size: 18px;
|
|
385
|
-
color: #475569;
|
|
803
|
+
.magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container {
|
|
804
|
+
width: auto;
|
|
386
805
|
}
|
|
387
806
|
|
|
388
|
-
.magicfeedback-rating-option-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
807
|
+
.magicfeedback-rating-number-option--extra .magicfeedback-rating-number-value {
|
|
808
|
+
min-height: 36px;
|
|
809
|
+
padding: 0 var(--mf-space-md);
|
|
810
|
+
border: 2px solid var(--mf-primary-border);
|
|
811
|
+
border-radius: var(--mf-radius-md);
|
|
812
|
+
background: var(--mf-bg-secondary);
|
|
813
|
+
color: var(--mf-primary);
|
|
814
|
+
font-size: var(--mf-font-size-sm);
|
|
393
815
|
}
|
|
394
816
|
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
cursor: pointer;
|
|
398
|
-
height: 48px;
|
|
399
|
-
width: 48px;
|
|
817
|
+
.magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
|
|
818
|
+
background: var(--mf-primary-light);
|
|
400
819
|
}
|
|
401
820
|
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
821
|
+
.magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value {
|
|
822
|
+
color: #fff;
|
|
823
|
+
background-color: var(--mf-primary);
|
|
824
|
+
box-shadow: var(--mf-shadow-md);
|
|
405
825
|
}
|
|
406
826
|
|
|
407
|
-
/*
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
827
|
+
/* Column: the same separated chips as row, just stacked — each option is
|
|
828
|
+
its own outlined chip with a gap between them, not one shared box. */
|
|
829
|
+
.magicfeedback-rating-number-container-column,
|
|
830
|
+
.magicfeedback-rating-number-container-column-reverse {
|
|
831
|
+
gap: var(--mf-space-sm);
|
|
411
832
|
}
|
|
412
833
|
|
|
413
|
-
.magicfeedback-rating-number
|
|
834
|
+
.magicfeedback-rating-number-option-column,
|
|
835
|
+
.magicfeedback-rating-number-option-column-reverse {
|
|
414
836
|
width: 100%;
|
|
415
837
|
}
|
|
416
|
-
.magicfeedback-rating-container,
|
|
417
|
-
.magicfeedback-rating-number-container {
|
|
418
|
-
display: flex;
|
|
419
|
-
flex-direction: row;
|
|
420
|
-
justify-content: space-between;
|
|
421
|
-
align-items: center;
|
|
422
838
|
|
|
423
|
-
|
|
424
|
-
|
|
839
|
+
.magicfeedback-rating-number-option-column .magicfeedback-rating-number-value,
|
|
840
|
+
.magicfeedback-rating-number-option-column-reverse .magicfeedback-rating-number-value {
|
|
841
|
+
justify-content: flex-start;
|
|
842
|
+
gap: var(--mf-space-sm);
|
|
843
|
+
min-height: 48px;
|
|
844
|
+
padding: var(--mf-space-sm) var(--mf-space-md);
|
|
845
|
+
border: 2px solid var(--mf-primary-border);
|
|
846
|
+
border-radius: var(--mf-radius-md);
|
|
847
|
+
background: var(--mf-bg-secondary);
|
|
848
|
+
color: var(--mf-primary);
|
|
849
|
+
}
|
|
425
850
|
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
user-select: none;
|
|
430
|
-
-webkit-user-select: none;
|
|
431
|
-
-moz-user-select: none;
|
|
432
|
-
-ms-user-select: none;
|
|
851
|
+
.magicfeedback-rating-number-option-column .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value,
|
|
852
|
+
.magicfeedback-rating-number-option-column-reverse .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
|
|
853
|
+
background: var(--mf-primary-light);
|
|
433
854
|
}
|
|
434
855
|
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
856
|
+
.magicfeedback-rating-number-option-column .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value,
|
|
857
|
+
.magicfeedback-rating-number-option-column-reverse .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value {
|
|
858
|
+
color: #fff;
|
|
859
|
+
background-color: var(--mf-primary);
|
|
860
|
+
box-shadow: var(--mf-shadow-md);
|
|
440
861
|
}
|
|
441
862
|
|
|
442
|
-
.magicfeedback-rating-number-
|
|
443
|
-
|
|
444
|
-
margin-bottom: 8px;
|
|
863
|
+
.magicfeedback-rating-number-value-num {
|
|
864
|
+
font-weight: var(--mf-font-weight-bold);
|
|
445
865
|
}
|
|
446
866
|
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
867
|
+
/* Column with per-option text: a min-width so "1".."9" and "10" line up,
|
|
868
|
+
with the label text starting at the same x. Skipped entirely when the
|
|
869
|
+
column has no per-option text at all (--bare below) — with nothing to
|
|
870
|
+
align against, the same left-shift bug from row mode would resurface. */
|
|
871
|
+
.magicfeedback-rating-number-container-column:not(.magicfeedback-rating-number-container-column--bare) .magicfeedback-rating-number-value-num,
|
|
872
|
+
.magicfeedback-rating-number-container-column-reverse:not(.magicfeedback-rating-number-container-column--bare) .magicfeedback-rating-number-value-num {
|
|
873
|
+
flex: none;
|
|
874
|
+
min-width: 1.4em;
|
|
450
875
|
}
|
|
451
876
|
|
|
452
|
-
|
|
877
|
+
/* Column, no per-option text at all (only min/max, or nothing): a bare
|
|
878
|
+
numbered list has nothing to left-align against, so center each
|
|
879
|
+
number instead of stranding it on the left with blank space beside it. */
|
|
880
|
+
.magicfeedback-rating-number-container-column--bare .magicfeedback-rating-number-value {
|
|
881
|
+
justify-content: center;
|
|
882
|
+
}
|
|
883
|
+
|
|
884
|
+
.magicfeedback-rating-number-value-label {
|
|
885
|
+
font-weight: var(--mf-font-weight-medium);
|
|
886
|
+
}
|
|
887
|
+
|
|
888
|
+
.magicfeedback-rating-number-option-column .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value,
|
|
889
|
+
.magicfeedback-rating-number-option-column-reverse .magicfeedback-rating-number-option-label-container input[type="radio"]:checked + .magicfeedback-rating-number-value {
|
|
890
|
+
color: #fff;
|
|
891
|
+
background-color: var(--mf-primary);
|
|
892
|
+
}
|
|
893
|
+
|
|
894
|
+
/* Star Rating */
|
|
895
|
+
.magicfeedback-rating-star-container {
|
|
896
|
+
justify-content: center;
|
|
897
|
+
}
|
|
898
|
+
|
|
899
|
+
.magicfeedback-rating-star-option:not(:checked) > .rating__star {
|
|
900
|
+
font-size: 40px;
|
|
901
|
+
color: var(--mf-border);
|
|
902
|
+
cursor: pointer;
|
|
903
|
+
margin: 0 var(--mf-space-xs);
|
|
904
|
+
transition: var(--mf-transition-fast);
|
|
905
|
+
}
|
|
906
|
+
|
|
907
|
+
.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,
|
|
908
|
+
.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {
|
|
909
|
+
color: #fbbf24;
|
|
910
|
+
transform: scale(1.1);
|
|
911
|
+
}
|
|
912
|
+
|
|
913
|
+
.magicfeedback-rating-star-selected {
|
|
914
|
+
color: #fbbf24 !important;
|
|
915
|
+
}
|
|
916
|
+
|
|
917
|
+
/* ========================================
|
|
918
|
+
MULTIPLE CHOICE WITH IMAGES
|
|
919
|
+
======================================== */
|
|
920
|
+
.magicfeedback-multiple-choice-image-option {
|
|
453
921
|
display: flex;
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
font-size: 1.5rem;
|
|
922
|
+
border-radius: var(--mf-radius-md);
|
|
923
|
+
overflow: hidden;
|
|
924
|
+
transition: var(--mf-transition-fast);
|
|
925
|
+
}
|
|
926
|
+
|
|
927
|
+
.magicfeedback-image-option-label-container {
|
|
461
928
|
cursor: pointer;
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
-
|
|
465
|
-
|
|
929
|
+
border-radius: var(--mf-radius-md);
|
|
930
|
+
overflow: hidden;
|
|
931
|
+
transition: var(--mf-transition-fast);
|
|
932
|
+
}
|
|
933
|
+
|
|
934
|
+
.magicfeedback-image-option-label-container input[type="radio"],
|
|
935
|
+
.magicfeedback-image-option-label-container input[type="checkbox"] {
|
|
936
|
+
position: absolute;
|
|
937
|
+
opacity: 0;
|
|
938
|
+
width: 0;
|
|
939
|
+
height: 0;
|
|
940
|
+
}
|
|
941
|
+
|
|
942
|
+
.magicfeedback-image-option-label-container img {
|
|
466
943
|
width: 100%;
|
|
944
|
+
height: auto;
|
|
945
|
+
display: block;
|
|
946
|
+
border: 2px solid var(--mf-border);
|
|
947
|
+
border-radius: var(--mf-radius-md);
|
|
948
|
+
transition: var(--mf-transition-fast);
|
|
467
949
|
}
|
|
468
950
|
|
|
469
|
-
.magicfeedback-
|
|
470
|
-
|
|
951
|
+
.magicfeedback-image-option-label-container:hover img {
|
|
952
|
+
border-color: var(--mf-primary);
|
|
953
|
+
box-shadow: var(--mf-shadow-md);
|
|
471
954
|
}
|
|
472
955
|
|
|
473
|
-
.magicfeedback-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
justify-content: center;
|
|
478
|
-
text-wrap: wrap;
|
|
956
|
+
.magicfeedback-image-option-label-container input:checked + img {
|
|
957
|
+
border-color: var(--mf-primary);
|
|
958
|
+
box-shadow: 0 0 0 3px var(--mf-primary-light);
|
|
959
|
+
}
|
|
479
960
|
|
|
480
|
-
|
|
481
|
-
|
|
961
|
+
/* ========================================
|
|
962
|
+
MATRIX QUESTIONS
|
|
963
|
+
======================================== */
|
|
964
|
+
.magicfeedback-multi-question-matrix-container {
|
|
965
|
+
width: 100%;
|
|
966
|
+
overflow-x: auto;
|
|
967
|
+
border-radius: var(--mf-radius-md);
|
|
968
|
+
}
|
|
482
969
|
|
|
970
|
+
.magicfeedback-multi-question-matrix-table {
|
|
483
971
|
width: 100%;
|
|
484
|
-
|
|
972
|
+
border-collapse: separate;
|
|
973
|
+
border-spacing: 0 var(--mf-space-xs);
|
|
485
974
|
}
|
|
486
975
|
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
976
|
+
.magicfeedback-multi-question-matrix-table th {
|
|
977
|
+
padding: var(--mf-space-md);
|
|
978
|
+
text-align: center;
|
|
979
|
+
font-size: var(--mf-font-size-sm);
|
|
980
|
+
font-weight: 500;
|
|
981
|
+
color: var(--mf-text-secondary);
|
|
982
|
+
}
|
|
493
983
|
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
}
|
|
984
|
+
.magicfeedback-multi-question-matrix-row-tr {
|
|
985
|
+
background-color: var(--mf-bg-primary);
|
|
986
|
+
border-radius: var(--mf-radius-md);
|
|
987
|
+
transition: var(--mf-transition-fast);
|
|
499
988
|
}
|
|
500
989
|
|
|
990
|
+
.magicfeedback-multi-question-matrix-row-tr:nth-child(even) {
|
|
991
|
+
background-color: var(--mf-bg-secondary);
|
|
992
|
+
}
|
|
501
993
|
|
|
502
|
-
.magicfeedback-
|
|
994
|
+
.magicfeedback-multi-question-matrix-row-tr:hover {
|
|
995
|
+
background-color: var(--mf-bg-hover);
|
|
996
|
+
box-shadow: var(--mf-shadow-sm);
|
|
997
|
+
}
|
|
998
|
+
|
|
999
|
+
.magicfeedback-multi-question-matrix-table td {
|
|
1000
|
+
padding: var(--mf-space-md);
|
|
1001
|
+
text-align: center;
|
|
1002
|
+
}
|
|
1003
|
+
|
|
1004
|
+
.magicfeedback-multi-question-matrix-label {
|
|
1005
|
+
text-align: left;
|
|
1006
|
+
font-size: var(--mf-font-size-base);
|
|
1007
|
+
color: var(--mf-text-primary);
|
|
1008
|
+
}
|
|
1009
|
+
|
|
1010
|
+
.magicfeedback-multi-question-matrix-table input[type="radio"] {
|
|
1011
|
+
width: 20px;
|
|
1012
|
+
height: 20px;
|
|
1013
|
+
cursor: pointer;
|
|
1014
|
+
accent-color: var(--mf-primary);
|
|
1015
|
+
}
|
|
1016
|
+
|
|
1017
|
+
/* ========================================
|
|
1018
|
+
PRIORITY LIST
|
|
1019
|
+
======================================== */
|
|
1020
|
+
.magicfeedback-priority-list-item {
|
|
503
1021
|
display: flex;
|
|
504
|
-
flex-direction: column;
|
|
505
1022
|
align-items: center;
|
|
506
|
-
justify-content:
|
|
507
|
-
|
|
508
|
-
|
|
1023
|
+
justify-content: space-between;
|
|
1024
|
+
padding: var(--mf-space-md);
|
|
1025
|
+
margin: var(--mf-space-sm) 0;
|
|
1026
|
+
background-color: var(--mf-bg-primary);
|
|
1027
|
+
border: 1.5px solid var(--mf-border);
|
|
1028
|
+
border-radius: var(--mf-radius-md);
|
|
1029
|
+
transition: var(--mf-transition-fast);
|
|
509
1030
|
}
|
|
510
1031
|
|
|
511
|
-
.magicfeedback-
|
|
1032
|
+
.magicfeedback-priority-list-item:hover {
|
|
1033
|
+
box-shadow: var(--mf-shadow-sm);
|
|
1034
|
+
border-color: var(--mf-primary);
|
|
1035
|
+
}
|
|
1036
|
+
|
|
1037
|
+
.magicfeedback-priority-list-item-label {
|
|
1038
|
+
flex: 1;
|
|
1039
|
+
font-size: var(--mf-font-size-base);
|
|
1040
|
+
text-align: left;
|
|
1041
|
+
color: var(--mf-text-primary);
|
|
1042
|
+
margin: 0;
|
|
1043
|
+
}
|
|
1044
|
+
|
|
1045
|
+
.magicfeedback-priority-list-arrow-up,
|
|
1046
|
+
.magicfeedback-priority-list-arrow-down {
|
|
1047
|
+
padding: var(--mf-space-xs);
|
|
1048
|
+
font-size: var(--mf-font-size-lg);
|
|
1049
|
+
color: var(--mf-text-secondary);
|
|
1050
|
+
cursor: pointer;
|
|
1051
|
+
transition: var(--mf-transition-fast);
|
|
1052
|
+
user-select: none;
|
|
1053
|
+
}
|
|
1054
|
+
|
|
1055
|
+
.magicfeedback-priority-list-arrow-up:hover,
|
|
1056
|
+
.magicfeedback-priority-list-arrow-down:hover {
|
|
1057
|
+
color: var(--mf-primary);
|
|
1058
|
+
transform: scale(1.2);
|
|
1059
|
+
}
|
|
1060
|
+
|
|
1061
|
+
/* ========================================
|
|
1062
|
+
POINT SYSTEM
|
|
1063
|
+
======================================== */
|
|
1064
|
+
.magicfeedback-point-system-item {
|
|
512
1065
|
display: flex;
|
|
513
1066
|
align-items: center;
|
|
514
|
-
justify-content:
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
1067
|
+
justify-content: space-between;
|
|
1068
|
+
padding: var(--mf-space-md);
|
|
1069
|
+
margin: var(--mf-space-sm) 0;
|
|
1070
|
+
background-color: var(--mf-bg-primary);
|
|
1071
|
+
border: 1.5px solid var(--mf-border);
|
|
1072
|
+
border-radius: var(--mf-radius-md);
|
|
1073
|
+
min-height: 45px;
|
|
1074
|
+
}
|
|
1075
|
+
|
|
1076
|
+
.magicfeedback-point-system-item label {
|
|
1077
|
+
flex: 1;
|
|
1078
|
+
font-size: var(--mf-font-size-base);
|
|
1079
|
+
color: var(--mf-text-primary);
|
|
1080
|
+
margin: 0;
|
|
1081
|
+
}
|
|
1082
|
+
|
|
1083
|
+
.magicfeedback-point-system-input-container {
|
|
1084
|
+
display: flex;
|
|
1085
|
+
align-items: center;
|
|
1086
|
+
gap: var(--mf-space-sm);
|
|
1087
|
+
}
|
|
1088
|
+
|
|
1089
|
+
.magicfeedback-point-system-item input {
|
|
1090
|
+
width: 80px;
|
|
1091
|
+
min-width: 80px;
|
|
1092
|
+
padding: var(--mf-space-sm);
|
|
526
1093
|
text-align: center;
|
|
527
|
-
|
|
528
|
-
border
|
|
529
|
-
border:
|
|
530
|
-
|
|
531
|
-
transition: background-color 0.15s ease-in-out;
|
|
1094
|
+
font-size: var(--mf-font-size-base);
|
|
1095
|
+
border: 1.5px solid var(--mf-border);
|
|
1096
|
+
border-radius: var(--mf-radius-md);
|
|
1097
|
+
margin: 0;
|
|
532
1098
|
}
|
|
533
1099
|
|
|
534
|
-
.magicfeedback-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
1100
|
+
.magicfeedback-point-system-total {
|
|
1101
|
+
display: flex;
|
|
1102
|
+
justify-content: flex-end;
|
|
1103
|
+
margin-top: var(--mf-space-md);
|
|
1104
|
+
font-size: var(--mf-font-size-base);
|
|
1105
|
+
font-weight: 600;
|
|
1106
|
+
color: var(--mf-text-primary);
|
|
1107
|
+
}
|
|
1108
|
+
|
|
1109
|
+
/* ========================================
|
|
1110
|
+
CONSENT
|
|
1111
|
+
======================================== */
|
|
1112
|
+
.magicfeedback-consent-container {
|
|
1113
|
+
display: flex;
|
|
1114
|
+
flex-direction: row;
|
|
1115
|
+
align-items: center;
|
|
1116
|
+
gap: var(--mf-space-sm);
|
|
1117
|
+
padding: var(--mf-space-md);
|
|
1118
|
+
background-color: var(--mf-bg-secondary);
|
|
1119
|
+
border-radius: var(--mf-radius-md);
|
|
1120
|
+
margin: var(--mf-space-md) 0;
|
|
1121
|
+
}
|
|
1122
|
+
|
|
1123
|
+
.magicfeedback-consent-container input[type="checkbox"] {
|
|
1124
|
+
margin-top: 2px;
|
|
1125
|
+
flex-shrink: 0;
|
|
1126
|
+
accent-color: var(--mf-primary);
|
|
539
1127
|
}
|
|
540
1128
|
|
|
541
|
-
.magicfeedback-
|
|
1129
|
+
.magicfeedback-consent-container label {
|
|
1130
|
+
flex: 1;
|
|
1131
|
+
font-size: var(--mf-font-size-sm);
|
|
1132
|
+
text-align: left;
|
|
1133
|
+
color: var(--mf-text-secondary);
|
|
1134
|
+
line-height: var(--mf-line-height);
|
|
542
1135
|
cursor: pointer;
|
|
1136
|
+
margin-bottom: 0;
|
|
543
1137
|
}
|
|
544
1138
|
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
1139
|
+
/* ========================================
|
|
1140
|
+
ACTION BUTTONS
|
|
1141
|
+
======================================== */
|
|
1142
|
+
.magicfeedback-action-container {
|
|
1143
|
+
display: flex;
|
|
1144
|
+
align-items: center;
|
|
1145
|
+
justify-content: space-between;
|
|
1146
|
+
gap: var(--mf-space-md);
|
|
1147
|
+
margin-top: var(--mf-space-xl);
|
|
1148
|
+
padding-top: var(--mf-space-lg);
|
|
1149
|
+
border-top: 1px solid var(--mf-border);
|
|
1150
|
+
}
|
|
1151
|
+
|
|
1152
|
+
.magicfeedback-submit {
|
|
1153
|
+
padding: 0.8rem 1.6rem;
|
|
1154
|
+
font-size: var(--mf-font-size-base);
|
|
1155
|
+
font-weight: 800;
|
|
1156
|
+
color: #FFFFFF;
|
|
1157
|
+
background-color: var(--mf-primary);
|
|
1158
|
+
border: 2px solid var(--mf-primary);
|
|
1159
|
+
border-radius: var(--mf-radius-full);
|
|
1160
|
+
cursor: pointer;
|
|
1161
|
+
transition: var(--mf-transition-fast);
|
|
1162
|
+
box-shadow: var(--mf-shadow-md);
|
|
550
1163
|
}
|
|
551
1164
|
|
|
552
|
-
.magicfeedback-
|
|
553
|
-
|
|
1165
|
+
.magicfeedback-submit:hover {
|
|
1166
|
+
background-color: var(--mf-primary-hover);
|
|
1167
|
+
box-shadow: var(--mf-shadow-lg);
|
|
1168
|
+
transform: translateY(-2px);
|
|
554
1169
|
}
|
|
555
1170
|
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
}
|
|
1171
|
+
.magicfeedback-submit:active {
|
|
1172
|
+
transform: translateY(0);
|
|
1173
|
+
box-shadow: var(--mf-shadow-sm);
|
|
1174
|
+
}
|
|
561
1175
|
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
1176
|
+
.magicfeedback-submit:disabled {
|
|
1177
|
+
opacity: 0.5;
|
|
1178
|
+
cursor: not-allowed;
|
|
1179
|
+
transform: none;
|
|
1180
|
+
}
|
|
566
1181
|
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
1182
|
+
.magicfeedback-back {
|
|
1183
|
+
padding: 0.65rem 1rem;
|
|
1184
|
+
font-size: var(--mf-font-size-base);
|
|
1185
|
+
font-weight: 700;
|
|
1186
|
+
color: var(--mf-primary);
|
|
1187
|
+
background-color: var(--mf-bg-secondary);
|
|
1188
|
+
border: 2px solid var(--mf-border);
|
|
1189
|
+
border-radius: var(--mf-radius-full);
|
|
1190
|
+
cursor: pointer;
|
|
1191
|
+
transition: var(--mf-transition-fast);
|
|
572
1192
|
}
|
|
573
1193
|
|
|
574
|
-
.magicfeedback-
|
|
575
|
-
|
|
1194
|
+
.magicfeedback-back:hover {
|
|
1195
|
+
border-color: var(--mf-primary);
|
|
1196
|
+
background-color: var(--mf-bg-hover);
|
|
576
1197
|
}
|
|
577
1198
|
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
1199
|
+
/* ========================================
|
|
1200
|
+
SKIP & COUNTER
|
|
1201
|
+
======================================== */
|
|
1202
|
+
.magicfeedback-skip-container {
|
|
1203
|
+
display: flex;
|
|
1204
|
+
align-items: center;
|
|
1205
|
+
gap: var(--mf-space-xs);
|
|
585
1206
|
padding: 0;
|
|
586
|
-
|
|
587
|
-
font-size:
|
|
1207
|
+
margin: 0;
|
|
1208
|
+
font-size: var(--mf-font-size-sm);
|
|
1209
|
+
color: var(--mf-text-muted);
|
|
1210
|
+
background: transparent;
|
|
1211
|
+
border: none;
|
|
588
1212
|
cursor: pointer;
|
|
589
|
-
|
|
590
|
-
-webkit-user-select: none;
|
|
591
|
-
-moz-user-select: none;
|
|
592
|
-
-ms-user-select: none;
|
|
1213
|
+
transition: var(--mf-transition-fast);
|
|
593
1214
|
}
|
|
594
1215
|
|
|
595
|
-
.magicfeedback-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
1216
|
+
.magicfeedback-skip-container:hover {
|
|
1217
|
+
color: var(--mf-primary);
|
|
1218
|
+
}
|
|
1219
|
+
|
|
1220
|
+
.magicfeedback-skip-container input[type="checkbox"] {
|
|
1221
|
+
margin: 0;
|
|
600
1222
|
cursor: pointer;
|
|
601
|
-
|
|
602
|
-
color: #ccc;
|
|
603
|
-
margin: 0 10px;
|
|
1223
|
+
accent-color: var(--mf-primary);
|
|
604
1224
|
}
|
|
605
1225
|
|
|
606
|
-
.magicfeedback-
|
|
607
|
-
|
|
608
|
-
|
|
1226
|
+
.magicfeedback-counter {
|
|
1227
|
+
display: flex;
|
|
1228
|
+
justify-content: flex-end;
|
|
1229
|
+
margin-top: var(--mf-space-md);
|
|
1230
|
+
font-size: var(--mf-font-size-sm);
|
|
1231
|
+
color: var(--mf-text-muted);
|
|
1232
|
+
}
|
|
1233
|
+
|
|
1234
|
+
/* ========================================
|
|
1235
|
+
MODAL STYLES
|
|
1236
|
+
======================================== */
|
|
1237
|
+
/* Modal backdrop */
|
|
1238
|
+
.magicfeedback-modal-backdrop {
|
|
1239
|
+
position: fixed;
|
|
1240
|
+
top: 0;
|
|
1241
|
+
left: 0;
|
|
1242
|
+
width: 100vw;
|
|
1243
|
+
height: 100vh;
|
|
1244
|
+
background: rgba(0,0,0,0.4);
|
|
1245
|
+
display: none; /* toggled to flex when open */
|
|
1246
|
+
align-items: center;
|
|
1247
|
+
justify-content: center;
|
|
1248
|
+
z-index: 9999;
|
|
609
1249
|
}
|
|
610
1250
|
|
|
611
|
-
|
|
612
|
-
|
|
1251
|
+
/* Modal container */
|
|
1252
|
+
.magicfeedback-modal {
|
|
1253
|
+
background: #fff;
|
|
1254
|
+
border-radius: 8px;
|
|
1255
|
+
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
|
|
1256
|
+
max-width: 520px;
|
|
1257
|
+
width: 90%;
|
|
1258
|
+
max-height: 80vh;
|
|
1259
|
+
/* Flex column so the options list scrolls while the actions footer
|
|
1260
|
+
(counter + confirm button) stays pinned and always visible. */
|
|
1261
|
+
display: flex;
|
|
1262
|
+
flex-direction: column;
|
|
1263
|
+
overflow: hidden;
|
|
1264
|
+
padding: 16px;
|
|
1265
|
+
position: relative;
|
|
1266
|
+
/* Portalled to document.body (see renderPriorityList.ts) to escape the
|
|
1267
|
+
host page's overflow/z-index — so it never inherits
|
|
1268
|
+
.magicfeedback-container's neutral text color and instead inherits
|
|
1269
|
+
whatever color the host page's own <body> happens to set. Needs its
|
|
1270
|
+
own explicit baseline rather than relying on that inheritance. */
|
|
1271
|
+
color: var(--mf-text-primary);
|
|
1272
|
+
}
|
|
1273
|
+
|
|
1274
|
+
/* Modal actions */
|
|
1275
|
+
.magicfeedback-modal-actions {
|
|
1276
|
+
display: flex;
|
|
1277
|
+
justify-content: flex-end;
|
|
1278
|
+
gap: 8px;
|
|
1279
|
+
margin-top: 12px;
|
|
1280
|
+
flex-shrink: 0;
|
|
613
1281
|
}
|
|
614
1282
|
|
|
1283
|
+
.magicfeedback-modal-counter {
|
|
1284
|
+
margin-right: auto;
|
|
1285
|
+
display: flex;
|
|
1286
|
+
align-items: center;
|
|
1287
|
+
font-size: 14px;
|
|
1288
|
+
color: var(--mf-text-secondary);
|
|
1289
|
+
}
|
|
615
1290
|
|
|
616
|
-
/*
|
|
617
|
-
.magicfeedback-
|
|
1291
|
+
/* Modal list */
|
|
1292
|
+
.magicfeedback-modal-list {
|
|
1293
|
+
display: flex;
|
|
1294
|
+
flex-direction: column;
|
|
1295
|
+
gap: 8px;
|
|
1296
|
+
/* Scrollable area; footer stays fixed below it. */
|
|
1297
|
+
flex: 1 1 auto;
|
|
1298
|
+
overflow-y: auto;
|
|
1299
|
+
min-height: 0;
|
|
1300
|
+
}
|
|
1301
|
+
|
|
1302
|
+
.magicfeedback-modal-row {
|
|
1303
|
+
display: flex;
|
|
1304
|
+
align-items: center;
|
|
1305
|
+
gap: 10px;
|
|
618
1306
|
cursor: pointer;
|
|
619
|
-
border: 0 !important;
|
|
620
1307
|
}
|
|
621
1308
|
|
|
622
|
-
|
|
623
|
-
.magicfeedback-
|
|
624
|
-
|
|
625
|
-
|
|
1309
|
+
/* Priority list header */
|
|
1310
|
+
.magicfeedback-priority-list-header {
|
|
1311
|
+
display: flex;
|
|
1312
|
+
align-items: center;
|
|
1313
|
+
justify-content: space-between;
|
|
1314
|
+
gap: 12px;
|
|
1315
|
+
margin-bottom: 8px;
|
|
626
1316
|
}
|
|
627
1317
|
|
|
628
|
-
.magicfeedback-
|
|
629
|
-
|
|
630
|
-
border: 1px solid transparent !important;
|
|
1318
|
+
.magicfeedback-priority-list-reorder {
|
|
1319
|
+
margin-top: 8px;
|
|
631
1320
|
}
|
|
632
1321
|
|
|
633
|
-
.magicfeedback-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
width: calc(100% - 20px) !important;
|
|
1322
|
+
.magicfeedback-priority-list-list {
|
|
1323
|
+
padding: 0;
|
|
1324
|
+
list-style: none;
|
|
637
1325
|
}
|
|
638
1326
|
|
|
639
|
-
.magicfeedback-
|
|
1327
|
+
.magicfeedback-priority-list-item {
|
|
640
1328
|
display: flex;
|
|
641
|
-
|
|
642
|
-
|
|
1329
|
+
justify-content: space-between;
|
|
1330
|
+
align-items: center;
|
|
1331
|
+
margin: 5px 0;
|
|
643
1332
|
}
|
|
644
1333
|
|
|
645
|
-
.magicfeedback-
|
|
646
|
-
font-size:
|
|
1334
|
+
.magicfeedback-priority-list-item-label {
|
|
1335
|
+
font-size: 15px;
|
|
647
1336
|
}
|
|
648
1337
|
|
|
649
|
-
.magicfeedback-
|
|
1338
|
+
.magicfeedback-priority-list-arrows {
|
|
650
1339
|
display: flex;
|
|
651
|
-
flex-direction: row;
|
|
652
|
-
justify-content: flex-start;
|
|
653
1340
|
align-items: center;
|
|
654
|
-
|
|
655
|
-
width: 100%;
|
|
1341
|
+
gap: 6px;
|
|
656
1342
|
}
|
|
657
1343
|
|
|
658
|
-
|
|
659
|
-
|
|
1344
|
+
/* Buttons */
|
|
1345
|
+
.magicfeedback-button {
|
|
1346
|
+
appearance: none;
|
|
1347
|
+
border: 2px solid var(--mf-border);
|
|
1348
|
+
border-radius: var(--mf-radius-full);
|
|
1349
|
+
background: var(--mf-bg-secondary);
|
|
1350
|
+
color: var(--mf-text-primary);
|
|
1351
|
+
padding: 0.6rem 1rem;
|
|
1352
|
+
font-size: 14px;
|
|
1353
|
+
font-weight: 700;
|
|
1354
|
+
cursor: pointer;
|
|
1355
|
+
box-shadow: var(--mf-shadow-sm);
|
|
660
1356
|
}
|
|
661
1357
|
|
|
662
|
-
.magicfeedback-
|
|
663
|
-
|
|
1358
|
+
.magicfeedback-button:hover {
|
|
1359
|
+
background: var(--mf-bg-hover);
|
|
1360
|
+
border-color: var(--mf-primary);
|
|
664
1361
|
}
|
|
665
1362
|
|
|
666
|
-
.magicfeedback-
|
|
667
|
-
|
|
668
|
-
.magicfeedback-start-message {
|
|
669
|
-
margin: 35px 5px;
|
|
1363
|
+
.magicfeedback-button:active {
|
|
1364
|
+
transform: translateY(1px);
|
|
670
1365
|
}
|
|
671
1366
|
|
|
672
|
-
.magicfeedback-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
font-weight: 400;
|
|
678
|
-
font-size: 16px;
|
|
679
|
-
color: #475569;
|
|
680
|
-
line-height: 1.5;
|
|
1367
|
+
.magicfeedback-button-primary {
|
|
1368
|
+
border-color: var(--mf-primary);
|
|
1369
|
+
background: var(--mf-primary);
|
|
1370
|
+
color: #fff;
|
|
1371
|
+
box-shadow: var(--mf-shadow-md);
|
|
681
1372
|
}
|
|
682
1373
|
|
|
683
|
-
.magicfeedback-
|
|
684
|
-
|
|
685
|
-
.magicfeedback-start-message img {
|
|
686
|
-
width: 400px;
|
|
687
|
-
max-width: 80%;
|
|
688
|
-
height: auto;
|
|
689
|
-
margin: 10px auto;
|
|
1374
|
+
.magicfeedback-button-primary:hover {
|
|
1375
|
+
background: var(--mf-primary-hover);
|
|
690
1376
|
}
|
|
691
1377
|
|
|
692
|
-
.magicfeedback-
|
|
693
|
-
|
|
694
|
-
margin: 10px 0 0 0 !important;
|
|
695
|
-
display: flex !important;
|
|
696
|
-
justify-content: right !important;
|
|
697
|
-
align-items: center !important;
|
|
698
|
-
width: 100%;
|
|
1378
|
+
.magicfeedback-button-primary:active {
|
|
1379
|
+
background: var(--mf-primary-hover);
|
|
699
1380
|
}
|
|
700
1381
|
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
color: #999999FF !important;
|
|
705
|
-
padding: 0 !important;
|
|
706
|
-
margin: 0 !important;
|
|
707
|
-
cursor: pointer !important;
|
|
708
|
-
font-size: 0.5em !important;
|
|
709
|
-
font-weight: 400 !important;
|
|
710
|
-
box-shadow: 0 0 0 !important;
|
|
711
|
-
|
|
712
|
-
&:hover {
|
|
713
|
-
color: #0066ff;
|
|
714
|
-
}
|
|
1382
|
+
/* Warning flash */
|
|
1383
|
+
.magicfeedback-warning {
|
|
1384
|
+
color: #C70039;
|
|
715
1385
|
}
|
|
716
1386
|
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
1387
|
+
/* Start message button */
|
|
1388
|
+
.magicfeedback-start-message-button {
|
|
1389
|
+
appearance: none;
|
|
1390
|
+
border: 2px solid var(--mf-primary);
|
|
1391
|
+
border-radius: var(--mf-radius-full);
|
|
1392
|
+
background: var(--mf-primary);
|
|
1393
|
+
color: #fff;
|
|
1394
|
+
padding: 0.8rem 1.4rem;
|
|
1395
|
+
font-size: 15px;
|
|
1396
|
+
font-weight: 800;
|
|
1397
|
+
cursor: pointer;
|
|
1398
|
+
box-shadow: var(--mf-shadow-md);
|
|
1399
|
+
}
|
|
721
1400
|
|
|
1401
|
+
.magicfeedback-start-message-button:hover {
|
|
1402
|
+
background: var(--mf-primary-hover);
|
|
722
1403
|
}
|
|
723
1404
|
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
1405
|
+
/* ========================================
|
|
1406
|
+
RESPONSIVE DESIGN
|
|
1407
|
+
======================================== */
|
|
1408
|
+
@media (max-width: 768px) {
|
|
1409
|
+
:root {
|
|
1410
|
+
--mf-space-lg: 1.25rem;
|
|
1411
|
+
--mf-space-xl: 1.5rem;
|
|
1412
|
+
}
|
|
1413
|
+
|
|
1414
|
+
.magicfeedback-container {
|
|
1415
|
+
padding: 12px;
|
|
1416
|
+
border-radius: var(--mf-radius-md);
|
|
1417
|
+
}
|
|
1418
|
+
|
|
1419
|
+
.magicfeedback-form {
|
|
1420
|
+
padding: 14px;
|
|
1421
|
+
border-radius: var(--mf-radius-md);
|
|
1422
|
+
}
|
|
1423
|
+
|
|
1424
|
+
.magicfeedback-div {
|
|
1425
|
+
padding: 12px;
|
|
1426
|
+
gap: var(--mf-space-lg)
|
|
1427
|
+
}
|
|
1428
|
+
|
|
1429
|
+
.magicfeedback-label {
|
|
1430
|
+
font-size: var(--mf-font-size-base);
|
|
1431
|
+
}
|
|
1432
|
+
|
|
1433
|
+
.deepdots-popup input[type="date"],
|
|
1434
|
+
.deepdots-popup input[type="text"],
|
|
1435
|
+
.deepdots-popup input[type="number"],
|
|
1436
|
+
.deepdots-popup input[type="email"],
|
|
1437
|
+
.deepdots-popup input[type="password"],
|
|
1438
|
+
.deepdots-popup textarea,
|
|
1439
|
+
.deepdots-popup select {
|
|
1440
|
+
padding: 0.85rem 0.95rem;
|
|
1441
|
+
font-size: 1rem;
|
|
1442
|
+
min-height: 46px;
|
|
1443
|
+
}
|
|
1444
|
+
|
|
1445
|
+
/*
|
|
1446
|
+
.magicfeedback-radio-container,
|
|
1447
|
+
.magicfeedback-checkbox-container,
|
|
1448
|
+
.magicfeedback-boolean-container,
|
|
1449
|
+
.magicfeedback-consent-container {
|
|
1450
|
+
width: 100%;
|
|
1451
|
+
}
|
|
1452
|
+
*/
|
|
1453
|
+
|
|
1454
|
+
.magicfeedback-radio-container,
|
|
1455
|
+
.magicfeedback-checkbox-container {
|
|
1456
|
+
padding: 10px 12px;
|
|
1457
|
+
border-radius: var(--mf-radius-md);
|
|
1458
|
+
border: 1px solid var(--mf-border);
|
|
1459
|
+
gap: 10px;
|
|
1460
|
+
}
|
|
1461
|
+
|
|
1462
|
+
.magicfeedback-rating-container,
|
|
1463
|
+
.magicfeedback-rating-number-container,
|
|
1464
|
+
.magicfeedback-rating-star-container {
|
|
1465
|
+
gap: 10px;
|
|
1466
|
+
}
|
|
1467
|
+
|
|
1468
|
+
.magicfeedback-boolean-container {
|
|
1469
|
+
flex-direction: column;
|
|
1470
|
+
gap: 10px;
|
|
1471
|
+
}
|
|
1472
|
+
|
|
1473
|
+
.magicfeedback-rating-number-container-row,
|
|
1474
|
+
.magicfeedback-rating-number-container-row-reverse {
|
|
1475
|
+
gap: 6px;
|
|
1476
|
+
}
|
|
1477
|
+
|
|
1478
|
+
.magicfeedback-rating-number-option-row .magicfeedback-rating-number-value,
|
|
1479
|
+
.magicfeedback-rating-number-option-row-reverse .magicfeedback-rating-number-value {
|
|
1480
|
+
min-height: 44px;
|
|
1481
|
+
padding: var(--mf-space-xs);
|
|
1482
|
+
font-size: 0.9rem;
|
|
1483
|
+
}
|
|
1484
|
+
|
|
1485
|
+
.magicfeedback-action-container {
|
|
1486
|
+
flex-direction: column-reverse;
|
|
1487
|
+
}
|
|
1488
|
+
|
|
1489
|
+
.magicfeedback-submit,
|
|
1490
|
+
.magicfeedback-back {
|
|
1491
|
+
width: 100%;
|
|
1492
|
+
text-align: center;
|
|
1493
|
+
min-height: 48px;
|
|
1494
|
+
}
|
|
728
1495
|
}
|
|
729
1496
|
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
1497
|
+
/* ========================================
|
|
1498
|
+
ACCESSIBILITY
|
|
1499
|
+
======================================== */
|
|
1500
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1501
|
+
*,
|
|
1502
|
+
*::before,
|
|
1503
|
+
*::after {
|
|
1504
|
+
animation-duration: 0.01ms !important;
|
|
1505
|
+
animation-iteration-count: 1 !important;
|
|
1506
|
+
transition-duration: 0.01ms !important;
|
|
1507
|
+
}
|
|
735
1508
|
}
|
|
736
1509
|
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
1510
|
+
|
|
1511
|
+
/* ========================================
|
|
1512
|
+
UTILITY CLASSES
|
|
1513
|
+
======================================== */
|
|
1514
|
+
.magicfeedback-visually-hidden {
|
|
1515
|
+
position: absolute;
|
|
1516
|
+
width: 1px;
|
|
1517
|
+
height: 1px;
|
|
1518
|
+
padding: 0;
|
|
1519
|
+
margin: -1px;
|
|
1520
|
+
overflow: hidden;
|
|
1521
|
+
clip: rect(0, 0, 0, 0);
|
|
1522
|
+
white-space: nowrap;
|
|
1523
|
+
border-width: 0;
|
|
743
1524
|
}
|
|
744
1525
|
|
|
745
|
-
.magicfeedback-
|
|
746
|
-
position:
|
|
1526
|
+
.magicfeedback-modal-close {
|
|
1527
|
+
position: absolute;
|
|
1528
|
+
top: 8px;
|
|
1529
|
+
right: 8px;
|
|
1530
|
+
background: transparent;
|
|
1531
|
+
border: none;
|
|
1532
|
+
font-size: 20px;
|
|
1533
|
+
line-height: 1;
|
|
1534
|
+
cursor: pointer;
|
|
1535
|
+
color: #666;
|
|
747
1536
|
}
|
|
748
1537
|
|
|
749
|
-
.magicfeedback-
|
|
750
|
-
|
|
751
|
-
|
|
1538
|
+
.magicfeedback-modal-close:hover,
|
|
1539
|
+
.magicfeedback-modal-close:focus {
|
|
1540
|
+
color: #000;
|
|
1541
|
+
outline: none;
|
|
752
1542
|
}
|
|
753
1543
|
|
|
754
|
-
|
|
755
|
-
|
|
1544
|
+
/* ========================================
|
|
1545
|
+
FILE / IMAGE UPLOAD
|
|
1546
|
+
======================================== */
|
|
1547
|
+
.magicfeedback-upload {
|
|
1548
|
+
display: flex;
|
|
1549
|
+
flex-direction: column;
|
|
1550
|
+
gap: var(--mf-space-md);
|
|
1551
|
+
width: 100%;
|
|
1552
|
+
margin: 10px 0;
|
|
756
1553
|
}
|
|
757
|
-
|
|
1554
|
+
|
|
1555
|
+
/* The native input is an invisible, focusable overlay covering the dropzone. */
|
|
1556
|
+
.magicfeedback-upload-native {
|
|
1557
|
+
position: absolute;
|
|
1558
|
+
inset: 0;
|
|
1559
|
+
width: 100%;
|
|
1560
|
+
height: 100%;
|
|
1561
|
+
margin: 0;
|
|
1562
|
+
padding: 0;
|
|
1563
|
+
opacity: 0;
|
|
1564
|
+
cursor: pointer;
|
|
1565
|
+
z-index: 2;
|
|
1566
|
+
}
|
|
1567
|
+
|
|
1568
|
+
.magicfeedback-upload-dropzone {
|
|
1569
|
+
position: relative;
|
|
758
1570
|
display: flex;
|
|
759
|
-
flex-direction:
|
|
760
|
-
justify-content: space-between;
|
|
1571
|
+
flex-direction: column;
|
|
761
1572
|
align-items: center;
|
|
762
|
-
|
|
1573
|
+
justify-content: center;
|
|
1574
|
+
gap: var(--mf-space-sm);
|
|
1575
|
+
box-sizing: border-box;
|
|
1576
|
+
width: 100%;
|
|
1577
|
+
min-height: 150px;
|
|
1578
|
+
padding: var(--mf-space-xl);
|
|
1579
|
+
text-align: center;
|
|
1580
|
+
border: 2px dashed var(--mf-border);
|
|
1581
|
+
border-radius: var(--mf-radius-md);
|
|
1582
|
+
background-color: var(--mf-surface-alt);
|
|
1583
|
+
cursor: pointer;
|
|
1584
|
+
transition: var(--mf-transition);
|
|
1585
|
+
}
|
|
763
1586
|
|
|
764
|
-
|
|
765
|
-
border-
|
|
766
|
-
|
|
1587
|
+
.magicfeedback-upload-dropzone:hover {
|
|
1588
|
+
border-color: var(--mf-primary);
|
|
1589
|
+
background-color: var(--mf-bg-hover);
|
|
767
1590
|
}
|
|
768
1591
|
|
|
769
|
-
.magicfeedback-
|
|
770
|
-
|
|
771
|
-
|
|
1592
|
+
.magicfeedback-upload-dropzone:focus-within {
|
|
1593
|
+
border-color: var(--mf-primary);
|
|
1594
|
+
box-shadow: var(--mf-shadow-focus);
|
|
772
1595
|
}
|
|
773
1596
|
|
|
774
|
-
.magicfeedback-
|
|
775
|
-
|
|
1597
|
+
.magicfeedback-upload-dropzone.is-dragover {
|
|
1598
|
+
border-color: var(--mf-primary);
|
|
1599
|
+
border-style: solid;
|
|
1600
|
+
background-color: var(--mf-primary-light);
|
|
1601
|
+
box-shadow: var(--mf-shadow-focus);
|
|
1602
|
+
}
|
|
1603
|
+
|
|
1604
|
+
.magicfeedback-upload-icon {
|
|
1605
|
+
display: inline-flex;
|
|
1606
|
+
align-items: center;
|
|
1607
|
+
justify-content: center;
|
|
1608
|
+
width: 46px;
|
|
1609
|
+
height: 46px;
|
|
1610
|
+
color: var(--mf-primary);
|
|
1611
|
+
background-color: var(--mf-surface);
|
|
1612
|
+
border-radius: var(--mf-radius-full);
|
|
1613
|
+
box-shadow: var(--mf-shadow-sm);
|
|
1614
|
+
pointer-events: none;
|
|
1615
|
+
}
|
|
1616
|
+
|
|
1617
|
+
.magicfeedback-upload-icon svg {
|
|
1618
|
+
width: 24px;
|
|
1619
|
+
height: 24px;
|
|
1620
|
+
}
|
|
1621
|
+
|
|
1622
|
+
.magicfeedback-upload-cta {
|
|
776
1623
|
font-family: inherit;
|
|
777
|
-
font-
|
|
778
|
-
|
|
779
|
-
text-
|
|
780
|
-
|
|
781
|
-
white-space: normal;
|
|
782
|
-
padding: 0 10px 0 0;
|
|
1624
|
+
font-weight: var(--mf-font-weight-semibold);
|
|
1625
|
+
font-size: var(--mf-font-size-base);
|
|
1626
|
+
color: var(--mf-text-primary);
|
|
1627
|
+
pointer-events: none;
|
|
783
1628
|
}
|
|
784
1629
|
|
|
785
|
-
.magicfeedback-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
height: 42px;
|
|
791
|
-
margin: auto 0;
|
|
1630
|
+
.magicfeedback-upload-hint {
|
|
1631
|
+
font-family: inherit;
|
|
1632
|
+
font-size: var(--mf-font-size-sm);
|
|
1633
|
+
color: var(--mf-text-muted);
|
|
1634
|
+
pointer-events: none;
|
|
792
1635
|
}
|
|
793
1636
|
|
|
794
|
-
.magicfeedback-
|
|
795
|
-
|
|
1637
|
+
.magicfeedback-upload-list {
|
|
1638
|
+
display: flex;
|
|
1639
|
+
flex-direction: column;
|
|
1640
|
+
gap: var(--mf-space-sm);
|
|
1641
|
+
width: 100%;
|
|
1642
|
+
margin: 0;
|
|
1643
|
+
padding: 0;
|
|
1644
|
+
list-style: none;
|
|
796
1645
|
}
|
|
797
1646
|
|
|
798
|
-
.magicfeedback-
|
|
799
|
-
|
|
800
|
-
font-weight: 400 !important;
|
|
801
|
-
font-size: 1rem !important;
|
|
802
|
-
padding: 0 10px !important;
|
|
1647
|
+
.magicfeedback-upload-list:empty {
|
|
1648
|
+
display: none;
|
|
803
1649
|
}
|
|
804
1650
|
|
|
805
|
-
.magicfeedback-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
line-height: inherit;
|
|
1651
|
+
.magicfeedback-upload-file-item {
|
|
1652
|
+
display: flex;
|
|
1653
|
+
align-items: center;
|
|
1654
|
+
gap: var(--mf-space-md);
|
|
1655
|
+
padding: var(--mf-space-sm) var(--mf-space-md);
|
|
1656
|
+
background-color: var(--mf-surface);
|
|
1657
|
+
border: 1px solid var(--mf-border);
|
|
1658
|
+
border-radius: var(--mf-radius-sm);
|
|
1659
|
+
box-shadow: var(--mf-shadow-sm);
|
|
1660
|
+
animation: mf-scale-in 0.2s ease-out;
|
|
816
1661
|
}
|
|
817
1662
|
|
|
818
|
-
.magicfeedback-
|
|
1663
|
+
.magicfeedback-upload-thumb {
|
|
1664
|
+
flex: 0 0 auto;
|
|
1665
|
+
display: inline-flex;
|
|
819
1666
|
align-items: center;
|
|
820
|
-
|
|
1667
|
+
justify-content: center;
|
|
1668
|
+
width: 40px;
|
|
1669
|
+
height: 40px;
|
|
1670
|
+
overflow: hidden;
|
|
1671
|
+
color: var(--mf-text-secondary);
|
|
1672
|
+
background-color: var(--mf-surface-alt);
|
|
1673
|
+
border-radius: var(--mf-radius-sm);
|
|
821
1674
|
}
|
|
822
1675
|
|
|
823
|
-
.magicfeedback-
|
|
824
|
-
|
|
825
|
-
|
|
1676
|
+
.magicfeedback-upload-thumb img {
|
|
1677
|
+
width: 100%;
|
|
1678
|
+
height: 100%;
|
|
1679
|
+
object-fit: cover;
|
|
826
1680
|
}
|
|
827
1681
|
|
|
828
|
-
.magicfeedback-
|
|
829
|
-
|
|
1682
|
+
.magicfeedback-upload-thumb svg {
|
|
1683
|
+
width: 20px;
|
|
1684
|
+
height: 20px;
|
|
830
1685
|
}
|
|
831
1686
|
|
|
832
|
-
.magicfeedback-
|
|
833
|
-
|
|
1687
|
+
.magicfeedback-upload-file-info {
|
|
1688
|
+
display: flex;
|
|
1689
|
+
flex-direction: column;
|
|
1690
|
+
flex: 1 1 auto;
|
|
1691
|
+
min-width: 0;
|
|
1692
|
+
text-align: start;
|
|
834
1693
|
}
|
|
835
1694
|
|
|
836
|
-
.magicfeedback-
|
|
837
|
-
|
|
1695
|
+
.magicfeedback-upload-file-name {
|
|
1696
|
+
font-family: inherit;
|
|
1697
|
+
font-size: var(--mf-font-size-sm);
|
|
1698
|
+
font-weight: var(--mf-font-weight-semibold);
|
|
1699
|
+
color: var(--mf-text-primary);
|
|
1700
|
+
white-space: nowrap;
|
|
1701
|
+
overflow: hidden;
|
|
1702
|
+
text-overflow: ellipsis;
|
|
838
1703
|
}
|
|
839
1704
|
|
|
840
|
-
.magicfeedback-
|
|
841
|
-
|
|
1705
|
+
.magicfeedback-upload-file-size {
|
|
1706
|
+
font-family: inherit;
|
|
1707
|
+
font-size: 0.75rem;
|
|
1708
|
+
color: var(--mf-text-muted);
|
|
842
1709
|
}
|
|
843
1710
|
|
|
844
|
-
.magicfeedback-
|
|
1711
|
+
.magicfeedback-upload-remove {
|
|
1712
|
+
flex: 0 0 auto;
|
|
1713
|
+
display: inline-flex;
|
|
1714
|
+
align-items: center;
|
|
1715
|
+
justify-content: center;
|
|
1716
|
+
width: 30px;
|
|
1717
|
+
height: 30px;
|
|
845
1718
|
padding: 0;
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
min-height: 42px;
|
|
1719
|
+
color: var(--mf-text-muted);
|
|
1720
|
+
background-color: transparent;
|
|
1721
|
+
border: none;
|
|
1722
|
+
border-radius: var(--mf-radius-full);
|
|
851
1723
|
cursor: pointer;
|
|
852
|
-
|
|
853
|
-
text-align: center !important;
|
|
1724
|
+
transition: var(--mf-transition-fast);
|
|
854
1725
|
}
|
|
855
1726
|
|
|
856
|
-
.magicfeedback-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
1727
|
+
.magicfeedback-upload-remove:hover,
|
|
1728
|
+
.magicfeedback-upload-remove:focus-visible {
|
|
1729
|
+
color: var(--mf-error);
|
|
1730
|
+
background-color: var(--mf-primary-light);
|
|
1731
|
+
outline: none;
|
|
1732
|
+
}
|
|
1733
|
+
|
|
1734
|
+
.magicfeedback-upload-remove svg {
|
|
1735
|
+
width: 16px;
|
|
1736
|
+
height: 16px;
|
|
1737
|
+
}
|
|
1738
|
+
|
|
1739
|
+
.magicfeedback-upload-error {
|
|
1740
|
+
display: none;
|
|
1741
|
+
font-family: inherit;
|
|
1742
|
+
font-size: var(--mf-font-size-sm);
|
|
1743
|
+
color: var(--mf-error);
|
|
863
1744
|
}
|
|
864
1745
|
|
|
865
|
-
.magicfeedback-
|
|
866
|
-
|
|
867
|
-
height: auto !important;
|
|
868
|
-
max-width: 100% !important;
|
|
869
|
-
margin: 10px auto !important;
|
|
1746
|
+
.magicfeedback-upload-error.is-visible {
|
|
1747
|
+
display: block;
|
|
870
1748
|
}
|
|
871
1749
|
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
1750
|
+
/* ========================================
|
|
1751
|
+
LOCAL — reglas del popup, no vienen del paquete
|
|
1752
|
+
======================================== */
|
|
1753
|
+
|
|
1754
|
+
/* Los controles de formulario no heredan font-family: cuando el popup trae fuente propia
|
|
1755
|
+
(clase deepdots-has-font), se les fuerza la del contenedor. */
|
|
1756
|
+
.deepdots-popup.deepdots-has-font button,
|
|
1757
|
+
.deepdots-popup.deepdots-has-font input,
|
|
1758
|
+
.deepdots-popup.deepdots-has-font textarea,
|
|
1759
|
+
.deepdots-popup.deepdots-has-font select {
|
|
1760
|
+
font-family: var(--deepdots-font, inherit);
|
|
1761
|
+
}
|
|
1762
|
+
|
|
1763
|
+
/* WebKit sí aplica el padding al radio nativo: con padding el control se dibuja enorme (se vio
|
|
1764
|
+
en iOS, WebView de RN y Safari, no en Chrome). El paquete ya no lo pone, pero la regla es
|
|
1765
|
+
barata y evita que vuelva. */
|
|
1766
|
+
.deepdots-popup input[type="radio"] {
|
|
1767
|
+
padding: 0;
|
|
1768
|
+
}
|