typesense-minibar/typesense-minibar.css

Fast 2kB autocomplete search bar

/*! https://github.com/jquery/typesense-minibar 1.3.4 */
.tsmb-form,
typesense-minibar {
  --tsmb-size-edge: 1px;
  --tsmb-size-radius: 3px;
  --tsmb-size-highlight: 2px;
  --tsmb-size-base: 1rem;
  --tsmb-size-sm: 0.8rem;
  --tsmb-size-half: calc(var(--tsmb-size-sm)/2);
  --tsmb-size-input: calc(var(--tsmb-size-base) * 1.2);
  --tsmb-size-listbox-right: auto;
  --tsmb-size-listbox-width: calc(min(30rem, 60vw));
  --tsmb-size-listbox-max-height: 70vh;

  --tsmb-color-base-background: #fff;
  --tsmb-color-base30: #333;
  --tsmb-color-base50: #63676d;
  --tsmb-color-base90: #cdcdcd;
  --tsmb-color-focus-background: #fff;
  --tsmb-color-focus30: #333;
  --tsmb-color-focus50: #63676d;
  --tsmb-color-focus90: #cdcdcd;

  --tsmb-color-primary30: #390f39;
  --tsmb-color-primary50: #9c3493;
  --tsmb-color-primary90: #fbdbfb;

  max-width: 100%;
}

.tsmb-form,
typesense-minibar form {
  position: relative;
  width: 20rem;
  max-width: 100%;
  padding: 0;
  color: var(--tsmb-color-base30);
}

.tsmb-form input[type=search],
typesense-minibar input[type=search] {
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: inherit;
  background: var(--tsmb-color-base-background);
  padding: var(--tsmb-size-sm) var(--tsmb-size-sm) var(--tsmb-size-sm) calc(var(--tsmb-size-base) + var(--tsmb-size-sm) + var(--tsmb-size-sm));
  border: var(--tsmb-size-edge) solid var(--tsmb-color-base90);
  border-radius: var(--tsmb-size-radius);
  font-size: var(--tsmb-size-base);
  width: 100%;
  line-height: var(--tsmb-size-input);
}

.tsmb-form input[type=search]::placeholder,
typesense-minibar input[type=search]::placeholder {
  color: var(--tsmb-color-base50);
  opacity: 1;
}

.tsmb-form:focus-within,
typesense-minibar form:focus-within {
  color: var(--tsmb-color-focus30);
}

.tsmb-form:focus-within input[type=search],
typesense-minibar:focus-within input[type=search] {
  background: var(--tsmb-color-focus-background);
}

.tsmb-form:focus-within input[type=search]::placeholder,
typesense-minibar:focus-within input[type=search]::placeholder {
  color: var(--tsmb-color-focus50);
}

.tsmb-form input[type=search]::-webkit-search-decoration,
.tsmb-form input[type=search]::-webkit-search-cancel-button,
.tsmb-form input[type=search]::-webkit-search-results-button,
.tsmb-form input[type=search]::-webkit-search-results-decoration,
typesense-minibar input[type=search]::-webkit-search-decoration,
typesense-minibar input[type=search]::-webkit-search-cancel-button,
typesense-minibar input[type=search]::-webkit-search-results-button,
typesense-minibar input[type=search]::-webkit-search-results-decoration {
  display: none;
}

.tsmb-form::before,
typesense-minibar form::before {
  content: '';
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='654 -372 1664 1664' width='20' height='20'><path d='M1806,332c0-123.3-43.8-228.8-131.5-316.5C1586.8-72.2,1481.3-116,1358-116s-228.8,43.8-316.5,131.5 C953.8,103.2,910,208.7,910,332s43.8,228.8,131.5,316.5C1129.2,736.2,1234.7,780,1358,780s228.8-43.8,316.5-131.5 C1762.2,560.8,1806,455.3,1806,332z M2318,1164c0,34.7-12.7,64.7-38,90s-55.3,38-90,38c-36,0-66-12.7-90-38l-343-342 c-119.3,82.7-252.3,124-399,124c-95.3,0-186.5-18.5-273.5-55.5s-162-87-225-150s-113-138-150-225S654,427.3,654,332 s18.5-186.5,55.5-273.5s87-162,150-225s138-113,225-150S1262.7-372,1358-372s186.5,18.5,273.5,55.5s162,87,225,150s113,138,150,225 S2062,236.7,2062,332c0,146.7-41.3,279.7-124,399l343,343C2305.7,1098.7,2318,1128.7,2318,1164z'/></svg>") 0 50% / contain no-repeat;
  position: absolute;
  top: calc(var(--tsmb-size-edge) + var(--tsmb-size-sm));
  left: var(--tsmb-size-sm);
  width: var(--tsmb-size-base);
  height: var(--tsmb-size-input);
  opacity: 0.5;
}

/* js only */
.tsmb-form--open input[type=search],
.tsmb-form--slash input[type=search] {
  padding-right: calc(var(--tsmb-size-sm) + var(--tsmb-size-base) + var(--tsmb-size-base));
}

.tsmb-icon-close {
  box-sizing: border-box;
  position: absolute;
  top: calc(var(--tsmb-size-edge) + var(--tsmb-size-sm) + (var(--tsmb-size-input)/2) - (var(--tsmb-size-base)/2));
  right: var(--tsmb-size-base);
  width: var(--tsmb-size-base);
  height: var(--tsmb-size-base);

  stroke: currentColor;
  border: 1px solid currentColor;
  border-radius: 50%;
  cursor: pointer;
}

form:not(.tsmb-form--open) .tsmb-icon-close {
  display: none;
}

.tsmb-form--slash:not(.tsmb-form--open):not(:focus-within)::after {
  content: '/';
  display: inline-block;
  position: absolute;
  top: calc(50% - (var(--tsmb-size-input) + var(--tsmb-size-sm)/2)/2);
  right: var(--tsmb-size-sm);
  width: calc(var(--tsmb-size-input) + var(--tsmb-size-sm)/2);
  height: calc(var(--tsmb-size-input) + var(--tsmb-size-sm)/2);

  font-size: var(--tsmb-size-base);
  line-height: calc(var(--tsmb-size-input) + var(--tsmb-size-sm)/2);
  text-align: center;

  background: var(--tsmb-color-base-background);
  border: var(--tsmb-size-edge) solid var(--tsmb-color-base90);
  border-radius: var(--tsmb-size-radius);
  color: var(--tsmb-color-base90);
}

.tsmb-form [role=listbox],
typesense-minibar [role=listbox] {
  position: absolute;
  z-index: 10;
  right: var(--tsmb-size-listbox-right);
  background: var(--tsmb-color-focus-background);
  color: var(--tsmb-color-focus30);
  margin-top: var(--tsmb-size-half);
  min-width: 100%;
  width: var(--tsmb-size-listbox-width);
  max-height: var(--tsmb-size-listbox-max-height);
  overflow: auto;
  border: var(--tsmb-size-edge) solid var(--tsmb-color-focus90);
  border-radius: var(--tsmb-size-radius);
  box-shadow: 0 var(--tsmb-size-sm) 20px rgba(0,0,0,0.12);
}

.tsmb-suggestion_group {
  margin: var(--tsmb-size-sm) var(--tsmb-size-base) 0 var(--tsmb-size-base);
  border-bottom: var(--tsmb-size-edge) solid var(--tsmb-color-focus90);
}

.tsmb-form [role=option] a,
typesense-minibar [role=option] a {
  display: block;
  padding: var(--tsmb-size-base);
  text-decoration: none;
  border-left: var(--tsmb-size-highlight) solid transparent;
}

.tsmb-form:not([data-group=true]) [role=option]:not(:first-child) a,
typesense-minibar:not([data-group=true]) [role=option]:not(:first-child) a {
  border-top: var(--tsmb-size-edge) solid var(--tsmb-color-focus90);
}

.tsmb-form[data-group=true] [role=option] a,
typesense-minibar[data-group=true] [role=option] a {
  margin: 0 var(--tsmb-size-base);
  padding: var(--tsmb-size-sm);
}

.tsmb-form [role=option] a:hover,
.tsmb-form [role=option][aria-selected=true] a,
typesense-minibar [role=option] a:hover,
typesense-minibar [role=option][aria-selected=true] a {
  background: var(--tsmb-color-primary90);
  border-left-color: var(--tsmb-color-primary50);
}

.tsmb-form [role=option] mark,
typesense-minibar [role=option] mark {
  background: none;
  color: inherit;
  font-style: normal;
  font-weight: bold;
}

.tsmb-suggestion_group,
.tsmb-suggestion_title,
.tsmb-suggestion_content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tsmb-suggestion_title {
  color: var(--tsmb-color-primary30);
}
.tsmb-form[data-group=true] .tsmb-suggestion_title,
typesense-minibar[data-group=true] .tsmb-suggestion_title {
  font-weight: bold;
  font-size: var(--tsmb-size-sm);
}

.tsmb-suggestion_content {
  font-size: var(--tsmb-size-sm);
  color: var(--tsmb-color-focus50);
}

.tsmb-empty {
  padding: var(--tsmb-size-base);
}

.tsmb-foot,
.tsmb-foot:hover {
  display: block;
  text-align: right;
  font-size: var(--tsmb-size-sm);
  line-height: 18px;
  padding: var(--tsmb-size-half) var(--tsmb-size-sm);
  box-shadow: 0 0 10px rgba(0,0,0,0.12);
  text-decoration: none;
}

.tsmb-foot::before {
  content: 'Search by';
  color: var(--tsmb-color-focus50);
}

.tsmb-foot::after {
  content: ' Typesense';
  color: #0300b0;
}