no more inline styles

This commit is contained in:
ansuz 2017-04-07 22:05:31 +02:00
parent ef821c3e7e
commit 3b99c42e22
4 changed files with 158 additions and 79 deletions

View File

@ -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"
}
}

View File

@ -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>

79
www/whiteboard/main.css Normal file
View File

@ -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;
}

77
www/whiteboard/main.less Normal file
View File

@ -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;
}