source: Dev/trunk/css/visualeditors.css @ 228

Last change on this file since 228 was 226, checked in by fpvanagthoven, 13 years ago
File size: 9.9 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    height: 100%;
21    font-size: 12px;
22    font-family: sans-serif;
23}
24
25#wrapper {
26    width: 80%;
27    min-width: 800px;
28    margin: 0 auto;
29}
30
31#content {
32    width: 100%;
33    position: relative;
34    padding: 2em 0;
35}
36
37/************************/
38/* STANDARD UI ELEMENTS */
39/************************/
40
41.largeFrame {
42    width: auto;
43    padding: 0 1em;
44    float: left;
45    clear: both;
46
47
48    -moz-box-shadow: 2px 2px 1px #888;
49    -webkit-box-shadow: 2px 2px 1px #888;
50    box-shadow: 2px 2px 1px #888;
51    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
52    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
53    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
54    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
55    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
56
57    background-image: -webkit-gradient(
58        linear,
59        left top,
60        left bottom,
61        color-stop(0.21, #B0B0B0),
62        color-stop(0.8, #888888)
63        );
64    background-position: bottom;
65    background-repeat: repeat-x;
66    border: 1px solid #FFF;
67    border-radius: 1em;
68    -moz-border-radius: 1em;
69}
70
71.innerLargeFrame {
72    width: auto;
73    max-height: 300px;
74    padding: 1em 1em;
75    border: 1px solid #FFF;
76    border-radius: 0.5em;
77    -maz-border-radius: 0.5em;
78    float: left;
79    clear: both;
80
81
82    background-image: linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
83    background-image: -o-linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
84    background-image: -moz-linear-gradient(tbottomop, #B0B0B0 21%, #888888 80%);
85    background-image: -webkit-linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
86    background-image: -ms-linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
87    background-image: -webkit-gradient(
88        linear,
89        left bottom,
90        left top,
91        color-stop(0.21, #B0B0B0),
92        color-stop(0.8, #888888)
93        );
94    background-position: bottom;
95    background-repeat: repeat-x;
96}
97
98.innerLargeFrame.horizontal {
99    height: auto;
100    overflow-x: auto;
101    overflow-y: hidden;
102}
103
104.innerLargeFrame.vertical {
105    overflow-x: hidden;
106    overflow-y: auto;
107    max-height: none;
108}
109
110.smallFrame {
111    margin: 0.5em auto;
112    float: left;
113    clear: both;
114    background-color: #555;
115    -moz-box-shadow: 2px 2px 1px #888;
116    -webkit-box-shadow: 2px 2px 1px #888;
117    box-shadow: 2px 2px 1px #888;
118    border: 1px solid #FFF;
119    margin: 0;
120}
121
122.smallFrame .content {
123    width: 600px;
124    float: left;
125    clear: left;
126    padding: 0.25em 1em;
127
128    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
129    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
130    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
131    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
132    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
133    background-image: -webkit-gradient(
134        linear,
135        left bottom,
136        left top,
137        color-stop(0.21, #B0B0B0),
138        color-stop(0.8, #888888)
139        );
140    background-position: bottom;
141    background-repeat: repeat-x;
142}
143
144.smallFrame.selected {
145    background-color: #777777;
146    border-color:#000;
147}
148
149.largeTitle {
150    width: auto;
151    padding: 0.25em 1em;
152    font-size: 1.5em;
153    color: #FFF;
154    float: left;
155    text-shadow: #555 0px 0px 5px;
156}
157
158.smallTitle {
159    background-color: transparent;
160    width: auto;
161    min-height: 1.5em;
162    padding: 0.25em 1em;
163    font-size: 1.25em;
164    color: #FFF;
165    float: left;
166}
167
168.smallTitle .listNumber {
169    float: left;
170    color: #CCFFFF;
171    font-size: 2em;
172}
173
174.controls {
175    clear: both;
176    text-align: right;
177    float: right;
178    min-height: 2.5em;
179}
180
181.bigButton {
182    padding:0.25em;
183    margin: 0.25em;
184    border: 1px solid #555;
185    border-radius: 0.25em;
186    -moz-border-radius: 0.25em;
187    background-color: transparent;
188    -webkit-user-select: none;
189    -khtml-user-select: none;
190    -moz-user-select: none;
191    -o-user-select: none;
192    user-select: none;
193}
194
195.bigButton.vertical {
196    width: 2em;
197    height: 2em;
198    font-size: 20px;
199    font-weight: bold;
200    color: #555;
201    float: left;
202    clear: both;
203    border: 1px solid #555;
204    border-radius: 0.25em;
205    -moz-border-radius: 0.25em;
206    background-color: transparent;
207    -webkit-user-select: none;
208    -khtml-user-select: none;
209    -moz-user-select: none;
210    -o-user-select: none;
211    user-select: none;
212    cursor: default;
213}
214
215.bigButton:hover {
216    border-color: #1c94c4;
217    background-color: #ddd;
218}
219
220.bigButton .buttonIcon {
221
222}
223
224.smallButton {
225    margin: 0.5em 0.25em;
226    padding: 0.25em 0.5em;
227    color: #555;
228    font-weight: bold;
229    border: 1px solid #555;
230    border-radius: 0.25em;
231    -moz-border-radius: 0,25em;
232    background-color: transparent;
233    -webkit-user-select: none;
234    -khtml-user-select: none;
235    -moz-user-select: none;
236    -o-user-select: none;
237    user-select: none;
238    cursor: default;
239}
240
241.smallFrame .smallButton {
242    color: #ccc;
243    border-color: #ccc;
244}
245
246.smallButton:hover {
247    color: #000;
248    background-color: #ddd;
249    border-color: #1c94c4;
250}
251
252/********************/
253/* DD MENU SPECIFIC */
254/********************/
255
256#btnAddMenu {
257    margin: 0;
258    padding: 5px;
259    background: #5970B2;
260    font: bold 16px arial;
261    color: #FFF;
262    float: left;
263}
264
265#btnAddMenu.down {
266    background: #334167;
267}
268
269#creationMenu {
270    margin: 0;
271    padding: 0;
272    z-index: 30;
273    visibility: hidden;
274    float: left;
275}
276
277#creationMenu li {
278    margin: 0;
279    padding: 0;
280    list-style: none;
281    float: left;
282    clear: left;
283    font: bold 11px arial;
284}
285
286#creationMenu li a img {
287    float: left;
288    clear: left;
289}
290
291#creationMenu li a {
292    display: block;
293    float: left;
294    margin: 0 1px 0 0;
295    padding: 4px 10px;
296    width: 100px;
297    background: #5970B2;
298    color: #FFF;
299    text-align: center;
300    text-decoration: none;
301}
302
303#creationMenu li a:hover {
304    background: #49A3FF;
305}
306
307#creationMenu div {
308    position: absolute;
309    visibility: hidden;
310    margin: 0;
311    padding: 0;
312    background: #eaebd8;
313    border: 1px solid #5970B2;
314}
315
316#creationMenu div a{
317    position: relative;
318    float: left;
319    display: block;
320    clear: left;
321    margin: 0;
322    padding: 5px 10px 5px 10px;
323    width: 75px;
324    white-space: nowrap;
325    text-align: left;
326    text-decoration: none;
327    background: #eaebd8;
328    color: #2875DE;
329    font: 11px arial;
330}
331
332#creationMenu div a:hover {
333    background: #49a3ff;
334    color: #fff;
335}
336
337/****************************/
338/* PIPELINE EDITOR SPECIFIC */
339/****************************/
340
341#seqContentWrapper {
342    clear: none;
343    float: left;
344    margin-right: -32000px;
345    min-height: 9em;
346}
347
348#seqContentWrapper .divider.horizontal {
349    width: 10px;
350    height: 50px;
351    margin: 10px 15px 0 20px;
352    background-image: url('../images/ui/sequencerDivider.png');
353    float: left;
354}
355
356.displayStep {
357    width: 52px;
358    padding: 0;
359    margin-top: 10px;
360    background-repeat: no-repeat;
361    float: left;
362    text-align: center;
363    -webkit-user-select: none;
364    -khtml-user-select: none;
365    -moz-user-select: none;
366    -o-user-select: none;
367    user-select: none;
368}
369
370.displayStep.selected .displayStepIcon{
371    background-color: #bbbbbb;
372    /*-moz-box-shadow: 0 0 50px #FFF;
373    -webkit-box-shadow: 0 0 50px #FFF;
374    box-shadow: 0 0 50px #FFF;*/
375    border-color: #1c94c4;
376
377}
378
379.displayStep .displayStepIcon {
380    width: 50px;
381    height: 50px;
382    border: 2px solid #555;
383    color: #FFF;
384}
385
386.displayStep p{
387    margin-top: 5px;
388    font-weight: normal;
389    font-size: 1em;
390}
391
392#toolbox {
393    margin-top: 2em;
394}
395
396#toolbox .content {
397    padding: 0.5em;
398}
399
400#toolbox .bigButton p {
401    position: relative;
402    top: -1.75em;
403    margin-left: 0.5em;
404    display: inline;
405}
406
407.bigButton.toolbox {
408    clear: both;
409}
410
411#infoPanel {
412    margin-top: 2em;
413    margin-left: 2em;
414    clear: right;
415}
416
417#infoPanel .content {
418    clear: both;
419    min-height: 10em;
420    width: 30em;
421}
422
423.content .property {
424    float: left;
425    clear: left;
426    font-weight: bold;
427    width: 8em;
428    color: #FFF;
429}
430
431.content .value {
432    float: left;
433}
434
435/**************************/
436/* Survey Editor Specific */
437/**************************/
438
439#surveyEditor {
440    background-color: #0000FF;
441}
442
443#seqContentWrapper .divider.vertical {
444    float: left;
445    clear: both;
446    height: 2px;
447    width: 400px;
448    background-color: #555; /* VIES MAGENTA! */
449    margin: 0.75em 100px;
450}
451
452.questionBody {
453    float: left;
454    clear: left;
455    margin: 1em 0;
456    font-style: italic;
457}
458
459.questionParamsView {
460    float: left;
461    clear: left;
462    border: 1px solid #555;
463    padding: 0.5em;
464    font-weight: bold;
465}
466
467#pageControls {
468    float: left;
469    margin: 5px 200px 0 0;
470}
471
472#pageControls .smallTextField {
473    width: 1.5em;
474}
475
476.vertControls {
477    text-align: center;
478    display:block;
479    float: left;
480    clear: right;
481    margin: 0 0 0 1em;
482}
483
484.vertControls .segment {
485    margin: 1.25em -1px 0.25em -1px;
486    border: 1px solid #555;
487    clear: both;
488    padding: 1px;
489    float: left;
490    border-radius: 5px;
491}
492
493.vertControls label {
494    width: 100%;
495    float: left;
496    clear: both;
497    font-size: 12px;
498    text-align: center;
499    margin: -1.25em 0 0;
500    color: #555;
501    font-weight: bold;
502}
503
504.smallFrame .smallButton {
505    width:55px;
506}
507
508/****************************/
509/* Question editor specific */
510/****************************/
511
512.questionParamField {
513    float: left;
514}
515
516.questionParamLabel {
517    float: left;
518    width: 100px;
519}
520
521.questionParamLabel.lAlign {
522    clear: left;
523}
524
525.questionParamLabel.rAlign {
526    clear: right;
527}
528
529.qBodyTextField {
530    resize: none;
531    width: 595px;
532}
Note: See TracBrowser for help on using the repository browser.