MediaWiki:Gadget-ListingInfo.css

/*
	ListingInfo styles
	Version: 2024-09-15
*/

/*
	Background pane behind dialog
*/

#voy-info-background { /* other rules defined in ui-widget-overlay class */
	position: fixed !important;
	z-index: 2; /* for Vector skin */
	outline: 0 none;
	overflow: hidden;
}

/*
	Dialog window
*/

#voy-listing-info {
	position: absolute;
	z-index: 2;  /* for Vector skin */
	overflow: hidden;
	margin: 0 !important;
	padding: 0.2em;
	border: 1px solid #ccc;
	border-radius: 3px;
	background-color: #f2f5f7;
	font-family: sans-serif;
	font-size: 0.8em;
}
@media screen {
	html.skin-theme-clientpref-night #voy-listing-info {
		background-color: #333;
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os #voy-listing-info {
		background-color: #333;
	}
}

/*
	Button pane
*/

#voy-info-button-pane {
	padding-left: 1em;
}

.voy-info-button {
	display: block;
	width: auto;
	overflow: visible;
	background: linear-gradient(to bottom, #fff 0%, #ddd 90%);
	border: 1px solid #aaaaaa;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
	margin: .5em .4em 0 0;
	padding: 0.4em 1em;
	cursor: pointer;
}
.voy-info-button:focus {
	outline: none;
	background: linear-gradient(to bottom, #fff 0%, #deefff 90%);
	border: 1px solid #88aadd;
}
.voy-info-button::-moz-focus-inner {
	border: 0;
}
.voy-info-button:hover {
	background: linear-gradient(to bottom, #fff 0%, #fff 50%);
	border: 1px solid #aaaaaa;
}
.voy-info-button:active {
	background: linear-gradient(to bottom, #fff 10%, #ccc 90%);
	border: 1px solid #88aadd;
}
.voy-info-button:disabled {
	border: 1px solid #c5c5c5;
	background: #f6f6f6;
	opacity: .35;
	cursor: default !important;
	pointer-events: none;
}
.voy-info-button-img {
	width: 20px;
	height: 20px;
	background-size: 20px 20px;
	background-repeat: no-repeat;
	background-position: center center;
}
#bookingImg .voy-info-button-img {
	background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Edit_font_awesome.svg/80px-Edit_font_awesome.svg.png);
}
#cancelImg .voy-info-button-img {
	background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eclose%3C/title%3E%3Cpath d=%22M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z%22/%3E%3Cpath d=%22M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z%22/%3E%3C/svg%3E');
}
#contactImg .voy-info-button-img {
	background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Phone_font_awesome.svg/80px-Phone_font_awesome.svg.png);
}
#featuresImg .voy-info-button-img {
	background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/8/87/Check-list_(50370)_-_The_Noun_Project.svg/80px-Check-list_(50370)_-_The_Noun_Project.svg.png');
}
#figureImg .voy-info-button-img {
	background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/0/08/High-contrast-image-x-generic.svg/80px-High-contrast-image-x-generic.svg.png);
}
#mapImg .voy-info-button-img {
	background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/5/56/Antu_tag-places-black.svg/80px-Antu_tag-places-black.svg.png);
}
#taxiImg .voy-info-button-img {
	background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Q82650_noun_7191_ccJensT%C3%A4rning_taxi.svg/80px-Q82650_noun_7191_ccJensT%C3%A4rning_taxi.svg.png);
}
@media screen {
	html.skin-theme-clientpref-night .voy-info-button {
		filter: invert(100%);
	}
}
@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .voy-info-button {
		filter: invert(100%);
	}
}

/*
	Information pane
*/

.voy-info-pane {
	margin: 0.6em 0 0.6em 0.5em;
	width: 340px;
}
.voy-info-pane .external { /* unterdrücke Link-Symbol bei sozialen Medien */
	background: none;
	padding-right: 0;
}
.voy-info-pane h2 {
	padding-top: 0;
	padding-bottom: 0.17em;
	border-bottom: 1px solid #a2a9b1;
	margin-bottom: 0.6em;
	margin-top: 0;
	font-size: 150%;
}
.voy-info-container {
	overflow-y: auto;
}
.voy-info-pane p, .voy-info-pane dl, .voy-info-pane ul {
	line-height: 150%;
	font-size: 115%;
}
.skin-minerva .voy-info-pane p, .skin-minerva .voy-info-pane dl {
	margin-bottom: 0.5em;
}
.skin-minerva .voy-info-pane ul {
	list-style: square outside;
	padding-left: 1em;
}
.voy-info-pane dl {
	margin-left: 0;
}
.voy-info-pane dd {
	margin-left: 1.6em;
}
.voy-info-image {
	margin: 0 auto;
	text-align: center;
	height: 225px;
	width: 100%;
	border: 1px solid #c8ccd1;
	overflow: hidden;
}
.voy-info-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.voy-info-image span {
	display: none; /* hide lazy placeholders */
}
#voy-info-map {
	height: 225px;
	border: 1px solid #c8ccd1;
}
.voy-info-img-link img {
	vertical-align: text-top;
}
.voy-listing-info-group1 + .voy-listing-info-group2 {
	margin-top: 0.7em;
}
.voy-info-mobile .voy-info-booking li + li {
	margin-top: 1em;
}
.voy-info-map-caption {
	margin-bottom: 0;
	font-weight: bold;
}
.voy-info-extra-maps {
	text-align: right;
	font-style: italic;
}
.voy-info-places-list {
	margin-bottom: 0.7em;
}

/*
	Scrollbar for Chrome, Safari on mobile devices
*/

.voy-info-mobile ::-webkit-scrollbar {
	-webkit-appearance: none;
}
.voy-info-mobile ::-webkit-scrollbar:vertical {
	width: 6px;
}
.voy-info-mobile ::-webkit-scrollbar:horizontal {
	height: 6px;
}
.voy-info-mobile ::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, .5);
	border-radius: 4px;
	border: 1px solid #ffffff;
}
.voy-info-mobile ::-webkit-scrollbar-track {
	border-radius: 4px;
	background-color: #ffffff;
}