Merge branch 'staging' into oo

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

@@ -139,7 +139,7 @@
 
             > * {
                 width: 100%;
-                min-width: 300px;
+                min-width: 260px;
                 max-width: 500px;
                 margin: 0 auto;
                 text-align: left;
@@ -184,7 +184,7 @@
                     }
                 }
                 .alertify-tabs-contents {
-                    flex: 1;
+                    flex: 1 1 auto;
                     min-height: 0;
                     & > div {
                         max-height: 100%;

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

@@ -12,15 +12,16 @@
         background: @colortheme_loading-bg;
         color: @colortheme_loading-color;
         display: flex;
-        align-items: center;
+        flex-flow: column; /* we need column so that the child can shrink vertically */
+        justify-content: center;
         width: 100%;
         height: 100%;
         overflow: auto;
-        @media screen and (max-height: 600px), screen and (max-width: 500px) {
-            align-items: baseline;
-        }
     }
     #cp-creation {
+        flex: 0 1 auto; /* allows shrink */
+        min-height: 0;
+        overflow: auto;
         text-align: center;
         font: @colortheme_app-font;
         width: 100%;
@@ -33,24 +34,35 @@
             flex-wrap: wrap;
             justify-content: center;
             align-items: center;
-            h2, p {
-                width: 100%;
-            }
             h2 {
+                width: 100%;
                 display: flex;
+                margin-bottom: 20px;
                 justify-content: space-between;
                 .cp-creation-help {
                     display: none;
                 }
             }
+            .cp-creation-help-container {
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                p {
+                    padding: 0 20px;
+                    flex-grow: 0;
+                    flex-shrink: 0;
+                    flex-basis: 50%;
+                    text-align: justify;
+                }
+            }
             @media screen and (max-width: 500px) {
                 width: ~"calc(100% - 30px)";
             }
-            @media screen and (max-height: 600px), screen and (max-width: 500px) {
+            @media screen and (max-height: 800px), screen and (max-width: 500px) {
                 h2 .cp-creation-help {
                     display: inline;
                 }
-                p {
+                .cp-creation-help-container {
                     display: none;
                 }
             }
@@ -139,5 +151,20 @@
                 }
             }
         }
+        .cp-creation-settings {
+            justify-content: left;
+            a {
+                color: #0275d8;
+                &:hover {
+                    color: lighten(#0275d8, 10%);
+                }
+            }
+        }
+        .cp-creation-deleted {
+            background: #111;
+            padding: 10px;
+            text-align: justify;
+            font-weight: bold;
+        }
     }
 }

customize.dist/src/less2/include/limit-bar.less

@@ -8,9 +8,10 @@
         width: 100%;
         margin-top: 20px;
         .cp-limit-bar {
-            padding: 5px;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
 
-            display: inline-block;
             max-width: 100%;
             margin: 3px;
             box-sizing: border-box;
@@ -18,7 +19,6 @@
             background: white;
             position: relative;
             text-align: center;
-            vertical-align: middle;
             width: ~"calc(100% - 6px)";
             height: 35px;
             line-height: 25px;
@@ -29,6 +29,7 @@
                 background: blue;
                 position: absolute;
                 left: 0;
+                top: 0;
                 z-index: 1; // .usage
                 &.cp-limit-usage-normal {
                     background: @colortheme_green;

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

@@ -131,6 +131,7 @@
                     white-space: nowrap;
                     display: flex;
                     flex-flow: column;
+                    height: 100%;
                     .cp-toolbar-userlist-name {
                         flex: 1;
                         overflow: hidden;
@@ -759,7 +760,7 @@
         display: inline-flex;
         align-items: center;
         max-width: 100%;
-        flex: 1;
+        flex: 1 1 auto;
         //margin-bottom: -1px;
         .cp-toolbar-users {
             pre {

customize.dist/src/less2/main.less

@@ -10,6 +10,7 @@ body.cp-page-what-is-cryptpad { @import "./pages/page-what-is-cryptpad.less"; }
 body.cp-page-about { @import "./pages/page-about.less"; }
 body.cp-page-privacy { @import "./pages/page-privacy.less"; }
 body.cp-page-features { @import "./pages/page-features.less"; }
+body.cp-page-faq { @import "./pages/page-faq.less"; }
 body.cp-page-terms { @import "./pages/page-terms.less"; }
 
 // Set the HTML style for the apps which shouldn't have a body scrollbar

customize.dist/src/less2/pages/page-features.less

@@ -50,3 +50,18 @@ table#cp-features-table {
     }
 }
 
+#cp-features-register {
+    text-align: center;
+    padding: 20px;
+}
+.cp-features-register-button {
+    font-size: 20px;
+    color: #fff;
+    background: @cryptpad_color_blue;
+    border: 2px solid @cryptpad_color_blue;
+    border-radius: 0;
+    &:hover {
+        transform: scale(1.05);
+    }
+}
+