source: Dev/branches/jQueryUI/client/css/visualeditors.css @ 254

Last change on this file since 254 was 249, checked in by hendrikvanantwerpen, 13 years ago

This one's for Subversion, because it's so close...

First widget (stripped down sequencer).
Seperated client and server code in two direcotry trees.
File size: 11.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    /*background-image: url('../images/icons/nyan.gif');*/
21    height: 100%;
22    font-size: 12px;
23    font-family: sans-serif;
24}
25
26#wrapper {
27    width: 80%;
28    min-width: 800px;
29    margin: 0 auto;
30    clear:both;
31}
32
33#content {
34    width: 100%;
35    position: relative;
36    padding: 1em 0;
37}
38
39#logo {
40    float: left;
41    width:250px;
42    margin: 0 0 10px 0;
43    padding: 10px 40px;
44    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
45    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
46    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
47    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
48    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
49
50    background-image: -webkit-gradient(
51        linear,
52        left top,
53        left bottom,
54        color-stop(0.21, #B0B0B0),
55        color-stop(0.8, #888888)
56        );
57    background-position: bottom;
58    background-repeat: repeat-x;
59    border: 1px solid #FFF;
60    border-top-style: none;
61}
62
63#logo #logoImage {
64    color: #FFF;
65    margin: 0;
66    padding: 0;
67    font: bold 22px Arial;
68}
69
70#logo #logoControls {
71    border-top: 1px solid #555;
72    font: 12px Arial;
73    color: #555;
74    text-align: right;
75    width: auto;
76}
77
78#logoControls a {
79    color: #FFF;
80    font: bold 12px arial;
81    text-decoration: none;
82    text-align: right;
83}
84
85/************************/
86/* STANDARD UI ELEMENTS */
87/************************/
88
89.largeFrame {
90    width: auto;
91    padding: 0 1em;
92    float: left;
93    clear: both;
94
95
96    -moz-box-shadow: 2px 2px 1px #888;
97    -webkit-box-shadow: 2px 2px 1px #888;
98    box-shadow: 2px 2px 1px #888;
99    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
100    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
101    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
102    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
103    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
104
105    background-image: -webkit-gradient(
106        linear,
107        left top,
108        left bottom,
109        color-stop(0.21, #B0B0B0),
110        color-stop(0.8, #888888)
111        );
112    background-position: bottom;
113    background-repeat: repeat-x;
114    border: 1px solid #FFF;
115    border-radius: 1em;
116    -moz-border-radius: 1em;
117}
118
119.largeFrame .content {
120    clear: left;
121}
122
123.innerLargeFrame {
124    width: auto;
125    /*padding: 1em 1em;*/
126    border: 1px solid #FFF;
127    border-radius: 0.5em;
128    -maz-border-radius: 0.5em;
129    float: left;
130    clear: both;
131
132
133    background-image: linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
134    background-image: -o-linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
135    background-image: -moz-linear-gradient(tbottomop, #B0B0B0 21%, #888888 80%);
136    background-image: -webkit-linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
137    background-image: -ms-linear-gradient(bottom, #B0B0B0 21%, #888888 80%);
138    background-image: -webkit-gradient(
139        linear,
140        left bottom,
141        left top,
142        color-stop(0.21, #B0B0B0),
143        color-stop(0.8, #888888)
144        );
145    background-position: bottom;
146    background-repeat: repeat-x;
147}
148
149.innerLargeFrame.horizontal {
150    height: auto;
151    overflow-x: auto;
152    overflow-y: hidden;
153}
154
155.innerLargeFrame.vertical {
156    overflow-x: hidden;
157    overflow-y: scroll;
158}
159
160.largeFrame.side {
161    clear: none;
162    margin: 0 10px;
163}
164
165.largeFrame.side .innerLargeFrame {
166    width: 400px;
167    height: 400px;
168}
169
170.smallFrame {
171    margin: 0.5em auto;
172    float: left;
173    clear: both;
174    background-color: #555;
175    -moz-box-shadow: 2px 2px 1px #888;
176    -webkit-box-shadow: 2px 2px 1px #888;
177    box-shadow: 2px 2px 1px #888;
178    border: 1px solid #FFF;
179}
180
181.smallFrame .content {
182    width: 600px;
183    float: left;
184    clear: left;
185    padding: 0.25em 1em;
186
187    background-image: linear-gradient(top, #B0B0B0 21%, #888888 80%);
188    background-image: -o-linear-gradient(top, #B0B0B0 21%, #888888 80%);
189    background-image: -moz-linear-gradient(top, #B0B0B0 21%, #888888 80%);
190    background-image: -webkit-linear-gradient(top, #B0B0B0 21%, #888888 80%);
191    background-image: -ms-linear-gradient(top, #B0B0B0 21%, #888888 80%);
192    background-image: -webkit-gradient(
193        linear,
194        left bottom,
195        left top,
196        color-stop(0.21, #B0B0B0),
197        color-stop(0.8, #888888)
198        );
199    background-position: bottom;
200    background-repeat: repeat-x;
201}
202
203.smallFrame.selected {
204    background-color: #777777;
205    border-color:#000;
206}
207
208.largeTitle {
209    width: auto;
210    padding: 0.25em 1em;
211    font-size: 1.5em;
212    color: #FFF;
213    float: left;
214    text-shadow: #555 0px 0px 5px;
215}
216
217.smallTitle {
218    background-color: transparent;
219    width: auto;
220    min-height: 1.5em;
221    padding: 0.25em 1em;
222    font-size: 1.25em;
223    color: #FFF;
224    float: left;
225}
226
227.smallTitle .listNumber {
228    float: left;
229    color: #CCFFFF;
230    font-size: 2em;
231}
232
233.controls {
234    clear: both;
235    text-align: right;
236    float: right;
237    min-height: 2.5em;
238}
239
240.bigButton {
241    padding:0.25em;
242    margin: 0.25em;
243    border: 1px solid #555;
244    border-radius: 0.25em;
245    -moz-border-radius: 0.25em;
246    background-color: transparent;
247    -webkit-user-select: none;
248    -khtml-user-select: none;
249    -moz-user-select: none;
250    -o-user-select: none;
251    user-select: none;
252}
253
254.bigButton.vertical {
255    margin: 0.25em;
256    text-align: center;
257    min-width: 7em;
258    max-width: 12em;
259    height: 2em;
260    font-size: 20px;
261    font-weight: bold;
262    color: #555;
263    float: left;
264    clear: both;
265    border: 1px solid #555;
266    border-radius: 0.25em;
267    -moz-border-radius: 0.25em;
268    background-color: transparent;
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    cursor: default;
275}
276
277.bigButton.icon
278
279.bigButton:hover {
280    border-color: #1c94c4;
281    background-color: #ddd;
282}
283
284.bigButton .buttonIcon {
285
286}
287
288.smallButton {
289    margin: 0.5em 0.25em;
290    padding: 0.25em 0.5em;
291    color: #555;
292    font-weight: bold;
293    border: 1px solid #555;
294    border-radius: 0.25em;
295    -moz-border-radius: 0,25em;
296    background-color: transparent;
297    -webkit-user-select: none;
298    -khtml-user-select: none;
299    -moz-user-select: none;
300    -o-user-select: none;
301    user-select: none;
302    cursor: default;
303}
304
305.smallFrame .smallButton {
306    color: #ccc;
307    border-color: #ccc;
308}
309
310.smallButton:hover {
311    color: #000;
312    background-color: #ddd;
313    border-color: #1c94c4;
314}
315
316
317/****************************/
318/* PIPELINE EDITOR SPECIFIC */
319/****************************/
320
321#seqContentWrapper {
322    clear: none;
323    float: left;
324    margin-right: -32000px;
325    padding: 1em;
326    min-height: 9em;
327}
328
329#seqContentWrapper .divider.horizontal {
330    width: 10px;
331    height: 50px;
332    margin: 10px 15px 0 20px;
333    background-image: url('../images/ui/sequencerDivider.png');
334    float: left;
335}
336
337.displayStep {
338    width: 52px;
339    padding: 0;
340    margin-top: 10px;
341    background-repeat: no-repeat;
342    float: left;
343    text-align: center;
344    -webkit-user-select: none;
345    -khtml-user-select: none;
346    -moz-user-select: none;
347    -o-user-select: none;
348    user-select: none;
349}
350
351.displayStep.selected .displayStepIcon{
352    background-color: #bbbbbb;
353    /*-moz-box-shadow: 0 0 50px #FFF;
354    -webkit-box-shadow: 0 0 50px #FFF;
355    box-shadow: 0 0 50px #FFF;*/
356    border-color: #1c94c4;
357
358}
359
360.displayStep .displayStepIcon {
361    width: 50px;
362    height: 50px;
363    border: 2px solid #555;
364    color: #FFF;
365}
366
367.displayStep p{
368    margin-top: 5px;
369    font-weight: normal;
370    font-size: 1em;
371}
372
373#toolbox {
374    margin-top: 2em;
375}
376
377#toolbox .content {
378    padding: 0.5em;
379}
380
381#toolbox .bigButton p {
382    position: relative;
383    top: -1.75em;
384    margin-left: 0.5em;
385    display: inline;
386}
387
388.bigButton.toolbox {
389    clear: both;
390}
391
392#infoPanel {
393    margin-top: 2em;
394    margin-left: 2em;
395    clear: right;
396}
397
398#infoPanel .content {
399    clear: both;
400    min-height: 10em;
401    width: 30em;
402}
403
404.content .property {
405    float: left;
406    clear: left;
407    font-weight: bold;
408    width: 8em;
409    color: #FFF;
410}
411
412.content .value {
413    float: left;
414}
415
416/**************************/
417/* Survey Editor Specific */
418/**************************/
419
420#surveyEditor {
421    background-color: #0000FF;
422}
423
424#seqContentWrapper .divider.vertical {
425    float: left;
426    clear: both;
427    height: 2px;
428    width: 400px;
429    background-color: #555; /* VIES MAGENTA! */
430    margin: 0.75em 100px;
431}
432
433.questionBody {
434    float: left;
435    clear: left;
436    margin: 1em 0;
437    font-style: italic;
438}
439
440.questionParamsView {
441    float: left;
442    clear: left;
443    border: 1px solid #555;
444    padding: 0.5em;
445    font-weight: bold;
446}
447
448#pageControls {
449    float: left;
450    margin: 5px 200px 0 0;
451}
452
453#pageControls .smallTextField {
454    width: 1.5em;
455}
456
457.vertControls {
458    text-align: center;
459    display:block;
460    float: left;
461    clear: right;
462    margin: 0 0 0 1em;
463}
464
465.vertControls .segment {
466    margin: 1.25em -1px 0.25em -1px;
467    border: 1px solid #555;
468    clear: both;
469    padding: 1px;
470    float: left;
471    border-radius: 5px;
472}
473
474.vertControls label {
475    width: 100%;
476    float: left;
477    clear: both;
478    font-size: 12px;
479    text-align: center;
480    margin: -1.25em 0 0;
481    color: #555;
482    font-weight: bold;
483}
484
485.smallFrame .smallButton {
486    width:55px;
487}
488
489/****************************/
490/* QUESTION EDITOR SPECIFIC */
491/****************************/
492
493.smallFrame.questionEditor {
494    /* Nothing yet... */
495}
496
497.qeBodyTextField {
498    width: 600px;
499    height: 100px;
500}
501
502#qeQuestionParamsDiv label {
503    float: left;
504    width: 150px;
505    margin: 5px 5px;
506}
507
508#qeQuestionParamsDiv .qeParamField {
509    float: left;
510}
511
512#qeQuestionParamsDiv .l {
513    clear: left;
514}
515
516#qeQuestionParamsDiv .qeParamFieldset {
517    float: left;
518    clear: left;
519    border: 1px solid #555;
520    width: auto;
521}
522
523
524/**************************/
525/* Cartis Editor Specific */
526/**************************/
527
528#leftColumn {
529    float: left;
530    clear: left;
531}
532
533#rightColumn {
534    float: left;
535    clear: none;
536}
537
538.largeFrame.C{
539    clear: left;
540    margin: 10px;
541    padding: 5px;
542
543    height: auto;
544    max-height: 400px;
545}
546
547.largeFrame.Cu{
548    clear: left;
549    margin: 10px;
550    padding: 5px;
551    width: 640px;
552}
553
554.largeFrame.Cv {
555    clear: left;
556    margin: 10px;
557    padding: 5px;
558    width: 200px;
559}
560
561.checkboxList {
562    overflow-y: scroll;
563    overflow-x: hidden;
564    clear: left;
565    width: auto;
566    height: 250px;
567    background-color: #FFF;
568    border-width: 2px;
569    border-style: solid;
570    border-bottom-color: #AAA;
571    border-top-color: #555;
572    border-right-color: #AAA;
573    border-left-color: #555;
574}
575
576.dbDataList {
577    width: 300px;
578    float: left;
579    clear: left;
580    margin: 0 10px 0 10px;
581}
582
583#dbShoppingCart .content {
584    height: 415px;
585}
586
587/*******************/
588/* DDMenu specific */
589/*******************/
590
591#toolboxMenu li .bigButton.toolbox div {
592    position: absolute;
593    visibility: hidden;
594    margin: 0;
595    padding: 0;
596    border: 1px solid #555;
597    background: #eaebd8;
598}
599
600#toolboxMenu li .bigButton.toolbox div a {
601    position: relative;
602    float: left;
603    clear: left;
604    margin: 0;
605    padding: 5px 10px;
606    width: 75px;
607    white-space: nowrap;
608    text-align: left;
609    text-decoration: none;
610    color: #2875de;
611    font: 11px arial;
612}
613
614#toolboxMenu li .bigButton.toolbox div a:hover {
615    background: #49a3ff;
616    color: #fff;
617}
Note: See TracBrowser for help on using the repository browser.