2012-07-18 02:02:44 +00:00
# svg_editor . jPicker . Icon { display : inline-block ; height : 24 px ; position : relative ; text-align : left ; width : 25 px }
# svg_editor . jPicker . Icon span . Color , # svg_editor . jPicker . Icon span . Alpha { background-position : 2 px 2 px ; 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 }
table # svg_editor . jPicker { width : 545 px ; z-index : 20 }
# svg_editor . jPicker . Move { background-color : #ddd ; border-color : #fff #666 #666 #fff ; border-style : solid ; border-width : 1 px ; cursor : move ; height : 12 px ; padding : 0 }
# svg_editor . jPicker . Title { display : none }
# svg_editor . jPicker div . Map { border : solid #000 1 px ; cursor : crosshair ; height : 260 px ; margin : 0 ; overflow : hidden ; padding : 0 ; position : relative ; width : 260 px }
# svg_editor . jPicker div [ class = "Map" ] { height : 256 px ; width : 256 px }
# svg_editor . jPicker div . Bar { border : solid #000 1 px ; cursor : n-resize ; height : 260 px ; margin : 0 15 px ; overflow : hidden ; padding : 0 ; position : relative ; width : 24 px }
# svg_editor . jPicker div [ class = "Bar" ] { height : 256 px ; width : 20 px }
# 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 : 2596 px ; width : 256 px }
# svg_editor . jPicker . Bar . Map1 , # svg_editor . jPicker . Bar . Map2 , # svg_editor . jPicker . Bar . Map3 , # svg_editor . jPicker . Bar . Map4 { height : 3896 px ; width : 20 px }
# svg_editor . jPicker . Bar . Map5 , # svg_editor . jPicker . Bar . Map6 { height : 256 px ; width : 20 px }
# 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 : 9 px ; text-align : center }
# svg_editor . jPicker . Preview div . bgt { height : 62 px ; margin : 0 auto ; padding : 0 ; width : 62 px }
# svg_editor . jPicker . Preview div span { border : 1 px solid #000 ; display : block ; height : 30 px ; margin : 0 auto ; padding : 0 ; width : 60 px }
# 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 : 115 px }
# svg_editor . jPicker . Button input { width : 100 px }
# svg_editor . jPicker td . Radio { margin : 0 ; padding : 0 ; width : 31 px }
# svg_editor . jPicker td . Radio input { margin : 0 5 px 0 0 ; padding : 0 }
# svg_editor . jPicker td . Text { font-size : 12 px !important ; height : 22 px ; margin : 0 ; padding : 0 ; text-align : left ; width : 70 px }
# svg_editor . jPicker tr . Hex td . Text { width : 100 px ; color : #666 }
# svg_editor . jPicker tr . Hex td . Text span { width : 100 px ; color : #333 }
# svg_editor . jPicker td . Text input { background-color : #fff ; border : 1 px inset #aaa ; height : 15 px ; margin : 0 0 0 5 px ; text-align : left ; width : 30 px ; color : #333 }
# svg_editor # color_picker . jPicker tr . Hex td . Text input . Hex { width : 50 px ; display : inline-block ; float : none }
# svg_editor . jPicker tr . Hex td . Text input . AHex { width : 20 px ; display : none }
# svg_editor . jPicker . Grid { text-align : center ; float : right ; width : 108 px }
# svg_editor . jPicker . Grid span . QuickColor { cursor : pointer ; display : inline-block ; height : 15 px ; line-height : 15 px ; margin : 0 ; padding : 0 ; width : 18 px }
# svg_editor . jPicker td { vertical-align : top }
# svg_editor . jPicker td . colorsquare { width : 275 px }
# svg_editor . jPicker . prev_div { margin-top : -15 px }
# svg_editor . jPicker . actions { position : absolute ; bottom : 20 px ; left : 20 px ; right : 20 px }
# svg_editor . jPicker . actions . Ok { position : absolute ; top : 0 ; right : 0 }
# svg_editor . jPicker . actions . Cancel { position : absolute ; top : 0 ; left : 0 }
# svg_editor . jPicker . color_preview { width : 62 px ; margin : 0 auto }
2012-07-25 06:32:18 +00:00
h2 . jGraduate_Title { display : none }
. jGraduate_Picker { position : absolute ; padding : 20 px }
. jGraduate_tabs li { display : inline-block ; padding : 5 px 10 px ; margin-right : 5 px ; cursor : pointer }
li . jGraduate_tab_current { background : #fff ; border-radius : 3 px 3 px 0 0 }
. jGraduate_colPick { display : none }
. jGraduate_gradPick { display : none ; overflow : visible }
. jGraduate_tabs { position : relative ; background-color : #ddd ; padding : 10 px 10 px 0 10 px ; margin : -20 px -20 px 20 px -20 px ; border-radius : 3 px 3 px 0 0 }
div . jGraduate_Swatch { float : left ; margin : 0 15 px 0 0 }
div . jGraduate_GradContainer { border : solid #000 1 px ; background-image : url ( ../images/map-opacity.png ) ; background-position : 0 0 ; height : 256 px ; width : 256 px ; position : relative }
div . jGraduate_GradContainer div . grad_coord { background : rgba ( 0 , 0 , 0 , 0.8 ) ; border : 2 px solid white ; border-radius : 15 px ; -moz- border-radius : 5 px ; width : 14 px ; height : 14 px ; position : absolute ; margin : -7 px -7 px ; top : 0 ; left : 0 ; text-align : center ; font-size : 8 px ; line-height : 14 px ; color : white ; text-decoration : none ; cursor : pointer ; -moz- user-select : none ; -webkit- user-select : none }
. jGraduate_AlphaArrows { position : absolute ; margin-top : -10 px ; margin-left : 250.5 px }
div . jGraduate_Opacity { border : 2 px inset #eee ; margin-top : 14 px ; background-color : black ; background-image : url ( ../images/Maps.png ) ; background-position : 0 -2816 px ; height : 20 px ; cursor : ew-resize }
div . jGraduate_StopSlider { margin : -10 px 0 0 -10 px ; width : 276 px ; overflow : visible ; background : white ; height : 45 px ; cursor : pointer }
div . jGraduate_StopSection { width : 120 px ; float : left }
div . jGraduate_StopSection . jGraduate_SpreadMethod { display : none }
input . jGraduate_Ok , input . jGraduate_Cancel { display : block ; width : 100 px }
input . jGraduate_Ok { margin : 0 0 5 px 0 }
. colorBox { float : left ; height : 16 px ; width : 16 px ; border : 1 px solid #808080 ; cursor : pointer ; margin : 4 px 4 px 4 px 30 px }
. colorBox + label { float : left ; margin-top : 7 px }
label . jGraduate_Form_Heading { color : #333 ; padding : 2 px ; font-weight : bold ; font-size : 13 px }
div . jGraduate_Form_Section { -moz- border-radius : 5 px ; -webkit- border-radius : 5 px ; padding : 15 px 5 px 5 px 5 px ; margin : 5 px 2 px ; width : 100 px ; text-align : center ; overflow : auto ; background : #eee }
div . jGraduate_Form label { padding : 0 2 px ; color : #333 }
div . jGraduate_StopSection input [ type = text ] , div . jGraduate_Slider input [ type = text ] { width : 33 px ; color : #333 }
div . jGraduate_LightBox { position : fixed ; top : 0 ; left : 0 ; right : 0 ; bottom : 0 ; background-color : #000 ; opacity : .5 ; display : none }
div . jGraduate_stopPicker { position : absolute ; display : none ; background : white ; padding : 20 px ; border-radius : 3 px ; width : 530 px ; height : 300 px ; box-shadow : 0 5 px 25 px black }
. jGraduate_gradPick { width : 526 px }
. jGraduate_gradPick div . jGraduate_Slider { line-height : 160 % }
. jGraduate_gradPick div . jGraduate_Slider label : last-child { position : absolute ; right : 10 px ; top : 0 ; color : #999 ; font-weight : bold }
. jGraduate_gradPick div . jGraduate_Slider label : last-child input { margin : 0 3 px 0 0 ; color : #333 }
. jGraduate_gradPick . jGraduate_Form { float : left ; width : 270 px ; position : absolute ; left : 284 px ; width : 266 px ; height : 200 px ; top : 195 px ; margin : -3 px 3 px 0 10 px ; line-height : 200 % }
. jGraduate_gradPick . jGraduate_Form label , . jGraduate_gradPick . jGraduate_Form input { width : auto ; float : left }
. jGraduate_gradPick . jGraduate_Form . jGraduate_rg_field label , . jGraduate_gradPick . jGraduate_Form . jGraduate_rg_field input { width : auto ; float : left ; font-size : 11 px }
. jGraduate_gradPick . jGraduate_Form . jGraduate_rg_field # color_picker_jGraduate_match_ctr { float : none }
. jGraduate_gradPick . jGraduate_Form label { clear : left }
. jGraduate_gradPick . jGraduate_Points { position : static ; float : left ; margin : 0 ; width : auto }
. jGraduate_Colorblocks { display : table ; border-spacing : 0 5 px }
. jGraduate_colorblock { display : table-row }
. jGraduate_Colorblocks . jGraduate_colorblock > * { display : table-cell ; vertical-align : middle ; margin : 0 ; float : none }
. jGraduate_gradPick . jGraduate_Form_Section { padding-top : 9 px }
. jGraduate_Slider { text-align : center ; float : left ; width : 100 % ; position : relative ; margin : 5 px 0 }
. jGraduate_Slider . jGraduate_Form_Section { border : 0 ; width : 250 px ; padding : 0 2 px ; overflow : visible }
. jGraduate_Slider label . prelabel { width : 40 px ; text-align : left }
. jGraduate_SliderBar { width : 140 px ; float : left ; margin : 0 5 px ; border : 1 px solid #BBB ; height : 20 px ; position : relative }
div . jGraduate_Slider input { margin-top : 5 px }
div . jGraduate_Slider img { top : 0 ; left : 0 ; position : absolute ; cursor : ew-resize }
. jPicker . Button . Ok , . jGraduate_Picker . jGraduate_OkCancel . jGraduate_Ok { -webkit- appearance : none ; margin : 0 ; position : absolute ; bottom : 5 px ; right : 5 px }
. jPicker . Button . Cancel , . jGraduate_Picker . jGraduate_OkCancel . jGraduate_Cancel { margin : 0 ; position : absolute ; bottom : 5 px ; left : 5 px }
2012-08-09 08:41:12 +00:00
body { background : #3f3f3c ; font : 13 px / 120 % 'Lucida Sans' , 'Lucida Grande' , 'Lucida Sans Unicode' , sans-serif ; -webkit- touch-callout : none ; -webkit- user-select : none ; -khtml- user-select : none ; -moz- user-select : none ; -ms- user-select : none ; user-select : none ; margin : 0 ; padding : 0 }
2012-07-18 02:02:44 +00:00
:: selection { background : #000 ; color : #fff }
:: -moz-selection { background : #000 ; color : #fff }
html , body { overflow : hidden ; width : 100 % ; height : 100 % }
:: -webkit-scrollbar { width : 5 px ; height : 5 px ; background : #444 }
:: -webkit-scrollbar-track { border-radius : 10 px ; background : #444 }
:: -webkit-scrollbar-thumb { border-radius : 10 px ; background : #666 }
:: -webkit-scrollbar-corner { background : #444 }
# browser-not-supported { font-size : .8 em ; font-family : Verdana , Helvetica , Arial ; color : #000 }
2012-07-25 06:32:18 +00:00
# svgroot { -moz- user-select : none ; -webkit- user-select : none ; position : absolute ; top : 0 ; left : 0 }
2012-08-09 08:41:12 +00:00
# svg_editor { background : #2f2f2c }
# menu_bar { padding : 0 0 0 50 px ; background : #2f2f2c ; position : relative ; z-index : 1 }
2012-07-25 06:32:18 +00:00
# menu_bar . active . menu . open . menu_list { display : block }
. menu { position : relative ; z-index : 5 ; color : #333 ; display : inline-block }
. menu_title { cursor : pointer ; display : inline-block ; padding : 7 px 10 px ; z-index : 10 ; color : #fff ; position : relative ; height : 16 px ; vertical-align : top }
. touch . menu_title { padding : 7 px 17 px ; height : 26 px ; line-height : 26 px }
. menu . menu_title : hover { background : rgba ( 255 , 255 , 255 , 0.1 ) }
. menu_list . separator { margin : 5 px 0 ; border-top : solid #ddd 1 px }
. menu_list { display : none ; position : absolute ; top : 28 px ; left : 0 ; white-space : nowrap ; background : white ; padding : 7 px 0 ; border-radius : 0 3 px 3 px 3 px ; box-shadow : 0 0 20 px rgba ( 0 , 0 , 0 , 0.8 ) }
. touch . menu_list { top : 38 px }
# menu_bar . active . menu . open . menu_title { background : white ; color : #333 }
. menu_list . menu_item { position : relative ; overflow : hidden ; line-height : 22 px ; padding : 5 px 69 px 5 px 25 px ; cursor : default ; color : #333 }
. menu_list . menu_item . tool_button { background : transparent ; border : 0 ; margin : 0 ; padding : 5 px 55 px 5 px 25 px ; height : auto ; width : auto }
. menu_list . menu_item . push_button_pressed : before { content : '✔' ; position : absolute ; display : block ; left : 7 px ; top : 3 px ; width : 20 px ; height : 20 px }
. menu_list . menu_item : hover , . menu_list . menu_item . push_button_pressed : hover { background : rgba ( 0 , 0 , 0 , 0.1 ) ; color : #000 }
. menu_list . menu_item . disabled : hover , . menu_list . menu_item . push_button_pressed . disabled : hover { background : transparent ; color : #333 }
. menu_list . menu_item . push_button_pressed { background : transparent ; border : 0 ; width : auto ; height : auto ; margin : 0 }
. menu_list . menu_item span { display : block ; position : absolute ; right : 10 px ; padding : 5 px ; background : rgba ( 0 , 0 , 0 , 0.1 ) ; top : 6 px ; height : 10 px ; text-align : center ; font-size : 10 px ; line-height : 120 % }
# svgcanvas { line-height : normal ; display : inline-block ; background-color : #a0a0a0 ; text-align : center ; vertical-align : middle ; width : 640 px ; height : 480 px ; position : relative ; background : #3f3f3c }
2012-07-18 02:02:44 +00:00
# rulers > div { position : absolute ; background : #2f2f2c ; z-index : 1 ; overflow : hidden ; -webkit- font-smoothing : none }
# rulers # ruler_corner { top : 30 px ; left : 50 px ; width : 15 px ; height : 15 px ; border : solid #444 1 px ; z-index : 2 }
2012-07-24 02:30:12 +00:00
# ruler_x { height : 15 px ; top : 30 px ; left : 66 px ; right : 175 px ; border-top : solid #444 1 px ; border-right : solid #444 1 px }
2012-07-18 02:02:44 +00:00
# ruler_x_cursor { height : 15 px ; border-right : dotted #999 1 px ; position : absolute ; background : #2f2f2c }
# ruler_y_cursor { width : 15 px ; border-top : dotted #999 1 px ; position : absolute ; background : #2f2f2c }
# rulers . moved # ruler_corner , # rulers . moved # ruler_x { top : 101 px }
# ruler_y { width : 15 px ; top : 46 px ; left : 50 px ; bottom : 40 px ; border-left : solid #444 1 px ; border-bottom : solid #444 1 px }
# rulers . moved # ruler_y { top : 116 px }
# ruler_x canvas : first-child { margin-left : -16 px }
# ruler_x canvas { float : left }
# ruler_y canvas { margin-top : -16 px }
# ruler_x > div , # ruler_y > div { overflow : hidden }
2012-07-25 06:32:18 +00:00
div # palette_holder { display : block ; overflow : hidden ; height : 31 px ; margin-top : 10 px ; position : relative ; z-index : 2 ; float : left }
. touch div # palette_holder { height : 40 px ; margin-top : 0 }
div # palette_holder # palette . palette_item : first-child { background : #fff }
div # palette_holder # palette . palette_item { cursor : pointer }
# color_tools { position : relative ; width : 48 px ; height : 48 px ; margin : 6 px 6 px 0 6 px }
. touch # color_tools { width : auto ; height : auto }
2012-07-24 02:30:12 +00:00
# tool_fill { position : absolute ; top : 0 ; left : 0 ; z-index : 1 }
. touch # tool_fill { position : static ; width : 36 px ; height : 36 px ; margin-bottom : 10 px }
2012-07-18 02:02:44 +00:00
# tool_fill . active , # tool_stroke . active { z-index : 2 }
2012-07-24 02:30:12 +00:00
# tool_stroke { top : 14 px ; left : 14 px }
. touch # tool_fill . active , . touch # tool_stroke . active { outline : 4 px solid #09f }
# tool_fill , # tool_stroke , # tool_canvas { box-shadow : 0 0 0 1 px #2f2f2c ; position : absolute }
. touch # tool_fill , . touch # tool_stroke , . touch # tool_canvas { position : relative ; top : 0 ; left : 0 }
2012-07-18 02:02:44 +00:00
# color_canvas_tools { float : left ; cursor : pointer }
2012-07-24 02:30:12 +00:00
# tool_fill . color_block { width : 24 px ; height : 24 px ; overflow : hidden ; border : solid #ccc 1 px }
2012-07-25 06:32:18 +00:00
. touch # tool_eyedropper { margin-top : 6 px }
2012-07-24 02:30:12 +00:00
. touch # tool_fill . color_block { width : 36 px ; height : 36 px }
. touch # tool_fill . color_block svg { width : 36 px !important ; height : 36 px !important }
2012-07-25 06:32:18 +00:00
. touch # tool_switch { display : none }
2012-08-09 08:41:12 +00:00
# use_panel . tool_button , # path_node_panel . tool_button { color : #999 ; border : solid #3f3f3c 1 px ; border-radius : 3 px ; padding : 3 px 10 px 3 px 40 px ; background : transparent ; position : relative ; margin-top : 10 px ; width : 90 px ; height : 23 px ; line-height : 24 px }
# use_panel . tool_button { padding-left : 10 px ; margin-bottom : 10 px ; width : 124 px }
2012-07-30 19:29:08 +00:00
# path_node_panel . tool_button img , # path_node_panel . tool_button svg { position : absolute ; left : 5 px ; top : 3 px }
2012-07-25 06:32:18 +00:00
# color_tools # tool_fill . color_block : hover , # color_tools # tool_stroke . color_block : hover { border-color : #fff }
# color_tools # tool_fill . color_block > div { position : absolute ; top : 0 ; left : 0 }
. touch # color_tools # tool_fill . color_block > div { position : relative }
# color_tools # tool_fill . color_block # fill_bg , # color_tools # tool_stroke . color_block # stroke_bg { position : absolute ; top : 1 px ; left : 1 px ; bottom : 1 px ; right : 1 px ; background : #fff }
. touch # color_tools # tool_fill . color_block # fill_bg , . touch # color_tools # tool_stroke . color_block # stroke_bg { width : 36 px ; height : 36 px ; right : auto ; bottom : auto }
2012-07-24 02:30:12 +00:00
. touch # tool_stroke { position : relative ; top : 0 ; left : 0 ; z-index : 0 }
2012-07-18 02:02:44 +00:00
# stroke_color : after { content : '' ; position : absolute ; display : block ; width : 8 px ; height : 8 px ; left : 8 px ; top : 8 px ; background : #ccc ; box-shadow : 0 0 0 1 px #000 }
2012-07-24 02:30:12 +00:00
. touch # stroke_color : after { height : 14 px ; left : 10 px ; position : absolute ; top : 10 px ; width : 14 px }
2012-07-25 06:32:18 +00:00
# color_tools # tool_switch { cursor : pointer ; opacity : .7 ; width : 11 px ; height : 11 px ; background : transparent url ( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQA2LzE0LzEyP6j5+gAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAB4SURBVBiVjZHRCYUwDEVvxIF0kZKN7EjiIrrReR/PSNSKXiikcE5JUtMeADMzXQIcdRfgFWqlyyB7ap1wL+0HAnIv1DqRJUBxTkLUWXIvh9AHkIeb58UkIUnDMH4ZR0otCfhv4ynbtp7ut722ZniFG8L9xx4Ek6QfN9huARmYwR0AAAAASUVORK5CYII= ) top left no-repeat ; position : absolute ; top : -2 px ; left : 28 px }
# color_tools # cross : hover { opacity : 1 }
# color_tools # tool_stroke : hover # stroke_color : after { background : #fff }
# color_tools # tool_stroke . color_block { width : 24 px ; height : 24 px ; overflow : hidden ; border : solid #ccc 1 px }
. touch # color_tools # tool_stroke . color_block { width : 36 px ; height : 36 px }
# color_tools # tool_stroke . color_block > div { position : absolute ; bottom : 0 ; right : 0 }
. touch # color_tools # tool_stroke . color_block > div { position : relative }
# color_tools . icon_label { padding : 0 ; width : 24 px ; height : 100 % ; cursor : pointer ; position : absolute }
# linkLabel > svg { height : 20 px ; padding-top : 4 px }
2012-07-25 08:56:15 +00:00
div # palette { float : left ; height : 16 px }
2012-08-09 08:41:12 +00:00
div # workarea { display : inline-table - cell ; position : absolute ; top : 30 px ; left : 50 px ; bottom : 40 px ; right : 175 px ; background-color : #444 ; overflow : auto ; text-align : center ; -webkit- transition : -webkit- transform 500 ms cubic-bezier ( 0.13 , 0.66 , 0.24 , 0.92 ) ; -moz- transition : -moz- transform 500 ms cubic-bezier ( 0.13 , 0.66 , 0.24 , 0.92 ) ; -o- transition : -o- transform 500 ms cubic-bezier ( 0.13 , 0.66 , 0.24 , 0.92 ) ; -ms- transition : -ms- transform 500 ms cubic-bezier ( 0.13 , 0.66 , 0.24 , 0.92 ) ; transition : transform 500 ms cubic-bezier ( 0.13 , 0.66 , 0.24 , 0.92 ) }
2012-07-25 06:32:18 +00:00
. touch div # workarea { top : 40 px }
div . palette_item { height : 16 px ; width : 16 px ; float : left }
. touch div . palette_item { height : 30 px ; border-top : solid #2f2f2c 5 px ; border-bottom : solid #2f2f2c 5 px ; width : 19 px ; float : left }
. menu . menu_list { display : none ; position : absolute }
. tool_button : hover , . push_button : hover , . buttonup : hover , . buttondown , . tool_button_current , . push_button_pressed { background-color : #fff }
. tool_button . disabled , . tool_button . disabled : hover { opacity : .3 ; background-color : #aaa }
# tools_left . tool_button { background : #2f2f2c ; position : relative }
# tools_left . tool_button . loaded { background : #ccc }
# tools_left . tool_button . loaded : hover { background : #fff }
2012-07-26 23:29:22 +00:00
# tools_left . tool_button : after , # tools_left . tool_button_current : after { position : absolute ; content : '' ; border : solid #2f2f2c 2 px ; top : -1 px ; left : -1 px ; width : 26 px ; height : 26 px ; z-index : 0 }
2012-07-25 06:32:18 +00:00
# tools_left . tool_button_current { background-color : #0cf }
# main_icon span { position : absolute ; width : 100 % ; height : 100 % ; display : block ; z-index : 2 }
2012-08-09 08:41:12 +00:00
# tools_top { position : absolute ; width : 160 px ; height : 100 % ; background : #2f2f2c ; right : 0 ; top : 20 px ; border-bottom : 0 ; overflow : visible ; padding : 0 0 0 15 px }
2012-07-25 06:32:18 +00:00
. touch # tools_top { top : 30 px }
label { display : block ; color : #999 }
2012-07-18 02:02:44 +00:00
div # font-selector { width : 140 px ; height : 300 px ; overflow : auto ; margin : 0 auto ; position : absolute ; top : 27 px ; right : 0 ; border : 1 px solid black ; padding : 10 px ; display : none ; background-color : white ; z-index : 10 ; border-radius : 3 px ; box-shadow : 0 5 px 10 px rgba ( 0 , 0 , 0 , 0.7 ) }
div # font-selector img { width : 100 % }
div # font-selector . font-item { border-bottom : solid #ddd 1 px ; padding : 5 px 10 px ; margin : 0 -10 px }
div # font-selector . font-item : hover { background-color : #eee }
2012-07-25 06:32:18 +00:00
# tools_top # marker_panel * { float : left }
# tools_top # marker_panel h4 { float : none }
# tools_top # marker_panel . dropdown . icon_label { width : 36 px ; height : 20 px ; margin-top : 2 px ; border : solid #3f3f3c 1 px ; text-align : center }
# tools_top # marker_panel . dropdown button { margin-top : 2 px }
# tools_top # marker_panel # marker_panel_title { float : none ; color : #fff ; margin-bottom : 3 px }
# tools_top # marker_panel . dropdown . icon_label img { float : none }
# color_picker input [ type = text ] , # color_picker input [ type = number ] { width : 30 px ; background : #fff }
. dropdown_set input [ type = text ] , . dropdown_set input [ type = number ] { width : 50 px }
input [ type = text ] . wide , input [ type = number ] . wide { width : 110 px }
input [ type = text ] . tuco , input [ type = number ] . tuco { width : 150 px }
input [ type = submit ] , input [ type = button ] , button { background : #4f80ff ; color : #fff ; border-radius : 3 px ; padding : 7 px 17 px ; border : 0 ; line-height : 140 % ; font-size : 14 px ; font-weight : bold ; font-family : sans-serif }
input [ type = submit ] : hover , button : hover { box-shadow : inset 0 3 px 10 px rgba ( 255 , 255 , 255 , 0.1 ) , inset 0 -3 px 10 px rgba ( 0 , 0 , 0 , 0.2 ) }
input [ type = submit ] : hover , button : hover { background : #2f84c1 }
2012-07-25 23:02:29 +00:00
input [ type = submit ] : active , button : active { box-shadow : inset 0 2 px 2 px rgba ( 0 , 0 , 0 , 0.2 ) ; border-bottom : solid rgba ( 255 , 255 , 255 , 0.1 ) 1 px }
2012-08-09 08:41:12 +00:00
# tools_left { position : absolute ; border-right : 0 ; width : 50 px ; top : 30 px ; bottom : 0 ; left : 0 ; background : #2f2f2c ; z-index : 4 }
2012-07-18 02:02:44 +00:00
# workarea . wireframe # svgcontent * { fill : none ; stroke : #000 ; stroke-width : 1 px ; stroke-opacity : 1.0 ; stroke-dasharray : 0 ; opacity : 1 ; pointer-events : stroke ; vector-effect : non-scaling-stroke ; filter : none }
# workarea . wireframe # svgcontent text { fill : #000 ; stroke : none }
# workarea . wireframe # canvasBackground > rect { fill : #FFF !important }
# workarea # canvasBackground > rect { stroke : transparent !important }
. context_panel { display : none }
# canvas_panel { display : block }
2012-07-25 06:32:18 +00:00
# multiselected_panel . selected_tool { vertical-align : 12 px }
2012-07-18 02:02:44 +00:00
# cur_context_panel { position : absolute ; top : 47 px ; left : 68 px ; line-height : 22 px ; overflow : auto ; border-bottom : 0 ; border-right : 0 ; padding-left : 5 px ; font-size : 12 px ; background : black ; color : #999 ; opacity : .5 ; padding : 0 10 px ; border-radius : 0 10 px 10 px 0 }
2012-07-25 06:32:18 +00:00
# cur_context_panel a { float : none ; text-decoration : none ; color : #fff }
# cur_context_panel a : hover { text-decoration : underline }
# tools_left . tool_button , # tools_left . tool_button_current { position : relative ; z-index : 11 }
. flyout_arrow_horiz { position : absolute ; bottom : -1 px ; right : 0 ; z-index : 10 }
2012-07-18 02:02:44 +00:00
. dropdown { position : relative ; float : left }
2012-07-25 06:32:18 +00:00
. dropdown button { width : 21 px ; height : 22 px ; padding : 0 3 px 0 3 px ; border : 0 ; background-color : #555 ; border-radius : 0 2 px 2 px 0 ; margin-left : -1 px ; position : relative }
. dropdown button : hover { background-color : #666 }
. dropdown button : after { content : '' ; position : absolute ; border : solid transparent 4 px ; border-top-color : #999 ; top : 9 px ; left : 6 px }
2012-07-18 02:02:44 +00:00
. dropdown button . down { border-left : 1 px solid #808080 ; border-top : 1 px solid #808080 ; border-right : 1 px solid #fff ; border-bottom : 1 px solid #fff ; background-color : #b0b0b0 }
. dropdown ul { list-style : none ; position : absolute ; margin : 0 ; padding : 0 ; left : -80 px ; top : 26 px ; z-index : 4 ; display : none }
. dropup ul { top : auto ; bottom : 26 px ; border-radius : 3 px ; box-shadow : 0 5 px 10 px #000 }
. dropup ul : after { content : '' ; display : block ; position : absolute ; bottom : -10 px ; right : 50 % ; top : auto ; width : 0 ; height : 0 ; border : solid transparent 5 px ; border-top-color : #fff }
. dropdown li { display : block ; width : 120 px ; padding : 5 px 10 px ; color : #333 ; background : #fff ; margin : 0 ; line-height : 16 px }
. dropdown li : first-child { border-radius : 3 px 3 px 0 0 }
. dropdown li : last-child { border-radius : 0 0 3 px 3 px }
. dropdown li : hover { background-color : #ddd ; color : #000 }
. dropdown li . special { padding : 10 px ; background : white ; border : 0 ; box-shadow : 0 3 px 10 px black ; border-radius : 3 px !important }
. dropdown li . special : after { content : '' ; display : block ; position : absolute ; top : -10 px ; right : 50 % ; border : solid transparent 5 px ; border-bottom-color : #fff }
. dropdown li . special . down : after { bottom : -10 px ; right : 50 % ; top : auto ; border : solid transparent 5 px ; border-top-color : #fff }
2012-07-25 06:32:18 +00:00
. tool_button , . push_button , . tool_button_current , . push_button_pressed { height : 27 px ; width : 27 px ; border : solid #2f2f2c 8 px ; border-left-width : 13 px ; margin : 0 ; background-color : #ddd ; cursor : pointer }
# main_menu li # tool_open , # main_menu li # tool_import { position : relative ; overflow : hidden }
2012-07-18 02:02:44 +00:00
# tool_image { overflow : hidden }
2012-08-09 08:41:12 +00:00
# tool_open input , # tool_import input , # tool_import_bitmap input { position : absolute ; opacity : 0 ; font-size : 10 em ; top : -5 px ; right : -5 px ; margin : 0 ; cursor : pointer }
2012-07-25 06:32:18 +00:00
. disabled { opacity : .5 ; cursor : default }
. width_label { padding-right : 5 px }
2012-07-18 02:02:44 +00:00
# text { position : absolute ; left : -9999 px }
2012-07-25 06:32:18 +00:00
# tool_bold span , # tool_italic span { position : absolute ; width : 100 % ; height : 100 % ; top : 0 ; left : 0 ; background : #ccc ; opacity : 0 }
2012-07-18 02:02:44 +00:00
# url_notice { padding-top : 4 px ; display : none }
2012-07-25 06:32:18 +00:00
# color_picker { position : absolute ; display : none ; background : #fff ; height : 350 px ; border-radius : 3 px ; z-index : 5 ; box-shadow : 0 5 px 10 px #000 ; width : 530 px }
. tools_flyout { position : absolute ; display : none ; cursor : pointer ; width : 385 px ; z-index : 10 ; left : 47 px !important ; height : 324 px ; background : #fff ; border-radius : 5 px ; box-shadow : 0 5 px 10 px rgba ( 0 , 0 , 0 , 0.5 ) }
. tools_flyout_v { position : absolute ; display : none ; cursor : pointer ; width : 30 px }
. tools_flyout . tool_button { float : left ; background-color : #fff ; height : 24 px ; width : 24 px }
2012-08-09 08:41:12 +00:00
# tools_bottom { position : absolute ; left : 50 px ; right : 0 ; bottom : 0 ; height : 40 px ; overflow : visible ; background : #2f2f2c }
2012-07-25 06:32:18 +00:00
# tools_bottom_1 { width : 115 px ; float : left }
# tools_bottom_2 { position : relative ; float : left ; margin-top : 5 px }
2012-07-18 02:02:44 +00:00
# tools_bottom input [ type = text ] { width : 3.2 em }
2012-07-25 06:32:18 +00:00
# tools_top h4 { color : #fff ; font-weight : normal ; margin : 0 ; padding : 10 px 0 5 px 0 }
2012-07-18 02:02:44 +00:00
# tools_top . dropdown . icon_label { border : 1 px solid transparent ; height : auto }
2012-07-25 06:32:18 +00:00
# tools_top . multiselected # align_tools { display : none }
# tools_top . multiselected # multiselected_panel { display : block !important }
# tools_top . multiselected # multiselected_panel . hidable { display : none }
. draginput_cell { float : left ; height : 26 px ; height : 26 px ; border : solid #3f3f3c 10 px ; outline : solid #2f2f2c 1 px ; background : #ddd ; cursor : pointer ; position : relative }
. draginput_cell : hover { background : #fff }
. draginput_cell : after { content : '' ; position : absolute ; top : 0 ; left : 0 ; border : solid #3f3f3c 1 px ; height : 26 px ; width : 26 px ; z-index : 0 }
. align_buttons . draginput_cell : nth-child ( 1 ) { border-radius : 3 px 0 0 0 }
. align_buttons . draginput_cell : nth-child ( 3 ) { border-radius : 0 3 px 0 0 }
. align_buttons . draginput_cell : nth-child ( 4 ) { border-radius : 0 0 0 3 px }
. align_buttons . draginput_cell : nth-child ( 6 ) { border-radius : 0 0 3 px 0 }
2012-07-24 12:42:34 +00:00
. align_buttons . push_button { display : block ; float : left }
2012-07-18 02:02:44 +00:00
# option_lists ul { display : none ; position : absolute ; height : auto ; z-index : 3 ; margin : 0 ; list-style : none ; padding-left : 0 }
# option_lists . optcols2 { width : 70 px ; margin-left : -15 px }
# option_lists . optcols3 { width : 192 px ; margin-left : -105 px ; margin-top : -25 px ; background : #fff ; padding : 5 px ; box-shadow : 0 5 px 10 px #000 ; border-radius : 3 px }
# option_lists . optcols3 : after { content : '' ; display : block ; position : absolute ; top : -10 px ; right : 70 px ; border : solid transparent 5 px ; border-bottom-color : #fff }
2012-07-25 06:32:18 +00:00
# option_lists . tool_button , # option_lists . push_button , # option_lists . tool_button_current , # option_lists . push_button_pressed { border : 0 ; background : transparent }
# option_lists . tool_button : hover { background : #ddd }
# option_lists ul li . current { background-color : #f4e284 }
2012-07-18 02:02:44 +00:00
# option_lists . optcols4 { width : 130 px ; margin-left : -44 px }
# option_lists ul [ class ^ = optcols ] li { float : left }
2012-07-25 06:32:18 +00:00
ul li . current { background-color : #f4e284 }
# option_lists ul li { margin : 0 ; border-radius : 0 ; -moz- border-radius : 0 ; -webkit- border-radius : 0 }
# copyright { text-align : right ; padding-right : .3 em }
2012-07-18 02:02:44 +00:00
# svg_source_editor { display : none }
# svg_source_editor # svg_source_overlay { position : absolute ; top : 0 ; right : 0 ; left : 0 ; bottom : 0 ; background-color : black ; opacity : .6 ; z-index : 5 }
2012-07-29 01:37:18 +00:00
# svg_source_editor # svg_source_container { position : absolute ; top : 30 px ; left : 100 px ; right : 100 px ; bottom : 30 px ; background-color : #fff ; border-radius : 3 px ; opacity : 1.0 ; text-align : center ; z-index : 6 ; padding : 15 px 0 }
# svg_source_editor # svg_source_textarea { position : absolute ; top : 15 px ; bottom : 55 px ; left : 15 px ; right : 12 px ; padding : 5 px ; font-size : 12 px }
# svg_source_editor # tool_source_back { position : absolute ; bottom : 45 px ; left : 15 px ; right : 15 px }
# svg_source_editor # tool_source_back # tool_source_save { display : block ; position : absolute ; right : 0 }
# svg_source_editor # tool_source_back # tool_source_cancel { display : block ; position : absolute ; left : 0 }
2012-07-25 06:32:18 +00:00
button . cancel , input . Cancel , input . cancel , input . jGraduate_Cancel , button . cancel { -webkit- appearance : none ; background-color : #999 ; box-shadow : 0 0 1 px rgba ( 0 , 0 , 0 , 0.5 ) ; margin : 0 }
2012-07-18 02:02:44 +00:00
# shape_buttons { overflow : auto ; top : 0 ; bottom : 0 ; left : 110 px ; right : 0 ; position : absolute ; vertical-align : top }
# shape_cats { min-width : 110 px ; display : block ; position : absolute ; left : 0 ; top : 0 ; height : 300 px ; background : #eee ; border-radius : 3 px 0 0 3 px ; z-index : 2 }
# shape_cats > div { line-height : 1 em ; padding : 0 .5 em ; border-bottom : 1 px solid #ddd ; background : #e8e8e8 ; color : #444 ; height : 26 px ; line-height : 26 px }
# shape_cats > div : first-child { border-radius : 3 px 0 0 0 }
# shape_cats > div : last-child { border-radius : 0 0 0 3 px }
# shape_cats div : hover { background : #efefef ; color : #000 }
# shape_cats div . current { font-weight : bold ; background : #3f3f3c ; color : #fff ; position : relative }
# shape_cats div . current : after { content : '' ; position : absolute ; right : -26 px ; top : 0 ; border : solid transparent 13 px ; border-left-color : #3f3f3c }
. toolbar_button button . svg_icon { display : none }
# dialog_box { display : none }
# dialog_box_overlay { background : black ; opacity : .5 ; height : 100 % ; left : 0 ; position : absolute ; top : 0 ; width : 100 % ; z-index : 6 }
2012-08-09 08:41:12 +00:00
# dialog_content { height : 95 px ; margin : 10 px 10 px 5 px 10 px ; overflow : auto ; text-align : left ; font-size : 13 px }
# dialog_buttons input : last-child { background : #999 !important ; position : absolute ; left : 10 px ; bottom : 10 px }
# dialog_buttons input : first-child { position : absolute ; right : 10 px ; bottom : 10 px }
2012-07-18 02:02:44 +00:00
# dialog_content . prompt { height : 75 px }
# dialog_content p { margin : 10 px ; line-height : 1.3 em }
2012-08-09 08:41:12 +00:00
# dialog_container { position : absolute ; left : 50 % ; top : 50 % ; width : 300 px ; margin-left : -150 px ; height : 150 px ; margin-top : -80 px ; position : fixed ; z-index : 50001 ; background : #fff }
# dialog_container , # dialog_content { border-radius : 3 px }
2012-07-18 02:02:44 +00:00
# dialog_buttons input [ type = text ] { width : 90 % ; display : block ; margin : 0 0 5 px 11 px }
# dialog_buttons input [ type = button ] { margin : 0 1 em }
. invisible { visibility : none }
. ui-slider { position : relative ; text-align : left }
. ui-slider . ui-slider-handle { position : absolute ; z-index : 2 ; width : 1.2 em ; height : 1.2 em ; cursor : default }
. ui-slider . ui-slider-range { position : absolute ; z-index : 1 ; font-size : .7 em ; display : block ; border : 0 }
. ui-slider-horizontal { height : .8 em }
. ui-slider-horizontal . ui-slider-handle { top : -.3 em ; margin-left : -.6 em }
. ui-slider-horizontal . ui-slider-range { top : 0 ; height : 100 % }
. ui-slider-horizontal . ui-slider-range-min { left : 0 }
. ui-slider-horizontal . ui-slider-range-max { right : 0 }
. ui-slider-vertical { width : .8 em ; height : 100 px }
. ui-slider-vertical . ui-slider-handle { left : -.3 em ; margin-left : 0 ; margin-bottom : -.6 em }
. ui-slider-vertical . ui-slider-range { left : 0 ; width : 100 % }
. ui-slider-vertical . ui-slider-range-min { bottom : 0 }
. ui-slider-vertical . ui-slider-range-max { top : 0 }
. ui-slider { background : #3f3f3c ; border-radius : 10 px }
. ui-slider-handle { box-shadow : 0 3 px 3 px rgba ( 0 , 0 , 0 , 0.3 ) ; border-radius : 30 px ; background : #fff ; background-image : -ms- linear-gradient ( top , #ccc 0 , #fff 100 % ) ; background-image : -moz- linear-gradient ( top , #ccc 0 , #fff 100 % ) ; background-image : -o- linear-gradient ( top , #ccc 0 , #fff 100 % ) ; background-image : -webkit- gradient ( linear , left top , left bottom , color-stop ( 0 , #ccc ) , color-stop ( 1 , #fff ) ) ; background-image : -webkit- linear-gradient ( top , #ccc 0 , #fff 100 % ) ; background-image : linear-gradient ( top , #ccc 0 , #fff 100 % ) }
. ui-slider-handle : focus { outline : 0 }
# shape_buttons { background : #fff ; border-radius : 0 3 px 3 px 0 ; padding : 10 px }
2012-07-25 06:32:18 +00:00
. tools_flyout . tool_button , . tools_flyout . tool_flyout { background : #fff ; width : 40 px ; height : 40 px ; margin : 5 px ; border-radius : 0 ; -moz- border-radius : 0 ; -webkit- border-radius : 0 ; border-width : 0 }
2012-07-25 08:56:15 +00:00
. contextMenu { position : absolute ; z-index : 99999 ; border : solid 1 px rgba ( 0 , 0 , 0 , .33 ) ; background : rgba ( 255 , 255 , 255 , .95 ) ; padding : 5 px 0 ; margin : 0 ; display : none ; font : 12 px / 15 px 'Lucida Sans' , 'Lucida Grande' , Helvetica , Verdana , sans-serif ; border-radius : 5 px ; -moz- border-radius : 5 px ; -moz- box-shadow : 2 px 5 px 10 px rgba ( 0 , 0 , 0 , .3 ) ; -webkit- box-shadow : 2 px 5 px 10 px rgba ( 0 , 0 , 0 , .3 ) ; box-shadow : 2 px 5 px 10 px rgba ( 0 , 0 , 0 , .3 ) }
. touch . contextMenu { border : solid 5 px rgba ( 0 , 0 , 0 , .7 ) ; padding : 0 ; margin : 0 0 0 20 px ; font : 18 px / 24 px sans-serif ; border-radius : 5 px ; -webkit- box-shadow : 2 px 5 px 20 px 3 px #000 ; box-shadow : 2 px 5 px 20 px rgba ( 0 , 0 , 0 , 0.5 ) }
. touch . contextMenu : after { content : '' ; width : 0 ; height : 0 ; border : solid transparent 10 px ; border-right-color : rgba ( 0 , 0 , 0 , .7 ) ; position : absolute ; top : 50 % ; left : -25 px ; margin-top : -10 px ; z-index : 1000 }
2012-07-18 02:02:44 +00:00
. contextMenu LI { list-style : none ; padding : 0 ; margin : 0 }
. contextMenu . shortcut { width : 115 px ; text-align : right ; float : right }
2012-07-25 08:56:15 +00:00
. touch . contextMenu . shortcut { display : none }
. touch . shortcut { display : none }
2012-07-18 02:02:44 +00:00
. contextMenu A { -moz- user-select : none ; -webkit- user-select : none ; color : #222 ; text-decoration : none ; display : block ; line-height : 20 px ; height : 20 px ; background-position : 6 px center ; background-repeat : no-repeat ; outline : 0 ; padding : 0 15 px 1 px 20 px }
2012-07-25 08:56:15 +00:00
. touch . contextMenu A { padding : 0 15 px ; border-bottom : # ; font-weight : bold ; border-top : solid 1 px #e3e3e3 ; height : 40 px ; line-height : 40 px ; min-width : 200 px }
2012-07-18 02:02:44 +00:00
. contextMenu LI . hover A { background-color : #2e5dea ; color : white ; cursor : default }
. contextMenu LI . disabled A { color : #999 }
2012-07-25 08:56:15 +00:00
. touch . contextMenu LI . disabled A { display : none }
2012-07-18 02:02:44 +00:00
. contextMenu LI . hover . disabled A { background-color : transparent }
. contextMenu LI . separator { border-top : solid 1 px #e3e3e3 ; padding-top : 5 px ; margin-top : 5 px }
2012-07-25 08:56:15 +00:00
. touch . contextMenu LI . separator { border-top : 0 ; margin : 0 ; padding : 0 }
2012-07-18 02:02:44 +00:00
# menu { display : none ; position : absolute ; top : 0 ; left : 0 ; right : 0 ; height : 30 px ; background : #000 ; z-index : 10 ; color : #fff }
# workarea . rect , # workarea . line , # workarea . ellipse , # workarea . path , # workarea . shapelib { cursor : crosshair }
# workarea . text { cursor : text }
2012-07-18 18:00:38 +00:00
# workarea . eyedropper { cursor : url ( images/eyedropper.png ) 0 16 , crosshair }
2012-07-18 02:02:44 +00:00
# workarea . fhpath { cursor : url ( images/pencil_cursor.png ) 0 20 , crosshair }
# workarea . rotate * { cursor : url ( images/rotate.png ) 12 12 , auto }
2012-07-24 02:30:12 +00:00
# workarea . select text , # workarea . multiselect text { cursor : default }
2012-07-18 02:02:44 +00:00
# workarea . n-resize * { cursor : n-resize !important }
# workarea . e-resize * { cursor : e-resize !important }
# workarea . w-resize * { cursor : w-resize !important }
# workarea . s-resize * { cursor : s-resize !important }
# workarea . ne-resize * { cursor : ne-resize !important }
# workarea . se-resize * { cursor : se-resize !important }
# workarea . nw-resize * { cursor : nw-resize !important }
# workarea . sw-resize * { cursor : sw-resize !important }
2012-07-24 02:30:12 +00:00
# workarea . copy { cursor : copy }
2012-07-18 02:02:44 +00:00
# workarea . zoom { cursor : crosshair ; cursor : -moz- zoom-in ; cursor : -webkit- zoom-in }
# workarea . zoom . out { cursor : crosshair ; cursor : -moz- zoom-out ; cursor : -webkit- zoom-out }
# selectorRubberBand { shape-rendering : crispEdges }
. clearfix : before , . clearfix : after { content : "" ; display : table }
. clearfix : after { clear : both }
. clearfix { * zoom : 1 }
2012-07-25 06:32:18 +00:00
# group_title { display : none }
2012-07-19 14:54:50 +00:00
# base_unit_container { display : none ; position : absolute ; z-index : 20 }
2012-07-25 06:32:18 +00:00
. draginput { background : #3f3f3c ; border-radius : 3 px ; -webkit- font-smoothing : antialiased ; width : 70 px ; height : 70 px ; display : block ; position : relative ; float : left ; margin : 0 5 px 5 px 0 }
. draginput . caret { border : solid transparent 5 px ; border-top-color : #999 ; position : absolute ; width : 0 ; height : 0 ; right : 5 px ; margin-top : -2 px ; top : 50 % }
. draginput label { margin : 28 px 10 px 0 5 px ; font-size : 14 px ; color : white ; font-weight : bold ; font-family : sans-serif }
. draginput label # resolution_label , . draginput label # seg_type_label { font : bold 12 px / 110 % sans-serif ; position : absolute ; left : auto ; right : 10 px ; z-index : 0 ; text-align : right }
. draginput label # seg_type_label { margin-top : 40 px }
. draginput label # seg_type_label . caret { top : 66 % }
. draginput label # resolution_label . pull { position : relative ; left : -15 px }
. draginput label # resolution_label span { right : -13 px ; left : auto ; font-size : 16 px ; top : 2 px ; font-weight : bold ; color : white }
. touch . draginput . active : after { content : attr ( data - value ) ; display : block ; position : absolute ; background : #fff ; font-size : 16 px ; top : 0 ; width : 30 px ; left : -50 px ; padding : 0 5 px ; color : #333 ; z-index : 10 ; font-family : sans-serif ; font-weight : bold ; text-align : right ; padding-right : 10 px ; height : 20 px ; line-height : 20 px ; letter-spacing : -1 px }
. touch . draginput . active : before { content : '' ; height : 0 ; width : 0 ; position : absolute ; top : 5 px ; left : -5 px ; border : solid transparent 5 px ; border-left-color : #fff }
2012-07-26 05:52:06 +00:00
. draginput input { border : 0 ; background : transparent ; font : 24 px / normal sans-serif ; text-align : center ; color : #4f80ff ; padding : 30 px 0 16 px ; width : 100 % ; height : 24 px ; position : relative ; z-index : 2 }
2012-07-25 10:27:26 +00:00
. draginput . twocol { width : 145 px }
2012-07-26 22:10:49 +00:00
# tool_font_family . caret { right : 40 px ; top : 55 % }
# tool_font_family select { width : 110 px }
# tool_bold , # tool_italic { font : bold 20 px / 35 px serif ; text-align : center ; position : absolute ; padding : 0 ; color : #ccc ; background : transparent ; border : 0 ; width : 35 px ; height : 35 px ; margin : 0 ; top : 0 ; right : 0 }
2012-07-29 01:24:41 +00:00
# tool_italic { border-top : solid #2f2f2c 2 px ; top : 35 px ; font-weight : bold ; font-style : italic ; font-size : 24 px }
2012-07-26 22:10:49 +00:00
# tool_bold : hover , # tool_italic : hover { color : #fff }
# tool_bold . active , # tool_italic . active { color : #50a0ff }
# preview_font { font-size : 20 px ; color : #fff ; height : 70 px ; line-height : 75 px ; padding : 0 0 0 10 px ; white-space : nowrap ; width : 100 px ; overflow : hidden ; border-right : solid #2f2f2c 2 px ; position : relative }
# preview_font : after { content : '' ; position : absolute ; right : 0 ; top : 3 px ; bottom : 3 px ; width : 15 px ; border-right : solid #3f3f3c 10 px ; background : transparent url ( data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzU4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjM2YzZjNjIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMzZjNmM2MiIG9mZnNldD0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODApIiAvPjwvc3ZnPg== ) }
2012-07-26 05:52:06 +00:00
. 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 }
2012-07-25 06:32:18 +00:00
. draginput span { font : 11 px / 130 % sans-serif ; color : #ccc ; display : block ; position : absolute ; top : 5 px ; left : 5 px ; text-align : left }
. draginput . error { background : #900 }
. draginput . error input { color : #fff }
. draginput . stroke_tool { text-align : center }
2012-07-25 10:27:26 +00:00
. draginput select { -webkit- appearance : none ; opacity : 0 ; display : block ; position : absolute ; height : 100 % ; width : 100 % ; margin : 0 ; z-index : 1 ; top : 0 ; left : 0 }
2012-07-24 02:30:12 +00:00
. draginput_cursor { position : absolute ; top : 50 % ; width : 100 % ; border-top : solid rgba ( 50 , 100 , 200 , 0.25 ) 3 px ; margin-top : -2 px ; z-index : 0 }
2012-07-25 06:32:18 +00:00
. 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 }
2012-07-26 22:10:49 +00:00
. draginput input : focus { background : #50a0ff ; color : #fff ; outline : 0 ; box-shadow : 0 0 5 px 2 px #50a0ff }
2012-07-25 06:32:18 +00:00
. draginput input : focus + span { z-index : 10 ; color : #fff }
2012-07-25 10:47:21 +00:00
. draginput . push_bottom { bottom : 0 ; position : absolute }
2012-07-25 06:32:18 +00:00
# zoom_label { height : 20 px ; background : transparent ; cursor : default !important ; width : auto ; padding : 0 10 px ; margin : 0 }
# zoom_panel { padding : 9 px 0 ; right : 175 px ; position : absolute }
2012-07-30 19:29:08 +00:00
# zoom_label img , # zoom_label svg { width : 16 px ; height : 16 px }
# logo svg { pointer-events : none }
2012-07-25 06:32:18 +00:00
# zoomLabel { width : 16 px ; height : 16 px ; cursor : pointer ; background : #ccc }
# zoomLabel : after { content : '' ; position : absolute ; border-left : solid #2f2f2c 1 px ; left : 0 ; height : 16 px }
# zoom_label input { color : #ccc ; font-size : 13 px ; height : auto ; width : auto ; padding : 0 ; cursor : default ; position : static }
# zoom_label span { top : 0 ; left : 0 }
2012-07-26 05:52:06 +00:00
body . dragging * { cursor : url ( images/dragging.png ) , move ; cursor : -webkit- grabbing ; cursor : -moz- grabbing }
body . drag * { cursor : url ( images/dragging.png ) , move ; cursor : -webkit- grabbing ; cursor : -moz- grabbing }
2012-07-25 06:32:18 +00:00
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 : 60 px ; height : 40 px ; margin : 23 px 5 px 5 px 5 px ; position : relative ; overflow : hidden }
# color_canvas_tools { display : block }
# tool_angle_indicator { width : 50 px ; height : 50 px ; border-radius : 50 px ; background : rgba ( 255 , 255 , 255 , 0.05 ) ; position : absolute ; bottom : 2 px ; left : 10 px }
2012-07-26 22:10:49 +00:00
# tool_angle_indicator_cursor { width : 4 px ; height : 25 px ; border-top : solid #50a0ff 3 px ; position : absolute ; margin : 0 0 0 23 px ; -webkit- transform-origin : 50 % 0 ; -moz- transform-origin : 50 % 0 ; -o- transform-origin : 50 % 0 ; -ms- transform-origin : 50 % 0 ; transform-origin : 50 % 0 }
2012-07-27 17:13:52 +00:00
# stroke_style_label { font-size : 30 px ; margin-top : 33 px ; letter-spacing : -1 px }
. stroke_tool . caret { top : 60 % }
# tool_align_relative { position : absolute ; top : -5 px ; left : 0 ; right : 20 px ; display : block }
# tool_align_relative select { width : 100 % ; display : block }
2012-07-24 02:30:12 +00:00
INPUT . spin-button { background : transparent url ( 'spinner.svg' ) right top no-repeat ; background-size : 17 px 54 px }
INPUT . spin-button . up { cursor : pointer ; background-position : 100 % -20 px }
INPUT . spin-button . down { cursor : pointer ; background-position : 100 % -40 px }
