| @@ -2,11 +2,10 @@ | ||
| 2 | 2 | /*! = " == F U L L == " - Left Vertical Navigation Bar = */ |
| 3 | 3 | /* ------------------------------------------------------------------------------------------------------------------ */ |
| 4 | 4 | .wpbc_admin { |
| 5 | 5 | /* --wpbc_ui_left_vert_nav__width_min: 5px; */ |
| 6 | - --wpbc_ui_left_vert_nav__width_min: 0; /* // FixIn: 10.12.4.4. */ | |
| 7 | - --wpbc_ui_left_vert_nav__width_compact: 48px; | |
| 8 | - --wpbc_ui_left_vert_nav__width_compact: 90px; /* // FixIn: 10.14.4.1. */ | |
| 6 | + --wpbc_ui_left_vert_nav__width_min: 10px; | |
| 7 | + --wpbc_ui_left_vert_nav__width_compact: 80px; | |
| 9 | 8 | --wpbc_ui_left_vert_nav__width_max: 250px; |
| 10 | 9 | |
| 11 | 10 | --wpbc_ui_left_vert_nav__margin: 0; |
| 12 | 11 | --wpbc_ui_left_vert_nav__background-color: var(--wpbc_ui__gen__panel_background-color); |
| @@ -235,8 +234,25 @@ | ||
| 235 | 234 | .wpbc_settings_page_wrapper.max .wpbc_ui_el__vert_left_bar__wrapper { |
| 236 | 235 | max-width: calc(100% - 25px); /* - 25px it is sidebar button ( expand / colapse ) width */ |
| 237 | 236 | flex: 1 1 100%; |
| 238 | 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 | + } | |
| 239 | 255 | /* Hide content, if opened left menu in mobile mode */ |
| 240 | 256 | .wpbc_settings_page_wrapper.max .wpbc_settings_page_content .wpbc_page { |
| 241 | 257 | display: none; |
| 242 | 258 | } |
| @@ -297,10 +313,10 @@ | ||
| 297 | 313 | /* A */ |
| 298 | 314 | .wpbc_ui_el__vert_nav_item a, |
| 299 | 315 | .wpbc_ui_el__vert_nav_item button{ |
| 300 | 316 | flex: 1 1 100%; |
| 301 | - margin: 2px 0 2px 8px; | |
| 302 | - padding: 7px 8px; | |
| 317 | + margin: 0 0 0 3px; | |
| 318 | + padding: 8px 5px 8px 12px; | |
| 303 | 319 | border: none; |
| 304 | 320 | border-radius: var(--wpbc_ui__gen__border-radius) 0 0 var(--wpbc_ui__gen__border-radius); |
| 305 | 321 | text-shadow: none; |
| 306 | 322 | font-size: var(--wpbc_ui_left_vert_nav__font-size); |
| @@ -313,17 +329,23 @@ | ||
| 313 | 329 | display: flex; |
| 314 | 330 | flex-flow: row; |
| 315 | 331 | justify-content: flex-start; |
| 316 | 332 | align-items: center; |
| 333 | + gap: 8px; | |
| 317 | 334 | |
| 318 | 335 | /* 2025-08-08 */ |
| 319 | 336 | font-weight: 500; |
| 320 | - font-size: 13px; | |
| 337 | + font-size: 12px; | |
| 321 | 338 | letter-spacing: 0.1px; |
| 322 | 339 | margin: 0 0 0px 3px; |
| 323 | 340 | padding: 8px 5px 8px 12px; |
| 324 | 341 | cursor:pointer; |
| 325 | 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 | +} | |
| 326 | 348 | .wpbc_ui_el__vert_nav_item__uninstall a { |
| 327 | 349 | /*color: #d63638;*/ |
| 328 | 350 | } |
| 329 | 351 | .wpbc_ui_el__vert_nav_item button:not(:hover){ |
| @@ -380,10 +402,10 @@ | ||
| 380 | 402 | margin: 0 10px 0 0; |
| 381 | 403 | } |
| 382 | 404 | /** // FixIn: 10.14.4.1. */ |
| 383 | 405 | /* Show top Icon menu opening wider in this compact mode*/ |
| 384 | -.wpbc_page_wrapper_left_compact .wpbc_ui_el__top_nav .wpbc_ui__top_nav__btn_show_left_vertical_nav:first-child { | |
| 385 | - width: 80px; | |
| 406 | +.wpbc_ui_el__top_nav .wpbc_ui__top_nav__btn_show_left_vertical_nav:first-child { | |
| 407 | + width: 70px; | |
| 386 | 408 | display: flex; |
| 387 | 409 | flex-flow: row nowrap; |
| 388 | 410 | justify-content: stretch; |
| 389 | 411 | align-items: center; |
| @@ -388,12 +410,43 @@ | ||
| 388 | 410 | justify-content: stretch; |
| 389 | 411 | align-items: center; |
| 390 | 412 | padding: 0 !important; |
| 391 | 413 | } |
| 392 | -.wpbc_page_wrapper_left_compact .wpbc_ui_el__top_nav .wpbc_ui__top_nav__btn_show_left_vertical_nav:first-child a { | |
| 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 { | |
| 393 | 439 | flex: 1 1 100%; |
| 394 | 440 | text-align: center; |
| 395 | 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 | + | |
| 396 | 449 | /* Show in Compact mode the Icon Text wrapping . */ |
| 397 | 450 | .wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_nav_item a { |
| 398 | 451 | display: flex; |
| 399 | 452 | flex-flow: column nowrap; |
| @@ -398,12 +451,13 @@ | ||
| 398 | 451 | display: flex; |
| 399 | 452 | flex-flow: column nowrap; |
| 400 | 453 | justify-content: center; |
| 401 | 454 | align-items: center; |
| 402 | - padding: 10px 5px; | |
| 455 | + padding: 8px 8px; | |
| 403 | 456 | margin: 0; |
| 404 | 457 | border-radius: 0; |
| 405 | - min-height: 40px; | |
| 458 | + min-height: 10px; | |
| 459 | + gap: 4px; | |
| 406 | 460 | } |
| 407 | 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, |
| 408 | 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{ |
| 409 | 463 | margin-right: 20px; |
| @@ -458,8 +512,9 @@ | ||
| 458 | 512 | .wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__root_section_header_a { |
| 459 | 513 | visibility: visible !important; |
| 460 | 514 | padding: 0 5px; |
| 461 | 515 | display: flex; |
| 516 | + justify-content: center; | |
| 462 | 517 | } |
| 463 | 518 | .wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__section_header.hide_in_compact_mode { |
| 464 | 519 | font-size: 10px; |
| 465 | 520 | font-weight: 600; |
| @@ -479,11 +534,12 @@ | ||
| 479 | 534 | margin: 0; |
| 480 | 535 | font-size: 10px; |
| 481 | 536 | font-weight: 650; |
| 482 | 537 | letter-spacing: 0px; |
| 538 | + color: #465160 !important; | |
| 483 | 539 | } |
| 484 | 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 { |
| 485 | - margin: 10px 0 0; | |
| 541 | + margin: 8px 0 0; | |
| 486 | 542 | } |
| 487 | 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 { |
| 488 | 544 | border-left: 2px solid #465160; |
| 489 | 545 | margin-left: 5px; |
| @@ -523,9 +579,9 @@ | ||
| 523 | 579 | align-items: stretch; |
| 524 | 580 | gap: 0px; |
| 525 | 581 | } |
| 526 | 582 | .wpbc_ui_el__vert_left_bar__root_sections_container .wpbc_ui_el__vert_left_bar__section { |
| 527 | - margin-block-end: 9px; | |
| 583 | + margin-block-end: 8px; | |
| 528 | 584 | } |
| 529 | 585 | .wpbc_ui_el__vert_left_bar__root_sections_container .wpbc_ui_el__vert_left_bar__root_section_element { |
| 530 | 586 | /*padding-inline-start: 14px;*/ |
| 531 | 587 | /*padding-block-end: 10px;*/ |
| @@ -530,16 +586,26 @@ | ||
| 530 | 586 | /*padding-inline-start: 14px;*/ |
| 531 | 587 | /*padding-block-end: 10px;*/ |
| 532 | 588 | padding-inline-start: 8px; |
| 533 | 589 | padding-block-start: 8px; |
| 534 | - padding-block-end: 8px; | |
| 590 | + padding-block-end: 20px; | |
| 535 | 591 | display: flex; |
| 536 | 592 | flex-flow: column nowrap; |
| 537 | 593 | justify-content: flex-start; |
| 538 | 594 | align-items: stretch; |
| 539 | - gap: 5px; | |
| 595 | + gap: 1px; | |
| 540 | 596 | } |
| 541 | -/* In compact mode hide header sections and set padding 0*/ | |
| 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 */ | |
| 542 | 608 | .wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__root_section_element { |
| 543 | 609 | padding-inline-start: 0 |
| 544 | 610 | } |
| 545 | 611 | .wpbc_settings_page_wrapper.compact .wpbc_ui_el__root_section_header_a { |
| @@ -557,8 +623,14 @@ | ||
| 557 | 623 | .wpbc_ui_el__root_section_header_a { |
| 558 | 624 | flex-flow: row nowrap; |
| 559 | 625 | align-items: center; |
| 560 | 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; | |
| 561 | 633 | } |
| 562 | 634 | .wpbc_ui_el__root_section_header_a .wpbc_ui_el__vert_menu_root_section_icon { |
| 563 | 635 | margin: 0; |
| 564 | 636 | flex: 0 0 auto; |
| @@ -573,8 +645,17 @@ | ||
| 573 | 645 | /* Hovering and Expending */ |
| 574 | 646 | .wpbc_ui_el__vert_left_bar__root_section_element:not(.section_expanded) .wpbc_ui_el__vert_left_bar__section { |
| 575 | 647 | display:none; |
| 576 | 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 | +} | |
| 577 | 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{ |
| 578 | 659 | transform: rotateZ(0deg); |
| 579 | 660 | } |
| 580 | 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 { |
| @@ -605,11 +686,17 @@ | ||
| 605 | 686 | font-size: 14px; |
| 606 | 687 | color: #575757 !important; |
| 607 | 688 | } |
| 608 | 689 | .wpbc_ui_el__root_section_header_a:not(:hover) h2.wpbc_ui_el__section_header { |
| 609 | - color: #707070; | |
| 690 | + /*color: #707070;*/ | |
| 610 | 691 | } |
| 611 | - | |
| 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 | +} | |
| 612 | 699 | /* Section header */ |
| 613 | 700 | .wpbc_ui_el__section_header { |
| 614 | 701 | font-size: 13px; |
| 615 | 702 | font-weight: 600; |
| @@ -658,9 +745,9 @@ | ||
| 658 | 745 | display: flex; |
| 659 | 746 | flex-flow: column nowrap; |
| 660 | 747 | align-items: stretch; |
| 661 | 748 | justify-content: flex-start; |
| 662 | - gap:5px; | |
| 749 | + gap:1px; | |
| 663 | 750 | } |
| 664 | 751 | /* -- Items -------------------------------------------------------------------------------------------------------- */ |
| 665 | 752 | /* Default order */ |
| 666 | 753 | .wpbc_ui_el__level__folder, |
| @@ -774,14 +861,23 @@ | ||
| 774 | 861 | /* -- End Items ---------------------------------------------------------------------------------------------------- */ |
| 775 | 862 | |
| 776 | 863 | /* Row for header and buttons */ |
| 777 | 864 | .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui_el__vert_left_bar__root_sections_container { |
| 778 | - margin-top: 8px; | |
| 865 | + margin-top: 0px; | |
| 779 | 866 | } |
| 780 | 867 | .wpbc_ui_el__expand_colapse_btns { |
| 781 | 868 | padding: 0; |
| 782 | 869 | /* We shift " > Bookings " menu to the same level as this colapse button */ |
| 783 | - margin: 16px 0 -38px; | |
| 870 | + margin: 16px 0 -15px; | |
| 871 | + margin: 15px 0 0; | |
| 872 | + | |
| 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; | |
| 784 | 880 | } |
| 785 | 881 | .wpbc_settings_page_wrapper.compact .wpbc_ui_el__expand_colapse_btns { |
| 786 | 882 | margin-bottom: -22px; |
| 787 | 883 | } |
| @@ -797,9 +893,9 @@ | ||
| 797 | 893 | outline: 0; |
| 798 | 894 | } |
| 799 | 895 | .wpbc_ui_el__vert_left_bar__content .wpbc_ui_el__expand_colapse_btns .wpbc_ui_el__a { |
| 800 | 896 | margin-left: auto; |
| 801 | - padding: 0 8px; | |
| 897 | + padding: 0 2px; | |
| 802 | 898 | } |
| 803 | 899 | .wpbc_settings_page_wrapper.compact .wpbc_ui_el__vert_left_bar__content .wpbc_ui_el__expand_colapse_btns { |
| 804 | 900 | justify-content: center; |
| 805 | 901 | } |
| @@ -846,9 +942,9 @@ | ||
| 846 | 942 | margin-bottom: 15px; |
| 847 | 943 | order: 1; |
| 848 | 944 | bottom: 15px; |
| 849 | 945 | /* // FixIn: 10.12.4.4. */ |
| 850 | - bottom: 25%; | |
| 946 | + bottom: 3%; | |
| 851 | 947 | box-shadow: var(--wpbc_ui__gen__panel_box-shadow); |
| 852 | 948 | box-shadow: 1px 1px 3px rgba(17,24,39,.09); |
| 853 | 949 | border-color: #00000014; |
| 854 | 950 | background: #ffffffa6; |
| @@ -903,9 +999,14 @@ | ||
| 903 | 999 | .wpbc_settings_page_wrapper.min_right .wpbc_ui_el__vert_right_bar__wrapper .wpbc_ui__right_sidebar__side_button svg path, |
| 904 | 1000 | .wpbc_settings_page_wrapper.min .wpbc_ui_el__vert_left_bar__wrapper .wpbc_ui__left_sidebar__side_button svg path{ |
| 905 | 1001 | fill: #fff; |
| 906 | 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 | +} | |
| 907 | 1007 | |
| 1008 | + | |
| 908 | 1009 | /* == Right Sidebar ================================================================================================= */ |
| 909 | 1010 | /* Shift "#10.14.1 MultiUser (for Beta Test)" to the right. */ |
| 910 | 1011 | .wpbc_settings_page_content .wpbc_settings_path .wpbc_settings_path_el.wpbc_ui_settings__flex_container{ |
| 911 | 1012 | position:absolute; |
| @@ -968,8 +1069,9 @@ | ||
| 968 | 1069 | font-size: 12px; |
| 969 | 1070 | font-weight: 600; |
| 970 | 1071 | line-height: 1.74; |
| 971 | 1072 | text-align: center; |
| 1073 | + word-break: break-all; | |
| 972 | 1074 | } |
| 973 | 1075 | .wpbc_ui_el__vert_right_bar_compact__wrapper button.wpbc_ui_el__vert_nav_item__a.wpbc_ui_el__vert_nav_item__single{ |
| 974 | 1076 | width:100%; |
| 975 | 1077 | } |
