diff --git a/index.html b/index.html index 9f63d2532..323643296 100755 --- a/index.html +++ b/index.html @@ -10,61 +10,6 @@ -
diff --git a/src/asset_manager/template/assets.html b/src/asset_manager/template/assets.html index 890ddd6f9..597b99ade 100644 --- a/src/asset_manager/template/assets.html +++ b/src/asset_manager/template/assets.html @@ -1,7 +1,9 @@
-
- + +
+ +
@@ -12,4 +14,4 @@
-
\ No newline at end of file +
diff --git a/src/style_manager/view/LayersView.js b/src/style_manager/view/LayersView.js index 316aa41c1..7aba93c74 100644 --- a/src/style_manager/view/LayersView.js +++ b/src/style_manager/view/LayersView.js @@ -10,7 +10,8 @@ define(['backbone','./LayerView'], this.stackModel = o.stackModel; this.preview = o.preview; this.pfx = this.config.stylePrefix || ''; - this.className = this.pfx + 'layers'; + this.ppfx = this.config.pStylePrefix || ''; + this.className = this.pfx + 'layers ' + this.ppfx + 'field'; this.listenTo( this.collection, 'add', this.addTo); this.listenTo( this.collection, 'deselectAll', this.deselectAll ); this.listenTo( this.collection, 'reset', this.render); diff --git a/styles/css/main.css b/styles/css/main.css index b7dc67ba0..48d62aaa2 100644 --- a/styles/css/main.css +++ b/styles/css/main.css @@ -3055,7 +3055,7 @@ ol.example li.placeholder:before { border-left: 1px solid rgba(5, 5, 5, 0.3); } .gjs-nv-item > .gjs-nv-children { - margin-left: 10px; + margin-left: 7px; display: none; } .gjs-nv-item.open > .gjs-nv-children { @@ -3099,37 +3099,34 @@ ol.example li.placeholder:before { .gjs-comp-image-placeholder.fa-picture-o::after { content: "\f03e"; } -/*********** END Components *************/ /********* Input style **********/ -/*#d5d5d5*/ -/*303030*/ -/*414141*/ -/*#252525*/ -/*b1b1b1*/ +/* #d5d5d5 */ +/* b1b1b1 */ +/* #252525 */ +/* 303030 */ .gjs-label { line-height: 18px; } .gjs-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*/ border-radius: 2px; box-sizing: border-box; - padding: 0 5px; + padding: 0; position: relative; } - .gjs-field input, .gjs-field select { + .gjs-field input, + .gjs-field select { -webkit-appearance: none; -moz-appearance: none; appearance: none; color: rgba(255, 255, 255, 0.7); border: none; background-color: transparent; + box-sizing: border-box; width: 100%; position: relative; - padding: 3px 0; + padding: 3px 4px 4px; z-index: 1; } .gjs-field select { height: 20px; @@ -3154,7 +3151,7 @@ ol.example li.placeholder:before { cursor: pointer; } .gjs-field-color input { - padding-right: 20px; + padding-right: 22px; box-sizing: border-box; } .gjs-field-colorp { @@ -3165,7 +3162,7 @@ ol.example li.placeholder:before { position: absolute; right: 0; top: 0; - width: 20px; + width: 22px; z-index: 10; } .gjs-field-colorp .gjs-checker-bg { height: 100%; @@ -3193,7 +3190,7 @@ ol.example li.placeholder:before { padding: 0; width: auto; } -/*???*/ +/* ??? */ .gjs-field-checkbox { padding: 0; width: auto !important; } @@ -3225,6 +3222,8 @@ ol.example li.placeholder:before { position: absolute; right: 0; top: 0; } + .gjs-field-units select { + padding: 0 12px 0 0; } .gjs-field-unit { position: absolute; @@ -3335,7 +3334,6 @@ ol.example li.placeholder:before { .gjs-add-trasp:active { background-color: rgba(0, 0, 0, 0.2); } -/********* END Inputs **********/ /********* Device Manager **********/ .gjs-devices-c { display: flex; @@ -3407,10 +3405,8 @@ ol.example li.placeholder:before { border: none; width: 100%; } .gjs-sm-sector .gjs-sm-field input, .gjs-clm-tags .gjs-sm-field input, .gjs-sm-sector .gjs-clm-field input, .gjs-clm-tags .gjs-clm-field input { - box-sizing: border-box; - padding: 3px 21px 3px 0; } + box-sizing: border-box; } .gjs-sm-sector .gjs-sm-field select, .gjs-clm-tags .gjs-sm-field select, .gjs-sm-sector .gjs-clm-field select, .gjs-clm-tags .gjs-clm-field select { - padding: 2px 10px 2px 2px; position: relative; z-index: 1; -webkit-appearance: none; @@ -3556,10 +3552,6 @@ ol.example li.placeholder:before { background-repeat: no-repeat; background-position: center center; } .gjs-sm-sector .gjs-sm-property .gjs-sm-layers, .gjs-clm-tags .gjs-sm-property .gjs-sm-layers { - background-color: 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); - border-radius: 2px; margin-top: 5px; min-height: 30px; } .gjs-sm-sector .gjs-sm-property .gjs-sm-layer, .gjs-clm-tags .gjs-sm-property .gjs-sm-layer { @@ -3724,7 +3716,7 @@ ol.example li.placeholder:before { display: inline-block; vertical-align: top; } .gjs-clm-tags #gjs-clm-add-tag { - background-color: rgba(255, 255, 255, 0.2); + background-color: rgba(255, 255, 255, 0.15); border-radius: 2px; padding: 5px 6px; box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2) inset; @@ -3760,7 +3752,8 @@ ol.example li.placeholder:before { .gjs-clm-tags #gjs-clm-tag-label { cursor: text; } .gjs-clm-tags #gjs-clm-tag-label input { - width: auto; } + width: auto; + padding: 0 4px; } /********* END Class manager **********/ /********* Modal dialog **********/ @@ -3828,13 +3821,17 @@ ol.example li.placeholder:before { .gjs-am-assets-header { padding: 5px; } -.gjs-am-add-asset input { - width: 70%; } +.gjs-am-add-asset .gjs-am-add-field { + width: 70%; + float: left; } .gjs-am-add-asset button { width: 25%; float: right; } +.gjs-am-add-field input { + padding: 6px; } + .gjs-am-assets-cont { background-color: rgba(0, 0, 0, 0.1); border-radius: 3px; diff --git a/styles/scss/_gjs_inputs.scss b/styles/scss/_gjs_inputs.scss new file mode 100644 index 000000000..f955950e7 --- /dev/null +++ b/styles/scss/_gjs_inputs.scss @@ -0,0 +1,290 @@ +/********* Input style **********/ +$inputFontColor: $mainLhlColor; /* #d5d5d5 */ +$arrowColor: $mainLhlColor; /* b1b1b1 */ +$darkTextShadow: $mainDkColor; /* #252525 */ +$darkBorder: rgba(0, 0, 0, 0.15); /* 303030 */ +$colorpSize: 22px; + +@mixin rangeThumbStyle() { + height: 10px; + width: 10px; + border: 1px solid $mainDkColor; + border-radius: 100%; + background-color: $fontColor; + cursor: pointer; +} + +@mixin rangeTrackStyle() { + background-color: $mainDkColor; + border: 1px solid $darkBorder; + border-radius: 1px; + height: 2px; +} + +.#{$app-prefix}label { + line-height: 18px; +} + +.#{$app-prefix}field { + background-color: $mainDkColor; + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 0 $mainLhColor; + border-radius: 2px; + box-sizing: border-box; + padding: 0; + position: relative; + + input, + select { + @include appearance(none); + + color: $inputFontColor; + border: none; + background-color: transparent; + box-sizing: border-box; + width: 100%; + position: relative; + padding: 3px 4px 4px; + z-index: 1; + } + + select { + height: 20px; + padding-right: 12px; + } + + option { + padding: 3px 0; + } + + .#{$app-prefix}sel-arrow { + height: 100%; + width: 9px; + position: absolute; + right: 0; + top: 0; + z-index: 0; + } + + .#{$app-prefix}d-s-arrow { + bottom: 7px; + border-top: 4px solid $arrowColor; + position: absolute; + height: 0; + width: 0; + border-left: 3px solid transparent; + border-right: 4px solid transparent; + cursor: pointer; + } +} + +.#{$app-prefix}field-color { + input { + padding-right: $colorpSize; + box-sizing: border-box; + } +} + +.#{$app-prefix}field-colorp { + border-left: 1px solid $mainDklColor; + box-sizing: border-box; + height: 100%; + padding: 2px; + position: absolute; + right: 0; + top: 0; + width: $colorpSize; + z-index: 10; + + .#{$app-prefix}checker-bg { + height: 100%; + width: 100%; + border-radius: 1px; + } +} + +.#{$app-prefix}field-colorp-c { + height: 100%; + position: relative; + width: 100%; +} + +.#{$app-prefix}field-color-picker { + background-color: $fontColor; + cursor: pointer; + height: 100%; + width: 100%; + box-shadow: 0 0 1px $mainDkColor; + border-radius: 1px; + position: absolute; + top: 0; +} + +.#{$app-prefix}field-radio { + float: left; + overflow: hidden; + padding: 0; + width: auto; +} + +/* ??? */ +.#{$app-prefix}field-checkbox { + padding: 0; + width: auto !important; + + input { + display: none; + } + + input:checked + .#{$app-prefix}chk-icon { + border-color: rgba(255, 255, 255, 0.5); + border-width: 0 2px 2px 0; + border-style: solid; + } +} + +.#{$app-prefix}radio-item { + float: left; + border-left: 1px solid $darkTextShadow; + + &:first-child { + border: none; + } + + &:hover { + background: $mainDkColor; + } + + input { + display: none; + } + + input:checked + .#{$app-prefix}radio-item-label { + background-color: rgba(255, 255, 255, 0.2); + } +} + +.#{$app-prefix}radio-item-label { + cursor: pointer; + display: block; + padding: 5px; +} + +.#{$app-prefix}field-units { + position: absolute; + right: 0; + top: 0; + + select { + padding: 0 12px 0 0; + } +} + +.#{$app-prefix}field-unit { + position: absolute; + right: 10px; + top: 3px; + font-size: 10px; + color: $arrowColor; + cursor: pointer; +} + +.#{$app-prefix}field-arrows { + z-index: 10; + cursor: ns-resize; + height: 100%; + position: absolute; + right: 0; + top: 0; + width: 9px; +} + +.#{$app-prefix}field-arrow-u, +.#{$app-prefix}field-arrow-d { + position: absolute; + height: 0; + width: 0; + border-left: 3px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid $arrowColor; + bottom: 4px; + cursor: pointer; +} + +.#{$app-prefix}field-arrow-u { + border-bottom: 4px solid $arrowColor; + border-top: none; + top: 4px; +} + +.#{$app-prefix}field-select { + padding: 0; +} + +.#{$app-prefix}field-range { + background-color: transparent; + border: none; + box-shadow: none; + padding: 0; + + input { + margin: 0; + } + + input::-moz-range-thumb { + @include rangeThumbStyle(); + } + + input::-webkit-slider-thumb { + -webkit-appearance: none; + margin-top: -5px; + + @include rangeThumbStyle(); + } + + input::-ms-thumb { + @include rangeThumbStyle(); + } + + input::-moz-range-track { + @include rangeTrackStyle(); + } + + input::-webkit-slider-runnable-track { + @include rangeTrackStyle(); + } + + input::-ms-track { + @include rangeTrackStyle(); + } +} + +.#{$app-prefix}chk-icon { + @include transform(rotate(45deg)); + + box-sizing: border-box; + display: block; + height: 14px; + margin: 0 5px; + width: 6px; + cursor: pointer; +} + +.#{$app-prefix}add-trasp { + background: none; + border: none; + color: $fontColor; + cursor: pointer; + font-size: 1em; + border-radius: 2px; + + @include opacity(0.75); + + &:hover { + @include opacity(1); + } + + &:active { + background-color: rgba(0, 0, 0, 0.2); + } +} diff --git a/styles/scss/main.scss b/styles/scss/main.scss index 2f0c7e38d..4ccec4f1a 100644 --- a/styles/scss/main.scss +++ b/styles/scss/main.scss @@ -162,9 +162,11 @@ $fontV: 5;//random(1000) /********************* MAIN ************************/ .clear{ clear:both } + .no-select{ @include user-select(none); } + .#{$app-prefix}editor{ font-family: $mainFont; background-color: $mainColor; @@ -606,7 +608,7 @@ ol.example li.placeholder:before {position: absolute;} border-left: 1px solid lighten($mainDkColor,2%); } .#{$nv-prefix}item > .#{$nv-prefix}children { - margin-left: 10px; + margin-left: 7px; display: none; } .#{$nv-prefix}item.open > .#{$nv-prefix}children { display: block; } @@ -648,285 +650,10 @@ ol.example li.placeholder:before {position: absolute;} content: "\f03e"; } } -/*********** END Components *************/ - - -/********* Input style **********/ - -$inputFontColor: $mainLhlColor; /*#d5d5d5*/ -$darkBorder: rgba(0, 0, 0, 0.15); /*303030*/ -$lightBorder: rgba(255, 255, 255, 0.05); /*414141*/ -$darkTextShadow: $mainDkColor; /*#252525*/ -$arrowColor: $mainLhlColor; /*b1b1b1*/ -$colorpSize: 20px; - -@mixin rangeThumbStyle() { - height: 10px; width: 10px; - border: 1px solid $mainDkColor; - border-radius: 100%; - background-color: $fontColor; - cursor: pointer; -} - -@mixin rangeTrackStyle() { - background-color: $mainDkColor; - border: 1px solid $darkBorder; - border-radius: 1px; - height: 2px; -} - -.#{$app-prefix}label { - line-height: 18px; -} - -.#{$app-prefix}field { - background-color: $mainDkColor;/*353535*/ - border: 1px solid rgba(0, 0, 0, 0.1);/*292929*/ - box-shadow: 1px 1px 0 $mainLhColor;/*575757*/ - border-radius: 2px; - box-sizing: border-box; - padding: 0 5px; - position: relative; - - input, select{ - @include appearance(none); - color: $inputFontColor; - border:none; - background-color: transparent; - width: 100%; - position: relative; - padding: 3px 0; - z-index:1; - } - - select{ - height: 20px; - padding-right: 12px; - } - - option{ - padding: 3px 0; - } - - .#{$app-prefix}sel-arrow { - height: 100%; width: 9px; - position: absolute; - right: 0; top: 0; - z-index: 0; - } - .#{$app-prefix}d-s-arrow { - bottom: 7px; - border-top: 4px solid $arrowColor; - position: absolute; - height: 0; width: 0; - border-left: 3px solid transparent; - border-right: 4px solid transparent; - cursor:pointer; - } -} - -.#{$app-prefix}field-color { - - input { - padding-right: $colorpSize; - box-sizing: border-box; - } -} - -.#{$app-prefix}field-colorp { - border-left: 1px solid $mainDklColor; - box-sizing: border-box; - height: 100%; - padding: 2px; - position: absolute; - right: 0; - top: 0; - width: $colorpSize; - z-index: 10; - - .#{$app-prefix}checker-bg{ - height: 100%; - width: 100%; - border-radius: 1px; - } -} - -.#{$app-prefix}field-colorp-c { - height: 100%; - position: relative; - width: 100%; -} - -.#{$app-prefix}field-color-picker { - background-color: $fontColor; - cursor: pointer; - height: 100%; - width: 100%; - box-shadow: 0 0 1px $mainDkColor; - border-radius: 1px; - position: absolute; - top: 0; -} - -.#{$app-prefix}field-radio { - float: left; - overflow: hidden; - padding: 0; - width: auto; -} - -/*???*/ -.#{$app-prefix}field-checkbox { - padding: 0; - width: auto !important; - - input { - display: none; - } - - input:checked + .#{$app-prefix}chk-icon{ - border-color: rgba(255, 255, 255, 0.5); - border-width: 0 2px 2px 0; - border-style: solid; - } -} - -.#{$app-prefix}radio-item{ - float:left; - border-left: 1px solid $darkTextShadow; - - &:first-child{ - border:none - } - &:hover{ - background: $mainDkColor; - } - - input { - display: none; - } - - input:checked + .#{$app-prefix}radio-item-label{ - background-color: rgba(255, 255, 255, 0.2); - } - -} - -.#{$app-prefix}radio-item-label{ - cursor: pointer; - display: block; - padding: 5px; -} - -.#{$app-prefix}field-units { - position: absolute; - right: 0; - top: 0; -} -.#{$app-prefix}field-unit { - position: absolute; - right: 10px; top: 3px; - font-size: 10px; - color: $arrowColor; - cursor:pointer; -} +$lightBorder: rgba(255, 255, 255, 0.05); -.#{$app-prefix}field-arrows { - z-index: 10; - cursor: ns-resize; - height: 100%; - position: absolute; - right: 0; - top: 0; - width: 9px; -} - -.#{$app-prefix}field-arrow-u, -.#{$app-prefix}field-arrow-d{ - position: absolute; - height: 0; width: 0; - border-left: 3px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid $arrowColor; - bottom: 4px; - cursor:pointer; -} - -.#{$app-prefix}field-arrow-u { - border-bottom: 4px solid $arrowColor; - border-top: none; - top: 4px; -} - -.#{$app-prefix}field-select { - padding: 0; -} - -.#{$app-prefix}field-range { - background-color: transparent; - border: none; - box-shadow: none; - padding: 0; - - input { - margin: 0; - } - - input::-moz-range-thumb { - @include rangeThumbStyle(); - } - - input::-webkit-slider-thumb { - -webkit-appearance: none; - margin-top: -5px; - @include rangeThumbStyle(); - } - - input::-ms-thumb { - @include rangeThumbStyle(); - } - - input::-moz-range-track { - @include rangeTrackStyle(); - } - - input::-webkit-slider-runnable-track { - @include rangeTrackStyle(); - } - - input::-ms-track { - @include rangeTrackStyle(); - } -} - -.#{$app-prefix}chk-icon{ - @include transform(rotate(45deg)); - box-sizing: border-box; - display: block; - height: 14px; - margin: 0 5px; - width: 6px; - cursor: pointer; -} - - -.#{$app-prefix}add-trasp { - background: none; - border: none; - color: $fontColor; - cursor: pointer; - font-size: 1em; - border-radius: 2px; - @include opacity(0.75); - - &:hover{ @include opacity(1); } - &:active{ - background-color: rgba(0, 0, 0, 0.2); - } -} - -/********* END Inputs **********/ +@import "gjs_inputs"; /********* Device Manager **********/ @@ -1008,16 +735,14 @@ $colorpSize: 20px; input, select { background-color: transparent; - color: $inputFontColor; + color: $mainLhlColor; border:none; width: 100%; } input { box-sizing: border-box; - padding: 3px 21px 3px 0; } select { - padding: 2px 10px 2px 2px; position: relative; z-index:1; @include appearance(none); @@ -1026,7 +751,7 @@ $colorpSize: 20px; select:-moz-focusring{ color: transparent; - text-shadow: 0 0 0 $inputFontColor; + text-shadow: 0 0 0 $mainLhlColor; } select:focus, input:focus{ @@ -1037,7 +762,7 @@ $colorpSize: 20px; position: absolute; right: 10px; top: 3px; font-size: 10px; - color: $arrowColor; + color: $mainLhlColor; cursor:pointer; } @@ -1058,11 +783,11 @@ $colorpSize: 20px; } .#{$sm-prefix}u-arrow { - border-bottom: 4px solid $arrowColor; + border-bottom: 4px solid $mainLhlColor; top: 4px; } .#{$sm-prefix}d-arrow, .#{$sm-prefix}d-s-arrow, .#{$clm-prefix}d-s-arrow{ - border-top: 4px solid $arrowColor; + border-top: 4px solid $mainLhlColor; bottom: 4px; } .#{$sm-prefix}d-s-arrow, .#{$clm-prefix}d-s-arrow{ bottom: 7px; } @@ -1071,7 +796,7 @@ $colorpSize: 20px; background-color: $mainDkColor;/*353535*/ border: 1px solid rgba(0, 0, 0, 0.1);/*292929*/ box-shadow: 1px 1px 0 $mainLhColor;/*575757*/ - color: $inputFontColor; + color: $mainLhlColor; border-radius: 2px; box-sizing: border-box; padding: 0 5px; @@ -1114,7 +839,7 @@ $colorpSize: 20px; .#{$sm-prefix}list .#{$sm-prefix}el{ float:left; - border-left: 1px solid $darkTextShadow; + border-left: 1px solid $mainDkColor; &:first-child{border:none} &:hover{background: $mainDkColor; } @@ -1181,10 +906,6 @@ $colorpSize: 20px; } .#{$sm-prefix}layers { - background-color: rgba(0,0,0,0.13); - border: 1px solid rgba(0,0,0,0.13); - box-shadow: 1px 1px 0 $mainLhColor; - border-radius: 2px; margin-top: 5px; min-height: 30px; } @@ -1395,7 +1116,7 @@ $paddElClm: 5px 6px; } ##{$clm-prefix}add-tag{ - background-color: rgba(255, 255, 255, 0.2); + background-color: rgba(255, 255, 255, 0.15); border-radius: 2px; padding: $paddElClm; box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2) inset; @@ -1445,6 +1166,7 @@ $paddElClm: 5px 6px; input { width: auto; + padding: 0 4px; } } } @@ -1512,19 +1234,20 @@ $paddElClm: 5px 6px; } /********* Assets Manager **********/ -.#{$am-prefix}assets{ +.#{$am-prefix}assets { height: 290px; overflow: auto; clear: both; } -.#{$am-prefix}assets-header{ +.#{$am-prefix}assets-header { padding: 5px; } -.#{$am-prefix}add-asset{ - input{ +.#{$am-prefix}add-asset { + .#{$am-prefix}add-field { width: 70%; + float: left; } button{ width: 25%; @@ -1532,6 +1255,10 @@ $paddElClm: 5px 6px; } } +.#{$am-prefix}add-field input { + padding: 6px; +} + .#{$am-prefix}assets-cont { background-color: $mainDklColor; border-radius: 3px;