MediaWiki:Mobile.css

/** CSS an dieser Stelle wirkt sich auf alle Skins aus */
/* Common skin for desktop and mobile versions */
/* MediaWiki:Mobile.css is a copy of MediaWiki:Common.css */
/* <nowiki> */

/* Design für Dialoge */
@import url('//de.wikivoyage.org/w/index.php?title=MediaWiki:WV-Dialog.css&action=raw&ctype=text/css');

/* Stile für Hauptseite: Anfang */
/* Unterdrückung Ausgabe Überschrift auf Hauptseite */
body.page-Hauptseite.action-view .firstHeading,
body.page-Hauptseite.action-view #contentSub {
	display: none;
}
/* Artikel des Monats auf der Hauptseite */
#voy-destination-of-the-month .floatleft {
	margin: 0 0.5em 0.5em 0;
	max-width: 60%;
}
#voy-destination-of-the-month img {
	max-width: 100%;
	height: auto;
}
/* Stile für Hauptseite: Ende */

/* Unterdrückt Ausgabe nachgestellter Links */
#content .url a.external.text:after, #content .url a.external.autonumber:after,
#content a[href^="tel:"].external.text:after, #content a[href^="tel:"].external.autonumber:after,
#content a[href^="mailto:"].external.text:after, #content a[href^="mailto:"].external.autonumber:after,
#content .printNoLink a.external.text:after, #content .printNoLink a.external.autonumber:after {
	content: '';
}
@media print {
	#content a.external.text:after, #content a.external.autonumber:after {
		font-weight: normal;
	}
}

/* Unterseiten und Brotkrümelnavigation */
.minerva__subtitle .subpages {
	display: block;
}
.ns-0 .minerva__subtitle .subpages, .ns-4 .minerva__subtitle .subpages,
.ns-12 .minerva__subtitle .subpages, .ns-14 .minerva__subtitle .subpages {
	display: none;
}
/* Breadcrumb nicht vorlesen */
@media speech {
	.minerva__subtitle { 
		display: none; 
	}
}

/* preventing 'Segoe UI Emoji' font */
.skin-timeless .voy-timeless-no-emoji {
	font-family: 'Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
}
.skin-timeless .toctoggle {
	top: -0.5em;
	position: relative;
}
.skin-timeless #mw-content h1.firstHeading {
	overflow: visible;
}

/* Einzelnachweise, Hervorhebung in blau */

sup.reference a {
	white-space: nowrap;
}
.references {
	font-size:90%;
}
.references > li:target, sup.reference:target {
	background-color: #ddeeff;
}

/* General design classes */
.voy-small {
	font-size:80%;
}
.voy-bold {
	font-weight: bold;
}

/* Fehlerausschriften */
.error {
	background-color: #ffffff;
}

/* Stellt den Text so dar, als würde man das Tag <code>...</code> oder die Vorlage {{Code|...}} benutzen */
.code {
	font-family: monospace,Courier; 
	color: black; 
	background-color: #f9f9f9; 
	border: 1px solid #ddd; 
	border-radius: 2px; padding: 1px 4px;
}

/* Tags for most accessed pages */

#tags {
	float: right;
	background: #ffffff;
	width: 25%;
	padding: 0.5em 1em;
	line-height: 2em;
}
#tags span {
	display: inline-block;
}
#tags a {
	padding: 2px 4px 2px 0;
}

.tag0 a {
	font-size: 12px;
	color: #004f80;
}
.tag1 a {
	font-size: 16px;
	color: #247ca1;
}
.tag2 a {
	font-size: 18px;
	color: #48aac2;
}
.tag3 a {
	font-size: 20px;
	color: #6cc8f3;
}

/* Pretty and multiline tables */

.prettytable, .multiline {
	border: none;
	border-collapse: collapse;
	border-spacing: 0 0;
	margin: 1em 0;
	empty-cells: show;
	background-color: #ffffff;
}
.prettytable td, .prettytable th, .multiline th, .multiline td {
	border: 1px solid #6cc8f3;
	padding: 0.25em;
	vertical-align: baseline;
}
.prettytable th, .multiline th { /* hightlighting */
	text-align: center;
	background: #f0f0f0;
	color: #004f80;
}
.prettytable tr:not(:first-child) th, .multiline tr:not(:first-child) th {
	text-align: left;
}
.multiline tr:nth-child(even) td {
	background-color: #F8f8f8;
}
.multiline tr:nth-child(odd) td {
	background-color: #ffffff;
}

/* Some Standard classes for tables */

.sortable th {
	text-align: left;
}

.voy-table-odd-even tr:nth-child(even) td {
	background-color: #F8f8f8;
}
.voy-table-odd-even tr:nth-child(odd) td {
	background-color: #ffffff;
}
.voy-table-cell-vAlignTop tr th, .voy-table-cell-vAlignTop tr td {
	vertical-align: top;
}
.voy-table-cell-vAlignMiddle td, .voy-table-cell-vAlignMiddle th {
	vertical-align: middle;
}
.voy-textCentered td, .voy-textCentered th {
	text-align: center;
}
.lastColAlign td:last-child,
.voy-lastColAlign td:last-child {
	vertical-align: middle;
	text-align: center;
}
.voy-table-no-border th {
	border-left: none;
	border-right: none;
}
.voy-table-no-border td {
	border: none;
}

/* Tabellen für Bildergalerien, deprecated */

.galleryTable {
	clear: right;
	float: right;
	margin: 0 0 1em 1em;
	vertical-align: top;
	border-collapse: collapse;
	background: #fff;
	border-spacing: 0 0;
}
.noFloat {
	clear: both;
	float: none;
	margin: 0;
}
.galleryTable td, .galleryTable th {
	padding: 0;
	vertical-align: top;
}

/* Quickbar styles */

.qb { /* is table */
	width: 308px;
	margin: 0 0 0.5em;
	border: 1px solid #6cc8f3;
	border-radius: 5px;
}
.skin-minerva table.qb {
	display: table; /* In der mobilen Ansicht werden Tabelen als block dargestellt! */
	width: 308px !important;
	margin: 0;
}
.skin-minerva  div.qb {
	width: 308px !important;
	margin: 0;
}
.qbRight {
	clear: right;
	float: right;
	margin-left: 1em;
}
.qbLeft {
	clear: left;
	float: left;
	margin-right: 1em;
}
.qbDiv, .qbRightDiv {
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid #6cc8f3;
	border-radius: 5px;
	margin: 0;
}
.qbRightDiv {
	clear: right;
	float: right;
	margin: 0 0 0.5em 1em;
}
.qbDiv .qb, .qbRightDiv .qb {
	border: none;
	margin: 0;
}
.qb td {
	padding: 2px 4px;
	vertical-align: baseline;
}
.qb th {
	padding: 2px 4px;
	vertical-align: baseline;
	text-align: left;
	font-weight: bold;
}
.qb .qbHeader {
	text-align: center;
	color: #004f80;
	padding: 0.3em 0.35em;
	font-size: 1.2em;
	background: #f0f0f0;
	border-top: 1px solid #c0c0c0;
}
.qb tr:first-child .qbHeader {
	border-top: none;
	border-radius: 5px 5px 0 0;
}
.qbImage {
	text-align: center;
	padding: 5px 3px;
	margin-left: auto;
	margin-right: auto;
}
.qbImage div.thumb {
	border-style: none;
	margin-bottom: 0;
	margin-top: 0;
}
.qbImage div.thumbinner {
	border-style: none;
	padding: 0 !important;
	background: transparent;
	margin: 0 auto;
}
.qbImage div.tright, .qbImage .thumb.tright {
	float: none;
	margin: 0;
	padding: 0;
}
.qb .qbImageCell {
	padding: 0;
}
.qbImageCell .qbHeader {
	border-bottom: none;
}
.qbEmpty {
	display: none;
}
.qbItemSmall {
	font-size:80%;
}

.qb-two-images {
	width: 100%;
}
.qb-flag img, #qb_flag img /* <- veraltet */ {
	box-shadow: 2px 2px 6px #a4a4a4;
}

.qb-line td {
	padding: 0 4px;
	height: 1px;
	vertical-align: middle;
}
.qb-line td hr {
	height: 0;
	border-bottom: 1px solid gray;
}
.qb-alt-image {
	clear: right;
	float: right;
	display: none;
}

.breakable {
	font-size: 7%;
	line-height: 0.1%;
	text-decoration: none !important;
	visibility: hidden;
}

@media print {
	#content .qb { border-width: 0.25mm; }
	#content .qb .qbHeader {
		font-size: 1em;
		background: #f0f0f0;
		border-top: 0.25mm solid #c0c0c0;
		border-bottom: 0.25mm solid #c0c0c0;
	}
}

/* Mobile devices: different containers */
@media (max-width: 600px) {
	.qbRightDiv, .qbRight, .qbLeft {
		clear: both;
		float: none;
	}
	.qbRightDiv {
		width: auto !important;
		margin: 0.7em 0;
	}
	.content table.qb, .content div.qb, .qbDiv .qb, .qbRightDiv .qb {
		width: 100% !important;
	}
}

/* Corporate Design */
/* Rahmen und Überschriften */

.container {
	border: 1px solid #6cc8f3;
	border-radius: 5px;
	position: relative;
	padding: 0 0.5em 3px;
}
.container + .container, .voy-box-wrapper + .container {
	margin-top: 0.75em;
}
p.container {
	padding-top: 0.4em;
}
/* removes border and margins of [[Template:MultiColsLayout]] intro paragraph
   in page preview popups */
.mwe-popups .container {
	border: none;
	padding: 0;
	margin: 0;
}
.skin-minerva .container {
	width: auto !important;
}

.var1 { /* blau */
	border-color: #6cc8f3;
}
.var2 { /* grün */
	border-color: #80f000;
}
.var3 { /* rot */
	border-color: #f3706c;
}

.container .header {
	background: #f0f0f0;
	color: #004f80;
	margin: 0.75em -0.4em 0.4em;
	padding: 0.3em 0.4em;
	border-top: 1px solid #c0c0c0;
	font-size: 1.25em;
}
.container .header:first-child {
	margin-top: 0;
	border-top: none;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.var1 > .header, .var1 > .header a {
	color: #004f80;
}
.var2 > .header, .var2 > .header a {
	color: #00804f;
}
.var3 > .header, .var3 > .header a {
	color: #800200;
}
@media print {
	.container { border: 0.25mm solid #6cc8f3; }
	.container .header {
		font-size: 1em;
		border-top: 0.25mm solid #c0c0c0;
		border-bottom: 0.25mm solid #c0c0c0;
	}
}

/* Removes underlines from certain links */

.nounderlines a,
.IPA a:link, .IPA a:visited { /* Vorlage:IPA (phonetisches Alphabet) */
	text-decoration: none !important;
}

/* Zwingt Bild etc. auf Grundlinie */

.baseline * {
	vertical-align: baseline;
}

/* General */
/* Floating not in mobile view */

.float-left {
	clear: left;
	float: left;
	margin: 0 1em 1em 0;
}
.float-right {
	clear: right;
	float: right;
	margin: 0 0 1em 1em;
}
@media (max-width: 720px) {
	.float-left, .float-right {
		clear: both;
		float: none;
		margin: 0 0 1em;
		width: 100% !important;
	}
}

/* Centering block elements */
div.centered, table.centered, ul.centered, .centered,
div.voy-centered, table.voy-centered, ul.voy-centered, .voy-centered {
	clear: both;
	float: none;
	margin: 1em auto;
}
.tablecenter, .voy-tablecenter {
	margin-left: auto;
	margin-right: auto;
}

/* Bilder mit maximal 100 % Breite */

.voy-img-maximum-width img {
	max-width: 100%;
	height: auto;
}

/* Karten- und Datenquellen: Wikivoyage:Karten- und Datenquellen */

.voy-mapsources-map div.thumb {
	margin: 0 auto;
}
.voy-mapsources-map div.thumbinner {
	border: none;
	padding: 0;
}
.voy-mapsources-map .thumbcaption {
	display: none;
}

/* Vorlagenmaster */

h3.tm_group_heading {
	margin-top: 2px !important;
	margin-left: 2px !important;
}

div.tm_group input {
	margin: 0;
}

/* Lists in data cells are always left-aligned */
.wikitable td ul,
.wikitable td ol,
.wikitable td dl {
	/* @noflip */
	text-align: left;
}

/* Prevent line breaks in silly places:
   1) Where desired
   2) Links when we don't want them to
   3) Bold "links" to the page itself
*/
.nowrap,
.nowraplinks a,
.nowraplinks .selflink {
	white-space: nowrap;
}
/* But allow wrapping where desired: */
.wrap,
.wraplinks a {
	white-space: normal;
}

.wdItem:hover {
	background-image: url('//upload.wikimedia.org/wikipedia/commons/f/ff/Wikidata-logo.svg');
	background-size: 15px;
	background-position: right center;
	background-repeat: no-repeat;
}

/* Ausgaben des Moduls Wikidata */
/* Ranking */
.wd-rank-truth { color: blue; }
.wd-rank-preferred { color: green; }
.wd-rank-normal { color: black; }
.wd-rank-deprecated { color: gray; }

/* Wikivoyage-Tools */
#wvDEaddTools-requestDelete-edit-message {
	margin: 0.5em 2em;
	font-size: 1.2em;
	color: red;
}

/* Wikidata-Tools */
/* spezielle Quickbar Elemente für Wikidata individuell formatieren */
.qb .qb-wd-comment td {
	display: none;
	text-align: center;
	font-size: 80%;
	border-bottom: 1px solid #999999;
}

.qb-edit-delete:hover {
	cursor:pointer;
}

#wvDEaddWDTools-deleteQBItemValue {
	margin: 0.5em 2em;
	font-size: 1.2em;
	color: red;
}

/*  Tags im Fließtext für Leser ausblenden */
.wd-tools-message-inline {
	display: none;
}
.wd-tools-message-block {
	display: none;
}

/* Boxes with the same height, z. B. Wikivoyage:Autorenportal */
.voy-justifyContent {   
	display: flex;
	justify-content: space-between;
}

/* Lines */
.voy-line-thin-grey {
	border-top: 1px solid grey; border-bottom: none; height: 0;
}

/* social-media site icons */
.voy-social-media-icon span {
	display: inline-block;
	position: relative;
	top: 2px;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 16px;
	width: 16px;
	height: 16px;
	white-space: nowrap;
	padding-left: 16px;
	box-sizing: border-box;
	overflow: hidden;
	color: transparent;
}
.voy-social-media-facebook-profile span,
.voy-social-media-facebook-page span,
.voy-social-media-facebook-places-id span {
	background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/64px-2021_Facebook_icon.svg.png');
}
.voy-social-media-instagram-username span {
	background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/9/95/Instagram_logo_2022.svg/64px-Instagram_logo_2022.svg.png')
}
.voy-social-media-x-username span {
	background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/c/ce/X_logo_2023.svg/64px-X_logo_2023.svg.png');
	background-position: 0 2px;
}
.voy-social-media-youtube-channel span {
	background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Logoyoutube2011favicon.svg/64px-Logoyoutube2011favicon.svg.png');
	background-position: 0 3px;
}
.voy-social-media-hashtag span {
	background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Twemoji2_23-20e3.svg/240px-Twemoji2_23-20e3.svg.png');
}
.voy-social-media-tiktok span {
	background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Iconoir_tiktok.svg/64px-Iconoir_tiktok.svg.png');
	width: 20px;
	background-size: 20px;
	background-position: left center;
}
.voy-social-media-flickr span {
	background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/4/44/Flickr.svg/64px-Flickr.svg.png');
}
.voy-social-media-icon + .voy-social-media-icon:before {
	content: ' ';
	white-space: normal;
}
span.voy-social-media.voy-social-media-icon a.external {
	background: none;  /* no link symbol on social media links are displayed with symbol */
	padding-right: 0;
}

/* supporting dark mode */
@media ( prefers-color-scheme: dark ) {

	.voy-social-media-x-username span {
		background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/5/55/Logo_X_Corp_"Twitter".svg/512px-Logo_X_Corp_"Twitter".svg.png');
		background-size: 12px;
	}

	.voy-social-media-tiktok span {
		background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Iconoir_tiktok_white.svg/24px-Iconoir_tiktok_white.svg.png');
	}

}

/* </nowiki> */