Add an advanced new pad modal

customize.dist/src/less2/include/icons.less

@@ -0,0 +1,40 @@
+.icons_main() {
+    li {
+        display: inline-block;
+        margin: 10px 10px;
+        width: 140px;
+        height: 140px;
+        text-align: center;
+        vertical-align: top;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        border: 1px solid white;
+
+        .cp-icons-name {
+            width: 100%;
+            height: 24px;
+            margin: 0;
+            display: inline-block;
+            font-size: 14px;
+            //align-items: center;
+            //justify-content: center;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            word-wrap: break-word;
+        }
+        .fa {
+            display: block;
+            margin: auto;
+            font-size: 64px;
+            margin: 18px 0;
+            text-align: center;
+            &.listonly {
+                display: none;
+            }
+        }
+    }
+}
+

customize.dist/src/less2/include/toolbar.less

@@ -6,6 +6,8 @@
 @import (once) "./toolbar-history.less";
 @import (once) "./icon-colors.less";
 @import (once) "./tools.less";
+@import (once) "./icons.less";
+@import (once) "./modal.less";
 
 .toolbar_main (
     @color: @colortheme_default-color, // Color of the text for the toolbar
@@ -173,6 +175,68 @@
         }
     }
 
+    #cp-app-toolbar-creation-dialog.cp-modal-container {
+        .icons_main();
+
+        li:hover {
+            border: 1px solid white;
+        }
+        .cp-modal {
+            display: flex;
+            flex-flow: column;
+            li, li .fa {
+                cursor: pointer;
+            }
+            &> p {
+                margin: 50px;
+            }
+            &> div {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+                align-content: center;
+                overflow-y: auto;
+            }
+        }
+
+        .cp-creation-icons-name {
+            white-space: nowrap;
+        }
+
+        #cp-app-toolbar-creation-advanced {
+            width: auto;
+            margin: 0;
+            padding: 0;
+        }
+        label[for="cp-app-toolbar-creation-advanced"] {
+            margin: 0;
+            margin-left: 5px;
+        }
+
+        @media screen and (max-height: @browser_media-not-big) {
+            .cp-modal {
+                & > p {
+                    display: none;
+                }
+                & > div {
+                    align-content: unset;
+                    li {
+                        height: 40px;
+                        width: 200px;
+                        display: flex;
+                        align-items: center;
+                        .fa {
+                            font-size: 32px;
+                        }
+                        .cp-icons-name {
+                            height: auto;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     // TODO(cjd) This ought to be in a less file for markdown-based editors
     .cp-markdown-toolbar {
         height: @toolbar_line-height;