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

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