@ivteplo/html-context-menu-element/build/index.css

An HTML custom element, designed to let you quickly create an easily-customizable context menu.

@charset "UTF-8";
/**
 * Copyright (c) 2024-2025 Ivan Teplov
 * Licensed under the Apache license 2.0
 */
menu[is=context-menu] {
  --divider-color: #dadce0;
  --border: 0.0625rem solid var(--divider-color);
  --shadow-color: #8e8e8e;
  --shadow: 0.125rem 0.125rem 0.125rem var(--focused-item-color);
  --focused-item-background-color: #e8e8e9;
  --disabled-item-foreground-color: #5f6368;
  --keystroke-foreground-color: #5f6368;
  --foreground-color: #202124;
  --arrow-color: #626365;
  --background-color: white;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 0.78rem;
}
@media (prefers-color-scheme: dark) {
  menu[is=context-menu] {
    --divider-color: #3c4043;
    --focused-item-background-color: #3f4042;
    --disabled-item-foreground-color: #9aa0a6;
    --keystroke-foreground-color: #9aa0a6;
    --foreground-color: #dceaed;
    --arrow-color: #acaeb1;
    --background-color: #292a2d;
  }
}

menu[is=context-menu] {
  background-color: var(--background-color);
  color: var(--foreground-color);
  display: flex;
  flex-direction: column;
  border: var(--border);
  padding: 0.125rem;
  box-shadow: var(--shadow);
  position: fixed;
  /* Item separator*/
}
menu[is=context-menu]:not([open]) {
  display: none;
}
menu[is=context-menu] hr {
  display: block;
  border: none;
  height: 0.0625rem;
  justify-self: stretch;
  background-color: var(--divider-color);
  margin: 0.1875rem 0.125rem;
}
menu[is=context-menu] button {
  background-color: var(--background-color);
  color: inherit;
  display: flex;
  text-align: left;
  justify-content: space-between;
  gap: 3rem;
  padding: 0.25rem 2rem;
  cursor: pointer;
  user-select: none;
  border: none;
  outline: none;
  font: inherit;
  white-space: nowrap;
}
menu[is=context-menu] button::after {
  content: attr(keystroke);
  margin-left: auto;
  color: var(--keystroke-foreground-color);
}
menu[is=context-menu] button:hover, menu[is=context-menu] button:focus {
  background-color: var(--focused-item-background-color);
}
menu[is=context-menu] button:disabled {
  color: var(--disabled-item-foreground-color);
}

details[is=context-menu-group] {
  position: relative;
}
details[is=context-menu-group] > summary {
  background-color: var(--background-color);
  color: inherit;
  display: flex;
  text-align: left;
  justify-content: space-between;
  gap: 3rem;
  padding: 0.25rem 2rem;
  cursor: pointer;
  user-select: none;
  border: none;
  outline: none;
  font: inherit;
  white-space: nowrap;
}
details[is=context-menu-group] > summary::after {
  content: "⯈";
  margin-right: -1rem;
}
[dir=rtl] details[is=context-menu-group] > summary::after, :dir(rtl) details[is=context-menu-group] > summary::after {
  content: "⯇";
}
details[is=context-menu-group] > summary:hover {
  background-color: var(--focused-item-background-color);
}
details[is=context-menu-group]:focus-within > summary {
  background-color: var(--focused-item-background-color);
}
details[is=context-menu-group] > menu {
  background-color: var(--background-color);
  color: var(--foreground-color);
  display: flex;
  flex-direction: column;
  border: var(--border);
  padding: 0.125rem;
  box-shadow: var(--shadow);
  position: absolute;
  z-index: 1;
}
details[is=context-menu-group][data-x-expand-to=right] > menu {
  left: 100%;
}
details[is=context-menu-group][data-x-expand-to=left] > menu {
  right: 100%;
}
details[is=context-menu-group][data-y-expand-to=bottom] > menu {
  top: 0;
}
details[is=context-menu-group][data-y-expand-to=top] > menu {
  bottom: 0;
}