frontend_nyla/src/components/Dateien/DateienLists.module.css
2025-06-16 14:15:13 +02:00

102 lines
2 KiB
CSS

/* No files message */
.noFilesMessage {
display: flex;
justify-content: center;
align-items: center;
padding: 60px 20px;
color: var(--color-gray);
font-style: italic;
font-family: var(--font-family);
}
/* Files table container */
.filesTable {
width: 100%;
margin-top: 10px;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
height: 100%;
overflow: hidden;
}
/* Table header with exact grid positioning */
.tableHeader {
display: grid;
grid-template-columns: 45% 15% 15% 25%;
align-items: center;
height: 40px;
padding: 0px 16px;
position: sticky;
top: 0;
z-index: 10;
background-color: var(--color-bg);
border-bottom: 1px solid var(--color-gray-disabled);
margin-bottom: 10px;
flex-shrink: 0;
}
/* Header cells with exact positioning */
.headerCell {
display: flex;
align-items: center;
font-weight: 500;
font-size: 14px;
color: var(--color-text);
cursor: pointer;
white-space: nowrap;
padding-left: 0;
transition: color 0.2s ease;
font-family: var(--font-family);
}
.headerCell:hover {
color: var(--color-primary);
}
/* Adjust first column for icon space */
.headerCell:nth-child(1) {
padding-left: 30px;
}
/* Simple sort icon styling */
.sortIcon {
margin-left: 6px;
font-size: 14px;
color: var(--color-gray);
transition: color 0.2s ease;
}
.headerCell:hover .sortIcon {
color: var(--color-primary);
}
/* File list styling */
.filesList {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
overflow-y: auto;
flex: 1;
min-height: 0;
}
/* Override the flex layout in DateienItem to force matching the header */
.filesList li {
display: grid !important;
grid-template-columns: 45% 15% 15% 25%;
border-bottom: 1px solid var(--color-gray-disabled);
height: 60px;
padding: 0 16px;
align-items: center;
transition: background-color 0.2s ease;
position: relative;
}
.filesList li:hover {
background-color: var(--color-surface);
}