diff options
| author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2011-12-22 21:25:15 -0800 |
|---|---|---|
| committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2011-12-22 21:25:15 -0800 |
| commit | 9065114ef040023785d0a08c7e419f3b6b9570b8 (patch) | |
| tree | 3aa412409fbc631fc26190ece6add145af9a18b9 /css | |
| parent | 91c3056a62879e39d0536fd9b846795881de38e0 (diff) | |
| download | fosdem-2018-presentation-9065114ef040023785d0a08c7e419f3b6b9570b8.tar fosdem-2018-presentation-9065114ef040023785d0a08c7e419f3b6b9570b8.tar.gz | |
progress bar is now a div and uses the same transition + easing as slides (fixes #6)
Diffstat (limited to 'css')
| -rw-r--r-- | css/main.css | 38 |
1 files changed, 17 insertions, 21 deletions
diff --git a/css/main.css b/css/main.css index 25a45a6..9597123 100644 --- a/css/main.css +++ b/css/main.css @@ -131,9 +131,9 @@ h1 { -moz-transform-style: preserve-3d; transform-style: preserve-3d; - -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); } @@ -447,32 +447,28 @@ section img { * PROGRESS BAR *********************************************/ -progress::-webkit-progress-bar { - background: rgba(0,0,0,0.2); -} - -progress::-moz-progress-bar { - background: hsl(185, 85%, 50%); -} - -progress::-webkit-progress-value { - background: hsl(185, 85%, 50%); -} - -progress { +.progress { position: absolute; display: none; height: 4px; width: 100%; bottom: 0; left: 0; - padding: 0; - margin: 0; - border: 0; - outline: 0; - background: none; + background: rgba(0,0,0,0.2); } + + .progress span { + display: block; + background: hsl(185, 85%, 50%); + height: 100%; + width: 0px; + + -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + } /********************************************* * ROLLING LINKS |