css: add new icons (mic, video, mic slash, video slash, cancel)

Fix icon spin animation for popup "reconnecting to your pad"
2020-03-29 13:49:33 +02:00 · 2020-03-29 13:49:33 +02:00 · 8e467ce9aa
commit 8e467ce9aa
parent 0923cd3f21
9 changed files with 256 additions and 89 deletions
--- a/src/static/css/pad/icons.css
+++ b/src/static/css/pad/icons.css
@ -1,30 +1,16 @@
@font-face {
  font-family: "fontawesome-etherpad";
-  src:url("../../../static/font/fontawesome-etherpad.eot");
-  src:url("../../../static/font/fontawesome-etherpad.eot?#iefix") format("embedded-opentype"),
-    url("../../../static/font/fontawesome-etherpad.woff") format("woff"),
-    url("../../../static/font/fontawesome-etherpad.ttf") format("truetype"),
+  src:url("../../../static/font/fontawesome-etherpad.eot?2");
+  src:url("../../../static/font/fontawesome-etherpad.eot?2#iefix") format("embedded-opentype"),
+    url("../../../static/font/fontawesome-etherpad.woff?2") format("woff"),
+    url("../../../static/font/fontawesome-etherpad.ttf?2") format("truetype"),
    url("../../../static/font/fontawesome-etherpad.svg#fontawesome-etherpad") format("svg");
  font-weight: normal;
  font-style: normal;

 }

-[data-icon]:before,
-[class^="icon-"]:before,
-[class*=" icon-"]:before {
-  font-family: "fontawesome-etherpad" !important;
-  font-style: normal !important;
-  font-weight: normal !important;
-  font-variant: normal !important;
-  text-transform: none !important;
-  speak: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.buttonicon {
+.buttonicon{
  width: 16px;
  height: 16px;
  display: inline-block;
@ -34,33 +20,45 @@
  background: none;
  font-family: "fontawesome-etherpad";
  font-size: 15px;
+  text-align: center;
  font-style: normal;
  font-weight: normal;
  color: #666;
  cursor: pointer;
+
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
 }

-.buttonicon::-moz-focus-inner {
-  padding: 0;
-  border: 0
-}
-
-.buttonicon:before  {
+[class^="buttonicon-"]:before, [class*=" buttonicon-"]:before {
  font-family: "fontawesome-etherpad";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }

-.buttonicon:focus{
-  border: 1px solid #666;
-}
-.buttonicon-bold:before {
-  content: "\e81c";
-}
-.buttonicon-italic:before {
-  content: "\e81d";
-}
-.buttonicon-underline:before {
-  content: "\e817";
-}
+
 .buttonicon-strikethrough:before {
  content: "\e818";
 }
@ -105,4 +103,104 @@
 }
 .buttonicon-savedRevision:before {
  content: "\e835";
+}
+
+
+.buttonicon-align-left:before { content: '\e800'; } /* '' */
+.buttonicon-print:before { content: '\e801'; } /* '' */
+.buttonicon-doc:before { content: '\e802'; } /* '' */
+.buttonicon-file-pdf:before { content: '\e803'; } /* '' */
+.buttonicon-file-word:before { content: '\e804'; } /* '' */
+.buttonicon-file-excel:before { content: '\e805'; } /* '' */
+.buttonicon-file-powerpoint:before { content: '\e806'; } /* '' */
+.buttonicon-file-image:before { content: '\e807'; } /* '' */
+.buttonicon-users:before { content: '\e808'; } /* '' */
+.buttonicon-user:before { content: '\e809'; } /* '' */
+.buttonicon-mail:before { content: '\e80a'; } /* '' */
+.buttonicon-videocam:before { content: '\e80b'; } /* '' */
+.buttonicon-picture:before { content: '\e80c'; } /* '' */
+.buttonicon-eye-off:before { content: '\e80d'; } /* '' */
+.buttonicon-align-center:before { content: '\e80f'; } /* '' */
+.buttonicon-align-right:before { content: '\e810'; } /* '' */
+.buttonicon-align-justify:before { content: '\e811'; } /* '' */
+.buttonicon-list:before { content: '\e812'; } /* '' */
+.buttonicon-indent-left:before { content: '\e813'; } /* '' */
+.buttonicon-indent-right:before { content: '\e814'; } /* '' */
+.buttonicon-list-bullet:before { content: '\e815'; } /* '' */
+.buttonicon-list-numbered:before { content: '\e816'; } /* '' */
+.buttonicon-underline:before { content: '\e817'; } /* '' */
+.buttonicon-strike:before { content: '\e818'; } /* '' */
+.buttonicon-superscript:before { content: '\e819'; } /* '' */
+.buttonicon-subscript:before { content: '\e81a'; } /* '' */
+.buttonicon-font:before { content: '\e81b'; } /* '' */
+.buttonicon-bold:before { content: '\e81c'; } /* '' */
+.buttonicon-italic:before { content: '\e81d'; } /* '' */
+.buttonicon-header:before { content: '\e81e'; } /* '' */
+.buttonicon-text-height:before { content: '\e81f'; } /* '' */
+.buttonicon-text-width:before { content: '\e820'; } /* '' */
+.buttonicon-to-start:before { content: '\e821'; } /* '' */
+.buttonicon-to-end:before { content: '\e822'; } /* '' */
+.buttonicon-ccw:before { content: '\e823'; } /* '' */
+.buttonicon-cw:before { content: '\e824'; } /* '' */
+.buttonicon-arrows-cw:before { content: '\e825'; } /* '' */
+.buttonicon-file-code:before { content: '\e826'; } /* '' */
+.buttonicon-code:before { content: '\e827'; } /* '' */
+.buttonicon-chat:before { content: '\e828'; } /* '' */
+.buttonicon-comment-empty:before { content: '\e829'; } /* '' */
+.buttonicon-trash-empty:before { content: '\e82a'; } /* '' */
+.buttonicon-mic:before { content: '\e82b'; } /* '' */
+.buttonicon-play:before { content: '\e82c'; } /* '' */
+.buttonicon-stop:before { content: '\e82d'; } /* '' */
+.buttonicon-pause:before { content: '\e82e'; } /* '' */
+.buttonicon-gauge:before { content: '\e82f'; } /* '' */
+.buttonicon-brush:before { content: '\e830'; } /* '' */
+.buttonicon-slideshare:before { content: '\e831'; } /* '' */
+.buttonicon-tasks:before { content: '\e832'; } /* '' */
+.buttonicon-cog:before { content: '\e833'; } /* '' */
+.buttonicon-exchange:before { content: '\e834'; } /* '' */
+.buttonicon-star-empty:before { content: '\e835'; } /* '' */
+.buttonicon-star:before { content: '\e836'; } /* '' */
+.buttonicon-clock:before { content: '\e837'; } /* '' */
+.buttonicon-comment:before { content: '\e838'; } /* '' */
+.buttonicon-pencil:before { content: '\e839'; } /* '' */
+.buttonicon-link:before { content: '\e83a'; } /* '' */
+.buttonicon-video:before { content: '\e83b'; } /* '' */
+.buttonicon-video-slash:before { content: '\e83c'; } /* '' */
+.buttonicon-microphone-alt:before { content: '\e83d'; } /* '' */
+.buttonicon-microphone-alt-slash:before { content: '\e83e'; } /* '' */
+.buttonicon-compress:before { content: '\e83f'; } /* '' */
+.buttonicon-expand:before { content: '\e840'; } /* '' */
+.buttonicon-spin5:before { content: '\e841'; } /* '' */
+.buttonicon-cancel:before { content: '\e842'; } /* '' */
+.buttonicon-table:before { content: '\f0ce'; } /* '' */
+
+.icon-spin {
+  -webkit-animation: spinAnimation 2s infinite linear;
+  animation: spinAnimation 2s infinite linear;
+  font-family: "fontawesome-etherpad";
+  font-size:22px;
+  z-index:150;
+  width:22px;
+  height:22px;
+}
+
+@-webkit-keyframes spinAnimation {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes spinAnimation {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
 }
--- a/src/static/css/pad/loadingbox.css
+++ b/src/static/css/pad/loadingbox.css
@ -22,41 +22,6 @@
  padding:10px;
 }

-.loadingAnimation{
-  -webkit-animation: loadingAnimation 2s infinite linear;
-  animation: loadingAnimation 2s infinite linear;
-  font-family: "fontawesome-etherpad";
-  font-size:24px;
-  z-index:150;
-  width:25px;
-  height:25px;
-}
-
-.loadingAnimation:before{
-  content: "\e80e";
-}
-
-@-webkit-keyframes loadingAnimation {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@keyframes loadingAnimation {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-
 #passwordRequired, #permissionDenied, #wrongPassword, #noCookie {
  display:none;
 }
--- a/src/static/font/config.json
+++ b/src/static/font/config.json
@ -1,6 +1,6 @@
 {
  "name": "fontawesome-etherpad",
-  "css_prefix_text": "icon-",
+  "css_prefix_text": "buttonicon-",
  "css_use_suffix": false,
  "hinting": true,
  "units_per_em": 1000,
@ -138,12 +138,6 @@
      "code": 59443,
      "src": "fontawesome"
    },
-    {
-      "uid": "19c50c52858a81de58f9db488aba77bc",
-      "css": "mic",
-      "code": 59435,
-      "src": "fontawesome"
-    },
    {
      "uid": "598a5f2bcf3521d1615de8e1881ccd17",
      "css": "clock",
@ -330,12 +324,6 @@
      "code": 59439,
      "src": "fontawesome"
    },
-    {
-      "uid": "cda0cdcfd38f5f1d9255e722dad42012",
-      "css": "spinner",
-      "code": 59406,
-      "src": "fontawesome"
-    },
    {
      "uid": "fa9a0b7e788c2d78e24cef1de6b70e80",
      "css": "brush",
@ -365,6 +353,108 @@
      "css": "table",
      "code": 61646,
      "src": "fontawesome"
+    },
+    {
+      "uid": "1569a5b2bebe7e28bb0d26ddeca34fc8",
+      "css": "video",
+      "code": 59451,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M656.6 125H93.4C41.8 125 0 166.8 0 218.4V781.6C0 833.2 41.8 875 93.4 875H656.6C708.2 875 750 833.2 750 781.6V218.4C750 166.8 708.2 125 656.6 125ZM1026.6 198.6L812.5 346.3V653.7L1026.6 801.2C1068 829.7 1125 800.6 1125 750.8V249C1125 199.4 1068.2 170.1 1026.6 198.6Z",
+        "width": 1125
+      },
+      "search": [
+        "video"
+      ]
+    },
+    {
+      "uid": "8fe2c571b78d019e24cab0b780cb61d6",
+      "css": "video-slash",
+      "code": 59452,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M1237.9 894.7L1130.5 811.7C1160.5 809 1187.5 785 1187.5 751V249C1187.5 199.2 1130.7 170.1 1089.1 198.6L875 346.3V614.3L812.5 566V218.4C812.5 166.8 770.7 125 719.1 125H242L88.9 6.6C75.2-3.9 55.7-1.6 44.9 12.1L6.6 61.3C-3.9 75-1.6 94.5 12.1 105.1L83.4 160.2 812.5 723.8 1161.1 993.4C1174.8 1003.9 1194.3 1001.6 1205.1 987.9L1243.4 938.5C1254.1 925 1251.6 905.3 1237.9 894.7ZM62.5 781.6C62.5 833.2 104.3 875 155.9 875H719.1C741 875 760.9 867.2 777 854.5L62.5 302.1V781.6Z",
+        "width": 1250
+      },
+      "search": [
+        "video-slash"
+      ]
+    },
+    {
+      "uid": "d8020fccc088a524f7cc6db1f329cb3e",
+      "css": "microphone-alt",
+      "code": 59453,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M656.3 375H625C607.7 375 593.8 389 593.8 406.3V500C593.8 646.1 467.8 763.3 318.8 748.8 188.9 736.1 93.8 619.4 93.8 488.9V406.3C93.8 389 79.8 375 62.5 375H31.3C14 375 0 389 0 406.3V484.7C0 659.8 124.9 815.8 296.9 839.6V906.3H187.5C170.2 906.3 156.3 920.2 156.3 937.5V968.8C156.3 986 170.2 1000 187.5 1000H500C517.3 1000 531.3 986 531.3 968.8V937.5C531.3 920.2 517.3 906.3 500 906.3H390.6V840.3C558 817.3 687.5 673.6 687.5 500V406.3C687.5 389 673.5 375 656.3 375ZM343.8 687.5C447.3 687.5 531.3 603.6 531.3 500H364.6C353.1 500 343.8 493 343.8 484.4V453.1C343.8 444.5 353.1 437.5 364.6 437.5H531.3V375H364.6C353.1 375 343.8 368 343.8 359.4V328.1C343.8 319.5 353.1 312.5 364.6 312.5H531.3V250H364.6C353.1 250 343.8 243 343.8 234.4V203.1C343.8 194.5 353.1 187.5 364.6 187.5H531.3C531.3 83.9 447.3 0 343.8 0S156.3 83.9 156.3 187.5V500C156.3 603.6 240.2 687.5 343.8 687.5Z",
+        "width": 688
+      },
+      "search": [
+        "microphone-alt"
+      ]
+    },
+    {
+      "uid": "7d9dd931e0e6305cc5eed55efa435d7c",
+      "css": "microphone-alt-slash",
+      "code": 59454,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M1237.9 894.7L930.2 656.9C954.6 609.8 968.8 556.6 968.8 500V406.3C968.8 389 954.8 375 937.5 375H906.3C889 375 875 389 875 406.3V500C875 535 867.3 568 854.1 598L802.2 558C808.3 539.6 812.5 520.4 812.5 500H727.2L646.4 437.5H812.5V375H645.8C634.3 375 625 368 625 359.4V328.1C625 319.5 634.3 312.5 645.8 312.5H812.5V250H645.8C634.3 250 625 243 625 234.4V203.1C625 194.5 634.3 187.5 645.8 187.5H812.5C812.5 84 728.6 0 625 0S437.5 84 437.5 187.5V276.1L88.8 6.6C75.2-4 55.5-1.6 44.9 12.1L6.6 61.4C-4 75-1.6 94.7 12.1 105.3L1161.2 993.4C1174.8 1004 1194.5 1001.6 1205.1 987.9L1243.4 938.6C1254 925 1251.6 905.3 1237.9 894.7ZM781.3 906.3H671.9V840.3C694.7 837.1 717 831.9 738.2 824.5L639.8 748.4C626.7 749.2 613.6 750.1 600 748.8 490.9 738.1 407.2 653.8 382.9 549.9L281.3 471.3V484.7C281.3 659.8 406.2 815.8 578.1 839.6V906.3H468.8C451.5 906.3 437.5 920.2 437.5 937.5V968.8C437.5 986 451.5 1000 468.8 1000H781.3C798.5 1000 812.5 986 812.5 968.8V937.5C812.5 920.2 798.5 906.3 781.3 906.3Z",
+        "width": 1250
+      },
+      "search": [
+        "microphone-alt-slash"
+      ]
+    },
+    {
+      "uid": "63aa8ba99d3f31973dd2ef65274a03bd",
+      "css": "compress",
+      "code": 59455,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M851.6 375H609.4C583.4 375 562.5 354.1 562.5 328.1V85.9C562.5 73 573 62.5 585.9 62.5H664.1C677 62.5 687.5 73 687.5 85.9V250H851.6C864.5 250 875 260.5 875 273.4V351.6C875 364.5 864.5 375 851.6 375ZM312.5 328.1V85.9C312.5 73 302 62.5 289.1 62.5H210.9C198 62.5 187.5 73 187.5 85.9V250H23.4C10.5 250 0 260.5 0 273.4V351.6C0 364.5 10.5 375 23.4 375H265.6C291.6 375 312.5 354.1 312.5 328.1ZM312.5 914.1V671.9C312.5 645.9 291.6 625 265.6 625H23.4C10.5 625 0 635.5 0 648.4V726.6C0 739.5 10.5 750 23.4 750H187.5V914.1C187.5 927 198 937.5 210.9 937.5H289.1C302 937.5 312.5 927 312.5 914.1ZM687.5 914.1V750H851.6C864.5 750 875 739.5 875 726.6V648.4C875 635.5 864.5 625 851.6 625H609.4C583.4 625 562.5 645.9 562.5 671.9V914.1C562.5 927 573 937.5 585.9 937.5H664.1C677 937.5 687.5 927 687.5 914.1Z",
+        "width": 875
+      },
+      "search": [
+        "compress"
+      ]
+    },
+    {
+      "uid": "d71c270fcbdffa89ee7b646e9d5a2667",
+      "css": "expand",
+      "code": 59456,
+      "src": "custom_icons",
+      "selected": true,
+      "svg": {
+        "path": "M0 351.6V109.4C0 83.4 20.9 62.5 46.9 62.5H289.1C302 62.5 312.5 73 312.5 85.9V164.1C312.5 177 302 187.5 289.1 187.5H125V351.6C125 364.5 114.5 375 101.6 375H23.4C10.5 375 0 364.5 0 351.6ZM562.5 85.9V164.1C562.5 177 573 187.5 585.9 187.5H750V351.6C750 364.5 760.5 375 773.4 375H851.6C864.5 375 875 364.5 875 351.6V109.4C875 83.4 854.1 62.5 828.1 62.5H585.9C573 62.5 562.5 73 562.5 85.9ZM851.6 625H773.4C760.5 625 750 635.5 750 648.4V812.5H585.9C573 812.5 562.5 823 562.5 835.9V914.1C562.5 927 573 937.5 585.9 937.5H828.1C854.1 937.5 875 916.6 875 890.6V648.4C875 635.5 864.5 625 851.6 625ZM312.5 914.1V835.9C312.5 823 302 812.5 289.1 812.5H125V648.4C125 635.5 114.5 625 101.6 625H23.4C10.5 625 0 635.5 0 648.4V890.6C0 916.6 20.9 937.5 46.9 937.5H289.1C302 937.5 312.5 927 312.5 914.1Z",
+        "width": 875
+      },
+      "search": [
+        "expand"
+      ]
+    },
+    {
+      "uid": "19c50c52858a81de58f9db488aba77bc",
+      "css": "mic",
+      "code": 59435,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "5d2d07f112b8de19f2c0dbfec3e42c05",
+      "css": "spin5",
+      "code": 59457,
+      "src": "fontelico"
+    },
+    {
+      "uid": "5211af474d3a9848f67f945e2ccaf143",
+      "css": "cancel",
+      "code": 59458,
+      "src": "fontawesome"
    }
  ]
 }
--- a/src/static/font/fontawesome-etherpad.eot
+++ b/src/static/font/fontawesome-etherpad.eot
--- a/src/static/font/fontawesome-etherpad.svg
+++ b/src/static/font/fontawesome-etherpad.svg
@ -1,7 +1,7 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2018 by original authors @ fontello.com</metadata>
+<metadata>Copyright (C) 2020 by original authors @ fontello.com</metadata>
 <defs>
 <font id="fontawesome-etherpad" horiz-adv-x="1000" >
 <font-face font-family="fontawesome-etherpad" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
@ -34,8 +34,6 @@

 <glyph glyph-name="eye-off" unicode="&#xe80d;" d="M310 105l43 79q-48 35-76 88t-27 114q0 67 34 125-128-65-213-197 94-144 239-209z m217 424q0 11-8 19t-19 7q-70 0-120-50t-50-119q0-11 8-19t19-8 19 8 8 19q0 48 34 82t82 34q11 0 19 8t8 19z m202 106q0-4 0-5-59-105-176-316t-176-316l-28-50q-5-9-15-9-7 0-75 39-9 6-9 16 0 7 25 49-80 36-147 96t-117 137q-11 17-11 38t11 39q86 131 212 207t277 76q50 0 100-10l31 54q5 9 15 9 3 0 10-3t18-9 18-10 18-10 10-7q9-5 9-15z m21-249q0-78-44-142t-117-91l157 280q4-25 4-47z m250-72q0-19-11-38-22-36-61-81-84-96-194-149t-234-53l41 74q119 10 219 76t169 171q-65 100-158 164l35 63q53-36 102-85t81-103q11-19 11-39z" horiz-adv-x="1000" />

-<glyph glyph-name="spinner" unicode="&#xe80e;" d="M294 72q0-29-21-50t-51-21q-29 0-50 21t-21 50q0 30 21 51t50 21 51-21 21-51z m277-115q0-29-20-50t-51-21-50 21-21 50 21 51 50 21 51-21 20-51z m-392 393q0-30-21-50t-51-21-50 21-21 50 21 51 50 20 51-20 21-51z m670-278q0-29-21-50t-50-21q-30 0-51 21t-20 50 20 51 51 21 50-21 21-51z m-538 556q0-37-26-63t-63-26-63 26-26 63 26 63 63 26 63-26 26-63z m653-278q0-30-21-50t-50-21-51 21-21 50 21 51 51 20 50-20 21-51z m-357 393q0-45-31-76t-76-31-76 31-31 76 31 76 76 31 76-31 31-76z m296-115q0-52-37-88t-88-37q-52 0-88 37t-37 88q0 51 37 88t88 37q51 0 88-37t37-88z" horiz-adv-x="1000" />
-
 <glyph glyph-name="align-center" unicode="&#xe80f;" d="M1000 100v-71q0-15-11-25t-25-11h-928q-15 0-25 11t-11 25v71q0 15 11 25t25 11h928q15 0 25-11t11-25z m-214 214v-71q0-15-11-25t-25-11h-500q-14 0-25 11t-11 25v71q0 15 11 25t25 11h500q15 0 25-11t11-25z m143 215v-72q0-14-11-25t-25-11h-786q-14 0-25 11t-11 25v72q0 14 11 25t25 10h786q14 0 25-10t11-25z m-215 214v-72q0-14-10-25t-25-10h-358q-14 0-25 10t-10 25v72q0 14 10 25t25 11h358q14 0 25-11t10-25z" horiz-adv-x="1000" />

 <glyph glyph-name="align-right" unicode="&#xe810;" d="M1000 100v-71q0-15-11-25t-25-11h-928q-15 0-25 11t-11 25v71q0 15 11 25t25 11h928q15 0 25-11t11-25z m0 214v-71q0-15-11-25t-25-11h-714q-14 0-25 11t-11 25v71q0 15 11 25t25 11h714q15 0 25-11t11-25z m0 215v-72q0-14-11-25t-25-11h-857q-14 0-25 11t-11 25v72q0 14 11 25t25 10h857q15 0 25-10t11-25z m0 214v-72q0-14-11-25t-25-10h-643q-14 0-25 10t-10 25v72q0 14 10 25t25 11h643q15 0 25-11t11-25z" horiz-adv-x="1000" />
@ -124,6 +122,22 @@

 <glyph glyph-name="link" unicode="&#xe83a;" d="M813 171q0 23-16 38l-116 116q-16 16-38 16-24 0-40-18 1-1 10-10t12-12 9-11 7-14 2-15q0-23-16-38t-38-16q-8 0-15 2t-14 7-11 9-12 12-10 10q-19-17-19-40 0-23 16-38l115-116q15-15 38-15 22 0 38 15l82 81q16 16 16 37z m-393 394q0 22-15 38l-115 115q-16 16-38 16-22 0-38-15l-82-82q-16-15-16-37 0-22 16-38l116-116q15-15 38-15 23 0 40 17-2 2-11 11t-12 12-8 10-7 14-2 16q0 22 15 38t38 15q9 0 16-2t14-7 11-8 12-12 10-11q18 17 18 41z m500-394q0-66-48-113l-82-81q-46-47-113-47-68 0-114 48l-115 115q-46 47-46 114 0 68 49 116l-49 49q-48-49-116-49-67 0-114 47l-116 116q-47 47-47 114t47 113l82 82q47 46 114 46 67 0 114-47l115-116q46-46 46-113 0-69-49-117l49-49q48 49 116 49 67 0 114-47l116-116q47-47 47-114z" horiz-adv-x="928.6" />

+<glyph glyph-name="video" unicode="&#xe83b;" d="M657 725h-564c-51 0-93-42-93-93v-564c0-51 42-93 93-93h564c51 0 93 42 93 93v564c0 51-42 93-93 93z m370-74l-214-147v-308l214-147c41-29 98 0 98 50v502c0 50-57 79-98 50z" horiz-adv-x="1125" />
+
+<glyph glyph-name="video-slash" unicode="&#xe83c;" d="M1238-45l-107 83c30 3 57 27 57 61v502c0 50-57 79-99 50l-214-147v-268l-62 48v348c0 51-42 93-94 93h-477l-153 118c-14 11-33 9-44-5l-38-49c-11-14-9-33 5-44l71-55 730-564 348-269c14-11 33-9 44 5l38 49c11 14 9 34-5 44z m-1175 113c0-51 41-93 93-93h563c22 0 42 8 58 20l-714 553v-480z" horiz-adv-x="1250" />
+
+<glyph glyph-name="microphone-alt" unicode="&#xe83d;" d="M656 475h-31c-17 0-31-14-31-31v-94c0-146-126-263-275-249-130 13-225 130-225 260v83c0 17-14 31-31 31h-32c-17 0-31-14-31-31v-79c0-175 125-331 297-355v-66h-109c-18 0-32-14-32-32v-31c0-17 14-31 32-31h312c17 0 31 14 31 31v31c0 18-14 32-31 32h-109v66c167 23 297 166 297 340v94c0 17-14 31-32 31z m-312-312c103 0 187 83 187 187h-166c-12 0-21 7-21 16v31c0 9 9 16 21 16h166v62h-166c-12 0-21 7-21 16v31c0 9 9 16 21 16h166v62h-166c-12 0-21 7-21 16v31c0 9 9 16 21 16h166c0 103-84 187-187 187s-188-84-188-187v-313c0-104 84-187 188-187z" horiz-adv-x="688" />
+
+<glyph glyph-name="microphone-alt-slash" unicode="&#xe83e;" d="M1238-45l-308 238c25 47 39 100 39 157v94c0 17-14 31-31 31h-32c-17 0-31-14-31-31v-94c0-35-8-68-21-98l-52 40c6 18 11 38 11 58h-86l-81 63h167v62h-167c-12 0-21 7-21 16v31c0 9 9 16 21 16h167v62h-167c-12 0-21 7-21 16v31c0 9 9 16 21 16h167c0 103-84 187-188 187s-187-84-187-187v-89l-349 269c-14 11-33 9-44-5l-38-49c-11-14-9-34 5-44l1149-888c14-11 34-9 44 5l38 49c11 14 9 34-5 44z m-457-11h-109v66c23 3 45 8 66 16l-98 76c-13-1-26-2-40-1-109 11-193 95-217 199l-102 79v-14c0-175 125-331 297-355v-66h-109c-17 0-31-14-31-32v-31c0-17 14-31 31-31h312c18 0 32 14 32 31v31c0 18-14 32-32 32z" horiz-adv-x="1250" />
+
+<glyph glyph-name="compress" unicode="&#xe83f;" d="M852 475h-243c-26 0-46 21-46 47v242c0 13 10 24 23 24h78c13 0 24-11 24-24v-164h164c13 0 23-10 23-23v-79c0-12-10-23-23-23z m-539 47v242c0 13-11 24-24 24h-78c-13 0-23-11-23-24v-164h-165c-12 0-23-10-23-23v-79c0-12 11-23 23-23h243c26 0 47 21 47 47z m0-586v242c0 26-21 47-47 47h-243c-12 0-23-10-23-23v-79c0-12 11-23 23-23h165v-164c0-13 10-24 23-24h78c13 0 24 11 24 24z m375 0v164h164c13 0 23 11 23 23v79c0 13-10 23-23 23h-243c-26 0-46-21-46-47v-242c0-13 10-24 23-24h78c13 0 24 11 24 24z" horiz-adv-x="875" />
+
+<glyph glyph-name="expand" unicode="&#xe840;" d="M0 498v243c0 26 21 47 47 47h242c13 0 24-11 24-24v-78c0-13-11-23-24-23h-164v-165c0-12-10-23-23-23h-79c-12 0-23 11-23 23z m563 266v-78c0-13 10-23 23-23h164v-165c0-12 11-23 23-23h79c13 0 23 11 23 23v243c0 26-21 47-47 47h-242c-13 0-23-11-23-24z m289-539h-79c-12 0-23-10-23-23v-164h-164c-13 0-23-11-23-24v-78c0-13 10-24 23-24h242c26 0 47 21 47 47v243c0 13-10 23-23 23z m-539-289v78c0 13-11 24-24 24h-164v164c0 13-10 23-23 23h-79c-12 0-23-10-23-23v-243c0-26 21-47 47-47h242c13 0 24 11 24 24z" horiz-adv-x="875" />
+
+<glyph glyph-name="spin5" unicode="&#xe841;" d="M462 850c-6 0-11-5-11-11l0-183 0 0c0-6 5-11 11-11l69 0c1 0 1 0 1 0 7 0 12 5 12 11l0 183 0 0c0 6-5 11-12 11l-69 0c0 0 0 0-1 0z m250-47c-4 1-8-2-10-5l-91-158 0 0c-4-6-2-13 4-16l60-34c0-1 0-1 0-1 6-3 13-1 16 4l91 158c3 6 2 13-4 16l-61 35c-1 1-3 1-5 1z m-428-2c-2 0-4-1-6-2l-61-35c-5-3-7-10-4-16l91-157c0 0 0 0 0 0 3-6 10-8 16-5l61 35c5 4 7 11 4 16l-91 157c0 1 0 1 0 1-2 4-6 6-10 6z m620-163c-2 0-4 0-6-1l-157-91c0 0 0 0 0 0-6-3-8-10-5-16l35-61c4-5 11-7 16-4l157 91c1 0 1 0 1 0 6 3 7 11 4 16l-35 61c-2 4-6 6-10 5z m-810-4c-5 0-9-2-11-6l-35-61c-3-5-1-12 4-15l158-91 0 0c6-4 13-2 16 4l35 60c0 0 0 0 0 0 3 6 1 13-4 16l-158 91c-2 1-4 2-5 2z m712-235l0 0c-6 0-11-5-11-11l0-69c0-1 0-1 0-1 0-7 5-12 11-12l183 0 0 0c6 0 11 5 11 12l0 69c0 0 0 0 0 1 0 6-5 11-11 11l-183 0z m-794-5l0 0c-7 0-12-5-12-12l0-69c0 0 0 0 0-1 0-6 5-11 12-11l182 0 0 0c6 0 11 5 11 11l0 69c0 1 0 1 0 1 0 7-5 12-11 12l-182 0z m772-153c-4 0-8-2-10-6l-34-60c-1 0-1 0-1 0-3-6-1-13 4-16l158-91c6-3 13-1 16 4l35 61c3 5 1 12-4 15l-158 92 0 0c-2 1-4 1-6 1z m-566-5c-1 0-3 0-5-1l-157-91c0 0-1 0-1 0-5-3-7-10-4-16l35-61c3-5 10-7 16-4l157 91c0 0 0 0 0 0 6 3 8 10 5 16l-35 61c-3 3-7 6-11 5z m468-121c-2 0-4 0-6-1l-61-35c-5-4-7-11-4-16l91-157c0-1 0-1 0-1 3-6 11-7 16-4l61 35c5 3 7 10 4 16l-91 157c0 0 0 0 0 0-2 4-6 6-10 6z m-367-2c-4 0-8-2-10-6l-91-158c-3-6-1-13 4-16l61-35c5-3 12-1 15 4l92 158 0 0c3 6 1 13-5 16l-60 35c0 0 0 0 0 0-2 1-4 1-6 2z m149-58c-7 0-12-5-12-11l0-183 0 0c0-6 5-11 12-11l69 0c0 0 0 0 1 0 6 0 11 5 11 11l0 183 0 0c0 6-5 11-11 11l-69 0c-1 0-1 0-1 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="cancel" unicode="&#xe842;" d="M724 112q0-22-15-38l-76-76q-16-15-38-15t-38 15l-164 165-164-165q-16-15-38-15t-38 15l-76 76q-16 16-16 38t16 38l164 164-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164 164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164 164-164q15-15 15-38z" horiz-adv-x="785.7" />
+
 <glyph glyph-name="table" unicode="&#xf0ce;" d="M286 82v107q0 8-5 13t-13 5h-179q-7 0-12-5t-6-13v-107q0-8 6-13t12-5h179q8 0 13 5t5 13z m0 214v108q0 7-5 12t-13 5h-179q-7 0-12-5t-6-12v-108q0-7 6-12t12-5h179q8 0 13 5t5 12z m285-214v107q0 8-5 13t-12 5h-179q-8 0-13-5t-5-13v-107q0-8 5-13t13-5h179q7 0 12 5t5 13z m-285 429v107q0 8-5 13t-13 5h-179q-7 0-12-5t-6-13v-107q0-8 6-13t12-5h179q8 0 13 5t5 13z m285-215v108q0 7-5 12t-12 5h-179q-8 0-13-5t-5-12v-108q0-7 5-12t13-5h179q7 0 12 5t5 12z m286-214v107q0 8-5 13t-13 5h-178q-8 0-13-5t-5-13v-107q0-8 5-13t13-5h178q8 0 13 5t5 13z m-286 429v107q0 8-5 13t-12 5h-179q-8 0-13-5t-5-13v-107q0-8 5-13t13-5h179q7 0 12 5t5 13z m286-215v108q0 7-5 12t-13 5h-178q-8 0-13-5t-5-12v-108q0-7 5-12t13-5h178q8 0 13 5t5 12z m0 215v107q0 8-5 13t-13 5h-178q-8 0-13-5t-5-13v-107q0-8 5-13t13-5h178q8 0 13 5t5 13z m72 178v-607q0-37-27-63t-63-26h-750q-36 0-63 26t-26 63v607q0 37 26 63t63 27h750q37 0 63-27t27-63z" horiz-adv-x="928.6" />
 </font>
 </defs>
--- a/src/static/font/fontawesome-etherpad.ttf
+++ b/src/static/font/fontawesome-etherpad.ttf
--- a/src/static/font/fontawesome-etherpad.woff
+++ b/src/static/font/fontawesome-etherpad.woff
--- a/src/static/font/fontawesome-etherpad.woff2
+++ b/src/static/font/fontawesome-etherpad.woff2
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@ -244,7 +244,7 @@
          </div>
          <div class="reconnecting">
            <h1 data-l10n-id="pad.modals.reconnecting"></h1>
-            <p class='loadingAnimation'></p>
+            <i class='buttonicon buttonicon-spin5 icon-spin'></i>
          </div>
          <div class="userdup">
            <h1 data-l10n-id="pad.modals.userdup"></h1>