Copy page

Booking widget

Look

The widget has one look of its own, the Plain preset, in the rental's colours. Your site's CSS always wins over it. Or you leave it out and style every part yourself.

Plain

The root, and a <mellow-search> that stands alone, load Plain unless they say preset="none". Plain wears the colours and corners from the rental's Settings · Customer pages in Mellow, on solid cards with a thin line. It takes the site's own typeface.

Three rules keep the site in charge:

• Every rule of Plain is in @layer mellow. The script puts the stylesheet first in <head>, so this layer comes before every layer of the site. Any rule of the site wins, with no !important. A Tailwind utility class wins too.
• Every selector is in :where(), so it has no specificity.
• Plain styles element names, part names and data-* state only. It never styles a class.

On a wide screen the steps sit beside the summary. When both do not fit, the summary goes below. The insurance compare is a table when its step is at least 40rem wide, and stacked cards when it is narrower.

A site may link the stylesheet itself, such as to read it, at https://mllw.is/widget/1/plain.css.

Tokens

Plain reads CSS custom properties on the root. Set one on the element, and it wins:

Code
mellow-booking,
mellow-search {
  --mellow-accent: #0a7c66;
  --mellow-radius: 0;
  --mellow-font: "Inter", sans-serif;
}

The script fills the first five from the rental's look in Mellow, once it starts. The rest have the defaults below. A default with light-dark() follows the site's color-scheme.

Token	Default	Meaning
--mellow-accent	#4a4448	The brand colour: buttons, the picked days, the chosen card's ring and the progress dots. Mellow's neutral grey when the rental has no brand colour. From the rental's look.
--mellow-accent-text	#ffffff	The text on the brand colour. From the rental's look.
--mellow-second	#a1a1aa	The second colour: the "Our pick" badge, the test-mode note and the range between the picked days. From the rental's look.
--mellow-radius	10px	The corners of cards. From the rental's look: Sharp 4px, Soft 10px, Round 20px.
--mellow-radius-control	6px	The corners of boxes and buttons. From the rental's look: Sharp 2px, Soft 6px, Round 9999px.
--mellow-font	inherit	The typeface. The site's own by default.
--mellow-surface	light-dark(#ffffff, #1c1b1e)	The ground of cards and boxes.
--mellow-text	light-dark(#1d1b1f, #ecebee)	The text.
--mellow-muted	light-dark(#625d66, #a6a1aa)	Quiet text, such as a hint.
--mellow-line	light-dark(#dcd9df, #38353c)	Lines and borders.
--mellow-alert	light-dark(#b42318, #f97066)	Errors.
--mellow-accent-ink	Made from --mellow-accent	The brand colour as text or as a ring, lighter in dark mode.
--mellow-soft	Made from --mellow-accent and --mellow-surface	A pale ground in the brand colour.
--mellow-second-soft	Made from --mellow-second and --mellow-surface	A pale ground in the second colour.
--mellow-raised	Made from --mellow-surface	The ground of a list or a time picker that opens over the card. A step lighter in dark.
--mellow-hover	Made from --mellow-text and --mellow-raised	The highlighted option of a list, a wash of the text colour.
--mellow-gap	16px	The space between parts.
--mellow-ground	transparent	The ground under the whole widget. None by default: the site's page shows.
--mellow-ground-padding	0	The space between the ground's edge and the widget.

Light and dark

Plain follows the site's own color-scheme. A light site thus never gets a dark widget. When the rental's Customer pages say Always light or Always dark, Plain takes that scheme instead, and lays its own ground under the widget with 20px around it, so its text never sits on the wrong page.

Your own CSS

Style the widget as any part of your page. Use the element names, the part names and the data-* state, not classes: the widget sets no class.

Code
mellow-car-type[data-state="sold-out"] {
  opacity: 0.6;
}
mellow-car-type[data-kind="camper"] [part="price"] {
  font-size: 1.25rem;
}
mellow-day[data-state~="start"] button,
mellow-day[data-state~="end"] button {
  background: var(--brand);
}
mellow-option[data-recommended] {
  outline: 2px solid var(--brand);
}

The widget hides a part with the hidden attribute, and some elements also with data-hidden. A rule of yours that sets display must keep these hidden:

Code
mellow-step:not([hidden]) {
  display: grid;
}

Elements lists the state and the parts of each element.

No preset

preset="none" loads no CSS at all. Then every part has the browser's own look, and your CSS gives it all its style. A custom element is inline by default, so start with this:

Code
mellow-booking,
mellow-search {
  display: block;
}

A theme that leaks in

Some themes style every button, input or table on the page, and the widget gets them too. When that does harm, isolate on <mellow-booking> draws the default flow into a shadow root. The page's CSS then does not reach it. Only the tokens and ::part() style it:

Code
mellow-booking::part(main) {
  max-width: 48rem;
}

Under isolate your own child elements are left out, and the embedded Rapyd card form does not work yet.