header-context-menu.css 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. .context-menu {
  2. position: fixed;
  3. z-index: 1000;
  4. min-width: 160px;
  5. border-radius: 8px;
  6. background-color: var(--color-background);
  7. box-shadow:
  8. 0 0 0 1px rgba(19, 16, 16, 0.08),
  9. 0 6px 8px -4px rgba(19, 16, 16, 0.12),
  10. 0 4px 3px -2px rgba(19, 16, 16, 0.12),
  11. 0 1px 2px -1px rgba(19, 16, 16, 0.12);
  12. padding: 6px;
  13. @media (prefers-color-scheme: dark) {
  14. box-shadow: 0 0 0 1px rgba(247, 237, 237, 0.1);
  15. }
  16. }
  17. .context-menu-item {
  18. display: flex;
  19. gap: 12px;
  20. width: 100%;
  21. padding: 8px 16px 8px 8px;
  22. font-weight: 500;
  23. cursor: pointer;
  24. background: none;
  25. border: none;
  26. align-items: center;
  27. color: var(--color-text);
  28. font-size: var(--font-size-sm);
  29. text-align: left;
  30. border-radius: 2px;
  31. transition: background-color 0.2s ease;
  32. .context-menu-item [data-slot="copy light"],
  33. .context-menu-item [data-slot="copy dark"] {
  34. width: 22px !important;
  35. height: 26px !important;
  36. }
  37. [data-slot="copy dark"] {
  38. display: none;
  39. }
  40. @media (prefers-color-scheme: dark) {
  41. [data-slot="copy light"] {
  42. display: none;
  43. }
  44. [data-slot="copy dark"] {
  45. display: block;
  46. }
  47. }
  48. &:hover {
  49. background-color: var(--color-background-weak-hover);
  50. color: var(--color-text-strong);
  51. }
  52. }
  53. .context-menu-divider {
  54. border: none;
  55. border-top: 1px solid var(--color-border);
  56. margin: var(--space-1) 0;
  57. }