/*---------------------------------------------------------------------------- Kendo control size overrides ---------------------------------------------------------------------------- Loaded AFTER the Kendo theme (default-main.css) in Site.Master so these win. The stock Kendo theme sizes every control at --kendo-font-size: 0.875rem (14px, because rem is relative to , not the 12px body). That makes grids, dropdowns and other controls noticeably larger than the old Telerik Extensions widgets, which inherited the site's 12px font. The theme reads var(--kendo-font-size) in .k-grid, .k-input-md, etc., so overriding it here rescales font (and therefore row height) across all Kendo controls at once. Adjust the single value below to taste. ----------------------------------------------------------------------------*/ :root { --kendo-font-size: 0.75rem; /* 12px — matches the old Telerik grids / site base */ --kendo-font-size-md: 0.75rem; } /* Tighten grid row height: the theme uses --kendo-spacing-2 (8px) of vertical cell padding, which — even with the smaller font above — leaves rows taller than the old grids. Trim the vertical padding; leave horizontal padding be. */ .k-grid .k-table-md .k-table-th, .k-grid .k-table-md .k-table-td { padding-block: 4px; } /* The stock theme borders form controls with --kendo-color-border, which is black at 8% opacity (~#ebebeb on white) - far fainter than the #CCC border Site.css puts on plain text/password inputs. Sitting next to those inputs, the Kendo DatePicker/TimePicker/DateTimePicker/ComboBox/DropDownList looked borderless. Match the site's input border so every form field reads the same. Hover/focus still fall through to the theme's darker border-alt. */ .k-input-solid, .k-picker-solid { border-color: #ccc; } /* Bookings Edit/Create render two copies of the Advanced Booking DateFrom/ TimeFrom/DateTo/TimeTo widgets with duplicate ids (one set in the role branch's .divAdvancedBookers1 rows, one in the always-rendered .divAdvancedBookers rows). Kendo runs both init scripts against the first matching id, so that widget is initialised twice; the second pass leaves its wrapper as ".k-datepicker k-input k-input-inner" - missing k-input-solid and carrying k-input-inner (border:0), so it collapses to no border. Force a border on the picker wrappers directly so it survives the double-init. This also matches the #ccc rule above for cleanly-initialised pickers. */ .k-datepicker.k-input, .k-timepicker.k-input, .k-datetimepicker.k-input { border: 1px solid #ccc; } /* Advanced Booking date + time pickers: lay the date and time side by side (From row above To row) as in the original Telerik screens. The same double-init that breaks the border also strips the inline width off the wrapper and leaves it display:flex (block-level), so the theme's width:100% made each picker fill the cell and the date/time stacked. Pin narrow widths and inline-flex, scoped to the advanced-booking rows, so they sit on one line. nowrap keeps them on one line (the cell grows a little to fit); the widths are sized to show the full dd/MM/yyyy date and HH:mm time plus their buttons. !important because the mangled wrapper's theme defaults would otherwise win. */ .divAdvancedBookers1 .editor-field, .divAdvancedBookers .editor-field { white-space: nowrap; } .divAdvancedBookers1 .editor-field .k-datepicker, .divAdvancedBookers .editor-field .k-datepicker { width: 150px !important; display: inline-flex !important; vertical-align: middle; } .divAdvancedBookers1 .editor-field .k-timepicker, .divAdvancedBookers .editor-field .k-timepicker { width: 98px !important; display: inline-flex !important; vertical-align: middle; margin-left: 2px; } /* The TimePicker drop-down list sizes itself to the (deliberately narrow) time input, so once a classic vertical scrollbar appears the HH:mm entries get clipped to just the hour. Widen the advanced-booking time popups - there is ample room to the right - so the full time and the scrollbar both fit. The popup is rendered at level, so it is targeted via its _timeview list id. Kendo sets an inline width: on BOTH the outer .k-child-animation-container AND the inner .k-list-container, so both must be overridden; the .k-list / .k-list-content are shrink-wrapped and need to be told to fill the widened container. !important overrides the inline widths. */ .k-child-animation-container:has(#TimeFrom_timeview), .k-child-animation-container:has(#TimeTo_timeview), .k-child-animation-container:has(#TimeFrom_timeview) .k-list-container, .k-child-animation-container:has(#TimeTo_timeview) .k-list-container { width: 100px !important; } .k-child-animation-container:has(#TimeFrom_timeview) .k-list, .k-child-animation-container:has(#TimeTo_timeview) .k-list, .k-child-animation-container:has(#TimeFrom_timeview) .k-list-content, .k-child-animation-container:has(#TimeTo_timeview) .k-list-content { width: 100% !important; } /* Booking Slots grid (Machine Edit) StartTime picker: same popup-clipping as the advanced-booking time pickers above. The editor is TimeKendo bound to the StartTimeSpan column, so the popup is targeted via its #StartTimeSpan_timeview list id. The grid cell input is narrow, so widen the popup (rendered at level) so HH:mm and the scrollbar both fit. */ .k-child-animation-container:has(#StartTimeSpan_timeview), .k-child-animation-container:has(#StartTimeSpan_timeview) .k-list-container { width: 100px !important; } .k-child-animation-container:has(#StartTimeSpan_timeview) .k-list, .k-child-animation-container:has(#StartTimeSpan_timeview) .k-list-content { width: 100% !important; } /* When a ComboBox/DropDownList popup opens with no value chosen yet, Kendo puts its focus ring (box-shadow) on the first list item, so it looks pre-highlighted before the user has actually picked anything. The old Telerik widgets highlighted nothing until a selection was made. Suppress the focus ring on a focused item unless it is also the selected one. */ .k-list-item.k-focus:not(.k-selected) { box-shadow: none; outline: none; }