mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
10 years ago
7 changed files with 19 additions and 24465 deletions
@ -1,25 +0,0 @@ |
|||
Copyright (c) 2016, Artur Arseniev |
|||
All rights reserved. |
|||
|
|||
Redistribution and use in source and binary forms, with or without modification, |
|||
are permitted provided that the following conditions are met: |
|||
|
|||
- Redistributions of source code must retain the above copyright notice, this |
|||
list of conditions and the following disclaimer. |
|||
- Redistributions in binary form must reproduce the above copyright notice, this |
|||
list of conditions and the following disclaimer in the documentation and/or |
|||
other materials provided with the distribution. |
|||
- Neither the name "Grapes" nor the names of its contributors may be |
|||
used to endorse or promote products derived from this software without |
|||
specific prior written permission. |
|||
|
|||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND |
|||
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED |
|||
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE |
|||
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR |
|||
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES |
|||
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; |
|||
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON |
|||
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
|||
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS |
|||
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,761 +0,0 @@ |
|||
body{ |
|||
background-color:#eee; |
|||
font-family: Helvetica, sans-serif; |
|||
margin: 0; |
|||
} |
|||
html,body,#wte-app,#editor,#canvas{height: 100%;} |
|||
.clear{clear:both} |
|||
.no-select{ |
|||
-moz-user-select: none; |
|||
-khtml-user-select: none; |
|||
-webkit-user-select: none; |
|||
-ms-user-select: none; |
|||
-o-user-select: none; |
|||
user-select: none; |
|||
} |
|||
#wte-app{height: 100%; min-width: 1250px;} |
|||
#editor{ |
|||
position:relative; |
|||
border: 3px solid #4b4b4b; |
|||
border-left:none; border-right:none; |
|||
box-sizing: border-box; |
|||
} |
|||
#canvas { |
|||
position: absolute; |
|||
width: 80%; |
|||
height: 100%; |
|||
top: 0; left: 3.5%; |
|||
overflow: auto; |
|||
z-index:1; |
|||
/*********TEST**********outline: 2px dashed #555; outline-offset: -2px;*/ |
|||
} |
|||
#canvas *{box-sizing: border-box;} |
|||
/************* WRAPPER ****************/ |
|||
#canvas > div { |
|||
height: 100%; |
|||
overflow: auto; |
|||
width: 100%; |
|||
} |
|||
/************* RTE ****************/ |
|||
#canvas-overlay{ |
|||
position: absolute; |
|||
height: 100%; width:100%; |
|||
z-index:1; top:0; left:0; |
|||
} |
|||
#commands.panel { |
|||
min-width: 35px; |
|||
height: 100%; |
|||
z-index:3; |
|||
} |
|||
#options.panel{ z-index:4; bottom: 0;} |
|||
#views.panel { |
|||
width: 16.5%; |
|||
font-weight: lighter; |
|||
color: #fff; |
|||
right:0; top:0; |
|||
z-index: 3; |
|||
height: 100%; |
|||
padding:0; |
|||
} |
|||
#views.panel .c{height:100%} |
|||
#commands.panel, #options.panel {width: 3.5%; left:0;} |
|||
#options .c { display: table; margin: 0 auto; } |
|||
|
|||
/*********TEST**********/ |
|||
body.dragging, body.dragging * { cursor: move !important;} |
|||
.dragged { position: absolute; opacity: 0.5; z-index: 2000;} |
|||
ol.example li.placeholder {position: relative;} |
|||
ol.example li.placeholder:before {position: absolute;} |
|||
/*********END-TEST**********/ |
|||
.view-components #canvas div {/*highlights*/ |
|||
/*border: 0.1px dashed #888; margin: -0.1px; override margin properties*/ |
|||
outline: 1px dashed #888; outline-offset: -2px; |
|||
box-sizing: border-box; |
|||
/*-moz-user-select: none; |
|||
-khtml-user-select: none; |
|||
-webkit-user-select: none; |
|||
-ms-user-select: none; |
|||
-o-user-select: none; |
|||
user-select: none;*/ |
|||
} |
|||
.no-dots, .ui-resizable-handle{ border: none !important; margin:0 !important; outline: none !important; } |
|||
body #canvas .hover-component, body #canvas .hover-delete-component, body #canvas .hover-move-component{ outline: 1px solid #3b97e3;} |
|||
body #canvas .hover-delete-component{ |
|||
outline: 2px solid #DD3636;/*f46161*/ |
|||
opacity: 0.5; |
|||
filter: alpha(opacity=50); |
|||
} |
|||
body #canvas .hover-move-component{ outline: 3px solid #ffca6f;} |
|||
body #canvas .selected-component{ |
|||
/*border: 3px solid #3b97e3; /*First was: outline: ...; outline-offset: -2px; changed after strange artefacts on FF */ |
|||
outline: 3px solid #3b97e3; |
|||
} |
|||
.panel { |
|||
background-color: #4b4b4b; |
|||
display: inline-block; |
|||
padding: 5px; |
|||
position:absolute; |
|||
box-sizing: border-box; |
|||
z-index:2; |
|||
} |
|||
.panel .btn { |
|||
background-color: transparent; |
|||
border:none; |
|||
display: block; |
|||
height: 35px; |
|||
width: 35px; |
|||
cursor:pointer; |
|||
background-repeat: no-repeat; |
|||
background-position:center; |
|||
border-radius: 2px; |
|||
opacity: 0.85; |
|||
filter: alpha(opacity=85); |
|||
} |
|||
.panel .btn.expand { |
|||
background-size: 100% auto; |
|||
display: inline; |
|||
margin-right: 5px; |
|||
padding: 0 7px 0 0; |
|||
} |
|||
.btn {position:relative;} |
|||
.btn .wte-buttons{ |
|||
background-color:#4b4b4b; |
|||
border-radius: 2px; |
|||
position:absolute; |
|||
padding: 5px; |
|||
display:none; |
|||
left:50px; |
|||
} |
|||
.btn .wte-buttons.visible{ display:block; } |
|||
.btn .btn-arrow { |
|||
border-bottom: 5px solid white; |
|||
border-left: 5px solid transparent; |
|||
bottom: 2px; right: 2px; |
|||
position: absolute; |
|||
} |
|||
.btn .btns-arrow { |
|||
border-bottom: 5px solid transparent; |
|||
border-right: 5px solid #4b4b4b; |
|||
border-top: 5px solid transparent; |
|||
left: -5px; |
|||
position: absolute; |
|||
top: 15px; |
|||
} |
|||
.panel .btn:hover{ |
|||
opacity:1; |
|||
filter: alpha(opacity=100); |
|||
} |
|||
.panel .btn.active{ |
|||
background-color: #3a3a3a; |
|||
box-shadow: inset 0 0 3px #202020; |
|||
} |
|||
.tab { |
|||
background-repeat: no-repeat; |
|||
background-position:center; |
|||
height: 25px; width: 25px; |
|||
padding: 10px 10px 9px; |
|||
float:left; cursor:pointer; |
|||
background-color: #3a3a3a; |
|||
} |
|||
.tabs .tab{ border-left: 1px solid #303030;} |
|||
.tabs .tab:hover{ background-color: #3e3e3e;} |
|||
.tabs .tab.active:hover{ background-color: transparent;} |
|||
.tabs .tab:first-child{border:none} |
|||
.tab.active{ background-color: transparent;} |
|||
.nav-component, .nv-item { |
|||
position: relative; |
|||
background-color: #333333; |
|||
} |
|||
.nv-item #counter { |
|||
font-size: 10px; |
|||
position: absolute; |
|||
right: 10px; |
|||
top: 9px; |
|||
} |
|||
.nv-item #btn-eye{ |
|||
background-image: url('../images/icon-eye-o.svg'); |
|||
position: absolute; |
|||
top: 0; |
|||
height: 30px; |
|||
width: 30px; |
|||
background-size: 100% auto; |
|||
} |
|||
#style.tabInner .title, .nav-component .title { |
|||
background-color: #3a3a3a; |
|||
font-size: 13px; |
|||
letter-spacing: 1px; |
|||
padding: 7px 10px; |
|||
text-shadow: 0 1px 0 #252525; |
|||
border-bottom: 1px solid #303030; |
|||
border-top: 1px solid #414141; |
|||
cursor:pointer; |
|||
} |
|||
.nav-component .title {font-size: 11px;} |
|||
.nav-component .children .title{ border-left: 1px solid #404040; } |
|||
.nav-component > .children { |
|||
margin-left: 15px; |
|||
display: none; |
|||
} |
|||
.nav-component.open > .children { |
|||
display: block; |
|||
} |
|||
.btn#icon-create-comp{ background-image:url('../images/icon-create2.png');} |
|||
.btn#icon-delete-comp{ background-image:url('../images/icon-delete.png');} |
|||
.btn#icon-move-comp{ background-image:url('../images/icon-move.png');} |
|||
.btn#icon-resize-comp{ background-image:url('../images/icon-resize.png');} |
|||
.btn#icon-select-comp{ background-image:url('../images/icon-select2.png');} |
|||
.btn#icon-text-comp{ background-image:url('../images/icon-text.png');} |
|||
.btn#icon-image-comp{ background-image:url('../images/icon-image.png');} |
|||
.btn#icon-var-comp{ background-image:url('../images/icon-vars3.png');} |
|||
.btn#icon-view-comp{ background-image:url('../images/icon-eye.png');} |
|||
.btn#icon-export{ background-image:url('../images/icon-export2.png');} |
|||
.btn#icon-import{ background-image:url('../images/icon-import.png');} |
|||
.tab#style{ background-image:url('../images/icon-style.png');} |
|||
.tab#navigator{ background-image:url('../images/icon-layers.png');} |
|||
.btn.expand{ background-image:url('../images/arrow-r.png');} |
|||
.open > .title > .expand{ background-image:url('../images/arrow-d.png');} |
|||
.no-chld .expand{ background-image:none !important;} |
|||
#views.panel #tabsInner { |
|||
clear: both; |
|||
border-top: 1px solid #303030; |
|||
padding-top: 5px; |
|||
height:90%; overflow:auto; |
|||
} |
|||
#icon-pick-color { |
|||
border: 3px solid #ddd; |
|||
margin: 15px auto 7px !important; |
|||
border-radius: 0; |
|||
padding: 0; |
|||
box-shadow: none; |
|||
height: 20px; width: 20px; |
|||
background:#3b97e3; |
|||
opacity:1; filter: alpha(opacity=100); |
|||
} |
|||
#icon-export{ |
|||
box-shadow: none; |
|||
background-color: transparent; |
|||
} |
|||
#commands .btn, #options .btn { margin: 0 auto 5px; } |
|||
.tempComp{ |
|||
background-color: #5b5b5b; |
|||
border: 2px dashed #ccc; |
|||
outline:none !important; |
|||
position: absolute; z-index: 55; |
|||
opacity:0.55; |
|||
filter: alpha(opacity=55); |
|||
} |
|||
.freezed{opacity:0.35; filter: alpha(opacity=35);} |
|||
.placeholder-helper{ position:absolute; } |
|||
.sort-placeholder, .insert-placeholder { |
|||
background-color: #ffca6f; |
|||
padding:3px; |
|||
/*margin: 3px 0 !important;*/ |
|||
/*outline: none !important;*/ |
|||
} |
|||
.image-placeholder { |
|||
background-image:url('../images/image-placeholder.svg'); |
|||
background-size: cover; |
|||
background-color: #eee; |
|||
height: 50px; |
|||
outline: 3px solid #ffca6f; |
|||
outline-offset: -3px; |
|||
width: 50px; |
|||
} |
|||
.insert-placeholder, .change-placeholder{ |
|||
background-color: transparent; |
|||
height: 0px; width: 0px; |
|||
padding:0; |
|||
} |
|||
.insert-placeholder .plh-int{ |
|||
background-color: #62C462; |
|||
height: 100%; width: 100%; |
|||
pointer-events: 'none'; |
|||
padding: 2px; |
|||
} |
|||
.change-placeholder .plh-int{ background-color: #ffca6f; } |
|||
/*********** Helpers *************/ |
|||
.componentBadge, .componentBadgeWarn, .componentBadgeWarn2{ |
|||
pointer-events: none; |
|||
background-color: #3B97E3; color: #fff; |
|||
padding: 2px 5px; |
|||
position: absolute; z-index: 1; |
|||
font-size: 12px; |
|||
} |
|||
.componentBadgeWarn{ background-color:#DD3636; } |
|||
.componentBadgeWarn2{ background-color:#ffca6f; } |
|||
/********* Style Manager **********/ |
|||
#styleManager #sm-head, .utilities .head { |
|||
font-size: 11px; |
|||
padding: 5px 10px; |
|||
border-bottom: 1px solid #3e3e3e; |
|||
text-shadow: 0 1px 0 #3a3a3a; |
|||
} |
|||
.sm-sector{clear:both; border-bottom: 1px solid #303030;} |
|||
.sm-label { margin: 5px 5px 2px 0;} |
|||
.sm-field { |
|||
width: 100%; |
|||
position:relative; |
|||
} |
|||
.sm-field.integer, .sm-field.select, .sm-field.list, .sm-field.color, .sm-field.composite { |
|||
background-color: #333; |
|||
border: 1px solid #292929; |
|||
box-shadow: 1px 1px 0 #575757; |
|||
border-radius: 2px; |
|||
color: #d3d3d3; |
|||
box-sizing: border-box; |
|||
padding: 0 5px; |
|||
} |
|||
.sm-field.composite{ |
|||
background-color: transparent; |
|||
border: 1px solid #353535; |
|||
} |
|||
.sm-property.file, .sm-property.composite, .sm-property#background-position{ |
|||
width:100%; |
|||
} |
|||
.sm-field.list{ |
|||
width:auto; |
|||
padding:0; |
|||
overflow: hidden; |
|||
float:left; |
|||
} |
|||
.sm-field.list .el{ |
|||
float:left; |
|||
border-left: 1px solid #252525; |
|||
padding: 5px 0; |
|||
text-shadow: 0 1px 0 #222222; |
|||
} |
|||
.sm-field.list .el:first-child{border:none} |
|||
.sm-field.list .el:hover{background:#3d3d3d} |
|||
.sm-field.list input{display:none;} |
|||
.sm-field.list label{cursor:pointer; padding: 5px;} |
|||
.sm-field.list .radio:checked + label{ |
|||
background-color:#5c5c5c; |
|||
} |
|||
.sm-field.select{padding:0;} |
|||
.sm-field input { |
|||
box-sizing: border-box; |
|||
width: 30px; color: #d3d3d3; |
|||
background:none; border:none; |
|||
padding: 3px 0; |
|||
} |
|||
.sm-field select { |
|||
background: none; border: none; |
|||
color: #d3d3d3; color: transparent; |
|||
width: 100%; padding: 2px 0; |
|||
text-shadow: 0 0 0 #d3d3d3; |
|||
position: relative; z-index:1; |
|||
-webkit-appearance: none; |
|||
-moz-appearance: none; |
|||
appearance: none; |
|||
} |
|||
.sm-field select::-ms-expand { display: none;} |
|||
.sm-field.select option { margin: 5px 0;} |
|||
.sm-field.integer select{ width:auto; padding: 0; color: transparent;} |
|||
.sm-field.color input{ width:50px; } |
|||
.sm-color-picker { |
|||
/*background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");*/ |
|||
background-color: #fff; |
|||
border: 2px solid #555; |
|||
box-sizing: border-box; |
|||
cursor: pointer; |
|||
height: 100%; width: 20px; |
|||
position: absolute; |
|||
right: 0; top: 0; |
|||
} |
|||
.sm-field .unit { |
|||
position: absolute; |
|||
right: 10px; top: 3px; |
|||
font-size: 10px; |
|||
color:#aaa; |
|||
cursor:pointer; |
|||
} |
|||
.sm-field .int-arrows, .sm-field .sel-arrow{ |
|||
height: 100%; width: 9px; |
|||
position: absolute; |
|||
right: 0; top: 0; |
|||
cursor: ns-resize; |
|||
} |
|||
.sm-field .sel-arrow{cursor:pointer} |
|||
.sm-field .u-arrow,.sm-field .d-arrow, .sm-field .d-s-arrow{ |
|||
position: absolute; |
|||
height: 0; width: 0; |
|||
border-left: 3px solid transparent; |
|||
border-right: 4px solid transparent; |
|||
cursor:pointer; |
|||
} |
|||
.sm-field .u-arrow { |
|||
border-bottom: 4px solid #aaa; |
|||
top: 4px; |
|||
} |
|||
.sm-field .d-arrow, .sm-field .d-s-arrow { |
|||
border-top: 4px solid #aaa; |
|||
bottom: 4px; |
|||
} |
|||
.sm-field .d-s-arrow{ bottom: 7px; } |
|||
.sm-properties { |
|||
font-size: 11px; |
|||
padding: 10px 5px; |
|||
} |
|||
.stack .sm-properties{padding-top: 5px;} |
|||
.sm-property{ |
|||
box-sizing: border-box; |
|||
float:left; width:50%; |
|||
margin-bottom: 5px; |
|||
padding: 0 5px; |
|||
} |
|||
.sm-field.list .icon{ |
|||
background-repeat: no-repeat; |
|||
background-position:center; |
|||
color: transparent; |
|||
text-shadow: none; |
|||
padding: 5px 19px; |
|||
} |
|||
.sm-property .btn{ |
|||
background-color: #5d5d5d; |
|||
border-radius: 2px; |
|||
box-shadow: 1px 1px 0 #3f3f3f, 1px 1px 0 #656565 inset; |
|||
padding: 5px; |
|||
position: relative; |
|||
text-align: center; |
|||
height: auto; width: 100%; |
|||
cursor: pointer; |
|||
color: #fff; |
|||
box-sizing: border-box; |
|||
text-shadow: -1px -1px 0 #444; |
|||
} |
|||
.sm-property .btn-c { |
|||
box-sizing: border-box; |
|||
float: left; |
|||
width: 50%; |
|||
padding: 0 5px; |
|||
} |
|||
.btn-upload #upload { |
|||
left: 0; top: 0; |
|||
position: absolute; |
|||
width: 100%; |
|||
opacity: 0; |
|||
cursor: pointer; |
|||
} |
|||
.sm-field.stack #add { |
|||
background: none; |
|||
border: none; |
|||
color: white; |
|||
cursor: pointer; |
|||
font-size: 22px; |
|||
line-height: 10px; |
|||
position: absolute; |
|||
right: 0; top: -20px; |
|||
opacity: 0.75; |
|||
} |
|||
.sm-field.stack #add:hover{ opacity: 1;} |
|||
.sm-field .layers, .sm-property .sm-layers { |
|||
background-color: #3d3d3d; |
|||
border: 1px solid #353535; |
|||
border-radius: 2px; |
|||
box-shadow: 1px 1px 0 #575757; |
|||
margin-top: 5px; |
|||
min-height: 30px; |
|||
} |
|||
.sm-layers .sm-layer { |
|||
background-color: #454545; |
|||
border-radius: 2px; |
|||
box-shadow: 1px 1px 0 #333333, 1px 1px 0 #505050 inset; |
|||
margin: 2px; |
|||
padding: 7px; |
|||
position: relative; |
|||
cursor: pointer; |
|||
} |
|||
.sm-property.file #preview-box { |
|||
background-color: #404040; |
|||
border-radius: 2px; |
|||
margin-top: 5px; |
|||
position:relative; |
|||
overflow: hidden; |
|||
} |
|||
.sm-property.file #preview-box.show{ |
|||
border: 1px solid #3d3d3d; |
|||
padding: 3px 5px; |
|||
} |
|||
.sm-property.file .show #preview-file{ |
|||
height: 50px; |
|||
} |
|||
.sm-property.file #preview-file { |
|||
background-size: auto 100%; |
|||
background-repeat: no-repeat; |
|||
background-position: center center; |
|||
} |
|||
.sm-layer > #preview-box { |
|||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg=="); |
|||
height: 15px; |
|||
position: absolute; |
|||
right: 27px; |
|||
top: 6px; |
|||
width: 15px; |
|||
} |
|||
.sm-layer > #preview-box #preview { |
|||
background-color: white; |
|||
height: 100%; |
|||
width: 100%; |
|||
} |
|||
.sm-layer.active { |
|||
background-color: #4c4c4c; |
|||
border: 1px solid #555555; |
|||
} |
|||
.sm-layer #preview-box,.sm-layer #preview{border-radius:2px;} |
|||
.sm-layer.no-preview #preview-box{display:none;} |
|||
.sm-property.file #preview-box #close{display:block;} |
|||
.btn-upload #label { padding: 2px 0;} |
|||
.sm-field.list .icon.float-left{ background-image:url('../images/icon-box-l.png'); } |
|||
.sm-field.list .icon.float-right{ background-image:url('../images/icon-box-r.png'); } |
|||
.sm-field.list .icon.float-center{ background-image:url('../images/icon-box-c.png'); } |
|||
.sm-field.list .icon.none{ background-image:url('../images/icon-none.png'); } |
|||
/********* customs **********/ |
|||
.sm-property#width .sm-label, .sm-property#height .sm-label{float:left;} |
|||
.sm-property#width .sm-field, .sm-property#height .sm-field{float:left; /*width: 59px;*/} |
|||
.sm-property#position, .sm-property#float,.sm-property#font-family,.sm-property#text-align, |
|||
.sm-property#background-color{width:100%} |
|||
.sm-property#background-color input{width:130px;} |
|||
/*********Modal dialog**********/ |
|||
.dialog-container { |
|||
background-color: #000; |
|||
position: absolute; |
|||
top: 0; z-index: 10; |
|||
width:100%; height:100%; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000); |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000)"; |
|||
} |
|||
.modal-dialog { |
|||
background-color: #4b4b4b; |
|||
border-bottom: 2px solid #353535; |
|||
text-shadow: -1px -1px 0 #353535; |
|||
margin: 30px auto 0; |
|||
max-width: 850px; |
|||
width: 90%; |
|||
color: #eee; |
|||
border-radius: 3px; |
|||
font-weight: lighter; |
|||
} |
|||
.dialog-header, .dialog-content{padding:10px 15px; clear: both;} |
|||
.dialog-header{ border-bottom: 1px solid #3d3d3d;} |
|||
.dialog-content { border-top: 1px solid #575757;} |
|||
.modal-dialog .title { float: left; } |
|||
.modal-dialog .btn-close { |
|||
cursor: pointer; |
|||
float: right; |
|||
background-image: url("../images/icon-none.png"); |
|||
background-position: center center; |
|||
background-repeat: no-repeat; |
|||
height: 20px; width: 20px; |
|||
} |
|||
/********* File uploader **********/ |
|||
.wte-file-uploader {width: 55%; float:left;} |
|||
.wte-file-uploader > form { |
|||
background-color: #3d3d3d; |
|||
border: 2px dashed #999999; |
|||
border-radius: 3px; |
|||
position: relative; |
|||
text-align: center; |
|||
margin-bottom: 15px; |
|||
} |
|||
.wte-file-uploader > form #wte-uploadFile, |
|||
.wte-file-uploader #title{ padding: 150px 10px; } |
|||
.wte-file-uploader > form #wte-uploadFile{ |
|||
opacity: 0; filter: alpha(opacity=0); |
|||
width: 100%; |
|||
} |
|||
.wte-file-uploader #title { position: absolute;width: 100%;} |
|||
.wte-file-uploader > form.hover { |
|||
border: 2px solid #62c462; |
|||
color:#7ee07e; |
|||
} |
|||
/********* Assets Manager **********/ |
|||
.wte-assets { |
|||
background-color: #3d3d3d; |
|||
border-radius: 3px; |
|||
box-sizing: border-box; |
|||
margin-left: 3%; |
|||
padding: 5px; |
|||
width: 42%; |
|||
float:right; |
|||
height: 325px; |
|||
overflow: auto; |
|||
} |
|||
.wte-asset { |
|||
border-bottom: 1px solid #343434; |
|||
padding: 5px 0; |
|||
cursor:pointer; |
|||
position: relative; |
|||
} |
|||
.wte-asset #close, .sm-property.file #close, .btn-close { |
|||
font-size: 20px; |
|||
display: none; |
|||
opacity: 0.3; filter: alpha(opacity=30); |
|||
position: absolute; |
|||
cursor: pointer; |
|||
right: 5px; |
|||
top: 0; |
|||
} |
|||
.sm-layers .sm-layer #close-layer{ |
|||
display:block; |
|||
opacity: 0.2; |
|||
font-size: 23px; |
|||
} |
|||
.sm-layers .sm-layer #close-layer:hover{ opacity: 0.7;} |
|||
.wte-asset #close:hover{ |
|||
opacity: 0.7; filter: alpha(opacity=70); |
|||
} |
|||
.wte-asset:hover #close { display: block;} |
|||
.wte-asset.wte-highlight { |
|||
background-color: #444444; |
|||
} |
|||
.wte-asset #meta { |
|||
width: 70%; |
|||
float: left; |
|||
font-size: 12px; |
|||
padding: 5px 0 0 5px; |
|||
box-sizing: border-box; |
|||
} |
|||
.wte-asset #meta > div { margin-bottom: 5px;} |
|||
.wte-asset #preview{ |
|||
height: 70px; width: 30%; |
|||
background-position: center center; |
|||
background-size: cover; |
|||
background-repeat: no-repeat; |
|||
background-color: #444; |
|||
border-radius: 2px; |
|||
float: left; |
|||
} |
|||
.wte-asset #meta #dimensions { |
|||
font-size: 10px; |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
/********* Export template **********/ |
|||
.editor#html, .editor#css{ |
|||
float:left; |
|||
box-sizing: border-box; |
|||
width:50%; |
|||
} |
|||
.editor#html { padding-right: 10px; border-right: 1px solid #3d3d3d;} |
|||
.editor#css { padding-left: 10px; border-left: 1px solid #575757;} |
|||
.editor #mode { |
|||
background-color: #353535; |
|||
font-size: 12px; |
|||
padding: 5px 10px 3px; |
|||
text-align: right; |
|||
} |
|||
#html.editor #mode { color: #a97d44;} |
|||
#css.editor #mode { color: #ddca7e;} |
|||
|
|||
/********* Spectrum **********/ |
|||
.sp-hue, .sp-slider{ cursor: row-resize;} |
|||
.sp-color, .sp-dragger{ cursor: crosshair;} |
|||
.sp-alpha-inner, .sp-alpha-handle{cursor: col-resize;} |
|||
.sp-hue{ left: 90%; } |
|||
.sp-color{right: 15%;} |
|||
.sp-container { |
|||
background-color: #454545; |
|||
border: 1px solid #333333; |
|||
box-shadow: 0 0 7px #111; |
|||
border-radius: 3px; |
|||
} |
|||
.sp-picker-container{border:none;} |
|||
.colpick_dark .colpick_color { outline: 1px solid #333;} |
|||
.sp-cancel, .sp-cancel:hover { |
|||
bottom: -8px; |
|||
color: #777 !important; |
|||
font-size: 25px; |
|||
left: 0; |
|||
position: absolute; |
|||
text-decoration:none; |
|||
} |
|||
.sp-alpha-handle { |
|||
background-color: #ccc; |
|||
border: 1px solid #555; |
|||
width: 4px; |
|||
} |
|||
.sp-color, .sp-hue { border: 1px solid #333333;} |
|||
.sp-slider { |
|||
background-color: #ccc; |
|||
border: 1px solid #555; |
|||
height: 3px; |
|||
left: -4px; |
|||
width: 22px; |
|||
} |
|||
.sp-dragger{background:transparent; box-shadow: 0 0 0 1px #111;} |
|||
.sp-button-container{ |
|||
float: none; |
|||
width: 100%; |
|||
position: relative; |
|||
text-align: right; |
|||
} |
|||
.sp-container button, .sp-container button:hover, .sp-container button:active{ |
|||
background: #333; |
|||
border-color: #292929; |
|||
color: #757575; |
|||
text-shadow: none; |
|||
box-shadow: none; |
|||
padding: 3px 5px; |
|||
} |
|||
|
|||
/*********JQuery-UI**********/ |
|||
.ui-sortable-helper{ |
|||
opacity: 0.7; filter: alpha(opacity=70); |
|||
} |
|||
.ui-sort-highlight{/*ui-sortable-placeholder*/ |
|||
background:#123; |
|||
height:20px; |
|||
} |
|||
.ui-resizable{ position:relative;} |
|||
.ui-resizable-se, .ui-resizable-s,.ui-resizable-e{ |
|||
position:absolute; |
|||
right: 0; |
|||
bottom:0; |
|||
cursor: nwse-resize; |
|||
height:15px; |
|||
width:15px; |
|||
outline: none !important; |
|||
} |
|||
.ui-resizable-se{ |
|||
background-image:url('../images/resize-dots.png'); |
|||
opacity: 0; filter: alpha(opacity=0); |
|||
} |
|||
.ui-resizable:hover > .ui-resizable-se{ opacity: 0.3; filter: alpha(opacity=30); } |
|||
.ui-resizable-s{ |
|||
height:10px; |
|||
width:100%; |
|||
cursor: ns-resize; |
|||
} |
|||
.ui-resizable-e{ |
|||
width:10px; |
|||
height:100%; |
|||
cursor: ew-resize; |
|||
} |
|||
/*************RTE****************/ |
|||
.rte-editor { position: relative; z-index: 2; } |
|||
#rte-toolbar { |
|||
background-color: #4b4b4b; |
|||
border: 1px solid #3f3f3f; |
|||
position: absolute; |
|||
border-radius: 3px; |
|||
overflow: hidden; |
|||
z-index: 5; |
|||
} |
|||
#rte-toolbar .btn { |
|||
float: left; |
|||
padding: 5px; |
|||
box-sizing: border-box; |
|||
height:25px; width:25px; |
|||
background-position: center; |
|||
background-repeat: no-repeat; |
|||
background-size: 60% auto; |
|||
border-right: 1px solid #353535; |
|||
cursor: pointer |
|||
} |
|||
#rte-toolbar .btn:last-child{ border-right:none; } |
|||
#rte-toolbar .btn.btn-info{ background-color:#3a3a3a; } |
|||
#rte-toolbar .btn[data-edit=bold]{ background-image:url('../images/icon-bold.png');} |
|||
#rte-toolbar .btn[data-edit=italic]{ background-image:url('../images/icon-italic.png');} |
|||
#rte-toolbar .btn[data-edit=underline]{ background-image:url('../images/icon-underline.png');} |
|||
#rte-toolbar .btn:hover { background-color: #5f5f5f;} |
|||
@ -1,507 +0,0 @@ |
|||
/*** |
|||
Spectrum Colorpicker v1.7.1 |
|||
https://github.com/bgrins/spectrum |
|||
Author: Brian Grinstead |
|||
License: MIT |
|||
***/ |
|||
|
|||
.sp-container { |
|||
position:absolute; |
|||
top:0; |
|||
left:0; |
|||
display:inline-block; |
|||
*display: inline; |
|||
*zoom: 1; |
|||
/* https://github.com/bgrins/spectrum/issues/40 */ |
|||
z-index: 9999994; |
|||
overflow: hidden; |
|||
} |
|||
.sp-container.sp-flat { |
|||
position: relative; |
|||
} |
|||
|
|||
/* Fix for * { box-sizing: border-box; } */ |
|||
.sp-container, |
|||
.sp-container * { |
|||
-webkit-box-sizing: content-box; |
|||
-moz-box-sizing: content-box; |
|||
box-sizing: content-box; |
|||
} |
|||
|
|||
/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */ |
|||
.sp-top { |
|||
position:relative; |
|||
width: 100%; |
|||
display:inline-block; |
|||
} |
|||
.sp-top-inner { |
|||
position:absolute; |
|||
top:0; |
|||
left:0; |
|||
bottom:0; |
|||
right:0; |
|||
} |
|||
.sp-color { |
|||
position: absolute; |
|||
top:0; |
|||
left:0; |
|||
bottom:0; |
|||
right:20%; |
|||
} |
|||
.sp-hue { |
|||
position: absolute; |
|||
top:0; |
|||
right:0; |
|||
bottom:0; |
|||
left:84%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.sp-clear-enabled .sp-hue { |
|||
top:33px; |
|||
height: 77.5%; |
|||
} |
|||
|
|||
.sp-fill { |
|||
padding-top: 80%; |
|||
} |
|||
.sp-sat, .sp-val { |
|||
position: absolute; |
|||
top:0; |
|||
left:0; |
|||
right:0; |
|||
bottom:0; |
|||
} |
|||
|
|||
.sp-alpha-enabled .sp-top { |
|||
margin-bottom: 18px; |
|||
} |
|||
.sp-alpha-enabled .sp-alpha { |
|||
display: block; |
|||
} |
|||
.sp-alpha-handle { |
|||
position:absolute; |
|||
top:-4px; |
|||
bottom: -4px; |
|||
width: 6px; |
|||
left: 50%; |
|||
cursor: pointer; |
|||
border: 1px solid black; |
|||
background: white; |
|||
opacity: .8; |
|||
} |
|||
.sp-alpha { |
|||
display: none; |
|||
position: absolute; |
|||
bottom: -14px; |
|||
right: 0; |
|||
left: 0; |
|||
height: 8px; |
|||
} |
|||
.sp-alpha-inner { |
|||
border: solid 1px #333; |
|||
} |
|||
|
|||
.sp-clear { |
|||
display: none; |
|||
} |
|||
|
|||
.sp-clear.sp-clear-display { |
|||
background-position: center; |
|||
} |
|||
|
|||
.sp-clear-enabled .sp-clear { |
|||
display: block; |
|||
position:absolute; |
|||
top:0px; |
|||
right:0; |
|||
bottom:0; |
|||
left:84%; |
|||
height: 28px; |
|||
} |
|||
|
|||
/* Don't allow text selection */ |
|||
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button { |
|||
-webkit-user-select:none; |
|||
-moz-user-select: -moz-none; |
|||
-o-user-select:none; |
|||
user-select: none; |
|||
} |
|||
|
|||
.sp-container.sp-input-disabled .sp-input-container { |
|||
display: none; |
|||
} |
|||
.sp-container.sp-buttons-disabled .sp-button-container { |
|||
display: none; |
|||
} |
|||
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container { |
|||
display: none; |
|||
} |
|||
.sp-palette-only .sp-picker-container { |
|||
display: none; |
|||
} |
|||
.sp-palette-disabled .sp-palette-container { |
|||
display: none; |
|||
} |
|||
|
|||
.sp-initial-disabled .sp-initial { |
|||
display: none; |
|||
} |
|||
|
|||
|
|||
/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */ |
|||
.sp-sat { |
|||
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0))); |
|||
background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0)); |
|||
background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); |
|||
background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); |
|||
background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); |
|||
background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0)); |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)"; |
|||
filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81'); |
|||
} |
|||
.sp-val { |
|||
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0))); |
|||
background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0)); |
|||
background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); |
|||
background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); |
|||
background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); |
|||
background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0)); |
|||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)"; |
|||
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000'); |
|||
} |
|||
|
|||
.sp-hue { |
|||
background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); |
|||
background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); |
|||
background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); |
|||
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000)); |
|||
background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); |
|||
background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); |
|||
} |
|||
|
|||
/* IE filters do not support multiple color stops. |
|||
Generate 6 divs, line them up, and do two color gradients for each. |
|||
Yes, really. |
|||
*/ |
|||
.sp-1 { |
|||
height:17%; |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00'); |
|||
} |
|||
.sp-2 { |
|||
height:16%; |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00'); |
|||
} |
|||
.sp-3 { |
|||
height:17%; |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff'); |
|||
} |
|||
.sp-4 { |
|||
height:17%; |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff'); |
|||
} |
|||
.sp-5 { |
|||
height:16%; |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff'); |
|||
} |
|||
.sp-6 { |
|||
height:17%; |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000'); |
|||
} |
|||
|
|||
.sp-hidden { |
|||
display: none !important; |
|||
} |
|||
|
|||
/* Clearfix hack */ |
|||
.sp-cf:before, .sp-cf:after { content: ""; display: table; } |
|||
.sp-cf:after { clear: both; } |
|||
.sp-cf { *zoom: 1; } |
|||
|
|||
/* Mobile devices, make hue slider bigger so it is easier to slide */ |
|||
@media (max-device-width: 480px) { |
|||
.sp-color { right: 40%; } |
|||
.sp-hue { left: 63%; } |
|||
.sp-fill { padding-top: 60%; } |
|||
} |
|||
.sp-dragger { |
|||
border-radius: 5px; |
|||
height: 5px; |
|||
width: 5px; |
|||
border: 1px solid #fff; |
|||
background: #000; |
|||
cursor: pointer; |
|||
position:absolute; |
|||
top:0; |
|||
left: 0; |
|||
} |
|||
.sp-slider { |
|||
position: absolute; |
|||
top:0; |
|||
cursor:pointer; |
|||
height: 3px; |
|||
left: -1px; |
|||
right: -1px; |
|||
border: 1px solid #000; |
|||
background: white; |
|||
opacity: .8; |
|||
} |
|||
|
|||
/* |
|||
Theme authors: |
|||
Here are the basic themeable display options (colors, fonts, global widths). |
|||
See http://bgrins.github.io/spectrum/themes/ for instructions. |
|||
*/ |
|||
|
|||
.sp-container { |
|||
border-radius: 0; |
|||
background-color: #ECECEC; |
|||
border: solid 1px #f0c49B; |
|||
padding: 0; |
|||
} |
|||
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear { |
|||
font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
.sp-top { |
|||
margin-bottom: 3px; |
|||
} |
|||
.sp-color, .sp-hue, .sp-clear { |
|||
border: solid 1px #666; |
|||
} |
|||
|
|||
/* Input */ |
|||
.sp-input-container { |
|||
float:right; |
|||
width: 100px; |
|||
margin-bottom: 4px; |
|||
} |
|||
.sp-initial-disabled .sp-input-container { |
|||
width: 100%; |
|||
} |
|||
.sp-input { |
|||
font-size: 12px !important; |
|||
border: 1px inset; |
|||
padding: 4px 5px; |
|||
margin: 0; |
|||
width: 100%; |
|||
background:transparent; |
|||
border-radius: 3px; |
|||
color: #222; |
|||
} |
|||
.sp-input:focus { |
|||
border: 1px solid orange; |
|||
} |
|||
.sp-input.sp-validation-error { |
|||
border: 1px solid red; |
|||
background: #fdd; |
|||
} |
|||
.sp-picker-container , .sp-palette-container { |
|||
float:left; |
|||
position: relative; |
|||
padding: 10px; |
|||
padding-bottom: 300px; |
|||
margin-bottom: -290px; |
|||
} |
|||
.sp-picker-container { |
|||
width: 172px; |
|||
border-left: solid 1px #fff; |
|||
} |
|||
|
|||
/* Palettes */ |
|||
.sp-palette-container { |
|||
border-right: solid 1px #ccc; |
|||
} |
|||
|
|||
.sp-palette-only .sp-palette-container { |
|||
border: 0; |
|||
} |
|||
|
|||
.sp-palette .sp-thumb-el { |
|||
display: block; |
|||
position:relative; |
|||
float:left; |
|||
width: 24px; |
|||
height: 15px; |
|||
margin: 3px; |
|||
cursor: pointer; |
|||
border:solid 2px transparent; |
|||
} |
|||
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active { |
|||
border-color: orange; |
|||
} |
|||
.sp-thumb-el { |
|||
position:relative; |
|||
} |
|||
|
|||
/* Initial */ |
|||
.sp-initial { |
|||
float: left; |
|||
border: solid 1px #333; |
|||
} |
|||
.sp-initial span { |
|||
width: 30px; |
|||
height: 25px; |
|||
border:none; |
|||
display:block; |
|||
float:left; |
|||
margin:0; |
|||
} |
|||
|
|||
.sp-initial .sp-clear-display { |
|||
background-position: center; |
|||
} |
|||
|
|||
/* Buttons */ |
|||
.sp-palette-button-container, |
|||
.sp-button-container { |
|||
float: right; |
|||
} |
|||
|
|||
/* Replacer (the little preview div that shows up instead of the <input>) */ |
|||
.sp-replacer { |
|||
margin:0; |
|||
overflow:hidden; |
|||
cursor:pointer; |
|||
padding: 4px; |
|||
display:inline-block; |
|||
*zoom: 1; |
|||
*display: inline; |
|||
border: solid 1px #91765d; |
|||
background: #eee; |
|||
color: #333; |
|||
vertical-align: middle; |
|||
} |
|||
.sp-replacer:hover, .sp-replacer.sp-active { |
|||
border-color: #F0C49B; |
|||
color: #111; |
|||
} |
|||
.sp-replacer.sp-disabled { |
|||
cursor:default; |
|||
border-color: silver; |
|||
color: silver; |
|||
} |
|||
.sp-dd { |
|||
padding: 2px 0; |
|||
height: 16px; |
|||
line-height: 16px; |
|||
float:left; |
|||
font-size:10px; |
|||
} |
|||
.sp-preview { |
|||
position:relative; |
|||
width:25px; |
|||
height: 20px; |
|||
border: solid 1px #222; |
|||
margin-right: 5px; |
|||
float:left; |
|||
z-index: 0; |
|||
} |
|||
|
|||
.sp-palette { |
|||
*width: 220px; |
|||
max-width: 220px; |
|||
} |
|||
.sp-palette .sp-thumb-el { |
|||
width:16px; |
|||
height: 16px; |
|||
margin:2px 1px; |
|||
border: solid 1px #d0d0d0; |
|||
} |
|||
|
|||
.sp-container { |
|||
padding-bottom:0; |
|||
} |
|||
|
|||
|
|||
/* Buttons: http://hellohappy.org/css3-buttons/ */ |
|||
.sp-container button { |
|||
background-color: #eeeeee; |
|||
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); |
|||
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); |
|||
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); |
|||
background-image: -o-linear-gradient(top, #eeeeee, #cccccc); |
|||
background-image: linear-gradient(to bottom, #eeeeee, #cccccc); |
|||
border: 1px solid #ccc; |
|||
border-bottom: 1px solid #bbb; |
|||
border-radius: 3px; |
|||
color: #333; |
|||
font-size: 14px; |
|||
line-height: 1; |
|||
padding: 5px 4px; |
|||
text-align: center; |
|||
text-shadow: 0 1px 0 #eee; |
|||
vertical-align: middle; |
|||
} |
|||
.sp-container button:hover { |
|||
background-color: #dddddd; |
|||
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); |
|||
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); |
|||
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); |
|||
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); |
|||
background-image: linear-gradient(to bottom, #dddddd, #bbbbbb); |
|||
border: 1px solid #bbb; |
|||
border-bottom: 1px solid #999; |
|||
cursor: pointer; |
|||
text-shadow: 0 1px 0 #ddd; |
|||
} |
|||
.sp-container button:active { |
|||
border: 1px solid #aaa; |
|||
border-bottom: 1px solid #888; |
|||
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; |
|||
-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; |
|||
-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; |
|||
-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; |
|||
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; |
|||
} |
|||
.sp-cancel { |
|||
font-size: 11px; |
|||
color: #d93f3f !important; |
|||
margin:0; |
|||
padding:2px; |
|||
margin-right: 5px; |
|||
vertical-align: middle; |
|||
text-decoration:none; |
|||
|
|||
} |
|||
.sp-cancel:hover { |
|||
color: #d93f3f !important; |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
|
|||
.sp-palette span:hover, .sp-palette span.sp-thumb-active { |
|||
border-color: #000; |
|||
} |
|||
|
|||
.sp-preview, .sp-alpha, .sp-thumb-el { |
|||
position:relative; |
|||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); |
|||
} |
|||
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner { |
|||
display:block; |
|||
position:absolute; |
|||
top:0;left:0;bottom:0;right:0; |
|||
} |
|||
|
|||
.sp-palette .sp-thumb-inner { |
|||
background-position: 50% 50%; |
|||
background-repeat: no-repeat; |
|||
} |
|||
|
|||
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner { |
|||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=); |
|||
} |
|||
|
|||
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner { |
|||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=); |
|||
} |
|||
|
|||
.sp-clear-display { |
|||
background-repeat:no-repeat; |
|||
background-position: center; |
|||
background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==); |
|||
} |
|||
Loading…
Reference in new issue