Edouard Vanbelle
116 lines
3.5 KiB
CSS
116 lines
3.5 KiB
CSS
/* ── Item tooltip — "technical sheet" ─────────────────────────────────────── */
|
|
/* */
|
|
/* Overlays the search bar area in the top-bar while hovering a file item. */
|
|
/* Spans from the sidebar right-edge to just before .user-controls. */
|
|
/* */
|
|
/* 3-column CSS grid: [icon] [label] [value] */
|
|
/* All values start at the same x position regardless of label width. */
|
|
|
|
.path-tooltip {
|
|
position: fixed;
|
|
|
|
/* Fill most of the top-bar (topbar height 70px, 8px margin top/bottom) */
|
|
top: 8px;
|
|
|
|
/* Desktop: starts at sidebar right edge + top-bar padding */
|
|
left: calc(var(--sidebar-width) + 30px);
|
|
|
|
/*
|
|
* Right edge stops just before .user-controls:
|
|
* 30px (top-bar right padding) + ~90px (notif bell + gap + avatar btn) + 4px gap
|
|
* Using left + right instead of width so the browser computes it dynamically.
|
|
*/
|
|
right: 124px;
|
|
|
|
/* High enough to sit above the top-bar content */
|
|
z-index: 200;
|
|
|
|
display: grid;
|
|
grid-template-columns: 1em max-content 1fr;
|
|
column-gap: 0.6em;
|
|
row-gap: 6px;
|
|
align-items: center;
|
|
|
|
/* Fill the top-bar height minus an 8px margin on each side */
|
|
height: 54px;
|
|
padding: 0 16px;
|
|
border-radius: 10px;
|
|
border: 2px solid var(--color-border-medium);
|
|
|
|
background-color: var(--color-bg-input);
|
|
color: var(--color-text-muted);
|
|
font-size: 0.75rem;
|
|
|
|
pointer-events: none;
|
|
|
|
/* avoid blinking when pointer moves between items */
|
|
transition: display 0.2s allow-discrete;
|
|
}
|
|
|
|
/* Icon column */
|
|
.path-tooltip__icon {
|
|
color: var(--color-text-faint);
|
|
font-size: 0.7rem;
|
|
text-align: center;
|
|
justify-self: center;
|
|
}
|
|
|
|
/* Label column */
|
|
.path-tooltip__label {
|
|
font-weight: 600;
|
|
color: var(--color-text-secondary);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.path-tooltip__label::after {
|
|
content: ":";
|
|
}
|
|
|
|
/* Value column */
|
|
.path-tooltip__value {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Path value uses monospace to read folder separators clearly */
|
|
.path-tooltip__value--path {
|
|
font-family: monospace;
|
|
}
|
|
|
|
/* "?" placeholder when data is absent */
|
|
.path-tooltip__value--unknown {
|
|
color: var(--color-text-faint);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ── Narrow screens (sidebar hidden) ────────────────────────────────────── */
|
|
/* On mobile the sidebar slides off-screen; align after the #sidebar-toggle */
|
|
/* button (≈44px) that takes its place in the top-bar. */
|
|
|
|
@media (max-width: 768px) {
|
|
.path-tooltip {
|
|
/* 16px topbar padding + ~44px sidebar-toggle + 8px gap */
|
|
left: 68px;
|
|
|
|
/*
|
|
* Right edge stops before search-toggle-btn + user-controls:
|
|
* ~40px (search-toggle) + 12px (gap) + ~90px (user-controls) + 16px (padding)
|
|
*/
|
|
right: 158px;
|
|
}
|
|
}
|
|
|
|
/* ── Vignette inside tooltip ─────────────────────────────────────────────── */
|
|
/* The vignette name hard-codes 14px; scale it down to match the tooltip. */
|
|
|
|
.path-tooltip .user-vignette {
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
}
|
|
|
|
.path-tooltip .user-vignette__name {
|
|
font-size: 0.75rem;
|
|
}
|