Fix CSS progress bar

nbedos · nbedos · commit 7f06b96b4bc8 · 2019-06-16T13:43:07.000+02:00
diff --git a/docs/examples/awesome_window_frame.svg b/docs/examples/awesome_window_frame.svg
@@ -13,7 +13,12 @@
             dominant-baseline: text-before-edge;
             white-space: pre;
         }
-     @keyframes roll {
+    
+            :root {
+                --animation-duration: 27349ms;
+            }
+
+            @keyframes roll {
                 0.000%{transform:translateY(0px)}
 1.426%{transform:translateY(-323px)}
 1.953%{transform:translateY(-646px)}
@@ -109,11 +114,11 @@
             }
 
             #screen_view {
-                animation-duration: 27349ms;
+                animation-duration: var(--animation-duration);
                 animation-iteration-count:infinite;
                 animation-name:roll;
                 animation-timing-function: steps(1,end);
-            }     
+            }
         ]]></style>
         <style type="text/css" id="user-style">
             /* gjm8 color theme (source: https://terminal.sexy/) */
diff --git a/docs/examples/awesome_window_frame_js.svg b/docs/examples/awesome_window_frame_js.svg
@@ -13,7 +13,12 @@
             dominant-baseline: text-before-edge;
             white-space: pre;
         }
-     @keyframes roll {
+    
+            :root {
+                --animation-duration: 27349ms;
+            }
+
+            @keyframes roll {
                 0.000%{transform:translateY(0px)}
 1.426%{transform:translateY(-323px)}
 1.953%{transform:translateY(-646px)}
@@ -109,11 +114,11 @@
             }
 
             #screen_view {
-                animation-duration: 27349ms;
+                animation-duration: var(--animation-duration);
                 animation-iteration-count:infinite;
                 animation-name:roll;
                 animation-timing-function: steps(1,end);
-            }     
+            }
         ]]></style>
         <style type="text/css" id="user-style">
             /* gjm8 color theme (source: https://terminal.sexy/) */
diff --git a/docs/examples/colors_progress_bar.svg b/docs/examples/colors_progress_bar.svg
@@ -13,7 +13,12 @@
             dominant-baseline: text-before-edge;
             white-space: pre;
         }
-     @keyframes roll {
+    
+            :root {
+                --animation-duration: 26450ms;
+            }
+
+            @keyframes roll {
                 0.000%{transform:translateY(0px)}
 4.635%{transform:translateY(-323px)}
 6.208%{transform:translateY(-646px)}
@@ -123,11 +128,11 @@
             }
 
             #screen_view {
-                animation-duration: 26450ms;
+                animation-duration: var(--animation-duration);
                 animation-iteration-count:infinite;
                 animation-name:roll;
                 animation-timing-function: steps(1,end);
-            }     
+            }
         ]]></style>
         <style type="text/css" id="user-style">
             /* gjm8 color theme (source: https://terminal.sexy/) */
diff --git a/docs/examples/htop_gjm8.svg b/docs/examples/htop_gjm8.svg
@@ -13,7 +13,12 @@
             dominant-baseline: text-before-edge;
             white-space: pre;
         }
-     @keyframes roll {
+    
+            :root {
+                --animation-duration: 13857ms;
+            }
+
+            @keyframes roll {
                 0.000%{transform:translateY(0px)}
 0.808%{transform:translateY(-323px)}
 11.741%{transform:translateY(-646px)}
@@ -62,11 +67,11 @@
             }
 
             #screen_view {
-                animation-duration: 13857ms;
+                animation-duration: var(--animation-duration);
                 animation-iteration-count:infinite;
                 animation-name:roll;
                 animation-timing-function: steps(1,end);
-            }     
+            }
         ]]></style>
         <style type="text/css" id="user-style">
             /* gjm8 color theme (source: https://terminal.sexy/) */
diff --git a/docs/examples/ipython_window_frame.svg b/docs/examples/ipython_window_frame.svg
@@ -13,7 +13,12 @@
             dominant-baseline: text-before-edge;
             white-space: pre;
         }
-     @keyframes roll {
+    
+            :root {
+                --animation-duration: 30174ms;
+            }
+
+            @keyframes roll {
                 0.000%{transform:translateY(0px)}
 0.003%{transform:translateY(-408px)}
 0.033%{transform:translateY(-816px)}
@@ -245,11 +250,11 @@
             }
 
             #screen_view {
-                animation-duration: 30174ms;
+                animation-duration: var(--animation-duration);
                 animation-iteration-count:infinite;
                 animation-name:roll;
                 animation-timing-function: steps(1,end);
-            }     
+            }
         ]]></style>
         <style type="text/css" id="user-style">
             /* gjm8 color theme (source: https://terminal.sexy/) */
diff --git a/docs/examples/unittest_solarized_dark.svg b/docs/examples/unittest_solarized_dark.svg
@@ -13,7 +13,12 @@
             dominant-baseline: text-before-edge;
             white-space: pre;
         }
-     @keyframes roll {
+    
+            :root {
+                --animation-duration: 17539ms;
+            }
+
+            @keyframes roll {
                 0.000%{transform:translateY(0px)}
 5.080%{transform:translateY(-323px)}
 5.719%{transform:translateY(-646px)}
@@ -95,11 +100,11 @@
             }
 
             #screen_view {
-                animation-duration: 17539ms;
+                animation-duration: var(--animation-duration);
                 animation-iteration-count:infinite;
                 animation-name:roll;
                 animation-timing-function: steps(1,end);
-            }     
+            }
         ]]></style>
         <style type="text/css" id="user-style">
             /* Solarized dark color theme (http://ethanschoonover.com/solarized) */
diff --git a/termtosvg/anim.py b/termtosvg/anim.py
@@ -498,17 +498,22 @@ def _embed_css(root, timings=None, animation_duration=None):
             for (time, offset) in sorted(timings.items())
         )
 
-        css_animation = """ @keyframes roll {{
+        css_animation = """
+            :root {{
+                --animation-duration: {duration}ms;
+            }}
+
+            @keyframes roll {{
                 {transforms}
             }}
 
             #screen_view {{
-                animation-duration: {duration}ms;
+                animation-duration: var(--animation-duration);
                 animation-iteration-count:infinite;
                 animation-name:roll;
                 animation-timing-function: steps(1,end);
-            }}     
-        """.format(transforms=transforms, duration=animation_duration)
+            }}
+        """.format(duration=animation_duration, transforms=transforms)
 
         style.text = etree.CDATA(css_body + css_animation)
 
