MediaWiki:WV-Dialog.css

/*
	WV-Dialog styles
	Version: 2021-03-09
*/

.wv-dialog-background {
 position: fixed;
 height: 100%;
 width: 100%;
 top: 0;
 left: 0;
 z-index: 5; /* for Vector skin */
 outline: 0 none;
 overflow: hidden;
 background: rgba(255,255,255,0.5);
 opacity: 1;
}

.wv-dialog {
 position: absolute;
 margin: 0 !important;
 height: auto;
 width: 1200px;
 max-width: calc(100% - 20px);
 z-index: 6;  /* for Vector skin */

 top: 0; /* formally */
 left: 0;

 padding: 0.2em;
 overflow: hidden;
 border: 1px solid #cccccc;
 border-radius: 3px;
 background: #f2f5f7;

 font-family: sans-serif;
 font-size: 0.8em;
}
.wv-dialog-mobile {
}

.wv-dialog-close {  /* header close button */
 float: right;
 width: 16px;
 height: 16px;
 border: 1px solid #a9c8d6;
 padding-bottom: 0.1em;
 margin-top: 0.4em;
 margin-right: 0.4em;
 
 font-weight: bold;
 font-size: 1.5em;
 line-height: 1em;
 vertical-align: middle;
 text-align: center;

 cursor: pointer;
}
.wv-dialog-close:after {
 content: "×";
}
.wv-dialog-close:hover {
 background: linear-gradient(to bottom, #ffffff 0%, #dddddd 90%);
 border: 1px solid #88aadd;
 border-radius: 3px;
}

.wv-dialog-header { /* dialog header */
 background: #a9c8d6;
 border: 1px solid #aed0ea;
 border-radius: 3px;
 padding: 0.9em 1.4em 0.6em;

 color: #222222;
 font-weight: bold;
}

.wv-dialog-body {
 padding: 0;
 overflow: auto;
}

.wv-dialog input, .wv-dialog textarea, .wv-dialog select, .wv-dialog option {
 font-family: sans-serif;
 font-size: 1em;
 background: #ffffff;
}
.wv-dialog input, .wv-dialog textarea, .wv-dialog select {
 border: 1px solid #909090;
}
.wv-dialog input, .wv-dialog textarea {
 padding: 2px 2px 1px;
 box-sizing: border-box;
}
.wv-dialog input:focus, .wv-dialog textarea:focus {
 border: 1px solid #4169E1;
}
.wv-dialog input[type='checkbox'] {
 margin-right: 4px;
}

.wv-dialog-footer {
 border-width: 0;
 border-top: 1px solid #cccccc;
 padding: 0.3em 1.4em 0.5em;
}

.wv-dialog-button-pane {
 float: right;
}

.wv-dialog-button {
 display: inline-block;
 width: auto;
 overflow: visible;
 background-color: #ffffff;
 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 .5em 0;
 padding: 0.4em 1em;

 color: #2779aa;
 line-height: 1.2em;
 vertical-align: middle;
 text-align: center;

 cursor: pointer;
}

.wv-dialog-button:focus {
 outline: none;
 background: linear-gradient(to bottom, #fff 0%, #deefff 90%);
 border: 1px solid #88aadd;
}
.wv-dialog-button::-moz-focus-inner {
 border: 0;
}
.wv-dialog-button:hover {
 background: linear-gradient(to bottom, #fff 0%, #fff 50%);
 border: 1px solid #aaaaaa;
}
.wv-dialog-button:active {
 background: linear-gradient(to bottom, #fff 10%, #ccc 90%);
 border: 1px solid #88aadd;
}

.wv-dialog-button:disabled {
 border: 1px solid #c5c5c5;
 background: #f6f6f6;
 opacity: .35;

 cursor: default !important;
 pointer-events: none;
}

/* -------------------------- Listing info styles ------------------------- */

#wv-listing-info .wv-infoPane {
 margin: 0.6em 0 0.6em 0.5em;
 max-width: 330px;
}
#wv-listing-info .wv-infoPane .external { /* unterdrücke Link-Symbol bei sozialen Medien */
 background: none;
 padding-right: 0;
}
#wv-listing-info h2 {
 padding-top: 0;
 padding-bottom: 0.17em;
 border-bottom: 1px solid #a2a9b1;
 margin-bottom: 0.6em;
 margin-top: 0;
 font-size: 150%;
}
#wv-listing-info .wv-buttonPane {
 padding-left: 1em;
}
#wv-listing-info .wv-dialog-button {
 margin-bottom: 0;
}
#wv-listing-info p, #wv-listing-info dl, #wv-listing-info ul {
 line-height: 150%;
 font-size: 115%;
}
.skin-minerva #wv-listing-info p, .skin-minerva #wv-listing-info dl {
 margin-bottom: 0.5em;
}
.skin-minerva #wv-listing-info ul {
 list-style: square outside;
 padding-left: 1em;
}
#wv-listing-info dl {
 margin-left: 0;
}
#wv-listing-info dd {
 margin-left: 1.6em;
}
#wv-listing-info .wv-Image {
 margin: 0 auto;
 text-align: center;
 height: 225px;
 width: 100%;
 border: 1px solid #c8ccd1;
 overflow: hidden;
}
#wv-listing-info .wv-Image img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
 width: auto\9; /* CSS hack specific to IE 7, 8, & 9 */
}
#wv-listing-info .wv-Image span {
 display: none; /* hide lazy placeholders */
}
#wv-listing-info .wv-container {
 overflow-y: auto;
}
.wv-listinginfo-group1 + .wv-listinginfo-group2 {
 margin-top: 0.7em;
}
.wv-dialog-mobile .wv-listing-booking li + li {
 margin-top: 1em;
}

/* Scrollbar for Chrome, Safari on mobile devices */
.wv-dialog-mobile ::-webkit-scrollbar {
 -webkit-appearance: none;
}
.wv-dialog-mobile ::-webkit-scrollbar:vertical {
 width: 6px;
}
.wv-dialog-mobile ::-webkit-scrollbar:horizontal {
 height: 6px;
}
.wv-dialog-mobile ::-webkit-scrollbar-thumb {
 background-color: rgba(0, 0, 0, .5);
 border-radius: 4px;
 border: 1px solid #ffffff;
}
.wv-dialog-mobile ::-webkit-scrollbar-track {
 border-radius: 4px;  
 background-color: #ffffff; 
}