@panoramax/web-viewer/src/components/core/Viewer.css

Panoramax web viewer for geolocated pictures

pnx-viewer {
	position: relative;
	display: block;
}

/* Maximized components */
pnx-viewer .pnx-map.maplibregl-map,
pnx-viewer .pnx-psv {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* No PSV loader */
pnx-viewer .psv-loader {
	display: none;
}

/* Search bar over other components */
pnx-widget-geosearch {
	z-index: 129;
}

/* Cornered grid layout */
pnx-viewer pnx-cornered-grid::part(corner-top-left),
pnx-viewer pnx-cornered-grid::part(corner-top),
pnx-viewer pnx-cornered-grid::part(corner-top-right),
pnx-viewer pnx-cornered-grid::part(corner-bottom-left),
pnx-viewer pnx-cornered-grid::part(corner-bottom),
pnx-viewer pnx-cornered-grid::part(corner-bottom-right) {
	gap: 10px;
	padding: 10px;
}

@media screen and (max-width: 576px) {
	pnx-viewer pnx-cornered-grid::part(corner-top-right) {
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-start;
	}

	pnx-viewer pnx-cornered-grid::part(corner-top-left) {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
}

/* Mini component */
pnx-viewer pnx-mini {
	box-sizing: border-box;
	aspect-ratio: 1/1;
	min-width: 250px;
	min-height: 250px;
	position: relative;
	display: block;
	z-index: 120;
}

@media screen and ((max-width: 576px)) {
	pnx-viewer pnx-mini {
		min-width: unset;
		min-height: unset;
	}
}

pnx-viewer pnx-mini .psv-container,
pnx-viewer pnx-mini .pnx-map {
	border-radius: 10px;
}

/* Hidden elements depending on focus */
pnx-viewer:not(pnx-viewer[focus="map"]) .pnx-only-map,
pnx-viewer:not(pnx-viewer[focus="pic"]) .pnx-only-psv {
	display: none;
}

/* Override legend positioning */
@media screen and (min-width: 576px) {
	pnx-viewer pnx-widget-legend:not([light="true"]) {
		position: absolute;
		left: 10px;
		top: 60px;
	}

	pnx-viewer[focus="pic"] pnx-widget-legend:not([light="true"]) {
		top: 10px;
		width: 100%;
	}
}

/* Hide default map legend */
pnx-viewer .pnx-map .maplibregl-ctrl-attrib {
	display: none;
}

/* Override geosearch sizing */
@media screen and (max-width: 576px) {
	pnx-widget-geosearch pnx-search-bar:not([reduced])::part(container) {
		width: 250px;
		max-width: 40vw;
	}
}

/* Hidden widgets on sequence play */
pnx-viewer.pnx-playing pnx-bottom-drawer,
pnx-viewer.pnx-playing pnx-mini,
pnx-viewer.pnx-playing pnx-widget-legend,
pnx-viewer.pnx-playing pnx-widget-zoom {
	display: none;
}