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

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