Reorganize UI to be...way sexier.
There's just no other adjective for this, it is _super_ nice. There may be refinements later as the designers get things together. Bug: 56499 Change-Id: I200684a19c190444587f520595186e9ae5afbea6
|
@ -1,45 +1,70 @@
|
|||
.mw-lightbox-title-div {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
font-weight: bold;
|
||||
/**
|
||||
* Override multilightbox styles that don't apply to us
|
||||
*/
|
||||
.mlb-main.mlb-fullscreened {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.mlb-image-wrapper {
|
||||
top: 0px;
|
||||
bottom: 64px;
|
||||
}
|
||||
|
||||
.mlb-controls {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.mlb-post-image {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: auto;
|
||||
background-color: #e4e2e1;
|
||||
}
|
||||
|
||||
.mw-mlb-controls-position {
|
||||
position: absolute;
|
||||
top: -999px;
|
||||
left: -999px;
|
||||
}
|
||||
|
||||
.mw-mlb-controls-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mw-mlb-controls {
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
z-index: 1003;
|
||||
}
|
||||
|
||||
body.mobile .mw-mlb-controls,
|
||||
.mw-mlb-controls-position:hover .mw-mlb-controls {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mw-mlb-controls div {
|
||||
position: static;
|
||||
border: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mw-lightbox-title-div,
|
||||
.mw-lightbox-extra-info-div {
|
||||
text-align: left;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
/* FF 3.6+ */
|
||||
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
|
||||
|
||||
/* Chrome, Safari 4+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1)));
|
||||
|
||||
/* Chrome 10+, Safari 5.1+ */
|
||||
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
|
||||
|
||||
/* Opera 11.10+ */
|
||||
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
|
||||
|
||||
/* IE10+ */
|
||||
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
|
||||
|
||||
/* W3C */
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
|
||||
|
||||
/* IE 6-9 */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
|
||||
.mw-lightbox-title-div {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.mw-lightbox-extra-info-div {
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.mw-lightbox-extra-info-div a,
|
||||
|
@ -58,10 +83,6 @@
|
|||
right: 0px;
|
||||
}
|
||||
|
||||
.mlb-fullscreen-div {
|
||||
background-color: rgb( 255, 255, 255 );
|
||||
}
|
||||
|
||||
.mlb-overlay {
|
||||
background-color: rgba( 255, 255, 255, 0.9 );
|
||||
}
|
||||
|
@ -86,30 +107,35 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mw-mlb-title {
|
||||
.mw-mlb-title-para {
|
||||
margin-bottom: 1px;
|
||||
margin-top: 0px;
|
||||
padding: 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mw-mlb-title {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.mw-mlb-author {
|
||||
font-weight: bold;
|
||||
.mw-mlb-image-metadata {
|
||||
width: 100%;
|
||||
background-color: #e4e2e1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mw-mlb-image-metadata {
|
||||
margin-top: 30px;
|
||||
width: 64%;
|
||||
margin: 30px auto;
|
||||
position: relative;
|
||||
.mw-mlb-image-desc-div {
|
||||
width: 60%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mw-mlb-image-links-div {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.mw-mlb-image-desc-div,
|
||||
.mw-mlb-image-links-div {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
height: 100px;
|
||||
height: 150px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
@ -117,10 +143,6 @@
|
|||
color: #6f7073;
|
||||
}
|
||||
|
||||
.mw-mlb-image-desc-div {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mw-mlb-image-links li {
|
||||
list-style: none;
|
||||
font-size: 0.8em;
|
||||
|
@ -161,29 +183,18 @@
|
|||
background-image: none !important;
|
||||
}
|
||||
|
||||
.mw-mlb-credit.empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mw-mlb-license-contain,
|
||||
.mw-mlb-license,
|
||||
.mw-mlb-title-credit {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mw-mlb-license-contain {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.mw-mlb-title-credit {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.mw-mlb-title-contain {
|
||||
padding-left: 10px;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.mw-mlb-license {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.mw-mlb-license.empty {
|
||||
|
@ -220,9 +231,16 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.mw-mlb-title-para,
|
||||
.mw-mlb-credit,
|
||||
.mw-mlb-image-desc,
|
||||
.mw-mlb-mmv-about-links {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.mw-mlb-mmv-about-links {
|
||||
font-size: 0.8em;
|
||||
padding-top: 20px;
|
||||
padding: 20px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
|
@ -238,3 +256,12 @@
|
|||
.mlb-image.empty img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.mw-mlb-lightbox-open {
|
||||
/** Stop the article from scrolling in the background */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.mw-mlb-lightbox-open .mlb-main {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
|
@ -109,6 +109,7 @@
|
|||
// some src attribute to work. Will fix.
|
||||
viewer.lightbox.images[index].src = $thumbContain.find( 'img' ).prop( 'src' );
|
||||
viewer.lightbox.open();
|
||||
$( document.body ).addClass( 'mw-mlb-lightbox-open' );
|
||||
viewer.lightbox.iface.$imageDiv.append( $.createSpinner( {
|
||||
id: 'mw-mlb-loading-spinner',
|
||||
size: 'large'
|
||||
|
@ -120,6 +121,7 @@
|
|||
imageEle.onload = function () {
|
||||
viewer.lightbox.iface.replaceImageWith( imageEle );
|
||||
viewer.lightbox.iface.$imageDiv.removeClass( 'empty' );
|
||||
viewer.updateControls();
|
||||
$.removeSpinner( 'mw-mlb-loading-spinner' );
|
||||
viewer.setImageInfo( fileTitle, imageInfo );
|
||||
};
|
||||
|
@ -135,9 +137,13 @@
|
|||
this.lightbox = new MultiLightbox( urls );
|
||||
}
|
||||
|
||||
lightboxHooks.register( 'closeInterface', function () {
|
||||
this.$mwControls.css( { top: '-999px', left: '-999px' } );
|
||||
$( document.body ).removeClass( 'mw-mlb-lightbox-open' );
|
||||
} );
|
||||
|
||||
lightboxHooks.register( 'imageResize', function () {
|
||||
var api = new mw.Api(),
|
||||
ratio = this.isFullScreen ? 0.9 : 0.5,
|
||||
density = $.devicePixelRatio(),
|
||||
filename = viewer.currentImageFilename,
|
||||
ui = this;
|
||||
|
@ -148,8 +154,8 @@
|
|||
titles: filename,
|
||||
prop: 'imageinfo',
|
||||
iiprop: 'url',
|
||||
iiurlwidth: Math.floor( density * ratio * $( window ).width() * 1.1 ),
|
||||
iiurlheight: Math.floor( density * ratio * $( window ).height() * 1.1 )
|
||||
iiurlwidth: Math.floor( density * this.$imageWrapper.width() ),
|
||||
iiurlheight: Math.floor( density * this.$imageWrapper.height() )
|
||||
} ).done( function ( data ) {
|
||||
var imageInfo, innerInfo,
|
||||
image = new Image();
|
||||
|
@ -163,6 +169,7 @@
|
|||
|
||||
image.onload = function () {
|
||||
ui.replaceImageWith( image );
|
||||
viewer.updateControls();
|
||||
};
|
||||
|
||||
image.src = innerInfo.thumburl || innerInfo.url;
|
||||
|
@ -222,7 +229,10 @@
|
|||
MMVP.initializeInterface = function ( ui ) {
|
||||
this.ui = ui;
|
||||
|
||||
this.ui.$postDiv.css( 'top', ( $( window ).height() - 64 ) + 'px' );
|
||||
|
||||
this.initializeHeader();
|
||||
this.initializeButtons();
|
||||
this.initializeImage();
|
||||
this.initializeImageMetadata();
|
||||
this.initializeAboutLinks();
|
||||
|
@ -461,9 +471,13 @@
|
|||
};
|
||||
|
||||
MMVP.initializeHeader = function () {
|
||||
this.ui.$closeButton.detach();
|
||||
this.ui.$fullscreenButton.detach();
|
||||
|
||||
this.ui.$titleDiv = $( '<div>' )
|
||||
.addClass( 'mw-mlb-title-contain' );
|
||||
|
||||
this.ui.$postDiv.append( this.ui.$controlBar.detach() );
|
||||
this.ui.$controlBar.append( this.ui.$titleDiv );
|
||||
|
||||
this.initializeTitleAndCredit();
|
||||
|
@ -481,10 +495,14 @@
|
|||
};
|
||||
|
||||
MMVP.initializeTitle = function () {
|
||||
this.ui.$title = $( '<p>' )
|
||||
this.ui.$title = $( '<span>' )
|
||||
.addClass( 'mw-mlb-title' );
|
||||
|
||||
this.ui.$titleAndCredit.append( this.ui.$title );
|
||||
this.ui.$titlePara = $( '<p>' )
|
||||
.addClass( 'mw-mlb-title-para' )
|
||||
.append( this.ui.$title );
|
||||
|
||||
this.ui.$titleAndCredit.append( this.ui.$titlePara );
|
||||
};
|
||||
|
||||
MMVP.initializeCredit = function () {
|
||||
|
@ -514,13 +532,90 @@
|
|||
.addClass( 'empty' )
|
||||
.prop( 'href', '#' );
|
||||
|
||||
this.ui.$licensePara = $( '<p>' )
|
||||
.addClass( 'mw-mlb-license-contain' )
|
||||
.append( this.ui.$license );
|
||||
|
||||
this.ui.$titleDiv.append( this.ui.$licensePara );
|
||||
this.ui.$titlePara.append( this.ui.$license );
|
||||
};
|
||||
|
||||
MMVP.initializeButtons = function () {
|
||||
this.ui.$mwControls = $( '<div>' )
|
||||
.addClass( 'mw-mlb-controls' )
|
||||
// Note we aren't adding the fullscreen button here.
|
||||
// Fullscreen causes some funky issues with UI redraws,
|
||||
// and we aren't sure why, but it's not really necessary
|
||||
// with the new interface anyway - it's basically fullscreen
|
||||
// already!
|
||||
.append(
|
||||
this.ui.$closeButton
|
||||
)
|
||||
.appendTo( this.ui.$main );
|
||||
};
|
||||
|
||||
MMVP.updateControls = function () {
|
||||
var isOnButton = false,
|
||||
isOnImage = false,
|
||||
ui = this.ui,
|
||||
pos = ui.$image.offset();
|
||||
|
||||
function fadeIn() {
|
||||
isOnImage = true;
|
||||
ui.$mwControls.fadeIn( 100 );
|
||||
ui.$image.one( 'click', fadeOut );
|
||||
}
|
||||
|
||||
function fadeOut() {
|
||||
ui.$mwControls.fadeOut( 100 );
|
||||
ui.$image.one( 'click', fadeIn );
|
||||
}
|
||||
|
||||
function fadeOutDelayed() {
|
||||
isOnImage = false;
|
||||
setTimeout( function () {
|
||||
if ( !isOnImage && !isOnButton ) {
|
||||
fadeOut();
|
||||
}
|
||||
}, 500 );
|
||||
}
|
||||
|
||||
function detectButton() {
|
||||
isOnButton = true;
|
||||
}
|
||||
|
||||
function detectLeaveButton() {
|
||||
isOnButton = false;
|
||||
setTimeout( function () {
|
||||
if ( !isOnImage && !isOnButton ) {
|
||||
fadeOut();
|
||||
}
|
||||
}, 500 );
|
||||
}
|
||||
|
||||
pos.top = ( ui.$imageWrapper.height() - ui.$image.height() ) / 2;
|
||||
pos.left += ui.$image.width() - ui.$closeButton.width();
|
||||
|
||||
pos.top += 'px';
|
||||
pos.left += 'px';
|
||||
|
||||
ui.$mwControls
|
||||
.css( pos )
|
||||
.appendTo( ui.$main )
|
||||
.fadeIn( 100 )
|
||||
.delay( 500 )
|
||||
.fadeOut( 100 );
|
||||
|
||||
ui.$postDiv.css( 'top', ui.$imageWrapper.height() );
|
||||
|
||||
ui.$image
|
||||
.off( 'mouseenter', fadeIn )
|
||||
.off( 'mouseleave', fadeOutDelayed )
|
||||
.one( 'click', fadeIn )
|
||||
.on( 'mouseenter', fadeIn )
|
||||
.on( 'mouseleave', fadeOutDelayed );
|
||||
|
||||
ui.$closeButton.add( ui.$fullscreenButton )
|
||||
.off( 'mouseenter', detectButton )
|
||||
.off( 'mouseleave', detectLeaveButton )
|
||||
.on( 'mouseenter', detectButton )
|
||||
.on( 'mouseleave', detectLeaveButton );
|
||||
};
|
||||
|
||||
MMVP.registerLogging = function () {
|
||||
var viewer = this;
|
||||
|
@ -845,7 +940,6 @@
|
|||
|
||||
var imageInfo,
|
||||
filename = fileTitle.getPrefixedText(),
|
||||
ratio = this.lightbox.iface.isFullScreen ? 0.9 : 0.5,
|
||||
density = $.devicePixelRatio(),
|
||||
apiArgs = {
|
||||
action: 'query',
|
||||
|
@ -853,8 +947,8 @@
|
|||
titles: filename,
|
||||
prop: 'imageinfo',
|
||||
iiprop: iiprops.join( '|' ),
|
||||
iiurlwidth: Math.floor( density * ratio * $( window ).width() * 1.1 ),
|
||||
iiurlheight: Math.floor( density * ratio * $( window ).height() * 1.1 ),
|
||||
iiurlwidth: Math.floor( density * this.lightbox.iface.$imageWrapper.width() ),
|
||||
iiurlheight: Math.floor( density * this.lightbox.iface.$imageWrapper.height() ),
|
||||
// Short-circuit, don't fallback, to save some tiny amount of time
|
||||
iiextmetadatalanguage: mw.config.get( 'wgUserLanguage', false ) || mw.config.get( 'wgContentLanguage', 'en' )
|
||||
},
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="5.5 -3.5 64 64"><circle fill="#FFFFFF" stroke="#939598" cx="37.785" cy="28.501" r="28.836"/><path d="M37.441-3.5c8.951,0,16.572,3.125,22.857,9.372c3.008,3.009,5.295,6.448,6.857,10.314c1.561,3.867,2.344,7.971,2.344,12.314c0,4.381-0.773,8.486-2.314,12.313c-1.543,3.828-3.82,7.21-6.828,10.143c-3.123,3.085-6.666,5.448-10.629,7.086c-3.961,1.638-8.057,2.457-12.285,2.457s-8.276-0.808-12.143-2.429c-3.866-1.618-7.333-3.961-10.4-7.027c-3.067-3.066-5.4-6.524-7-10.372S5.5,32.767,5.5,28.5c0-4.229,0.809-8.295,2.428-12.2c1.619-3.905,3.972-7.4,7.057-10.486C21.08-0.394,28.565-3.5,37.441-3.5z M37.557,2.272c-7.314,0-13.467,2.553-18.458,7.657c-2.515,2.553-4.448,5.419-5.8,8.6c-1.354,3.181-2.029,6.505-2.029,9.972c0,3.429,0.675,6.734,2.029,9.913c1.353,3.183,3.285,6.021,5.8,8.516c2.514,2.496,5.351,4.399,8.515,5.715c3.161,1.314,6.476,1.971,9.943,1.971c3.428,0,6.75-0.665,9.973-1.999c3.219-1.335,6.121-3.257,8.713-5.771c4.99-4.876,7.484-10.99,7.484-18.344c0-3.543-0.648-6.895-1.943-10.057c-1.293-3.162-3.18-5.98-5.654-8.458C50.984,4.844,44.795,2.272,37.557,2.272z M37.156,23.187l-4.287,2.229c-0.458-0.951-1.019-1.619-1.685-2c-0.667-0.38-1.286-0.571-1.858-0.571c-2.856,0-4.286,1.885-4.286,5.657c0,1.714,0.362,3.084,1.085,4.113c0.724,1.029,1.791,1.544,3.201,1.544c1.867,0,3.181-0.915,3.944-2.743l3.942,2c-0.838,1.563-2,2.791-3.486,3.686c-1.484,0.896-3.123,1.343-4.914,1.343c-2.857,0-5.163-0.875-6.915-2.629c-1.752-1.752-2.628-4.19-2.628-7.313c0-3.048,0.886-5.466,2.657-7.257c1.771-1.79,4.009-2.686,6.715-2.686C32.604,18.558,35.441,20.101,37.156,23.187z M55.613,23.187l-4.229,2.229c-0.457-0.951-1.02-1.619-1.686-2c-0.668-0.38-1.307-0.571-1.914-0.571c-2.857,0-4.287,1.885-4.287,5.657c0,1.714,0.363,3.084,1.086,4.113c0.723,1.029,1.789,1.544,3.201,1.544c1.865,0,3.18-0.915,3.941-2.743l4,2c-0.875,1.563-2.057,2.791-3.541,3.686c-1.486,0.896-3.105,1.343-4.857,1.343c-2.896,0-5.209-0.875-6.941-2.629c-1.736-1.752-2.602-4.19-2.602-7.313c0-3.048,0.885-5.466,2.658-7.257c1.77-1.79,4.008-2.686,6.713-2.686C51.117,18.558,53.938,20.101,55.613,23.187z" fill="#939598"/></svg>
|
||||
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="5.5 -3.5 64 64"><circle fill="none" stroke="#939598" cx="37.785" cy="28.501" r="28.836"/><path d="M37.441-3.5c8.951,0,16.572,3.125,22.857,9.372c3.008,3.009,5.295,6.448,6.857,10.314c1.561,3.867,2.344,7.971,2.344,12.314c0,4.381-0.773,8.486-2.314,12.313c-1.543,3.828-3.82,7.21-6.828,10.143c-3.123,3.085-6.666,5.448-10.629,7.086c-3.961,1.638-8.057,2.457-12.285,2.457s-8.276-0.808-12.143-2.429c-3.866-1.618-7.333-3.961-10.4-7.027c-3.067-3.066-5.4-6.524-7-10.372S5.5,32.767,5.5,28.5c0-4.229,0.809-8.295,2.428-12.2c1.619-3.905,3.972-7.4,7.057-10.486C21.08-0.394,28.565-3.5,37.441-3.5z M37.557,2.272c-7.314,0-13.467,2.553-18.458,7.657c-2.515,2.553-4.448,5.419-5.8,8.6c-1.354,3.181-2.029,6.505-2.029,9.972c0,3.429,0.675,6.734,2.029,9.913c1.353,3.183,3.285,6.021,5.8,8.516c2.514,2.496,5.351,4.399,8.515,5.715c3.161,1.314,6.476,1.971,9.943,1.971c3.428,0,6.75-0.665,9.973-1.999c3.219-1.335,6.121-3.257,8.713-5.771c4.99-4.876,7.484-10.99,7.484-18.344c0-3.543-0.648-6.895-1.943-10.057c-1.293-3.162-3.18-5.98-5.654-8.458C50.984,4.844,44.795,2.272,37.557,2.272z M37.156,23.187l-4.287,2.229c-0.458-0.951-1.019-1.619-1.685-2c-0.667-0.38-1.286-0.571-1.858-0.571c-2.856,0-4.286,1.885-4.286,5.657c0,1.714,0.362,3.084,1.085,4.113c0.724,1.029,1.791,1.544,3.201,1.544c1.867,0,3.181-0.915,3.944-2.743l3.942,2c-0.838,1.563-2,2.791-3.486,3.686c-1.484,0.896-3.123,1.343-4.914,1.343c-2.857,0-5.163-0.875-6.915-2.629c-1.752-1.752-2.628-4.19-2.628-7.313c0-3.048,0.886-5.466,2.657-7.257c1.771-1.79,4.009-2.686,6.715-2.686C32.604,18.558,35.441,20.101,37.156,23.187z M55.613,23.187l-4.229,2.229c-0.457-0.951-1.02-1.619-1.686-2c-0.668-0.38-1.307-0.571-1.914-0.571c-2.857,0-4.287,1.885-4.287,5.657c0,1.714,0.363,3.084,1.086,4.113c0.723,1.029,1.789,1.544,3.201,1.544c1.865,0,3.18-0.915,3.941-2.743l4,2c-0.875,1.563-2.057,2.791-3.541,3.686c-1.486,0.896-3.105,1.343-4.857,1.343c-2.896,0-5.209-0.875-6.941-2.629c-1.736-1.752-2.602-4.19-2.602-7.313c0-3.048,0.885-5.466,2.658-7.257c1.77-1.79,4.008-2.686,6.713-2.686C51.117,18.558,53.938,20.101,55.613,23.187z" fill="#939598"/></svg>
|
||||
|
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
@ -1 +1,195 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px"><path style="fill:none;stroke:#000000;stroke-width:4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 8,24 24,8" /><path style="fill:none;stroke:#000000;stroke-width:4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 8,8 24,24" /></svg>
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
width="34.265625"
|
||||
height="34.21875"
|
||||
viewBox="0 0 34.265625 34.21875"
|
||||
enable-background="new 0 0 1024 768"
|
||||
xml:space="preserve"
|
||||
inkscape:version="0.48.2 r9819"
|
||||
sodipodi:docname="close.svg"><metadata
|
||||
id="metadata15"><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs13"><filter
|
||||
id="filter3827"
|
||||
inkscape:label="Glow"
|
||||
inkscape:menu="Shadows and Glows"
|
||||
inkscape:menu-tooltip="Glow of object's own color at the edges"
|
||||
color-interpolation-filters="sRGB"><feGaussianBlur
|
||||
id="feGaussianBlur3829"
|
||||
stdDeviation="5"
|
||||
result="result91" /><feComposite
|
||||
id="feComposite3831"
|
||||
in2="result91"
|
||||
in="SourceGraphic"
|
||||
operator="over" /></filter><filter
|
||||
id="filter4246"
|
||||
inkscape:label="Drop shadow"
|
||||
width="1.5"
|
||||
height="1.5"
|
||||
x="-0.25"
|
||||
y="-0.25"
|
||||
color-interpolation-filters="sRGB"><feGaussianBlur
|
||||
id="feGaussianBlur4248"
|
||||
in="SourceAlpha"
|
||||
stdDeviation="1"
|
||||
result="blur" /><feColorMatrix
|
||||
id="feColorMatrix4250"
|
||||
result="bluralpha"
|
||||
type="matrix"
|
||||
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0 " /><feOffset
|
||||
id="feOffset4252"
|
||||
in="bluralpha"
|
||||
dx="-2.41474e-15"
|
||||
dy="-2.41474e-15"
|
||||
result="offsetBlur" /><feMerge
|
||||
id="feMerge4254"><feMergeNode
|
||||
id="feMergeNode4256"
|
||||
in="offsetBlur" /><feMergeNode
|
||||
id="feMergeNode4258"
|
||||
in="SourceGraphic" /></feMerge></filter><filter
|
||||
id="filter4260"
|
||||
inkscape:label="Drop shadow"
|
||||
width="1.5"
|
||||
height="1.5"
|
||||
x="-0.25"
|
||||
y="-0.25"
|
||||
color-interpolation-filters="sRGB"><feGaussianBlur
|
||||
id="feGaussianBlur4262"
|
||||
in="SourceAlpha"
|
||||
stdDeviation="1"
|
||||
result="blur" /><feColorMatrix
|
||||
id="feColorMatrix4264"
|
||||
result="bluralpha"
|
||||
type="matrix"
|
||||
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0 " /><feOffset
|
||||
id="feOffset4266"
|
||||
in="bluralpha"
|
||||
dx="-2.41474e-15"
|
||||
dy="-2.41474e-15"
|
||||
result="offsetBlur" /><feMerge
|
||||
id="feMerge4268"><feMergeNode
|
||||
id="feMergeNode4270"
|
||||
in="offsetBlur" /><feMergeNode
|
||||
id="feMergeNode4272"
|
||||
in="SourceGraphic" /></feMerge></filter><filter
|
||||
id="filter4285"
|
||||
inkscape:label="Drop shadow"
|
||||
width="1.5"
|
||||
height="1.5"
|
||||
x="-0.25"
|
||||
y="-0.25"
|
||||
color-interpolation-filters="sRGB"><feGaussianBlur
|
||||
id="feGaussianBlur4287"
|
||||
in="SourceAlpha"
|
||||
stdDeviation="1"
|
||||
result="blur" /><feColorMatrix
|
||||
id="feColorMatrix4289"
|
||||
result="bluralpha"
|
||||
type="matrix"
|
||||
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0 " /><feOffset
|
||||
id="feOffset4291"
|
||||
in="bluralpha"
|
||||
dx="-2.41474e-15"
|
||||
dy="-2.41474e-15"
|
||||
result="offsetBlur" /><feMerge
|
||||
id="feMerge4293"><feMergeNode
|
||||
id="feMergeNode4295"
|
||||
in="offsetBlur" /><feMergeNode
|
||||
id="feMergeNode4297"
|
||||
in="SourceGraphic" /></feMerge></filter><filter
|
||||
id="filter4299"
|
||||
inkscape:label="Drop shadow"
|
||||
width="1.5"
|
||||
height="1.5"
|
||||
x="-0.25"
|
||||
y="-0.25"
|
||||
color-interpolation-filters="sRGB"><feGaussianBlur
|
||||
id="feGaussianBlur4301"
|
||||
in="SourceAlpha"
|
||||
stdDeviation="1"
|
||||
result="blur" /><feColorMatrix
|
||||
id="feColorMatrix4303"
|
||||
result="bluralpha"
|
||||
type="matrix"
|
||||
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0 " /><feOffset
|
||||
id="feOffset4305"
|
||||
in="bluralpha"
|
||||
dx="-2.41474e-15"
|
||||
dy="-2.41474e-15"
|
||||
result="offsetBlur" /><feMerge
|
||||
id="feMerge4307"><feMergeNode
|
||||
id="feMergeNode4309"
|
||||
in="offsetBlur" /><feMergeNode
|
||||
id="feMergeNode4311"
|
||||
in="SourceGraphic" /></feMerge></filter><filter
|
||||
id="filter4313"
|
||||
inkscape:label="Drop shadow"
|
||||
width="1.5"
|
||||
height="1.5"
|
||||
x="-0.25"
|
||||
y="-0.25"
|
||||
color-interpolation-filters="sRGB"><feGaussianBlur
|
||||
id="feGaussianBlur4315"
|
||||
in="SourceAlpha"
|
||||
stdDeviation="1"
|
||||
result="blur" /><feColorMatrix
|
||||
id="feColorMatrix4317"
|
||||
result="bluralpha"
|
||||
type="matrix"
|
||||
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0 " /><feOffset
|
||||
id="feOffset4319"
|
||||
in="bluralpha"
|
||||
dx="-2.41474e-15"
|
||||
dy="-2.41474e-15"
|
||||
result="offsetBlur" /><feMerge
|
||||
id="feMerge4321"><feMergeNode
|
||||
id="feMergeNode4323"
|
||||
in="offsetBlur" /><feMergeNode
|
||||
id="feMergeNode4325"
|
||||
in="SourceGraphic" /></feMerge></filter></defs><sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1241"
|
||||
inkscape:window-height="702"
|
||||
id="namedview11"
|
||||
showgrid="false"
|
||||
inkscape:zoom="1.2698217"
|
||||
inkscape:cx="215.48194"
|
||||
inkscape:cy="-37.36922"
|
||||
inkscape:window-x="15"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="Layer_1"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0" />
|
||||
<path
|
||||
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#999999;stroke-width:0.25;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter4313);enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans"
|
||||
d="m 9.1796875,5.890625 -3.28125,3.28125 7.9375005,7.9375 -7.9375005,7.9375 3.28125,3.28125 7.9687495,-7.9375 7.9375,7.9375 3.28125,-3.28125 -7.9375,-7.9375 7.9375,-7.9375 -3.28125,-3.28125 -7.9375,7.9375 -7.9687495,-7.9375 z"
|
||||
id="line3"
|
||||
inkscape:connector-curvature="0" />
|
||||
|
||||
|
||||
|
||||
</svg>
|
Before Width: | Height: | Size: 519 B After Width: | Height: | Size: 6.7 KiB |
|
@ -1 +1,199 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px"><path style="fill:none;stroke:#000000;stroke-width:3px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 14,18 8,24" /><path style="fill:none;stroke:#000000;stroke-width:3px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M 18,14 24,8" /><path style="fill:none;stroke:#000000;stroke-width:3px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:1" d="M 10,18 14,18" /><path style="fill:none;stroke:#000000;stroke-width:3px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:1" d="M 14,22 14,18" /><path style="fill:none;stroke:#000000;stroke-width:3px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:1" d="M 18,10 18,14" /><path style="fill:none;stroke:#000000;stroke-width:3px;stroke-linecap:square;stroke-linejoin:miter;stroke-opacity:1" d="M 22,14 18,14" /></svg>
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
width="29.015625"
|
||||
height="29.015625"
|
||||
viewBox="0 0 29.015625 29.015625"
|
||||
enable-background="new 0 0 1024 768"
|
||||
xml:space="preserve"
|
||||
inkscape:version="0.48.2 r9819"
|
||||
sodipodi:docname="expand.svg"><metadata
|
||||
id="metadata15"><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs13"><filter
|
||||
id="filter3827"
|
||||
inkscape:label="Glow"
|
||||
inkscape:menu="Shadows and Glows"
|
||||
inkscape:menu-tooltip="Glow of object's own color at the edges"
|
||||
color-interpolation-filters="sRGB"><feGaussianBlur
|
||||
id="feGaussianBlur3829"
|
||||
stdDeviation="5"
|
||||
result="result91" /><feComposite
|
||||
id="feComposite3831"
|
||||
in2="result91"
|
||||
in="SourceGraphic"
|
||||
operator="over" /></filter><filter
|
||||
id="filter4246"
|
||||
inkscape:label="Drop shadow"
|
||||
width="1.5"
|
||||
height="1.5"
|
||||
x="-0.25"
|
||||
y="-0.25"
|
||||
color-interpolation-filters="sRGB"><feGaussianBlur
|
||||
id="feGaussianBlur4248"
|
||||
in="SourceAlpha"
|
||||
stdDeviation="1"
|
||||
result="blur" /><feColorMatrix
|
||||
id="feColorMatrix4250"
|
||||
result="bluralpha"
|
||||
type="matrix"
|
||||
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0 " /><feOffset
|
||||
id="feOffset4252"
|
||||
in="bluralpha"
|
||||
dx="-2.41474e-15"
|
||||
dy="-2.41474e-15"
|
||||
result="offsetBlur" /><feMerge
|
||||
id="feMerge4254"><feMergeNode
|
||||
id="feMergeNode4256"
|
||||
in="offsetBlur" /><feMergeNode
|
||||
id="feMergeNode4258"
|
||||
in="SourceGraphic" /></feMerge></filter><filter
|
||||
id="filter4260"
|
||||
inkscape:label="Drop shadow"
|
||||
width="1.5"
|
||||
height="1.5"
|
||||
x="-0.25"
|
||||
y="-0.25"
|
||||
color-interpolation-filters="sRGB"><feGaussianBlur
|
||||
id="feGaussianBlur4262"
|
||||
in="SourceAlpha"
|
||||
stdDeviation="1"
|
||||
result="blur" /><feColorMatrix
|
||||
id="feColorMatrix4264"
|
||||
result="bluralpha"
|
||||
type="matrix"
|
||||
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0 " /><feOffset
|
||||
id="feOffset4266"
|
||||
in="bluralpha"
|
||||
dx="-2.41474e-15"
|
||||
dy="-2.41474e-15"
|
||||
result="offsetBlur" /><feMerge
|
||||
id="feMerge4268"><feMergeNode
|
||||
id="feMergeNode4270"
|
||||
in="offsetBlur" /><feMergeNode
|
||||
id="feMergeNode4272"
|
||||
in="SourceGraphic" /></feMerge></filter><filter
|
||||
id="filter4285"
|
||||
inkscape:label="Drop shadow"
|
||||
width="1.5"
|
||||
height="1.5"
|
||||
x="-0.25"
|
||||
y="-0.25"
|
||||
color-interpolation-filters="sRGB"><feGaussianBlur
|
||||
id="feGaussianBlur4287"
|
||||
in="SourceAlpha"
|
||||
stdDeviation="1"
|
||||
result="blur" /><feColorMatrix
|
||||
id="feColorMatrix4289"
|
||||
result="bluralpha"
|
||||
type="matrix"
|
||||
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0 " /><feOffset
|
||||
id="feOffset4291"
|
||||
in="bluralpha"
|
||||
dx="-2.41474e-15"
|
||||
dy="-2.41474e-15"
|
||||
result="offsetBlur" /><feMerge
|
||||
id="feMerge4293"><feMergeNode
|
||||
id="feMergeNode4295"
|
||||
in="offsetBlur" /><feMergeNode
|
||||
id="feMergeNode4297"
|
||||
in="SourceGraphic" /></feMerge></filter><filter
|
||||
id="filter4299"
|
||||
inkscape:label="Drop shadow"
|
||||
width="1.5"
|
||||
height="1.5"
|
||||
x="-0.25"
|
||||
y="-0.25"
|
||||
color-interpolation-filters="sRGB"><feGaussianBlur
|
||||
id="feGaussianBlur4301"
|
||||
in="SourceAlpha"
|
||||
stdDeviation="1"
|
||||
result="blur" /><feColorMatrix
|
||||
id="feColorMatrix4303"
|
||||
result="bluralpha"
|
||||
type="matrix"
|
||||
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0 " /><feOffset
|
||||
id="feOffset4305"
|
||||
in="bluralpha"
|
||||
dx="-2.41474e-15"
|
||||
dy="-2.41474e-15"
|
||||
result="offsetBlur" /><feMerge
|
||||
id="feMerge4307"><feMergeNode
|
||||
id="feMergeNode4309"
|
||||
in="offsetBlur" /><feMergeNode
|
||||
id="feMergeNode4311"
|
||||
in="SourceGraphic" /></feMerge></filter><filter
|
||||
id="filter4313"
|
||||
inkscape:label="Drop shadow"
|
||||
width="1.5"
|
||||
height="1.5"
|
||||
x="-0.25"
|
||||
y="-0.25"
|
||||
color-interpolation-filters="sRGB"><feGaussianBlur
|
||||
id="feGaussianBlur4315"
|
||||
in="SourceAlpha"
|
||||
stdDeviation="1"
|
||||
result="blur" /><feColorMatrix
|
||||
id="feColorMatrix4317"
|
||||
result="bluralpha"
|
||||
type="matrix"
|
||||
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0 " /><feOffset
|
||||
id="feOffset4319"
|
||||
in="bluralpha"
|
||||
dx="-2.41474e-15"
|
||||
dy="-2.41474e-15"
|
||||
result="offsetBlur" /><feMerge
|
||||
id="feMerge4321"><feMergeNode
|
||||
id="feMergeNode4323"
|
||||
in="offsetBlur" /><feMergeNode
|
||||
id="feMergeNode4325"
|
||||
in="SourceGraphic" /></feMerge></filter></defs><sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1241"
|
||||
inkscape:window-height="702"
|
||||
id="namedview11"
|
||||
showgrid="false"
|
||||
inkscape:zoom="1.2698217"
|
||||
inkscape:cx="93.700687"
|
||||
inkscape:cy="-40.611408"
|
||||
inkscape:window-x="15"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="Layer_1"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0" />
|
||||
|
||||
|
||||
<polygon
|
||||
points="949.396,377.213 954.047,372.563 957.032,375.549 952.383,380.199 956.387,380.199 956.381,383.461 946.135,383.459 946.135,373.279 949.398,373.223 "
|
||||
id="polygon7"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#999999;stroke-width:0.25;stroke-opacity:1;filter:url(#filter4299)"
|
||||
transform="translate(-931.00781,-369.57031)" />
|
||||
<polygon
|
||||
points="944.896,384.697 944.898,395.137 941.639,395.143 941.636,390.945 936.986,395.596 934,392.609 938.65,387.959 934.66,387.959 934.716,384.697 "
|
||||
id="polygon9"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#999999;stroke-width:0.25;stroke-opacity:1;filter:url(#filter4285)"
|
||||
transform="translate(-931.00781,-369.57031)" />
|
||||
</svg>
|
Before Width: | Height: | Size: 971 B After Width: | Height: | Size: 6.5 KiB |
|
@ -1,18 +1,3 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="80px" height="80px" viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
|
||||
<g>
|
||||
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="326" y1="-301.0742" x2="326" y2="-329.7763" gradientTransform="matrix(1 0 0 -1 -286 -294)">
|
||||
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.95"/>
|
||||
<stop offset="0.7874" style="stop-color:#FFFFFF"/>
|
||||
</linearGradient>
|
||||
<rect fill="url(#SVGID_1_)" width="80" height="80"/>
|
||||
<path fill="#929497" d="M62.621,17.368C56.585,11.326,48.549,8,39.996,8c-8.546,0-16.582,3.326-22.632,9.368
|
||||
C11.322,23.411,8,31.451,8,40s3.322,16.589,9.364,22.621C23.414,68.664,31.45,72,39.996,72c8.553,0,16.589-3.336,22.625-9.379
|
||||
C68.666,56.589,72,48.549,72,40S68.666,23.411,62.621,17.368z M50.477,55.118L36.804,41.467V18.066h5.145v21.243L54.11,51.477
|
||||
L50.477,55.118z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve"><path fill="#929497" d="M62.621,17.368C56.585,11.326,48.549,8,39.996,8c-8.546,0-16.582,3.326-22.632,9.368C11.322,23.411,8,31.451,8,40s3.322,16.589,9.364,22.621C23.414,68.664,31.45,72,39.996,72c8.553,0,16.589-3.336,22.625-9.379C68.666,56.589,72,48.549,72,40S68.666,23.411,62.621,17.368z M50.477,55.118L36.804,41.467V18.066h5.145v21.243L54.11,51.477L50.477,55.118z"/></svg>
|
||||
|
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 707 B |
|
@ -1,47 +1,3 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="80px" height="80px" viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="SVGID_1_" width="80" height="80"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_2_">
|
||||
<use xlink:href="#SVGID_1_" overflow="visible"/>
|
||||
</clipPath>
|
||||
<rect clip-path="url(#SVGID_2_)" fill="#FFFFFF" width="80" height="7.074"/>
|
||||
<rect y="7.074" clip-path="url(#SVGID_2_)" fill="#FFFFFF" width="80" height="22.602"/>
|
||||
<rect y="29.676" clip-path="url(#SVGID_2_)" fill="#FFFFFF" width="80" height="50.324"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#929497" d="M16.436,8C8.396,8,8.014,15.667,8,16.049V72c28.596,0,50.623,0,55.562,0c8.039,0,8.422-7.667,8.438-8.049
|
||||
V8H16.436z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M31.202,26.303c2.565,0,4.649,2.086,4.649,4.655c0,2.573-2.084,4.653-4.649,4.653
|
||||
c-2.573,0-4.659-2.08-4.659-4.653C26.542,28.389,28.629,26.303,31.202,26.303z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<circle fill="#FFFFFF" cx="50.476" cy="30.957" r="4.654"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M40.835,57.729c-7.189,0-13.987-2.433-18.186-6.508c-1.057-1.025-1.082-2.714-0.056-3.771
|
||||
c1.025-1.056,2.714-1.082,3.771-0.056c3.226,3.131,8.636,5,14.471,5c5.749,0,11.117-1.83,14.359-4.896
|
||||
c1.068-1.011,2.756-0.966,3.77,0.105c1.012,1.07,0.965,2.758-0.105,3.77C54.588,55.413,48.019,57.729,40.835,57.729z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80px" height="80px"><path fill="#929497" d="M16.436,8C8.396,8,8.014,15.667,8,16.049V72c28.596,0,50.623,0,55.562,0c8.039,0,8.422-7.667,8.438-8.049V8H16.436z"/><path fill="#FFFFFF" d="M31.202,26.303c2.565,0,4.649,2.086,4.649,4.655c0,2.573-2.084,4.653-4.649,4.653c-2.573,0-4.659-2.08-4.659-4.653C26.542,28.389,28.629,26.303,31.202,26.303z"/><circle fill="#FFFFFF" cx="50.476" cy="30.957" r="4.654"/><path fill="#FFFFFF" d="M40.835,57.729c-7.189,0-13.987-2.433-18.186-6.508c-1.057-1.025-1.082-2.714-0.056-3.771c1.025-1.056,2.714-1.082,3.771-0.056c3.226,3.131,8.636,5,14.471,5c5.749,0,11.117-1.83,14.359-4.896c1.068-1.011,2.756-0.966,3.77,0.105c1.012,1.07,0.965,2.758-0.105,3.77C54.588,55.413,48.019,57.729,40.835,57.729z"/></svg>
|
||||
|
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 971 B |
|
@ -82,3 +82,8 @@ imageResize
|
|||
Arguments: None
|
||||
ThisArg: LightboxInterface
|
||||
Called: From LightboxInterface resize listener. Return false to override default behaviour.
|
||||
|
||||
closeInterface
|
||||
Arguments: None
|
||||
ThisArg: LightboxInterface
|
||||
Called: From LightboxInterface unattach method when the interface is being unattached.
|
||||
|
|
|
@ -26,62 +26,61 @@
|
|||
return ele;
|
||||
};
|
||||
|
||||
LIP.autoResize = function ( ele, ratio ) {
|
||||
// Assumes that the parent element's size is the maximum size.
|
||||
LIP.autoResize = function ( ele, $parent ) {
|
||||
function updateRatios() {
|
||||
if ( imgHeight ) {
|
||||
imgHeightRatio = imgMaxHeight / imgHeight;
|
||||
imgHeightRatio = parentHeight / imgHeight;
|
||||
}
|
||||
|
||||
if ( imgWidth ) {
|
||||
imgWidthRatio = imgMaxWidth / imgWidth;
|
||||
imgWidthRatio = parentWidth / imgWidth;
|
||||
}
|
||||
}
|
||||
|
||||
var imgWidthRatio, imgHeightRatio,
|
||||
multRatio = ratio || 0.5,
|
||||
$window = $( window ),
|
||||
winWidth = $window.width(),
|
||||
winHeight = $window.height(),
|
||||
var imgWidthRatio, imgHeightRatio, parentWidth, parentHeight,
|
||||
$img = $( ele ),
|
||||
imgMaxWidth = winWidth * multRatio,
|
||||
imgMaxHeight = winHeight * multRatio,
|
||||
imgWidth = $img.width(),
|
||||
imgHeight = $img.height();
|
||||
|
||||
if ( this.globalMaxWidth && imgMaxWidth > this.globalMaxWidth ) {
|
||||
imgMaxWidth = this.globalMaxWidth;
|
||||
$parent = $parent || $img.parent();
|
||||
parentWidth = $parent.width();
|
||||
parentHeight = $parent.height();
|
||||
|
||||
if ( this.globalMaxWidth && parentWidth > this.globalMaxWidth ) {
|
||||
parentWidth = this.globalMaxWidth;
|
||||
}
|
||||
|
||||
if ( this.globalMaxHeight && imgMaxHeight > this.globalMaxHeight ) {
|
||||
imgMaxHeight = this.globalMaxHeight;
|
||||
if ( this.globalMaxHeight && parentHeight > this.globalMaxHeight ) {
|
||||
parentHeight = this.globalMaxHeight;
|
||||
}
|
||||
|
||||
updateRatios();
|
||||
|
||||
if ( imgWidth > imgMaxWidth ) {
|
||||
if ( imgWidth > parentWidth ) {
|
||||
imgHeight *= imgWidthRatio || 1;
|
||||
imgWidth = imgMaxWidth;
|
||||
imgWidth = parentWidth;
|
||||
updateRatios();
|
||||
}
|
||||
|
||||
if ( imgHeight > imgMaxHeight ) {
|
||||
if ( imgHeight > parentHeight ) {
|
||||
imgWidth *= imgHeightRatio || 1;
|
||||
imgHeight = imgMaxHeight;
|
||||
imgHeight = parentHeight;
|
||||
updateRatios();
|
||||
}
|
||||
|
||||
if ( imgWidth < imgMaxWidth && imgHeight < imgMaxHeight ) {
|
||||
if ( imgWidth < parentWidth && imgHeight < parentHeight ) {
|
||||
if ( imgWidth === 0 && imgHeight === 0 ) {
|
||||
// Only set one
|
||||
imgWidth = imgMaxWidth;
|
||||
imgWidth = parentWidth;
|
||||
imgHeight = null;
|
||||
} else {
|
||||
if ( imgHeightRatio > imgWidthRatio ) {
|
||||
imgWidth *= imgHeightRatio;
|
||||
imgHeight = imgMaxHeight;
|
||||
imgHeight = parentHeight;
|
||||
} else {
|
||||
imgHeight *= imgWidthRatio;
|
||||
imgWidth = imgMaxWidth;
|
||||
imgWidth = parentWidth;
|
||||
}
|
||||
updateRatios();
|
||||
}
|
||||
|
|
|
@ -15,7 +15,8 @@
|
|||
!document.mozFullScreenElement &&
|
||||
!document.webkitFullScreenElement &&
|
||||
!document.msFullScreenElement) {
|
||||
lbinterface.fullscreen();
|
||||
lightboxHooks.callAll( 'defullscreen' );
|
||||
lbinterface.$main.removeClass( 'mlb-fullscreened' );
|
||||
} else if ( lbinterface.fullscreenButtonJustPressed ) {
|
||||
lbinterface.fullscreenButtonJustPressed = false;
|
||||
}
|
||||
|
@ -26,6 +27,11 @@
|
|||
addToPost = [],
|
||||
lbinterface = this;
|
||||
|
||||
// Staging area for image resizes
|
||||
this.$staging = $( '<div>' )
|
||||
.addClass( 'mlb-staging-area' );
|
||||
$( document.body ).append( this.$staging );
|
||||
|
||||
this.$overlay = $( '<div>' )
|
||||
.addClass( 'mlb-overlay' );
|
||||
|
||||
|
@ -38,6 +44,15 @@
|
|||
this.$imageDiv = $( '<div>' )
|
||||
.addClass( 'mlb-image' );
|
||||
|
||||
// I blame CSS for this
|
||||
this.$innerWrapper = $( '<div>' )
|
||||
.addClass( 'mlb-image-inner-wrapper' )
|
||||
.append( this.$imageDiv );
|
||||
|
||||
this.$imageWrapper = $( '<div>' )
|
||||
.addClass( 'mlb-image-wrapper' )
|
||||
.append( this.$innerWrapper );
|
||||
|
||||
this.$preDiv = $( '<div>' )
|
||||
.addClass( 'mlb-pre-image' );
|
||||
result = lightboxHooks.callAll( 'addToPreDiv', this, addToPre );
|
||||
|
@ -50,7 +65,7 @@
|
|||
|
||||
this.$main.append(
|
||||
this.$preDiv,
|
||||
this.$imageDiv,
|
||||
this.$imageWrapper,
|
||||
this.$postDiv
|
||||
);
|
||||
|
||||
|
@ -64,9 +79,6 @@
|
|||
if ( e.keyCode === 27 ) {
|
||||
// Escape button pressed
|
||||
lbinterface.unattach();
|
||||
if ( lbinterface.isFullScreen ) {
|
||||
lbinterface.fullscreen();
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
|
@ -93,6 +105,8 @@
|
|||
};
|
||||
|
||||
LIP.unattach = function () {
|
||||
lightboxHooks.callAll( 'closeInterface', this );
|
||||
|
||||
this.$wrapper.detach();
|
||||
this.$overlay.detach();
|
||||
};
|
||||
|
@ -100,35 +114,24 @@
|
|||
LIP.fullscreen = function () {
|
||||
var fullscreen;
|
||||
|
||||
if ( this.isFullScreen ) {
|
||||
if ( !document.fullscreenElement &&
|
||||
!document.mozFullScreenElement &&
|
||||
!document.webkitFullScreenElement &&
|
||||
!document.msFullScreenElement ) {
|
||||
if ( document.cancelFullScreen ) {
|
||||
document.cancelFullScreen();
|
||||
} else if ( document.mozCancelFullScreen ) {
|
||||
document.mozCancelFullScreen();
|
||||
} else if ( document.webkitCancelFullScreen ) {
|
||||
document.webkitCancelFullScreen();
|
||||
} else if ( document.msCancelFullScreen ) {
|
||||
document.msCancelFullScreen();
|
||||
}
|
||||
if ( document.fullscreenElement ||
|
||||
document.mozFullScreenElement ||
|
||||
document.webkitFullScreenElement ||
|
||||
document.msFullScreenElement ) {
|
||||
if ( document.cancelFullScreen ) {
|
||||
document.cancelFullScreen();
|
||||
} else if ( document.mozCancelFullScreen ) {
|
||||
document.mozCancelFullScreen();
|
||||
} else if ( document.webkitCancelFullScreen ) {
|
||||
document.webkitCancelFullScreen();
|
||||
} else if ( document.msCancelFullScreen ) {
|
||||
document.msCancelFullScreen();
|
||||
}
|
||||
|
||||
this.$wrapper.html( this.$main.detach() );
|
||||
this.$fullscreen = this.$fullscreen.detach();
|
||||
|
||||
this.$main.removeClass( 'mlb-fullscreened' );
|
||||
lightboxHooks.callAll( 'defullscreen', this );
|
||||
} else {
|
||||
this.$fullscreen = this.$fullscreen || $( '<div>' )
|
||||
.addClass( 'mlb-fullscreen-div' );
|
||||
|
||||
this.$fullscreen.html( this.$main.detach() );
|
||||
|
||||
this.$wrapper.append( this.$fullscreen );
|
||||
|
||||
fullscreen = this.$fullscreen[0];
|
||||
fullscreen = this.$main.get( 0 );
|
||||
if ( fullscreen.requestFullScreen ) {
|
||||
fullscreen.requestFullScreen();
|
||||
} else if ( fullscreen.mozRequestFullScreen ) {
|
||||
|
@ -139,25 +142,30 @@
|
|||
fullscreen.msRequestFullscreen();
|
||||
}
|
||||
|
||||
this.$main.addClass( 'mlb-fullscreened' );
|
||||
lightboxHooks.callAll( 'fullscreen', this );
|
||||
}
|
||||
|
||||
this.isFullScreen = !this.isFullScreen;
|
||||
};
|
||||
|
||||
LIP.load = function ( image ) {
|
||||
var ele = image.getImageElement( function () {
|
||||
image.globalMaxWidth = ele.width;
|
||||
image.globalMaxHeight = ele.height;
|
||||
iface.$image = $( ele );
|
||||
iface.$imageDiv.append( iface.$image );
|
||||
image.globalMaxWidth = iface.$image.width();
|
||||
image.globalMaxHeight = iface.$image.height();
|
||||
image.autoResize( ele, iface.isFullScreen ? 0.9 : 0.5 );
|
||||
|
||||
iface.autoResizeImage();
|
||||
|
||||
window.addEventListener( 'resize', function () {
|
||||
var result = lightboxHooks.callAll( 'imageResize', iface );
|
||||
var result = lightboxHooks.callAll( 'imageResize', iface ),
|
||||
isFullScreen = (
|
||||
document.fullscreenElement ||
|
||||
document.mozFullScreenElement ||
|
||||
document.webkitFullScreenElement ||
|
||||
document.msFullScreenElement ),
|
||||
$measurement = isFullScreen ? $( window ) : iface.$image;
|
||||
|
||||
if ( result !== false ) {
|
||||
image.autoResize( iface.$image.get( 0 ), iface.isFullScreen ? 0.9 : 0.5 );
|
||||
iface.autoResizeImage();
|
||||
}
|
||||
} );
|
||||
|
||||
|
@ -168,6 +176,12 @@
|
|||
this.currentImage = image;
|
||||
};
|
||||
|
||||
LIP.autoResizeImage = function () {
|
||||
this.$staging.append( this.$image );
|
||||
this.currentImage.autoResize( this.$image.get( 0 ), this.$imageDiv );
|
||||
this.$imageDiv.append( this.$image );
|
||||
};
|
||||
|
||||
LIP.replaceImageWith = function ( imageEle ) {
|
||||
var $image = $( imageEle );
|
||||
|
||||
|
@ -178,7 +192,7 @@
|
|||
|
||||
this.currentImage.globalMaxWidth = this.$image.width();
|
||||
this.currentImage.globalMaxHeight = this.$image.height();
|
||||
this.currentImage.autoResize( imageEle, this.isFullScreen ? 0.9 : 0.5 );
|
||||
this.currentImage.autoResize( imageEle );
|
||||
};
|
||||
|
||||
LIP.setupPreDiv = function ( buildDefaults, toAdd ) {
|
||||
|
|
|
@ -1,3 +1,9 @@
|
|||
.mlb-staging-area {
|
||||
position: absolute;
|
||||
top: -999999px;
|
||||
left: -999999px;
|
||||
}
|
||||
|
||||
.mlb-overlay {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
|
@ -18,15 +24,30 @@
|
|||
}
|
||||
|
||||
.mlb-main {
|
||||
margin-top: 20px;
|
||||
width: 80%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mlb-image {
|
||||
.mlb-image-wrapper {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.mlb-image-inner-wrapper {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mlb-image {
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mlb-image img {
|
||||
|
@ -35,52 +56,49 @@
|
|||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mlb-pre-image {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mlb-post-image {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mlb-controls {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
width: 80%;
|
||||
min-height: 32px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #7d7c81;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mlb-close,
|
||||
.mlb-fullscreen {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
cursor: pointer;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.mlb-close {
|
||||
cursor: pointer;
|
||||
left: 0px;
|
||||
background-image: url("../img/close.svg");
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-right: 1px solid #7d7c81;
|
||||
border-bottom: 1px solid #7d7c81;
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: -32px;
|
||||
}
|
||||
|
||||
.mlb-fullscreen {
|
||||
cursor: pointer;
|
||||
background-image: url("../img/fullscreen.svg");
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-left: 1px solid #7d7c81;
|
||||
border-bottom: 1px solid #7d7c81;
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
right: -32px;
|
||||
}
|
||||
|
||||
.mlb-fullscreen-div {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 1002;
|
||||
background-image: url("../img/fullscreen.svg");
|
||||
border-left: 1px solid #7d7c81;
|
||||
}
|
||||
|
||||
.mlb-fullscreen-div .mlb-main {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
.mlb-main.mlb-fullscreened {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.mlb-fullscreen-div .mlb-fullscreen {
|
||||
|
|