Topic on Skin talk:Timeless

Hello, I do really like the Timeless skin! I'm using it for mor than a year and I want to share two little hack related to Visual Editor.

1) Zoom out the VE's Toolbar for smaller devices. Add the following lines to Timeless.css (unfortunately the zoom property works only with Chrome based browsers):

@media screen and (max-width: 850px) {
    .oo-ui-toolbar.oo-ui-toolbar-position-top.ve-ui-toolbar.ve-ui-dir-inline-ltr.ve-ui-dir-block-ltr.ve-ui-targetToolbar.ve-ui-positionedTargetToolbar.ve-init-mw-desktopArticleTarget-toolbar.ve-init-mw-desktopArticleTarget-toolbar-open.ve-init-mw-desktopArticleTarget-toolbar-opened {
        zoom: .82;
    }
    .oo-ui-toolbar-bar {
        left: 0 !important;
        right: 0 !important;
    }
}

2) Scroll few pixels down in order to show the edited heading when the inline edit tool is used, otherwise the heading is hidden behind .mw-header-container that, sometimes, leads to a confusion. Add the following lines to Timeless.js:

( function ( mw, $ ) {
    mw.hook( 've.activationComplete' ).add( function () {
        var veScrollHeading = setTimeout(function() {
            document.documentElement.scrollTop -= 120;
        }, 50);
    });

    mw.hook( 've.deactivationComplete' ).add( function () {
        var veScrollHeading = setTimeout(function() {
            document.documentElement.scrollTop -= 20;
        }, 50);
    });
} )( mediaWiki, jQuery );