テンプレート:VCard/styles.css
表示
/*
vCard and Marker styles
Version: 2024-09-20
*/
/*
Styles for Marker and vCard templates
*/
div.vCard {
margin-top: 0.5em;
}
li div.vCard {
margin-top: 0;
}
.listing-outdent {
margin-left: 22px;
text-indent: -22px;
}
li .listing-outdent {
margin-left: 0;
text-indent: -22px;
}
.listing-name {
font-weight: bold;
}
.listing-name-style-station {
background-color: #f4f4f4;
color: #000;
border: 1px solid #ddd;
}
@media screen {
html.skin-theme-clientpref-night .listing-name-style-station {
background-color: #444;
color: #fff;
}
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .listing-name-style-station {
background-color: #444;
color: #fff;
}
}
.listing-name-latin, .listing-comment, .listing-directions, .listing-phone-exception {
font-style: italic;
}
.listing-directions .mw-selflink {
font-weight: normal;
}
.listing-hours, .listing-checkin, .listing-checkout, .listing-price,
.listing-payment, .listing-subtype {
color: #888;
}
.listing-phone-number {
white-space: nowrap;
}
.listing-add-contact {
display: none;
}
.vCard .voy-flag-icon {
position: relative;
top: 2px;
}
/*
Status and listing icons
*/
.listing-icon {
white-space: nowrap;
}
.listing-icon + .listing-icon:before {
content: ' ';
white-space: normal;
}
.listing-icon + .listing-sister-wikidata:before {
content: none;
}
.listing-icon-with-space {
white-space: normal !important;
}
.listing-status-item {
list-style-type: none;
list-style-image: none;
text-indent: -20px;
}
.vcard span, .vcard div.listing-content {
text-indent: 0;
}
.listing-status + .listing-status {
margin-left: 4px;
}
.listing-status, .listing-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;
}
/* .vcard .listing-social-media-youtube span {
top: 0.5px;
} */
/* status icons */
.listing-status-none, .listing-status-stub {
background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Symbol_plain_grey.svg/64px-Symbol_plain_grey.svg.png');
}
.listing-status-outline {
background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Start-icon.svg/64px-Start-icon.svg.png');
}
.listing-status-usable {
background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Symbol_keep_vote.svg/64px-Symbol_keep_vote.svg.png');
}
.listing-status-guide {
background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/9/94/Symbol_support_vote.svg/64px-Symbol_support_vote.svg.png');
}
.listing-status-star, .listing-status-recommendation {
background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Symbol_star_gold.svg/64px-Symbol_star_gold.svg.png');
}
.listing-status-top-sight, .listing-status-top-hotel, .listing-status-top-restaurant {
background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Symbol_star2.svg/64px-Symbol_star2.svg.png');
}
/* Wikimedia sister site icons */
.listing-sister-commons span {
background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Commons-logo.svg/64px-Commons-logo.svg.png');
background-size: auto 16px;
width: 12px;
padding-left: 12px;
}
.listing-sister-wikidata span {
background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Wikidata-logo-without-paddings.svg/64px-Wikidata-logo-without-paddings.svg.png');
background-position: 0 4px;
}
.listing-sister-wikipedia span {
background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Antu_wikipedia.svg/64px-Antu_wikipedia.svg.png');
}
.listing-sister-wikivoyage span {
background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Wikivoyage-Logo-v3-icon.svg/64px-Wikivoyage-Logo-v3-icon.svg.png');
}
/* social-media site icons */
.listing-social-media-facebook span {
background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/64px-2021_Facebook_icon.svg.png');
}
.listing-social-media-flickr span {
background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/4/44/Flickr.svg/64px-Flickr.svg.png');
}
.listing-social-media-instagram span {
background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/9/95/Instagram_logo_2022.svg/64px-Instagram_logo_2022.svg.png');
}
.listing-social-media-rss span, .listing-rss span {
background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/4/43/Feed-icon.svg/64px-Feed-icon.svg.png');
}
.listing-social-media-tiktok span {
background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Iconoir_tiktok.svg/64px-Iconoir_tiktok.svg.png');
}
.listing-social-media-twitter 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;
background-color: #fff; /* black X on transparent background */
}
.listing-social-media-youtube span {
background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Logoyoutube2011favicon.svg/64px-Logoyoutube2011favicon.svg.png');
background-position: 0 3px;
}
/* additional icons */
.listing-url span {
background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/7/70/Applications-internet.svg/64px-Applications-internet.svg.png');
}
.listing-unesco span {
background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/f/fd/WV-Unesco-icon-small.svg/64px-WV-Unesco-icon-small.svg.png');
}
@media screen {
html.skin-theme-clientpref-night .listing-social-media-tiktok span,
html.skin-theme-clientpref-night .listing-social-media-twitter span {
filter: invert(100%);
}
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .listing-social-media-tiktok span,
html.skin-theme-clientpref-os .listing-social-media-twitter span {
filter: invert(100%);
}
}
/* Wikidata icon is shown only for logged-in users. The class voy-user-login in
body tag is set by [[MediaWiki:InitListingTools.js]] script. */
.listing-sister-wikidata a, .listing-icon-with-space {
display: none;
}
body.voy-user-login .listing-sister-wikidata a, body.voy-user-login .listing-icon-with-space {
display: inline;
}
.listing-subtype-icon + .listing-subtype-icon {
margin-left: 2px;
}
.listing-icon .external, .listing-url .external, .listing-rss .external {
color: #000;
background: none; /* unterdrücke Link-Symbol bei sozialen Medien */
padding-right: 0;
}
.listing-content {
margin-top: 0.5em;
}
.listing-content .listing-next-paragraph { /* br-tag formatting */
display: block;
content: "";
margin-top: 0.5em;
}
.listing-next-paragraph + div, .listing-next-paragraph + style + div {
margin-top: 0 !important;
}
/*
Meta data
*/
.listing-metadata {
font-size: 0.8em;
color: #888;
}
.Marker .listing-metadata {
display: none;
}
.listing-metadata-item {
display: inline-block;
white-space: nowrap;
}
.listing-outdated {
display: inline;
white-space: normal;
}
.listing-item-dummy {
display: none;
}
.listing-metadata-item:first-child:before,
.listing-item-dummy + .listing-metadata-item:before {
content: " (";
}
.listing-metadata-item:after {
content: " | ";
}
.listing-metadata-item:last-child:after {
content: ")";
}
.listing-inline .listing-metadata-item:before,
.listing-inline .listing-metadata-item:after {
content: "";
}
.listing-inline .listing-metadata-item {
box-sizing: border-box;
}
/* lastedit is not shown if the listing template is used within a text block.
listing-inline is set in case of vCard parameter show = inline is set. */
.listing-inline .listing-lastedit {
display: none;
}
@media print {
.listing-lastedit:after {
content: ")";
}
.listing-inline .listing-lastedit:after {
content: "";
}
}
.listing-metadata-item button {
display: inline-block;
color: #888;
border: none;
background: transparent;
font-family: sans-serif;
font-size: 1em;
cursor: pointer;
padding: 0;
}
.listing-metadata-item button:hover, .listing-metadata-item button:focus,
.listing-metadata-item button:active {
text-decoration: underline;
}
.listing-inline .listing-metadata-item button {
display: inline;
color: transparent;
}
.listing-edit-button button {
position: relative;
padding-left: 15px;
}
.listing-edit-button button:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 15px;
background-image: url( "//upload.wikimedia.org/wikipedia/commons/thumb/9/9a/OOjs_UI_icon_edit-ltr-gray.svg/48px-OOjs_UI_icon_edit-ltr-gray.svg.png" );
background-repeat: no-repeat;
background-position: 0 25%;
background-size: 12px;
}
.listing-inline .listing-edit-button {
width: 1.5em;
padding-left: 2px;
/* Workaround for overflow: clip */
clip-path: polygon(0 0, 1.5em 0, 1.5em 100%, 0% 100%);
}
.listing-info-button button:before {
content: 'ℹ';
font-size: 130%;
padding-left: 1px;
padding-right: 3px;
font-family: serif;
color: #888;
}
.listing-inline .listing-info-button {
width: 1.5em;
padding-left: 5px;
clip-path: polygon(0 0, 1.5em 0, 1.5em 100%, 0% 100%);
}
@media print {
.listing-info-button, .listing-edit-button {
display: none;
}
}
/*
CSS properties for marker-symbol wrapper
*/
.listing-map {
display: inline-block;
position: relative;
border-radius: 3px;
line-height: 1.15em;
top: -1px;
}
.listing-map a.external:link, .listing-map a.external:visited, .listing-map a.external:hover,
.listing-map a.external:active {
text-decoration: none;
}
.listing-map .mw-kartographer-maplink {
display: inline-block;
min-width: 1.5em;
height: 1.3em;
line-height: 1.3em;
padding: 1px;
border-radius: 3px;
/* for marker-copy */
top: 0;
position: relative;
font-size: 0.85em;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
.listing-map-not-inverse .mw-kartographer-maplink, .mw-kartographer-maplink.listing-map-not-inverse {
color: #fff !important;
}
.listing-map-inverse .mw-kartographer-maplink, .mw-kartographer-maplink.listing-map-inverse {
color: #000 !important;
}
.listing-map-not-inverse.listing-map-is-symbol .mw-kartographer-maplink img {
filter: invert(100%);
}
/*
For media with missing or limited pointer capabilities, i.e. for mobile
devices etc. Secondary devices are considered, too.
See: https://www.w3.org/TR/mediaqueries-4/#any-input
*/
.listing-tooltip-mobile .mw-kartographer-maplink {
min-width: 3em;
}
@media print {
.listing-map .mw-kartographer-maplink {
min-width: 1.5em;
}
}
body.skin-minerva .listing-map .mw-kartographer-maplink,
body.skin-timeless .listing-map .mw-kartographer-maplink {
vertical-align: 10%;
}
.mw-kartographer-maplink img {
vertical-align: -15%;
}
/* [[カテゴリ:テンプレートスタイル]] */