← All changes
|
includes/page-form-builder/_src/builder-form-page.css
+97
-108
11.4
→
11.8.4
View file →
| @@ -1,4 +1,4 @@ | ||
| 1 | 1 | /* ================================================================================================== */ |
| 2 | 2 | /* Booking Form Builder (BFB) – Page UI */ |
| 3 | 3 | /* Help: High-level page layout wrappers, container scaffolding, basic spacing */ |
| 4 | 4 | /* ================================================================================================== */ |
| @@ -70,28 +70,28 @@ | ||
| 70 | 70 | border: 0; |
| 71 | 71 | box-shadow: rgba(2, 12, 36, .06) 0 0 28px; |
| 72 | 72 | min-height: 35px; /* match controls min-height */ |
| 73 | 73 | } |
| 74 | -.wpbc_bfb__panel--preview h3 button { | |
| 75 | - cursor: pointer; | |
| 76 | -} | |
| 77 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 h3.wpbc_bfb__page_number, | |
| 78 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 h3.wpbc_bfb__page_number button, | |
| 79 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 h3.wpbc_bfb__page_number .menu_icon, | |
| 80 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 h3.wpbc_bfb__page_number *, | |
| 81 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls, | |
| 82 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls button, | |
| 83 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls .menu_icon, | |
| 84 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls .wpbc_bfb__drag-handle, | |
| 85 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls .wpbc_icn_drag_indicator, | |
| 86 | -.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls * { | |
| 87 | - color: #1d2327 !important; | |
| 88 | -} | |
| 89 | -/* Section container within a page (holds sections/columns) */ | |
| 90 | -.wpbc_bfb__form_preview_section_container:empty { | |
| 91 | - min-height: 100px; | |
| 92 | -} | |
| 74 | +.wpbc_bfb__panel--preview h3 button { | |
| 75 | + cursor: pointer; | |
| 76 | +} | |
| 77 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 h3.wpbc_bfb__page_number, | |
| 78 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 h3.wpbc_bfb__page_number button, | |
| 79 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 h3.wpbc_bfb__page_number .menu_icon, | |
| 80 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 h3.wpbc_bfb__page_number *, | |
| 81 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls, | |
| 82 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls button, | |
| 83 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls .menu_icon, | |
| 84 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls .wpbc_bfb__drag-handle, | |
| 85 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls .wpbc_icn_drag_indicator, | |
| 86 | +.wpbc_bfb__pages_panel div.wpbc_container.wpbc_form.wpbc_theme_dark_1 .wpbc_bfb__overlay-controls * { | |
| 87 | + color: #1d2327 !important; | |
| 88 | +} | |
| 89 | +/* Section container within a page (holds sections/columns) */ | |
| 93 | 90 | .wpbc_bfb__form_preview_section_container:empty { |
| 91 | + min-height: 100px; | |
| 92 | +} | |
| 93 | +.wpbc_bfb__form_preview_section_container:empty { | |
| 94 | 94 | display: flex; |
| 95 | 95 | flex-flow: column nowrap; |
| 96 | 96 | align-items: center; |
| 97 | 97 | justify-content: center; |
| @@ -718,9 +718,9 @@ | ||
| 718 | 718 | html:not(.wpbc_bfb__dnd-active) .wpbc_bfb__section.is-selected .wpbc_bfb__column.is-selected-column { |
| 719 | 719 | background: repeating-linear-gradient(-45deg,#3874e921 1px 2px,#fff 3px 5px); |
| 720 | 720 | } |
| 721 | 721 | html:not(.wpbc_bfb__dnd-active) .wpbc_theme_dark_1 .wpbc_bfb__section.is-selected .wpbc_bfb__column { |
| 722 | - background: repeating-linear-gradient(-45deg,#626262 1px 4px,#4c4c4c 5px 7px); | |
| 722 | + background: repeating-linear-gradient(-45deg,#383a3d 1px 4px,#4c4c4c 5px 7px); | |
| 723 | 723 | } |
| 724 | 724 | html:not(.wpbc_bfb__dnd-active) .wpbc_theme_dark_1 .wpbc_bfb__section.is-selected .wpbc_bfb__column.is-selected-column { |
| 725 | 725 | background: repeating-linear-gradient(-45deg,#3c3d73 1px 4px,#4c4c4c 5px 7px); |
| 726 | 726 | } |
| @@ -934,74 +934,74 @@ | ||
| 934 | 934 | .inspector__select { |
| 935 | 935 | line-height: 2.4; |
| 936 | 936 | width: 100%; |
| 937 | 937 | } |
| 938 | -.inspector__input--readonly { | |
| 939 | - background: #f6f7f7; | |
| 940 | - color: #6c7781; | |
| 941 | - cursor: not-allowed; | |
| 942 | -} | |
| 943 | - | |
| 944 | -.wpbc_bfb_style_choice_grid { | |
| 945 | - display: grid; | |
| 946 | - gap: 8px; | |
| 947 | - grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| 948 | -} | |
| 949 | - | |
| 950 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice { | |
| 951 | - align-items: flex-start; | |
| 952 | - background: #fff; | |
| 953 | - border: 1px solid #dfe4ea; | |
| 954 | - border-radius: 6px; | |
| 955 | - box-sizing: border-box; | |
| 956 | - cursor: pointer; | |
| 957 | - display: flex; | |
| 958 | - gap: 8px; | |
| 959 | - min-height: 54px; | |
| 960 | - padding: 9px; | |
| 961 | -} | |
| 962 | - | |
| 963 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice input { | |
| 964 | - height: 1px; | |
| 965 | - margin: 0; | |
| 966 | - opacity: 0; | |
| 967 | - position: absolute; | |
| 968 | - width: 1px; | |
| 969 | -} | |
| 970 | - | |
| 971 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice.is-selected, | |
| 972 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice:has(input:checked) { | |
| 973 | - border-color: var(--wpbc-bfb-accent-color, #327ab4); | |
| 974 | - box-shadow: 0 0 0 1px var(--wpbc-bfb-accent-color, #327ab4); | |
| 975 | -} | |
| 976 | - | |
| 977 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch { | |
| 978 | - border: 1px solid #cbd5e1; | |
| 979 | - border-radius: 6px; | |
| 980 | - box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.45); | |
| 981 | - flex: 0 0 auto; | |
| 982 | - height: 24px; | |
| 983 | - width: 24px; | |
| 984 | -} | |
| 985 | - | |
| 986 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_light_bordered { background: #fff; border-color: #aeb8c4; } | |
| 987 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_light_none { background: linear-gradient(135deg, #fff 0%, #fff 50%, #eef2f6 50%, #eef2f6 100%); border-color: transparent; box-shadow: inset 0 0 0 1px #d9e1ea; } | |
| 988 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_light_soft { background: #f8fafc; border-color: #d8dee6; } | |
| 989 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_dark_bordered { background: #111827; border-color: #334155; } | |
| 990 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_dark_none { background: linear-gradient(135deg, #111827 0%, #111827 50%, #334155 50%, #334155 100%); border-color: transparent; box-shadow: inset 0 0 0 1px #475569; } | |
| 991 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_dark_soft { background: #1f2937; border-color: #475569; } | |
| 992 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_custom { background: linear-gradient(135deg, #fff 0%, #fff 30%, #2271b1 30%, #2271b1 62%, #111827 62%, #111827 100%); border-color: #8aa6c3; } | |
| 993 | - | |
| 994 | -.wpbc_bfb_style_choice_grid .wpbc_theme_choice_label { | |
| 995 | - color: #1d2327; | |
| 996 | - font-size: 13px; | |
| 997 | - font-weight: 600; | |
| 998 | - line-height: 1.2; | |
| 999 | - overflow-wrap: anywhere; | |
| 1000 | -} | |
| 1001 | -.wpbc_bfb__inspector__empty { | |
| 1002 | - color: #a67345; | |
| 1003 | - font-size: 17px; | |
| 938 | +.inspector__input--readonly { | |
| 939 | + background: #f6f7f7; | |
| 940 | + color: #6c7781; | |
| 941 | + cursor: not-allowed; | |
| 942 | +} | |
| 943 | + | |
| 944 | +.wpbc_bfb_style_choice_grid { | |
| 945 | + display: grid; | |
| 946 | + gap: 8px; | |
| 947 | + grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| 948 | +} | |
| 949 | + | |
| 950 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice { | |
| 951 | + align-items: flex-start; | |
| 952 | + background: #fff; | |
| 953 | + border: 1px solid #dfe4ea; | |
| 954 | + border-radius: 6px; | |
| 955 | + box-sizing: border-box; | |
| 956 | + cursor: pointer; | |
| 957 | + display: flex; | |
| 958 | + gap: 8px; | |
| 959 | + min-height: 54px; | |
| 960 | + padding: 9px; | |
| 961 | +} | |
| 962 | + | |
| 963 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice input { | |
| 964 | + height: 1px; | |
| 965 | + margin: 0; | |
| 966 | + opacity: 0; | |
| 967 | + position: absolute; | |
| 968 | + width: 1px; | |
| 969 | +} | |
| 970 | + | |
| 971 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice.is-selected, | |
| 972 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice:has(input:checked) { | |
| 973 | + border-color: var(--wpbc-bfb-accent-color, #327ab4); | |
| 974 | + box-shadow: 0 0 0 1px var(--wpbc-bfb-accent-color, #327ab4); | |
| 975 | +} | |
| 976 | + | |
| 977 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch { | |
| 978 | + border: 1px solid #cbd5e1; | |
| 979 | + border-radius: 6px; | |
| 980 | + box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.45); | |
| 981 | + flex: 0 0 auto; | |
| 982 | + height: 24px; | |
| 983 | + width: 24px; | |
| 984 | +} | |
| 985 | + | |
| 986 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_light_bordered { background: #fff; border-color: #aeb8c4; } | |
| 987 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_light_none { background: linear-gradient(135deg, #fff 0%, #fff 50%, #eef2f6 50%, #eef2f6 100%); border-color: transparent; box-shadow: inset 0 0 0 1px #d9e1ea; } | |
| 988 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_light_soft { background: #f8fafc; border-color: #d8dee6; } | |
| 989 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_dark_bordered { background: #111827; border-color: #334155; } | |
| 990 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_dark_none { background: linear-gradient(135deg, #111827 0%, #111827 50%, #334155 50%, #334155 100%); border-color: transparent; box-shadow: inset 0 0 0 1px #475569; } | |
| 991 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_dark_soft { background: #1f2937; border-color: #475569; } | |
| 992 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice_swatch_custom { background: linear-gradient(135deg, #fff 0%, #fff 30%, #2271b1 30%, #2271b1 62%, #111827 62%, #111827 100%); border-color: #8aa6c3; } | |
| 993 | + | |
| 994 | +.wpbc_bfb_style_choice_grid .wpbc_theme_choice_label { | |
| 995 | + color: #1d2327; | |
| 996 | + font-size: 13px; | |
| 997 | + font-weight: 600; | |
| 998 | + line-height: 1.2; | |
| 999 | + overflow-wrap: anywhere; | |
| 1000 | +} | |
| 1001 | +.wpbc_bfb__inspector__empty { | |
| 1002 | + color: #a67345; | |
| 1003 | + font-size: 17px; | |
| 1004 | 1004 | padding: 6px; |
| 1005 | 1005 | display: flex; |
| 1006 | 1006 | flex-flow: column; |
| 1007 | 1007 | justify-content: center; |
| @@ -1009,29 +1009,8 @@ | ||
| 1009 | 1009 | align-self: stretch; |
| 1010 | 1010 | min-height: 50px; |
| 1011 | 1011 | font-weight: 600; |
| 1012 | 1012 | } |
| 1013 | -/* Sizes*/ | |
| 1014 | -.inspector__row .inspector__w_10 { flex-basis: 10%; } | |
| 1015 | -.inspector__row .inspector__w_20 { flex-basis: 20%; } | |
| 1016 | -.inspector__row .inspector__w_30 { flex-basis: 30%; } | |
| 1017 | -.inspector__row .inspector__w_40 { flex-basis: 40%; } | |
| 1018 | -.inspector__row .inspector__w_50 { flex-basis: 50%; } | |
| 1019 | -.inspector__row .inspector__w_60 { flex-basis: 60%; } | |
| 1020 | -.inspector__row .inspector__w_70 { flex-basis: 70%; } | |
| 1021 | -.inspector__row .inspector__w_80 { flex-basis: 80%; } | |
| 1022 | -.inspector__row .inspector__w_90 { flex-basis: 90%; } | |
| 1023 | -.inspector__row .inspector__w_100 { flex-basis: 100%; } | |
| 1024 | -.inspector__row .inspector__w_05 { flex-basis: 5%; } | |
| 1025 | -.inspector__row .inspector__w_15 { flex-basis: 15%; } | |
| 1026 | -.inspector__row .inspector__w_25 { flex-basis: 25%; } | |
| 1027 | -.inspector__row .inspector__w_35 { flex-basis: 35%; } | |
| 1028 | -.inspector__row .inspector__w_45 { flex-basis: 45%; } | |
| 1029 | -.inspector__row .inspector__w_55 { flex-basis: 55%; } | |
| 1030 | -.inspector__row .inspector__w_65 { flex-basis: 65%; } | |
| 1031 | -.inspector__row .inspector__w_75 { flex-basis: 75%; } | |
| 1032 | -.inspector__row .inspector__w_85 { flex-basis: 85%; } | |
| 1033 | -.inspector__row .inspector__w_95 { flex-basis: 95%; } | |
| 1034 | 1013 | |
| 1035 | 1014 | .inspector__row .wpbc_inline_inputs { |
| 1036 | 1015 | display: flex; |
| 1037 | 1016 | flex-flow: row nowrap; |
| @@ -1415,8 +1394,11 @@ | ||
| 1415 | 1394 | font-size: 10px; |
| 1416 | 1395 | font-weight: 400; |
| 1417 | 1396 | margin-inline-start: 1em; |
| 1418 | 1397 | align-items: center; |
| 1398 | + white-space: nowrap; | |
| 1399 | + max-width: 20em; | |
| 1400 | + overflow: hidden; | |
| 1419 | 1401 | } |
| 1420 | 1402 | .wpbc_bfb__live_status__builder { color: #619d40; } |
| 1421 | 1403 | .wpbc_bfb__live_status__advanced { color: #b97131; } |
| 1422 | 1404 | /* == Top Toolbar - Form Name|Title. ============================================================================== */ |
| @@ -1692,9 +1674,10 @@ | ||
| 1692 | 1674 | height: 50px; |
| 1693 | 1675 | object-fit: cover; |
| 1694 | 1676 | border-radius: 3px; |
| 1695 | 1677 | border: 0; |
| 1696 | - background: #fff | |
| 1678 | + background: #fff; | |
| 1679 | + object-position: 0% 30%; | |
| 1697 | 1680 | } |
| 1698 | 1681 | .wpbc_bfb__load_form_item_text { |
| 1699 | 1682 | flex: 1 1 auto; |
| 1700 | 1683 | min-width: 0; |
| @@ -1892,4 +1875,10 @@ | ||
| 1892 | 1875 | min-height: 350px; |
| 1893 | 1876 | font-family: monospace; |
| 1894 | 1877 | font-size: 12px; |
| 1895 | 1878 | } |
| 1879 | + | |
| 1880 | +/* Prevent showing some messages in the WP Booking Calendar > Settings > Forms Builder page: */ | |
| 1881 | +.wpbc_admin_page__tab__builder_booking_form .wpbc_header_news, | |
| 1882 | +.wpbc_admin_page__tab__builder_booking_form div.wpbc_inner_message.wpbc_booking_modes_quickstart_notice { | |
| 1883 | + display:none; | |
| 1884 | +} | |