image-tagger/styles/apps/data-browser.css

58 lines
954 B
CSS

.image-tagger.data-browser {
min-height: 350px;
min-width: 630px;
> .window-content {
display: grid;
grid-template-columns: 175px auto;
gap: 0;
}
.filters {
--spacing: 12px;
border-right: var(--sidebar-separator);
margin-right: var(--spacing);
padding-right: var(--spacing);
}
.entry-list {
--size: 100px;
list-style-type: none;
gap: 8px;
padding: 0;
margin: 0;
max-height: 450px;
overflow-y: auto;
&.grid {
display: grid;
grid-template-columns: repeat(4, var(--size));
};
&.list {
display: flex;
flex-direction: column;
}
}
.entry {
transition: all 100ms ease-in-out;
border-radius: 4px;
&:hover,
&[data-selected="true"]
&:has(input[type="checkbox"]:checked) {
background: var(--color-warm-3);
}
}
.paginated {
display: flex;
flex-direction: column;
gap: 6px; /* Due to the grow element, this actually means 12px */
}
.page-nav {
justify-content: center;
}
}