Advertisement
Guest User

Untitled

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