Refactor variables in static pages

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

@@ -118,6 +118,9 @@
 // New variables
 
 // Colors
+// XXX @cryptpad_color_brand = @colortheme_logo-2
+@cryptpad_color_brand_soft: lighten(@colortheme_logo-2, 40%);
+
 @cryptpad_color_hint_grey: #777;
 @cryptpad_color_dark_grey: #999999;
 @cryptpad_color_neutral_grey: #aaaaaa;
@@ -131,6 +134,7 @@
 @cryptpad_color_light_blue: #00b7d8;
 @cryptpad_color_lighter_blue: #d2e1f2;
 @cryptpad_color_warn_red: #eb675e;
+@cryptpad_color_red: #f00;
 @cryptpad_color_dark_red: #9e0000;
 @cryptpad_color_black: #000;
 @cryptpad_color_white: #FFF;
@@ -280,7 +284,7 @@
 @cp_help-link: @cryptpad_color_link;
 
 // Static pages
-@cp_static-bg: @cryptpad_color_grey;
+@cp_static-bg: @cryptpad_color_toolbar_grey;
 @cp_static-fg: @cryptpad_text_col;
 @cp_static-link: @colortheme_logo-2;
 @cp_static-title: @colortheme_logo-2;

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

@@ -11,7 +11,7 @@
     }
 }
 .cp-shadow() {
-    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.34);
+    box-shadow: 0px 0px 25px 0px @cp_shadow-color;
 }
 
 .infopages_main () {

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

@@ -5,7 +5,7 @@ html, body {
     .font_main();
     margin: 0px;
     padding: 0px;
-    background-color: @colortheme_info-background;
+    background-color: @cp_static-bg;
     color: @cryptpad_text_col;
     font-family: "IBM Plex Mono";
     #cp-main {

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

@@ -23,7 +23,7 @@
                     border: 0;
                     &:hover, &:focus {
                         text-decoration: none;
-                        background-color: @colortheme_logo_2_light;
+                        background-color: @cryptpad_color_brand_soft;
                     }
                     @media (max-width: 1200px) and (min-width: 769px) {
                         min-height: 139px;

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

@@ -84,9 +84,9 @@
             font-size: 0.8em;
         }
         .list-group-item {
-            border-bottom: 1px solid rgba(0,0,0,0.125);
+            border-bottom: 1px solid @cryptpad_color_neutral2_grey;
             &:first-child {
-                border-top: 1px solid rgba(0,0,0,0.125);
+                border-top: 1px solid @cryptpad_color_neutral2_grey;
             }
             &:last-child {
                 border-bottom-right-radius: 0px;

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

@@ -27,22 +27,7 @@
         font-family: "Open Sans", Helvetica;
         color: @cryptpad_text_col;
     }
-    .cp-right {
+
-        .cp-register-btn {
-            padding: 0.5em 1em 0.7em 1em;
-            border: 2px solid #fff;
-            &:hover {
-                transform: scale(1.05);
-            }
-        }
-        .cp-login-btn {
-            color: #fff;
-            padding: 0.5em 1em 0.7em 1em;
-            &:hover {
-                transform: scale(1.05);
-            }
-        }
-    }
     .cp-home-hero {
         width: 100%;
         margin-bottom: 50px;
@@ -158,7 +143,7 @@
         .cp-callout-@{key} {
             i { color: @value; }
             &:hover {
-                background-color: lighten(@value, 30%);
+                background-color: contrast(@cryptpad_text_col, lighten(@value, 30%), darken(@value, 30%));
                 i { color: @cryptpad_text_col; }
             }
         }
@@ -177,7 +162,7 @@
         width: 100%;
         div {
             .infopages_link();
-            color: #fff;
+            color: @cryptpad_color_white;
             .fa, .cptools {
                 font-size: inherit;
                 padding: 0;

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

@@ -21,7 +21,7 @@
     .cp-container {
         #userForm {
             .cp-shadow();
-            background-color: white;
+            background-color: @cryptpad_color_white;
             padding: 10px;
             .form-control {
                 border-radius: 0;
@@ -36,15 +36,15 @@
             }
         }
         .align-items-center {
-            box-shadow: 0 5px 15px rgba(69,145,196, 0.3);
+            box-shadow: 0 5px 15px @cp_shadow-color;
-            background: #fff;
+            background: @cryptpad_color_white;
         }
         .extra {
             margin-top: 1em;
 
             #register {
                 border-color: @colortheme_logo-2;
-                background: #fff;
+                background: @cryptpad_color_white;
                 color: @colortheme_logo-2;
                 padding: 10px;
                 border-radius: 0;

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

@@ -78,7 +78,7 @@
         }
         #userForm {
             padding: 15px;
-            background-color: white;
+            background-color: @cryptpad_color_white;
             position: relative;
             z-index: 2;
             margin-bottom: 100px;
@@ -111,7 +111,7 @@
                         content: "\f071";
                     }
                     .red {
-                        color: #ff0000;
+                        color: @cryptpad_color_red;
                     }
                 }
             }

customize.dist/src/less2/pages/page-what-is-cryptpad.less

@@ -11,28 +11,5 @@
             margin-top: 0px;
         }
     }
-
-    // .cp-container {
-    //     padding-top: 3em;
-    //     padding-bottom: 3em;
-    //     h2 {
-    //         margin-top: 0;
-    //         font-weight: 700;
-    //         color: @cryptpad_header_col;
-    //     }
-    //     p {
-    //         color: @cryptpad_text_col;
-    //     }
-    //     #zeroknowledge {
-    //         width: 65%;
-    //     }
-    //     .row {
-    //         margin-bottom: 1.5em;
-    //     }
-    //     img {
-    //         display: block;
-    //         margin: 0 auto;
-    //     }
-    // }
 }