1: <?php
2:
3: 4: 5:
6: class Quform_Themes
7: {
8: 9: 10:
11: protected $themes = array();
12:
13: 14: 15:
16: protected $coreThemes;
17:
18: public function __construct()
19: {
20: $this->coreThemes = array(
21: 'minimal' => array(
22: 'name' => 'Minimal',
23: 'version' => '1.0.0',
24: 'cssPath' => QUFORM_PATH . '/css/theme.minimal.min.css',
25: 'cssUrl' => Quform::url('css/theme.minimal.min.css'),
26: 'previewColor' => '#FFFFFF'
27: ),
28: 'light' => array(
29: 'name' => 'Quform Light',
30: 'version' => '1.0.0',
31: 'cssPath' => QUFORM_PATH . '/css/theme.light.min.css',
32: 'cssUrl' => Quform::url('css/theme.light.min.css'),
33: 'previewColor' => '#FFFFFF'
34: ),
35: 'dark' => array(
36: 'name' => 'Quform Dark',
37: 'version' => '1.0.0',
38: 'cssPath' => QUFORM_PATH . '/css/theme.dark.min.css',
39: 'cssUrl' => Quform::url('css/theme.dark.min.css'),
40: 'previewColor' => '#0d0d0c'
41: ),
42: 'hollow' => array(
43: 'name' => 'Hollow',
44: 'version' => '1.0.0',
45: 'cssPath' => QUFORM_PATH . '/css/theme.hollow.min.css',
46: 'cssUrl' => Quform::url('css/theme.hollow.min.css'),
47: 'previewColor' => '#FFFFFF'
48: ),
49: 'underlined' => array(
50: 'name' => 'Underline',
51: 'version' => '1.0.0',
52: 'cssPath' => QUFORM_PATH . '/css/theme.underlined.min.css',
53: 'cssUrl' => Quform::url('css/theme.underlined.min.css'),
54: 'previewColor' => '#FFFFFF'
55: ),
56: 'simple' => array(
57: 'name' => 'Simple',
58: 'version' => '1.0.0',
59: 'cssPath' => QUFORM_PATH . '/css/theme.simple.min.css',
60: 'cssUrl' => Quform::url('css/theme.simple.min.css'),
61: 'previewColor' => '#FFFFFF'
62: ),
63: 'react' => array(
64: 'name' => 'React',
65: 'version' => '1.0.0',
66: 'cssPath' => QUFORM_PATH . '/css/theme.react.min.css',
67: 'cssUrl' => Quform::url('css/theme.react.min.css'),
68: 'previewColor' => '#FFFFFF'
69: ),
70: 'bootstrap' => array(
71: 'name' => 'Bootstrap',
72: 'version' => '1.0.0',
73: 'cssPath' => QUFORM_PATH . '/css/theme.bootstrap.min.css',
74: 'cssUrl' => Quform::url('css/theme.bootstrap.min.css'),
75: 'previewColor' => '#FFFFFF'
76: ),
77: 'shine-gradient' => array(
78: 'name' => 'Shine Gradient',
79: 'version' => '1.0.0',
80: 'cssPath' => QUFORM_PATH . '/css/theme.shine-gradient.min.css',
81: 'cssUrl' => Quform::url('css/theme.shine-gradient.min.css'),
82: 'previewColor' => '#FFFFFF'
83: ),
84: 'blend-gradient' => array(
85: 'name' => 'Blend Gradient',
86: 'version' => '1.0.0',
87: 'cssPath' => QUFORM_PATH . '/css/theme.blend-gradient.min.css',
88: 'cssUrl' => Quform::url('css/theme.blend-gradient.min.css'),
89: 'previewColor' => '#FFFFFF'
90: ),
91: 'storm' => array(
92: 'name' => 'Storm',
93: 'version' => '1.0.0',
94: 'cssPath' => QUFORM_PATH . '/css/theme.storm.min.css',
95: 'cssUrl' => Quform::url('css/theme.storm.min.css'),
96: 'previewColor' => '#0d0d0c'
97: )
98: );
99: }
100:
101: 102: 103: 104:
105: public function register($key, array $data)
106: {
107: $this->themes[$key] = $data;
108: }
109:
110: 111: 112:
113: public function getThemes()
114: {
115: return $this->themes;
116: }
117:
118: 119: 120: 121: 122: 123:
124: public function getTheme($key)
125: {
126: return isset($this->themes[$key]) ? $this->themes[$key] : null;
127: }
128:
129: 130: 131:
132: public function registerCoreThemes()
133: {
134: foreach ($this->coreThemes as $key => $data) {
135: $this->register($key, $data);
136: }
137: }
138:
139: 140: 141: 142:
143: public function isCoreTheme($key)
144: {
145: return array_key_exists($key, $this->coreThemes);
146: }
147:
148: 149: 150: 151: 152: 153: 154: 155:
156: public static function getPrimaryColorCustomCss($theme, $formId, $primaryColor)
157: {
158: $css = '';
159:
160: if ( ! Quform::isNonEmptyString($primaryColor)) {
161: return $css;
162: }
163:
164: switch ($theme) {
165: case 'light':
166: $css .= '.quform-%1$s.quform-theme-light .quform-page-progress-bar {
167: background-color: %2$s;
168: }
169: .quform-%1$s.quform-theme-light .quform-page-progress-tab.quform-current-tab {
170: color: %2$s;
171: }
172: .quform-%1$s.quform-theme-light .select2-container--quform.select2-container--open .select2-selection,
173: .quform-%1$s-timepicker.quform-theme-light.quform-timepicker.k-list-container.k-popup,
174: .quform-%1$s.quform-theme-light .quform-field-text:active,
175: .quform-%1$s.quform-theme-light .quform-field-captcha:active,
176: .quform-%1$s.quform-theme-light .quform-field-password:active,
177: .quform-%1$s.quform-theme-light .quform-field-textarea:active,
178: .quform-%1$s.quform-theme-light .quform-field-email:active,
179: .quform-%1$s.quform-theme-light .quform-field-date:active,
180: .quform-%1$s.quform-theme-light .quform-field-time:active,
181: .quform-%1$s.quform-theme-light .quform-field-select:active,
182: .quform-%1$s.quform-theme-light .quform-field-multiselect:active,
183: .quform-%1$s.quform-theme-light .quform-field-text:focus,
184: .quform-%1$s.quform-theme-light .quform-field-captcha:focus,
185: .quform-%1$s.quform-theme-light .quform-field-password:focus,
186: .quform-%1$s.quform-theme-light .quform-field-textarea:focus,
187: .quform-%1$s.quform-theme-light .quform-field-email:focus,
188: .quform-%1$s.quform-theme-light .quform-field-date:focus,
189: .quform-%1$s.quform-theme-light .quform-field-time:focus,
190: .quform-%1$s.quform-theme-light .quform-field-select:focus,
191: .quform-%1$s.quform-theme-light .quform-field-multiselect:focus {
192: border-color: %2$s;
193: box-shadow: 0 0 16px -8px %2$s;
194: }
195: .quform-%1$s.quform-theme-light .quform-upload-progress-bar {
196: background-color: %2$s;
197: }
198: .quform-%1$s.quform-theme-light .quform-upload-file {
199: background-color: %2$s;
200: }
201: .quform-%1$s-select2.quform-theme-light.select2-container--quform .select2-dropdown {
202: border: 2px solid %2$s;
203: }
204: .quform-%1$s-select2.quform-theme-light.select2-container--quform .select2-dropdown--above {
205: border: 2px solid %2$s;
206: border-bottom: transparent;
207: }
208: .quform-%1$s-select2.quform-theme-light.select2-container--quform .select2-dropdown--below {
209: border: 2px solid %2$s;
210: border-top: transparent;
211: }
212: .quform-%1$s-datepicker.quform-theme-light.quform-datepicker .k-calendar .k-header,
213: .quform-%1$s-datepicker.quform-theme-light.quform-datepicker .k-calendar .k-footer,
214: .quform-%1$s-datepicker.quform-theme-light.quform-datepicker .k-calendar .k-header .k-state-hover {
215: background-color: %2$s;
216: }
217: .quform-%1$s-timepicker.quform-theme-light.quform-timepicker.k-popup ul.k-list li.k-item.k-state-selected {
218: color: %2$s;
219: }
220: .quform-%1$s-datepicker.quform-theme-light.quform-datepicker .k-calendar .k-content .k-link:hover,
221: .quform-%1$s-datepicker.quform-theme-light.quform-datepicker .k-calendar td.k-state-focused .k-link,
222: .quform-%1$s-datepicker.quform-theme-light.quform-datepicker .k-calendar td.k-state-selected.k-state-focused .k-link {
223: color: %2$s;
224: }
225: .quform-%1$s.quform-theme-light .quform-button-style-theme .quform-upload-button,
226: .quform-%1$s.quform-theme-light .quform-options-style-button .quform-option-label,
227: .quform-%1$s.quform-theme-light .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
228: .quform-%1$s.quform-theme-light .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
229: .quform-%1$s.quform-theme-light .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
230: background-color: %2$s;
231: }
232: .quform-%1$s.quform-theme-light .quform-loading-type-spinner-1 .quform-loading-spinner,
233: .quform-%1$s.quform-theme-light .quform-loading-type-spinner-1 .quform-loading-spinner:after {
234: border-top-color: %2$s;
235: }
236: .quform-%1$s.quform-theme-light .quform-loading-type-spinner-2 .quform-loading-spinner {
237: background-color: %2$s;
238: }
239: .quform-%1$s.quform-theme-light .quform-loading-type-spinner-3 .quform-loading-spinner,
240: .quform-%1$s.quform-theme-light .quform-loading-type-spinner-3 .quform-loading-spinner:after {
241: color: %2$s;
242: }
243: .quform-%1$s.quform-theme-light .quform-loading-type-spinner-4 .quform-loading-spinner:after {
244: background-color: %2$s;
245: }
246: .quform-%1$s.quform-theme-light .quform-loading-type-spinner-5 .quform-loading-spinner {
247: border-left-color: %2$s;
248: }
249: .quform-%1$s.quform-theme-light .quform-loading-type-spinner-6 .quform-loading-spinner-inner {
250: color: %2$s;
251: }
252: .quform-%1$s.quform-theme-light .quform-loading-type-spinner-7 .quform-loading-spinner-inner,
253: .quform-%1$s.quform-theme-light .quform-loading-type-spinner-7 .quform-loading-spinner-inner:before,
254: .quform-%1$s.quform-theme-light .quform-loading-type-spinner-7 .quform-loading-spinner-inner:after {
255: background-color: %2$s;
256: color: %2$s;
257: }
258: .quform-%1$s.quform-theme-light .quform-loading-type-custom .quform-loading-inner {
259: color: %2$s;
260: }
261: .quform-%1$s.quform-theme-light .quform-referral-link a:hover {
262: color: %2$s;
263: }';
264: break;
265: case 'dark':
266: $css .= '.quform-%1$s.quform-theme-dark .quform-page-progress-bar {
267: background-color: %2$s;
268: }
269: .quform-%1$s.quform-theme-dark .quform-page-progress-tab.quform-current-tab {
270: color: %2$s;
271: }
272: .quform-%1$s.quform-theme-dark .select2-container--quform.select2-container--open .select2-selection,
273: .quform-%1$s-timepicker.quform-theme-dark.quform-timepicker.k-list-container.k-popup,
274: .quform-%1$s.quform-theme-dark .quform-field-text:active,
275: .quform-%1$s.quform-theme-dark .quform-field-captcha:active,
276: .quform-%1$s.quform-theme-dark .quform-field-password:active,
277: .quform-%1$s.quform-theme-dark .quform-field-textarea:active,
278: .quform-%1$s.quform-theme-dark .quform-field-email:active,
279: .quform-%1$s.quform-theme-dark .quform-field-date:active,
280: .quform-%1$s.quform-theme-dark .quform-field-time:active,
281: .quform-%1$s.quform-theme-dark .quform-field-select:active,
282: .quform-%1$s.quform-theme-dark .quform-field-multiselect:active,
283: .quform-%1$s.quform-theme-dark .quform-field-text:focus,
284: .quform-%1$s.quform-theme-dark .quform-field-captcha:focus,
285: .quform-%1$s.quform-theme-dark .quform-field-password:focus,
286: .quform-%1$s.quform-theme-dark .quform-field-textarea:focus,
287: .quform-%1$s.quform-theme-dark .quform-field-email:focus,
288: .quform-%1$s.quform-theme-dark .quform-field-date:focus,
289: .quform-%1$s.quform-theme-dark .quform-field-time:focus,
290: .quform-%1$s.quform-theme-dark .quform-field-select:focus,
291: .quform-%1$s.quform-theme-dark .quform-field-multiselect:focus {
292: border-color: %2$s;
293: box-shadow: 0 0 16px -8px %2$s;
294: }
295: .quform-%1$s.quform-theme-dark .quform-upload-progress-bar {
296: background-color: %2$s;
297: }
298: .quform-%1$s.quform-theme-dark .quform-upload-file {
299: background-color: %2$s;
300: }
301: .quform-%1$s-select2.quform-theme-dark.select2-container--quform .select2-dropdown {
302: border: 2px solid %2$s;
303: }
304: .quform-%1$s-select2.quform-theme-dark.select2-container--quform .select2-dropdown--above {
305: border: 2px solid %2$s;
306: border-bottom: transparent;
307: }
308: .quform-%1$s-select2.quform-theme-dark.select2-container--quform .select2-dropdown--below {
309: border: 2px solid %2$s;
310: border-top: transparent;
311: }
312: .quform-%1$s-datepicker.quform-theme-dark.quform-datepicker .k-calendar .k-header,
313: .quform-%1$s-datepicker.quform-theme-dark.quform-datepicker .k-calendar .k-footer,
314: .quform-%1$s-datepicker.quform-theme-dark.quform-datepicker .k-calendar .k-header .k-state-hover {
315: background-color: %2$s;
316: }
317: .quform-%1$s-timepicker.quform-theme-dark.quform-timepicker.k-popup ul.k-list li.k-item.k-state-selected {
318: color: %2$s;
319: }
320: .quform-%1$s-datepicker.quform-theme-dark.quform-datepicker .k-calendar .k-content .k-link:hover,
321: .quform-%1$s-datepicker.quform-theme-dark.quform-datepicker .k-calendar td.k-state-focused .k-link,
322: .quform-%1$s-datepicker.quform-theme-dark.quform-datepicker .k-calendar td.k-state-selected.k-state-focused .k-link {
323: color: %2$s;
324: }
325: .quform-%1$s.quform-theme-dark .quform-button-style-theme .quform-upload-button,
326: .quform-%1$s.quform-theme-dark .quform-options-style-button .quform-option-label,
327: .quform-%1$s.quform-theme-dark .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
328: .quform-%1$s.quform-theme-dark .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
329: .quform-%1$s.quform-theme-dark .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
330: background-color: %2$s;
331: }
332: .quform-%1$s.quform-theme-dark .quform-loading-type-spinner-1 .quform-loading-spinner,
333: .quform-%1$s.quform-theme-dark .quform-loading-type-spinner-1 .quform-loading-spinner:after {
334: border-top-color: %2$s;
335: }
336: .quform-%1$s.quform-theme-dark .quform-loading-type-spinner-2 .quform-loading-spinner {
337: background-color: %2$s;
338: }
339: .quform-%1$s.quform-theme-dark .quform-loading-type-spinner-3 .quform-loading-spinner,
340: .quform-%1$s.quform-theme-dark .quform-loading-type-spinner-3 .quform-loading-spinner:after {
341: color: %2$s;
342: }
343: .quform-%1$s.quform-theme-dark .quform-loading-type-spinner-4 .quform-loading-spinner:after {
344: background-color: %2$s;
345: }
346: .quform-%1$s.quform-theme-dark .quform-loading-type-spinner-5 .quform-loading-spinner {
347: border-left-color: %2$s;
348: }
349: .quform-%1$s.quform-theme-dark .quform-loading-type-spinner-6 .quform-loading-spinner-inner {
350: color: %2$s;
351: }
352: .quform-%1$s.quform-theme-dark .quform-loading-type-spinner-7 .quform-loading-spinner-inner,
353: .quform-%1$s.quform-theme-dark .quform-loading-type-spinner-7 .quform-loading-spinner-inner:before,
354: .quform-%1$s.quform-theme-dark .quform-loading-type-spinner-7 .quform-loading-spinner-inner:after {
355: background-color: %2$s;
356: color: %2$s;
357: }
358: .quform-%1$s.quform-theme-dark .quform-loading-type-custom .quform-loading-inner {
359: color: %2$s;
360: }
361: .quform-%1$s.quform-theme-dark .quform-referral-link a:hover {
362: color: %2$s;
363: }';
364: break;
365: case 'hollow':
366: $css .= '.quform-%1$s.quform-theme-hollow .quform-page-progress-bar {
367: background-color: %2$s;
368: }
369: .quform-%1$s.quform-theme-hollow .quform-page-progress-tab.quform-current-tab {
370: color: %2$s;
371: }
372: .quform-%1$s.quform-theme-hollow .select2-container--quform .select2-selection,
373: .quform-%1$s-timepicker.quform-theme-hollow.quform-timepicker.k-list-container.k-popup,
374: .quform-%1$s.quform-theme-hollow .quform-field-text,
375: .quform-%1$s.quform-theme-hollow .quform-field-captcha,
376: .quform-%1$s.quform-theme-hollow .quform-field-password,
377: .quform-%1$s.quform-theme-hollow .quform-field-textarea,
378: .quform-%1$s.quform-theme-hollow .quform-field-email,
379: .quform-%1$s.quform-theme-hollow .quform-field-date,
380: .quform-%1$s.quform-theme-hollow .quform-field-time,
381: .quform-%1$s.quform-theme-hollow .quform-field-select,
382: .quform-%1$s.quform-theme-hollow .quform-field-multiselect {
383: border: 3px solid %2$s;
384: }
385: .quform-%1$s.quform-theme-hollow .quform-field-icon {
386: background-color: %2$s;
387: }
388: .quform-%1$s.quform-theme-hollow .select2-container--quform .select2-selection:hover,
389: .quform-%1$s.quform-theme-hollow .quform-field-text:hover,
390: .quform-%1$s.quform-theme-hollow .quform-field-captcha:hover,
391: .quform-%1$s.quform-theme-hollow .quform-field-password:hover,
392: .quform-%1$s.quform-theme-hollow .quform-field-textarea:hover,
393: .quform-%1$s.quform-theme-hollow .quform-field-email:hover,
394: .quform-%1$s.quform-theme-hollow .quform-field-date:hover,
395: .quform-%1$s.quform-theme-hollow .quform-field-time:hover,
396: .quform-%1$s.quform-theme-hollow .quform-field-select:hover,
397: .quform-%1$s.quform-theme-hollow .quform-field-multiselect:hover {
398: border-color: %2$s;
399: }
400: .quform-%1$s.quform-theme-hollow .select2-container--quform.select2-container--open .select2-selection,
401: .quform-%1$s-timepicker.quform-theme-hollow.quform-timepicker.k-list-container.k-popup,
402: .quform-%1$s.quform-theme-hollow .quform-field-text:active,
403: .quform-%1$s.quform-theme-hollow .quform-field-captcha:active,
404: .quform-%1$s.quform-theme-hollow .quform-field-password:active,
405: .quform-%1$s.quform-theme-hollow .quform-field-textarea:active,
406: .quform-%1$s.quform-theme-hollow .quform-field-email:active,
407: .quform-%1$s.quform-theme-hollow .quform-field-date:active,
408: .quform-%1$s.quform-theme-hollow .quform-field-time:active,
409: .quform-%1$s.quform-theme-hollow .quform-field-select:active,
410: .quform-%1$s.quform-theme-hollow .quform-field-multiselect:active,
411: .quform-%1$s.quform-theme-hollow .quform-field-text:focus,
412: .quform-%1$s.quform-theme-hollow .quform-field-captcha:focus,
413: .quform-%1$s.quform-theme-hollow .quform-field-password:focus,
414: .quform-%1$s.quform-theme-hollow .quform-field-textarea:focus,
415: .quform-%1$s.quform-theme-hollow .quform-field-email:focus,
416: .quform-%1$s.quform-theme-hollow .quform-field-date:focus,
417: .quform-%1$s.quform-theme-hollow .quform-field-time:focus,
418: .quform-%1$s.quform-theme-hollow .quform-field-select:focus,
419: .quform-%1$s.quform-theme-hollow .quform-field-multiselect:focus {
420: border: 3px solid %2$s;
421: }
422: .quform-%1$s.quform-theme-hollow .quform-upload-progress-bar {
423: background-color: %2$s;
424: }
425: .quform-%1$s.quform-theme-hollow .quform-upload-file {
426: background-color: %2$s;
427: }
428: .quform-%1$s.quform-theme-hollow .quform-upload-dropzone {
429: border-color: %2$s;
430: }
431: .quform-%1$s.quform-theme-hollow .select2-container--quform .select2-selection--multiple .select2-selection__choice {
432: background-color: %2$s;
433: border: 1px solid %2$s;
434: }
435: .quform-%1$s-select2.quform-theme-hollow.select2-container--quform .select2-dropdown {
436: border: 3px solid %2$s;
437: }
438: .quform-%1$s-select2.quform-theme-hollow.select2-container--quform .select2-dropdown--above {
439: border: 3px solid %2$s;
440: border-bottom: transparent;
441: }
442: .quform-%1$s-select2.quform-theme-hollow.select2-container--quform .select2-dropdown--below {
443: border: 3px solid %2$s;
444: border-top: transparent;
445: }
446: .quform-%1$s-select2.quform-theme-hollow.select2-container--quform .select2-results__option--highlighted[aria-selected] {
447: background-color: %2$s;
448: border-color: %2$s;
449: }
450: .quform-%1$s-datepicker.quform-theme-hollow.quform-datepicker .k-calendar .k-header,
451: .quform-%1$s-datepicker.quform-theme-hollow.quform-datepicker .k-calendar .k-footer,
452: .quform-%1$s-datepicker.quform-theme-hollow.quform-datepicker .k-calendar .k-header .k-state-hover {
453: background-color: %2$s;
454: }
455: .quform-%1$s-timepicker.quform-theme-hollow.quform-timepicker.k-popup ul.k-list li.k-item {
456: color: #000;
457: }
458: .quform-%1$s-timepicker.quform-theme-hollow.quform-timepicker.k-popup ul.k-list li.k-item.k-state-hover {
459: background-color: %2$s;
460: border-color: %2$s;
461: }
462: .quform-%1$s-datepicker.quform-theme-hollow.quform-datepicker .k-calendar td.k-state-focused,
463: .quform-%1$s-datepicker.quform-theme-hollow.quform-datepicker .k-calendar td.k-state-selected.k-state-focused {
464: background-color: %2$s;
465: }
466: .quform-%1$s.quform-theme-hollow .quform-group-style-plain > .quform-spacer > .quform-group-title-description .quform-group-title {
467: border-bottom: 2px solid %2$s;
468: }
469: .quform-%1$s.quform-theme-hollow .quform-group-style-bordered > .quform-spacer > .quform-group-title-description {
470: background-color: %2$s;
471: }
472: .quform-%1$s.quform-theme-hollow .quform-group-style-bordered > .quform-spacer > .quform-child-elements,
473: .quform-%1$s.quform-theme-hollow .quform-group-style-bordered > .quform-child-elements {
474: border: 2px solid %2$s;
475: }
476: .quform-%1$s.quform-theme-hollow .quform-button-style-theme .quform-upload-button,
477: .quform-%1$s.quform-theme-hollow .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
478: .quform-%1$s.quform-theme-hollow .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
479: .quform-%1$s.quform-theme-hollow .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
480: background-color: %2$s;
481: }
482: .quform-%1$s.quform-theme-hollow .quform-options-style-button .quform-option-label {
483: border: 2px solid %2$s;
484: }
485: .quform-%1$s.quform-theme-hollow .quform-options-style-button .quform-option-label:active,
486: .quform-%1$s.quform-theme-hollow .quform-options-style-button .quform-option-label:focus,
487: .quform-%1$s.quform-theme-hollow .quform-options-style-button .quform-field-checkbox:checked + label,
488: .quform-%1$s.quform-theme-hollow .quform-options-style-button .quform-field-radio:checked + label {
489: background-color: %2$s;
490: border: 2px solid %2$s;
491: }
492: .quform-%1$s.quform-theme-hollow .quform-button-style-theme .quform-upload-button:hover,
493: .quform-%1$s.quform-theme-hollow .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
494: .quform-%1$s.quform-theme-hollow .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
495: .quform-%1$s.quform-theme-hollow .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
496: background-color: %2$s;
497: }
498: .quform-%1$s.quform-theme-hollow .quform-loading-type-spinner-1 .quform-loading-spinner,
499: .quform-%1$s.quform-theme-hollow .quform-loading-type-spinner-1 .quform-loading-spinner:after {
500: border-top-color: %2$s;
501: }
502: .quform-%1$s.quform-theme-hollow .quform-loading-type-spinner-2 .quform-loading-spinner {
503: background-color: %2$s;
504: }
505: .quform-%1$s.quform-theme-hollow .quform-loading-type-spinner-3 .quform-loading-spinner,
506: .quform-%1$s.quform-theme-hollow .quform-loading-type-spinner-3 .quform-loading-spinner:after {
507: color: %2$s;
508: }
509: .quform-%1$s.quform-theme-hollow .quform-loading-type-spinner-4 .quform-loading-spinner:after {
510: background-color: %2$s;
511: }
512: .quform-%1$s.quform-theme-hollow .quform-loading-type-spinner-5 .quform-loading-spinner {
513: border-left-color: %2$s;
514: }
515: .quform-%1$s.quform-theme-hollow .quform-loading-type-spinner-6 .quform-loading-spinner-inner {
516: color: %2$s;
517: }
518: .quform-%1$s.quform-theme-hollow .quform-loading-type-spinner-7 .quform-loading-spinner-inner,
519: .quform-%1$s.quform-theme-hollow .quform-loading-type-spinner-7 .quform-loading-spinner-inner:before,
520: .quform-%1$s.quform-theme-hollow .quform-loading-type-spinner-7 .quform-loading-spinner-inner:after {
521: background-color: %2$s;
522: color: %2$s;
523: }
524: .quform-%1$s.quform-theme-hollow .quform-loading-type-custom .quform-loading-inner {
525: color: %2$s;
526: }
527: .quform-%1$s.quform-theme-hollow .quform-referral-link a:hover {
528: color: %2$s;
529: }';
530: break;
531: case 'underlined':
532: $css .= '.quform-%1$s.quform-theme-underlined .quform-page-progress {
533: border-bottom: 1px solid %2$s;
534: }
535: .quform-%1$s.quform-theme-underlined .quform-page-progress-bar {
536: border-bottom: 4px solid %2$s;
537: }
538: .quform-%1$s.quform-theme-underlined .quform-page-progress-tab.quform-current-tab {
539: color: %2$s;
540: }
541: .quform-%1$s.quform-theme-underlined .select2-container--quform .select2-selection,
542: .quform-%1$s.quform-theme-underlined .quform-field-text,
543: .quform-%1$s.quform-theme-underlined .quform-field-captcha,
544: .quform-%1$s.quform-theme-underlined .quform-field-password,
545: .quform-%1$s.quform-theme-underlined .quform-field-textarea,
546: .quform-%1$s.quform-theme-underlined .quform-field-email,
547: .quform-%1$s.quform-theme-underlined .quform-field-date,
548: .quform-%1$s.quform-theme-underlined .quform-field-time,
549: .quform-%1$s.quform-theme-underlined .quform-field-select,
550: .quform-%1$s.quform-theme-underlined .quform-field-multiselect {
551: border-bottom: 2px solid %2$s;
552: color: %2$s;
553: }
554: .quform-%1$s-timepicker.quform-theme-underlined.quform-timepicker.k-list-container.k-popup {
555: border-color: %2$s;
556: }
557: .quform-%1$s.quform-theme-underlined .quform-upload-progress-bar {
558: background-color: %2$s;
559: border-bottom: 2px solid %2$s;
560: }
561: .quform-%1$s.quform-theme-underlined .quform-upload-file {
562: background-color: %2$s;
563: }
564: .quform-%1$s.quform-theme-underlined .quform-upload-dropzone {
565: border-color: %2$s;
566: }
567: .quform-%1$s.quform-theme-underlined .select2-container--quform .select2-selection--multiple .select2-selection__choice {
568: background: %2$s;
569: border: 1px solid %2$s;
570: }
571: .quform-%1$s-select2.quform-theme-underlined.select2-container--quform .select2-dropdown {
572: border: 2px solid %2$s;
573: }
574: .quform-%1$s-select2.quform-theme-underlined.select2-container--quform .select2-dropdown--above {
575: border: 2px solid %2$s;
576: }
577: .quform-%1$s-select2.quform-theme-underlined.select2-container--quform .select2-dropdown--below {
578: border: 2px solid %2$s;
579: }
580: .quform-%1$s-datepicker.quform-theme-underlined.quform-datepicker .k-calendar .k-header,
581: .quform-%1$s-datepicker.quform-theme-underlined.quform-datepicker .k-calendar .k-footer,
582: .quform-%1$s-datepicker.quform-theme-underlined.quform-datepicker .k-calendar .k-header .k-state-hover {
583: background-color: %2$s;
584: }
585: .quform-%1$s-timepicker.quform-theme-underlined.quform-timepicker.k-popup ul.k-list li.k-item.k-state-selected {
586: color: %2$s;
587: }
588: .quform-%1$s-datepicker.quform-theme-underlined.quform-datepicker .k-calendar td.k-state-focused .k-link,
589: .quform-%1$s-datepicker.quform-theme-underlined.quform-datepicker .k-calendar td.k-state-selected.k-state-focused .k-link {
590: color: %2$s;
591: }
592: .quform-%1$s.quform-theme-underlined .quform-group-style-bordered > .quform-spacer > .quform-child-elements,
593: .quform-%1$s.quform-theme-underlined .quform-group-style-bordered > .quform-child-elements {
594: border: 4px solid %2$s;
595: }
596: .quform-%1$s.quform-theme-underlined .quform-button-style-theme .quform-upload-button,
597: .quform-%1$s.quform-theme-underlined .quform-options-style-button .quform-option-label,
598: .quform-%1$s.quform-theme-underlined .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
599: .quform-%1$s.quform-theme-underlined .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
600: .quform-%1$s.quform-theme-underlined .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
601: border: 2px solid %2$s;
602: }
603: .quform-%1$s.quform-theme-underlined .quform-loading-type-spinner-1 .quform-loading-spinner,
604: .quform-%1$s.quform-theme-underlined .quform-loading-type-spinner-1 .quform-loading-spinner:after {
605: border-top-color: %2$s;
606: }
607: .quform-%1$s.quform-theme-underlined .quform-loading-type-spinner-2 .quform-loading-spinner {
608: background-color: %2$s;
609: }
610: .quform-%1$s.quform-theme-underlined .quform-loading-type-spinner-3 .quform-loading-spinner,
611: .quform-%1$s.quform-theme-underlined .quform-loading-type-spinner-3 .quform-loading-spinner:after {
612: color: %2$s;
613: }
614: .quform-%1$s.quform-theme-underlined .quform-loading-type-spinner-4 .quform-loading-spinner:after {
615: background-color: %2$s;
616: }
617: .quform-%1$s.quform-theme-underlined .quform-loading-type-spinner-5 .quform-loading-spinner {
618: border-left-color: %2$s;
619: }
620: .quform-%1$s.quform-theme-underlined .quform-loading-type-spinner-6 .quform-loading-spinner-inner {
621: color: %2$s;
622: }
623: .quform-%1$s.quform-theme-underlined .quform-loading-type-spinner-7 .quform-loading-spinner-inner,
624: .quform-%1$s.quform-theme-underlined .quform-loading-type-spinner-7 .quform-loading-spinner-inner:before,
625: .quform-%1$s.quform-theme-underlined .quform-loading-type-spinner-7 .quform-loading-spinner-inner:after {
626: background-color: %2$s;
627: color: %2$s;
628: }
629: .quform-%1$s.quform-theme-underlined .quform-loading-type-custom .quform-loading-inner {
630: color: %2$s;
631: }
632: .quform-%1$s.quform-theme-underlined .quform-referral-link a:hover {
633: color: %2$s;
634: }';
635: break;
636: case 'simple':
637: $css .= '.quform-%1$s.quform-theme-simple .quform-page-progress-bar {
638: background-color: %2$s;
639: }
640: .quform-%1$s.quform-theme-simple .quform-page-progress-tab.quform-current-tab {
641: color: %2$s;
642: }
643: .quform-%1$s.quform-theme-simple .select2-container--quform.select2-container--open .select2-selection,
644: .quform-%1$s-timepicker.quform-theme-simple.quform-timepicker.k-list-container.k-popup,
645: .quform-%1$s.quform-theme-simple .quform-field-text:active,
646: .quform-%1$s.quform-theme-simple .quform-field-captcha:active,
647: .quform-%1$s.quform-theme-simple .quform-field-password:active,
648: .quform-%1$s.quform-theme-simple .quform-field-textarea:active,
649: .quform-%1$s.quform-theme-simple .quform-field-email:active,
650: .quform-%1$s.quform-theme-simple .quform-field-date:active,
651: .quform-%1$s.quform-theme-simple .quform-field-time:active,
652: .quform-%1$s.quform-theme-simple .quform-field-select:active,
653: .quform-%1$s.quform-theme-simple .quform-field-multiselect:active,
654: .quform-%1$s.quform-theme-simple .quform-field-text:focus,
655: .quform-%1$s.quform-theme-simple .quform-field-captcha:focus,
656: .quform-%1$s.quform-theme-simple .quform-field-password:focus,
657: .quform-%1$s.quform-theme-simple .quform-field-textarea:focus,
658: .quform-%1$s.quform-theme-simple .quform-field-email:focus,
659: .quform-%1$s.quform-theme-simple .quform-field-date:focus,
660: .quform-%1$s.quform-theme-simple .quform-field-time:focus,
661: .quform-%1$s.quform-theme-simple .quform-field-select:focus,
662: .quform-%1$s.quform-theme-simple .quform-field-multiselect:focus {
663: border-color: %2$s;
664: box-shadow: 0 0 14px -8px %2$s, 0 1px 6px 0 rgba(0, 0, 0, 0.07) inset;
665: }
666: .quform-%1$s.quform-theme-simple .quform-upload-progress-bar {
667: background-color: %2$s;
668: }
669: .quform-%1$s.quform-theme-simple .quform-upload-file {
670: background-color: %2$s;
671: }
672: .quform-%1$s-select2.quform-theme-simple.select2-container--quform .select2-dropdown--above {
673: border: 1px solid %2$s;
674: border-bottom: transparent;
675: box-shadow: 0 -3px 14px -8px %2$s, 0 1px 6px 0 rgba(0, 0, 0, 0.07) inset;
676: }
677: .quform-%1$s-select2.quform-theme-simple.select2-container--quform .select2-dropdown--below {
678: border: 1px solid %2$s;
679: border-top: transparent;
680: box-shadow: 0 3px 14px -8px %2$s, 0 1px 6px 0 rgba(0, 0, 0, 0.07) inset;
681: }
682: .quform-%1$s-datepicker.quform-theme-simple.quform-datepicker .k-calendar .k-header,
683: .quform-%1$s-datepicker.quform-theme-simple.quform-datepicker .k-calendar .k-footer,
684: .quform-%1$s-datepicker.quform-theme-simple.quform-datepicker .k-calendar .k-header .k-state-hover {
685: background-color: %2$s;
686: }
687: .quform-%1$s-datepicker.quform-theme-simple.quform-datepicker .k-calendar td.k-state-focused .k-link,
688: .quform-%1$s-datepicker.quform-theme-simple.quform-datepicker .k-calendar td.k-state-selected.k-state-focused .k-link {
689: color: %2$s;
690: }
691: .quform-%1$s.quform-theme-simple .quform-button-style-theme .quform-upload-button,
692: .quform-%1$s.quform-theme-simple .quform-options-style-button .quform-option-label,
693: .quform-%1$s.quform-theme-simple .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
694: .quform-%1$s.quform-theme-simple .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
695: .quform-%1$s.quform-theme-simple .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
696: background-color: %2$s;
697: }
698: .quform-%1$s.quform-theme-simple .quform-loading-type-spinner-1 .quform-loading-spinner,
699: .quform-%1$s.quform-theme-simple .quform-loading-type-spinner-1 .quform-loading-spinner:after {
700: border-top-color: %2$s;
701: }
702: .quform-%1$s.quform-theme-simple .quform-loading-type-spinner-2 .quform-loading-spinner {
703: background-color: %2$s;
704: }
705: .quform-%1$s.quform-theme-simple .quform-loading-type-spinner-3 .quform-loading-spinner,
706: .quform-%1$s.quform-theme-simple .quform-loading-type-spinner-3 .quform-loading-spinner:after {
707: color: %2$s;
708: }
709: .quform-%1$s.quform-theme-simple .quform-loading-type-spinner-4 .quform-loading-spinner:after {
710: background-color: %2$s;
711: }
712: .quform-%1$s.quform-theme-simple .quform-loading-type-spinner-5 .quform-loading-spinner {
713: border-left-color: %2$s;
714: }
715: .quform-%1$s.quform-theme-simple .quform-loading-type-spinner-6 .quform-loading-spinner-inner {
716: color: %2$s;
717: }
718: .quform-%1$s.quform-theme-simple .quform-loading-type-spinner-7 .quform-loading-spinner-inner,
719: .quform-%1$s.quform-theme-simple .quform-loading-type-spinner-7 .quform-loading-spinner-inner:before,
720: .quform-%1$s.quform-theme-simple .quform-loading-type-spinner-7 .quform-loading-spinner-inner:after {
721: background-color: %2$s;
722: color: %2$s;
723: }
724: .quform-%1$s.quform-theme-simple .quform-loading-type-custom .quform-loading-inner {
725: color: %2$s;
726: }
727: .quform-%1$s.quform-theme-simple .quform-referral-link a:hover {
728: color: %2$s;
729: }';
730: break;
731: case 'react':
732: $css .= '.quform-%1$s.quform-theme-react .quform-page-progress-bar {
733: background-color: %2$s;
734: }
735: .quform-%1$s.quform-theme-react .quform-page-progress-tab.quform-current-tab {
736: color: %2$s;
737: }
738: .quform-%1$s.quform-theme-react .select2-container--quform.select2-container--open .select2-selection,
739: .quform-%1$s-timepicker.quform-theme-react.quform-timepicker.k-list-container.k-popup,
740: .quform-%1$s.quform-theme-react .quform-field-text:active,
741: .quform-%1$s.quform-theme-react .quform-field-captcha:active,
742: .quform-%1$s.quform-theme-react .quform-field-password:active,
743: .quform-%1$s.quform-theme-react .quform-field-textarea:active,
744: .quform-%1$s.quform-theme-react .quform-field-email:active,
745: .quform-%1$s.quform-theme-react .quform-field-date:active,
746: .quform-%1$s.quform-theme-react .quform-field-time:active,
747: .quform-%1$s.quform-theme-react .quform-field-select:active,
748: .quform-%1$s.quform-theme-react .quform-field-multiselect:active,
749: .quform-%1$s.quform-theme-react .quform-field-text:focus,
750: .quform-%1$s.quform-theme-react .quform-field-captcha:focus,
751: .quform-%1$s.quform-theme-react .quform-field-password:focus,
752: .quform-%1$s.quform-theme-react .quform-field-textarea:focus,
753: .quform-%1$s.quform-theme-react .quform-field-email:focus,
754: .quform-%1$s.quform-theme-react .quform-field-date:focus,
755: .quform-%1$s.quform-theme-react .quform-field-time:focus,
756: .quform-%1$s.quform-theme-react .quform-field-select:focus,
757: .quform-%1$s.quform-theme-react .quform-field-multiselect:focus {
758: border-color: %2$s;
759: }
760: .quform-%1$s.quform-theme-react .quform-upload-progress-bar {
761: background-color: %2$s;
762: }
763: .quform-%1$s.quform-theme-react .quform-upload-file {
764: background-color: %2$s;
765: }
766: .quform-%1$s-select2.quform-theme-react.select2-container--quform .select2-dropdown {
767: border: 2px solid %2$s;
768: }
769: .quform-%1$s-select2.quform-theme-react.select2-container--quform .select2-dropdown--above {
770: border: 2px solid %2$s;
771: }
772: .quform-%1$s-select2.quform-theme-react.select2-container--quform .select2-dropdown--below {
773: border: 2px solid %2$s;
774: }
775: .quform-%1$s-datepicker.quform-theme-react.quform-datepicker .k-calendar .k-header,
776: .quform-%1$s-datepicker.quform-theme-react.quform-datepicker .k-calendar .k-footer,
777: .quform-%1$s-datepicker.quform-theme-react.quform-datepicker .k-calendar .k-header .k-state-hover {
778: background-color: %2$s;
779: }
780: .quform-%1$s-timepicker.quform-theme-react.quform-timepicker.k-popup ul.k-list li.k-item.k-state-selected {
781: color: %2$s;
782: }
783: .quform-%1$s-datepicker.quform-theme-react.quform-datepicker .k-calendar td.k-state-focused .k-link,
784: .quform-%1$s-datepicker.quform-theme-react.quform-datepicker .k-calendar td.k-state-selected.k-state-focused .k-link {
785: color: %2$s;
786: }
787: .quform-%1$s.quform-theme-react .quform-button-style-theme .quform-upload-button,
788: .quform-%1$s.quform-theme-react .quform-options-style-button .quform-option-label,
789: .quform-%1$s.quform-theme-react .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
790: .quform-%1$s.quform-theme-react .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
791: .quform-%1$s.quform-theme-react .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
792: background-color: %2$s;
793: box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.4) inset, 0 2px 3px 0 rgba(0, 0, 0, 0.1);
794: }
795: .quform-%1$s.quform-theme-react .quform-loading-type-spinner-1 .quform-loading-spinner,
796: .quform-%1$s.quform-theme-react .quform-loading-type-spinner-1 .quform-loading-spinner:after {
797: border-top-color: %2$s;
798: }
799: .quform-%1$s.quform-theme-react .quform-loading-type-spinner-2 .quform-loading-spinner {
800: background-color: %2$s;
801: }
802: .quform-%1$s.quform-theme-react .quform-loading-type-spinner-3 .quform-loading-spinner,
803: .quform-%1$s.quform-theme-react .quform-loading-type-spinner-3 .quform-loading-spinner:after {
804: color: %2$s;
805: }
806: .quform-%1$s.quform-theme-react .quform-loading-type-spinner-4 .quform-loading-spinner:after {
807: background-color: %2$s;
808: }
809: .quform-%1$s.quform-theme-react .quform-loading-type-spinner-5 .quform-loading-spinner {
810: border-left-color: %2$s;
811: }
812: .quform-%1$s.quform-theme-react .quform-loading-type-spinner-6 .quform-loading-spinner-inner {
813: color: %2$s;
814: }
815: .quform-%1$s.quform-theme-react .quform-loading-type-spinner-7 .quform-loading-spinner-inner,
816: .quform-%1$s.quform-theme-react .quform-loading-type-spinner-7 .quform-loading-spinner-inner:before,
817: .quform-%1$s.quform-theme-react .quform-loading-type-spinner-7 .quform-loading-spinner-inner:after {
818: background-color: %2$s;
819: color: %2$s;
820: }
821: .quform-%1$s.quform-theme-react .quform-loading-type-custom .quform-loading-inner {
822: color: %2$s;
823: }
824: .quform-%1$s.quform-theme-react .quform-referral-link a:hover {
825: color: %2$s;
826: }';
827: break;
828: case 'bootstrap':
829: $css .= '.quform-%1$s.quform-theme-bootstrap .quform-page-progress-bar {
830: background-color: %2$s;
831: }
832: .quform-%1$s.quform-theme-bootstrap .quform-page-progress-tab.quform-current-tab {
833: color: %2$s;
834: }
835: .quform-%1$s.quform-theme-bootstrap .select2-container--quform.select2-container--open .select2-selection,
836: .quform-%1$s-timepicker.quform-theme-bootstrap.quform-timepicker.k-list-container.k-popup,
837: .quform-%1$s.quform-theme-bootstrap .quform-field-text:active,
838: .quform-%1$s.quform-theme-bootstrap .quform-field-captcha:active,
839: .quform-%1$s.quform-theme-bootstrap .quform-field-password:active,
840: .quform-%1$s.quform-theme-bootstrap .quform-field-textarea:active,
841: .quform-%1$s.quform-theme-bootstrap .quform-field-email:active,
842: .quform-%1$s.quform-theme-bootstrap .quform-field-date:active,
843: .quform-%1$s.quform-theme-bootstrap .quform-field-time:active,
844: .quform-%1$s.quform-theme-bootstrap .quform-field-select:active,
845: .quform-%1$s.quform-theme-bootstrap .quform-field-multiselect:active,
846: .quform-%1$s.quform-theme-bootstrap .quform-field-text:focus,
847: .quform-%1$s.quform-theme-bootstrap .quform-field-captcha:focus,
848: .quform-%1$s.quform-theme-bootstrap .quform-field-password:focus,
849: .quform-%1$s.quform-theme-bootstrap .quform-field-textarea:focus,
850: .quform-%1$s.quform-theme-bootstrap .quform-field-email:focus,
851: .quform-%1$s.quform-theme-bootstrap .quform-field-date:focus,
852: .quform-%1$s.quform-theme-bootstrap .quform-field-time:focus,
853: .quform-%1$s.quform-theme-bootstrap .quform-field-select:focus,
854: .quform-%1$s.quform-theme-bootstrap .quform-field-multiselect:focus {
855: border-color: %2$s;
856: box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 16px -8px %2$s;
857: }
858: .quform-%1$s.quform-theme-bootstrap .quform-button-style-theme .quform-upload-button,
859: .quform-%1$s.quform-theme-bootstrap .quform-options-style-button .quform-option-label,
860: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
861: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
862: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
863: background-color: %2$s;
864: }
865:
866: .quform-%1$s.quform-theme-bootstrap .quform-options-style-button .quform-field-checkbox:checked + label,
867: .quform-%1$s.quform-theme-bootstrap .quform-options-style-button .quform-field-radio:checked + label {
868: background-image: none;
869: }
870: .quform-%1$s-datepicker.quform-theme-bootstrap.quform-datepicker .k-calendar .k-header,
871: .quform-%1$s-datepicker.quform-theme-bootstrap.quform-datepicker .k-calendar .k-footer,
872: .quform-%1$s-datepicker.quform-theme-bootstrap.quform-datepicker .k-calendar .k-header .k-state-hover {
873: background-color: %2$s;
874: }
875: .quform-%1$s-timepicker.quform-theme-bootstrap.quform-timepicker.k-popup ul.k-list li.k-item.k-state-selected {
876: color: %2$s;
877: }
878: .quform-%1$s-datepicker.quform-theme-bootstrap.quform-datepicker .k-calendar td.k-state-focused .k-link,
879: .quform-%1$s-datepicker.quform-theme-bootstrap.quform-datepicker .k-calendar td.k-state-selected.k-state-focused .k-link {
880: color: %2$s;
881: }
882: .quform-%1$s-select2.quform-theme-bootstrap.select2-container--quform .select2-dropdown {
883: box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 4px 16px -8px %2$s;
884: }
885: .quform-%1$s-select2.quform-theme-bootstrap.select2-container--quform .select2-dropdown--above {
886: border: 1px solid %2$s;
887: border-bottom: transparent;
888: }
889: .quform-%1$s-select2.quform-theme-bootstrap.select2-container--quform .select2-dropdown--below {
890: border: 1px solid %2$s;
891: border-top: transparent;
892: }
893: .quform-%1$s.quform-theme-bootstrap .quform-loading-type-spinner-1 .quform-loading-spinner,
894: .quform-%1$s.quform-theme-bootstrap .quform-loading-type-spinner-1 .quform-loading-spinner:after {
895: border-top-color: %2$s;
896: }
897: .quform-%1$s.quform-theme-bootstrap .quform-loading-type-spinner-2 .quform-loading-spinner {
898: background-color: %2$s;
899: }
900: .quform-%1$s.quform-theme-bootstrap .quform-loading-type-spinner-3 .quform-loading-spinner,
901: .quform-%1$s.quform-theme-bootstrap .quform-loading-type-spinner-3 .quform-loading-spinner:after {
902: color: %2$s;
903: }
904: .quform-%1$s.quform-theme-bootstrap .quform-loading-type-spinner-4 .quform-loading-spinner:after {
905: background-color: %2$s;
906: }
907: .quform-%1$s.quform-theme-bootstrap .quform-loading-type-spinner-5 .quform-loading-spinner {
908: border-left-color: %2$s;
909: }
910: .quform-%1$s.quform-theme-bootstrap .quform-loading-type-spinner-6 .quform-loading-spinner-inner {
911: color: %2$s;
912: }
913: .quform-%1$s.quform-theme-bootstrap .quform-loading-type-spinner-7 .quform-loading-spinner-inner,
914: .quform-%1$s.quform-theme-bootstrap .quform-loading-type-spinner-7 .quform-loading-spinner-inner:before,
915: .quform-%1$s.quform-theme-bootstrap .quform-loading-type-spinner-7 .quform-loading-spinner-inner:after {
916: background-color: %2$s;
917: color: %2$s;
918: }
919: .quform-%1$s.quform-theme-bootstrap .quform-loading-type-custom .quform-loading-inner {
920: color: %2$s;
921: }
922: .quform-%1$s.quform-theme-bootstrap .quform-referral-link a:hover {
923: color: %2$s;
924: }';
925: break;
926: case 'shine-gradient':
927: $css .= '.quform-%1$s.quform-theme-shine-gradient .quform-page-progress-bar {
928: background-color: %2$s;
929: }
930: .quform-%1$s.quform-theme-shine-gradient .quform-page-progress-tab.quform-current-tab {
931: color: %2$s;
932: }
933: .quform-%1$s.quform-theme-shine-gradient .quform-upload-progress-bar {
934: background-color: %2$s;
935: }
936: .quform-%1$s.quform-theme-shine-gradient .quform-upload-file {
937: background-color: %2$s;
938: }
939: .quform-%1$s.quform-theme-shine-gradient .quform-button-style-theme .quform-upload-button,
940: .quform-%1$s.quform-theme-shine-gradient .quform-options-style-button .quform-option-label,
941: .quform-%1$s.quform-theme-shine-gradient .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
942: .quform-%1$s.quform-theme-shine-gradient .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
943: .quform-%1$s.quform-theme-shine-gradient .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
944: background-color: %2$s;
945: }
946: .quform-%1$s.quform-theme-shine-gradient .quform-button-style-theme .quform-upload-button:hover,
947: .quform-%1$s.quform-theme-shine-gradient .quform-options-style-button .quform-option-label:active,
948: .quform-%1$s.quform-theme-shine-gradient .quform-options-style-button .quform-option-label:focus,
949: .quform-%1$s.quform-theme-shine-gradient .quform-options-style-button .quform-field-checkbox:checked + label,
950: .quform-%1$s.quform-theme-shine-gradient .quform-options-style-button .quform-field-radio:checked + label,
951: .quform-%1$s.quform-theme-shine-gradient .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
952: .quform-%1$s.quform-theme-shine-gradient .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
953: .quform-%1$s.quform-theme-shine-gradient .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
954: background-color: #41484f;
955: }
956: .quform-%1$s.quform-theme-shine-gradient .quform-referral-link a:hover {
957: color: %2$s;
958: }';
959: break;
960: case 'blend-gradient':
961: $css .= '.quform-%1$s.quform-theme-blend-gradient .quform-page-progress-bar {
962: background-color: %2$s;
963: }
964: .quform-%1$s.quform-theme-blend-gradient .quform-page-progress-tab.quform-current-tab {
965: color: %2$s;
966: }
967: .quform-%1$s.quform-theme-blend-gradient .quform-upload-progress-bar {
968: background-color: %2$s;
969: }
970: .quform-%1$s.quform-theme-blend-gradient .quform-upload-file {
971: background-color: %2$s;
972: }
973: .quform-%1$s.quform-theme-blend-gradient .quform-button-style-theme .quform-upload-button,
974: .quform-%1$s.quform-theme-blend-gradient .quform-options-style-button .quform-option-label,
975: .quform-%1$s.quform-theme-blend-gradient .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
976: .quform-%1$s.quform-theme-blend-gradient .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
977: .quform-%1$s.quform-theme-blend-gradient .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
978: background-color: %2$s;
979: }
980: .quform-%1$s.quform-theme-blend-gradient .quform-button-style-theme .quform-upload-button:hover,
981: .quform-%1$s.quform-theme-blend-gradient .quform-options-style-button .quform-option-label:active,
982: .quform-%1$s.quform-theme-blend-gradient .quform-options-style-button .quform-option-label:focus,
983: .quform-%1$s.quform-theme-blend-gradient .quform-options-style-button .quform-field-checkbox:checked + label,
984: .quform-%1$s.quform-theme-blend-gradient .quform-options-style-button .quform-field-radio:checked + label,
985: .quform-%1$s.quform-theme-blend-gradient .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
986: .quform-%1$s.quform-theme-blend-gradient .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
987: .quform-%1$s.quform-theme-blend-gradient .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
988: background-color: #41484f;
989: }
990: .quform-%1$s.quform-theme-blend-gradient .quform-referral-link a:hover {
991: color: %2$s;
992: }';
993: break;
994: case 'storm':
995: $css .= '.quform-%1$s.quform-theme-storm .quform-page-progress-bar {
996: background-color: %2$s;
997: }
998: .quform-%1$s.quform-theme-storm .quform-page-progress-tab.quform-current-tab {
999: color: %2$s;
1000: }
1001: .quform-%1$s.quform-theme-storm .quform-upload-progress-bar {
1002: background-color: %2$s;
1003: }
1004: .quform-%1$s.quform-theme-storm .quform-upload-file {
1005: background-color: %2$s;
1006: }
1007: .quform-%1$s-datepicker.quform-theme-storm.quform-datepicker .k-calendar .k-header,
1008: .quform-%1$s-datepicker.quform-theme-storm.quform-datepicker .k-calendar .k-footer,
1009: .quform-%1$s-datepicker.quform-theme-storm.quform-datepicker .k-calendar .k-header .k-state-hover {
1010: background-color: %2$s;
1011: }
1012: .quform-%1$s-datepicker.quform-theme-storm.quform-datepicker .k-calendar .k-content .k-link:hover {
1013: color: %2$s;
1014: }
1015: .quform-%1$s-timepicker.quform-theme-storm.quform-timepicker.k-popup ul.k-list li.k-item.k-state-selected {
1016: color: %2$s;
1017: }
1018: .quform-%1$s-datepicker.quform-theme-storm.quform-datepicker .k-calendar td.k-state-focused .k-link,
1019: .quform-%1$s-datepicker.quform-theme-storm.quform-datepicker .k-calendar td.k-state-selected.k-state-focused .k-link {
1020: color: %2$s;
1021: }
1022: .quform-%1$s.quform-theme-storm .quform-loading-type-spinner-1 .quform-loading-spinner,
1023: .quform-%1$s.quform-theme-storm .quform-loading-type-spinner-1 .quform-loading-spinner:after {
1024: border-top-color: %2$s;
1025: }
1026: .quform-%1$s.quform-theme-storm .quform-loading-type-spinner-2 .quform-loading-spinner {
1027: background-color: %2$s;
1028: }
1029: .quform-%1$s.quform-theme-storm .quform-loading-type-spinner-3 .quform-loading-spinner,
1030: .quform-%1$s.quform-theme-storm .quform-loading-type-spinner-3 .quform-loading-spinner:after {
1031: color: %2$s;
1032: }
1033: .quform-%1$s.quform-theme-storm .quform-loading-type-spinner-4 .quform-loading-spinner:after {
1034: background-color: %2$s;
1035: }
1036: .quform-%1$s.quform-theme-storm .quform-loading-type-spinner-5 .quform-loading-spinner {
1037: border-left-color: %2$s;
1038: }
1039: .quform-%1$s.quform-theme-storm .quform-loading-type-spinner-6 .quform-loading-spinner-inner {
1040: color: %2$s;
1041: }
1042: .quform-%1$s.quform-theme-storm .quform-loading-type-spinner-7 .quform-loading-spinner-inner,
1043: .quform-%1$s.quform-theme-storm .quform-loading-type-spinner-7 .quform-loading-spinner-inner:before,
1044: .quform-%1$s.quform-theme-storm .quform-loading-type-spinner-7 .quform-loading-spinner-inner:after {
1045: background-color: %2$s;
1046: color: %2$s;
1047: }
1048: .quform-%1$s.quform-theme-storm .quform-loading-type-custom .quform-loading-inner {
1049: color:%2$s;
1050: }
1051: .quform-%1$s.quform-theme-storm .quform-referral-link a:hover {
1052: color: %2$s;
1053: }';
1054: break;
1055: }
1056:
1057: return sprintf($css, $formId, self::ensureThemeCompatible($primaryColor));
1058: }
1059:
1060: 1061: 1062: 1063: 1064: 1065: 1066: 1067:
1068: public static function getSecondaryColorCustomCss($theme, $formId, $secondaryColor)
1069: {
1070: $css = '';
1071:
1072: if ( ! Quform::isNonEmptyString($secondaryColor)) {
1073: return $css;
1074: }
1075:
1076: switch ($theme) {
1077: case 'light':
1078: $css .= '.quform-%1$s.quform-theme-light .quform-button-style-theme .quform-upload-button:hover,
1079: .quform-%1$s.quform-theme-light .quform-options-style-button .quform-option-label:active,
1080: .quform-%1$s.quform-theme-light .quform-options-style-button .quform-option-label:focus,
1081: .quform-%1$s.quform-theme-light .quform-options-style-button .quform-field-checkbox:checked + label,
1082: .quform-%1$s.quform-theme-light .quform-options-style-button .quform-field-radio:checked + label,
1083: .quform-%1$s.quform-theme-light .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
1084: .quform-%1$s.quform-theme-light .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
1085: .quform-%1$s.quform-theme-light .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
1086: background-color: %2$s;
1087: }';
1088: break;
1089: case 'dark':
1090: $css .= '.quform-%1$s.quform-theme-dark .quform-button-style-theme .quform-upload-button:hover,
1091: .quform-%1$s.quform-theme-dark .quform-options-style-button .quform-option-label:active,
1092: .quform-%1$s.quform-theme-dark .quform-options-style-button .quform-option-label:focus,
1093: .quform-%1$s.quform-theme-dark .quform-options-style-button .quform-field-checkbox:checked + label,
1094: .quform-%1$s.quform-theme-dark .quform-options-style-button .quform-field-radio:checked + label,
1095: .quform-%1$s.quform-theme-dark .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
1096: .quform-%1$s.quform-theme-dark .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
1097: .quform-%1$s.quform-theme-dark .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
1098: background-color: %2$s;
1099: }';
1100: break;
1101: case 'underlined':
1102: $css .= '.quform-%1$s.quform-theme-underlined .select2-container--quform.select2-container--open .select2-selection,
1103: .quform-%1$s.quform-theme-underlined .quform-field-text:active,
1104: .quform-%1$s.quform-theme-underlined .quform-field-captcha:active,
1105: .quform-%1$s.quform-theme-underlined .quform-field-password:active,
1106: .quform-%1$s.quform-theme-underlined .quform-field-textarea:active,
1107: .quform-%1$s.quform-theme-underlined .quform-field-email:active,
1108: .quform-%1$s.quform-theme-underlined .quform-field-date:active,
1109: .quform-%1$s.quform-theme-underlined .quform-field-time:active,
1110: .quform-%1$s.quform-theme-underlined .quform-field-select:active,
1111: .quform-%1$s.quform-theme-underlined .quform-field-multiselect:active,
1112: .quform-%1$s.quform-theme-underlined .quform-field-text:focus,
1113: .quform-%1$s.quform-theme-underlined .quform-field-captcha:focus,
1114: .quform-%1$s.quform-theme-underlined .quform-field-password:focus,
1115: .quform-%1$s.quform-theme-underlined .quform-field-textarea:focus,
1116: .quform-%1$s.quform-theme-underlined .quform-field-email:focus,
1117: .quform-%1$s.quform-theme-underlined .quform-field-date:focus,
1118: .quform-%1$s.quform-theme-underlined .quform-field-time:focus,
1119: .quform-%1$s.quform-theme-underlined .quform-field-select:focus,
1120: .quform-%1$s.quform-theme-underlined .quform-field-multiselect:focus {
1121: border-color: %2$s;
1122: }
1123: .quform-%1$s.quform-theme-underlined .quform-button-style-theme .quform-upload-button:hover,
1124: .quform-%1$s.quform-theme-underlined .quform-options-style-button .quform-option-label:active,
1125: .quform-%1$s.quform-theme-underlined .quform-options-style-button .quform-option-label:focus,
1126: .quform-%1$s.quform-theme-underlined .quform-options-style-button .quform-field-checkbox:checked + label,
1127: .quform-%1$s.quform-theme-underlined .quform-options-style-button .quform-field-radio:checked + label,
1128: .quform-%1$s.quform-theme-underlined .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
1129: .quform-%1$s.quform-theme-underlined .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
1130: .quform-%1$s.quform-theme-underlined .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
1131: background-color: %2$s;
1132: border: 2px solid %2$s;
1133: }';
1134: break;
1135: case 'simple':
1136: $css .= '.quform-%1$s.quform-theme-simple .quform-button-style-theme .quform-upload-button:hover,
1137: .quform-%1$s.quform-theme-simple .quform-options-style-button .quform-option-label:active,
1138: .quform-%1$s.quform-theme-simple .quform-options-style-button .quform-option-label:focus,
1139: .quform-%1$s.quform-theme-simple .quform-options-style-button .quform-field-checkbox:checked + label,
1140: .quform-%1$s.quform-theme-simple .quform-options-style-button .quform-field-radio:checked + label,
1141: .quform-%1$s.quform-theme-simple .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
1142: .quform-%1$s.quform-theme-simple .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
1143: .quform-%1$s.quform-theme-simple .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
1144: background-color: %2$s;
1145: }';
1146: break;
1147: case 'react':
1148: $css .= '.quform-%1$s.quform-theme-react .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
1149: .quform-%1$s.quform-theme-react .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
1150: .quform-%1$s.quform-theme-react .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
1151: background-color: %2$s;
1152: box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.4) inset, 0 2px 3px 0 rgba(0, 0, 0, 0.1);
1153: }
1154: .quform-%1$s.quform-theme-react .quform-button-style-theme .quform-upload-button:hover,
1155: .quform-%1$s.quform-theme-react .quform-options-style-button .quform-option-label:active,
1156: .quform-%1$s.quform-theme-react .quform-options-style-button .quform-option-label:focus,
1157: .quform-%1$s.quform-theme-react .quform-options-style-button .quform-field-checkbox:checked + label,
1158: .quform-%1$s.quform-theme-react .quform-options-style-button .quform-field-radio:checked + label,
1159: .quform-%1$s.quform-theme-react .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:active,
1160: .quform-%1$s.quform-theme-react .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:active,
1161: .quform-%1$s.quform-theme-react .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:active {
1162: background-color: %2$s;
1163: }';
1164: break;
1165: case 'bootstrap':
1166: $css .= '.quform-%1$s.quform-theme-bootstrap .quform-button-style-theme .quform-upload-button,
1167: .quform-%1$s.quform-theme-bootstrap .quform-options-style-button .quform-option-label,
1168: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
1169: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
1170: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
1171: border: 1px solid %2$s;
1172: }
1173: .quform-%1$s.quform-theme-bootstrap .quform-button-style-theme .quform-upload-button:hover,
1174: .quform-%1$s.quform-theme-bootstrap .quform-options-style-button .quform-option-label:active,
1175: .quform-%1$s.quform-theme-bootstrap .quform-options-style-button .quform-option-label:focus,
1176: .quform-%1$s.quform-theme-bootstrap .quform-options-style-button .quform-field-checkbox:checked + label,
1177: .quform-%1$s.quform-theme-bootstrap .quform-options-style-button .quform-field-radio:checked + label,
1178: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
1179: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
1180: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
1181: background-color: %2$s;
1182: background-position: 0 -15px;
1183: border: 1px solid %2$s;
1184: }
1185: .quform-%1$s.quform-theme-bootstrap .quform-options-style-button .quform-field-checkbox:checked + label,
1186: .quform-%1$s.quform-theme-bootstrap .quform-options-style-button .quform-field-radio:checked + label {
1187: background-image: none;
1188: }
1189: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:active,
1190: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:active,
1191: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:active {
1192: background-color: %2$s;
1193: border-color: %2$s;
1194: }
1195: .quform-%1$s.quform-theme-bootstrap .quform-upload-progress-bar {
1196: background-color: %2$s;
1197: }';
1198: break;
1199: }
1200:
1201: return sprintf($css, $formId, self::ensureThemeCompatible($secondaryColor));
1202: }
1203:
1204: 1205: 1206: 1207: 1208: 1209: 1210: 1211:
1212: public static function getPrimaryForegroundColorCustomCss($theme, $formId, $primaryForegroundColor)
1213: {
1214: $css = '';
1215:
1216: if ( ! Quform::isNonEmptyString($primaryForegroundColor)) {
1217: return $css;
1218: }
1219:
1220: switch ($theme) {
1221: case 'light':
1222: $css .= '.quform-%1$s.quform-theme-light .quform-page-progress-bar {
1223: color: %2$s;
1224: }
1225: .quform-%1$s.quform-theme-light .quform-upload-progress-bar {
1226: color: %2$s;
1227: }
1228: .quform-%1$s.quform-theme-light .quform-upload-file {
1229: color: %2$s;
1230: }
1231: .quform-%1$s.quform-theme-light .quform-upload-file-remove:before,
1232: .quform-%1$s.quform-theme-light .quform-upload-file-remove:after {
1233: background-color: %2$s;
1234: }
1235: .quform-%1$s-datepicker.quform-theme-light.quform-datepicker .k-calendar .k-header .k-link,
1236: .quform-%1$s-datepicker.quform-theme-light.quform-datepicker .k-calendar .k-footer .k-link {
1237: color: %2$s;
1238: }
1239: .quform-%1$s.quform-theme-light .quform-button-style-theme .quform-upload-button,
1240: .quform-%1$s.quform-theme-light .quform-options-style-button .quform-option-label,
1241: .quform-%1$s.quform-theme-light .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
1242: .quform-%1$s.quform-theme-light .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
1243: .quform-%1$s.quform-theme-light .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
1244: color: %2$s;
1245: }';
1246: break;
1247: case 'dark':
1248: $css .= '.quform-%1$s.quform-theme-dark .quform-page-progress-bar {
1249: color: %2$s;
1250: }
1251: .quform-%1$s.quform-theme-dark .quform-upload-progress-bar {
1252: color: %2$s;
1253: }
1254: .quform-%1$s.quform-theme-dark .quform-upload-file {
1255: color: %2$s;
1256: }
1257: .quform-%1$s.quform-theme-dark .quform-upload-file-remove:before,
1258: .quform-%1$s.quform-theme-dark .quform-upload-file-remove:after {
1259: background-color: %2$s;
1260: }
1261: .quform-%1$s-datepicker.quform-theme-dark.quform-datepicker .k-calendar .k-header .k-link,
1262: .quform-%1$s-datepicker.quform-theme-dark.quform-datepicker .k-calendar .k-footer .k-link {
1263: color: %2$s;
1264: }
1265: .quform-%1$s.quform-theme-dark .quform-button-style-theme .quform-upload-button,
1266: .quform-%1$s.quform-theme-dark .quform-options-style-button .quform-option-label,
1267: .quform-%1$s.quform-theme-dark .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
1268: .quform-%1$s.quform-theme-dark .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
1269: .quform-%1$s.quform-theme-dark .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
1270: color: %2$s;
1271: }';
1272: break;
1273: case 'hollow':
1274: $css .= '.quform-%1$s.quform-theme-hollow .quform-page-progress-bar {
1275: color: %2$s;
1276: }
1277: .quform-%1$s.quform-theme-hollow .quform-field-icon {
1278: color: %2$s;
1279: }
1280: .quform-%1$s.quform-theme-hollow .quform-upload-file {
1281: color: %2$s;
1282: }
1283: .quform-%1$s.quform-theme-hollow .quform-upload-file-remove:before,
1284: .quform-%1$s.quform-theme-hollow .quform-upload-file-remove:after {
1285: background-color: %2$s;
1286: }
1287: .quform-%1$s.quform-theme-hollow .quform-upload-file-remove:before,
1288: .quform-%1$s.quform-theme-hollow .quform-upload-file-remove:after {
1289: background-color: %2$s;
1290: }
1291: .quform-%1$s.quform-theme-hollow .select2-container--quform .select2-selection--multiple .select2-selection__choice {
1292: color: %2$s;
1293: }
1294: .quform-%1$s-select2.quform-theme-hollow.select2-container--quform .select2-results__option--highlighted[aria-selected] {
1295: color: %2$s;
1296: }
1297: .quform-%1$s-datepicker.quform-theme-hollow.quform-datepicker .k-calendar .k-header .k-link,
1298: .quform-%1$s-datepicker.quform-theme-hollow.quform-datepicker .k-calendar .k-footer .k-link {
1299: color: %2$s;
1300: }
1301: .quform-%1$s-timepicker.quform-theme-hollow.quform-timepicker.k-popup ul.k-list li.k-item.k-state-hover {
1302: color: %2$s;
1303: }
1304: .quform-%1$s-datepicker.quform-theme-hollow.quform-datepicker .k-calendar td.k-state-focused,
1305: .quform-%1$s-datepicker.quform-theme-hollow.quform-datepicker .k-calendar td.k-state-selected.k-state-focused {
1306: color: %2$s;
1307: }
1308: .quform-%1$s-timepicker.quform-theme-hollow.quform-timepicker.k-popup ul.k-list li.k-item.k-state-selected.k-state-hover,
1309: .quform-%1$s-datepicker.quform-theme-hollow.quform-datepicker .k-calendar td.k-state-focused .k-link,
1310: .quform-%1$s-datepicker.quform-theme-hollow.quform-datepicker .k-calendar td.k-state-selected.k-state-focused .k-link {
1311: color: %2$s;
1312: }
1313: .quform-%1$s-datepicker.quform-theme-hollow.quform-datepicker .k-calendar td.k-state-focused .k-link:hover,
1314: .quform-%1$s-datepicker.quform-theme-hollow.quform-datepicker .k-calendar td.k-state-selected.k-state-focused .k-link:hover {
1315: color: %2$s;
1316: }
1317: .quform-%1$s.quform-theme-hollow .quform-group-style-bordered > .quform-spacer > .quform-group-title-description .quform-group-title {
1318: color: %2$s;
1319: }
1320: .quform-%1$s.quform-theme-hollow .quform-group-style-bordered > .quform-spacer > .quform-group-title-description p.quform-group-description {
1321: color: %2$s;
1322: }
1323: .quform-%1$s.quform-theme-hollow .quform-button-style-theme .quform-upload-button,
1324: .quform-%1$s.quform-theme-hollow .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
1325: .quform-%1$s.quform-theme-hollow .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
1326: .quform-%1$s.quform-theme-hollow .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
1327: color: %2$s;
1328: }
1329: .quform-%1$s.quform-theme-hollow .quform-options-style-button .quform-option-label:active,
1330: .quform-%1$s.quform-theme-hollow .quform-options-style-button .quform-option-label:focus,
1331: .quform-%1$s.quform-theme-hollow .quform-options-style-button .quform-field-checkbox:checked + label,
1332: .quform-%1$s.quform-theme-hollow .quform-options-style-button .quform-field-radio:checked + label {
1333: color: %2$s;
1334: }
1335: .quform-%1$s.quform-theme-hollow .quform-button-style-theme .quform-upload-button:hover,
1336: .quform-%1$s.quform-theme-hollow .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
1337: .quform-%1$s.quform-theme-hollow .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
1338: .quform-%1$s.quform-theme-hollow .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
1339: color: %2$s;
1340: }';
1341: break;
1342: case 'underlined':
1343: $css .= '.quform-%1$s.quform-theme-underlined .quform-upload-progress-bar {
1344: color: %2$s;
1345: }
1346: .quform-%1$s.quform-theme-underlined .quform-upload-file {
1347: color: %2$s;
1348: }
1349: .quform-%1$s.quform-theme-underlined .quform-upload-file-remove:before,
1350: .quform-%1$s.quform-theme-underlined .quform-upload-file-remove:after {
1351: background-color: %2$s;
1352: }
1353: .quform-%1$s.quform-theme-underlined .select2-container--quform .select2-selection--multiple .select2-selection__choice {
1354: color: %2$s;
1355: }
1356: .quform-%1$s-datepicker.quform-theme-underlined.quform-datepicker .k-calendar .k-header .k-link,
1357: .quform-%1$s-datepicker.quform-theme-underlined.quform-datepicker .k-calendar .k-footer .k-link {
1358: color: %2$s;
1359: }';
1360: break;
1361: case 'simple':
1362: $css .= '.quform-%1$s.quform-theme-simple .quform-page-progress-bar {
1363: color: %2$s;
1364: }
1365: .quform-%1$s.quform-theme-simple .quform-upload-progress-bar {
1366: color: %2$s;
1367: }
1368: .quform-%1$s.quform-theme-simple .quform-upload-file {
1369: color: %2$s;
1370: }
1371: .quform-%1$s.quform-theme-simple .quform-upload-file-remove:before,
1372: .quform-%1$s.quform-theme-simple .quform-upload-file-remove:after {
1373: background-color: %2$s;
1374: }
1375: .quform-%1$s-datepicker.quform-theme-simple.quform-datepicker .k-calendar .k-header .k-link,
1376: .quform-%1$s-datepicker.quform-theme-simple.quform-datepicker .k-calendar .k-footer .k-link {
1377: color: %2$s;
1378: }
1379: .quform-%1$s.quform-theme-simple .quform-button-style-theme .quform-upload-button,
1380: .quform-%1$s.quform-theme-simple .quform-options-style-button .quform-option-label,
1381: .quform-%1$s.quform-theme-simple .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
1382: .quform-%1$s.quform-theme-simple .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
1383: .quform-%1$s.quform-theme-simple .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
1384: color: %2$s;
1385: }';
1386: break;
1387: case 'react':
1388: $css .= '.quform-%1$s.quform-theme-react .quform-page-progress-bar {
1389: color: %2$s;
1390: }
1391: .quform-%1$s.quform-theme-react .quform-upload-progress-bar {
1392: color: %2$s;
1393: }
1394: .quform-%1$s.quform-theme-react .quform-upload-file {
1395: color: %2$s;
1396: }
1397: .quform-%1$s.quform-theme-react .quform-upload-file-remove:before,
1398: .quform-%1$s.quform-theme-react .quform-upload-file-remove:after {
1399: background-color: %2$s;
1400: }
1401: .quform-%1$s-datepicker.quform-theme-react.quform-datepicker .k-calendar .k-header .k-link,
1402: .quform-%1$s-datepicker.quform-theme-react.quform-datepicker .k-calendar .k-footer .k-link {
1403: color: %2$s;
1404: }
1405: .quform-%1$s.quform-theme-react .quform-button-style-theme .quform-upload-button,
1406: .quform-%1$s.quform-theme-react .quform-options-style-button .quform-option-label,
1407: .quform-%1$s.quform-theme-react .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
1408: .quform-%1$s.quform-theme-react .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
1409: .quform-%1$s.quform-theme-react .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
1410: color: %2$s;
1411: }';
1412: break;
1413: case 'bootstrap':
1414: $css .= '.quform-%1$s.quform-theme-bootstrap .quform-page-progress-bar {
1415: color: %2$s;
1416: }
1417: .quform-%1$s.quform-theme-bootstrap .quform-button-style-theme .quform-upload-button,
1418: .quform-%1$s.quform-theme-bootstrap .quform-options-style-button .quform-option-label,
1419: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
1420: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
1421: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
1422: color: %2$s;
1423: }
1424: .quform-%1$s-datepicker.quform-theme-bootstrap.quform-datepicker .k-calendar .k-header .k-link,
1425: .quform-%1$s-datepicker.quform-theme-bootstrap.quform-datepicker .k-calendar .k-footer .k-link {
1426: color: %2$s;
1427: }';
1428: break;
1429: case 'shine-gradient':
1430: $css .= '.quform-%1$s.quform-theme-shine-gradient .quform-page-progress-bar {
1431: color: %2$s;
1432: }
1433: .quform-%1$s.quform-theme-shine-gradient .quform-upload-progress-bar {
1434: color: %2$s;
1435: }
1436: .quform-%1$s.quform-theme-shine-gradient .quform-upload-file {
1437: color: %2$s;
1438: }
1439: .quform-%1$s.quform-theme-shine-gradient .quform-upload-file-remove:before,
1440: .quform-%1$s.quform-theme-shine-gradient .quform-upload-file-remove:after {
1441: background-color: %2$s;
1442: }
1443: .quform-%1$s.quform-theme-shine-gradient .quform-button-style-theme .quform-upload-button,
1444: .quform-%1$s.quform-theme-shine-gradient .quform-options-style-button .quform-option-label,
1445: .quform-%1$s.quform-theme-shine-gradient .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
1446: .quform-%1$s.quform-theme-shine-gradient .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
1447: .quform-%1$s.quform-theme-shine-gradient .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
1448: color: %2$s;
1449: }';
1450: break;
1451: case 'blend-gradient':
1452: $css .= '.quform-%1$s.quform-theme-blend-gradient .quform-page-progress-bar {
1453: color: %2$s;
1454: }
1455: .quform-%1$s.quform-theme-blend-gradient .quform-upload-progress-bar {
1456: color: %2$s;
1457: }
1458: .quform-%1$s.quform-theme-blend-gradient .quform-upload-file {
1459: color: %2$s;
1460: }
1461: .quform-%1$s.quform-theme-blend-gradient .quform-upload-file-remove:before,
1462: .quform-%1$s.quform-theme-blend-gradient .quform-upload-file-remove:after {
1463: background-color: %2$s;
1464: }
1465: .quform-%1$s.quform-theme-blend-gradient .quform-button-style-theme .quform-upload-button,
1466: .quform-%1$s.quform-theme-blend-gradient .quform-options-style-button .quform-option-label,
1467: .quform-%1$s.quform-theme-blend-gradient .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button,
1468: .quform-%1$s.quform-theme-blend-gradient .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button,
1469: .quform-%1$s.quform-theme-blend-gradient .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button {
1470: color: %2$s;
1471: }';
1472: break;
1473: case 'storm':
1474: $css .= '.quform-%1$s.quform-theme-storm .quform-page-progress-bar {
1475: color: %2$s;
1476: }
1477: .quform-%1$s-datepicker.quform-theme-storm.quform-datepicker .k-calendar .k-footer .k-link,
1478: .quform-%1$s-datepicker.quform-theme-storm.quform-datepicker .k-calendar .k-header .k-link {
1479: color: %2$s;
1480: }
1481: .quform-%1$s.quform-theme-storm .quform-upload-file {
1482: color: %2$s;
1483: }
1484: .quform-%1$s.quform-theme-storm .quform-upload-file-remove:before,
1485: .quform-%1$s.quform-theme-storm .quform-upload-file-remove:after {
1486: background-color: %2$s;
1487: }';
1488: break;
1489: }
1490:
1491: return sprintf($css, $formId, self::ensureThemeCompatible($primaryForegroundColor));
1492: }
1493:
1494: 1495: 1496: 1497: 1498: 1499: 1500: 1501:
1502: public static function getSecondaryForegroundColorCustomCss($theme, $formId, $secondaryForegroundColor)
1503: {
1504: $css = '';
1505:
1506: if ( ! Quform::isNonEmptyString($secondaryForegroundColor)) {
1507: return $css;
1508: }
1509:
1510: switch ($theme) {
1511: case 'light':
1512: $css .= '.quform-%1$s.quform-theme-light .quform-button-style-theme .quform-upload-button:hover,
1513: .quform-%1$s.quform-theme-light .quform-options-style-button .quform-option-label:active,
1514: .quform-%1$s.quform-theme-light .quform-options-style-button .quform-option-label:focus,
1515: .quform-%1$s.quform-theme-light .quform-options-style-button .quform-field-checkbox:checked + label,
1516: .quform-%1$s.quform-theme-light .quform-options-style-button .quform-field-radio:checked + label,
1517: .quform-%1$s.quform-theme-light .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
1518: .quform-%1$s.quform-theme-light .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
1519: .quform-%1$s.quform-theme-light .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
1520: color: %2$s;
1521: }';
1522: break;
1523: case 'dark':
1524: $css .= '.quform-%1$s.quform-theme-dark .quform-button-style-theme .quform-upload-button:hover,
1525: .quform-%1$s.quform-theme-dark .quform-options-style-button .quform-option-label:active,
1526: .quform-%1$s.quform-theme-dark .quform-options-style-button .quform-option-label:focus,
1527: .quform-%1$s.quform-theme-dark .quform-options-style-button .quform-field-checkbox:checked + label,
1528: .quform-%1$s.quform-theme-dark .quform-options-style-button .quform-field-radio:checked + label,
1529: .quform-%1$s.quform-theme-dark .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
1530: .quform-%1$s.quform-theme-dark .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
1531: .quform-%1$s.quform-theme-dark .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
1532: color: %2$s;
1533: }';
1534: break;
1535: case 'underlined':
1536: $css .= '.quform-%1$s.quform-theme-underlined .quform-button-style-theme .quform-upload-button:hover,
1537: .quform-%1$s.quform-theme-underlined .quform-options-style-button .quform-option-label:active,
1538: .quform-%1$s.quform-theme-underlined .quform-options-style-button .quform-option-label:focus,
1539: .quform-%1$s.quform-theme-underlined .quform-options-style-button .quform-field-checkbox:checked + label,
1540: .quform-%1$s.quform-theme-underlined .quform-options-style-button .quform-field-radio:checked + label,
1541: .quform-%1$s.quform-theme-underlined .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
1542: .quform-%1$s.quform-theme-underlined .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
1543: .quform-%1$s.quform-theme-underlined .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
1544: color: %2$s;
1545: }';
1546: break;
1547: case 'simple':
1548: $css .= '.quform-%1$s.quform-theme-simple .quform-button-style-theme .quform-upload-button:hover,
1549: .quform-%1$s.quform-theme-simple .quform-options-style-button .quform-option-label:active,
1550: .quform-%1$s.quform-theme-simple .quform-options-style-button .quform-option-label:focus,
1551: .quform-%1$s.quform-theme-simple .quform-options-style-button .quform-field-checkbox:checked + label,
1552: .quform-%1$s.quform-theme-simple .quform-options-style-button .quform-field-radio:checked + label,
1553: .quform-%1$s.quform-theme-simple .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
1554: .quform-%1$s.quform-theme-simple .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
1555: .quform-%1$s.quform-theme-simple .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
1556: color: %2$s;
1557: }';
1558: break;
1559: case 'react':
1560: $css .= '.quform-%1$s.quform-theme-react .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
1561: .quform-%1$s.quform-theme-react .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
1562: .quform-%1$s.quform-theme-react .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
1563: color: %2$s;
1564: }
1565: .quform-%1$s.quform-theme-react .quform-button-style-theme .quform-upload-button:hover,
1566: .quform-%1$s.quform-theme-react .quform-options-style-button .quform-option-label:active,
1567: .quform-%1$s.quform-theme-react .quform-options-style-button .quform-option-label:focus,
1568: .quform-%1$s.quform-theme-react .quform-options-style-button .quform-field-checkbox:checked + label,
1569: .quform-%1$s.quform-theme-react .quform-options-style-button .quform-field-radio:checked + label,
1570: .quform-%1$s.quform-theme-react .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:active,
1571: .quform-%1$s.quform-theme-react .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:active,
1572: .quform-%1$s.quform-theme-react .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:active {
1573: color: %2$s;
1574: }';
1575: break;
1576: case 'bootstrap':
1577: $css .= '.quform-%1$s.quform-theme-bootstrap .quform-button-style-theme .quform-upload-button:hover,
1578: .quform-%1$s.quform-theme-bootstrap .quform-options-style-button .quform-option-label:active,
1579: .quform-%1$s.quform-theme-bootstrap .quform-options-style-button .quform-option-label:focus,
1580: .quform-%1$s.quform-theme-bootstrap .quform-options-style-button .quform-field-checkbox:checked + label,
1581: .quform-%1$s.quform-theme-bootstrap .quform-options-style-button .quform-field-radio:checked + label,
1582: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
1583: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
1584: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
1585: color: %2$s;
1586: }
1587: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:active,
1588: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:active,
1589: .quform-%1$s.quform-theme-bootstrap .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:active {
1590: color: %2$s;
1591: }
1592: .quform-%1$s.quform-theme-bootstrap .quform-upload-progress-bar {
1593: color: %2$s;
1594: }';
1595: break;
1596: case 'shine-gradient':
1597: $css .= '.quform-%1$s.quform-theme-shine-gradient .quform-button-style-theme .quform-upload-button:hover,
1598: .quform-%1$s.quform-theme-shine-gradient .quform-options-style-button .quform-option-label:active,
1599: .quform-%1$s.quform-theme-shine-gradient .quform-options-style-button .quform-option-label:focus,
1600: .quform-%1$s.quform-theme-shine-gradient .quform-options-style-button .quform-field-checkbox:checked + label,
1601: .quform-%1$s.quform-theme-shine-gradient .quform-options-style-button .quform-field-radio:checked + label,
1602: .quform-%1$s.quform-theme-shine-gradient .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
1603: .quform-%1$s.quform-theme-shine-gradient .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
1604: .quform-%1$s.quform-theme-shine-gradient .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
1605: color: %2$s;
1606: }
1607: .quform-%1$s.quform-theme-shine-gradient .quform-input-date .quform-field-icon:hover,
1608: .quform-%1$s.quform-theme-shine-gradient .quform-input-time .quform-field-icon:hover {
1609: color: %2$s;
1610: }
1611: .quform-%1$s-timepicker.quform-theme-shine-gradient.quform-timepicker.k-list-container.k-popup,
1612: .quform-%1$s.quform-theme-shine-gradient .select2-container--quform.select2-container--open .select2-selection,
1613: .quform-%1$s.quform-theme-shine-gradient .quform-field-text:active,
1614: .quform-%1$s.quform-theme-shine-gradient .quform-field-captcha:active,
1615: .quform-%1$s.quform-theme-shine-gradient .quform-field-password:active,
1616: .quform-%1$s.quform-theme-shine-gradient .quform-field-textarea:active,
1617: .quform-%1$s.quform-theme-shine-gradient .quform-field-email:active,
1618: .quform-%1$s.quform-theme-shine-gradient .quform-field-date:active,
1619: .quform-%1$s.quform-theme-shine-gradient .quform-field-time:active,
1620: .quform-%1$s.quform-theme-shine-gradient .quform-field-select:active,
1621: .quform-%1$s.quform-theme-shine-gradient .quform-field-multiselect:active,
1622: .quform-%1$s.quform-theme-shine-gradient .quform-field-text:focus,
1623: .quform-%1$s.quform-theme-shine-gradient .quform-field-captcha:focus,
1624: .quform-%1$s.quform-theme-shine-gradient .quform-field-password:focus,
1625: .quform-%1$s.quform-theme-shine-gradient .quform-field-textarea:focus,
1626: .quform-%1$s.quform-theme-shine-gradient .quform-field-email:focus,
1627: .quform-%1$s.quform-theme-shine-gradient .quform-field-date:focus,
1628: .quform-%1$s.quform-theme-shine-gradient .quform-field-time:focus,
1629: .quform-%1$s.quform-theme-shine-gradient .quform-field-select:focus,
1630: .quform-%1$s.quform-theme-shine-gradient .quform-field-multiselect:focus {
1631: color: %2$s;
1632: }
1633: .quform-%1$s-select2.quform-theme-shine-gradient.select2-container--quform .select2-results__option--highlighted[aria-selected] {
1634: color: %2$s;
1635: }
1636: .quform-%1$s-timepicker.quform-theme-shine-gradient.quform-timepicker.k-popup ul.k-list li.k-item.k-state-selected {
1637: color: %2$s;
1638: }
1639: .quform-%1$s-datepicker.quform-theme-shine-gradient.quform-datepicker .k-calendar td.k-state-focused .k-link,
1640: .quform-%1$s-datepicker.quform-theme-shine-gradient.quform-datepicker .k-calendar td.k-state-selected.k-state-focused .k-link {
1641: color: %2$s;
1642: }
1643: .quform-%1$s-datepicker.quform-theme-shine-gradient.quform-datepicker .k-calendar .k-header .k-link,
1644: .quform-%1$s-datepicker.quform-theme-shine-gradient.quform-datepicker .k-calendar .k-footer .k-link {
1645: color: %2$s;
1646: }';
1647: break;
1648: case 'blend-gradient':
1649: $css .= '.quform-%1$s.quform-theme-blend-gradient .quform-button-style-theme .quform-upload-button:hover,
1650: .quform-%1$s.quform-theme-blend-gradient .quform-options-style-button .quform-option-label:active,
1651: .quform-%1$s.quform-theme-blend-gradient .quform-options-style-button .quform-option-label:focus,
1652: .quform-%1$s.quform-theme-blend-gradient .quform-options-style-button .quform-field-checkbox:checked + label,
1653: .quform-%1$s.quform-theme-blend-gradient .quform-options-style-button .quform-field-radio:checked + label,
1654: .quform-%1$s.quform-theme-blend-gradient .quform-element-submit.quform-button-style-theme > .quform-button-submit-default > button:hover,
1655: .quform-%1$s.quform-theme-blend-gradient .quform-element-submit.quform-button-style-theme > .quform-button-next-default > button:hover,
1656: .quform-%1$s.quform-theme-blend-gradient .quform-element-submit.quform-button-style-theme > .quform-button-back-default > button:hover {
1657: color: %2$s;
1658: }
1659: .quform-%1$s.quform-theme-blend-gradient .quform-input-date .quform-field-icon:hover,
1660: .quform-%1$s.quform-theme-blend-gradient .quform-input-time .quform-field-icon:hover {
1661: color: %2$s;
1662: }
1663: .quform-%1$s-timepicker.quform-theme-blend-gradient.quform-timepicker.k-list-container.k-popup,
1664: .quform-%1$s.quform-theme-blend-gradient .select2-container--quform.select2-container--open .select2-selection,
1665: .quform-%1$s.quform-theme-blend-gradient .quform-field-text:active,
1666: .quform-%1$s.quform-theme-blend-gradient .quform-field-captcha:active,
1667: .quform-%1$s.quform-theme-blend-gradient .quform-field-password:active,
1668: .quform-%1$s.quform-theme-blend-gradient .quform-field-textarea:active,
1669: .quform-%1$s.quform-theme-blend-gradient .quform-field-email:active,
1670: .quform-%1$s.quform-theme-blend-gradient .quform-field-date:active,
1671: .quform-%1$s.quform-theme-blend-gradient .quform-field-time:active,
1672: .quform-%1$s.quform-theme-blend-gradient .quform-field-select:active,
1673: .quform-%1$s.quform-theme-blend-gradient .quform-field-multiselect:active,
1674: .quform-%1$s.quform-theme-blend-gradient .quform-field-text:focus,
1675: .quform-%1$s.quform-theme-blend-gradient .quform-field-captcha:focus,
1676: .quform-%1$s.quform-theme-blend-gradient .quform-field-password:focus,
1677: .quform-%1$s.quform-theme-blend-gradient .quform-field-textarea:focus,
1678: .quform-%1$s.quform-theme-blend-gradient .quform-field-email:focus,
1679: .quform-%1$s.quform-theme-blend-gradient .quform-field-date:focus,
1680: .quform-%1$s.quform-theme-blend-gradient .quform-field-time:focus,
1681: .quform-%1$s.quform-theme-blend-gradient .quform-field-select:focus,
1682: .quform-%1$s.quform-theme-blend-gradient .quform-field-multiselect:focus {
1683: color: %2$s;
1684: }
1685: .quform-%1$s-select2.quform-theme-blend-gradient.select2-container--quform .select2-results__option--highlighted[aria-selected] {
1686: color: %2$s;
1687: }
1688: .quform-%1$s-timepicker.quform-theme-blend-gradient.quform-timepicker.k-popup ul.k-list li.k-item.k-state-selected {
1689: color: %2$s;
1690: }
1691: .quform-%1$s-datepicker.quform-theme-blend-gradient.quform-datepicker .k-calendar td.k-state-focused .k-link,
1692: .quform-%1$s-datepicker.quform-theme-blend-gradient.quform-datepicker .k-calendar td.k-state-selected.k-state-focused .k-link {
1693: color: %2$s;
1694: }
1695: .quform-%1$s-datepicker.quform-theme-blend-gradient.quform-datepicker .k-calendar .k-header .k-link,
1696: .quform-%1$s-datepicker.quform-theme-blend-gradient.quform-datepicker .k-calendar .k-footer .k-link {
1697: color: %2$s;
1698: }';
1699: break;
1700: }
1701:
1702: return sprintf($css, $formId, self::ensureThemeCompatible($secondaryForegroundColor));
1703: }
1704:
1705: 1706: 1707: 1708: 1709: 1710:
1711: protected static function ensureThemeCompatible($color)
1712: {
1713: $needsImportant = apply_filters(
1714: 'quform_theme_colors_important',
1715: defined('AV_FRAMEWORK_VERSION')
1716: );
1717:
1718: if ($needsImportant && stripos($color, '!important') === false) {
1719: $color = "$color !important";
1720: }
1721:
1722: return $color;
1723: }
1724: }
1725: