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

Last change on this file since 181 was 181, checked in by fpvanagthoven, 13 years ago
  • Grote verbetering aan scripts. Opgedeeld in generalScripts voor algemene functies, sequencerScripts.js staat nu de laatste versie van de editor in. Deze is bijna helemaal geschikt om zowel horizontaal als verticaal te gebruiken. updateSequencer() functie werkt nog niet helemaal (alleen op firstload), maar alle andere functies doen het nu EN werken nu op JS variables in plaats van hidden fields. Stukken beter.
  • css files nog wat verder aangepast.
  • pipelineSequencer.php aangepast om nu onLoad te beginnen met loadSequencer().js ipv drawSteps().js
File size: 6.4 KB
RevLine 
[177]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;
[178]179    border-radius: 0.25em;
180    -moz-border-radius: 0.25em;
[177]181    background-color: transparent;
182}
183
184.bigButton:hover {
185    border-color: #1c94c4;
186    background-color: #ddd;
187}
188
189.bigButton .buttonIcon {
190   
191}
192
193.bigButton.vert {
194    clear:both;
195}
196
197.smallButton {
198    margin: 0.5em 0.25em;
199    padding: 0.25em 0.5em;
200    color: #555;
201    font-weight: bold;
202    border: 1px solid #555;
203    border-radius: 0.25em;
204    -moz-border-radius: 0,25em;
205    background-color: transparent;
206}
207
208.smallFrame .smallButton {
209    color: #ccc;
210    border-color: #ccc;
211}
212
213.smallButton:hover {
214    color: #000;
215    background-color: #ddd;
216    border-color: #1c94c4;
217}
218
219/****************************/
220/* PIPELINE EDITOR SPECIFIC */
221/****************************/
222
223#seqContent {
224    overflow-y: hidden;
225    overflow-x: scroll;
226    width: 800px;
227    height: 9em;
228    float: left;
229}
230
231#seqContentWrapper {
232    clear: none;
233    float: left;
234    margin-right: -32000px;
235}
236
237#seqContentWrapper .divider {
238    width: 10px;
239    height: 50px;
240    margin: 10px 15px 0 20px;
241    background-image: url('../images/ui/sequencerDivider.png');
242    float: left;
243}
244
245.displayStep {
246    width: 52px;
247    padding: 0;
248    margin-top: 10px;
249    background-repeat: no-repeat;
250    float: left;
251    text-align: center;
252    -webkit-user-select: none;
253    -khtml-user-select: none;
254    -moz-user-select: none;
255    -o-user-select: none;
256    user-select: none;
257}
258
[178]259.displayStep.selected .displayStepIcon{
260    background-color: #bbbbbb;
261    /*-moz-box-shadow: 0 0 50px #FFF;
[177]262    -webkit-box-shadow: 0 0 50px #FFF;
[178]263    box-shadow: 0 0 50px #FFF;*/
264    border-color: #1c94c4;
[177]265
266}
267
268.displayStep .displayStepIcon {
269    width: 50px;
270    height: 50px;
[178]271    border: 2px solid #555;
[177]272    color: #FFF;
273}
274
275.displayStep p{
276    margin-top: 5px;
277    font-weight: normal;
278    font-size: 1em;
279}
280
281#toolbox {
282    margin-top: 2em;
283}
284
285#toolbox .content {
286    padding: 0.5em;
287}
288
289#toolbox .bigButton p {
290    position: relative;
291    top: -1.75em;
292    margin-left: 0.5em;
293    display: inline;
294}
295
[178]296#infoPanel {
297    margin-top: 2em;
298    margin-left: 2em;
299    clear: right;
300}
301
302#infoPanel .content {
303    clear: both;
304    min-height: 10em;
305    width: 30em;
306}
307
308.content .property {
309    float: left;
310    clear: left;
311    font-weight: bold;
312    width: 8em;
313    color: #FFF;
314}
315
316.content .value {
317    float: left;
318}
319
320/**************************/
321/* Survey Editor Specific */
322/**************************/
323
324#surveyEditor {
325    background-color: #0000FF;
326}
Note: See TracBrowser for help on using the repository browser.