.wpuf-social-field-wrapper {
position: relative;
display: inline-block;
width: 100%;
}
.wpuf-social-field-wrapper input[type="url"],
.wpuf-social-field-wrapper input[type="text"] {
padding-right: 35px;
width: 100%;
box-sizing: border-box;
} .wpuf-input-wrapper {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.wpuf-at-prefix {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: #666;
pointer-events: none;
z-index: 2;
font-weight: 500;
line-height: 1;
}
.wpuf-twitter-with-prefix {
padding-left: 24px !important; width: 100% !important;
} .wpuf-input-wrapper input:focus + .wpuf-at-prefix,
.wpuf-input-wrapper input:focus ~ .wpuf-at-prefix {
color: #1da1f2;
} @media (prefers-color-scheme: dark) {
.wpuf-at-prefix {
color: #999;
}
.wpuf-input-wrapper input:focus + .wpuf-at-prefix,
.wpuf-input-wrapper input:focus ~ .wpuf-at-prefix {
color: #1da1f2;
}
}
.wpuf-social-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
z-index: 2;
} .wpuf-twitter-icon,
.wpuf-twitter-svg {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
transition: all 0.2s ease;
} @media (prefers-color-scheme: dark) {
.wpuf-twitter-icon path,
.wpuf-twitter-svg path {
stroke: #ffffff; }
} .wpuf-twitter-icon[stroke="currentColor"] path,
.wpuf-twitter-svg[stroke="currentColor"] path {
stroke: currentColor;
} .wpuf-social-field-wrapper.wpuf-has-error input {
border-color: #d32f2f;
}
.wpuf-social-field-wrapper.wpuf-has-error
.wpuf-social-icon
.wpuf-twitter-svg
path {
stroke: #d32f2f;
} .wpuf-label-with-icon {
display: inline-flex;
align-items: center;
margin-bottom: 5px;
gap: 3px;
max-width: 100%;
}
.wpuf-label-with-icon label {
display: inline-block;
margin-bottom: 0;
margin-right: 0;
flex-shrink: 0;
} .wpuf-social-label-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
vertical-align: middle !important;
position: relative;
z-index: 1;
flex-shrink: 0;
width: auto !important;
height: auto !important;
}
.wpuf-social-label-icon .wpuf-twitter-svg {
width: 14px !important;
height: 14px !important;
display: inline-block !important;
margin: 0 !important;
vertical-align: middle !important;
transition: color 0.2s ease;
}
.wpuf-social-label-icon svg {
width: 14px !important;
height: 14px !important;
display: inline-block !important;
margin: 0 !important;
vertical-align: middle !important;
} .wpuf-social-input-wrapper input[type="url"]:focus,
.wpuf-social-input-wrapper input[type="text"]:focus {
outline: none;
border-color: #11496c;
box-shadow: 0 0 0 1px rgba(29, 161, 242, 0.2);
}
.wpuf-social-input-wrapper input[type="url"]:hover,
.wpuf-social-input-wrapper input[type="text"]:hover {
border-color: #bbb;
} .wpuf-social-input-wrapper input[type="url"][readonly],
.wpuf-social-input-wrapper input[type="text"][readonly] {
background-color: #f9f9f9;
color: #666;
cursor: not-allowed;
}
.wpuf-social-input-wrapper input[type="url"][readonly]:hover,
.wpuf-social-input-wrapper input[type="text"][readonly]:hover {
border-color: #ddd;
} @media (prefers-color-scheme: dark) {
.wpuf-social-input-wrapper input[type="url"],
.wpuf-social-input-wrapper input[type="text"] {
background-color: #2d2d2d;
border-color: #555;
color: #fff;
}
.wpuf-social-input-wrapper input[type="url"]:focus,
.wpuf-social-input-wrapper input[type="text"]:focus {
border-color: #1da1f2;
box-shadow: 0 0 0 1px rgba(29, 161, 242, 0.3);
}
.wpuf-social-input-wrapper input[type="url"][readonly],
.wpuf-social-input-wrapper input[type="text"][readonly] {
background-color: #1a1a1a;
color: #999;
}
} @media (prefers-contrast: high) {
.wpuf-social-input-wrapper input[type="url"],
.wpuf-social-input-wrapper input[type="text"] {
border-width: 2px;
border-color: #000;
}
.wpuf-social-input-wrapper input[type="url"]:focus,
.wpuf-social-input-wrapper input[type="text"]:focus {
border-color: #00cc81;
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.5);
}
.wpuf-social-label-icon .wpuf-twitter-svg path {
stroke: #000 !important;
}
} @media (max-width: 768px) {
.wpuf-social-input-wrapper.wpuf-small,
.wpuf-social-input-wrapper.wpuf-medium {
max-width: 100%;
}
.wpuf-social-input-wrapper input[type="url"],
.wpuf-social-input-wrapper input[type="text"] {
font-size: 16px; }
} .wpuf-social-field-wrapper {
position: relative;
display: inline-block;
width: 100%;
box-sizing: border-box;
}
.wpuf-social-field-wrapper input[type="url"],
.wpuf-social-field-wrapper input[type="text"] {
width: 100%;
padding: 8px 40px 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
line-height: 1.4;
background-color: #fff;
box-sizing: border-box;
position: relative;
z-index: 1;
}
.wpuf-social-icon {
position: absolute;
right: 10px;
top: 0;
bottom: 0;
display: flex;
align-items: center;
pointer-events: none;
z-index: 2;
} .wpuf-label-with-icon {
display: inline-flex;
align-items: center;
margin-bottom: 5px;
gap: 3px;
}
.wpuf-label-with-icon label {
margin-bottom: 0;
margin-right: 0;
} .wpuf-social-input-wrapper {
position: relative;
display: inline-block;
width: 100%;
box-sizing: border-box;
} .wpuf-social-input-wrapper.wpuf-small {
max-width: 200px;
}
.wpuf-social-input-wrapper.wpuf-medium {
max-width: 300px;
}
.wpuf-social-input-wrapper.wpuf-large {
max-width: 100%;
} .wpuf-social-input-wrapper input[type="url"],
.wpuf-social-input-wrapper input[type="text"] {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
line-height: 1.4;
background-color: #fff;
box-sizing: border-box;
transition:
border-color 0.3s ease,
box-shadow 0.3s ease;
} .wpuf-fields input[data-validation="strict"] {
border: 1px solid #ddd;
transition: border-color 0.3s ease;
}
.wpuf-fields input[data-validation="strict"]:focus {
border-color: #1da1f2;
box-shadow: 0 0 0 1px rgba(29, 161, 242, 0.2);
}
.wpuf-fields input[data-validation="strict"].wpuf-error {
border-color: #d32f2f;
background-color: #ffeaea;
}
.wpuf-fields input[data-validation="strict"].wpuf-valid {
border-color: #4caf50;
} .wpuf-twitter-error,
.wpuf-facebook-error {
color: #d32f2f;
font-size: 12px;
margin-top: 5px;
display: block;
} .wpuf-meta-key-readonly input[readonly],
.wpuf-meta-key-readonly input[disabled] {
background-color: #f9f9f9 !important;
color: #666 !important;
cursor: not-allowed !important;
border-color: #ddd !important;
}
.wpuf-meta-key-readonly {
position: relative;
}
.wpuf-meta-key-readonly::after {
content: "🔒";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: #999;
pointer-events: none;
font-size: 12px;
z-index: 10;
} .wpuf-social-field-wrapper .wpuf-social-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
z-index: 2;
} .wpuf-social-field-wrapper input[type="text"]:focus,
.wpuf-social-field-wrapper input[type="url"]:focus {
outline: 2px solid transparent;
outline-offset: 2px;
} .wpuf-fields .wpuf-social-label-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
}
.wpuf-fields .wpuf-label-with-icon {
display: inline-flex !important;
align-items: center !important;
gap: 3px !important;
margin-bottom: 5px !important;
max-width: 100% !important;
}
.wpuf-fields .wpuf-label-with-icon label {
flex-shrink: 0 !important;
margin-bottom: 0 !important;
margin-right: 0 !important;
} .wpuf-fields .wpuf-social-label-icon svg {
position: static !important;
float: none !important;
clear: none !important;
width: 24px !important;
height: 24px !important;
display: inline-block !important;
vertical-align: middle !important;
} @media (max-width: 768px) {
.wpuf-social-label-icon {
width: auto !important;
height: auto !important;
}
.wpuf-social-label-icon .wpuf-twitter-svg,
.wpuf-social-label-icon svg {
width: 24px !important;
height: 24px !important;
}
} .wpuf-label-with-icon .wpuf-social-label-icon {
line-height: 1 !important;
vertical-align: baseline !important;
display: inline !important;
}
.wpuf-label-with-icon .wpuf-social-label-icon svg {
vertical-align: text-bottom !important;
display: inline !important;
} li .wpuf-label-with-icon {
display: inline-flex !important;
align-items: center !important;
}
li .wpuf-label-with-icon .wpuf-social-label-icon {
display: inline !important;
vertical-align: middle !important;
margin-bottom: 10px !important;
}
li .wpuf-label-with-icon .wpuf-social-label-icon svg {
display: inline !important;
vertical-align: text-bottom !important;
width: 26px !important;
height: 26px !important;
} .wpuf-form-builder .wpuf-social-label-icon {
display: inline-flex !important;
align-items: center !important;
vertical-align: middle !important;
margin-left: 4px !important;
} #form-preview-stage .wpuf-social-label-icon {
display: inline-flex !important;
align-items: center !important;
vertical-align: middle !important;
margin-left: 4px !important;
}
#form-preview-stage .wpuf-social-label-icon .wpuf-twitter-svg {
width: 16px !important;
height: 16px !important;
display: inline-block !important;
vertical-align: middle !important;
} #form-preview-stage label .wpuf-social-label-icon {
display: inline-flex !important;
align-items: center !important;
vertical-align: middle !important;
margin-left: 4px !important;
}
#form-preview-stage label {
display: inline-flex !important;
align-items: center !important;
} .wpuf-form .wpuf-social-label-icon {
display: inline-flex !important;
align-items: center !important;
vertical-align: middle !important;
margin-left: 4px !important;
}