Icontem

File: css/advanced-progress-tracker.min.css

Recommend this page to a friend!
  Classes of David Whitworth  >  Advanced jQuery Scroll Progress Tracker  >  css/advanced-progress-tracker.min.css  >  Download  
File: css/advanced-progress-tracker.min.css
Role: Auxiliary data
Content type: text/plain
Description: Minified stylesheet
Class: Advanced jQuery Scroll Progress Tracker
Show side bar with the page scroll progress
Author: By
Last change: Adjusted the border-radius of the stops
Date: 3 years ago
Size: 10,165 bytes
 

Contents

Class file image Download
.spt-centerAll{margin:0 auto;max-width:900px}.spt-trackThis hr{margin-top:0px;border-top:1px solid rgba(0,0,0,0.07);border-bottom:none}.bold{font-weight:bold}.italic{font-style:italic}.underline{text-decoration:underline}.spt-mobileOnly{display:none !important}.spt-horizontalScrollProgress{padding-top:29px;height:31px}.spt-horizontalScrollProgress.spt-fixed{position:fixed;top:0;left:0;right:0;background:#fff;background:-moz-linear-gradient(top, #fff 0, rgba(255,255,255,0) 100%);background:-webkit-linear-gradient(top, #fff 0, rgba(255,255,255,0) 100%);background:linear-gradient(to bottom, #fff 0, rgba(255,255,255,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0)}.spt-horizontalScrollProgress.spt-bottom{top:auto;bottom:0;background:rgba(255,255,255,0);background:-moz-linear-gradient(top, rgba(255,255,255,0) 0, #fff 100%);background:-webkit-linear-gradient(top, rgba(255,255,255,0) 0, #fff 100%);background:linear-gradient(to bottom, rgba(255,255,255,0) 0, #fff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0)}.spt-horizontalScrollProgress .spt-scrollProgress{display:block;border:none;width:100%;height:2px;color:#e70000;background-color:rgba(0,0,0,0.3);-webkit-appearance:none;-moz-appearance:none;appearance:none}.spt-horizontalScrollProgress .spt-scrollProgress::-webkit-progress-bar{background-color:rgba(0,0,0,0.3)}.spt-horizontalScrollProgress .spt-scrollProgress::-webkit-progress-value{background:#e70000;background:-moz-linear-gradient(left, #810000 0, #e70000 calc(100% - 10px), #000 100%);background:-webkit-linear-gradient(left, #810000 0, #e70000 calc(100% - 10px), #000 100%);background:linear-gradient(to right, #810000 0, #e70000 calc(100% - 10px), #000 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@color2', endColorstr='@color3', GradientType=1)}.spt-horizontalScrollProgress .spt-scrollProgress::-moz-progress-bar{background:#e70000;background:-moz-linear-gradient(left, #810000 0, #e70000 calc(100% - 10px), #000 100%);background:-webkit-linear-gradient(left, #810000 0, #e70000 calc(100% - 10px), #000 100%);background:linear-gradient(to right, #810000 0, #e70000 calc(100% - 10px), #000 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@color2', endColorstr='@color3', GradientType=1)}.spt-horizontalScrollProgress .spt-scrollProgressContainer{display:block;position:relative;width:100%;height:2px;color:#e70000;background-color:rgba(0,0,0,0.3);overflow:hidden}.spt-horizontalScrollProgress .spt-scrollProgressContainer .spt-scrollProgressBar{display:block;position:absolute;width:0%;height:inherit;background:#e70000;background:-moz-linear-gradient(left, #810000 0, #e70000 calc(100% - 10px), #000 100%);background:-webkit-linear-gradient(left, #810000 0, #e70000 calc(100% - 10px), #000 100%);background:linear-gradient(to right, #810000 0, #e70000 calc(100% - 10px), #000 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@color2', endColorstr='@color3', GradientType=1)}.spt-verticalScrollProgress{display:block;position:fixed;top:50px;left:20px;bottom:50px;width:180px}.spt-verticalScrollProgress.spt-verRight{right:20px;left:auto}.spt-verticalScrollProgress.spt-untitled{width:20px}.spt-verticalScrollProgress .spt-verticalScrollProgressContainer{display:block;position:absolute;top:0;bottom:0;left:0;width:2px;background-color:rgba(0,0,0,0.3);overflow:hidden}.spt-verticalScrollProgress .spt-verticalScrollProgressContainer .spt-verticalScrollProgressBar{position:inherit;width:inherit;height:0;border-bottom:3px solid #000;background:#810000;background:-moz-linear-gradient(top, #810000 0, #e70000 100%);background:-webkit-linear-gradient(top, #810000 0, #e70000 100%);background:linear-gradient(to bottom, #810000 0, #e70000 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=0)}.spt-scrollStopContainer,.spt-vertScrollStopContainer{position:relative}.spt-scrollStopContainer .spt-stopCircle,.spt-vertScrollStopContainer .spt-stopCircle,.spt-scrollStopContainer .spt-finalStopCircle,.spt-vertScrollStopContainer .spt-finalStopCircle{position:absolute;border:2px solid rgba(0,0,0,0.5);border-radius:50%;width:16px;height:16px;text-align:center;text-decoration:none;line-height:16px;color:rgba(0,0,0,0.5);background-color:#fff;cursor:pointer}.spt-scrollStopContainer .spt-stopCircle.spt-reached,.spt-vertScrollStopContainer .spt-stopCircle.spt-reached,.spt-scrollStopContainer .spt-finalStopCircle.spt-reached,.spt-vertScrollStopContainer .spt-finalStopCircle.spt-reached,.spt-scrollStopContainer .spt-stopCircle.spt-hover,.spt-vertScrollStopContainer .spt-stopCircle.spt-hover,.spt-scrollStopContainer .spt-finalStopCircle.spt-hover,.spt-vertScrollStopContainer .spt-finalStopCircle.spt-hover{color:#000;border-color:#e70000}.spt-scrollStopContainer .spt-finalStopCircle,.spt-vertScrollStopContainer .spt-finalStopCircle{border-width:3px;width:18px;height:18px;line-height:18px}.spt-scrollStopContainer .spt-stopCircle{top:-11px}.spt-scrollStopContainer .spt-finalStopCircle{top:-13px;right:0}.spt-vertScrollStopContainer{position:absolute;top:0;bottom:0}.spt-vertScrollStopContainer .spt-stopCircle{left:-9px}.spt-vertScrollStopContainer .spt-finalStopCircle{left:-11px;bottom:-3px}.spt-styleFill .spt-vertScrollStopContainer{top:2px;bottom:20px}.spt-styleFill .spt-vertScrollStopContainer .spt-stopCircle,.spt-styleFill .spt-vertScrollStopContainer .spt-finalStopCircle{background-color:#b3b3b3}.spt-styleFill .spt-vertScrollStopContainer .spt-stopCircle.spt-reached,.spt-styleFill .spt-vertScrollStopContainer .spt-finalStopCircle.spt-reached,.spt-styleFill .spt-vertScrollStopContainer .spt-stopCircle.spt-hover,.spt-styleFill .spt-vertScrollStopContainer .spt-finalStopCircle.spt-hover{background-color:#fff}.spt-scrollStopTitles,.spt-vertScrollStopTitles{display:block;position:absolute}.spt-scrollStopTitles .spt-stopTitle,.spt-vertScrollStopTitles .spt-stopTitle,.spt-scrollStopTitles .spt-finalStopTitle,.spt-vertScrollStopTitles .spt-finalStopTitle{position:absolute;color:rgba(0,0,0,0.5);cursor:pointer}.spt-scrollStopTitles .spt-stopTitle.spt-reached,.spt-vertScrollStopTitles .spt-stopTitle.spt-reached,.spt-scrollStopTitles .spt-finalStopTitle.spt-reached,.spt-vertScrollStopTitles .spt-finalStopTitle.spt-reached,.spt-scrollStopTitles .spt-stopTitle.spt-hover,.spt-vertScrollStopTitles .spt-stopTitle.spt-hover,.spt-scrollStopTitles .spt-finalStopTitle.spt-hover,.spt-vertScrollStopTitles .spt-finalStopTitle.spt-hover{color:#000}.spt-scrollStopTitles .spt-stopTitle.spt-ellipsis,.spt-vertScrollStopTitles .spt-stopTitle.spt-ellipsis,.spt-scrollStopTitles .spt-finalStopTitle.spt-ellipsis,.spt-vertScrollStopTitles .spt-finalStopTitle.spt-ellipsis{max-width:calc(100%);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.spt-scrollStopTitles{top:0;right:0;left:0}.spt-scrollStopTitles .spt-stopTitle.invisible,.spt-scrollStopTitles .spt-finalStopTitle.invisible{display:none}.spt-scrollStopTitles .spt-finalStopTitle{right:0}.spt-vertScrollStopTitles{top:0;right:0;bottom:0;width:170px}.spt-vertScrollStopTitles .spt-stopTitle,.spt-vertScrollStopTitles .spt-finalStopTitle{line-height:14px;margin-top:2px;padding-left:10px}.spt-vertScrollStopTitles .spt-finalStopTitle{bottom:2px}.spt-styleFill .spt-vertScrollStopTitles{top:2px;bottom:20px}.spt-horizontalScrollProgress.spt-styleFill{height:30px;padding:0}.spt-horizontalScrollProgress.spt-styleFill .spt-scrollProgress,.spt-horizontalScrollProgress.spt-styleFill .spt-scrollProgressContainer{height:30px}.spt-horizontalScrollProgress.spt-styleFill .spt-scrollProgress::-webkit-progress-value{background:#810000;background:-moz-linear-gradient(left, #810000 0, #e70000 100%);background:-webkit-linear-gradient(left, #810000 0, #e70000 100%);background:linear-gradient(to right, #810000 0, #e70000 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1)}.spt-horizontalScrollProgress.spt-styleFill .spt-scrollProgress::-moz-progress-bar{background:#810000;background:-moz-linear-gradient(left, #810000 0, #e70000 100%);background:-webkit-linear-gradient(left, #810000 0, #e70000 100%);background:linear-gradient(to right, #810000 0, #e70000 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1)}.spt-horizontalScrollProgress.spt-styleFill .spt-scrollProgressContainer .spt-scrollProgressBar{background:#810000;background:-moz-linear-gradient(left, #810000 0, #e70000 100%);background:-webkit-linear-gradient(left, #810000 0, #e70000 100%);background:linear-gradient(to right, #810000 0, #e70000 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@color1', endColorstr='@color2', GradientType=1)}.spt-horizontalScrollProgress.spt-styleFill .spt-scrollStopContainer{width:calc(100% - 38px)}.spt-horizontalScrollProgress.spt-styleFill .spt-scrollStopContainer .spt-stopCircle{top:-8px}.spt-horizontalScrollProgress.spt-styleFill .spt-scrollStopContainer .spt-finalStopCircle{top:-10px}.spt-horizontalScrollProgress.spt-styleFill .spt-scrollStopTitles .spt-onlyActive{line-height:28px;color:#fff}.spt-verticalScrollProgress.spt-styleFill .spt-verticalScrollProgressContainer{border:2px solid rgba(0,0,0,0.5);border-radius:6px;left:-13px;width:25px;overflow:hidden}.spt-verticalScrollProgress.spt-styleFill .spt-vertScrollStopContainer .spt-finalStopCircle{bottom:-18px}.spt-verticalScrollProgress.spt-styleFill .spt-vertScrollStopTitles .spt-finalStopTitle{bottom:-13px}.spt-smallDevice.spt-horizontalScrollProgress{background-color:rgba(255,255,255,0.95)}.spt-smallDevice.spt-desktopOnly{display:none !important}.spt-smallDevice.spt-mobileOnly{display:block !important}.spt-smallDevice.spt-scrollProgress,.spt-smallDevice.spt-scrollProgressContainer,.spt-smallDevice.spt-scrollStopContainer,.spt-smallDevice.spt-scrollStopTitles{width:calc(100% - 32px)}.spt-smallDevice.spt-scrollStopContainer .spt-finalStopCircle{right:-6px}