mirror of
https://gitee.com/smartchart/smartchart
synced 2025-05-05 17:19:23 +08:00
433 lines
6.9 KiB
CSS
433 lines
6.9 KiB
CSS
body {
|
|
background-color:#F5F5F5;
|
|
color:#1E1C21;
|
|
font-family:Calibri,Arial;
|
|
font-size:15px;
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
|
|
ul, ol, li {
|
|
list-style:none;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
|
|
span:focus {
|
|
-moz-outline-style:none;outline:none;
|
|
}
|
|
|
|
.wrapper {
|
|
margin:0 auto;
|
|
padding-left:10px;
|
|
width:960px;
|
|
}
|
|
|
|
/* Preview Area - Left Column */
|
|
.preview {
|
|
-moz-border-radius:8px;
|
|
-webkit-border-radius:8px;
|
|
border-radius:8px;
|
|
background-color:#FFF;
|
|
border:1px solid #E1E1E1;
|
|
float:left;
|
|
margin-top:20px;
|
|
height:808px;
|
|
padding:35px 35px;
|
|
width:450px;
|
|
}
|
|
|
|
|
|
|
|
.ie-message {
|
|
background-color:#FFFFFF;
|
|
border:1px solid #E1E1E1;
|
|
color:#FF0F0F;
|
|
display:none;
|
|
font-size:16px;
|
|
padding:10px;
|
|
top:6px;
|
|
margin-bottom:20px;
|
|
z-index:1;
|
|
}
|
|
|
|
.ie-message span {
|
|
color:#999999;
|
|
cursor:pointer;
|
|
margin-top:5px;
|
|
position:absolute;
|
|
right:8px;
|
|
}
|
|
|
|
.ie-message span:hover {
|
|
color:#000000;
|
|
text-decoration:underline;
|
|
}
|
|
|
|
.generatorTitle{
|
|
font-size:20px;
|
|
font-weight:bold;
|
|
color : bcbcbc;
|
|
float: left;
|
|
}
|
|
|
|
.generatorTitleSmall{
|
|
font-size:16px;
|
|
color : bcbcbc;
|
|
float:left;
|
|
margin-top : 4px;
|
|
}
|
|
|
|
.preview-bg {
|
|
position:relative;
|
|
width:300px;
|
|
font-size:12px;
|
|
text-align:left;
|
|
}
|
|
.preview-bg span{
|
|
padding-left:10px;
|
|
}
|
|
|
|
.preview-swatch-color {
|
|
background:#f5f5f5;
|
|
border:1px solid #e5e5e5;
|
|
cursor:pointer;
|
|
margin-bottom:2px;
|
|
height:18px;
|
|
width:18px;
|
|
float:left;
|
|
}
|
|
|
|
.preview-swatch-image {
|
|
background:#FFFFFF url(../images/image-icon.png) no-repeat center center;
|
|
border:1px solid #e5e5e5;
|
|
cursor:pointer;
|
|
height:18px;
|
|
width:18px;
|
|
}
|
|
|
|
table.generator {
|
|
background-color:#f5f5f5;
|
|
border:1px solid #e5e5e5;
|
|
height:230px;
|
|
width:100%;
|
|
text-align:center;
|
|
}
|
|
|
|
table span {
|
|
cursor:pointer;
|
|
}
|
|
|
|
.current-palette .selected, .preview-bg .selected {
|
|
border-color:#666666;
|
|
-moz-box-shadow:inset 0px 0px 0px 2px #ffffff;
|
|
-webkit-box-shadow:inset 0px 0px 0px 2px #ffffff;
|
|
box-shadow:inset 0px 0px 0px 2px #ffffff;
|
|
}
|
|
|
|
.color-container {
|
|
|
|
float: left;
|
|
height: 50px;
|
|
position: absolute;
|
|
|
|
z-index: 3;
|
|
|
|
}
|
|
|
|
|
|
.current-palette {
|
|
background-color:#efefef;
|
|
|
|
float: right;
|
|
margin: 0 0 0 190px;
|
|
padding: 0 0 4px 5px;
|
|
position: absolute;
|
|
top: 5px;
|
|
width: 145px;
|
|
z-index: 4;
|
|
}
|
|
|
|
.current-palette span {
|
|
-moz-box-shadow:inset 0px 0px 0px 1px #ffffff;
|
|
-webkit-box-shadow:inset 0px 0px 0px 1px #ffffff;
|
|
box-shadow:inset 0px 0px 0px 1px #ffffff;
|
|
cursor:pointer;
|
|
border:1px solid #BFC4CE;
|
|
display:inline-block;
|
|
height:18px;
|
|
position:relative;
|
|
margin:0 4px 3px 0;
|
|
top:4px;
|
|
width:18px;
|
|
}
|
|
|
|
.default-palettes {
|
|
float:left;
|
|
font-size:12px;
|
|
margin:3px 0 0 2px;
|
|
}
|
|
|
|
.default-palettes ul {
|
|
background-color:#FFFFFF;
|
|
border:1px solid #BFC4CE;
|
|
display:none;
|
|
height:200px;
|
|
margin:0 0 0 6px;
|
|
overflow:auto;
|
|
position:absolute;
|
|
width:180px;
|
|
z-index:4;
|
|
}
|
|
|
|
.default-palettes li {
|
|
cursor:pointer;
|
|
padding:8px 0 4px 10px;
|
|
background-color:#F8F8F8;
|
|
border-bottom:1px solid #D8DFEA;
|
|
display:block;
|
|
margin-bottom:1px;
|
|
}
|
|
|
|
.default-palettes li:hover {
|
|
background-color:#FFF8CC;
|
|
border-color:#FFE222;
|
|
}
|
|
|
|
.default-palettes li.selected {
|
|
background-color:#EBECEF;
|
|
border-color:#BFC4CE;
|
|
}
|
|
|
|
.default-palettes li span {
|
|
border:1px solid #BFC4CE;
|
|
display:inline-block;
|
|
height:18px;
|
|
margin-right:4px;
|
|
width:18px;
|
|
top:0;
|
|
}
|
|
|
|
.default-palettes .dropdown{
|
|
float:left;
|
|
padding:0 0 4px 0;
|
|
z-index:4;
|
|
}
|
|
|
|
.default-palettes .dropdown span, .button-bg-option {
|
|
background-color:#FFFFFF;
|
|
border:1px solid #DCDCDC;
|
|
color:#777777;
|
|
cursor:pointer;
|
|
display:block;
|
|
font-weight:bold;
|
|
margin-right:3px;
|
|
padding:2px 9px;
|
|
position:relative;
|
|
top:2px;
|
|
|
|
}
|
|
|
|
|
|
.button-bg-option {
|
|
float:left;
|
|
padding:1px 6px 2px 4px;
|
|
}
|
|
|
|
span.dropdown:hover {
|
|
color:#0F507F;
|
|
}
|
|
|
|
.color-picker {
|
|
clear: both;
|
|
display: none;
|
|
position: relative;
|
|
top: 7px;
|
|
z-index: 8;
|
|
}
|
|
|
|
.colorpicker {
|
|
z-index:3;
|
|
}
|
|
|
|
|
|
.hightlightTxt{
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
textarea {
|
|
height:500px;
|
|
white-space: pre;
|
|
word-wrap: normal;
|
|
overflow-x:hidden;
|
|
}
|
|
|
|
input.input {
|
|
-moz-border-radius:5px;
|
|
-webkit-border-radius:5px;
|
|
border-radius:5px;
|
|
background-color:#fcfcfc;
|
|
border-color:#bbbbbb #dddddd #eeeeee;
|
|
border-style:solid;
|
|
border-width:1px;
|
|
color:#444;
|
|
font-family:arial;
|
|
font-size:13px;
|
|
letter-spacing:1px;
|
|
margin:0 0 5px 0;
|
|
padding:2px 8px;
|
|
width:145px;
|
|
}
|
|
|
|
select {
|
|
-moz-border-radius:5px;
|
|
-webkit-border-radius:5px;
|
|
border-radius:5px;
|
|
background-color:#fcfcfc;
|
|
border-color:#bbbbbb #dddddd #eeeeee;
|
|
border-style:solid;
|
|
border-width:1px;
|
|
color:#444;
|
|
font-family:arial;
|
|
font-size:11px;
|
|
letter-spacing:1px;
|
|
margin:0 0 14px 0;
|
|
padding:2px;
|
|
width:163px;
|
|
}
|
|
|
|
textarea:focus, input.input:focus, select:focus {
|
|
background-color:#efefef;
|
|
border-color:#cccccc;
|
|
}
|
|
/* End of Preview Area */
|
|
|
|
/* Settings - Right Column */
|
|
.settings {
|
|
-moz-border-radius:8px 8px 8px 8px;
|
|
-webkit-border-radius:8px 8px 8px 8px;
|
|
border-radius:8px 8px 8px 8px;
|
|
background-color:#FFFFFF;
|
|
border:1px solid #E1E1E1;
|
|
float:right;
|
|
height: 840px;
|
|
padding: 25px 10px 12px;
|
|
width: 385px;
|
|
}
|
|
|
|
.setting-container {
|
|
float:left;
|
|
width:50%;
|
|
}
|
|
|
|
.settings label {
|
|
font-size:11px;
|
|
}
|
|
|
|
.setting-slider, .setting-shadow, .setting-shadow-blur {
|
|
left: 80px;
|
|
top:3px;
|
|
margin: 13px 0 18px;
|
|
width: 160px;
|
|
}
|
|
|
|
.setting-input{
|
|
border: 0 none;
|
|
background:none;
|
|
color: #ff8000;
|
|
font-family: arial;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
margin: 2px 0 0 2px;
|
|
position: absolute;
|
|
width: 40px;
|
|
*margin:0; /*ie7 hack*/
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
height:13px;
|
|
margin:0 2px 0 0;
|
|
padding:0;
|
|
position:relative;
|
|
top:2px;
|
|
width:13px;
|
|
*top:-1px; /*ie7 hack*/
|
|
}
|
|
|
|
.mini-button {
|
|
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
|
|
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
|
|
background:filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
|
|
-moz-border-radius:4px;
|
|
-webkit-border-radius:4px;
|
|
border-radius:4px;
|
|
border:1px solid #dcdcdc;
|
|
color:#777777;
|
|
cursor:pointer;
|
|
display:inline-block;
|
|
top:1px;
|
|
padding:0 1px 0 3px;
|
|
position:relative;
|
|
text-shadow:1px 1px 0px #ffffff;
|
|
*top:-14px; /*ie7 hack*/
|
|
}
|
|
|
|
.mini-button input {
|
|
cursor:pointer;
|
|
margin:0 -2px 0 0;
|
|
top:1px;
|
|
*top:-2px; /*ie7 hack*/
|
|
}
|
|
|
|
.mini-button label {
|
|
cursor:pointer;
|
|
font-size:15px !important;
|
|
font-weight:bold;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
.setting-title {
|
|
-moz-border-radius:6px;
|
|
-webkit-border-radius:6px;
|
|
border-radius:6px;
|
|
background-color:#EEEEEE;
|
|
font-size:12px;
|
|
font-weight:bold;
|
|
margin:10px 0 20px 15px;
|
|
padding:5px 10px;
|
|
width:336px;
|
|
}
|
|
/* End of Settings*/
|
|
|
|
.unavailable {
|
|
border-color:#FF0000 !important;
|
|
color:#FF0F0F !important;
|
|
}
|
|
|
|
.clear {
|
|
font-size:1px;
|
|
line-height:0;
|
|
display:block;
|
|
clear:both;
|
|
height:0;
|
|
}
|
|
|
|
.refresh-add{
|
|
height:60px;
|
|
|
|
}
|
|
.refresh-add .refresh{
|
|
cursor: pointer;
|
|
float: left;
|
|
height: 20px;
|
|
margin-top: 29px;
|
|
position: relative;
|
|
width: 20px;
|
|
background-image:url('../images/undo-icon.png');
|
|
background-repeat:no-repeat;
|
|
background-position:1px 3px;
|
|
} |