##// END OF EJS Templates
Fix page layout for small resolutions 800x600
Michal Klocek -
r368:017db9378f4e
parent child
Show More
@@ -1,32 +1,33
1 1 /*!
2 2 \page index.html
3 3 \keyword About
4 4
5 5 \raw HTML
6 6 <div class="qchart">
7 7 <img src="images/qt_commercial_logo.png" alt="qtcommercial"/>
8 8
9 9 <p>
10 10 QCharts is a part of Qt Commercial addons package. It provides a set of easy to use chart
11 11 components which are available for Qt Commercial customers. It uses Qt Graphics View
12 12 Framework, therefore charts can be easily integrated to modern 2D user interfaces. QCharts can
13 13 be used as QWidgets, QGraphicsWidget or QML elements. Users can easily create impressive
14 14 graphs by selecting one of the charts themes.
15 15 </p>
16 16
17 17 <table><tr>
18 18 <td><img src="images/linechart.png" alt="linechart" /></td>
19 19 <td><img src="images/chartview_example_bar.jpg " alt="barchart" /></td>
20 <td><img src="images/chartview_example_pie.jpg " alt="piechart" /></td>
21 20 </tr>
22 21 <tr>
23 22 <td><img src="images/chartview_example.jpg " alt="linechart" /></td>
23 <td><img src="images/chartview_example_pie.jpg " alt="piechart" /></td>
24 </tr><tr>
24 25 <td><img src="images/chartview_example_scatter.jpg " alt="scatterchart" /></td>
25 26 <td><img src="images/chartview_example_theme.jpg " alt="themechart" /></td>
26 27 </tr>
27 28 </table>
28 29 </div>
29 30 \endraw
30 31
31 32
32 33 */
@@ -1,708 +1,713
1 1 @media screen
2 2 {
3 3
4 4 .qchart
5 5 {
6 width: 80%;
6 width:1000px;
7 7 margin-left: auto;
8 8 margin-right: auto;
9 9 margin-top: 50px;
10 max-width:100%;
11 overflow-x: auto;
10 12 }
11 13
12 14 .qchart img
13 15 {
14 16 float:left;
15 17 }
16 18
17 19 .qchart table
18 20 {
19 margin-top: 50px;
21 width:1000px;
22 margin-top: 50px;
23 max-width:100%;
20 24 }
21 25
22 26 /* basic elements */
23 27 html
24 28 {
25 29 color: #000000;
30 min-width: 1000px;
26 31 background: #FFFFFF;
27 32 }
28 33 table
29 34 {
30 35 border-collapse: collapse;
31 36 border-spacing: 0;
32 37 }
33 38 fieldset, img
34 39 {
35 40 border: 0;
36 41 max-width:100%;
37 42 }
38 43 address, caption, cite, code, dfn, em, strong, th, var, optgroup
39 44 {
40 45 font-style: inherit;
41 46 font-weight: inherit;
42 47 }
43 48 del, ins
44 49 {
45 50 text-decoration: none;
46 51 }
47 52 li
48 53 {
49 54 list-style: none;
50 55 }
51 56 ol li
52 57 {
53 58 list-style: decimal;
54 59 }
55 60 caption, th
56 61 {
57 62 text-align: left;
58 63 }
59 64 h1, h2, h3, h4, h5, h6
60 65 {
61 66 font-size: 100%;
62 67 }
63 68 q:before, q:after
64 69 {
65 70 content: '';
66 71 }
67 72 abbr, acronym
68 73 {
69 74 border: 0;
70 75 font-variant: normal;
71 76 }
72 77 sup, sub
73 78 {
74 79 vertical-align: baseline;
75 80 }
76 81 tt, .qmlreadonly span, .qmldefault span
77 82 {
78 83 word-spacing:0.5em;
79 84 }
80 85 legend
81 86 {
82 87 color: #000000;
83 88 }
84 89 strong
85 90 {
86 91 font-weight: bold;
87 92 }
88 93 em
89 94 {
90 95 font-style: italic;
91 96 }
92 97
93 98 body
94 99 {
95 100 margin-left: 0.5em;
96 101 margin-right: 0.5em;
97 102 }
98 103 a
99 104 {
100 105 color: #00732F;
101 106 text-decoration: none;
102 107 }
103 108 hr
104 109 {
105 110 background-color: #E6E6E6;
106 111 border: 1px solid #E6E6E6;
107 112 height: 1px;
108 113 width: 100%;
109 114 text-align: left;
110 115 margin: 1.5em 0 1.5em 0;
111 116 }
112 117
113 118 pre
114 119 {
115 120 border: 1px solid #DDDDDD;
116 121 -moz-border-radius: 0.7em 0.7em 0.7em 0.7em;
117 122 -webkit-border-radius: 0.7em 0.7em 0.7em 0.7em;
118 123 border-radius: 0.7em 0.7em 0.7em 0.7em;
119 124 margin: 0 1.5em 1em 1em;
120 125 padding: 1em 1em 1em 1em;
121 126 overflow-x: auto;
122 127 }
123 128 table, pre
124 129 {
125 130 -moz-border-radius: 0.7em 0.7em 0.7em 0.7em;
126 131 -webkit-border-radius: 0.7em 0.7em 0.7em 0.7em;
127 132 border-radius: 0.7em 0.7em 0.7em 0.7em;
128 133 background-color: #F6F6F6;
129 134 border: 1px solid #E6E6E6;
130 135 border-collapse: separate;
131 136 margin-bottom: 2.5em;
132 137 }
133 138 pre {
134 139 font-size: 90%;
135 140 display: block;
136 141 overflow:hidden;
137 142 }
138 143 thead
139 144 {
140 145 margin-top: 0.5em;
141 146 font-weight: bold
142 147 }
143 148 th
144 149 {
145 150 padding: 0.5em 1.5em 0.5em 1.5em;
146 151 background-color: #E1E1E1;
147 152 border-left: 1px solid #E6E6E6;
148 153 }
149 154 td
150 155 {
151 156 padding: 0.25em 1.5em 0.25em 2em;
152 157 }
153 158
154 159 td.rightAlign
155 160 {
156 161 padding: 0.25em 0.5em 0.25em 1em;
157 162 }
158 163 table tr.odd
159 164 {
160 165 border-left: 1px solid #E6E6E6;
161 166 background-color: #F6F6F6;
162 167 color: #66666E;
163 168 }
164 169 table tr.even
165 170 {
166 171 border-left: 1px solid #E6E6E6;
167 172 background-color: #ffffff;
168 173 color: #66666E;
169 174 }
170 175
171 176 div.float-left
172 177 {
173 178 float: left; margin-right: 2em
174 179 }
175 180 div.float-right
176 181 {
177 182 float: right; margin-left: 2em
178 183 }
179 184
180 185 span.comment
181 186 {
182 187 color: #008B00;
183 188 font-style: italic
184 189 }
185 190 span.string, span.char
186 191 {
187 192 color: #000084;
188 193 }
189 194 span.number
190 195 {
191 196 color: #a46200;
192 197 }
193 198 span.operator
194 199 {
195 200 color: #202020;
196 201 }
197 202 span.keyword
198 203 {
199 204 color: #840000;
200 205 }
201 206 span.name
202 207 {
203 208 color: black
204 209 }
205 210 span.type
206 211 {
207 212 font-weight: bold
208 213 }
209 214 span.type a:visited
210 215 {
211 216 color: #0F5300;
212 217 }
213 218 span.preprocessor
214 219 {
215 220 color: #404040
216 221 }
217 222 /* end basic elements */
218 223
219 224 /* font style elements */
220 225 .heading
221 226 {
222 227 font-weight: bold;
223 228 font-size: 125%;
224 229 }
225 230 .subtitle
226 231 {
227 232 font-size: 110%
228 233 }
229 234 .small-subtitle
230 235 {
231 236 font-size: 100%
232 237 }
233 238 .red
234 239 {
235 240 color:red;
236 241 }
237 242 /* end font style elements */
238 243
239 244 /* global settings*/
240 245 .header, .footer
241 246 {
242 247 display: block;
243 248 clear: both;
244 249 overflow: hidden;
245 250 }
246 251 /* end global settings*/
247 252
248 253 /* header elements */
249 254 .header .qtref
250 255 {
251 256 color: #00732F;
252 257 font-weight: bold;
253 258 font-size: 100%;
254 259 text-align: center;
255 260 }
256 261
257 262 .header .content
258 263 {
259 264 /* margin-bottom: 0.5em*/
260 265 }
261 266
262 267 .header .content img
263 268 {
264 269 display: block;
265 270 margin-left: auto;
266 271 margin-right: auto;
267 272 width: 100px;
268 273 }
269 274
270 275 .naviNextPrevious
271 276 {
272 277 display: none
273 278 }
274 279 .header .breadcrumb
275 280 {
276 281 font-size: 100%;
277 282 padding: 0.5em 0 0.5em 1em;
278 283 margin: 0;
279 284 /*background-color: #393735;*/
280 285 font-weight: bold;
281 286 background: #ffffff url(../images/bg.png) repeat-x;
282 287 height: 20px;
283 288 border-bottom: 1px solid #d1d1d1;
284 289 }
285 290
286 291 .header .breadcrumb ul
287 292 {
288 293 margin: 0;
289 294 padding: 0;
290 295 }
291 296
292 297 .header .content
293 298 {
294 299 word-wrap: break-word;
295 300 }
296 301
297 302 .header .breadcrumb ul li
298 303 {
299 304 float: left;
300 305 /*background: url(../images/breadcrumb.png) no-repeat 0 3px;*/
301 306 padding-left: 1.5em;
302 307 margin-left: 1.5em;
303 308 }
304 309
305 310 .header .breadcrumb ul li.last
306 311 {
307 312 font-weight: normal;
308 313 }
309 314
310 315 .header .breadcrumb ul li a
311 316 {
312 317 color: #ffffff;
313 318 }
314 319
315 320 .header .breadcrumb ul li a:hover
316 321 {
317 322 color: #00732F;
318 323 text-decoration: none;
319 324 }
320 325
321 326 .header .breadcrumb ul li.first
322 327 {
323 328 background-image: none;
324 329 padding-left: 0;
325 330 margin-left: 0;
326 331 }
327 332
328 333 .header .content ol li {
329 334 background: none;
330 335 margin-bottom: 1.0em;
331 336 margin-left: 1.2em;
332 337 padding-left: 0
333 338 }
334 339
335 340 .header .content li
336 341 {
337 342 background: url(../images/bullet_sq.png) no-repeat 0 5px;
338 343 margin-bottom: 1em;
339 344 padding-left: 1.2em;
340 345 }
341 346
342 347 /* end header elements */
343 348
344 349 /* content elements */
345 350 .content h1
346 351 {
347 352 font-weight: bold;
348 353 font-size: 150%
349 354 }
350 355
351 356 .content h2
352 357 {
353 358 font-weight: bold;
354 359 font-size: 135%;
355 360 width: 100%;
356 361 }
357 362 .content h3
358 363 {
359 364 font-weight: bold;
360 365 font-size: 120%;
361 366 width: 100%;
362 367 }
363 368 .content table p
364 369 {
365 370 margin: 0
366 371 }
367 372 .content ul
368 373 {
369 374 padding-left: 2.5em;
370 375 }
371 376 .content li
372 377 {
373 378 padding-top: 0.25em;
374 379 padding-bottom: 0.25em;
375 380 }
376 381 .content ul img {
377 382 vertical-align: middle;
378 383 }
379 384
380 385 .content a:visited
381 386 {
382 387 color: #4c0033;
383 388 text-decoration: none;
384 389 }
385 390
386 391 .content a:visited:hover
387 392 {
388 393 color: #4c0033;
389 394 text-decoration: underline;
390 395 }
391 396
392 397 a:hover
393 398 {
394 399 color: #4c0033;
395 400 text-decoration: underline;
396 401 }
397 402 descr p a
398 403 {
399 404 text-decoration: underline;
400 405 }
401 406
402 407 .descr p a:visited
403 408 {
404 409 text-decoration: underline;
405 410 }
406 411
407 412 .alphaChar{
408 413 width:95%;
409 414 background-color:#F6F6F6;
410 415 border:1px solid #E6E6E6;
411 416 -moz-border-radius: 7px 7px 7px 7px;
412 417 border-radius: 7px 7px 7px 7px;
413 418 -webkit-border-radius: 7px 7px 7px 7px;
414 419 font-size:12pt;
415 420 padding-left:10px;
416 421 margin-top:10px;
417 422 margin-bottom:10px;
418 423 }
419 424 .flowList{
420 425 /*vertical-align:top;*/
421 426 /*margin:20px auto;*/
422 427
423 428 column-count:3;
424 429 -webkit-column-count:3;
425 430 -moz-column-count:3;
426 431 /*
427 432 column-width:100%;
428 433 -webkit-column-width:200px;
429 434 -col-column-width:200px;
430 435 */
431 436 column-gap:41px;
432 437 -webkit-column-gap:41px;
433 438 -moz-column-gap:41px;
434 439
435 440 column-rule: 1px dashed #ccc;
436 441 -webkit-column-rule: 1px dashed #ccc;
437 442 -moz-column-rule: 1px dashed #ccc;
438 443 }
439 444
440 445 .flowList dl{
441 446 }
442 447 .flowList dd{
443 448 /*display:inline-block;*/
444 449 margin-left:10px;
445 450 min-width:250px;
446 451 line-height: 1.5;
447 452 min-width:100%;
448 453 min-height:15px;
449 454 }
450 455
451 456 .flowList dd a{
452 457 }
453 458
454 459 .content .flowList p{
455 460 padding:0px;
456 461 }
457 462
458 463 .content .alignedsummary
459 464 {
460 465 margin: 15px;
461 466 }
462 467
463 468
464 469 .qmltype
465 470 {
466 471 text-align: center;
467 472 font-size: 120%;
468 473 }
469 474 .qmlreadonly
470 475 {
471 476 padding-left: 5px;
472 477 float: right;
473 478 color: #254117;
474 479 }
475 480
476 481 .qmldefault
477 482 {
478 483 padding-left: 5px;
479 484 float: right;
480 485 color: red;
481 486 }
482 487
483 488 .qmldoc
484 489 {
485 490 }
486 491
487 492 .generic .alphaChar{
488 493 margin-top:5px;
489 494 }
490 495
491 496 .generic .odd .alphaChar{
492 497 background-color: #F6F6F6;
493 498 }
494 499
495 500 .generic .even .alphaChar{
496 501 background-color: #FFFFFF;
497 502 }
498 503
499 504 .memItemRight{
500 505 padding: 0.25em 1.5em 0.25em 0;
501 506 }
502 507 .highlightedCode
503 508 {
504 509 margin: 1.0em;
505 510 }
506 511 .annotated td {
507 512 padding: 0.25em 0.5em 0.25em 0.5em;
508 513 }
509 514
510 515 .header .content .toc ul
511 516 {
512 517 padding-left: 0px;
513 518 }
514 519
515 520 .content .toc h3 {
516 521 border-bottom: 0px;
517 522 margin-top: 10px;
518 523 }
519 524
520 525 .content .toc h3 a:hover {
521 526 color: #00732F;
522 527 text-decoration: none;
523 528 }
524 529
525 530 .content .toc .level2
526 531 {
527 532 margin-left: 1.5em;
528 533 }
529 534
530 535 .content .toc .level3
531 536 {
532 537 margin-left: 3.0em;
533 538 }
534 539
535 540 .content ul li
536 541 {
537 542 background: url(../images/bullet_sq.png) no-repeat 0 0.7em;
538 543 padding-left: 1em
539 544 }
540 545
541 546 .content .toc li
542 547 {
543 548 background: url(../images/bullet_dn.png) no-repeat 0 5px;
544 549 padding-left: 1em
545 550 }
546 551
547 552 .relpage
548 553 {
549 554 -moz-border-radius: 7px 7px 7px 7px;
550 555 -webkit-border-radius: 7px 7px 7px 7px;
551 556 border-radius: 7px 7px 7px 7px;
552 557 border: 1px solid #DDDDDD;
553 558 padding: 25px 25px;
554 559 clear: both;
555 560 }
556 561 .relpage ul
557 562 {
558 563 float: none;
559 564 padding: 1.5em;
560 565 }
561 566
562 567 h3.fn, span.fn
563 568 {
564 569 -moz-border-radius:7px 7px 7px 7px;
565 570 -webkit-border-radius:7px 7px 7px 7px;
566 571 border-radius:7px 7px 7px 7px;
567 572 background-color: #F6F6F6;
568 573 border-width: 1px;
569 574 border-style: solid;
570 575 border-color: #E6E6E6;
571 576 font-weight: bold;
572 577 word-spacing:3px;
573 578 padding:3px 5px;
574 579 }
575 580
576 581 .functionIndex {
577 582 font-size:12pt;
578 583 word-spacing:10px;
579 584 margin-bottom:10px;
580 585 background-color: #F6F6F6;
581 586 border-width: 1px;
582 587 border-style: solid;
583 588 border-color: #E6E6E6;
584 589 -moz-border-radius: 7px 7px 7px 7px;
585 590 -webkit-border-radius: 7px 7px 7px 7px;
586 591 border-radius: 7px 7px 7px 7px;
587 592 width:100%;
588 593 }
589 594
590 595 .centerAlign
591 596 {
592 597 text-align:center;
593 598 }
594 599
595 600 .rightAlign
596 601 {
597 602 text-align:right;
598 603 }
599 604
600 605 .leftAlign
601 606 {
602 607 text-align:left;
603 608 }
604 609
605 610 .topAlign{
606 611 vertical-align:top
607 612 }
608 613
609 614 .functionIndex a{
610 615 display:inline-block;
611 616 }
612 617
613 618 /* end content elements */
614 619 /* footer elements */
615 620
616 621 .footer
617 622 {
618 623 color: #393735;
619 624 font-size: 0.75em;
620 625 text-align: center;
621 626 padding-top: 1.5em;
622 627 padding-bottom: 1em;
623 628 background-color: #E6E7E8;
624 629 margin: 0;
625 630 }
626 631 .footer p
627 632 {
628 633 margin: 0.25em
629 634 }
630 635 .small
631 636 {
632 637 font-size: 0.5em;
633 638 }
634 639 /* end footer elements */
635 640
636 641 .item {
637 642 float: left;
638 643 position: relative;
639 644 width: 100%;
640 645 overflow: hidden;
641 646 }
642 647
643 648
644 649 .item .primary {
645 650 margin-right: 220px;
646 651 position: relative;
647 652 }
648 653
649 654 .item hr {
650 655 margin-left: -220px;
651 656 }
652 657
653 658 .item .secondary {
654 659 float: right;
655 660 width: 200px;
656 661 position: relative;
657 662 }
658 663
659 664 .item .cols {
660 665 clear: both;
661 666 display: block;
662 667 }
663 668
664 669 .item .cols .col {
665 670 float: left;
666 671 margin-left: 1.5%;
667 672 }
668 673
669 674 .item .cols .col.first {
670 675 margin-left: 0;
671 676 }
672 677
673 678 .item .cols.two .col {
674 679 width: 45%;
675 680 }
676 681
677 682 .item .box {
678 683 margin: 0 0 10px 0;
679 684 }
680 685
681 686 .item .box h3 {
682 687 margin: 0 0 10px 0;
683 688 }
684 689
685 690 .cols.unclear {
686 691 clear:none;
687 692 }
688 693 }
689 694
690 695 /* end of screen media */
691 696
692 697 /* start of print media */
693 698
694 699 @media print
695 700 {
696 701 input, textarea, .header, .footer, .toolbar, .feedback, .wrapper .hd, .wrapper .bd .sidebar, .wrapper .ft, #feedbackBox, #blurpage, .toc, .breadcrumb, .toolbar, .floatingResult
697 702 {
698 703 display: none;
699 704 background: none;
700 705 }
701 706 .content
702 707 {
703 708 background: none;
704 709 display: block;
705 710 width: 100%; margin: 0; float: none;
706 711 }
707 712 }
708 713 /* end of print media */
General Comments 0
You need to be logged in to leave comments. Login now