tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fix styles

pull/36/head
Artur Arseniev 10 years ago
parent
58600f4f95
commit
d2b21d282b
4 changed files with 124 additions and 113 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      src/navigator/template/item.html
  2. 9
      src/navigator/view/ItemView.js
  3. 105
      styles/css/main.css
  4. 110
      styles/scss/main.scss

13
src/navigator/template/item.html
View File

@ -1,15 +1,18 @@
<% if (hidable) { %> <% if (hidable) { %>
<i id="<%= prefix %>btn-eye" class="btn fa fa-eye <%= (visible ? '' : 'fa-eye-slash') %>"></i> <i id="<%= prefix %>btn-eye" class="btn fa fa-eye <%= (visible ? '' : 'fa-eye-slash') %>"></i>
<% } %> <% } %>
<div class="<%= prefix %>title <%= addClass %>">
<i id="<%= prefix %>caret" class="fa fa-chevron-right"></i> <div class="<%= prefix %>title-c">
<%= title %> <div class="<%= prefix %>title <%= addClass %>">
<i id="<%= prefix %>caret" class="fa fa-chevron-right"></i>
<%= title %>
</div>
</div> </div>
<div id="<%= prefix %>counter"><%= (count ? count : '') %></div> <div id="<%= prefix %>counter"><%= (count ? count : '') %></div>
<div id="<%= prefix %>move"> <div id="<%= prefix %>move">
<i class="fa fa-arrows"></i> <i class="fa fa-arrows"></i>
</div> </div>
<div class="<%= prefix %>children"></div> <div class="<%= prefix %>children"></div>

9
src/navigator/view/ItemView.js
View File

@ -162,14 +162,15 @@ define(['backbone', 'text!./../template/item.html','require'],
* */ * */
checkChildren: function(){ checkChildren: function(){
var c = this.model.components.length, var c = this.model.components.length,
pfx = this.pfx; pfx = this.pfx,
tC = '> .' + pfx + 'title-c > .' + pfx + 'title';
if(!this.$counter) if(!this.$counter)
this.$counter = this.$el.find('> #' + pfx + 'counter'); this.$counter = this.$el.find('> #' + pfx + 'counter');
if(c){ if(c){
this.$el.find('> .' + pfx + 'title').removeClass(pfx + 'no-chld'); this.$el.find(tC).removeClass(pfx + 'no-chld');
this.$counter.html(c); this.$counter.html(c);
}else{ }else{
this.$el.find('> .' + pfx + 'title').addClass(pfx + 'no-chld'); this.$el.find(tC).addClass(pfx + 'no-chld');
this.$counter.empty(); this.$counter.empty();
this.model.set('open',0); this.model.set('open',0);
} }
@ -195,7 +196,7 @@ define(['backbone', 'text!./../template/item.html','require'],
parent : this.model parent : this.model
}).render().$el; }).render().$el;
this.$el.find('.'+ pfx +'children').html(this.$components); this.$el.find('.'+ pfx +'children').html(this.$components);
this.$caret = this.$el.find('> .' + pfx + 'title > #' + pfx + 'caret'); this.$caret = this.$el.find('> .' + pfx + 'title-c > .' + pfx + 'title > #' + pfx + 'caret');
if(!this.model.get('draggable') || !this.config.sortable){ if(!this.model.get('draggable') || !this.config.sortable){
this.$el.find('> #' + pfx + 'move').detach(); this.$el.find('> #' + pfx + 'move').detach();
} }

105
styles/css/main.css
View File

@ -2558,7 +2558,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
content: ""; } content: ""; }
/* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%)*/ /* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%)*/
/*#383838*/ /* darken($mainColor, 4%) - #383838*/
/*#515151*/ /*#515151*/
/*l: #d8d7db*/ /*l: #d8d7db*/
.wte-invis-invis, .wte-clm-tags #wte-clm-new, .wte-no-app { .wte-invis-invis, .wte-clm-tags #wte-clm-new, .wte-no-app {
@ -2579,6 +2579,9 @@ 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 { .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=="); } 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 {
background-color: #444; }
/********************* MAIN ************************/ /********************* MAIN ************************/
.clear { .clear {
clear: both; } clear: both; }
@ -2632,10 +2635,10 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
.wte-cv-canvas { .wte-cv-canvas {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15);
position: absolute; position: absolute;
width: 80%; width: 83%;
height: 100%; height: 100%;
top: 0; top: 0;
left: 3.5%; left: 2%;
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
/* This simulate body behaviour */ } /* This simulate body behaviour */ }
@ -2805,7 +2808,6 @@ ol.example li.placeholder:before {
/********* PANELS **********/ /********* PANELS **********/
.wte-pn-panel { .wte-pn-panel {
background-color: #444;
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
position: absolute; position: absolute;
@ -2815,13 +2817,13 @@ ol.example li.placeholder:before {
.wte-pn-panel#wte-pn-commands, .wte-pn-panel#wte-pn-options2 { .wte-pn-panel#wte-pn-commands, .wte-pn-panel#wte-pn-options2 {
min-width: 35px; min-width: 35px;
height: 100%; height: 100%;
width: 3.5%; width: 2%;
left: 0; left: 0;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
.wte-pn-panel#wte-pn-options { .wte-pn-panel#wte-pn-options {
min-width: 35px; min-width: 35px;
height: 100%; height: 100%;
width: 3.5%; width: 2%;
left: 0; left: 0;
bottom: 0; bottom: 0;
height: auto; } height: auto; }
@ -2835,29 +2837,29 @@ ol.example li.placeholder:before {
.wte-pn-panel#wte-pn-views { .wte-pn-panel#wte-pn-views {
border-bottom: 2px solid rgba(0, 0, 0, 0.3); border-bottom: 2px solid rgba(0, 0, 0, 0.3);
right: 0; right: 0;
width: 16.5%; width: 15%;
z-index: 4; } z-index: 4; }
.wte-pn-panel#wte-pn-views-container { .wte-pn-panel#wte-pn-views-container {
height: 100%; height: 100%;
padding: 52px 0 0; padding: 52px 0 0;
right: 0; right: 0;
width: 16.5%; width: 15%;
overflow: auto; overflow: auto;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
.wte-pn-btn, .wte-btnt { .wte-pn-btn, .wte-btnt {
box-sizing: border-box; box-sizing: border-box;
height: 35px; height: 30px;
width: 35px; width: 30px;
line-height: 35px; line-height: 21px;
background-color: transparent; background-color: transparent;
border: none; border: none;
color: #eee; color: #eee;
font-size: 25px; font-size: 18px;
margin-bottom: 5px; margin-bottom: 5px;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
padding: 0 5px; padding: 5px;
position: relative; } position: relative; }
.wte-pn-btn.wte-pn-active, .wte-btnt.wte-pn-active { .wte-pn-btn.wte-pn-active, .wte-btnt.wte-pn-active {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15);
@ -2924,7 +2926,7 @@ ol.example li.placeholder:before {
top: 0; top: 0;
padding: 7px 5px 7px 10px; padding: 7px 5px 7px 10px;
position: absolute; position: absolute;
color: #aeaeae; color: #bbbbbb;
cursor: pointer; cursor: pointer;
z-index: 1; } z-index: 1; }
.wte-nv-navigator .wte-nv-item .wte-nv-title { .wte-nv-navigator .wte-nv-item .wte-nv-title {
@ -2935,20 +2937,17 @@ ol.example li.placeholder:before {
width: 8px; } width: 8px; }
.wte-nv-item .wte-nv-title { .wte-nv-item .wte-nv-title {
background-color: #3a3a3a; background-color: rgba(0, 0, 0, 0.15);
font-size: 13px; font-size: 13px;
letter-spacing: 1px; letter-spacing: 1px;
padding: 7px 10px 7px 25px; padding: 7px 10px 7px 25px;
text-shadow: 0 1px 0 #252525; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
/*#252525*/ border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-bottom: 1px solid #303030; border-top: 1px solid rgba(255, 255, 255, 0.1);
/*#303030*/
border-top: 1px solid #414141;
/*#414141*/
cursor: pointer; } cursor: pointer; }
.wte-nv-item .wte-nv-children .wte-nv-title { .wte-nv-item .wte-nv-children .wte-nv-title {
border-left: 1px solid #3f3f3f; } border-left: 1px solid rgba(5, 5, 5, 0.3); }
.wte-nv-item > .wte-nv-children { .wte-nv-item > .wte-nv-children {
margin-left: 15px; margin-left: 15px;
@ -2960,8 +2959,11 @@ ol.example li.placeholder:before {
.wte-nv-item > .wte-nv-no-chld > #wte-nv-caret::before { .wte-nv-item > .wte-nv-no-chld > #wte-nv-caret::before {
content: ''; } content: ''; }
.wte-nv-no-chld > #wte-nv-caret {
display: none; }
.wte-nv-item > #wte-nv-move { .wte-nv-item > #wte-nv-move {
color: #6f6f6f; color: #bbbbbb;
position: absolute; position: absolute;
cursor: move; cursor: move;
font-size: 12px; font-size: 12px;
@ -3102,7 +3104,7 @@ ol.example li.placeholder:before {
.wte-sm-sector, .wte-clm-tags { .wte-sm-sector, .wte-clm-tags {
clear: both; clear: both;
border-bottom: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(0, 0, 0, 0.3);
color: #eee; color: #eee;
font-weight: lighter; font-weight: lighter;
text-align: left; text-align: left;
@ -3119,8 +3121,8 @@ ol.example li.placeholder:before {
letter-spacing: 1px; letter-spacing: 1px;
padding: 12px 10px 12px 20px; padding: 12px 10px 12px 20px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(255, 255, 255, 0.05); border-top: 1px solid rgba(255, 255, 255, 0.1);
cursor: pointer; } cursor: pointer; }
.wte-sm-sector .wte-sm-label, .wte-clm-tags .wte-sm-label { .wte-sm-sector .wte-sm-label, .wte-clm-tags .wte-sm-label {
margin: 5px 5px 2px 0; } margin: 5px 5px 2px 0; }
@ -3226,12 +3228,12 @@ ol.example li.placeholder:before {
.wte-sm-sector .wte-sm-list .wte-sm-el, .wte-clm-tags .wte-sm-list .wte-sm-el { .wte-sm-sector .wte-sm-list .wte-sm-el, .wte-clm-tags .wte-sm-list .wte-sm-el {
float: left; float: left;
border-left: 1px solid rgba(0, 0, 0, 0.3); border-left: 1px solid rgba(0, 0, 0, 0.3);
text-shadow: 0 1px 0 #232323; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
/*232323*/ } /*232323*/ }
.wte-sm-sector .wte-sm-list .wte-sm-el:first-child, .wte-clm-tags .wte-sm-list .wte-sm-el:first-child { .wte-sm-sector .wte-sm-list .wte-sm-el:first-child, .wte-clm-tags .wte-sm-list .wte-sm-el:first-child {
border: none; } border: none; }
.wte-sm-sector .wte-sm-list .wte-sm-el:hover, .wte-clm-tags .wte-sm-list .wte-sm-el:hover { .wte-sm-sector .wte-sm-list .wte-sm-el:hover, .wte-clm-tags .wte-sm-list .wte-sm-el:hover {
background: #3a3a3a; } background: rgba(0, 0, 0, 0.3); }
.wte-sm-sector .wte-sm-properties, .wte-clm-tags .wte-sm-properties { .wte-sm-sector .wte-sm-properties, .wte-clm-tags .wte-sm-properties {
font-size: 11px; font-size: 11px;
padding: 10px 5px; } padding: 10px 5px; }
@ -3244,10 +3246,10 @@ ol.example li.placeholder:before {
.wte-sm-sector .wte-sm-property.wte-sm-file, .wte-clm-tags .wte-sm-property.wte-sm-file, .wte-sm-sector .wte-sm-property.wte-sm-composite, .wte-clm-tags .wte-sm-property.wte-sm-composite, .wte-sm-sector .wte-sm-property.wte-sm-stack, .wte-clm-tags .wte-sm-property.wte-sm-stack, .wte-sm-sector .wte-sm-property.wte-sm-list, .wte-clm-tags .wte-sm-property.wte-sm-list { .wte-sm-sector .wte-sm-property.wte-sm-file, .wte-clm-tags .wte-sm-property.wte-sm-file, .wte-sm-sector .wte-sm-property.wte-sm-composite, .wte-clm-tags .wte-sm-property.wte-sm-composite, .wte-sm-sector .wte-sm-property.wte-sm-stack, .wte-clm-tags .wte-sm-property.wte-sm-stack, .wte-sm-sector .wte-sm-property.wte-sm-list, .wte-clm-tags .wte-sm-property.wte-sm-list {
width: 100%; } width: 100%; }
.wte-sm-sector .wte-sm-property .wte-sm-btn, .wte-clm-tags .wte-sm-property .wte-sm-btn { .wte-sm-sector .wte-sm-property .wte-sm-btn, .wte-clm-tags .wte-sm-property .wte-sm-btn {
background-color: #5b5b5b; background-color: rgba(33, 33, 33, 0.3);
/*#5d5d5d*/ /*#5d5d5d*/
border-radius: 2px; border-radius: 2px;
box-shadow: 1px 1px 0 #3f3f3f, 1px 1px 0 #656565 inset; box-shadow: 1px 1px 0 rgba(5, 5, 5, 0.3), 1px 1px 0 rgba(43, 43, 43, 0.3) inset;
padding: 5px; padding: 5px;
position: relative; position: relative;
text-align: center; text-align: center;
@ -3256,7 +3258,7 @@ ol.example li.placeholder:before {
cursor: pointer; cursor: pointer;
color: #eee; color: #eee;
box-sizing: border-box; box-sizing: border-box;
text-shadow: -1px -1px 0 #3a3a3a; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
border: none; border: none;
opacity: 0.85; opacity: 0.85;
filter: alpha(opacity=85); } filter: alpha(opacity=85); }
@ -3350,7 +3352,7 @@ ol.example li.placeholder:before {
filter: alpha(opacity=100); } filter: alpha(opacity=100); }
.wte-sm-sector .wte-sm-color-picker, .wte-clm-tags .wte-sm-color-picker { .wte-sm-sector .wte-sm-color-picker, .wte-clm-tags .wte-sm-color-picker {
background-color: #eee; background-color: #eee;
border: 2px solid #575757; border: 2px solid rgba(29, 29, 29, 0.3);
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
height: 100%; height: 100%;
@ -3455,7 +3457,6 @@ ol.example li.placeholder:before {
height: 100%; } height: 100%; }
.wte-mdl-dialog { .wte-mdl-dialog {
background-color: #494949;
border-bottom: 2px solid #353535; border-bottom: 2px solid #353535;
text-shadow: -1px -1px 0 #353535; text-shadow: -1px -1px 0 #353535;
margin: 30px auto 0; margin: 30px auto 0;
@ -3477,11 +3478,11 @@ ol.example li.placeholder:before {
.wte-mdl-header { .wte-mdl-header {
position: relative; position: relative;
border-bottom: 1px solid #3a3a3a; border-bottom: 1px solid rgba(0, 0, 0, 0.3);
padding: 15px 15px 7px; } padding: 15px 15px 7px; }
.wte-mdl-content { .wte-mdl-content {
border-top: 1px solid #515151; } border-top: 1px solid rgba(255, 255, 255, 0.1); }
/********* Assets Manager **********/ /********* Assets Manager **********/
.wte-am-assets { .wte-am-assets {
@ -3500,7 +3501,7 @@ ol.example li.placeholder:before {
float: right; } float: right; }
.wte-am-assets-cont { .wte-am-assets-cont {
background-color: #3a3a3a; background-color: rgba(0, 0, 0, 0.3);
border-radius: 3px; border-radius: 3px;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;
@ -3534,7 +3535,7 @@ ol.example li.placeholder:before {
.wte-am-assets-cont .wte-am-highlight { .wte-am-assets-cont .wte-am-highlight {
background-color: #444; } background-color: #444; }
.wte-am-assets-cont .wte-am-asset { .wte-am-assets-cont .wte-am-asset {
border-bottom: 1px solid #323232; border-bottom: 1px solid rgba(0, 0, 0, 0.3);
padding: 5px; padding: 5px;
cursor: pointer; cursor: pointer;
position: relative; } position: relative; }
@ -3563,7 +3564,7 @@ ol.example li.placeholder:before {
width: 55%; width: 55%;
float: left; } float: left; }
.wte-am-file-uploader > form { .wte-am-file-uploader > form {
background-color: #3a3a3a; background-color: rgba(0, 0, 0, 0.3);
border: 2px dashed #999999; border: 2px dashed #999999;
border-radius: 3px; border-radius: 3px;
position: relative; position: relative;
@ -3598,24 +3599,23 @@ ol.example li.placeholder:before {
font-size: 12px; } font-size: 12px; }
.wte-cm-editor#wte-cm-htmlmixed { .wte-cm-editor#wte-cm-htmlmixed {
padding-right: 10px; padding-right: 10px;
border-right: 1px solid #3a3a3a; } border-right: 1px solid rgba(0, 0, 0, 0.3); }
.wte-cm-editor#wte-cm-htmlmixed #wte-cm-title { .wte-cm-editor#wte-cm-htmlmixed #wte-cm-title {
color: #a97d44; } color: #a97d44; }
.wte-cm-editor#wte-cm-css { .wte-cm-editor#wte-cm-css {
padding-left: 10px; padding-left: 10px;
border-left: 1px solid #515151; } border-left: 1px solid rgba(255, 255, 255, 0.1); }
.wte-cm-editor#wte-cm-css #wte-cm-title { .wte-cm-editor#wte-cm-css #wte-cm-title {
color: #ddca7e; } color: #ddca7e; }
.wte-cm-editor #wte-cm-title { .wte-cm-editor #wte-cm-title {
background-color: #3a3a3a; background-color: rgba(0, 0, 0, 0.3);
font-size: 12px; font-size: 12px;
padding: 5px 10px 3px; padding: 5px 10px 3px;
text-align: right; } text-align: right; }
/*************RTE****************/ /*************RTE****************/
#wte-rte-toolbar { #wte-rte-toolbar {
background-color: #444; border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #3a3a3a;
position: absolute; position: absolute;
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
@ -3625,16 +3625,16 @@ ol.example li.placeholder:before {
color: #eee; color: #eee;
padding: 5px; padding: 5px;
width: 25px; width: 25px;
border-right: 1px solid #353535; border-right: 1px solid rgba(0, 0, 0, 0.3);
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
outline: none; } outline: none; }
#wte-rte-toolbar .wte-rte-btn:last-child { #wte-rte-toolbar .wte-rte-btn:last-child {
border-right: none; } border-right: none; }
#wte-rte-toolbar .wte-rte-btn.btn-info { #wte-rte-toolbar .wte-rte-btn.btn-info {
background-color: #323232; } background-color: rgba(0, 0, 0, 0.3); }
#wte-rte-toolbar .wte-rte-btn:hover { #wte-rte-toolbar .wte-rte-btn:hover {
background-color: #515151; } background-color: rgba(255, 255, 255, 0.1); }
/********* Spectrum **********/ /********* Spectrum **********/
.sp-hue, .sp-slider { .sp-hue, .sp-slider {
@ -3653,16 +3653,15 @@ ol.example li.placeholder:before {
right: 15%; } right: 15%; }
.sp-container { .sp-container {
background-color: #454545; border: 1px solid rgba(0, 0, 0, 0.3);
border: 1px solid #333333; box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 7px #111;
border-radius: 3px; } border-radius: 3px; }
.sp-picker-container { .sp-picker-container {
border: none; } border: none; }
.colpick_dark .colpick_color { .colpick_dark .colpick_color {
outline: 1px solid #333; } outline: 1px solid rgba(0, 0, 0, 0.3); }
.sp-cancel, .sp-cancel:hover { .sp-cancel, .sp-cancel:hover {
bottom: -8px; bottom: -8px;
@ -3698,9 +3697,9 @@ ol.example li.placeholder:before {
text-align: right; } text-align: right; }
.sp-container button, .sp-container button:hover, .sp-container button:active { .sp-container button, .sp-container button:hover, .sp-container button:active {
background: #333; background: rgba(0, 0, 0, 0.3);
border-color: #292929; border-color: rgba(0, 0, 0, 0.3);
color: #757575; color: #eee;
text-shadow: none; text-shadow: none;
box-shadow: none; box-shadow: none;
padding: 3px 5px; } padding: 3px 5px; }

110
styles/scss/main.scss
View File

@ -14,8 +14,8 @@ $sm-prefix: $app-prefix + 'sm-';
$cv-prefix: $app-prefix + 'cv-'; $cv-prefix: $app-prefix + 'cv-';
$clm-prefix: $app-prefix + 'clm-'; $clm-prefix: $app-prefix + 'clm-';
$mainColor: #444; /* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%)*/ $mainColor: #444; /* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%)*/
$mainDkColor: darken($mainColor, 4%);/*#383838*/ $mainDkColor: rgba(0, 0, 0, 0.3);/* darken($mainColor, 4%) - #383838*/
$mainLhColor: lighten($mainColor, 5%);/*#515151*/ $mainLhColor: rgba(255, 255, 255, 0.1);/*#515151*/
$fontColor: #eee; /*l: #d8d7db*/ $fontColor: #eee; /*l: #d8d7db*/
$fontColorDk: #777; $fontColorDk: #777;
$mainFont: Helvetica, sans-serif; $mainFont: Helvetica, sans-serif;
@ -73,6 +73,10 @@ $imageCompDim: 50px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg=="); background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
} }
.#{$app-prefix}bg-main{
background-color: $mainColor;
}
/********************* MAIN ************************/ /********************* MAIN ************************/
.clear{ clear:both } .clear{ clear:both }
.no-select{ .no-select{
@ -104,14 +108,14 @@ $imageCompDim: 50px;
border: none; border: none;
} }
.#{$app-prefix}btn-prim:active{ .#{$app-prefix}btn-prim:active{
background-color: rgba(255, 255, 255, 0.1); background-color: $mainLhColor;
} }
.#{$app-prefix}input{ .#{$app-prefix}input{
background-color: rgba(0, 0, 0, 0.3); background-color: $mainDkColor;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 2px; border-radius: 2px;
box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1); box-shadow: 1px 1px 0 $mainLhColor;
box-sizing: border-box; box-sizing: border-box;
color: $fontColor; color: $fontColor;
padding: 0.5em 1em; padding: 0.5em 1em;
@ -120,9 +124,9 @@ $imageCompDim: 50px;
.#{$cv-prefix}canvas { .#{$cv-prefix}canvas {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15);
position: absolute; position: absolute;
width: 80%; width: 83%;
height: 100%; height: 100%;
top: 0; left: 3.5%; top: 0; left: 2%;
overflow: hidden; overflow: hidden;
z-index:1; z-index:1;
@ -289,10 +293,10 @@ ol.example li.placeholder:before {position: absolute;}
/********* PANELS **********/ /********* PANELS **********/
$leftWidth: 16.5%; $leftWidth: 15%;
.#{$pn-prefix}panel { .#{$pn-prefix}panel {
background-color: $mainColor; @extend .#{$app-prefix}bg-main;
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
position: absolute; position: absolute;
@ -303,14 +307,14 @@ $leftWidth: 16.5%;
&##{$pn-prefix}commands{ &##{$pn-prefix}commands{
min-width: 35px; min-width: 35px;
height: 100%; height: 100%;
width: 3.5%; left:0; width: 2%; left:0;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px $mainDkColor;
} }
&##{$pn-prefix}options{ &##{$pn-prefix}options{
min-width: 35px; min-width: 35px;
height: 100%; height: 100%;
width: 3.5%; left:0; width: 2%; left:0;
bottom: 0; bottom: 0;
height: auto; height: auto;
} }
@ -328,7 +332,7 @@ $leftWidth: 16.5%;
} }
&##{$pn-prefix}views{ &##{$pn-prefix}views{
border-bottom: 2px solid rgba(0,0,0,0.3); border-bottom: 2px solid $mainDkColor;
right: 0; right: 0;
width: $leftWidth; width: $leftWidth;
z-index: 4; z-index: 4;
@ -340,22 +344,22 @@ $leftWidth: 16.5%;
right: 0; right: 0;
width: $leftWidth; width: $leftWidth;
overflow: auto; overflow: auto;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px $mainDkColor;
} }
} }
.#{$pn-prefix}btn, .#{$app-prefix}btnt{ .#{$pn-prefix}btn, .#{$app-prefix}btnt{
box-sizing: border-box; box-sizing: border-box;
height: 35px; width: 35px; height: 30px; width: 30px;
line-height: 35px; line-height: 21px;
background-color: transparent; background-color: transparent;
border:none; border:none;
color: $fontColor; color: $fontColor;
font-size: 25px; font-size: 18px;
margin-bottom: 5px; margin-bottom: 5px;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
padding: 0 5px; padding: 5px;
position: relative; position: relative;
&.#{$pn-prefix}active{ &.#{$pn-prefix}active{
@ -434,7 +438,7 @@ $leftWidth: 16.5%;
left: 0; top: 0; left: 0; top: 0;
padding: 7px 5px 7px 10px; padding: 7px 5px 7px 10px;
position: absolute; position: absolute;
color: darken($fontColor,25%); color: darken($fontColor, 20%);
cursor:pointer; cursor:pointer;
z-index: 1; z-index: 1;
} }
@ -447,14 +451,17 @@ $leftWidth: 16.5%;
width: 8px; width: 8px;
} }
} }
.#{$nv-prefix}item .#{$nv-prefix}title-c {
@extend .#{$app-prefix}bg-main;
}
.#{$nv-prefix}item .#{$nv-prefix}title { .#{$nv-prefix}item .#{$nv-prefix}title {
background-color: $mainDkColor; background-color: rgba(0, 0, 0, 0.15);
font-size: 13px; font-size: 13px;
letter-spacing: 1px; letter-spacing: 1px;
padding: 7px 10px 7px 25px; padding: 7px 10px 7px 25px;
text-shadow: 0 1px 0 darken($mainDkColor,8%);/*#252525*/ text-shadow: 0 1px 0 $mainDkColor;
border-bottom: 1px solid darken($mainDkColor,4%);/*#303030*/ border-bottom: 1px solid $mainDkColor;
border-top: 1px solid lighten($mainDkColor,3%);/*#414141*/ border-top: 1px solid $mainLhColor;
cursor:pointer; cursor:pointer;
} }
.#{$nv-prefix}item .#{$nv-prefix}children .#{$nv-prefix}title{ .#{$nv-prefix}item .#{$nv-prefix}children .#{$nv-prefix}title{
@ -466,13 +473,14 @@ $leftWidth: 16.5%;
} }
.#{$nv-prefix}item.open > .#{$nv-prefix}children { display: block; } .#{$nv-prefix}item.open > .#{$nv-prefix}children { display: block; }
.#{$nv-prefix}item > .#{$nv-prefix}no-chld > ##{$nv-prefix}caret::before{ content:''; } .#{$nv-prefix}item > .#{$nv-prefix}no-chld > ##{$nv-prefix}caret::before{ content:''; }
.#{$nv-prefix}no-chld > ##{$nv-prefix}caret{ display:none; }
.#{$nv-prefix}item > ##{$nv-prefix}move { .#{$nv-prefix}item > ##{$nv-prefix}move {
color: darken($fontColor,50%); color: darken($fontColor, 20%);
position: absolute; position: absolute;
cursor: move; cursor: move;
font-size: 12px; font-size: 12px;
right: 0; top: 0; right: 0; top: 0;
padding: 7px 10px 7px 5px; padding: 7px 10px 7px 5px;
} }
.#{$nv-prefix}item{ .#{$nv-prefix}item{
&.#{$nv-prefix}selected{ &.#{$nv-prefix}selected{
@ -511,13 +519,13 @@ $leftWidth: 16.5%;
$inputFontColor: darken($fontColor,10%); /*#d5d5d5*/ $inputFontColor: darken($fontColor,10%); /*#d5d5d5*/
$darkBorder: rgba(0, 0, 0, 0.15); /*303030*/ $darkBorder: rgba(0, 0, 0, 0.15); /*303030*/
$lightBorder: rgba(255, 255, 255, 0.05); /*414141*/ $lightBorder: rgba(255, 255, 255, 0.05); /*414141*/
$darkTextShadow: rgba(0, 0, 0, 0.3); /*#252525*/ $darkTextShadow: $mainDkColor; /*#252525*/
$arrowColor: darken($fontColor,24%); /*b1b1b1*/ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
.#{$app-prefix}field { .#{$app-prefix}field {
background-color: rgba(0, 0, 0, 0.3);/*353535*/ background-color: $mainDkColor;/*353535*/
border: 1px solid rgba(0, 0, 0, 0.1);/*292929*/ border: 1px solid rgba(0, 0, 0, 0.1);/*292929*/
box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);/*575757*/ box-shadow: 1px 1px 0 $mainLhColor;/*575757*/
border-radius: 2px; border-radius: 2px;
box-sizing: border-box; box-sizing: border-box;
padding: 0 5px; padding: 0 5px;
@ -628,7 +636,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
} }
.#{$sm-prefix}sector { .#{$sm-prefix}sector {
clear:both; clear:both;
border-bottom: 1px solid $darkBorder; border-bottom: 1px solid $mainDkColor;
color: $fontColor; color: $fontColor;
font-weight: lighter; font-weight: lighter;
text-align:left; text-align:left;
@ -643,9 +651,9 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
font-size: 13px; font-size: 13px;
letter-spacing: 1px; letter-spacing: 1px;
padding: 12px 10px 12px 20px; padding: 12px 10px 12px 20px;
text-shadow: 0 1px 0 $darkTextShadow; text-shadow: 0 1px 0 $mainDkColor;
border-bottom: 1px solid $darkBorder; border-bottom: 1px solid $mainDkColor;
border-top: 1px solid $lightBorder; border-top: 1px solid $mainLhColor;
cursor:pointer; cursor:pointer;
} }
@ -713,9 +721,9 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
.#{$sm-prefix}d-s-arrow, .#{$clm-prefix}d-s-arrow{ bottom: 7px; } .#{$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}composite, &.#{$sm-prefix}input {
background-color: rgba(0, 0, 0, 0.3);/*353535*/ background-color: $mainDkColor;/*353535*/
border: 1px solid rgba(0, 0, 0, 0.1);/*292929*/ border: 1px solid rgba(0, 0, 0, 0.1);/*292929*/
box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);/*575757*/ box-shadow: 1px 1px 0 $mainLhColor;/*575757*/
color: $inputFontColor; color: $inputFontColor;
border-radius: 2px; border-radius: 2px;
box-sizing: border-box; box-sizing: border-box;
@ -825,7 +833,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
.#{$sm-prefix}layers { .#{$sm-prefix}layers {
background-color: rgba(0,0,0,0.13); background-color: rgba(0,0,0,0.13);
border: 1px solid rgba(0,0,0,0.13); border: 1px solid rgba(0,0,0,0.13);
box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1); box-shadow: 1px 1px 0 $mainLhColor;
border-radius: 2px; border-radius: 2px;
margin-top: 5px; margin-top: 5px;
min-height: 30px; min-height: 30px;
@ -1043,7 +1051,7 @@ $paddElClm: 5px 6px;
} }
.#{$mdl-prefix}dialog { .#{$mdl-prefix}dialog {
background-color: lighten($mainColor, 2%); @extend .#{$app-prefix}bg-main;
border-bottom: 2px solid #353535; border-bottom: 2px solid #353535;
text-shadow: -1px -1px 0 #353535; text-shadow: -1px -1px 0 #353535;
margin: 30px auto 0; margin: 30px auto 0;
@ -1243,7 +1251,7 @@ $uploadPadding: 150px 10px;
/*************RTE****************/ /*************RTE****************/
##{$rte-prefix}toolbar { ##{$rte-prefix}toolbar {
background-color: $mainColor; @extend .#{$app-prefix}bg-main;
border: 1px solid $mainDkColor; border: 1px solid $mainDkColor;
position: absolute; position: absolute;
border-radius: 3px; border-radius: 3px;
@ -1255,13 +1263,13 @@ $uploadPadding: 150px 10px;
color: $fontColor; color: $fontColor;
padding: 5px; padding: 5px;
width: 25px; width: 25px;
border-right: 1px solid #353535; border-right: 1px solid $mainDkColor;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
&:last-child{ border-right:none; } &:last-child{ border-right:none; }
&.btn-info{ background-color: darken($mainDkColor,3%); } &.btn-info{ background-color: $mainDkColor;}
&:hover { background-color: $mainLhColor;} &:hover { background-color: $mainLhColor;}
} }
} }
@ -1274,13 +1282,13 @@ $uploadPadding: 150px 10px;
.sp-hue{ left: 90%; } .sp-hue{ left: 90%; }
.sp-color{right: 15%;} .sp-color{right: 15%;}
.sp-container { .sp-container {
background-color: #454545; @extend .#{$app-prefix}bg-main;
border: 1px solid #333333; border: 1px solid $mainDkColor;
box-shadow: 0 0 7px #111; box-shadow: 0 0 7px $mainDkColor;
border-radius: 3px; border-radius: 3px;
} }
.sp-picker-container{border:none;} .sp-picker-container{border:none;}
.colpick_dark .colpick_color { outline: 1px solid #333;} .colpick_dark .colpick_color { outline: 1px solid $mainDkColor;}
.sp-cancel, .sp-cancel:hover { .sp-cancel, .sp-cancel:hover {
bottom: -8px; bottom: -8px;
color: #777 !important; color: #777 !important;
@ -1310,10 +1318,10 @@ $uploadPadding: 150px 10px;
text-align: right; text-align: right;
} }
.sp-container button, .sp-container button:hover, .sp-container button:active{ .sp-container button, .sp-container button:hover, .sp-container button:active{
background: #333; background: $mainDkColor;
border-color: #292929; border-color: $mainDkColor;
color: #757575; color: $fontColor;
text-shadow: none; text-shadow: none;
box-shadow: none; box-shadow: none;
padding: 3px 5px; padding: 3px 5px;
} }
Write Preview
Loading…
Cancel
Save