Right arrow is pushed off-screen for logged-in users and left Plone toolbar

[fulv]

When you are logged in and start a slideshow, the right arrow is not visible. More than likely that's because the spotlight CSS does not take the left-side Plone toolbar into account.
This is a problem for sites that are not meant to publish any content to anonymous users.

[witekdev]

A quick and dirty inline css fix for this (tested with Plone 5.2)

body.plone-toolbar-expanded.plone-toolbar-left-expanded #spotlight .arrow-right {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmlld0JveD0iMCAwIDI0IDI0IiBoZWlnaHQ9IjI0IiB3aWR0aD0iMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxwb2x5bGluZSBwb2ludHM9IjE1IDE4IDkgMTIgMTUgNiIgc3R5bGU9InRyYW5zZm9ybS1vcmlnaW46IDEycHggMTJweDsiIHRyYW5zZm9ybT0ibWF0cml4KC0xLCAwLCAwLCAtMSwgMCwgMCkiLz4NCjwvc3ZnPg0KDQo=") !important;
    transform: none !important;
    right: 140px;
}
body.plone-toolbar-default.plone-toolbar-left-default  #spotlight .arrow-right {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmlld0JveD0iMCAwIDI0IDI0IiBoZWlnaHQ9IjI0IiB3aWR0aD0iMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxwb2x5bGluZSBwb2ludHM9IjE1IDE4IDkgMTIgMTUgNiIgc3R5bGU9InRyYW5zZm9ybS1vcmlnaW46IDEycHggMTJweDsiIHRyYW5zZm9ybT0ibWF0cml4KC0xLCAwLCAwLCAtMSwgMCwgMCkiLz4NCjwvc3ZnPg0KDQo=") !important;
    transform: none !important;
    right: 80px;
}

The data image is 180 degree rotated version of the "<" image, so that transform: translateX(100px) scaleX(-1); does not need to be used in css.

Original:

<?xml version="1.0"?>
<svg fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<polyline points="15 18 9 12 15 6"/>
</svg>

180 degree rotated:

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 24 24" height="24" width="24" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" xmlns="http://www.w3.org/2000/svg">
  <polyline points="15 18 9 12 15 6" style="transform-origin: 12px 12px;" transform="matrix(-1, 0, 0, -1, 0, 0)"/>
</svg>