| @@ -202,8 +202,86 @@ | ||
| 202 | 202 | .styling_settings .frm_image_preview_wrapper .frm_choose_image_box { |
| 203 | 203 | margin-left: 0; |
| 204 | 204 | } |
| 205 | 205 | |
| 206 | +/* Color picker CSS */ | |
| 207 | +#frm_style_sidebar .wp-picker-open + .wp-picker-input-wrap { | |
| 208 | + position: absolute; | |
| 209 | + margin-left: calc( ( 100% - 35px ) * -1 ); | |
| 210 | + margin-top: 1px; | |
| 211 | + width: calc( 100% - 36px ); | |
| 212 | +} | |
| 213 | + | |
| 214 | +#frm_style_sidebar .wp-picker-container input[type="text"].wp-color-picker { | |
| 215 | + border: none; | |
| 216 | + padding: 5px 8px; | |
| 217 | + font-family: inherit; | |
| 218 | + color: var(--grey-700); | |
| 219 | + font-size: var(--text-md); | |
| 220 | + width: 100%; | |
| 221 | + line-height: var(--leading); | |
| 222 | +} | |
| 223 | + | |
| 224 | +#frm_style_sidebar .wp-picker-input-wrap .wp-picker-clear { | |
| 225 | + display: none !important; | |
| 226 | +} | |
| 227 | + | |
| 228 | +#frm_style_sidebar .wp-picker-holder { | |
| 229 | + position: absolute; | |
| 230 | + z-index: 999; | |
| 231 | +} | |
| 232 | + | |
| 233 | +#frm_style_sidebar .wp-picker-input-wrap label { | |
| 234 | + margin-bottom: 0; | |
| 235 | +} | |
| 236 | + | |
| 237 | +#frm_style_sidebar .wp-picker-container .wp-color-result.button { | |
| 238 | + width: 100%; | |
| 239 | + overflow: hidden; | |
| 240 | + margin: 0 !important; | |
| 241 | + height: var(--h-md) !important; | |
| 242 | + padding: 0 0 0 var(--gap-lg) !important; | |
| 243 | + border-radius: var(--small-radius); | |
| 244 | + border-color: var(--grey-300); | |
| 245 | +} | |
| 246 | + | |
| 247 | +#frm_style_sidebar .wp-color-result-text { | |
| 248 | + line-height: var(--leading) !important; | |
| 249 | + font-size: var(--text-md); | |
| 250 | + background: #fff !important; | |
| 251 | + color: var(--grey-900); | |
| 252 | + padding: 5px 8px; | |
| 253 | + border-color: var(--grey-300); | |
| 254 | + text-align: left; | |
| 255 | +} | |
| 256 | + | |
| 257 | +#frm_style_sidebar .color-alpha { | |
| 258 | + width: var(--gap-lg) !important; | |
| 259 | +} | |
| 260 | + | |
| 261 | +.frm_grid_container .wp-picker-container { | |
| 262 | + width: 100%; | |
| 263 | + position: relative; | |
| 264 | +} | |
| 265 | + | |
| 266 | +.wp-picker-container button.wp-color-result { | |
| 267 | + border: 1px solid var(--grey-300) !important; | |
| 268 | +} | |
| 269 | + | |
| 270 | +.wp-picker-container .wp-picker-input-wrap input.hex.wp-color-picker { | |
| 271 | + max-width: 100%; | |
| 272 | + position: relative; | |
| 273 | +} | |
| 274 | + | |
| 275 | +.frm_end .wp-picker-holder { | |
| 276 | + margin-left: -145px; | |
| 277 | +} | |
| 278 | + | |
| 279 | +.frm_end.frm6 .wp-picker-holder { | |
| 280 | + margin-left: -86px; | |
| 281 | +} | |
| 282 | +/* End of color picker CSS */ | |
| 283 | + | |
| 206 | 284 | .ui-datepicker-inline.ui-datepicker { |
| 207 | 285 | max-width: 19em; |
| 208 | 286 | } |
| 209 | 287 | |
| @@ -341,9 +419,8 @@ | ||
| 341 | 419 | .frm-input-style-example { |
| 342 | 420 | border-width: var(--field-border-width); |
| 343 | 421 | border-style: var(--field-border-style); |
| 344 | 422 | border-color: var(--border-color); |
| 345 | - border-radius: var(--border-radius); | |
| 346 | 423 | background-color: var(--bg-color); |
| 347 | 424 | max-width: 138px; |
| 348 | 425 | width: 100%; |
| 349 | 426 | height: 16px; |
