/**
* 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;
#wpbody-content {
float: none;
}
}
}
.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: 0.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: 0.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;
}
#integration_settings_back {
cursor: pointer;
}
.form-settings-tab-back {
margin-bottom: 0;
border-radius: 0;
padding: $spacing_18px $spacing_24px;
border-bottom: $border_width solid #ececec;
background: transparent;
font-size: 15px;
font-weight: $semi_bold;
gap: $spacing_16px;
line-height: 150%;
display: flex;
align-items: center;
color: $grey-400;
transition: all .3s;
&::before {
content: "";
background-image: url("../images/icons/ur-right-arrow.svg");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 18px;
height: 18px;
transform: rotate(180deg);
}
&:hover {
&::before {
filter: brightness(0) saturate(100%) invert(35%) sepia(13%) saturate(3079%) hue-rotate(194deg) brightness(96%) contrast(89%);
}
}
}
.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%);
}
}
&.integration-lists-settings {
.integration-detail {
display: flex;
align-items: center;
gap: 14px;
.integration-status {
position: relative;
&::before {
content: "";
position: absolute;
width: 8px;
height: 8px;
background: #e1e1e1;
border-radius: 1px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&::after {
content: "";
display: block;
width: 16px;
height: 16px;
border: 1px solid #e1e1e1;
border-radius: 2px;
}
&.ur-integration-account-connected {
&::before {
background: #4CC741;
}
&::after {
border-color: #4CC741;
}
}
}
.logo {
width: 40px;
height: 40px;
display: flex;
overflow: hidden;
margin: 0;
border-radius: 4px;
align-items: center;
border: 1px solid #ced4da;
img {
width: 38px;
height: 38px;
display: block;
}
}
h3 {
font-size: 15px;
line-height: 150%;
margin: 0;
font-weight: $medium;
}
}
.form-settings-sub-tab {
padding: 0px;
background: $grey-0;
align-items: baseline;
}
}
}
}
&.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 0.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: 0.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 0.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-row-buttons {
display: flex;
justify-content: center;
margin-top: 10px;
.button {
display: block;
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 !important;
width: 48px !important;
bottom: 72px !important;
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;
}
&.add-icon-group,
&.remove-icon-group {
flex: unset;
max-width: unset;
}
}
.ur-options-list {
li {
display: flex;
align-items: center;
background-color: #f5f5f5;
.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 0.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;
&:not(.no-icon) {
&::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: 20px;
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(16px);
}
}
.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: 0.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 0.3s ease-in-out;
&.swal2-confirm {
background-color: #f75259 !important;
border: $border_width solid #f75259;
border-radius: $border_radius_3;
transition: all 0.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;
}
}
}
}
.user-registration-info {
.swal2-actions{
display: flex;
padding: 10px !important ;
}
.swal2-html-container{
p{
font-size: 1em;
}
}
button {
transition: all 0.3s ease-in-out;
&.swal2-confirm {
background-color: #475bb2!important;
border: $border_width solid #475bb2;
border-radius: $border_radius_3;
transition: all 0.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: center;
flex-direction: row-reverse;
gap: $spacing_12px;
.swal2-confirm {
background: #475bb2;
transition: all 0.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-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 0.3s ease-in-out;
right: -$spacing_22px;
svg {
width: 12px;
height: 12px;
display: block;
position: relative;
left: -$spacing_2px;
transition: all 0.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 0.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;
}
}
}
&.custom {
&:hover,
&.active {
label {
color: #475bb3;
border-color: #475bb3;
background-color: #ebecf1;
}
}
}
}
}
}
#integration-selection-settings {
display: flex;
flex-direction: column;
gap: $spacing_24px;
align-items: center;
padding: $spacing_100px 0px;
justify-content: center;
.integration-selection-settings-contents {
text-align: center;
display: flex;
flex-direction: column;
width: 40%;
h3 {
font-size: 22px;
line-height: 28px;
font-weight: 600;
margin: 0px;
border: none;
padding: 0px;
color: #131313;
}
p {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #6B6B6B;
}
}
}
.integration-lists-settings {
.form-settings-sub-tab {
border-bottom: 0;
margin-bottom: 0;
}
.ur-integration-list {
padding-bottom: $spacing_16px;
margin-bottom: $spacing_24px;
}
.user-registration-notice {
margin: 0;
padding: 0;
}
.user-registration-card {
margin: $spacing_4px 0 $spacing_16px !important;
&:last-child {
margin-bottom: $spacing_12px !important;
}
&__header {
border-bottom: 0;
padding-left: $spacing_20px !important;
padding-right: $spacing_14px !important;
.user-registration-card__title {
color: $grey-400;
font-size: 16px;
font-weight: $semi_bold;
line-height: 24px;
}
.user-registration-card__button {
display: flex;
align-items: center;
.button {
display: flex;
align-items: center;
justify-content: center;
svg {
width: 22px;
height: 22px;
margin: 0;
}
}
}
}
&__body {
border-top: 1px solid #E1E1E1;
padding-left: $spacing_20px !important;
padding-right: $spacing_20px !important;
[class*="urmc-mailchimp-"],
[class*="ur-mailchimp-"] {
margin-bottom: $spacing_12px;
}
}
}
}
}
}
}
}
#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;
justify-content: space-between;
&__left {
display: flex;
gap: 16px;
align-items: center;
h3 {
margin: 0;
font-weight: $semi_bold;
font-size: 24px;
line-height: 36px;
color: $grey-500;
}
&--icon {
width: 40px;
height: 40px;
background: #EDEFF7;
display: flex;
justify-content: center;
align-items: center;
border-radius: 3.75px;
svg {
width: 20px;
height: 20px;
path {
fill: #475bb2;
}
}
}
}
&__right {
display: flex;
align-items: center;
justify-content: space-between;
gap: $spacing_10px;
span.user-registration-toggle-text {
font-size: 14px;
line-height: 24px;
color: #6B6B6B;
font-weight: 400;
}
}
}
&--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 0.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 0.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 0.3s
ease-in-out;
svg {
path {
fill: $primary_color;
transition: all
0.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: 0.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 0.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: 0.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;
}
}
}
}
}
}
}
}
}
}
#ur-smart-tags-selector {
float: right;
display: inline-flex;
gap: 4px;
align-items: center;
color: #6b6b6b;
font-weight: 400;
font-size: 14px;
text-decoration: underline;
padding: 10px 0px;
cursor: pointer;
& ~ .select2-container {
visibility: hidden;
position: absolute;
right: 0;
width: 120px !important;
}
}
.select2-container {
&--open {
&:not(.ur-hide-select2) {
.ur-select2-dropdown {
width: 180px !important;
.select2-search--dropdown {
width: 98%;
position: relative;
}
.ur-select2-title {
display: block;
padding: 4px;
width: 98%;
border-radius: 4px;
color: #383838;
p {
padding: 6px 8px;
background-color: #f4f4f4;
font-size: 13px;
font-weight: 600;
margin: 0px;
}
}
ul {
&.select2-results__options {
max-height: 250px !important;
overflow-y: auto;
border-top: 1px solid #ccc;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
background-color: #aaa;
border-radius: 10px !important;
}
li {
&.select2-results__option--highlighted,
&[data-selected="true"] {
background: #f8f8fa;
color: #475bb2;
border: none;
}
}
}
}
.select2-search {
display: flex;
align-items: center;
color: #999999;
.select2-search__field {
padding-left: 28px;
}
.search-icon {
position: absolute;
left: 12px;
top: 33;
color: #999;
}
}
}
}
}
}
.toplevel_page_user-registration,
body.user-registration {
#wpcontent {
padding-left: 0;
}
#wpbody-content {
background: #EFF2F6;
padding-bottom: $spacing_30px;
#screen-meta-links {
display: none;
}
}
}
.ur-admin-page-topnav {
display: flex;
align-items: center;
justify-content: space-between;
background: $grey-0;
padding: 0px $spacing_24px;
border-bottom: $border_width solid #e1e1e1;
margin-bottom: 25px;
.ur-page-title__wrapper {
display: flex;
align-items: center;
gap: $spacing_20px;
&-logo {
padding: 0px $spacing_20px 0px 0px;
border-right: 1px solid #e1e1e1;
}
&-menu {
h2 {
padding: $spacing_24px 0px;
}
&__items {
display: flex;
gap: 4px;
margin: 0;
li {
font-size: 15px;
margin-bottom: 0;
padding: $spacing_24px 0;
a {
text-decoration: none;
color: #1f1f1f;
padding: $spacing_24px $spacing_16px;
position: relative;
transition: all 0.3s;
&:focus {
outline: none;
box-shadow: none;
}
&::after {
content: "";
background: #475bb2;
width: 0px;
height: 3px;
position: absolute;
bottom: 0;
left: 0;
transition: all 0.3s;
}
&:hover,
&.current {
color: #475bb2;
&::after {
width: 100%;
}
}
&.current {
font-weight: 600;
}
}
}
}
}
}
.ur-back-button {
border-right: $border_width solid $grey-100;
padding: $spacing_4px $spacing_14px $spacing_4px $spacing_4px;
display: flex;
cursor: pointer;
svg {
width: 24px;
height: 24px;
}
}
.dashicons {
&::before {
color: $grey-400;
}
}
.ur-page-actions {
display: flex;
align-items: center;
gap: $spacing_8px;
flex-direction: row-reverse;
a {
.ur-button-primary {
border-radius: $border_radius_3;
background: $primary_color;
padding: $spacing_6px $spacing_12px;
font-size: 14px;
line-height: 150%;
color: $grey-0;
transition: all 0.3s ease-in-out;
&:hover {
background: darken($primary_color, 10%);
}
}
}
> .ur-button-primary {
color: $grey-400;
font-size: 14px;
font-weight: 400;
line-height: 18px;
background: #eaeaea;
padding: $spacing_8px $spacing_12px;
display: flex;
align-items: center;
justify-content: center;
gap: $spacing_6px;
border-radius: $border_radius_3;
border: $border_width solid #eaeaea;
cursor: pointer;
transition: all 0.3s ease-in-out;
svg {
width: 14px;
height: 14px;
path {
fill: $grey-400;
}
}
&:hover {
background: #e1e1e1;
border-color: #e1e1e1;
}
}
}
}
.user-registration-list-table-container {
#user-registration-list-table-page {
max-width: 100%;
margin-left: $spacing_20px;
margin-right: $spacing_20px;
}
}
.user-registration-login-form-container {
.ur-form-container {
#menu-management-liquid {
margin-left: 0;
min-width: 100%;
.ur-selected-inputs {
padding-left: $spacing_20px !important;
padding-right: $spacing_20px !important;
}
}
}
}
#user-registration-list-table-page {
max-width: 1280px;
margin: 25px auto;
padding: $spacing_24px;
border-radius: $border_radius_7;
background: $grey-0;
.user-registration-list-table-header {
display: flex;
gap: 15px;
align-items: center;
margin-bottom: 15px;
a {
padding: 6px 14px;
border-radius: 3px;
border: 1px solid #475bb2;
background: #f6f7f7;
color: #475bb2;
font-size: 14px;
font-weight: 500;
line-height: 150%;
transition: all 0.3s ease-in-out;
text-decoration: none;
}
}
#user-registration-list-filters-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: $spacing_20px;
border-bottom: $border_width solid #dcdcdc;
padding-bottom: $spacing_24px;
margin-bottom: $spacing_24px;
ul.subsubsub {
font-size: 15px;
}
#user-registration-pro-users-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: $spacing_12px;
padding: 0;
margin-top: 0;
li {
div {
p {
display: none;
margin: 0;
}
select {
min-height: 36px;
padding: $spacing_2px $spacing_12px;
border-radius: $border_radius_4;
border-color: $grey-100;
min-width: 130px;
&:hover {
color: $primary_color;
}
&:focus {
box-shadow: none;
border: $border_width solid $primary_color;
}
}
}
}
.user-registration-users-filter-btns {
display: flex;
align-items: center;
gap: $spacing_8px;
button {
cursor: pointer;
transition: all 0.3s ease-in-out;
&[type="submit"] {
padding: $spacing_6px $spacing_14px;
border-radius: $border_radius_3;
border: $border_width solid $primary_color;
background: $primary_color;
color: $grey-0;
font-size: 14px;
font-weight: $regular;
line-height: 150%;
letter-spacing: 0.3px;
&:hover {
background: darken($primary_color, 10%);
border-color: darken($primary_color, 10%);
}
}
&[type="reset"],
&[type="button"] {
border-radius: $border_radius_3;
border: $border_width solid $grey-300;
background: #f6f7f7;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease-in-out;
svg {
width: 16px;
height: 16px;
path {
fill: $grey-400;
}
}
&:hover {
background: #f2f2f2;
border-color: $primary_color;
svg {
path {
fill: $primary_color;
}
}
}
}
}
}
}
#search-submit {
img {
width: 18px;
height: 18px;
}
}
form {
position: relative;
}
#user-registration-users-advanced-filters {
display: block;
position: absolute;
border-radius: $border_radius_4;
background: $grey-0;
box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.13);
padding: $spacing_20px $spacing_18px;
right: 0;
top: 38px;
z-index: 2;
width: 360px;
ul {
margin: 0;
li {
margin: 0;
p {
margin-top: 0;
margin-bottom: $spacing_14px;
color: $grey-500;
font-size: 15px;
font-weight: $semi_bold;
line-height: 150%;
}
input {
&[type="date"] {
width: 47%;
border-radius: $border_radius_4;
border-color: $grey-100;
background: $grey-0;
height: 36px;
}
}
}
}
}
#user-registration-list-search-form {
width: 275px;
position: relative;
#user-registration-list-table-search-input {
border-radius: $border_radius_4;
border: $border_width solid $grey-100;
background: $grey-0;
padding: 3px 42px 3px $spacing_12px;
width: 100%;
&::placeholder {
color: $grey-200;
}
&:focus {
box-shadow: none;
border: $border_width solid $primary_color;
}
}
button {
&#search-submit {
position: absolute;
border: 0;
background: transparent;
padding: 0;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
right: $spacing_12px;
top: $spacing_8px;
svg {
path {
fill: $grey-200;
}
}
}
}
}
form {
position: relative;
}
}
hr {
display: none;
}
.user-registration-list-table-action-form {
.tablenav {
padding: 0;
margin: 0 0 $spacing_16px;
height: auto;
&.bottom {
margin-bottom: 0;
}
.actions {
display: flex;
align-items: center;
gap: $spacing_12px;
padding-right: $spacing_12px;
select {
height: 36px;
margin: 0;
border-color: $grey-100;
&:hover {
color: $primary_color;
}
&:focus {
box-shadow: none;
border: $border_width solid $primary_color;
}
}
input {
&[type="submit"] {
padding: $spacing_6px $spacing_14px;
border-radius: $border_radius_3;
border: $border_width solid $primary_color;
background: #f6f7f7;
color: $primary_color;
font-size: 14px;
font-weight: $medium;
line-height: 150%;
transition: all 0.3s ease-in-out;
&:hover {
background: #f2f2f2;
}
}
}
}
&-pages {
margin-bottom: 0;
}
}
}
table.wp-list-table {
border-color: #dcdcdc;
border-radius: $border_radius_5;
margin-bottom: $spacing-16px;
overflow: hidden;
a {
color: $grey-400;
transition: all 0.3s ease-in-out;
&:hover {
color: $primary_color;
}
}
thead {
tr {
td,
th {
border-bottom-color: #dcdcdc;
}
th {
font-size: 14px;
font-weight: $semi_bold;
line-height: 24px;
color: $grey-400;
&.sortable,
&.sorted {
padding: 0;
a {
font-size: 14px;
font-weight: $semi_bold;
line-height: 24px;
padding: $spacing_12px $spacing_8px;
display: flex;
align-items: center;
gap: $spacing_8px;
&:focus {
box-shadow: none;
}
.sorting-indicators {
gap: $spacing_4px;
.sorting-indicator {
margin: 0;
}
}
}
}
}
}
}
tbody {
tr {
td {
&.username {
img {
border-radius: $border_radius_50;
margin-top: $spacing_2px;
}
}
&.user_status {
span {
font-weight: $medium;
&.user-status {
&-approved {
color: $approve_user;
}
&-pending {
color: $pending_user;
}
&-denied {
color: $deny_color;
}
}
}
}
&.enable_disable {
span {
font-weight: $medium;
&.enable-disable {
&-Enabled {
color: $approve_user;
}
&-Disabled {
color: $deny_color;
}
}
}
}
&.actions {
a {
color: $primary_color;
transition: all 0.3s ease-in-out;
padding-bottom: $spacing_2px;
position: relative;
&::before {
content: "";
background: $primary_color;
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
opacity: 0;
transition: all 0.3s ease-in-out;
}
&:hover {
&::before {
opacity: 1;
}
}
&:focus {
box-shadow: none;
outline: none;
}
}
}
}
}
}
// Bulk checkbox
input[type="checkbox"]:not(.urcr-enable-access-rule) {
border-radius: $border_radius_2;
border-color: $grey-200;
}
}
}
// Payment History CSS
.user-registration {
.ur-membership-header {
margin-left: 0 !important;
padding-left: 24px !important;
padding-right: 24px !important;
border-bottom: 1px solid #e2e8f0;
padding-top: 0 !important;
padding-bottom: 0 !important;
gap: 0 !important;
background: #ffffff;
img {
max-width: 36px !important;
padding: 18px 24px 18px 0;
border-right: 1px solid #e2e8f0;
margin-right: 28px;
}
a {
font-size: 16px !important;
line-height: 26px;
color: #64748b;
position: relative;
padding: 23px 20px;
&::after {
content: "";
background: #475bb2;
width: 0px;
height: 3px;
position: absolute;
bottom: 0;
left: 0;
transition: all 0.3s;
}
&.row-title {
color: #475bb2;
&:after {
width: 100%;
}
}
&:hover {
&::after {
width: 100%;
}
}
&:focus {
box-shadow: none;
outline: none;
}
}
}
.ur-coupon-tab-contents-wrapper {
max-width: 1280px;
margin: 60px auto;
padding: 0 !important;
form {
width: 100% !important;
.user-registration-card {
border: 0;
padding: 28px;
#ur-coupon-form-container {
padding: 0 !important;
#left {
&-title {
padding: 0;
gap: 18px;
padding-bottom: 20px;
border-bottom: 1px solid #e9e9e9;
margin-bottom: 28px;
gap: 18px;
a {
margin-right: 0 !important;
padding-right: 0 !important;
border-right: 0 !important;
width: 40px;
height: 40px;
background: #f4f4f4;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
&:focus {
box-shadow: none;
outline: none;
border-color: #475bb2;
}
svg {
width: 20px;
height: 20px;
}
}
h3 {
margin: 0;
color: #222222;
font-size: 22px;
font-weight: 600;
line-height: 32px;
}
}
&-body {
display: flex;
flex-direction: column;
gap: 24px;
.ur-coupon-input-container {
padding: 0 !important;
.ur-label {
margin-bottom: 0;
label {
margin-bottom: 0;
color: #383838;
font-size: 15px;
font-weight: 500;
line-height: 21px;
}
}
.ur-admin-template {
&.ur-input-type-coupon-discount-type {
.ur-field {
justify-content: flex-start !important;
gap: 16px !important;
}
}
.ur-field {
input,
select {
height: 38px;
border-color: #e9e9e9;
padding-left: 14px;
padding-right: 14px;
color: #383838;
&::placeholder {
color: #999999;
}
&:focus {
box-shadow: none;
outline: none;
border-color: #475bb2;
}
}
.ur-coupon-discount-type {
width: 220px;
padding: 16px !important;
border-color: #e9e9e9 !important;
border-radius: 4px !important;
display: flex;
flex-direction: column;
gap: 12px;
.ur-coupon-type-title {
gap: 8px;
input[type="radio"] {
height: 1rem;
}
label {
padding: 0 !important;
color: #222222;
font-size: 15px;
font-weight: 500;
line-height: 22px;
}
}
.ur-membership-type-description {
p {
margin: 0;
color: #383838;
font-size: 14px !important;
font-weight: 400;
line-height: 22px;
}
}
}
.select2 {
&-selection {
height: 38px;
&__rendered {
line-height: 36px;
}
&__arrow {
height: 36px;
}
&--single {
.select2-selection__rendered {
padding-left: 14px;
}
}
&--multiple {
.select2-selection {
&__rendered {
gap: 4px;
}
&__clear {
margin-right: 0;
}
&__choice {
border-radius: 5px;
background: #e9e9e9;
display: flex;
align-items: center;
gap: 8px;
margin: 4px;
padding: 0px 8px 0px
10px;
border: 0;
color: #383838;
flex-direction: row-reverse;
&__remove {
color: #383838;
}
}
}
}
}
}
}
}
.user-registration-switch {
input[type="checkbox"] {
border-radius: 20px;
border: 0;
width: 30px;
flex: 0 0 30px;
background: #d5d5d5;
box-shadow: none;
&::after {
width: 12px;
height: 12px;
transform: translateX(3px);
}
&:checked {
background: #475bb2;
border-color: #475bb2;
&::after {
transform: translateX(15px);
}
}
}
}
}
}
}
}
.submit {
margin-bottom: 0;
padding: 0 !important;
padding-top: 28px !important;
border-top: 1px solid #e1e1e1;
margin-top: 30px;
.button {
&-secondary {
border-radius: 4px;
box-shadow: none;
padding: 8px 16px;
color: #ffffff;
font-size: 14px;
font-weight: 400;
line-height: 24px;
border: 0;
background: transparent;
border: 1px solid #bababa;
a {
color: #6b6b6b;
}
}
&-primary {
border-radius: 4px;
box-shadow: none;
padding: 8px 16px;
color: #ffffff;
font-size: 14px;
font-weight: 400;
line-height: 24px;
border: 0;
}
}
}
}
}
}
#user-registration-list-table-page {
margin: 60px auto;
padding: 28px 32px;
box-sizing: border-box;
max-width: 1280px !important;
.user-registration-list-table-heading {
display: flex;
align-items: center;
margin-bottom: 24px;
.ur-page-title__wrapper {
width: 100%;
h1 {
margin: 0;
color: #222;
font-size: 22px;
font-weight: 600;
line-height: 32px;
}
}
#ur-coupon-add-btn {
box-shadow: none;
border-radius: 3px;
background: #475bb2;
padding: 8px 20px 8px 16px;
color: #fff;
font-size: 14px;
font-weight: 400;
line-height: 24px;
transition: all 0.3s;
}
}
#user-registration-pro-filters-row {
#user-registration-users-search-form {
gap: 16px !important;
flex-wrap: wrap;
.search-box {
position: relative;
input {
&[type="search"] {
height: 38px;
padding-left: 14px;
padding-right: 14px;
border-color: #bababa;
margin: 0;
width: 220px;
color: #383838;
&::placeholder {
color: #999999;
}
&:focus {
box-shadow: none;
outline: none;
border-color: #475bb2;
}
}
}
#search-submit {
background: none;
border: 0;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 14px;
display: flex;
svg {
width: 18px;
height: 18px;
path {
fill: #6b6b6b;
}
}
}
}
select {
width: 200px;
height: 38px;
padding-left: 14px;
padding-right: 14px;
border-color: #bababa;
margin: 0;
color: #383838;
&:focus {
box-shadow: none;
outline: none;
border-color: #475bb2;
}
}
#user-registration-users-filter-btn {
border-radius: 3px;
border: 1px solid #475bb2;
background: #475bb2;
color: #ffffff;
padding: 8px 14px;
color: #ffffff;
font-size: 13px;
font-weight: 400;
line-height: 20px;
&:hover {
background: #38488e;
border-color: #38488e;
}
}
}
}
#ur-membership-payment-history-form {
.wrap {
margin: 0;
}
.wp-list-table {
&.orders {
thead {
}
tbody {
tr {
&.no-items {
background: #ffffff;
td {
padding: 0;
.empty-list-table-container {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
img {
width: 300px;
}
h3 {
margin-top: 16px;
margin-bottom: 8px;
color: #222222;
font-size: 22px;
font-weight: 600;
line-height: 32px;
}
p {
color: #6b6b6b;
font-size: 14px;
font-weight: 400;
line-height: 24px;
}
}
}
}
}
}
}
}
}
#ur-coupon-list-form,
#ur-membership-payment-history-form {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid #dcdcdc;
.wrap {
margin: 0;
.tablenav {
margin: 0;
padding: 0;
height: auto;
.bulkactions {
padding-right: 0;
display: flex;
align-items: center;
gap: 10px;
select,
input {
margin-right: 0;
}
select {
border-color: #bababa;
height: 38px;
width: 220px;
padding-inline: 14px;
color: #383838;
}
input[type="submit"] {
border-radius: 3px;
border: 1px solid #475bb2;
background: #f6f7f7;
padding: 8px 14px;
color: #475bb2;
font-size: 13px;
font-weight: 500;
line-height: 20px;
}
}
}
.wp-list-table {
&.coupons {
margin-top: 20px;
margin-bottom: 20px;
thead {
tr {
th {
&#title {
width: 220px;
}
&#code {
width: 170px;
}
&#amount,
&#expires {
width: 180px;
}
&#status {
width: 140px;
}
&#action {
width: 120px;
}
}
}
}
tbody {
tr {
&:nth-child(odd) {
background: #f8f8fa;
}
td {
font-size: 14px;
line-height: 24px;
color: #383838;
vertical-align: middle;
}
}
.coupon-active {
font-weight: 500;
color: #4cc741;
}
.coupon-inactive {
font-weight: 500;
color: #f25656;
}
.coupon-expired {
font-weight: 500;
color: #636363;
}
}
}
&.orders {
margin: 20px 0;
tbody {
tr {
td {
font-size: 14px;
line-height: 24px;
&.membership_type {
.user-registration-badge {
background: none;
padding: 0;
color: #383838;
font-weight: 500;
}
}
&.status {
.payment-status-btn {
display: block;
width: max-content;
border-radius: 3px;
color: #383838;
font-size: 14px;
font-weight: 400;
line-height: 16px;
padding: 4px 8px;
&.completed {
border: 1px solid #4cc741;
background: #f5fff4;
}
&.pending {
border: 1px solid #ee9936;
background: #fffaf5;
}
&.failed {
border: 1px solid #f25656;
background: #fff4f4;
}
}
}
}
}
}
}
}
}
}
}
#payment-detail-modal {
.modal-content {
margin: 0;
border-radius: 12px;
background: #fff;
box-shadow: 0px 6px 21px 0px rgba(10, 10, 10, 0.08);
padding: 28px 32px;
box-sizing: border-box;
width: 820px;
max-width: 100%;
.modal-header {
h2 {
margin: 0;
color: #222222;
font-size: 24px;
font-weight: 700;
line-height: 34px;
}
hr {
margin: 16px 0 24px;
}
}
.modal-body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
align-items: unset;
justify-content: unset;
.payment-detail {
&-box {
margin-bottom: 0;
}
&-label {
color: #383838;
font-size: 16px;
font-weight: 500;
line-height: 24px;
margin-bottom: 6px;
}
&-data {
display: flex;
align-items: center;
gap: 10px;
color: #6b6b6b;
font-size: 15px;
font-weight: 400;
line-height: 23px;
overflow-wrap: break-word;
.payment-status-btn {
display: block;
width: max-content;
&.completed {
border: 1px solid #4cc741;
background: #f5fff4;
}
&-pending {
border: 1px solid #ee9936;
background: #fffaf5;
}
&.failed {
border: 1px solid #f25656;
background: #fff4f4;
}
}
}
}
}
}
}
}
// Delete Popup CSS
.user-registration_page {
&_user-registration-membership,
&_user-registration-coupons,
&_user-registration-members,
&_member-payment-history {
.swal2-container {
.swal2-header {
padding: 24px !important;
padding-bottom: 16px !important;
.swal2-title {
display: flex !important;
align-items: center;
gap: 8px;
font-size: 18px;
line-height: 26px;
margin-bottom: 0;
width: 100%;
border-bottom: 1px solid #e9e9e9;
padding-bottom: 16px;
color: #222;
margin-bottom: 0;
img {
width: 20px;
height: 20px;
}
}
}
.swal2-content {
padding: 0 24px;
.swal2-html-container {
text-align: left;
p {
font-size: 15px;
line-height: 23px;
color: #383838;
margin: 0;
}
}
}
.swal2-actions {
button {
margin: 0;
&.swal2-confirm {
background: #f25656 !important;
&:hover {
background: #e34747 !important;
}
}
}
}
}
}
}
// Custom CAPTCHA Form Builder Field Options CSS
.ur-registered-from {
.ur-general-setting {
&.ur-setting-captcha {
.ur-options-list {
.ui-sortable-handle {
flex-direction: row;
flex-wrap: wrap;
}
}
}
&.ur-general-setting-image-captcha-options {
.ur-options-list {
.ur-custom-captcha {
background: #f2f2f2;
padding: 12px;
margin-bottom: 16px;
.icons-group {
display: grid;
grid-template-columns: repeat(
auto-fill,
minmax(100px, 1fr)
);
gap: 10px;
width: 100%;
.icon-wrap {
background: #ffffff;
border-radius: 4px;
padding: 10px;
text-align: center;
label {
margin-bottom: 0;
.dashicons {
width: 100%;
height: 75px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
background: #fafafa;
border: 1px solid #d9d9d9;
transition: all 0.3s;
cursor: pointer;
&::before {
font-size: 24px;
}
&:hover {
background: rgba(240, 242, 249, 1%);
border-color: #475bb2;
}
}
input {
&[type="radio"] {
display: none;
&:checked ~ .dashicons {
background: rgba(240, 242, 249, 1%);
border-color: #475bb2;
}
}
}
}
.button {
width: 100%;
margin-top: 12px;
height: auto;
padding: 2px 10px;
line-height: 24px;
font-size: 13px;
}
}
}
a.remove {
width: max-content;
height: auto;
padding: 6px 12px 6px 8px;
margin-left: 0 !important;
align-items: center;
gap: 4px;
&:hover {
background: #fa5252;
border-color: #fa5252;
}
&:focus {
box-shadow: none;
outline: none;
}
}
}
a.add {
border: 1px solid #e1e1e1;
padding: 8px 16px;
height: auto;
}
}
}
}
}
body {
&.ur-settings-sidebar-hidden {
.user-registration-settings-sidebar-container {
margin-right: -910px;
display: none;
}
}
}
.user-registration {
.swal2-container {
.swal2 {
&-header {
padding: $spacing_32px $spacing_32px 0;
gap: $spacing_16px;
}
&-icon {
margin-block: 0;
border-color: #41C4EE;
color: #41C4EE;
width: 60px;
height: 60px;
&-content {
font-size: 50px;
}
}
&-title {
color: #131313;
text-align: center;
font-size: 22px;
font-weight: $semi_bold;
line-height: 30px;
margin-bottom: 0 !important;
}
&-content {
padding: 0 $spacing_32px;
margin-top: $spacing_20px;
input[type="text"] {
margin: 0;
height: 38px;
font-size: 15px;
line-height: 25px;
padding: 0 $spacing_12px;
color: $grey-400;
border-radius: $border_radius_4;
&::placeholder {
color: #999999;
}
&:focus {
outline: none;
box-shadow: none;
border-color: $primary_color;
}
}
}
&-actions {
margin-top: $spacing_30px !important;
padding: $spacing_20px $spacing_32px !important;
gap: $spacing_16px !important;
button {
margin: 0;
text-transform: capitalize;
padding: $spacing_10px $spacing_14px;
border-radius: $border_radius_3;
font-size: 14px;
font-weight: 400;
line-height: 16px;
border: $border_width solid transparent;
transition: all .3s;
&.swal2-confirm {
width: 48%;
background:$primary_color !important;
color: $grey-0;
border-color: $primary_color;
&:hover {
background: darken($primary_color, 10%);
}
}
&.swal2-cancel {
width: 45%;
background: transparent;
border-color: #6B6B6B;
color: #6B6B6B;
&:hover {
background: #f0f0f0;
}
}
}
}
}
}
}
.ur-embed-form-button {
background: #edeff7 !important;
border-color: #edeff7 !important;
box-shadow: 0 1px 0 #edeff7 !important;
font-size: 14px !important;
color: #383838 !important;
border-radius: 3px !important;
}
.embed-form-swl-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding-bottom: 10px;
justify-content: space-evenly;
}
.ur-embed-container {
@extend .embed-form-swl-container;
}
.ur-embed-select-existing-page-container {
@extend .embed-form-swl-container;
.ur-embed-go-back {
flex-basis: 100%;
text-align: center;
font-size: 14px;
}
select {
width: 80%;
border: 1px solid #eae2e2;
margin:-10px;
}
p{
font-size: 1em;
}
}
.ur-embed-new-page-container {
@extend .embed-form-swl-container;
.ur-embed-go-back {
flex-basis: 100%;
text-align: center;
margin-top: 10px;
font-size: 14px;
}
p{
font-size: 1em;
}
input {
margin-left: -50px;
width: 80%;
border: 1px solid #eae2e2;
}
}
@font-face {
font-family: "UserRegistration";
src: url("../fonts/UserRegistration.eot?v5p6f");
src:
url("../fonts/UserRegistration.eot?v5p6f#iefix")
format("embedded-opentype"),
url("../fonts/UserRegistration.ttf?v5p6f") format("truetype"),
url("../fonts/UserRegistration.woff?v5p6f") format("woff"),
url("../fonts/UserRegistration.svg?v5p6f#UserRegistration")
format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
#elementor-editor-wrapper .ur-icon-user-registration:before,
.elementor-edit-area .ur-icon-user-registration:before {
content: "\e031";
font-family: "UserRegistration";
font-weight: normal;
font-style: normal;
font-display: block;
}
#elementor-editor-wrapper .ur-icon-edit-password:before,
.elementor-edit-area .ur-icon-edit-password:before {
content: "\e045";
font-family: "UserRegistration";
font-weight: normal;
font-style: normal;
font-display: block;
}
#elementor-editor-wrapper .ur-icon-edit-profile:before,
.elementor-edit-area .ur-icon-edit-profile:before {
content: "\e046";
font-family: "UserRegistration";
font-weight: normal;
font-style: normal;
font-display: block;
}
#elementor-editor-wrapper .ur-icon-login:before,
.elementor-edit-area .ur-icon-login:before {
content: "\e048";
font-family: "UserRegistration";
font-weight: normal;
font-style: normal;
font-display: block;
}
#elementor-editor-wrapper .form:before,
.elementor-edit-area .form:before {
content: "\e048";
font-family: "UserRegistration";
font-weight: normal;
font-style: normal;
font-display: block;
}
#elementor-editor-wrapper .ur-icon-myaccount:before,
.elementor-edit-area .ur-icon-myaccount:before {
content: "\e047";
font-family: "UserRegistration";
font-weight: normal;
font-style: normal;
font-display: block;
}
#elementor-editor-wrapper .ur-icon-popup:before,
.elementor-edit-area .ur-icon-popup:before {
content: "\e043";
font-family: "UserRegistration";
font-weight: normal;
font-style: normal;
font-display: block;
}
#elementor-editor-wrapper .ur-icon-profile-details:before,
.elementor-edit-area .ur-icon-profile-details:before {
content: "\e044";
font-family: "UserRegistration";
font-weight: normal;
font-style: normal;
font-display: block;
}
#integration-settings .ur-nav-premium,
.integration-lists-settings.ur-nav-premium {
cursor: not-allowed;
opacity: 0.5;
}
.form-settings-main-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;
}
}
.form-settings-sub-tab {
margin-bottom: $spacing_10px;
border-radius: $border_radius_4;
padding: $spacing_18px $spacing_24px;
border-bottom: $border_width solid #ececec;
background: $color_gray_four;
font-size: 15px;
font-weight: $regular;
line-height: 150%;
display: flex;
align-items: center;
justify-content: space-between;
padding: $spacing_10px $spacing_15px;
color: $gray_base;
&.active {
background: $primary_color;
color: $white;
}
}
.integration-lists-settings {
.form-settings-sub-tab {
padding: 0px;
background-color: #ffffff;
align-items: normal;
flex-direction: column;
}
}
#ur-row-section-settings {
padding: 10px 0px;
.ur-individual-row-settings {
display: flex;
flex-direction: column;
}
}