source: Dev/trunk/css/awesome.css @ 177

Last change on this file since 177 was 177, checked in by fpvanagthoven, 13 years ago
  • Boel dingen gesloopt, maar wel allemaal terug te draaien.
  • Nieuwe stylesheet begonnen (visualeditors.css), die de meuk uit de andere stylesheets een beetje uitdunt. Bedoeling is dat deze stylesheet generiek genoeg is om voor alle verdere en huidige pagina's te werken.
  • Layout van surveyEditor gemaakt, is nog lang niet klaar, maar het format van de editor en de questions daarin is duidelijk. Vrijdag bevestigen tijdens geprek Julia of dit inderdaad een handig format is.
  • resetstyle.css toegevoegd aan de StyleSheet?.php class, deze zorgt voor meer browser cross-compatibility door de styling van elementen 'op nul te zetten'.
  • Toolbox.php en pipelineSequencer_1.php zijn nu aangepast aan de nieuwe stylesheet. Deze worden later weer hernoemd naar de goede naam.
File size: 18.6 KB
Line 
1/*
2    Document   : style
3    Created on : 12-jul-2011, 15:12:02
4    Author     : fpvanagthoven
5    Description:
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
14h1 {
15    width: 100%;
16    text-align: center;
17    color: white;
18    text-shadow: #888 0px 0px 1em;
19    margin: 0 0 0.1em 0;
20}
21
22h2 {
23    margin: 0;
24    font-size: larger;
25}
26
27h3 {
28    margin: 0;
29    font-size: small;
30    font-weight: normal;
31    color: #333;
32}
33
34legend {
35    padding-left: 0em;
36    color: #fff;
37    text-shadow: #000 0px 0px .4em;
38}
39
40fieldset {
41    background-color: #aeb2b3;
42    border: 1px solid #fff;
43    -moz-border-radius: 1em;
44    border-radius: 1em;
45    margin-bottom: 2em;
46    padding: 0 1em 1em 1em;
47    -moz-box-shadow: 2px 2px 1px #888;
48    -webkit-box-shadow: 2px 2px 1px #888;
49    box-shadow: 2px 2px 1px #888;
50}
51html {
52    background-image: url('../images/bg/blueishgridblock.png');
53    height: 100%;
54    font-size: 12px;
55}
56
57root {
58    display: block;
59}
60
61body {
62    font-family: sans-serif;
63    background-image: url('../images/bg/blueishgrid.png');
64    background-repeat: repeat-x;
65    margin: 0;
66    padding: 0;
67    height: 100%;
68}
69
70input {
71    background-color: #c6c6c6;
72    border: 1px solid #888;
73}
74
75textarea {
76    background-color: #c6c6c6;
77    border: 1px solid #888;
78}
79
80select {
81    background-color: #c6c6c6;
82    border: 1px solid #888;
83}
84
85#wrapper {
86    width: 80%;
87    min-width: 800px;
88    margin: auto;
89}
90
91#header {
92    height: 4em;
93    background-color: transparent;
94}
95
96#logo{
97    background-image: url('../images/headlogo.png');
98    background-position: top center;
99    background-repeat: no-repeat;
100    font-size: 2em;
101    font-weight: bold;
102    text-align: center;
103    padding-top: 15px;
104    /*line-height: 2em;*/
105    text-shadow: #555 0px 0px .2em;
106    height: 189px;
107}
108
109#logo a {
110    text-decoration: none;
111    color: #ddd;
112}
113
114#logo a:hover {
115    color: #fff;
116}
117
118#content {
119    position: relative;
120    width: 100%;
121    padding: 2em 0;
122}
123
124
125
126/* ##################################################################
127   ===================== STYLESHEET OF GLORY ======================== */
128
129#creation {
130    position: relative;
131    min-height: 10em;
132    background-image: url('../images/bg/graygradient.png');
133    background-repeat: repeat-x;
134    background-color: #aeb2b3;
135    -moz-border-radius: 15px;
136    border-radius: 15px;
137    -moz-box-shadow: 2px 2px 2px #888;
138    -webkit-box-shadow: 2px 2px 2px #888;
139    box-shadow: 2px 2px 2px #888;
140    padding: 2em;
141    border: 1px solid white;
142}
143
144#surveyHead {
145    position: relative;
146    width: 100%;
147}
148
149#surveyTitle {
150
151}
152
153#surveyTitle:hover {
154
155}
156
157.titleBox {
158    width: 17em;
159    font-size: large;
160    color: #555;
161}
162
163.titleBox:hover {
164    color: black;
165}
166
167#surveyDescription {
168
169}
170
171.descriptionBox {
172    display: block;
173    width: 30em;
174    max-width: 30em;
175    font-family: sans-serif;
176    color: #555;
177}
178
179#timeStamp {
180    position: absolute;
181    color: #333;
182    font-size: small;
183    right: 6em;
184    top: 0;
185    line-height: 2.3em;
186}
187
188#surveySaveButton {
189    position: absolute;
190    top: 0;
191    right: 0;
192    width: 5em;
193}
194
195#surveyDescription:hover {
196    color: black;
197}
198
199#surveyLink {
200    position: absolute;
201    top: -2em;
202    right: 0;
203    font-size: x-small;
204    color: #333;
205    width: 30em;
206    border-color: transparent;
207    background-color: transparent;
208}
209
210#questionsDiv {
211    margin-top: 2em;
212}
213
214.answersDiv {
215    margin-left: 0.5em;
216}
217
218#submitSurvey {
219    display: block;
220    height: 3em;
221    width: 10em;
222    margin-top: 2em;
223    background-color: #aeb2b3;
224    border: 1px solid white;
225}
226
227#submitSurvey:hover {
228    background-color: #e3eff3;
229    color: #111;
230    border-color: deepskyblue;
231}
232
233#submitSurvey:active {
234    background-color: #fff;
235    border-style: inset;
236    border-color: orange;
237}
238
239#addQuestionButton {
240    margin-top: 1em;
241    width: 20em;
242}
243
244#addOpt {
245    margin-left: 1em;
246}
247
248
249.surveyButton {
250    color: #444;
251    font-weight: bold;
252    background-color: transparent;
253    border: 1px solid #555;
254    -moz-border-radius: 6px;
255    border-radius: 6px;
256}
257
258
259.surveyButton.dis {
260    color: #666;
261}
262
263.surveyButton.dis:hover {
264    background-color: transparent;
265    color: #666;
266    border-color: #555;
267}
268
269.bigSurveyButton {
270    margin-top: 1px;
271    height: 3em;
272    width: 12em;
273}
274
275.surveyButton:hover {
276    background-color: #e3eff3;
277    color: #111;
278    border-color: deepskyblue;
279}
280
281.surveyButton:active {
282    background-color: #fff;
283    border-style: inset;
284    border-color: orange;
285}
286
287.question { 
288    margin-top: 3em;
289    border-top: 1px solid #ddd;
290    text-shadow: #fff 0px 0px 1px;
291}
292
293.questionTable td{
294    width: 8em;
295}
296
297.questionTable th{
298    text-align: left;
299}
300
301
302
303/* ##################################################################
304   ===================== STYLESHEET OF GLORY ======================== */
305
306.menu {
307    width: 30em;
308    margin: 1em auto 0 auto;
309    padding: 2em;
310    text-align: center;
311    background-image: url('../images/bg/graygradient.png');
312    background-repeat: repeat-x;
313    background-color: #aeb2b3;
314    -moz-border-radius: 15px;
315    border-radius: 15px;
316    border: 1px solid white;
317}
318
319.menuButtons {
320    float: left;
321}
322
323.toLoad {
324    background-color: #c6c6c6;
325    width: 23em;
326    height: 10em;
327}
328
329/* ##################################################################
330   ===================== STYLESHEET OF GLORY ======================== */
331.padding2em {
332    padding: 2em;
333}
334
335.padding1em {
336    padding: 1em;
337}
338
339.topMargin {
340    margin-top: 2em;
341}
342
343.leftPadding {
344    padding-left: 2em;
345}
346
347.leftPadding1 {
348    padding-left: 1em;
349}
350
351.noPadding {
352    padding: 0;
353}
354
355.centerBoxed {
356    margin: 1em auto;
357    width: 30em;
358    text-align: center;
359    padding: 0 1em;
360    font-size: small;
361    color: white;
362    /*    border: 1px solid gray;*/
363}
364
365.nextLine {
366    display: block;
367}
368
369.leftAlign {
370    text-align: left;
371}
372
373.leftMargin {
374    margin-left: 10px;
375}
376
377.width100p {
378    width: 100%;
379}
380
381.floatLeft {
382    float: left;
383}
384
385/* ##################################################################
386   ===================== STYLESHEET OF GLORY ======================== */
387
388.answerInput {
389    display: block;
390}
391
392.answerBox {
393    padding-left: 1em;
394}
395
396.textBox {
397    width: 20em;
398}
399
400.intBox {
401    width: 5em;
402    margin: 0 .3em;
403    border: 1px solid #abadb3;
404}
405
406.scaleLabel {
407    display: inline;
408    color: #333;
409}
410
411.questionTitle {
412
413}
414
415.questionDescription {
416    font-size: small;
417}
418
419.topRight {
420    position: absolute;
421    top: 2.3em;
422    right: 2.3em;
423    padding-left: 1em;
424    padding-right: 1em;
425}
426
427.borderRadius {
428    -moz-border-radius: 15px;
429    border-radius: 15px;
430}
431
432.boxShadow {
433    -moz-box-shadow: 2px 2px 2px #888;
434    -webkit-box-shadow: 2px 2px 2px #888;
435    box-shadow: 2px 2px 2px #888;
436}
437
438/* ##################################################################
439   ===================== STYLESHEET OF GLORY ======================== */
440
441#questionEditForm {
442
443}
444
445#saveQuestion {
446    position: absolute;
447    top: 1em;
448    right: 1em;
449}
450
451#clearQuestionFields {
452    position: absolute;
453    top: 1em;
454    right: 5em;
455}
456
457/* ##################################################################
458   ===================== STYLESHEET OF GLORY ======================== */
459#sessionCreationForm {
460    padding-bottom: 16em;
461}
462
463#pipelineWrapper {
464    float: left;
465    width: 40%;
466}
467
468.pipelineHead {
469    margin-top: 1em;
470    text-shadow: #fff 0px 0px 1px;
471}
472
473#pipeline {
474    display: block;
475    width: 100%;
476    height: 15em;
477    overflow: hidden;
478}
479
480#surveysList {
481    height: 15em;
482}
483
484#applicationsList {
485    height: 15em;
486}
487
488.pipelineButton {
489
490}
491
492#surveysApplicationsWrapper {
493    float: left;
494    width: 60%;
495}
496
497#surveysForPipelineWrapper {
498    float: left;
499    width: 50%;
500}
501
502#applicationsForPipelineWrapper {
503    float: left;
504    width: 50%;
505}
506
507/* ##################################################################
508   ===================== STYLESHEET OF GLORY ======================== */
509.resultsDiv {
510    height: 10em;
511    border: 1px solid white;
512}
513
514.resultDiv {
515    width: 10em;
516    height: 10em;
517    border: 1px solid white;
518    background-color: #c6c6c6;
519    float: left;
520    margin-left: 2em;
521}
522
523/* ##################################################################
524   ===================== STYLESHEET OF GLORY ======================== */
525#questionCreation
526{
527    position: relative;
528    min-height: 10em;
529    min-width: 500px;
530    width: 50%;
531    background-image: url('../images/bg/graygradient.png');
532    background-repeat: repeat-x;
533    background-color: #aeb2b3;
534    -moz-border-radius: 15px;
535    border-radius: 15px;
536    -moz-box-shadow: 2px 2px 2px #888;
537    -webkit-box-shadow: 2px 2px 2px #888;
538    box-shadow: 2px 2px 2px #888;
539    padding: 2em;
540    border: 1px solid white;
541}
542
543#questionListWrapper {
544    float: left;
545    text-align: center;
546    margin-bottom: 5em;
547    width: 40%;
548    margin-right: 2em;
549}
550
551#questionListWrapper #questionsList {
552    height: 30em;
553    width: 100%;
554}
555
556#questionEditForm {
557
558}
559
560/* ##################################################################
561   ===================== STYLESHEET OF GLORY ======================== */
562.xdebug-var-dump {
563    color:white;
564}
565
566
567/*
568#pipelineFrame{
569    height: 12em;
570    width: 96em;
571    display: block;
572    background-image: url('../images/bg/pipelineFrameBG.png');
573    background-color: #e3eff3;
574}
575
576.pipelineFrame .pipelineObject {
577    width: 10em;
578    height: 10em;
579    margin: 1em auto 1em auto;
580    text-align: center;
581}
582*/
583
584/*
585*
586*
587*   Horizontal sequencer styling
588*
589*
590*/
591
592#sequencer {
593    width: 100%;
594    /*max-width: 800px;*/
595    margin: 0 auto 0 auto;
596    padding-right: 0.5em;
597    /*background-image: url('../images/bg/sequencerBG.png');*/
598    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
599    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
600    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
601    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
602    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
603
604    background-image: -webkit-gradient(
605        linear,
606        left top,
607        left bottom,
608        color-stop(0.21, #B0B0B0),
609        color-stop(0.8, #888888)
610        );
611    background-position: bottom;
612    background-repeat: repeat-x;
613    float: left;
614}
615
616#sequencer #seqContent {
617    height: 9em;
618    width: 98%;
619    overflow-x: scroll;
620    overflow-y: hidden;
621
622    margin-bottom: 0.5em;
623
624    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
625    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
626    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
627    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
628    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
629    background-image: -webkit-gradient(
630        linear,
631        left bottom,
632        left top,
633        color-stop(0.25, #B0B0B0),
634        color-stop(0.8, #888888)
635        );
636
637    border: 1px solid #ddd;
638    -moz-border-radius: 0.5em;
639    border-radius: 0.5em;
640    padding: 0.5em;
641    /*white-space: nowrap;*/
642    float: left;
643}
644
645#sequencer #controls {
646    width: auto;
647    text-align: right;
648    margin-bottom: -0.5em;
649    float: right;
650}
651
652.displayStep {
653    width: 52px;
654    padding: 0;
655    margin: 10px 0 0 0;
656    background-repeat: no-repeat;
657    float: left;
658    text-align: center;
659    -webkit-user-select: none;
660    -khtml-user-select: none;
661    -moz-user-select: none;
662    -o-user-select: none;
663    user-select: none;
664}
665
666.displayStep.selected {
667    -moz-box-shadow: 0 0 50px #FFF;
668    -webkit-box-shadow: 0 0 50px #FFF;
669    box-shadow: 0 0 50px #FFF;
670
671}
672
673.displayStep .displayStepIcon {
674    width: 50px;
675    height: 50px;
676    border: 2px solid #444444;
677    color: #FFF;
678    /*float: left;*/
679}
680
681.displayStep p{
682    margin-top: 5px;
683    font-weight: normal;
684    font-size: 0.875em;
685    /*float: left;*/
686
687}
688
689#seqContent .divider {
690    width: 10px;
691    height: 50px;
692    margin: 10px 15px 0 20px;
693    background-image: url('../images/ui/sequencerDivider.png');
694    float: left;
695    /*display: inline-block;*/
696}
697
698#seqContentWrapper {
699    float: left;
700    margin-right: -32767px; /* maximum for opera, enough for ~320 steps*/
701    padding: 0 10px;
702}
703
704
705
706
707
708
709/*
710 *
711 *
712 *  TOOLBOX
713 *
714 *
715*/
716
717#toolbox {
718    /*width: 40%;*/
719    float: left;
720    margin: 1em 2em 0 0;
721    /*background-image: url('../images/bg/sequencerBG.png');*/
722    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
723    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
724    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
725    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
726    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
727
728    background-image: -webkit-gradient(
729        linear,
730        left top,
731        left bottom,
732        color-stop(0.25, #B0B0B0),
733        color-stop(0.8, #888888)
734        );
735
736}
737
738#toolbox .creationButton {
739    height: 50px;
740    margin: 0 0 5px 0;
741    border: 1px solid #000;
742    border-radius: 6px;
743    -moz-border-radius: 6px;
744    cursor: pointer;
745}
746
747#toolbox .creationButton:hover {
748    border: 1px solid #FFF;
749    background: rgba(255, 255, 255, 0.2);
750}
751
752#toolbox .buttonIcon {
753    border: none;
754    border-radius: 6px;
755    margin: 0 10px 0 0;
756    float: left;
757}
758
759#toolbox .creationButton p {
760    margin: 15px 10px 0 0;
761    color: #444;
762    float: left;
763}
764
765#infoPanel {
766    width: 500px;
767    float: right;
768    margin: 1em 0 0 0;
769    /*background-image: url('../images/bg/sequencerBG.png');*/
770    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
771    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
772    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
773    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
774    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
775
776    background-image: -webkit-gradient(
777        linear,
778        left top,
779        left bottom,
780        color-stop(0.25, #B0B0B0),
781        color-stop(0.8, #888888)
782        );
783}
784
785#infoContent {
786    float: left;
787    display: block;
788    width: 500px;
789    background-color: #ff0000;
790}
791
792.fieldsetTitle {
793    height: 1em;
794    margin-bottom: 0.5em;
795    margin-top:0.5em;
796    margin-left: 1em;
797    font-size: 1.25em;
798    color: #FFF;
799    /*float: left;*/
800    display: block;
801    clear: right;
802}
803
804fieldset p {
805    display: block;
806}
807
808
809
810/* QUESTION EDITOR
811*/
812
813#questionEditor {
814    width: 60em;
815    background-color: #00FF00;
816    border: 1px solid #FFF;
817    display: block;
818    margin: 0;
819    padding: 0;
820    float: left;
821    background-color: #5c5c5c;
822    -moz-box-shadow: 2px 2px 1px #888;
823    -webkit-box-shadow: 2px 2px 1px #888;
824    box-shadow: 2px 2px 1px #888;
825}
826
827#questionEditor_header {
828    height: 1.5em;
829    float: left;
830    font-size: 1.25em;
831    color: #FFF;
832    padding: 0.5em 1em 0 1em;
833}
834
835#questionEditor_content {
836    width: 58em;
837    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
838    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
839    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
840    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
841    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
842    background-image: -webkit-gradient(
843        linear,
844        left top,
845        left bottom,
846        color-stop(0.21, #B0B0B0),
847        color-stop(0.8, #888888)
848        );
849    background-position: bottom;
850    background-repeat: repeat-x;
851    float: left;
852    padding: 0.5em 1em;
853
854}
855
856#questionEditor_controls {
857    float: right;
858    height: 2em;
859    text-align: right;
860}
861
862
863
864#questionEditor_bodyText_textArea {
865    resize: none;
866    width: auto;
867    min-width: 51em;
868    margin: 3px;
869}
870
871#questionEditor_bodyText_staticText {
872    color: white;
873    font-size: 12px;
874}
875
876.questionParamField {
877    float: left;
878    margin: 2px 0 2px 0;
879}
880
881#questionEditor_questionParams label {
882    width: 130px;
883    float: left;
884    margin: 4px 0 0 0;
885}
886
887.formLineBreak {
888    clear: left;
889}
890
891#surveyEditor {
892   
893    margin: 0 auto 0 auto;
894   
895    /*background-image: url('../images/bg/sequencerBG.png');*/
896    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
897    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
898    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
899    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
900    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
901
902    background-image: -webkit-gradient(
903        linear,
904        left top,
905        left bottom,
906        color-stop(0.21, #B0B0B0),
907        color-stop(0.8, #888888)
908        );
909    background-position: bottom;
910    background-repeat: repeat-x;
911    float: left;
912   
913    background-color: #aeb2b3;
914    border: 1px solid #fff;
915    -moz-border-radius: 1em;
916    border-radius: 1em;
917    margin-bottom: 2em;
918    padding: 0 1em 1em 1em;
919    -moz-box-shadow: 2px 2px 1px #888;
920    -webkit-box-shadow: 2px 2px 1px #888;
921    box-shadow: 2px 2px 1px #888;
922}
923
924#surveyEditorContent {
925    overflow-x: hidden;
926
927    margin-bottom: 0.5em;
928
929    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
930    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
931    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
932    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
933    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
934    background-image: -webkit-gradient(
935        linear,
936        left bottom,
937        left top,
938        color-stop(0.25, #B0B0B0),
939        color-stop(0.8, #888888)
940        );
941
942    border: 1px solid #ddd;
943    -moz-border-radius: 0.5em;
944    border-radius: 0.5em;
945    padding: 1em;
946    float: left;
947}
948
949.questionDisplay {
950    width: 60em;
951    border: 1px solid #FFF;
952    display: block;
953    margin: 0;
954    padding: 0;
955    float: left;
956    background-color: #5c5c5c;
957    -moz-box-shadow: 2px 2px 1px #888;
958    -webkit-box-shadow: 2px 2px 1px #888;
959    box-shadow: 2px 2px 1px #888;
960}
961
962.questionDisplayContent {
963    margin: 0;
964    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
965    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
966    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
967    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
968    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
969    background-image: -webkit-gradient(
970        linear,
971        left top,
972        left bottom,
973        color-stop(0.25, #B0B0B0),
974        color-stop(0.8, #888888)
975        );
976    padding: 0.5em;
977}
978
979.questionDisplayControls {
980    text-align: right;
981}
982
983p.questionBody {
984    border: 1px solid #cccccc;
985    background-color: #c5c5c5;
986}
987
988#surveyEditorControls {
989    text-align: right;
990}
Note: See TracBrowser for help on using the repository browser.