Change the DOM order of pointers and rebuild styling

Initial patch for introducing keyboard shortcuts reversed the blue and yellow lines. To fix that issue, the DOM order for pointer lines were put back to the original state in https://gerrit.wikimedia.org/r/#/c/473217/. Now, this patch tries to put the tabbing order in place reversing the changes made for the fix as per discussion in https://phabricator.wikimedia.org/T162119#4753481 and style changes.

Bug: T162119
Change-Id: Ic84503de0a877095c118abddb8066aeb667bc03c