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

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