waveterm/frontend/app/view/preview/preview.less
Evan Simkowitz 1737c686c2
Fix double scrollbars in dir preview (#932)
Phew this took a while, but I think it's a good compromise. All the
scrolling for a preview view now must happen inside the individual
views, rather than at the root level. Now, the scrollbars render in the
right places and are always visible inside the block. I don't love the
blurred header for the table, but it was make it blurry or make it even
more opaque, which would ruin the transparency
2024-10-02 17:21:34 -07:00

84 lines
1.5 KiB
Plaintext

// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
.view-preview {
display: flex;
flex-direction: row;
height: 100%;
flex-grow: 1;
overflow: hidden;
align-items: center;
justify-content: center;
padding: 0 5px;
&.view-preview-markdown {
align-items: start;
justify-content: start;
overflow: auto;
}
&.view-preview-text {
align-items: start;
justify-content: start;
overflow: auto;
pre {
font: var(--fixed-font);
}
}
&.view-preview-image,
&.view-preview-video,
&.view-preview-audio {
video,
audio,
img {
width: 100%;
height: 100%;
padding: 10px;
object-fit: contain;
}
}
&.view-preview-directory {
flex-direction: column;
align-items: start;
}
}
.full-preview {
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
}
.view-nav {
display: flex;
flex-shrink: 0;
padding: 0.2rem 0 0.2rem 0;
.view-nav-item {
border-radius: 3px;
padding: 0.2rem 0;
&.clickable {
cursor: pointer;
&:hover {
background-color: var(--highlight-bg-color);
}
}
&.current-file {
background-color: transparent;
cursor: default;
font-weight: bold;
}
}
}
.full-preview-content {
flex-grow: 1;
overflow: hidden;
}