source: Dev/branches/Demo/css/visualeditors.css @ 226

Last change on this file since 226 was 226, checked in by fpvanagthoven, 13 years ago
File size: 10.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/* Survey Editor Specific */
493/**************************/
494
495#leftColumn {
496    float: left;
497    clear: left;
498}
499
500#rightColumn {
501    float: left;
502    clear: none;
503}
504
505.largeFrame.C{
506    clear: left;
507    margin: 10px;
508    padding: 5px;
509
510    height: auto;
511    max-height: 400px;
512}
513
514.largeFrame.Cu{
515    clear: left;
516    margin: 10px;
517    padding: 5px;
518    width: 640px;
519}
520
521.largeFrame.Cv {
522    clear: left;
523    margin: 10px;
524    padding: 5px;
525    width: 200px;
526}
527
528.checkboxList {
529    overflow-y: scroll;
530    overflow-x: hidden;
531    clear: left;
532    width: auto;
533    height: 250px;
534    background-color: #FFF;
535    border-width: 2px;
536    border-style: solid;
537    border-bottom-color: #AAA;
538    border-top-color: #555;
539    border-right-color: #AAA;
540    border-left-color: #555;
541}
542
543.dbDataList {
544    width: 300px;
545    float: left;
546    clear: left;
547    margin: 0 10px 0 10px;
548}
549
550#dbShoppingCart .content {
551    height: 415px;
552}
Note: See TracBrowser for help on using the repository browser.