[data-component="session-review"] { display: flex; flex-direction: column; gap: 8px; height: 100%; overflow-y: auto; scrollbar-width: none; contain: strict; &::-webkit-scrollbar { display: none; } /* [data-slot="session-review-container"] { */ /* height: 100%; */ /* } */ [data-slot="session-review-header"] { position: sticky; top: 0; z-index: 20; background-color: var(--background-stronger); height: 32px; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; align-self: stretch; } [data-slot="session-review-title"] { font-family: var(--font-family-sans); font-size: var(--font-size-large); font-weight: var(--font-weight-medium); line-height: var(--line-height-large); color: var(--text-strong); } [data-slot="session-review-actions"] { display: flex; align-items: center; column-gap: 16px; padding-right: 1px; } [data-component="sticky-accordion-header"] { top: 40px; &[data-expanded]::before { top: -40px; } } [data-slot="accordion-trigger"] { background-color: var(--background-stronger) !important; } [data-slot="session-review-accordion-item"][data-selected] { [data-slot="session-review-accordion-content"] { box-shadow: var(--shadow-xs-border-select); border-radius: var(--radius-lg); } } [data-slot="accordion-item"] { [data-slot="accordion-content"] { display: none; } &[data-expanded] { [data-slot="accordion-content"] { display: block; } } } [data-slot="accordion-content"] { -webkit-user-select: text; user-select: text; } [data-slot="session-review-accordion-content"] { position: relative; overflow: hidden; } [data-slot="session-review-trigger-content"] { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 20px; } [data-slot="session-review-file-info"] { flex-grow: 1; display: flex; align-items: center; gap: 20px; min-width: 0; } [data-slot="session-review-file-name-container"] { display: flex; flex-grow: 1; min-width: 0; } [data-slot="session-review-directory"] { color: var(--text-base); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; direction: rtl; text-align: left; } [data-slot="session-review-filename"] { color: var(--text-strong); flex-shrink: 0; } [data-slot="session-review-view-button"] { display: flex; align-items: center; justify-content: center; padding: 2px; margin-left: 8px; border: none; background: transparent; color: var(--text-base); cursor: pointer; border-radius: 4px; opacity: 0; transition: opacity 0.15s ease; &:hover { color: var(--text-strong); background: var(--surface-base); } } [data-slot="accordion-trigger"]:hover [data-slot="session-review-view-button"] { opacity: 1; } [data-slot="session-review-trigger-actions"] { flex-shrink: 0; display: flex; gap: 16px; align-items: center; justify-content: flex-end; } [data-slot="session-review-change"] { font-family: var(--font-family-sans); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); } [data-slot="session-review-change"][data-type="added"] { color: var(--icon-diff-add-base); } [data-slot="session-review-change"][data-type="removed"] { color: var(--icon-diff-delete-base); } [data-slot="session-review-file-container"] { padding: 0; } [data-slot="session-review-image-container"] { padding: 12px; display: flex; justify-content: center; background: var(--background-stronger); } [data-slot="session-review-image"] { max-width: 100%; max-height: 60vh; object-fit: contain; border-radius: 3px; border: 1px solid var(--border-weak-base); background: var(--background-base); } [data-slot="session-review-image-placeholder"] { font-family: var(--font-family-sans); font-size: var(--font-size-small); color: var(--text-weak); } [data-slot="session-review-audio-container"] { padding: 12px; display: flex; justify-content: center; background: var(--background-stronger); } [data-slot="session-review-audio"] { width: 100%; max-width: 560px; } [data-slot="session-review-audio-placeholder"] { font-family: var(--font-family-sans); font-size: var(--font-size-small); color: var(--text-weak); } [data-slot="session-review-diff-wrapper"] { position: relative; overflow: hidden; --line-comment-z: 5; --line-comment-popover-z: 30; }}
[data-component="session-review"] {
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
overflow-y: auto;
scrollbar-width: none;
contain: strict;
&::-webkit-scrollbar {
display: none;
}
/* [data-slot="session-review-container"] { */
/* height: 100%; */
/* } */
[data-slot="session-review-header"] {
position: sticky;
top: 0;
z-index: 20;
background-color: var(--background-stronger);
height: 32px;
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
}
[data-slot="session-review-title"] {
font-family: var(--font-family-sans);
font-size: var(--font-size-large);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-large);
color: var(--text-strong);
}
[data-slot="session-review-actions"] {
display: flex;
align-items: center;
column-gap: 16px;
padding-right: 1px;
}
[data-component="sticky-accordion-header"] {
top: 40px;
&[data-expanded]::before {
top: -40px;
}
}
[data-slot="accordion-trigger"] {
background-color: var(--background-stronger) !important;
}
[data-slot="session-review-accordion-item"][data-selected] {
[data-slot="session-review-accordion-content"] {
box-shadow: var(--shadow-xs-border-select);
border-radius: var(--radius-lg);
}
}
[data-slot="accordion-item"] {
[data-slot="accordion-content"] {
display: none;
}
&[data-expanded] {
[data-slot="accordion-content"] {
display: block;
}
}
}
[data-slot="accordion-content"] {
-webkit-user-select: text;
user-select: text;
}
[data-slot="session-review-accordion-content"] {
position: relative;
overflow: hidden;
}
[data-slot="session-review-trigger-content"] {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 20px;
}
[data-slot="session-review-file-info"] {
flex-grow: 1;
display: flex;
align-items: center;
gap: 20px;
min-width: 0;
}
[data-slot="session-review-file-name-container"] {
display: flex;
flex-grow: 1;
min-width: 0;
}
[data-slot="session-review-directory"] {
color: var(--text-base);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
direction: rtl;
text-align: left;
}
[data-slot="session-review-filename"] {
color: var(--text-strong);
flex-shrink: 0;
}
[data-slot="session-review-view-button"] {
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
margin-left: 8px;
border: none;
background: transparent;
color: var(--text-base);
cursor: pointer;
border-radius: 4px;
opacity: 0;
transition: opacity 0.15s ease;
&:hover {
color: var(--text-strong);
background: var(--surface-base);
}
}
[data-slot="accordion-trigger"]:hover [data-slot="session-review-view-button"] {
opacity: 1;
}
[data-slot="session-review-trigger-actions"] {
flex-shrink: 0;
display: flex;
gap: 16px;
align-items: center;
justify-content: flex-end;
}
[data-slot="session-review-change"] {
font-family: var(--font-family-sans);
font-size: var(--font-size-small);
font-weight: var(--font-weight-medium);
}
[data-slot="session-review-change"][data-type="added"] {
color: var(--icon-diff-add-base);
}
[data-slot="session-review-change"][data-type="removed"] {
color: var(--icon-diff-delete-base);
}
[data-slot="session-review-file-container"] {
padding: 0;
}
[data-slot="session-review-image-container"] {
padding: 12px;
display: flex;
justify-content: center;
background: var(--background-stronger);
}
[data-slot="session-review-image"] {
max-width: 100%;
max-height: 60vh;
object-fit: contain;
border-radius: 3px;
border: 1px solid var(--border-weak-base);
background: var(--background-base);
}
[data-slot="session-review-image-placeholder"] {
font-family: var(--font-family-sans);
font-size: var(--font-size-small);
color: var(--text-weak);
}
[data-slot="session-review-audio-container"] {
padding: 12px;
display: flex;
justify-content: center;
background: var(--background-stronger);
}
[data-slot="session-review-audio"] {
width: 100%;
max-width: 560px;
}
[data-slot="session-review-audio-placeholder"] {
font-family: var(--font-family-sans);
font-size: var(--font-size-small);
color: var(--text-weak);
}
[data-slot="session-review-diff-wrapper"] {
position: relative;
overflow: hidden;
--line-comment-z: 5;
--line-comment-popover-z: 30;
}
}