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

Last change on this file since 182 was 182, checked in by fpvanagthoven, 13 years ago

Verder gewerkt aan alle scripts. Met uitzondering van:

  • savePipeline().js loopt nog vast
  • loadSession->updateSequencer->updateDividers() gaat niet goed als er geen steps in de pipeline zitten (bijvoorbeeld bij het maken van een nieuwe sessie). Nog check toevoegen of er ook echt wel steps zijn voordat de functie verder gaat naar het maken van een requestString en AJAX calls.
File size: 6.7 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.largeFrame {
38    width: auto;
39    padding: 0 1em;
40    float: left;
41    clear: both;
42
43
44    -moz-box-shadow: 2px 2px 1px #888;
45    -webkit-box-shadow: 2px 2px 1px #888;
46    box-shadow: 2px 2px 1px #888;
47    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
48    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
49    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
50    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
51    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
52
53    background-image: -webkit-gradient(
54        linear,
55        left top,
56        left bottom,
57        color-stop(0.21, #B0B0B0),
58        color-stop(0.8, #888888)
59        );
60    background-position: bottom;
61    background-repeat: repeat-x;
62    border: 1px solid #FFF;
63    border-radius: 1em;
64    -moz-border-radius: 1em;
65}
66
67.innerLargeFrame {
68    width: auto;
69    max-height: 300px;
70    overflow-y: auto;
71    overflow-x: hidden;
72    padding: 1em 1em;
73    border: 1px solid #FFF;
74    border-radius: 0.5em;
75    -maz-border-radius: 0.5em;
76    float: left;
77    clear: both;
78
79
80    background-image: linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
81    background-image: -o-linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
82    background-image: -moz-linear-gradient(tbottomop, #B0B0B0 21%, #888888 80%);
83    background-image: -webkit-linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
84    background-image: -ms-linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
85    background-image: -webkit-gradient(
86        linear,
87        left bottom,
88        left top,
89        color-stop(0.21, #B0B0B0),
90        color-stop(0.8, #888888)
91        );
92    background-position: bottom;
93    background-repeat: repeat-x;
94}
95
96.smallFrame {
97    margin: 0.5em auto;
98    float: left;
99    clear: both;
100    background-color: #555;
101    -moz-box-shadow: 2px 2px 1px #888;
102    -webkit-box-shadow: 2px 2px 1px #888;
103    box-shadow: 2px 2px 1px #888;
104    border: 1px solid #FFF;
105}
106
107.smallFrame .content {
108    width: 600px;
109    float: left;
110    clear: left;
111    padding: 0.25em 1em;
112
113    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
114    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
115    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
116    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
117    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
118    background-image: -webkit-gradient(
119        linear,
120        left bottom,
121        left top,
122        color-stop(0.21, #B0B0B0),
123        color-stop(0.8, #888888)
124        );
125    background-position: bottom;
126    background-repeat: repeat-x;
127}
128
129.largeTitle {
130    width: auto;
131    padding: 0.25em 1em;
132    font-size: 1.5em;
133    color: #FFF;
134    float: left;
135    text-shadow: #555 0px 0px 5px;
136}
137
138.smallTitle {
139    width: auto;
140    min-height: 1.5em;
141    padding: 0.25em 1em;
142    font-size: 1.25em;
143    color: #FFF;
144    float: left;
145}
146
147.smallTitle .listNumber {
148    float: left;
149    color: #CCFFFF;
150    font-size: 2em;
151}
152
153.controls {
154    clear: both;
155    text-align: right;
156    float: right;
157    min-height: 2.5em;
158}
159
160.questionBody {
161    float: left;
162    clear: left;
163    margin: 1em 0;
164    font-style: italic;
165}
166
167.questionParamsView {
168    float: left;
169    clear: left;
170    border: 1px solid #555;
171    padding: 0.5em;
172    font-weight: bold;
173}
174
175.bigButton {
176    padding:0.25em;
177    margin: 0.25em;
178    border: 1px solid #555;
179    border-radius: 0.25em;
180    -moz-border-radius: 0.25em;
181    background-color: transparent;
182    -webkit-user-select: none;
183    -khtml-user-select: none;
184    -moz-user-select: none;
185    -o-user-select: none;
186    user-select: none;
187}
188
189.bigButton:hover {
190    border-color: #1c94c4;
191    background-color: #ddd;
192}
193
194.bigButton .buttonIcon {
195   
196}
197
198.bigButton.vert {
199    clear:both;
200}
201
202.smallButton {
203    margin: 0.5em 0.25em;
204    padding: 0.25em 0.5em;
205    color: #555;
206    font-weight: bold;
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}
217
218.smallFrame .smallButton {
219    color: #ccc;
220    border-color: #ccc;
221}
222
223.smallButton:hover {
224    color: #000;
225    background-color: #ddd;
226    border-color: #1c94c4;
227}
228
229/****************************/
230/* PIPELINE EDITOR SPECIFIC */
231/****************************/
232
233#seqContent {
234    overflow-y: hidden;
235    overflow-x: scroll;
236    width: 800px;
237    height: 9em;
238    float: left;
239}
240
241#seqContentWrapper {
242    clear: none;
243    float: left;
244    margin-right: -32000px;
245}
246
247#seqContentWrapper .divider {
248    width: 10px;
249    height: 50px;
250    margin: 10px 15px 0 20px;
251    background-image: url('../images/ui/sequencerDivider.png');
252    float: left;
253}
254
255.displayStep {
256    width: 52px;
257    padding: 0;
258    margin-top: 10px;
259    background-repeat: no-repeat;
260    float: left;
261    text-align: center;
262    -webkit-user-select: none;
263    -khtml-user-select: none;
264    -moz-user-select: none;
265    -o-user-select: none;
266    user-select: none;
267}
268
269.displayStep.selected .displayStepIcon{
270    background-color: #bbbbbb;
271    /*-moz-box-shadow: 0 0 50px #FFF;
272    -webkit-box-shadow: 0 0 50px #FFF;
273    box-shadow: 0 0 50px #FFF;*/
274    border-color: #1c94c4;
275
276}
277
278.displayStep .displayStepIcon {
279    width: 50px;
280    height: 50px;
281    border: 2px solid #555;
282    color: #FFF;
283}
284
285.displayStep p{
286    margin-top: 5px;
287    font-weight: normal;
288    font-size: 1em;
289}
290
291#toolbox {
292    margin-top: 2em;
293}
294
295#toolbox .content {
296    padding: 0.5em;
297}
298
299#toolbox .bigButton p {
300    position: relative;
301    top: -1.75em;
302    margin-left: 0.5em;
303    display: inline;
304}
305
306#infoPanel {
307    margin-top: 2em;
308    margin-left: 2em;
309    clear: right;
310}
311
312#infoPanel .content {
313    clear: both;
314    min-height: 10em;
315    width: 30em;
316}
317
318.content .property {
319    float: left;
320    clear: left;
321    font-weight: bold;
322    width: 8em;
323    color: #FFF;
324}
325
326.content .value {
327    float: left;
328}
329
330/**************************/
331/* Survey Editor Specific */
332/**************************/
333
334#surveyEditor {
335    background-color: #0000FF;
336}
Note: See TracBrowser for help on using the repository browser.