finished color tools
Mark MacKay
parent
db7e059c7b
commit
7dae1838b9
|
|
@ -1,26 +1,252 @@
|
|||
.jPicker .Icon{display:inline-block;height:24px;position:relative;text-align:left;width:25px}.jPicker .Icon span.Color,.jPicker .Icon span.Alpha{background-position:2px 2px;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker .Icon span.Image{background-repeat:no-repeat;cursor:pointer;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker.Container{z-index:10}
|
||||
|
||||
table.jPicker{width:545px; z-index:20;}
|
||||
.jPicker .Move{background-color:#ddd;border-color:#fff #666 #666 #fff;border-style:solid;border-width:1px;cursor:move;height:12px;padding:0}
|
||||
.jPicker .Title{display: none;}
|
||||
.jPicker div.Map{
|
||||
border: solid #000 1px;
|
||||
cursor:crosshair;
|
||||
height:260px;
|
||||
margin:0;
|
||||
overflow:hidden;
|
||||
padding:0;
|
||||
position:relative;
|
||||
width:260px;
|
||||
}.jPicker div[class="Map"]{height:256px;width:256px}
|
||||
.jPicker div.Bar{border: solid #000 1px; cursor:n-resize;height:260px;margin:0 20px 0 0;overflow:hidden;padding:0;position:relative;width:24px}.jPicker div[class="Bar"]{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3,.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4,.jPicker .Bar .Map5,.jPicker .Bar .Map6{background-color:transparent;background-image:none;display:block;left:0;position:absolute;top:0}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3{height:2596px;width:256px}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{height:3896px;width:20px}.jPicker .Bar .Map5,.jPicker .Bar .Map6{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Bar .Map6{background-repeat:no-repeat}.jPicker .Map .Map3,.jPicker .Bar .Map5{background-repeat:repeat}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{background-repeat:repeat-x}.jPicker .Map .Arrow{display:block;position:absolute}.jPicker .Bar .Arrow{display:block;left:0;position:absolute}.jPicker .Preview{font-size:9px;text-align:center}
|
||||
.jPicker .Preview div.bgt {height:62px;margin:0 auto;padding:0;width:62px;}
|
||||
|
||||
.jPicker .Preview div span{border:1px solid #000;display:block;height:30px;margin:0 auto;padding:0;width:60px}.jPicker .Preview .Active{border-bottom-width:0}.jPicker .Preview .Current{border-top-width:0;cursor:pointer}.jPicker .Button{text-align:center;width:115px}.jPicker .Button input{width:100px}.jPicker .Button .Ok{margin:12px 0 5px 0}.jPicker td.Radio{margin:0;padding:0;width:31px}.jPicker td.Radio input{margin:0 5px 0 0;padding:0}.jPicker td.Text{font-size:12px!important;height:22px;margin:0;padding:0;text-align:left;width:70px}.jPicker tr.Hex td.Text{width:100px}.jPicker td.Text input{background-color:#fff;border:1px inset #aaa;height:19px;margin:0 0 0 5px;text-align:left;width:30px}.jPicker td[class="Text"] input{height:15px}.jPicker tr.Hex td.Text input.Hex{width:50px}.jPicker tr.Hex td.Text input.AHex{width:20px}.jPicker .Grid{text-align:center;width:114px}.jPicker .Grid span.QuickColor{border:1px inset #aaa;cursor:pointer;display:inline-block;height:15px;line-height:15px;margin:0;padding:0;width:19px}.jPicker .Grid span[class="QuickColor"]{width:17px}
|
||||
.jPicker td {
|
||||
vertical-align: top;
|
||||
#svg_editor .jPicker .Icon {
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
width: 25px;
|
||||
}
|
||||
#svg_editor .jPicker .Icon span.Color, #svg_editor .jPicker .Icon span.Alpha {
|
||||
background-position: 2px 2px;
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%}
|
||||
#svg_editor .jPicker .Icon span.Image {
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%}
|
||||
#svg_editor .jPicker.Container {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.jPicker .prev_div {
|
||||
margin-top: -15px;
|
||||
table#svg_editor .jPicker {
|
||||
width: 545px;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
#svg_editor .jPicker .Move {
|
||||
background-color: #ddd;
|
||||
border-color: #fff #666 #666 #fff;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
cursor: move;
|
||||
height: 12px;
|
||||
padding: 0;
|
||||
}
|
||||
#svg_editor .jPicker .Title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#svg_editor .jPicker div.Map {
|
||||
|
||||
border: solid #000 1px;
|
||||
|
||||
cursor: crosshair;
|
||||
|
||||
height: 260px;
|
||||
|
||||
margin: 0;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
padding: 0;
|
||||
|
||||
position: relative;
|
||||
|
||||
width: 260px;
|
||||
|
||||
}
|
||||
#svg_editor .jPicker div[class="Map"] {
|
||||
height: 256px;
|
||||
width: 256px;
|
||||
}
|
||||
#svg_editor .jPicker div.Bar {
|
||||
border: solid #000 1px;
|
||||
cursor: n-resize;
|
||||
height: 260px;
|
||||
margin: 0 15px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 24px;
|
||||
}
|
||||
#svg_editor .jPicker div[class="Bar"] {
|
||||
height: 256px;
|
||||
width: 20px;
|
||||
}
|
||||
#svg_editor .jPicker .Map .Map1, #svg_editor .jPicker .Map .Map2, #svg_editor .jPicker .Map .Map3, #svg_editor .jPicker .Bar .Map1, #svg_editor .jPicker .Bar .Map2, #svg_editor .jPicker .Bar .Map3, #svg_editor .jPicker .Bar .Map4, #svg_editor .jPicker .Bar .Map5, #svg_editor .jPicker .Bar .Map6 {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
display: block;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
#svg_editor .jPicker .Map .Map1, #svg_editor .jPicker .Map .Map2, #svg_editor .jPicker .Map .Map3 {
|
||||
height: 2596px;
|
||||
width: 256px;
|
||||
}
|
||||
#svg_editor .jPicker .Bar .Map1, #svg_editor .jPicker .Bar .Map2, #svg_editor .jPicker .Bar .Map3, #svg_editor .jPicker .Bar .Map4 {
|
||||
height: 3896px;
|
||||
width: 20px;
|
||||
}
|
||||
#svg_editor .jPicker .Bar .Map5, #svg_editor .jPicker .Bar .Map6 {
|
||||
height: 256px;
|
||||
width: 20px;
|
||||
}
|
||||
#svg_editor .jPicker .Map .Map1, #svg_editor .jPicker .Map .Map2, #svg_editor .jPicker .Bar .Map6 {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
#svg_editor .jPicker .Map .Map3, #svg_editor .jPicker .Bar .Map5 {
|
||||
background-repeat: repeat;
|
||||
}
|
||||
#svg_editor .jPicker .Bar .Map1, #svg_editor .jPicker .Bar .Map2, #svg_editor .jPicker .Bar .Map3, #svg_editor .jPicker .Bar .Map4 {
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
#svg_editor .jPicker .Map .Arrow {
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
#svg_editor .jPicker .Bar .Arrow {
|
||||
display: block;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
#svg_editor .jPicker .Preview {
|
||||
font-size: 9px;
|
||||
text-align: center;
|
||||
}
|
||||
#svg_editor .jPicker .Preview div.bgt {
|
||||
height: 62px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
width: 62px;
|
||||
}
|
||||
|
||||
|
||||
#svg_editor .jPicker .Preview div span {
|
||||
border: 1px solid #000;
|
||||
display: block;
|
||||
height: 30px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
width: 60px;
|
||||
}
|
||||
#svg_editor .jPicker .Preview .Active {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
#svg_editor .jPicker .Preview .Current {
|
||||
border-top-width: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
#svg_editor .jPicker .Button {
|
||||
text-align: center;
|
||||
width: 115px;
|
||||
}
|
||||
#svg_editor .jPicker .Button input {
|
||||
width: 100px;
|
||||
}
|
||||
#svg_editor .jPicker .Button .Ok {
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
#svg_editor .jPicker td.Radio {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 31px;
|
||||
}
|
||||
#svg_editor .jPicker td.Radio input {
|
||||
margin: 0 5px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
#svg_editor .jPicker td.Text {
|
||||
font-size: 12px!important;
|
||||
height: 22px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
width: 70px;
|
||||
}
|
||||
#svg_editor .jPicker tr.Hex td.Text {
|
||||
width: 100px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#svg_editor .jPicker tr.Hex td.Text span {
|
||||
width: 100px;
|
||||
color: #333;
|
||||
}
|
||||
#svg_editor .jPicker td.Text input {
|
||||
background-color: #fff;
|
||||
border: 1px inset #aaa;
|
||||
height: 15px;
|
||||
margin: 0 0 0 5px;
|
||||
text-align: left;
|
||||
width: 30px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#svg_editor #color_picker .jPicker tr.Hex td.Text input.Hex {
|
||||
width: 50px;
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
|
||||
#svg_editor .jPicker tr.Hex td.Text input.AHex {
|
||||
width: 20px;
|
||||
display: none;
|
||||
}
|
||||
#svg_editor .jPicker .Grid {
|
||||
text-align: center;
|
||||
float: right;
|
||||
width: 108px;
|
||||
}
|
||||
#svg_editor .jPicker .Grid span.QuickColor {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 15px;
|
||||
line-height: 15px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 18px;
|
||||
}
|
||||
#svg_editor .jPicker td {
|
||||
vertical-align: top;
|
||||
}
|
||||
#svg_editor .jPicker td.colorsquare {
|
||||
width: 275px;
|
||||
}
|
||||
|
||||
#svg_editor .jPicker .prev_div {
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
#svg_editor .jPicker .actions {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
#svg_editor .jPicker .actions .Ok{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
#svg_editor .jPicker .actions .Cancel{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#svg_editor .jPicker .color_preview {
|
||||
width: 62px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -10,64 +10,51 @@
|
|||
* Licensed under the Apache License Version 2
|
||||
*/
|
||||
|
||||
h2.jGraduate_Title {
|
||||
font-family: Arial, Helvetica, Sans-Serif;
|
||||
font-size: 11px !important;
|
||||
font-weight: bold;
|
||||
margin: -13px 0px 0px 0px;
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
#svg_editor h2.jGraduate_Title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.jGraduate_Picker {
|
||||
#svg_editor .jGraduate_Picker {
|
||||
position: absolute;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.jGraduate_tabs li {
|
||||
#svg_editor .jGraduate_tabs li {
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li.jGraduate_tab_current {
|
||||
#svg_editor li.jGraduate_tab_current {
|
||||
background: #fff;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.jGraduate_colPick {
|
||||
#svg_editor .jGraduate_colPick {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.jGraduate_gradPick {
|
||||
#svg_editor .jGraduate_gradPick {
|
||||
display: none;
|
||||
border: outset 1px #666;
|
||||
padding: 10px 7px 5px 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.jGraduate_gradPick {
|
||||
display: none;
|
||||
border: outset 1px #666;
|
||||
padding: 10px 7px 5px 5px;
|
||||
overflow: auto;
|
||||
overflow: visible;
|
||||
/* position: relative;*/
|
||||
}
|
||||
|
||||
.jGraduate_tabs {
|
||||
#svg_editor .jGraduate_tabs {
|
||||
position: relative;
|
||||
background-color: #ddd;
|
||||
padding: 10px 10px 0 10px;
|
||||
margin: -20px -20px 20px -20px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
div.jGraduate_Swatch {
|
||||
#svg_editor div.jGraduate_Swatch {
|
||||
float: left;
|
||||
margin: 8px;
|
||||
margin: 0 15px 0 0;
|
||||
}
|
||||
div.jGraduate_GradContainer {
|
||||
border: 2px inset #EEE;
|
||||
#svg_editor div.jGraduate_GradContainer {
|
||||
border: solid #000 1px;
|
||||
background-image: url(../images/map-opacity.png);
|
||||
background-position: 0px 0px;
|
||||
height: 256px;
|
||||
|
|
@ -75,34 +62,34 @@ div.jGraduate_GradContainer {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
div.jGraduate_GradContainer div.grad_coord {
|
||||
background: #000;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
margin: -5px -5px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
font-size: xx-small;
|
||||
line-height: 10px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
#svg_editor div.jGraduate_GradContainer div.grad_coord {
|
||||
background: rgba(0,0,0,0.8);
|
||||
border: 2px solid white;
|
||||
border-radius: 15px;
|
||||
-moz-border-radius: 5px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
margin: -7px -7px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
font-size: 8px;
|
||||
line-height: 14px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.jGraduate_AlphaArrows {
|
||||
#svg_editor .jGraduate_AlphaArrows {
|
||||
position: absolute;
|
||||
margin-top: -10px;
|
||||
margin-left: 250.5px;
|
||||
}
|
||||
|
||||
div.jGraduate_Opacity {
|
||||
#svg_editor div.jGraduate_Opacity {
|
||||
border: 2px inset #eee;
|
||||
margin-top: 14px;
|
||||
background-color: black;
|
||||
|
|
@ -112,35 +99,33 @@ div.jGraduate_Opacity {
|
|||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
div.jGraduate_StopSlider {
|
||||
/* border: 2px inset #eee;*/
|
||||
margin: 0 0 0 -10px;
|
||||
#svg_editor div.jGraduate_StopSlider {
|
||||
margin: -10px 0 0 -10px;
|
||||
width: 276px;
|
||||
overflow: visible;
|
||||
background: #efefef;
|
||||
background: white;
|
||||
height: 45px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.jGraduate_StopSection {
|
||||
#svg_editor div.jGraduate_StopSection {
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#svg_editor div.jGraduate_StopSection.jGraduate_SpreadMethod {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input.jGraduate_Ok, input.jGraduate_Cancel {
|
||||
#svg_editor input.jGraduate_Ok, input.jGraduate_Cancel {
|
||||
display: block;
|
||||
width: 100px;
|
||||
margin-left: -4px;
|
||||
margin-right: -4px;
|
||||
}
|
||||
input.jGraduate_Ok {
|
||||
margin: 9px -4px 5px -4px;
|
||||
#svg_editor input.jGraduate_Ok {
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.colorBox {
|
||||
#svg_editor .colorBox {
|
||||
float: left;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
|
@ -149,43 +134,42 @@ input.jGraduate_Ok {
|
|||
margin: 4px 4px 4px 30px;
|
||||
}
|
||||
|
||||
.colorBox + label {
|
||||
#svg_editor .colorBox + label {
|
||||
float: left;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
label.jGraduate_Form_Heading {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
background-color: #EFEFEF;
|
||||
#svg_editor label.jGraduate_Form_Heading {
|
||||
|
||||
color: #333;
|
||||
padding: 2px;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
div.jGraduate_Form_Section {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: grey;
|
||||
#svg_editor div.jGraduate_Form_Section {
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
padding: 15px 5px 5px 5px;
|
||||
margin: 5px 2px;
|
||||
width: 110px;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
overflow: auto;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
div.jGraduate_Form_Section label {
|
||||
#svg_editor div.jGraduate_Form label {
|
||||
padding: 0 2px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
div.jGraduate_StopSection input[type=text],
|
||||
div.jGraduate_Slider input[type=text] {
|
||||
#svg_editor div.jGraduate_StopSection input[type=text],
|
||||
#svg_editor div.jGraduate_Slider input[type=text] {
|
||||
width: 33px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
div.jGraduate_LightBox {
|
||||
#svg_editor div.jGraduate_LightBox {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
|
@ -196,143 +180,158 @@ div.jGraduate_LightBox {
|
|||
display: none;
|
||||
}
|
||||
|
||||
div.jGraduate_stopPicker {
|
||||
#svg_editor div.jGraduate_stopPicker {
|
||||
position: absolute;
|
||||
display: none;
|
||||
background:
|
||||
white;
|
||||
padding: 20px;
|
||||
border-radius: 3px;
|
||||
width: 530px;
|
||||
height: 300px;
|
||||
box-shadow: 0 5px 25px
|
||||
black;
|
||||
}
|
||||
|
||||
|
||||
#svg_editor .jGraduate_gradPick {
|
||||
width: 526px;
|
||||
}
|
||||
|
||||
#svg_editor .jGraduate_gradPick div.jGraduate_Slider {
|
||||
line-height: 160%
|
||||
}
|
||||
|
||||
#svg_editor .jGraduate_gradPick div.jGraduate_Slider label:last-child {
|
||||
position: absolute;
|
||||
display: none;
|
||||
background: #E8E8E8;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.jGraduate_gradPick {
|
||||
width: 535px;
|
||||
#svg_editor .jGraduate_gradPick div.jGraduate_Slider label:last-child input {
|
||||
margin: 0 3px 0 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.jGraduate_gradPick div.jGraduate_OpacField {
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 5px;
|
||||
/*
|
||||
width: 270px;
|
||||
|
||||
left: 284px;
|
||||
width: 266px;
|
||||
height: 200px;
|
||||
top: 167px;
|
||||
margin: -3px 3px 0px 4px;
|
||||
*/
|
||||
}
|
||||
|
||||
.jGraduate_gradPick .jGraduate_Form {
|
||||
#svg_editor .jGraduate_gradPick .jGraduate_Form {
|
||||
float: left;
|
||||
width: 270px;
|
||||
position: absolute;
|
||||
left: 284px;
|
||||
width: 266px;
|
||||
height: 200px;
|
||||
top: 167px;
|
||||
top: 195px;
|
||||
margin: -3px 3px 0px 10px;
|
||||
line-height: 200%;
|
||||
}
|
||||
|
||||
.jGraduate_gradPick .jGraduate_Points {
|
||||
#svg_editor .jGraduate_gradPick .jGraduate_Form label,
|
||||
#svg_editor .jGraduate_gradPick .jGraduate_Form input {
|
||||
width: auto;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#svg_editor .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field label, #svg_editor .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field input {
|
||||
width: auto;
|
||||
float: left;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#svg_editor .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field #color_picker_jGraduate_match_ctr {
|
||||
float: none;
|
||||
}
|
||||
|
||||
#svg_editor .jGraduate_gradPick .jGraduate_Form label {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
#svg_editor .jGraduate_gradPick .jGraduate_Points {
|
||||
position: static;
|
||||
width: 150px;
|
||||
margin-left: 0;
|
||||
}
|
||||
float: left;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.jGraduate_SpreadMethod {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
.jGraduate_Colorblocks {
|
||||
#svg_editor .jGraduate_Colorblocks {
|
||||
display: table;
|
||||
border-spacing: 0 5px;
|
||||
}
|
||||
|
||||
.jGraduate_colorblock {
|
||||
#svg_editor .jGraduate_colorblock {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.jGraduate_Colorblocks .jGraduate_colorblock > * {
|
||||
#svg_editor .jGraduate_Colorblocks .jGraduate_colorblock > * {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.jGraduate_gradPick div.jGraduate_StopSection {
|
||||
float: left;
|
||||
width: 133px;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
|
||||
.jGraduate_gradPick .jGraduate_Form_Section {
|
||||
#svg_editor .jGraduate_gradPick .jGraduate_Form_Section {
|
||||
padding-top: 9px;
|
||||
}
|
||||
|
||||
|
||||
.jGraduate_Slider {
|
||||
#svg_editor .jGraduate_Slider {
|
||||
text-align: center;
|
||||
float: left;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.jGraduate_Slider .jGraduate_Form_Section {
|
||||
#svg_editor .jGraduate_Slider .jGraduate_Form_Section {
|
||||
border: none;
|
||||
width: 250px;
|
||||
padding: 0 2px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.jGraduate_Slider label {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
line-height: 50px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.jGraduate_Slider label.prelabel {
|
||||
#svg_editor .jGraduate_Slider label.prelabel {
|
||||
width: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.jGraduate_SliderBar {
|
||||
#svg_editor .jGraduate_SliderBar {
|
||||
width: 140px;
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
margin: 0 5px;
|
||||
border:1px solid #BBB;
|
||||
height:20px;
|
||||
margin-top:14px;
|
||||
margin-left:5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.jGraduate_Slider input {
|
||||
#svg_editor div.jGraduate_Slider input {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
div.jGraduate_Slider img {
|
||||
#svg_editor div.jGraduate_Slider img {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
margin-top: -10px;
|
||||
cursor:ew-resize;
|
||||
}
|
||||
|
||||
|
||||
.jGraduate_gradPick .jGraduate_OkCancel {
|
||||
position: absolute;
|
||||
top: 39px;
|
||||
right: 10px;
|
||||
width: 113px;
|
||||
#svg_editor .jGraduate_gradPick .jGraduate_OkCancel {
|
||||
|
||||
}
|
||||
|
||||
.jGraduate_OpacField {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
bottom: 0;
|
||||
}
|
||||
#svg_editor .jPicker .Button .Ok, #svg_editor .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Ok {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
#svg_editor .jPicker .Button .Cancel, #svg_editor .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 93 B After Width: | Height: | Size: 140 B |
File diff suppressed because one or more lines are too long
|
|
@ -293,7 +293,7 @@ jQuery.fn.jGraduate =
|
|||
'<div id="' + id + '_jGraduate_Angle" class="jGraduate_SliderBar jGraduate_Angle" title="Click to set Angle">' +
|
||||
'<img id="' + id + '_jGraduate_AngleArrows" class="jGraduate_AngleArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif">' +
|
||||
'</div>' +
|
||||
'<label><input type="text" id="' + id + '_jGraduate_AngleInput" size="3" value="0"/>deg</label>' +
|
||||
'<label><input type="text" id="' + id + '_jGraduate_AngleInput" size="3" value="0"/>º </label>' +
|
||||
'</div>' +
|
||||
'<div class="jGraduate_Slider jGraduate_OpacField">' +
|
||||
'<label class="prelabel">Opac:</label>' +
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ b+'_jGraduate_y2" size="3" title="Enter ending y value between 0.0 and 1.0"/></d
|
|||
b+'_jGraduate_match_ctr"/></label><br/><label>x:</label><input type="text" id="'+b+'_jGraduate_fx" size="3" title="Enter x value between 0.0 and 1.0"/><label> y:</label><input type="text" id="'+b+'_jGraduate_fy" size="3" title="Enter y value between 0.0 and 1.0"/></div></div></div><div class="jGraduate_StopSection jGraduate_SpreadMethod"><label class="jGraduate_Form_Heading">Spread method</label><div class="jGraduate_Form_Section"><select class="jGraduate_spreadMethod"><option value=pad selected>Pad</option><option value=reflect>Reflect</option><option value=repeat>Repeat</option></select></div></div><div class="jGraduate_Form"><div class="jGraduate_Slider jGraduate_RadiusField jGraduate_rg_field"><label class="prelabel">Radius:</label><div id="'+
|
||||
b+'_jGraduate_Radius" class="jGraduate_SliderBar jGraduate_Radius" title="Click to set radius"><img id="'+b+'_jGraduate_RadiusArrows" class="jGraduate_RadiusArrows" src="'+o.images.clientPath+'rangearrows2.gif"></div><label><input type="text" id="'+b+'_jGraduate_RadiusInput" size="3" value="100"/>%</label></div><div class="jGraduate_Slider jGraduate_EllipField jGraduate_rg_field"><label class="prelabel">Ellip:</label><div id="'+b+'_jGraduate_Ellip" class="jGraduate_SliderBar jGraduate_Ellip" title="Click to set Ellip"><img id="'+
|
||||
b+'_jGraduate_EllipArrows" class="jGraduate_EllipArrows" src="'+o.images.clientPath+'rangearrows2.gif"></div><label><input type="text" id="'+b+'_jGraduate_EllipInput" size="3" value="0"/>%</label></div><div class="jGraduate_Slider jGraduate_AngleField jGraduate_rg_field"><label class="prelabel">Angle:</label><div id="'+b+'_jGraduate_Angle" class="jGraduate_SliderBar jGraduate_Angle" title="Click to set Angle"><img id="'+b+'_jGraduate_AngleArrows" class="jGraduate_AngleArrows" src="'+o.images.clientPath+
|
||||
'rangearrows2.gif"></div><label><input type="text" id="'+b+'_jGraduate_AngleInput" size="3" value="0"/>deg</label></div><div class="jGraduate_Slider jGraduate_OpacField"><label class="prelabel">Opac:</label><div id="'+b+'_jGraduate_Opac" class="jGraduate_SliderBar jGraduate_Opac" title="Click to set Opac"><img id="'+b+'_jGraduate_OpacArrows" class="jGraduate_OpacArrows" src="'+o.images.clientPath+'rangearrows2.gif"></div><label><input type="text" id="'+b+'_jGraduate_OpacInput" size="3" value="100"/>%</label></div></div><div class="jGraduate_OkCancel"><input type="button" id="'+
|
||||
'rangearrows2.gif"></div><label><input type="text" id="'+b+'_jGraduate_AngleInput" size="3" value="0"/>º </label></div><div class="jGraduate_Slider jGraduate_OpacField"><label class="prelabel">Opac:</label><div id="'+b+'_jGraduate_Opac" class="jGraduate_SliderBar jGraduate_Opac" title="Click to set Opac"><img id="'+b+'_jGraduate_OpacArrows" class="jGraduate_OpacArrows" src="'+o.images.clientPath+'rangearrows2.gif"></div><label><input type="text" id="'+b+'_jGraduate_OpacInput" size="3" value="100"/>%</label></div></div><div class="jGraduate_OkCancel"><input type="button" id="'+
|
||||
b+'_jGraduate_Ok" class="jGraduate_Ok" value="OK"/><input type="button" id="'+b+'_jGraduate_Cancel" class="jGraduate_Cancel" value="Cancel"/></div>');var j=256,oa=j-0,pa=j-0,p,g,aa,q={};$(".jGraduate_SliderBar").width(145);var x=$("#"+b+"_jGraduate_GradContainer")[0],m=r("svg",{id:b+"_jgraduate_svg",width:j,height:j,xmlns:A.svg},x);p=p||e.paint.type;var v=g=e.paint[p],U=e.paint.alpha,ba=p==="solidColor";switch(p){case "solidColor":case "linearGradient":if(!ba){g.id=b+"_lg_jgraduate_grad";v=g=m.appendChild(g)}r("radialGradient",
|
||||
{id:b+"_rg_jgraduate_grad"},m);if(p==="linearGradient")break;case "radialGradient":if(!ba){g.id=b+"_rg_jgraduate_grad";v=g=m.appendChild(g)}r("linearGradient",{id:b+"_lg_jgraduate_grad"},m)}if(ba){v=g=$("#"+b+"_lg_jgraduate_grad")[0];u=e.paint[p];t(0,"#"+u,1);var K=typeof o.newstop;if(K==="string")switch(o.newstop){case "same":t(1,"#"+u,1);break;case "inverse":K="";for(var y=0;y<6;y+=2){u.substr(y,2);var P=(255-parseInt(u.substr(y,2),16)).toString(16);if(P.length<2)P=0+P;K+=P}t(1,"#"+K,1);break;case "white":t(1,
|
||||
"#ffffff",1);break;case "black":t(1,"#000000",1)}else if(K==="object")t(1,o.newstop.color||"#"+u,"opac"in o.newstop?o.newstop.opac:1)}u=parseFloat(v.getAttribute("x1")||0);K=parseFloat(v.getAttribute("y1")||0);y=parseFloat(v.getAttribute("x2")||1);P=parseFloat(v.getAttribute("y2")||0);var ca=parseFloat(v.getAttribute("cx")||0.5),da=parseFloat(v.getAttribute("cy")||0.5),qa=parseFloat(v.getAttribute("fx")||ca),ra=parseFloat(v.getAttribute("fy")||da);aa=r("rect",{id:b+"_jgraduate_rect",x:0,y:0,width:oa,
|
||||
|
|
|
|||
|
|
@ -206,18 +206,18 @@ html, body {
|
|||
|
||||
#rulers > div {
|
||||
position: absolute;
|
||||
background: #444;
|
||||
background: #2f2f2c;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: none;
|
||||
}
|
||||
|
||||
#rulers #ruler_corner {
|
||||
top: 30px;
|
||||
left: 50px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
border-right: solid #2f2f2c 1px;
|
||||
border-bottom: solid #2f2f2c 1px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: solid #444 1px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
|
@ -226,8 +226,22 @@ html, body {
|
|||
top: 30px;
|
||||
left: 66px;
|
||||
right: 200px;
|
||||
border-top: solid #444 2px;
|
||||
box-shadow: 0 5px 5px rgba(0,0,0,0.1);
|
||||
border-top: solid #444 1px;
|
||||
border-right: solid #444 1px;
|
||||
}
|
||||
|
||||
#ruler_x_cursor {
|
||||
height: 15px;
|
||||
border-right: dotted #999 1px;
|
||||
position: absolute;
|
||||
background: #2f2f2c;
|
||||
}
|
||||
|
||||
#ruler_y_cursor {
|
||||
width: 15px;
|
||||
border-top: dotted #999 1px;
|
||||
position: absolute;
|
||||
background: #2f2f2c;
|
||||
}
|
||||
|
||||
#rulers.moved #ruler_corner,
|
||||
|
|
@ -240,8 +254,8 @@ html, body {
|
|||
top: 46px;
|
||||
left: 50px;
|
||||
bottom: 40px;
|
||||
border-left: solid #444 2px;
|
||||
box-shadow: 5px 0 5px rgba(0,0,0,0.1);
|
||||
border-left: solid #444 1px;
|
||||
border-bottom: solid #444 1px;
|
||||
}
|
||||
|
||||
#rulers.moved #ruler_y {
|
||||
|
|
@ -679,7 +693,7 @@ input[type=number]::-webkit-outer-spin-button {
|
|||
#svg_editor input[type=text].wide, #svg_editor input[type=number].wide {width: 110px;}
|
||||
#svg_editor input[type=text].tuco, #svg_editor input[type=number].tuco {width: 150px;}
|
||||
|
||||
#svg_editor input[type=submit], button {
|
||||
#svg_editor input[type=submit], #svg_editor input[type=button], button {
|
||||
background: #2C7BB3;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
|
|
@ -869,20 +883,40 @@ span.zoom_tool img {
|
|||
.dropup ul {
|
||||
top: auto;
|
||||
bottom: 26px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 5px 10px #000;
|
||||
}
|
||||
|
||||
.dropup ul:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
right: 50%;
|
||||
top: auto;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: solid transparent 5px;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
|
||||
.dropdown li {
|
||||
display: block;
|
||||
width: 120px;
|
||||
padding: 4px;
|
||||
background: #E8E8E8;
|
||||
border: 1px solid #B0B0B0;
|
||||
margin: 0 0 -1px 0;
|
||||
padding: 5px 10px;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
margin: 0;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.dropdown li:first-child {border-radius: 3px 3px 0 0;}
|
||||
.dropdown li:last-child {border-radius: 0 0 3px 3px;}
|
||||
|
||||
|
||||
.dropdown li:hover {
|
||||
background-color: #FFC;
|
||||
background-color: #ddd;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.dropdown li.special {
|
||||
|
|
@ -1514,9 +1548,10 @@ span.zoom_tool img {
|
|||
font-size: 15px;
|
||||
}
|
||||
|
||||
button.cancel {
|
||||
#svg_editor button.cancel, #svg_editor input.Cancel, #svg_editor input.cancel, #svg_editor input.jGraduate_Cancel {
|
||||
background-color: #999;
|
||||
box-shadow: 0 0 1px rgba(0,0,0,0.5);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#svg_docprops button:first-child,
|
||||
|
|
@ -1900,4 +1935,4 @@ button.cancel {
|
|||
/* For IE 6/7 (trigger hasLayout) */
|
||||
.clearfix {
|
||||
*zoom:1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,11 +77,13 @@ $(function(){
|
|||
<div id="rulers">
|
||||
<div id="ruler_corner"></div>
|
||||
<div id="ruler_x">
|
||||
<div id="ruler_x_cursor"></div>
|
||||
<div>
|
||||
<canvas height="15"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ruler_y">
|
||||
<div id="ruler_y_cursor"></div>
|
||||
<div>
|
||||
<canvas width="15"></canvas>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -410,7 +410,7 @@
|
|||
|
||||
'#rwidthLabel, #iwidthLabel':'width',
|
||||
'#rheightLabel, #iheightLabel':'height',
|
||||
'#cornerRadiusLabel span':'c_radius',
|
||||
//'#cornerRadiusLabel span':'c_radius',
|
||||
'#angleLabel':'angle',
|
||||
'#linkLabel,#tool_make_link,#tool_make_link_multi':'globe_link',
|
||||
'#zoomLabel':'zoom',
|
||||
|
|
@ -2065,22 +2065,27 @@
|
|||
|
||||
//menu handling
|
||||
var menus = $('.menu');
|
||||
var blink = function(e) {
|
||||
var blinker = function(e) {
|
||||
e.target.style.background = "#fff";
|
||||
setTimeout(function(){e.target.style.background = "#ddd";}, 50);
|
||||
setTimeout(function(){e.target.style.background = "#fff";}, 150);
|
||||
setTimeout(function(){e.target.style.background = "#ddd";}, 200);
|
||||
setTimeout(function(){e.target.style.background = "";}, 200);
|
||||
setTimeout(closer, 220);
|
||||
setTimeout(function(){$('#menu_bar').removeClass('active')}, 220);
|
||||
return false;
|
||||
}
|
||||
var closer = function(e){
|
||||
if (!$(e.target).hasClass("menu_title") && $('#menu_bar').hasClass("active")) {
|
||||
if(!$(e.target).hasClass("disabled") && $(e.target).hasClass("menu_item")) {
|
||||
blinker(e);
|
||||
return;
|
||||
}
|
||||
$('#menu_bar').removeClass('active')
|
||||
$('.tools_flyout').hide();
|
||||
$('input').blur();
|
||||
}
|
||||
}
|
||||
$('.menu_item').live('click', blink);
|
||||
$('.menu_item').live('click', function(e){blinker(e)});
|
||||
$("svg, body").on('click', function(e){closer(e)});
|
||||
$('.menu_title').on('click', function() {$("#menu_bar").toggleClass('active');});
|
||||
$('.menu_title').on('mouseover', function() {
|
||||
|
|
@ -4473,6 +4478,15 @@
|
|||
}
|
||||
|
||||
function updateRulers(scanvas, zoom) {
|
||||
var ruler_x_cursor = document.getElementById("ruler_x_cursor");
|
||||
var ruler_y_cursor = document.getElementById("ruler_y_cursor");
|
||||
var workarea = document.getElementById("workarea");
|
||||
var offset_x = 66;
|
||||
var offset_y = 48;
|
||||
$("#workarea").unbind("mousemove.rulers").bind("mousemove.rulers", function(e){
|
||||
ruler_x_cursor.style.left = (e.pageX-offset_x+workarea.scrollLeft) + "px";
|
||||
ruler_y_cursor.style.top = (e.pageY-offset_y+workarea.scrollTop) + "px";
|
||||
})
|
||||
if(!zoom) zoom = svgCanvas.getZoom();
|
||||
if(!scanvas) scanvas = $("#svgcanvas");
|
||||
|
||||
|
|
@ -4547,8 +4561,8 @@
|
|||
}
|
||||
|
||||
var big_int = multi * u_multi;
|
||||
ctx.font = "bold 9px sans-serif";
|
||||
ctx.fillStyle = "#888";
|
||||
ctx.font = "normal 9px 'Lucida Grande', sans-serif";
|
||||
ctx.fillStyle = "#777";
|
||||
|
||||
var ruler_d = ((content_d / u_multi) % multi) * u_multi;
|
||||
var label_pos = ruler_d - big_int;
|
||||
|
|
@ -4585,12 +4599,12 @@
|
|||
|
||||
if(is_x) {
|
||||
ctx.fillText(label, ruler_d+2, 8);
|
||||
ctx.fillStyle = "#888";
|
||||
ctx.fillStyle = "#777";
|
||||
} else {
|
||||
var str = (label+'').split('');
|
||||
for(var i = 0; i < str.length; i++) {
|
||||
ctx.fillText(str[i], 1, (ruler_d+9) + i*9);
|
||||
ctx.fillStyle = "#888";
|
||||
ctx.fillStyle = "#777";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue