PATH:
home
/
lab2454c
/
caimegroup.com
/
wp-content
/
plugins
/
user-registration
/
assets
/
css
/** * admin.scss * General User Registration admin styles. */ /** * Imports */ @import "variables/variables"; @import "mixins/mixins"; @import "display"; @import "fonts"; @import "tables"; @import "forms"; // Components @import "components/badge", "components/button", "components/card", "components/list-group", "components/modal", "components/nav", "components/scroll-ui"; @import "border"; @import "spacing"; @import "containers"; @import "grids"; @import "overlay"; // Layout-related sections @import "layout/header"; @import "templates/template-setup"; @import "animation"; /** * Styling begins */ .blockUI.blockOverlay { @include loader(); } .toplevel_page_user-registration, .user-registration_page_user-registration-frontend-list { // Design customize for shortcode in list table .shortcode { .widefat { width: calc(100% - 40px); } .ur-copy-shortcode { padding: 4px; line-height: 1; } } } .user-registration_page_user-registration-dashboard { #wpcontent{ margin-left: 140px; } } .user-registration_page_user-registration-settings { .notice { display: none; } } .ur-spinner { width: 16px; height: 16px; margin-left: 6px; margin-bottom: 2px; display: inline-block; vertical-align: middle; @include loader(); } /** * Toggle class. */ .userregistration-forms-hidden { display: block; } .userregistration-forms-hidden { display: none; } .user-registration { &__wrap { *, ::before, ::after { box-sizing: border-box; } } } .ur-export-users-page { margin-top: 24px; .nav-tab-content { .nav-tab-inside { .postbox { width: 50%; flex: 1; .hndle { border-bottom: 1px solid #ccd0d4; } .ur-input { max-width: inherit; } } } .hndle, .stuffbox .hndle { margin: 10px; padding-bottom: 10px; } .stuffbox { padding: 10px; } } } .ur-label { .user-registration-help-tip { margin-left: 4px; } label span:not(.ur-portal-tooltip) { margin-left: 3px; } } .jconfirm-cell { padding-left: 30%; padding-right: 30%; } .jconfirm-content-pane { height: auto !important; .ur-shortcut-keyword { display: flex; align-items: center; margin-bottom: 18px; font-size: 18px; .ur-shortcut-title { flex: 3; } .ur-key { display: flex; flex: 2; column-gap: 8px; color: #3498db; span { border: 1px solid #3498db; background-color: #3498db13; padding: 5px 15px; border-radius: 2px; } .ur-key-plus { margin-top: 5px; font-size: 1.2em; } .ur-key-character { width: 15px; padding: 5px 10px; text-align: center; } } } } /** * Addons page **/ .ur_addons_wrap { p.refresh { margin: 0 0 2em; } .wp-filter { display: none; } .plugin-card { position: relative; h3 { margin: 0; font-size: 18px; font-weight: $semi_bold; line-height: 24px; } .name, .desc { margin-right: 0; margin-left: 156px; } .plugin-card-left { .plugin-icon { height: 140px; width: 140px; border: 1px solid #eee; border-radius: 2px; background-size: contain; background-repeat: no-repeat; } } .plugin-card-right { display: flex; flex-direction: column; align-items: flex-start; padding: 20px; background-color: #fcfcff; border: 1px solid #b7c4ff; min-height: 130px; .plugin-desc { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .plugin-card-buttons { margin-left: 148px; .action-buttons { float: right; clear: right; max-width: 180px; margin-left: 10px; .install-now:hover { border-radius: 2px; background-color: #475bb2; color: #fff; } .upgrade-now { background: #475bb2 !important; color: #fff; font-weight: $medium; } .upgrade-now:hover { background: #516be0 !important; color: #fff; } &.upgrade-plan { margin: 0 auto; } } } } } .plugin-card-update-failed { .notice-error { margin: 0; padding: 9px 16px 8px; .notice-dismiss { padding: 17px; } } } @media screen and (max-width: 782px) { .plugin-card { .plugin-card-bottom { .action-buttons { .button.updating-message { &::before, &::after { margin-top: -1px; } } } } } .plugin-card-update-failed { .notice-error { padding: 13px 20px; .notice-dismiss { padding: 21px; } } } } } .clear { clear: both; } .wrap.user-registration div.updated, .wrap.user-registration div.error { margin-top: 10px; } /** * Form Builder Styles **/ .user-registration_page_add-new-registration, .toplevel_page_user-registration { #wpfooter { display: none; //Hide WP footer on form builder page } .ur-form-container { margin: 0; .ur-loading-container { position: fixed; left: 160px; right: 0; top: 0; bottom: 0; background: $white; display: flex; z-index: 9; .ur-circle-loading { margin: auto; left: 30px; } } #menu-management { margin-top: 0; .menu-edit { position: fixed; left: 160px; right: 0; border: none; box-shadow: none; margin-bottom: 0; } } // Form Builder Fullscreen mode #ur-full-screen-mode { &.closed { .ur-fs-close-label { display: none; } } &.opened { .ur-fs-open-label { display: none; } } } } #menu-management-liquid { margin-top: 0; margin-left: -20px; min-width: calc(100% + 20px); } #nav-menu-header { padding: 12px; display: flex; align-items: center; position: relative; border-color: $border_color; background-color: $white; z-index: 9; .ur-brand-logo { border-right: 1px solid $border_color; img { width: 32px; height: 32px; margin-right: 8px; display: flex; } a{ text-decoration: none; border: none; } a:focus { outline: none; box-shadow: none; } } &::before, &::after { content: ""; display: flex; position: absolute; left: 0; right: 0; bottom: 0; background: $white; } &::before { top: 0; z-index: -1; } &::after { height: 10px; box-shadow: 0px 4px 8px transparentize($gray_base, 0.92); z-index: -2; } } .major-publishing-actions { clear: both; line-height: 28px; margin-left: auto; .publishing-action { text-align: right; float: right; input { &.code { width: 280px; height: 33px; padding: 0 $spacing_6px; margin: 0; border-color: $grey-50; background: $blue-25; border-radius: 3px 0 0 3px; } } } .login-forms-shortcode-action { input { &.code { font-size: large; width: 320px; height: 33px; padding: 0 $spacing_6px; margin: 0; border-color: $grey-50; background: $blue-25; border-radius: 3px 0 0 3px; display: inline; } } } #copy-shortcode { margin-left: -5px; border-radius: 0 4px 4px 0; background: $blue-50 !important; border-color: $grey-50 !important; svg { fill: $white; margin-bottom: 5px; vertical-align: middle; } } } } /** * Backbone modal dialog */ .ur-backbone-modal { * { box-sizing: border-box; } .ur-backbone-modal-content { position: fixed; background-color: $white; z-index: 100000; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 500px; article { overflow: auto; } } &.ur-backbone-modal-content { width: 75%; min-width: 500px; } .select2-container { width: 100% !important; } } .ur-backbone-modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; min-height: 360px; background-color: $gray_base; opacity: 0.7; z-index: 99900; } .ur-backbone-modal-main { padding-bottom: 55px; header, article { display: block; position: relative; } .ur-backbone-modal-header { height: auto; background-color: $color_gray_five; padding: 1em 1.5em; border-bottom: 1px solid $border_color; h1 { margin: 0; font-size: 18px; font-weight: $bold; line-height: 1.5em; } .modal-close-link { cursor: pointer; color: #777; height: 54px; width: 54px; padding: 0; position: absolute; top: 0; right: 0; text-align: center; border: 0; border-left: 1px solid $border_color; background-color: transparent; transition: color 0.1s ease-in-out, background 0.1s ease-in-out; &::before { font: normal 22px/50px "dashicons" !important; color: $color_gray_two; display: block; content: "\f335"; font-weight: $light; } &:hover, &:focus { background-color: $color_gray_four; border-color: #ccc; color: $gray_base; } &:focus { outline: none; } } } article { padding: 1.5em; p { margin: 1.5em 0; } p:first-child { margin-top: 0; } p:last-child { margin-bottom: 0; } .pagination { padding: 10px 0 0; text-align: center; } } footer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 100; padding: 1em 1.5em; background-color: $color_gray_five; border-top: 1px solid #dfdfdf; box-shadow: 0 -4px 4px -4px rgba(0, 0, 0, 0.1); .inner { float: right; line-height: 23px; .button { margin-bottom: 0; } } } } .user-registration { textarea[disabled="disabled"] { background: #dfdfdf !important; } table.form-table { margin: 0; position: relative; fieldset { margin-top: 4px; img.help_tip, .user-registration-help-tip { margin: -3px 0 0 5px; } p.description { margin-bottom: 8px; } &:first-child { margin-top: 0; } } th { position: relative; padding-right: 24px; label { display: inline-block; } img.help_tip, .user-registration-help-tip { margin: 0 -24px 0 0; float: right; } } .select2-container { display: block; max-width: 350px; margin-bottom: 3px; } .forminp-radio ul { margin: 0; li { line-height: 1.4em; } } textarea.input-text { height: 100%; min-width: 150px; display: block; } input.regular-input { width: 25em; } textarea.wide-input { width: 100%; } .help_tip, .user-registration-help-tip { padding: 0; margin: -4px 0 0 5px; vertical-align: middle; cursor: help; line-height: 1; } .wp-list-table .user-registration-help-tip { float: none; } .iris-picker { z-index: 100; display: none; position: absolute; border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); .ui-slider { border: 0 !important; margin: 0 !important; width: auto !important; height: auto !important; background: none transparent !important; .ui-slider-handle { margin-bottom: 0 !important; } } } .colorpickpreview { padding: 3px; padding-left: 20px; border: 1px solid $border_color; border-right: 0; } .colorpick { border-left: 0; } .image_width_settings { vertical-align: middle; label { margin-left: 10px; } } .dashicons { margin-bottom: 2px; vertical-align: middle; } .image-upload { td { display: flex; align-items: baseline; flex-direction: column; gap: 10px; } } .radio-image { td { ul { display: flex; column-gap: 30px; li { label { display: flex; flex-direction: column; align-items: center; max-width: 175px; row-gap: 16px; border: 1px solid $border_color; border-radius: 2px; padding: 8px 16px; &.selected { border-color: #475BB2; background-color: #475bb230; color: #475BB2; font-weight: $semi_bold; } input { display: none; } } } } } } } } .ur-registered-from { display: flex; background-color: $white; * { box-sizing: border-box; } *:focus { outline: 0; } a { text-decoration: none; } h3, h4 { color: $gray_base; font-weight: $medium; } h4 { font-size: 16px; } .ur-field { label { font-weight: $regular; word-break: break-all; &:last-child { margin-bottom: 0; } } input { &[type="radio"], &[type="checkbox"] { opacity: 1; box-shadow: none; border-color: $border_color; } } &.user-registration-image-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: $spacing_12px; label { border: $border_width solid #ececec; padding: $spacing_6px; border-radius: $border_radius_4; margin-bottom: 0; .user-registration-image-choice { width: 100%; height: 100px; display: block; margin-bottom: $spacing_8px; position: relative; img { width: 100%; height: 100%; object-fit: cover; border-radius: $border_radius_2; } } input { &[type="radio"], &[type="checkbox"] { display: none; } } &.ur-image-choice-checked { color: #0693e3; border-color: #0693e3; .user-registration-image-choice { &::before { content: ""; position: absolute; width: 100%; height: 100%; background: #222; opacity: .45; z-index: 1; } &::after { content: ""; position: absolute; background: #00be34; border-radius: 1px; width: 12px; height: 12px; top: 8px; right: 8px; z-index: 2; } } } } } } .wp-picker-container { .wp-picker-input-wrap { label { display: inline-block; width: auto; input.wp-color-picker { height: auto; padding: 3px 5px; } } } } .ur-no-pointer { pointer-events: none; } .ur-registered-item { cursor: move; color: $grey-300; font-size: 12px; border-radius: $border_radius_4; margin: 0 $spacing_8px $spacing_16px; display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; width: calc(33.3333% - 16px); background: #fbfbfd; border: $border_width solid $blue-50; height: 100px; .ur-icon { font-size: 26px; margin-bottom: $spacing_4px; } &:hover { color: $primary_color; border-color: $primary_color; } &.ui-draggable-dragging { width: 110px !important; // Inherit js styles z-index: 9 !important; } &.ui-draggable-disabled { position: relative; opacity: .5; &::before { content: ""; background-image: url("../images/icons/lock-icon.png"); background-repeat: no-repeat; background-position: center; background-size: 100%; position: absolute; width: 16px; height: 16px; top: $spacing_8px; right: $spacing_8px; } &.ur-upgradable-field { cursor: pointer !important; opacity: 1; color: $grey-100; &::before { content: ""; background-image: url("../images/icons/ur-pro-icon.png"); background-repeat: no-repeat; background-position: center; background-size: 100%; position: absolute; border-radius: 2px; width: 16px; height: 16px; top: $spacing_8px; right: $spacing_8px; } &:hover { color: $grey-100; } } &:hover { color: $grey-300; background: #fbfbfd; border-color: $blue-50; cursor: not-allowed; } } } .ur-registered-inputs { width: 412px; @media (max-width: 1199px) { width: 360px; } .ur-tabs { border: 0 none; padding: 0; font-size: 14px; .ur-tab-contents { .ur-tab-content { // padding: 0; &#ur-tab-field-settings { margin-top: -$spacing_32px; margin-left: -$spacing_12px; margin-right: -$spacing_12px; } .form-settings-tab { margin-bottom: 0; border-radius: 0; padding: $spacing_18px $spacing_24px; border-bottom: $border_width solid #ececec; background: transparent; font-size: 15px; font-weight: $regular; line-height: 150%; display: flex; align-items: center; justify-content: space-between; padding-right: $spacing_16px; &::after { content: ""; background-image: url("../images/icons/ur-right-arrow.svg"); background-repeat: no-repeat; background-size: 100%; background-position: center; width: 18px; height: 18px; } &.active { background: #fafafa; color: $primary_color; font-weight: $semi_bold; position: relative; &::before { content: ""; background: $primary_color; width: 4px; height: 100%; position: absolute; top: 0; left: 0; } &::after { filter: invert(36%) sepia(58%) saturate(767%) hue-rotate(193deg) brightness(84%) contrast(88%); } } } } &.ps--active-y { .ur-tab-content { padding: $spacing_32px $spacing_12px $spacing_12px; } } } .ur-tab-content { .ur-general-setting-block { .ur-toggle-heading { margin-top: 0; } } } .ur-tab-lists { background-color: $color_gray_five; background-image: none; padding: 0; border-radius: 0; margin: 0; display: flex; justify-content: space-between; border-bottom: none; border-top: 0 none; border-right: 0 none; border-left: 0 none; li { background-color: transparent; background-image: none; border-radius: 0; margin: 0; margin-bottom: -2px; padding: 0px; border: 0; flex: 1; text-align: center; border-top: 4px solid transparent; transition: all .3s ease-in-out; &.active { margin-bottom: 0; padding-bottom: 0; } a { float: none; text-decoration: none; margin: 0; border: none; display: block; color: $grey-400; background: $grey-25; padding: $spacing_8px $spacing_16px $spacing_14px; font-weight: $medium; cursor: pointer; font-size: 15px; &:focus { box-shadow: 0 0 0 0px transparent, 0 0 0px 0px transparent; } &.active { background-color: $white; color: $primary_color; line-height: 24px; } } &.ui-state-hover, &.ui-state-active { border-top: 4px solid $primary_color; } &.ui-state-disabled { position: relative; opacity: 1; &:hover { &::before { content: ""; position: absolute; border-bottom: 15px solid #383838; border-left: 12px solid transparent; border-right: 12px solid transparent; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 1; } &::after { content: "You need to select a \A field in order to enable/ \A view this option"; white-space: pre; text-align: left; position: absolute; width: 175px; height: auto; z-index: 9; bottom: -80px; left: 50%; transform: translateX(-50%); background: #383838; color: #fff; font-size: 14px; line-height: 150%; border-radius: $border_radius_5; padding: $spacing_10px $spacing_12px; } } a { // cursor: not-allowed; opacity: .25; } } } } .ur-tab-contents { height: calc(100vh - 130px); position: relative; overflow-y: auto; } .ur-tab-content { padding: $spacing_32px $spacing_12px $spacing_12px; .ur-search-fields { display: flex; align-items: center; position: relative; margin-bottom: 26px; input.ur-type-text { height: 40px; font-size: 14px; background: transparent; border-color: $grey-100; border-radius: $border_radius_4; padding: $spacing_10px $spacing_16px; color: $grey-200; &::placeholder { color: $grey-200; } } svg { position: absolute; right: 16px; width: 18px; height: 18px; fill: $grey-200; } } .ur-fields-not-found { text-align: center; margin-top: 2.85em; .ur-fields-not-found-title { font-size: 1.7em; } } &#ur-tab-registered-fields, &#ur-tab-field-options { background-color: $white; } h2 { margin: $spacing_16px 0 $spacing_14px; font-size: 15px; line-height: 150%; font-weight: $medium; color: $grey-400; ~ hr { border-top: 1px solid $border-color; margin: 0; } } .ur-registered-list { display: flex; flex-wrap: wrap; width: calc(100% + 16px); margin-left: -$spacing_8px; margin-top: $spacing_18px; &:last-child { margin-bottom: 0; } } } } .ur-toggle-heading { cursor: pointer; display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; &:before { content: ""; background-image: url("../images/icons/ur-arrow-down.svg"); background-repeat: no-repeat; background-position: center; background-size: 100%; float: right; transform: rotate(180deg); width: 18px; height: 18px; transition: all .3s ease-in-out; // content: "\f142"; // cursor: pointer; // display: block; // font: 400 20px/1 Dashicons; // line-height: 0.5 !important; // padding: 4px; // position: relative; // right: 0; // top: 0; // float: right; } &.closed { &:before { // content: "\f140"; transform: rotate(0deg); } } } } input[type="text"], input[type="date"], input[type="email"], input[type="file"], input[type="month"], input[type="number"], input[type="phone"], input[type="password"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"], input[type="timepicker"], textarea, .ui-widget select, select { width: 100%; max-width: 100%; height: 32px; line-height: initial; display: block; color: $color_gray_one; font-size: 13px; padding: 4px 8px; border-radius: 3px; border: 1px solid $border_color; box-shadow: 0 0 0 transparent; &:focus { border-color: $primary_color; } &::placeholder { color: $color_gray_three; } &:disabled { color: $color_gray_three; background: $color_gray_five; } } select { padding-right: 0; } label { display: block; width: 100%; margin-bottom: 8px; color: $color_gray_one; font-size: 13px; font-weight: $medium; line-height: 1.25; } textarea { padding: 10px; height: 100px; } .ur-builder-wrapper { position: relative; flex: 1; height: calc(100vh - 89px); background: #f1f4f8; border-left: 1px solid $border_color; overflow-y: auto; input[type="text"], input[type="date"], input[type="email"], input[type="file"], input[type="month"], input[type="number"], input[type="phone"], input[type="password"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"], input[type="timepicker"], textarea, select { &:disabled { background: $white; } } .ur-builder-header { display: flex; align-items: center; justify-content: space-between; } &.ur-multipart { .ur-button-quick-links { bottom: 60px; } .ur-builder-wrapper-footer { .button.button-style-customizer { bottom: 124px; } } } } .ur-selected-inputs { box-sizing: border-box; padding: 0 20px; .ur-single-row { border-radius: 3px; position: relative; border: 1px solid transparent; &:last-child { margin-bottom: 0; } .ur-grids { display: flex; position: absolute; right: 0; z-index: 1; opacity: 0; transition: all 0.2s ease-in; button { display: flex; border-radius: 0; border: 0; background-color: $color_gray_two; color: $white; font-size: 16px; height: auto; width: auto; cursor: pointer; margin: 0; padding: 4px 6px; line-height: 1; transition: all 0.1s ease-in-out; svg { width: 16px; height: 16px; font-size: 16px; fill: $grey-0; margin-left: 1px; } &:before { font-family: "dashicons"; } &.ur-remove-row { &:hover { background: $red; } } &:hover { background: $primary_color; } &:first-child { // border-radius: 3px 0 0 3px; border-radius: 0 0 0 $border_radius_7; border-right: 1px solid transparentize($white, 0.8); } &:nth-child(2) { border-radius: 0 $border_radius_7 0 0; // background: $grey-50; border-left: $border_width solid $grey-0; } } .ur-toggle-grid-content { background: $white; padding: 1rem; position: absolute; top: 40px; right: 0; display: flex; flex-wrap: wrap; justify-content: center; white-space: nowrap; border: 1px solid $border_color; border-radius: 4px; box-shadow: 1px 4px 14px 1px transparentize($gray_base, 0.9); small { font-size: 12px; margin-bottom: 0.5rem; color: $color_gray-two; } .ur-grid-selector { cursor: pointer; display: flex; margin-right: 0.5rem; svg { width: 32px; height: 32px; fill: $color_gray_two; } &:last-child { margin-right: 0; } } &::before { content: ""; width: 8px; height: 8px; border: solid $border_color; border-width: 1px; border-left: transparent; border-bottom: transparent; position: absolute; top: -5px; right: 36px; background: $white; transform: rotate(-45deg); } } } .ur-grid-lists { width: 100%; display: flex; text-align: center; box-sizing: border-box; justify-content: center; border: 1px solid transparent; border-radius: 4px; transition: all 0.2s ease-in; border-left: 0; .ur-grid-list-item { display: inline-block; text-align: left; border: 0 none; padding: 15px; flex: 1; border: 1px solid transparent; border-radius: 4px; transition: all 0.2s ease-in; .ur-selected-item { margin-bottom: 5px; position: relative; padding: 15px; cursor: move; border: 1px solid transparent; border-radius: 4px; transition: border-color 0.35s; .select2-container { width: 100% !important; .select2-search--inline { .select2-search__field { height: auto; min-width: 10px; background: none; margin: 0; } } } .ur-input-type-signature { canvas { background: transparentize($white, 0.5); border: 1px solid $border_color; } } &:last-child { margin-bottom: 0; } &:hover, &.ur-item-active { background: $white; border: 1px solid $primary_color; } &.ui-sortable-helper { box-shadow: 0 0 10px 5px transparentize($gray_base, 0.9); } &.ui-sortable-placeholder { visibility: visible !important; border: 1px dashed $color_gray_three; background-color: $color_gray_five; } .ur-action-buttons { display: none; position: absolute; right: 10px; width: 50px; text-align: center; padding: 0; font-size: 10px; top: 10px; color: $color_gray_three; top: 0; right: -1px; span { cursor: pointer; font-size: 16px; height: auto; &:hover { color: $primary_color; } &:first-child { background: #676f8a; padding: $spacing_4px; width: 24px; height: 24px; border-radius: 0 0 0 $border_radius_7; &::before { // content: ""; // background-image: url("../images/icons/copy-icon.svg"); // background-repeat: no-repeat; // background-position: center; // background-size: 100%; // width: 14.22px; // height: 14.22px; // display: block; color: $grey-0; } } &:last-child { background: #676d8a; padding: $spacing_4px; width: 24px; height: 24px; border-radius: 0 $border_radius_7 0 0; border-left: $border_width solid $grey-0; &:before { content: "\f335" !important; color: $grey-0; } } } &:hover { .ur-action-buttons { display: block; top: 0; right: -3px; } } .ur-trash { &:hover { color: $red; } } } .ur_label_top_left { text-align: left; } .ur_label_center { text-align: center; } .ur_label_top_right { text-align: right; } .ur_label_disabled { display: none; } &:hover { .ur-action-buttons { display: block; } } } > li.ur-item-dragged { list-style: none; width: 100%; text-align: center; height: 60px !important; box-sizing: border-box; .spinner { float: none; } } .user-registration-dragged-me { display: table; width: 100%; height: 100%; .user-registration-dragged-me-text { display: table-cell; vertical-align: middle; text-align: center; p { display: inline-block; position: relative; color: $color_gray_three; padding-left: 26px; padding-top: 8px; &::before { position: absolute; font-family: "Dashicons"; content: "\f545"; font-size: 22px; left: 0; top: 0; } } } &:empty { padding: 15px; text-align: center; border-radius: 4px; border: 1px dashed $color_gray_three; background-color: $color_gray_five; &::before { content: "\f132"; font-size: 32px; color: $color_gray_three; width: 32px; height: 32px; font-family: dashicons; display: table-cell; vertical-align: middle; } } } &.ur-sortable-active { .ur-registered-item { margin-bottom: 0; } .user-registration-dragged-me { display: none; } } &:first-child { border-radius: 4px 0 0 4px; } &:nth-child(2) { border-radius: 0; } &:nth-child(3) { border-radius: 0 4px 4px 0; } } } &:hover { .ur-grids { opacity: 1; } .ur-grid-lists { background: $white; border: 1px solid $color_gray_three; .ur-grid-list-item { border-left: 1px solid $color_gray_three; &:first-child { border-color: transparent; } } } } } .ur-add-new-row { display: block; margin: 20px auto; width: auto; height: 32px; text-align: center; font-family: inherit; &::before { width: 16px; height: 16px; font-size: 16px; margin-right: 10px; font-family: dashicons; vertical-align: middle; padding: 1px 10px 1px 0; border-right: 1px solid transparentize($white, 0.7); } } li.ur-registered-item { width: 120px !important; &.ui-sortable-placeholder { margin-left: 0; width: 100% !important; visibility: visible !important; border: 1px dashed $color_gray_three; background-color: $color_gray_five; } } } .ur-builder-wrapper-footer { .button.button-style-customizer { height: 48px; width: 48px; bottom: 72px; box-shadow: 1px 2px 8px transparentize($gray_base, 0.85); .dashicons { font-size: 24px; height: 24px; width: 24px; } } .ur-button-quick-links { width: 48px; height: 48px; position: fixed; cursor: pointer; color: $color_gray-one; display: flex; align-items: center; justify-content: center; right: 32px; bottom: 16px; background: $white; border: 1px solid $border_color; border-radius: 24px; box-shadow: 0px 2px 10px transparentize($gray_base, 0.9); z-index: 1; span { font-size: 20px; font-weight: $semi_bold; margin: 0 auto; } } .ur-quick-links-content { position: fixed; background: $white; padding: 12px 16px; border-radius: 4px; bottom: 58px; right: 30px; z-index: 2; width: 225px; border: 1px solid $border_color; box-shadow: 2px 4px 12px transparentize($gray_base, 0.9); li { margin-bottom: 8px; } a { color: $color_gray_one; &:hover { color: $primary_color; } } } } .ur-general-setting, .ur-advance-setting { margin: $spacing_16px 0; .select2-search--inline { display: none; } } .ur-advance-setting-block { // margin-top: 25px; margin-top: 0; } .form-row { .description { color: $grey-300; margin: $spacing_4px 0; display: block; } .ur-radio-list, .ur-checkbox-list { label { display: inline; } } } .ur-general-setting-block, .ur-advance-setting-block { display: none; } .add, .remove { background: $white; border: $border_width solid $border_color; color: $color_gray_two; cursor: pointer; display: flex; flex: 1 0 32px; align-items: center; justify-content: center; height: 32px; max-width: 32px; border-radius: $border_radius_4; position: relative; &:hover { background: $primary_color; border-color: $primary_color; color: $white; } .dashicons { line-height: 22px; } } .ur-options-list { li { display: flex; align-items: center; .editor-block-mover__control-drag-handle { cursor: grab; svg { fill: $color_gray_two; } } .ur-multiple-choice .ur-subscription-plan { .ur-regular-price,.ur-selling-price { display: grid; grid-template-columns: 1fr 1fr; gap: $spacing_8px; padding: $spacing_4px; input { width: 100%; } } } &.ur-multiple-choice, &.ur-subscription-plan { gap: $spacing_8px; input { margin-right: 0; } > input[type="text"] { width: 80%; } .ur-regular-price, .ur-selling-price { position: relative; span { position: absolute; top: 0; background: #e7e7e7; padding: $spacing_6px $spacing_8px; color: $grey-400; border-radius: $border_radius_3; top: -60px; font-size: 13px; opacity: 0; visibility: hidden; transition: all .3s ease-in-out; &::after { content: ""; border: 8px solid transparent; border-top-color: #e7e7e7; height: 0; left: 50%; transform: translateX(-50%); position: absolute; top: 100%; width: 0; } } &:hover { span { visibility: visible; opacity: 1; } } } .add { margin-right: 0; } } } .ui-sortable-handle { padding: $spacing_5px; border-radius: $border_radius_3; border: $border_width solid transparent; flex-direction: column; gap: 12px; &:active { padding: $spacing_5px; background: $white; border: $border_width solid $primary_color; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); } &.ui-sortable-placeholder { background-color: $color_gray_four; visibility: visible !important; } .ur-options-value-wrapper { display: flex; align-items: center; gap: $spacing_8px; width: 100%; } .ur-image-choice-wrapper { width: 100%; .upload-button { padding: $spacing_8px $spacing_12px; font-size: 14px; width: 100%; border: $border_width dashed #d3d3d3; border-radius: $border_radius_3; color: #616161; cursor: pointer; } .ur-thumbnail-image { margin-top: $spacing_16px; margin-bottom: $spacing_8px; } } } } .urcl-rules { display: flex; flex-wrap: wrap; margin-bottom: $spacing_8px; > div { margin-right: $spacing_8px; } .urcl-operator { width: 78px; } .urcl-field, .urcl-value { max-width: 27%; flex: 1 0 27%; } } } /** * Tooltips */ .tips { cursor: help; text-decoration: none; } img.tips { padding: $spacing_5px 0 0; } .ur_error_tip { max-width: 20em; line-height: 1.8em; position: absolute; white-space: normal; background: $red; margin: 1.5em 1px 0 -1em; z-index: 9999999; &::after { content: ""; display: block; border: $border_radius_8 solid $red; border-right-color: transparent; border-left-color: transparent; border-top-color: transparent; position: absolute; top: -3px; left: 50%; margin: -1em 0 0 -3px; } } .tooltipster-base { .tooltipster-box { // background-color: #4c5477 !important; background: $grey-400 !important; padding: $spacing_4px $spacing_8px; border-radius: $border_radius_2; text-align: center; .tooltipster-content { padding: $spacing_2px 0; } .tooltipster-content a { color: #9ef01a !important; } } .tooltipster-arrow { .tooltipster-arrow-uncropped { .tooltipster-arrow-border { border-top-color: $grey-400 !important; border-bottom-color: $grey-400 !important; // border-bottom-color: #4c5477 !important; // border-top-color: #4c5477 !important; } } } &.ur-selling-price-tooltip { .tooltipster-box { background-color: rgb(244,73,73) !important; border: rgb(244,73,73); } .tooltipster-arrow { .tooltipster-arrow-uncropped { .tooltipster-arrow-border { border-top-color: rgb(244,73,73) !important; border-bottom-color: rgb(244,73,73) !important; } .tooltipster-arrow-background { border-top-color: rgb(244,73,73) !important; } } } } } /** * Help Tip */ .user-registration-help-tip, .ur-portal-tooltip { color: $color_gray_two; display: inline-block; font-size: 22px; font-style: normal; height: 16px; line-height: 16px; position: relative; vertical-align: baseline; width: 16px; &::after { @include icon_dashicons("\f223"); cursor: help; } } #smart-tags { text-align: center; } .form-settings-tab { cursor: pointer; padding: $spacing_10px $spacing_15px; color: $gray_base; background: $color_gray_four; margin-bottom: $spacing_10px; line-height: 1.2; border-radius: $border_radius_4; &.active { background: $primary_color; color: $white; } } #profile-page form#your-profile .flatpickr-input[readonly] { background-color: $white; } /** * Fullscreen Mode **/ body { &.ur-full-screen-mode { margin-top: -$spacing_32px; #wpbody-content { padding-bottom: 45px; } #wpwrap { #wpcontent { margin-left: 0; padding-left: 0; #wpadminbar { display: none; } #wpbody { .ur-tab-content { padding: $spacing_20px; } #menu-management-liquid { margin-top: 0; .menu-edit { margin-bottom: 0; box-shadow: none; left: 0 !important; } } } } #adminmenumain { display: none; } } .ur-registered-from { .ur-registered-inputs { .ur-tabs { .ur-tab-contents { height: calc(100vh - 98px); } } } .ur-builder-wrapper { height: calc(100vh - 57px); } } } /** * User Registration Builder Loading **/ .ur-circle-loading { position: relative; width: 100px !important; height: 100px !important; transform: translate(-50px, -50px) scale(0.5) translate(50px, 50px); &::before, &::after { content: ""; position: absolute; top: 70px; left: 70px; animation: ur-circle-loading-keyframe 1.5s linear infinite; width: 60px; height: 60px; border-radius: 50%; background: #475bb2; } &::after { animation-delay: -0.75s; background: #668fe5; } } .ur-builder-message-container { position: fixed; top: $spacing_32px; left: 0; right: 0; max-width: 430px; margin: 0 auto; z-index: 9999; .ur-message { display: none; margin: 0 auto; margin-top: 16px; transition: all 240ms cubic-bezier(0, 0, 0.2, 1) 0s; z-index: 99999; height: 0px; .ur-success, .ur-error { background: $white; padding: $spacing_8px $spacing_16px; border-radius: $border_radius_3; border-left: 3px solid; position: relative; box-shadow: 0px 1px 8px 2px transparentize($gray_base, 0.9); p { margin: $spacing_8px 0; &::before, &::after { font-family: dashicons; width: 20px; height: 20px; font-size: 20px; margin-right: 8px; margin-top: -4px; line-height: 1; display: inline-block; vertical-align: middle; } } } .ur-success { border-color: $green; p { &::before { content: "\f12a"; color: $green; } } } .ur-error { border-color: $red; p { &::before { content: "\f534"; color: $red; } } } .dashicons { cursor: pointer; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); line-height: 1; } &.entered { display: block; height: 50px; animation: 240ms cubic-bezier(0.175, 0.885, 0.32, 1.175) 0s 1 normal both open-message; .ur-error { display: flex; align-items: center; justify-content: space-between; padding: $spacing_16px; p { margin: 0; } .ur-message-close { position: unset; transform: unset; } } } &.exiting { display: block; animation: 120ms cubic-bezier(0.4, 0, 1, 1) 0s 1 normal both close-message; } &:first-child { margin-top: 1.5rem; } } } .main_header { font-weight: $semi_bold; font-size: 20px; line-height: 27px; } .ur-p-tag { padding: 0px $spacing_20px $spacing_18px $spacing_20px; margin: 0px; font-style: italic; } } @media screen and (max-width: 1400px) { .ur-registered-from { .urcl-rules { .urcl-field { max-width: 61%; flex: 1 0 60%; margin-bottom: $spacing_5px; } .urcl-value { order: 4; max-width: 87%; flex: 1 0 86%; } .add { order: 3; margin-right: 0; } .remove { order: 5; } } } } @media screen and (max-width: 960px) { .ur-registered-from { .ur-registered-inputs { .ur-tabs .ur-tab-content .ur-registered-list .ur-registered-item { float: none; // width: 100%; } .ur-single-row .ur-grid-lists, .ur-single-row .ur-grid-lists .ur-grid-list-item, .ur-single-row .ur-grid-lists .ur-grid-list-item .ur-selected-item { padding: $spacing_10px; } } } } @media screen and (max-width: 782px) { body.user-registration_page_add-new-registration { min-width: 0 !important; } .ur-registered-from { flex-direction: column; .ur-registered-inputs { width: 100%; margin-bottom: $spacing_10px; .ur-tabs { .ur-tab-content { .ur-registered-list { .ur-registered-item { float: left; width: 48%; } } } } } .ur-selected-inputs { width: 100%; } } } @media screen and (max-width: 600px) { .user-registration_page_add-new-registration .major-publishing-actions { clear: both; padding: 10px 0 19px; line-height: 28px; .ur-form-name { width: 100%; } .publishing-action { text-align: left; float: none; margin-top: $spacing_15px; } } .ur-registered-from .ur-selected-inputs .ur-single-row .ur-grid-lists { flex-direction: column; display: block; .ur-grid-list-item { width: 100% !important; &:nth-child(1n + 2) { border-left: 0 none; } } } } .ur-toggle-section { &.ur-form-builder-toggle { display: flex; gap: 5px; align-items: center; input[type="checkbox"] { width: 30px !important; height: 16px !important; &:focus { outline: none; box-shadow: none; } } .slider { width: 30px !important; height: 16px !important; border-radius: 99px; padding: $spacing_8px; &::before { height: 12px !important; width: 12px !important; } } } .user-registration-toggle-form { position: relative; display: inline-block; width: 36px; height: 16px; input { position: relative; z-index: 99; opacity: 0; height: 22px; width: 40px; &:checked + .slider { background-color: #475bb2; } &:focus + .slider { box-shadow: 0 0 1px #2196f3; } &:checked + .slider::before { transform: translateX(14px); } } .slider { position: absolute; cursor: pointer; inset: 0; background-color: #dfe1ea; transition: 0.4s; &.round { border-radius: 30px; } &.round::before { border-radius: 50%; } &::before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 100%; } } } } .user-registration-setup { font-size: 14px; max-width: calc(100% - 32px); margin: 20px auto; background: white; @media (min-width: 960px) { max-width: 835px; } @media (min-width: 1280px) { max-width: 1100px; } .ur-brand-logo { border-right: 1px solid $border_color; img { width: 32px; height: 32px; margin-right: $spacing_8px; display: flex; } } a { &:focus { box-shadow: none; } } .page-title-action, .page-title-action:active { top: 0; margin-left: $spacing_16px; } .user-registration-setup-header { display: flex; flex-wrap: wrap; align-items: center; padding: 0 $spacing_16px; background-color: white; border-bottom: $border_width solid $color_gray-lighten; @media only screen and (max-width: 768px) { padding-top: $spacing_16px; } .user-registration-logo { display: flex; flex-wrap: wrap; padding-right: 1em; border-right: $border_width solid $color_gray-lighten; margin-right: 1em; } h4 { margin-left: $spacing_15px; } .user-registration-tab { margin-left: auto; @media only screen and (max-width: 768px) { width: calc(100% + 32px); flex: 0 0 calc(100% + 32px); margin-top: $spacing_16px; margin-right: -$spacing_16px; margin-left: -$spacing_16px; border-top: $border_width solid $color_gray-lighten; } ul { display: flex; flex-wrap: wrap; margin: 0; .user-registration-tab-nav { display: inline-flex; margin: 0 $spacing_8px 0 0; &.active { .user-registration-tab-nav-link { color: $primary_color; border-color: $primary_color; } } .user-registration-tab-nav-link { font-weight: $semi_bold; padding: $spacing_18px $spacing_8px $spacing_16px; color: #494d50; text-decoration: none; border-bottom: 2px solid transparent; } } } } } .ur-setup-templates { display: flex; flex-wrap: wrap; padding: $spacing_8px; .ur-loading { margin: 80px auto; } .ur-template { width: 100%; background: white; border-radius: $border_radius_4; position: relative; margin: $spacing_12px; @media (min-width: 400px) { width: calc(50% - 24px); flex: 0 0 calc(50% - 24px); } @media only screen and (min-width: 768px) { width: calc(33.333% - 24px); flex: 0 0 calc(33.333% - 24px); } @media (min-width: 960px) { width: calc(25% - 24px); flex: 0 0 calc(25% - 24px); } .user-registration-screenshot { cursor: pointer; padding: $spacing_8px; margin: 0; min-height: auto; position: relative; border-radius: $border_radius_4; background: $color_gray-more-lighten; @media only screen and (min-width: 1280px) { min-height: 280px; } .user-registration-badge { position: absolute; bottom: 16px; right: 16px; z-index: 1; } .form-action { display: none; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; .user-registration-btn { &:last-child { margin-left: $spacing_8px; } } } } img { display: block; width: 100%; } .user-registration-form-id-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; position: relative; .user-registration-template-name { font-size: 16px; font-weight: $semi_bold; margin: $spacing_16px 0; color: $gray-base; text-decoration: none; &:hover { color: $primary_color; } } } &:hover { .user-registration-screenshot::after { content: ""; display: block; background: transparentize($gray-base, 0.5); position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .form-action { display: flex; align-items: center; justify-content: center; } } &:nth-child(even) { float: right; } .ur-template-overlay { position: absolute; background-color: rgba(0, 0, 0, 0.5); top: 0; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; transition: 0.5s background-color ease-in-out; color: white; text-align: center; padding: 40% 0; .ur-template-select { text-decoration: none; } &.loading { .ur-button, .ur-button::before, .ur-button::after { background: white; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; padding: 0; border-radius: 0; } .ur-button { color: white; text-indent: -9999em; margin: 0 auto; position: relative; font-size: 11px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .ur-button::before, .ur-button::after { position: absolute; top: 0; content: ""; } .ur-button::before { left: -1.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .ur-button::after { left: 1.5em; } @-webkit-keyframes load1 { 0%, 80%, 100% { box-shadow: 0 0; height: 4em; } 40% { box-shadow: 0 -2em; height: 5em; } } @keyframes load1 { 0%, 80%, 100% { box-shadow: 0 0; height: 4em; } 40% { box-shadow: 0 -2em; height: 5em; } } } } &:hover .ur-template-overlay, .ur-template-overlay.loading { opacity: 1; visibility: visible; } .ur-button { display: inline-block; padding: $spacing_15px $spacing_22px; background-color: white; color: #000; font-size: 12px; text-transform: uppercase; border: none; border-radius: 100px; } } } } .user-registration-form-template-wrapper { .user-registration-form-template { &[data-filter-template="free"] { .user-registration-template-wrap[data-plan="premium"] { display: none; } } &[data-filter-template="premium"] { .user-registration-template-wrap[data-plan="free"] { display: none; } } } } .user-registration { .swal2-container { h3 { font-size: 16px; font-weight: $regular; } .user-registration-trashed { button { margin: 0; transition: all .3s ease-in-out; &.swal2-confirm { background-color: #F75259 !important; border: $border_width solid #F75259; border-radius: $border_radius_3; transition: all .3s ease-in-out; } &.swal2-cancel { background: transparent; border: $border_width solid $grey-200; color: $grey-200; &:hover { border-color: $grey-500; color: $grey-500; } } } } .swal2-popup { width: 400px; &.user-registration-settings-swal2 { width: auto; } &.swal2-icon-error { border-top: 6px solid #ff4f55; } border-radius: $spacing_10px; padding: 0; &.user-registration-locked-field { border-top: 6px solid #72aee6; &.swal2-icon-success { border-top: 6px solid #a5dc86; } &.swal2-icon-warning { border-top: 6px solid #facea8; } } .swal2-header { padding: $spacing_34px $spacing_40px 0 $spacing_40px; .swal2-title { margin-bottom: $spacing_4px; i { margin-bottom: $spacing_16px; } } .swal2-close { box-shadow: none; top: $spacing_2px; } } &.user-registration-swal2-no-button { .swal2-header { padding-bottom: $spacing_34px; } } .swal2-content { .swal2-validation-message { margin-left: 0; margin-right: 0; border-left: 3px solid #f27474; justify-content: flex-start; padding: $spacing_12px $spacing_6px $spacing_12px $spacing_6px; } .action-buttons { a { background-color: #475bb2; border: none; text-decoration: none; color: white; font-size: 16px; font-weight: 600; } } } .swal2-actions { margin-top: $spacing_24px; background: #fcfcfc; border-top: $border_width solid $border-color; padding: $spacing_16px; border-radius: 0 0 $border_radius_13 $border_radius_13; justify-content: flex-start; flex-direction: row-reverse; gap: $spacing_12px; .swal2-confirm { background: #475BB2; transition: all .3s ease-in-out; &:hover { background: #4b68ec; } } } &.user-registration-locked-field { .swal2-header { padding-bottom: $spacing_4px; .swal2-close { box-shadow: none; } } .swal2-content { padding-left: 0; padding-right: 0; .swal2-html-container { padding-left: $spacing_20px; padding-right: $spacing_20px; .action-buttons { margin-left: -$spacing_20px; margin-right: -$spacing_20px; border-radius: 0 0 $border_radius_10 $border_radius_10; padding: $spacing_16px; text-align: right; background: #fcfcfc; border-top: $border_width solid $border-color; } } } } .swal2-actions { button { &:focus { box-shadow: none; } &:focus-visible { outline: none; } } } } .user-registration-recommend-addons { margin-bottom: $spacing_20px; padding-bottom: $spacing_16px; border-bottom: 2px solid $color_gray-more-lighten; .bulk-action-notice { margin: 0 0 $spacing_20px; p { padding: 0; margin: $spacing_8px 0 !important; } &.notice-error { .button-link { text-decoration: none; display: flex; align-items: center; margin-top: $spacing_8px; .toggle-indicator { display: inline-flex; } } .bulk-action-errors { margin-top: 0; } } } .plugins-list-table { border-radius: $border_radius_4; .plugin-name { text-align: left; } .plugin-status { float: right; span { width: 15px; height: 15px; overflow: hidden; border-radius: 50%; position: relative; vertical-align: top; white-space: nowrap; text-indent: -9999px; display: inline-block; border: 2px solid $color_gray-lighten; &.active, &.activate-now { &::after { position: absolute; left: 50%; top: 50%; opacity: 1; width: 34%; height: 50%; content: ""; transform-origin: left top; border-top: 2px solid $color_gray-lighten; border-right: 2px solid $color_gray-lighten; transform: scaleX(-1) rotate(135deg) translate(-58%, -40%); } } &.activate-now { border-color: $color_gray-lighten; &.updating-message { border-color: $color_gray-lighten; border-left-color: $green; } } &.active { border-color: $green; &::after { border-top: 2px solid $green; border-right: 2px solid $green; } } &.updating-message { border-left-color: $green; animation: spin 0.75s linear infinite; &::after { content: none; } } } } } } .user-registration-template-install-addon, .user-registration-template-continue { margin-top: $spacing_20px; color: $white; text-decoration: none; } } } // ----------------------------------------- FORM BUILDER V2 CSS STARTS ----------------------------------------------------------------------- //--------------------------------------------------------------------------------------------------------------------------------- //--------------------------------------------------------------------------------------------------------------------------- //---------------------------------------------------------------------------------------------------------------------- a.button.ur-smart-tags-list-button { top: 29px; right: 0; width: 30px; min-height: 30px; color: #494d50; position: absolute; background: #fff; border: 1px solid #cdd0d8; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(35, 40, 45, 0.1); } .ur-advance-setting.ur-advance-default_value, .ur-general-setting.ur-general-setting-hidden-value, .ur-advance-setting.ur-advance-pattern_value { position: relative; margin-bottom: 15px; & input.ur_advance_setting.ur-settings-default-value, & input.ur-general-setting-field, & input.ur_advance_setting.ur-settings-pattern_value { width: calc(100% - 40px) !important; min-height: 27px; } & a.button.ur-smart-tags-list-button { top: 29px; right: 0; width: 30px; min-height: 30px; color: #494d50; position: absolute; background: #fff; border: 1px solid #cdd0d8; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(35, 40, 45, 0.1); } & .ur-smart-tags-list-button .dashicons-editor-code::before { left: 0; right: 0; margin: 0 auto; line-height: 28px; position: absolute; } & .ur-smart-tags-list { right: 0; z-index: 1; max-height: 123px; margin-top: -1px; width: 230px; overflow-y: auto; position: absolute; background: #fff; border-radius: 4px; border: 1px solid #cdd0d8; box-shadow: 1px 3px 20px 0 rgba(35, 40, 45, 0.2); & .ur-smart-tag-title { font-weight: 600; background: #f6f7f9; border-bottom: 1px solid #cdd0d8; font-size: 12px; padding: 10px; } & li { padding: 4px 10px; font-size: 12px; } &:hover { cursor: pointer; } } } .user-registration_page_add-new-registration, .toplevel_page_user-registration { #nav-menu-header { padding-right: $spacing_30px; .ur-form-title { font-weight: $semi_bold; font-size: 16px; line-height: 150%; color: #414141; padding-left: $spacing_18px; padding-right: $spacing_8px; } .ur-editing-tag { padding: $spacing_4px $spacing_10px; background: $blue-50; border-radius: $border_radius_50; font-style: italic; font-weight: $regular; font-size: 12px; line-height: 150%; color: $grey-400; } .publishing-action { .button-secondary { background: $blue-50; border-color: $blue-50; box-shadow: 0 1px 0 $blue-50; font-size: 14px; color: $grey-400; border-radius: $border_radius_3; &:has(span) { width: 33px; height: 33px; } // .dashicons-editor-expand, // .dashicons-editor-contract { // &::before { // color: $grey-400; // } // } .ur-fs-open-label, .ur-fs-close-label { &::before { content: ""; background-repeat: no-repeat; background-position: center; background-size: 100%; display: block; top: -1px; left: 1px; position: relative; width: 19px; height: 19px; } } .ur-fs-open-label { &::before { background-image: url("../images/icons/maximize.svg"); } } .ur-fs-close-label { &::before { background-image: url("../images/icons/minimize.svg"); } } } .button-primary { background: $primary_color; font-size: 14px; &:hover { background: $primary_dark; border-color: $primary_dark; } &.ur-copy-shortcode { width: 33px; height: 33px; padding-left: 0; padding-right: 0; background: $primary_color; border-color: $primary_color; box-shadow: none; &:hover { background: $primary_dark; border-color: $primary_dark; } svg { width: 18px; height: 18px; margin-bottom: 3px; } } } } } } .ur-registered-from { .ur-registered-inputs { position: relative; .nav-tab-wrapper { } .ur-tab-contents { #ur-setting-form { .ur-general-setting-block { margin-bottom: $spacing_36px; &:has(.closed) { margin-bottom: 0; } } } .ur-toggle-content { label { font-weight: $regular; font-size: 14px; line-height: 140%; color: $grey-400; display: flex; align-items: center; gap: $spacing_2px; .ur-portal-tooltip { width: 12px; &::after { font-size: 18px; line-height: unset; color: $grey-100; } } } input[type="text"], input[type="email"], input[type="password"], input[type="number"] textarea { &::placeholder { color: $grey-100; } } input { padding: $spacing_18px $spacing_12px; background: $grey-0; border: $border_width solid $border-color; border-radius: $border_radius_4; font-weight: $regular; font-size: 14px; line-height: 150%; color: $grey-300; } } } button#ur-collapse { width: 22px; height: 41px; background: $grey-0; position: absolute; bottom: $spacing_100px; border-style: solid; border-width: $border_width $border_width $border_width 0px; border-color: $border-color; border-radius: 0 $border_radius_3 $border_radius_3 0; z-index: 1; cursor: pointer; transition: all .3s ease-in-out; right: -$spacing_22px; svg { width: 12px; height: 12px; display: block; position: relative; left: -$spacing_2px; transition: all .3s ease-in-out; } &:hover { svg { left: -$spacing_4px; } } &.open { width: 24px; height: 44px; svg { transform: rotate(180deg); left: -1px; width: 14px; height: 14px; } &:hover { svg { left: 1px; } } } } } .ur-builder-wrapper { .ur-selected-inputs { padding: $spacing_30px; background: $canva-color; .ur-login-form-wrapper{ display: flex; flex-direction: column; align-items: center; justify-content: center; } .ur-login-shortcode{ display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 2rem; h1{ font-weight: bold; font-size: 35px; margin-bottom: 2rem; } p{ font-size: 16px; } .ur-login-content{ margin-left: 10rem; margin-right: 5rem; } } .ur-login-view-doc{ margin-top:5rem; a { font-size:large; text-decoration:underline; } } } .ur-builder { &-header { padding-top: $spacing_10px; padding-bottom: $spacing_24px; border-bottom: $border_width solid $border-color; margin-bottom: $spacing_32px; .user-registration-editable-title { margin-top: 0 !important; margin-bottom: 0 !important; .user-registration-editable-title__input { font-size: 22px; line-height: 130%; color: $grey-500; padding: $spacing_4px $spacing_8px $spacing_4px $spacing_12px; margin: 0; } } } &-wrapper-content { background: $grey-0; border-radius: $border_radius_13; padding: $spacing_18px $spacing_32px; border: $border_width solid $border-color; .ur-single-row { .ur-grid-lists { .ur-grid-list-item { padding: $spacing_20px; } .ur-selected-item { padding: $spacing_10px $spacing_14px $spacing_14px; &.ur-item-active { // background: $blue-25; } } } &:hover { .ur-grid-lists { background: #fcfcfc; border-radius: $border_radius_7; border-color: #e7e7e7; border-left: 0; .ur-selected-item { &:hover { background: $blue-25; border: $border_width dashed $primary_color; border-radius: $border_radius_7; } } .ur-grid-list-item { border-left: $border_width solid #e7e7e7; } } } } } } #ur-field-settings { background: $grey-0; border: $border_width solid $border-color; border-radius: $border_radius_13; padding: $spacing_18px $spacing_32px; #ur-field-all-settings { h3 { margin: 0 0 $spacing_32px 0; font-size: 22px; line-height: 130%; font-weight: $semi_bold; color: $grey-800; border-bottom: $border_width solid $border-color; padding: $spacing_10px 0 $spacing_24px; } .form-row { // width: 620px; width: 100%; max-width: 100%; margin-bottom: $spacing_20px; &#user_registration_form_setting_minimum_password_strength_field { margin-bottom: 0; } .ur-label { font-size: 15px; line-height: 140%; color: $grey-400; display: flex; align-items: center; width: max-content; &.checkbox { font-size: 14px; line-height: 150%; font-weight: $regular; margin-bottom: 0; } .user-registration-help-tip { &::after { font-size: 18px; line-height: unset; color: $grey-100; } } } input[type="text"], input[type="email"], input[type="number"], select { height: 38px; border-color: $border-color; color: $grey-300; } select { background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%); background-position: calc(100% - 15px) calc(1em + 2px), calc(100% - 10px) calc(1em + 2px), calc(100% - 2.5em) 0.5em; background-size: 5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat; } .ur-radio-group-list { display: flex; gap: $spacing_12px; &--item { label { font-size: 14px; font-weight: 600; color: $grey-300; margin-bottom: 0; border: $border_width solid $grey-300; border-radius: $border_radius_5; text-align: center; padding: $spacing_10px; align-items: center; display: flex; transition: all .3s ease-in-out; input { display: none; } } &.very-weak { &:hover, &.active { label { color: #F25656; border-color: #F25656; background-color: #FFF4F4; } } } &.weak { &:hover, &.active { label { color: #EE9936; border-color: #EE9936; background-color: #FFFAF5; } } } &.medium { &:hover, &.active { label { color: #FFC700; border-color: #FFC700; background-color: #FFFCF1; } } } &.strong { &:hover, &.active { label { color: #4CC741; border-color: #4CC741; background-color: #F5FFF4; } } } } } } } } } } #wpcontent { .wp-heading-inline { font-weight: $semi_bold; padding: 0; margin: $spacing_20px 0 0; font-size: 24px; line-height: 120%; } .user-registration-settings-container { margin: $spacing_24px 0 0; .user-registration-options-header { &--top { display: flex; align-items: center; h3 { margin: 0; font-weight: $semi_bold; font-size: 26px; line-height: 120%; color: $grey-800; } p.submit { display: none; margin-top: 0; } } &--bottom { ul { display: flex; align-items: center; gap: $spacing_32px; border-bottom: $border_width solid $border-color; width: 100%; li { a { font-weight: $regular; font-size: 15px; line-height: 140%; color: $grey-600; padding: 0; position: relative; padding-bottom: $spacing_16px; transition: all .3s ease-in-out; &::before { content: ""; background: $primary_color; position: absolute; width: 100%; height: 3px; border-radius: $border_radius_11; bottom: 0; left: 0; opacity: 0; transition: all .3s ease-in-out; } &:focus { outline: none; box-shadow: none; } &.current, &.active { font-weight: $semi_bold; } &:hover, &.current, &.active { color: $primary_color; &::before { opacity: 1; } } } } } } } } .user-registration-login-form-container { .user-registration { &__wrap { #menu-management-liquid { float: none; } #menu-management { .menu-edit { position: unset; } } #post-body { .ur-registered-from { display: block; background-color: transparent; .ur-builder-wrapper { height: auto; overflow-y: unset; border-left: 0; background: transparent; .ur-selected-inputs { background: #f0f0f1; padding: $spacing_24px; .ur-builder-wrapper-content { padding: $spacing_20px $spacing_30px $spacing_60px; border-radius: $border_radius_7; .ur-login { &-shortcode { margin-top: 0; display: block; h1 { margin-bottom: $spacing_12px; } &--wrapper { // width: 45%; display: flex; align-items: center; gap: $spacing_30px; // flex-wrap: nowrap; flex-wrap: wrap; @media (max-width: 1400px) { flex-wrap: wrap; justify-content: center; } img { margin-left: -$spacing_24px; @media (max-width: 1000px) { margin-left: 0; } @media (max-width: 768px) { width: 100%; } } .ur-login-content { // width: 55%; margin-left: 0; margin-right: 0; padding: $spacing_24px; background: #f6f6f6; border-radius: $border_radius_7; flex: 1; p { &:first-child { margin-top: 0; } } .login-forms-shortcode-action { input { height: 32px; font-size: 15px; } .ur-copy-shortcode { box-shadow: none; transition: all .3s ease-in-out; svg { path { fill: $primary_color; transition: all .3s ease-in-out; } } &:hover { background: $primary_color !important; svg { path { fill: $grey-0; } } } } } } } } &-view-doc { margin-top: $spacing_32px; } } } } } } } } } } } @media (max-width: 960px) { #wpcontent { padding-left: 0; } .user-registration_page_add-new-registration .ur-form-container #menu-management .menu-edit { left: $spacing_36px !important; } .ur-registered-from .ur-registered-inputs .ur-tab-contents button#ur-collapse { left: 448px; } } // Subscription Plan Field > Field Options Design Fix .ur-registered-from { .nav-tab-wrapper { .ur-tab-contents { .ur-tab-content { .ur-general-setting { &-options { .ur-options-list { .ur-subscription-plan { flex-direction: column; align-items: unset; margin-bottom: $spacing_16px; padding: $spacing_10px; border: $border_width solid #E4E4E4; background: #FBFBFB; &:last-child { margin-bottom: 0; } &-details { display: flex; align-items: center; gap: $spacing_8px; } &-sub-details { > p { display: flex; align-items: center; gap: $spacing_8px; margin-bottom: $spacing_4px; select { height: 38px; padding-left: $spacing_12px; padding-right: $spacing_12px; } } } } } } } } } } } // --------------------------------------------------------------------------------------------------------------------- //--------------------------------------------------------------------------------------------------------------------------- //---------------------------------------------------------------------------------------------------------------------------------- //------------------------------------------- FORM BUILDER V2 CSS ENDS ------------------------------------------------------------------------ // Users Entries when image choice option is enabled CSS #your-profile { #fieldset-user_registration { tbody { tr { td { &:has(.user-registration-user-profile-info) { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: $spacing_12px; width: 760px; br { display: none; } } .user-registration-user-profile-info { input { &[type="radio"], &[type="checkbox"] { display: none; } } .user-registration-image-options { display: block; border: $border_width solid #d5d5d5; border-radius: $border_radius_4; padding: $spacing_10px; position: relative; &:hover { color: #0693e3; border-color: #0693e3; .user-registration-image-choice { &::before { content: ""; position: absolute; width: 100%; height: 100%; background: $grey-500; opacity: .45; z-index: 1; } img { transform: scale(1.1); } } } .user-registration-image-choice { display: block; width: 100%; height: 100px; border-radius: $border_radius_2; overflow: hidden; position: relative; margin-bottom: $spacing_10px; img { width: 100%; height: 100%; object-fit: cover; border-radius: $border_radius_2; transition: all .3s ease-in-out; } } } input[type="radio"], input[type="checkbox"] { &:checked ~ label { color: #0693e3; border-color: #0693e3; span { &::before { content: ""; position: absolute; width: 100%; height: 100%; background: $grey-500; opacity: .45; z-index: 1; } &::after { content: ""; position: absolute; background: #00be34; border-radius: 1px; width: 12px; height: 12px; top: $spacing_8px; right: $spacing_8px; z-index: 2; } } } } } } } } } }
[-] menu.css.map
[edit]
[-] _overlay.scss
[edit]
[-] _display.scss
[edit]
[-] settings.scss
[edit]
[+]
ur-snackbar
[-] dashboard.css
[edit]
[-] admin.scss
[edit]
[-] activation.scss
[edit]
[-] user-registration-setup-wizard.scss
[edit]
[-] deactivation-feedback.scss
[edit]
[-] ur-notice-rtl.css
[edit]
[+]
jquery-confirm
[-] user-registration-smallscreen-rtl.css
[edit]
[-] user-registration-setup-wizard-rtl.css
[edit]
[-] user-registration-setup-wizard.css
[edit]
[-] user-registration-smallscreen.scss
[edit]
[+]
..
[-] ur-notice.scss
[edit]
[-] my-account-layout.scss
[edit]
[-] metabox-rtl.css
[edit]
[+]
components
[-] _grids.scss
[edit]
[-] _forms.scss
[edit]
[-] user-registration-smallscreen.css
[edit]
[-] deactivation-feedback-rtl.css
[edit]
[+]
mixins
[+]
perfect-scrollbar
[-] deactivation-feedback.css
[edit]
[-] settings.css
[edit]
[-] my-account-layout.css
[edit]
[-] dashboard-rtl.css
[edit]
[-] user-registration.css.map
[edit]
[+]
variables
[-] menu.scss
[edit]
[-] dashboard.scss
[edit]
[+]
templates
[-] form-modal-rtl.css
[edit]
[-] _border.scss
[edit]
[+]
layout
[-] my-account-layout-rtl.css
[edit]
[-] activation-rtl.css
[edit]
[-] form-modal.css
[edit]
[-] _spacing.scss
[edit]
[-] _tables.scss
[edit]
[+]
tooltipster
[-] activation.css
[edit]
[-] metabox.scss
[edit]
[+]
select2
[-] user-registration-rtl.css
[edit]
[-] ur-notice.css
[edit]
[-] _containers.scss
[edit]
[-] _fonts.scss
[edit]
[+]
sweetalert2
[-] menu-rtl.css
[edit]
[-] user-registration.css
[edit]
[+]
snackbar
[-] menu.css
[edit]
[+]
jquery-ui
[+]
flatpickr
[-] settings-rtl.css
[edit]
[-] admin.css
[edit]
[-] _animation.scss
[edit]
[-] admin-rtl.css
[edit]
[-] metabox.css
[edit]
[-] user-registration.scss
[edit]