/* * Bookly Jalali — minor visual tweaks. * * Persian digits look best with tabular figures and a font that has a * dedicated Persian set. We don't ship a font; we ask the browser to prefer * common Persian-friendly system fonts when rendering Bookly UI. */ .bookly-wrap, .bookly-form, .bookly-modern-form, .bookly-cabinet, .bookly-calendar, .bookly-table { font-feature-settings: "tnum" 1; -moz-font-feature-settings: "tnum"; } .bookly-jalali-settings .form-table th { width: 280px; } .bookly-jalali-conflict-notice .button { margin-block: 4px; } [dir="rtl"] .bookly-form, [dir="rtl"] .bookly-modern-form { text-align: right; } /* Mixed Persian + Latin (year digits, time codes) display predictably * regardless of the surrounding paragraph direction. */ .ec-toolbar .ec-title, .ec-day-side { unicode-bidi: plaintext; } /* The injected "Jalali date" column needs an LTR base so the date * portion stays on the left and the time on the right of each cell, * regardless of any ancestor's direction setting. */ .bj-jalali-col { direction: ltr !important; unicode-bidi: isolate; text-align: left; } /* Styling for the ::after element appended next to the Event Calendar * toolbar title. Content is left to project CSS (or our JS via * data-jalali) — this rule only sets size + spacing. */ #bookly-tbs .ec .ec-toolbar .ec-title::after { font-size: 1rem; margin-right: .5rem; } #bookly-tbs .h4, #bookly-tbs h4 time {font-size: 1rem;} /* persian-datepicker appends its popup to . Bookly's Edit Appointment * modal is z-index 1050+, so without an override the popup opens but is * hidden behind the modal — looks like "nothing happens" on click. */ .pwt-datepicker, .datepicker-container { z-index: 999999999999 !important; } /* Hide the dashboard's "See the number of appointments…" helper line. * The Jalali column layout already pushes the date range below the * column heading, so this English helper sits awkwardly. This stylesheet * is only loaded when the Jalali switch is on, so hiding here is * implicitly Jalali-only. */ #bookly-tbs .row.my-3 .col-md-6 > h6.text-muted { display: none !important; } /* Keep month-bearing time elements in plaintext bidi so the digits and * Persian text render in a stable order, but don't append a month label * by default. (Project CSS may add `content: attr(data-month)` if * desired.) */ .ec-day > .ec-day-head > time[datetime][data-month], .ec-day-side[data-month] { unicode-bidi: plaintext; } /* Bookly's Tailwind-style `.bookly:checkbox` class ships unstyled for the * `:checked` state on some admin builds — the checkbox fills with the * browser default instead of the WP admin accent. Bring it back in line * with the rest of WordPress admin controls. */ input[type="checkbox"].bookly\:checkbox:checked { background: var(--wp-admin-theme-color) !important; border-color: var(--wp-admin-theme-color) !important; } /* Bookly's time-slot columnizer can get its bidi reordering wrong on * pages with Jalali date conversion (numerals + Persian text mixing * resets the columnizer's expected LTR flow). Pin its direction so the * columns and slot times always lay out left-to-right inside an RTL * page. Only ships when the plugin's frontend assets are enqueued, * i.e. when Jalali conversion is enabled in settings. */ .bookly-columnizer { min-height: .01%; white-space: nowrap; position: relative; direction: ltr; unicode-bidi: plaintext; } /* ----- Time-step Jalali calendar -------------------------------------- * * Bookly's Svelte calendar stays mounted so its click handlers still run * when our overlay dispatches synthetic clicks against its cells. We mount * our Jalali grid as the first child of .bookly-js-slot-calendar so it * inherits the parent's flex slot, then visually hide all OTHER children * (the Svelte-rendered DOM) while leaving them in the layout/event flow. */ .bookly-js-slot-calendar.bj-time-svelte-hidden { /* Container behaves like our grid sits in its own box. */ position: relative !important; overflow: visible !important; } .bookly-js-slot-calendar.bj-time-svelte-hidden > *:not(.bj-time-calendar):not(.bookly-js-selected-date) { position: absolute !important; top: 0 !important; left: 0 !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: auto !important; /* keep clickable for synthetic clicks */ z-index: -1 !important; } .bj-time-calendar { direction: rtl; font-feature-settings: "tnum" 1; width: 18rem; min-width: 200px; background: #fff; border: 1px solid #eee; border-radius: 6px; padding: 8px 10px 10px; box-sizing: border-box; color: #444; user-select: none; } .bj-tc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .bj-tc-title { flex: 1; text-align: center; font-weight: 600; font-size: .95rem; color: #444; } .bj-tc-nav { appearance: none; background: transparent; border: 0; color: #888; font-size: 1.25rem; line-height: 1; padding: 4px 10px; cursor: pointer; border-radius: 4px; } .bj-tc-nav:hover { color: #e0633a; background: rgba(224, 99, 58, .08); } .bj-tc-weekdays, .bj-tc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .bj-tc-wd { text-align: center; font-size: .78rem; color: #aaa; padding: 4px 0 6px; } .bj-time-calendar .bj-tc-day { appearance: none; background: transparent; border: 0; text-align: center; padding: 8px 0; font-size: .9rem; color: #e0633a; cursor: pointer; border-radius: 4px; transition: background-color .12s; line-height: 1.2; } .bj-time-calendar .bj-tc-day.bj-tc-available:hover { background: rgba(224, 99, 58, .12) !important; color: #e0633a !important; } .bj-time-calendar .bj-tc-outside, .bj-time-calendar .bj-tc-day[aria-disabled="true"] { color: #e3e3e3; cursor: not-allowed; opacity: .55; } .bj-time-calendar .bj-tc-outside:hover, .bj-time-calendar .bj-tc-day[aria-disabled="true"]:hover { background: transparent !important; } .bj-time-calendar .bj-tc-holiday { text-decoration: line-through; color: #ccc; } .bj-tc-available { color: #e0633a; font-weight: 500; } .bj-tc-selected { background: #e0633a !important; color: #fff !important; }