KaushikRK99
7673fc63ea
- Updated toolbar styles for improved layout and appearance, including padding and margin adjustments. - Introduced new styles for scale menu and compact dropdowns. - Enhanced map pin tooltips with better positioning and hover effects. - Added new styles for map sheet filters, including search and date range controls. - Improved editor styles for a more cohesive look and feel, including transport controls for video editing. - Expanded GeoLocation interface to include additional address fields and formatted address. - Updated MediaItem interface to include storage reference and uploadedBy fields. - Enhanced MediaComment interface with author details for better user identification. - Introduced GalleryUser interface to represent signed-in users in the host app.
2484 lines
70 KiB
CSS
2484 lines
70 KiB
CSS
/* =========================================================================
|
|
Photo Gallery SDK — macOS Photos-style design system
|
|
Self-contained. No Tailwind required. Scoped under `.apg`.
|
|
Light + dark via [data-theme]. Responsive down to ~280px (Galaxy Fold).
|
|
========================================================================= */
|
|
|
|
.apg,
|
|
.apg *,
|
|
.apg *::before,
|
|
.apg *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.apg {
|
|
/* ---- Design tokens (light) ---- */
|
|
--apg-accent: #0a84ff;
|
|
/* Darker accent for text-on-accent surfaces (buttons) so white text meets WCAG AA. */
|
|
--apg-accent-strong: #0066e0;
|
|
--apg-danger: #d70015;
|
|
--apg-accent-contrast: #ffffff;
|
|
|
|
--apg-bg: #ffffff;
|
|
--apg-bg-content: #ffffff;
|
|
--apg-bg-elevated: #f5f5f7;
|
|
--apg-sidebar-bg: rgba(246, 246, 248, 0.72);
|
|
--apg-toolbar-bg: rgba(255, 255, 255, 0.72);
|
|
--apg-card: #ececf0;
|
|
--apg-card-hover: #e3e3e8;
|
|
|
|
--apg-text: #1d1d1f;
|
|
--apg-text-secondary: #6e6e73;
|
|
--apg-text-tertiary: #98989d;
|
|
|
|
--apg-separator: rgba(0, 0, 0, 0.09);
|
|
--apg-separator-strong: rgba(0, 0, 0, 0.14);
|
|
--apg-hover: rgba(0, 0, 0, 0.05);
|
|
--apg-active: rgba(0, 0, 0, 0.09);
|
|
--apg-sidebar-selected: rgba(0, 0, 0, 0.07);
|
|
|
|
--apg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
|
|
--apg-shadow-md: 0 6px 22px rgba(0, 0, 0, 0.16);
|
|
--apg-shadow-lg: 0 18px 60px rgba(0, 0, 0, 0.28);
|
|
|
|
--apg-radius-sm: 6px;
|
|
--apg-radius: 10px;
|
|
--apg-radius-menu: 12px;
|
|
--apg-radius-lg: 14px;
|
|
--apg-radius-xl: 20px;
|
|
--apg-hairline: 0.5px;
|
|
/* Translucent fill behind backdrop-blur so menus read as real "glass". */
|
|
--apg-menu-bg: rgba(250, 250, 252, 0.78);
|
|
--apg-glass-border: rgba(0, 0, 0, 0.12);
|
|
|
|
--apg-sidebar-w: 240px;
|
|
--apg-toolbar-h: 52px;
|
|
--apg-titlebar-h: 28px;
|
|
|
|
--apg-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
|
|
'Inter', 'Segoe UI', system-ui, sans-serif;
|
|
|
|
color: var(--apg-text);
|
|
font-family: var(--apg-font);
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
.apg[data-theme='dark'] {
|
|
--apg-accent-strong: #0a84ff;
|
|
--apg-danger: #ff453a;
|
|
--apg-accent-contrast: #ffffff;
|
|
|
|
--apg-bg: #1e1e1e;
|
|
--apg-bg-content: #1c1c1e;
|
|
--apg-bg-elevated: #2c2c2e;
|
|
--apg-sidebar-bg: rgba(22, 22, 24, 0.72);
|
|
--apg-toolbar-bg: rgba(28, 28, 30, 0.62);
|
|
--apg-card: #2c2c2e;
|
|
--apg-card-hover: #3a3a3c;
|
|
/* Darker, more translucent glass for menus on dark scenes (true macOS vibrancy). */
|
|
--apg-menu-bg: rgba(44, 44, 46, 0.7);
|
|
--apg-glass-border: rgba(255, 255, 255, 0.12);
|
|
|
|
--apg-text: #f5f5f7;
|
|
--apg-text-secondary: #aeaeb2;
|
|
--apg-text-tertiary: #8e8e93;
|
|
|
|
--apg-separator: rgba(255, 255, 255, 0.1);
|
|
--apg-separator-strong: rgba(255, 255, 255, 0.16);
|
|
--apg-hover: rgba(255, 255, 255, 0.07);
|
|
--apg-active: rgba(255, 255, 255, 0.12);
|
|
--apg-sidebar-selected: rgba(255, 255, 255, 0.1);
|
|
|
|
--apg-shadow-md: 0 6px 22px rgba(0, 0, 0, 0.5);
|
|
--apg-shadow-lg: 0 18px 60px rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
/* ---- Semi-dark: light content, dark "glass" sidebar (and titlebar) ---- */
|
|
.apg[data-theme='semi-dark'] .apg-sidebar,
|
|
.apg[data-theme='semi-dark'] .apg-titlebar {
|
|
background: rgba(28, 28, 30, 0.78);
|
|
--apg-text: #f5f5f7;
|
|
--apg-text-secondary: #aeaeb2;
|
|
--apg-text-tertiary: #8e8e93;
|
|
--apg-hover: rgba(255, 255, 255, 0.08);
|
|
--apg-active: rgba(255, 255, 255, 0.14);
|
|
--apg-sidebar-selected: rgba(255, 255, 255, 0.12);
|
|
--apg-separator: rgba(255, 255, 255, 0.1);
|
|
border-right-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
.apg[data-theme='semi-dark'] .apg-titlebar__title {
|
|
color: var(--apg-text-secondary);
|
|
}
|
|
/* Active sidebar row reads as a solid accent pill (like dark mode). */
|
|
.apg[data-theme='semi-dark'] .apg-sidebar__item--active {
|
|
background: var(--apg-accent);
|
|
}
|
|
.apg[data-theme='semi-dark'] .apg-sidebar__item--active .apg-sidebar__item-label,
|
|
.apg[data-theme='semi-dark'] .apg-sidebar__item--active .apg-sidebar__item-icon,
|
|
.apg[data-theme='semi-dark'] .apg-sidebar__item--active .apg-sidebar__item-trail {
|
|
color: #fff;
|
|
}
|
|
|
|
/* ---- Root layout ---- */
|
|
.apg {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background: var(--apg-bg-content);
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.apg__body {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.apg-viewport {
|
|
position: relative;
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ---- Window chrome (macOS title bar) ---- */
|
|
.apg-titlebar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: var(--apg-titlebar-h);
|
|
padding: 0 12px;
|
|
background: var(--apg-sidebar-bg);
|
|
backdrop-filter: saturate(180%) blur(20px);
|
|
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
|
border-bottom: 1px solid var(--apg-separator);
|
|
flex-shrink: 0;
|
|
user-select: none;
|
|
}
|
|
.apg-traffic {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.apg-traffic__dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
}
|
|
.apg-traffic__dot--red { background: #ff5f57; }
|
|
.apg-traffic__dot--yellow { background: #febc2e; }
|
|
.apg-traffic__dot--green { background: #28c840; }
|
|
.apg-titlebar__title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--apg-text-secondary);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ---- Sidebar (floating rounded glass panel, macOS Sonoma style) ---- */
|
|
.apg-sidebar {
|
|
width: var(--apg-sidebar-w);
|
|
flex-shrink: 0;
|
|
background: var(--apg-sidebar-bg);
|
|
backdrop-filter: saturate(180%) blur(28px);
|
|
-webkit-backdrop-filter: saturate(180%) blur(28px);
|
|
border: var(--apg-hairline) solid var(--apg-glass-border);
|
|
border-radius: var(--apg-sidebar-radius, 14px);
|
|
margin: 8px 0 8px 8px;
|
|
box-shadow: var(--apg-shadow-sm);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 10px 10px 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
transition: margin-left 0.28s cubic-bezier(0.32, 0.72, 0, 1), width 0.28s cubic-bezier(0.32, 0.72, 0, 1);
|
|
}
|
|
.apg-sidebar--collapsed {
|
|
margin-left: calc(-8px - var(--apg-sidebar-w));
|
|
}
|
|
.apg-sidebar__section-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
/* text-secondary (not tertiary) so 11px labels meet WCAG AA contrast. */
|
|
color: var(--apg-text-secondary);
|
|
padding: 14px 10px 4px;
|
|
text-transform: none;
|
|
}
|
|
.apg-sidebar__item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
padding: 6px 10px;
|
|
border-radius: 7px;
|
|
font-size: 13.5px;
|
|
font-weight: 500;
|
|
color: var(--apg-text);
|
|
cursor: default;
|
|
border: none;
|
|
background: none;
|
|
width: 100%;
|
|
text-align: left;
|
|
position: relative;
|
|
transition: background 0.12s ease;
|
|
}
|
|
.apg-sidebar__item:hover {
|
|
background: var(--apg-hover);
|
|
}
|
|
.apg-sidebar__item-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex-shrink: 0;
|
|
color: var(--apg-accent);
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
.apg-sidebar__item-label {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex: 1;
|
|
}
|
|
.apg-sidebar__item-trail {
|
|
color: var(--apg-text-tertiary);
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
.apg-sidebar__item--active {
|
|
background: var(--apg-sidebar-selected);
|
|
}
|
|
.apg-sidebar__item--active .apg-sidebar__item-label {
|
|
color: var(--apg-accent);
|
|
font-weight: 600;
|
|
}
|
|
/* Dark mode: active rows render as a solid accent pill (matches screenshots). */
|
|
.apg[data-theme='dark'] .apg-sidebar__item--active {
|
|
background: var(--apg-accent);
|
|
}
|
|
.apg[data-theme='dark'] .apg-sidebar__item--active .apg-sidebar__item-label {
|
|
color: #fff;
|
|
}
|
|
.apg[data-theme='dark'] .apg-sidebar__item--active .apg-sidebar__item-icon,
|
|
.apg[data-theme='dark'] .apg-sidebar__item--active .apg-sidebar__item-trail {
|
|
color: #fff;
|
|
}
|
|
.apg-sidebar__disclosure {
|
|
margin-right: -2px;
|
|
transition: transform 0.18s ease;
|
|
color: var(--apg-text-tertiary);
|
|
}
|
|
.apg-sidebar__disclosure--open {
|
|
transform: rotate(90deg);
|
|
}
|
|
.apg-sidebar__child {
|
|
padding-left: 26px;
|
|
}
|
|
|
|
/* ---- Main area ---- */
|
|
.apg-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--apg-bg-content);
|
|
}
|
|
|
|
/* ---- Toolbar (floating rounded glass bar — matches the sidebar) ----
|
|
The toolbar stays IN FLOW as a flex item of `.apg-main` and floats via margins
|
|
on all sides. Because it remains in flow, `.apg-viewport` naturally begins below
|
|
it — the grid is never hidden behind the bar and scrolling stays inside the
|
|
viewport (no manual top-padding / overlap bookkeeping needed). `position:
|
|
relative` scopes the absolutely-centred control to the toolbar itself. */
|
|
.apg-toolbar {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: var(--apg-toolbar-h);
|
|
padding: 0 12px;
|
|
margin: 8px;
|
|
background: var(--apg-toolbar-bg);
|
|
backdrop-filter: saturate(180%) blur(24px);
|
|
-webkit-backdrop-filter: saturate(180%) blur(24px);
|
|
border: var(--apg-hairline) solid var(--apg-glass-border);
|
|
border-radius: var(--apg-radius-lg);
|
|
box-shadow: var(--apg-shadow-md);
|
|
flex-shrink: 0;
|
|
z-index: 20;
|
|
}
|
|
.apg-toolbar__spacer { flex: 1 1 0; min-width: 0; }
|
|
/* In normal flow between two spacers: centred when there's room, squeezed (never
|
|
overlapping the right-hand zoom/filter group) when the toolbar is narrow. The old
|
|
`position:absolute; left:50%` overlapped the right group on any narrow toolbar —
|
|
and its 720px media query keyed on VIEWPORT width, so it never fired when the
|
|
toolbar was narrowed by an embedding host's sidebars. */
|
|
.apg-toolbar__center {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Compact library-scale dropdown (replaces the wide 3-item segmented). */
|
|
.apg-scalemenu {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 5px 8px 5px 12px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: var(--apg-bg-elevated);
|
|
color: var(--apg-text);
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: default;
|
|
white-space: nowrap;
|
|
transition: background 0.12s ease;
|
|
}
|
|
.apg-scalemenu:hover { background: var(--apg-hover); }
|
|
.apg-scalemenu svg { color: var(--apg-text-secondary); }
|
|
.apg-scalemenu__label { line-height: 1; }
|
|
|
|
.apg-iconbtn {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 8px;
|
|
display: grid;
|
|
place-items: center;
|
|
border: none;
|
|
background: none;
|
|
color: var(--apg-text);
|
|
cursor: default;
|
|
flex-shrink: 0;
|
|
transition: background 0.12s ease, opacity 0.12s ease;
|
|
}
|
|
.apg-iconbtn:hover { background: var(--apg-hover); }
|
|
.apg-iconbtn:active { background: var(--apg-active); }
|
|
.apg-iconbtn--circle {
|
|
background: var(--apg-bg-elevated);
|
|
box-shadow: var(--apg-shadow-sm);
|
|
}
|
|
.apg-iconbtn:disabled { opacity: 0.35; }
|
|
.apg-iconbtn--on { color: var(--apg-accent); }
|
|
|
|
/* Segmented control */
|
|
.apg-segmented {
|
|
display: inline-flex;
|
|
background: var(--apg-bg-elevated);
|
|
border-radius: 9px;
|
|
padding: 2px;
|
|
gap: 2px;
|
|
}
|
|
.apg-segmented__item {
|
|
border: none;
|
|
background: none;
|
|
padding: 4px 14px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
border-radius: 7px;
|
|
color: var(--apg-text);
|
|
cursor: default;
|
|
white-space: nowrap;
|
|
transition: background 0.15s ease;
|
|
}
|
|
.apg-segmented__item--active {
|
|
background: var(--apg-segmented-active, var(--apg-bg));
|
|
box-shadow: var(--apg-shadow-sm);
|
|
font-weight: 600;
|
|
}
|
|
.apg[data-theme='dark'] .apg-segmented__item--active {
|
|
background: var(--apg-segmented-active, #636366);
|
|
}
|
|
|
|
/* Search */
|
|
.apg-search {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
width: 220px;
|
|
max-width: 34vw;
|
|
background: var(--apg-bg-elevated);
|
|
border-radius: 8px;
|
|
padding: 5px 9px;
|
|
color: var(--apg-text-secondary);
|
|
}
|
|
.apg-search input {
|
|
border: none;
|
|
background: none;
|
|
outline: none;
|
|
color: var(--apg-text);
|
|
font-size: 13px;
|
|
width: 100%;
|
|
font-family: inherit;
|
|
}
|
|
.apg-search input::placeholder { color: var(--apg-text-secondary); }
|
|
/* Focus ring wraps the whole field (icon + input), not just the <input>. */
|
|
.apg-search { transition: box-shadow 0.15s ease; }
|
|
.apg-search:focus-within {
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--apg-accent) 32%, transparent);
|
|
}
|
|
/* ONE ring, not two: the global `.apg :focus-visible` outline would otherwise
|
|
draw a second line INSIDE the wrapper's ring. The wrapper ring is the
|
|
focus indicator for this control. */
|
|
.apg-search input:focus-visible,
|
|
.apg-search input:focus {
|
|
outline: none;
|
|
}
|
|
.apg-search__recents {
|
|
position: absolute;
|
|
/* Clears the 3px focus ring so the popover's own hairline never reads as a
|
|
second ring stacked under the field. */
|
|
top: calc(100% + 9px);
|
|
right: 0;
|
|
min-width: 220px;
|
|
z-index: 60;
|
|
background: var(--apg-menu-bg);
|
|
border: var(--apg-hairline) solid var(--apg-glass-border);
|
|
border-radius: var(--apg-radius-menu);
|
|
box-shadow: var(--apg-shadow-md);
|
|
padding: 6px;
|
|
backdrop-filter: blur(34px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(34px) saturate(180%);
|
|
}
|
|
@media (max-width: 600px) {
|
|
.apg-search { width: 40px; transition: width 0.2s ease; }
|
|
/* Keep the input focusable (not display:none) so keyboard/AT users can reach
|
|
it; it is visually collapsed until focused/tapped, then expands. */
|
|
.apg-search input { width: 0; padding: 0; opacity: 0; }
|
|
.apg-search--expanded { width: 100%; }
|
|
.apg-search--expanded input { width: 100%; opacity: 1; }
|
|
}
|
|
|
|
/* ---- Scroll area ---- */
|
|
.apg-scroll {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
}
|
|
.apg ::-webkit-scrollbar { width: 12px; height: 12px; }
|
|
.apg ::-webkit-scrollbar-thumb {
|
|
background: var(--apg-separator-strong);
|
|
border-radius: 8px;
|
|
border: 3px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
.apg ::-webkit-scrollbar-thumb:hover { background: var(--apg-text-tertiary); background-clip: content-box; }
|
|
|
|
/* ---- Media grid ---- */
|
|
.apg-grid {
|
|
display: grid;
|
|
gap: 3px;
|
|
padding: 3px;
|
|
}
|
|
.apg-grid__section-title {
|
|
grid-column: 1 / -1;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
padding: 22px 8px 8px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.apg-grid__section-sub {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--apg-text-secondary);
|
|
padding-left: 2px;
|
|
}
|
|
.apg-tile {
|
|
position: relative;
|
|
aspect-ratio: 1 / 1;
|
|
overflow: hidden;
|
|
background: var(--apg-bg-elevated);
|
|
cursor: default;
|
|
border-radius: 2px;
|
|
}
|
|
.apg-tile img,
|
|
.apg-tile video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
user-select: none;
|
|
-webkit-user-drag: none;
|
|
transition: transform 0.32s cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
/* Gentle macOS-style zoom on hover (clipped by the tile's overflow:hidden). */
|
|
@media (hover: hover) {
|
|
.apg-tile:hover img,
|
|
.apg-tile:hover video {
|
|
transform: scale(1.045);
|
|
}
|
|
}
|
|
|
|
/* Smooth view entrance: content fades + rises slightly when a view mounts. */
|
|
.apg-scroll {
|
|
animation: apg-view-in 0.26s cubic-bezier(0.32, 0.72, 0, 1);
|
|
}
|
|
@keyframes apg-view-in {
|
|
from { opacity: 0; transform: translateY(6px); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
|
|
/* Respect users who prefer reduced motion. */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.apg *,
|
|
.apg *::before,
|
|
.apg *::after {
|
|
animation-duration: 0.001ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.001ms !important;
|
|
}
|
|
}
|
|
.apg-tile__badge {
|
|
position: absolute;
|
|
bottom: 6px;
|
|
left: 7px;
|
|
color: #fff;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
.apg-tile__fav {
|
|
position: absolute;
|
|
bottom: 6px;
|
|
right: 7px;
|
|
color: var(--apg-tile-fav, #ff3b30);
|
|
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
|
|
}
|
|
/* ---- Custom video player (macOS-style) ---- */
|
|
.apg-vp {
|
|
position: relative;
|
|
display: inline-flex;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
outline: none;
|
|
background: #000;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
.apg-vp--fs { border-radius: 0; width: 100vw; height: 100vh; align-items: center; justify-content: center; }
|
|
.apg-vp__video { display: block; max-width: 100%; max-height: 85vh; cursor: pointer; }
|
|
.apg-vp--fs .apg-vp__video { max-height: 100vh; }
|
|
.apg-vp--idle { cursor: none; }
|
|
.apg-vp--idle .apg-vp__controls { opacity: 0; pointer-events: none; }
|
|
.apg-vp__center {
|
|
position: absolute;
|
|
inset: 0;
|
|
margin: auto;
|
|
width: 72px;
|
|
height: 72px;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
color: #fff;
|
|
display: grid;
|
|
place-items: center;
|
|
cursor: pointer;
|
|
padding-left: 4px;
|
|
transition: transform 0.15s ease, background 0.15s ease;
|
|
}
|
|
.apg-vp__center:hover { transform: scale(1.06); background: rgba(0, 0, 0, 0.6); }
|
|
.apg-vp__controls {
|
|
position: absolute;
|
|
left: 10px;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 12px;
|
|
border-radius: 12px;
|
|
color: #fff;
|
|
background: rgba(30, 30, 32, 0.55);
|
|
backdrop-filter: blur(22px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(22px) saturate(180%);
|
|
border: 0.5px solid rgba(255, 255, 255, 0.14);
|
|
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
.apg-vp__btn {
|
|
border: none;
|
|
background: none;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 4px;
|
|
border-radius: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
.apg-vp__btn:hover { background: rgba(255, 255, 255, 0.16); }
|
|
.apg-vp__time { font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0.9; flex-shrink: 0; }
|
|
.apg-vp__scrub {
|
|
position: relative;
|
|
flex: 1;
|
|
height: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
min-width: 60px;
|
|
}
|
|
.apg-vp__track,
|
|
.apg-vp__buffered,
|
|
.apg-vp__played {
|
|
position: absolute;
|
|
left: 0;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
}
|
|
.apg-vp__track { width: 100%; background: rgba(255, 255, 255, 0.25); }
|
|
.apg-vp__buffered { background: rgba(255, 255, 255, 0.4); }
|
|
.apg-vp__played { background: var(--apg-accent); }
|
|
.apg-vp__knob {
|
|
position: absolute;
|
|
right: -6px;
|
|
top: 50%;
|
|
width: 12px;
|
|
height: 12px;
|
|
transform: translateY(-50%);
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.apg-vp__vol { width: 72px; accent-color: var(--apg-accent); flex-shrink: 0; }
|
|
@media (max-width: 640px) {
|
|
.apg-vp__vol { display: none; }
|
|
.apg-vp__controls { gap: 7px; padding: 7px 9px; }
|
|
}
|
|
|
|
/* ---- Upload modal drop zone ---- */
|
|
.apg-upload__drop {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6px;
|
|
width: 100%;
|
|
padding: 26px 16px;
|
|
border: 2px dashed var(--apg-separator-strong);
|
|
border-radius: var(--apg-radius-lg);
|
|
background: var(--apg-bg-elevated);
|
|
color: var(--apg-text);
|
|
cursor: pointer;
|
|
transition: border-color 0.15s ease, background 0.15s ease;
|
|
}
|
|
.apg-upload__drop:hover { border-color: var(--apg-accent); }
|
|
.apg-upload__drop--over {
|
|
border-color: var(--apg-accent);
|
|
background: color-mix(in srgb, var(--apg-accent) 12%, var(--apg-bg-elevated));
|
|
}
|
|
|
|
/* Clickable trailing icon in a sidebar row (e.g. the Recently Deleted lock). */
|
|
.apg-sidebar__item-trail--btn {
|
|
cursor: pointer;
|
|
border-radius: 6px;
|
|
padding: 2px;
|
|
margin: -2px;
|
|
}
|
|
.apg-sidebar__item-trail--btn:hover { background: var(--apg-active); }
|
|
.apg-tile__check {
|
|
position: absolute;
|
|
top: 7px;
|
|
right: 7px;
|
|
width: 21px;
|
|
height: 21px;
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.28);
|
|
border: 1.5px solid rgba(255, 255, 255, 0.9);
|
|
display: grid;
|
|
place-items: center;
|
|
color: #fff;
|
|
opacity: 0;
|
|
transform: scale(0.7);
|
|
transition: opacity 0.12s ease, transform 0.12s ease;
|
|
}
|
|
.apg-tile:hover .apg-tile__check { opacity: 1; transform: scale(1); }
|
|
.apg-tile--selected .apg-tile__check {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
background: var(--apg-accent);
|
|
border-color: var(--apg-accent);
|
|
}
|
|
.apg-tile--selected {
|
|
outline: 3px solid var(--apg-accent);
|
|
outline-offset: -3px;
|
|
border-radius: 4px;
|
|
}
|
|
.apg-tile--selected img,
|
|
.apg-tile--selected video { transform: scale(0.92); border-radius: 3px; }
|
|
|
|
/* ---- Collections view ---- */
|
|
.apg-collections { padding: 8px 22px 60px; }
|
|
.apg-collections__section { margin-top: 26px; }
|
|
.apg-collections__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
}
|
|
.apg-collections__title {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.apg-collections__action {
|
|
border: none;
|
|
background: none;
|
|
color: var(--apg-accent);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: default;
|
|
}
|
|
.apg-pinned-row {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 150px;
|
|
gap: 14px;
|
|
overflow-x: auto;
|
|
padding-bottom: 8px;
|
|
}
|
|
.apg-pinned-card {
|
|
width: 150px;
|
|
height: 150px;
|
|
border-radius: var(--apg-radius-lg);
|
|
background: linear-gradient(160deg, #c9c9d0, #a8a8b0);
|
|
position: relative;
|
|
overflow: hidden;
|
|
cursor: default;
|
|
box-shadow: var(--apg-shadow-sm);
|
|
}
|
|
.apg[data-theme='dark'] .apg-pinned-card {
|
|
background: linear-gradient(160deg, #3a3a3c, #2a2a2c);
|
|
}
|
|
.apg-pinned-card img { width: 100%; height: 100%; object-fit: cover; }
|
|
.apg-pinned-card__label {
|
|
position: absolute;
|
|
left: 12px;
|
|
bottom: 10px;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
|
}
|
|
.apg-pinned-card__badge {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
color: #fff;
|
|
}
|
|
.apg-empty-card {
|
|
background: var(--apg-bg-elevated);
|
|
border-radius: var(--apg-radius-lg);
|
|
padding: 26px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
position: relative;
|
|
min-height: 120px;
|
|
justify-content: center;
|
|
}
|
|
.apg-empty-card__icon { color: var(--apg-text-tertiary); }
|
|
.apg-empty-card__title { font-weight: 600; font-size: 14px; }
|
|
.apg-empty-card__text { color: var(--apg-text-secondary); font-size: 13px; max-width: 60ch; }
|
|
.apg-list-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px 14px;
|
|
background: var(--apg-bg-elevated);
|
|
border-radius: var(--apg-radius);
|
|
margin-bottom: 8px;
|
|
font-size: 14px;
|
|
}
|
|
.apg-list-row__trail { margin-left: auto; color: var(--apg-text-tertiary); }
|
|
|
|
/* ---- Generic empty state (centered) ---- */
|
|
.apg-empty {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 40px;
|
|
gap: 14px;
|
|
color: var(--apg-text);
|
|
}
|
|
.apg-empty__title { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
|
|
.apg-empty__subtitle { font-size: 17px; color: var(--apg-text-secondary); }
|
|
.apg-empty__hints {
|
|
display: flex;
|
|
gap: 48px;
|
|
margin-top: 30px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.apg-empty__hint {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
width: 130px;
|
|
color: var(--apg-text-secondary);
|
|
font-size: 13px;
|
|
}
|
|
.apg-empty__card {
|
|
background: var(--apg-bg-elevated);
|
|
border-radius: var(--apg-radius-lg);
|
|
padding: 34px 44px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12px;
|
|
max-width: 460px;
|
|
}
|
|
.apg-btn {
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 7px 16px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
background: var(--apg-bg-elevated);
|
|
color: var(--apg-text);
|
|
cursor: default;
|
|
}
|
|
.apg-btn--primary { background: var(--apg-accent-strong); color: #fff; }
|
|
.apg-btn--small { padding: 5px 12px; font-size: 12px; cursor: pointer; }
|
|
.apg-btn:disabled { opacity: 0.5; cursor: default; }
|
|
.apg-btn:hover { filter: brightness(0.97); }
|
|
|
|
/* ---- Map ---- */
|
|
.apg-map { position: absolute; inset: 0; }
|
|
.apg-map__leaflet { width: 100%; height: 100%; background: var(--apg-bg-elevated); }
|
|
.apg-map__controls {
|
|
position: absolute;
|
|
right: 16px;
|
|
bottom: 16px;
|
|
z-index: 500;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
.apg-map__legal {
|
|
position: absolute;
|
|
left: 10px;
|
|
bottom: 6px;
|
|
z-index: 500;
|
|
font-size: 11px;
|
|
color: var(--apg-text-secondary);
|
|
text-decoration: underline;
|
|
}
|
|
.apg-map-popup { width: 180px; }
|
|
.apg-map-popup img {
|
|
width: 100%;
|
|
height: 120px;
|
|
object-fit: cover;
|
|
border-radius: 8px;
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
.apg-map-popup__cap {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #1d1d1f;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
/* ---- Map thumbnail pins (macOS-style) ---- */
|
|
.apg-pin-wrap { background: none !important; border: none !important; }
|
|
/* Pins + their hover tooltip are pointer targets, never text: suppress selection so
|
|
dragging across the map never leaves a grey selection rectangle over the pin/preview. */
|
|
.apg-pin,
|
|
.apg-pin__tip {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.apg-pin__img,
|
|
.apg-pin__tip-img,
|
|
.apg-pin__strip-cell img {
|
|
-webkit-user-drag: none;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
}
|
|
.apg-pin {
|
|
position: relative;
|
|
display: block;
|
|
width: 48px;
|
|
height: 48px;
|
|
aspect-ratio: 1 / 1;
|
|
margin: 0 auto;
|
|
border-radius: 12px;
|
|
border: 2.5px solid #fff;
|
|
background: #d9d9de;
|
|
box-shadow: 0 2px 9px rgba(0, 0, 0, 0.38);
|
|
cursor: pointer;
|
|
overflow: visible;
|
|
transition: transform 0.12s ease;
|
|
}
|
|
.apg-pin:hover { transform: scale(1.06); z-index: 500; }
|
|
.apg-pin__img {
|
|
/* Absolute-fill the square pin so Leaflet's default img sizing can't stretch it;
|
|
object-fit crops any aspect ratio into the square with no distortion. */
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
max-width: none;
|
|
object-fit: cover;
|
|
border-radius: 9px;
|
|
display: block;
|
|
}
|
|
/* Hover image-preview tooltip above the pin. */
|
|
.apg-pin__tip {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: calc(100% + 10px);
|
|
/* --tip-dx is set per-hover by MapView so the tooltip slides back inside the map
|
|
when a pin sits near the left/right edge (instead of overflowing + being clipped). */
|
|
transform: translateX(calc(-50% + var(--tip-dx, 0px))) scale(0.9);
|
|
transform-origin: bottom center;
|
|
width: 168px;
|
|
max-width: 70vw;
|
|
padding: 5px;
|
|
border-radius: 12px;
|
|
background: var(--apg-menu-bg, #fff);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
border: var(--apg-hairline, 0.5px) solid var(--apg-glass-border, rgba(0, 0, 0, 0.12));
|
|
box-shadow: var(--apg-shadow-md);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.14s ease, transform 0.14s ease;
|
|
}
|
|
.apg-pin:hover .apg-pin__tip {
|
|
opacity: 1;
|
|
transform: translateX(calc(-50% + var(--tip-dx, 0px))) scale(1);
|
|
}
|
|
/* Pin near the TOP of the map: flip the tooltip below so it isn't clipped off-screen. */
|
|
.apg-pin__tip--below {
|
|
bottom: auto;
|
|
top: calc(100% + 10px);
|
|
transform-origin: top center;
|
|
}
|
|
.apg-pin__tip--below::after { top: auto; bottom: 100%; }
|
|
/* Invisible bridge across the 10px gap so the pointer can travel from the pin
|
|
into the tooltip (to click a thumbnail) without dropping :hover. */
|
|
.apg-pin__tip::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 100%;
|
|
height: 12px;
|
|
}
|
|
.apg-pin__tip-img {
|
|
width: 100%;
|
|
height: 104px;
|
|
object-fit: cover;
|
|
border-radius: 8px;
|
|
display: block;
|
|
}
|
|
.apg-pin__tip-cap {
|
|
display: block;
|
|
margin-top: 5px;
|
|
font-size: 11.5px;
|
|
font-weight: 600;
|
|
color: var(--apg-text);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
/* downward tail pointing at the exact coordinate */
|
|
.apg-pin::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -9px;
|
|
transform: translateX(-50%);
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 7px solid transparent;
|
|
border-right: 7px solid transparent;
|
|
border-top: 9px solid #fff;
|
|
}
|
|
.apg-pin__count {
|
|
position: absolute;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
min-width: 19px;
|
|
height: 19px;
|
|
padding: 0 5px;
|
|
border-radius: 10px;
|
|
/* Opaque enough to stay legible over a bright photo, with a hairline ring so
|
|
the digits never blend into a dark one. */
|
|
background: rgba(0, 0, 0, 0.78);
|
|
box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9);
|
|
color: #fff;
|
|
font-size: 11.5px;
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 19px;
|
|
text-align: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Hover mini-slider: a strip of the cluster's thumbnails under the preview. */
|
|
.apg-pin__strip {
|
|
display: none;
|
|
gap: 3px;
|
|
align-items: center;
|
|
margin-top: 5px;
|
|
}
|
|
.apg-pin__strip:not(:empty) { display: flex; }
|
|
.apg-pin__strip-cell {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 5px;
|
|
background: none;
|
|
overflow: hidden;
|
|
line-height: 0;
|
|
cursor: pointer;
|
|
opacity: 0.62;
|
|
transition: opacity 0.12s ease, box-shadow 0.12s ease;
|
|
}
|
|
.apg-pin__strip-cell img {
|
|
width: 100%;
|
|
height: 28px;
|
|
object-fit: cover;
|
|
display: block;
|
|
border-radius: 5px;
|
|
}
|
|
.apg-pin__strip-cell:hover { opacity: 1; }
|
|
.apg-pin__strip-cell--on {
|
|
opacity: 1;
|
|
box-shadow: 0 0 0 2px var(--apg-accent);
|
|
}
|
|
.apg-pin__strip-more {
|
|
flex: 0 0 auto;
|
|
padding: 0 5px;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
border-radius: 5px;
|
|
background: var(--apg-hover, rgba(0, 0, 0, 0.08));
|
|
color: var(--apg-text-secondary);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
/* The tooltip is only interactive while hovered (it is pointer-events:none
|
|
otherwise), so the strip's buttons stay clickable without stealing hits. */
|
|
.apg-pin:hover .apg-pin__tip { pointer-events: auto; }
|
|
|
|
/* ---- Map location sheet (tap a pin → its photos, date-grouped) ---- */
|
|
.apg-map__sheet {
|
|
position: absolute;
|
|
right: 12px;
|
|
bottom: 0;
|
|
z-index: 600;
|
|
width: 460px;
|
|
max-width: calc(100% - 24px);
|
|
/* height is set inline (drag the grip to resize toward full-screen) */
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--apg-bg);
|
|
border: 1px solid rgba(128, 128, 128, 0.22);
|
|
border-bottom: none;
|
|
border-top-left-radius: 16px;
|
|
border-top-right-radius: 16px;
|
|
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.34);
|
|
overflow: hidden;
|
|
animation: apg-sheet-up 0.24s cubic-bezier(0.32, 0.72, 0, 1);
|
|
}
|
|
@keyframes apg-sheet-up {
|
|
from { transform: translateY(40px); opacity: 0; }
|
|
to { transform: none; opacity: 1; }
|
|
}
|
|
/* Drag handle to resize the sheet. */
|
|
.apg-map__grip {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 8px 0 4px;
|
|
cursor: ns-resize;
|
|
touch-action: none;
|
|
}
|
|
.apg-map__grip-bar {
|
|
width: 40px;
|
|
height: 5px;
|
|
border-radius: 3px;
|
|
background: var(--apg-text-tertiary);
|
|
opacity: 0.6;
|
|
}
|
|
@media (max-width: 640px) {
|
|
.apg-map__sheet { right: 0; left: 0; width: auto; max-width: none; }
|
|
}
|
|
.apg-map__sheet-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid rgba(128, 128, 128, 0.18);
|
|
}
|
|
.apg-map__sheet-body { flex: 1; overflow-y: auto; min-height: 0; }
|
|
|
|
/* ---- Map sheet filter bar (search + date range + object chips) ---- */
|
|
.apg-map__sheet-filters {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 10px 16px;
|
|
background: var(--apg-bg-elevated);
|
|
border-bottom: 1px solid var(--apg-separator);
|
|
}
|
|
.apg-mapfilter__row { display: flex; align-items: center; gap: 8px; }
|
|
.apg-mapfilter__search {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 5px 9px;
|
|
border-radius: var(--apg-radius);
|
|
background: var(--apg-bg);
|
|
border: 1px solid var(--apg-separator);
|
|
color: var(--apg-text-secondary);
|
|
transition: box-shadow 0.15s ease;
|
|
}
|
|
.apg-mapfilter__search:focus-within {
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--apg-accent) 32%, transparent);
|
|
}
|
|
.apg-mapfilter__search input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
border: none;
|
|
background: none;
|
|
color: var(--apg-text);
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
}
|
|
/* One ring only — the wrapper owns the focus indicator. */
|
|
.apg-mapfilter__search input:focus,
|
|
.apg-mapfilter__search input:focus-visible { outline: none; }
|
|
.apg-mapfilter__search input::placeholder { color: var(--apg-text-secondary); }
|
|
/* Hide the UA's own clear affordance; ours resets the dates too. */
|
|
.apg-mapfilter__search input::-webkit-search-cancel-button { display: none; }
|
|
.apg-mapfilter__clear {
|
|
flex-shrink: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: var(--apg-separator-strong);
|
|
color: var(--apg-text);
|
|
cursor: pointer;
|
|
}
|
|
.apg-mapfilter__dates { flex-wrap: wrap; }
|
|
.apg-mapfilter__date {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
color: var(--apg-text-secondary);
|
|
}
|
|
.apg-mapfilter__date input {
|
|
padding: 4px 7px;
|
|
border-radius: var(--apg-radius-sm);
|
|
border: 1px solid var(--apg-separator);
|
|
background: var(--apg-bg);
|
|
color: var(--apg-text);
|
|
font-family: inherit;
|
|
font-size: 12px;
|
|
/* Safari sizes date inputs intrinsically; keep them from blowing out the row. */
|
|
max-width: 148px;
|
|
min-width: 0;
|
|
}
|
|
.apg-mapfilter__chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
max-height: 66px;
|
|
overflow-y: auto;
|
|
}
|
|
.apg-mapfilter__chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 3px 9px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--apg-separator);
|
|
background: var(--apg-bg);
|
|
color: var(--apg-text);
|
|
font-family: inherit;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
text-transform: capitalize;
|
|
}
|
|
.apg-mapfilter__chip:hover { background: var(--apg-hover); }
|
|
.apg-mapfilter__chip--on {
|
|
background: var(--apg-accent);
|
|
border-color: transparent;
|
|
color: var(--apg-accent-contrast, #fff);
|
|
font-weight: 600;
|
|
}
|
|
.apg-mapfilter__chip-n {
|
|
font-size: 11px;
|
|
font-variant-numeric: tabular-nums;
|
|
opacity: 0.72;
|
|
}
|
|
.apg-mapfilter__empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 34px 20px;
|
|
color: var(--apg-text-secondary);
|
|
text-align: center;
|
|
}
|
|
.apg-mapfilter__empty-title { font-size: 15px; font-weight: 600; color: var(--apg-text); }
|
|
.apg-mapfilter__empty-sub { font-size: 12.5px; }
|
|
|
|
/* ---- Map filter: single date-range control (button + presets/custom popover) ---- */
|
|
.apg-daterange { position: relative; }
|
|
.apg-daterange__button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 6px 10px;
|
|
border-radius: var(--apg-radius);
|
|
border: 1px solid var(--apg-separator);
|
|
background: var(--apg-bg);
|
|
color: var(--apg-text);
|
|
font-family: inherit;
|
|
font-size: 12.5px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: border-color 0.12s ease, background 0.12s ease;
|
|
}
|
|
.apg-daterange__button:hover { background: var(--apg-hover); }
|
|
.apg-daterange__button svg:last-child { color: var(--apg-text-secondary); }
|
|
.apg-daterange__button--active {
|
|
border-color: var(--apg-accent);
|
|
color: var(--apg-accent);
|
|
}
|
|
.apg-daterange__button--active svg { color: var(--apg-accent); }
|
|
.apg-daterange__label { line-height: 1; white-space: nowrap; }
|
|
.apg-daterange__pop {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
left: 0;
|
|
z-index: 60;
|
|
min-width: 232px;
|
|
padding: 8px;
|
|
background: var(--apg-menu-bg);
|
|
border: var(--apg-hairline) solid var(--apg-glass-border);
|
|
border-radius: var(--apg-radius-menu);
|
|
box-shadow: var(--apg-shadow-md);
|
|
backdrop-filter: blur(34px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(34px) saturate(180%);
|
|
}
|
|
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
|
|
.apg-daterange__pop { background: var(--apg-bg-elevated); }
|
|
}
|
|
.apg-daterange__presets {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4px;
|
|
}
|
|
.apg-daterange__preset {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 6px;
|
|
padding: 7px 10px;
|
|
border: 1px solid var(--apg-separator);
|
|
border-radius: var(--apg-radius-sm);
|
|
background: var(--apg-bg);
|
|
color: var(--apg-text);
|
|
font-family: inherit;
|
|
font-size: 12.5px;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
.apg-daterange__preset:hover { background: var(--apg-hover); }
|
|
.apg-daterange__preset--on {
|
|
border-color: transparent;
|
|
background: var(--apg-accent);
|
|
color: var(--apg-accent-contrast, #fff);
|
|
font-weight: 600;
|
|
}
|
|
.apg-daterange__preset--on svg { color: var(--apg-accent-contrast, #fff); }
|
|
.apg-daterange__custom { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--apg-separator); }
|
|
.apg-daterange__custom-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--apg-text-secondary);
|
|
padding: 0 2px 6px;
|
|
}
|
|
.apg-daterange__fields { display: flex; gap: 8px; }
|
|
.apg-daterange__field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-size: 11px;
|
|
color: var(--apg-text-secondary);
|
|
}
|
|
.apg-daterange__field input {
|
|
padding: 5px 7px;
|
|
border-radius: var(--apg-radius-sm);
|
|
border: 1px solid var(--apg-separator);
|
|
background: var(--apg-bg);
|
|
color: var(--apg-text);
|
|
font-family: inherit;
|
|
font-size: 12px;
|
|
min-width: 0;
|
|
}
|
|
.apg-daterange__field input:focus { outline: none; border-color: var(--apg-accent); }
|
|
|
|
/* ---- Mosaic / Memories grid (Map → Grid tab) ---- */
|
|
.apg-mosaic-wrap { padding: 4px 0 28px; }
|
|
.apg-mosaic-section { padding: 6px 16px 10px; }
|
|
.apg-mosaic__title { font-size: 21px; font-weight: 700; margin: 16px 2px 12px; }
|
|
.apg-mosaic__hero {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
height: 300px;
|
|
border: none;
|
|
padding: 0;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
background: var(--apg-bg-elevated);
|
|
}
|
|
.apg-mosaic__hero img {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: opacity 0.9s ease;
|
|
}
|
|
.apg-mosaic__dots {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 12px;
|
|
display: flex;
|
|
gap: 6px;
|
|
justify-content: center;
|
|
}
|
|
.apg-mosaic__dots span {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.55);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
|
|
}
|
|
.apg-mosaic__dots span.is-active { background: #fff; }
|
|
.apg-mosaic {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-auto-rows: 92px;
|
|
grid-auto-flow: dense;
|
|
gap: 6px;
|
|
margin-top: 6px;
|
|
}
|
|
.apg-mosaic__tile {
|
|
border: none;
|
|
padding: 0;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
background: var(--apg-bg-elevated);
|
|
position: relative;
|
|
}
|
|
.apg-mosaic__tile img,
|
|
.apg-mosaic__tile video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
.apg-mosaic__tile:hover img,
|
|
.apg-mosaic__tile:hover video { transform: scale(1.04); }
|
|
@media (max-width: 720px) {
|
|
.apg-mosaic { grid-template-columns: repeat(2, 1fr); }
|
|
.apg-mosaic__hero { height: 220px; }
|
|
}
|
|
|
|
/* ---- Lightbox ---- */
|
|
.apg-lightbox {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000;
|
|
background: var(--apg-overlay-bg, rgba(0, 0, 0, 0.97));
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.apg-lightbox__bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 16px;
|
|
color: #fff;
|
|
}
|
|
.apg-lightbox__bar .apg-iconbtn { color: #fff; }
|
|
.apg-lightbox__bar .apg-iconbtn:hover { background: rgba(255, 255, 255, 0.14); }
|
|
.apg-lightbox__stage {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
min-height: 0;
|
|
padding: 10px;
|
|
}
|
|
.apg-lightbox__stage img,
|
|
.apg-lightbox__stage video {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
border-radius: 4px;
|
|
}
|
|
.apg-lightbox__nav {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.14);
|
|
color: #fff;
|
|
border: none;
|
|
display: grid;
|
|
place-items: center;
|
|
cursor: default;
|
|
}
|
|
.apg-lightbox__nav--prev { left: 18px; }
|
|
.apg-lightbox__nav--next { right: 18px; }
|
|
.apg-lightbox__title { font-size: 13px; font-weight: 600; }
|
|
.apg-lightbox__sub { font-size: 11px; opacity: 0.7; }
|
|
|
|
/* ---- Context menu ---- */
|
|
.apg-menu {
|
|
position: fixed;
|
|
z-index: 1200;
|
|
min-width: 210px;
|
|
background: var(--apg-menu-bg);
|
|
backdrop-filter: blur(34px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(34px) saturate(180%);
|
|
border: var(--apg-hairline) solid var(--apg-glass-border);
|
|
border-radius: var(--apg-radius-menu);
|
|
/* Layered shadow + faint inner top highlight = depth like macOS vibrancy menus. */
|
|
box-shadow:
|
|
var(--apg-shadow-md),
|
|
inset 0 var(--apg-hairline) 0 rgba(255, 255, 255, 0.14);
|
|
padding: 6px;
|
|
font-size: 13px;
|
|
}
|
|
/* No backdrop-filter support → fall back to a near-opaque fill for legibility. */
|
|
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
|
|
.apg-menu { background: var(--apg-bg-elevated); }
|
|
}
|
|
.apg-menu__item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 6px 10px;
|
|
border-radius: 6px;
|
|
cursor: default;
|
|
border: none;
|
|
background: none;
|
|
width: 100%;
|
|
text-align: left;
|
|
color: var(--apg-text);
|
|
}
|
|
.apg-menu__item:hover { background: var(--apg-accent-strong); color: #fff; }
|
|
.apg-menu__item:hover .apg-menu__icon { color: #fff; }
|
|
.apg-menu__item--danger { color: var(--apg-danger); }
|
|
.apg-menu__item--danger:hover { background: var(--apg-danger); color: #fff; }
|
|
.apg-menu__icon { color: var(--apg-text-secondary); width: 16px; display: grid; place-items: center; }
|
|
.apg-menu__sep { height: 1px; background: var(--apg-separator); margin: 5px 6px; }
|
|
.apg-menu__label { font-size: 11px; color: var(--apg-text-tertiary); padding: 6px 10px 3px; }
|
|
|
|
/* Dropdown (toolbar filter menus) reuses menu */
|
|
.apg-menu__check { margin-left: auto; color: var(--apg-accent); }
|
|
.apg-menu__item:hover .apg-menu__check { color: #fff; }
|
|
|
|
/* ---- Selection action bar ---- */
|
|
.apg-actionbar {
|
|
position: absolute;
|
|
bottom: 18px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 40;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: var(--apg-bg-elevated);
|
|
border: 1px solid var(--apg-separator);
|
|
border-radius: 14px;
|
|
padding: 7px 10px;
|
|
box-shadow: var(--apg-shadow-md);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
max-width: calc(100% - 32px);
|
|
}
|
|
.apg-actionbar__count { font-size: 13px; font-weight: 600; padding: 0 6px; white-space: nowrap; }
|
|
|
|
/* ---- Modal (album picker, rename) ---- */
|
|
.apg-modal__backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1100;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 20px;
|
|
}
|
|
.apg-modal {
|
|
background: var(--apg-bg);
|
|
border-radius: var(--apg-radius-lg);
|
|
box-shadow: var(--apg-shadow-lg);
|
|
width: 100%;
|
|
max-width: 380px;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
.apg-modal__title { font-size: 16px; font-weight: 700; }
|
|
.apg-modal__input {
|
|
border: 1px solid var(--apg-separator-strong);
|
|
border-radius: 8px;
|
|
padding: 8px 10px;
|
|
font-size: 14px;
|
|
background: var(--apg-bg-content);
|
|
color: var(--apg-text);
|
|
font-family: inherit;
|
|
outline: none;
|
|
}
|
|
.apg-modal__input:focus { border-color: var(--apg-accent); }
|
|
.apg-modal__actions { display: flex; justify-content: flex-end; gap: 8px; }
|
|
.apg-modal__list { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
|
|
.apg-modal__list-item {
|
|
display: flex; align-items: center; gap: 10px; padding: 8px 10px;
|
|
border-radius: 8px; cursor: default; border: none; background: none;
|
|
color: var(--apg-text); width: 100%; text-align: left; font-size: 14px;
|
|
}
|
|
.apg-modal__list-item:hover { background: var(--apg-hover); }
|
|
|
|
/* ---- Editor ---- */
|
|
.apg-editor { position: fixed; inset: 0; z-index: 1050; background: var(--apg-editor-bg, #161617); display: flex; flex-direction: column; color: #fff; font-family: var(--apg-font); }
|
|
.apg-editor__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
|
|
.apg-editor__bar .apg-iconbtn { color: #fff; }
|
|
.apg-editor__bar .apg-iconbtn:hover { background: rgba(255,255,255,0.12); }
|
|
.apg-editor__body { flex: 1; display: flex; min-height: 0; }
|
|
.apg-editor__canvaswrap { flex: 1; display: grid; place-items: center; gap: 12px; padding: 18px; min-width: 0; }
|
|
.apg-editor__canvaswrap canvas { max-width: 100%; max-height: 100%; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
|
|
.apg-editor__canvaswrap video { cursor: pointer; }
|
|
/* Custom video transport — sibling of the (transformable) preview, so it never
|
|
rotates/flips with the frame. */
|
|
.apg-vedit__transport {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: min(560px, 100%);
|
|
padding: 6px 10px;
|
|
border-radius: 999px;
|
|
background: rgba(30, 30, 32, 0.55);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
}
|
|
.apg-vedit__transport .apg-iconbtn { color: #fff; flex: none; }
|
|
.apg-vedit__scrub { flex: 1; min-width: 0; accent-color: var(--apg-accent); cursor: pointer; }
|
|
.apg-vedit__time { flex: none; font-size: 11.5px; color: rgba(255, 255, 255, 0.8); font-variant-numeric: tabular-nums; }
|
|
.apg-editor__panel { width: 300px; flex-shrink: 0; border-left: 1px solid rgba(255,255,255,0.1); padding: 16px; overflow-y: auto; }
|
|
.apg-editor__tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
|
|
.apg-editor__tab { flex: 1 1 auto; padding: 6px 8px; border-radius: 7px; background: rgba(255,255,255,0.08); border: none; color: #fff; font-size: 12px; cursor: pointer; white-space: nowrap; }
|
|
.apg-editor__tab--active { background: var(--apg-accent); }
|
|
|
|
/* ---- Advanced video editor panels ---- */
|
|
.apg-editor__error {
|
|
background: rgba(255, 69, 58, 0.16);
|
|
border: 1px solid rgba(255, 69, 58, 0.5);
|
|
color: #ffd3cf;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
padding: 8px 10px;
|
|
border-radius: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.apg-iconbtn--sm { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
|
|
.apg-vedit__panel { display: flex; flex-direction: column; gap: 10px; color: #eaeaea; font-size: 12.5px; }
|
|
.apg-vedit__hint { font-size: 11.5px; color: rgba(255,255,255,0.55); line-height: 1.45; }
|
|
.apg-vedit__row { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: rgba(255,255,255,0.75); }
|
|
.apg-vedit__row input[type="range"] { width: 100%; accent-color: var(--apg-accent); }
|
|
.apg-vedit__row .apg-modal__input { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.18); }
|
|
.apg-vedit__seg {
|
|
border: 1px solid rgba(255,255,255,0.14);
|
|
border-radius: 10px;
|
|
padding: 9px 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
background: rgba(255,255,255,0.04);
|
|
}
|
|
.apg-vedit__seg-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
|
|
.apg-vedit__seg-dur { margin-left: auto; color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; }
|
|
.apg-vedit__ovlist { display: flex; flex-direction: column; gap: 4px; }
|
|
.apg-vedit__ovitem {
|
|
display: flex; align-items: center; gap: 8px;
|
|
padding: 7px 9px; border-radius: 8px; cursor: pointer; text-align: left;
|
|
background: rgba(255,255,255,0.06); border: 1px solid transparent; color: #fff; font-size: 12.5px;
|
|
}
|
|
.apg-vedit__ovitem.is-sel { border-color: var(--apg-accent); background: rgba(10,132,255,0.15); }
|
|
.apg-vedit__ovlabel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.apg-vedit__kfbadge { font-size: 10px; color: var(--apg-accent); }
|
|
.apg-vedit__ovedit {
|
|
border-top: 1px solid rgba(255,255,255,0.12);
|
|
margin-top: 6px; padding-top: 10px;
|
|
display: flex; flex-direction: column; gap: 8px;
|
|
}
|
|
.apg-vedit__kf {
|
|
display: inline-flex; align-items: center; gap: 4px;
|
|
font-size: 10.5px; background: rgba(255,255,255,0.1); border-radius: 999px; padding: 2px 4px 2px 8px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.apg-vedit__kf button { background: none; border: none; color: #fff; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; }
|
|
.apg-slider-row { margin-bottom: 14px; }
|
|
.apg-slider-row__head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; color: #d0d0d2; }
|
|
.apg-slider { width: 100%; accent-color: var(--apg-accent); }
|
|
.apg-editor__filters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
|
|
.apg-editor__filter { padding: 10px 6px; border-radius: 8px; background: rgba(255,255,255,0.08); border: none; color: #fff; font-size: 12px; cursor: default; }
|
|
.apg-editor__filter--active { outline: 2px solid var(--apg-accent); }
|
|
@media (max-width: 720px) {
|
|
.apg-editor__body { flex-direction: column; }
|
|
.apg-editor__panel { width: 100%; border-left: none; border-top: 1px solid rgba(255,255,255,0.1); max-height: 45%; }
|
|
}
|
|
|
|
/* ---- Info popover (Map grid) ---- */
|
|
.apg-info-card {
|
|
background: var(--apg-bg-elevated);
|
|
border: 1px solid var(--apg-separator);
|
|
border-radius: var(--apg-radius);
|
|
box-shadow: var(--apg-shadow-md);
|
|
padding: 14px 18px;
|
|
min-width: 220px;
|
|
font-size: 13px;
|
|
}
|
|
.apg-info-card__head { display: flex; gap: 6px; margin-bottom: 10px; }
|
|
.apg-info-card__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--apg-separator-strong); }
|
|
|
|
/* ---- Custom camera ---- */
|
|
.apg-camera {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1080;
|
|
background: #000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #fff;
|
|
}
|
|
.apg-camera__bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 14px;
|
|
z-index: 2;
|
|
}
|
|
.apg-camera__bar .apg-iconbtn { color: #fff; }
|
|
.apg-camera__bar .apg-iconbtn:hover { background: rgba(255, 255, 255, 0.14); }
|
|
.apg-camera__bar .apg-iconbtn--on { color: var(--apg-accent); }
|
|
.apg-camera__stage {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.apg-camera__videowrap,
|
|
.apg-camera__preview {
|
|
position: relative;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
display: inline-flex;
|
|
}
|
|
.apg-camera__videowrap video,
|
|
.apg-camera__preview img,
|
|
.apg-camera__preview video {
|
|
max-width: 100%;
|
|
max-height: 78vh;
|
|
display: block;
|
|
border-radius: 6px;
|
|
object-fit: contain;
|
|
}
|
|
.apg-camera__grid {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background-image:
|
|
linear-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.4) 1px, transparent 1px);
|
|
background-size: 33.33% 33.33%;
|
|
background-position: -1px -1px;
|
|
opacity: 0.5;
|
|
}
|
|
.apg-camera__error {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 14px;
|
|
color: #aeaeb2;
|
|
text-align: center;
|
|
padding: 40px;
|
|
}
|
|
.apg-camera__markup {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
padding: 8px 14px;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
}
|
|
.apg-camera__tool {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
background: rgba(255, 255, 255, 0.12);
|
|
border: none;
|
|
color: #fff;
|
|
border-radius: 8px;
|
|
padding: 6px 10px;
|
|
font-size: 12px;
|
|
cursor: default;
|
|
}
|
|
.apg-camera__tool--active { background: var(--apg-accent); }
|
|
.apg-camera__swatch {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
border: 2px solid rgba(255, 255, 255, 0.4);
|
|
cursor: pointer;
|
|
}
|
|
.apg-camera__controls {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
padding: 18px;
|
|
min-height: 92px;
|
|
}
|
|
.apg-camera__shutter {
|
|
width: 68px;
|
|
height: 68px;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
border: 4px solid rgba(255, 255, 255, 0.5);
|
|
cursor: pointer;
|
|
transition: transform 0.1s ease;
|
|
}
|
|
.apg-camera__shutter:hover { transform: scale(1.05); }
|
|
.apg-camera__shutter:active { transform: scale(0.95); }
|
|
.apg-camera__shutter--video { background: #ff453a; }
|
|
.apg-camera__shutter--recording {
|
|
background: #ff453a;
|
|
border-radius: 18px;
|
|
animation: apg-rec 1s ease-in-out infinite;
|
|
}
|
|
@keyframes apg-rec { 50% { opacity: 0.5; } }
|
|
|
|
/* ---- Info panel ---- */
|
|
.apg-info {
|
|
position: fixed;
|
|
/* A host with its own header can push the panel below it via --apg-overlay-top. */
|
|
top: var(--apg-overlay-top, 64px);
|
|
right: 14px;
|
|
z-index: 1300;
|
|
width: 300px;
|
|
max-width: calc(100vw - 28px);
|
|
max-height: calc(100vh - 90px);
|
|
overflow-y: auto;
|
|
background: var(--apg-menu-bg);
|
|
border: var(--apg-hairline) solid var(--apg-glass-border);
|
|
border-radius: var(--apg-radius-lg);
|
|
box-shadow: var(--apg-shadow-md);
|
|
backdrop-filter: blur(34px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(34px) saturate(180%);
|
|
color: var(--apg-text);
|
|
}
|
|
.apg-info__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 12px 8px 16px;
|
|
position: sticky;
|
|
top: 0;
|
|
background: inherit;
|
|
border-bottom: 1px solid var(--apg-separator);
|
|
}
|
|
.apg-info__body { padding: 14px 16px 18px; }
|
|
.apg-info__empty { padding: 24px 16px; color: var(--apg-text-secondary); font-size: 13px; }
|
|
.apg-info__thumb {
|
|
width: 100%;
|
|
height: 150px;
|
|
object-fit: cover;
|
|
border-radius: var(--apg-radius);
|
|
background: var(--apg-bg);
|
|
}
|
|
/* Video preview: show the whole frame (never crop) over a dark backing, and let the
|
|
native control bar sit below without forcing a fixed square. */
|
|
.apg-info__thumb--video {
|
|
height: auto;
|
|
max-height: 220px;
|
|
object-fit: contain;
|
|
background: #000;
|
|
}
|
|
.apg-info__name { font-weight: 600; font-size: 14px; margin-top: 10px; word-break: break-all; }
|
|
.apg-info__sub { color: var(--apg-text-secondary); font-size: 12px; margin-bottom: 10px; }
|
|
.apg-info__row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 6px 0;
|
|
font-size: 12.5px;
|
|
border-top: 1px solid var(--apg-separator);
|
|
}
|
|
.apg-info__row-label { color: var(--apg-text-secondary); flex-shrink: 0; }
|
|
.apg-info__row-value { text-align: right; word-break: break-word; }
|
|
.apg-info__chips { padding: 8px 0; border-top: 1px solid var(--apg-separator); font-size: 12.5px; }
|
|
.apg-info__coords { font-size: 11px; color: var(--apg-text-tertiary); margin: 6px 0; font-family: ui-monospace, monospace; }
|
|
.apg-info__map {
|
|
width: 100%;
|
|
height: 150px;
|
|
border-radius: var(--apg-radius);
|
|
overflow: hidden;
|
|
margin-top: 4px;
|
|
}
|
|
.apg-chip {
|
|
border: 1px solid var(--apg-separator-strong);
|
|
background: var(--apg-bg);
|
|
color: var(--apg-text);
|
|
border-radius: 999px;
|
|
padding: 3px 10px;
|
|
font-size: 12px;
|
|
}
|
|
.apg-chip:hover { border-color: var(--apg-accent); color: var(--apg-accent); }
|
|
|
|
/* ---- Info panel: versions + comments ---- */
|
|
.apg-info__section {
|
|
margin-top: 14px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--apg-separator);
|
|
}
|
|
.apg-info__section-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
font-weight: 600;
|
|
font-size: 12.5px;
|
|
color: var(--apg-text);
|
|
margin-bottom: 8px;
|
|
}
|
|
.apg-info__section-head svg { color: var(--apg-text-secondary); }
|
|
.apg-info__count {
|
|
margin-left: auto;
|
|
min-width: 18px;
|
|
padding: 0 6px;
|
|
height: 18px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 999px;
|
|
background: var(--apg-bg);
|
|
border: 1px solid var(--apg-separator-strong);
|
|
color: var(--apg-text-secondary);
|
|
font-size: 11px;
|
|
}
|
|
.apg-info__hint { font-size: 11.5px; color: var(--apg-text-tertiary); line-height: 1.45; }
|
|
|
|
.apg-versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
|
|
.apg-version { border-radius: var(--apg-radius-sm); }
|
|
.apg-version__row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
width: 100%;
|
|
padding: 6px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--apg-radius-sm);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
color: var(--apg-text);
|
|
}
|
|
.apg-version__row:hover { background: var(--apg-bg); }
|
|
.apg-version__row.is-current { border-color: color-mix(in srgb, var(--apg-accent) 45%, transparent); }
|
|
.apg-version__thumb-wrap {
|
|
width: 40px;
|
|
height: 40px;
|
|
flex-shrink: 0;
|
|
border-radius: var(--apg-radius-sm);
|
|
overflow: hidden;
|
|
background: var(--apg-bg);
|
|
}
|
|
.apg-version__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
.apg-version__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
|
|
.apg-version__title { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
|
|
.apg-version__badge {
|
|
font-size: 9.5px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
color: var(--apg-accent);
|
|
border: 1px solid color-mix(in srgb, var(--apg-accent) 45%, transparent);
|
|
border-radius: 4px;
|
|
padding: 0 4px;
|
|
}
|
|
.apg-version__time { font-size: 11px; color: var(--apg-text-tertiary); }
|
|
.apg-version__detail { padding: 4px 6px 8px 55px; }
|
|
.apg-version__changes-label {
|
|
font-size: 10.5px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
color: var(--apg-text-tertiary);
|
|
margin-bottom: 4px;
|
|
}
|
|
.apg-version__changes { list-style: disc; margin: 0 0 8px; padding-left: 16px; font-size: 12px; color: var(--apg-text); }
|
|
.apg-version__changes li { padding: 1px 0; }
|
|
/* Version author (who created this version) — avatar + name under the timestamp. */
|
|
.apg-version__author { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; }
|
|
.apg-version__author-avatar {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
background: var(--apg-bg-elevated);
|
|
}
|
|
.apg-version__author-avatar--initial {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--apg-accent);
|
|
color: #fff;
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
}
|
|
.apg-version__author-name { font-size: 11px; color: var(--apg-text-secondary); }
|
|
|
|
/* ---- Info panel: "Uploaded by" identity block ---- */
|
|
.apg-info__uploader {
|
|
/* Breathing room above (from the caption/note) AND below, so the card is a
|
|
distinct block, not glued to the "Analyzing…" line or the detail rows. */
|
|
margin: 12px 0 14px;
|
|
padding: 8px 10px;
|
|
border-radius: var(--apg-radius);
|
|
background: var(--apg-bg-elevated);
|
|
border: 1px solid var(--apg-separator);
|
|
}
|
|
.apg-info__uploader-label {
|
|
display: block;
|
|
font-size: 10.5px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
color: var(--apg-text-tertiary);
|
|
margin-bottom: 6px;
|
|
}
|
|
.apg-info__uploader-row { display: flex; align-items: center; gap: 9px; }
|
|
.apg-info__uploader-avatar {
|
|
width: 30px;
|
|
height: 30px;
|
|
flex-shrink: 0;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
background: var(--apg-bg);
|
|
}
|
|
.apg-info__uploader-avatar--initial {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--apg-accent);
|
|
color: #fff;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
.apg-info__uploader-meta { display: flex; flex-direction: column; min-width: 0; }
|
|
.apg-info__uploader-name { font-size: 13px; font-weight: 600; color: var(--apg-text); }
|
|
.apg-info__uploader-email {
|
|
font-size: 11px;
|
|
color: var(--apg-text-secondary);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ---- Info panel: editable caption / note ---- */
|
|
.apg-editable {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
padding: 7px 9px;
|
|
text-align: left;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--apg-radius);
|
|
background: var(--apg-bg-elevated);
|
|
color: var(--apg-text);
|
|
cursor: text;
|
|
font-family: inherit;
|
|
}
|
|
.apg-editable:hover { border-color: var(--apg-separator-strong); }
|
|
.apg-editable__label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 10.5px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
color: var(--apg-text-tertiary);
|
|
}
|
|
.apg-editable__label svg { margin-left: auto; opacity: 0.55; }
|
|
.apg-editable__edited {
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
font-weight: 500;
|
|
font-size: 10px;
|
|
font-style: italic;
|
|
color: var(--apg-text-tertiary);
|
|
}
|
|
.apg-editable__value { font-size: 12.5px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
|
|
.apg-editable__value--empty { color: var(--apg-text-tertiary); font-style: italic; }
|
|
.apg-editable--editing { cursor: default; }
|
|
.apg-editable__input {
|
|
width: 100%;
|
|
border: 1px solid var(--apg-accent);
|
|
background: var(--apg-bg);
|
|
color: var(--apg-text);
|
|
border-radius: var(--apg-radius-sm);
|
|
padding: 6px 8px;
|
|
font-size: 12.5px;
|
|
font-family: inherit;
|
|
line-height: 1.4;
|
|
resize: vertical;
|
|
outline: none;
|
|
}
|
|
|
|
/* ---- Info panel: full reverse-geocoded address ---- */
|
|
.apg-address { margin-top: 6px; }
|
|
.apg-address__line {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
width: 100%;
|
|
text-align: left;
|
|
padding: 7px 9px;
|
|
border-radius: var(--apg-radius);
|
|
border: 1px solid var(--apg-glass-border);
|
|
background: var(--apg-bg-elevated);
|
|
color: var(--apg-text);
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
cursor: pointer;
|
|
}
|
|
.apg-address__line svg { flex-shrink: 0; margin-top: 1px; color: var(--apg-accent); }
|
|
.apg-address__line:hover { border-color: var(--apg-accent); }
|
|
.apg-address__grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 6px;
|
|
margin: 8px 0 0;
|
|
}
|
|
.apg-address__cell { display: flex; flex-direction: column; gap: 1px; }
|
|
.apg-address__cell dt {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
color: var(--apg-text-tertiary);
|
|
}
|
|
.apg-address__cell dd { margin: 0; font-size: 12px; color: var(--apg-text); word-break: break-word; }
|
|
|
|
.apg-comments { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
|
|
/* Each comment is a distinct card so consecutive comments (and the compose box
|
|
below) read as separate, not one run-on block. */
|
|
.apg-comment {
|
|
display: flex; gap: 8px; align-items: flex-start;
|
|
padding: 8px 9px;
|
|
border-radius: 10px;
|
|
background: var(--apg-bg-elevated);
|
|
border: 1px solid var(--apg-separator);
|
|
}
|
|
/* Separate the compose form from the comment list above it. */
|
|
.apg-comment-form { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--apg-separator); }
|
|
.apg-comment__avatar {
|
|
width: 26px;
|
|
height: 26px;
|
|
flex-shrink: 0;
|
|
border-radius: 50%;
|
|
background: var(--apg-accent);
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
/* Real avatar image (host-provided identity) — same footprint as the initial. */
|
|
.apg-comment__avatar-img {
|
|
width: 26px;
|
|
height: 26px;
|
|
flex-shrink: 0;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
display: block;
|
|
background: var(--apg-bg-elevated);
|
|
}
|
|
.apg-comment-form__identity {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 2px 0 2px;
|
|
}
|
|
.apg-comment__body { flex: 1; min-width: 0; }
|
|
.apg-comment__meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
|
|
.apg-comment__author { font-size: 12.5px; font-weight: 600; }
|
|
.apg-comment__time { font-size: 10.5px; color: var(--apg-text-tertiary); }
|
|
.apg-comment__text { font-size: 12.5px; line-height: 1.45; margin-top: 2px; word-break: break-word; white-space: pre-wrap; }
|
|
.apg-comment__delete {
|
|
flex-shrink: 0;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--apg-text-tertiary);
|
|
cursor: pointer;
|
|
padding: 2px;
|
|
border-radius: 4px;
|
|
opacity: 0;
|
|
transition: opacity 0.12s;
|
|
}
|
|
.apg-comment:hover .apg-comment__delete { opacity: 1; }
|
|
.apg-comment__delete:hover { color: var(--apg-danger, #ff453a); background: var(--apg-bg); }
|
|
|
|
.apg-comment-form { display: flex; flex-direction: column; gap: 6px; }
|
|
.apg-comment-form__author,
|
|
.apg-comment-form__input {
|
|
width: 100%;
|
|
border: 1px solid var(--apg-separator-strong);
|
|
background: var(--apg-bg);
|
|
color: var(--apg-text);
|
|
border-radius: var(--apg-radius-sm);
|
|
padding: 7px 9px;
|
|
font-size: 12.5px;
|
|
font-family: inherit;
|
|
}
|
|
.apg-comment-form__input { resize: vertical; min-height: 38px; line-height: 1.4; }
|
|
.apg-comment-form__author:focus,
|
|
.apg-comment-form__input:focus { outline: none; border-color: var(--apg-accent); }
|
|
.apg-comment-form__post { align-self: flex-end; }
|
|
.apg-voice { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
|
|
.apg-voice__mic { display: inline-flex; align-items: center; gap: 5px; }
|
|
.apg-voice__mic--rec {
|
|
background: var(--apg-danger, #e5484d);
|
|
border-color: var(--apg-danger, #e5484d);
|
|
color: #fff;
|
|
}
|
|
.apg-voice__denoise {
|
|
display: inline-flex; align-items: center; gap: 5px;
|
|
font-size: 12px; opacity: 0.85; cursor: pointer; user-select: none;
|
|
}
|
|
.apg-voice__denoise input { accent-color: var(--apg-accent); }
|
|
.apg-voice__status { font-size: 12px; opacity: 0.7; min-height: 1em; }
|
|
.apg-info__analyzing {
|
|
display: flex; align-items: center; gap: 8px;
|
|
font-size: 13px; font-weight: 500; color: var(--apg-accent);
|
|
padding: 8px 10px; margin: 6px 0 10px;
|
|
background: color-mix(in srgb, var(--apg-accent) 10%, transparent);
|
|
border-radius: 8px;
|
|
}
|
|
.apg-info__spinner {
|
|
width: 14px; height: 14px; flex: none;
|
|
border: 2px solid currentColor; border-top-color: transparent;
|
|
border-radius: 50%; animation: apg-spin 0.8s linear infinite;
|
|
}
|
|
@keyframes apg-spin { to { transform: rotate(360deg); } }
|
|
@media (prefers-reduced-motion: reduce) { .apg-info__spinner { animation: none; } }
|
|
.apg-maskbrush {
|
|
position: fixed; inset: 0; z-index: 200;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
gap: 12px; padding: 20px;
|
|
}
|
|
.apg-maskbrush__title { color: #fff; font-size: 14px; font-weight: 600; }
|
|
.apg-maskbrush__stage {
|
|
position: relative; width: 100%;
|
|
max-width: min(90vw, 900px); max-height: 68vh;
|
|
}
|
|
.apg-maskbrush__img,
|
|
.apg-maskbrush__canvas {
|
|
position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px;
|
|
}
|
|
.apg-maskbrush__img { object-fit: contain; user-select: none; -webkit-user-drag: none; }
|
|
.apg-maskbrush__canvas { cursor: crosshair; touch-action: none; }
|
|
.apg-maskbrush__bar {
|
|
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
|
width: 100%; max-width: min(90vw, 900px);
|
|
}
|
|
.apg-maskbrush__brush { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 12px; }
|
|
|
|
/* ---- Versions & Audit browser view ---- */
|
|
.apg-audit-list { display: flex; flex-direction: column; gap: 8px; }
|
|
.apg-audit-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
width: 100%;
|
|
text-align: left;
|
|
padding: 10px;
|
|
background: var(--apg-bg-elevated);
|
|
border: 1px solid var(--apg-separator);
|
|
border-radius: var(--apg-radius);
|
|
cursor: pointer;
|
|
color: var(--apg-text);
|
|
}
|
|
.apg-audit-card:hover { border-color: var(--apg-accent); }
|
|
.apg-audit-card__thumb-wrap {
|
|
position: relative;
|
|
width: 56px;
|
|
height: 56px;
|
|
flex-shrink: 0;
|
|
border-radius: var(--apg-radius-sm);
|
|
overflow: hidden;
|
|
background: var(--apg-bg);
|
|
}
|
|
.apg-audit-card__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
.apg-audit-card__play {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
background: rgba(0, 0, 0, 0.28);
|
|
}
|
|
.apg-audit-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
|
|
.apg-audit-card__name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.apg-audit-card__tags { display: flex; gap: 10px; flex-wrap: wrap; }
|
|
.apg-audit-card__tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 11.5px;
|
|
color: var(--apg-text-secondary);
|
|
}
|
|
.apg-audit-card__latest {
|
|
font-size: 11.5px;
|
|
color: var(--apg-text-tertiary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.apg-info { left: 14px; right: 14px; width: auto; }
|
|
}
|
|
|
|
/* ---- Mobile sidebar drawer ---- */
|
|
.apg-scrim {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
z-index: 29;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
@media (max-width: 760px) {
|
|
.apg { --apg-sidebar-w: 250px; }
|
|
.apg-sidebar {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 30;
|
|
box-shadow: var(--apg-shadow-md);
|
|
}
|
|
.apg-scrim--show { opacity: 1; pointer-events: auto; }
|
|
}
|
|
|
|
/* Ultra-narrow (Galaxy Fold ~280px) */
|
|
@media (max-width: 360px) {
|
|
.apg { font-size: 13px; }
|
|
.apg-collections { padding: 8px 12px 60px; }
|
|
.apg-empty__title { font-size: 24px; }
|
|
.apg-empty__subtitle { font-size: 15px; }
|
|
.apg-empty__hints { gap: 22px; }
|
|
.apg-toolbar { padding: 0 8px; gap: 4px; }
|
|
.apg-segmented__item { padding: 4px 9px; font-size: 12px; }
|
|
}
|
|
|
|
/* AI analysis status pill */
|
|
.apg-ai-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--apg-text-secondary);
|
|
padding: 0 8px;
|
|
white-space: nowrap;
|
|
}
|
|
.apg-ai-spinner {
|
|
width: 13px;
|
|
height: 13px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--apg-separator-strong);
|
|
border-top-color: var(--apg-accent);
|
|
animation: apg-spin 0.7s linear infinite;
|
|
}
|
|
@keyframes apg-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
@media (max-width: 600px) {
|
|
.apg-ai-status { display: none; }
|
|
}
|
|
|
|
/* Larger hit targets on touch / coarse-pointer devices (WCAG 2.5.8). */
|
|
@media (pointer: coarse) {
|
|
.apg-iconbtn { width: 44px; height: 44px; }
|
|
.apg-tile__check { width: 28px; height: 28px; }
|
|
.apg-segmented__item { padding: 8px 16px; }
|
|
.apg-menu__item { padding: 10px 12px; }
|
|
.apg-sidebar__item { padding: 9px 10px; }
|
|
.apg-modal__list-item { padding: 11px 10px; }
|
|
}
|
|
|
|
/* Reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.apg *,
|
|
.apg *::before,
|
|
.apg *::after {
|
|
transition-duration: 0.001ms !important;
|
|
animation-duration: 0.001ms !important;
|
|
}
|
|
}
|
|
|
|
/* Focus visibility for accessibility */
|
|
.apg :focus-visible {
|
|
outline: 2px solid var(--apg-accent);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* =========================================================================
|
|
Embedded mode — the gallery lives inside a host app's layout.
|
|
The full-screen overlays (lightbox, editor, camera, modals, context menu)
|
|
intentionally stay `position: fixed`: that is correct for a modal rendered
|
|
over a host application. Only the in-flow layout changes here.
|
|
========================================================================= */
|
|
.apg--embedded {
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
.apg--embedded .apg__body {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
/* macOS uses `cursor: default` on controls; inside a web app that reads as
|
|
broken, so embedded mode restores the expected pointer affordance. */
|
|
.apg--embedded .apg-btn,
|
|
.apg--embedded .apg-iconbtn,
|
|
.apg--embedded .apg-tile,
|
|
.apg--embedded .apg-chip,
|
|
.apg--embedded .apg-menu__item,
|
|
.apg--embedded .apg-modal__list-item,
|
|
.apg--embedded .apg-sidebar__item,
|
|
.apg--embedded .apg-segmented__item,
|
|
.apg--embedded .apg-lightbox__nav,
|
|
.apg--embedded .apg-collections__action,
|
|
.apg--embedded .apg-pinned-card,
|
|
.apg--embedded .apg-editor__filter,
|
|
.apg--embedded .apg-camera__tool,
|
|
.apg--embedded .apg-scalemenu,
|
|
.apg--embedded .apg-daterange__button,
|
|
.apg--embedded .apg-daterange__preset,
|
|
.apg--embedded .apg-editable {
|
|
cursor: pointer;
|
|
}
|
|
.apg--embedded .apg-btn:disabled,
|
|
.apg--embedded .apg-iconbtn:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* =========================================================================
|
|
Full screen / maximise — the gallery covers the host page.
|
|
|
|
Why the SDK's own overlays need no change: the lightbox / editor / camera /
|
|
modals are `position: fixed; inset: 0`, so they resolve against the VIEWPORT
|
|
(a plain `position: fixed` ancestor is not a containing block for them — only
|
|
transform/filter/contain would be). Full screen makes `.apg` cover exactly the
|
|
viewport too, so the two coincide and the overlays land in the right place.
|
|
And because `z-index: 1400` opens a stacking context, their 1000-1300 z-indexes
|
|
now stack INSIDE it — above the gallery's content, and (via 1400) above the
|
|
host's chrome. Nothing else needs raising. `overflow: hidden` on `.apg` does
|
|
not clip them, for the same containing-block reason.
|
|
========================================================================= */
|
|
.apg--fullscreen {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1400;
|
|
width: 100%;
|
|
/* Fill the viewport regardless of what height the host container had.
|
|
`dvh` (where supported) keeps mobile browser chrome from cropping it. */
|
|
height: 100%;
|
|
height: 100dvh;
|
|
max-height: none;
|
|
border-radius: 0;
|
|
}
|
|
.apg--fullscreen .apg__body {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
height: auto;
|
|
}
|