| @@ -8,9 +8,14 @@ | ||
| 8 | 8 | * @email info@wpbookingcalendar.com |
| 9 | 9 | * |
| 10 | 10 | * @modified 2023-11-11 |
| 11 | 11 | */ |
| 12 | - | |
| 12 | +:root{ | |
| 13 | + /* Default Sizes */ | |
| 14 | + --wpbc_cal_legend-day-cell-height: 40px; | |
| 15 | + --wpbc_cal_legend-day-cell-width: var(--wpbc_cal_legend-day-cell-height); /* Usually it has to be the same as --wpbc_cal_legend-day-cell-height */ | |
| 16 | + --wpbc_cal_legend-day-cell-font-size: 14px; | |
| 17 | +} | |
| 13 | 18 | /*******************************************************************************/ |
| 14 | 19 | /* Calendar structure: */ |
| 15 | 20 | /*******************************************************************************/ |
| 16 | 21 | /* WIDTH: of calendar - its FULL width of Month(s) ROW (its NOT only one month) */ |
| @@ -24,10 +29,10 @@ | ||
| 24 | 29 | |
| 25 | 30 | */ |
| 26 | 31 | /* SIZE: Set width of calendar with several months */ /* FixIn: 9.7.3.4 */ |
| 27 | 32 | /* FixIn: Standard entire calendar WIDTH ============================================================================ */ |
| 28 | -.wpbc_no_custom_width.bk_calendar_frame { width: 100%; min-width:201px; } | |
| 29 | -.wpbc_no_custom_width.cal_month_num_1 { max-width: 341px; } | |
| 33 | +.wpbc_no_custom_width.bk_calendar_frame { width: 100%; width: calc(100% - 4px); min-width:201px; } | |
| 34 | +.wpbc_no_custom_width.cal_month_num_1 { max-width: 341px; /*max-width: Min(390px, 100%);*/ } | |
| 30 | 35 | .wpbc_no_custom_width.cal_month_num_2 { max-width: 682px; } |
| 31 | 36 | .wpbc_no_custom_width.cal_month_num_3 { max-width: 1023px; } |
| 32 | 37 | .wpbc_no_custom_width.cal_month_num_4 { max-width: 1364px; } |
| 33 | 38 | .wpbc_no_custom_width.cal_month_num_5 { max-width: 1705px; } |
| @@ -56,8 +61,9 @@ | ||
| 56 | 61 | } |
| 57 | 62 | .wpbc_calendar_wraper{ |
| 58 | 63 | min-width: 341px; |
| 59 | 64 | min-width: Min(341px, 100%); |
| 65 | + text-align: center; | |
| 60 | 66 | } |
| 61 | 67 | /* FixIn: 9.8.3.1 - Min. WIDTH of calendar One Month, before Wrap to next ROW ====================================== */ |
| 62 | 68 | .bk_calendar_frame .datepick-inline, |
| 63 | 69 | .bk_calendar_frame .datepick-one-month { |
| @@ -202,20 +208,26 @@ | ||
| 202 | 208 | } |
| 203 | 209 | /* HEIGHT: of C E L L S */ |
| 204 | 210 | .datepick-inline .datepick-title-row th, |
| 205 | 211 | .datepick-inline .datepick-days-cell{ |
| 206 | - height: 48px; | |
| 212 | + /* max-height: 48px; /* // FixIn: 10.12.4.2. */ | |
| 213 | + height:auto; | |
| 214 | + aspect-ratio: 1 / 1; | |
| 207 | 215 | } |
| 208 | 216 | @media (max-width: 400px) { |
| 209 | 217 | div.datepick-inline table .datepick-title-row th, |
| 210 | 218 | div.datepick-inline table .datepick-days-cell{ |
| 211 | - height: 40px !important; | |
| 219 | + /* height: 40px !important; /* // FixIn: 10.12.4.2. */ | |
| 220 | + height:auto; | |
| 221 | + aspect-ratio: 1 / 1; | |
| 212 | 222 | } |
| 213 | 223 | } |
| 214 | 224 | /* HEIGHT: of C E L L S in POPUP calendar */ |
| 215 | 225 | #datepick-div.datepick-inline .datepick-title-row th, |
| 216 | 226 | #datepick-div.datepick-inline .datepick-days-cell{ |
| 217 | - height: 35px; | |
| 227 | + /* height: 35px; /* // FixIn: 10.12.4.2. */ | |
| 228 | + height:auto; | |
| 229 | + aspect-ratio: 1 / 1; | |
| 218 | 230 | } |
| 219 | 231 | |
| 220 | 232 | /*******************************************************************************/ |
| 221 | 233 | /* S T R U C T U R E & S i z e s ****************************************/ |
| @@ -352,15 +364,23 @@ | ||
| 352 | 364 | vertical-align: middle; |
| 353 | 365 | width: 14.28571429%; |
| 354 | 366 | overflow: hidden; |
| 355 | 367 | } |
| 368 | +/* Fix to show calendar day cell borders with correct thickness */ | |
| 369 | +.datepick-inline .datepick-days-cell{ | |
| 370 | + overflow: visible; | |
| 371 | +} | |
| 356 | 372 | .datepick-inline .datepick-days-cell a, |
| 357 | 373 | .datepick-inline .datepick-days-cell span{ /* FixIn: 6.0.1.2 */ |
| 358 | 374 | position:relative; |
| 359 | 375 | z-index: 99; |
| 360 | 376 | } |
| 377 | +/* // FixIn: 10.9.4.3 Fix padding in TD / TH in some themes. 2024-12-31 */ | |
| 378 | +.datepick-inline table.datepick th, | |
| 379 | +.datepick-inline table.datepick td { | |
| 380 | + padding: 0 !important; | |
| 381 | +} | |
| 361 | 382 | |
| 362 | - | |
| 363 | 383 | /*******************************************************************************/ |
| 364 | 384 | /* Check In / Out Times ************************************************/ |
| 365 | 385 | /*******************************************************************************/ |
| 366 | 386 | .block_hints .block_check_in_out.check_in_time, /* Item for the LEGEND */ |
| @@ -483,69 +503,10 @@ | ||
| 483 | 503 | td.timespartly.check_in_time.check_out_time.check_in_time_date_approved.check_out_time_date2approve div, |
| 484 | 504 | td.timespartly.check_in_time.check_out_time.check_out_time_date_approved.check_in_time_date2approve div { |
| 485 | 505 | cursor: default; |
| 486 | 506 | } |
| 487 | - | |
| 507 | +/* FixIn: 10.14.2.3. */ | |
| 488 | 508 | /*******************************************************************************/ |
| 489 | -/* Set correct FONT of unselectable elements, when the check in date is selected */ | |
| 490 | -/*******************************************************************************/ | |
| 491 | -.datepick-inline .datepick .datepick-unselectable.check_in_time.date_approved, | |
| 492 | -.datepick-inline .datepick .datepick-unselectable.check_out_time.date_approved, | |
| 493 | -.datepick-inline .datepick .datepick-unselectable.check_in_time.date2approve, | |
| 494 | -.datepick-inline .datepick .datepick-unselectable.check_out_time.date2approve { | |
| 495 | -/* background-color: transparent;*/ /*FixIn: 7.0.1.19 */ | |
| 496 | -/* font-weight: 400;*/ /*FixIn: 9.5.0.2 */ | |
| 497 | -} | |
| 498 | - | |
| 499 | -/*******************************************************************************/ | |
| 500 | -/* W I D G E T **************************************************/ | |
| 501 | -/*******************************************************************************/ | |
| 502 | -/* Set HEIGHT of the CELLs in the Widget */ | |
| 503 | -.widget_wpdev_booking .hasDatepick .datepick-inline .datepick-title-row th, | |
| 504 | -.widget_wpdev_booking .hasDatepick .datepick-inline .datepick-days-cell{ | |
| 505 | - height: 48px; | |
| 506 | -} | |
| 507 | -/* Set calendar WIDTH and MARGIN in Widget */ | |
| 508 | -.widget_wpdev_booking .bk_calendar_frame{ | |
| 509 | - margin: 0 2%; | |
| 510 | - width: 96% !important; | |
| 511 | - max-width: 96% !important; /* //FixIn: 9.6.2.1 */ | |
| 512 | - min-width: 96% !important; | |
| 513 | -} | |
| 514 | -.widget_wpdev_booking .wpbc__row .bk_calendar_frame, | |
| 515 | -.widget_wpdev_booking .wpbc__field .bk_calendar_frame{ | |
| 516 | - margin: 0; | |
| 517 | - width: 100% !important; | |
| 518 | - max-width: 100% !important; | |
| 519 | - min-width: 100% !important; | |
| 520 | -} | |
| 521 | -/* LEGEND items show in 2 rows in Widget */ | |
| 522 | -.widget_wpdev_booking .wpdev_hint_with_text{ | |
| 523 | - float: left; | |
| 524 | - margin: 0; | |
| 525 | - width: 50% !important; | |
| 526 | -} | |
| 527 | -/* Set the WIDTH and MARGIN of the form FIELDS in Widget */ | |
| 528 | -.widget_wpdev_booking input, | |
| 529 | -.widget_wpdev_booking select, | |
| 530 | -.widget_wpdev_booking textarea, | |
| 531 | -.widget_wpdev_booking .wpdevelop input, | |
| 532 | -.widget_wpdev_booking .wpdevelop select, | |
| 533 | -.widget_wpdev_booking .wpdevelop textarea, | |
| 534 | -div#datepick-div input, | |
| 535 | -div#datepick-div select, | |
| 536 | -div#datepick-div textarea { | |
| 537 | - width: 96%; | |
| 538 | - margin: auto; | |
| 539 | -} | |
| 540 | -/* SELECT BUTTON and CHECKBOX fields have the Auto Width in Widget */ | |
| 541 | -/*.widget_wpdev_booking select,*/ | |
| 542 | -.widget_wpdev_booking input[type=button], | |
| 543 | -.widget_wpdev_booking input[type=checkbox]{ | |
| 544 | - width:auto; | |
| 545 | -} | |
| 546 | - | |
| 547 | -/*******************************************************************************/ | |
| 548 | 509 | /* Legend of days, which is shown under calendar *******************************/ |
| 549 | 510 | /*******************************************************************************/ |
| 550 | 511 | /* Full Legend Frame */ |
| 551 | 512 | .block_hints { |
| @@ -562,10 +523,13 @@ | ||
| 562 | 523 | flex-flow:row nowrap; /* FixIn: 9.5.0.3 */ |
| 563 | 524 | justify-content:flex-start; |
| 564 | 525 | align-items:center; |
| 565 | 526 | max-width: 100%; /* FixIn: 9.5.0.3 */ |
| 566 | - margin:10px 15px 5px 0; | |
| 527 | + margin: 7px 15px 7px 0; | |
| 567 | 528 | } |
| 529 | +.wpdev_hint_with_text .datepick-inline td.datepick-days-cell .wpbc-cell-box { | |
| 530 | + /*width: 100%;*/ | |
| 531 | +} | |
| 568 | 532 | /* Vertical orientation of Legend items */ |
| 569 | 533 | .block_hints_vertical.block_hints .wpdev_hint_with_text { |
| 570 | 534 | flex: 0 0 100%; |
| 571 | 535 | } |
| @@ -614,9 +578,9 @@ | ||
| 614 | 578 | /* Day Rates. Additional info at the top and bottom of the day cell. */ |
| 615 | 579 | .datepick-inline .datepick-days-cell div.date-content-bottom, |
| 616 | 580 | .datepick-inline .datepick-days-cell div.date-content-top { |
| 617 | 581 | font-size:0.7em; |
| 618 | - font-style: italic; | |
| 582 | + font-style: normal; | |
| 619 | 583 | line-height: 0.72em; |
| 620 | 584 | text-align: center; |
| 621 | 585 | padding:0; |
| 622 | 586 | width:100%; |
| @@ -622,8 +586,11 @@ | ||
| 622 | 586 | width:100%; |
| 623 | 587 | text-shadow:none; |
| 624 | 588 | position: relative; |
| 625 | 589 | } |
| 590 | +.datepick-inline .datepick-days-cell div.date-content-top div{ | |
| 591 | + line-height: 40%; | |
| 592 | +} | |
| 626 | 593 | /*******************************************************************************/ |
| 627 | 594 | /* Responsive Design For Mobile Devices ****************************************/ |
| 628 | 595 | /*******************************************************************************/ |
| 629 | 596 | @media (max-width: 782px) { |
| @@ -665,11 +632,42 @@ | ||
| 665 | 632 | .datepick-inline .datepick-days-cell .date-cell-content .date-content-top, |
| 666 | 633 | .datepick-inline .datepick-days-cell .date-cell-content .date-content-bottom { |
| 667 | 634 | flex: 1 1 35%; |
| 668 | 635 | line-height: normal; |
| 636 | + | |
| 637 | + display: flex; | |
| 638 | + flex-flow:column nowrap; | |
| 639 | + justify-content: space-between; | |
| 640 | + align-items: center; | |
| 669 | 641 | } |
| 670 | -.datepick-inline .datepick-days-cell .date-cell-content a { | |
| 642 | +/** == In date hint - Availability == ------------------------------------------------------------------------------ */ | |
| 643 | +.datepick-inline .datepick-days-cell .date-cell-content span.wpbc_in_date_hint__availability { | |
| 644 | + display: flex; | |
| 645 | + flex-flow: row nowrap; | |
| 646 | + justify-content: center; | |
| 647 | + align-items: baseline; | |
| 648 | + overflow: hidden; | |
| 649 | +} | |
| 650 | +.datepick-inline .datepick-days-cell .date-cell-content span.wpbc_in_date_hint__cost, | |
| 651 | +.datepick-inline .datepick-days-cell .date-cell-content span.wpbc_in_date_hint__availability * { | |
| 652 | + font-size: Max(8px, var(--wpbc_cal-text-cost-size, 0.7em)); | |
| 653 | + line-height: 1; | |
| 654 | + display: flex; | |
| 655 | + flex-flow: column nowrap; | |
| 656 | + align-items: center; | |
| 657 | + justify-content: center; | |
| 658 | +} | |
| 659 | +.datepick-inline .datepick-days-cell .date-cell-content span.wpbc_in_date_hint__availability .wpbc_in_date_hint__availability_number{ | |
| 660 | + font-weight: 600; | |
| 661 | +} | |
| 662 | +/** == End In date hint - Availability == -------------------------------------------------------------------------- */ | |
| 663 | +.datepick-inline .datepick-days-cell .date-cell-content a, | |
| 664 | +.datepick-inline .datepick-days-cell .date-cell-content span { | |
| 671 | 665 | flex: 1 1 30%; |
| 666 | + display: flex; | |
| 667 | + flex-flow: column nowrap; | |
| 668 | + align-items: center; | |
| 669 | + justify-content: center; | |
| 672 | 670 | } |
| 673 | 671 | .datepick-inline .timespartly .date-content-top{ |
| 674 | 672 | display: flex; |
| 675 | 673 | flex-flow: row nowrap; |
| @@ -695,8 +693,9 @@ | ||
| 695 | 693 | width: 100%; |
| 696 | 694 | height: 100%; |
| 697 | 695 | padding: 0; |
| 698 | 696 | margin: 0; |
| 697 | + aspect-ratio: 1 / 1; /* // FixIn: 10.12.4.2. */ | |
| 699 | 698 | } |
| 700 | 699 | .wpbc-cell-box .wpbc-diagonal-el { |
| 701 | 700 | display: none; /* Do not visible by default ! */ |
| 702 | 701 | position:absolute; /* Important to have parent element with "position: relative;" !!! */ |
| @@ -754,10 +753,11 @@ | ||
| 754 | 753 | * Fix border width issue in Chrome browser |
| 755 | 754 | * https://stackoverflow.com/questions/71674803/html-tables-has-a-weird-bold-horizontal-line-due-to-border-collapse-property/71703247#71703247 |
| 756 | 755 | */ |
| 757 | 756 | div.datepick-inline table.datepick { |
| 758 | - border-collapse: collapse; | |
| 759 | - border-spacing: 0; | |
| 757 | + border-collapse: collapse !important;; | |
| 758 | + border-spacing: 0 !important;; | |
| 759 | + border-color: transparent !important;; | |
| 760 | 760 | } |
| 761 | 761 | /* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox - it's for mobile devices: */ |
| 762 | 762 | @media screen and (-webkit-min-device-pixel-ratio:0) { |
| 763 | 763 | div.datepick-inline table.datepick, |
| @@ -762,9 +762,9 @@ | ||
| 762 | 762 | @media screen and (-webkit-min-device-pixel-ratio:0) { |
| 763 | 763 | div.datepick-inline table.datepick, |
| 764 | 764 | div.datepick-inline table.datepick th, |
| 765 | 765 | div.datepick-inline table.datepick td { |
| 766 | - border-width: 0.69px; | |
| 766 | + border-width: 0.69px !important;; | |
| 767 | 767 | } |
| 768 | 768 | } |
| 769 | 769 | /* Chrome 29+ */ |
| 770 | 770 | @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { |
| @@ -770,9 +770,9 @@ | ||
| 770 | 770 | @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { |
| 771 | 771 | div.datepick-inline table.datepick, |
| 772 | 772 | div.datepick-inline table.datepick th, |
| 773 | 773 | div.datepick-inline table.datepick td { |
| 774 | - border-width: 0.01px; | |
| 774 | + border-width: 0.01px !important;; | |
| 775 | 775 | } |
| 776 | 776 | } |
| 777 | 777 | /* iOS */ |
| 778 | 778 | @supports (-webkit-touch-callout: none) { |
| @@ -778,9 +778,9 @@ | ||
| 778 | 778 | @supports (-webkit-touch-callout: none) { |
| 779 | 779 | div.datepick-inline table.datepick, |
| 780 | 780 | div.datepick-inline table.datepick th, |
| 781 | 781 | div.datepick-inline table.datepick td { |
| 782 | - border-width: 0.68px; | |
| 782 | + border-width: 0.68px !important;; | |
| 783 | 783 | } |
| 784 | 784 | } |
| 785 | 785 | /* Chrome 22-28 * |
| 786 | 786 | @media screen and(-webkit-min-device-pixel-ratio:0) { |
| @@ -790,9 +790,9 @@ | ||
| 790 | 790 | div.datepick-inline table.datepick th {-chrome-:only(; |
| 791 | 791 | border-width: 0.01px; |
| 792 | 792 | );} |
| 793 | 793 | div.datepick-inline table.datepick td {-chrome-:only(; |
| 794 | - border-width: 0.01px; | |
| 794 | + border-width: 0.01px !important;; | |
| 795 | 795 | );} |
| 796 | 796 | } |
| 797 | 797 | */ |
| 798 | 798 | |
| @@ -850,5 +850,52 @@ | ||
| 850 | 850 | display:inline; |
| 851 | 851 | } |
| 852 | 852 | /* ================================================================================================================== */ |
| 853 | 853 | /* End Tooltips Content ********************************************************************************************* */ |
| 854 | -/* ================================================================================================================== */ | |
| 854 | +/* ================================================================================================================== */ | |
| 855 | +/* ================================================================================================================== */ | |
| 856 | +/* Calendar Legend Items Size *************************************************************************************** */ | |
| 857 | +/* ================================================================================================================== */ | |
| 858 | +.block_hints.datepick .wpdev_hint_with_text .wpbc_calendar_legend_table_width_height { | |
| 859 | + border: 0; | |
| 860 | + box-shadow: none; | |
| 861 | + float: left; | |
| 862 | + padding: 0; | |
| 863 | + | |
| 864 | + width: var(--wpbc_cal_legend-day-cell-width, 40px) !important; | |
| 865 | + min-width: var(--wpbc_cal_legend-day-cell-width, 40px); | |
| 866 | + height: var(--wpbc_cal_legend-day-cell-height, 40px); | |
| 867 | +} | |
| 868 | +.block_hints.datepick .wpdev_hint_with_text .wpbc_calendar_legend_table_width_height table.datepick.wpbc_calendar, | |
| 869 | +.block_hints.datepick .wpdev_hint_with_text .wpbc_calendar_legend_table_width_height .wpbc_calendar_legend_day_cell_height { | |
| 870 | + height: var(--wpbc_cal_legend-day-cell-height, 40px) !important; | |
| 871 | + width: var(--wpbc_cal_legend-day-cell-width, 40px) !important; | |
| 872 | + max-width: var(--wpbc_cal_legend-day-cell-width, 40px) !important; | |
| 873 | + min-width: var(--wpbc_cal_legend-day-cell-width, 40px) !important; | |
| 874 | +} | |
| 875 | +.block_hints.datepick .wpdev_hint_with_text .wpbc_calendar_legend_table_width_height .datepick-days-cell .date-cell-content a, | |
| 876 | +.block_hints.datepick .wpdev_hint_with_text .wpbc_calendar_legend_table_width_height .datepick-days-cell .date-cell-content span{ | |
| 877 | + font-size: var(--wpbc_cal_legend-day-cell-font-size, 12px); | |
| 878 | +} | |
| 879 | +/* ================================================================================================================== */ | |
| 880 | +/* Reset differnt CSS conflicts (such as with Elementor) in HTML Tables with Booking Calendar plugin ************** */ | |
| 881 | +/* ================================================================================================================== */ | |
| 882 | +table.datepick.wpbc_calendar{ | |
| 883 | + margin:0; | |
| 884 | +} | |
| 885 | +.datepick-inline thead, | |
| 886 | +.datepick-inline tbody, | |
| 887 | +.datepick-inline tr, | |
| 888 | +.datepick-inline th, | |
| 889 | +.datepick-inline td { | |
| 890 | + background: transparent !important; | |
| 891 | + padding: 0 !important; | |
| 892 | + border-color: transparent !important; | |
| 893 | +} | |
| 894 | +/* Remove underline of dates in calendar. (10.11.3.1) */ | |
| 895 | +.datepick-inline a:active, | |
| 896 | +.datepick-inline a:focus, | |
| 897 | +.datepick-inline a:hover, | |
| 898 | +.datepick-inline a{ | |
| 899 | + text-decoration: none !important; | |
| 900 | + outline:0 !important; | |
| 901 | +} | |
