The issue you're having seem to be due to the javascript bug. It should remove that gap, at the same that it slides down, and changes the background color to black.
Try replacing ./public/js/ips.loginSlide.js with this:
/************************************************/
/* IPB3 Javascript */
/* -------------------------------------------- */
/* ips.twitter.js - (IM) Sliding Quick Login */
/* © Invision Modding 2009 */
/* -------------------------------------------- */
/* Author: Martin Aronsen */
/************************************************/
var _loginSlide = window.IPBoard;
_loginSlide.prototype.loginSlide = {
init: function()
{
document.observe( "dom:loaded", function()
{
$$( '.not_logged_in' )[1].hide();
$( 'loginSlide' ).observe( 'click', ipb.loginSlide.openPanel );
$( 'loginCancel' ).observe( 'click', ipb.loginSlide.openPanel );
}
);
},
hasOpenID: 0,
openPanel: function(e)
{
Event.stop(e);
var element = $$( '.not_logged_in' )[0];
if( $( 'panel' ).visible() )
{
new Effect.Parallel([
new Effect.Morph( 'user_navigation', {
style: {
background: '#2B4F74',
color: '#FFFFFF',
},
duration: 0.5
}
),
new Effect.Morph( 'panel', {
style: {
background: '#2B4F74',
color: '#999999'
},
duration: 0.5
}
),
new Effect.SlideUp( 'panel',
{
afterFinish: function()
{
$( element ).removeClassName( 'slided' )
}
}
),
],
{
duration: 0.5
});
new Effect.Morph( 'user_navigation', {
style: {
top: '7px'
},
delay: 0.4,
duration: 0.1
});
}
else
{
new Effect.Parallel([
new Effect.Morph( 'user_navigation', {
style: {
background: '#2E2E2E',
color: '#999999'
},
duration: 2.0
}
),
new Effect.Morph( 'panel', {
style:
{
background: '#2E2E2E',
color: '#999999'
},
duration: 2.0
}
),
new Effect.SlideDown( 'panel',
{
beforeStart: function()
{
$( element ).addClassName( 'slided' )
},
duration: 2.0
}
),
],
{
duration: 2.0
});
new Effect.Morph( 'user_navigation', {
style: {
top: '0px'
},
delay: 0.2,
duration: 0.4
});
if ( ipb.loginSlide.hasOpenID )
{
$( 'openidOpen' ).observe( 'click', ipb.loginSlide.openOpenID );
}
}
return false;
},
openOpenID: function(e)
{
Event.stop(e);
if( $('openidSignin').visible() )
{
new Effect.Parallel([
new Effect.BlindUp( $('openidSignin'), { sync: true } ),
new Effect.BlindDown( $('regularLogin'), { sync: true } )
]);
}
else
{
new Effect.Parallel([
new Effect.BlindDown( $('openidSignin'), { sync: true } ),
new Effect.BlindUp( $('regularLogin'), { sync: true } )
]);
}
}
}
Effect.BlindRight = function(element) {
element = $(element);
var elementDimensions = element.getDimensions();
return new Effect.Scale(element, 100, Object.extend({
scaleContent: false,
scaleY: false,
scaleFrom: 0,
scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
restoreAfterFinish: true,
afterSetup: function(effect) {
effect.element.makeClipping().setStyle({
width: '0px',
height: effect.dims[0] + 'px'
}).show();
},
afterFinishInternal: function(effect) {
effect.element.undoClipping();
}
}, arguments[1] || { }));
};
Effect.BlindLeft = function(element) {
element = $(element);
element.makeClipping();
return new Effect.Scale(element, 0,
Object.extend({ scaleContent: false,
scaleY: false,
scaleMode: 'box',
scaleContent: false,
restoreAfterFinish: true,
afterSetup: function(effect) {
effect.element.makeClipping().setStyle({
height: effect.dims[0] + 'px'
}).show();
},
afterFinishInternal: function(effect) {
effect.element.hide().undoClipping();
}
}, arguments[1] || { })
);
};
ipb.loginSlide.init();
This will break the OpenID toggle for those with OpenID enabled, btw.