header-context-menu.css 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  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. [data-slot="copy dark"] {
  33. display: none;
  34. }
  35. @media (prefers-color-scheme: dark) {
  36. [data-slot="copy light"] {
  37. display: none;
  38. }
  39. [data-slot="copy dark"] {
  40. display: block;
  41. }
  42. }
  43. &:hover {
  44. background-color: var(--color-background-weak-hover);
  45. color: var(--color-text-strong);
  46. }
  47. img {
  48. width: 22px;
  49. height: 26px;
  50. }
  51. }
  52. .context-menu-divider {
  53. border: none;
  54. border-top: 1px solid var(--color-border);
  55. margin: var(--space-1) 0;
  56. }