source: Dev/branches/jos-branch/css/visualeditors.css @ 235

Last change on this file since 235 was 235, checked in by fpvanagthoven, 13 years ago

getObject.php is de nieuwe pagina die gewoon PHP objecten in JSON zet en echoet. Nu werkt alleen de questionEditor er op, uiteindelijk zou dit ook de infopanel en de sequencer moeten gaan serven.
File size: 11.6 KB
Line 
1/*
2    Document   : visualeditors
3    Created on : 6-dec-2011, 13:43:58
4    Author     : Thijs Schipper
5    Description:    Attempt at a new -organized- stylesheet
6        Purpose of the stylesheet follows.
7*/
8
9/*
10   TODO customize this sample style
11   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
12*/
13
14root {
15    display: block;
16}
17
18html {
19    background-image: url('../images/bg/blueishgridblock.png');
20    /*background-image: url('../images/icons/nyan.gif');*/
21    height: 100%;
22    font-size: 12px;
23    font-family: sans-serif;
24}
25
26#wrapper {
27    width: 80%;
28    min-width: 800px;
29    margin: 0 auto;
30    clear:both;
31}
32
33#content {
34    width: 100%;
35    position: relative;
36    padding: 2em 0;
37}
38
39#logo {
40    float: left;
41    width:250px;
42    margin: 0 0 10px 0;
43    padding: 10px 40px;
44    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
45    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
46    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
47    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
48    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
49
50    background-image: -webkit-gradient(
51        linear,
52        left top,
53        left bottom,
54        color-stop(0.21, #B0B0B0),
55        color-stop(0.8, #888888)
56        );
57    background-position: bottom;
58    background-repeat: repeat-x;
59    border: 1px solid #FFF;
60    border-top-style: none;
61}
62
63#logo #logoImage {
64    color: #FFF;
65    margin: 0;
66    padding: 0;
67    font: bold 22px Arial;
68}
69
70#logo #logoControls {
71    border-top: 1px solid #555;
72    font: 12px Arial;
73    color: #555;
74    text-align: right;
75    width: auto;
76}
77
78#logoControls a {
79    color: #FFF;
80    font: bold 12px arial;
81    text-decoration: none;
82    text-align: right;
83}
84
85/************************/
86/* STANDARD UI ELEMENTS */
87/************************/
88
89.largeFrame {
90    width: auto;
91    padding: 0 1em;
92    float: left;
93    clear: both;
94
95
96    -moz-box-shadow: 2px 2px 1px #888;
97    -webkit-box-shadow: 2px 2px 1px #888;
98    box-shadow: 2px 2px 1px #888;
99    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
100    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
101    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
102    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
103    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
104
105    background-image: -webkit-gradient(
106        linear,
107        left top,
108        left bottom,
109        color-stop(0.21, #B0B0B0),
110        color-stop(0.8, #888888)
111        );
112    background-position: bottom;
113    background-repeat: repeat-x;
114    border: 1px solid #FFF;
115    border-radius: 1em;
116    -moz-border-radius: 1em;
117}
118
119.largeFrame .content {
120    clear: left;
121}
122
123.innerLargeFrame {
124    width: auto;
125    max-height: 300px;
126    padding: 1em 1em;
127    border: 1px solid #FFF;
128    border-radius: 0.5em;
129    -maz-border-radius: 0.5em;
130    float: left;
131    clear: both;
132
133
134    background-image: linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
135    background-image: -o-linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
136    background-image: -moz-linear-gradient(tbottomop, #B0B0B0 21%, #888888 80%);
137    background-image: -webkit-linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
138    background-image: -ms-linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
139    background-image: -webkit-gradient(
140        linear,
141        left bottom,
142        left top,
143        color-stop(0.21, #B0B0B0),
144        color-stop(0.8, #888888)
145        );
146    background-position: bottom;
147    background-repeat: repeat-x;
148}
149
150.innerLargeFrame.horizontal {
151    height: auto;
152    overflow-x: auto;
153    overflow-y: hidden;
154}
155
156.innerLargeFrame.vertical {
157    overflow-x: hidden;
158    overflow-y: auto;
159    max-height: none;
160}
161
162.largeFrame.side {
163    clear: none;
164    margin: 0 10px;
165}
166
167.largeFrame.side .innerLargeFrame {
168    width: 400px;
169    height: 400px;
170}
171
172.smallFrame {
173    margin: 0.5em auto;
174    float: left;
175    clear: both;
176    background-color: #555;
177    -moz-box-shadow: 2px 2px 1px #888;
178    -webkit-box-shadow: 2px 2px 1px #888;
179    box-shadow: 2px 2px 1px #888;
180    border: 1px solid #FFF;
181    margin: 0;
182}
183
184.smallFrame .content {
185    width: 600px;
186    float: left;
187    clear: left;
188    padding: 0.25em 1em;
189
190    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
191    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
192    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
193    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
194    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
195    background-image: -webkit-gradient(
196        linear,
197        left bottom,
198        left top,
199        color-stop(0.21, #B0B0B0),
200        color-stop(0.8, #888888)
201        );
202    background-position: bottom;
203    background-repeat: repeat-x;
204}
205
206.smallFrame.selected {
207    background-color: #777777;
208    border-color:#000;
209}
210
211.largeTitle {
212    width: auto;
213    padding: 0.25em 1em;
214    font-size: 1.5em;
215    color: #FFF;
216    float: left;
217    text-shadow: #555 0px 0px 5px;
218}
219
220.smallTitle {
221    background-color: transparent;
222    width: auto;
223    min-height: 1.5em;
224    padding: 0.25em 1em;
225    font-size: 1.25em;
226    color: #FFF;
227    float: left;
228}
229
230.smallTitle .listNumber {
231    float: left;
232    color: #CCFFFF;
233    font-size: 2em;
234}
235
236.controls {
237    clear: both;
238    text-align: right;
239    float: right;
240    min-height: 2.5em;
241}
242
243.bigButton {
244    padding:0.25em;
245    margin: 0.25em;
246    border: 1px solid #555;
247    border-radius: 0.25em;
248    -moz-border-radius: 0.25em;
249    background-color: transparent;
250    -webkit-user-select: none;
251    -khtml-user-select: none;
252    -moz-user-select: none;
253    -o-user-select: none;
254    user-select: none;
255}
256
257.bigButton.vertical {
258    margin: 0.25em;
259    text-align: center;
260    min-width: 7em;
261    max-width: 12em;
262    height: 2em;
263    font-size: 20px;
264    font-weight: bold;
265    color: #555;
266    float: left;
267    clear: both;
268    border: 1px solid #555;
269    border-radius: 0.25em;
270    -moz-border-radius: 0.25em;
271    background-color: transparent;
272    -webkit-user-select: none;
273    -khtml-user-select: none;
274    -moz-user-select: none;
275    -o-user-select: none;
276    user-select: none;
277    cursor: default;
278}
279
280.bigButton.icon
281
282.bigButton:hover {
283    border-color: #1c94c4;
284    background-color: #ddd;
285}
286
287.bigButton .buttonIcon {
288
289}
290
291.smallButton {
292    margin: 0.5em 0.25em;
293    padding: 0.25em 0.5em;
294    color: #555;
295    font-weight: bold;
296    border: 1px solid #555;
297    border-radius: 0.25em;
298    -moz-border-radius: 0,25em;
299    background-color: transparent;
300    -webkit-user-select: none;
301    -khtml-user-select: none;
302    -moz-user-select: none;
303    -o-user-select: none;
304    user-select: none;
305    cursor: default;
306}
307
308.smallFrame .smallButton {
309    color: #ccc;
310    border-color: #ccc;
311}
312
313.smallButton:hover {
314    color: #000;
315    background-color: #ddd;
316    border-color: #1c94c4;
317}
318
319
320/****************************/
321/* PIPELINE EDITOR SPECIFIC */
322/****************************/
323
324#seqContentWrapper {
325    clear: none;
326    float: left;
327    margin-right: -32000px;
328    min-height: 9em;
329}
330
331#seqContentWrapper .divider.horizontal {
332    width: 10px;
333    height: 50px;
334    margin: 10px 15px 0 20px;
335    background-image: url('../images/ui/sequencerDivider.png');
336    float: left;
337}
338
339.displayStep {
340    width: 52px;
341    padding: 0;
342    margin-top: 10px;
343    background-repeat: no-repeat;
344    float: left;
345    text-align: center;
346    -webkit-user-select: none;
347    -khtml-user-select: none;
348    -moz-user-select: none;
349    -o-user-select: none;
350    user-select: none;
351}
352
353.displayStep.selected .displayStepIcon{
354    background-color: #bbbbbb;
355    /*-moz-box-shadow: 0 0 50px #FFF;
356    -webkit-box-shadow: 0 0 50px #FFF;
357    box-shadow: 0 0 50px #FFF;*/
358    border-color: #1c94c4;
359
360}
361
362.displayStep .displayStepIcon {
363    width: 50px;
364    height: 50px;
365    border: 2px solid #555;
366    color: #FFF;
367}
368
369.displayStep p{
370    margin-top: 5px;
371    font-weight: normal;
372    font-size: 1em;
373}
374
375#toolbox {
376    margin-top: 2em;
377}
378
379#toolbox .content {
380    padding: 0.5em;
381}
382
383#toolbox .bigButton p {
384    position: relative;
385    top: -1.75em;
386    margin-left: 0.5em;
387    display: inline;
388}
389
390.bigButton.toolbox {
391    clear: both;
392}
393
394#infoPanel {
395    margin-top: 2em;
396    margin-left: 2em;
397    clear: right;
398}
399
400#infoPanel .content {
401    clear: both;
402    min-height: 10em;
403    width: 30em;
404}
405
406.content .property {
407    float: left;
408    clear: left;
409    font-weight: bold;
410    width: 8em;
411    color: #FFF;
412}
413
414.content .value {
415    float: left;
416}
417
418/**************************/
419/* Survey Editor Specific */
420/**************************/
421
422#surveyEditor {
423    background-color: #0000FF;
424}
425
426#seqContentWrapper .divider.vertical {
427    float: left;
428    clear: both;
429    height: 2px;
430    width: 400px;
431    background-color: #555; /* VIES MAGENTA! */
432    margin: 0.75em 100px;
433}
434
435.questionBody {
436    float: left;
437    clear: left;
438    margin: 1em 0;
439    font-style: italic;
440}
441
442.questionParamsView {
443    float: left;
444    clear: left;
445    border: 1px solid #555;
446    padding: 0.5em;
447    font-weight: bold;
448}
449
450#pageControls {
451    float: left;
452    margin: 5px 200px 0 0;
453}
454
455#pageControls .smallTextField {
456    width: 1.5em;
457}
458
459.vertControls {
460    text-align: center;
461    display:block;
462    float: left;
463    clear: right;
464    margin: 0 0 0 1em;
465}
466
467.vertControls .segment {
468    margin: 1.25em -1px 0.25em -1px;
469    border: 1px solid #555;
470    clear: both;
471    padding: 1px;
472    float: left;
473    border-radius: 5px;
474}
475
476.vertControls label {
477    width: 100%;
478    float: left;
479    clear: both;
480    font-size: 12px;
481    text-align: center;
482    margin: -1.25em 0 0;
483    color: #555;
484    font-weight: bold;
485}
486
487.smallFrame .smallButton {
488    width:55px;
489}
490
491/****************************/
492/* QUESTION EDITOR SPECIFIC */
493/****************************/
494
495.smallFrame.questionEditor {
496    /* Nothing yet... */
497}
498
499.qeBodyTextField {
500    width: 600px;
501    height: 100px;
502}
503
504#qeQuestionParamsDiv label {
505    float: left;
506    width: 150px;
507    margin: 5px 5px;
508}
509
510#qeQuestionParamsDiv .qeParamField {
511    float: left;
512}
513
514#qeQuestionParamsDiv .l {
515    clear: left;
516}
517
518
519/**************************/
520/* Cartis Editor Specific */
521/**************************/
522
523#leftColumn {
524    float: left;
525    clear: left;
526}
527
528#rightColumn {
529    float: left;
530    clear: none;
531}
532
533.largeFrame.C{
534    clear: left;
535    margin: 10px;
536    padding: 5px;
537
538    height: auto;
539    max-height: 400px;
540}
541
542.largeFrame.Cu{
543    clear: left;
544    margin: 10px;
545    padding: 5px;
546    width: 640px;
547}
548
549.largeFrame.Cv {
550    clear: left;
551    margin: 10px;
552    padding: 5px;
553    width: 200px;
554}
555
556.checkboxList {
557    overflow-y: scroll;
558    overflow-x: hidden;
559    clear: left;
560    width: auto;
561    height: 250px;
562    background-color: #FFF;
563    border-width: 2px;
564    border-style: solid;
565    border-bottom-color: #AAA;
566    border-top-color: #555;
567    border-right-color: #AAA;
568    border-left-color: #555;
569}
570
571.dbDataList {
572    width: 300px;
573    float: left;
574    clear: left;
575    margin: 0 10px 0 10px;
576}
577
578#dbShoppingCart .content {
579    height: 415px;
580}
581
582/*******************/
583/* DDMenu specific */
584/*******************/
585
586#toolboxMenu li .bigButton.toolbox div {
587    position: absolute;
588    visibility: hidden;
589    margin: 0;
590    padding: 0;
591    border: 1px solid #555;
592    background: #eaebd8;
593}
594
595#toolboxMenu li .bigButton.toolbox div a {
596    position: relative;
597    float: left;
598    clear: left;
599    margin: 0;
600    padding: 5px 10px;
601    width: 75px;
602    white-space: nowrap;
603    text-align: left;
604    text-decoration: none;
605    color: #2875de;
606    font: 11px arial;
607}
608
609#toolboxMenu li .bigButton.toolbox div a:hover {
610    background: #49a3ff;
611    color: #fff;
612}
Note: See TracBrowser for help on using the repository browser.