diff --git a/README.md b/README.md
index 0d55c7d..95de49d 100644
--- a/README.md
+++ b/README.md
@@ -295,6 +295,7 @@ var designer=CrysyanDesigner({
ifrName:"",
projectPath:"",
isRecord:false,
+ cssFile:"",
canvas: {
// px
width: 900,
@@ -326,6 +327,9 @@ Normally, the default value is OK
Path of crysyan project.
### `isRecord`
Whether to open the recording feature.Default:`false`.
+### `cssFile`
+Default:`empty string`,load inner css.
+If you not need load the css(include inner css).set the value of it to not string type
### `canvas`
* `width`
diff --git a/css/crysyan.css b/css/crysyan.css
new file mode 100644
index 0000000..bff7adc
--- /dev/null
+++ b/css/crysyan.css
@@ -0,0 +1,68 @@
+body {
+ padding: 0;
+ margin: 0;
+ text-align: center;
+ overflow-y: auto;
+ background-color: transparent;
+}
+.crysan-canvas-main {
+ position: absolute;
+ top: 20px;
+ width: 100%;
+}
+.crysan-canvas-main canvas {
+ margin: 0 auto;
+ background: #ffffff;
+ cursor: pointer;
+ border: 2px solid orange;
+ border-radius: 10px;
+ -webkit-box-shadow: 4px, 4px, 8px, 0, rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: 4px, 4px, 8px, 0, rgba(0, 0, 0, 0.5);
+ box-shadow: 4px, 4px, 8px, 0, rgba(0, 0, 0, 0.5);
+}
+#crysyan-toolbar {
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ text-align: center;
+}
+#crysyan-toolbar ul {
+ padding: 10px;
+ display: inline-block;
+ background: white;
+ border: 2px solid orange;
+ border-radius: 10px;
+}
+.ul-widget-list {
+ padding-left: 5px;
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+.ul-widget-list li {
+ margin: 0 10px;
+ list-style-type: none;
+ display: inline;
+ padding: 0;
+}
+.ul-widget-list li img {
+ vertical-align: middle;
+}
+.ul-widget-list li img:hover {
+ background: #fff767 !important;
+}
+.widget-selected-shape {
+ box-shadow: inset 0px 0px 4px 1px #c1a413 !important;
+ background: #fff767 !important;
+}
+.crysan-canvas-cover {
+ margin: 0 auto;
+ width: 1200px;
+ height: 650px;
+ background-color: white;
+ border: 1px solid white;
+ border-radius: 10px;
+ filter: alpha(opacity=60);
+ -moz-opacity: 0.6;
+ -khtml-opacity: 0.6;
+ opacity: 0.6;
+}
diff --git a/css/crysyan.less b/css/crysyan.less
new file mode 100644
index 0000000..3bc9e78
--- /dev/null
+++ b/css/crysyan.less
@@ -0,0 +1,77 @@
+body {
+ padding: 0;
+ margin: 0;
+ text-align: center;
+ overflow-y: auto;
+ background-color: transparent;
+}
+.shadowDiv(@top,@right,@bottom,@left,@color){
+ -webkit-box-shadow: @top,@right,@bottom,@left,@color;
+ -moz-box-shadow: @top,@right,@bottom,@left,@color;
+ box-shadow: @top,@right,@bottom,@left,@color;
+}
+// Transparent class
+.opacity-class(@opacitydegree) {
+ @filterdegree : @opacitydegree * 100;
+ filter: alpha(opacity= @filterdegree);
+ -moz-opacity: @opacitydegree;
+ -khtml-opacity: @opacitydegree;
+ opacity: @opacitydegree;
+}
+.crysan-canvas-main {
+ position: absolute;
+ top: 20px;
+ width: 100%;
+ canvas {
+ margin: 0 auto;
+ background: #ffffff;
+ cursor: pointer;
+ border: 2px solid orange;
+ border-radius: 10px;
+ .shadowDiv(4px, 4px, 8px, 0, rgba(0, 0, 0, 0.5));
+ }
+}
+#crysyan-toolbar {
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ text-align: center;
+ ul {
+ padding: 10px;
+ display: inline-block;
+ background: white;//#0980d8;
+ border: 2px solid orange;
+ border-radius: 10px;
+ }
+}
+.ul-widget-list {
+ li {
+ margin: 0 10px;
+ list-style-type: none;
+ display: inline;
+ //border-right: 1px solid #000;
+ padding: 0;
+ img {
+ vertical-align: middle;
+ &:hover {
+ background: rgb(255, 247, 103) !important;
+ }
+ }
+ }
+ padding-left: 5px;
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+.widget-selected-shape {
+ box-shadow: inset 0px 0px 4px 1px rgb(193, 164, 19) !important;
+ background: rgb(255, 247, 103) !important;
+}
+.crysan-canvas-cover{
+ margin: 0 auto;
+ width: 1200px;
+ height: 650px;
+ background-color: white;
+ border: 1px solid white;
+ border-radius: 10px;
+ .opacity-class(.6);
+}
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index 39cf55d..18fd514 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -9,6 +9,8 @@ var imagemin = require('gulp-imagemin');
var zip = require('gulp-zip');
var tar = require('gulp-tar');
var gzip = require('gulp-gzip');
+var less = require('gulp-less');
+var cleanCSS = require('gulp-clean-css');
// var debug = require('gulp-debug');
var runSequence = require('gulp-sequence');
var replace = require('gulp-replace');
@@ -38,7 +40,7 @@ var widgetsLoad = [];
})();
gulp.task('clean-all', function () {
- return gulp.src([distPath + "*", distPath, "release/", "release/*"])
+ return gulp.src([distPath + "*", distPath, "release/"])
.pipe(clean())
.pipe(plumber());
});
@@ -60,6 +62,20 @@ gulp.task('RecordRTC-minify', function () {
.pipe(gulp.dest(distPath));
});
+gulp.task('less', function () {
+ return gulp.src('css/*.less')
+ .pipe(less())
+ .pipe(plumber())
+ .pipe(gulp.dest('css/'));
+});
+
+gulp.task('minify-css',["less"], function () {
+ return gulp.src('css/*.css')
+ .pipe(cleanCSS({compatibility: 'ie8'}))
+ .pipe(gulp.dest(distPath));
+});
+
+
gulp.task('widgets-concat', function () {
return gulp.src(widgetsLoad)
.pipe(concat("widgets.js"))
@@ -79,6 +95,10 @@ gulp.task('core-header', function () {
.pipe(header('var CrysyanFlag=false;'))
.pipe(plumber())
.pipe(replace('../js/ext/RecordRTC.js', 'RecordRTC.js'))
+ .pipe(plumber())
+ .pipe(replace('../js/ext/RecordRTC.js', 'RecordRTC.js'))
+ .pipe(plumber())
+ .pipe(replace('"../css/crysyan.css"', '"crysyan.css"'))
.pipe(plumber())
.pipe(replace(' var widgetIconPath = "../img/";', ' var widgetIconPath = "img/";'))
.pipe(plumber())
@@ -128,6 +148,7 @@ gulp.task('building', ['clean-all'], function (cb) {
runSequence(
["designer-minify",
"RecordRTC-minify",
+ "minify-css",
"core-widgets-concat-minify",
"imagemin",
"html-replace-move",
@@ -160,7 +181,6 @@ gulp.task('tar.gz', function () {
});
-
gulp.task('publish', ['build'], function (cb) {
runSequence(["zip","tar.gz"], cb);
});
diff --git a/html/crysyan.html b/html/crysyan.html
index b532cd8..50778f9 100644
--- a/html/crysyan.html
+++ b/html/crysyan.html
@@ -4,63 +4,16 @@
Title
-
-
-
-
-
+
+
+
+
+
+
+
+