-
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
Index: wp-admin/js/wp-fullscreen.dev.js
===================================================================
--- wp-admin/js/wp-fullscreen.dev.js (revision 17732)
+++ wp-admin/js/wp-fullscreen.dev.js (working copy)
@@ -1,5 +1,8 @@
/**
- * PubSub -- A lightweight publish/subscribe implementation. Private use only!
+ * PUBSUB
+ *
+ * A lightweight publish/subscribe implementation.
+ * Private use only!
*/
var PubSub, fullscreen, wptitlehint;
@@ -38,7 +41,7 @@
};
PubSub.prototype.publish = function( topic, args ) {
- var i, l,
+ var i, l, broken,
topics = this.topics[ topic ];
if ( ! topics )
@@ -47,11 +50,18 @@
args = args || [];
for ( i = 0, l = topics.length; i < l; i++ ) {
- topics[i].apply( null, args );
+ broken = ( topics[i].apply( null, args ) === false || broken );
}
+ return ! broken;
};
-// Distraction Free Writing (wp-fullscreen) access the API globally using the fullscreen variable.
+/**
+ * FULLSCREEN
+ *
+ * Distraction free writing.
+ * Access the API globally using the fullscreen variable.
+ */
+
(function($){
var api, ps, bounder;
@@ -97,26 +107,119 @@
/**
* ON / OFF API
*/
- api.on = function() {
- if ( ! api.ui.element )
- api.ui.init();
+ /**
+ * on()
+ *
+ * Turns fullscreen on.
+ *
+ * @param string mode Optional. Switch to the given mode before opening.
+ */
+ api.on = function( mode ) {
+ if ( api.visible )
+ return;
- if ( ! api.visible )
- api.ui.fade( 'show', 'showing', 'shown' );
+ api.mode( mode );
+ api.ui.fade( 'show', 'showing', 'shown' );
};
+ /**
+ * off()
+ *
+ * Turns fullscreen off.
+ */
api.off = function() {
- if ( api.ui.element && api.visible )
- api.ui.fade( 'hide', 'hiding', 'hidden' );
+ if ( ! api.visible )
+ return;
+
+ api.ui.fade( 'hide', 'hiding', 'hidden' );
};
/**
+ * MODE API
+ */
+ (function(){
+ var mode = 'html';
+
+ /**
+ * mode()
+ *
+ * @return string - The fullscreen mode.
+ *
+ * mode( to )
+ *
+ * @param string to - The fullscreen mode to switch to.
+ * @event switchMode
+ * @eventparam string to - The new mode.
+ * @eventparam string from - The old mode.
+ */
+ api.mode = function( to ) {
+ if ( ! to )
+ return mode;
+
+ var from = mode;
+
+ // Don't switch if the mode is the same.
+ if ( mode == to )
+ return;
+
+ // Only fire the switch event when visible.
+ if ( ! api.visible || ps.publish( 'switchMode', [ to, from ] ) ) {
+ mode = to;
+ ps.publish( 'switchedMode', [ to, from ] );
+ }
+ };
+ })();
+
+ /**
+ * MODE TOGGLE BUTTONS
+ */
+ api.modes = {
+ order: 'tinymce html',
+ labels: {
+ html: fullscreenL10n.html,
+ tinymce: fullscreenL10n.visual
+ },
+ refresh: function( slug, label ) {
+ var modes = $('#wp-fullscreen-modes'),
+ slugs = api.modes.order.split(' ');
+
+ modes.detach().children().detach().removeClass('active');
+
+ $.each( slugs, function( i, slug ) {
+ modes.append( api.modes.element( slug ) );
+ });
+
+ api.modes.element( api.mode() ).addClass('active');
+
+ modes.appendTo('#wp-fullscreen-mode-bar');
+ },
+ _elements: {},
+ element: function( slug ) {
+ if ( api.modes._elements[ slug ] )
+ return api.modes._elements[ slug ];
+
+ var label = api.modes.labels[ slug ] || slug;
+ mode = $('
' + label + '');
+
+ mode.click( function( e ) {
+ api.mode( slug );
+ e.preventDefault();
+ });
+
+ return api.modes._elements[ slug ] = mode;
+ }
+ }
+
+ /**
* GENERAL
*/
api.save = function() {
$('#title').val( $('#wp-fullscreen-title').val() );
- tinyMCE.execCommand('wpFullScreenSaveContent');
+
+ if ( api.mode() === 'tinymce' )
+ tinyMCE.execCommand('wpFullScreenSaveContent');
+
$('#hiddenaction').val('wp-fullscreen-save-post');
$.post( ajaxurl, $('form#post').serialize(), function(r){
@@ -129,8 +232,8 @@
}, 'json');
}
- set_title_hint = function(title) {
- if ( !title.val().length )
+ set_title_hint = function( title ) {
+ if ( ! title.val().length )
title.siblings('label').css( 'visibility', '' );
else
title.siblings('label').css( 'visibility', 'hidden' );
@@ -164,80 +267,338 @@
.bind( 'mousemove.fullscreen', function(e) { bounder( 'showToolbar', 'hideToolbar', 2500 ); } );
});
+
+ // This event occurs before the overlay blocks the UI.
ps.subscribe( 'show', function() {
+ var textarea;
+
+ if ( ! api.textarea ) {
+ textarea = $('#wp_mce_fullscreen');
+ api.textarea = textarea[0];
+ api.grow( textarea );
+ }
+
+ if ( api.mode() === 'tinymce' ) {
+ // Initialize the editor.
+ api.tinymce.editor();
+
+ } else if ( api.mode() === 'html' ) {
+ // Copy the content from the editor's textarea.
+ api.textarea.value = edCanvas.value;
+ }
+
+ // Map the textarea to edCanvas, store the old edCanvas.
+ api._edCanvas = edCanvas;
+ edCanvas = api.textarea;
+ });
+
+ // This event occurs while the overlay blocks the UI.
+ ps.subscribe( 'showing', function() {
+ // Update the fullscreen fields
var title = $('#wp-fullscreen-title').val( $('#title').val() );
- this.set_title_hint(title);
+ set_title_hint( title );
+ $('#wp-fullscreen-last-edit').html( $('#last-edit').html() );
+
+ // Show the fullscreen UI
+ $('#wp-fullscreen-body').show();
+ $( document.body ).addClass( 'fullscreen-active' );
+ api.buttons.refresh();
+ api.modes.refresh();
+
+ // Bind toolbar fading events
$( document ).bind( 'mousemove.fullscreen', function(e) { bounder( 'showToolbar', 'hideToolbar', 2500 ); } );
+ bounder( 'showToolbar', 'hideToolbar', 2500 );
});
+ // This event occurs after the overlay blocks the UI.
+ ps.subscribe( 'shown', function() {
+ api.visible = true;
+ });
+
+ // This event occurs before the overlay blocks the UI.
ps.subscribe( 'hide', function() {
- var title = $('#title').val( $('#wp-fullscreen-title').val() );
- this.set_title_hint(title);
- tinyMCE.execCommand('wpFullScreenSave');
+ if ( api.mode() === 'tinymce' )
+ tinyMCE.execCommand('wpFullScreenSave');
+
+ // Unbind all fullscreen events on the document (including mousemove)
$( document ).unbind( '.fullscreen' );
});
- ps.subscribe( 'showing', function() {
- $('#wp-fullscreen-body').show();
- $( document.body ).addClass( 'fullscreen-active' );
- bounder( 'showToolbar', 'hideToolbar', 3000 );
- $('#wp-fullscreen-last-edit').html( $('#last-edit').html() );
- });
+ // This event occurs while the overlay blocks the UI.
+ ps.subscribe( 'hiding', function() {
+ var mode, title;
- ps.subscribe( 'hiding', function() {
+ // Update the normal fields
+ title = $('#title').val( $('#wp-fullscreen-title').val() );
+ set_title_hint( title );
+ $('#last-edit').html( $('#wp-fullscreen-last-edit').html() );
+
+ // Restore and update edCanvas.
+ edCanvas = api._edCanvas;
+ edCanvas.value = api.textarea.value;
+
+ // Hide the fullscreen UI
$('#wp-fullscreen-body').hide();
$( document.body ).removeClass( 'fullscreen-active' );
- $('#last-edit').html( $('#wp-fullscreen-last-edit').html() );
- });
- ps.subscribe( 'shown', function() {
- api.visible = true;
+ // Destroy the tinyMCE editor if it has been instantiated.
+ if ( tinyMCE ) // This should be run regardless of mode.
+ tinyMCE.execCommand('wpFullScreenClose');
+
+ // Clear the textarea.
+ api.textarea.value = '';
+
+ // Make sure the correct editor is displaying.
+ mode = api.mode();
+ if ( mode == 'tinymce' || mode == 'html' )
+ switchEditors.go( 'content', mode );
});
+ // This event occurs after the overlay blocks the UI.
ps.subscribe( 'hidden', function() {
api.visible = false;
+
$('#wp_mce_fullscreen').removeAttr('style');
- tinyMCE.execCommand('wpFullScreenClose');
});
+ ps.subscribe( 'switchMode', function( to, from ) {
+ var ed;
+
+ if ( to === 'tinymce' || from === 'tinymce' ) {
+ ed = api.tinymce.editor();
+
+ // Don't switch modes if there was an error fetching the editor.
+ // If the editor is rendering, it will trigger the switch when initialized.
+ if ( ! ed )
+ return false;
+ }
+
+ if ( from ==='html' && to === 'tinymce' ) {
+ api.textarea.value = switchEditors.wpautop( api.textarea.value );
+ ed.show();
+ } else if ( from ==='tinymce' && to === 'html' ) {
+ ed.hide();
+ }
+ });
+
+ ps.subscribe( 'switchedMode', function( to, from ) {
+ api.buttons.refresh();
+ api.modes.refresh();
+
+ if ( to === 'html' )
+ api.grow.resize( api.textarea );
+ });
+
+
/**
- * Buttons
+ * BUTTONS
*/
- api.b = function() {
- tinyMCE.execCommand('Bold');
- }
+ api.Button = function( slug ) {
+ if ( ! ( this instanceof api.Button ) ) {
+ // Get the instance and create a new one if necessary.
+ if ( ! api.Button.buttons[ slug ] )
+ api.Button.buttons[ slug ] = new api.Button( slug );
+ return api.Button.buttons[ slug ];
+ }
- api.i = function() {
- tinyMCE.execCommand('Italic');
- }
+ this.slug = slug;
+ this.action = {};
- api.ul = function() {
- tinyMCE.execCommand('InsertUnorderedList');
- }
+ api.Button.buttons[ slug ] = this;
+ };
- api.ol = function() {
- tinyMCE.execCommand('InsertOrderedList');
- }
+ api.Button.buttons = {};
- api.link = function() {
- tinyMCE.execCommand('WP_Link');
- }
+ $.extend( api.Button.prototype, {
+ set: function( modes, callback ) {
+ var self = this;
+ if ( typeof modes === 'string' )
+ modes = [ modes ];
+ $.each( modes, function( i, mode ) {
+ self.action[ mode ] = callback;
+ });
+ },
+ get: function( mode ) {
+ return this.action[ mode ];
+ },
+ run: function() {
+ var callback = this.get( api.mode() );
- api.unlink = function() {
- tinyMCE.execCommand('unlink');
+ if ( ! this.disabled() && callback )
+ return callback();
+ },
+ element: function( element ) {
+ var self = this;
+ if ( ! element ) {
+ if ( ! this._element )
+ this.elementTemplate();
+ return this._element;
+ }
+
+ this._element = element.detach();
+ // Ensure the proper classes are set.
+ $.each([ 'disabled', 'active' ], function( i, fn ) {
+ self[ fn ]( self[ fn ]() );
+ });
+ // Run when the element clicked.
+ element.click( function( e ) {
+ self.run();
+ e.preventDefault();
+ });
+ },
+
+ elementTemplate: function() {
+ if ( ! api.Button.template || ! api.Button.template.length )
+ return;
+
+ var slug = this.slug,
+ el = api.Button.template.clone(),
+ a = el.children('a'),
+ label = fullscreenL10n[ slug ] || '';
+
+ el.attr( 'id', 'wp-fs-button-' + slug );
+ a.addClass( 'mce_' + slug ).attr({
+ title: label,
+ 'aria-labelledby': 'wp-fs-voice-' + slug
+ });
+ a.children('.mceIcon').addClass( 'mce_' + slug );
+ a.children('.mceVoiceLabel').attr( 'id', 'wp-fs-voice-' + slug ).text( label );
+
+ this.element( el );
+ }
+ });
+
+ $(document).ready( function() {
+ api.Button.template = $('#wp-fullscreen-button-template');
+ });
+
+ /**
+ * Create disabled and active functions.
+ *
+ * These functions act as getters/setters.
+ * They also toggle the appropriate classnames on the element.
+ */
+ $.each([ 'disabled', 'active' ], function( i, fn ) {
+ var key = '_' + fn;
+
+ api.Button.prototype[ fn ] = function( change ) {
+ if ( typeof change == 'undefined' )
+ return this[ key ];
+
+ this[ key ] = !! change;
+
+ if ( this.element() )
+ this.element().toggleClass( fn, this[ key ] );
+ };
+ });
+
+ api.buttons = {
+ order: {
+ tinymce: 'bold italic | bullist numlist | image | link unlink',
+ html: 'image link'
+ },
+ refresh: function() {
+ var toolbar = $('#wp-fullscreen-buttons'),
+ sep = $('#wp-fullscreen-resources .wp-fullscreen-separator'),
+ order = api.buttons.order[ api.mode() ] || '',
+ slugs = order.split(' ');
+
+ if ( ! toolbar.length )
+ return;
+
+ // Detach the toolbar from the DOM.
+ toolbar.detach();
+ // Remove separators
+ toolbar.children('.wp-fullscreen-separator').remove();
+ // Detach old buttons
+ toolbar.children().detach();
+
+ // Arrange current buttons
+ $.each( slugs, function( i, slug ) {
+ var button;
+
+ // A pipe indicates a separator
+ if ( slug == '|' ) {
+ toolbar.append( sep.clone() );
+ // Otherwise attempt to fetch the element and append it.
+ } else {
+ button = api.Button( slug );
+ button.disabled( false );
+ button.active( false );
+
+ if ( button.element() )
+ toolbar.append( button.element() );
+ }
+ });
+
+ // Add the toolbar back to the DOM
+ toolbar.prependTo('#wp-fullscreen-button-bar');
+ }
}
/**
- * UI elements (used for transitioning)
+ * TINYMCE
*/
- api.ui = {
+ api.tinymce = {
+
/**
- * Undefined api.ui properties:
- * element, topbar
+ * editor()
+ *
+ * Fetches the fullscreen TinyMCE editor.
+ *
+ * Checks for errors.
+ * Will initialize the editor if necessary.
+ *
+ * @return false | tinymce.Editor
*/
+ editor: function() {
+ var ed;
+ if ( ! tinyMCE )
+ return false;
+
+ ed = tinyMCE.get('wp_mce_fullscreen');
+
+ if ( ed ) {
+ return ed;
+ } else if ( tinyMCE.activeEditor ) {
+ tinyMCE.activeEditor.execCommand('wpFullScreenInit');
+ } else {
+ switchEditors.go( 'content', 'tinymce' );
+ }
+
+ return false;
+ },
+
+ commands: {
+ bold: 'Bold',
+ italic: 'Italic',
+ bullist: 'InsertUnorderedList',
+ numlist: 'InsertOrderedList',
+ link: 'WP_Link',
+ unlink: 'unlink'
+ }
+ };
+
+ $.each( api.tinymce.commands, function( key, command ) {
+ api.Button( key ).set( 'tinymce', function() { tinyMCE.execCommand( command ); });
+ });
+
+ api.Button('link').set( 'html', function() { wpLink.open(); });
+ api.Button('image').set([ 'html', 'tinymce' ], function() {
+ $('#add_image').click();
+ });
+
+ /**
+ * UI ELEMENTS
+ *
+ * Used for transitioning between states.
+ *
+ * Undeclared api.ui properties: element, topbar
+ */
+ api.ui = {
init: function() {
- var topbar = api.ui.topbar = $('#fullscreen-topbar');
+ var topbar = api.ui.topbar = $('#fullscreen-topbar');
api.ui.element = $('#fullscreen-fader');
if ( wptitlehint )
@@ -254,9 +615,13 @@
},
fade: function( before, during, after ) {
- if ( before )
- ps.publish( before );
+ if ( ! api.ui.element )
+ api.ui.init();
+ // If any callback bound to before returns false, bail.
+ if ( before && ! ps.publish( before ) )
+ return;
+
api.fade.In( api.ui.element, 600, function() {
if ( during )
ps.publish( during );
@@ -332,10 +697,70 @@
})()
};
- /*
- api.editor = function() {
- return $('#content, #content_ifr').filter(':visible');
+
+ /**
+ * GROW API
+ *
+ * Automatically updates textarea height.
+ */
+ api.grow = function( element ) {
+ element = element.filter( 'textarea:not[.grow]' );
+ element.addClass( 'grow' ).css({
+ overflow: 'hidden',
+ resize: 'none'
+ });
+ element.bind( 'keydown.grow keypress.grow focus.grow', api.grow.resizeEvent );
+
+ element.each( function() {
+ var t = $(this);
+
+ // Ensure a minHeight is set. Default to the height.
+ if ( ! this.style.minHeight && this.style.minHeight !== 0 )
+ this.style.minHeight = this.style.height;
+
+ t.bind( 'grow', function() {
+ // If the textarea causes the window's scrollbars, remember the offset.
+ // Otherwise, the scrollbars will jump when we revert to minHeight.
+ var scroll = api.grow.window.scrollTop();
+
+ // Set to the minHeight so the textarea shrinks appropriately.
+ textarea.style.height = textarea.style.minHeight;
+
+ if ( textarea.scrollHeight > textarea.clientHeight )
+ textarea.style.height = textarea.scrollHeight + 'px';
+
+ api.grow.window.scrollTop( scroll );
+ });
+
+ // Initial resize.
+ if ( t.is(':visible') )
+ api.grow.resize( this );
+ });
+
+ return element;
};
- */
+ api.grow.window = $(window);
+
+ api.grow.resizeEvent = function( e ) {
+ var textarea = this;
+ setTimeout( function() {
+ api.grow.resize( textarea );
+ }, 1 );
+ };
+
+ api.grow.resize = function( textarea ) {
+ // If the textarea causes the window's scrollbars, remember the offset.
+ // Otherwise, the scrollbars will jump when we revert to minHeight.
+ var scroll = api.grow.window.scrollTop();
+
+ // Set to the minHeight so the textarea shrinks appropriately.
+ textarea.style.height = textarea.style.minHeight;
+
+ if ( textarea.scrollHeight > textarea.clientHeight )
+ textarea.style.height = textarea.scrollHeight + 'px';
+
+ api.grow.window.scrollTop( scroll );
+ };
+
})(jQuery);
Index: wp-admin/css/wp-admin.dev.css
===================================================================
--- wp-admin/css/wp-admin.dev.css (revision 17732)
+++ wp-admin/css/wp-admin.dev.css (working copy)
@@ -657,6 +657,9 @@
width: 100%;
min-height: 300px;
border: 0;
+ background: transparent;
+ line-height: 1.6em;
+ padding: 0;
}
/* =Top bar
@@ -672,9 +675,9 @@
min-width: 800px;
width: 100%;
height: 62px;
- background: #d9d9d9;
- background: -moz-linear-gradient(bottom, #d7d7d7, #e4e4e4);
- background: -webkit-gradient(linear, left bottom, left top, from(#d7d7d7), to(#e4e4e4));
+ background-color: #d9d9d9;
+ background-image: -moz-linear-gradient(bottom, #d7d7d7, #e4e4e4);
+ background-image: -webkit-gradient(linear, left bottom, left top, from(#d7d7d7), to(#e4e4e4));
}
#wp-fullscreen-toolbar {
@@ -682,12 +685,14 @@
clear: both;
}
+#wp-fullscreen-mode-bar,
+#wp-fullscreen-button-bar,
#wp-fullscreen-close {
float: left;
}
#wp-fullscreen-save,
-#wp-fullscreen-buttons #wp-fullscreen-count {
+#wp-fullscreen-count {
float: right;
}
@@ -701,7 +706,7 @@
padding: 3px 10px;
}
-#wp-fullscreen-buttons {
+#wp-fullscreen-central-toolbar {
margin: auto;
padding: 0;
}
@@ -710,6 +715,66 @@
float: left;
}
+#wp-fullscreen-mode-bar {
+ padding-right: 14px;
+}
+#wp-fullscreen-modes a {
+ display: block;
+ font-size: 11px;
+ text-decoration: none;
+ float: left;
+ margin: 1px 0 0 0;
+ padding: 2px 6px 2px;
+ border-width: 1px 1px 1px 0;
+ border-style: solid;
+ border-color: #bbb;
+ color: #777;
+ text-shadow: 0 1px 0 #fff;
+ background-color: #f4f4f4;
+ background-image: -moz-linear-gradient(bottom, #e4e4e4, #f9f9f9);
+ background-image: -webkit-gradient(linear, left bottom, left top, from(#e4e4e4), to(#f9f9f9));
+}
+#wp-fullscreen-modes a:hover,
+#wp-fullscreen-modes .active {
+ color: #333;
+ border-color: #999;
+ background-color: #eee;
+ background-image: -moz-linear-gradient(bottom, #f9f9f9, #e0e0e0);
+ background-image: -webkit-gradient(linear, left bottom, left top, from(#f9f9f9), to(#e0e0e0));
+}
+#wp-fullscreen-modes a:first-child {
+ border-width: 1px;
+ -moz-border-radius: 4px 0 0 4px;
+ -webkit-border-top-left-radius: 4px;
+ -webkit-border-bottom-left-radius: 4px;
+ -khtml-border-top-left-radius: 4px;
+ -khtml-border-bottom-left-radius: 4px;
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+}
+#wp-fullscreen-modes a:last-child {
+ -moz-border-radius: 0 4px 4px 0;
+ -webkit-border-top-right-radius: 4px;
+ -webkit-border-bottom-right-radius: 4px;
+ -khtml-border-top-right-radius: 4px;
+ -khtml-border-bottom-right-radius: 4px;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+}
+
+
+#wp-fullscreen-buttons .active a {
+ background: inherit;
+}
+
+#wp-fullscreen-buttons .hidden {
+ display: none;
+}
+
+#wp-fullscreen-buttons .disabled {
+ opacity: 0.5;
+}
+
/* =Thickbox Adjustments
-------------------------------------------------------------- */
.fullscreen-active #TB_overlay {
@@ -4076,7 +4141,7 @@
margin: 20px 0;
}
-.pressthis a {
+.pressthis a {
display: inline-block;
width: 113px;
position: relative;
@@ -4096,13 +4161,13 @@
rgb(216,216,216) 77%
);
background-repeat: no-repeat;
- background-image-position: 10px 8px;
+ background-image-position: 10px 8px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
- -o-border-radius: 5px;
+ -o-border-radius: 5px;
border: 1px #b4b4b4 solid;
- font: normal normal normal 14px/16px Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
+ font: normal normal normal 14px/16px Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
text-decoration: none;
text-shadow: #fff 0 1px 0px;
-webkit-text-shadow: #fff 0 1px 0px;
@@ -4119,33 +4184,33 @@
transform: skew(20deg) rotate(9deg);
-webkit-transform: skew(20deg) rotate(9deg);
-moz-transform: skew(20deg) rotate(9deg);
- box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
- -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
- -moz-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
+ box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
+ -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
+ -moz-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
}
.pressthis a span {
- background: url(../images/press-this.png) no-repeat 10px 7px ;
+ background: url(../images/press-this.png) no-repeat 10px 7px ;
padding: 8px 0 8px 32px;
display: inline-block;
}
-.pressthis a:after {
- content: '';
- width: 70%;
+.pressthis a:after {
+ content: '';
+ width: 70%;
height: 55%;
- z-index: -1;
- position: absolute;
- right: 10px;
- bottom: 9px;
- background: transparent;
+ z-index: -1;
+ position: absolute;
+ right: 10px;
+ bottom: 9px;
+ background: transparent;
transform: skew(20deg) rotate(6deg);
-webkit-transform: skew(20deg) rotate(6deg);
-moz-transform: skew(20deg) rotate(6deg);
- box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
- -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
- -moz-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
-}
+ box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
+ -webkit-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
+ -moz-box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
+}
/*------------------------------------------------------------------------------