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

Last change on this file since 185 was 185, checked in by fpvanagthoven, 13 years ago
File size: 8.1 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}
120
121.smallFrame .content {
122    width: 600px;
123    float: left;
124    clear: left;
125    padding: 0.25em 1em;
126
127    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
128    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
129    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
130    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
131    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
132    background-image: -webkit-gradient(
133        linear,
134        left bottom,
135        left top,
136        color-stop(0.21, #B0B0B0),
137        color-stop(0.8, #888888)
138        );
139    background-position: bottom;
140    background-repeat: repeat-x;
141}
142
143.smallFrame.selected .smallTitle {
144    background-color: #FF0000;
145}
146
147.largeTitle {
148    width: auto;
149    padding: 0.25em 1em;
150    font-size: 1.5em;
151    color: #FFF;
152    float: left;
153    text-shadow: #555 0px 0px 5px;
154}
155
156.smallTitle {
157    background-color: transparent;
158    width: auto;
159    min-height: 1.5em;
160    padding: 0.25em 1em;
161    font-size: 1.25em;
162    color: #FFF;
163    float: left;
164}
165
166.smallTitle .listNumber {
167    float: left;
168    color: #CCFFFF;
169    font-size: 2em;
170}
171
172.controls {
173    clear: both;
174    text-align: right;
175    float: right;
176    min-height: 2.5em;
177}
178
179.bigButton {
180    padding:0.25em;
181    margin: 0.25em;
182    border: 1px solid #555;
183    border-radius: 0.25em;
184    -moz-border-radius: 0.25em;
185    background-color: transparent;
186    -webkit-user-select: none;
187    -khtml-user-select: none;
188    -moz-user-select: none;
189    -o-user-select: none;
190    user-select: none;
191}
192
193.bigButton.vertical {
194    width: 2em;
195    height: 2em;
196    font-size: 20px;
197    font-weight: bold;
198    color: #555;
199    float: left;
200    clear: both;
201    border: 1px solid #555;
202    border-radius: 0.25em;
203    -moz-border-radius: 0.25em;
204    background-color: transparent;
205    -webkit-user-select: none;
206    -khtml-user-select: none;
207    -moz-user-select: none;
208    -o-user-select: none;
209    user-select: none;
210    cursor: default;
211}
212
213.bigButton:hover {
214    border-color: #1c94c4;
215    background-color: #ddd;
216}
217
218.bigButton .buttonIcon {
219
220}
221
222.smallButton {
223    margin: 0.5em 0.25em;
224    padding: 0.25em 0.5em;
225    color: #555;
226    font-weight: bold;
227    border: 1px solid #555;
228    border-radius: 0.25em;
229    -moz-border-radius: 0,25em;
230    background-color: transparent;
231    -webkit-user-select: none;
232    -khtml-user-select: none;
233    -moz-user-select: none;
234    -o-user-select: none;
235    user-select: none;
236    cursor: default;
237}
238
239.smallFrame .smallButton {
240    color: #ccc;
241    border-color: #ccc;
242}
243
244.smallButton:hover {
245    color: #000;
246    background-color: #ddd;
247    border-color: #1c94c4;
248}
249
250
251/****************************/
252/* PIPELINE EDITOR SPECIFIC */
253/****************************/
254
255#seqContentWrapper {
256    clear: none;
257    float: left;
258    margin-right: -32000px;
259    min-height: 9em;
260}
261
262#seqContentWrapper .divider.horizontal {
263    width: 10px;
264    height: 50px;
265    margin: 10px 15px 0 20px;
266    background-image: url('../images/ui/sequencerDivider.png');
267    float: left;
268}
269
270.displayStep {
271    width: 52px;
272    padding: 0;
273    margin-top: 10px;
274    background-repeat: no-repeat;
275    float: left;
276    text-align: center;
277    -webkit-user-select: none;
278    -khtml-user-select: none;
279    -moz-user-select: none;
280    -o-user-select: none;
281    user-select: none;
282}
283
284.displayStep.selected .displayStepIcon{
285    background-color: #bbbbbb;
286    /*-moz-box-shadow: 0 0 50px #FFF;
287    -webkit-box-shadow: 0 0 50px #FFF;
288    box-shadow: 0 0 50px #FFF;*/
289    border-color: #1c94c4;
290
291}
292
293.displayStep .displayStepIcon {
294    width: 50px;
295    height: 50px;
296    border: 2px solid #555;
297    color: #FFF;
298}
299
300.displayStep p{
301    margin-top: 5px;
302    font-weight: normal;
303    font-size: 1em;
304}
305
306#toolbox {
307    margin-top: 2em;
308}
309
310#toolbox .content {
311    padding: 0.5em;
312}
313
314#toolbox .bigButton p {
315    position: relative;
316    top: -1.75em;
317    margin-left: 0.5em;
318    display: inline;
319}
320
321.bigButton.toolbox {
322    clear: both;
323}
324
325#infoPanel {
326    margin-top: 2em;
327    margin-left: 2em;
328    clear: right;
329}
330
331#infoPanel .content {
332    clear: both;
333    min-height: 10em;
334    width: 30em;
335}
336
337.content .property {
338    float: left;
339    clear: left;
340    font-weight: bold;
341    width: 8em;
342    color: #FFF;
343}
344
345.content .value {
346    float: left;
347}
348
349/**************************/
350/* Survey Editor Specific */
351/**************************/
352
353#surveyEditor {
354    background-color: #0000FF;
355}
356
357#seqContentWrapper .divider.vertical {
358    height: 1px;
359    width: 200px;
360    background-color: #FF00FF; /* VIES MAGENTA! */
361    margin: 1em auto;
362}
363
364.questionBody {
365    float: left;
366    clear: left;
367    margin: 1em 0;
368    font-style: italic;
369}
370
371.questionParamsView {
372    float: left;
373    clear: left;
374    border: 1px solid #555;
375    padding: 0.5em;
376    font-weight: bold;
377}
378
379#pageControls {
380    float: left;
381    margin: 5px 200px 0 0;
382}
383
384#pageControls .smallTextField {
385    width: 1.5em;
386}
387
388.vertControls {
389    text-align: center;
390    display:block;
391    float: left;
392    clear: right;
393    margin: 0 0 0 1em;
394}
395
396.vertControls .segment {
397    margin: 1.25em -1px 0.25em -1px;
398    border: 1px solid #555;
399    clear: both;
400    padding: 1px;
401    float: left;
402    border-radius: 5px;
403}
404
405.vertControls label {
406    width: 100%;
407    float: left;
408    clear: both;
409    font-size: 12px;
410    text-align: center;
411    margin: -1.25em 0 0;
412    color: #555;
413    font-weight: bold;
414}
415
Note: See TracBrowser for help on using the repository browser.