/* * Small app-side layer on top of Bitrix24's vendored ui.forms.css. * * The app's fields use Bitrix's `.ui-ctl-element` class directly rather than * being wrapped in Bitrix's full `
` markup (85 fields * across 11 templates — a class swap is far less invasive than restructuring * every field's DOM, and `.ui-ctl-element` is self-contained enough to carry * the native look on its own). These rules re-supply the two things that the * wrapper would normally have provided. */ /* ------------------------------------------------------------------------ * 0. Typography * * Use Bitrix24's own font stack app-wide so text matches the portal around it, * instead of Tailwind/Bootstrap's default sans stack. --ui-font-family-primary * comes from the vendored ui.design-tokens.css. * ------------------------------------------------------------------------ */ body, .modal, .dropdown-menu, input, select, textarea, button { font-family: var(--ui-font-family-primary, var(--ui-font-family-helvetica, "Helvetica Neue", Helvetica, Arial, sans-serif)); } /* Headings in Bitrix's own weight/colour rather than Tailwind's heavy default. */ h1, h2, h3, h4, h5, h6 { font-family: var(--ui-font-family-primary, var(--ui-font-family-helvetica, "Helvetica Neue", Helvetica, Arial, sans-serif)); color: #333; } /* App title in the topbar: a heading, not a link. Bitrix renders page titles as plain dark text — the underlined blue link styling made it look like broken body copy. */ /* The topbar's left group (home button + title). * * min-width:0 is supplied HERE rather than with Tailwind's `min-w-0` utility: * assets/css/tailwind.css is a prebuilt file, and that class isn't in it (it * computes to `auto`, verified in the browser). Without min-width:0 a flex item * refuses to shrink below its content's intrinsic width, so the title stayed at * full width and pushed the pills to overflow — the exact bug this is fixing. * Don't swap this back to a utility class without checking the class exists. */ .b24-topbar-brand { min-width: 0; /* ...but never below the home button + the logo. * * min-width:0 alone lets this group shrink to LITERALLY ZERO, and it did: * measured 0px at <=1050px, i.e. the logo silently disappeared from the * topbar in a real Bitrix slider. Worse, it made the row *look* correct — * "pills on one row, no overflow" passed precisely BECAUSE the brand had * been crushed out of existence to make room. * * 120px = home button (49) + gap (16) + logo (54), measured — not estimated. * A first attempt used 94px from guessed values (32 + 12 + 54) and the logo * still rendered at 29px: `.ui-btn` has its own padding, so the home button * is 49px, and 94 - 49 - 16 leaves exactly the 29px that was observed. * * The brand is the one thing on this row that must always be visible; the * count pills are secondary, and every pill added to that group comes * straight out of this space. */ min-width: 120px; } .b24-app-title { margin: 0; /* 17px, not 20px: the topbar has to fit the title, seven live count pills and the menu on ONE row. The pills are data and are held at flex-nowrap, so the title is what has to fit — and a longer brand name than "Property Listing" is exactly what tipped it into wrapping at ~1170px. */ font-size: 17px; font-weight: 600; line-height: 1.2; white-space: nowrap; /* Last-resort graceful degradation: below the width where even the shortened title fits, clip it rather than shove the pills onto a second row. The full name stays available as the element's title attribute. min-width:0 is required — a flex child won't shrink below its content without it, which is what makes the ellipsis actually engage. */ min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* ---- topbar brand lockup: [logo]["PROPERTY / LISTING"] ---- * * The flex row is scoped to the --lockup modifier, i.e. only applied when the * wordmark is actually on disk. The no-logo fallback stays a plain text h1 on * purpose: making it flex would turn its spans into flex items and stop the * `text-overflow: ellipsis` above from ever engaging. */ .b24-app-title--lockup a { display: flex; align-items: center; gap: 8px; } /* The lockup variant must NOT inherit .b24-app-title's overflow:hidden. * * That rule exists for the TEXT fallback, where clipping to an ellipsis is the * intended degradation. Applied to the lockup it silently guillotines the * artwork instead: the

shrank to 83px while its content needed 129px, so * 46px was cut off the right and "PROPERTY" rendered as "PROPER" — a clipped * word with no ellipsis to signal it. The lockup is fixed-size; it either fits * or it is hidden outright by the media query below. It is never squeezed. */ .b24-app-title--lockup { overflow: visible; flex-shrink: 0; } /* The wordmark. Height-constrained with width:auto so any aspect ratio works without distortion — the logo is the brand and must never be squashed. At 28px tall a ~2:1 wordmark is only ~56px wide, comfortably narrower than the text title it replaces, so it eases the one-row fit rather than straining it. */ .b24-app-logo { display: block; height: 28px; width: auto; max-width: 100%; object-fit: contain; /* The descriptor beside it is dropped before the logo is touched (see the media query below). flex-shrink:0 stops the logo shrinking as a flex item, but note `max-width:100%` still caps it to whatever width the has — so below ~1010px, where the toolbar genuinely can't fit home + logo + seven pills + menu, it does scale down. `object-fit: contain` keeps it proportional rather than distorted when that happens. Measured: full 54px at 1170px (the width where the pills used to wrap) and above. */ flex-shrink: 0; } /* "PROPERTY / LISTING" beside the logo — two stacked lines rather than one long string, so the lockup stays about as tall as the 28px logo and costs ~75px of toolbar width instead of ~150px. That width matters: the seven status pills share this row and must not wrap (see .b24-topbar-brand). */ .b24-app-lockup { display: flex; flex-direction: column; justify-content: center; /* Small, tight and tracked-out: it's a product descriptor sitting next to a logo, not a heading competing with it. */ font-size: 11px; font-weight: 700; line-height: 1.12; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; /* Bitrix's own dark text, not the brand navy — the app deliberately keeps the native palette (see the project's branding decision). */ color: #333; /* Never let it be compressed: partially-clipped words are worse than no descriptor at all. If it doesn't fit, the media query below removes it. */ flex-shrink: 0; } .b24-app-lockup-line { display: block; } /* Below this the toolbar can't hold logo + descriptor + the count pills + the menu, so the descriptor goes and the logo stays. The app name is still on the h1's title attribute and in the browser tab, so nothing is actually lost. * * 1070px is MEASURED, and it MUST be re-measured whenever the pill row changes: * full brand 194 (home 49 + gap 16 + logo 54 + gap 8 + lockup 67) * + pills 724 (7 pills + Bitrix's native 12px inter-button margins) * + menu 62 * + bar gaps 32 + bar padding 48 * = 1060, so 1070 leaves a little room. * * History, because this has broken three times: it was 1050 when the pill row * was narrower; adding a pill pushed the real limit to ~1150 and opened a window * where the lockup showed but could not fit, so the h1 clipped it mid-word * ("PROPERTY" -> "PROPER"). The row and the brand share one fixed budget — * change either and this number is wrong until re-measured. */ @media (max-width: 1070px) { .b24-app-lockup { display: none; } } /* Full name by default; short brand once the slider is too narrow to hold the title, seven count pills and the menu on one row. Swapping the text beats letting the ellipsis eat the company name — at ~950px the clipped title rendered as literally nothing, which reads as a broken header. */ .b24-app-title-short { display: none; } @media (max-width: 1200px) { .b24-app-title-full { display: none; } .b24-app-title-short { display: inline; } } .b24-app-title a, .b24-app-title a:hover, .b24-app-title a:focus { color: #333; text-decoration: none; } /* ------------------------------------------------------------------------ * 0b. Modal stacking * * The Add-X dialogs (views/modals/add-agent|add-developer|add-bayut-location| * add-pf-location.php) are hand-rolled Tailwind overlays — `fixed inset-0` * with NO z-index — not Bootstrap modals. Two positioned, z-indexed elements * therefore painted straight through them: * - `.ui-ctl-element { z-index: 1 }` from Bitrix's vendored ui.forms.css * (the toolbar search box) * - `thead tr th { position: sticky; z-index: 1 }` from header.php * which is why the dialog's title/labels appeared cut off behind the page. * Lift the overlay above both (Bootstrap uses 1055 for .modal; match it so * the two modal systems can't fight each other either). * ------------------------------------------------------------------------ */ #addModal { z-index: 1055; } /* ------------------------------------------------------------------------ * 0c. Bitrix-styled confirm/alert dialog (views/components/b24-dialog.php) * * Replaces the browser's native confirm()/alert(), which inside Bitrix's * iframe render as "An embedded page at says…" — leaking the * tunnel hostname and looking nothing like the portal. Chrome mirrors the * Bitrix popup spec used by .modal-content above. Sits above #addModal (1055) * so a confirm raised from within a dialog is still reachable. * ------------------------------------------------------------------------ */ .b24-dialog-overlay { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: center; justify-content: center; background: rgba(51, 51, 51, .5); } .b24-dialog-overlay.hidden { display: none; } .b24-dialog { min-width: 340px; max-width: 480px; border-radius: var(--popup-window-border-radius, 4px); background-color: #fff; box-shadow: 0 7px 21px rgba(83, 92, 105, .12), 0 -1px 6px 0 rgba(83, 92, 105, .06); font: 13px var(--ui-font-family-primary, var(--ui-font-family-helvetica)); } .b24-dialog-header { height: 49px; padding: 0 20px; display: flex; align-items: center; border-bottom: 1px solid #edeef0; color: #80868e; font-size: 14px; font-weight: var(--ui-font-weight-bold, 700); } .b24-dialog-body { padding: 20px; color: #535c69; font-size: 14px; line-height: 1.45; } .b24-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 20px; } .b24-dialog-footer .hidden { display: none; } /* 1. Selects. .ui-ctl-element sets `appearance: none`, which strips the browser's native dropdown arrow. Bitrix normally re-adds one via a `.ui-ctl-after .ui-ctl-icon-angle` element inside the wrapper. This reuses that icon's exact data-URI so the arrow is Bitrix's own, not a lookalike. */ select.ui-ctl-element { padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23828B95'%3E%3Cpath d='M7.071 10.858l1.414-1.414 5.657 5.656-1.414 1.414z'/%3E%3Cpath d='M16.97 9.444l1.415 1.414-5.657 5.657-1.414-1.415z'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; background-size: 26px auto; } /* 2. Textareas. The base .ui-ctl-element is sized for single-line controls (fixed --ui-field-size height, nowrap, overflow hidden). Bitrix relaxes this via a `.ui-ctl-textarea` wrapper; without one, textareas would be clipped to one line. */ textarea.ui-ctl-element { height: auto; min-height: calc(var(--ui-field-size) * 2); padding: 8px 11px; overflow: auto; white-space: pre-wrap; text-overflow: clip; resize: vertical; line-height: 1.4; } /* 3. Field labels in Bitrix's own type scale/colour, so labels sit correctly against the native controls. */ .ui-ctl-element + .ui-ctl-element { margin-top: 8px; } /* ------------------------------------------------------------------------ * 4. Grid / list tables — REMOVED. * * This section held a hand-copied .b24-grid reproduction of Bitrix's grid, * plus .b24-grid-thumb / .b24-grid-link row helpers double-scoped onto * .main-grid-table for the tables that had moved to the vendored * main.ui.grid.css. Both lineages are gone: all six lists (properties, pocket, * agents, developers, bayut-locations, pf-locations) are now .bwc-list and own * their table, header, thumbnail and link styling in bwc-list.css. * * Verified before deleting, on each of the six lists with rows actually * rendered (an empty table matches nothing and would "prove" anything dead): * zero elements matched .b24-grid*, .main-grid* or .b24-col-*. * * Do not reintroduce a generic table reproduction here. bwc-list.css is the * one place a list table is styled. * ------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------ * 6. Iconography * * Bitrix's UI uses coloured icons rather than flat black/grey. These use the * real --ui-color-accent-* tokens from ui.design-tokens.css so the hues are * Bitrix's own palette, not invented ones. * * The .b24-grid-scoped bed/bath/ruler icon colours that used to open this * section went with §4 — bwc-list.css carries the row icon styling now. * ------------------------------------------------------------------------ */ /* Dropdown/action menu icons: primary by default, red for destructive rows (Bootstrap's .text-danger already colours the label — match the icon). */ .dropdown-menu .dropdown-item i { color: var(--ui-color-primary, #2fc6f6); } .dropdown-menu .dropdown-item.text-danger i { color: var(--ui-color-danger, #ff5752); } /* Keep icons inside solid buttons matching the button's own text colour rather than being re-tinted by the rules above. */ .ui-btn i { color: inherit; } /* ------------------------------------------------------------------------ * 6b. Toolbar search sizing * * Bitrix's `.ui-ctl` carries a hard `width: 320px`, so a search control built * from it refuses to shrink and forces the toolbar to wrap onto a second row * in narrow viewports — which is exactly what happens inside Bitrix's own * slider once it settles to its final (narrower) width a moment after opening. * Let it flex down instead so filter + search + actions stay on one row. * ------------------------------------------------------------------------ */ .b24-toolbar-search { width: auto; flex: 1 1 160px; min-width: 130px; max-width: 320px; } /* The flex children either side of the toolbar must be allowed to shrink below their content width for the search's flex-shrink to take effect. */ .b24-toolbar { flex-wrap: nowrap; } .b24-toolbar > * { min-width: 0; } /* Below ~720px there genuinely isn't room for one row — wrap then, rather than overflow the slider. */ @media (max-width: 720px) { .b24-toolbar { flex-wrap: wrap; } } /* ------------------------------------------------------------------------ * 6c. Reports cards + legend * * The old legend was a single non-wrapping flex row; with six chips per chart * it ran off the side of the slider and forced a page-wide horizontal * scrollbar. This wraps, and uses Bitrix's card surface + accent palette. * ------------------------------------------------------------------------ */ .b24-report-card { background-color: #fff; border: 1px solid #edeef0; border-radius: var(--ui-border-radius-md, 6px); box-shadow: 0 1px 3px rgba(83, 92, 105, .06); padding: 0 0 18px; display: flex; flex-direction: column; } .b24-report-card-head { height: 45px; display: flex; align-items: center; padding: 0 18px; border-bottom: 1px solid #edeef0; color: #535c69; font-size: 14px; font-weight: 600; } .b24-report-chart { display: flex; align-items: center; justify-content: center; min-height: 230px; padding: 18px 0 6px; } .b24-report-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; padding: 6px 18px 0; } .b24-legend-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #edeef0; border-radius: 12px; background-color: #f8fafb; font-size: 12px; white-space: nowrap; } .b24-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .b24-legend-label { color: #6a737f; } .b24-legend-value { color: #333; font-weight: 600; } /* Empty state injected by the chart JS when a panel has no data. */ .b24-report-empty { color: #a8adb4; font-size: 13px; text-align: center; } /* ------------------------------------------------------------------------ * 7. Action menus (row "..." menu, Bulk Actions, filter dropdown) * * Modelled on Bitrix's own `.menu-popup` (main/popup/src/css/popup.css), which * is what its CRM row-action menu uses. Real values from that file: * .menu-popup-item-text -> #525c68, line-height 36px, padding 0 15px 0 9px * .menu-popup-item:hover -> bg #f5f5f6 * .menu-popup-item:hover .menu-popup-item-text -> #3b434f * Applied to Bootstrap's .dropdown-menu/.dropdown-item because the menus are * driven by Bootstrap's dropdown JS (data-bs-toggle) — restyling the chrome * keeps that working. Bitrix's own menu is plain text; the app's coloured * icons are kept (deliberate — they were requested) but sized/spaced to sit * quietly like Bitrix's. * ------------------------------------------------------------------------ */ .dropdown-menu { padding: 6px 0; border: none; border-radius: var(--popup-window-border-radius, 4px); background-color: #fff; box-shadow: 0 7px 21px rgba(83, 92, 105, .12), 0 -1px 6px 0 rgba(83, 92, 105, .06); font-family: var(--ui-font-family-primary, var(--ui-font-family-helvetica)); } .dropdown-menu .dropdown-item { display: flex; align-items: center; padding: 0 15px 0 12px; line-height: 36px; color: #525c68; font-size: 13px; white-space: nowrap; transition: color .2s linear, background-color .2s linear; } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background-color: #f5f5f6; color: #3b434f; } /* Bitrix's menu keeps a calm, even icon column rather than mixed-width glyphs. */ .dropdown-menu .dropdown-item i { width: 16px; margin-right: 8px; text-align: center; font-size: 13px; flex-shrink: 0; } .dropdown-menu .dropdown-header { padding: 6px 12px 2px; color: #a8adb4; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; } .dropdown-menu .dropdown-divider { margin: 6px 0; border-top: 1px solid #edeef0; opacity: 1; } /* Destructive rows keep Bitrix's danger red on hover too (Bootstrap's .text-danger sets the label colour; don't let :hover override it). */ .dropdown-menu .dropdown-item.text-danger, .dropdown-menu .dropdown-item.text-danger:hover { color: var(--ui-color-danger, #ff5752); } /* ------------------------------------------------------------------------ * 5. Modals * * Bitrix's own dialog is BX.PopupWindow (main.popup) — a JS component that * builds its own DOM. This app's modals are Bootstrap modals driven by * Bootstrap's JS (data-bs-toggle/data-bs-target), and swapping that mechanism * out would mean rewriting every modal's trigger + lifecycle. Instead the * Bootstrap chrome is restyled to Bitrix's popup spec, values taken from * main/popup/src/css/popup.css: * * .popup-window -> bg #fff, 13px Bitrix font, that exact 2-layer * shadow, --popup-window-border-radius (4px default) * .popup-window-titlebar -> height 49px * .popup-window-titlebar-text -> #80868e, 14px, bold, line-height 49px * .popup-window-overlay -> #333 @ 50% * ------------------------------------------------------------------------ */ .modal-content { border: none; border-radius: var(--popup-window-border-radius, 4px); background-color: #fff; box-shadow: 0 7px 21px rgba(83, 92, 105, .12), 0 -1px 6px 0 rgba(83, 92, 105, .06); font: 13px var(--ui-font-family-primary, var(--ui-font-family-helvetica)); } .modal-header { height: 49px; padding: 0 16px; align-items: center; border-bottom: 1px solid #edeef0; } .modal-header .modal-title { color: #80868e; font-size: 14px; font-weight: var(--ui-font-weight-bold, 700); line-height: 49px; } .modal-footer { border-top: 1px solid #edeef0; padding: 12px 16px; } .modal-backdrop.show { background: #333; opacity: .5; } /* --------------------------------------------------------------------------- * 8, 9, 10. Genuine main.ui.grid support — REMOVED. * * These three sections propped up Bitrix's vendored main.ui.grid.css: refusing * to inherit Tailwind typography into .main-grid-table, forcing * `table-layout: auto` back over Bitrix's `fixed` (its JS assigns the per-column * widths that make `fixed` work, and an external app can't run that component), * the .b24-grid-text-line / .b24-grid-details column-width levers, and the * .main-grid-container scroll box that kept the horizontal scrollbar on screen. * * main.ui.grid.css is gone and no .main-grid-* markup is left, so every one of * them matched zero elements. The lessons they encode did not die with them — * bwc-list.css carries them forward for .bwc-list: its own column sizing * (min-width 1440px + a capped Details column), and .bwc-list-box as the scroll * box, still measured by sizeGridBox() in views/footer.php so the horizontal * scrollbar cannot strand itself below the fold. * * .b24-col-extra / .b24-col-md went too. They were kept as hooks for a future * column chooser and deliberately hid nothing; Listings shipped a real column * chooser (COLUMNS in views/properties/index.php), so the hooks are moot. * ------------------------------------------------------------------------- */ /* ---- switcher bridge: real checkbox -> Bitrix's ui-switcher visual ---- * * Bitrix drives its switcher with the ui.switcher JS component (a BX-core * extension an external app can't run), which toggles a `.ui-switcher-off` * class on click. This app instead wraps a REAL and * derives the state from `:checked` in pure CSS — no JS at all. * * Why a real checkbox rather than a div + click handler: * - The