MediaWiki:ModernLightbox.css

/* Modernizing the Lightbox */ header.LightboxHeader > h1 > a, div.user-details.caption > a { color: gray; } .LightboxModal .LightboxHeader .more-info-button, .LightboxModal .LightboxHeader .share-button { background-image: none; border-radius: 0; border-color: white; background-color: transparent; text-transform: uppercase; font-weight: bold; font-size: x-small; padding: 7px 12px; color: white; } a.wikia-button.more-info-button.secondary, a.wikia-button.share-button.secondary { background-image: none; background-color: transparent; } button.wikia-chiclet-button img { background-color: white; } .LightboxModal .user-details .avatar { border: none !important; border-radius: 50% !important; } .LightboxModal .LightboxHeader .user-details { color: #fff; } .LightboxModal .LightboxCarousel .carousel-arrow.disabled, .LightboxModal .LightboxCarousel .carousel-arrow.next, .LightboxModal .LightboxCarousel .carousel-arrow.previous { background-color: transparent; border-radius: 0; border: none; background-image: none; } .LightboxModal .LightboxCarousel .LightboxCarouselContainer li.more-items p { color: black; text-transform: uppercase; font-weight: bold; font-size: 9px; } .LightboxModal .LightboxCarousel .LightboxCarouselContainer li.active { outline: none !important; border-bottom: 2px white solid; } .LightboxModal .LightboxHeader { border-bottom: none !important; box-shadow: none !important; width: 1020px !important; } .LightboxModal .LightboxCarousel { border-top: none !important; box-shadow: none !important; width: 1000px; } .blackout { background-color: #000000 !important; opacity: 0.8 !important; } .LightboxModal .LightboxHeader, .LightboxModal .LightboxCarousel { background-color: rgba(0,0,0,0.75) !important; } .LightboxModal .LightboxCarousel .progress { color: white; } span.posted-in, .LightboxModal .LightboxHeader .user-details { font-weight: bold; text-transform: uppercase; font-size: 10px; } header.LightboxHeader > h1 > a:hover, .LightboxModal .LightboxHeader .user-details > a:hover, span.posted-in-article > a:hover { filter: brightness(115%); text-decoration: none; transition: .3s; } .span.icon.pin.button.secondary { background-color: white; } span.icon.pin.button.secondary:hover { background-color: #dfdfdf; border-color: #dfdfdf; transition: .3s; } .LightboxModal .LightboxCarousel .carousel-arrow.next:after { border-left-color: white !important; } .LightboxModal .LightboxCarousel .carousel-arrow.previous:after { border-right-color: white !important; }   border: none !important; box-shadow: none !important; background-color: black !important; width: 1000px !important; height: 612px !important; position: fixed; left: calc(-50vw + 50%); right: calc(-50vw + 50%); top: calc(-50vh + 50%); bottom: calc(-50vh + 50%); margin-left: auto !important; margin-right: auto !important; margin-top: auto !important; margin-bottom: auto !important; }   display: none; }   outline: none; } header > button.close.wikia-chiclet-button { opacity: 1; } span.icon.pin.button.secondary { border: none; background-color: transparent !important; background-image: none !important; } span.gc-caption { color: white; } span.gc-caption > a { color: gray; } dev.lightbox-beforejs-blackout { display: none !important; } .LightboxModal .wikiaThrobber { background: url('https://images.wikia.nocookie.net/speedit/images/a/a8/Spinner-white.svg') no-repeat center / 64px !important; animation: rotator .5s linear infinite; } .LightboxModal .LightboxHeader .more-info-button, .LightboxModal .LightboxHeader .share-button { background-image: none; border-radius: 0; background-color: transparent; text-transform: uppercase; font-weight: bold; font-size: x-small; padding: 7px 12px; color: white; border: none; text-indent: -9999999999999px; white-space: nowrap; } .LightboxModal .see-full-size-link { float: right; -webkit-mask-image: url(http://justleafy.wikia.com/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-eye.svg); background-color: white; background-image: none; height: 24px !important; padding-left: 8px; mask-image: url(http://justleafy.wikia.com/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-eye.svg); width: 12px !important; text-indent: -999999px; margin-top: 3px; } .LightboxModal .LightboxHeader .more-info-button:before { -webkit-mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-information.svg); background-color: white !important; background-image: none !important; height: 24px !important; padding-left: 8px; margin-top: -4px !important; mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-information.svg); width: 16px !important; } .LightboxModal .LightboxHeader .share-button:before { -webkit-mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-share.svg); background-color: white !important; background-image: none !important; height: 24px !important; padding-left: 8px; margin-left: -16px !important; margin-top: -4px !important; mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-share.svg); width: 16px !important; margin-right: 30px !important; } .LightboxModal .LightboxHeader .close { -webkit-mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-cross.svg); background-color: white; background-image: none; height: 24px !important; margin-top: 4px !important; -webkit-mask-repeat: no-repeat; padding-right: 50px !important; mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-cross.svg); width: 28px !important; } .LightboxModal .icon:after { -webkit-mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-pin-small.svg); background-color: white !important; background-image: none !important; height: 18px !important; mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-pin-small.svg); width: 18px !important; } .LightboxModal .lightbox-arrows span:after { -webkit-mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-menu-control.svg); background-color: white !important; background-image: none; height: 24px !important; mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-menu-control.svg); width: 24px !important; } .LightboxModal .LightboxCarousel .carousel-arrow.next:after { -webkit-mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-menu-control.svg); background-color: white !important; background-image: none; height: 24px !important; mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-menu-control.svg); width: 24px !important; -webkit-mask-repeat: no-repeat; transform: rotate(270deg); margin-top: 6px !important; margin-right: -18px !important; } .LightboxModal .LightboxCarousel .carousel-arrow.previous:after { -webkit-mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-menu-control.svg); background-color: white !important; background-image: none; height: 24px !important; mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-menu-control.svg); width: 24px !important; -webkit-mask-repeat: no-repeat; transform: rotate(90deg); margin-top: 15px !important; margin-left: -20px !important; } .LightboxModal .lightbox-arrows .next:after { transform: rotate(270deg); } .LightboxModal .lightbox-arrows .previous:after { transform: rotate(90deg); } .LightboxModal .more-info .hero, .LightboxModal .share .hero { background: transparent !important; border: none !important; } button.more-info-close.secondary { -webkit-mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-arrow.svg); background-color: white; color: transparent; background-image: none; height: 24px; mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-arrow.svg); width: 24px; } .LightboxModal .more-info .more-info-close:before, .LightboxModal .more-info .share-close:before, .LightboxModal .share .more-info-close:before, .LightboxModal .share .share-close:before { display: none !important; } .LightboxModal .share h1 > a { color: white; margin-top: -48px; margin-left: -200px; display: block; font-weight: bold; } .LightboxModal .share h1 > a:hover { text-decoration: none; } .share-form, .bottom-forms > .more-links > .WikiaForm, color: white; } .WikiaForm .submits > input[type="submit"] { padding: 7px 12px; height: 35px; background-image: none !important; border-radius: 0 !important; text-transform: uppercase; font-size: 10px !important; font-weight: bold; color: currentColor; background-color: transparent; border-color: currentColor; margin-top: -6px; margin-left: 360px; }   margin-top: -44px; margin-left: -55px; } .WikiaForm .input-group.error, .WikiaForm .input-group.success { border-radius: 0; background-color: transparent; } .LightboxModal.more-info-mode > .close, .LightboxModal.share-mode > .close { outline: none; -webkit-mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-cross.svg); background-color: white; background-image: none; height: 24px !important; -webkit-mask-repeat: no-repeat; mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-cross.svg); width: 24px !important; } .WikiaForm .input-group [type='text'], .WikiaForm .input-group [type='url'], .WikiaForm .input-group [type='password'], .WikiaForm .input-group [type='email'], .WikiaForm .input-group textarea { box-shadow: none; background-color: transparent; border: none; border-bottom: 1px solid currentColor; color: white; padding: 8px 8px 8px 0; } .WikiaForm .input-group [type='text']:focus, .WikiaForm .input-group [type='url']:focus, .WikiaForm .input-group [type='password']:focus, .WikiaForm .input-group [type='email']:focus, .WikiaForm .input-group textarea:focus { background-color: transparent; outline: none; } .LightboxModal .share .content .social-links li a.facebook { -webkit-mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-facebook.svg); background-color: white; background-image: none; height: 24px !important; -webkit-mask-repeat: no-repeat; mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-facebook.svg); width: 24px !important; } .LightboxModal .share .content .social-links li a.twitter { -webkit-mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-twitter.svg); background-color: white; background-image: none; height: 24px !important; -webkit-mask-repeat: no-repeat; mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-twitter.svg); width: 24px !important; } .LightboxModal .share .content .social-links li a.reddit { -webkit-mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-reddit.svg); background-color: white; background-image: none; height: 24px !important; -webkit-mask-repeat: no-repeat; mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-reddit.svg); width: 24px !important; } .LightboxModal .share .content .social-links li a.plusone { -webkit-mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-googleplus.svg); background-color: white; background-image: none; height: 24px !important; -webkit-mask-repeat: no-repeat; mask-image: url(/extensions/wikia/DesignSystem/bower_components/design-system/dist/svg/wds-icons-googleplus.svg); width: 24px !important; } .LightboxModal .share .content .social-links li a.stumbleupon, .LightboxModal .share .content .social-links li:nth-child(3):nth-last-child(3) { display: none; } .LightboxModal .share .content .social-links li { background-color: #222; padding: 1em; border-radius: 50%; }
 * 1) LightboxModal > section > div > header > div > span > span > a,
 * 1) LightboxModal {
 * 1) LightboxModal > section > div > header > button.wikia-chiclet-button img {
 * 1) LightboxModal > section > div > header > button.close.wikia-chiclet-button {
 * 1) shareEmailForm.WikiaForm {
 * 1) shareEmailForm > .submits {