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

Last change on this file since 178 was 178, checked in by fpvanagthoven, 13 years ago
  • returnQuestionDisplay.php is vergelijkbaar met returnStep.php. Stuur "uids=blablablabla" erheen en je krijgt de HTML markup voor de question display terug als plain text. Deze gaat worden gebruikt in de surveyEditor, zelfde principe als pipelineSequencer/returnStep.php
  • Nieuwe icons, alpha channel. Betere styling mee mogelijk, formaat/cropping is nog wel een beetje weird.
  • surveyEditorWidget.php is de survey versie van pipelineSequencer.php. (Ook hier weer een consistent naming scheme toepassen? Als in: pipelineEditor->pipelineEditorWidget, surveyEditor->surveyEditorWidget, etc...?
  • layout van pipelineEditor.php klopt nu weer en werkt nu helemaal op de nieuwe stylesheet, visualeditors.css. Logo, header en navbar stuff moet nog wel gemaakt worden.
  • surveyEditorScripts.js: scripts voor, verrassing, surveyEditor.php. loadSurvey werkt, drawQuestions ook bijna. BELANGRIJK! Deze editor werkt met global variables ipv de hidden fields die in pipelineSequencer.php gebruikt worden. Om conflicten te voorkomen wordt alles opgeslagen in een object literal "surveyEditor".
File size: 6.5 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
38.largeFrame {
39    width: auto;
40    padding: 0 1em;
41    float: left;
42    clear: both;
43
44
45    -moz-box-shadow: 2px 2px 1px #888;
46    -webkit-box-shadow: 2px 2px 1px #888;
47    box-shadow: 2px 2px 1px #888;
48    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
49    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
50    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
51    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
52    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
53
54    background-image: -webkit-gradient(
55        linear,
56        left top,
57        left bottom,
58        color-stop(0.21, #B0B0B0),
59        color-stop(0.8, #888888)
60        );
61    background-position: bottom;
62    background-repeat: repeat-x;
63    border: 1px solid #FFF;
64    border-radius: 1em;
65    -moz-border-radius: 1em;
66}
67
68.innerLargeFrame {
69    width: auto;
70    max-height: 300px;
71    overflow-y: auto;
72    overflow-x: hidden;
73    padding: 1em 1em;
74    border: 1px solid #FFF;
75    border-radius: 0.5em;
76    -maz-border-radius: 0.5em;
77    float: left;
78    clear: both;
79
80
81    background-image: linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
82    background-image: -o-linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
83    background-image: -moz-linear-gradient(tbottomop, #B0B0B0 21%, #888888 80%);
84    background-image: -webkit-linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
85    background-image: -ms-linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
86    background-image: -webkit-gradient(
87        linear,
88        left bottom,
89        left top,
90        color-stop(0.21, #B0B0B0),
91        color-stop(0.8, #888888)
92        );
93    background-position: bottom;
94    background-repeat: repeat-x;
95}
96
97.smallFrame {
98    margin: 0.5em auto;
99    float: left;
100    clear: both;
101    background-color: #555;
102    -moz-box-shadow: 2px 2px 1px #888;
103    -webkit-box-shadow: 2px 2px 1px #888;
104    box-shadow: 2px 2px 1px #888;
105    border: 1px solid #FFF;
106}
107
108.smallFrame .content {
109    width: 600px;
110    float: left;
111    clear: left;
112    padding: 0.25em 1em;
113
114    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
115    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
116    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
117    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
118    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
119    background-image: -webkit-gradient(
120        linear,
121        left bottom,
122        left top,
123        color-stop(0.21, #B0B0B0),
124        color-stop(0.8, #888888)
125        );
126    background-position: bottom;
127    background-repeat: repeat-x;
128}
129
130
131
132
133
134
135
136
137
138
139
140.largeTitle {
141    width: auto;
142    padding: 0.25em 1em;
143    font-size: 1.5em;
144    color: #FFF;
145    float: left;
146    text-shadow: #555 0px 0px 5px;
147}
148
149.smallTitle {
150    width: auto;
151    min-height: 1.5em;
152    padding: 0.25em 1em;
153    font-size: 1.25em;
154    color: #FFF;
155    float: left;
156}
157
158.smallTitle .listNumber {
159    float: left;
160    color: #CCFFFF;
161    font-size: 2em;
162}
163
164.controls {
165    clear: both;
166    text-align: right;
167    float: right;
168    min-height: 2.5em;
169}
170
171.questionBody {
172    float: left;
173    clear: left;
174    margin: 1em 0;
175    font-style: italic;
176}
177
178.questionParamsView {
179    float: left;
180    clear: left;
181    border: 1px solid #555;
182    padding: 0.5em;
183    font-weight: bold;
184}
185
186
187
188.bigButton {
189    padding:0.25em;
190    margin: 0.25em;
191    border: 1px solid #555;
[178]192    border-radius: 0.25em;
193    -moz-border-radius: 0.25em;
[177]194    background-color: transparent;
195}
196
197.bigButton:hover {
198    border-color: #1c94c4;
199    background-color: #ddd;
200}
201
202.bigButton .buttonIcon {
203   
204}
205
206.bigButton.vert {
207    clear:both;
208}
209
210
211.smallButton {
212    margin: 0.5em 0.25em;
213    padding: 0.25em 0.5em;
214    color: #555;
215    font-weight: bold;
216    border: 1px solid #555;
217    border-radius: 0.25em;
218    -moz-border-radius: 0,25em;
219    background-color: transparent;
220}
221
222.smallFrame .smallButton {
223    color: #ccc;
224    border-color: #ccc;
225}
226
227.smallButton:hover {
228    color: #000;
229    background-color: #ddd;
230    border-color: #1c94c4;
231}
232
233
234
235
236/****************************/
237/* PIPELINE EDITOR SPECIFIC */
238/****************************/
239
240#seqContent {
241    overflow-y: hidden;
242    overflow-x: scroll;
243    width: 800px;
244    height: 9em;
245    float: left;
246}
247
248#seqContentWrapper {
249    clear: none;
250    float: left;
251    margin-right: -32000px;
252}
253
254#seqContentWrapper .divider {
255    width: 10px;
256    height: 50px;
257    margin: 10px 15px 0 20px;
258    background-image: url('../images/ui/sequencerDivider.png');
259    float: left;
260}
261
262.displayStep {
263    width: 52px;
264    padding: 0;
265    margin-top: 10px;
266    background-repeat: no-repeat;
267    float: left;
268    text-align: center;
269    -webkit-user-select: none;
270    -khtml-user-select: none;
271    -moz-user-select: none;
272    -o-user-select: none;
273    user-select: none;
274}
275
[178]276.displayStep.selected .displayStepIcon{
277    background-color: #bbbbbb;
278    /*-moz-box-shadow: 0 0 50px #FFF;
[177]279    -webkit-box-shadow: 0 0 50px #FFF;
[178]280    box-shadow: 0 0 50px #FFF;*/
281    border-color: #1c94c4;
[177]282
283}
284
285.displayStep .displayStepIcon {
286    width: 50px;
287    height: 50px;
[178]288    border: 2px solid #555;
[177]289    color: #FFF;
290}
291
292.displayStep p{
293    margin-top: 5px;
294    font-weight: normal;
295    font-size: 1em;
296}
297
298#toolbox {
299    margin-top: 2em;
300}
301
302#toolbox .content {
303    padding: 0.5em;
304}
305
306#toolbox .bigButton p {
307    position: relative;
308    top: -1.75em;
309    margin-left: 0.5em;
310    display: inline;
311}
312
[178]313#infoPanel {
314    margin-top: 2em;
315    margin-left: 2em;
316    clear: right;
317}
318
319#infoPanel .content {
320    clear: both;
321    min-height: 10em;
322    width: 30em;
323}
324
325.content .property {
326    float: left;
327    clear: left;
328    font-weight: bold;
329    width: 8em;
330    color: #FFF;
331}
332
333.content .value {
334    float: left;
335}
336
337/**************************/
338/* Survey Editor Specific */
339/**************************/
340
341
342#surveyEditor {
343    background-color: #0000FF;
344}
Note: See TracBrowser for help on using the repository browser.