Migrate settings to use a sandboxed iframe

customize.dist/src/less2/include/sidebar-layout.less

@@ -6,7 +6,7 @@
 @rightside-color: @colortheme_sidebar-right-fg;
 @description-color: @colortheme_sidebar-description;
 
-@button-width: 400px;
+@sidebar_button-width: 400px;
 
 
 .sidebar-layout_main() {
@@ -38,13 +38,13 @@
             overflow: auto;
 
             // Following rules are only in settings
-            .element {
+            .cp-sidebarlayout-element {
                 label:not(.noTitle), .label {
                     display: block;
                     font-weight: bold;
                     margin-bottom: 0;
                 }
-                .description {
+                .cp-sidebarlayout-description {
                     display: block;
                     color: @description-color;
                     margin-bottom: 5px;
@@ -56,9 +56,9 @@
                 height: 40px;
                 box-sizing: border-box;
             }
-            .inputBlock {
+            .cp-sidebarlayout-input-block {
                 display: inline-flex;
-                width: @button-width;
+                width: @sidebar_button-width;
                 input {
                     flex: 1;
                     border-radius: 0.25em 0 0 0.25em;

customize.dist/src/less2/main.less

@@ -35,4 +35,5 @@ body.cp-app-poll { @import "../../../poll/app-poll.less"; }
 body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; }
 body.cp-app-todo { @import "../../../todo/app-todo.less"; }
 body.cp-app-profile { @import "../../../profile/app-profile.less"; }
+body.cp-app-settings { @import "../../../settings/app-settings.less"; }