sketchily 0.2.0 → 0.3.0

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