New settings page

customize.dist/src/less/cryptpad.less

@@ -27,6 +27,11 @@ html.cp, .cp body {
 // override bootstrap colors
 .btn-primary {
     background-color: @cp-blue;
+    &:hover {
+        color: #fff;
+        background-color: #025aa5;
+        border-color: #01549b;
+    }
 }
 
 body {
@@ -567,10 +572,12 @@ noscript {
 
 /* Pin limit */
 .limit-container {
+    display: inline-flex;
+    flex-flow: column-reverse;
+    width: 100%;
+    margin-top: 20px;
     .cryptpad-limit-bar {
         display: inline-block;
-        height: 26px;
-        width: 200px;
         max-width: 40vw;
         margin: 3px;
         box-sizing: border-box;
@@ -578,8 +585,10 @@ noscript {
         background: white;
         position: relative;
         text-align: center;
-        line-height: 24px;
         vertical-align: middle;
+        width: ~"calc(100% - 6px)";
+        height: 25px;
+        line-height: 25px;
         .usage {
             height: 100%;
             display: inline-block;
@@ -607,7 +616,11 @@ noscript {
         }
     }
     .upgrade {
-        margin-left: 10px;
+        padding: 0;
+        line-height: 25px;
+        height: 25px;
+        margin: 0 3px;
+        border-radius: 0;
     }
 }
 

customize.dist/src/less/toolbar.less

@@ -24,6 +24,7 @@
 .friendsColor { color: @toolbar-friends-bg; }
 .whiteboardColor { color: @toolbar-whiteboard-bg; }
 .driveColor { color: @toolbar-drive-bg; }
+.settingsColor { color: @toolbar-settings-bg; }
 .defaultColor { color: @toolbar-default-bg; }
 
 .toolbar-container {
@@ -261,6 +262,11 @@ body {
         @color: @toolbar-friends-color;
         .addToolbarColors(@color, @bgcolor);
     }
+    &.app-settings {
+        @bgcolor: @toolbar-settings-bg;
+        @color: @toolbar-settings-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
 
 }
 

customize.dist/src/less/variables.less

@@ -101,6 +101,8 @@
 @toolbar-friends-color: #fff;
 @toolbar-default-bg: #ddd;
 @toolbar-default-color: #000;
+@toolbar-settings-bg: #0087ff;
+@toolbar-settings-color: #fff;
 
 
 @topbar-back: #fff;