/* ---------------------------------- * Scrolling * ---------------------------------- */ nav[data-type="scrollbar"] { position: absolute; right: 0; top: 0; bottom: 0; } /* Mirror */ nav[data-type="scrollbar"] p { position: absolute; right: 5rem; top: 20%; margin: 0; width: 12rem; height: 12rem; border-radius: 50%; opacity: 0; font-weight: 300; font-size: 7rem; line-height: 12rem; color: #fff; background: rgba(51,204,204,0.8); pointer-events: none; text-align: center; transition: opacity; } nav[data-type="scrollbar"] p img { position: absolute; width: 4.8rem; left: 3.5rem; top: 3.5rem; } nav[data-type="scrollbar"] ol { padding: 0.3rem 0; margin: 0; height: 100%; -moz-box-sizing: border-box; border-radius: 4rem; opacity: 0.6; list-style: none; } nav[data-type="scrollbar"] li { font-size: 1.1rem; line-height: 1.4em; text-align: center; text-transform: uppercase; width: 4.5rem; height: 3.44%; /* 100% / 29 items */ } nav[data-type="scrollbar"] li a { display: block; color: #aaa; width: 100%; height: 100%; text-indent: 1.5rem; text-decoration: none; } /* Top action icons */ nav[data-type="scrollbar"] li .pack-icon-search, nav[data-type="scrollbar"] li .pack-icon-favorites { width: 1.2rem; height: 1.2rem; font-size: 0; vertical-align: middle; background: transparent no-repeat center center / 1.2rem; } nav[data-type="scrollbar"] li span:not([hidden]) { display: inline-block; } nav[data-type="scrollbar"] li .pack-icon-search { background-image: url(scrolling/images/icons/search.svg); background-size: 1.8rem } nav[data-type="scrollbar"] li .pack-icon-favorites { background-image: url(scrolling/images/icons/favorites.svg); } /* Themes */ /*.skin-comms*/ nav[data-type="scrollbar"] p { background: rgba(51,204,204,0.8); }