diff --git a/Gruntfile.js b/Gruntfile.js index 5d5d6ae4c..813a472b6 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,9 @@ 'use strict'; -module.exports = function(grunt) { +module.exports = function( grunt) { + const tailwindFileMap = { + 'admin/form-builder/views/form-builder.php': 'admin/form-builder.css', + } + var formBuilderAssets = require('./admin/form-builder/assets/js/form-builder-assets.js'); var pkg = grunt.file.readJSON('package.json'); @@ -112,7 +116,15 @@ module.exports = function(grunt) { tasks: [ 'shell:npm_build' ] - } + }, + + tailwind: { + files: ['src/css/**/*.css', 'admin/form-builder/views/*.php', 'includes/Admin/views/*.php'], + tasks: ['shell:tailwind'], + options: { + spawn: false + } + }, }, // Clean up build directory @@ -221,6 +233,11 @@ module.exports = function(grunt) { shell: { npm_build: { command: 'npm run build', + }, + tailwind: { + command: function ( input, output ) { + return `npx tailwindcss -i ${input} -o ${output}`; + } } } }); @@ -238,6 +255,7 @@ module.exports = function(grunt) { grunt.loadNpmTasks( 'grunt-notify' ); grunt.loadNpmTasks( 'grunt-wp-readme-to-markdown' ); grunt.loadNpmTasks( 'grunt-shell' ); + grunt.loadNpmTasks( 'grunt-postcss' ); grunt.registerTask( 'default', [ 'less', 'concat', 'uglify', 'i18n' ] ); @@ -248,4 +266,28 @@ module.exports = function(grunt) { // build stuff grunt.registerTask( 'release', [ 'less', 'concat', 'uglify', 'i18n', 'readme' ] ); grunt.registerTask( 'zip', [ 'clean', 'copy', 'compress' ] ); + + grunt.event.on('watch', function(action, filepath, target) { + if (target === 'tailwind') { + grunt.task.run('tailwind'); + } + }); + + grunt.registerTask('tailwind', function() { + const done = this.async(); + + // Process each file mapping + Object.entries(tailwindFileMap).forEach(([phpFile, cssFile]) => { + const inputFile = `src/css/${cssFile}`; + const outputFile = `assets/css/${cssFile}`; + + // Ensure the input file exists + if (grunt.file.exists(inputFile)) { + // Run the tailwind command + grunt.task.run(`shell:tailwind:${inputFile}:${outputFile}`); + } + }); + + done(); + }); }; diff --git a/admin/form-builder/assets/js/components/form-checkbox_field/template.php b/admin/form-builder/assets/js/components/form-checkbox_field/template.php index 0111026b0..e59ce0d70 100644 --- a/admin/form-builder/assets/js/components/form-checkbox_field/template.php +++ b/admin/form-builder/assets/js/components/form-checkbox_field/template.php @@ -1,16 +1,44 @@
- + class="wpuf-h-4 wpuf-w-4 wpuf-rounded wpuf-border-gray-300 wpuf-text-indigo-600 focus:wpuf-ring-indigo-600"> +
+
+ +
+ + - +
+
+
+ +
+
+ +
+
+
+ +

diff --git a/admin/form-builder/assets/js/components/form-dropdown_field/template.php b/admin/form-builder/assets/js/components/form-dropdown_field/template.php index 691c46644..c174dafbe 100644 --- a/admin/form-builder/assets/js/components/form-dropdown_field/template.php +++ b/admin/form-builder/assets/js/components/form-dropdown_field/template.php @@ -1,9 +1,9 @@
- - +

diff --git a/admin/form-builder/assets/js/components/form-post_title/template.php b/admin/form-builder/assets/js/components/form-post_title/template.php index 63564e1fd..a221c62bb 100644 --- a/admin/form-builder/assets/js/components/form-post_title/template.php +++ b/admin/form-builder/assets/js/components/form-post_title/template.php @@ -1,10 +1,12 @@
- +

diff --git a/admin/form-builder/assets/js/components/form-radio_field/template.php b/admin/form-builder/assets/js/components/form-radio_field/template.php index c674d2cf9..33ba69243 100644 --- a/admin/form-builder/assets/js/components/form-radio_field/template.php +++ b/admin/form-builder/assets/js/components/form-radio_field/template.php @@ -1,16 +1,21 @@
- +
+
+ + +
+
- +

diff --git a/admin/form-builder/assets/js/components/form-taxonomy/template.php b/admin/form-builder/assets/js/components/form-taxonomy/template.php index 0aaf5565c..51d8edac6 100644 --- a/admin/form-builder/assets/js/components/form-taxonomy/template.php +++ b/admin/form-builder/assets/js/components/form-taxonomy/template.php @@ -1,9 +1,11 @@
@@ -34,11 +36,14 @@ - +

diff --git a/admin/form-builder/assets/js/components/form-text_field/template.php b/admin/form-builder/assets/js/components/form-text_field/template.php index 63564e1fd..a221c62bb 100644 --- a/admin/form-builder/assets/js/components/form-text_field/template.php +++ b/admin/form-builder/assets/js/components/form-text_field/template.php @@ -1,10 +1,12 @@
- +

diff --git a/admin/form-builder/assets/js/components/form-textarea_field/template.php b/admin/form-builder/assets/js/components/form-textarea_field/template.php index 4e3d2f262..99f5b697d 100644 --- a/admin/form-builder/assets/js/components/form-textarea_field/template.php +++ b/admin/form-builder/assets/js/components/form-textarea_field/template.php @@ -1,14 +1,18 @@
+ :class="class_names('textareafield')" + class="wpuf-block wpuf-w-full wpuf-rounded-md wpuf-border-0 wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm wpuf-ring-1 wpuf-ring-inset wpuf-ring-gray-300 placeholder:wpuf-text-gray-400 focus:wpuf-ring-2 focus:wpuf-ring-inset focus:wpuf-ring-indigo-600 sm:wpuf-text-sm sm:wpuf-leading-6">{{ field.default }} + - + - +

diff --git a/admin/form-builder/assets/js/form-builder.js b/admin/form-builder/assets/js/form-builder.js index 8349eb77a..f8b14f944 100644 --- a/admin/form-builder/assets/js/form-builder.js +++ b/admin/form-builder/assets/js/form-builder.js @@ -410,7 +410,8 @@ is_form_saved: false, is_form_switcher: false, post_title_editing: false, - isDirty: false + isDirty: false, + shortcodeCopied: false, }, computed: { @@ -491,13 +492,16 @@ clipboard.on('success', function(e) { // Show copied tooltip $(e.trigger) - .attr('data-original-title', 'Copied!') + .attr('data-original-title', 'Shortcode copied!') .tooltip('show'); + self.shortcodeCopied = true; + // Reset the copied tooltip setTimeout(function() { $(e.trigger).tooltip('hide') .attr('data-original-title', self.i18n.copy_shortcode); + self.shortcodeCopied = false; }, 1000); e.clearSelection(); @@ -899,11 +903,11 @@ // on DOM ready $(function() { - resizeBuilderContainer(); - - $("#collapse-menu").click(function () { - resizeBuilderContainer(); - }); + // resizeBuilderContainer(); + // + // $("#collapse-menu").click(function () { + // resizeBuilderContainer(); + // }); function resizeBuilderContainer() { if ($(document.body).hasClass('folded')) { diff --git a/admin/form-builder/views/form-builder-old.php b/admin/form-builder/views/form-builder-old.php new file mode 100644 index 000000000..1e3381f98 --- /dev/null +++ b/admin/form-builder/views/form-builder-old.php @@ -0,0 +1,120 @@ +
+
+

+ + + + + + + + + + + + + + + + + + + +

+ +
+
+
+
+ {{ post.post_title }} + + + + + + + + 1 && isset( $shortcodes[0]['type'] ) ) { + foreach ( $shortcodes as $shortcode ) { + /* translators: %s: form id */ + printf( " %s: #{{ post.ID }}", sprintf( esc_html( __( 'Click to copy %s shortcode', 'wp-user-frontend' ) ), esc_attr( $shortcode['type'] ) ), sprintf( '[%s type="%s" id="%s"]', esc_attr( $shortcode['name'] ), esc_attr( $shortcode['type'] ), esc_attr( $form_id ) ), esc_attr( ucwords( $shortcode['type'] ) ), esc_attr( $shortcode['type'] ) ); + } + } else { + printf( " #{{ post.ID }}", esc_html( __( 'Click to copy shortcode', 'wp-user-frontend' ) ), '[' . esc_attr( $shortcodes[0]['name'] ) . ' id="' . esc_attr( $form_id ) . '"]' ); + } + ?> +
+ + + +
+
+ +
+
+
+ +
+
+ +
+ +
+
+ +
+
+
+
+ +
+
+ + +
+ +
+
+
+ + +
+ + + + + + + + +
+
diff --git a/admin/form-builder/views/form-builder.php b/admin/form-builder/views/form-builder.php index ed6271c7b..a90f7ecfe 100644 --- a/admin/form-builder/views/form-builder.php +++ b/admin/form-builder/views/form-builder.php @@ -1,120 +1,124 @@ -
-
-

- - - - - - - - - - - - - - - - - - - -

- -
-
-
-
- {{ post.post_title }} - - - - - - - - 1 && isset( $shortcodes[0]['type'] ) ) { - foreach ( $shortcodes as $shortcode ) { - /* translators: %s: form id */ - printf( " %s: #{{ post.ID }}", sprintf( esc_html( __( 'Click to copy %s shortcode', 'wp-user-frontend' ) ), esc_attr( $shortcode['type'] ) ), sprintf( '[%s type="%s" id="%s"]', esc_attr( $shortcode['name'] ), esc_attr( $shortcode['type'] ), esc_attr( $form_id ) ), esc_attr( ucwords( $shortcode['type'] ) ), esc_attr( $shortcode['type'] ) ); - } - } else { - printf( " #{{ post.ID }}", esc_html( __( 'Click to copy shortcode', 'wp-user-frontend' ) ), '[' . esc_attr( $shortcodes[0]['name'] ) . ' id="' . esc_attr( $form_id ) . '"]' ); - } - ?> -
- - - -
-
- + +
+
+ WPUF Icon +
-
- -
-
- -
- -
-
- + +
+
+
-
-
-
- -
-
- - -
- -
-
-
- - +
+ +
+ + + + + + + + + +
- - - - - - - - - - +
+ 1 && isset( $shortcodes[0]['type'] ) ) { + foreach ( $shortcodes as $shortcode ) { + /* translators: %s: form id */ + printf( " %s: #{{ post.ID }}", sprintf( esc_html( __( 'Click to copy %s shortcode', 'wp-user-frontend' ) ), esc_attr( $shortcode['type'] ) ), sprintf( '[%s type="%s" id="%s"]', esc_attr( $shortcode['name'] ), esc_attr( $shortcode['type'] ), esc_attr( $form_id ) ), esc_attr( ucwords( $shortcode['type'] ) ), esc_attr( $shortcode['type'] ) ); + } + } else { + ?> + ">#{{ post.ID }} + + + + + + + + + + + + + + + +
+ +
+
+ builder stage here + +
+
Field attributes
+
+ diff --git a/assets/css/admin/form-builder.css b/assets/css/admin/form-builder.css new file mode 100644 index 000000000..5524d58f0 --- /dev/null +++ b/assets/css/admin/form-builder.css @@ -0,0 +1,2991 @@ +/* +! tailwindcss v3.4.11 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +7. Disable tap highlights on iOS +*/ + +html, +:host { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ + -webkit-tap-highlight-color: transparent; + /* 7 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font-family by default. +2. Use the user's configured `mono` font-feature-settings by default. +3. Use the user's configured `mono` font-variation-settings by default. +4. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-feature-settings: normal; + /* 2 */ + font-variation-settings: normal; + /* 3 */ + font-size: 1em; + /* 4 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + letter-spacing: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: #fff; + border-color: #6b7280; + border-width: 1px; + border-radius: 0px; + padding-top: 0.5rem; + padding-right: 0.75rem; + padding-bottom: 0.5rem; + padding-left: 0.75rem; + font-size: 1rem; + line-height: 1.5rem; + --tw-shadow: 0 0 #0000; +} + +[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #2563eb; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + border-color: #2563eb; +} + +input::-moz-placeholder, textarea::-moz-placeholder { + color: #6b7280; + opacity: 1; +} + +input::placeholder,textarea::placeholder { + color: #6b7280; + opacity: 1; +} + +::-webkit-datetime-edit-fields-wrapper { + padding: 0; +} + +::-webkit-date-and-time-value { + min-height: 1.5em; + text-align: inherit; +} + +::-webkit-datetime-edit { + display: inline-flex; +} + +::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field { + padding-top: 0; + padding-bottom: 0; +} + +select { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 0.5rem center; + background-repeat: no-repeat; + background-size: 1.5em 1.5em; + padding-right: 2.5rem; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; +} + +[multiple],[size]:where(select:not([size="1"])) { + background-image: initial; + background-position: initial; + background-repeat: unset; + background-size: initial; + padding-right: 0.75rem; + -webkit-print-color-adjust: unset; + print-color-adjust: unset; +} + +[type='checkbox'],[type='radio'] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 0; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + display: inline-block; + vertical-align: middle; + background-origin: border-box; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + flex-shrink: 0; + height: 1rem; + width: 1rem; + color: #2563eb; + background-color: #fff; + border-color: #6b7280; + border-width: 1px; + --tw-shadow: 0 0 #0000; +} + +[type='checkbox'] { + border-radius: 0px; +} + +[type='radio'] { + border-radius: 100%; +} + +[type='checkbox']:focus,[type='radio']:focus { + outline: 2px solid transparent; + outline-offset: 2px; + --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); + --tw-ring-offset-width: 2px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #2563eb; + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); +} + +[type='checkbox']:checked,[type='radio']:checked { + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; +} + +[type='checkbox']:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); +} + +@media (forced-colors: active) { + [type='checkbox']:checked { + -webkit-appearance: auto; + -moz-appearance: auto; + appearance: auto; + } +} + +[type='radio']:checked { + background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); +} + +@media (forced-colors: active) { + [type='radio']:checked { + -webkit-appearance: auto; + -moz-appearance: auto; + appearance: auto; + } +} + +[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus { + border-color: transparent; + background-color: currentColor; +} + +[type='checkbox']:indeterminate { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); + border-color: transparent; + background-color: currentColor; + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; +} + +@media (forced-colors: active) { + [type='checkbox']:indeterminate { + -webkit-appearance: auto; + -moz-appearance: auto; + appearance: auto; + } +} + +[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus { + border-color: transparent; + background-color: currentColor; +} + +[type='file'] { + background: unset; + border-color: inherit; + border-width: 0; + border-radius: 0; + padding: 0; + font-size: unset; + line-height: inherit; +} + +[type='file']:focus { + outline: 1px solid ButtonText; + outline: 1px auto -webkit-focus-ring-color; +} + +:root, +[data-theme] { + background-color: var(--fallback-b1,oklch(var(--b1)/1)); + color: var(--fallback-bc,oklch(var(--bc)/1)); +} + +@supports not (color: oklch(0% 0 0)) { + :root { + color-scheme: light; + --fallback-p: #491eff; + --fallback-pc: #d4dbff; + --fallback-s: #ff41c7; + --fallback-sc: #fff9fc; + --fallback-a: #00cfbd; + --fallback-ac: #00100d; + --fallback-n: #2b3440; + --fallback-nc: #d7dde4; + --fallback-b1: #ffffff; + --fallback-b2: #e5e6e6; + --fallback-b3: #e5e6e6; + --fallback-bc: #1f2937; + --fallback-in: #00b3f0; + --fallback-inc: #000000; + --fallback-su: #00ca92; + --fallback-suc: #000000; + --fallback-wa: #ffc22d; + --fallback-wac: #000000; + --fallback-er: #ff6f70; + --fallback-erc: #000000; + } + + @media (prefers-color-scheme: dark) { + :root { + color-scheme: dark; + --fallback-p: #7582ff; + --fallback-pc: #050617; + --fallback-s: #ff71cf; + --fallback-sc: #190211; + --fallback-a: #00c7b5; + --fallback-ac: #000e0c; + --fallback-n: #2a323c; + --fallback-nc: #a6adbb; + --fallback-b1: #1d232a; + --fallback-b2: #191e24; + --fallback-b3: #15191e; + --fallback-bc: #a6adbb; + --fallback-in: #00b3f0; + --fallback-inc: #000000; + --fallback-su: #00ca92; + --fallback-suc: #000000; + --fallback-wa: #ffc22d; + --fallback-wac: #000000; + --fallback-er: #ff6f70; + --fallback-erc: #000000; + } + } +} + +html { + -webkit-tap-highlight-color: transparent; +} + +* { + scrollbar-color: color-mix(in oklch, currentColor 35%, transparent) transparent; +} + +*:hover { + scrollbar-color: color-mix(in oklch, currentColor 60%, transparent) transparent; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +.wpuf-avatar { + position: relative; + display: inline-flex; +} + +.wpuf-avatar > div { + display: block; + aspect-ratio: 1 / 1; + overflow: hidden; +} + +.wpuf-avatar img { + height: 100%; + width: 100%; + -o-object-fit: cover; + object-fit: cover; +} + +.wpuf-avatar.wpuf-placeholder > div { + display: flex; + align-items: center; + justify-content: center; +} + +.wpuf-avatar-group :where(.wpuf-avatar) { + overflow: hidden; + border-radius: 9999px; + border-width: 4px; + --tw-border-opacity: 1; + border-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-border-opacity))); +} + +@keyframes button-pop { + 0% { + transform: scale(var(--btn-focus-scale, 0.98)); + } + + 40% { + transform: scale(1.02); + } + + 100% { + transform: scale(1); + } +} + +@keyframes checkmark { + 0% { + background-position-y: 5px; + } + + 50% { + background-position-y: -2px; + } + + 100% { + background-position-y: 0; + } +} + +.wpuf-loading { + pointer-events: none; + display: inline-block; + aspect-ratio: 1 / 1; + width: 1.5rem; + background-color: currentColor; + -webkit-mask-size: 100%; + mask-size: 100%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} + +@keyframes modal-pop { + 0% { + opacity: 0; + } +} + +@keyframes progress-loading { + 50% { + background-position-x: -115%; + } +} + +@keyframes radiomark { + 0% { + box-shadow: 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset, + 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset; + } + + 50% { + box-shadow: 0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset, + 0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset; + } + + 100% { + box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset, + 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset; + } +} + +@keyframes rating-pop { + 0% { + transform: translateY(-0.125em); + } + + 40% { + transform: translateY(-0.125em); + } + + 100% { + transform: translateY(0); + } +} + +@keyframes skeleton { + from { + background-position: 150%; + } + + to { + background-position: -50%; + } +} + +@keyframes toast-pop { + 0% { + transform: scale(0.9); + opacity: 0; + } + + 100% { + transform: scale(1); + opacity: 1; + } +} + +.wpuf-tooltip { + position: relative; + display: inline-block; + --tooltip-offset: calc(100% + 1px + var(--tooltip-tail, 0px)); +} + +.wpuf-tooltip:before { + position: absolute; + pointer-events: none; + z-index: 1; + content: var(--tw-content); + --tw-content: attr(data-tip); +} + +.wpuf-tooltip:before, .wpuf-tooltip-top:before { + transform: translateX(-50%); + top: auto; + left: 50%; + right: auto; + bottom: var(--tooltip-offset); +} + +.wpuf-avatar.wpuf-online:before { + content: ""; + position: absolute; + z-index: 10; + display: block; + border-radius: 9999px; + --tw-bg-opacity: 1; + background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity))); + outline-style: solid; + outline-width: 2px; + outline-color: var(--fallback-b1,oklch(var(--b1)/1)); + width: 15%; + height: 15%; + top: 7%; + right: 7%; +} + +.wpuf-avatar.wpuf-offline:before { + content: ""; + position: absolute; + z-index: 10; + display: block; + border-radius: 9999px; + --tw-bg-opacity: 1; + background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))); + outline-style: solid; + outline-width: 2px; + outline-color: var(--fallback-b1,oklch(var(--b1)/1)); + width: 15%; + height: 15%; + top: 7%; + right: 7%; +} + +.wpuf-tooltip { + position: relative; + display: inline-block; + text-align: center; + --tooltip-tail: 0.1875rem; + --tooltip-color: var(--fallback-n,oklch(var(--n)/1)); + --tooltip-text-color: var(--fallback-nc,oklch(var(--nc)/1)); + --tooltip-tail-offset: calc(100% + 0.0625rem - var(--tooltip-tail)); +} + +.wpuf-tooltip:before, +.wpuf-tooltip:after { + opacity: 0; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-delay: 100ms; + transition-duration: 200ms; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +.wpuf-tooltip:after { + position: absolute; + content: ""; + border-style: solid; + border-width: var(--tooltip-tail, 0); + width: 0; + height: 0; + display: block; +} + +.wpuf-tooltip:before { + max-width: 20rem; + white-space: normal; + border-radius: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + font-size: 0.875rem; + line-height: 1.25rem; + background-color: var(--tooltip-color); + color: var(--tooltip-text-color); + width: -moz-max-content; + width: max-content; +} + +.wpuf-tooltip.wpuf-tooltip-open:before { + opacity: 1; + transition-delay: 75ms; +} + +.wpuf-tooltip.wpuf-tooltip-open:after { + opacity: 1; + transition-delay: 75ms; +} + +.wpuf-tooltip:hover:before { + opacity: 1; + transition-delay: 75ms; +} + +.wpuf-tooltip:hover:after { + opacity: 1; + transition-delay: 75ms; +} + +.wpuf-tooltip:has(:focus-visible):after, +.wpuf-tooltip:has(:focus-visible):before { + opacity: 1; + transition-delay: 75ms; +} + +.wpuf-tooltip:not([data-tip]):hover:before, +.wpuf-tooltip:not([data-tip]):hover:after { + visibility: hidden; + opacity: 0; +} + +.wpuf-tooltip:after, .wpuf-tooltip-top:after { + transform: translateX(-50%); + border-color: var(--tooltip-color) transparent transparent transparent; + top: auto; + left: 50%; + right: auto; + bottom: var(--tooltip-tail-offset); +} + +.wpuf-sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.wpuf-pointer-events-none { + pointer-events: none; +} + +.wpuf-fixed { + position: fixed; +} + +.wpuf-absolute { + position: absolute; +} + +.wpuf-relative { + position: relative; +} + +.wpuf-inset-0 { + inset: 0px; +} + +.wpuf-inset-y-0 { + top: 0px; + bottom: 0px; +} + +.wpuf--left-20 { + left: -5rem; +} + +.wpuf--left-40 { + left: -10rem; +} + +.wpuf-left-0 { + left: 0px; +} + +.wpuf-left-\[-2\%\] { + left: -2%; +} + +.wpuf-left-\[-20px\] { + left: -20px; +} + +.wpuf-left-\[calc\(50\%-5rem\)\] { + left: calc(50% - 5rem); +} + +.wpuf-right-0 { + right: 0px; +} + +.wpuf-right-4 { + right: 1rem; +} + +.wpuf-right-6 { + right: 1.5rem; +} + +.wpuf-right-8 { + right: 2rem; +} + +.wpuf-top-0 { + top: 0px; +} + +.wpuf-top-1\/3 { + top: 33.333333%; +} + +.wpuf-top-20 { + top: 5rem; +} + +.wpuf-top-4 { + top: 1rem; +} + +.wpuf-top-9 { + top: 2.25rem; +} + +.wpuf-top-\[-40\%\] { + top: -40%; +} + +.wpuf-z-10 { + z-index: 10; +} + +.wpuf-z-20 { + z-index: 20; +} + +.wpuf-z-40 { + z-index: 40; +} + +.wpuf-z-50 { + z-index: 50; +} + +.wpuf-col-span-2 { + grid-column: span 2 / span 2; +} + +.wpuf-m-0 { + margin: 0px; +} + +.wpuf--mx-1\.5 { + margin-left: -0.375rem; + margin-right: -0.375rem; +} + +.wpuf--my-1\.5 { + margin-top: -0.375rem; + margin-bottom: -0.375rem; +} + +.wpuf-mx-auto { + margin-left: auto; + margin-right: auto; +} + +.wpuf-my-0 { + margin-top: 0px; + margin-bottom: 0px; +} + +.wpuf-my-8 { + margin-top: 2rem; + margin-bottom: 2rem; +} + +.wpuf--mb-px { + margin-bottom: -1px; +} + +.wpuf--ml-3 { + margin-left: -0.75rem; +} + +.wpuf--ml-px { + margin-left: -1px; +} + +.wpuf--mr-3 { + margin-right: -0.75rem; +} + +.wpuf-mb-0 { + margin-bottom: 0px; +} + +.wpuf-mb-1 { + margin-bottom: 0.25rem; +} + +.wpuf-mb-4 { + margin-bottom: 1rem; +} + +.wpuf-mb-5 { + margin-bottom: 1.25rem; +} + +.wpuf-me-2 { + margin-inline-end: 0.5rem; +} + +.wpuf-ml-1 { + margin-left: 0.25rem; +} + +.wpuf-ml-2 { + margin-left: 0.5rem; +} + +.wpuf-ml-3 { + margin-left: 0.75rem; +} + +.wpuf-ml-4 { + margin-left: 1rem; +} + +.wpuf-ml-\[-20px\] { + margin-left: -20px; +} + +.wpuf-mr-1 { + margin-right: 0.25rem; +} + +.wpuf-mr-2 { + margin-right: 0.5rem; +} + +.wpuf-mr-4 { + margin-right: 1rem; +} + +.wpuf-mr-\[10px\] { + margin-right: 10px; +} + +.wpuf-mr-\[16px\] { + margin-right: 16px; +} + +.wpuf-mt-0 { + margin-top: 0px; +} + +.wpuf-mt-1 { + margin-top: 0.25rem; +} + +.wpuf-mt-12 { + margin-top: 3rem; +} + +.wpuf-mt-16 { + margin-top: 4rem; +} + +.wpuf-mt-2 { + margin-top: 0.5rem; +} + +.wpuf-mt-4 { + margin-top: 1rem; +} + +.wpuf-mt-5 { + margin-top: 1.25rem; +} + +.wpuf-mt-8 { + margin-top: 2rem; +} + +.wpuf-mt-\[-5px\] { + margin-top: -5px; +} + +.wpuf-mt-\[1px\] { + margin-top: 1px; +} + +.wpuf-mt-\[32px\] { + margin-top: 32px; +} + +.wpuf-mt-\[40px\] { + margin-top: 40px; +} + +.wpuf-block { + display: block; +} + +.wpuf-inline-block { + display: inline-block; +} + +.wpuf-flex { + display: flex; +} + +.wpuf-inline-flex { + display: inline-flex; +} + +.wpuf-grid { + display: grid; +} + +.wpuf-hidden { + display: none; +} + +.wpuf-h-10 { + height: 2.5rem; +} + +.wpuf-h-12 { + height: 3rem; +} + +.wpuf-h-3 { + height: 0.75rem; +} + +.wpuf-h-5 { + height: 1.25rem; +} + +.wpuf-h-6 { + height: 1.5rem; +} + +.wpuf-h-8 { + height: 2rem; +} + +.wpuf-h-80 { + height: 20rem; +} + +.wpuf-h-\[180\%\] { + height: 180%; +} + +.wpuf-h-\[50vh\] { + height: 50vh; +} + +.wpuf-h-full { + height: 100%; +} + +.wpuf-h-max { + height: -moz-max-content; + height: max-content; +} + +.wpuf-h-screen { + height: 100vh; +} + +.wpuf-h-svh { + height: 100svh; +} + +.wpuf-min-h-full { + min-height: 100%; +} + +.wpuf-min-h-max { + min-height: -moz-max-content; + min-height: max-content; +} + +.wpuf-min-h-screen { + min-height: 100vh; +} + +.wpuf-w-1\/2 { + width: 50%; +} + +.wpuf-w-1\/3 { + width: 33.333333%; +} + +.wpuf-w-10 { + width: 2.5rem; +} + +.wpuf-w-11 { + width: 2.75rem; +} + +.wpuf-w-12 { + width: 3rem; +} + +.wpuf-w-2\/3 { + width: 66.666667%; +} + +.wpuf-w-2\/4 { + width: 50%; +} + +.wpuf-w-2\/5 { + width: 40%; +} + +.wpuf-w-3 { + width: 0.75rem; +} + +.wpuf-w-3\/4 { + width: 75%; +} + +.wpuf-w-44 { + width: 11rem; +} + +.wpuf-w-5 { + width: 1.25rem; +} + +.wpuf-w-6 { + width: 1.5rem; +} + +.wpuf-w-8 { + width: 2rem; +} + +.wpuf-w-\[104\%\] { + width: 104%; +} + +.wpuf-w-\[calc\(100\%\+20px\)\] { + width: calc(100% + 20px); +} + +.wpuf-w-\[calc\(100\%\+40px\)\] { + width: calc(100% + 40px); +} + +.wpuf-w-\[calc\(100\%-2rem\)\] { + width: calc(100% - 2rem); +} + +.wpuf-w-auto { + width: auto; +} + +.wpuf-w-fit { + width: -moz-fit-content; + width: fit-content; +} + +.wpuf-w-full { + width: 100%; +} + +.wpuf-w-max { + width: -moz-max-content; + width: max-content; +} + +.wpuf-w-screen { + width: 100vw; +} + +.wpuf-min-w-0 { + min-width: 0px; +} + +.\!wpuf-max-w-full { + max-width: 100% !important; +} + +.wpuf-max-w-lg { + max-width: 32rem; +} + +.wpuf-max-w-xs { + max-width: 20rem; +} + +.wpuf-flex-1 { + flex: 1 1 0%; +} + +.wpuf-flex-none { + flex: none; +} + +.wpuf-flex-shrink { + flex-shrink: 1; +} + +.wpuf-flex-shrink-0 { + flex-shrink: 0; +} + +.wpuf-flex-grow { + flex-grow: 1; +} + +.wpuf-basis-1\/5 { + flex-basis: 20%; +} + +.wpuf-basis-4\/5 { + flex-basis: 80%; +} + +.wpuf-origin-top-right { + transform-origin: top right; +} + +.wpuf-translate-x-0 { + --tw-translate-x: 0px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.wpuf-translate-x-5 { + --tw-translate-x: 1.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.wpuf-rotate-180 { + --tw-rotate: 180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.wpuf-rotate-6 { + --tw-rotate: 6deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.wpuf-rotate-90 { + --tw-rotate: 90deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.wpuf-transform { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.wpuf-cursor-not-allowed { + cursor: not-allowed; +} + +.wpuf-cursor-pointer { + cursor: pointer; +} + +.wpuf-cursor-wait { + cursor: wait; +} + +.wpuf-grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.wpuf-grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.wpuf-grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +.wpuf-flex-row-reverse { + flex-direction: row-reverse; +} + +.wpuf-flex-col { + flex-direction: column; +} + +.wpuf-flex-wrap { + flex-wrap: wrap; +} + +.wpuf-items-start { + align-items: flex-start; +} + +.wpuf-items-center { + align-items: center; +} + +.wpuf-items-baseline { + align-items: baseline; +} + +.wpuf-items-stretch { + align-items: stretch; +} + +.wpuf-justify-start { + justify-content: flex-start; +} + +.wpuf-justify-end { + justify-content: flex-end; +} + +.wpuf-justify-center { + justify-content: center; +} + +.wpuf-justify-between { + justify-content: space-between; +} + +.wpuf-justify-around { + justify-content: space-around; +} + +.wpuf-gap-3 { + gap: 0.75rem; +} + +.wpuf-gap-4 { + gap: 1rem; +} + +.wpuf-gap-x-1\.5 { + -moz-column-gap: 0.375rem; + column-gap: 0.375rem; +} + +.wpuf-gap-x-3 { + -moz-column-gap: 0.75rem; + column-gap: 0.75rem; +} + +.wpuf--space-x-px > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(-1px * var(--tw-space-x-reverse)); + margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse))); +} + +.wpuf-space-x-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); +} + +.wpuf-space-x-8 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(2rem * var(--tw-space-x-reverse)); + margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse))); +} + +.wpuf-space-y-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); +} + +.wpuf-overflow-hidden { + overflow: hidden; +} + +.wpuf-overflow-y-auto { + overflow-y: auto; +} + +.wpuf-whitespace-nowrap { + white-space: nowrap; +} + +.wpuf-text-wrap { + text-wrap: wrap; +} + +.\!wpuf-rounded-none { + border-radius: 0px !important; +} + +.wpuf-rounded { + border-radius: 0.25rem; +} + +.wpuf-rounded-full { + border-radius: 9999px; +} + +.wpuf-rounded-lg { + border-radius: 0.5rem; +} + +.wpuf-rounded-md { + border-radius: 0.375rem; +} + +.wpuf-rounded-xl { + border-radius: 0.75rem; +} + +.\!wpuf-rounded-l-md { + border-top-left-radius: 0.375rem !important; + border-bottom-left-radius: 0.375rem !important; +} + +.wpuf-rounded-b-md { + border-bottom-right-radius: 0.375rem; + border-bottom-left-radius: 0.375rem; +} + +.wpuf-rounded-b-xl { + border-bottom-right-radius: 0.75rem; + border-bottom-left-radius: 0.75rem; +} + +.wpuf-rounded-l-md { + border-top-left-radius: 0.375rem; + border-bottom-left-radius: 0.375rem; +} + +.wpuf-rounded-r-lg { + border-top-right-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; +} + +.wpuf-rounded-r-md { + border-top-right-radius: 0.375rem; + border-bottom-right-radius: 0.375rem; +} + +.wpuf-rounded-t-lg { + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; +} + +.wpuf-rounded-t-md { + border-top-left-radius: 0.375rem; + border-top-right-radius: 0.375rem; +} + +.wpuf-rounded-t-xl { + border-top-left-radius: 0.75rem; + border-top-right-radius: 0.75rem; +} + +.\!wpuf-border { + border-width: 1px !important; +} + +.wpuf-border { + border-width: 1px; +} + +.wpuf-border-2 { + border-width: 2px; +} + +.wpuf-border-b { + border-bottom-width: 1px; +} + +.wpuf-border-b-2 { + border-bottom-width: 2px; +} + +.wpuf-border-l-0 { + border-left-width: 0px; +} + +.wpuf-border-r-2 { + border-right-width: 2px; +} + +.wpuf-border-t { + border-top-width: 1px; +} + +.wpuf-border-dashed { + border-style: dashed; +} + +.\!wpuf-border-gray-300 { + --tw-border-opacity: 1 !important; + border-color: rgb(209 213 219 / var(--tw-border-opacity)) !important; +} + +.\!wpuf-border-red-500 { + --tw-border-opacity: 1 !important; + border-color: rgb(239 68 68 / var(--tw-border-opacity)) !important; +} + +.wpuf-border-blue-500 { + --tw-border-opacity: 1; + border-color: rgb(59 130 246 / var(--tw-border-opacity)); +} + +.wpuf-border-blue-600 { + --tw-border-opacity: 1; + border-color: rgb(37 99 235 / var(--tw-border-opacity)); +} + +.wpuf-border-gray-100 { + --tw-border-opacity: 1; + border-color: rgb(243 244 246 / var(--tw-border-opacity)); +} + +.wpuf-border-gray-200 { + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity)); +} + +.wpuf-border-gray-300 { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + +.wpuf-border-indigo-500 { + --tw-border-opacity: 1; + border-color: rgb(99 102 241 / var(--tw-border-opacity)); +} + +.wpuf-border-indigo-600 { + --tw-border-opacity: 1; + border-color: rgb(79 70 229 / var(--tw-border-opacity)); +} + +.wpuf-border-red-500 { + --tw-border-opacity: 1; + border-color: rgb(239 68 68 / var(--tw-border-opacity)); +} + +.wpuf-border-slate-200 { + --tw-border-opacity: 1; + border-color: rgb(226 232 240 / var(--tw-border-opacity)); +} + +.wpuf-border-slate-300 { + --tw-border-opacity: 1; + border-color: rgb(203 213 225 / var(--tw-border-opacity)); +} + +.wpuf-border-transparent { + border-color: transparent; +} + +.wpuf-bg-amber-500 { + --tw-bg-opacity: 1; + background-color: rgb(245 158 11 / var(--tw-bg-opacity)); +} + +.wpuf-bg-amber-600 { + --tw-bg-opacity: 1; + background-color: rgb(217 119 6 / var(--tw-bg-opacity)); +} + +.wpuf-bg-black\/25 { + background-color: rgb(0 0 0 / 0.25); +} + +.wpuf-bg-blue-500 { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); +} + +.wpuf-bg-gray-100 { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + +.wpuf-bg-gray-200 { + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity)); +} + +.wpuf-bg-gray-50 { + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity)); +} + +.wpuf-bg-gray-500 { + --tw-bg-opacity: 1; + background-color: rgb(107 114 128 / var(--tw-bg-opacity)); +} + +.wpuf-bg-green-100 { + --tw-bg-opacity: 1; + background-color: rgb(220 252 231 / var(--tw-bg-opacity)); +} + +.wpuf-bg-green-50 { + --tw-bg-opacity: 1; + background-color: rgb(240 253 244 / var(--tw-bg-opacity)); +} + +.wpuf-bg-indigo-600 { + --tw-bg-opacity: 1; + background-color: rgb(79 70 229 / var(--tw-bg-opacity)); +} + +.wpuf-bg-indigo-700 { + --tw-bg-opacity: 1; + background-color: rgb(67 56 202 / var(--tw-bg-opacity)); +} + +.wpuf-bg-orange-50 { + --tw-bg-opacity: 1; + background-color: rgb(255 247 237 / var(--tw-bg-opacity)); +} + +.wpuf-bg-red-100 { + --tw-bg-opacity: 1; + background-color: rgb(254 226 226 / var(--tw-bg-opacity)); +} + +.wpuf-bg-red-50 { + --tw-bg-opacity: 1; + background-color: rgb(254 242 242 / var(--tw-bg-opacity)); +} + +.wpuf-bg-red-500 { + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); +} + +.wpuf-bg-red-600 { + --tw-bg-opacity: 1; + background-color: rgb(220 38 38 / var(--tw-bg-opacity)); +} + +.wpuf-bg-slate-100 { + --tw-bg-opacity: 1; + background-color: rgb(241 245 249 / var(--tw-bg-opacity)); +} + +.wpuf-bg-slate-50 { + --tw-bg-opacity: 1; + background-color: rgb(248 250 252 / var(--tw-bg-opacity)); +} + +.wpuf-bg-transparent { + background-color: transparent; +} + +.wpuf-bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.wpuf-bg-yellow-100 { + --tw-bg-opacity: 1; + background-color: rgb(254 249 195 / var(--tw-bg-opacity)); +} + +.wpuf-bg-yellow-50 { + --tw-bg-opacity: 1; + background-color: rgb(254 252 232 / var(--tw-bg-opacity)); +} + +.wpuf-bg-opacity-75 { + --tw-bg-opacity: 0.75; +} + +.\!wpuf-stroke-indigo-600 { + stroke: #4f46e5 !important; +} + +.wpuf-stroke-gray-400 { + stroke: #9ca3af; +} + +.wpuf-p-0 { + padding: 0px; +} + +.wpuf-p-1 { + padding: 0.25rem; +} + +.wpuf-p-1\.5 { + padding: 0.375rem; +} + +.wpuf-p-2 { + padding: 0.5rem; +} + +.wpuf-p-4 { + padding: 1rem; +} + +.wpuf-p-5 { + padding: 1.25rem; +} + +.wpuf-p-6 { + padding: 1.5rem; +} + +.wpuf-p-\[10px\] { + padding: 10px; +} + +.\!wpuf-px-4 { + padding-left: 1rem !important; + padding-right: 1rem !important; +} + +.\!wpuf-py-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; +} + +.wpuf-px-1 { + padding-left: 0.25rem; + padding-right: 0.25rem; +} + +.wpuf-px-12 { + padding-left: 3rem; + padding-right: 3rem; +} + +.wpuf-px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.wpuf-px-2\.5 { + padding-left: 0.625rem; + padding-right: 0.625rem; +} + +.wpuf-px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.wpuf-px-3\.5 { + padding-left: 0.875rem; + padding-right: 0.875rem; +} + +.wpuf-px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + +.wpuf-px-5 { + padding-left: 1.25rem; + padding-right: 1.25rem; +} + +.wpuf-px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.wpuf-px-\[20px\] { + padding-left: 20px; + padding-right: 20px; +} + +.wpuf-py-0\.5 { + padding-top: 0.125rem; + padding-bottom: 0.125rem; +} + +.wpuf-py-1 { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.wpuf-py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.wpuf-py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.wpuf-py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.wpuf-py-5 { + padding-top: 1.25rem; + padding-bottom: 1.25rem; +} + +.wpuf-py-6 { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.wpuf-pb-4 { + padding-bottom: 1rem; +} + +.wpuf-pb-6 { + padding-bottom: 1.5rem; +} + +.wpuf-pl-1 { + padding-left: 0.25rem; +} + +.wpuf-pl-2 { + padding-left: 0.5rem; +} + +.wpuf-pl-3 { + padding-left: 0.75rem; +} + +.wpuf-pl-\[20px\] { + padding-left: 20px; +} + +.wpuf-pl-\[48px\] { + padding-left: 48px; +} + +.wpuf-pr-10 { + padding-right: 2.5rem; +} + +.wpuf-pr-2 { + padding-right: 0.5rem; +} + +.wpuf-pr-3 { + padding-right: 0.75rem; +} + +.wpuf-pr-4 { + padding-right: 1rem; +} + +.wpuf-pr-\[20px\] { + padding-right: 20px; +} + +.wpuf-pr-\[48px\] { + padding-right: 48px; +} + +.wpuf-pt-1 { + padding-top: 0.25rem; +} + +.wpuf-pt-4 { + padding-top: 1rem; +} + +.wpuf-pt-5 { + padding-top: 1.25rem; +} + +.wpuf-pt-\[40px\] { + padding-top: 40px; +} + +.wpuf-text-left { + text-align: left; +} + +.wpuf-text-center { + text-align: center; +} + +.wpuf-text-end { + text-align: end; +} + +.\!wpuf-text-sm { + font-size: 0.875rem !important; + line-height: 1.25rem !important; +} + +.wpuf-text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + +.wpuf-text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; +} + +.wpuf-text-\[11px\] { + font-size: 11px; +} + +.wpuf-text-\[24px\] { + font-size: 24px; +} + +.wpuf-text-base { + font-size: 1rem; + line-height: 1.5rem; +} + +.wpuf-text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.wpuf-text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.wpuf-text-xs { + font-size: 0.75rem; + line-height: 1rem; +} + +.wpuf-font-bold { + font-weight: 700; +} + +.wpuf-font-medium { + font-weight: 500; +} + +.wpuf-font-normal { + font-weight: 400; +} + +.wpuf-font-semibold { + font-weight: 600; +} + +.wpuf-italic { + font-style: italic; +} + +.wpuf-leading-10 { + line-height: 2.5rem; +} + +.wpuf-leading-6 { + line-height: 1.5rem; +} + +.wpuf-leading-none { + line-height: 1; +} + +.wpuf-tracking-tight { + letter-spacing: -0.025em; +} + +.\!wpuf-text-red-900 { + --tw-text-opacity: 1 !important; + color: rgb(127 29 29 / var(--tw-text-opacity)) !important; +} + +.wpuf-text-blue-600 { + --tw-text-opacity: 1; + color: rgb(37 99 235 / var(--tw-text-opacity)); +} + +.wpuf-text-gray-400 { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.wpuf-text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.wpuf-text-gray-600 { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity)); +} + +.wpuf-text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.wpuf-text-gray-900 { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.wpuf-text-green-500 { + --tw-text-opacity: 1; + color: rgb(34 197 94 / var(--tw-text-opacity)); +} + +.wpuf-text-green-700 { + --tw-text-opacity: 1; + color: rgb(21 128 61 / var(--tw-text-opacity)); +} + +.wpuf-text-indigo-600 { + --tw-text-opacity: 1; + color: rgb(79 70 229 / var(--tw-text-opacity)); +} + +.wpuf-text-orange-700 { + --tw-text-opacity: 1; + color: rgb(194 65 12 / var(--tw-text-opacity)); +} + +.wpuf-text-red-500 { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity)); +} + +.wpuf-text-red-600 { + --tw-text-opacity: 1; + color: rgb(220 38 38 / var(--tw-text-opacity)); +} + +.wpuf-text-red-700 { + --tw-text-opacity: 1; + color: rgb(185 28 28 / var(--tw-text-opacity)); +} + +.wpuf-text-slate-700 { + --tw-text-opacity: 1; + color: rgb(51 65 85 / var(--tw-text-opacity)); +} + +.wpuf-text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.wpuf-text-yellow-400 { + --tw-text-opacity: 1; + color: rgb(250 204 21 / var(--tw-text-opacity)); +} + +.wpuf-text-yellow-500 { + --tw-text-opacity: 1; + color: rgb(234 179 8 / var(--tw-text-opacity)); +} + +.wpuf-text-yellow-700 { + --tw-text-opacity: 1; + color: rgb(161 98 7 / var(--tw-text-opacity)); +} + +.wpuf-shadow { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.wpuf-shadow-lg { + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.wpuf-shadow-sm { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.wpuf-shadow-xl { + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.wpuf-ring-0 { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.wpuf-ring-1 { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.wpuf-ring-inset { + --tw-ring-inset: inset; +} + +.wpuf-ring-blue-200 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity)); +} + +.wpuf-ring-gray-300 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); +} + +.wpuf-ring-gray-900\/5 { + --tw-ring-color: rgb(17 24 39 / 0.05); +} + +.wpuf-ring-green-600\/20 { + --tw-ring-color: rgb(22 163 74 / 0.2); +} + +.wpuf-ring-indigo-600 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity)); +} + +.wpuf-ring-orange-600\/10 { + --tw-ring-color: rgb(234 88 12 / 0.1); +} + +.wpuf-ring-red-300 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity)); +} + +.wpuf-ring-red-500 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity)); +} + +.wpuf-ring-red-600\/10 { + --tw-ring-color: rgb(220 38 38 / 0.1); +} + +.wpuf-ring-slate-600\/10 { + --tw-ring-color: rgb(71 85 105 / 0.1); +} + +.wpuf-ring-yellow-600\/10 { + --tw-ring-color: rgb(202 138 4 / 0.1); +} + +.wpuf-blur { + --tw-blur: blur(8px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.wpuf-transition { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.wpuf-transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.wpuf-transition-colors { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.wpuf-transition-opacity { + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.wpuf-duration-200 { + transition-duration: 200ms; +} + +.wpuf-ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +.wpuf-transition-all { + transition-property: all; +} + +.wpuf-form-template-modal { + background: #fff; + position: fixed; + top: 5%; + bottom: 5%; + right: 10%; + left: 10%; + display: none; + box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1); + z-index: 99; +} + +/* Transition styles */ + +.wpuf-dropdown-item { + --tw-scale-x: .75; + --tw-scale-y: .75; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + opacity: 0; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-property: all; + transition-duration: 100ms; + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); +} + +.wpuf-dropdown-container:hover .wpuf-dropdown-item { + --tw-scale-x: 1; + --tw-scale-y: 1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + opacity: 1; + transform: scale(1); +} + +.placeholder\:wpuf-text-gray-400::-moz-placeholder { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.placeholder\:wpuf-text-gray-400::placeholder { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.placeholder\:wpuf-text-red-300::-moz-placeholder { + --tw-text-opacity: 1; + color: rgb(252 165 165 / var(--tw-text-opacity)); +} + +.placeholder\:wpuf-text-red-300::placeholder { + --tw-text-opacity: 1; + color: rgb(252 165 165 / var(--tw-text-opacity)); +} + +.before\:wpuf-absolute::before { + content: var(--tw-content); + position: absolute; +} + +.before\:wpuf--top-6::before { + content: var(--tw-content); + top: -1.5rem; +} + +.before\:wpuf-mt-3::before { + content: var(--tw-content); + margin-top: 0.75rem; +} + +.before\:wpuf-h-3::before { + content: var(--tw-content); + height: 0.75rem; +} + +.before\:wpuf-bg-gray-700::before { + content: var(--tw-content); + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); +} + +.before\:wpuf-text-zinc-50::before { + content: var(--tw-content); + --tw-text-opacity: 1; + color: rgb(250 250 250 / var(--tw-text-opacity)); +} + +.after\:wpuf-absolute::after { + content: var(--tw-content); + position: absolute; +} + +.after\:wpuf-border::after { + content: var(--tw-content); + border-width: 1px; +} + +.after\:wpuf-border-b-0::after { + content: var(--tw-content); + border-bottom-width: 0px; +} + +.after\:wpuf-border-r-0::after { + content: var(--tw-content); + border-right-width: 0px; +} + +.after\:wpuf-border-x-transparent::after { + content: var(--tw-content); + border-left-color: transparent; + border-right-color: transparent; +} + +.after\:wpuf-border-t-gray-700::after { + content: var(--tw-content); + --tw-border-opacity: 1; + border-top-color: rgb(55 65 81 / var(--tw-border-opacity)); +} + +.after\:wpuf-bg-white::after { + content: var(--tw-content); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.focus-within\:wpuf-z-10:focus-within { + z-index: 10; +} + +.hover\:wpuf-block:hover { + display: block; +} + +.hover\:wpuf-cursor-pointer:hover { + cursor: pointer; +} + +.hover\:wpuf-border-b-2:hover { + border-bottom-width: 2px; +} + +.hover\:wpuf-border-blue-600:hover { + --tw-border-opacity: 1; + border-color: rgb(37 99 235 / var(--tw-border-opacity)); +} + +.hover\:wpuf-border-blue-700:hover { + --tw-border-opacity: 1; + border-color: rgb(29 78 216 / var(--tw-border-opacity)); +} + +.hover\:wpuf-border-gray-300:hover { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity)); +} + +.hover\:wpuf-border-red-700:hover { + --tw-border-opacity: 1; + border-color: rgb(185 28 28 / var(--tw-border-opacity)); +} + +.hover\:wpuf-bg-amber-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(217 119 6 / var(--tw-bg-opacity)); +} + +.hover\:wpuf-bg-blue-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(29 78 216 / var(--tw-bg-opacity)); +} + +.hover\:wpuf-bg-gray-100:hover { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity)); +} + +.hover\:wpuf-bg-gray-50:hover { + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity)); +} + +.hover\:wpuf-bg-indigo-500:hover { + --tw-bg-opacity: 1; + background-color: rgb(99 102 241 / var(--tw-bg-opacity)); +} + +.hover\:wpuf-bg-indigo-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(67 56 202 / var(--tw-bg-opacity)); +} + +.hover\:wpuf-bg-indigo-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(55 48 163 / var(--tw-bg-opacity)); +} + +.hover\:wpuf-bg-red-500:hover { + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); +} + +.hover\:wpuf-bg-red-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(185 28 28 / var(--tw-bg-opacity)); +} + +.hover\:wpuf-bg-slate-100:hover { + --tw-bg-opacity: 1; + background-color: rgb(241 245 249 / var(--tw-bg-opacity)); +} + +.hover\:wpuf-text-blue-600:hover { + --tw-text-opacity: 1; + color: rgb(37 99 235 / var(--tw-text-opacity)); +} + +.hover\:wpuf-text-gray-500:hover { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.hover\:wpuf-text-gray-700:hover { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + +.hover\:wpuf-text-gray-900:hover { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity)); +} + +.hover\:wpuf-text-indigo-600:hover { + --tw-text-opacity: 1; + color: rgb(79 70 229 / var(--tw-text-opacity)); +} + +.hover\:wpuf-text-white:hover { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.hover\:wpuf-shadow-none:hover { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.focus\:wpuf-z-20:focus { + z-index: 20; +} + +.focus\:\!wpuf-border-indigo-500:focus { + --tw-border-opacity: 1 !important; + border-color: rgb(99 102 241 / var(--tw-border-opacity)) !important; +} + +.focus\:wpuf-bg-amber-600:focus { + --tw-bg-opacity: 1; + background-color: rgb(217 119 6 / var(--tw-bg-opacity)); +} + +.focus\:wpuf-bg-indigo-500:focus { + --tw-bg-opacity: 1; + background-color: rgb(99 102 241 / var(--tw-bg-opacity)); +} + +.focus\:wpuf-bg-slate-100:focus { + --tw-bg-opacity: 1; + background-color: rgb(241 245 249 / var(--tw-bg-opacity)); +} + +.focus\:wpuf-text-white:focus { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.focus\:wpuf-shadow-none:focus { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.focus\:wpuf-outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.focus\:wpuf-ring:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:wpuf-ring-1:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:wpuf-ring-2:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:wpuf-ring-blue-200:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity)); +} + +.focus\:wpuf-ring-gray-300:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); +} + +.focus\:wpuf-ring-indigo-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity)); +} + +.focus\:wpuf-ring-red-200:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(254 202 202 / var(--tw-ring-opacity)); +} + +.focus\:wpuf-ring-red-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity)); +} + +.focus-visible\:wpuf-outline:focus-visible { + outline-style: solid; +} + +.focus-visible\:wpuf-outline-2:focus-visible { + outline-width: 2px; +} + +.focus-visible\:wpuf-outline-offset-2:focus-visible { + outline-offset: 2px; +} + +.focus-visible\:wpuf-outline-indigo-600:focus-visible { + outline-color: #4f46e5; +} + +.active\:wpuf-shadow-none:active { + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.wpuf-group:hover .group-hover\:wpuf-flex { + display: flex; +} + +.wpuf-group:hover .group-hover\:wpuf-rotate-6 { + --tw-rotate: 6deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} + +.wpuf-group:hover .group-hover\:wpuf-cursor-pointer { + cursor: pointer; +} + +.wpuf-group:hover .group-hover\:wpuf-stroke-gray-500 { + stroke: #6b7280; +} + +.wpuf-peer:hover ~ .peer-hover\:wpuf-block { + display: block; +} + +@media (min-width: 640px) { + .sm\:wpuf-p-0 { + padding: 0px; + } + + .sm\:wpuf-text-sm { + font-size: 0.875rem; + line-height: 1.25rem; + } + + .sm\:wpuf-leading-6 { + line-height: 1.5rem; + } +} + +.rtl\:wpuf-left-auto:where([dir="rtl"], [dir="rtl"] *) { + left: auto; +} + +.rtl\:wpuf-right-0:where([dir="rtl"], [dir="rtl"] *) { + right: 0px; +} + +.rtl\:wpuf-ml-1:where([dir="rtl"], [dir="rtl"] *) { + margin-left: 0.25rem; +} + +.rtl\:wpuf-mr-0:where([dir="rtl"], [dir="rtl"] *) { + margin-right: 0px; +} + +.rtl\:wpuf-pl-0:where([dir="rtl"], [dir="rtl"] *) { + padding-left: 0px; +} + +.rtl\:wpuf-pr-2:where([dir="rtl"], [dir="rtl"] *) { + padding-right: 0.5rem; +} + +.rtl\:wpuf-text-right:where([dir="rtl"], [dir="rtl"] *) { + text-align: right; +} diff --git a/assets/js-templates/form-components.php b/assets/js-templates/form-components.php index ca68db439..ff49ab785 100644 --- a/assets/js-templates/form-components.php +++ b/assets/js-templates/form-components.php @@ -421,20 +421,48 @@ class="option-chooser-radio" @@ -507,10 +535,10 @@ class="option-chooser-radio" @@ -703,32 +730,39 @@ class="button" @@ -758,9 +792,11 @@ class="button"
@@ -791,26 +827,31 @@ class="button" - +

@@ -818,16 +859,20 @@ class="textfield"
+ :class="class_names('textareafield')" + class="wpuf-block wpuf-w-full wpuf-rounded-md wpuf-border-0 wpuf-py-1.5 wpuf-text-gray-900 wpuf-shadow-sm wpuf-ring-1 wpuf-ring-inset wpuf-ring-gray-300 placeholder:wpuf-text-gray-400 focus:wpuf-ring-2 focus:wpuf-ring-inset focus:wpuf-ring-indigo-600 sm:wpuf-text-sm sm:wpuf-leading-6">{{ field.default }} - - + + +

diff --git a/assets/js/wpuf-form-builder.js b/assets/js/wpuf-form-builder.js index 8349eb77a..f8b14f944 100644 --- a/assets/js/wpuf-form-builder.js +++ b/assets/js/wpuf-form-builder.js @@ -410,7 +410,8 @@ is_form_saved: false, is_form_switcher: false, post_title_editing: false, - isDirty: false + isDirty: false, + shortcodeCopied: false, }, computed: { @@ -491,13 +492,16 @@ clipboard.on('success', function(e) { // Show copied tooltip $(e.trigger) - .attr('data-original-title', 'Copied!') + .attr('data-original-title', 'Shortcode copied!') .tooltip('show'); + self.shortcodeCopied = true; + // Reset the copied tooltip setTimeout(function() { $(e.trigger).tooltip('hide') .attr('data-original-title', self.i18n.copy_shortcode); + self.shortcodeCopied = false; }, 1000); e.clearSelection(); @@ -899,11 +903,11 @@ // on DOM ready $(function() { - resizeBuilderContainer(); - - $("#collapse-menu").click(function () { - resizeBuilderContainer(); - }); + // resizeBuilderContainer(); + // + // $("#collapse-menu").click(function () { + // resizeBuilderContainer(); + // }); function resizeBuilderContainer() { if ($(document.body).hasClass('folded')) { diff --git a/includes/Admin/Forms/Admin_Form.php b/includes/Admin/Forms/Admin_Form.php index e2bd4de98..052480386 100644 --- a/includes/Admin/Forms/Admin_Form.php +++ b/includes/Admin/Forms/Admin_Form.php @@ -261,11 +261,9 @@ public function add_settings_tabs() { */ public function add_primary_tabs() { ?> - - + - settings['post_type']; $form_settings_key = $this->settings['form_settings_key']; $shortcodes = $this->settings['shortcodes']; - $forms = get_posts( [ 'post_type' => $post_type, 'post_status' => 'any' ] ); - include WPUF_ROOT . '/admin/form-builder/views/form-builder.php'; + $forms = get_posts( + [ + 'post_type' => $post_type, + 'post_status' => 'any', + ] + ); + + if ( defined( 'WPUF_PRO_VERSION' ) && version_compare( WPUF_PRO_VERSION, '4.0.12', '<' ) ) { + include WPUF_ROOT . '/admin/form-builder/views/form-builder-old.php'; + } else { + include WPUF_ROOT . '/admin/form-builder/views/form-builder.php'; + } } /** - * i18n translatable strings + * WordPress i18n translatable strings * * @since 2.5 * diff --git a/includes/Admin/Forms/Post/Templates/Form_Template.php b/includes/Admin/Forms/Post/Templates/Form_Template.php index 76a7fe893..a6b3fa7c4 100644 --- a/includes/Admin/Forms/Post/Templates/Form_Template.php +++ b/includes/Admin/Forms/Post/Templates/Form_Template.php @@ -82,7 +82,11 @@ public function enqueue_scripts() { wp_enqueue_style( $deps ); } - wp_enqueue_style( 'wpuf-form-builder' ); + if ( defined( 'WPUF_PRO_VERSION' ) && version_compare( WPUF_PRO_VERSION, '4.0.12', '<' ) ) { + wp_enqueue_style( 'wpuf-form-builder' ); + } else { + wp_enqueue_style( 'wpuf-admin-form-builder' ); + } } /** diff --git a/includes/Admin/Posting.php b/includes/Admin/Posting.php index 5f42698d3..2a3513067 100644 --- a/includes/Admin/Posting.php +++ b/includes/Admin/Posting.php @@ -39,6 +39,12 @@ public static function init() { public function enqueue_script() { $api_key = wpuf_get_option( 'gmap_api_key', 'wpuf_general' ); + if ( defined( 'WPUF_PRO_VERSION' ) && version_compare( WPUF_PRO_VERSION, '4.0.12', '<' ) ) { + wp_enqueue_style( 'wpuf-form-builder' ); + } else { + wp_enqueue_style( 'wpuf-admin-form-builder' ); + } + wp_enqueue_style( 'jquery-ui', WPUF_ASSET_URI . '/css/jquery-ui-1.9.1.custom.css' ); wp_enqueue_script( 'jquery-ui-slider' ); diff --git a/includes/Admin/template-parts/modal.php b/includes/Admin/template-parts/modal.php index ae8e0d1a6..105c51dfc 100644 --- a/includes/Admin/template-parts/modal.php +++ b/includes/Admin/template-parts/modal.php @@ -127,7 +127,6 @@ class="wpuf-button button-upgrade-to-pro"
-