line-comment.css 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. [data-component="line-comment"] {
  2. position: absolute;
  3. right: 24px;
  4. z-index: var(--line-comment-z, 30);
  5. }
  6. [data-component="line-comment"] [data-slot="line-comment-button"] {
  7. width: 20px;
  8. height: 20px;
  9. border-radius: var(--radius-md);
  10. display: flex;
  11. align-items: center;
  12. justify-content: center;
  13. background: var(--icon-interactive-base);
  14. box-shadow: var(--shadow-xs);
  15. cursor: default;
  16. border: none;
  17. }
  18. [data-component="line-comment"] [data-component="icon"] {
  19. color: var(--white);
  20. }
  21. [data-component="line-comment"] [data-slot="line-comment-button"]:focus {
  22. outline: none;
  23. }
  24. [data-component="line-comment"] [data-slot="line-comment-button"]:focus-visible {
  25. box-shadow: var(--shadow-xs-border-focus);
  26. }
  27. [data-component="line-comment"] [data-slot="line-comment-popover"] {
  28. position: absolute;
  29. top: calc(100% + 4px);
  30. right: -8px;
  31. z-index: var(--line-comment-popover-z, 40);
  32. min-width: 200px;
  33. max-width: min(320px, calc(100vw - 48px));
  34. border-radius: 8px;
  35. background: var(--surface-raised-stronger-non-alpha);
  36. box-shadow: var(--shadow-lg-border-base);
  37. padding: 12px;
  38. }
  39. [data-component="line-comment"][data-variant="editor"] [data-slot="line-comment-popover"] {
  40. width: 380px;
  41. max-width: min(380px, calc(100vw - 48px));
  42. padding: 8px;
  43. }