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