break monolithic style file into several modules

customize.dist/src/less/bar.less

@@ -0,0 +1,91 @@
+/* Bottom Bar */
+
+.top-bar, .bottom-bar {
+    position:fixed;
+    height:4%;
+    height: 2.5em;
+
+    display: inline-block;
+    width: 100%;
+    background: @base;
+    border-top: 1px solid @cp-outline;
+
+    a {
+        color: @cp-green;
+        text-decoration: none;
+    }
+    p {
+        margin: -1px;
+        font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
+
+        font-size: 20px;
+        display:block;
+        margin-left: 10px;
+        padding-top:3px;
+        color: @fore;
+    }
+    img {
+        margin-right: 4px;
+        position: relative;
+    }
+
+    .big {
+        @media screen and (max-width: 800px) {
+            display: none;
+        }
+        @media screen and (min-width: 801px) {
+            display: inline-block;
+        }
+    }
+    .small {
+        @media screen and (max-width: 800px) {
+            display: inline-block;
+        }
+        @media screen and (min-width: 801px) {
+            display: none;
+        }
+        img {
+            height: 1.25em;
+        }
+    }
+
+}
+.bottom-bar {
+    bottom: 0px;
+    right: 0px;
+}
+.top-bar {
+    top: 0px;
+    right: 0px;
+}
+
+.bottom-bar-left {
+    display:block;
+    float:left;
+    padding-left:10px;
+}
+.bottom-bar-left p {
+    float: right;
+}
+.bottom-bar-right {
+    display:block;
+    float:right;
+    padding-right:20px
+}
+.bottom-bar-center {
+    width: 20%;
+    position: absolute;
+    left: 40%;
+    text-align: center;
+}
+.bottom-bar-heart {
+    top: 2px;
+}
+.bottom-bar-xwiki {
+    top: 3px;
+}
+.bottom-bar-openpaas {
+    top: 3px;
+    max-width: 100px;
+}
+

customize.dist/src/less/cryptpad.less

@@ -1,44 +1,36 @@
 @import "./variables.less";
+@import "./mixins.less";
+
 @import "./alertify.less";
+@import "./bar.less";
+@import "./loading.less";
 
-html.cp {
+html.cp, .cp body {
     font-size: .875em;
     background-color: @base;
     color: @fore;
-}
 
-.cp {
+    font-family: Georgia,Cambria,serif;
-.fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){
+    height: 100%;
-    @font-face{
-        font-family: @family;
-        src: url(@src) format(@fmt);
-        font-weight: @weight;
-        font-style: @style;
-    }
 }
 
-a.github-corner > svg {
+.cp {
-    fill: @cp-green;
-    color: @base;
-}
 
-.transform(...) {
+body {
-    -webkit-transform: @arguments;
+    font-size: 1rem;
-    -moz-transform: @arguments;
+    font-weight: 400;
-    -o-transform: @arguments;
+    line-height: 2rem;
-    -ms-transform: @arguments;
-    transform: @arguments;
 }
 
-.translate(@x:0, @y:0) {
+#language-selector {
-    .transform(translate(@x, @y));
+    position: absolute;
+    top: 0px;
+    right: 0px;
 }
 
-.table-refresh > svg {
+a.github-corner > svg {
-    width: .9em;
+    fill: @cp-blue;
-    height: .9em;
+    color: @base;
-    fill: @cp-green;
-    .translate(0, 15%);
 }
 
 .lato {
@@ -46,17 +38,6 @@ a.github-corner > svg {
     font-size: 1.02em;
 }
 
-html,body {
-    font-family: Georgia,Cambria,serif;
-    height: 100%;
-}
-
-body {
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 2rem;
-}
-
 h1,h2,h3,h4,h5,h6 {
     color: @fore;
 
@@ -138,36 +119,6 @@ p, pre, td, a, table, tr {
     .lato;
 }
 
-#loading {
-    position: fixed;
-    z-index: 9999;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-    background: @bg-loading;
-    text-align: center;
-    font-size: 1.5em;
-    .loadingContainer {
-        margin-top: 50vh;
-        transform: translateY(-50%);
-    }
-    .cryptofist {
-        margin-left: auto;
-        margin-right: auto;
-        @media screen and (max-height: 450px) {
-            display: none;
-        }
-    }
-    .spinnerContainer {
-        position: relative;
-        height: 100px;
-        > div {
-            height: 100px;
-        }
-    }
-}
-
 #main {
     width: 70vw;
     margin: auto;
@@ -183,10 +134,18 @@ p, pre, td, a, table, tr {
 }
 
 /* buttons */
+
+// home page button container
+.buttons {
+    margin-bottom: 50px;
+    margin-top: 20px;
+    line-height: 2.5em;
+}
+
 .create, .action {
+    display: inline-block;
     @thick: 2px;
     border: @thick solid @cp-green;
-    border-radius: 10px;
     background-color: @base;
     color: @cp-green;
 
@@ -199,34 +158,21 @@ p, pre, td, a, table, tr {
         color: @cp-green;
     }
 }
-.create {
-    display: none;
-}
-.action {
-    display: inline-block;
-}
-.buttons {
-    margin-bottom: 50px;
-    margin-top: 20px;
-    line-height: 2.5em;
-}
 
 .button {
     @hpad: 2 * 6px;
     @vpad: 2 * 2px;
     padding: @vpad @hpad @vpad @hpad;
 
-    border-radius: 5px;
     margin-top: 2 * 6px;
     margin-bottom: 2 * 6px;
     display: inline-block;
     line-height: 1.5em;
 }
-.alertify button {
-    margin: 3px 0px;
-}
-/* Tables */
 
+/*  Tables
+ *  Currently only used by /poll/
+ */
 table {
     border-collapse: collapse;
     border-spacing: 0;
@@ -271,7 +217,6 @@ tbody {
         }
     }
 
-
     td {
         border-right: 1px solid black;
         padding: 12px;
@@ -283,107 +228,12 @@ tbody {
     }
 }
 
-/* Bottom Bar */
-
-.top-bar, .bottom-bar {
-    position:fixed;
-    height:4%;
-    height: 2.5em;
-
-    display: inline-block;
-    width: 100%;
-    background: @base;
-    border-top: 1px solid @cp-outline;
-
-    a {
-        color: @cp-green;
-        text-decoration: none;
-    }
-    p {
-        margin: -1px;
-        font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
-
-        font-size: 20px;
-        display:block;
-        margin-left: 10px;
-        padding-top:3px;
-        color: @fore;
-    }
-    img {
-        margin-right: 4px;
-        position: relative;
-    }
-
-    .big {
-        @media screen and (max-width: 800px) {
-            display: none;
-        }
-        @media screen and (min-width: 801px) {
-            display: inline-block;
-        }
-    }
-    .small {
-        @media screen and (max-width: 800px) {
-            display: inline-block;
-        }
-        @media screen and (min-width: 801px) {
-            display: none;
-        }
-        img {
-            height: 1.25em;
-        }
-    }
-
-}
-.bottom-bar {
-    bottom: 0px;
-    right: 0px;
-}
-.top-bar {
-    top: 0px;
-    right: 0px;
-}
-
-.bottom-bar-left {
-    display:block;
-    float:left;
-    padding-left:10px;
-}
-.bottom-bar-left p {
-    float: right;
-}
-.bottom-bar-right {
-    display:block;
-    float:right;
-    padding-right:20px
-}
-.bottom-bar-center {
-    width: 20%;
-    position: absolute;
-    left: 40%;
-    text-align: center;
-}
-.bottom-bar-heart {
-    top: 2px;
-}
-.bottom-bar-xwiki {
-    top: 3px;
-}
-.bottom-bar-openpaas {
-    top: 3px;
-    max-width: 100px;
-}
-
-
 // form things
 
-// MIXINS
-.bottom-left(@s: 5px) { border-bottom-left-radius: @s; }
 .bottom-left {
     .bottom-left;
 }
 
-.top-left(@s: 5px) { border-top-left-radius: @s; }
 .top-left {
     .top-left;
 }
@@ -610,6 +460,7 @@ form.realtime, div.realtime {
     #addoption { .bottom-left; }
 }
 
+// used for slides
 .viewportRatio (@x, @y, @p: 100) {
     width: @p * 100vw;
     height: @y * (@p * 100vw) / @x;
@@ -617,7 +468,6 @@ form.realtime, div.realtime {
     max-height: (@p * 100vh);
 }
 
-
 &.slide {
     #modal #content {
         p, ul, ol { font-size: 26px; }
@@ -639,11 +489,6 @@ div.modal, div#modal {
 
     #content {
         box-sizing: border-box;
-        .size (@n) {
-            font-size: @n * 1vw;
-            line-height: @n * 1.1vw;
-        }
-
         border: 1px solid white;
 
         vertical-align: middle;
@@ -678,16 +523,13 @@ div.modal, div#modal {
         h5 { .size(2.2); }
         h6 { .size(1.6); }
 
-
         pre > code {
-
             display: block;
             position: relative;
             border: 1px solid #333;
             width: 90%;
             margin: auto;
             padding-left: .25vw;
-
         }
 
         ul, ol {

customize.dist/src/less/loading.less

@@ -0,0 +1,30 @@
+.cp #loading {
+    position: fixed;
+    z-index: 9999;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    background: @bg-loading;
+    text-align: center;
+    font-size: 1.5em;
+    .loadingContainer {
+        margin-top: 50vh;
+        transform: translateY(-50%);
+    }
+    .cryptofist {
+        margin-left: auto;
+        margin-right: auto;
+        @media screen and (max-height: 450px) {
+            display: none;
+        }
+    }
+    .spinnerContainer {
+        position: relative;
+        height: 100px;
+        > div {
+            height: 100px;
+        }
+    }
+}
+

customize.dist/src/less/mixins.less

@@ -0,0 +1,29 @@
+.fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){
+    @font-face{
+        font-family: @family;
+        src: url(@src) format(@fmt);
+        font-weight: @weight;
+        font-style: @style;
+    }
+}
+
+.transform(...) {
+    -webkit-transform: @arguments;
+    -moz-transform: @arguments;
+    -o-transform: @arguments;
+    -ms-transform: @arguments;
+    transform: @arguments;
+}
+
+.translate(@x:0, @y:0) {
+    .transform(translate(@x, @y));
+}
+
+.bottom-left(@s: 5px) { border-bottom-left-radius: @s; }
+.top-left(@s: 5px) { border-top-left-radius: @s; }
+
+.size (@n) {
+    font-size: @n * 1vw;
+    line-height: @n * 1.1vw;
+}
+

customize.dist/src/less/variables.less

@@ -10,6 +10,11 @@
 @cp-outline: #444;
 
 @cp-orange: #FE9A2E;
+
+@cp-blue: #00CFC1;
+@cp-blue: #00ADEE;
+@cp-light-blue: lighten(@cp-blue, 20%);
+
 // alertify things
 
 @box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
@@ -22,7 +27,7 @@
 @text-color: rgba(0, 0, 0, .8);
 @border-radius: 1px;
 
-@alertify-dialog-bg: #333;
+@alertify-dialog-bg: #444;
 @alertify-dialog-fg: @fore;
 
 @alertify-btn-fg: @fore;

package.json

@@ -16,7 +16,7 @@
   "scripts": {
       "lint": "jshint --config .jshintrc --exclude-path .jshintignore .",
       "test": "node TestSelenium.js",
-      "style": "lessc ./customize.dist/src/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/toolbar.less > ./customize.dist/toolbar.css",
+      "style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css",
       "template": "cd customize.dist/src && node build.js"
   }
 }