Attachments control panel

vendors/fontastic/fonts/rainloop.svg

@@ -119,4 +119,7 @@
 <glyph unicode="&#57453;" d="M282 475l65-64-89-89 64-64 89 89 64-65 0 193z m-92-221l-89-89-64 65 0-193 193 0-65 64 89 89z"/>
 <glyph unicode="&#57455;" d="M256 484c-126 0-228-102-228-228 0-126 102-228 228-228 126 0 228 102 228 228 0 126-102 228-228 228z m-185-228c0 39 12 75 33 105 3 1 7 2 9 1 3-2 2-3 2-7 1-6 2-13 10-9 7 4 5 15 9 21 3 4 7 9 10 12 5 4 9 6 9 12 1 7-5 9-11 10 8 7 16 12 26 17 2-1 5-5 4-9-2-3-10-3-8-10 10-5 33 18 32-4-9-3-30-6-31-18-1-12 20-9 27-8 9 1 16 3 23 9 9 6 23 18 25 28 4 18-23 9-29 17-2 3-2 7-1 11 0 0 0 0 0 1 15 4 30 6 46 6 22 0 43-4 62-11-8-13-3-36-3-50 0-8-4-8-9-13-5-6-10-10-17-9-16 3-31 10-45-3-5-5-10-9-10-17 0-5-2-13 4-15 3-2 12-2 15 1 4 3 4 10 6 15 3 6 11 9 15 3 3-6 1-12-2-17-5-7-8-10-16-13-2-1-4-3-7-2-3 1-4 4-6 5-6 2-12-4-15-7-4-4-9-6-15-7-4-1-13 1-10-7 1-5 7-5 6-13-7 0-17 2-21-3-2-3-7-18-5-21 2-4 12-3 16-3 6-1 12 0 13 7 4 2 5 6 8 8 3 2 6 3 10 3 12 2 13-5 18-13 4-6 10-11 10-1-1 8-8 12-7 21 7 2 9-7 11-12 2-4 3-7 6-10 1-2 3-4 5-6 2 6 6 10 8 15 2 5 5 10 9 14 7 7 36 7 25-5-5-4-36-11-26-20 4-5 14 0 19-3 5-2 2-9 2-14 0-1 0-2 0-3-13-7-36-3-48-2-9 0-15 4-22 9-7 5-11 6-20 7-22 1-39-3-56-17-16-13-23-29-19-50 6-35 45-29 72-31 11-1 13-2 17-12 3-9 6-17 8-26 2-8 2-17 3-25 1-8 2-13 6-17-100 3-180 85-180 185z m242-176c7 4 11 8 18 13 3 2 6 2 8 6 2 5-1 8-3 13-4 10 4 14 10 21 7 6 12 15 16 23 4 6 10 20 10 26-8 0-17-4-26-3-11 2-19 9-25 16-7 7-11 16-10 26 0 4 0 5 3 6 5-6 14-9 19-16 4-5 6-9 11-13 3-2 5-6 8-9 4-4 13-1 17 3 6 5 5 11 7 17 1 5 4 7 6 12 1 5 0 11 0 15-5 1-8 0-12-2-3-2-3-5-8-5-7 0-11 8-12 15 6 3 15 2 22 2 7 0 13 1 19 4 11 5 19 0 28-6 5-4 12-14 16-8 4 5 2 16 2 22 0 3 1 6 1 10 1 2 1 4 2 5 1-5 1-11 1-17 0-82-54-152-128-176z"/>
 <glyph unicode="&#57454;" d="M218 63c0-35-29-63-64-63-35 0-64 28-64 63 0 36 29 64 64 64 35 0 64-28 64-64z m0 193c0-35-29-64-64-64-35 0-64 29-64 64 0 35 29 64 64 64 35 0 64-29 64-64z m0 193c0-36-29-64-64-64-35 0-64 28-64 64 0 35 29 63 64 63 35 0 64-28 64-63z m204-386c0-35-29-63-64-63-35 0-64 28-64 63 0 36 29 64 64 64 35 0 64-28 64-64z m0 193c0-35-29-64-64-64-35 0-64 29-64 64 0 35 29 64 64 64 35 0 64-29 64-64z m0 193c0-36-29-64-64-64-35 0-64 28-64 64 0 35 29 63 64 63 35 0 64-28 64-63z"/>
+<glyph unicode="&#57456;" d="M377 269c5-3 7-8 7-13 0-5-2-9-7-12 0 0-219-136-219-136-8-6-15-7-21-4-6 4-9 11-9 21 0 0 0 263 0 263 0 10 3 17 9 21 6 3 13 2 21-3 0 0 219-137 219-137"/>
+<glyph unicode="&#57457;" d="M346 435c30 0 46-11 46-33 0 0 0-291 0-291 0-23-16-34-46-34-31 0-46 11-46 34 0 0 0 291 0 291 0 22 15 33 46 33m-180 0c31 0 46-11 46-33 0 0 0-291 0-291 0-23-15-34-46-34-30 0-46 11-46 34 0 0 0 291 0 291 0 22 16 33 46 33"/>
+<glyph unicode="&#57458;" d="M372 410c25 0 38-11 38-33 0 0 0-241 0-241 0-22-13-34-38-34 0 0-231 0-231 0-26 0-39 12-39 34 0 0 0 241 0 241 0 12 3 21 10 25 6 5 16 8 29 8 0 0 231 0 231 0"/>
 </font></defs></svg>

vendors/fontastic/icons-reference.html

@@ -493,6 +493,18 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
           <div class="icon icon-braille"></div>
           <input type="text" readonly="readonly" value="braille">
         </li>
+        <li>
+          <div class="icon icon-play"></div>
+          <input type="text" readonly="readonly" value="play">
+        </li>
+        <li>
+          <div class="icon icon-pause"></div>
+          <input type="text" readonly="readonly" value="pause">
+        </li>
+        <li>
+          <div class="icon icon-stop"></div>
+          <input type="text" readonly="readonly" value="stop">
+        </li>
       </ul>
       <h2>Character mapping</h2>
       <ul class="glyphs character-mapping">
@@ -944,6 +956,18 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
           <div data-icon="&#xe06e;" class="icon"></div>
           <input type="text" readonly="readonly" value="&amp;#xe06e;">
         </li>
+        <li>
+          <div data-icon="&#xe070;" class="icon"></div>
+          <input type="text" readonly="readonly" value="&amp;#xe070;">
+        </li>
+        <li>
+          <div data-icon="&#xe071;" class="icon"></div>
+          <input type="text" readonly="readonly" value="&amp;#xe071;">
+        </li>
+        <li>
+          <div data-icon="&#xe072;" class="icon"></div>
+          <input type="text" readonly="readonly" value="&amp;#xe072;">
+        </li>
       </ul>
     </div><script type="text/javascript">
 (function() {

vendors/fontastic/styles.css

@@ -374,3 +374,12 @@
 .icon-braille:before {
   content: "\e06e";
 }
+.icon-play:before {
+  content: "\e070";
+}
+.icon-pause:before {
+  content: "\e071";
+}
+.icon-stop:before {
+  content: "\e072";
+}