Edouard Vanbelle
1448 lines
51 KiB
CSS
1448 lines
51 KiB
CSS
/* ============================================================
|
||
* ResourceList component styles
|
||
*
|
||
* All styles for .file-item (both grid cards and list rows),
|
||
* the list header, drag ghost, per-item checkboxes, and
|
||
* section-specific item modifiers (.favorite-item, .recent-item,
|
||
* .trash-item).
|
||
*
|
||
* Page-level shell (.files-container, .selection-rect) → fileManager.css
|
||
* Batch-action toolbar (.batch-selection-bar, .batch-btn …) → multiSelect.css
|
||
* Section page headers (.list-header.favorites-header …) → views/*.css
|
||
* ============================================================ */
|
||
|
||
/* ── Base icon container ─────────────────────────────────── */
|
||
|
||
.file-icon {
|
||
width: 100px;
|
||
height: 70px;
|
||
border-radius: var(--radius-lg);
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Thumbnail image inside file-icon (grid and list views) */
|
||
.file-icon .file-thumb {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
z-index: 1;
|
||
/* The thumbnail is purely decorative — it must never be a hit-test target.
|
||
In grid view it fills the whole tile UNDER the overlay controls (checkbox,
|
||
favorite star, kebab); a loaded full-bleed thumbnail (promoted to its own
|
||
stacking context by the hover scale transform) was capturing clicks meant
|
||
for those controls, so they "did nothing" (the click fell through to
|
||
open-file). Making it transparent to pointer events routes corner clicks
|
||
to the controls and body clicks to the .file-icon (which still opens). */
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ── File-type colours ───────────────────────────────────────
|
||
Each bucket sets a local --fk (the foreground hue, from the
|
||
--file-kind-* tokens). The glyph takes --fk directly and the tile
|
||
fill/ring derive soft tints from it with color-mix(), so the icons read
|
||
as colourful tiles instead of flat monochrome. Adding a bucket is a
|
||
single custom-property line; the consuming rules never change. */
|
||
.file-icon {
|
||
--fk: var(--file-kind-generic);
|
||
}
|
||
|
||
.file-icon--folder {
|
||
--fk: var(--file-kind-folder);
|
||
}
|
||
|
||
.file-icon--pdf {
|
||
--fk: var(--file-kind-pdf);
|
||
}
|
||
|
||
.file-icon--doc {
|
||
--fk: var(--file-kind-doc);
|
||
}
|
||
|
||
.file-icon--sheet {
|
||
--fk: var(--file-kind-sheet);
|
||
}
|
||
|
||
.file-icon--slides {
|
||
--fk: var(--file-kind-slides);
|
||
}
|
||
|
||
.file-icon--archive {
|
||
--fk: var(--file-kind-archive);
|
||
}
|
||
|
||
.file-icon--code {
|
||
--fk: var(--file-kind-code);
|
||
}
|
||
|
||
.file-icon--image {
|
||
--fk: var(--file-kind-image);
|
||
}
|
||
|
||
.file-icon--video {
|
||
--fk: var(--file-kind-video);
|
||
}
|
||
|
||
.file-icon--audio {
|
||
--fk: var(--file-kind-audio);
|
||
}
|
||
|
||
.file-icon--text {
|
||
--fk: var(--file-kind-text);
|
||
}
|
||
|
||
.file-icon--generic {
|
||
--fk: var(--file-kind-generic);
|
||
}
|
||
|
||
.file-icon > i,
|
||
.file-icon > svg {
|
||
color: var(--fk);
|
||
}
|
||
|
||
/* ── Item states ─────────────────────────────────────────── */
|
||
|
||
.file-item {
|
||
background-color: var(--color-item);
|
||
/* Smooth the hover/selection tint (list rows used to snap). Grid cards
|
||
override this with their own transform/shadow transition. */
|
||
transition:
|
||
background-color var(--motion-fast) var(--ease-standard),
|
||
border-color var(--motion-fast) var(--ease-standard);
|
||
}
|
||
|
||
/* Brief pulse on rows that were just optimistically inserted (e.g.
|
||
newly created folder, upload completion, drag-drop move into the
|
||
current folder). Pure CSS so timing is deterministic — the JS adds
|
||
the class, the animation auto-clears the background, and a
|
||
single `animationend` listener removes the class.
|
||
|
||
`scroll-margin-top` reserves space above the row for the sticky
|
||
page header (`.page-sticky-header` ≈ 80 px). Without it,
|
||
`scrollIntoView({ block: 'nearest' })` aligns the row's top edge
|
||
against the viewport's top edge — which the sticky header is
|
||
currently covering — so the user only sees the row's bottom edge.
|
||
`scroll-margin-bottom` gives a touch of breathing room when the
|
||
scroll happens to land the row near the viewport bottom. */
|
||
.file-item.resource-row--just-added {
|
||
animation: resource-row-just-added 1.5s ease-out;
|
||
scroll-margin-top: 100px;
|
||
scroll-margin-bottom: 24px;
|
||
}
|
||
|
||
@keyframes resource-row-just-added {
|
||
0% {
|
||
background-color: var(--color-success-bg);
|
||
}
|
||
|
||
100% {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
|
||
/* Client-only "New" swimlane created on the fly by `addItem()` when
|
||
the view is grouped. Subtler styling than a natural-group lane: the
|
||
user understands the pin is temporary (it dissolves on next full
|
||
reload), so we don't want the bar to dominate the list. The pinned
|
||
placement at the top of the container is what makes it
|
||
discoverable; the header just confirms the intent. */
|
||
.resource-list__swimlane-group--just-added > .resource-list__swimlane-header {
|
||
color: var(--color-success-text);
|
||
}
|
||
|
||
.file-item.selected {
|
||
background-color: var(--color-item-selected);
|
||
}
|
||
|
||
.file-item:hover {
|
||
background-color: var(--color-item-hover);
|
||
border-color: var(--color-border-medium);
|
||
}
|
||
|
||
.file-item.selected:hover {
|
||
background-color: var(--color-item-hover-accent);
|
||
}
|
||
|
||
.file-item.dragging {
|
||
opacity: 0.8;
|
||
background-color: var(--color-bg-input);
|
||
}
|
||
|
||
.file-item.drop-target {
|
||
background-color: var(--color-warning-ring);
|
||
}
|
||
|
||
.file-item .file-icon > i,
|
||
.file-item .file-icon > svg {
|
||
position: absolute;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* ── Per-item checkboxes (list + grid) ───────────────────── */
|
||
|
||
.list-header-checkbox,
|
||
.file-item .checkbox-cell {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.list-header-checkbox input[type="checkbox"],
|
||
.file-item .checkbox-cell input[type="checkbox"] {
|
||
/* Bumped from 17px to 20px so the row-selection checkbox reads at
|
||
a similar visual weight to the 28x28 action buttons that sit at
|
||
the other end of the row (Ed's 2026-07-26 UX note). 20px is the
|
||
upper end of the browser-native checkbox range — beyond that
|
||
platforms start rendering an oversized-and-blurry glyph. */
|
||
width: 20px;
|
||
height: 20px;
|
||
cursor: pointer;
|
||
accent-color: var(--color-accent);
|
||
border-radius: var(--radius-sm);
|
||
}
|
||
|
||
/* Orange outline on hover for the row-selection checkbox (Ed's UX ask
|
||
2026-07-26). `outline` (not `border`) because native checkboxes in
|
||
list view honor `accent-color` but their border rendering is
|
||
platform-inconsistent — `outline` is drawn OUTSIDE the box and
|
||
doesn't reflow the layout. Grid view uses a custom-drawn checkbox
|
||
(see `.files-grid-view … input[type="checkbox"]` below) which
|
||
accepts real border styling; its hover override lives with that
|
||
block and beats this via specificity. Matches the "everything
|
||
hovers to accent" convention shared with row-action buttons. */
|
||
.list-header-checkbox input[type="checkbox"]:hover,
|
||
.file-item .checkbox-cell input[type="checkbox"]:hover {
|
||
outline: 2px solid var(--color-accent);
|
||
outline-offset: 1px;
|
||
}
|
||
|
||
.list-header.selection-mode {
|
||
grid-template-columns: 36px 1fr;
|
||
background-color: var(--color-multiselect-bg);
|
||
color: var(--color-multiselect-text);
|
||
border-bottom-color: var(--color-multiselect-border);
|
||
}
|
||
|
||
.list-header.selection-mode .list-header-checkbox input[type="checkbox"] {
|
||
accent-color: var(--color-accent);
|
||
}
|
||
|
||
/* ── List view ───────────────────────────────────────────── */
|
||
|
||
.list-header {
|
||
display: grid;
|
||
grid-template-columns: var(--files-list-columns);
|
||
column-gap: var(--space-3);
|
||
padding: 15px;
|
||
font-weight: var(--weight-semibold);
|
||
color: var(--color-text);
|
||
background-color: var(--color-bg-subtle);
|
||
border-bottom: 1px solid var(--color-border-faint);
|
||
align-items: center;
|
||
}
|
||
|
||
/* Trash view: Name → [Path] → Size → Date → Actions
|
||
* Override --files-list-columns so the trash header AND trash items align.
|
||
* No checkbox (selectable=false), no owner cell visible, no type column.
|
||
*
|
||
* Mobile-first: the Path column is hidden by default to keep the layout
|
||
* legible on narrow screens (path stays accessible via itemTooltip on hover).
|
||
* From 1000px upward, Path reappears and claims roughly half the table
|
||
* width via a 3fr share against Name's 1fr. */
|
||
.files-list-view.trash-list {
|
||
--files-list-columns: minmax(180px, 1fr) 110px 130px 100px;
|
||
}
|
||
|
||
.files-list-view.trash-list .file-item .path-cell,
|
||
.files-list-view.trash-list .list-header.trash-header > div:nth-child(2) {
|
||
display: none;
|
||
}
|
||
|
||
@media (min-width: 1000px) {
|
||
.files-list-view.trash-list {
|
||
--files-list-columns: minmax(180px, 1fr) 3fr 110px 130px 100px;
|
||
}
|
||
|
||
.files-list-view.trash-list .file-item .path-cell,
|
||
.files-list-view.trash-list .list-header.trash-header > div:nth-child(2) {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.list-header > div,
|
||
.files-list-view .file-item > div {
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Column alignment — targets classes on BOTH the header divs AND the value
|
||
cells, so the header label always matches its column's value alignment
|
||
regardless of which optional columns (path/type/owner/…) are on. The
|
||
previous shape keyed off `nth-child(N)` and drifted the moment a
|
||
ResourceList caller toggled a `show*` prop. */
|
||
.list-header > .size-cell,
|
||
.files-list-view .file-item .size-cell {
|
||
justify-self: end;
|
||
text-align: right;
|
||
}
|
||
|
||
/* ── Sortable column headers (flat Drive-style sort) ─────────── */
|
||
.list-header-sort {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-1-5);
|
||
min-width: 0;
|
||
padding: 0;
|
||
border: none;
|
||
background: none;
|
||
cursor: pointer;
|
||
/* Inherit the header row's weight + colour so it reads as a header. */
|
||
font: inherit;
|
||
color: inherit;
|
||
transition: color var(--motion-fast) var(--ease-standard);
|
||
}
|
||
|
||
.list-header-sort:hover,
|
||
.list-header-sort.is-active {
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
.list-header-sort__arrow {
|
||
font-size: var(--text-2xs);
|
||
color: var(--color-accent);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Match the value-cell alignment so header and data line up. */
|
||
.list-header-sort[data-sort-field="size"] {
|
||
justify-self: end;
|
||
}
|
||
|
||
.list-header-sort[data-sort-field="modified_at"] {
|
||
justify-self: center;
|
||
}
|
||
|
||
/* ── Owner column ────────────────────────────────────────── */
|
||
|
||
/* Styles applied whenever the cell is visible (hidden class absent).
|
||
The .hidden utility class (display:none !important) keeps it invisible
|
||
by default — it is stamped directly in the HTML templates.
|
||
|
||
`display: flex` lets a nested `.user-vignette` (the common case
|
||
for an owner cell — an avatar circle plus a name) become a flex
|
||
child that can shrink past its intrinsic content width. The
|
||
`.user-vignette__name` already declares
|
||
`text-overflow: ellipsis`, but that only fires when the cascade
|
||
above it ACTUALLY constrains the width. Without flex here, the
|
||
vignette sized to its content and the cell clipped it flat with
|
||
no ellipsis. The cell's own `text-overflow` still ellipses
|
||
plain-text fallback content (cells without a vignette child). */
|
||
/* Scoped to `.file-item` so the header div — which also carries the
|
||
`.owner-cell` class now (so column-alignment CSS keys off classes
|
||
instead of brittle nth-child indices) — doesn't inherit the muted
|
||
cell colour / cell font size. Header keeps `.list-header`'s
|
||
semibold + text colour. */
|
||
.file-item .owner-cell {
|
||
color: var(--color-text-secondary);
|
||
font-size: var(--text-base);
|
||
display: flex;
|
||
align-items: center;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* List-view rows are fixed 56px (VirtualList `rowHeight={56}`), and a
|
||
full UserVignette stacks avatar (32px) + name (20px) + email (15px)
|
||
→ ~40px block that doesn't visually fit the flex-centered cell —
|
||
the email tail was cropped. Hide the email in dense-row contexts
|
||
(Ed 2026-07-26); the identity signal remains (avatar + name), and
|
||
the email survives in the ShareDialog / recipient pickers where
|
||
UserVignette was originally scaled for. Grid view's owner cell is
|
||
unaffected (it never renders a UserVignette — the sharer surfaces
|
||
through the `.file-icon__badge` slot instead). */
|
||
.files-list-view .file-item .owner-cell .uv__email {
|
||
display: none;
|
||
}
|
||
|
||
/* Expand the grid track as soon as at least one owner cell is visible. */
|
||
.files-list-view:has(.owner-cell:not(.hidden)) {
|
||
--files-list-columns: 36px minmax(200px, 2fr) 120px 100px 110px 130px 200px;
|
||
}
|
||
|
||
.files-list-view {
|
||
--files-list-columns: 36px minmax(200px, 2fr) 100px 110px 130px 200px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
border-radius: var(--radius-xl);
|
||
overflow: hidden;
|
||
background-color: var(--color-item);
|
||
box-shadow: 0 1px 3px var(--color-shadow-xs);
|
||
}
|
||
|
||
.files-list-view .file-item {
|
||
display: grid;
|
||
grid-template-columns: var(--files-list-columns);
|
||
column-gap: var(--space-3);
|
||
padding: var(--space-3) 15px;
|
||
border-bottom: 1px solid var(--color-border-xfaint);
|
||
align-items: center;
|
||
cursor: pointer;
|
||
transition:
|
||
background-color var(--motion-fast) var(--ease-standard),
|
||
box-shadow var(--motion-fast) var(--ease-standard);
|
||
}
|
||
|
||
/* "This row" emphasis — a left accent bar on hover/selection (inset shadow,
|
||
so it adds no width and never shifts the grid columns). */
|
||
.files-list-view .file-item:hover,
|
||
.files-list-view .file-item.selected {
|
||
box-shadow: inset 3px 0 0 var(--color-accent);
|
||
}
|
||
|
||
.files-list-view .file-item.drop-target {
|
||
border: 1px dashed var(--color-warning-border);
|
||
}
|
||
|
||
.files-list-view .file-item .name-cell {
|
||
color: var(--color-text);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Same narrowing rationale as the grid view rule below — target only
|
||
the name text span, not every descendant span, so `.file-icon__badge`
|
||
overlay contents (avatars, chips) aren't sized as text. */
|
||
.files-list-view .file-item .name-cell__text {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* Content-search snippet — fragment of the file body that matched the
|
||
query. Wraps onto a second line inside the flex name-cell. */
|
||
.files-list-view .file-item .name-cell:has(.file-item__snippet) {
|
||
flex-wrap: wrap;
|
||
row-gap: 2px;
|
||
}
|
||
|
||
.files-list-view .file-item .file-item__snippet {
|
||
flex-basis: 100%;
|
||
/* icon width (36px) + cell gap (12px) — aligns under the name */
|
||
padding-left: 48px;
|
||
font-size: 12px;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
/* Grid cards are too compact for body fragments. */
|
||
.files-grid-view .file-item .file-item__snippet {
|
||
display: none;
|
||
}
|
||
|
||
.files-list-view .file-item .file-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: var(--radius-lg);
|
||
/* Soft type-tinted tile + matching hairline ring so the row glyph reads as
|
||
a colourful chip (and light previews don't bleed into the row). */
|
||
background: color-mix(in srgb, var(--fk) 12%, transparent);
|
||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fk) 22%, var(--color-border));
|
||
font-size: var(--text-md);
|
||
margin-bottom: 0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.list-header > .date-cell,
|
||
.files-list-view .file-item .date-cell {
|
||
justify-self: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.files-list-view .file-item .date-cell {
|
||
color: var(--color-text-muted);
|
||
font-size: var(--text-base);
|
||
}
|
||
|
||
.files-list-view .file-item .size-cell {
|
||
color: var(--color-text-muted);
|
||
font-size: var(--text-base);
|
||
text-align: right;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.files-list-view .file-item .type-cell {
|
||
color: var(--color-text-secondary);
|
||
font-weight: var(--weight-medium);
|
||
font-size: var(--text-base);
|
||
}
|
||
|
||
.files-list-view .file-item .action-cell {
|
||
/* Right-justified flex row: gives every list-view action button
|
||
(shared, fav, broom, kebab, trash's restore/delete, …) a
|
||
predictable horizontal cluster with a stable gap. The legacy
|
||
`display: inline` on individual buttons ignored `width`/`height`,
|
||
so once /recent grew a 4th button the mix of `inline` + `inline-
|
||
flex` (`.btn-action`) started wrapping onto pseudo-rows that
|
||
read as a broken grid. Flex flattens the mix into one line. */
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
text-align: right;
|
||
}
|
||
|
||
/* List rows expose the individual action buttons inline (on hover), so the
|
||
corner kebab is redundant here — it's the grid view's affordance. */
|
||
.files-list-view .file-item .action-cell .file-actions {
|
||
display: none;
|
||
}
|
||
|
||
/* Styles for the built-in action-cell buttons (favorite-star, kebab).
|
||
* `.btn-action` is excluded — it owns its own colors via the generic
|
||
* `.btn-action` rule + variant modifiers (e.g. `.btn-action--delete`). */
|
||
.files-list-view .file-item .action-cell button:not(.btn-action),
|
||
.files-list-view .file-item .action-cell div {
|
||
display: inline;
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: var(--radius-lg);
|
||
border: none;
|
||
background: transparent;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
color: var(--color-text-subtle);
|
||
font-size: var(--text-md);
|
||
}
|
||
|
||
.files-list-view .file-item .action-cell button:not(.btn-action):hover {
|
||
background: var(--color-border-subtle);
|
||
/* Accent-orange hover — matches the grid view's `.file-actions:hover`
|
||
and the shared `.btn-action:hover` rule. Semantic overrides on
|
||
`.favorite-star:hover` / `.shared-button:hover` (gold / blue) take
|
||
precedence via more-specific selectors below. */
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
/* List-view resting/active state colors for favorite (gold) and shared
|
||
(blue). Hover is intentionally NOT overridden here — the generic
|
||
`.action-cell button:not(.btn-action):hover → --color-accent` rule
|
||
above owns the orange hover for every button (kebab / favorite /
|
||
shared) per Ed's 2026-07-26 spec. This block only paints the
|
||
at-rest state on `.active` rows so the star / shared chip stays
|
||
discoverable on a quiet row. */
|
||
.files-list-view .file-item .action-cell button.favorite-star.active {
|
||
color: var(--color-star-text-hover);
|
||
}
|
||
|
||
.files-list-view .file-item .action-cell button.shared-button.active {
|
||
color: var(--color-badge-blue-text);
|
||
}
|
||
|
||
/* Fav-star + shared-button — hidden on quiet rows, visible on row hover,
|
||
and always visible when their `.active` class is set (so a favorited /
|
||
shared row is discoverable without mousing over).
|
||
|
||
`opacity: 0` + `pointer-events: none` (instead of `visibility: hidden`)
|
||
so the hide transitions match the kebab's fade — Ed's 2026-07-26 UX
|
||
note: pre-refactor kebab faded over motion-fast while star/shared
|
||
snapped out instantly (visibility flips have no animatable value),
|
||
producing a staggered exit when the pointer left a row. The slot
|
||
still reserves layout because the button geometry is unchanged; only
|
||
its paint is toggled. */
|
||
.files-list-view .file-item .action-cell button.favorite-star,
|
||
.files-list-view .file-item .action-cell button.shared-button {
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
border: none;
|
||
transition: opacity var(--motion-fast) var(--ease-standard);
|
||
}
|
||
|
||
/* Strict reveal: star + shared appear ONLY on `.active` (row is
|
||
favorited / shared) or pointer hover — Ed's 2026-07-26 spec. No
|
||
`:focus-within` reveal, so keyboard focus on the row-body (name /
|
||
path cells) does NOT flash the actions cluster. Quiet rows stay
|
||
quiet at rest. */
|
||
.files-list-view .file-item:hover .action-cell button.favorite-star,
|
||
.files-list-view .file-item:hover .action-cell button.shared-button,
|
||
.files-list-view .file-item .action-cell button.favorite-star.active,
|
||
.files-list-view .file-item .action-cell button.shared-button.active {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* Reveal the kebab on hover for cleaner rows — but only on hover-capable
|
||
devices, so touch users (no hover) keep it always tappable. Applies
|
||
to both list and grid views because both keep the kebab inside
|
||
`.action-cell`.
|
||
|
||
Keyboard accessibility comes from `:focus-visible` on the kebab
|
||
button itself (below), NOT `:focus-within` on the row. Using
|
||
`:focus-within` on the row was a lingering-visibility trap:
|
||
• dragstart landed focus on the dragged descendant → row
|
||
`:focus-within` stayed true after the pointer left → kebab
|
||
stayed visible on an otherwise-idle row.
|
||
• Opening a context-menu / ShareDialog portal moved focus outside
|
||
the row (good) but if focus briefly bounced through the kebab
|
||
first, the reveal could persist through the transition.
|
||
Ed's 2026-07-26 report: "when starting dragging or when using the
|
||
share dialog, I have the [...] button that remains visible." */
|
||
@media (hover: hover) {
|
||
.files-list-view .file-item .action-cell button.file-actions,
|
||
.files-grid-view .file-item .action-cell button.file-actions {
|
||
opacity: 0;
|
||
transition: opacity var(--motion-fast) var(--ease-standard);
|
||
}
|
||
|
||
.files-list-view .file-item:hover .action-cell button.file-actions,
|
||
.files-grid-view .file-item:hover .action-cell button.file-actions,
|
||
.files-list-view .file-item .action-cell button.file-actions:focus-visible,
|
||
.files-grid-view .file-item .action-cell button.file-actions:focus-visible {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* ── Grid view ───────────────────────────────────────────── */
|
||
|
||
.files-grid-view {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(var(--grid-card-min), 1fr));
|
||
gap: var(--space-5);
|
||
position: relative;
|
||
}
|
||
|
||
/* header not visible in grid mode */
|
||
.files-grid-view .list-header {
|
||
display: none;
|
||
}
|
||
|
||
/* ── Mobile reflow (≤ --bp-sm 640px) ──────────────────────────
|
||
The 6-column grid can't fit a phone, so each list row collapses to a
|
||
compact flex line (icon + name … size + actions) and the column header
|
||
is hidden (sort controls live in the actions bar). One block covers
|
||
files / trash / favorites / recent uniformly; flex ignores the grid
|
||
tracks, so there's no header-vs-row misalignment to maintain. */
|
||
@media (max-width: 640px) {
|
||
/* Keep the selection-mode header (holds select-all); hide the plain one. */
|
||
.list-header:not(.selection-mode) {
|
||
display: none;
|
||
}
|
||
|
||
.files-list-view .file-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
}
|
||
|
||
.files-list-view .file-item .type-cell,
|
||
.files-list-view .file-item .date-cell,
|
||
.files-list-view .file-item .owner-cell,
|
||
.files-list-view .file-item .path-cell {
|
||
display: none;
|
||
}
|
||
|
||
.files-list-view .file-item .name-cell {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.files-list-view .file-item .checkbox-cell,
|
||
.files-list-view .file-item .size-cell,
|
||
.files-list-view .file-item .action-cell {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Tighter grid on phones (2 columns instead of 1). */
|
||
.files-grid-view {
|
||
--grid-card-min: 140px;
|
||
gap: var(--space-2);
|
||
}
|
||
}
|
||
|
||
.files-grid-view .file-item {
|
||
border-radius: var(--radius-2xl);
|
||
/* Hairline at rest → accent on hover (gallery, not form). */
|
||
border: 1px solid var(--color-border);
|
||
padding: var(--space-3);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
box-shadow: 0 1px 2px var(--color-shadow-xs);
|
||
cursor: pointer;
|
||
width: 100%;
|
||
min-height: 160px;
|
||
position: relative;
|
||
transition:
|
||
transform var(--motion-base) var(--ease-standard),
|
||
box-shadow var(--motion-base) var(--ease-standard),
|
||
border-color var(--motion-base) var(--ease-standard);
|
||
}
|
||
|
||
.files-grid-view .file-item.dragging {
|
||
opacity: 0.5;
|
||
transform: scale(0.95);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.files-grid-view .file-item:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 12px 28px -8px var(--color-shadow-md);
|
||
border-color: var(--color-accent);
|
||
}
|
||
|
||
/* The thumbnail subtly zooms inside its clipped tile on hover — the "alive"
|
||
feel of a premium gallery. */
|
||
.files-grid-view .file-item .file-icon .file-thumb {
|
||
transition: transform var(--motion-moderate) var(--ease-standard);
|
||
}
|
||
|
||
.files-grid-view .file-item:hover .file-icon .file-thumb {
|
||
transform: scale(1.04);
|
||
}
|
||
|
||
.files-grid-view .file-item.selected {
|
||
border-color: var(--color-accent);
|
||
box-shadow:
|
||
0 0 0 1px var(--color-accent-ring-dark),
|
||
0 4px 12px var(--color-accent-ring);
|
||
}
|
||
|
||
.files-grid-view .file-item.selected:hover {
|
||
box-shadow:
|
||
0 0 0 1px var(--color-accent-ring-strong),
|
||
0 6px 18px var(--color-accent-ring-dark);
|
||
}
|
||
|
||
/* elements hidden in grid view — the type label ("Imagen") is redundant under
|
||
a thumbnail, so we drop it and surface the file size instead. */
|
||
.files-grid-view .file-item .date-cell,
|
||
.files-grid-view .file-item .type-cell,
|
||
.files-grid-view .file-item .owner-cell {
|
||
display: none;
|
||
}
|
||
|
||
/* Selection checkbox */
|
||
/* Overlay controls sit ON the thumbnail (offset by the card padding) over a
|
||
frosted scrim, so they read as part of the media instead of floating on the
|
||
card corner. */
|
||
.files-grid-view .file-item .checkbox-cell {
|
||
position: absolute;
|
||
top: calc(var(--space-3) + 8px);
|
||
left: calc(var(--space-3) + 8px);
|
||
/* 30x30 matches the action-cell chip pills (`.file-actions`, star,
|
||
shared, `.btn-action`) so the checkbox and the corner-cluster
|
||
buttons read as siblings of one visual size (Ed 2026-07-26). */
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: var(--radius-md);
|
||
background: var(--color-scrim-control);
|
||
backdrop-filter: blur(6px);
|
||
-webkit-backdrop-filter: blur(6px);
|
||
box-shadow: 0 1px 3px var(--color-shadow-sm);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0;
|
||
z-index: 10;
|
||
cursor: pointer;
|
||
transition: opacity var(--motion-fast) var(--ease-standard);
|
||
}
|
||
|
||
/* Visible whenever the card is hovered OR already selected, so the checked
|
||
state stays on screen after the pointer leaves. */
|
||
.files-grid-view .file-item:hover .checkbox-cell,
|
||
.files-grid-view .file-item.selected .checkbox-cell {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Custom-drawn checkbox: an empty white box that fills with accent and shows a
|
||
crisp white tick when checked. The native 17px control was invisible once the
|
||
cell turned accent on selection (accent-on-accent), and the intended tick
|
||
targeted a `.checkbox-cell i` the markup never renders — so a click read as
|
||
"nothing happened". This makes the checked state unmistakable. */
|
||
.files-grid-view .file-item .checkbox-cell input[type="checkbox"] {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
/* Custom-drawn glyph sized proportionally to the 30x30 chip pill —
|
||
bumped from 18x18 to match the list-view checkbox's 20x20. */
|
||
width: 20px;
|
||
height: 20px;
|
||
margin: 0;
|
||
border: 2px solid var(--color-border-medium);
|
||
border-radius: var(--radius-sm);
|
||
background: var(--color-bg-surface);
|
||
display: grid;
|
||
place-content: center;
|
||
cursor: pointer;
|
||
transition:
|
||
background-color var(--motion-fast) var(--ease-standard),
|
||
border-color var(--motion-fast) var(--ease-standard);
|
||
}
|
||
|
||
/* Grid view uses a custom-drawn checkbox (`appearance: none`) so we can
|
||
swap the real border color on hover — cleaner than the list-view
|
||
`outline` trick, and no double-ring on this variant. Specificity
|
||
(0,4,1 + 0,0,1) beats the shared `input[type="checkbox"]:hover`
|
||
outline rule above so the grid-view chip doesn't get both a border
|
||
AND an outline. */
|
||
.files-grid-view .file-item .checkbox-cell input[type="checkbox"]:hover {
|
||
border-color: var(--color-accent);
|
||
outline: none;
|
||
}
|
||
|
||
.files-grid-view .file-item .checkbox-cell input[type="checkbox"]::after {
|
||
content: "";
|
||
width: 5px;
|
||
height: 9px;
|
||
margin-top: -1px;
|
||
border: solid var(--color-danger-text);
|
||
border-width: 0 2px 2px 0;
|
||
transform: rotate(45deg) scale(0);
|
||
transform-origin: center;
|
||
transition: transform var(--motion-fast) var(--ease-standard);
|
||
}
|
||
|
||
.files-grid-view .file-item .checkbox-cell input[type="checkbox"]:checked {
|
||
background: var(--color-accent);
|
||
border-color: var(--color-accent);
|
||
}
|
||
|
||
.files-grid-view .file-item .checkbox-cell input[type="checkbox"]:checked::after {
|
||
transform: rotate(45deg) scale(1);
|
||
}
|
||
|
||
.files-grid-view .file-item .checkbox-cell input[type="checkbox"]:focus-visible {
|
||
outline: 2px solid var(--color-accent);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* ── Grid card action cluster ─────────────────────────────────────
|
||
Every action a row can surface — favorite star, `.file-actions`
|
||
kebab, per-section `.btn-action` icons (e.g. trash's Restore /
|
||
Delete permanently) — lives in a single `.action-cell` container
|
||
pinned to the top-right of the card. The container carries the
|
||
position + hover-reveal + gap; its children just supply their
|
||
own chip visuals (30x30 scrim pill, etc.), no more one-off
|
||
absolute positioning per child.
|
||
|
||
Old rules put `.file-actions` and `.favorite-star` at hand-crafted
|
||
absolute coordinates and hid `.btn-action` entirely — that made
|
||
trash's per-item buttons invisible in grid view. The unified
|
||
container reads as one design pattern and takes whatever children
|
||
the row template hands it. */
|
||
.files-grid-view .file-item .action-cell {
|
||
position: absolute;
|
||
top: calc(var(--space-3) + 8px);
|
||
right: calc(var(--space-3) + 8px);
|
||
z-index: 10;
|
||
display: flex;
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
/* Full-width top action bar — only applies when the row surfaces at
|
||
least one state chip (shared or favorite). Trash (no shared / no
|
||
favorite) falls through to the horizontal corner cluster above,
|
||
preserving its Restore / Delete / kebab layout.
|
||
|
||
Layout target:
|
||
┌────────────────────────────────────────────┐
|
||
│[chk] [kebab] [btn-action…] [shared] [fav] │ ← single row
|
||
│ │
|
||
│ (thumbnail) │
|
||
│ │
|
||
└────────────────────────────────────────────┘
|
||
|
||
The checkbox stays where it is (its own `.checkbox-cell` absolute at
|
||
top-left); the action-cell spans horizontally next to it so the two
|
||
clusters read as one row. `justify-content: space-between` + `order`
|
||
splits the flex row into a left group (kebab + btn-actions) and a
|
||
right group (shared + favorite) without fighting DOM order — the
|
||
markup still has shared, favorite, itemActions, kebab in that
|
||
sequence so list-view's inline right-aligned flow is unchanged. */
|
||
.files-grid-view .file-item .action-cell:has(.shared-button, .favorite-star) {
|
||
/* Start right after the checkbox column (30px chip + inline gap)
|
||
so the left group aligns visually with the checkbox row. Kept in
|
||
sync with `.checkbox-cell` width above — the two share this
|
||
constant. */
|
||
left: calc(var(--space-3) + 8px + 30px + var(--space-2));
|
||
right: calc(var(--space-3) + 8px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
.files-grid-view .file-item .action-cell:has(.shared-button, .favorite-star) .file-actions {
|
||
order: 1;
|
||
}
|
||
|
||
.files-grid-view .file-item .action-cell:has(.shared-button, .favorite-star) .btn-action {
|
||
order: 2;
|
||
}
|
||
|
||
/* The first "right group" item eats all remaining horizontal space via
|
||
`margin-left: auto`, which is the flexbox idiom for splitting a row
|
||
into left+right clusters without wrapping the two groups in extra
|
||
containers. When both buttons are wired, shared is first (`order: 3`)
|
||
and takes the push; fav follows with the normal gap. When only fav
|
||
is wired (`/shared-with-me` — recipient side, no share affordance),
|
||
fav is the sole right-group item and takes the push instead. */
|
||
.files-grid-view .file-item .action-cell:has(.shared-button, .favorite-star) .shared-button {
|
||
order: 3;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.files-grid-view .file-item .action-cell:has(.shared-button, .favorite-star) .favorite-star {
|
||
order: 4;
|
||
}
|
||
|
||
.files-grid-view
|
||
.file-item
|
||
.action-cell:has(.favorite-star):not(:has(.shared-button))
|
||
.favorite-star {
|
||
margin-left: auto;
|
||
}
|
||
|
||
/* Per-button visibility (mirrors list view): each button is independently
|
||
gated by its own `.active` flag OR row-hover. This prevents a favorited
|
||
row from also lighting up the shared button (and vice versa).
|
||
`opacity + pointer-events` so the fade timing matches the kebab and
|
||
every `.btn-action--hover` — see the list-view block above for why. */
|
||
.files-grid-view .file-item .action-cell .favorite-star,
|
||
.files-grid-view .file-item .action-cell .shared-button {
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity var(--motion-fast) var(--ease-standard);
|
||
}
|
||
|
||
/* Strict reveal: same rule as the list view — `.active` OR pointer
|
||
hover, no `:focus-within` (Ed's 2026-07-26 spec). */
|
||
.files-grid-view .file-item:hover .action-cell .favorite-star,
|
||
.files-grid-view .file-item:hover .action-cell .shared-button,
|
||
.files-grid-view .file-item .action-cell .favorite-star.active,
|
||
.files-grid-view .file-item .action-cell .shared-button.active {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* Chip visuals for anything inside the corner cluster — the kebab, the star,
|
||
the shared button, any `.btn-action`. Uniform 30x30 scrim pill so they
|
||
line up in the flex row.
|
||
NOTE: no `opacity: 1` here. Per-button reveal rules above own the
|
||
opacity (star/shared: `.active` + `:hover`; kebab + btn-action:
|
||
`:hover`). Pre-refactor this block force-set `opacity: 1` on the
|
||
assumption that reveal lived on the parent `.action-cell` — that
|
||
assumption is gone (Ed 2026-07-26), and the leftover made star +
|
||
shared appear always-visible in grid view regardless of hover /
|
||
`.active` state. */
|
||
.files-grid-view .file-item .action-cell .file-actions,
|
||
.files-grid-view .file-item .action-cell .favorite-star,
|
||
.files-grid-view .file-item .action-cell .shared-button,
|
||
.files-grid-view .file-item .action-cell .btn-action {
|
||
position: static;
|
||
width: 30px;
|
||
height: 30px;
|
||
/* `margin: 0` overrides the legacy `.files-grid-view .file-item
|
||
.btn-action { margin-top: var(--space-1) }` rule further down —
|
||
inside the corner cluster the parent's `gap` handles spacing
|
||
and any per-child margin would misalign the pills. */
|
||
margin: 0;
|
||
padding: 0;
|
||
border: none;
|
||
border-radius: var(--radius-full);
|
||
background: var(--color-scrim-control);
|
||
backdrop-filter: blur(6px);
|
||
-webkit-backdrop-filter: blur(6px);
|
||
box-shadow: 0 1px 3px var(--color-shadow-sm);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--color-text);
|
||
font-size: var(--text-md);
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Unified row-action hover: every button in the grid-view corner cluster
|
||
(kebab, star, shared, btn-action*) turns accent-orange on hover.
|
||
Semantic states are conveyed by the `.active` class, not by hover
|
||
color, so favorite = gold when starred, shared = blue when shared,
|
||
both regardless of pointer position (see `.active` rules below).
|
||
Ed's 2026-07-26 UX call: "orange for mouse over on all buttons;
|
||
blue only for active shared."
|
||
|
||
Selector specificity (0,4,1 + 0,0,1 = high) beats the chip-visual
|
||
base rule at ~line 852 (`.files-grid-view .file-item .action-cell
|
||
.btn-action { color: var(--color-text) }`, 0,4,0), which is why the
|
||
simpler `.btn-action:hover` didn't take effect inside the corner
|
||
cluster. */
|
||
.files-grid-view .file-item .action-cell .file-actions:hover,
|
||
.files-grid-view .file-item .action-cell .btn-action:hover,
|
||
.files-grid-view .file-item .action-cell .favorite-star:hover,
|
||
.files-grid-view .file-item .action-cell .shared-button:hover {
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
.files-grid-view .file-item.drop-target {
|
||
background-color: var(--color-warning-ring);
|
||
border: 2px dashed var(--color-warning-border);
|
||
}
|
||
|
||
/* Favorite star + shared button — resting/active state colors only.
|
||
HOVER color for both lives in the unified `.action-cell button:hover
|
||
→ --color-accent` rule above; the per-state palette here only fires
|
||
when the button is NOT hovered. Convention (Ed 2026-07-26):
|
||
• hover → orange (accent) — every row action
|
||
• star.active (not hover) → gold
|
||
• shared.active (not hover) → blue
|
||
|
||
`.active` retains its color even on hover for `favorite-star` (star
|
||
users expect gold-on-gold on the currently-starred item; losing the
|
||
glyph mid-click reads as broken) but yields to orange for `shared`
|
||
per Ed's explicit "blue only for active shared" — pointer-over on
|
||
an already-shared row should still communicate "you're about to
|
||
toggle something." */
|
||
.files-grid-view .file-item button.favorite-star,
|
||
.files-grid-view .file-item button.shared-button {
|
||
color: var(--color-text-subtle);
|
||
font-size: 15px;
|
||
line-height: var(--leading-none);
|
||
}
|
||
|
||
.files-grid-view .file-item button.favorite-star.active {
|
||
color: var(--color-star-text-hover);
|
||
}
|
||
|
||
.files-grid-view .file-item button.shared-button.active {
|
||
color: var(--color-badge-blue-text);
|
||
}
|
||
|
||
.files-grid-view .file-item .name-cell {
|
||
font-size: var(--text-sm);
|
||
font-weight: var(--weight-medium);
|
||
text-align: center;
|
||
margin-bottom: 2px;
|
||
color: var(--color-text);
|
||
/* Span the full card width. The card is a centered flex column
|
||
(`align-items: center`), so without an explicit width the name-cell —
|
||
which wraps BOTH the thumbnail tile and the filename — shrink-wraps to
|
||
the filename's length. That made `.file-icon { width: 100% }` track the
|
||
NAME width, so a long name ("CURSO TERRAFORM") rendered a big tile and a
|
||
short one ("Idiomas") a small one. Forcing 100% makes every thumbnail
|
||
tile identical regardless of name length. */
|
||
width: 100%;
|
||
max-width: 100%;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
margin-top: var(--space-1);
|
||
}
|
||
|
||
/* Narrowed from the pre-fix `.name-cell span` (descendant selector) to
|
||
the specific name-text span. The broad rule caught EVERY span inside
|
||
`.name-cell` — including the `.file-icon__badge` overlay and, inside
|
||
it, `<UserAvatar>`'s `.ua` wrapper — and slapped 8 px of top/bottom
|
||
padding on them, which crushed the badge's `<img>` from 22 × 22 down
|
||
to 22 × 6 (Ed 2026-07-26). Text ellipsis / padding stays on the text
|
||
span alone; overlay children in `.file-icon` are unaffected. */
|
||
.files-grid-view .file-item .name-cell__text {
|
||
display: block;
|
||
max-width: 100%;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
padding-top: var(--space-2);
|
||
padding-bottom: var(--space-2);
|
||
}
|
||
|
||
.files-grid-view .file-item .name-cell svg.favorite-star-inline {
|
||
display: none;
|
||
}
|
||
|
||
/* The grid card's secondary line is now the combined .grid-meta block
|
||
("hace 2 días · 4,31 MB"), so the standalone size-cell is hidden here. */
|
||
.files-grid-view .file-item .size-cell {
|
||
display: none;
|
||
}
|
||
|
||
/* ── Grid metadata line — recency + size (+ owner avatar when shared) ──────
|
||
Replaces the lone "4,31 MB": a top file app captions a thumbnail with WHEN
|
||
it was touched (the dominant retrieval cue), not just bytes. Hidden
|
||
everywhere except the grid — list view keeps its own date/size/owner
|
||
columns, so a display:none here drops it cleanly out of the row grid. */
|
||
.grid-meta {
|
||
display: none;
|
||
}
|
||
|
||
.files-grid-view .file-item .grid-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-1);
|
||
max-width: 100%;
|
||
margin-top: 2px;
|
||
font-size: var(--text-2xs);
|
||
color: var(--color-text-muted);
|
||
line-height: var(--leading-snug);
|
||
}
|
||
|
||
/* On a narrow card the relative date truncates first; the size never clips. */
|
||
.files-grid-view .file-item .grid-meta__date {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.files-grid-view .file-item .grid-meta__size {
|
||
flex: 0 0 auto;
|
||
color: var(--color-text-faint);
|
||
}
|
||
|
||
.files-grid-view .file-item .grid-meta__size::before {
|
||
content: "·";
|
||
margin-right: var(--space-1);
|
||
color: var(--color-text-faint);
|
||
}
|
||
|
||
/* Owner avatar — only rendered when the item is shared; sits at the line end. */
|
||
.files-grid-view .file-item .grid-meta .user-vignette {
|
||
flex: 0 0 auto;
|
||
margin-left: var(--space-1);
|
||
}
|
||
|
||
/* Full-width thumbnail tile with a fixed aspect ratio — the image
|
||
(`.file-thumb`, object-fit:cover) fills it edge-to-edge for a uniform,
|
||
rich grid instead of a small letterboxed preview. Non-image files show
|
||
their type icon centred on the placeholder fill. */
|
||
.files-grid-view .file-item .file-icon {
|
||
width: 100%;
|
||
height: auto;
|
||
aspect-ratio: 4 / 3;
|
||
border-radius: var(--radius-lg);
|
||
/* Soft type-tinted fill + matching hairline ring (a thumbnail, when
|
||
present, covers both edge-to-edge). Gives non-preview files a modern
|
||
colourful tile keyed to their type instead of a flat grey panel. */
|
||
background: color-mix(in srgb, var(--fk) 9%, var(--color-bg-input));
|
||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fk) 22%, var(--color-border));
|
||
margin: 0 0 var(--space-3);
|
||
font-size: 30px;
|
||
}
|
||
|
||
/* Type icon for non-thumbnail files (documents, etc.) — perfectly centered in
|
||
the tile. `inset: 0` + `margin: auto` + a fixed size is the absolute-centering
|
||
trick; the previous `top: auto` broke the vertical half, bottom-anchoring the
|
||
icon so it sat low in the tile. */
|
||
.files-grid-view .file-item .file-icon > i,
|
||
.files-grid-view .file-item .file-icon > svg {
|
||
inset: 0;
|
||
margin: auto;
|
||
width: 56px;
|
||
height: 56px;
|
||
}
|
||
|
||
/* ── Drag ghost ──────────────────────────────────────────── */
|
||
|
||
.dragged-items {
|
||
--dragged-files-list-columns: 36px minmax(200px, 1fr);
|
||
flex-direction: column;
|
||
background-color: transparent;
|
||
overflow: hidden;
|
||
border-radius: var(--radius-xl);
|
||
width: 100%;
|
||
}
|
||
|
||
.dragged-items .file-item {
|
||
grid-template-columns: var(--dragged-files-list-columns);
|
||
column-gap: var(--space-3);
|
||
align-items: center;
|
||
background-color: var(--color-item);
|
||
display: flex;
|
||
padding: var(--space-1);
|
||
width: 360px;
|
||
height: 46px;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
/* file name text is truncated */
|
||
.dragged-items .file-item div:nth-child(2) {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.dragged-items .file-item .file-icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
|
||
.dragged-items div.fading {
|
||
-webkit-mask-image: linear-gradient(to bottom, var(--color-item) 10%, transparent);
|
||
mask-image: linear-gradient(to bottom, var(--color-item) 10%, transparent);
|
||
}
|
||
|
||
.dragged-items-badge {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
transform: translate(50%, -50%);
|
||
background: var(--color-notification-badge);
|
||
color: var(--color-danger-text);
|
||
border-radius: 50%;
|
||
min-width: 20px;
|
||
height: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: var(--text-xs);
|
||
font-weight: var(--weight-bold);
|
||
padding: var(--space-0-5);
|
||
}
|
||
|
||
/* ── Swimlane group header ───────────────────────────────── */
|
||
|
||
/* Spans the full grid width in list view; no-op in grid view since
|
||
grid wraps it naturally. */
|
||
.resource-list__swimlane-header {
|
||
grid-column: 1 / -1;
|
||
padding: var(--space-1-5) var(--space-3) var(--space-1);
|
||
font-size: 0.72rem;
|
||
font-weight: var(--weight-semibold);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--color-text-faint);
|
||
border-bottom: 1px solid var(--color-border);
|
||
margin-top: var(--space-2);
|
||
cursor: default;
|
||
user-select: none;
|
||
}
|
||
|
||
.resource-list__swimlane-header:first-child,
|
||
.list-header + .resource-list__swimlane-header {
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* Grouped-grid container (files route): a vertical stack of
|
||
(header + its own windowed card grid) per swimlane. Not a grid itself —
|
||
the card grid rides each VirtualList's inner window — so it just stacks. */
|
||
.files-grouped-grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* In that flex stack the `grid-column: 1 / -1` span is inert; the header
|
||
spans naturally as a block-level flex child. First header needs no top
|
||
margin (there is no list-header sibling before it in the grid path). */
|
||
.files-grouped-grid > .resource-list__swimlane-header--grid {
|
||
grid-column: auto;
|
||
}
|
||
|
||
.files-grouped-grid > .resource-list__swimlane-header--grid:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* When the header contains a rich DOM node (e.g. a user vignette for the
|
||
"owner" group-by), reset the typographic overrides that only make sense
|
||
for plain-text labels, and lay the node out inline. */
|
||
.resource-list__swimlane-header--node {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: var(--space-1) var(--space-3);
|
||
text-transform: none;
|
||
letter-spacing: normal;
|
||
font-size: inherit;
|
||
font-weight: var(--weight-normal);
|
||
color: inherit;
|
||
}
|
||
|
||
/* ── Swimlane group card (list view only) ────────────────── */
|
||
|
||
/* When swimlane groups are present, dissolve the outer container into the
|
||
page background so each group card reads as its own panel. */
|
||
.files-list-view:has(.resource-list__swimlane-group) {
|
||
background-color: transparent;
|
||
box-shadow: none;
|
||
border-radius: 0;
|
||
overflow: visible;
|
||
gap: var(--space-2-5);
|
||
}
|
||
|
||
/* Each group is a self-contained card */
|
||
.files-list-view .resource-list__swimlane-group {
|
||
background-color: var(--color-item);
|
||
border-radius: var(--radius-xl);
|
||
box-shadow: 0 1px 3px var(--color-shadow-xs);
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* The header inside a group card is always first — no extra top margin */
|
||
.files-list-view .resource-list__swimlane-group .resource-list__swimlane-header {
|
||
margin-top: 0;
|
||
}
|
||
|
||
/* ── Swimlane group wrapper (grid view) ──────────────────── */
|
||
|
||
/* The group wrapper must be transparent to the grid so .file-item children
|
||
continue to flow in the parent's columns (subgrid mirrors the column tracks).
|
||
The wrapper spans the full row width; items inside fill the columns naturally. */
|
||
.files-grid-view .resource-list__swimlane-group {
|
||
grid-column: 1 / -1;
|
||
display: grid;
|
||
grid-template-columns: subgrid;
|
||
gap: var(--space-5);
|
||
}
|
||
|
||
/* ── Section item modifiers ──────────────────────────────── */
|
||
|
||
/* — Favorites — */
|
||
|
||
.file-item.favorite-item {
|
||
border-left: 3px solid var(--color-warning-border);
|
||
|
||
[dir="rtl"] & {
|
||
border-right: 3px solid var(--color-warning-border);
|
||
border-left: unset;
|
||
}
|
||
}
|
||
|
||
/* list-view column override */
|
||
.file-item.favorite-item {
|
||
position: relative;
|
||
grid-template-columns: 30px minmax(200px, 2fr) 1fr 1fr 120px;
|
||
}
|
||
|
||
.file-item.favorite-item .favorite-indicator {
|
||
position: relative;
|
||
top: 0;
|
||
right: 0;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
|
||
/* — Recent — */
|
||
|
||
.files-grid-view .file-item.recent-item {
|
||
border-left: 3px solid var(--color-recent-border);
|
||
|
||
[dir="rtl"] & {
|
||
border-right: 3px solid var(--color-recent-border);
|
||
border-left: unset;
|
||
}
|
||
}
|
||
|
||
/* list-view column override */
|
||
.file-item.recent-item {
|
||
position: relative;
|
||
grid-template-columns: 30px minmax(200px, 2fr) 1fr 1fr 120px;
|
||
}
|
||
|
||
.file-item.recent-item .recent-indicator {
|
||
position: relative;
|
||
top: 0;
|
||
right: 0;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
|
||
/* ── Path column (opt-in via ResourceListConfig.showPath) ──────────
|
||
* Visible in list view only — grid cards hide it because they have no
|
||
* dedicated column slot. itemTooltip still surfaces the path on hover.
|
||
*/
|
||
.files-list-view .file-item .path-cell {
|
||
color: var(--color-text-secondary);
|
||
font-size: var(--text-sm);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.files-grid-view .file-item .path-cell {
|
||
display: none;
|
||
}
|
||
|
||
/* ── Custom inline actions (ResourceListConfig.customActions) ──────
|
||
* Always visible in both list and grid view — used by trash for the
|
||
* restore / permanent-delete buttons that must be one click away.
|
||
*/
|
||
.btn-action {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: var(--radius-lg);
|
||
border: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
color: var(--color-text-subtle);
|
||
font-size: var(--text-md);
|
||
padding: 0;
|
||
}
|
||
|
||
.btn-action:hover {
|
||
background: var(--color-border-subtle);
|
||
/* Accent (orange) hover matches `.file-actions` (kebab) and the
|
||
favorite / shared button semantics — the pre-refactor grey-only
|
||
tint left `/recent`'s broom, `/trash`'s restore and `/search`'s
|
||
"open parent" reading as inert on hover next to the accented
|
||
kebab. Ed's 2026-07-26 UX ask: "all row buttons should change
|
||
color on hover, not just kebab and favorite." Section-specific
|
||
variants (`.btn-action--delete` in trash, `--on` in ShareDialog)
|
||
still win via more-specific selectors so red / etc. semantics
|
||
are preserved. */
|
||
color: var(--color-accent);
|
||
}
|
||
|
||
/* Opt-in modifier: hide the button until the row is hovered / focused.
|
||
Used by `/recent`'s per-row broom and `/search`'s open-parent
|
||
(history-management / navigational actions that shouldn't distract
|
||
from the row content at rest). Trash's Restore / Delete stay on the
|
||
plain `.btn-action` — those are the reason the user opened trash,
|
||
and hiding them would fail Fitts' law.
|
||
`opacity + pointer-events` (not `visibility`) so the fade timing
|
||
matches the kebab + star + shared button — Ed's 2026-07-26 UX note:
|
||
pre-refactor each reveal mechanism was different, producing a
|
||
staggered exit when the pointer left a row. */
|
||
.files-list-view .file-item .action-cell .btn-action--hover,
|
||
.files-grid-view .file-item .action-cell .btn-action--hover {
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity var(--motion-fast) var(--ease-standard);
|
||
}
|
||
|
||
/* Reveal on hover OR when the button itself has keyboard focus. The
|
||
pre-fix `:focus-within` on the row was a lingering-visibility trap
|
||
during drag / dialog transitions — see the `.file-actions` block
|
||
above for the full rationale. `:focus-visible` on the button gives
|
||
keyboard users the same reveal without the row-scope side effect. */
|
||
.files-list-view .file-item:hover .action-cell .btn-action--hover,
|
||
.files-grid-view .file-item:hover .action-cell .btn-action--hover,
|
||
.files-list-view .file-item .action-cell .btn-action--hover:focus-visible,
|
||
.files-grid-view .file-item .action-cell .btn-action--hover:focus-visible {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* Legacy: a margin-top on `.btn-action` in grid view for the era when
|
||
these buttons flowed at the bottom of the card. Kept for any
|
||
free-standing use outside the corner cluster; reset inside
|
||
`.action-cell` (line ~745) so the broom / restore / delete pills
|
||
align with the kebab and star. */
|
||
.files-grid-view .file-item .btn-action {
|
||
margin-top: var(--space-1);
|
||
}
|