From 3b99c42e220e5dc4e7875dcc08189fe2854fcd7f Mon Sep 17 00:00:00 2001
From: ansuz <ansuz@transitiontech.ca>
Date: Fri, 7 Apr 2017 22:05:31 +0200
Subject: [PATCH] no more inline styles

---
 package.json              |  2 +-
 www/whiteboard/index.html | 79 +--------------------------------------
 www/whiteboard/main.css   | 79 +++++++++++++++++++++++++++++++++++++++
 www/whiteboard/main.less  | 77 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 158 insertions(+), 79 deletions(-)
 create mode 100644 www/whiteboard/main.css
 create mode 100644 www/whiteboard/main.less

diff --git a/package.json b/package.json
index db3969c10..21a5b35ea 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
   "scripts": {
       "lint": "jshint --config .jshintrc --exclude-path .jshintignore .",
       "test": "node TestSelenium.js",
-      "style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css && lessc ./www/drive/file.less > ./www/drive/file.css && lessc ./www/settings/main.less > ./www/settings/main.css && lessc ./www/slide/slide.less > ./www/slide/slide.css",
+      "style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css && lessc ./www/drive/file.less > ./www/drive/file.css && lessc ./www/settings/main.less > ./www/settings/main.css && lessc ./www/slide/slide.less > ./www/slide/slide.css && lessc ./www/whiteboard/main.less > ./www/whiteboard/main.css",
       "template": "cd customize.dist/src && node build.js"
   }
 }
diff --git a/www/whiteboard/index.html b/www/whiteboard/index.html
index 81065b3c5..bf082ead4 100644
--- a/www/whiteboard/index.html
+++ b/www/whiteboard/index.html
@@ -11,84 +11,7 @@
         id="favicon" />
     <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <link rel="stylesheet" href="/customize/main.css" />
-    <style>
-        html, body{
-            padding: 0px;
-            margin: 0px;
-            box-sizing: border-box;
-        }
-        body {
-            display: flex;
-            flex-flow: column;
-            height: 100%;
-            background: url('/customize/bg3.jpg') no-repeat center center;
-            background-size: cover;
-            background-position: center;
-        }
-        #canvas-area {
-            flex: 1;
-            display: flex;
-        }
-        .canvas-container {
-            border: 1px solid black;
-            margin: auto;
-            background: white;
-        }
-        #clear, #toggleDraw {
-            display: inline;
-            vertical-align: middle;
-        }
-        #colors {
-            z-index: 100;
-            background: white;
-            display: flex;
-            justify-content: space-between;
-        }
-        .selected {
-            margin-left: 20px;
-            display: inline-block;
-            height: 100px;
-        }
-        .selected img {
-            vertical-align: middle;
-        }
-        #copy {
-            padding-left: 75px;
-        }
-        span.palette-color {
-            height: 4vw;
-            width: 4vw;
-            display: inline-block;
-            margin: 5px;
-            border: 1px solid black;
-            vertical-align: top;
-        }
-        #controls {
-            display: block;
-            position: relative;
-            border-top: 1px solid black;
-            background: white;
-            height: 100px;
-            line-height: 100px;
-        }
-        #width, #colors {
-            position: relative;
-            vertical-align: middle;
-        }
-        #color-picker {
-            display: block;
-        }
-        #pickers {
-            visibility: hidden;
-            position: absolute;
-            width: 0;
-            height: 0;
-            z-index: -5;
-        }
-        .hidden {
-            display: none;
-        }
-    </style>
+    <link rel="stylesheet" href="main.css" />
 </head>
 <body>
     <div id="toolbar" class="toolbar-container"></div>
diff --git a/www/whiteboard/main.css b/www/whiteboard/main.css
new file mode 100644
index 000000000..95592a6b7
--- /dev/null
+++ b/www/whiteboard/main.css
@@ -0,0 +1,79 @@
+html,
+body {
+  padding: 0px;
+  margin: 0px;
+  box-sizing: border-box;
+}
+body {
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+  background: url('/customize/bg3.jpg') no-repeat center center;
+  background-size: cover;
+  background-position: center;
+}
+#canvas-area {
+  flex: 1;
+  display: flex;
+}
+.canvas-container {
+  border: 1px solid black;
+  margin: auto;
+  background: white;
+}
+#clear,
+#toggleDraw {
+  display: inline;
+  vertical-align: middle;
+}
+#colors {
+  z-index: 100;
+  background: white;
+  display: flex;
+  justify-content: space-between;
+}
+.selected {
+  margin-left: 20px;
+  display: inline-block;
+  height: 100px;
+}
+.selected img {
+  vertical-align: middle;
+}
+#copy {
+  padding-left: 75px;
+}
+span.palette-color {
+  height: 4vw;
+  width: 4vw;
+  display: inline-block;
+  margin: 5px;
+  border: 1px solid black;
+  vertical-align: top;
+}
+#controls {
+  display: block;
+  position: relative;
+  border-top: 1px solid black;
+  background: white;
+  height: 100px;
+  line-height: 100px;
+}
+#width,
+#colors {
+  position: relative;
+  vertical-align: middle;
+}
+#color-picker {
+  display: block;
+}
+#pickers {
+  visibility: hidden;
+  position: absolute;
+  width: 0;
+  height: 0;
+  z-index: -5;
+}
+.hidden {
+  display: none;
+}
diff --git a/www/whiteboard/main.less b/www/whiteboard/main.less
new file mode 100644
index 000000000..fcaa54a8c
--- /dev/null
+++ b/www/whiteboard/main.less
@@ -0,0 +1,77 @@
+html, body{
+    padding: 0px;
+    margin: 0px;
+    box-sizing: border-box;
+}
+body {
+    display: flex;
+    flex-flow: column;
+    height: 100%;
+    background: url('/customize/bg3.jpg') no-repeat center center;
+    background-size: cover;
+    background-position: center;
+}
+#canvas-area {
+    flex: 1;
+    display: flex;
+}
+.canvas-container {
+    border: 1px solid black;
+    margin: auto;
+    background: white;
+}
+#clear, #toggleDraw {
+    display: inline;
+    vertical-align: middle;
+}
+#colors {
+    z-index: 100;
+    background: white;
+    display: flex;
+    justify-content: space-between;
+}
+.selected {
+    margin-left: 20px;
+    display: inline-block;
+    height: 100px;
+    img {
+        vertical-align: middle;
+    }
+}
+#copy {
+    padding-left: 75px;
+}
+span.palette-color {
+    height: 4vw;
+    width: 4vw;
+    display: inline-block;
+    margin: 5px;
+    border: 1px solid black;
+    vertical-align: top;
+}
+#controls {
+    display: block;
+    position: relative;
+    border-top: 1px solid black;
+    background: white;
+    height: 100px;
+    line-height: 100px;
+}
+#width, #colors {
+    position: relative;
+    vertical-align: middle;
+}
+#color-picker {
+    display: block;
+}
+#pickers {
+    visibility: hidden;
+    position: absolute;
+    width: 0;
+    height: 0;
+    z-index: -5;
+}
+.hidden {
+    display: none;
+}
+