@magicfeedback/popup-sdk 1.4.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 +1496 -595
- 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.d.mts +55 -3
- package/dist/index.d.ts +55 -3
- package/dist/index.js +3418 -617
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +226 -53
- package/dist/index.mjs.map +1 -1
- package/dist/react-native.d.mts +35 -2
- package/dist/react-native.d.ts +35 -2
- package/dist/react-native.js +2229 -140
- package/dist/react-native.js.map +1 -1
- package/dist/react-native.mjs +226 -53
- package/dist/react-native.mjs.map +1 -1
- package/dist/{renderPopup-TCKR5Z3P.mjs → renderPopup-M6MKTDEH.mjs} +1423 -570
- package/dist/renderPopup-M6MKTDEH.mjs.map +1 -0
- package/dist/{renderPopup-UYMGEBSI.mjs → renderPopup-SELXQ3UE.mjs} +232 -91
- package/dist/renderPopup-SELXQ3UE.mjs.map +1 -0
- package/package.json +2 -2
- package/dist/chunk-R4B3K2ZW.mjs +0 -176
- package/dist/chunk-R4B3K2ZW.mjs.map +0 -1
- package/dist/chunk-XFA2Y6CK.mjs +0 -197
- package/dist/chunk-XFA2Y6CK.mjs.map +0 -1
- package/dist/renderPopup-TCKR5Z3P.mjs.map +0 -1
- package/dist/renderPopup-UYMGEBSI.mjs.map +0 -1
|
@@ -1,167 +1,397 @@
|
|
|
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
|
+
}
|
|
3
123
|
}
|
|
4
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
|
+
}
|
|
5
135
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
.
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
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
|
+
}
|
|
14
146
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
147
|
+
@keyframes mf-pulse {
|
|
148
|
+
0%,
|
|
149
|
+
100% {
|
|
150
|
+
opacity: 1;
|
|
151
|
+
}
|
|
152
|
+
50% {
|
|
153
|
+
opacity: 0.8;
|
|
154
|
+
}
|
|
21
155
|
}
|
|
22
156
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
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);
|
|
26
167
|
}
|
|
27
168
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
169
|
+
/* ========================================
|
|
170
|
+
MESSAGES
|
|
171
|
+
======================================== */
|
|
172
|
+
.magicfeedback-success-message,
|
|
173
|
+
.magicfeedback-info-message,
|
|
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;
|
|
34
197
|
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
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;
|
|
41
298
|
}
|
|
42
299
|
|
|
43
|
-
.magicfeedback-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
align-items: flex-start;
|
|
48
|
-
margin-bottom: 10px;
|
|
49
|
-
width: 100%;
|
|
300
|
+
.magicfeedback-info-message pre code,
|
|
301
|
+
.magicfeedback-start-message pre code {
|
|
302
|
+
background: none;
|
|
303
|
+
padding: 0;
|
|
50
304
|
}
|
|
51
305
|
|
|
52
|
-
.magicfeedback-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
color: #212529;
|
|
59
|
-
text-align: start;
|
|
60
|
-
word-wrap: break-word;
|
|
61
|
-
white-space: normal;
|
|
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
|
+
}
|
|
62
312
|
|
|
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);
|
|
63
321
|
}
|
|
64
322
|
|
|
65
|
-
.magicfeedback-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
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);
|
|
70
330
|
}
|
|
71
331
|
|
|
72
|
-
|
|
332
|
+
/* ========================================
|
|
333
|
+
FORM STRUCTURE
|
|
334
|
+
======================================== */
|
|
335
|
+
.magicfeedback-form {
|
|
73
336
|
display: flex;
|
|
74
|
-
flex-direction:
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
margin-bottom: 5px;
|
|
78
|
-
margin-top: 5px;
|
|
337
|
+
flex-direction: column;
|
|
338
|
+
gap: var(--mf-space-lg);
|
|
339
|
+
padding: clamp(16px, 2.5vw, 28px);
|
|
79
340
|
}
|
|
80
341
|
|
|
81
|
-
|
|
82
|
-
también en el <input> de cada opción (rating), y sin el tag este selector lo capturaba
|
|
83
|
-
también, rompiendo su tamaño (el input pasaba a display:flex; width:100%). */
|
|
84
|
-
div.magicfeedback-radio {
|
|
342
|
+
.magicfeedback-questions {
|
|
85
343
|
display: flex;
|
|
86
344
|
flex-direction: column;
|
|
87
|
-
|
|
88
|
-
flex-wrap: wrap;
|
|
345
|
+
gap: var(--mf-space-xl);
|
|
89
346
|
width: 100%;
|
|
90
|
-
margin-right: 5px;
|
|
91
|
-
padding: 5px;
|
|
92
|
-
box-sizing: border-box;
|
|
93
347
|
}
|
|
94
348
|
|
|
95
|
-
.magicfeedback-
|
|
96
|
-
.magicfeedback-radio-container {
|
|
349
|
+
.magicfeedback-div {
|
|
97
350
|
display: flex;
|
|
98
|
-
flex-direction:
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
background-color: #fff;
|
|
104
|
-
border-radius: 5px;
|
|
105
|
-
box-shadow: 0 0 3px #ccc;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.deepdots-popup input::-webkit-outer-spin-button,
|
|
109
|
-
.deepdots-popup input::-webkit-inner-spin-button {
|
|
110
|
-
-webkit-appearance: none;
|
|
111
|
-
-moz-appearance: textfield;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.magicfeedback-checkbox input[type="checkbox"] {
|
|
115
|
-
margin-right: 5px;
|
|
116
|
-
margin-left: 5px;
|
|
117
|
-
width: 20px;
|
|
118
|
-
height: 20px;
|
|
119
|
-
cursor: pointer;
|
|
351
|
+
flex-direction: column;
|
|
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);
|
|
120
356
|
}
|
|
121
357
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
font-
|
|
127
|
-
font-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
text-align:
|
|
131
|
-
|
|
358
|
+
/* ========================================
|
|
359
|
+
LABELS & TYPOGRAPHY
|
|
360
|
+
======================================== */
|
|
361
|
+
.magicfeedback-label {
|
|
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;
|
|
132
368
|
}
|
|
133
369
|
|
|
134
|
-
.
|
|
135
|
-
|
|
136
|
-
font-
|
|
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);
|
|
137
375
|
}
|
|
138
376
|
|
|
139
377
|
.deepdots-popup h2 {
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
color: #222;
|
|
145
|
-
font-family: var(--deepdots-font, 'Montserrat');
|
|
146
|
-
font-size: 18px;
|
|
147
|
-
text-transform: uppercase;
|
|
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;
|
|
148
382
|
text-align: center;
|
|
149
|
-
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
/* Los controles de formulario no heredan font-family por defecto: cuando hay
|
|
153
|
-
fuente custom (clase deepdots-has-font), los forzamos a usar la del contenedor. */
|
|
154
|
-
.deepdots-popup.deepdots-has-font button,
|
|
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);
|
|
383
|
+
letter-spacing: -0.01em;
|
|
159
384
|
}
|
|
160
385
|
|
|
161
|
-
.deepdots-popup
|
|
162
|
-
margin
|
|
386
|
+
.deepdots-popup p {
|
|
387
|
+
margin: 0;
|
|
388
|
+
font-size: var(--mf-font-size-sm);
|
|
389
|
+
color: var(--mf-text-secondary);
|
|
163
390
|
}
|
|
164
391
|
|
|
392
|
+
/* ========================================
|
|
393
|
+
FORM INPUTS
|
|
394
|
+
======================================== */
|
|
165
395
|
.deepdots-popup input[type="date"],
|
|
166
396
|
.deepdots-popup input[type="text"],
|
|
167
397
|
.deepdots-popup input[type="number"],
|
|
@@ -169,699 +399,1370 @@ div.magicfeedback-radio {
|
|
|
169
399
|
.deepdots-popup input[type="password"],
|
|
170
400
|
.deepdots-popup textarea,
|
|
171
401
|
.deepdots-popup select {
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
margin: 10px 0;
|
|
175
|
-
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;
|
|
402
|
+
padding: 0.75rem 0.9rem;
|
|
403
|
+
font-size: var(--mf-font-size-base);
|
|
182
404
|
font-family: inherit;
|
|
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);
|
|
183
411
|
-webkit-appearance: none;
|
|
412
|
+
appearance: none;
|
|
413
|
+
box-shadow: var(--mf-shadow-sm);
|
|
184
414
|
}
|
|
185
415
|
|
|
186
|
-
.deepdots-popup
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
linear-gradient(to right, #ccc, #ccc);
|
|
190
|
-
background-position: calc(100% - 20px) calc(1em + 2px),
|
|
191
|
-
calc(100% - 15px) calc(1em + 2px),
|
|
192
|
-
calc(100% - 2.5em) 0.5em;
|
|
193
|
-
background-size: 5px 5px,
|
|
194
|
-
5px 5px,
|
|
195
|
-
1px 1.5em;
|
|
196
|
-
background-repeat: no-repeat;
|
|
416
|
+
.deepdots-popup textarea {
|
|
417
|
+
min-height: 100px;
|
|
418
|
+
resize: vertical;
|
|
197
419
|
}
|
|
198
420
|
|
|
199
|
-
.
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
justify-content: flex-start;
|
|
203
|
-
align-items: center;
|
|
204
|
-
margin: 10px 0;
|
|
205
|
-
width: 100%;
|
|
421
|
+
.deepdots-popup input::placeholder,
|
|
422
|
+
.deepdots-popup textarea::placeholder {
|
|
423
|
+
color: var(--mf-text-muted);
|
|
206
424
|
}
|
|
207
425
|
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
padding-top: 5px;
|
|
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;
|
|
214
431
|
}
|
|
215
432
|
|
|
216
|
-
.
|
|
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;
|
|
433
|
+
.deepdots-popup input[type="number"] {
|
|
434
|
+
/* -moz-appearance: textfield; removed for lint compatibility */
|
|
225
435
|
}
|
|
226
436
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
height: 100%;
|
|
234
|
-
display: flex;
|
|
235
|
-
justify-content: center;
|
|
236
|
-
align-items: center;
|
|
237
|
-
border-radius: inherit;
|
|
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);
|
|
238
443
|
}
|
|
239
444
|
|
|
240
|
-
|
|
241
|
-
|
|
445
|
+
/* Error State */
|
|
446
|
+
.deepdots-popup input.error,
|
|
447
|
+
.deepdots-popup select.error,
|
|
448
|
+
.deepdots-popup textarea.error {
|
|
449
|
+
border-color: var(--mf-error);
|
|
242
450
|
}
|
|
243
451
|
|
|
244
|
-
.magicfeedback-
|
|
245
|
-
|
|
246
|
-
|
|
452
|
+
.magicfeedback-error {
|
|
453
|
+
margin-top: var(--mf-space-xs);
|
|
454
|
+
font-size: var(--mf-font-size-sm);
|
|
455
|
+
color: var(--mf-error);
|
|
247
456
|
}
|
|
248
457
|
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
458
|
+
/* ========================================
|
|
459
|
+
CHECKBOX & RADIO OPTIONS
|
|
460
|
+
======================================== */
|
|
461
|
+
.magicfeedback-checkbox,
|
|
462
|
+
div.magicfeedback-radio {
|
|
463
|
+
display: flex;
|
|
464
|
+
flex-direction: column;
|
|
465
|
+
gap: var(--mf-space-sm);
|
|
466
|
+
width: 100%;
|
|
255
467
|
}
|
|
256
468
|
|
|
257
|
-
|
|
258
|
-
.
|
|
259
|
-
|
|
469
|
+
.magicfeedback-checkbox-container,
|
|
470
|
+
.magicfeedback-radio-container {
|
|
471
|
+
display: flex;
|
|
472
|
+
align-items: center;
|
|
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);
|
|
260
479
|
}
|
|
261
480
|
|
|
262
|
-
|
|
263
|
-
.
|
|
264
|
-
|
|
481
|
+
.magicfeedback-checkbox-container:hover,
|
|
482
|
+
.magicfeedback-radio-container:hover {
|
|
483
|
+
background-color: var(--mf-bg-hover);
|
|
484
|
+
border-color: var(--mf-primary);
|
|
265
485
|
}
|
|
266
486
|
|
|
267
|
-
.magicfeedback-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
align-items: center;
|
|
272
|
-
margin-top: 10px;
|
|
273
|
-
width: 100%;
|
|
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);
|
|
274
491
|
}
|
|
275
492
|
|
|
276
|
-
.magicfeedback-
|
|
493
|
+
.magicfeedback-checkbox input[type="checkbox"],
|
|
494
|
+
.magicfeedback-radio-container input[type="radio"] {
|
|
495
|
+
width: 18px;
|
|
496
|
+
height: 18px;
|
|
497
|
+
margin: 0;
|
|
277
498
|
cursor: pointer;
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
width: 100px;
|
|
281
|
-
border-radius: 8px;
|
|
282
|
-
font-size: 16px;
|
|
283
|
-
outline: none;
|
|
284
|
-
transition: border-color 0.3s ease;
|
|
285
|
-
background-color: #1E293B;
|
|
286
|
-
color: white;
|
|
499
|
+
flex-shrink: 0;
|
|
500
|
+
accent-color: var(--mf-primary);
|
|
287
501
|
}
|
|
288
502
|
|
|
289
|
-
.magicfeedback-
|
|
503
|
+
.magicfeedback-checkbox label,
|
|
504
|
+
.magicfeedback-radio-container label {
|
|
505
|
+
font-size: var(--mf-font-size-base);
|
|
506
|
+
text-align: left;
|
|
507
|
+
color: var(--mf-text-primary);
|
|
290
508
|
cursor: pointer;
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
width: 100px;
|
|
294
|
-
border: 0;
|
|
295
|
-
border-radius: 8px;
|
|
296
|
-
font-size: 16px;
|
|
297
|
-
outline: none;
|
|
298
|
-
transition: border-color 0.3s ease;
|
|
299
|
-
background-color: transparent;
|
|
300
|
-
color: #212529;
|
|
509
|
+
margin: 0;
|
|
510
|
+
flex: 1;
|
|
301
511
|
}
|
|
302
512
|
|
|
513
|
+
/* ========================================
|
|
514
|
+
BOOLEAN OPTIONS
|
|
515
|
+
======================================== */
|
|
516
|
+
.magicfeedback-boolean-container {
|
|
517
|
+
display: flex;
|
|
518
|
+
gap: var(--mf-space-md);
|
|
519
|
+
width: 100%;
|
|
520
|
+
}
|
|
303
521
|
|
|
522
|
+
.magicfeedback-boolean-option {
|
|
523
|
+
flex: 1;
|
|
524
|
+
position: relative;
|
|
525
|
+
}
|
|
304
526
|
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
527
|
+
.magicfeedback-boolean-option input[type="radio"] {
|
|
528
|
+
position: absolute;
|
|
529
|
+
opacity: 0;
|
|
530
|
+
width: 0;
|
|
531
|
+
height: 0;
|
|
308
532
|
}
|
|
309
533
|
|
|
310
|
-
.magicfeedback-
|
|
534
|
+
.magicfeedback-boolean-option label {
|
|
311
535
|
display: flex;
|
|
312
|
-
flex-direction: row;
|
|
313
|
-
justify-content: space-around;
|
|
314
|
-
flex-wrap: wrap;
|
|
315
536
|
align-items: center;
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
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);
|
|
322
544
|
cursor: pointer;
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
-
|
|
326
|
-
|
|
545
|
+
transition: var(--mf-transition-fast);
|
|
546
|
+
margin: 0;
|
|
547
|
+
width: -webkit-fill-available;
|
|
548
|
+
height: inherit;
|
|
327
549
|
}
|
|
328
550
|
|
|
329
|
-
.magicfeedback-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
align-content: center;
|
|
333
|
-
justify-content: center;
|
|
334
|
-
text-wrap: wrap;
|
|
551
|
+
.magicfeedback-boolean-option label:hover {
|
|
552
|
+
background-color: var(--mf-bg-hover);
|
|
553
|
+
border-color: var(--mf-primary);
|
|
335
554
|
}
|
|
336
555
|
|
|
337
|
-
.magicfeedback-
|
|
338
|
-
|
|
339
|
-
|
|
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;
|
|
340
561
|
}
|
|
341
562
|
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
.magicfeedback-rating-placeholder-value {
|
|
352
|
-
font-size: 0.75rem;
|
|
353
|
-
margin-bottom: 1px;
|
|
354
|
-
}
|
|
355
|
-
.magicfeedback-rating-placeholder{
|
|
356
|
-
justify-content: center;
|
|
357
|
-
}
|
|
358
|
-
|
|
359
|
-
.magicfeedback-rating-container {
|
|
360
|
-
flex-wrap: wrap;
|
|
361
|
-
justify-content: flex-start;
|
|
362
|
-
}
|
|
563
|
+
/* ========================================
|
|
564
|
+
RATING SYSTEMS
|
|
565
|
+
======================================== */
|
|
566
|
+
.magicfeedback-rating,
|
|
567
|
+
.magicfeedback-rating-number,
|
|
568
|
+
.magicfeedback-rating-star {
|
|
569
|
+
width: 100%;
|
|
363
570
|
}
|
|
364
571
|
|
|
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;
|
|
583
|
+
}
|
|
365
584
|
|
|
366
|
-
|
|
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 {
|
|
367
589
|
display: flex;
|
|
368
|
-
|
|
590
|
+
justify-content: space-between;
|
|
591
|
+
gap: var(--mf-space-md);
|
|
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);
|
|
369
597
|
}
|
|
370
598
|
|
|
599
|
+
.magicfeedback-rating-placeholder-value {
|
|
600
|
+
overflow-wrap: anywhere;
|
|
601
|
+
}
|
|
371
602
|
|
|
372
|
-
.magicfeedback-rating-
|
|
373
|
-
|
|
374
|
-
text-align: center;
|
|
375
|
-
margin-bottom: 0;
|
|
376
|
-
font-weight: 600;
|
|
377
|
-
font-size: 18px;
|
|
378
|
-
color: #475569;
|
|
603
|
+
.magicfeedback-rating-placeholder-value:last-child {
|
|
604
|
+
text-align: right;
|
|
379
605
|
}
|
|
380
606
|
|
|
381
|
-
|
|
607
|
+
/* Rating with Images */
|
|
608
|
+
.magicfeedback-rating-option-label-container input[type="radio"] {
|
|
382
609
|
position: absolute;
|
|
383
610
|
opacity: 0;
|
|
384
611
|
width: 0;
|
|
385
612
|
height: 0;
|
|
386
613
|
}
|
|
387
614
|
|
|
388
|
-
|
|
389
|
-
|
|
615
|
+
.magicfeedback-rating-option-label-container img {
|
|
616
|
+
width: 56px;
|
|
617
|
+
height: 56px;
|
|
390
618
|
cursor: pointer;
|
|
391
|
-
|
|
392
|
-
|
|
619
|
+
transition: var(--mf-transition-fast);
|
|
620
|
+
border-radius: var(--mf-radius-full);
|
|
621
|
+
border: 2px solid transparent;
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
.magicfeedback-rating-option-label-container img:hover {
|
|
625
|
+
transform: scale(1.1);
|
|
626
|
+
border-color: var(--mf-primary);
|
|
393
627
|
}
|
|
394
628
|
|
|
395
|
-
|
|
396
|
-
|
|
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);
|
|
632
|
+
}
|
|
633
|
+
|
|
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);
|
|
397
640
|
cursor: pointer;
|
|
398
641
|
}
|
|
399
642
|
|
|
400
|
-
/*
|
|
401
|
-
.
|
|
402
|
-
|
|
403
|
-
|
|
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;
|
|
404
658
|
}
|
|
405
659
|
|
|
406
|
-
|
|
407
|
-
|
|
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;
|
|
408
668
|
}
|
|
409
|
-
|
|
410
|
-
|
|
669
|
+
|
|
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 {
|
|
411
673
|
display: flex;
|
|
412
|
-
flex-direction: row;
|
|
413
674
|
justify-content: space-between;
|
|
414
|
-
|
|
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);
|
|
680
|
+
}
|
|
415
681
|
|
|
416
|
-
|
|
417
|
-
|
|
682
|
+
.magicfeedback-rating-number-scale-label {
|
|
683
|
+
overflow-wrap: anywhere;
|
|
684
|
+
}
|
|
418
685
|
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
cursor: pointer;
|
|
422
|
-
user-select: none;
|
|
423
|
-
-webkit-user-select: none;
|
|
424
|
-
-moz-user-select: none;
|
|
425
|
-
-ms-user-select: none;
|
|
686
|
+
.magicfeedback-rating-number-scale-label:last-child {
|
|
687
|
+
text-align: right;
|
|
426
688
|
}
|
|
427
689
|
|
|
428
|
-
/*
|
|
429
|
-
|
|
430
|
-
.
|
|
431
|
-
|
|
432
|
-
|
|
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;
|
|
433
702
|
}
|
|
434
703
|
|
|
435
|
-
.magicfeedback-rating-number-
|
|
436
|
-
|
|
437
|
-
margin-bottom: 8px;
|
|
704
|
+
.magicfeedback-rating-number-scale-label-block:first-child {
|
|
705
|
+
margin-bottom: var(--mf-space-sm);
|
|
438
706
|
}
|
|
439
707
|
|
|
440
|
-
.magicfeedback-rating-number-container
|
|
441
|
-
|
|
442
|
-
flex: 1;
|
|
708
|
+
.magicfeedback-rating-number-container + .magicfeedback-rating-number-scale-label-block {
|
|
709
|
+
margin-top: var(--mf-space-sm);
|
|
443
710
|
}
|
|
444
711
|
|
|
445
712
|
.magicfeedback-rating-number-option {
|
|
446
713
|
display: flex;
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
padding: 0;
|
|
452
|
-
list-style: none;
|
|
453
|
-
font-size: 1.5rem;
|
|
454
|
-
cursor: pointer;
|
|
455
|
-
user-select: none;
|
|
456
|
-
-webkit-user-select: none;
|
|
457
|
-
-moz-user-select: none;
|
|
458
|
-
-ms-user-select: none;
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
.magicfeedback-rating-number-option-label-container {
|
|
717
|
+
position: relative;
|
|
459
718
|
width: 100%;
|
|
719
|
+
display: flex;
|
|
720
|
+
cursor: pointer;
|
|
460
721
|
}
|
|
461
722
|
|
|
462
|
-
.magicfeedback-rating-number-option-
|
|
463
|
-
|
|
723
|
+
.magicfeedback-rating-number-option-label-container input[type="radio"] {
|
|
724
|
+
position: absolute;
|
|
725
|
+
opacity: 0;
|
|
726
|
+
width: 0;
|
|
727
|
+
height: 0;
|
|
464
728
|
}
|
|
465
729
|
|
|
466
|
-
.magicfeedback-rating-number-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
align-content: center;
|
|
730
|
+
.magicfeedback-rating-number-value {
|
|
731
|
+
display: flex;
|
|
732
|
+
align-items: center;
|
|
470
733
|
justify-content: center;
|
|
471
|
-
|
|
734
|
+
width: 100%;
|
|
735
|
+
transition: var(--mf-transition-fast);
|
|
736
|
+
color: var(--mf-text-secondary);
|
|
737
|
+
font-weight: var(--mf-font-weight-semibold);
|
|
738
|
+
}
|
|
472
739
|
|
|
473
|
-
|
|
474
|
-
|
|
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);
|
|
747
|
+
}
|
|
475
748
|
|
|
476
|
-
|
|
477
|
-
|
|
749
|
+
.magicfeedback-rating-number-option-row,
|
|
750
|
+
.magicfeedback-rating-number-option-row-reverse {
|
|
751
|
+
flex: 1 1 0;
|
|
752
|
+
min-width: 0;
|
|
478
753
|
}
|
|
479
754
|
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
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
|
+
}
|
|
486
766
|
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
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);
|
|
492
781
|
}
|
|
493
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
|
+
}
|
|
494
789
|
|
|
495
|
-
|
|
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 {
|
|
496
794
|
display: flex;
|
|
497
|
-
flex-direction: column;
|
|
498
|
-
align-items: center;
|
|
499
795
|
justify-content: center;
|
|
796
|
+
margin-top: var(--mf-space-sm);
|
|
797
|
+
}
|
|
798
|
+
|
|
799
|
+
.magicfeedback-rating-number-option--extra {
|
|
800
|
+
flex: 0 1 auto;
|
|
801
|
+
}
|
|
802
|
+
|
|
803
|
+
.magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container {
|
|
804
|
+
width: auto;
|
|
805
|
+
}
|
|
806
|
+
|
|
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);
|
|
815
|
+
}
|
|
816
|
+
|
|
817
|
+
.magicfeedback-rating-number-option--extra .magicfeedback-rating-number-option-label-container:hover .magicfeedback-rating-number-value {
|
|
818
|
+
background: var(--mf-primary-light);
|
|
819
|
+
}
|
|
820
|
+
|
|
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);
|
|
825
|
+
}
|
|
826
|
+
|
|
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);
|
|
832
|
+
}
|
|
833
|
+
|
|
834
|
+
.magicfeedback-rating-number-option-column,
|
|
835
|
+
.magicfeedback-rating-number-option-column-reverse {
|
|
500
836
|
width: 100%;
|
|
501
|
-
height: 100%;
|
|
502
837
|
}
|
|
503
838
|
|
|
504
|
-
.magicfeedback-rating-number-option-
|
|
505
|
-
|
|
506
|
-
|
|
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
|
+
}
|
|
850
|
+
|
|
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);
|
|
854
|
+
}
|
|
855
|
+
|
|
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);
|
|
861
|
+
}
|
|
862
|
+
|
|
863
|
+
.magicfeedback-rating-number-value-num {
|
|
864
|
+
font-weight: var(--mf-font-weight-bold);
|
|
865
|
+
}
|
|
866
|
+
|
|
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;
|
|
875
|
+
}
|
|
876
|
+
|
|
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 {
|
|
507
881
|
justify-content: center;
|
|
508
|
-
|
|
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 {
|
|
921
|
+
display: flex;
|
|
922
|
+
border-radius: var(--mf-radius-md);
|
|
509
923
|
overflow: hidden;
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
color: #475569;
|
|
924
|
+
transition: var(--mf-transition-fast);
|
|
925
|
+
}
|
|
926
|
+
|
|
927
|
+
.magicfeedback-image-option-label-container {
|
|
515
928
|
cursor: pointer;
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
text-align: center;
|
|
520
|
-
padding: 0;
|
|
521
|
-
border-radius: 4px;
|
|
522
|
-
border: 1px solid #ced4da;
|
|
523
|
-
background-color: rgba(246, 246, 246, 0.3);
|
|
524
|
-
transition: background-color 0.15s ease-in-out;
|
|
929
|
+
border-radius: var(--mf-radius-md);
|
|
930
|
+
overflow: hidden;
|
|
931
|
+
transition: var(--mf-transition-fast);
|
|
525
932
|
}
|
|
526
933
|
|
|
527
|
-
.magicfeedback-
|
|
934
|
+
.magicfeedback-image-option-label-container input[type="radio"],
|
|
935
|
+
.magicfeedback-image-option-label-container input[type="checkbox"] {
|
|
528
936
|
position: absolute;
|
|
529
937
|
opacity: 0;
|
|
530
938
|
width: 0;
|
|
531
939
|
height: 0;
|
|
532
940
|
}
|
|
533
941
|
|
|
534
|
-
.magicfeedback-
|
|
535
|
-
|
|
942
|
+
.magicfeedback-image-option-label-container img {
|
|
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);
|
|
536
949
|
}
|
|
537
950
|
|
|
538
|
-
.magicfeedback-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
border: 1px solid #007bff;
|
|
542
|
-
background-color: rgba(86, 168, 253, 0.29);
|
|
951
|
+
.magicfeedback-image-option-label-container:hover img {
|
|
952
|
+
border-color: var(--mf-primary);
|
|
953
|
+
box-shadow: var(--mf-shadow-md);
|
|
543
954
|
}
|
|
544
955
|
|
|
545
|
-
.magicfeedback-
|
|
546
|
-
|
|
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);
|
|
547
959
|
}
|
|
548
960
|
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
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
|
+
}
|
|
554
969
|
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
970
|
+
.magicfeedback-multi-question-matrix-table {
|
|
971
|
+
width: 100%;
|
|
972
|
+
border-collapse: separate;
|
|
973
|
+
border-spacing: 0 var(--mf-space-xs);
|
|
974
|
+
}
|
|
559
975
|
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
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);
|
|
565
982
|
}
|
|
566
983
|
|
|
567
|
-
.magicfeedback-
|
|
568
|
-
|
|
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);
|
|
569
988
|
}
|
|
570
989
|
|
|
571
|
-
.magicfeedback-
|
|
572
|
-
|
|
573
|
-
flex-direction: row !important;
|
|
574
|
-
justify-content: center !important;
|
|
575
|
-
align-items: center !important;
|
|
576
|
-
flex-wrap: wrap;
|
|
577
|
-
margin: 15px 5px;
|
|
578
|
-
padding: 0;
|
|
579
|
-
list-style: none;
|
|
580
|
-
font-size: 1.5rem;
|
|
581
|
-
cursor: pointer;
|
|
582
|
-
user-select: none;
|
|
583
|
-
-webkit-user-select: none;
|
|
584
|
-
-moz-user-select: none;
|
|
585
|
-
-ms-user-select: none;
|
|
990
|
+
.magicfeedback-multi-question-matrix-row-tr:nth-child(even) {
|
|
991
|
+
background-color: var(--mf-bg-secondary);
|
|
586
992
|
}
|
|
587
993
|
|
|
588
|
-
.magicfeedback-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
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;
|
|
593
1013
|
cursor: pointer;
|
|
594
|
-
|
|
595
|
-
color: #ccc;
|
|
596
|
-
margin: 0 10px;
|
|
1014
|
+
accent-color: var(--mf-primary);
|
|
597
1015
|
}
|
|
598
1016
|
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
1017
|
+
/* ========================================
|
|
1018
|
+
PRIORITY LIST
|
|
1019
|
+
======================================== */
|
|
1020
|
+
.magicfeedback-priority-list-item {
|
|
1021
|
+
display: flex;
|
|
1022
|
+
align-items: center;
|
|
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);
|
|
602
1030
|
}
|
|
603
1031
|
|
|
604
|
-
.magicfeedback-
|
|
605
|
-
|
|
1032
|
+
.magicfeedback-priority-list-item:hover {
|
|
1033
|
+
box-shadow: var(--mf-shadow-sm);
|
|
1034
|
+
border-color: var(--mf-primary);
|
|
606
1035
|
}
|
|
607
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
|
+
}
|
|
608
1044
|
|
|
609
|
-
|
|
610
|
-
.magicfeedback-
|
|
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);
|
|
611
1050
|
cursor: pointer;
|
|
612
|
-
|
|
1051
|
+
transition: var(--mf-transition-fast);
|
|
1052
|
+
user-select: none;
|
|
613
1053
|
}
|
|
614
1054
|
|
|
615
|
-
.magicfeedback-
|
|
616
|
-
.magicfeedback-
|
|
617
|
-
|
|
618
|
-
|
|
1055
|
+
.magicfeedback-priority-list-arrow-up:hover,
|
|
1056
|
+
.magicfeedback-priority-list-arrow-down:hover {
|
|
1057
|
+
color: var(--mf-primary);
|
|
1058
|
+
transform: scale(1.2);
|
|
619
1059
|
}
|
|
620
1060
|
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
1061
|
+
/* ========================================
|
|
1062
|
+
POINT SYSTEM
|
|
1063
|
+
======================================== */
|
|
1064
|
+
.magicfeedback-point-system-item {
|
|
1065
|
+
display: flex;
|
|
1066
|
+
align-items: center;
|
|
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;
|
|
624
1074
|
}
|
|
625
1075
|
|
|
626
|
-
.magicfeedback-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
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;
|
|
630
1081
|
}
|
|
631
1082
|
|
|
632
|
-
.magicfeedback-
|
|
1083
|
+
.magicfeedback-point-system-input-container {
|
|
633
1084
|
display: flex;
|
|
634
|
-
|
|
635
|
-
|
|
1085
|
+
align-items: center;
|
|
1086
|
+
gap: var(--mf-space-sm);
|
|
636
1087
|
}
|
|
637
1088
|
|
|
638
|
-
.magicfeedback-
|
|
639
|
-
|
|
1089
|
+
.magicfeedback-point-system-item input {
|
|
1090
|
+
width: 80px;
|
|
1091
|
+
min-width: 80px;
|
|
1092
|
+
padding: var(--mf-space-sm);
|
|
1093
|
+
text-align: center;
|
|
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;
|
|
1098
|
+
}
|
|
1099
|
+
|
|
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);
|
|
640
1107
|
}
|
|
641
1108
|
|
|
1109
|
+
/* ========================================
|
|
1110
|
+
CONSENT
|
|
1111
|
+
======================================== */
|
|
642
1112
|
.magicfeedback-consent-container {
|
|
643
1113
|
display: flex;
|
|
644
1114
|
flex-direction: row;
|
|
645
|
-
justify-content: flex-start;
|
|
646
1115
|
align-items: center;
|
|
647
|
-
|
|
648
|
-
|
|
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);
|
|
649
1127
|
}
|
|
650
1128
|
|
|
651
1129
|
.magicfeedback-consent-container label {
|
|
652
|
-
|
|
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);
|
|
1135
|
+
cursor: pointer;
|
|
1136
|
+
margin-bottom: 0;
|
|
653
1137
|
}
|
|
654
1138
|
|
|
655
|
-
|
|
656
|
-
|
|
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);
|
|
657
1163
|
}
|
|
658
1164
|
|
|
659
|
-
.magicfeedback-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
1165
|
+
.magicfeedback-submit:hover {
|
|
1166
|
+
background-color: var(--mf-primary-hover);
|
|
1167
|
+
box-shadow: var(--mf-shadow-lg);
|
|
1168
|
+
transform: translateY(-2px);
|
|
663
1169
|
}
|
|
664
1170
|
|
|
665
|
-
.magicfeedback-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
font-style: normal;
|
|
669
|
-
text-align: start;
|
|
670
|
-
font-weight: 400;
|
|
671
|
-
font-size: 16px;
|
|
672
|
-
color: #475569;
|
|
673
|
-
line-height: 1.5;
|
|
1171
|
+
.magicfeedback-submit:active {
|
|
1172
|
+
transform: translateY(0);
|
|
1173
|
+
box-shadow: var(--mf-shadow-sm);
|
|
674
1174
|
}
|
|
675
1175
|
|
|
676
|
-
.magicfeedback-
|
|
677
|
-
.
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
max-width: 80%;
|
|
681
|
-
height: auto;
|
|
682
|
-
margin: 10px auto;
|
|
1176
|
+
.magicfeedback-submit:disabled {
|
|
1177
|
+
opacity: 0.5;
|
|
1178
|
+
cursor: not-allowed;
|
|
1179
|
+
transform: none;
|
|
683
1180
|
}
|
|
684
1181
|
|
|
685
|
-
.magicfeedback-
|
|
686
|
-
.
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
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);
|
|
1192
|
+
}
|
|
1193
|
+
|
|
1194
|
+
.magicfeedback-back:hover {
|
|
1195
|
+
border-color: var(--mf-primary);
|
|
1196
|
+
background-color: var(--mf-bg-hover);
|
|
692
1197
|
}
|
|
693
1198
|
|
|
1199
|
+
/* ========================================
|
|
1200
|
+
SKIP & COUNTER
|
|
1201
|
+
======================================== */
|
|
694
1202
|
.magicfeedback-skip-container {
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
padding: 0
|
|
699
|
-
margin: 0
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
color: #0066ff;
|
|
707
|
-
}
|
|
1203
|
+
display: flex;
|
|
1204
|
+
align-items: center;
|
|
1205
|
+
gap: var(--mf-space-xs);
|
|
1206
|
+
padding: 0;
|
|
1207
|
+
margin: 0;
|
|
1208
|
+
font-size: var(--mf-font-size-sm);
|
|
1209
|
+
color: var(--mf-text-muted);
|
|
1210
|
+
background: transparent;
|
|
1211
|
+
border: none;
|
|
1212
|
+
cursor: pointer;
|
|
1213
|
+
transition: var(--mf-transition-fast);
|
|
708
1214
|
}
|
|
709
1215
|
|
|
710
|
-
.magicfeedback-skip-container
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
cursor: pointer !important;
|
|
1216
|
+
.magicfeedback-skip-container:hover {
|
|
1217
|
+
color: var(--mf-primary);
|
|
1218
|
+
}
|
|
714
1219
|
|
|
1220
|
+
.magicfeedback-skip-container input[type="checkbox"] {
|
|
1221
|
+
margin: 0;
|
|
1222
|
+
cursor: pointer;
|
|
1223
|
+
accent-color: var(--mf-primary);
|
|
715
1224
|
}
|
|
716
1225
|
|
|
717
|
-
.magicfeedback-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
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;
|
|
721
1249
|
}
|
|
722
1250
|
|
|
723
|
-
|
|
724
|
-
.magicfeedback-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
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;
|
|
728
1281
|
}
|
|
729
1282
|
|
|
730
|
-
.magicfeedback-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
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);
|
|
736
1289
|
}
|
|
737
1290
|
|
|
738
|
-
|
|
739
|
-
|
|
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;
|
|
740
1300
|
}
|
|
741
1301
|
|
|
742
|
-
.magicfeedback-
|
|
743
|
-
|
|
744
|
-
|
|
1302
|
+
.magicfeedback-modal-row {
|
|
1303
|
+
display: flex;
|
|
1304
|
+
align-items: center;
|
|
1305
|
+
gap: 10px;
|
|
1306
|
+
cursor: pointer;
|
|
745
1307
|
}
|
|
746
1308
|
|
|
747
|
-
|
|
748
|
-
|
|
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;
|
|
1316
|
+
}
|
|
1317
|
+
|
|
1318
|
+
.magicfeedback-priority-list-reorder {
|
|
1319
|
+
margin-top: 8px;
|
|
749
1320
|
}
|
|
1321
|
+
|
|
1322
|
+
.magicfeedback-priority-list-list {
|
|
1323
|
+
padding: 0;
|
|
1324
|
+
list-style: none;
|
|
1325
|
+
}
|
|
1326
|
+
|
|
750
1327
|
.magicfeedback-priority-list-item {
|
|
751
1328
|
display: flex;
|
|
752
|
-
flex-direction: row;
|
|
753
1329
|
justify-content: space-between;
|
|
754
1330
|
align-items: center;
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
border: 1px solid #ced4da;
|
|
758
|
-
border-radius: 5px;
|
|
759
|
-
margin: 10px 0 !important;
|
|
1331
|
+
margin: 5px 0;
|
|
760
1332
|
}
|
|
761
1333
|
|
|
762
|
-
.magicfeedback-
|
|
763
|
-
|
|
764
|
-
margin: 5px 0 !important;
|
|
1334
|
+
.magicfeedback-priority-list-item-label {
|
|
1335
|
+
font-size: 15px;
|
|
765
1336
|
}
|
|
766
1337
|
|
|
767
|
-
.magicfeedback-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
color: #212529;
|
|
772
|
-
text-align: start;
|
|
773
|
-
word-wrap: break-word;
|
|
774
|
-
white-space: normal;
|
|
775
|
-
padding: 0 10px 0 0;
|
|
1338
|
+
.magicfeedback-priority-list-arrows {
|
|
1339
|
+
display: flex;
|
|
1340
|
+
align-items: center;
|
|
1341
|
+
gap: 6px;
|
|
776
1342
|
}
|
|
777
1343
|
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
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;
|
|
781
1352
|
font-size: 14px;
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
1353
|
+
font-weight: 700;
|
|
1354
|
+
cursor: pointer;
|
|
1355
|
+
box-shadow: var(--mf-shadow-sm);
|
|
785
1356
|
}
|
|
786
1357
|
|
|
787
|
-
.magicfeedback-
|
|
788
|
-
|
|
1358
|
+
.magicfeedback-button:hover {
|
|
1359
|
+
background: var(--mf-bg-hover);
|
|
1360
|
+
border-color: var(--mf-primary);
|
|
789
1361
|
}
|
|
790
1362
|
|
|
791
|
-
.magicfeedback-
|
|
1363
|
+
.magicfeedback-button:active {
|
|
1364
|
+
transform: translateY(1px);
|
|
1365
|
+
}
|
|
1366
|
+
|
|
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);
|
|
1372
|
+
}
|
|
1373
|
+
|
|
1374
|
+
.magicfeedback-button-primary:hover {
|
|
1375
|
+
background: var(--mf-primary-hover);
|
|
1376
|
+
}
|
|
1377
|
+
|
|
1378
|
+
.magicfeedback-button-primary:active {
|
|
1379
|
+
background: var(--mf-primary-hover);
|
|
1380
|
+
}
|
|
1381
|
+
|
|
1382
|
+
/* Warning flash */
|
|
1383
|
+
.magicfeedback-warning {
|
|
1384
|
+
color: #C70039;
|
|
1385
|
+
}
|
|
1386
|
+
|
|
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
|
+
}
|
|
1400
|
+
|
|
1401
|
+
.magicfeedback-start-message-button:hover {
|
|
1402
|
+
background: var(--mf-primary-hover);
|
|
1403
|
+
}
|
|
1404
|
+
|
|
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
|
+
}
|
|
1495
|
+
}
|
|
1496
|
+
|
|
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
|
+
}
|
|
1508
|
+
}
|
|
1509
|
+
|
|
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;
|
|
1524
|
+
}
|
|
1525
|
+
|
|
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;
|
|
1536
|
+
}
|
|
1537
|
+
|
|
1538
|
+
.magicfeedback-modal-close:hover,
|
|
1539
|
+
.magicfeedback-modal-close:focus {
|
|
1540
|
+
color: #000;
|
|
1541
|
+
outline: none;
|
|
1542
|
+
}
|
|
1543
|
+
|
|
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;
|
|
1553
|
+
}
|
|
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;
|
|
1570
|
+
display: flex;
|
|
1571
|
+
flex-direction: column;
|
|
1572
|
+
align-items: center;
|
|
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);
|
|
792
1579
|
text-align: center;
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
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);
|
|
796
1585
|
}
|
|
797
1586
|
|
|
798
|
-
.magicfeedback-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
1587
|
+
.magicfeedback-upload-dropzone:hover {
|
|
1588
|
+
border-color: var(--mf-primary);
|
|
1589
|
+
background-color: var(--mf-bg-hover);
|
|
1590
|
+
}
|
|
1591
|
+
|
|
1592
|
+
.magicfeedback-upload-dropzone:focus-within {
|
|
1593
|
+
border-color: var(--mf-primary);
|
|
1594
|
+
box-shadow: var(--mf-shadow-focus);
|
|
1595
|
+
}
|
|
1596
|
+
|
|
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);
|
|
809
1602
|
}
|
|
810
1603
|
|
|
811
|
-
.magicfeedback-
|
|
1604
|
+
.magicfeedback-upload-icon {
|
|
1605
|
+
display: inline-flex;
|
|
812
1606
|
align-items: center;
|
|
813
|
-
|
|
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;
|
|
814
1615
|
}
|
|
815
1616
|
|
|
816
|
-
.magicfeedback-
|
|
817
|
-
|
|
818
|
-
|
|
1617
|
+
.magicfeedback-upload-icon svg {
|
|
1618
|
+
width: 24px;
|
|
1619
|
+
height: 24px;
|
|
819
1620
|
}
|
|
820
1621
|
|
|
821
|
-
.magicfeedback-
|
|
822
|
-
|
|
1622
|
+
.magicfeedback-upload-cta {
|
|
1623
|
+
font-family: inherit;
|
|
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;
|
|
823
1628
|
}
|
|
824
1629
|
|
|
825
|
-
.magicfeedback-
|
|
826
|
-
|
|
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;
|
|
827
1635
|
}
|
|
828
1636
|
|
|
829
|
-
.magicfeedback-
|
|
830
|
-
|
|
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;
|
|
831
1645
|
}
|
|
832
1646
|
|
|
833
|
-
.magicfeedback-
|
|
834
|
-
|
|
1647
|
+
.magicfeedback-upload-list:empty {
|
|
1648
|
+
display: none;
|
|
835
1649
|
}
|
|
836
1650
|
|
|
837
|
-
.magicfeedback-
|
|
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;
|
|
1661
|
+
}
|
|
1662
|
+
|
|
1663
|
+
.magicfeedback-upload-thumb {
|
|
1664
|
+
flex: 0 0 auto;
|
|
1665
|
+
display: inline-flex;
|
|
1666
|
+
align-items: center;
|
|
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);
|
|
1674
|
+
}
|
|
1675
|
+
|
|
1676
|
+
.magicfeedback-upload-thumb img {
|
|
1677
|
+
width: 100%;
|
|
1678
|
+
height: 100%;
|
|
1679
|
+
object-fit: cover;
|
|
1680
|
+
}
|
|
1681
|
+
|
|
1682
|
+
.magicfeedback-upload-thumb svg {
|
|
1683
|
+
width: 20px;
|
|
1684
|
+
height: 20px;
|
|
1685
|
+
}
|
|
1686
|
+
|
|
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;
|
|
1693
|
+
}
|
|
1694
|
+
|
|
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;
|
|
1703
|
+
}
|
|
1704
|
+
|
|
1705
|
+
.magicfeedback-upload-file-size {
|
|
1706
|
+
font-family: inherit;
|
|
1707
|
+
font-size: 0.75rem;
|
|
1708
|
+
color: var(--mf-text-muted);
|
|
1709
|
+
}
|
|
1710
|
+
|
|
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;
|
|
838
1718
|
padding: 0;
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
min-height: 42px;
|
|
1719
|
+
color: var(--mf-text-muted);
|
|
1720
|
+
background-color: transparent;
|
|
1721
|
+
border: none;
|
|
1722
|
+
border-radius: var(--mf-radius-full);
|
|
844
1723
|
cursor: pointer;
|
|
845
|
-
|
|
846
|
-
text-align: center !important;
|
|
1724
|
+
transition: var(--mf-transition-fast);
|
|
847
1725
|
}
|
|
848
1726
|
|
|
849
|
-
.magicfeedback-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
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);
|
|
856
1744
|
}
|
|
857
1745
|
|
|
858
|
-
.magicfeedback-
|
|
859
|
-
|
|
860
|
-
height: auto !important;
|
|
861
|
-
max-width: 100% !important;
|
|
862
|
-
margin: 10px auto !important;
|
|
1746
|
+
.magicfeedback-upload-error.is-visible {
|
|
1747
|
+
display: block;
|
|
863
1748
|
}
|
|
864
1749
|
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
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
|
+
}
|