waveterm/frontend/app/view/directorypreview.less

221 lines
6.5 KiB
Plaintext
Raw Normal View History

.dir-table-container {
display: flex;
flex-direction: column;
height: 100%;
.dir-table {
overflow-x: auto;
height: 100%;
min-width: 600px;
--col-size-size: 0.2rem;
border-radius: 3px;
display: flex;
flex-direction: column;
font-family: Inter;
.dir-table-head {
.dir-table-head-row {
display: flex;
border-bottom: 1px solid var(--border-color);
padding: 4px 6px;
background-color: var(--panel-bg-color);
font-size: 0.75rem;
.dir-table-head-cell {
flex: 0 0 auto;
user-select: none;
}
.dir-table-head-cell:not(:first-child) {
position: relative;
display: flex;
white-space: nowrap;
overflow: hidden;
.dir-table-head-cell-content {
padding: 2px 4px;
display: flex;
gap: 0.3rem;
flex: 1 1 auto;
overflow-x: hidden;
letter-spacing: -0.12px;
.dir-table-head-direction {
margin-right: 0.2rem;
margin-top: 0.2rem;
}
.dir-table-head-size {
align-self: flex-end;
}
}
.dir-table-head-resize-box {
width: 12px;
display: flex;
justify-content: center;
flex: 0 0 auto;
.dir-table-head-resize {
cursor: col-resize;
user-select: none;
-webkit-user-select: none;
touch-action: none;
width: 4px;
}
}
&:last-child {
.dir-table-head-resize-box {
}
}
}
.dir-table-head-cell:has(.dir-table-head-cell-content .dir-table-head-name) {
}
}
}
.dir-table-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
.dir-table-body-search-display {
display: flex;
border-radius: 3px;
padding: 0.25rem 0.5rem;
background-color: var(--warning-color);
.search-display-close-button {
margin-left: auto;
}
}
.dir-table-body-scroll-box {
position: relative;
overflow-y: auto;
overflow-x: auto;
.dummy {
position: absolute;
visibility: hidden;
}
.dir-table-body-row {
display: flex;
align-items: center;
border-radius: 6px;
padding: 0 6px;
&.focused {
background-color: rgb(from var(--accent-color) r g b / 0.5);
color: var(--main-text-color);
.dir-table-body-cell {
.dir-table-lastmod,
.dir-table-modestr,
.dir-table-size,
.dir-table-type {
color: var(--main-text-color);
}
}
}
&:focus {
background-color: rgb(from var(--accent-color) r g b / 0.5);
color: var(--main-text-color);
.dir-table-body-cell {
.dir-table-lastmod,
.dir-table-modestr,
.dir-table-size,
.dir-table-type {
color: var(--main-text-color);
}
}
}
2024-06-04 03:22:26 +02:00
&:hover:not(:focus):not(.focused) {
background-color: var(--highlight-bg-color);
}
2024-06-04 03:22:26 +02:00
.dir-table-body-cell {
overflow: hidden;
white-space: nowrap;
padding: 0.25rem;
cursor: default;
font-size: 0.8125rem;
flex: 0 0 auto;
&:has(.dir-table-name) {
}
2024-06-26 18:31:43 +02:00
&.col-size {
text-align: right;
}
.dir-table-lastmod,
.dir-table-modestr,
.dir-table-size,
.dir-table-type {
color: var(--secondary-text-color);
margin-right: 12px;
}
.dir-table-modestr {
font-family: Hack;
}
&:has(.dir-table-name) {
text-overflow: ellipsis;
}
.dir-table-name {
font-weight: 500;
}
}
2024-06-26 18:31:43 +02:00
}
}
}
}
.dir-table-search-line {
display: flex;
justify-content: flex-end;
gap: 0.7rem;
.dir-table-search-box {
width: 0;
height: 0;
opacity: 0;
padding: 0;
border: none;
pointer-events: none;
}
}
}
.dir-table-button {
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 0.2rem;
border-radius: 6px;
input {
width: 0;
height: 0;
opacity: 0;
padding: 0;
border: none;
pointer-events: none;
}
&:hover {
background-color: var(--highlight-bg-color);
}
&:focus {
background-color: var(--highlight-bg-color);
}
&:focus-within {
background-color: var(--highlight-bg-color);
}
}