MediaWiki:Gadget-Modal.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* _____________________________________________________________________________
* | |
* | === WARNING: GLOBAL GADGET FILE === |
* | Changes to this page affect many users. |
* | Please discuss changes on the talk page before editing. |
* |_____________________________________________________________________________|
*/
/* The Modal (background) */
.dw-img-modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 20; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.96); /* Black w/ opacity */
}
/* Modal Content (image) */
.dw-img-modal-content {
margin: auto;
display: block;
width: auto;
height: auto;
}
/* Caption of Modal Image */
#dw-img-modal-caption {
margin: auto;
display: block;
width: 80%;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
#dw-img-modal-wrapper {
margin: 0 auto;
}
/* Add Animation */
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.dw-img-modal-content, #dw-img-modal-caption {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#dw-img-modal-caption a:link {
color: #007FFF;
}
#dw-img-modal-caption a:visited {
color: #975BFF;
}
/* The Close Button */
.dw-img-modal-close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.dw-img-modal-close:hover, .dw-img-modal-close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
.dw-img-modal-content {
width: 100%;
}
}
