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

Last change on this file since 167 was 167, checked in by fpvanagthoven, 13 years ago
  • Save functie verbeterd, nu confirm? parameter.
  • Begin aan infopanel gemaakt
  • moveStep functie in JS gezet, werkt nog niet helemaal goed (refreshed niet!)
  • General CSS layout verbeterd van pipelineEditor.php
  • edit button werkt nu.
  • saveSession zit nog steeds een error in, nog niet weten te fixen. Heeft met creator te maken.
File size: 14.0 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: 15px;
51    border-radius: 15px;
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    line-height: 2em;
111    text-shadow: #555 0px 0px .2em;
112    height: 189px;
113}
114
115#logo a {
116    text-decoration: none;
117    color: #ddd;
118}
119
120#logo a:hover {
121    color: #fff;
122}
123
124#content {
125    position: relative;
126    width: 100%;
127    padding: 2em 0;
128}
129
130
131
132/* ##################################################################
133   ===================== STYLESHEET OF GLORY ======================== */
134
135#creation {
136    position: relative;
137    min-height: 10em;
138    background-image: url('../images/bg/graygradient.png');
139    background-repeat: repeat-x;
140    background-color: #aeb2b3;
141    -moz-border-radius: 15px;
142    border-radius: 15px;
143    -moz-box-shadow: 2px 2px 2px #888;
144    -webkit-box-shadow: 2px 2px 2px #888;
145    box-shadow: 2px 2px 2px #888;
146    padding: 2em;
147    border: 1px solid white;
148}
149
150#surveyHead {
151    position: relative;
152    width: 100%;
153}
154
155#surveyTitle {
156
157}
158
159#surveyTitle:hover {
160
161}
162
163.titleBox {
164    width: 17em;
165    font-size: large;
166    color: #555;
167}
168
169.titleBox:hover {
170    color: black;
171}
172
173#surveyDescription {
174
175}
176
177.descriptionBox {
178    display: block;
179    width: 30em;
180    max-width: 30em;
181    font-family: sans-serif;
182    color: #555;
183}
184
185#timeStamp {
186    position: absolute;
187    color: #333;
188    font-size: small;
189    right: 6em;
190    top: 0;
191    line-height: 2.3em;
192}
193
194#surveySaveButton {
195    position: absolute;
196    top: 0;
197    right: 0;
198    width: 5em;
199}
200
201#surveyDescription:hover {
202    color: black;
203}
204
205#surveyLink {
206    position: absolute;
207    top: -2em;
208    right: 0;
209    font-size: x-small;
210    color: #333;
211    width: 30em;
212    border-color: transparent;
213    background-color: transparent;
214}
215
216#questionsDiv {
217    margin-top: 2em;
218}
219
220.answersDiv {
221    margin-left: 0.5em;
222}
223
224#submitSurvey {
225    display: block;
226    height: 3em;
227    width: 10em;
228    margin-top: 2em;
229    background-color: #aeb2b3;
230    border: 1px solid white;
231}
232
233#submitSurvey:hover {
234    background-color: #e3eff3;
235    color: #111;
236    border-color: deepskyblue;
237}
238
239#submitSurvey:active {
240    background-color: #fff;
241    border-style: inset;
242    border-color: orange;
243}
244
245#addQuestionButton {
246    margin-top: 1em;
247    width: 20em;
248}
249
250#addOpt {
251    margin-left: 1em;
252}
253
254
255.surveyButton {
256    color: #444;
257    font-weight: bold;
258    background-color: transparent;
259    border: 1px solid #555;
260    -moz-border-radius: 6px;
261    border-radius: 6px;
262}
263
264
265.surveyButton.dis {
266    color: #666;
267}
268
269.surveyButton.dis:hover {
270    background-color: transparent;
271    color: #666;
272    border-color: #555;
273}
274
275.bigSurveyButton {
276    margin-top: 1px;
277    height: 3em;
278    width: 12em;
279}
280
281.surveyButton:hover {
282    background-color: #e3eff3;
283    color: #111;
284    border-color: deepskyblue;
285}
286
287.surveyButton:active {
288    background-color: #fff;
289    border-style: inset;
290    border-color: orange;
291}
292
293.question { 
294    margin-top: 3em;
295    border-top: 1px solid #ddd;
296    text-shadow: #fff 0px 0px 1px;
297}
298
299.questionTable td{
300    width: 8em;
301}
302
303.questionTable th{
304    text-align: left;
305}
306
307
308
309/* ##################################################################
310   ===================== STYLESHEET OF GLORY ======================== */
311
312.menu {
313    width: 30em;
314    margin: 1em auto 0 auto;
315    padding: 2em;
316    text-align: center;
317    background-image: url('../images/bg/graygradient.png');
318    background-repeat: repeat-x;
319    background-color: #aeb2b3;
320    -moz-border-radius: 15px;
321    border-radius: 15px;
322    border: 1px solid white;
323}
324
325.menuButtons {
326    float: left;
327}
328
329.toLoad {
330    background-color: #c6c6c6;
331    width: 23em;
332    height: 10em;
333}
334
335/* ##################################################################
336   ===================== STYLESHEET OF GLORY ======================== */
337.padding2em {
338    padding: 2em;
339}
340
341.padding1em {
342    padding: 1em;
343}
344
345.topMargin {
346    margin-top: 2em;
347}
348
349.leftPadding {
350    padding-left: 2em;
351}
352
353.leftPadding1 {
354    padding-left: 1em;
355}
356
357.noPadding {
358    padding: 0;
359}
360
361.centerBoxed {
362    margin: 1em auto;
363    width: 30em;
364    text-align: center;
365    padding: 0 1em;
366    font-size: small;
367    color: white;
368    /*    border: 1px solid gray;*/
369}
370
371.nextLine {
372    display: block;
373}
374
375.leftAlign {
376    text-align: left;
377}
378
379.leftMargin {
380    margin-left: 10px;
381}
382
383.width100p {
384    width: 100%;
385}
386
387.floatLeft {
388    float: left;
389}
390
391/* ##################################################################
392   ===================== STYLESHEET OF GLORY ======================== */
393
394.answerInput {
395    display: block;
396}
397
398.answerBox {
399    padding-left: 1em;
400}
401
402.textBox {
403    width: 20em;
404}
405
406.intBox {
407    width: 5em;
408    margin: 0 .3em;
409    border: 1px solid #abadb3;
410}
411
412.scaleLabel {
413    display: inline;
414    color: #333;
415}
416
417.questionTitle {
418
419}
420
421.questionDescription {
422    font-size: small;
423}
424
425.topRight {
426    position: absolute;
427    top: 2.3em;
428    right: 2.3em;
429    padding-left: 1em;
430    padding-right: 1em;
431}
432
433.borderRadius {
434    -moz-border-radius: 15px;
435    border-radius: 15px;
436}
437
438.boxShadow {
439    -moz-box-shadow: 2px 2px 2px #888;
440    -webkit-box-shadow: 2px 2px 2px #888;
441    box-shadow: 2px 2px 2px #888;
442}
443
444/* ##################################################################
445   ===================== STYLESHEET OF GLORY ======================== */
446
447#questionEditForm {
448
449}
450
451#saveQuestion {
452    position: absolute;
453    top: 1em;
454    right: 1em;
455}
456
457#clearQuestionFields {
458    position: absolute;
459    top: 1em;
460    right: 5em;
461}
462
463/* ##################################################################
464   ===================== STYLESHEET OF GLORY ======================== */
465#sessionCreationForm {
466    padding-bottom: 16em;
467}
468
469#pipelineWrapper {
470    float: left;
471    width: 40%;
472}
473
474.pipelineHead {
475    margin-top: 1em;
476    text-shadow: #fff 0px 0px 1px;
477}
478
479#pipeline {
480    display: block;
481    width: 100%;
482    height: 15em;
483    overflow: hidden;
484}
485
486#surveysList {
487    height: 15em;
488}
489
490#applicationsList {
491    height: 15em;
492}
493
494.pipelineButton {
495
496}
497
498#surveysApplicationsWrapper {
499    float: left;
500    width: 60%;
501}
502
503#surveysForPipelineWrapper {
504    float: left;
505    width: 50%;
506}
507
508#applicationsForPipelineWrapper {
509    float: left;
510    width: 50%;
511}
512
513/* ##################################################################
514   ===================== STYLESHEET OF GLORY ======================== */
515.resultsDiv {
516    height: 10em;
517    border: 1px solid white;
518}
519
520.resultDiv {
521    width: 10em;
522    height: 10em;
523    border: 1px solid white;
524    background-color: #c6c6c6;
525    float: left;
526    margin-left: 2em;
527}
528
529/* ##################################################################
530   ===================== STYLESHEET OF GLORY ======================== */
531#questionCreation
532{
533    position: relative;
534    min-height: 10em;
535    min-width: 500px;
536    width: 50%;
537    background-image: url('../images/bg/graygradient.png');
538    background-repeat: repeat-x;
539    background-color: #aeb2b3;
540    -moz-border-radius: 15px;
541    border-radius: 15px;
542    -moz-box-shadow: 2px 2px 2px #888;
543    -webkit-box-shadow: 2px 2px 2px #888;
544    box-shadow: 2px 2px 2px #888;
545    padding: 2em;
546    border: 1px solid white;
547}
548
549#questionListWrapper {
550    float: left;
551    text-align: center;
552    margin-bottom: 5em;
553    width: 40%;
554    margin-right: 2em;
555}
556
557#questionListWrapper #questionsList {
558    height: 30em;
559    width: 100%;
560}
561
562#questionEditForm {
563   
564}
565
566/* ##################################################################
567   ===================== STYLESHEET OF GLORY ======================== */
568.xdebug-var-dump {
569    color:white;
570}
571
572
573/*
574#pipelineFrame{
575    height: 12em;
576    width: 96em;
577    display: block;
578    background-image: url('../images/bg/pipelineFrameBG.png');
579    background-color: #e3eff3;
580}
581
582.pipelineFrame .pipelineObject {
583    width: 10em;
584    height: 10em;
585    margin: 1em auto 1em auto;
586    text-align: center;
587}
588*/
589
590/*
591*
592*
593*   Horizontal sequencer styling
594*
595*
596*/
597
598#sequencer {
599    width: 100%;
600    /*max-width: 800px;*/
601    margin: 0 auto 0 auto;
602    padding-right: 0.5em;
603    /*background-image: url('../images/bg/sequencerBG.png');*/
604    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
605    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
606    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
607    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
608    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
609
610    background-image: -webkit-gradient(
611        linear,
612        left top,
613        left bottom,
614        color-stop(0.21, #B0B0B0),
615        color-stop(0.8, #888888)
616    );
617    background-position: bottom;
618    background-repeat: repeat-x;
619    float: left;
620}
621
622#sequencer #seqContent {
623    height: 9em;
624    width: 98%;
625    overflow-x: scroll;
626    overflow-y: hidden;
627   
628    margin-bottom: 0.5em;
629   
630    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
631    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
632    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
633    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
634    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
635    background-image: -webkit-gradient(
636        linear,
637        left bottom,
638        left top,
639        color-stop(0.25, #B0B0B0),
640        color-stop(0.8, #888888)
641    );
642   
643    border: 1px solid #ddd;
644    -moz-border-radius: 0.5em;
645    border-radius: 0.5em;
646    padding: 0.5em;
647    /*white-space: nowrap;*/
648    float: left;
649}
650
651#sequencer #controls {
652    width: auto;
653    text-align: right;
654    margin-bottom: -0.5em;
655    float: left;
656}
657
658.displayStep {
659    width: 52px;
660    padding: 0;
661    margin: 10px 0 0 0;
662    background-repeat: no-repeat;
663    float: left;
664    text-align: center;
665    /*display: inline-block;*/
666}
667
668.displayStep.selected {
669    -moz-box-shadow: 0 0 50px #FFF;
670    -webkit-box-shadow: 0 0 50px #FFF;
671    box-shadow: 0 0 50px #FFF;
672   
673}
674
675.displayStep .displayStepIcon {
676    width: 50px;
677    height: 50px;
678    border: 2px solid #444444;
679    color: #FFF;
680    /*float: left;*/
681}
682
683.displayStep p{
684    margin-top: 5px;
685    font-weight: normal;
686    font-size: 0.875em;
687    /*float: left;*/
688   
689}
690
691#seqContent .divider {
692    width: 10px;
693    height: 50px;
694    margin: 10px 15px 0 20px;
695    background-image: url('../images/ui/sequencerDivider.png');
696    float: left;
697    /*display: inline-block;*/
698}
699
700#seqContentWrapper {
701    float: left;
702    margin-right: -32767px; /* maximum for opera, enough for ~320 steps*/
703    padding: 0 10px;
704}
705
706
707
708
709
710
711/*
712 *
713 *
714 *  TOOLBOX
715 *
716 *
717*/
718
719#toolbox {
720    /*width: 40%;*/
721    float: left;
722    margin: 1em 2em 0 0;
723    /*background-image: url('../images/bg/sequencerBG.png');*/
724    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
725    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
726    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
727    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
728    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
729
730    background-image: -webkit-gradient(
731        linear,
732        left top,
733        left bottom,
734        color-stop(0.25, #B0B0B0),
735        color-stop(0.8, #888888)
736    );
737   
738}
739
740#toolbox .creationButton {
741    height: 50px;
742    margin: 0 0 5px 0;
743    border: 1px solid #000;
744    border-radius: 6px;
745    -moz-border-radius: 6px;
746    cursor: pointer;
747}
748
749#toolbox .creationButton:hover {
750    border: 1px solid #FFF;
751    background: rgba(255, 255, 255, 0.2);
752}
753
754#toolbox .buttonIcon {
755    border: none;
756    border-radius: 6px;
757    margin: 0 10px 0 0;
758    float: left;
759}
760
761#toolbox .creationButton p {
762    margin: 15px 10px 0 0;
763    color: #444;
764    float: left;
765}
766
767#infoPanel {
768    width: 500px;
769    float: right;
770    margin: 1em 0 0 0;
771    /*background-image: url('../images/bg/sequencerBG.png');*/
772    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
773    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
774    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
775    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
776    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
777
778    background-image: -webkit-gradient(
779        linear,
780        left top,
781        left bottom,
782        color-stop(0.25, #B0B0B0),
783        color-stop(0.8, #888888)
784    );
785}
786
787#infoContent {
788    float: left;
789    display: block;
790    width: 500px;
791    background-color: #ff0000;
792}
793
794.fieldsetTitle {
795    height: 1em;
796    margin-bottom: 0.5em;
797    margin-top:0.5em;
798    margin-left: 1em;
799    font-size: 1.25em;
800    color: #FFF;
801    float: left;
802    display: block;
803}
Note: See TracBrowser for help on using the repository browser.