diff --git a/src/style_manager/templates/propertyColor.html b/src/style_manager/templates/propertyColor.html
index ef9e93e88..af08e44e0 100644
--- a/src/style_manager/templates/propertyColor.html
+++ b/src/style_manager/templates/propertyColor.html
@@ -1,4 +1,7 @@
\ No newline at end of file
diff --git a/src/style_manager/view/PropertyColorView.js b/src/style_manager/view/PropertyColorView.js
index 3bd63b0be..9e6cb7871 100644
--- a/src/style_manager/view/PropertyColorView.js
+++ b/src/style_manager/view/PropertyColorView.js
@@ -15,6 +15,7 @@ define(['backbone','./PropertyView', 'Spectrum', 'text!./../templates/propertyCo
}
if(!this.$colorPicker){
this.$colorPicker = $('', {class: this.pfx + "color-picker"});
+ cpStyle = this.$colorPicker.get(0).style;
var that = this;
this.$colorPicker.spectrum({
showAlpha: true,
@@ -22,16 +23,16 @@ define(['backbone','./PropertyView', 'Spectrum', 'text!./../templates/propertyCo
cancelText: '⨯',
move: function(color) {
var c = color.getAlpha() == 1 ? color.toHexString() : color.toRgbString();
- that.$colorPicker.get(0).style.backgroundColor = c;
+ cpStyle.backgroundColor = c;
},
change: function(color) {
var c = color.getAlpha() == 1 ? color.toHexString() : color.toRgbString();
c = c.replace(/ /g,'');
- that.$colorPicker.get(0).style.backgroundColor = c;
+ cpStyle.backgroundColor = c;
that.model.set('value', c);
}
});
- this.$el.find('#' + this.pfx + 'input-holder').append(this.$colorPicker);
+ this.$el.find('.' + this.pfx + 'colorp-c').append(this.$colorPicker);
}
this.setValue(this.componentValue, 0);
},
diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js
index e2e618a7e..16b613204 100644
--- a/src/style_manager/view/PropertyView.js
+++ b/src/style_manager/view/PropertyView.js
@@ -13,6 +13,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat
initialize: function(o) {
this.config = o.config || {};
this.pfx = this.config.stylePrefix || '';
+ this.ppfx = this.config.pStylePrefix || '';
this.target = o.target || {};
this.propTarget = o.propTarget || {};
this.onChange = o.onChange || {};
@@ -229,6 +230,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat
renderLabel: function(){
this.$el.html( this.templateLabel({
pfx : this.pfx,
+ ppfx : this.ppfx,
icon : this.model.get('icon'),
info : this.model.get('info'),
label : this.model.get('name'),
@@ -250,6 +252,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat
renderTemplate: function(){
this.$el.append( this.template({
pfx : this.pfx,
+ ppfx : this.ppfx,
icon : this.model.get('icon'),
info : this.model.get('info'),
label : this.model.get('name'),
diff --git a/styles/css/main.css b/styles/css/main.css
index 6b7be0953..153bb6971 100644
--- a/styles/css/main.css
+++ b/styles/css/main.css
@@ -2557,10 +2557,16 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
.fa-percent:before {
content: ""; }
+/* Dark theme */
/* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%)*/
+/*l: #d8d7db*/
+/* Light theme
+$mainColor: #fff;
+$fontColor: #9299a3;
+$fontColorActive: #4f8ef7;
+*/
/* darken($mainColor, 4%) - #383838*/
/*#515151*/
-/*l: #d8d7db*/
.wte-invis-invis, .wte-clm-tags #wte-clm-new, .wte-no-app {
background-color: transparent;
border: none;
@@ -2579,9 +2585,15 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
.wte-checker-bg, .checker-bg, .wte-sm-sector .wte-sm-property .wte-sm-layer > #wte-sm-preview-box, .wte-clm-tags .wte-sm-property .wte-sm-layer > #wte-sm-preview-box {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg=="); }
-.wte-bg-main, .wte-pn-panel, .wte-nv-item .wte-nv-title-c, .wte-mdl-dialog, #wte-rte-toolbar, .sp-container {
+.wte-bg-main, .wte-pn-panel, .wte-nv-item .wte-nv-title-c, .wte-sm-sector .wte-sm-colorp-c, .wte-clm-tags .wte-sm-colorp-c, .wte-mdl-dialog, #wte-rte-toolbar, .sp-container {
background-color: #444; }
+.wte-color-main, .wte-btn-prim, .wte-pn-panel, .wte-pn-btn, .wte-btnt, .wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite, .wte-sm-sector .wte-sm-composite.wte-clm-field, .wte-clm-tags .wte-sm-composite.wte-clm-field, .wte-sm-sector .wte-sm-stack #wte-sm-add, .wte-clm-tags .wte-sm-stack #wte-sm-add, .wte-mdl-dialog, #wte-rte-toolbar .wte-rte-btn {
+ color: #ddd; }
+
+.wte-color-active, .wte-pn-btn.wte-pn-active, .wte-btnt.wte-pn-active {
+ color: #f8f8f8; }
+
/********************* MAIN ************************/
.clear {
clear: both; }
@@ -2598,9 +2610,6 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
font-family: Helvetica, sans-serif;
background-color: #444;
position: relative;
- border: 3px solid #444;
- border-left: none;
- border-right: none;
box-sizing: border-box;
height: 100%;
min-width: 1250px; }
@@ -2611,11 +2620,10 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
pointer-events: none; }
.wte-btn-prim {
- background-color: rgba(255, 255, 255, 0.15);
+ background-color: rgba(255, 255, 255, 0.1);
border-radius: 2px;
padding: 3px 6px;
cursor: pointer;
- color: #ddd;
padding: 0.5em;
border: none; }
@@ -2628,7 +2636,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
border-radius: 2px;
box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
box-sizing: border-box;
- color: #eee;
+ color: #ddd;
padding: 0.5em 1em; }
/************* CANVAS ****************/
@@ -2708,7 +2716,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
#views.panel {
width: 16.5%;
font-weight: lighter;
- color: #eee;
+ color: #ddd;
right: 0;
top: 0;
z-index: 3;
@@ -2854,7 +2862,6 @@ ol.example li.placeholder:before {
line-height: 21px;
background-color: transparent;
border: none;
- color: #eee;
font-size: 18px;
margin-bottom: 5px;
border-radius: 2px;
@@ -2865,7 +2872,7 @@ ol.example li.placeholder:before {
background-color: rgba(0, 0, 0, 0.15);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.25) inset; }
.wte-pn-btn > .wte-pn-arrow-rd, .wte-btnt > .wte-pn-arrow-rd {
- border-bottom: 5px solid #eee;
+ border-bottom: 5px solid rgba(255, 255, 255, 0.7);
border-left: 5px solid transparent;
bottom: 2px;
right: 2px;
@@ -2905,7 +2912,6 @@ ol.example li.placeholder:before {
.wte-nv-navigator #wte-nv-placeholder #wte-nv-plh-int.wte-nv-insert {
background-color: #62c462; }
.wte-nv-navigator .wte-nv-item {
- color: #eee;
font-weight: lighter;
text-align: left;
position: relative;
@@ -2926,7 +2932,7 @@ ol.example li.placeholder:before {
top: 0;
padding: 7px 5px 7px 10px;
position: absolute;
- color: #bbbbbb;
+ color: #aaaaaa;
cursor: pointer;
z-index: 1; }
.wte-nv-navigator .wte-nv-item .wte-nv-title {
@@ -2937,11 +2943,10 @@ ol.example li.placeholder:before {
width: 8px; }
.wte-nv-item .wte-nv-title {
- background-color: rgba(0, 0, 0, 0.15);
+ background-color: rgba(0, 0, 0, 0.1);
font-size: 13px;
letter-spacing: 1px;
padding: 7px 10px 7px 25px;
- text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(255, 255, 255, 0.1);
cursor: pointer; }
@@ -2963,7 +2968,7 @@ ol.example li.placeholder:before {
display: none; }
.wte-nv-item > #wte-nv-move {
- color: #bbbbbb;
+ color: #aaaaaa;
position: absolute;
cursor: move;
font-size: 12px;
@@ -3017,7 +3022,7 @@ ol.example li.placeholder:before {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
- color: #d5d5d5;
+ color: rgba(255, 255, 255, 0.7);
border: none;
background-color: transparent;
width: 100%;
@@ -3025,7 +3030,7 @@ ol.example li.placeholder:before {
z-index: 1; }
.wte-field select {
color: transparent;
- text-shadow: 0 0 0 #d5d5d5;
+ text-shadow: 0 0 0 rgba(255, 255, 255, 0.7);
height: 20px; }
.wte-field option {
margin: 5px 0; }
@@ -3038,7 +3043,7 @@ ol.example li.placeholder:before {
z-index: 0; }
.wte-field .wte-d-s-arrow {
bottom: 7px;
- border-top: 4px solid #b1b1b1;
+ border-top: 4px solid rgba(255, 255, 255, 0.7);
position: absolute;
height: 0;
width: 0;
@@ -3049,7 +3054,7 @@ ol.example li.placeholder:before {
.wte-add-trasp {
background: none;
border: none;
- color: #eee;
+ color: #ddd;
cursor: pointer;
font-size: 1em;
border-radius: 2px;
@@ -3067,7 +3072,6 @@ ol.example li.placeholder:before {
display: flex;
align-items: center;
padding: 10px 5px;
- color: #d5d5d5;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
margin-bottom: 10px; }
.wte-devices-c .wte-device-label {
@@ -3096,16 +3100,13 @@ ol.example li.placeholder:before {
filter: alpha(opacity=70); }
.wte-sm-header {
- color: #eee;
font-size: 11px;
font-weight: lighter;
- padding: 10px;
- text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
+ padding: 10px; }
.wte-sm-sector, .wte-clm-tags {
clear: both;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
- color: #eee;
font-weight: lighter;
text-align: left;
/*------------------Field--------------------*/
@@ -3116,12 +3117,10 @@ ol.example li.placeholder:before {
padding-right: 5px;
font-size: 11px; }
.wte-sm-sector .wte-sm-title, .wte-clm-tags .wte-sm-title {
- background-color: rgba(0, 0, 0, 0.15);
+ background-color: rgba(0, 0, 0, 0.1);
font-size: 13px;
letter-spacing: 1px;
padding: 12px 10px 12px 20px;
- text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
- border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(255, 255, 255, 0.1);
cursor: pointer; }
.wte-sm-sector .wte-sm-label, .wte-clm-tags .wte-sm-label {
@@ -3131,7 +3130,7 @@ ol.example li.placeholder:before {
position: relative; }
.wte-sm-sector .wte-sm-field input, .wte-clm-tags .wte-sm-field input, .wte-sm-sector .wte-clm-field input, .wte-clm-tags .wte-clm-field input {
box-sizing: border-box;
- color: #d5d5d5;
+ color: rgba(255, 255, 255, 0.7);
background: none;
border: none;
padding: 3px 21px 3px 0;
@@ -3139,11 +3138,11 @@ ol.example li.placeholder:before {
.wte-sm-sector .wte-sm-field select, .wte-clm-tags .wte-sm-field select, .wte-sm-sector .wte-clm-field select, .wte-clm-tags .wte-clm-field select {
background: none;
border: none;
- color: #d5d5d5;
+ color: rgba(255, 255, 255, 0.7);
color: transparent;
width: 100%;
padding: 2px 10px 2px 0;
- text-shadow: 0 0 0 #d5d5d5;
+ text-shadow: 0 0 0 rgba(255, 255, 255, 0.7);
position: relative;
z-index: 1;
-webkit-appearance: none;
@@ -3156,7 +3155,7 @@ ol.example li.placeholder:before {
right: 10px;
top: 3px;
font-size: 10px;
- color: #b1b1b1;
+ color: rgba(255, 255, 255, 0.7);
cursor: pointer; }
.wte-sm-sector .wte-sm-field .wte-sm-int-arrows, .wte-clm-tags .wte-sm-field .wte-sm-int-arrows, .wte-sm-sector .wte-clm-field .wte-sm-int-arrows, .wte-clm-tags .wte-clm-field .wte-sm-int-arrows, .wte-sm-sector .wte-sm-field .wte-sm-sel-arrow, .wte-clm-tags .wte-sm-field .wte-sm-sel-arrow, .wte-sm-sector .wte-clm-field .wte-sm-sel-arrow, .wte-clm-tags .wte-clm-field .wte-sm-sel-arrow, .wte-sm-sector .wte-sm-field .wte-clm-sel-arrow, .wte-clm-tags .wte-sm-field .wte-clm-sel-arrow, .wte-sm-sector .wte-clm-field .wte-clm-sel-arrow, .wte-clm-tags .wte-clm-field .wte-clm-sel-arrow {
height: 100%;
@@ -3175,24 +3174,26 @@ ol.example li.placeholder:before {
border-right: 4px solid transparent;
cursor: pointer; }
.wte-sm-sector .wte-sm-field .wte-sm-u-arrow, .wte-clm-tags .wte-sm-field .wte-sm-u-arrow, .wte-sm-sector .wte-clm-field .wte-sm-u-arrow, .wte-clm-tags .wte-clm-field .wte-sm-u-arrow {
- border-bottom: 4px solid #b1b1b1;
+ border-bottom: 4px solid rgba(255, 255, 255, 0.7);
top: 4px; }
.wte-sm-sector .wte-sm-field .wte-sm-d-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-arrow, .wte-sm-sector .wte-clm-field .wte-sm-d-arrow, .wte-clm-tags .wte-clm-field .wte-sm-d-arrow, .wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-sm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-clm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-clm-d-s-arrow {
- border-top: 4px solid #b1b1b1;
+ border-top: 4px solid rgba(255, 255, 255, 0.7);
bottom: 4px; }
.wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-sm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-clm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-clm-d-s-arrow {
bottom: 7px; }
- .wte-sm-sector .wte-sm-field.wte-sm-integer, .wte-clm-tags .wte-sm-field.wte-sm-integer, .wte-sm-sector .wte-sm-integer.wte-clm-field, .wte-clm-tags .wte-sm-integer.wte-clm-field, .wte-clm-tags #wte-clm-tags-field, .wte-sm-sector .wte-sm-field.wte-sm-select, .wte-clm-tags .wte-sm-field.wte-sm-select, .wte-sm-sector .wte-sm-select.wte-clm-field, .wte-clm-tags .wte-sm-select.wte-clm-field, .wte-sm-sector .wte-clm-select, .wte-clm-tags .wte-clm-select, .wte-sm-sector .wte-sm-field.wte-sm-list, .wte-clm-tags .wte-sm-field.wte-sm-list, .wte-sm-sector .wte-sm-list.wte-clm-field, .wte-clm-tags .wte-sm-list.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-color, .wte-clm-tags .wte-sm-field.wte-sm-color, .wte-sm-sector .wte-sm-color.wte-clm-field, .wte-clm-tags .wte-sm-color.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite, .wte-sm-sector .wte-sm-composite.wte-clm-field, .wte-clm-tags .wte-sm-composite.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-input, .wte-clm-tags .wte-sm-field.wte-sm-input, .wte-sm-sector .wte-sm-input.wte-clm-field, .wte-clm-tags .wte-sm-input.wte-clm-field {
+ .wte-sm-sector .wte-sm-field.wte-sm-integer, .wte-clm-tags .wte-sm-field.wte-sm-integer, .wte-sm-sector .wte-sm-integer.wte-clm-field, .wte-clm-tags .wte-sm-integer.wte-clm-field, .wte-clm-tags #wte-clm-tags-field, .wte-sm-sector .wte-sm-field.wte-sm-select, .wte-clm-tags .wte-sm-field.wte-sm-select, .wte-sm-sector .wte-sm-select.wte-clm-field, .wte-clm-tags .wte-sm-select.wte-clm-field, .wte-sm-sector .wte-clm-select, .wte-clm-tags .wte-clm-select, .wte-sm-sector .wte-sm-field.wte-sm-list, .wte-clm-tags .wte-sm-field.wte-sm-list, .wte-sm-sector .wte-sm-list.wte-clm-field, .wte-clm-tags .wte-sm-list.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-color, .wte-clm-tags .wte-sm-field.wte-sm-color, .wte-sm-sector .wte-sm-color.wte-clm-field, .wte-clm-tags .wte-sm-color.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-input, .wte-clm-tags .wte-sm-field.wte-sm-input, .wte-sm-sector .wte-sm-input.wte-clm-field, .wte-clm-tags .wte-sm-input.wte-clm-field {
background-color: rgba(0, 0, 0, 0.3);
/*353535*/
border: 1px solid rgba(0, 0, 0, 0.1);
/*292929*/
box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
/*575757*/
- color: #d5d5d5;
+ color: rgba(255, 255, 255, 0.7);
border-radius: 2px;
box-sizing: border-box;
padding: 0 5px; }
+ .wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite, .wte-sm-sector .wte-sm-composite.wte-clm-field, .wte-clm-tags .wte-sm-composite.wte-clm-field {
+ border-radius: 2px; }
.wte-sm-sector .wte-sm-field.wte-sm-select, .wte-clm-tags .wte-sm-field.wte-sm-select, .wte-sm-sector .wte-sm-select.wte-clm-field, .wte-clm-tags .wte-sm-select.wte-clm-field, .wte-sm-sector .wte-clm-select, .wte-clm-tags .wte-clm-select {
padding: 0; }
.wte-sm-sector .wte-sm-field.wte-sm-select select, .wte-clm-tags .wte-sm-field.wte-sm-select select, .wte-sm-sector .wte-sm-select.wte-clm-field select, .wte-clm-tags .wte-sm-select.wte-clm-field select, .wte-sm-sector .wte-clm-select select, .wte-clm-tags .wte-clm-select select {
@@ -3227,9 +3228,7 @@ ol.example li.placeholder:before {
color: transparent; }
.wte-sm-sector .wte-sm-list .wte-sm-el, .wte-clm-tags .wte-sm-list .wte-sm-el {
float: left;
- border-left: 1px solid rgba(0, 0, 0, 0.3);
- text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
- /*232323*/ }
+ border-left: 1px solid rgba(0, 0, 0, 0.3); }
.wte-sm-sector .wte-sm-list .wte-sm-el:first-child, .wte-clm-tags .wte-sm-list .wte-sm-el:first-child {
border: none; }
.wte-sm-sector .wte-sm-list .wte-sm-el:hover, .wte-clm-tags .wte-sm-list .wte-sm-el:hover {
@@ -3256,7 +3255,7 @@ ol.example li.placeholder:before {
height: auto;
width: 100%;
cursor: pointer;
- color: #eee;
+ color: #ddd;
box-sizing: border-box;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
border: none;
@@ -3314,11 +3313,11 @@ ol.example li.placeholder:before {
cursor: pointer;
right: 5px;
top: 0;
- opacity: 0.2;
- filter: alpha(opacity=20); }
+ opacity: 0.5;
+ filter: alpha(opacity=50); }
.wte-sm-sector .wte-sm-property .wte-sm-layer #wte-sm-close-layer:hover, .wte-clm-tags .wte-sm-property .wte-sm-layer #wte-sm-close-layer:hover {
- opacity: 0.5;
- filter: alpha(opacity=50); }
+ opacity: 0.8;
+ filter: alpha(opacity=80); }
.wte-sm-sector .wte-sm-property .wte-sm-layer > #wte-sm-preview-box #wte-sm-preview, .wte-clm-tags .wte-sm-property .wte-sm-layer > #wte-sm-preview-box #wte-sm-preview {
background-color: white;
height: 100%;
@@ -3339,7 +3338,6 @@ ol.example li.placeholder:before {
.wte-sm-sector .wte-sm-stack #wte-sm-add, .wte-clm-tags .wte-sm-stack #wte-sm-add {
background: none;
border: none;
- color: white;
cursor: pointer;
font-size: 22px;
line-height: 10px;
@@ -3350,16 +3348,27 @@ ol.example li.placeholder:before {
.wte-sm-sector .wte-sm-stack #wte-sm-add:hover, .wte-clm-tags .wte-sm-stack #wte-sm-add:hover {
opacity: 1;
filter: alpha(opacity=100); }
- .wte-sm-sector .wte-sm-color-picker, .wte-clm-tags .wte-sm-color-picker {
- background-color: #eee;
- border: 2px solid rgba(29, 29, 29, 0.3);
- box-sizing: border-box;
- cursor: pointer;
+ .wte-sm-sector .wte-sm-colorp-c, .wte-clm-tags .wte-sm-colorp-c {
height: 100%;
width: 20px;
position: absolute;
right: 0;
- top: 0; }
+ top: 0;
+ box-sizing: border-box;
+ border-radius: 2px;
+ padding: 2px; }
+ .wte-sm-sector .wte-sm-colorp-c .wte-checker-bg, .wte-clm-tags .wte-sm-colorp-c .wte-checker-bg {
+ height: 100%;
+ width: 100%;
+ border-radius: 1px; }
+ .wte-sm-sector .wte-sm-color-picker, .wte-clm-tags .wte-sm-color-picker {
+ background-color: #ddd;
+ cursor: pointer;
+ height: 100%;
+ width: 100%;
+ margin-top: -16px;
+ box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
+ border-radius: 1px; }
.wte-sm-sector .wte-sm-btn-upload #wte-sm-upload, .wte-clm-tags .wte-sm-btn-upload #wte-sm-upload {
left: 0;
top: 0;
@@ -3371,15 +3380,15 @@ ol.example li.placeholder:before {
padding: 2px 0; }
.wte-sm-layer > #wte-sm-move {
- opacity: 0.3;
- filter: alpha(opacity=30);
+ opacity: 0.7;
+ filter: alpha(opacity=70);
cursor: move;
font-size: 12px;
float: left;
margin: 0 5px 0 0; }
.wte-sm-layer > #wte-sm-move:hover {
- opacity: 0.5;
- filter: alpha(opacity=50); }
+ opacity: 0.9;
+ filter: alpha(opacity=90); }
/********* END Style Manager **********/
/********* Class manager **********/
@@ -3409,7 +3418,7 @@ ol.example li.placeholder:before {
border: 1px solid rgba(0, 0, 0, 0.15);
cursor: pointer; }
.wte-clm-tags #wte-clm-new {
- color: #eee;
+ color: #ddd;
padding: 5px 6px;
display: none; }
.wte-clm-tags .wte-clm-tag {
@@ -3457,12 +3466,10 @@ ol.example li.placeholder:before {
height: 100%; }
.wte-mdl-dialog {
- border-bottom: 2px solid #353535;
- text-shadow: -1px -1px 0 #353535;
+ text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.05);
margin: 30px auto 0;
max-width: 850px;
width: 90%;
- color: #eee;
border-radius: 3px;
font-weight: lighter;
position: relative;
@@ -3501,7 +3508,7 @@ ol.example li.placeholder:before {
float: right; }
.wte-am-assets-cont {
- background-color: rgba(0, 0, 0, 0.3);
+ background-color: rgba(0, 0, 0, 0.1);
border-radius: 3px;
box-sizing: border-box;
padding: 10px;
@@ -3533,7 +3540,7 @@ ol.example li.placeholder:before {
filter: alpha(opacity=50);
z-index: 0; }
.wte-am-assets-cont .wte-am-highlight {
- background-color: #444; }
+ background-color: rgba(255, 255, 255, 0.1); }
.wte-am-assets-cont .wte-am-asset {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
padding: 5px;
@@ -3564,7 +3571,7 @@ ol.example li.placeholder:before {
width: 55%;
float: left; }
.wte-am-file-uploader > form {
- background-color: rgba(0, 0, 0, 0.3);
+ background-color: rgba(0, 0, 0, 0.1);
border: 2px dashed #999999;
border-radius: 3px;
position: relative;
@@ -3622,7 +3629,6 @@ ol.example li.placeholder:before {
display: none;
z-index: 5; }
#wte-rte-toolbar .wte-rte-btn {
- color: #eee;
padding: 5px;
width: 25px;
border-right: 1px solid rgba(0, 0, 0, 0.3);
@@ -3699,7 +3705,7 @@ ol.example li.placeholder:before {
.sp-container button, .sp-container button:hover, .sp-container button:active {
background: rgba(0, 0, 0, 0.3);
border-color: rgba(0, 0, 0, 0.3);
- color: #eee;
+ color: #ddd;
text-shadow: none;
box-shadow: none;
padding: 3px 5px; }
diff --git a/styles/scss/main.scss b/styles/scss/main.scss
index 664b04951..0ab66d255 100644
--- a/styles/scss/main.scss
+++ b/styles/scss/main.scss
@@ -13,10 +13,22 @@ $com-prefix: $app-prefix + 'com-';
$sm-prefix: $app-prefix + 'sm-';
$cv-prefix: $app-prefix + 'cv-';
$clm-prefix: $app-prefix + 'clm-';
+
+/* Dark theme */
$mainColor: #444; /* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%)*/
+$fontColor: #ddd; /*l: #d8d7db*/
+$fontColorActive: #f8f8f8;
+
+/* Light theme
+$mainColor: #fff;
+$fontColor: #9299a3;
+$fontColorActive: #4f8ef7;
+*/
+
$mainDkColor: rgba(0, 0, 0, 0.3);/* darken($mainColor, 4%) - #383838*/
+$mainDklColor: rgba(0, 0, 0, 0.1);
$mainLhColor: rgba(255, 255, 255, 0.1);/*#515151*/
-$fontColor: #eee; /*l: #d8d7db*/
+$mainLhlColor: rgba(255, 255, 255, 0.7);
$fontColorDk: #777;
$mainFont: Helvetica, sans-serif;
$colorBlue: #3b97e3;
@@ -25,7 +37,6 @@ $colorYell: #ffca6f;
$colorGreen: #62c462;
$tagBg: #804f7b;
$secColor: $tagBg;
-
$imageCompDim: 50px;
@mixin user-select($v) {
@@ -77,6 +88,14 @@ $imageCompDim: 50px;
background-color: $mainColor;
}
+.#{$app-prefix}color-main{
+ color: $fontColor;
+}
+
+.#{$app-prefix}color-active{
+ color: $fontColorActive;
+}
+
/********************* MAIN ************************/
.clear{ clear:both }
.no-select{
@@ -86,9 +105,6 @@ $imageCompDim: 50px;
font-family: $mainFont;
background-color: $mainColor;
position:relative;
- border: 3px solid $mainColor;
- border-left:none;
- border-right:none;
box-sizing: border-box;
height: 100%;
min-width: 1250px;
@@ -97,20 +113,18 @@ $imageCompDim: 50px;
@include opacity(0.50);
pointer-events: none;
}
-
.#{$app-prefix}btn-prim{
- background-color: rgba(255, 255, 255, 0.15);
+ @extend .#{$app-prefix}color-main;
+ background-color: $mainLhColor;
border-radius: 2px;
padding: 3px 6px;
cursor: pointer;
- color: #ddd;
padding: 0.5em;
border: none;
}
.#{$app-prefix}btn-prim:active{
background-color: $mainLhColor;
}
-
.#{$app-prefix}input{
background-color: $mainDkColor;
border: 1px solid rgba(0, 0, 0, 0.1);
@@ -120,6 +134,7 @@ $imageCompDim: 50px;
color: $fontColor;
padding: 0.5em 1em;
}
+
/************* CANVAS ****************/
.#{$cv-prefix}canvas {
background-color: rgba(0, 0, 0, 0.15);
@@ -297,6 +312,7 @@ $leftWidth: 15%;
.#{$pn-prefix}panel {
@extend .#{$app-prefix}bg-main;
+ @extend .#{$app-prefix}color-main;
display: inline-block;
padding: 5px;
position: absolute;
@@ -349,12 +365,12 @@ $leftWidth: 15%;
}
.#{$pn-prefix}btn, .#{$app-prefix}btnt{
+ @extend .#{$app-prefix}color-main;
box-sizing: border-box;
height: 30px; width: 30px;
line-height: 21px;
background-color: transparent;
border:none;
- color: $fontColor;
font-size: 18px;
margin-bottom: 5px;
border-radius: 2px;
@@ -363,12 +379,13 @@ $leftWidth: 15%;
position: relative;
&.#{$pn-prefix}active{
+ @extend .#{$app-prefix}color-active;
background-color: rgba(0, 0, 0, 0.15);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.25) inset;
}
> .#{$pn-prefix}arrow-rd {
- border-bottom: 5px solid $fontColor;
+ border-bottom: 5px solid $mainLhlColor;
border-left: 5px solid transparent;
bottom: 2px; right: 2px;
position: absolute;
@@ -416,7 +433,6 @@ $leftWidth: 15%;
}
}
.#{$nv-prefix}item {
- color: $fontColor;
font-weight: lighter;
text-align: left;
position: relative;
@@ -455,11 +471,10 @@ $leftWidth: 15%;
@extend .#{$app-prefix}bg-main;
}
.#{$nv-prefix}item .#{$nv-prefix}title {
- background-color: rgba(0, 0, 0, 0.15);
+ background-color: $mainDklColor;
font-size: 13px;
letter-spacing: 1px;
padding: 7px 10px 7px 25px;
- text-shadow: 0 1px 0 $mainDkColor;
border-bottom: 1px solid $mainDkColor;
border-top: 1px solid $mainLhColor;
cursor:pointer;
@@ -516,11 +531,11 @@ $leftWidth: 15%;
/********* Inputs **********/
-$inputFontColor: darken($fontColor,10%); /*#d5d5d5*/
+$inputFontColor: $mainLhlColor; /*#d5d5d5*/
$darkBorder: rgba(0, 0, 0, 0.15); /*303030*/
$lightBorder: rgba(255, 255, 255, 0.05); /*414141*/
$darkTextShadow: $mainDkColor; /*#252525*/
-$arrowColor: darken($fontColor,24%); /*b1b1b1*/
+$arrowColor: $mainLhlColor; /*b1b1b1*/
.#{$app-prefix}field {
background-color: $mainDkColor;/*353535*/
@@ -591,7 +606,6 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
display: flex;
align-items: center;
padding: 10px 5px;
- color: $inputFontColor;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
@@ -628,16 +642,13 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
&:hover{ @include opacity(0.7); }
}
.#{$sm-prefix}header {
- color: $fontColor;
font-size: 11px;
font-weight: lighter;
padding: 10px;
- text-shadow: 0 1px 0 $darkTextShadow;
}
.#{$sm-prefix}sector {
clear:both;
border-bottom: 1px solid $mainDkColor;
- color: $fontColor;
font-weight: lighter;
text-align:left;
@@ -647,12 +658,10 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
}
.#{$sm-prefix}title{
- background-color: $darkBorder;
+ background-color: $mainDklColor;
font-size: 13px;
letter-spacing: 1px;
padding: 12px 10px 12px 20px;
- text-shadow: 0 1px 0 $mainDkColor;
- border-bottom: 1px solid $mainDkColor;
border-top: 1px solid $mainLhColor;
cursor:pointer;
}
@@ -720,7 +729,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
}
.#{$sm-prefix}d-s-arrow, .#{$clm-prefix}d-s-arrow{ bottom: 7px; }
- &.#{$sm-prefix}integer, &.#{$sm-prefix}select, &.#{$sm-prefix}list, &.#{$sm-prefix}color, &.#{$sm-prefix}composite, &.#{$sm-prefix}input {
+ &.#{$sm-prefix}integer, &.#{$sm-prefix}select, &.#{$sm-prefix}list, &.#{$sm-prefix}color, &.#{$sm-prefix}input {
background-color: $mainDkColor;/*353535*/
border: 1px solid rgba(0, 0, 0, 0.1);/*292929*/
box-shadow: 1px 1px 0 $mainLhColor;/*575757*/
@@ -729,6 +738,10 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
box-sizing: border-box;
padding: 0 5px;
}
+ &.#{$sm-prefix}composite{
+ @extend .#{$app-prefix}color-main;
+ border-radius: 2px;
+ }
&.#{$sm-prefix}select{ padding:0; }
&.#{$sm-prefix}select select{ height: 20px; }
&.#{$sm-prefix}select option { margin: 5px 0;}
@@ -764,7 +777,6 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
.#{$sm-prefix}list .#{$sm-prefix}el{
float:left;
border-left: 1px solid $darkTextShadow;
- text-shadow: 0 1px 0 darken($mainDkColor, 9%);/*232323*/
&:first-child{border:none}
&:hover{background: $mainDkColor; }
@@ -866,10 +878,10 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
cursor: pointer;
right: 5px;
top: 0;
- @include opacity(0.2);
+ @include opacity(0.5);
&:hover{
- @include opacity(0.5);
+ @include opacity(0.8);
}
}
> ##{$sm-prefix}preview-box ##{$sm-prefix}preview {
@@ -898,9 +910,9 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
.#{$sm-prefix}stack .#{$sm-prefix}properties{padding-top: 5px;}
.#{$sm-prefix}stack ##{$sm-prefix}add {
+ @extend .#{$app-prefix}color-main;
background: none;
border: none;
- color: white;
cursor: pointer;
font-size: 22px;
line-height: 10px;
@@ -911,15 +923,29 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
&:hover{ @include opacity(1); }
}
- .#{$sm-prefix}color-picker {
- background-color: $fontColor;
- border: 2px solid lighten($mainDkColor, 11.5%);
- box-sizing: border-box;
- cursor: pointer;
- height: 100%; width: 20px;
- position: absolute;
- right: 0; top: 0;
- }
+ .#{$sm-prefix}colorp-c {
+ @extend .#{$app-prefix}bg-main;
+ height: 100%; width: 20px;
+ position: absolute;
+ right: 0; top: 0;
+ box-sizing: border-box;
+ border-radius: 2px;
+ padding: 2px;
+
+ .#{$app-prefix}checker-bg{
+ height: 100%; width: 100%;
+ border-radius: 1px;
+ }
+ }
+
+ .#{$sm-prefix}color-picker {
+ background-color: $fontColor;
+ cursor: pointer;
+ height: 100%; width: 100%;
+ margin-top: -16px;
+ box-shadow: 0 0 1px $mainDkColor;
+ border-radius: 1px;
+ }
.#{$sm-prefix}btn-upload ##{$sm-prefix}upload {
left: 0; top: 0;
@@ -928,18 +954,19 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
opacity: 0;
cursor: pointer;
}
+
.#{$sm-prefix}btn-upload ##{$sm-prefix}label { padding: 2px 0;}
}
.#{$sm-prefix}layer > ##{$sm-prefix}move {
- @include opacity(0.3);
+ @include opacity(0.7);
cursor: move;
font-size: 12px;
float: left;
margin: 0 5px 0 0;
&:hover{
- @include opacity(0.5);
+ @include opacity(0.9);
}
}
/********* END Style Manager **********/
@@ -1052,12 +1079,11 @@ $paddElClm: 5px 6px;
.#{$mdl-prefix}dialog {
@extend .#{$app-prefix}bg-main;
- border-bottom: 2px solid #353535;
- text-shadow: -1px -1px 0 #353535;
+ @extend .#{$app-prefix}color-main;
+ text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.05);
margin: 30px auto 0;
max-width: 850px;
width: 90%;
- color: $fontColor;
border-radius: 3px;
font-weight: lighter;
position:relative;
@@ -1105,7 +1131,7 @@ $paddElClm: 5px 6px;
}
.#{$am-prefix}assets-cont {
- background-color: $mainDkColor;
+ background-color: $mainDklColor;
border-radius: 3px;
box-sizing: border-box;
padding: 10px;
@@ -1141,7 +1167,9 @@ $paddElClm: 5px 6px;
z-index: 0;
}
- .#{$am-prefix}highlight { background-color: $mainColor; }
+ .#{$am-prefix}highlight {
+ background-color: $mainLhColor;
+ }
.#{$am-prefix}asset {
border-bottom: 1px solid darken($mainDkColor, 3%);
@@ -1184,7 +1212,7 @@ $uploadPadding: 150px 10px;
float:left;
> form {
- background-color: $mainDkColor;
+ background-color: $mainDklColor;
border: 2px dashed #999999;
border-radius: 3px;
position: relative;
@@ -1260,7 +1288,7 @@ $uploadPadding: 150px 10px;
z-index: 5;
.#{$rte-prefix}btn {
- color: $fontColor;
+ @extend .#{$app-prefix}color-main;
padding: 5px;
width: 25px;
border-right: 1px solid $mainDkColor;