source: Dev/branches/Cartis/css/visualeditors.css @ 239

Last change on this file since 239 was 239, checked in by cartis, 13 years ago

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