source: Dev/branches/rest-dojo-ui/jQueryUI/client/css/visualeditors.css @ 312

Last change on this file since 312 was 312, checked in by jkraaijeveld, 13 years ago
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.