zcy
/
websch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

total tool height reduced

master
Mark MacKay 2012-07-26 17:10:49 -05:00
parent b4b12f8067
commit d3225bea51
8 changed files with 216 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
editor/svg-editor.css
View File

@ -655,15 +655,6 @@ div#font-selector .font-item:hover {
text-align: center; text-align: center;
} }
#font_family_dropdown-list {
border-radius: 3px;
box-shadow: 0 5px 10px #000;
}
#font_family_dropdown-list li {
cursor: pointer;
}
#tools_top #marker_panel .dropdown button { #tools_top #marker_panel .dropdown button {
margin-top: 2px; margin-top: 2px;
} }
@ -918,16 +909,6 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
} }
#font_family_dropdown-list li {
font-size: 1.4em;
}
#font_family {
margin-left: 5px;
margin-right: 0;
}
.tool_button, .tool_button,
.push_button, .push_button,
.tool_button_current, .tool_button_current,
@ -972,25 +953,6 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
padding-right: 5px; padding-right: 5px;
} }
#tool_bold, #tool_italic {
font: bold 40px/85px serif;
text-align: center;
position: relative;
float:left;
padding: 0 0 0 0;
color: #ccc;
background: transparent;
border: none;
width: 100%;
height: 70px;
margin: 0;
}
#tool_bold:hover, #tool_italic:hover {
color: #fff;
}
#text { #text {
position: absolute; position: absolute;
left: -9999px; left: -9999px;
@ -1817,15 +1779,55 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
} }
#tool_font_family .caret { #tool_font_family .caret {
right: 10px; right: 40px;
top: 55%; top: 55%;
} }
#preview_font { #tool_font_family select {
font-size: 24px; width: 110px;
}
#tool_bold, #tool_italic {
font: bold 20px/35px serif;
text-align: center;
position: absolute;
padding: 0 0 0 0;
color: #ccc;
background: transparent;
border: none;
width: 35px;
height: 35px;
margin: 0;
top: 0;
right: 0;
}
#tool_italic {
border-top: solid #2f2f2c 2px;
top: 35px;
}
#tool_bold:hover, #tool_italic:hover {
color: #fff; color: #fff;
margin: 30px 0 0 10px; }
#tool_bold.active, #tool_italic.active {
color: #50A0FF;
}
#preview_font {
font-size: 20px;
color: #fff;
height: 70px;
line-height: 75px;
padding: 0 0 0 10px;
white-space: nowrap; white-space: nowrap;
width: 100px;
overflow: hidden;
border-right: solid #2f2f2c 2px;
position: relative;
} }
#preview_font:after { #preview_font:after {
@ -1834,11 +1836,12 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
right: 0; right: 0;
top: 3px; top: 3px;
bottom: 3px; bottom: 3px;
width: 40px; width: 15px;
border-right: solid #3f3f3c 10px; border-right: solid #3f3f3c 10px;
background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzU4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjM2YzZjNjIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMzZjNmM2MiIG9mZnNldD0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODApIiAvPjwvc3ZnPg==); background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzU4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjM2YzZjNjIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMzZjNmM2MiIG9mZnNldD0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODApIiAvPjwvc3ZnPg==);
} }
.draginput input, .draginput input:hover, .draginput input:active { .draginput input, .draginput input:hover, .draginput input:active {
cursor: url(images/drag.png), move; cursor: url(images/drag.png), move;
cursor: -webkit-grab; cursor: -webkit-grab;
@ -1910,10 +1913,10 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
.draginput input:focus { .draginput input:focus {
background: #4F80FF; background: #50A0FF;
color: #fff; color: #fff;
outline: none; outline: none;
box-shadow: 0 0 5px 2px #4F80FF; box-shadow: 0 0 5px 2px #50A0FF;
} }
.draginput input:focus+span { .draginput input:focus+span {
@ -2019,7 +2022,7 @@ input[readonly=readonly]:focus {
#tool_angle_indicator_cursor { #tool_angle_indicator_cursor {
width: 4px; width: 4px;
height: 25px; height: 25px;
border-top: solid #4F80FF 3px; border-top: solid #50A0FF 3px;
position: absolute; position: absolute;
margin: 0 0 0 23px; margin: 0 0 0 23px;
-webkit-transform-origin: 50% 0; -webkit-transform-origin: 50% 0;

8
editor/svg-editor.html
View File

@ -330,15 +330,7 @@ $(function(){
<option value="'Times New Roman', Times, serif">Times</option> <option value="'Times New Roman', Times, serif">Times</option>
<option value="'Courier New', Courier, monospace">Courier</option> <option value="'Courier New', Courier, monospace">Courier</option>
</select> </select>
</label>
<label class="draginput toggle">
<span>Font Weight</span>
<div class="tool_button" id="tool_bold" data-title="Bold Text [B]">B</div> <div class="tool_button" id="tool_bold" data-title="Bold Text [B]">B</div>
</label>
<label class="draginput toggle">
<span>Font Style</span>
<div class="tool_button" id="tool_italic" data-title="Italic Text [I]">i</div> <div class="tool_button" id="tool_italic" data-title="Italic Text [I]">i</div>
</label> </label>

21
editor/svgedit.compiled.css
View File

@ -199,8 +199,6 @@ div#font-selector .font-item:hover{background-color:#eee}
#tools_top #marker_panel *{float:left} #tools_top #marker_panel *{float:left}
#tools_top #marker_panel h4{float:none} #tools_top #marker_panel h4{float:none}
#tools_top #marker_panel .dropdown .icon_label{width:36px;height:20px;margin-top:2px;border:solid #3f3f3c 1px;text-align:center} #tools_top #marker_panel .dropdown .icon_label{width:36px;height:20px;margin-top:2px;border:solid #3f3f3c 1px;text-align:center}
#font_family_dropdown-list{border-radius:3px;box-shadow:0 5px 10px #000}
#font_family_dropdown-list li{cursor:pointer}
#tools_top #marker_panel .dropdown button{margin-top:2px} #tools_top #marker_panel .dropdown button{margin-top:2px}
#tools_top #marker_panel #marker_panel_title{float:none;color:#fff;margin-bottom:3px} #tools_top #marker_panel #marker_panel_title{float:none;color:#fff;margin-bottom:3px}
#tools_top #marker_panel .dropdown .icon_label img{float:none} #tools_top #marker_panel .dropdown .icon_label img{float:none}
@ -240,16 +238,12 @@ input[type=submit]:active,button:active{box-shadow:inset 0 2px 2px rgba(0,0,0,0.
.dropdown li.special{padding:10px;background:white;border:0;box-shadow:0 3px 10px black;border-radius:3px!important} .dropdown li.special{padding:10px;background:white;border:0;box-shadow:0 3px 10px black;border-radius:3px!important}
.dropdown li.special:after{content:'';display:block;position:absolute;top:-10px;right:50%;border:solid transparent 5px;border-bottom-color:#fff} .dropdown li.special:after{content:'';display:block;position:absolute;top:-10px;right:50%;border:solid transparent 5px;border-bottom-color:#fff}
.dropdown li.special.down:after{bottom:-10px;right:50%;top:auto;border:solid transparent 5px;border-top-color:#fff} .dropdown li.special.down:after{bottom:-10px;right:50%;top:auto;border:solid transparent 5px;border-top-color:#fff}
#font_family_dropdown-list li{font-size:1.4em}
#font_family{margin-left:5px;margin-right:0}
.tool_button,.push_button,.tool_button_current,.push_button_pressed{height:27px;width:27px;border:solid #2f2f2c 8px;border-left-width:13px;margin:0;background-color:#ddd;cursor:pointer} .tool_button,.push_button,.tool_button_current,.push_button_pressed{height:27px;width:27px;border:solid #2f2f2c 8px;border-left-width:13px;margin:0;background-color:#ddd;cursor:pointer}
#main_menu li#tool_open,#main_menu li#tool_import{position:relative;overflow:hidden} #main_menu li#tool_open,#main_menu li#tool_import{position:relative;overflow:hidden}
#tool_image{overflow:hidden} #tool_image{overflow:hidden}
#tool_open input,#tool_import input,#tool_image input{position:absolute;opacity:0;font-size:10em;top:-5px;right:-5px;margin:0;cursor:pointer} #tool_open input,#tool_import input,#tool_image input{position:absolute;opacity:0;font-size:10em;top:-5px;right:-5px;margin:0;cursor:pointer}
.disabled{opacity:.5;cursor:default} .disabled{opacity:.5;cursor:default}
.width_label{padding-right:5px} .width_label{padding-right:5px}
#tool_bold,#tool_italic{font:bold 40px/85px serif;text-align:center;position:relative;float:left;padding:0;color:#ccc;background:transparent;border:0;width:100%;height:70px;margin:0}
#tool_bold:hover,#tool_italic:hover{color:#fff}
#text{position:absolute;left:-9999px} #text{position:absolute;left:-9999px}
#tool_bold span,#tool_italic span{position:absolute;width:100%;height:100%;top:0;left:0;background:#ccc;opacity:0} #tool_bold span,#tool_italic span{position:absolute;width:100%;height:100%;top:0;left:0;background:#ccc;opacity:0}
#tool_italic{font-weight:normal;font-style:italic} #tool_italic{font-weight:normal;font-style:italic}
@ -385,9 +379,14 @@ button.cancel,input.Cancel,input.cancel,input.jGraduate_Cancel,button.cancel{-we
.touch .draginput.active:before{content:'';height:0;width:0;position:absolute;top:5px;left:-5px;border:solid transparent 5px;border-left-color:#fff} .touch .draginput.active:before{content:'';height:0;width:0;position:absolute;top:5px;left:-5px;border:solid transparent 5px;border-left-color:#fff}
.draginput input{border:0;background:transparent;font:24px/normal sans-serif;text-align:center;color:#4f80ff;padding:30px 0 16px;width:100%;height:24px;position:relative;z-index:2} .draginput input{border:0;background:transparent;font:24px/normal sans-serif;text-align:center;color:#4f80ff;padding:30px 0 16px;width:100%;height:24px;position:relative;z-index:2}
.draginput.twocol{width:145px} .draginput.twocol{width:145px}
#tool_font_family .caret{right:10px;top:55%} #tool_font_family .caret{right:40px;top:55%}
#preview_font{font-size:24px;color:#fff;margin:30px 0 0 10px;white-space:nowrap} #tool_font_family select{width:110px}
#preview_font:after{content:'';position:absolute;right:0;top:3px;bottom:3px;width:40px;border-right:solid #3f3f3c 10px;background:transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzU4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjM2YzZjNjIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMzZjNmM2MiIG9mZnNldD0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODApIiAvPjwvc3ZnPg==)} #tool_bold,#tool_italic{font:bold 20px/35px serif;text-align:center;position:absolute;padding:0;color:#ccc;background:transparent;border:0;width:35px;height:35px;margin:0;top:0;right:0}
#tool_italic{border-top:solid #2f2f2c 2px;top:35px}
#tool_bold:hover,#tool_italic:hover{color:#fff}
#tool_bold.active,#tool_italic.active{color:#50a0ff}
#preview_font{font-size:20px;color:#fff;height:70px;line-height:75px;padding:0 0 0 10px;white-space:nowrap;width:100px;overflow:hidden;border-right:solid #2f2f2c 2px;position:relative}
#preview_font:after{content:'';position:absolute;right:0;top:3px;bottom:3px;width:15px;border-right:solid #3f3f3c 10px;background:transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzU4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjM2YzZjNjIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMzZjNmM2MiIG9mZnNldD0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODApIiAvPjwvc3ZnPg==)}
.draginput input,.draginput input:hover,.draginput input:active{cursor:url(images/drag.png),move;cursor:-webkit-grab;cursor:-moz-grab} .draginput input,.draginput input:hover,.draginput input:active{cursor:url(images/drag.png),move;cursor:-webkit-grab;cursor:-moz-grab}
.draginput.active input,.draginput.active input:hover,.draginput.active input:active{cursor:url(images/dragging.png),move;cursor:-webkit-grabbing;cursor:-moz-grabbing} .draginput.active input,.draginput.active input:hover,.draginput.active input:active{cursor:url(images/dragging.png),move;cursor:-webkit-grabbing;cursor:-moz-grabbing}
.draginput span{font:11px/130% sans-serif;color:#ccc;display:block;position:absolute;top:5px;left:5px;text-align:left} .draginput span{font:11px/130% sans-serif;color:#ccc;display:block;position:absolute;top:5px;left:5px;text-align:left}
@ -397,7 +396,7 @@ button.cancel,input.Cancel,input.cancel,input.jGraduate_Cancel,button.cancel{-we
.draginput select{-webkit-appearance:none;opacity:0;display:block;position:absolute;height:100%;width:100%;margin:0;z-index:1;top:0;left:0} .draginput select{-webkit-appearance:none;opacity:0;display:block;position:absolute;height:100%;width:100%;margin:0;z-index:1;top:0;left:0}
.draginput_cursor{position:absolute;top:50%;width:100%;border-top:solid rgba(50,100,200,0.25) 3px;margin-top:-2px;z-index:0} .draginput_cursor{position:absolute;top:50%;width:100%;border-top:solid rgba(50,100,200,0.25) 3px;margin-top:-2px;z-index:0}
.draginput input[readonly=readonly]{-webkit-appearance:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .draginput input[readonly=readonly]{-webkit-appearance:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.draginput input:focus{background:#4f80ff;color:#fff;outline:0;box-shadow:0 0 5px 2px #4f80ff} .draginput input:focus{background:#50a0ff;color:#fff;outline:0;box-shadow:0 0 5px 2px #50a0ff}
.draginput input:focus+span{z-index:10;color:#fff} .draginput input:focus+span{z-index:10;color:#fff}
.draginput .push_bottom{bottom:0;position:absolute} .draginput .push_bottom{bottom:0;position:absolute}
#zoom_label{height:20px;background:transparent;cursor:default!important;width:auto;padding:0 10px;margin:0} #zoom_label{height:20px;background:transparent;cursor:default!important;width:auto;padding:0 10px;margin:0}
@ -413,7 +412,7 @@ input[readonly=readonly]:focus{box-shadow:none}
#color_canvas_tools{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAAA3NCSVQICAjb4U/gAAAABlBMVEXu7u7///8o06qaAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFXRFWHRDcmVhdGlvbiBUaW1lADcvMjIvMTL7FNdCAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABFJREFUCJljYP7AgIb+MKAhAM8/C5vWL6zSAAAAAElFTkSuQmCC) top left repeat;width:60px;height:40px;margin:23px 5px 5px 5px;position:relative;overflow:hidden} #color_canvas_tools{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAAA3NCSVQICAjb4U/gAAAABlBMVEXu7u7///8o06qaAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFXRFWHRDcmVhdGlvbiBUaW1lADcvMjIvMTL7FNdCAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABFJREFUCJljYP7AgIb+MKAhAM8/C5vWL6zSAAAAAElFTkSuQmCC) top left repeat;width:60px;height:40px;margin:23px 5px 5px 5px;position:relative;overflow:hidden}
#color_canvas_tools{display:block} #color_canvas_tools{display:block}
#tool_angle_indicator{width:50px;height:50px;border-radius:50px;background:rgba(255,255,255,0.05);position:absolute;bottom:2px;left:10px} #tool_angle_indicator{width:50px;height:50px;border-radius:50px;background:rgba(255,255,255,0.05);position:absolute;bottom:2px;left:10px}
#tool_angle_indicator_cursor{width:4px;height:25px;border-top:solid #4f80ff 3px;position:absolute;margin:0 0 0 23px;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-o-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0} #tool_angle_indicator_cursor{width:4px;height:25px;border-top:solid #50a0ff 3px;position:absolute;margin:0 0 0 23px;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-o-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0}
INPUT.spin-button{background:transparent url('spinner.svg') right top no-repeat;background-size:17px 54px} INPUT.spin-button{background:transparent url('spinner.svg') right top no-repeat;background-size:17px 54px}
INPUT.spin-button.up{cursor:pointer;background-position:100% -20px} INPUT.spin-button.up{cursor:pointer;background-position:100% -20px}
INPUT.spin-button.down{cursor:pointer;background-position:100% -40px} INPUT.spin-button.down{cursor:pointer;background-position:100% -40px}

95
editor/temp.css
View File

@ -1300,15 +1300,6 @@ div#font-selector .font-item:hover {
text-align: center; text-align: center;
} }
#font_family_dropdown-list {
border-radius: 3px;
box-shadow: 0 5px 10px #000;
}
#font_family_dropdown-list li {
cursor: pointer;
}
#tools_top #marker_panel .dropdown button { #tools_top #marker_panel .dropdown button {
margin-top: 2px; margin-top: 2px;
} }
@ -1563,16 +1554,6 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
} }
#font_family_dropdown-list li {
font-size: 1.4em;
}
#font_family {
margin-left: 5px;
margin-right: 0;
}
.tool_button, .tool_button,
.push_button, .push_button,
.tool_button_current, .tool_button_current,
@ -1617,25 +1598,6 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
padding-right: 5px; padding-right: 5px;
} }
#tool_bold, #tool_italic {
font: bold 40px/85px serif;
text-align: center;
position: relative;
float:left;
padding: 0 0 0 0;
color: #ccc;
background: transparent;
border: none;
width: 100%;
height: 70px;
margin: 0;
}
#tool_bold:hover, #tool_italic:hover {
color: #fff;
}
#text { #text {
position: absolute; position: absolute;
left: -9999px; left: -9999px;
@ -2462,15 +2424,55 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
} }
#tool_font_family .caret { #tool_font_family .caret {
right: 10px; right: 40px;
top: 55%; top: 55%;
} }
#preview_font { #tool_font_family select {
font-size: 24px; width: 110px;
}
#tool_bold, #tool_italic {
font: bold 20px/35px serif;
text-align: center;
position: absolute;
padding: 0 0 0 0;
color: #ccc;
background: transparent;
border: none;
width: 35px;
height: 35px;
margin: 0;
top: 0;
right: 0;
}
#tool_italic {
border-top: solid #2f2f2c 2px;
top: 35px;
}
#tool_bold:hover, #tool_italic:hover {
color: #fff; color: #fff;
margin: 30px 0 0 10px; }
#tool_bold.active, #tool_italic.active {
color: #50A0FF;
}
#preview_font {
font-size: 20px;
color: #fff;
height: 70px;
line-height: 75px;
padding: 0 0 0 10px;
white-space: nowrap; white-space: nowrap;
width: 100px;
overflow: hidden;
border-right: solid #2f2f2c 2px;
position: relative;
} }
#preview_font:after { #preview_font:after {
@ -2479,11 +2481,12 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
right: 0; right: 0;
top: 3px; top: 3px;
bottom: 3px; bottom: 3px;
width: 40px; width: 15px;
border-right: solid #3f3f3c 10px; border-right: solid #3f3f3c 10px;
background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzU4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjM2YzZjNjIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMzZjNmM2MiIG9mZnNldD0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODApIiAvPjwvc3ZnPg==); background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzU4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjM2YzZjNjIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMzZjNmM2MiIG9mZnNldD0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODApIiAvPjwvc3ZnPg==);
} }
.draginput input, .draginput input:hover, .draginput input:active { .draginput input, .draginput input:hover, .draginput input:active {
cursor: url(images/drag.png), move; cursor: url(images/drag.png), move;
cursor: -webkit-grab; cursor: -webkit-grab;
@ -2555,10 +2558,10 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
.draginput input:focus { .draginput input:focus {
background: #4F80FF; background: #50A0FF;
color: #fff; color: #fff;
outline: none; outline: none;
box-shadow: 0 0 5px 2px #4F80FF; box-shadow: 0 0 5px 2px #50A0FF;
} }
.draginput input:focus+span { .draginput input:focus+span {
@ -2664,7 +2667,7 @@ input[readonly=readonly]:focus {
#tool_angle_indicator_cursor { #tool_angle_indicator_cursor {
width: 4px; width: 4px;
height: 25px; height: 25px;
border-top: solid #4F80FF 3px; border-top: solid #50A0FF 3px;
position: absolute; position: absolute;
margin: 0 0 0 23px; margin: 0 0 0 23px;
-webkit-transform-origin: 50% 0; -webkit-transform-origin: 50% 0;

95
method-draw/svg-editor.css
View File

@ -655,15 +655,6 @@ div#font-selector .font-item:hover {
text-align: center; text-align: center;
} }
#font_family_dropdown-list {
border-radius: 3px;
box-shadow: 0 5px 10px #000;
}
#font_family_dropdown-list li {
cursor: pointer;
}
#tools_top #marker_panel .dropdown button { #tools_top #marker_panel .dropdown button {
margin-top: 2px; margin-top: 2px;
} }
@ -918,16 +909,6 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
} }
#font_family_dropdown-list li {
font-size: 1.4em;
}
#font_family {
margin-left: 5px;
margin-right: 0;
}
.tool_button, .tool_button,
.push_button, .push_button,
.tool_button_current, .tool_button_current,
@ -972,25 +953,6 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
padding-right: 5px; padding-right: 5px;
} }
#tool_bold, #tool_italic {
font: bold 40px/85px serif;
text-align: center;
position: relative;
float:left;
padding: 0 0 0 0;
color: #ccc;
background: transparent;
border: none;
width: 100%;
height: 70px;
margin: 0;
}
#tool_bold:hover, #tool_italic:hover {
color: #fff;
}
#text { #text {
position: absolute; position: absolute;
left: -9999px; left: -9999px;
@ -1817,15 +1779,55 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
} }
#tool_font_family .caret { #tool_font_family .caret {
right: 10px; right: 40px;
top: 55%; top: 55%;
} }
#preview_font { #tool_font_family select {
font-size: 24px; width: 110px;
}
#tool_bold, #tool_italic {
font: bold 20px/35px serif;
text-align: center;
position: absolute;
padding: 0 0 0 0;
color: #ccc;
background: transparent;
border: none;
width: 35px;
height: 35px;
margin: 0;
top: 0;
right: 0;
}
#tool_italic {
border-top: solid #2f2f2c 2px;
top: 35px;
}
#tool_bold:hover, #tool_italic:hover {
color: #fff; color: #fff;
margin: 30px 0 0 10px; }
#tool_bold.active, #tool_italic.active {
color: #50A0FF;
}
#preview_font {
font-size: 20px;
color: #fff;
height: 70px;
line-height: 75px;
padding: 0 0 0 10px;
white-space: nowrap; white-space: nowrap;
width: 100px;
overflow: hidden;
border-right: solid #2f2f2c 2px;
position: relative;
} }
#preview_font:after { #preview_font:after {
@ -1834,11 +1836,12 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
right: 0; right: 0;
top: 3px; top: 3px;
bottom: 3px; bottom: 3px;
width: 40px; width: 15px;
border-right: solid #3f3f3c 10px; border-right: solid #3f3f3c 10px;
background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzU4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjM2YzZjNjIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMzZjNmM2MiIG9mZnNldD0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODApIiAvPjwvc3ZnPg==); background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzU4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjM2YzZjNjIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMzZjNmM2MiIG9mZnNldD0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODApIiAvPjwvc3ZnPg==);
} }
.draginput input, .draginput input:hover, .draginput input:active { .draginput input, .draginput input:hover, .draginput input:active {
cursor: url(images/drag.png), move; cursor: url(images/drag.png), move;
cursor: -webkit-grab; cursor: -webkit-grab;
@ -1910,10 +1913,10 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
.draginput input:focus { .draginput input:focus {
background: #4F80FF; background: #50A0FF;
color: #fff; color: #fff;
outline: none; outline: none;
box-shadow: 0 0 5px 2px #4F80FF; box-shadow: 0 0 5px 2px #50A0FF;
} }
.draginput input:focus+span { .draginput input:focus+span {
@ -2019,7 +2022,7 @@ input[readonly=readonly]:focus {
#tool_angle_indicator_cursor { #tool_angle_indicator_cursor {
width: 4px; width: 4px;
height: 25px; height: 25px;
border-top: solid #4F80FF 3px; border-top: solid #50A0FF 3px;
position: absolute; position: absolute;
margin: 0 0 0 23px; margin: 0 0 0 23px;
-webkit-transform-origin: 50% 0; -webkit-transform-origin: 50% 0;

8
method-draw/svg-editor.html
View File

@ -330,15 +330,7 @@ $(function(){
<option value="'Times New Roman', Times, serif">Times</option> <option value="'Times New Roman', Times, serif">Times</option>
<option value="'Courier New', Courier, monospace">Courier</option> <option value="'Courier New', Courier, monospace">Courier</option>
</select> </select>
</label>
<label class="draginput toggle">
<span>Font Weight</span>
<div class="tool_button" id="tool_bold" data-title="Bold Text [B]">B</div> <div class="tool_button" id="tool_bold" data-title="Bold Text [B]">B</div>
</label>
<label class="draginput toggle">
<span>Font Style</span>
<div class="tool_button" id="tool_italic" data-title="Italic Text [I]">i</div> <div class="tool_button" id="tool_italic" data-title="Italic Text [I]">i</div>
</label> </label>

21
method-draw/svgedit.compiled.css
View File

@ -199,8 +199,6 @@ div#font-selector .font-item:hover{background-color:#eee}
#tools_top #marker_panel *{float:left} #tools_top #marker_panel *{float:left}
#tools_top #marker_panel h4{float:none} #tools_top #marker_panel h4{float:none}
#tools_top #marker_panel .dropdown .icon_label{width:36px;height:20px;margin-top:2px;border:solid #3f3f3c 1px;text-align:center} #tools_top #marker_panel .dropdown .icon_label{width:36px;height:20px;margin-top:2px;border:solid #3f3f3c 1px;text-align:center}
#font_family_dropdown-list{border-radius:3px;box-shadow:0 5px 10px #000}
#font_family_dropdown-list li{cursor:pointer}
#tools_top #marker_panel .dropdown button{margin-top:2px} #tools_top #marker_panel .dropdown button{margin-top:2px}
#tools_top #marker_panel #marker_panel_title{float:none;color:#fff;margin-bottom:3px} #tools_top #marker_panel #marker_panel_title{float:none;color:#fff;margin-bottom:3px}
#tools_top #marker_panel .dropdown .icon_label img{float:none} #tools_top #marker_panel .dropdown .icon_label img{float:none}
@ -240,16 +238,12 @@ input[type=submit]:active,button:active{box-shadow:inset 0 2px 2px rgba(0,0,0,0.
.dropdown li.special{padding:10px;background:white;border:0;box-shadow:0 3px 10px black;border-radius:3px!important} .dropdown li.special{padding:10px;background:white;border:0;box-shadow:0 3px 10px black;border-radius:3px!important}
.dropdown li.special:after{content:'';display:block;position:absolute;top:-10px;right:50%;border:solid transparent 5px;border-bottom-color:#fff} .dropdown li.special:after{content:'';display:block;position:absolute;top:-10px;right:50%;border:solid transparent 5px;border-bottom-color:#fff}
.dropdown li.special.down:after{bottom:-10px;right:50%;top:auto;border:solid transparent 5px;border-top-color:#fff} .dropdown li.special.down:after{bottom:-10px;right:50%;top:auto;border:solid transparent 5px;border-top-color:#fff}
#font_family_dropdown-list li{font-size:1.4em}
#font_family{margin-left:5px;margin-right:0}
.tool_button,.push_button,.tool_button_current,.push_button_pressed{height:27px;width:27px;border:solid #2f2f2c 8px;border-left-width:13px;margin:0;background-color:#ddd;cursor:pointer} .tool_button,.push_button,.tool_button_current,.push_button_pressed{height:27px;width:27px;border:solid #2f2f2c 8px;border-left-width:13px;margin:0;background-color:#ddd;cursor:pointer}
#main_menu li#tool_open,#main_menu li#tool_import{position:relative;overflow:hidden} #main_menu li#tool_open,#main_menu li#tool_import{position:relative;overflow:hidden}
#tool_image{overflow:hidden} #tool_image{overflow:hidden}
#tool_open input,#tool_import input,#tool_image input{position:absolute;opacity:0;font-size:10em;top:-5px;right:-5px;margin:0;cursor:pointer} #tool_open input,#tool_import input,#tool_image input{position:absolute;opacity:0;font-size:10em;top:-5px;right:-5px;margin:0;cursor:pointer}
.disabled{opacity:.5;cursor:default} .disabled{opacity:.5;cursor:default}
.width_label{padding-right:5px} .width_label{padding-right:5px}
#tool_bold,#tool_italic{font:bold 40px/85px serif;text-align:center;position:relative;float:left;padding:0;color:#ccc;background:transparent;border:0;width:100%;height:70px;margin:0}
#tool_bold:hover,#tool_italic:hover{color:#fff}
#text{position:absolute;left:-9999px} #text{position:absolute;left:-9999px}
#tool_bold span,#tool_italic span{position:absolute;width:100%;height:100%;top:0;left:0;background:#ccc;opacity:0} #tool_bold span,#tool_italic span{position:absolute;width:100%;height:100%;top:0;left:0;background:#ccc;opacity:0}
#tool_italic{font-weight:normal;font-style:italic} #tool_italic{font-weight:normal;font-style:italic}
@ -385,9 +379,14 @@ button.cancel,input.Cancel,input.cancel,input.jGraduate_Cancel,button.cancel{-we
.touch .draginput.active:before{content:'';height:0;width:0;position:absolute;top:5px;left:-5px;border:solid transparent 5px;border-left-color:#fff} .touch .draginput.active:before{content:'';height:0;width:0;position:absolute;top:5px;left:-5px;border:solid transparent 5px;border-left-color:#fff}
.draginput input{border:0;background:transparent;font:24px/normal sans-serif;text-align:center;color:#4f80ff;padding:30px 0 16px;width:100%;height:24px;position:relative;z-index:2} .draginput input{border:0;background:transparent;font:24px/normal sans-serif;text-align:center;color:#4f80ff;padding:30px 0 16px;width:100%;height:24px;position:relative;z-index:2}
.draginput.twocol{width:145px} .draginput.twocol{width:145px}
#tool_font_family .caret{right:10px;top:55%} #tool_font_family .caret{right:40px;top:55%}
#preview_font{font-size:24px;color:#fff;margin:30px 0 0 10px;white-space:nowrap} #tool_font_family select{width:110px}
#preview_font:after{content:'';position:absolute;right:0;top:3px;bottom:3px;width:40px;border-right:solid #3f3f3c 10px;background:transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzU4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjM2YzZjNjIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMzZjNmM2MiIG9mZnNldD0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODApIiAvPjwvc3ZnPg==)} #tool_bold,#tool_italic{font:bold 20px/35px serif;text-align:center;position:absolute;padding:0;color:#ccc;background:transparent;border:0;width:35px;height:35px;margin:0;top:0;right:0}
#tool_italic{border-top:solid #2f2f2c 2px;top:35px}
#tool_bold:hover,#tool_italic:hover{color:#fff}
#tool_bold.active,#tool_italic.active{color:#50a0ff}
#preview_font{font-size:20px;color:#fff;height:70px;line-height:75px;padding:0 0 0 10px;white-space:nowrap;width:100px;overflow:hidden;border-right:solid #2f2f2c 2px;position:relative}
#preview_font:after{content:'';position:absolute;right:0;top:3px;bottom:3px;width:15px;border-right:solid #3f3f3c 10px;background:transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzU4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjM2YzZjNjIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMzZjNmM2MiIG9mZnNldD0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODApIiAvPjwvc3ZnPg==)}
.draginput input,.draginput input:hover,.draginput input:active{cursor:url(images/drag.png),move;cursor:-webkit-grab;cursor:-moz-grab} .draginput input,.draginput input:hover,.draginput input:active{cursor:url(images/drag.png),move;cursor:-webkit-grab;cursor:-moz-grab}
.draginput.active input,.draginput.active input:hover,.draginput.active input:active{cursor:url(images/dragging.png),move;cursor:-webkit-grabbing;cursor:-moz-grabbing} .draginput.active input,.draginput.active input:hover,.draginput.active input:active{cursor:url(images/dragging.png),move;cursor:-webkit-grabbing;cursor:-moz-grabbing}
.draginput span{font:11px/130% sans-serif;color:#ccc;display:block;position:absolute;top:5px;left:5px;text-align:left} .draginput span{font:11px/130% sans-serif;color:#ccc;display:block;position:absolute;top:5px;left:5px;text-align:left}
@ -397,7 +396,7 @@ button.cancel,input.Cancel,input.cancel,input.jGraduate_Cancel,button.cancel{-we
.draginput select{-webkit-appearance:none;opacity:0;display:block;position:absolute;height:100%;width:100%;margin:0;z-index:1;top:0;left:0} .draginput select{-webkit-appearance:none;opacity:0;display:block;position:absolute;height:100%;width:100%;margin:0;z-index:1;top:0;left:0}
.draginput_cursor{position:absolute;top:50%;width:100%;border-top:solid rgba(50,100,200,0.25) 3px;margin-top:-2px;z-index:0} .draginput_cursor{position:absolute;top:50%;width:100%;border-top:solid rgba(50,100,200,0.25) 3px;margin-top:-2px;z-index:0}
.draginput input[readonly=readonly]{-webkit-appearance:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .draginput input[readonly=readonly]{-webkit-appearance:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.draginput input:focus{background:#4f80ff;color:#fff;outline:0;box-shadow:0 0 5px 2px #4f80ff} .draginput input:focus{background:#50a0ff;color:#fff;outline:0;box-shadow:0 0 5px 2px #50a0ff}
.draginput input:focus+span{z-index:10;color:#fff} .draginput input:focus+span{z-index:10;color:#fff}
.draginput .push_bottom{bottom:0;position:absolute} .draginput .push_bottom{bottom:0;position:absolute}
#zoom_label{height:20px;background:transparent;cursor:default!important;width:auto;padding:0 10px;margin:0} #zoom_label{height:20px;background:transparent;cursor:default!important;width:auto;padding:0 10px;margin:0}
@ -413,7 +412,7 @@ input[readonly=readonly]:focus{box-shadow:none}
#color_canvas_tools{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAAA3NCSVQICAjb4U/gAAAABlBMVEXu7u7///8o06qaAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFXRFWHRDcmVhdGlvbiBUaW1lADcvMjIvMTL7FNdCAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABFJREFUCJljYP7AgIb+MKAhAM8/C5vWL6zSAAAAAElFTkSuQmCC) top left repeat;width:60px;height:40px;margin:23px 5px 5px 5px;position:relative;overflow:hidden} #color_canvas_tools{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAAA3NCSVQICAjb4U/gAAAABlBMVEXu7u7///8o06qaAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFXRFWHRDcmVhdGlvbiBUaW1lADcvMjIvMTL7FNdCAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABFJREFUCJljYP7AgIb+MKAhAM8/C5vWL6zSAAAAAElFTkSuQmCC) top left repeat;width:60px;height:40px;margin:23px 5px 5px 5px;position:relative;overflow:hidden}
#color_canvas_tools{display:block} #color_canvas_tools{display:block}
#tool_angle_indicator{width:50px;height:50px;border-radius:50px;background:rgba(255,255,255,0.05);position:absolute;bottom:2px;left:10px} #tool_angle_indicator{width:50px;height:50px;border-radius:50px;background:rgba(255,255,255,0.05);position:absolute;bottom:2px;left:10px}
#tool_angle_indicator_cursor{width:4px;height:25px;border-top:solid #4f80ff 3px;position:absolute;margin:0 0 0 23px;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-o-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0} #tool_angle_indicator_cursor{width:4px;height:25px;border-top:solid #50a0ff 3px;position:absolute;margin:0 0 0 23px;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-o-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0}
INPUT.spin-button{background:transparent url('spinner.svg') right top no-repeat;background-size:17px 54px} INPUT.spin-button{background:transparent url('spinner.svg') right top no-repeat;background-size:17px 54px}
INPUT.spin-button.up{cursor:pointer;background-position:100% -20px} INPUT.spin-button.up{cursor:pointer;background-position:100% -20px}
INPUT.spin-button.down{cursor:pointer;background-position:100% -40px} INPUT.spin-button.down{cursor:pointer;background-position:100% -40px}

95
method-draw/temp.css
View File

@ -1300,15 +1300,6 @@ div#font-selector .font-item:hover {
text-align: center; text-align: center;
} }
#font_family_dropdown-list {
border-radius: 3px;
box-shadow: 0 5px 10px #000;
}
#font_family_dropdown-list li {
cursor: pointer;
}
#tools_top #marker_panel .dropdown button { #tools_top #marker_panel .dropdown button {
margin-top: 2px; margin-top: 2px;
} }
@ -1563,16 +1554,6 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
} }
#font_family_dropdown-list li {
font-size: 1.4em;
}
#font_family {
margin-left: 5px;
margin-right: 0;
}
.tool_button, .tool_button,
.push_button, .push_button,
.tool_button_current, .tool_button_current,
@ -1617,25 +1598,6 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
padding-right: 5px; padding-right: 5px;
} }
#tool_bold, #tool_italic {
font: bold 40px/85px serif;
text-align: center;
position: relative;
float:left;
padding: 0 0 0 0;
color: #ccc;
background: transparent;
border: none;
width: 100%;
height: 70px;
margin: 0;
}
#tool_bold:hover, #tool_italic:hover {
color: #fff;
}
#text { #text {
position: absolute; position: absolute;
left: -9999px; left: -9999px;
@ -2462,15 +2424,55 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
} }
#tool_font_family .caret { #tool_font_family .caret {
right: 10px; right: 40px;
top: 55%; top: 55%;
} }
#preview_font { #tool_font_family select {
font-size: 24px; width: 110px;
}
#tool_bold, #tool_italic {
font: bold 20px/35px serif;
text-align: center;
position: absolute;
padding: 0 0 0 0;
color: #ccc;
background: transparent;
border: none;
width: 35px;
height: 35px;
margin: 0;
top: 0;
right: 0;
}
#tool_italic {
border-top: solid #2f2f2c 2px;
top: 35px;
}
#tool_bold:hover, #tool_italic:hover {
color: #fff; color: #fff;
margin: 30px 0 0 10px; }
#tool_bold.active, #tool_italic.active {
color: #50A0FF;
}
#preview_font {
font-size: 20px;
color: #fff;
height: 70px;
line-height: 75px;
padding: 0 0 0 10px;
white-space: nowrap; white-space: nowrap;
width: 100px;
overflow: hidden;
border-right: solid #2f2f2c 2px;
position: relative;
} }
#preview_font:after { #preview_font:after {
@ -2479,11 +2481,12 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
right: 0; right: 0;
top: 3px; top: 3px;
bottom: 3px; bottom: 3px;
width: 40px; width: 15px;
border-right: solid #3f3f3c 10px; border-right: solid #3f3f3c 10px;
background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzU4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjM2YzZjNjIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMzZjNmM2MiIG9mZnNldD0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODApIiAvPjwvc3ZnPg==); background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzU4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjM2YzZjNjIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMzZjNmM2MiIG9mZnNldD0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODApIiAvPjwvc3ZnPg==);
} }
.draginput input, .draginput input:hover, .draginput input:active { .draginput input, .draginput input:hover, .draginput input:active {
cursor: url(images/drag.png), move; cursor: url(images/drag.png), move;
cursor: -webkit-grab; cursor: -webkit-grab;
@ -2555,10 +2558,10 @@ box-shadow: inset 0 3px 10px rgba(255, 255, 255, 0.1),
.draginput input:focus { .draginput input:focus {
background: #4F80FF; background: #50A0FF;
color: #fff; color: #fff;
outline: none; outline: none;
box-shadow: 0 0 5px 2px #4F80FF; box-shadow: 0 0 5px 2px #50A0FF;
} }
.draginput input:focus+span { .draginput input:focus+span {
@ -2664,7 +2667,7 @@ input[readonly=readonly]:focus {
#tool_angle_indicator_cursor { #tool_angle_indicator_cursor {
width: 4px; width: 4px;
height: 25px; height: 25px;
border-top: solid #4F80FF 3px; border-top: solid #50A0FF 3px;
position: absolute; position: absolute;
margin: 0 0 0 23px; margin: 0 0 0 23px;
-webkit-transform-origin: 50% 0; -webkit-transform-origin: 50% 0;