@scrollmeter/core/dist/index.css

Scrollmeter is a lightweight JavaScript library that visually displays scroll progress on web pages.

.scrollmeter-module__scrollmeter_container___Jfedd{--scrollmeter-bar-color: rgba(74, 144, 226, .9);--scrollmeter-bar-background: rgba(0, 0, 0, 0);--scrollmeter-bar-height: 10px;--scrollmeter-timeline-color: #838383;--scrollmeter-timeline-width: 4px;--scrollmeter-tooltip-background: #333;--scrollmeter-tooltip-font-color: white;--scrollmeter-tooltip-font-size: 12px;--scrollmeter-tooltip-padding-inline: 8px;--scrollmeter-tooltip-padding-block: 6px;--scrollmeter-tooltip-width: 150px;position:fixed;width:100%;left:0;top:0;background-color:var(--scrollmeter-bar-background);transition:opacity .2s ease-out;opacity:0}.scrollmeter-module__scrollmeter_container___Jfedd .scrollmeter-module__scrollmeter_bar___p8v2h{width:0;height:var(--scrollmeter-bar-height);background-color:var(--scrollmeter-bar-color);transition:width .2s ease-out}.scrollmeter-module__scrollmeter_container___Jfedd .scrollmeter-module__scrollmeter_timeline___he3FL{position:absolute;top:0;width:var(--scrollmeter-timeline-width);height:100%;background-color:var(--scrollmeter-timeline-color);cursor:pointer}.scrollmeter-module__scrollmeter_container___Jfedd .scrollmeter-module__scrollmeter_timeline___he3FL .scrollmeter-module__scrollmeter_timeline_tooltip___6ORWv{visibility:hidden;opacity:0}.scrollmeter-module__scrollmeter_container___Jfedd .scrollmeter-module__scrollmeter_timeline___he3FL:hover .scrollmeter-module__scrollmeter_timeline_tooltip___6ORWv{visibility:visible;opacity:1}.scrollmeter-module__scrollmeter_container___Jfedd .scrollmeter-module__scrollmeter_timeline_tooltip___6ORWv{position:absolute;display:flex;flex-direction:column;gap:4px;top:calc(var(--scrollmeter-bar-height) + 16px);padding-block:var(--scrollmeter-tooltip-padding-block);padding-inline:var(--scrollmeter-tooltip-padding-inline);width:var(--scrollmeter-tooltip-width);background-color:var(--scrollmeter-tooltip-background);color:var(--scrollmeter-tooltip-font-color);transition:opacity .2s ease-out;overflow:hidden}.scrollmeter-module__scrollmeter_container___Jfedd .scrollmeter-module__scrollmeter_timeline_tooltip___6ORWv>p{width:100%;margin:0;padding-block:4px 2px;font-size:var(--scrollmeter-tooltip-font-size);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.scrollmeter-module__scrollmeter_container___Jfedd .scrollmeter-module__scrollmeter_timeline_tooltip___6ORWv:after{content:"";position:absolute;top:-5px;border-style:solid;border-color:transparent transparent #333}.scrollmeter-module__scrollmeter_container___Jfedd .scrollmeter-module__scrollmeter_timeline_tooltip_left___TU1Oc{left:1px;border-radius:0 5px 5px}.scrollmeter-module__scrollmeter_container___Jfedd .scrollmeter-module__scrollmeter_timeline_tooltip_left___TU1Oc:after{left:0;border-width:0 5px 5px 1px}.scrollmeter-module__scrollmeter_container___Jfedd .scrollmeter-module__scrollmeter_timeline_tooltip_right___ogXqk{right:calc(var(--scrollmeter-timeline-width) - var(--scrollmeter-timeline-width) / 2);border-radius:5px 0 5px 5px}.scrollmeter-module__scrollmeter_container___Jfedd .scrollmeter-module__scrollmeter_timeline_tooltip_right___ogXqk:after{right:0;border-width:0 1px 5px 5px}.scrollmeter-module__scrollmeter_container___Jfedd .scrollmeter-module__scrollmeter_timeline_tooltip_center___rVCHc{left:50%;transform:translate(-50%);border-radius:5px}.scrollmeter-module__scrollmeter_container___Jfedd .scrollmeter-module__scrollmeter_timeline_tooltip_center___rVCHc:after{left:50%;transform:translate(-50%);border-width:0 5px 5px 5px}.scrollmeter-module__scrollmeter_container___Jfedd .scrollmeter-module__scrollmeter_timeline_tooltip___6ORWv .scrollmeter-module__scrollmeter_timeline_preview___FqLou{width:100%;aspect-ratio:16/9}.scrollmeter-module__scrollmeter_container___Jfedd .scrollmeter-module__scrollmeter_timeline_tooltip___6ORWv .scrollmeter-module__scrollmeter_timeline_preview___FqLou>img{width:100%;height:100%;display:block}