/*! * __ __ _ ____ _ _ ___ _______ __ * | \/ | / \ / ___| \ | |_ _| ___\ \ / / * | |\/| | / _ \| | _| \| || || |_ \ V / * | | | |/ ___ \ |_| | |\ || || _| | | * |_| |_/_/ \_\____|_| \_|___|_| |_| * * jquery.magnify - v1.6.3 * A jQuery plugin to view images just like in windows * https://github.com/nzbin/magnify#readme * * Copyright (c) 2017 nzbin * Released under the MIT License */ .magnify-modal { position: absolute; z-index: 1090; width: 320px; height: 320px; background-color: #111; background-color: rgba(0, 0, 0, 0.84); box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.32); cursor: default; outline: none; color: #ccc; } .magnify-maximize { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .magnify-toolbar { font-size: 0; } .magnify-header { position: relative; z-index: 2; height: 40px; } .magnify-header .magnify-toolbar { float: right; } [dir='rtl'] .magnify-header .magnify-toolbar { float: left; } .magnify-title { padding: 13px 10px; font-size: 14px; line-height: 1; white-space: nowrap; text-overflow: ellipsis; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; } .magnify-stage { position: absolute; top: 40px; right: 10px; bottom: 40px; left: 10px; z-index: 1; border: 1px solid rgba(255, 255, 255, 0.64); overflow: hidden; } .magnify-stage.stage-ready { text-align: center; font-size: 0; } .magnify-stage.stage-ready::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; overflow: hidden; } .magnify-image { position: absolute; display: inline-block; } .magnify-image.image-ready { position: static; max-width: 100%; max-height: 100%; vertical-align: middle; } .magnify-footer { position: absolute; bottom: 0; z-index: 2; width: 100%; height: 40px; text-align: center; } .magnify-footer .magnify-toolbar { display: inline-block; } .magnify-button { display: inline-block; min-width: 40px; height: 40px; box-sizing: border-box; margin: 0; font-size: 14px; line-height: 1; text-align: center; background: none; border-width: 0; border-radius: 0; color: inherit; cursor: pointer; outline: none; } .magnify-button:hover { color: #fff; } .magnify-button:focus { background-color: rgba(255, 255, 255, 0.08); } .magnify-button svg { display: inline-block; font-size: inherit; width: 1em; height: 1em; overflow: visible; vertical-align: -.125em; } .magnify-button-close:hover { background-color: #ff4545; } .magnify-button-maximize:hover { background-color: #525252; } .magnify-button-minimize:hover { background-color: #525252; } .magnify-resizable-handle { position: absolute; z-index: 10; } .magnify-resizable-handle-e { top: 0; right: -5px; bottom: 0; left: auto; width: 10px; cursor: e-resize; } .magnify-resizable-handle-s { top: auto; right: 0; bottom: -5px; left: 0; height: 10px; cursor: s-resize; } .magnify-resizable-handle-w { top: 0; right: auto; bottom: 0; left: -5px; width: 10px; cursor: w-resize; } .magnify-resizable-handle-n { top: -5px; right: 0; bottom: auto; left: 0; height: 10px; cursor: n-resize; } .magnify-resizable-handle-se { top: auto; right: -5px; bottom: -5px; left: auto; width: 10px; height: 10px; cursor: se-resize; } .magnify-resizable-handle-sw { top: auto; right: auto; bottom: -5px; left: -5px; width: 10px; height: 10px; cursor: sw-resize; } .magnify-resizable-handle-nw { top: -5px; right: auto; bottom: auto; left: -5px; width: 10px; height: 10px; cursor: nw-resize; } .magnify-resizable-handle-ne { top: -5px; right: -5px; bottom: auto; left: auto; width: 10px; height: 10px; cursor: ne-resize; } :-webkit-full-screen { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } :-webkit-full-screen .magnify-header, :-webkit-full-screen .magnify-footer, :-webkit-full-screen .magnify-resizable-handle { display: none; } :-webkit-full-screen .magnify-stage { top: 0; right: 0; bottom: 0; left: 0; border-width: 0; background-color: #000; } :-moz-full-screen { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } :-moz-full-screen .magnify-header, :-moz-full-screen .magnify-footer, :-moz-full-screen .magnify-resizable-handle { display: none; } :-moz-full-screen .magnify-stage { top: 0; right: 0; bottom: 0; left: 0; border-width: 0; background-color: #000; } :-ms-fullscreen { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } :-ms-fullscreen .magnify-header, :-ms-fullscreen .magnify-footer, :-ms-fullscreen .magnify-resizable-handle { display: none; } :-ms-fullscreen .magnify-stage { top: 0; right: 0; bottom: 0; left: 0; border-width: 0; background-color: #000; } :full-screen { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } :full-screen .magnify-header, :full-screen .magnify-footer, :full-screen .magnify-resizable-handle { display: none; } :full-screen .magnify-stage { top: 0; right: 0; bottom: 0; left: 0; border-width: 0; background-color: #000; } :-webkit-full-screen { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } :-ms-fullscreen { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } :fullscreen { top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } :-webkit-full-screen .magnify-header, :-webkit-full-screen .magnify-footer, :-webkit-full-screen .magnify-resizable-handle { display: none; } :-ms-fullscreen .magnify-header, :-ms-fullscreen .magnify-footer, :-ms-fullscreen .magnify-resizable-handle { display: none; } :fullscreen .magnify-header, :fullscreen .magnify-footer, :fullscreen .magnify-resizable-handle { display: none; } :-webkit-full-screen .magnify-stage { top: 0; right: 0; bottom: 0; left: 0; border-width: 0; background-color: #000; } :-ms-fullscreen .magnify-stage { top: 0; right: 0; bottom: 0; left: 0; border-width: 0; background-color: #000; } :fullscreen .magnify-stage { top: 0; right: 0; bottom: 0; left: 0; border-width: 0; background-color: #000; } ::-webkit-backdrop { background-color: #000; } ::backdrop { background-color: #000; } ::-ms-backdrop { background-color: #000; } .is-grab { cursor: move; cursor: -webkit-grab; cursor: grab; } .is-grabbing { cursor: move; cursor: -webkit-grabbing; cursor: grabbing; } .magnify-loader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; text-align: center; background-color: rgba(0, 0, 0, 0.3); color: #333; } .magnify-loader::before { content: ''; display: inline-block; position: relative; width: 36px; height: 36px; box-sizing: border-box; border-width: 5px; border-style: solid; border-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5); border-radius: 100%; vertical-align: middle; -webkit-animation: magnifyLoading 1s infinite linear; animation: magnifyLoading 1s infinite linear; } .magnify-loader::after { content: ''; display: inline-block; width: 0; height: 100%; vertical-align: middle; overflow: hidden; } @-webkit-keyframes magnifyLoading { 0% { transform: rotateZ(0deg) translate3d(0, 0, 0); } 100% { transform: rotateZ(360deg) translate3d(0, 0, 0); } } @keyframes magnifyLoading { 0% { transform: rotateZ(0deg) translate3d(0, 0, 0); } 100% { transform: rotateZ(360deg) translate3d(0, 0, 0); } }