svg-editor.css 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419
  1. body {
  2. background: #D0D0D0;
  3. }
  4. html, body, div{
  5. -webkit-user-select: text;
  6. -khtml-user-select: text;
  7. -moz-user-select: text;
  8. -o-user-select: text;
  9. user-select: text;
  10. /* this will work for QtWebKit in future */
  11. -webkit-user-drag: text;
  12. }
  13. #browser-not-supported {
  14. font-size: 0.8em;
  15. font-family: Verdana, Helvetica, Arial;
  16. color: #000000;
  17. }
  18. #svg_editor * {
  19. transform-origin: 0 0;
  20. -moz-transform-origin: 0 0;
  21. -o-transform-origin: 0 0;
  22. -webkit-transform-origin: 0 0;
  23. }
  24. #svg_editor {
  25. font-size: 8pt;
  26. font-family: Verdana, Helvetica, Arial;
  27. color: #000000;
  28. }
  29. #svg_editor a {
  30. color: #0000FF;
  31. }
  32. #svg_editor hr {
  33. border: none;
  34. border-bottom: 1px solid #808080;
  35. }
  36. #svg_editor select {
  37. margin-top: 4px;
  38. }
  39. #svg_editor #svgroot {
  40. -moz-user-select: none;
  41. -webkit-user-select: none;
  42. position: absolute;
  43. top: 0;
  44. left: 0;
  45. }
  46. #svg_editor #svgcanvas {
  47. line-height: normal;
  48. display: inline-block;
  49. background-color: #A0A0A0;
  50. text-align: center;
  51. vertical-align: middle;
  52. width: 640px;
  53. height: 480px;
  54. -apple-dashboard-region:dashboard-region(control rectangle 0px 0px 0px 0px); /* for widget regions that shouldn't react to dragging */
  55. position: relative;
  56. /*
  57. A subtle gradient effect in the canvas.
  58. Just experimenting - not sure if this is worth it.
  59. */
  60. background: -moz-radial-gradient(45deg,#bbb,#222);
  61. background: -webkit-gradient(radial, center center, 3, center center, 1000, from(#bbb), to(#222));
  62. }
  63. #rulers > div {
  64. position: absolute;
  65. background: #DDD;
  66. z-index: 1;
  67. overflow: hidden;
  68. }
  69. #ruler_corner {
  70. top: 76px;
  71. left: 41px;
  72. width: 15px;
  73. height: 15px;
  74. }
  75. #ruler_x {
  76. height: 15px;
  77. top: 76px;
  78. left: 56px;
  79. right: 30px;
  80. border-bottom: 1px solid;
  81. border-left: 1px solid #777;
  82. }
  83. #rulers.moved #ruler_corner,
  84. #rulers.moved #ruler_x {
  85. top: 101px;
  86. }
  87. #ruler_y {
  88. width: 15px;
  89. top: 91px;
  90. left: 41px;
  91. bottom: 78px;
  92. border-right: 1px solid;
  93. border-top: 1px solid #777;
  94. }
  95. #rulers.moved #ruler_y {
  96. top: 116px;
  97. }
  98. #ruler_x canvas:first-child {
  99. margin-left: -16px;
  100. }
  101. #ruler_x canvas {
  102. float: left;
  103. }
  104. #ruler_y canvas {
  105. margin-top: -16px;
  106. }
  107. #ruler_x > div,
  108. #ruler_y > div {
  109. overflow: hidden;
  110. }
  111. #svg_editor div#palette_holder {
  112. overflow-x: scroll;
  113. overflow-y: hidden;
  114. height: 31px;
  115. border: 1px solid #808080;
  116. border-top: none;
  117. margin-top: 2px;
  118. margin-left: 4px;
  119. position: relative;
  120. z-index: 2;
  121. }
  122. #svg_editor #stroke_bg,
  123. #svg_editor #fill_bg {
  124. height: 16px;
  125. width: 16px;
  126. margin: 1px;
  127. }
  128. #svg_editor #fill_color, #svg_editor #stroke_color {
  129. height: 16px;
  130. width: 16px;
  131. border: 1px solid #808080;
  132. cursor: pointer;
  133. margin-top: -18px;
  134. margin-left: 1px;
  135. }
  136. #tool_stroke select {
  137. margin-top: 0;
  138. }
  139. #svg_editor #color_tools .icon_label {
  140. padding: 3px 19%;
  141. width: 28px;
  142. height: 100%;
  143. cursor: pointer;
  144. }
  145. #svg_editor #group_opacityLabel,
  146. #svg_editor #zoomLabel {
  147. cursor: pointer;
  148. margin-right: 5px;
  149. padding-top: 4px
  150. }
  151. #svg_editor #linkLabel > svg {
  152. height: 20px;
  153. padding-top: 4px;
  154. }
  155. #color_tools .icon_label > * {
  156. position: relative;
  157. top: 1px;
  158. }
  159. #svg_editor div#palette {
  160. float: left;
  161. width: 672px;
  162. height: 16px;
  163. }
  164. #svg_editor div#workarea {
  165. display: inline-table-cell;
  166. position:absolute;
  167. top: 75px;
  168. left: 40px;
  169. bottom: 62px;
  170. right: 14px;
  171. background-color: #A0A0A0;
  172. border: 1px solid #808080;
  173. overflow: auto;
  174. text-align: center;
  175. }
  176. #svg_editor #sidepanels {
  177. display: inline-block;
  178. position:absolute;
  179. top: 75px;
  180. bottom: 60px;
  181. right: 0px;
  182. width: 2px;
  183. padding: 10px;
  184. border-color: #808080;
  185. border-style: solid;
  186. border-width: 1px;
  187. border-left: none;
  188. }
  189. #svg_editor #layerpanel {
  190. display: inline-block;
  191. position:absolute;
  192. top: 1px;
  193. bottom: 0px;
  194. right: 0px;
  195. width: 0px;
  196. overflow: auto;
  197. margin: 0px;
  198. -moz-user-select: none;
  199. -webkit-user-select: none;
  200. }
  201. /*
  202. border-style: solid;
  203. border-color: #666;
  204. border-width: 0px 0px 0px 1px;
  205. */
  206. #svg_editor #sidepanel_handle {
  207. display: inline-block;
  208. position: absolute;
  209. background-color: #D0D0D0;
  210. font-weight: bold;
  211. left: 0px;
  212. top: 40%;
  213. width: 1em;
  214. padding: 5px 1px 5px 5px;
  215. margin-left: 3px;
  216. cursor: pointer;
  217. border-radius: 5px;
  218. -moz-border-radius: 5px;
  219. -webkit-border-radius: 5px;
  220. -moz-user-select: none;
  221. -webkit-user-select: none;
  222. }
  223. #svg_editor #sidepanel_handle:hover {
  224. font-weight: bold;
  225. }
  226. #svg_editor #sidepanel_handle * {
  227. cursor: pointer;
  228. -moz-user-select: none;
  229. -webkit-user-select: none;
  230. }
  231. #svg_editor #layerbuttons {
  232. margin: 0px;
  233. padding: 0px;
  234. padding-left: 2px;
  235. padding-right: 2px;
  236. width: 125px;
  237. height: 20px;
  238. border-right: 1px solid #FFFFFF;
  239. border-bottom: 1px solid #FFFFFF;
  240. border-left: 1px solid #808080;
  241. border-top: 1px solid #808080;
  242. overflow: hidden;
  243. }
  244. #svg_editor .layer_button {
  245. width: 14px;
  246. height: 14px;
  247. padding: 1px;
  248. border-left: 1px solid #FFFFFF;
  249. border-top: 1px solid #FFFFFF;
  250. border-right: 1px solid #808080;
  251. border-bottom: 1px solid #808080;
  252. cursor: pointer;
  253. float: left;
  254. margin-right: 3px;
  255. }
  256. #svg_editor .layer_button:last-child {
  257. margin-right: 0;
  258. }
  259. #svg_editor .layer_buttonpressed {
  260. width: 14px;
  261. height: 14px;
  262. padding: 1px;
  263. border-right: 1px solid #FFFFFF;
  264. border-bottom: 1px solid #FFFFFF;
  265. border-left: 1px solid #808080;
  266. border-top: 1px solid #808080;
  267. cursor: pointer;
  268. }
  269. #svg_editor #layerlist {
  270. margin: 1px;
  271. padding: 0px;
  272. width: 127px;
  273. border-collapse: collapse;
  274. border: 1px solid #808080;
  275. background-color: #FFFFFF;
  276. }
  277. #svg_editor #layerlist tr.layer {
  278. background-color: #FFFFFF;
  279. margin: 0px;
  280. padding: 0px;
  281. }
  282. #svg_editor #layerlist tr.layersel {
  283. border: 1px solid #808080;
  284. background-color: #CCCCCC;
  285. }
  286. #svg_editor #layerlist td.layervis {
  287. width: 22px;
  288. cursor:pointer;
  289. }
  290. #svg_editor #layerlist td.layerinvis {
  291. background-image: none;
  292. cursor:pointer;
  293. }
  294. #svg_editor #layerlist td.layervis * {
  295. display: block;
  296. }
  297. #svg_editor #layerlist td.layerinvis * {
  298. display: none;
  299. }
  300. #svg_editor #layerlist td.layername {
  301. cursor: pointer;
  302. }
  303. #svg_editor #layerlist tr.layersel td.layername {
  304. font-weight: bold;
  305. }
  306. #svg_editor #selLayerLabel {
  307. white-space: nowrap;
  308. }
  309. #svg_editor #selLayerNames {
  310. display: block;
  311. }
  312. #svg_editor div.palette_item {
  313. height: 16px;
  314. width: 16px;
  315. float: left;
  316. }
  317. #svg_editor #main_button {
  318. position: absolute;
  319. top: 4px;
  320. left: 4px;
  321. z-index: 5;
  322. }
  323. #svg_editor #main_icon {
  324. background: #E8E8E8;
  325. position: relative;
  326. top: -2px;
  327. left: -2px;
  328. padding: 1px 0 2px 1px;
  329. width: 44px;
  330. height: 30px;
  331. border-left: 1px solid #FFF;
  332. border-top: 1px solid #FFF;
  333. border-right: 1px solid #808080;
  334. border-bottom: 1px solid #808080;
  335. border-radius: 8px;
  336. -moz-border-radius: 8px;
  337. -webkit-border-radius: 8px;
  338. }
  339. #svg_editor .tool_button:hover,
  340. #svg_editor .push_button:hover,
  341. #svg_editor .buttonup:hover,
  342. #svg_editor .buttondown,
  343. #svg_editor .tool_button_current,
  344. #svg_editor .push_button_pressed
  345. {
  346. border-left: 1px #fcd9ba solid !important;
  347. border-top: 1px #fcd9ba solid !important;
  348. border-right: 1px #e0a874 solid !important;
  349. border-bottom: 1px #e0a874 solid !important;
  350. background-color: #FFC !important;
  351. }
  352. #svg_editor .tool_button_current,
  353. #svg_editor .push_button_pressed,
  354. #svg_editor .buttondown {
  355. background-color: #f4e284 !important;
  356. border-top: 1px solid #630 !important;
  357. border-left: 1px solid #630 !important;
  358. }
  359. #svg_editor #main_icon span {
  360. position: absolute;
  361. width: 100%;
  362. height: 100%;
  363. display: block;
  364. z-index: 2;
  365. }
  366. #svg_editor #main_menu {
  367. z-index: 12;
  368. background: #E8E8E8;
  369. position: relative;
  370. width: 230px;
  371. padding: 5px;
  372. -moz-box-shadow: #555 1px 1px 4px;
  373. -webkit-box-shadow: #555 1px 1px 4px;
  374. font-size: 1.1em;
  375. display: none;
  376. overflow: hidden;
  377. border: 1px outset gray;
  378. clear: both;
  379. }
  380. #svg_editor #main_menu ul,
  381. #svg_editor #main_menu li {
  382. list-style: none;
  383. margin: 0;
  384. padding: 0;
  385. }
  386. #svg_editor #main_menu li {
  387. /* height: 35px;*/
  388. line-height: 22px;
  389. padding-top: 7px;
  390. padding-left: 7px;
  391. margin: -5px;
  392. overflow: auto;
  393. cursor: default;
  394. }
  395. #svg_editor #main_menu li:hover {
  396. background: #FFC;
  397. }
  398. #svg_editor #main_menu li > div {
  399. float: left;
  400. padding-right: 5px;
  401. }
  402. #svg_editor #main_menu p {
  403. margin-top: 5px;
  404. }
  405. #svg_editor #logo img {
  406. border: 0;
  407. width: 32px;
  408. height: 32px;
  409. }
  410. #main_icon > div {
  411. float: left;
  412. }
  413. #svg_editor #main_button .dropdown {
  414. padding-top: 28%;
  415. margin-left: -1px;
  416. }
  417. #svg_editor #tools_top {
  418. position: absolute;
  419. left: 50px;
  420. right: 2px;
  421. top: 2px;
  422. height: 72px;
  423. border-bottom: none;
  424. overflow: auto;
  425. }
  426. #svg_editor #tools_left {
  427. position: absolute;
  428. border-right: none;
  429. width: 32px;
  430. top: 75px;
  431. left: 0;
  432. padding-left: 2px;
  433. background: #D0D0D0; /* Needed so flyout icons don't appear on the left */
  434. z-index: 4;
  435. }
  436. #workarea.wireframe #svgcontent * {
  437. fill: none;
  438. stroke: #000;
  439. stroke-width: 1px;
  440. stroke-opacity: 1.0;
  441. stroke-dasharray: 0;
  442. opacity: 1;
  443. pointer-events: stroke;
  444. vector-effect: non-scaling-stroke;
  445. filter: none;
  446. }
  447. #workarea.wireframe #svgcontent text {
  448. fill: #000;
  449. stroke: none;
  450. }
  451. #workarea.wireframe #canvasBackground > rect {
  452. fill: #FFF !important;
  453. }
  454. #tools_top div[id$="_panel"]:not(#editor_panel):not(#history_panel) {
  455. display: none;
  456. }
  457. #svg_editor #multiselected_panel .selected_tool {
  458. vertical-align: 12px;
  459. }
  460. #cur_context_panel {
  461. position: absolute;
  462. top: 77px;
  463. left: 40px;
  464. right: 0;
  465. line-height: 22px;
  466. overflow: auto;
  467. border: 1px solid #777;
  468. border-bottom: none;
  469. border-right: none;
  470. padding-left: 5px;
  471. font-size: 12px;
  472. }
  473. #svg_editor #cur_context_panel a {
  474. float: none;
  475. text-decoration: none;
  476. }
  477. #svg_editor #cur_context_panel a:hover {
  478. text-decoration: underline;
  479. }
  480. #svg_editor #tools_top > div, #tools_top {
  481. line-height: 26px;
  482. }
  483. #svg_editor div.toolset,
  484. #svg_editor div.toolset > * {
  485. float: left;
  486. }
  487. #svg_editor div.toolset {
  488. height: 34px;
  489. }
  490. #svg_editor div.toolset label span {
  491. /* outline: 1px solid red;*/
  492. padding-top: 3px;
  493. display: inline-block;
  494. }
  495. #tools_top > div > * {
  496. float: left;
  497. margin-right: 2px;
  498. }
  499. #tools_top label {
  500. margin-top: 0;
  501. margin-left: 5px;
  502. }
  503. #tools_top input {
  504. margin-top: 5px;
  505. height: 15px;
  506. }
  507. #svg_editor #tools_left .tool_button,
  508. #svg_editor #tools_left .tool_button_current {
  509. position: relative;
  510. z-index: 11;
  511. }
  512. #svg_editor .flyout_arrow_horiz {
  513. position: absolute;
  514. bottom: -1px;
  515. right: 0;
  516. z-index: 10;
  517. }
  518. span.zoom_tool {
  519. line-height: 26px;
  520. padding: 3px;
  521. }
  522. #zoom_panel {
  523. margin-top: 5px;
  524. }
  525. .dropdown {
  526. position: relative;
  527. }
  528. #svg_editor .dropdown button {
  529. width: 15px;
  530. height: 21px;
  531. margin: 6px 0 0 1px;
  532. padding: 0;
  533. border-left: 1px solid #FFFFFF;
  534. border-top: 1px solid #FFFFFF;
  535. border-right: 1px solid #808080;
  536. border-bottom: 1px solid #808080;
  537. background-color: #E8E8E8;
  538. }
  539. .dropdown button.down {
  540. border-left: 1px solid #808080;
  541. border-top: 1px solid #808080;
  542. border-right: 1px solid #FFFFFF;
  543. border-bottom: 1px solid #FFFFFF;
  544. background-color: #B0B0B0;
  545. }
  546. .dropdown ul {
  547. list-style: none;
  548. position: absolute;
  549. margin: 0;
  550. padding: 0;
  551. left: -80px;
  552. top: 26px;
  553. z-index: 4;
  554. display: none;
  555. }
  556. .dropup ul {
  557. top: auto;
  558. bottom: 26px;
  559. }
  560. .dropdown li {
  561. display: block;
  562. width: 120px;
  563. padding: 4px;
  564. background: #E8E8E8;
  565. border: 1px solid #B0B0B0;
  566. margin: 0 0 -1px 0;
  567. line-height: 16px;
  568. }
  569. .dropdown li:hover {
  570. background-color: #FFC;
  571. }
  572. .dropdown li.special {
  573. padding: 10px 4px;
  574. }
  575. .dropdown li.special:hover {
  576. background: #FFC;
  577. }
  578. #font_family_dropdown-list li {
  579. font-size: 1.4em;
  580. }
  581. #font_family {
  582. margin-left: 5px;
  583. margin-right: 0;
  584. }
  585. #svg_editor .tool_button,
  586. #svg_editor .push_button,
  587. #svg_editor .tool_button_current,
  588. #svg_editor .push_button_pressed
  589. {
  590. height: 24px;
  591. width: 24px;
  592. margin: 2px;
  593. padding: 2px;
  594. border-left: 1px solid #FFF;
  595. border-top: 1px solid #FFF;
  596. border-right: 1px solid #808080;
  597. border-bottom: 1px solid #808080;
  598. background-color: #E8E8E8;
  599. cursor: pointer;
  600. border-radius: 5px;
  601. -moz-border-radius: 5px;
  602. -webkit-border-radius: 5px;
  603. }
  604. #svg_editor #main_menu li#tool_open, #svg_editor #main_menu li#tool_import {
  605. position: relative;
  606. overflow: hidden;
  607. }
  608. #tool_image {
  609. overflow: hidden;
  610. }
  611. #tool_open input,
  612. #tool_import input,
  613. #tool_image input {
  614. position: absolute;
  615. opacity: 0;
  616. font-size: 10em;
  617. top: -5px;
  618. right: -5px;
  619. margin: 0;
  620. cursor: pointer; /* Sadly doesn't appear to have an effect */
  621. }
  622. #svg_editor .disabled {
  623. opacity: 0.5;
  624. cursor: default;
  625. }
  626. #svg_editor .tool_sep {
  627. width: 1px;
  628. background: #888;
  629. border-left: 1px outset #EEE;
  630. margin: 2px 3px;
  631. padding: 0;
  632. height: 24px;
  633. }
  634. #svg_editor .icon_label {
  635. float: left;
  636. padding-top: 3px;
  637. padding-right: 3px;
  638. box-sizing: border-box;
  639. -moz-box-sizing: border-box;
  640. -webkit-box-sizing: border-box;
  641. height: 0;
  642. }
  643. #svg_editor .width_label {
  644. padding-right: 5px;
  645. }
  646. #tool_bold, #tool_italic {
  647. font: bold 2.1em/1.1em serif;
  648. text-align: center;
  649. padding-left: 2px;
  650. position: relative;
  651. }
  652. #text {
  653. position: absolute;
  654. left: -9999px;
  655. }
  656. #tool_bold span, #tool_italic span {
  657. position: absolute;
  658. width: 100%;
  659. height: 100%;
  660. top: 0; left: 0;
  661. background: #000;
  662. opacity: 0;
  663. }
  664. #tool_italic {
  665. font-weight: normal;
  666. font-style: italic;
  667. }
  668. #url_notice {
  669. padding-top: 4px;
  670. display: none;
  671. }
  672. #svg_editor #color_picker {
  673. position: absolute;
  674. display: none;
  675. background: #E8E8E8;
  676. height: 350px;
  677. z-index: 5;
  678. }
  679. #svg_editor .tools_flyout {
  680. position: absolute;
  681. display: none;
  682. cursor: pointer;
  683. width: 400px;
  684. z-index: 1;
  685. }
  686. #svg_editor .tools_flyout_v {
  687. position: absolute;
  688. display: none;
  689. cursor: pointer;
  690. width: 30px;
  691. }
  692. #svg_editor .tools_flyout .tool_button {
  693. float: left;
  694. background-color: #E8E8E8;
  695. border-left: 1px solid #FFFFFF;
  696. border-top: 1px solid #FFFFFF;
  697. border-right: 1px solid #808080;
  698. border-bottom: 1px solid #808080;
  699. height: 28px;
  700. width: 28px;
  701. }
  702. #svg_editor #tools_bottom {
  703. position: absolute;
  704. left: 40px;
  705. right: 0;
  706. bottom: 0;
  707. height: 64px;
  708. overflow: visible;
  709. }
  710. #svg_editor #tools_bottom_1 {
  711. width: 115px;
  712. float: left;
  713. }
  714. #svg_editor #tools_bottom_2 {
  715. width: 165px;
  716. position: relative;
  717. float: left;
  718. }
  719. #tools_bottom input[type=text] {
  720. width: 2.2em;
  721. }
  722. #svg_editor #color_tools {
  723. display: table;
  724. margin-top: 1px;
  725. border-spacing: 0 3px;
  726. clip: rect(0,0,10px,0);
  727. }
  728. .color_tool {
  729. display: table-row;
  730. overflow: hidden;
  731. height: 26px;
  732. padding: 0 4px;
  733. }
  734. .color_tool > * {
  735. display: table-cell;
  736. background: #f0f0f0;
  737. padding: 0 5px 0 0;
  738. vertical-align: middle;
  739. /* height: 25px;*/
  740. }
  741. #toggle_stroke_tools {
  742. letter-spacing: -.2em;
  743. padding-right: 8px;
  744. }
  745. #toggle_stroke_tools:hover {
  746. cursor: pointer;
  747. background: #FFC;
  748. }
  749. .stroke_tool {
  750. display: none;
  751. white-space: nowrap;
  752. }
  753. #svg_editor .stroke_tool button {
  754. margin-top: 3px;
  755. background: #F0F0F0;
  756. }
  757. #svg_editor .stroke_tool div div {
  758. -moz-user-select: none;
  759. -webkit-user-select: none;
  760. width: 20px;
  761. height: 20px;
  762. margin: 1px 0;
  763. padding: 1px;
  764. border: 1px solid #DDD;
  765. }
  766. #svg_editor .stroke_tool:hover div > * {
  767. background-color: #FFC;
  768. }
  769. #svg_editor .stroke_tool.down div div,
  770. #svg_editor .stroke_tool.down button,
  771. #tools_top .dropdown.down > * {
  772. border: 1px inset gray;
  773. background: #F4E284;
  774. }
  775. .stroke_tool > div {
  776. width: 42px;
  777. }
  778. .stroke_tool > div > * {
  779. float: left;
  780. }
  781. #tools_top .dropdown .icon_label {
  782. border: 1px solid transparent;
  783. /* margin-top: 3px;*/
  784. height: auto;
  785. }
  786. #option_lists ul {
  787. display: none;
  788. position: absolute;
  789. height: auto;
  790. z-index: 3;
  791. margin: 0;
  792. list-style: none;
  793. padding-left: 0;
  794. }
  795. #option_lists .optcols2 {
  796. width: 70px;
  797. margin-left: -15px;
  798. }
  799. #option_lists .optcols3 {
  800. width: 90px;
  801. margin-left: -31px;
  802. }
  803. #option_lists .optcols4 {
  804. width: 130px;
  805. margin-left: -44px;
  806. }
  807. #option_lists ul[class^=optcols] li {
  808. float: left;
  809. }
  810. #svg_editor ul li.current {
  811. background-color: #F4E284;
  812. }
  813. #svg_editor #option_lists ul li {
  814. margin: 0;
  815. border-radius: 0;
  816. -moz-border-radius: 0;
  817. -webkit-border-radius: 0;
  818. }
  819. .color_tool > *:first-child {
  820. -moz-border-radius-topleft: 4px;
  821. -moz-border-radius-bottomleft: 4px;
  822. -webkit-border-top-left-radius: 4px;
  823. -webkit-border-bottom-left-radius: 4px;
  824. padding-right: 0;
  825. }
  826. .color_tool > *:last-child {
  827. -moz-border-radius-topright: 4px;
  828. -moz-border-radius-bottomright: 4px;
  829. -webkit-border-top-right-radius: 4px;
  830. -webkit-border-bottom-right-radius: 4px;
  831. }
  832. #svg_editor #tool_opacity {
  833. position: absolute;
  834. top: 4px;
  835. right: 2px;
  836. background: #f0f0f0;
  837. height: 26px;
  838. border-radius: 4px;
  839. -moz-border-radius: 4px;
  840. -webkit-border-radius: 4px;
  841. padding: 0 3px;
  842. }
  843. #tools_bottom .dropdown button {
  844. margin-top: 2px;
  845. }
  846. #opacity_dropdown li {
  847. width: 140px;
  848. }
  849. #svg_editor #copyright {
  850. text-align: right;
  851. padding-right: .3em;
  852. }
  853. #svg_source_editor {
  854. display: none;
  855. }
  856. #svg_source_editor #svg_source_overlay {
  857. position: absolute;
  858. top: 0px;
  859. right: 0px;
  860. left: 0px;
  861. bottom: 0px;
  862. background-color: black;
  863. opacity: 0.6;
  864. z-index: 5;
  865. }
  866. #svg_source_editor #svg_source_container {
  867. position: absolute;
  868. top: 30px;
  869. left: 30px;
  870. right: 30px;
  871. bottom: 30px;
  872. background-color: #B0B0B0;
  873. opacity: 1.0;
  874. text-align: center;
  875. border: 1px outset #777;
  876. z-index: 6;
  877. }
  878. #save_output_btns {
  879. display: none;
  880. text-align: left;
  881. }
  882. #save_output_btns p {
  883. margin: .5em 1.5em;
  884. display: inline-block;
  885. }
  886. #bg_blocks {
  887. overflow: auto;
  888. margin-left: 30px;
  889. }
  890. #svg_docprops #svg_docprops_container,
  891. #svg_prefs #svg_prefs_container {
  892. position: absolute;
  893. top: 50px;
  894. padding: 10px;
  895. background-color: #B0B0B0;
  896. border: 1px outset #777;
  897. opacity: 1.0;
  898. /* width: 450px;*/
  899. font-family: Verdana, Helvetica, sans-serif;
  900. font-size: .8em;
  901. z-index: 20001;
  902. }
  903. #svg_docprops .error {
  904. border: 1px solid red;
  905. padding: 3px;
  906. }
  907. #svg_docprops #resolution {
  908. max-width: 14em;
  909. }
  910. #tool_docprops_back,
  911. #tool_prefs_back {
  912. margin-left: 1em;
  913. overflow: auto;
  914. }
  915. #svg_docprops_container #svg_docprops_docprops,
  916. #svg_prefs #svg_docprops_prefs {
  917. float: left;
  918. width: 221px;
  919. margin: 5px .7em;
  920. overflow: hidden;
  921. }
  922. #svg_prefs_container fieldset + fieldset {
  923. float: right;
  924. }
  925. #svg_docprops legend,
  926. #svg_prefs legend {
  927. max-width: 195px;
  928. }
  929. #svg_docprops_docprops > legend,
  930. #svg_prefs_container > fieldset > legend {
  931. font-weight: bold;
  932. font-size: 1.1em;
  933. }
  934. #svg_docprops_container fieldset,
  935. #svg_prefs fieldset {
  936. padding: 5px;
  937. margin: 5px;
  938. border: 1px solid #DDD;
  939. }
  940. #svg_docprops_container label,
  941. #svg_prefs_container label {
  942. display: block;
  943. margin: .5em;
  944. }
  945. #svginfo_bg_note {
  946. font-size: .9em;
  947. font-style: italic;
  948. color: #444;
  949. }
  950. #canvas_title, #canvas_bg_url {
  951. display: block;
  952. width: 96%;
  953. }
  954. #svg_source_editor #svg_source_textarea {
  955. position: relative;
  956. width: 95%;
  957. top: 5px;
  958. height: 250px;
  959. padding: 5px;
  960. font-size: 12px;
  961. }
  962. #svg_source_editor #tool_source_back {
  963. text-align: left;
  964. padding-left: 20px;
  965. }
  966. #svg_prefs_container div.color_block {
  967. float: left;
  968. margin: 2px;
  969. padding: 20px;
  970. }
  971. #change_background div.cur_background {
  972. border: 2px solid blue;
  973. padding: 18px;
  974. }
  975. #background_img {
  976. position: absolute;
  977. top: 0;
  978. left: 0;
  979. text-align: left;
  980. }
  981. #svg_docprops button,
  982. #svg_prefs button {
  983. margin-top: 0;
  984. margin-bottom: 5px;
  985. }
  986. #svg_docprops,
  987. #svg_prefs {
  988. display: none;
  989. }
  990. #image_save_opts label {
  991. font-size: .9em;
  992. }
  993. #image_save_opts input {
  994. margin-left: 0;
  995. }
  996. #svg_docprops #svg_docprops_overlay,
  997. #svg_prefs #svg_prefs_overlay {
  998. position: absolute;
  999. top: 0px;
  1000. right: 0px;
  1001. left: 0px;
  1002. bottom: 0px;
  1003. background-color: black;
  1004. opacity: 0.6;
  1005. z-index: 20000;
  1006. }
  1007. #tool_prefs_option {
  1008. float: right;
  1009. }
  1010. .toolbar_button button {
  1011. border:1px solid #dedede;
  1012. line-height:130%;
  1013. float: left;
  1014. background: #E8E8E8 none;
  1015. padding:5px 10px 5px 7px; /* Firefox */
  1016. line-height:17px; /* Safari */
  1017. margin: 5px 20px 0 0;
  1018. border: 1px #808080 solid;
  1019. border-top-color: #FFF;
  1020. border-left-color: #FFF;
  1021. border-radius: 5px;
  1022. -moz-border-radius: 5px;
  1023. -webkit-border-radius: 5px;
  1024. }
  1025. .toolbar_button button:hover {
  1026. border: 1px #e0a874 solid;
  1027. border-top-color: #fcd9ba;
  1028. border-left-color: #fcd9ba;
  1029. background-color: #FFC;
  1030. }
  1031. .toolbar_button button:active {
  1032. background-color: #F4E284;
  1033. border-left: 1px solid #663300;
  1034. border-top: 1px solid #663300;
  1035. }
  1036. .toolbar_button button .svg_icon {
  1037. margin:0 3px -3px 0 !important;
  1038. padding:0;
  1039. border:none;
  1040. width:16px;
  1041. height:16px;
  1042. }
  1043. #dialog_box {
  1044. display: none;
  1045. }
  1046. #dialog_box_overlay {
  1047. background: black;
  1048. opacity: .5;
  1049. height:100%;
  1050. left:0;
  1051. position:absolute;
  1052. top:0;
  1053. width:100%;
  1054. z-index: 6;
  1055. }
  1056. #dialog_content {
  1057. height: 95px;
  1058. margin: 10px 10px 5px 10px;
  1059. background: #DDD;
  1060. overflow: auto;
  1061. text-align: left;
  1062. border: 1px solid #B0B0B0;
  1063. }
  1064. #dialog_content.prompt {
  1065. height: 75px;
  1066. }
  1067. #dialog_content p {
  1068. margin: 10px;
  1069. line-height: 1.3em;
  1070. }
  1071. #dialog_container {
  1072. position: absolute;
  1073. font-family: Verdana;
  1074. text-align: center;
  1075. left: 50%;
  1076. top: 50%;
  1077. width: 300px;
  1078. margin-left: -150px;
  1079. height: 150px;
  1080. margin-top: -80px;
  1081. position:fixed;
  1082. z-index:50001;
  1083. background: #CCC;
  1084. border: 1px outset #777;
  1085. font-family:Verdana,Helvetica,sans-serif;
  1086. font-size:0.8em;
  1087. }
  1088. #dialog_container, #dialog_content {
  1089. border-radius: 5px;
  1090. -moz-border-radius: 5px;
  1091. -webkit-border-radius: 5px;
  1092. }
  1093. #dialog_buttons input[type=text] {
  1094. width: 90%;
  1095. display: block;
  1096. margin: 0 0 5px 11px;
  1097. }
  1098. #dialog_buttons input[type=button] {
  1099. margin: 0 1em;
  1100. }
  1101. /* Slider
  1102. ----------------------------------*/
  1103. .ui-slider { position: relative; text-align: left; }
  1104. .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
  1105. .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }
  1106. .ui-slider-horizontal { height: .8em; }
  1107. .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
  1108. .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
  1109. .ui-slider-horizontal .ui-slider-range-min { left: 0; }
  1110. .ui-slider-horizontal .ui-slider-range-max { right: 0; }
  1111. .ui-slider-vertical { width: .8em; height: 100px; }
  1112. .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
  1113. .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
  1114. .ui-slider-vertical .ui-slider-range-min { bottom: 0; }
  1115. .ui-slider-vertical .ui-slider-range-max { top: 0; }
  1116. .ui-slider {
  1117. border: 1px solid #B0B0B0;
  1118. }
  1119. .ui-slider-handle {
  1120. background: #B0B0B0;
  1121. border: 1px solid #000;
  1122. }
  1123. /* Necessary to keep the flyouts sized properly */
  1124. #svg_editor .tools_flyout .tool_button,
  1125. #svg_editor .tools_flyout .tool_flyout {
  1126. padding: 2px;
  1127. width: 24px;
  1128. height: 24px;
  1129. margin: 0;
  1130. border-radius: 0px;
  1131. -moz-border-radius: 0px;
  1132. -webkit-border-radius: 0px;
  1133. }
  1134. /* Generic context menu styles */
  1135. .contextMenu {
  1136. position: absolute;
  1137. z-index: 99999;
  1138. border: solid 1px rgba(0,0,0,.33);
  1139. background: rgba(255,255,255,.95);
  1140. padding: 5px 0;
  1141. margin: 0px;
  1142. display: none;
  1143. font: 12px/15px Lucida Sans, Helvetica, Verdana, sans-serif;
  1144. border-radius: 5px;
  1145. -moz-border-radius: 5px;
  1146. -moz-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
  1147. -webkit-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
  1148. box-shadow: 2px 5px 10px rgba(0,0,0,.3);
  1149. }
  1150. .contextMenu LI {
  1151. list-style: none;
  1152. padding: 0px;
  1153. margin: 0px;
  1154. }
  1155. .contextMenu .shortcut {
  1156. width: 115px;
  1157. text-align:right;
  1158. float:right;
  1159. }
  1160. .contextMenu A {
  1161. -moz-user-select: none;
  1162. -webkit-user-select: none;
  1163. color: #222;
  1164. text-decoration: none;
  1165. display: block;
  1166. line-height: 20px;
  1167. height: 20px;
  1168. background-position: 6px center;
  1169. background-repeat: no-repeat;
  1170. outline: none;
  1171. padding: 0px 15px 1px 20px;
  1172. }
  1173. .contextMenu LI.hover A {
  1174. background-color: #2e5dea;
  1175. color: white;
  1176. cursor: default;
  1177. }
  1178. .contextMenu LI.disabled A {
  1179. color: #999;
  1180. }
  1181. .contextMenu LI.hover.disabled A {
  1182. background-color: transparent;
  1183. }
  1184. .contextMenu LI.separator {
  1185. border-top: solid 1px #E3E3E3;
  1186. padding-top: 5px;
  1187. margin-top: 5px;
  1188. }
  1189. /*
  1190. Adding Icons
  1191. You can add icons to the context menu by adding
  1192. classes to the respective LI element(s)
  1193. */
  1194. /*
  1195. .contextMenu LI.edit A { background-image: url(images/page_white_edit.png); }
  1196. .contextMenu LI.cut A { background-image: url(images/cut.png); }
  1197. .contextMenu LI.copy A { background-image: url(images/page_white_copy.png); }
  1198. .contextMenu LI.paste A { background-image: url(images/page_white_paste.png); }
  1199. .contextMenu LI.delete A { background-image: url(images/page_white_delete.png); }
  1200. .contextMenu LI.quit A { background-image: url(images/door.png); }
  1201. */