Change the CSS and colors

customize.dist/src/build.js

@@ -40,7 +40,12 @@ var fragments = {};
     var source = swap(template, {
        topbar: fragments.topbar,
        fork: fragments.fork,
-       main: fragments[page],
+       main: swap(fragments[page], {
+           topbar: fragments.topbar,
+           fork: fragments.fork,
+           logo: fragments.logo,
+           noscript: fragments.noscript,
+       }),
        logo: fragments.logo,
        noscript: fragments.noscript,
     });

customize.dist/src/fragments/index.html

@@ -1,36 +1,38 @@
+{{fork}}
+
 <div id="main">
     <div id="overlay"></div>
-    <div id="data">
-      <p class="left" data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
+    <div id="main-container">
+        <div id="data">
+          <p class="left" data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
 
-        <center>
-          <h5 id="tryit" data-localization="tryIt"></h5>
-        </center>
+            <center>
+              <h5 id="tryit" data-localization="tryIt"></h5>
+            </center>
+
+            <div id="buttons" class="buttons">
+                <a id="create-pad" href="/pad/"><button class="btn btn-secondary" data-localization="button_newpad"></button></a>
+                <a id="create-code" href="/code/"><button class="btn btn-secondary" data-localization="button_newcode"></button></a>
+                <a id="create-poll" href="/poll/"><button class="btn btn-secondary" data-localization="button_newpoll"></button></a>
+                <a id="create-slide" href="/slide/"><button class="btn btn-secondary" data-localization="button_newslide"></button></a>
+                <br>
+                <button class="btn btn-success nologin" data-localization="login_nologin"></button>
+            </div>
 
-        <div id="buttons" class="buttons">
-            <a id="create-pad" href="/pad/"><button class="btn btn-secondary" data-localization="button_newpad"></button></a>
-            <a id="create-code" href="/code/"><button class="btn btn-secondary" data-localization="button_newcode"></button></a>
-            <a id="create-poll" href="/poll/"><button class="btn btn-secondary" data-localization="button_newpoll"></button></a>
-            <a id="create-slide" href="/slide/"><button class="btn btn-secondary" data-localization="button_newslide"></button></a>
-            <br>
-            <button class="btn btn-default nologin" data-localization="login_nologin"></button>
         </div>
 
-    </div>
+        <div id="userForm">
+            <!--<center>
+                <h1 data-localization="form_title"></h1>
+            </center>-->
+            <!--<label for="name" data-localization="form_username"></label>-->
+            <input type="text" id="name" name="name" data-localization-placeholder="login_username" autofocus><br>
 
-    <div id="userForm">
-        <center>
-            <h1 data-localization="form_title"></h1>
-        </center>
-        <label for="name" data-localization="form_username"></label><br>
-        <input type="text" id="name" name="name" data-localization-placeholder="login_username" autofocus><br>
-
-        <label for="password" data-localization="form_password"></label><br>
-        <input type="password" id="password" name="password" data-localization-placeholder="login_password"><br>
-
-        <input type="checkbox" id="rememberme" checked="checked"><label for="rememberme" data-localization="login_remember"></label><br>
-        <br>
-        <button class="btn btn-secondary login half first" data-localization="login_login"></button> <button class="btn btn-primary register half" data-localization="login_register"></button><br>
+            <!--<label for="password" data-localization="form_password"></label>--><br>
+            <input type="password" id="password" name="password" data-localization-placeholder="login_password"><br>
+            <span class="remember"><input type="checkbox" id="rememberme" checked="checked"><label for="rememberme" data-localization="login_remember"></label></span><br>
+            <button class="btn btn-secondary login half first" data-localization="login_login"></button> <button class="btn btn-primary register half" data-localization="login_register"></button><br>
+        </div>
     </div>
 </div>
 

customize.dist/src/fragments/topbar.html

@@ -5,7 +5,7 @@
         </a>
     </span>
 
-    <span class="slogan" data-localization="main_slogan"></span>
+    <!--<span class="slogan" data-localization="main_slogan"></span>-->
 
     <span id="language-selector" class="right dropdown-bar"></span>
     <span class="right">

customize.dist/src/less/cryptpad.less

@@ -37,7 +37,7 @@ body {
 
 a.github-corner > svg {
     fill: @cp-blue;
-    color: @base;
+    color: @old-base;
 }
 
 .lato {
@@ -150,10 +150,13 @@ body.html {
     }
 }
 #main {
-    background-image: url('/customize/bg2.jpg');
+    background-image: url('/customize/bg3.jpg');
     background-size: cover;
     background-position: center center;
 }
+#main_other {
+    padding: 0 @main-border-width;
+}
 #main, #main_other {
     #overlay {
         position: absolute;
@@ -162,48 +165,75 @@ body.html {
         right: 0;
         bottom: 0;
         background-color: #000;
-        opacity: 0.2;
+        opacity: 0.3;
     }
     position: absolute;
     left: 0;
     right: 0;
-    padding: 0 @main-border-width;
+    //padding: 0;
     height: ~"calc(100vh - 50px)";
     margin: auto;
     //margin-top: 100px;
 
     font-size: medium;
 
+    #main-container {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%);
+        margin-left: auto;
+        margin-right: auto;
+        display: inline-block;
+        width: 1000px;
+        max-width: 90%;
+    }
+
     #data {
         p {
             margin: 0;
             padding: 0;
+            font-size: 20px;
+            line-height: 1.5em;
         }
-        h5 {
+        h2 {
+            font-weight: normal;
+            font-size: 48px;
+            line-height: 1.2em;
             color: @main-color;
         }
+        h5 {
+            font-size: 1em;
+            color: @main-color;
+        }
+        width: 600px;
+        max-width: 60%;
         color: @main-color;
         padding: 15px;
         box-sizing: border-box;
         position: absolute;
+        display: inline-block;
         top: 50%;
+        left: 0;
         transform: translateY(-50%);
-        width: ~"calc(100% - 450px - 30vw)";
+       // width: ~"calc(100% - 450px - 30vw)";
 //        background-color: @main-block-bg;
 
         #tryit {
             margin-top: 20px;
+            margin-bottom: 5px;
         }
     }
 
     #userForm {
         position: absolute;
+        right: 0;
         top: 50%;
         transform: translateY(-50%);
-        right: @main-border-width;
         margin-left: 50px;
         display: inline-block;
-        width: 400px;
+        width: 350px;
+        max-width: 35%;
 //        background-color: @main-block-bg;
         padding: 10px;
         box-sizing: border-box;
@@ -219,22 +249,31 @@ body.html {
             width: 100%;
         }
 
+        .remember {
+            vertical-align: middle;
+            line-height: 28px;
+            height: 28px;
+            display: inline-block;
+            margin: 10px 0 20px 0;
+        }
+
+
         [type="checkbox"] {
-            vertical-align: sub;
+            vertical-align: text-top;
             margin: 0;
-            margin-top: 10px;
+            //margin-top: 10px;
             margin-right: 5px;
         }
 
         label {
             margin-bottom: 0;
-            margin-top: 0.5em;
+            //margin-top: 0.5em;
         }
 
         button {
+            font-weight: bold;
             width: 100%;
             margin: 2px 0px;
-            text-transform: uppercase;
             cursor: pointer;
             &.half {
                 width: ~"calc(50% - 4px)";
@@ -248,7 +287,7 @@ body.html {
     .buttons {
         text-align: center;
         button {
-            text-transform: uppercase;
+            font-weight: bold;
             cursor: pointer;
             margin-top: 10px;
         }

customize.dist/src/less/variables.less

@@ -1,7 +1,8 @@
-@base: #302B28;
+@base: #f5f5f5;
 @light-base: lighten(@base, 20%);
 @less-light-base: lighten(@base, 10%);
-@fore: #fafafa;
+@fore: #111;
+@old-base: #302B28;
 
 @cp-green: #46E981;
 @cp-accent: lighten(@cp-green, 20%);

customize.dist/src/template.html

@@ -19,8 +19,6 @@
 <body class="html">
     {{topbar}}
 
-    {{fork}}
-
 {{noscript}}
 
 {{main}}