| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- .context-menu {
- position: fixed;
- z-index: 1000;
- min-width: 160px;
- border-radius: 8px;
- background-color: var(--color-background);
- box-shadow:
- 0 0 0 1px rgba(19, 16, 16, 0.08),
- 0 6px 8px -4px rgba(19, 16, 16, 0.12),
- 0 4px 3px -2px rgba(19, 16, 16, 0.12),
- 0 1px 2px -1px rgba(19, 16, 16, 0.12);
- padding: 6px;
- @media (prefers-color-scheme: dark) {
- box-shadow: 0 0 0 1px rgba(247, 237, 237, 0.1);
- }
- }
- .context-menu-item {
- display: flex;
- gap: 12px;
- width: 100%;
- padding: 8px 16px 8px 8px;
- font-weight: 500;
- cursor: pointer;
- background: none;
- border: none;
- align-items: center;
- color: var(--color-text);
- font-size: var(--font-size-sm);
- text-align: left;
- border-radius: 2px;
- transition: background-color 0.2s ease;
- .context-menu-item [data-slot="copy light"],
- .context-menu-item [data-slot="copy dark"] {
- width: 22px !important;
- height: 26px !important;
- }
- [data-slot="copy dark"] {
- display: none;
- }
- @media (prefers-color-scheme: dark) {
- [data-slot="copy light"] {
- display: none;
- }
- [data-slot="copy dark"] {
- display: block;
- }
- }
- &:hover {
- background-color: var(--color-background-weak-hover);
- color: var(--color-text-strong);
- }
- }
- .context-menu-divider {
- border: none;
- border-top: 1px solid var(--color-border);
- margin: var(--space-1) 0;
- }
|