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

Last change on this file since 184 was 184, checked in by fpvanagthoven, 13 years ago
File size: 6.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}
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.largeTitle {
144    width: auto;
145    padding: 0.25em 1em;
146    font-size: 1.5em;
147    color: #FFF;
148    float: left;
149    text-shadow: #555 0px 0px 5px;
150}
151
152.smallTitle {
153    width: auto;
154    min-height: 1.5em;
155    padding: 0.25em 1em;
156    font-size: 1.25em;
157    color: #FFF;
158    float: left;
159}
160
161.smallTitle .listNumber {
162    float: left;
163    color: #CCFFFF;
164    font-size: 2em;
165}
166
167.controls {
168    clear: both;
169    text-align: right;
170    float: right;
171    min-height: 2.5em;
172}
173
174.questionBody {
175    float: left;
176    clear: left;
177    margin: 1em 0;
178    font-style: italic;
179}
180
181.questionParamsView {
182    float: left;
183    clear: left;
184    border: 1px solid #555;
185    padding: 0.5em;
186    font-weight: bold;
187}
188
189.bigButton {
190    padding:0.25em;
191    margin: 0.25em;
192    border: 1px solid #555;
193    border-radius: 0.25em;
194    -moz-border-radius: 0.25em;
195    background-color: transparent;
196    -webkit-user-select: none;
197    -khtml-user-select: none;
198    -moz-user-select: none;
199    -o-user-select: none;
200    user-select: none;
201}
202
203.bigButton:hover {
204    border-color: #1c94c4;
205    background-color: #ddd;
206}
207
208.bigButton .buttonIcon {
209
210}
211
212.bigButton.vert {
213    clear:both;
214}
215
216.smallButton {
217    margin: 0.5em 0.25em;
218    padding: 0.25em 0.5em;
219    color: #555;
220    font-weight: bold;
221    border: 1px solid #555;
222    border-radius: 0.25em;
223    -moz-border-radius: 0,25em;
224    background-color: transparent;
225    -webkit-user-select: none;
226    -khtml-user-select: none;
227    -moz-user-select: none;
228    -o-user-select: none;
229    user-select: none;
230    cursor: default;
231}
232
233.smallFrame .smallButton {
234    color: #ccc;
235    border-color: #ccc;
236}
237
238.smallButton:hover {
239    color: #000;
240    background-color: #ddd;
241    border-color: #1c94c4;
242}
243
244
245/****************************/
246/* PIPELINE EDITOR SPECIFIC */
247/****************************/
248
249#seqContentWrapper {
250    clear: none;
251    float: left;
252    margin-right: -32000px;
253    min-height: 9em;
254}
255
256#seqContentWrapper .divider {
257    width: 10px;
258    height: 50px;
259    margin: 10px 15px 0 20px;
260    background-image: url('../images/ui/sequencerDivider.png');
261    float: left;
262}
263
264.displayStep {
265    width: 52px;
266    padding: 0;
267    margin-top: 10px;
268    background-repeat: no-repeat;
269    float: left;
270    text-align: center;
271    -webkit-user-select: none;
272    -khtml-user-select: none;
273    -moz-user-select: none;
274    -o-user-select: none;
275    user-select: none;
276}
277
278.displayStep.selected .displayStepIcon{
279    background-color: #bbbbbb;
280    /*-moz-box-shadow: 0 0 50px #FFF;
281    -webkit-box-shadow: 0 0 50px #FFF;
282    box-shadow: 0 0 50px #FFF;*/
283    border-color: #1c94c4;
284
285}
286
287.displayStep .displayStepIcon {
288    width: 50px;
289    height: 50px;
290    border: 2px solid #555;
291    color: #FFF;
292}
293
294.displayStep p{
295    margin-top: 5px;
296    font-weight: normal;
297    font-size: 1em;
298}
299
300#toolbox {
301    margin-top: 2em;
302}
303
304#toolbox .content {
305    padding: 0.5em;
306}
307
308#toolbox .bigButton p {
309    position: relative;
310    top: -1.75em;
311    margin-left: 0.5em;
312    display: inline;
313}
314
315#infoPanel {
316    margin-top: 2em;
317    margin-left: 2em;
318    clear: right;
319}
320
321#infoPanel .content {
322    clear: both;
323    min-height: 10em;
324    width: 30em;
325}
326
327.content .property {
328    float: left;
329    clear: left;
330    font-weight: bold;
331    width: 8em;
332    color: #FFF;
333}
334
335.content .value {
336    float: left;
337}
338
339/**************************/
340/* Survey Editor Specific */
341/**************************/
342
343#surveyEditor {
344    background-color: #0000FF;
345}
Note: See TracBrowser for help on using the repository browser.