Clean & Modern Restyle of the Autcomplete Menu

Tricks & Techniques
1

This is not for everyone but deifintely for those tired of the autocomplete menu’s rather cramped aesthetic.

After spending some time in the morning with this Custom Autocomplete Menu for Contacts script for @thepaperpilot, I decided to also restyle the Autocomplete Menu which was long due on my todo list.

I’ve prepared this minor refinement which introduces some much-needed visual breathing room (padding & increased height) and more importantly, adds also mouse hover (subtle ghost color) in addition to the keyboard selection (primary color).

Dark Mode

image
image1850×700 103 KB

Light Mode

image
image1849×699 123 KB


html[data-theme="dark"] {
    --ac-bg-primary: oklch(0.55 0.15 250);
    --ac-bg-secondary: oklch(0.45 0 0);
    --ac-primary-color: oklch(0.98 0 0);
    --ac-secondary-color: oklch(0.75 0 0);
}

html[data-theme="light"] {
    --ac-bg-primary: oklch(0.55 0.15 250);
    --ac-bg-secondary: oklch(0.95 0 0);
    --ac-primary-color: oklch(0.95 0 0);
    --ac-secondary-color: oklch(0.75 0 0);
}

#sb-editor .cm-editor .cm-tooltip-autocomplete {
  border: 1px solid oklch(from var(--ac-bg-secondary) 0.65 c h );
  box-shadow: 0 5px 15px oklch(0 0 0 / 0.35);
  border-radius: 10px;
  padding: 8px 0 8px 0;
}

#sb-editor .cm-editor .cm-tooltip-autocomplete ul {
  max-height: 260px;
  padding: 0 8px 0 8px;
  overflow-y: auto;
  scrollbar-width: thin;    
  scrollbar-color: var(--ac-bg-secondary) transparent;
}

#sb-editor .cm-editor .cm-tooltip-autocomplete ul li[aria-selected] {
    background: var(--ac-bg-primary);
    color: var(--ac-primary-color);
    padding: 3px;
    border-radius: 6px;
}

#sb-editor .cm-editor .cm-tooltip-autocomplete ul li:hover:not([aria-selected]) {
    background: var(--ac-bg-secondary); 
    color: inherit;
    border-radius: 6px;
    padding: 3px;
}

#sb-editor .cm-editor .cm-tooltip-autocomplete ul li[aria-selected] .cm-completionDetail,
#sb-editor .cm-editor .cm-tooltip-autocomplete ul li:hover .cm-completionDetail { color: var(--ac-secondary-color);}

#sb-editor .cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li { padding: 3px;}
#sb-editor .cm-editor .cm-tooltip-autocomplete ul::-webkit-scrollbar { width: 6px;}
#sb-editor .cm-editor .cm-tooltip-autocomplete ul::-webkit-scrollbar-track { background: transparent;}
#sb-editor .cm-editor .cm-tooltip-autocomplete ul::-webkit-scrollbar-thumb { background: var(--ac-bg-secondary);}
#sb-editor .cm-editor .cm-tooltip-autocomplete ul::-webkit-scrollbar-thumb:hover { background: var(--ac-bg-primary);}
5 Likes