session-review.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. [data-component="session-review"] {
  2. display: flex;
  3. flex-direction: column;
  4. gap: 8px;
  5. height: 100%;
  6. overflow-y: auto;
  7. scrollbar-width: none;
  8. contain: strict;
  9. &::-webkit-scrollbar {
  10. display: none;
  11. }
  12. /* [data-slot="session-review-container"] { */
  13. /* height: 100%; */
  14. /* } */
  15. [data-slot="session-review-header"] {
  16. position: sticky;
  17. top: 0;
  18. z-index: 20;
  19. background-color: var(--background-stronger);
  20. height: 32px;
  21. flex-shrink: 0;
  22. display: flex;
  23. justify-content: space-between;
  24. align-items: center;
  25. align-self: stretch;
  26. }
  27. [data-slot="session-review-title"] {
  28. font-family: var(--font-family-sans);
  29. font-size: var(--font-size-large);
  30. font-weight: var(--font-weight-medium);
  31. line-height: var(--line-height-large);
  32. color: var(--text-strong);
  33. }
  34. [data-slot="session-review-actions"] {
  35. display: flex;
  36. align-items: center;
  37. column-gap: 16px;
  38. padding-right: 1px;
  39. }
  40. [data-component="sticky-accordion-header"] {
  41. top: 40px;
  42. &[data-expanded]::before {
  43. top: -40px;
  44. }
  45. }
  46. [data-slot="accordion-trigger"] {
  47. background-color: var(--background-stronger) !important;
  48. }
  49. [data-slot="accordion-item"] {
  50. [data-slot="accordion-content"] {
  51. display: none;
  52. }
  53. &[data-expanded] {
  54. [data-slot="accordion-content"] {
  55. display: block;
  56. }
  57. }
  58. }
  59. [data-slot="accordion-content"] {
  60. -webkit-user-select: text;
  61. user-select: text;
  62. }
  63. [data-slot="session-review-trigger-content"] {
  64. display: flex;
  65. align-items: center;
  66. justify-content: space-between;
  67. width: 100%;
  68. gap: 20px;
  69. }
  70. [data-slot="session-review-file-info"] {
  71. flex-grow: 1;
  72. display: flex;
  73. align-items: center;
  74. gap: 20px;
  75. min-width: 0;
  76. }
  77. [data-slot="session-review-file-name-container"] {
  78. display: flex;
  79. flex-grow: 1;
  80. min-width: 0;
  81. }
  82. [data-slot="session-review-directory"] {
  83. color: var(--text-base);
  84. text-overflow: ellipsis;
  85. overflow: hidden;
  86. white-space: nowrap;
  87. direction: rtl;
  88. text-align: left;
  89. }
  90. [data-slot="session-review-filename"] {
  91. color: var(--text-strong);
  92. flex-shrink: 0;
  93. }
  94. [data-slot="session-review-view-button"] {
  95. display: flex;
  96. align-items: center;
  97. justify-content: center;
  98. padding: 2px;
  99. margin-left: 8px;
  100. border: none;
  101. background: transparent;
  102. color: var(--text-base);
  103. cursor: pointer;
  104. border-radius: 4px;
  105. opacity: 0;
  106. transition: opacity 0.15s ease;
  107. &:hover {
  108. color: var(--text-strong);
  109. background: var(--surface-base);
  110. }
  111. }
  112. [data-slot="accordion-trigger"]:hover [data-slot="session-review-view-button"] {
  113. opacity: 1;
  114. }
  115. [data-slot="session-review-trigger-actions"] {
  116. flex-shrink: 0;
  117. display: flex;
  118. gap: 16px;
  119. align-items: center;
  120. justify-content: flex-end;
  121. }
  122. }