mirror of https://github.com/josh-berry/tab-stash
63 lines
1.5 KiB
Plaintext
63 lines
1.5 KiB
Plaintext
// Mods for when in tab view -- uses a multi-column display format
|
|
|
|
.forest {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: stretch;
|
|
// Same width and height since this is a grid
|
|
margin: var(--page-pw) var(--page-pw);
|
|
row-gap: var(--page-pw);
|
|
column-gap: var(--page-pw);
|
|
|
|
& > li {
|
|
flex: 1 1 25rem;
|
|
margin: 0; // Handled by row/column gap
|
|
background-color: var(--group-bg);
|
|
box-shadow: var(--shadow);
|
|
|
|
& > .forest-item {
|
|
border-top: none;
|
|
border-bottom: var(--group-border);
|
|
|
|
&.collapsed {
|
|
// Required because the children are completely hidden, and when collapsed, the group looks weird.
|
|
border-radius: var(--group-border-radius);
|
|
}
|
|
}
|
|
|
|
// We assume the .forest-item itself comes first, so this would be the first
|
|
// .forest-children in the <li>
|
|
& > .forest-children:nth-child(2) {
|
|
margin-top: var(--group-ph);
|
|
}
|
|
& > .forest-children:last-child {
|
|
padding-bottom: var(--group-ph);
|
|
}
|
|
|
|
& > .forest-item,
|
|
& > .forest-children {
|
|
&.collapsed:not(.selected) {
|
|
background-color: var(--group-disabled-bg);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.one-column {
|
|
display: grid;
|
|
grid-template-columns: 1fr minmax(0, 40rem) 1fr;
|
|
column-gap: 0;
|
|
|
|
& > li {
|
|
grid-column: 2;
|
|
flex-basis: 40rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Don't show the "stash this tab" button on folders when we are the
|
|
// current tab (and not the sidebar)
|
|
.action.stash.one.here {
|
|
display: none;
|
|
}
|