Merge branch '4.15-candidate' into soon

customize.dist/pages.js

@@ -210,23 +210,6 @@ define([
             ]);
         }
 
-        // var button = h('button.navbar-toggler', {
-        //     'type':'button',
-        //     'data-toggle':'collapse',
-        //     'data-target':'#menuCollapse',
-        //     'aria-controls': 'menuCollapse',
-        //     'aria-expanded':'false',
-        //     'aria-label':'Toggle navigation'
-        // }, h('i.fa.fa-bars '));
-
-        // // XXX button to collapse navbar on small screens
-        // $(button).click(function () {
-        //     if ($('#menuCollapse').is(':visible')) {
-        //         return void $('#menuCollapse').slideUp();
-        //     }
-        //     $('#menuCollapse').slideDown();
-        // });
-
         var isHome = ['/', '/index.html'].includes(window.location.pathname);
         var homeLink = h('a.nav-item.nav-link.cp-back-home' /* .navbar-brand */, { href: '/index.html' }, [
             h('i.fa.fa-arrow-left'),
@@ -239,8 +222,6 @@ define([
         ]);
 
         return h('nav.navbar.navbar-expand-lg',
-            // button, // XXX collapse button
-            // add .collapse.navbar-collapse.justify-content-end#menuCollapse to div below to enable collapse button
             [
                 !isHome? homeLink: undefined,
                 h('a.nav-item.nav-link', { href: '/features.html'}, [

customize.dist/pages/index.js

@@ -124,10 +124,6 @@ define([
 
         // instance title
         var instanceTitle = h('h1.cp-instance-title', Pages.Instance.name);
-        // DB: How does TextFit work?!
-        // setTimeout(function () {
-        //     TextFit(instanceTitle, {minFontSize: 13, maxFontSize: 48}); // XXX DB remove?
-        // });
 
         // instance location
         var locationBlock;

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

@@ -17,7 +17,7 @@
     @toolbar-bg-color: @bg-color;
     // XXX: check contrasts of app colors used as btn background
     @toolbar-bg-color-light: lighten(@bg-color, 30%);
-    @toolbar-bg-color-fade: fade(@toolbar-bg-color-light, 80%);
+    @toolbar-bg-color-fade: fade(@toolbar-bg-color-light, 60%);
 };
 
 .toolbar_main (
@@ -439,7 +439,6 @@
                    screen and (max-height: 500px) {
                 flex-wrap: wrap;
                 height: @toolbar_line-height;
-                // XXX DB TODO: scale down icon logo on small screens
                 .cp-pad-not-pinned {
                     line-height: 32px;
                     flex: unset;
@@ -997,7 +996,6 @@
                 margin-right: 5px;
             }
             &:hover {
-                // XXX DB: not working well in dark/light
                 background-color: fade(@cp_toolbar-bottom-bg, 70%);
             }
         }
@@ -1008,17 +1006,16 @@
             background-color: @cp_toolbar-bottom-bg;
             color: @cp_toolbar-bottom-fg;
             &:hover {
-                // XXX DB: not working well in dark/light
+                background-color: fade(@cryptpad_text_col, 20%);
-                background-color: fade(@cp_toolbar-bottom-bg, 50%);
+                border-color: @cryptpad_text_col;
-                border-color: fade(@cp_toolbar-bottom-bg, 50%);
+                color: @cryptpad_text_col;
             }
             &.cp-toolbar-button-active {
                 background-color: @cp_toolbar-bg;
                 border-color: @cp_toolbar-fg;
                 color: @cp_toolbar-fg;
                 &:hover {
-                    // XXX DB: not working well in dark/light
+                    background-color: fade(@cryptpad_text_col, 20%);
-                    background-color: fade(@cp_toolbar-bottom-bg, 50%);
                 }
             }
         }
@@ -1030,11 +1027,11 @@
             border-color: var(--toolbar-bg-color-light);
             color: @cp_toolbar-bottom-fg;
             &:hover {
-                // XXX DB: not working well in dark/light
+                background-color: @toolbar-bg-color-fade;
-                background-color: fade(@toolbar-bg-color-light, 80%);
                 background-color: var(--toolbar-bg-color-fade);
-                border-color: fade(@toolbar-bg-color-light, 80%);
+                border-color: @toolbar-bg-color-fade;
                 border-color: var(--toolbar-bg-color-fade);
+                color: @cp_toolbar-bottom-fg;
             }
         }
         button.cp-toolbar-collapse {