Newer
Older
height: calc(var(--viewport-height) - var(--r-controls-spacing) * 2);
right: var(--r-controls-spacing);
}
// Hit area
.reader-progress-inner:after {
content: '';
position: absolute;
width: 200%;
height: 100%;
top: 0;
left: -50%;
background: rgba( 0, 0, 0, 0 );
z-index: -1;
}
.reader-progress-playhead {
position: absolute;
width: var(--r-reader-progress-width);
height: var(--r-reader-progress-width);
background-color: rgba(var(--r-overlay-element-bg-color), 1);
transition: background-color 0.2s ease, height 0.4s ease;
}
.reader-progress-slide {
position: absolute;
width: 100%;
background-color: rgba(var(--r-overlay-element-bg-color), 0.2);
box-shadow: 0 0 0px 1px rgba(var(--r-overlay-element-fg-color), 0.1);
transition: background-color 0.2s ease;
.reader-progress-slide.active {
background-color: rgba(var(--r-overlay-element-bg-color), 1);
.reader-progress-trigger {
position: absolute;
width: 100%;
transition: background-color 0.2s ease;
.reader-progress-slide.active.has-triggers {
background-color: rgba(var(--r-overlay-element-bg-color), 0.4);
z-index: 10;
}
.reader-progress-slide.active .reader-progress-trigger:after {
content: '';
position: absolute;
width: var(--r-reader-progress-trigger-size);
height: var(--r-reader-progress-trigger-size);
border-radius: 20px;
transform: translate(-50%, 0);
background-color: rgba(var(--r-overlay-element-bg-color), 0.8);
transition: transform 0.2s ease;
}
.reader-progress-slide.active .reader-progress-trigger.active:after {
transform: translate(calc( var(--r-reader-progress-width) * -2), 0);
background-color: rgba(var(--r-overlay-element-bg-color), 1);
/*********************************************
* PRINT STYLES
*********************************************/
@import 'print/pdf.scss';
@import 'print/paper.scss';