source: Dev/branches/jQueryUI/client/js/jquery/demos/demos.css @ 249

Last change on this file since 249 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: 14.0 KB
Line 
1body {
2        font-size: 62.5%;
3}
4
5table {
6        font-size: 1em;
7}
8
9/* Site
10   -------------------------------- */
11
12body {
13        font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
14}
15
16/* Layout
17   -------------------------------- */
18
19.layout-grid {
20        width: 960px;
21}
22
23.layout-grid td {
24        vertical-align: top;
25}
26
27.layout-grid td.left-nav {
28        width: 140px;
29}
30
31.layout-grid td.normal {
32        border-left: 1px solid #eee;
33        padding: 20px 24px;
34        font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
35}
36
37.layout-grid td.demos {
38        background: url('/images/demos_bg.jpg') no-repeat;
39        height: 337px;
40        overflow: hidden;
41}
42
43/* Normal
44   -------------------------------- */
45
46.normal h3,
47.normal h4 {
48        margin: 0;
49        font-weight: normal;
50}
51
52.normal h3 {
53        padding: 0 0 9px;
54        font-size: 1.8em;
55}
56
57.normal h4 {
58        padding-bottom: 21px;
59        border-bottom: 1px dashed #999;
60        font-size: 1.2em;
61        font-weight: bold;
62}
63
64.normal p {
65        font-size: 1.2em;
66}
67
68/* Demos */
69
70.demos-nav, .demos-nav dt, .demos-nav dd, .demos-nav ul, .demos-nav li {
71        margin: 0;
72        padding: 0
73}
74
75.demos-nav {
76        float: left;
77        width: 170px;
78        font-size: 1.3em;
79}
80
81.demos-nav dt,
82.demos-nav h4 {
83        margin: 0;
84        padding: 0;
85        font: normal 1.1em "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
86        color: #e87b10;
87}
88
89.demos-nav dt,
90.demos-nav h4 {
91        margin-top: 1.5em;
92        margin-bottom: 0;
93        padding-left: 8px;
94        padding-bottom:5px;
95        line-height: 1.2em;
96        border-bottom: 1px solid #F4F4F4;
97}
98
99.demos-nav dd a,
100.demos-nav li a {
101        border-bottom: 1px solid #F4F4F4;
102        display:block;
103        padding: 4px 3px 4px 8px;
104        font-size: 90%;
105        text-decoration: none;
106        color: #555 ;
107        margin:2px 0;
108        height:13px;
109}
110
111.demos-nav dd a:hover,
112.demos-nav dd a:focus,
113.demos-nav dd a:hover,
114.demos-nav dd a:focus {
115        background: #f3f3f3;
116        color:#000;
117        -moz-border-radius: 5px; -webkit-border-radius: 5px;
118}
119 .demos-nav dd a.selected {
120        background: #555;
121        color:#ffffff;
122        -moz-border-radius: 5px; -webkit-border-radius: 5px;
123}
124
125
126/* new styles for demo pages, added by Filament 12.29.08
127eventually we should convert the font sizes to ems -- using px for now to minimize style conflicts
128*/
129
130.normal h3.demo-header { font-size:32px; padding:0 0 5px; border-bottom:1px solid #eee; text-transform: capitalize; }
131.normal h4.demo-subheader { font-size:10px; text-transform: uppercase; color:#999; padding:8px 0 3px; border:0; margin:0; }
132.normal a:link,
133.normal a:visited { color:#1b75bb; text-decoration:none; }
134.normal a:hover,
135.normal a:active { color:#0b559b; }
136
137#demo-config { padding:20px 0 0; }
138
139#demo-frame { float:left; width:540px; height:380px; border:1px solid #ddd; overflow: auto; position: relative; }
140#demo-frame h3, #demo-frame h4 { padding: 0; font-weight: bold; font-size: 1em; }
141
142#demo-config-menu { float:right; width:180px;  }
143#demo-config-menu h4 { font-size:13px; color:#666; font-weight:normal; border:0; padding-left:18px; }
144
145#demo-config-menu ul { list-style: none; padding: 0; margin: 0; }
146
147#demo-config-menu li { font-size:12px; padding:0 0 0 10px; margin:3px 0; zoom: 1; }
148
149#demo-config-menu li a:link,
150#demo-config-menu li a:visited { display:block; padding:1px 8px 4px; border-bottom:1px dotted #b3b3b3; }
151* html #demo-config-menu li a:link,
152* html #demo-config-menu li a:visited { padding:1px 8px 2px; }
153#demo-config-menu li a:hover,
154#demo-config-menu li a:active { background-color:#f6f6f6; }
155
156#demo-config-menu li.demo-config-on { background: url(images/demo-config-on-tile.gif) repeat-x left center; }
157
158#demo-config-menu li.demo-config-on a:link,
159#demo-config-menu li.demo-config-on a:visited,
160#demo-config-menu li.demo-config-on a:hover,
161#demo-config-menu li.demo-config-on a:active { background: url(images/demo-config-on.gif) no-repeat left; padding-left:18px; color:#fff; border:0; margin-left:-10px; margin-top: 0px; margin-bottom: 0px; }
162
163#demo-source, #demo-notes {
164        clear: both;
165        padding: 20px 0 0;
166        font-size: 1.3em;
167}
168
169#demo-notes { width:520px; color:#333; font-size: 1em; }
170#demo-notes p code, .demo-description p code { padding: 0; font-weight: bold; }
171#demo-source pre, #demo-source code { padding: 0; }
172code, pre { padding:8px 0 8px 20px ; font-size: 1.2em; line-height:130%;  }
173
174#demo-source a:link,
175#demo-source a:visited,
176#demo-source a:hover,
177#demo-source a:active { font-size:12px; padding-left:13px; background-position: left center; background-repeat: no-repeat; }
178
179#demo-source a.source-open:link,
180#demo-source a.source-open:visited,
181#demo-source a.source-open:hover,
182#demo-source a.source-open:active { background-image: url(images/demo-spindown-open.gif); }
183
184#demo-source a.source-closed:link,
185#demo-source a.source-closed:visited,
186#demo-source a.source-closed:hover,
187#demo-source a.source-closed:active { background-image: url(images/demo-spindown-closed.gif); }
188
189div.demo {
190        padding:12px;
191        font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
192}
193
194div.demo h3.docs { clear:left; font-size:12px; font-weight:normal; padding:0 0 1em; margin:0; }
195
196div.demo-description {
197        clear:both;
198        padding:12px;
199        font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
200        font-size: 1.3em;
201        line-height: 1.4em;
202}
203
204.ui-draggable, .ui-droppable {
205        background-position: top left;
206}
207
208.left-nav .demos-nav {
209        padding-right: 10px;
210}
211
212#demo-link { font-size:11px;  padding-top: 6px; clear: both; overflow: hidden; }
213#demo-link a span.ui-icon { float:left; margin-right:3px; }
214
215/* Component containers
216----------------------------------*/
217#widget-docs .ui-widget { font-family: Trebuchet MS,Verdana,Arial,sans-serif; font-size: 1em; }
218#widget-docs .ui-widget input, #widget-docs .ui-widget select, #widget-docs .ui-widget textarea, #widget-docs .ui-widget button { font-family: Trebuchet MS,Verdana,Arial,sans-serif; font-size: 1em; }
219#widget-docs .ui-widget-header { border: 1px solid #ffffff; background: #464646 url(images/464646_40x100_textures_01_flat_100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
220#widget-docs .ui-widget-header a { color: #ffffff; }
221#widget-docs .ui-widget-content { border: 1px solid #ffffff; background: #ffffff url(images/ffffff_40x100_textures_01_flat_75.png) 50% 50% repeat-x; color: #222222; }
222#widget-docs .ui-widget-content a { color: #222222; }
223
224/* Interaction states
225----------------------------------*/
226#widget-docs .ui-state-default, #widget-docs .ui-widget-content #widget-docs .ui-state-default { border: 1px solid #666666; background: #555555 url(images/555555_40x100_textures_03_highlight_soft_75.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; }
227#widget-docs .ui-state-default a { color: #ffffff; text-decoration: none; outline: none; }
228#widget-docs .ui-state-hover, #widget-docs .ui-widget-content #widget-docs .ui-state-hover, #widget-docs .ui-state-focus, #widget-docs .ui-widget-content #widget-docs .ui-state-focus { border: 1px solid #666666; background: #444444 url(images/444444_40x100_textures_03_highlight_soft_60.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; }
229#widget-docs .ui-state-hover a { color: #ffffff; text-decoration: none; outline: none; }
230#widget-docs .ui-state-active, #widget-docs .ui-widget-content #widget-docs .ui-state-active { border: 1px solid #666666; background: #ffffff url(images/ffffff_40x100_textures_01_flat_65.png) 50% 50% repeat-x; font-weight: normal; color: #F6921E; outline: none; }
231#widget-docs .ui-state-active a { color: #F6921E; outline: none; text-decoration: none; }
232
233/* Interaction Cues
234----------------------------------*/
235#widget-docs .ui-state-highlight, #widget-docs .ui-widget-content #widget-docs .ui-state-highlight {border: 1px solid #fcefa1; background: #fbf9ee url(images/fbf9ee_40x100_textures_02_glass_55.png) 50% 50% repeat-x; color: #363636; }
236#widget-docs .ui-state-error, #widget-docs .ui-widget-content #widget-docs .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(images/fef1ec_40x100_textures_05_inset_soft_95.png) 50% bottom repeat-x; color: #cd0a0a; }
237#widget-docs .ui-state-error-text, #widget-docs .ui-widget-content #widget-docs .ui-state-error-text { color: #cd0a0a; }
238#widget-docs .ui-state-disabled, #widget-docs .ui-widget-content #widget-docs .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
239#widget-docs .ui-priority-primary, #widget-docs .ui-widget-content #widget-docs .ui-priority-primary { font-weight: bold; }
240#widget-docs .ui-priority-secondary, #widget-docs .ui-widget-content #widget-docs .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
241
242/* Icons
243----------------------------------*/
244
245/* states and images */
246#demo-frame-wrapper .ui-icon, #widget-docs .ui-icon { width: 16px; height: 16px; background-image: url(images/222222_256x240_icons_icons.png); }
247#widget-docs .ui-widget-content .ui-icon {background-image: url(images/222222_256x240_icons_icons.png); }
248#widget-docs .ui-widget-header .ui-icon {background-image: url(images/222222_256x240_icons_icons.png); }
249#widget-docs .ui-state-default .ui-icon { background-image: url(images/888888_256x240_icons_icons.png); }
250#widget-docs .ui-state-hover .ui-icon, #widget-docs .ui-state-focus .ui-icon {background-image: url(images/454545_256x240_icons_icons.png); }
251#widget-docs .ui-state-active .ui-icon {background-image: url(images/454545_256x240_icons_icons.png); }
252#widget-docs .ui-state-highlight .ui-icon {background-image: url(images/2e83ff_256x240_icons_icons.png); }
253#widget-docs .ui-state-error .ui-icon, #widget-docs .ui-state-error-text .ui-icon {background-image: url(images/cd0a0a_256x240_icons_icons.png); }
254
255
256/* Misc visuals
257----------------------------------*/
258
259/* Corner radius */
260#widget-docs .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; }
261#widget-docs .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
262#widget-docs .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
263#widget-docs .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
264#widget-docs .ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
265#widget-docs .ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
266#widget-docs .ui-corner-right {  -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
267#widget-docs .ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
268#widget-docs .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; }
269
270/* Overlays */
271#widget-docs .ui-widget-overlay { background: #aaaaaa url(images/aaaaaa_40x100_textures_01_flat_0.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
272#widget-docs .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/aaaaaa_40x100_textures_01_flat_0.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; }
273
274/*
275----------------------------------*/
276
277#widget-docs { margin:20px 0 0; border: none; }
278
279#widget-docs h2, #widget-docs h3, #widget-docs h4, #widget-docs p, #widget-docs ul, #widget-docs code { margin:0; padding:0; }
280#widget-docs code { display:block; color:#444; font-size:.9em; margin:0 0 1em; }
281#widget-docs code strong { color:#000; }
282#widget-docs p { margin:0 3em 1.2em 0; }
283#widget-docs p.intro { font-size:13px; color:#666; line-height:1.3; }
284#widget-docs ul { list-style-type: none; }
285
286#widget-docs h2 { font-size:16px; margin:1.2em 0 .5em; }
287#widget-docs h3 { font-size:14px; color:#e6820E; margin:1.5em 0 .5em; }
288.normal #widget-docs h4 { font-size:12px; color:#000; border:0; margin:0 0 .5em; }
289
290#docs-overview-main { width:400px; }
291#docs-overview-sidebar { float:right; width:200px; }
292#docs-overview-sidebar a span { color:#666; }
293#widget-docs #docs-overview-main p { margin-right:0; }
294#widget-docs #docs-overview-sidebar h4 { padding-left:0; }
295
296.docs-list-header { float:left; width:100%; margin:10px 0 0; border-bottom:1px solid #eee; }
297#widget-docs .docs-list-header h2 { float:left; margin:0; }
298#widget-docs .docs-list-header p { float:right; margin:5px 0; font-size:11px; }
299
300.docs-list { float:left; width:100%; padding:0 0 10px; }
301.docs-list .param-header { float:left; clear:left; width:100%; padding:8px 0; border-top:1px solid #eee; }
302#widget-docs .param-header h3, #widget-docs .param-header p { margin:0; float:left; }
303#widget-docs .param-header h3 { width:50%; }
304#widget-docs .param-header h3 span { background: url(images/demo-spindown-closed.gif) no-repeat left; padding-left:13px; }
305#widget-docs .param-open .param-header h3 span { background: url(images/demo-spindown-open.gif) no-repeat left; }
306#widget-docs .param-header p { width:24%; }
307#widget-docs .param-header p.param-type span { background: url(images/icon-docs-info.gif) no-repeat left; cursor:pointer; border-bottom:1px dashed #ccc; padding-left:15px; }
308
309.param-details { padding-left:13px; }
310.param-args { margin:0 0 1.5em; border-top:1px dotted #ccc;}
311.param-args td { padding:3px 30px 3px 5px; border-bottom:1px dotted #ccc;  }
312
313
314/* overrides for ui-tab styles */
315#widget-docs ul.ui-tabs-nav { padding:0 0 0 8px; }
316#widget-docs .ui-tabs-nav li { margin:5px 5px 0 0; }
317
318#widget-docs .ui-tabs-nav li a:link,
319#widget-docs .ui-tabs-nav li a:visited,
320#widget-docs .ui-tabs-nav li a:hover,
321#widget-docs .ui-tabs-nav li a:active { font-size:14px; padding:4px 1.2em 3px; color:#fff; }
322
323#widget-docs .ui-tabs-nav li.ui-tabs-selected a:link,
324#widget-docs .ui-tabs-nav li.ui-tabs-selected a:visited,
325#widget-docs .ui-tabs-nav li.ui-tabs-selected a:hover,
326#widget-docs .ui-tabs-nav li.ui-tabs-selected a:active { color:#e6820E; }
327
328#widget-docs .ui-tabs-panel { padding:20px 9px; font-size:12px; line-height:1.4; color:#000; }
329
330#widget-docs .ui-widget-content a:link,
331#widget-docs .ui-widget-content a:visited { color:#1b75bb; text-decoration:none; }
332#widget-docs .ui-widget-content a:hover,
333#widget-docs .ui-widget-content a:active { color:#0b559b; }
334
Note: See TracBrowser for help on using the repository browser.