Big manual merge

customize.dist/src/less/cryptpad.less

@@ -582,7 +582,7 @@ noscript {
     margin-top: 20px;
     .cryptpad-limit-bar {
         display: inline-block;
-        max-width: 40vw;
+        max-width: 100%;
         margin: 3px;
         box-sizing: border-box;
         border: 1px solid #999;

customize.dist/src/less/mixins.less

@@ -138,3 +138,75 @@
         background: white;
     }
 }
+
+.fileIcon {
+    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;
+
+        &:not(.selected):not(.selectedTmp) {
+            border: 1px solid #CCC;
+        }
+        .name {
+            width: 100%;
+            height: 48px;
+            margin: 8px 0;
+            display: inline-block;
+            //align-items: center;
+            //justify-content: center;
+            overflow: hidden;
+            //text-overflow: ellipsis;
+            word-wrap: break-word;
+        }
+        .truncated {
+            display: block;
+            position: absolute;
+            bottom: 0px;
+            left: 0; right: 0;
+            text-align: center;
+        }
+        img.icon {
+            height: 48px;
+            max-height: none;
+            max-width: none;
+            margin: 8px 0;
+        }
+        .fa {
+            display: block;
+            margin: auto;
+            font-size: 48px;
+            margin: 8px 0;
+            text-align: center;
+            &.listonly {
+                display: none;
+            }
+        }
+    }
+}
+
+.sidebarButton {
+    button.btn {
+        background-color: @button-bg;
+        border-color: darken(@button-bg, 10%);
+        color: white;
+        &:hover {
+            background-color: darken(@button-bg, 10%);
+        }
+        &.btn-danger {
+            background-color: @button-red-bg;
+            border-color: darken(@button-red-bg, 10%);
+            color: white;
+            &:hover {
+                background-color: darken(@button-red-bg, 10%);
+            }
+        }
+    }
+}

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

@@ -7,9 +7,6 @@
 @description-color: #777;
 
 @button-width: 400px;
-@button-bg: #3066e5;
-@button-alt-bg: #fff;
-@button-red-bg: #e54e4e;
 
 
 .cp {
@@ -72,25 +69,10 @@
                     border-left: 0px;
                 }
             }
-            button.btn {
-                background-color: @button-bg;
-                border-color: darken(@button-bg, 10%);
-                color: white;
-                &:hover {
-                    background-color: darken(@button-bg, 10%);
-                }
-                &.btn-danger {
-                    background-color: @button-red-bg;
-                    border-color: darken(@button-red-bg, 10%);
-                    color: white;
-                    &:hover {
-                        background-color: darken(@button-red-bg, 10%);
-                    }
-                }
-            }
             &>div {
                 margin: 10px 0;
             }
+            .sidebarButton;
         }
     }
 }

customize.dist/src/less/toolbar.less

@@ -29,6 +29,7 @@
 .settingsColor { color: @toolbar-settings-bg; }
 .profileColor { color: @toolbar-settings-bg; }
 .defaultColor { color: @toolbar-default-bg; }
+.todoColor { color:@toolbar-todo-bg; }
 
 .toolbar-container {
     display: flex;
@@ -284,6 +285,11 @@ body {
         @color: @toolbar-profile-color;
         .addToolbarColors(@color, @bgcolor);
     }
+    &.app-todo {
+        @bgcolor: @toolbar-todo-bg;
+        @color: @toolbar-todo-color;
+        .addToolbarColors(@color, @bgcolor);
+    }
 
 }
 

customize.dist/src/less/variables.less

@@ -109,7 +109,8 @@
 @toolbar-settings-color: @colortheme_settings-color;
 @toolbar-profile-bg: @colortheme_profile-bg;
 @toolbar-profile-color: @colortheme_profile-color;
-
+@toolbar-todo-bg: #7bccd1;
+@toolbar-todo-color: #000;
 
 @topbar-back: #fff;
 @topbar-color: #000;
@@ -129,6 +130,10 @@
 
 @category-bg: #f4f4f4;
 
+@button-bg: #3066e5;
+@button-alt-bg: #fff;
+@button-red-bg: #e54e4e;
+
 .unselectable () {
     -webkit-touch-callout: none;
     -webkit-user-select: none;