| @@ -1,8 +1,11 @@ | ||
| 1 | -/*! = Left Vertical Navigation Bar = */ | |
| 1 | +/* ------------------------------------------------------------------------------------------------------------------ */ | |
| 2 | +/*! = " == F U L L == " - Left Vertical Navigation Bar = */ | |
| 3 | +/* ------------------------------------------------------------------------------------------------------------------ */ | |
| 2 | 4 | .wpbc_admin { |
| 5 | + /* --wpbc_ui_left_vert_nav__width_min: 5px; */ | |
| 3 | 6 | --wpbc_ui_left_vert_nav__width_min: 10px; |
| 4 | - --wpbc_ui_left_vert_nav__width_compact: 48px; | |
| 7 | + --wpbc_ui_left_vert_nav__width_compact: 80px; | |
| 5 | 8 | --wpbc_ui_left_vert_nav__width_max: 250px; |
| 6 | 9 | |
| 7 | 10 | --wpbc_ui_left_vert_nav__margin: 0; |
| 8 | 11 | --wpbc_ui_left_vert_nav__background-color: var(--wpbc_ui__gen__panel_background-color); |
| @@ -13,9 +16,30 @@ | ||
| 13 | 16 | --wpbc_ui_left_vert_nav__active_background-color: var(--wpbc_ui__gen__active-background-color); |
| 14 | 17 | /* Hover */ |
| 15 | 18 | /*--wpbc_ui_left_vert_nav__hover_color: var(--wpbc_ui__gen__hover-color);*/ |
| 16 | 19 | --wpbc_ui_left_vert_nav__hover_background-color: #4651601c; /*var(--wpbc_ui__gen__panel_background-color);*/ |
| 20 | + /* Height of footer in this Vertical Menu */ | |
| 21 | + --wpbc_ui_vert_left_bar__footer_height: 55px; | |
| 17 | 22 | } |
| 23 | +/* ------------------------------------------------------------------------------------------------------------------ */ | |
| 24 | +/* Define " == F U L L == " - Right Sidebar "Custom Width" in a such way */ | |
| 25 | +/* ------------------------------------------------------------------------------------------------------------------ */ | |
| 26 | +.wpbc_admin .wpbc_ui_el__vert_right_bar__wrapper{ | |
| 27 | + --wpbc_ui_left_vert_nav__width_min: 0; | |
| 28 | + --wpbc_ui_left_vert_nav__width_compact: 48px; | |
| 29 | + --wpbc_ui_left_vert_nav__width_max: Min( 290px, 100% ); | |
| 30 | + /*--wpbc_ui_left_vert_nav__width_max: Min( 750px, 100% );*/ | |
| 31 | +} | |
| 32 | +/* ------------------------------------------------------------------------------------------------------------------ */ | |
| 33 | +/* Define " == C O M P A C T == " - Right Sidebar "Custom Width" in a such way */ | |
| 34 | +/* ------------------------------------------------------------------------------------------------------------------ */ | |
| 35 | +.wpbc_admin .wpbc_ui_el__vert_right_bar__wrapper.wpbc_ui_el__vert_right_bar_compact__wrapper{ | |
| 36 | + --wpbc_ui_left_vert_nav__width_min: 0; | |
| 37 | + --wpbc_ui_left_vert_nav__width_compact: 48px; | |
| 38 | + --wpbc_ui_left_vert_nav__width_max: Min( 70px, 100% ); | |
| 39 | +} | |
| 40 | +/* ------------------------------------------------------------------------------------------------------------------ */ | |
| 41 | +.wpbc_ui_el__vert_right_bar__wrapper, | |
| 18 | 42 | .wpbc_ui_el__vert_left_bar__wrapper { |
| 19 | 43 | display: flex; |
| 20 | 44 | flex-flow: column nowrap; |
| 21 | 45 | justify-content: stretch; |
| @@ -28,9 +52,9 @@ | ||
| 28 | 52 | border: 0; |
| 29 | 53 | box-shadow: var(--wpbc_ui__gen__panel_box-shadow); |
| 30 | 54 | transition: all .25s ease-in-out; |
| 31 | 55 | font-size: var(--wpbc_ui_left_vert_nav__font-size); |
| 32 | - border-radius: 0 0 6px; | |
| 56 | + border-radius: 0 0 3px; | |
| 33 | 57 | padding: 0; |
| 34 | 58 | margin: var(--wpbc_ui_left_vert_nav__margin); |
| 35 | 59 | |
| 36 | 60 | overflow-y: auto; |
| @@ -35,23 +59,28 @@ | ||
| 35 | 59 | |
| 36 | 60 | overflow-y: auto; |
| 37 | 61 | scrollbar-width: thin; |
| 38 | 62 | overflow-x: hidden; |
| 63 | + overflow: visible; /* FixIn: 10.12.1.2. */ | |
| 39 | 64 | } |
| 40 | 65 | |
| 41 | 66 | /* == Responsive Sizes: < 600px (less top icons), < 782px (no wp left bar), < 960px (wp left bar colapse) =========== */ |
| 42 | 67 | /* By default -- Left Bar Colapsed */ |
| 68 | +.wpbc_ui_el__vert_right_bar__wrapper, | |
| 43 | 69 | .wpbc_ui_el__vert_left_bar__wrapper { |
| 44 | 70 | max-width: var(--wpbc_ui_left_vert_nav__width_min); |
| 45 | 71 | } |
| 72 | +.wpbc_ui_el__vert_right_bar__content, | |
| 46 | 73 | .wpbc_ui_el__vert_left_bar__content { |
| 47 | 74 | display: none; |
| 48 | 75 | } |
| 49 | 76 | /* More than > 782px -- Left Bar Expanded */ |
| 50 | 77 | @media screen and (min-width: 782px) { |
| 78 | + .wpbc_ui_el__vert_right_bar__wrapper, | |
| 51 | 79 | .wpbc_ui_el__vert_left_bar__wrapper { |
| 52 | 80 | max-width: var(--wpbc_ui_left_vert_nav__width_max); |
| 53 | 81 | } |
| 82 | + .wpbc_ui_el__vert_right_bar__content, | |
| 54 | 83 | .wpbc_ui_el__vert_left_bar__content { |
| 55 | 84 | display: block; |
| 56 | 85 | } |
| 57 | 86 | } |
| @@ -56,69 +85,243 @@ | ||
| 56 | 85 | } |
| 57 | 86 | } |
| 58 | 87 | /* -- Sizes --------------------------------------------------------------------------------------------------------- */ |
| 59 | 88 | /* == M I N == */ |
| 89 | +.wpbc_settings_page_wrapper.none_right .wpbc_ui_el__vert_right_bar__wrapper, | |
| 60 | 90 | .wpbc_settings_page_wrapper.none .wpbc_ui_el__vert_left_bar__wrapper { |
| 61 | 91 | max-width: 0px; |
| 62 | 92 | } |
| 93 | + .wpbc_settings_page_wrapper.none_right .wpbc_ui_el__vert_right_bar__content, | |
| 63 | 94 | .wpbc_settings_page_wrapper.none .wpbc_ui_el__vert_left_bar__content { |
| 64 | 95 | display: none; |
| 65 | 96 | } |
| 66 | - div.wpbc_settings_page_wrapper.none .hide_in_compact_mode { | |
| 97 | + div.wpbc_settings_page_wrapper.none .hide_in_compact_mode { | |
| 67 | 98 | display: none; |
| 68 | 99 | } |
| 69 | 100 | /* == M I N == */ |
| 70 | -.wpbc_settings_page_wrapper.min .wpbc_ui_el__vert_left_bar__wrapper { | |
| 101 | +/* // FixIn: 10.11.5.8. */ | |
| 102 | +.wpbc_settings_page_wrapper:not(.compact_right) .hide_in_max_mode_right, | |
| 103 | +.wpbc_settings_page_wrapper:not(.compact) .hide_in_max_mode{ | |
| 104 | + display: none; | |
| 105 | +} | |
| 106 | +.wpbc_settings_page_wrapper.min_right .wpbc_ui_el__vert_right_bar__wrapper, | |
| 107 | +.wpbc_settings_page_wrapper.min .wpbc_ui_el__vert_left_bar__wrapper { | |
| 71 | 108 | max-width: var(--wpbc_ui_left_vert_nav__width_min); |
| 72 | 109 | } |
| 73 | - .wpbc_settings_page_wrapper.min .wpbc_ui_el__vert_left_bar__content { | |
| 110 | + .wpbc_settings_page_wrapper.min_right .wpbc_ui_el__vert_right_bar__content, | |
| 111 | + .wpbc_settings_page_wrapper.min .wpbc_ui_el__vert_left_bar__content { | |
| 74 | 112 | display: none; |
| 75 | 113 | } |
| 76 | - div.wpbc_settings_page_wrapper.min .hide_in_compact_mode { | |
| 114 | + div.wpbc_settings_page_wrapper.min .hide_in_compact_mode { | |
| 77 | 115 | display: none; |
| 78 | 116 | } |
| 79 | 117 | /* == COMPACT == */ |
| 80 | -.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper { | |
| 118 | +.wpbc_settings_page_wrapper.compact_right .wpbc_ui_el__vert_right_bar__wrapper, | |
| 119 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper { | |
| 81 | 120 | max-width: var(--wpbc_ui_left_vert_nav__width_compact); |
| 82 | 121 | } |
| 83 | - .wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__content { | |
| 122 | + .wpbc_settings_page_wrapper.compact_right .wpbc_ui_el__vert_right_bar__content, | |
| 123 | + .wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__content { | |
| 84 | 124 | display: block; |
| 85 | 125 | } |
| 86 | - div.wpbc_settings_page_wrapper.compact .hide_in_compact_mode { | |
| 126 | + div.wpbc_settings_page_wrapper.compact .hide_in_compact_mode { | |
| 87 | 127 | display: none; |
| 88 | 128 | } |
| 129 | + /* // FixIn: 10.11.5.8. */ | |
| 130 | + div.wpbc_settings_page_wrapper.compact_right .hide_in_max_mode_right, | |
| 131 | + div.wpbc_settings_page_wrapper.compact .hide_in_max_mode { | |
| 132 | + display: block; | |
| 133 | + } | |
| 89 | 134 | /* == M A X == */ |
| 90 | -.wpbc_settings_page_wrapper.max .wpbc_ui_el__vert_left_bar__wrapper { | |
| 135 | +.wpbc_settings_page_wrapper.max_right .wpbc_ui_el__vert_right_bar__wrapper, | |
| 136 | +.wpbc_settings_page_wrapper.max .wpbc_ui_el__vert_left_bar__wrapper { | |
| 91 | 137 | max-width: var(--wpbc_ui_left_vert_nav__width_max); |
| 92 | 138 | } |
| 93 | - .wpbc_settings_page_wrapper.max .wpbc_ui_el__vert_left_bar__content { | |
| 139 | + .wpbc_settings_page_wrapper.max_right .wpbc_ui_el__vert_right_bar__content, | |
| 140 | + .wpbc_settings_page_wrapper.max .wpbc_ui_el__vert_left_bar__content { | |
| 94 | 141 | display: block; |
| 95 | 142 | } |
| 96 | - .wpbc_settings_page_wrapper.max .hide_in_compact_mode { | |
| 143 | + .wpbc_settings_page_wrapper.max .hide_in_compact_mode { | |
| 97 | 144 | display: block; |
| 98 | 145 | } |
| 99 | 146 | |
| 100 | 147 | /* Make compact size, on hover of minimized panel*/ |
| 101 | -.wpbc_settings_page_wrapper.min .wpbc_ui_el__vert_left_bar__wrapper:hover { max-width: calc( var(--wpbc_ui_left_vert_nav__width_min) + 15px ); } | |
| 148 | +.wpbc_settings_page_wrapper.min_right .wpbc_ui_el__vert_right_bar__wrapper000:hover, | |
| 149 | +.wpbc_settings_page_wrapper.min .wpbc_ui_el__vert_left_bar__wrapper000:hover { max-width: calc( var(--wpbc_ui_left_vert_nav__width_min) + 15px ); } | |
| 102 | 150 | /* -- End Sizes ----------------------------------------------------------------------------------------------------- */ |
| 103 | 151 | /* Navigation elements */ |
| 104 | -.wpbc_ui_el__vert_left_bar__content{ | |
| 152 | +/* Mark vertical menu sticky. // FixIn: 10.12.1.2. */ | |
| 153 | +.wpbc_ui_el__vert_right_bar__content, | |
| 154 | +.wpbc_ui_el__vert_left_bar__content { | |
| 155 | + position: sticky; | |
| 156 | + top: calc(var(--wpbc_ui_top_nav__wp_top_menu_height) + var(--wpbc_ui_top_nav__height)); | |
| 157 | + max-height: calc(100vh - var(--wpbc_ui_top_nav__wp_top_menu_height) - var(--wpbc_ui_top_nav__height) - 2px); | |
| 158 | + overflow-y: auto; | |
| 159 | + overflow-x: hidden; | |
| 160 | + scrollbar-width: none; | |
| 161 | + scrollbar-gutter: initial; | |
| 162 | + scrollbar-color: rgba(0, 0, 0, 0.15) transparent; | |
| 163 | +} | |
| 164 | +.wpbc_ui_el__vert_right_bar__content:hover, | |
| 165 | +.wpbc_ui_el__vert_left_bar__content:hover { | |
| 166 | + scrollbar-width: thin; | |
| 167 | +} | |
| 168 | +/* Show scrollbar for mobile devices by default */ | |
| 169 | +@media screen and (max-width: 960px) { | |
| 170 | + .wpbc_ui_el__vert_right_bar__content, | |
| 171 | + .wpbc_ui_el__vert_left_bar__content { | |
| 172 | + scrollbar-width: thin; | |
| 173 | + scrollbar-gutter: stable; | |
| 174 | + } | |
| 175 | +} | |
| 176 | + /* Nof Fixed position for mobile */ | |
| 177 | + @media screen and (max-width: 600px) { | |
| 178 | + .wpbc_ui_el__vert_right_bar__content0, | |
| 179 | + .wpbc_ui_el__vert_left_bar__content0 { | |
| 180 | + position: static; | |
| 181 | + max-height: 100%; /* // FixIn: 10.12.2.2. */ | |
| 182 | + } | |
| 183 | + .wpbc_admin { | |
| 184 | + --wpbc_ui_left_vert_nav__width_min: 0px; | |
| 185 | + } | |
| 186 | + } | |
| 187 | +/* Hide scrollbacr in compact mode, but still scroll. // FixIn: 10.12.1.2. */ | |
| 188 | +.wpbc_settings_page_wrapper.compact_right .wpbc_ui_el__vert_right_bar__content, | |
| 189 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__content{ | |
| 190 | + scrollbar-width: none; | |
| 191 | +} | |
| 105 | 192 | |
| 193 | +/* === data-simplebar -- Scrolable JS =============================================================================== // FixIn: 10.12.2.3. */ | |
| 194 | +[data-simplebar].wpbc_ui_el__vert_right_bar__content, | |
| 195 | +[data-simplebar].wpbc_ui_el__vert_left_bar__content { | |
| 196 | + position: sticky; | |
| 197 | + top: calc(var(--wpbc_ui_top_nav__wp_top_menu_height) + var(--wpbc_ui_top_nav__height)); | |
| 198 | + /* 100vh - WP top menu - Plugin top menu - border (probably 0) - Vert.Menu Footer */ | |
| 199 | + height: calc( 100vh - var(--wpbc_ui_top_nav__wp_top_menu_height) - var(--wpbc_ui_top_nav__height) - 4px - var(--wpbc_ui_vert_left_bar__footer_height) ); | |
| 106 | 200 | } |
| 201 | +/* It is padding of WP Admin Footer page, e.g. #wpbody-content { ... } in common.css. This padding required here, for ability to scroll to last element in case we scrolled WINDOW to bottom of admin page. */ | |
| 202 | +.wpbc_ui_el__vert_right_bar__footer_compensator, | |
| 203 | +.wpbc_ui_el__vert_left_bar__footer_compensator { | |
| 204 | + height:65px; | |
| 205 | + background: transparent; | |
| 206 | +} | |
| 207 | +[data-simplebar].wpbc_ui_el__vert_right_bar__content .simplebar-scrollbar::before, | |
| 208 | +[data-simplebar].wpbc_ui_el__vert_left_bar__content .simplebar-scrollbar::before { | |
| 209 | + background-color: #091a31; | |
| 210 | + background-color: #a7b1bf; | |
| 211 | + /*opacity: 0.5;*/ | |
| 212 | +} | |
| 213 | +[data-simplebar].wpbc_ui_el__vert_right_bar__content.simplebar-scrollable-y, | |
| 214 | +[data-simplebar].wpbc_ui_el__vert_left_bar__content.simplebar-scrollable-y { | |
| 215 | + padding-inline-end: 11px; /* Default Width of the scrollbar/simplebar */ | |
| 216 | +} | |
| 217 | +/* In compact mode set scroll smaller. Inbstead of 11 set 7px */ | |
| 218 | +.wpbc_settings_page_wrapper.compact_right .wpbc_ui_el__vert_right_bar__content.simplebar-scrollable-y .simplebar-track.simplebar-vertical, | |
| 219 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__content.simplebar-scrollable-y .simplebar-track.simplebar-vertical { | |
| 220 | + width: 7px; | |
| 221 | +} | |
| 222 | +.wpbc_settings_page_wrapper.compact_right [data-simplebar].wpbc_ui_el__vert_right_bar__content.simplebar-scrollable-y, | |
| 223 | +.wpbc_settings_page_wrapper.compact [data-simplebar].wpbc_ui_el__vert_left_bar__content.simplebar-scrollable-y { | |
| 224 | + padding-inline-end: 7px; /* Default Width of the scrollbar/simplebar */ | |
| 225 | +} | |
| 226 | +@media screen and (max-width: 600px) { | |
| 227 | + [data-simplebar].wpbc_ui_el__vert_right_bar__content, | |
| 228 | + [data-simplebar].wpbc_ui_el__vert_left_bar__content { | |
| 229 | + top: 0; | |
| 230 | + /* 100vh - WP top menu - Plugin top menu - border (probably 0) - Vert.Menu Footer */ | |
| 231 | + height: calc( 100vh - 0px - var(--wpbc_ui_top_nav__height) - 4px - var(--wpbc_ui_vert_left_bar__footer_height) ); | |
| 232 | + } | |
| 233 | + .wpbc_settings_page_wrapper.max_right .wpbc_ui_el__vert_right_bar__wrapper, | |
| 234 | + .wpbc_settings_page_wrapper.max .wpbc_ui_el__vert_left_bar__wrapper { | |
| 235 | + max-width: calc(100% - 25px); /* - 25px it is sidebar button ( expand / colapse ) width */ | |
| 236 | + flex: 1 1 100%; | |
| 237 | + } | |
| 238 | + /* Hide icons and roate text on compact toolbar in mobile mode */ | |
| 239 | + .wpbc_settings_page_wrapper.max_right .wpbc_ui_el__vert_right_bar__wrapper.wpbc_ui_el__vert_right_bar_compact__wrapper { | |
| 240 | + flex: 0 0 40px; | |
| 241 | + min-width: 40px; | |
| 242 | + width: 40px; | |
| 243 | + max-width: 40px; | |
| 244 | + overflow:hidden; | |
| 245 | + } | |
| 246 | + .wpbc_settings_page_wrapper.max_right .wpbc_ui_el__vert_right_bar__wrapper.wpbc_ui_el__vert_right_bar_compact__wrapper .wpbc_ui_el__vert_nav_item .wpbc_ui_el__vert_nav_icon { | |
| 247 | + display: none; | |
| 248 | + } | |
| 249 | + .wpbc_settings_page_wrapper.max_right .wpbc_ui_el__vert_right_bar__wrapper.wpbc_ui_el__vert_right_bar_compact__wrapper .wpbc_ui_el__vert_nav_item { | |
| 250 | + writing-mode: vertical-lr; | |
| 251 | + } | |
| 252 | + .wpbc_settings_page_wrapper.max_right .wpbc_ui_el__vert_right_bar__wrapper.wpbc_ui_el__vert_right_bar_compact__wrapper .wpbc_ui_el__vert_nav_item .wpbc_ui_el__vert_nav_item__a { | |
| 253 | + padding: 20px; | |
| 254 | + } | |
| 255 | + /* Hide content, if opened left menu in mobile mode */ | |
| 256 | + .wpbc_settings_page_wrapper.max .wpbc_settings_page_content .wpbc_page { | |
| 257 | + display: none; | |
| 258 | + } | |
| 259 | + .wpbc_settings_page_wrapper.max .wpbc_settings_page_content { | |
| 260 | + height: 100vh; | |
| 261 | + } | |
| 262 | + #wpbody-content:has(.wpbc_settings_page_wrapper.max) { | |
| 263 | + padding-bottom: 0px; | |
| 264 | + } | |
| 265 | +} | |
| 266 | +/* Footer section */ | |
| 267 | +.wpbc_ui_el__vert_right_bar__footer_section, | |
| 268 | +.wpbc_ui_el__vert_left_bar__footer_section { | |
| 269 | + height: var(--wpbc_ui_vert_left_bar__footer_height, 75px); | |
| 270 | + | |
| 271 | + position: sticky; | |
| 272 | + bottom: 0; | |
| 273 | + width: 100%; | |
| 274 | + top: calc(100% - var(--wpbc_ui_vert_left_bar__footer_height)); | |
| 275 | + | |
| 276 | + overflow:hidden; | |
| 277 | + | |
| 278 | + display: flex; | |
| 279 | + flex-flow: row wrap; | |
| 280 | + justify-content: space-around; | |
| 281 | + align-items: center; | |
| 282 | + | |
| 283 | + font-size: 14px; | |
| 284 | + font-weight: 600; | |
| 285 | + border-top: #f1f1f1 2px solid; | |
| 286 | + background: var(--wpbc_ui_left_vert_nav__background-color); | |
| 287 | +} | |
| 288 | +.wpbc_ui_el_upgrade_button { | |
| 289 | + font-weight: 600; | |
| 290 | + background-color: #0a0; | |
| 291 | + color: #fff; | |
| 292 | + padding: 8px 25px; | |
| 293 | + display: block; | |
| 294 | + text-align: center; | |
| 295 | + border-radius: 3px; | |
| 296 | + transition: all .3s; | |
| 297 | + box-shadow: 0 5px 10px #dfdfdf; | |
| 298 | + cursor: pointer; | |
| 299 | + border: 2px solid #cacacab5; | |
| 300 | + line-height: 1; | |
| 301 | + text-decoration: none; | |
| 302 | + outline: 0; | |
| 303 | +} | |
| 304 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el_upgrade_button{ | |
| 305 | + padding: 8px 8px; | |
| 306 | +} | |
| 307 | +/* === End: data-simplebar -- Scrolable JS ========================================================================== */ | |
| 308 | + | |
| 107 | 309 | .wpbc_ui_el__vert_nav_item{ |
| 108 | 310 | |
| 109 | 311 | } |
| 110 | 312 | |
| 111 | 313 | /* A */ |
| 112 | -.wpbc_ui_el__vert_nav_item a { | |
| 314 | +.wpbc_ui_el__vert_nav_item a, | |
| 315 | +.wpbc_ui_el__vert_nav_item button{ | |
| 113 | 316 | flex: 1 1 100%; |
| 114 | - margin: 2px 0px 2px 7px; | |
| 115 | - padding: 9px 8px; | |
| 317 | + margin: 0 0 0 3px; | |
| 318 | + padding: 8px 5px 8px 12px; | |
| 116 | 319 | border: none; |
| 117 | 320 | border-radius: var(--wpbc_ui__gen__border-radius) 0 0 var(--wpbc_ui__gen__border-radius); |
| 118 | 321 | text-shadow: none; |
| 119 | 322 | font-size: var(--wpbc_ui_left_vert_nav__font-size); |
| 120 | - font-weight: 600; | |
| 323 | + font-weight: 400; | |
| 121 | 324 | text-transform: capitalize; |
| 122 | 325 | text-decoration: none; |
| 123 | 326 | outline: none; |
| 124 | 327 | color: var(--wpbc_ui_left_vert_nav__a_color); |
| @@ -126,13 +329,36 @@ | ||
| 126 | 329 | display: flex; |
| 127 | 330 | flex-flow: row; |
| 128 | 331 | justify-content: flex-start; |
| 129 | 332 | align-items: center; |
| 333 | + gap: 8px; | |
| 334 | + | |
| 335 | + /* 2025-08-08 */ | |
| 336 | + font-weight: 500; | |
| 337 | + font-size: 12px; | |
| 338 | + letter-spacing: 0.1px; | |
| 339 | + margin: 0 0 0px 3px; | |
| 340 | + padding: 8px 5px 8px 12px; | |
| 341 | + cursor:pointer; | |
| 130 | 342 | } |
| 343 | +.wpbc_ui_el__vert_nav_item a .wpbc_ui_el__vert_nav_icon_expanded, | |
| 344 | +.wpbc_ui_el__vert_nav_item a .wpbc_ui_el__vert_nav_icon_collapsed, | |
| 345 | +.wpbc_ui_el__vert_nav_item a .wpbc-bi-question-circle { | |
| 346 | + font-size: 10px; | |
| 347 | +} | |
| 348 | +.wpbc_ui_el__vert_nav_item__uninstall a { | |
| 349 | + /*color: #d63638;*/ | |
| 350 | +} | |
| 351 | +.wpbc_ui_el__vert_nav_item button:not(:hover){ | |
| 352 | + background-color: transparent; | |
| 353 | +} | |
| 131 | 354 | /* Sub item */ |
| 132 | -.wpbc_ui_el__vert_nav_item_sub.wpbc_ui_el__vert_nav_item a{ | |
| 133 | - margin: 2px -0.2px 2px 40px; | |
| 134 | - padding: 7px 8px 7px 10px; | |
| 355 | +.wpbc_ui_el__vert_nav_item_sub.wpbc_ui_el__vert_nav_item a, | |
| 356 | +.wpbc_ui_el__vert_nav_item_sub.wpbc_ui_el__vert_nav_item button { | |
| 357 | + margin: 0 -0.2px 0 20px; | |
| 358 | + padding: 7px 7px 7px 10px; | |
| 359 | + border-left: 1px solid #ccc; | |
| 360 | + border-radius: 0; | |
| 135 | 361 | } |
| 136 | 362 | .wpbc_ui_el__vert_nav_item_sub.wpbc_ui_el__vert_nav_item.sub_right a{ |
| 137 | 363 | margin-left: 50px; |
| 138 | 364 | } |
| @@ -140,14 +366,18 @@ | ||
| 140 | 366 | .wpbc_ui_el__vert_nav_item_sub.wpbc_ui_el__vert_nav_item.sub_bold .wpbc_ui_el__vert_nav_title { |
| 141 | 367 | font-weight: 600; |
| 142 | 368 | } |
| 143 | 369 | /* == COMPACT == */ |
| 144 | -.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_nav_item_sub.wpbc_ui_el__vert_nav_item a{ | |
| 370 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_nav_item_sub.wpbc_ui_el__vert_nav_item a, | |
| 371 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_nav_item_sub.wpbc_ui_el__vert_nav_item button{ | |
| 145 | 372 | margin: 2px 0 2px 7px; |
| 146 | 373 | } |
| 147 | 374 | /*Hover, focus*/ |
| 148 | 375 | .wpbc_ui_el__vert_nav_item a:hover, |
| 149 | -.wpbc_ui_el__vert_nav_item a:focus { | |
| 376 | +.wpbc_ui_el__vert_nav_item a:focus, | |
| 377 | +.wpbc_ui_el__vert_nav_item button[aria-selected="true"], | |
| 378 | +.wpbc_ui_el__vert_nav_item button:hover, | |
| 379 | +.wpbc_ui_el__vert_nav_item button:focus { | |
| 150 | 380 | /*color: var(--wpbc_ui_left_vert_nav__hover_color);*/ |
| 151 | 381 | background-color: var(--wpbc_ui_left_vert_nav__hover_background-color); |
| 152 | 382 | box-shadow: none; |
| 153 | 383 | outline:0; |
| @@ -160,18 +390,88 @@ | ||
| 160 | 390 | box-shadow: none; |
| 161 | 391 | outline:0; |
| 162 | 392 | } |
| 163 | 393 | /* Icons */ |
| 164 | -.wpbc_ui_el__vert_nav_item a .wpbc_ui_el__vert_nav_icon{ | |
| 394 | +.wpbc_ui_el__vert_nav_item a .wpbc_ui_el__vert_nav_icon, | |
| 395 | +.wpbc_ui_el__vert_nav_item button .wpbc_ui_el__vert_nav_icon{ | |
| 165 | 396 | margin:0; |
| 166 | 397 | } |
| 167 | -.wpbc_settings_page_wrapper .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_nav_item a .wpbc_ui_el__vert_nav_icon{ | |
| 398 | +.wpbc_settings_page_wrapper .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_nav_item a .wpbc_ui_el__vert_nav_icon, | |
| 399 | +.wpbc_settings_page_wrapper .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_nav_item button .wpbc_ui_el__vert_nav_icon{ | |
| 168 | 400 | margin: 0 13px 0 0; |
| 401 | + /* 2025-08-08 */ | |
| 402 | + margin: 0 10px 0 0; | |
| 169 | 403 | } |
| 170 | -.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_nav_item a .wpbc_ui_el__vert_nav_icon{ | |
| 404 | +/** // FixIn: 10.14.4.1. */ | |
| 405 | +/* Show top Icon menu opening wider in this compact mode*/ | |
| 406 | +.wpbc_ui_el__top_nav .wpbc_ui__top_nav__btn_show_left_vertical_nav:first-child { | |
| 407 | + width: 70px; | |
| 408 | + display: flex; | |
| 409 | + flex-flow: row nowrap; | |
| 410 | + justify-content: stretch; | |
| 411 | + align-items: center; | |
| 412 | + padding: 0 !important; | |
| 413 | +} | |
| 414 | +.wpbc_ui_el__top_nav .wpbc_ui__top_nav__btn_show_left_vertical_nav:first-child a { | |
| 415 | + max-height: 30px; | |
| 416 | + max-width: 30px; | |
| 417 | + margin: auto; | |
| 418 | + display: flex; | |
| 419 | + flex-flow: column; | |
| 420 | + align-items: center; | |
| 421 | + justify-content: center; | |
| 422 | + border-radius: 50%; | |
| 423 | +} | |
| 424 | + | |
| 425 | +/*.wpbc_page_wrapper_left_compact .wpbc_ui_el__top_nav .wpbc_ui__top_nav__btn_show_left_vertical_nav:first-child a{*/ | |
| 426 | + .wpbc_page_wrapper_left_max .wpbc_ui_el__top_nav .wpbc_ui__top_nav__btn_show_left_vertical_nav:first-child a{ | |
| 427 | + background: #46516021; | |
| 428 | +} | |
| 429 | +.wpbc_ui_el__top_nav .wpbc_ui__top_nav__btn_show_left_vertical_nav:first-child a:hover { | |
| 430 | + background: #46516011; | |
| 431 | +} | |
| 432 | +.wpbc_ui_el__top_nav .wpbc_ui__top_nav__btn_show_left_vertical_nav:first-child:has(a:hover:not(.button)) *{ | |
| 433 | + color: var(--wpbc_ui_top_nav__a_color); | |
| 434 | +} | |
| 435 | +.wpbc_ui_el__top_nav > .wpbc_ui__top_nav__btn_show_left_vertical_nav:first-child:has(a:hover){ | |
| 436 | + border-bottom-color: transparent; | |
| 437 | +} | |
| 438 | +.wpbc_ui_el__top_nav .wpbc_ui__top_nav__btn_show_left_vertical_nav:first-child a { | |
| 439 | + flex: 1 1 100%; | |
| 440 | + text-align: center; | |
| 441 | +} | |
| 442 | +.wpbc_ui_el__top_nav .wpbc_ui__top_nav__btn_show_left_vertical_nav:first-child a:focus { | |
| 443 | + box-shadow: none; | |
| 444 | +} | |
| 445 | +.wpbc_ui_el__top_nav .wpbc_ui__top_nav__btn_show_left_vertical_nav:first-child a:focus-visible { | |
| 446 | + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9); | |
| 447 | +} | |
| 448 | + | |
| 449 | +/* Show in Compact mode the Icon Text wrapping . */ | |
| 450 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_nav_item a { | |
| 451 | + display: flex; | |
| 452 | + flex-flow: column nowrap; | |
| 453 | + justify-content: center; | |
| 454 | + align-items: center; | |
| 455 | + padding: 8px 8px; | |
| 456 | + margin: 0; | |
| 457 | + border-radius: 0; | |
| 458 | + min-height: 10px; | |
| 459 | + gap: 4px; | |
| 460 | +} | |
| 461 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_nav_item a .wpbc_ui_el__vert_nav_icon, | |
| 462 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_nav_item button .wpbc_ui_el__vert_nav_icon{ | |
| 171 | 463 | margin-right: 20px; |
| 464 | + margin:0; /* // FixIn: 10.14.4.1. */ | |
| 172 | 465 | } |
| 173 | -.wpbc_ui_el__vert_nav_item a .wpbc_ui_el__vert_nav_icon::before { | |
| 466 | +/* // FixIn: 10.14.4.1. */ | |
| 467 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_nav_item a .wpbc_ui_el__vert_nav_icon::before, | |
| 468 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_nav_item button .wpbc_ui_el__vert_nav_icon::before { | |
| 469 | + font-size: 17px; | |
| 470 | + line-height: 1.4; | |
| 471 | +} | |
| 472 | +.wpbc_ui_el__vert_nav_item a .wpbc_ui_el__vert_nav_icon::before, | |
| 473 | +.wpbc_ui_el__vert_nav_item button .wpbc_ui_el__vert_nav_icon::before { | |
| 174 | 474 | font-size: 16px; |
| 175 | 475 | line-height: 20px; |
| 176 | 476 | } |
| 177 | 477 | /* Icons in Sub elements */ |
| @@ -176,8 +476,10 @@ | ||
| 176 | 476 | } |
| 177 | 477 | /* Icons in Sub elements */ |
| 178 | 478 | .wpbc_ui_el__vert_nav_item.wpbc_ui_el__vert_nav_item_sub a .wpbc_ui_el__vert_nav_icon::before { |
| 179 | 479 | font-size: 14px; |
| 480 | + /* 2025-08-08 */ | |
| 481 | + font-size: 12px; | |
| 180 | 482 | } |
| 181 | 483 | /* == Colapsed == */ |
| 182 | 484 | .wpbc_settings_page_wrapper.compact .wpbc_ui_el__level__folder.expanded .wpbc_ui_el__vert_nav_item:not(.wpbc_ui_el__vert_nav_item_sub) a { |
| 183 | 485 | border-bottom: 1px solid #0000001c; |
| @@ -187,19 +489,214 @@ | ||
| 187 | 489 | } |
| 188 | 490 | .wpbc_settings_page_wrapper.compact .wpbc_ui_el__level__folder.expanded .wpbc_ui_el__vert_nav_item_sub .wpbc_ui_el__vert_nav_icon::before { |
| 189 | 491 | font-size: 11px; |
| 190 | 492 | } |
| 191 | -/* Text */ | |
| 192 | -.wpbc_ui_el__vert_nav_item a span { | |
| 493 | +/* // FixIn: 10.14.4.1. */ | |
| 494 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__level__folder.expanded .wpbc_ui_el__vert_nav_item_sub .wpbc_ui_el__vert_nav_icon::before { | |
| 495 | + font-size: 16px; | |
| 496 | + line-height: 1.4; | |
| 193 | 497 | } |
| 498 | +/* // FixIn: 10.14.4.1. */ | |
| 499 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_nav_title.hide_in_compact_mode { | |
| 500 | + display: block; | |
| 501 | + font-size: 10px; | |
| 502 | + text-align: center; | |
| 503 | + line-height: 1.4; | |
| 504 | + font-weight: 400; | |
| 505 | + white-space: pre-wrap; | |
| 506 | + word-break: normal; | |
| 507 | +} | |
| 508 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_left_bar__section { | |
| 509 | + gap: 0; | |
| 510 | +} | |
| 194 | 511 | |
| 512 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__root_section_header_a { | |
| 513 | + visibility: visible !important; | |
| 514 | + padding: 0 5px; | |
| 515 | + display: flex; | |
| 516 | + justify-content: center; | |
| 517 | +} | |
| 518 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__section_header.hide_in_compact_mode { | |
| 519 | + font-size: 10px; | |
| 520 | + font-weight: 600; | |
| 521 | + letter-spacing: 0px; | |
| 522 | + line-height: 1.6; | |
| 523 | + padding: 0 10px 0 0; | |
| 524 | + text-overflow: ellipsis; | |
| 525 | + overflow: hidden; | |
| 526 | + overflow-wrap: normal; | |
| 527 | + hyphens: auto; | |
| 528 | + white-space: nowrap; | |
| 529 | + display: block; | |
| 530 | + | |
| 531 | + text-transform: uppercase; | |
| 532 | + font-weight: 600; | |
| 533 | + line-height: 2.2; | |
| 534 | + margin: 0; | |
| 535 | + font-size: 10px; | |
| 536 | + font-weight: 650; | |
| 537 | + letter-spacing: 0px; | |
| 538 | + color: #465160 !important; | |
| 539 | +} | |
| 540 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_left_bar__content .wpbc_ui_el__expand_colapse_btns { | |
| 541 | + margin: 8px 0 0; | |
| 542 | +} | |
| 543 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__level__folder.expanded .wpbc_ui_el__vert_nav_item_sub { | |
| 544 | + border-left: 2px solid #465160; | |
| 545 | + margin-left: 5px; | |
| 546 | +} | |
| 547 | +/* Folder Icons -show with bold color */ | |
| 548 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__level__folder .wpbc_ui_el__vert_nav_item__folder .wpbc_ui_el__vert_nav_title { | |
| 549 | + /*font-weight: 700;*/ | |
| 550 | +} | |
| 551 | +/* Compact mode Expanded and Colapsed folders !*/ | |
| 552 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__level__folder .wpbc_ui_el__vert_nav_item__folder { | |
| 553 | + position: relative; | |
| 554 | +} | |
| 555 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__level__folder .wpbc_ui_el__vert_nav_item__folder:after { | |
| 556 | + content: '+'; | |
| 557 | + position: absolute; | |
| 558 | + top: 4px; | |
| 559 | + right: 4px; | |
| 560 | + font-size: 16px; | |
| 561 | + font-weight: 700; | |
| 562 | +} | |
| 563 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__level__folder.expanded .wpbc_ui_el__vert_nav_item__folder:after{ | |
| 564 | + content: '-'; | |
| 565 | +} | |
| 195 | 566 | /* -- Vertical Menu items ---------------------------------------------------------------------------------------- */ |
| 196 | -/* Root menu elements */ | |
| 197 | -/* Right arrow in root mennu */ | |
| 198 | -.wpbc_settings_page_wrapper .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_nav_item_root a .wpbc_ui_el__vert_nav_icon.wpbc_ui_el__vert_nav_icon_arrow { | |
| 567 | +/* == ROOT MENU ELEMENTS == */ | |
| 568 | + /* Right arrow in root mennu */ | |
| 569 | + .wpbc_settings_page_wrapper .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_nav_item_root a .wpbc_ui_el__vert_nav_icon.wpbc_ui_el__vert_nav_icon_arrow { | |
| 570 | + margin: 0; | |
| 571 | + margin-left: auto; | |
| 572 | + } | |
| 573 | + | |
| 574 | +/* Root Section Header Container */ | |
| 575 | +.wpbc_ui_el__vert_left_bar__root_sections_container { | |
| 576 | + display:flex; | |
| 577 | + flex-flow: column nowrap; | |
| 578 | + justify-content: flex-start; | |
| 579 | + align-items: stretch; | |
| 580 | + gap: 0px; | |
| 581 | +} | |
| 582 | +.wpbc_ui_el__vert_left_bar__root_sections_container .wpbc_ui_el__vert_left_bar__section { | |
| 583 | + margin-block-end: 8px; | |
| 584 | +} | |
| 585 | +.wpbc_ui_el__vert_left_bar__root_sections_container .wpbc_ui_el__vert_left_bar__root_section_element { | |
| 586 | + /*padding-inline-start: 14px;*/ | |
| 587 | + /*padding-block-end: 10px;*/ | |
| 588 | + padding-inline-start: 8px; | |
| 589 | + padding-block-start: 8px; | |
| 590 | + padding-block-end: 20px; | |
| 591 | + display: flex; | |
| 592 | + flex-flow: column nowrap; | |
| 593 | + justify-content: flex-start; | |
| 594 | + align-items: stretch; | |
| 595 | + gap: 1px; | |
| 596 | +} | |
| 597 | +/* Search Availability - Top Line */ | |
| 598 | +.wpbc_ui_el__vert_left_bar__root_section_element.root_section_element_wpbc-search-availability { | |
| 599 | + border-top: 1px solid #e9e9e9; | |
| 600 | + padding-block-start: 15px; | |
| 601 | +} | |
| 602 | +/* In compact mode */ | |
| 603 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__root_sections_container .wpbc_ui_el__vert_left_bar__root_section_element { | |
| 604 | + padding-block-end: 40px; | |
| 605 | +} | |
| 606 | + | |
| 607 | +/* In compact mode hide header sections and set padding 0 */ | |
| 608 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__root_section_element { | |
| 609 | + padding-inline-start: 0 | |
| 610 | +} | |
| 611 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__root_section_header_a { | |
| 612 | + display: none; | |
| 613 | +} | |
| 614 | +.wpbc_ui_el__root_section_header_a:not(:hover) .wpbc_ui_el__section_header, | |
| 615 | +.wpbc_ui_el__root_section_header_a, | |
| 616 | +.wpbc_ui_el__root_section_header_a:focus, | |
| 617 | +.wpbc_ui_el__root_section_header_a:hover{ | |
| 618 | + text-decoration: none; | |
| 619 | + outline: none; | |
| 620 | + color: var(--wpbc_ui_left_vert_nav__a_color); | |
| 621 | + box-shadow:none; | |
| 622 | +} | |
| 623 | +.wpbc_ui_el__root_section_header_a { | |
| 624 | + flex-flow: row nowrap; | |
| 625 | + align-items: center; | |
| 626 | + gap: 8px; | |
| 627 | + position: sticky; | |
| 628 | + top: 26px; | |
| 629 | + background: #fff; | |
| 630 | + z-index: 1; | |
| 631 | + /*border-bottom: 1px solid #f1f1f1;*/ | |
| 632 | + border-radius: 0; | |
| 633 | +} | |
| 634 | +.wpbc_ui_el__root_section_header_a .wpbc_ui_el__vert_menu_root_section_icon { | |
| 199 | 635 | margin: 0; |
| 200 | - margin-left: auto; | |
| 636 | + flex: 0 0 auto; | |
| 201 | 637 | } |
| 638 | +.wpbc_ui_el__root_section_header_a .wpbc_ui_el__vert_menu_root_section_icon::before{ | |
| 639 | + font-size:9px; | |
| 640 | + font-weight: 600 !important; | |
| 641 | + vertical-align: 0; | |
| 642 | + line-height: 2; | |
| 643 | + transition: all .4s ease-in-out; | |
| 644 | +} | |
| 645 | +/* Hovering and Expending */ | |
| 646 | +.wpbc_ui_el__vert_left_bar__root_section_element:not(.section_expanded) .wpbc_ui_el__vert_left_bar__section { | |
| 647 | + display:none; | |
| 648 | +} | |
| 649 | + .wpbc_ui_el__vert_left_bar__root_section_element.section_expanded .wpbc_ui_el__root_section_header_a .wpbc_ui_el__vert_menu_root_section_icon { | |
| 650 | + order: 2; | |
| 651 | + margin-left: auto; | |
| 652 | + flex: 0 0 20px; | |
| 653 | + text-align: center; | |
| 654 | + } | |
| 655 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__root_section_element.section_expanded .wpbc_ui_el__root_section_header_a .wpbc_ui_el__vert_menu_root_section_icon { | |
| 656 | + display:none; | |
| 657 | +} | |
| 658 | +.wpbc_ui_el__vert_left_bar__root_section_element:not(.section_expanded) .wpbc_ui_el__root_section_header_a .wpbc_ui_el__vert_menu_root_section_icon::before{ | |
| 659 | + transform: rotateZ(0deg); | |
| 660 | +} | |
| 661 | +.wpbc_ui_el__vert_left_bar__root_section_element.section_expanded .wpbc_ui_el__root_section_header_a .wpbc_ui_el__vert_menu_root_section_icon::before { | |
| 662 | + transform: rotateZ(90deg); | |
| 663 | +} | |
| 664 | +/* Header text */ | |
| 665 | +.wpbc_ui_el__root_section_header_a .wpbc_ui_el__section_header { | |
| 666 | + /*text-transform: uppercase;*/ | |
| 667 | + /*font-size: 11px;*/ | |
| 668 | + /*font-weight: 600;*/ | |
| 669 | + /*line-height: 2.2;*/ | |
| 670 | + /*letter-spacing: 1px;*/ | |
| 671 | + /*margin: 0;*/ | |
| 672 | + | |
| 673 | + /*text-transform: uppercase;*/ | |
| 674 | + /*font-size: 11px;*/ | |
| 675 | + /*line-height: 2.2;*/ | |
| 676 | + /*letter-spacing: 1px;*/ | |
| 677 | + /*margin: 0;*/ | |
| 678 | + /*font-size: 11px;*/ | |
| 679 | + /*font-weight: 650;*/ | |
| 680 | + /*letter-spacing: 0.3px;*/ | |
| 681 | + | |
| 682 | + font-weight: 600; | |
| 683 | + line-height: 2.2; | |
| 684 | + letter-spacing: 0; | |
| 685 | + margin: 0; | |
| 686 | + font-size: 14px; | |
| 687 | + color: #575757 !important; | |
| 688 | +} | |
| 689 | +.wpbc_ui_el__root_section_header_a:not(:hover) h2.wpbc_ui_el__section_header { | |
| 690 | + /*color: #707070;*/ | |
| 691 | +} | |
| 692 | +.wpbc_ui_el__root_section_header_a h2.wpbc_ui_el__section_header { | |
| 693 | + color: #565656 !important; | |
| 694 | + font-size: 10px; | |
| 695 | + padding: 0 8px; | |
| 696 | + text-transform: uppercase; | |
| 697 | + font-weight: 700; | |
| 698 | +} | |
| 202 | 699 | /* Section header */ |
| 203 | 700 | .wpbc_ui_el__section_header { |
| 204 | 701 | font-size: 13px; |
| 205 | 702 | font-weight: 600; |
| @@ -208,9 +705,9 @@ | ||
| 208 | 705 | letter-spacing: 0px; |
| 209 | 706 | margin: 0 0 0 15px; |
| 210 | 707 | } |
| 211 | 708 | a > .wpbc_ui_el__section_header { |
| 212 | - color: #2271b1; | |
| 709 | + color: var(--wpbc_admin-theme-color, #2271b1); | |
| 213 | 710 | font-weight: 400; |
| 214 | 711 | font-size: 12px; |
| 215 | 712 | font-weight: 400; |
| 216 | 713 | letter-spacing: 0; |
| @@ -226,22 +723,32 @@ | ||
| 226 | 723 | align-items: center; |
| 227 | 724 | margin: 0 0 0 10px; |
| 228 | 725 | text-decoration: none; |
| 229 | 726 | } |
| 727 | +/* Go Back for Compact mode. // FixIn: 10.12.1.7. */ | |
| 728 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__content .wpbc_ui_el__go_back { | |
| 729 | + margin: 0; | |
| 730 | +} | |
| 731 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__content .wpbc_ui_el__go_back .wpbc_icn_navigate_before::before { | |
| 732 | + font-size:22px; | |
| 733 | + line-height: 16px; | |
| 734 | +} | |
| 230 | 735 | /* Animation */ |
| 231 | 736 | .wpbc_ui_el__vert_left_bar__section { |
| 232 | - animation: wpbc_ui_el__slide_to_left 200ms ease-in-out forwards; | |
| 233 | - transform-origin: left center; | |
| 234 | - transform: translateX(0%); | |
| 737 | + /*animation: wpbc_ui_el__slide_to_left 200ms ease-in-out forwards;*/ | |
| 738 | + /*transform-origin: left center;*/ | |
| 739 | + /*transform: translateX(0%);*/ | |
| 235 | 740 | |
| 741 | + | |
| 742 | + animation: wpbc_ui_el__dropdown_menu__anim__grow_down 200ms ease-in-out forwards; | |
| 743 | + transform-origin: top center; | |
| 744 | + | |
| 236 | 745 | display: flex; |
| 237 | 746 | flex-flow: column nowrap; |
| 238 | 747 | align-items: stretch; |
| 239 | 748 | justify-content: flex-start; |
| 749 | + gap:1px; | |
| 240 | 750 | } |
| 241 | -.wpbc_ui_el__vert_left_bar__section.wpbc_ui__hide { | |
| 242 | - transform: translateX(-100%); | |
| 243 | -} | |
| 244 | 751 | /* -- Items -------------------------------------------------------------------------------------------------------- */ |
| 245 | 752 | /* Default order */ |
| 246 | 753 | .wpbc_ui_el__level__folder, |
| 247 | 754 | .wpbc_ui_el__level__folder .wpbc_ui_el__vert_nav_item, |
| @@ -254,9 +761,13 @@ | ||
| 254 | 761 | display: flex; |
| 255 | 762 | flex-flow: column nowrap; |
| 256 | 763 | justify-content: flex-start; |
| 257 | 764 | align-items: stretch; |
| 765 | + gap: 1px; | |
| 258 | 766 | } |
| 767 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__level__folder { | |
| 768 | + gap: 0; | |
| 769 | +} | |
| 259 | 770 | .wpbc_ui_el__level__folder.expanded{ |
| 260 | 771 | |
| 261 | 772 | } |
| 262 | 773 | /* In folder Item */ |
| @@ -263,9 +774,10 @@ | ||
| 263 | 774 | .wpbc_ui_el__level__folder .wpbc_ui_el__vert_nav_item { |
| 264 | 775 | |
| 265 | 776 | } |
| 266 | 777 | /* Folder */ |
| 267 | - .wpbc_ui_el__level__folder .wpbc_ui_el__vert_nav_item a.wpbc_ui_el__vert_nav_item__folder{ | |
| 778 | + .wpbc_ui_el__level__folder .wpbc_ui_el__vert_nav_item a.wpbc_ui_el__vert_nav_item__folder, | |
| 779 | + .wpbc_ui_el__level__folder .wpbc_ui_el__vert_nav_item button.wpbc_ui_el__vert_nav_item__folder{ | |
| 268 | 780 | |
| 269 | 781 | } |
| 270 | 782 | /* Hide or show folder icons on expanded/colapsed blocks */ |
| 271 | 783 | .wpbc_ui_el__level__folder.expanded .wpbc_ui_el__vert_nav_icon_collapsed { |
| @@ -274,9 +786,10 @@ | ||
| 274 | 786 | .wpbc_ui_el__level__folder:not(.expanded) .wpbc_ui_el__vert_nav_icon_expanded { |
| 275 | 787 | display: none; |
| 276 | 788 | } |
| 277 | 789 | /* Single A */ |
| 278 | - .wpbc_ui_el__level__folder .wpbc_ui_el__vert_nav_item a.wpbc_ui_el__vert_nav_item__single{ | |
| 790 | + .wpbc_ui_el__level__folder .wpbc_ui_el__vert_nav_item a.wpbc_ui_el__vert_nav_item__single, | |
| 791 | + .wpbc_ui_el__level__folder .wpbc_ui_el__vert_nav_item button.wpbc_ui_el__vert_nav_item__single{ | |
| 279 | 792 | |
| 280 | 793 | } |
| 281 | 794 | /* Item Sub*/ |
| 282 | 795 | .wpbc_ui_el__level__folder .wpbc_ui_el__vert_nav_item.wpbc_ui_el__vert_nav_item_sub{ |
| @@ -346,15 +859,34 @@ | ||
| 346 | 859 | font-size:95%; |
| 347 | 860 | } |
| 348 | 861 | /* -- End Items ---------------------------------------------------------------------------------------------------- */ |
| 349 | 862 | |
| 863 | +/* Row for header and buttons */ | |
| 864 | +.wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_left_bar__root_sections_container { | |
| 865 | + margin-top: 0px; | |
| 866 | +} | |
| 867 | +.wpbc_ui_el__expand_colapse_btns { | |
| 868 | + padding: 0; | |
| 869 | + /* We shift " > Bookings " menu to the same level as this colapse button */ | |
| 870 | + margin: 16px 0 -15px; | |
| 871 | + margin: 15px 0 0; | |
| 350 | 872 | |
| 351 | - | |
| 352 | -/* Row for header and buttons */ | |
| 353 | -.wpbc_ui_el__expand_colapse_btns{ | |
| 354 | - margin: 10px 0 5px; | |
| 355 | - padding:0; | |
| 873 | + margin: 0; | |
| 874 | + padding: 8px 0; | |
| 875 | + position: sticky; | |
| 876 | + top: 0px; | |
| 877 | + z-index: 2; | |
| 878 | + background: #fff; | |
| 879 | + border-bottom: 0px dashed #c2c2c2; | |
| 356 | 880 | } |
| 881 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__expand_colapse_btns { | |
| 882 | + margin-bottom: -22px; | |
| 883 | +} | |
| 884 | +/* I nstead of display:none in compact mode for 1st item we set visibility hidden to save height of this element for the .wpbc_ui_el__expand_colapse_btns */ | |
| 885 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__root_section_element:first-child > a:first-child { | |
| 886 | + display: flex; | |
| 887 | + visibility: hidden; | |
| 888 | +} | |
| 357 | 889 | .wpbc_ui_el__expand_colapse_btns a, |
| 358 | 890 | .wpbc_ui_el__expand_colapse_btns a:focus, |
| 359 | 891 | .wpbc_ui_el__expand_colapse_btns a:hover { |
| 360 | 892 | box-shadow: none; |
| @@ -359,15 +891,197 @@ | ||
| 359 | 891 | .wpbc_ui_el__expand_colapse_btns a:hover { |
| 360 | 892 | box-shadow: none; |
| 361 | 893 | outline: 0; |
| 362 | 894 | } |
| 363 | -.wpbc_ui_el__expand_colapse_btns .wpbc_ui_el__a{ | |
| 895 | +.wpbc_ui_el__vert_left_bar__content .wpbc_ui_el__expand_colapse_btns .wpbc_ui_el__a { | |
| 364 | 896 | margin-left: auto; |
| 365 | - padding:0 8px; | |
| 897 | + padding: 0 2px; | |
| 366 | 898 | } |
| 367 | -.wpbc_settings_page_wrapper.compact .wpbc_ui_el__expand_colapse_btns { | |
| 899 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__content .wpbc_ui_el__expand_colapse_btns { | |
| 368 | 900 | justify-content: center; |
| 369 | 901 | } |
| 370 | -.wpbc_settings_page_wrapper.compact .wpbc_ui_el__expand_colapse_btns .wpbc_ui_el__a{ | |
| 371 | - margin-left:0; | |
| 372 | - padding:0; | |
| 902 | +.wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__content .wpbc_ui_el__expand_colapse_btns .wpbc_ui_el__a { | |
| 903 | + margin-left: 0; | |
| 904 | + padding: 0; | |
| 373 | 905 | } |
| 906 | +.wpbc_ui_el__vert_right_bar__content .wpbc_ui_el__expand_colapse_btns .wpbc_ui_el__a { | |
| 907 | + margin-left: auto; | |
| 908 | + padding: 0 8px; | |
| 909 | +} | |
| 910 | +.wpbc_settings_page_wrapper.compact_right .wpbc_ui_el__vert_right_bar__content .wpbc_ui_el__expand_colapse_btns { | |
| 911 | + justify-content: center; | |
| 912 | +} | |
| 913 | +.wpbc_settings_page_wrapper.compact_right .wpbc_ui_el__vert_right_bar__content .wpbc_ui_el__expand_colapse_btns .wpbc_ui_el__a { | |
| 914 | + margin-left: 0; | |
| 915 | + padding: 0; | |
| 916 | +} | |
| 917 | + | |
| 918 | +/* -- Side button - Colapse / Expand ------------------------------------------------------------------------------- // FixIn: 10.12.1.7. */ | |
| 919 | +.wpbc_ui_el__vert_right_bar__wrapper .wpbc_ui__right_sidebar__side_button, | |
| 920 | +.wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui__left_sidebar__side_button { | |
| 921 | + width: 22px; | |
| 922 | + height: 41px; | |
| 923 | + background: #ffffffc2; | |
| 924 | + position: sticky; | |
| 925 | + /*top: 50%;*/ | |
| 926 | + /*top: calc( 100% - 41px - var(--wpbc_ui_top_nav__height) - var(--wpbc_ui_top_nav__wp_top_menu_height) );*/ | |
| 927 | + /*top: calc( 100% - 41px - 20px );*/ | |
| 928 | + border-style: solid; | |
| 929 | + border-width: 1px 1px 1px 0px; | |
| 930 | + border-color: #e1e1e1; | |
| 931 | + border-color: #fff; | |
| 932 | + border-radius: 0 3px 3px 0; | |
| 933 | + z-index: 1; | |
| 934 | + cursor: pointer; | |
| 935 | + transition: all 0.3s ease-in-out; | |
| 936 | + align-self: flex-end; | |
| 937 | + margin-right: -23px; | |
| 938 | + margin-top: -41px; | |
| 939 | + box-shadow: 0 0 2px #0000000d; | |
| 940 | + | |
| 941 | + margin-top: auto; | |
| 942 | + margin-bottom: 15px; | |
| 943 | + order: 1; | |
| 944 | + bottom: 15px; | |
| 945 | + /* // FixIn: 10.12.4.4. */ | |
| 946 | + bottom: 3%; | |
| 947 | + box-shadow: var(--wpbc_ui__gen__panel_box-shadow); | |
| 948 | + box-shadow: 1px 1px 3px rgba(17,24,39,.09); | |
| 949 | + border-color: #00000014; | |
| 950 | + background: #ffffffa6; | |
| 951 | + margin-right: -22px; | |
| 952 | +} | |
| 953 | +.wpbc_ui_el__vert_right_bar__wrapper .wpbc_ui__right_sidebar__side_button svg, | |
| 954 | +.wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui__left_sidebar__side_button svg { | |
| 955 | + width: 12px; | |
| 956 | + height: 12px; | |
| 957 | + display: block; | |
| 958 | + position: relative; | |
| 959 | + left: -2px; | |
| 960 | + transition: all 0.3s ease-in-out; | |
| 961 | +} | |
| 962 | +.wpbc_ui_el__vert_right_bar__wrapper .wpbc_ui__right_sidebar__side_button:hover svg, | |
| 963 | +.wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui__left_sidebar__side_button:hover svg { | |
| 964 | + left: -4px; | |
| 965 | +} | |
| 966 | +.wpbc_ui_el__vert_right_bar__wrapper .wpbc_ui__right_sidebar__side_button.wpbc_ui__top_nav__btn_open_right_vertical_nav, | |
| 967 | +.wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui__left_sidebar__side_button.wpbc_ui__top_nav__btn_open_left_vertical_nav { | |
| 968 | + /*width: 24px;*/ | |
| 969 | + /*height: 44px;*/ | |
| 970 | +} | |
| 971 | +.wpbc_ui_el__vert_right_bar__wrapper .wpbc_ui__right_sidebar__side_button.wpbc_ui__top_nav__btn_open_right_vertical_nav svg, | |
| 972 | +.wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui__left_sidebar__side_button.wpbc_ui__top_nav__btn_open_left_vertical_nav svg { | |
| 973 | + transform: rotate(180deg); | |
| 974 | + left: -1px; | |
| 975 | + width: 14px; | |
| 976 | + height: 14px; | |
| 977 | +} | |
| 978 | +.wpbc_ui_el__vert_right_bar__wrapper .wpbc_ui__right_sidebar__side_button.wpbc_ui__top_nav__btn_open_right_vertical_nav:hover svg, | |
| 979 | +.wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui__left_sidebar__side_button.wpbc_ui__top_nav__btn_open_left_vertical_nav:hover svg { | |
| 980 | + left: 2px; | |
| 981 | +} | |
| 982 | +/* Set zoom move on hovering // FixIn: 10.12.4.4. */ | |
| 983 | +.wpbc_ui_el__vert_right_bar__wrapper .wpbc_ui__right_sidebar__side_button.wpbc_ui__top_nav__btn_open_right_vertical_nav:hover, | |
| 984 | +.wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui__left_sidebar__side_button.wpbc_ui__top_nav__btn_open_left_vertical_nav:hover { | |
| 985 | + width: 30px; | |
| 986 | + margin-right: -30px; | |
| 987 | +} | |
| 988 | +.wpbc_ui_el__vert_right_bar__wrapper .wpbc_ui__right_sidebar__side_button.wpbc_ui__top_nav__btn_open_right_vertical_nav:hover svg, | |
| 989 | +.wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui__left_sidebar__side_button.wpbc_ui__top_nav__btn_open_left_vertical_nav:hover svg { | |
| 990 | + left: 5px; | |
| 991 | + height: 18px; | |
| 992 | + width: 18px; | |
| 993 | +} | |
| 994 | +/* Set button black, if in minimized view */ | |
| 995 | +.wpbc_settings_page_wrapper.min_right .wpbc_ui_el__vert_right_bar__wrapper .wpbc_ui__right_sidebar__side_button, | |
| 996 | +.wpbc_settings_page_wrapper.min .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui__left_sidebar__side_button { | |
| 997 | + background: #1d232775; | |
| 998 | +} | |
| 999 | +.wpbc_settings_page_wrapper.min_right .wpbc_ui_el__vert_right_bar__wrapper .wpbc_ui__right_sidebar__side_button svg path, | |
| 1000 | +.wpbc_settings_page_wrapper.min .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui__left_sidebar__side_button svg path{ | |
| 1001 | + fill: #fff; | |
| 1002 | +} | |
| 1003 | +.wpbc_settings_page_wrapper.min .wpbc_ui_el__vert_left_bar__wrapper:hover { | |
| 1004 | + --wpbc_ui_left_vert_nav__width_min: 20px; | |
| 1005 | + cursor:pointer; | |
| 1006 | +} | |
| 1007 | + | |
| 1008 | + | |
| 1009 | +/* == Right Sidebar ================================================================================================= */ | |
| 1010 | +/* Shift "#10.14.1 MultiUser (for Beta Test)" to the right. */ | |
| 1011 | +.wpbc_settings_page_content .wpbc_settings_path .wpbc_settings_path_el.wpbc_ui_settings__flex_container{ | |
| 1012 | + position:absolute; | |
| 1013 | + right:10px; | |
| 1014 | +} | |
| 1015 | +.wpbc_ui_el__vert_right_bar__wrapper { | |
| 1016 | + /* 22px + 5px - .wpbc_settings_path_el height +margin + 25px * 1.8 - H1 header + 13px * 1.5 + 20px - description */ | |
| 1017 | + margin-top: calc( 22px + 5px + 25px * 1.8 + 13px * 1.5 + 20px ); | |
| 1018 | + border-radius: 6px 0 0 6px; | |
| 1019 | + padding: 6px 0; | |
| 1020 | +} | |
| 1021 | +.wpbc_ui_el__vert_right_bar__wrapper.wpbc_ui_el__vert_right_bar_compact__wrapper { | |
| 1022 | + padding: 0; | |
| 1023 | +} | |
| 1024 | +/* == M I N == */ | |
| 1025 | +.wpbc_ui_el__vert_right_bar__wrapper { | |
| 1026 | + /*order: 100;*/ | |
| 1027 | +} | |
| 1028 | +.wpbc_ui_el__vert_right_bar__wrapper .wpbc_ui__right_sidebar__side_button { | |
| 1029 | + align-self: flex-start; | |
| 1030 | + transform: rotateZ(180deg); | |
| 1031 | + margin-left: -22px; | |
| 1032 | + bottom: calc( 25% - 41px - 20px ); | |
| 1033 | +} | |
| 1034 | +.wpbc_ui_el__vert_right_bar__wrapper .wpbc_ui__right_sidebar__side_button.wpbc_ui__top_nav__btn_open_right_vertical_nav:hover svg { | |
| 1035 | + right: 2px; | |
| 1036 | +} | |
| 1037 | +/* Set zoom move on hovering // FixIn: 10.12.4.4. */ | |
| 1038 | +.wpbc_ui_el__vert_right_bar__wrapper .wpbc_ui__right_sidebar__side_button.wpbc_ui__top_nav__btn_open_right_vertical_nav:hover { | |
| 1039 | + width: 30px; | |
| 1040 | + margin-left: -30px; | |
| 1041 | +} | |
| 1042 | +.wpbc_ui_el__vert_right_bar__wrapper .wpbc_ui__right_sidebar__side_button.wpbc_ui__top_nav__btn_open_right_vertical_nav:hover svg { | |
| 1043 | + right: 5px; | |
| 1044 | +} | |
| 1045 | + | |
| 1046 | +.wpbc_admin:not(.right_vertical_sidebar_displayed) .wpbc_ui__top_nav__btn_show_right_vertical_nav, | |
| 1047 | +.wpbc_admin:not(.right_vertical_sidebar_displayed) .wpbc_ui__top_nav__btn_show_right_vertical_nav_divider{ | |
| 1048 | + display:none; | |
| 1049 | +} | |
| 1050 | +/* == Compact Right Sidebar ================================================================================================= */ | |
| 1051 | +.wpbc_admin .wpbc_ui_el__vert_right_bar__wrapper.wpbc_ui_el__vert_right_bar_compact__wrapper { | |
| 1052 | + border-radius: 0; | |
| 1053 | + box-shadow: none; | |
| 1054 | + border-left: 1px solid #00000017; | |
| 1055 | +} | |
| 1056 | +.wpbc_ui_el__vert_right_bar_compact__wrapper .wpbc_ui_el__vert_nav_item__a.wpbc_ui_el__vert_nav_item__single { | |
| 1057 | + display: flex; | |
| 1058 | + flex-flow: column nowrap; | |
| 1059 | + align-items: center; | |
| 1060 | + justify-content: center; | |
| 1061 | + gap: 5px; | |
| 1062 | + | |
| 1063 | + min-height: 35px; | |
| 1064 | + padding: 8px 5px; | |
| 1065 | + | |
| 1066 | + margin: 0; | |
| 1067 | + border-radius: 0; | |
| 1068 | + | |
| 1069 | + font-size: 12px; | |
| 1070 | + font-weight: 600; | |
| 1071 | + line-height: 1.74; | |
| 1072 | + text-align: center; | |
| 1073 | + word-break: break-all; | |
| 1074 | +} | |
| 1075 | +.wpbc_ui_el__vert_right_bar_compact__wrapper button.wpbc_ui_el__vert_nav_item__a.wpbc_ui_el__vert_nav_item__single{ | |
| 1076 | + width:100%; | |
| 1077 | +} | |
| 1078 | +.wpbc_ui_el__vert_right_bar_compact__wrapper .wpbc_ui_el__vert_nav_item a .wpbc_ui_el__vert_nav_icon::before, | |
| 1079 | +.wpbc_ui_el__vert_right_bar_compact__wrapper .wpbc_ui_el__vert_nav_item button .wpbc_ui_el__vert_nav_icon::before { | |
| 1080 | + font-size: 24px; | |
| 1081 | + line-height: 26px; | |
| 1082 | +} | |
| 1083 | +.wpbc_ui_el__vert_right_bar_compact__wrapper .wpbc_ui_el__vert_nav_item.active a, | |
| 1084 | +.wpbc_ui_el__vert_right_bar_compact__wrapper .wpbc_ui_el__vert_nav_item.active a:hover { | |
| 1085 | + background-color: #274396; | |
| 1086 | + background-color: #547298; | |
| 1087 | +} | |
