← Back to branch summary

~dev-faisalali/webformer/quickly_trunk

« back to all changes in this revision

Viewing changes to data/web/css/style.css

  • Committer: Syed Ali
  • Date: 2012-07-10 05:27:34 UTC
  • Revision ID: dev.faisalali@gmail.com-20120710052734-61l0pz49ge8fwjr6
commit before release

Show diffs side-by-side

added added

removed removed

Lines of Context:
data/web/css/style.css
 
1
/* http://meyerweb.com/eric/tools/css/reset/ 
 
2
   v2.0b1 | 201101 
 
3
   NOTE: WORK IN PROGRESS
 
4
   USE WITH CAUTION AND TEST WITH ABANDON */
 
5
 
 
6
html, body, div, span, applet, object, iframe,
 
7
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 
8
a, abbr, acronym, address, big, cite, code,
 
9
del, dfn, em, img, ins, kbd, q, s, samp,
 
10
small, strike, strong, sub, sup, tt, var,
 
11
b, u, i, center,
 
12
dl, dt, dd, ol, ul, li,
 
13
fieldset, form, label, legend,
 
14
table, caption, tbody, tfoot, thead, tr, th, td,
 
15
article, aside, canvas, details, figcaption, figure, 
 
16
footer, header, hgroup, menu, nav, section, summary,
 
17
time, mark, audio, video {
 
18
        margin: 0;
 
19
        padding: 0;
 
20
        border: 0;
 
21
        outline: 0;
 
22
        font-size: 100%;
 
23
        font: inherit;
 
24
        vertical-align: baseline;
 
25
}
 
26
/* HTML5 display-role reset for older browsers */
 
27
article, aside, details, figcaption, figure, 
 
28
footer, header, hgroup, menu, nav, section {
 
29
        display: block;
 
30
}
 
31
body {
 
32
        line-height: 1;
 
33
}
 
34
ol, ul {
 
35
        list-style: none;
 
36
}
 
37
blockquote, q {
 
38
        quotes: none;
 
39
}
 
40
blockquote:before, blockquote:after,
 
41
q:before, q:after {
 
42
        content: '';
 
43
        content: none;
 
44
}
 
45
ins {
 
46
        text-decoration: none;
 
47
}
 
48
del {
 
49
        text-decoration: line-through;
 
50
}
 
51
 
 
52
table {
 
53
        border-collapse: collapse;
 
54
        border-spacing: 0;
 
55
}
 
56
 
 
57
body {
 
58
        -webkit-user-select: none;
 
59
        font-family: Arial, Heveltica, sans-serif;
 
60
        overflow-x: hidden;
 
61
}
 
62
 
 
63
h1 {
 
64
        font-family: 'Ubuntu', sans-serif;
 
65
        font-size: 24px;
 
66
}
 
67
 
 
68
h2 {
 
69
        font-family: 'Ubuntu', sans-serif;
 
70
        font-size: 18px;
 
71
}
 
72
 
 
73
h3 {
 
74
        font-family: 'Ubuntu', sans-serif;
 
75
        font-size: 14px;
 
76
        color: #333;
 
77
}
 
78
 
 
79
h4 {
 
80
        font-size: 12px;
 
81
}
 
82
 
 
83
h5 {
 
84
        font-size: 10px;
 
85
}
 
86
 
 
87
h6 {
 
88
        font-size: 8px;
 
89
}
 
90
 
 
91
h1.selected, h2.selected, h3.selected, h4.selected, h5.selected, h6.selected,
 
92
label.selected, input.selected, textarea.selected {
 
93
        border: #34A6E3 dotted 2px;
 
94
        outline: none;
 
95
}
 
96
 
 
97
.resizer {
 
98
        position: absolute;
 
99
        width: 5px;
 
100
        top: 0;
 
101
        bottom: 0;
 
102
        background: #666;
 
103
        cursor: col-resize;
 
104
}
 
105
 
 
106
.sidebar {
 
107
        position: absolute;
 
108
        top: 0;
 
109
        bottom: 0;
 
110
}
 
111
 
 
112
.legend {
 
113
        background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
 
114
        margin-top: 6px;
 
115
        color: #333;
 
116
        border-top: 1px solid #CCC;
 
117
        border-left: 1px solid #CCC;
 
118
        border-right: 1px solid #CCC;
 
119
        padding: 5px;
 
120
}
 
121
 
 
122
.listView {
 
123
        width: 100%;
 
124
        height: 150px;
 
125
        background: #FFF;
 
126
        border: 1px solid #CCC;
 
127
        position: relative;
 
128
}
 
129
 
 
130
        .listView ul {
 
131
                overflow: auto;
 
132
                width: 100%;
 
133
                height: 150px;
 
134
        }
 
135
 
 
136
                .listView li {
 
137
                        height: 24px;
 
138
                        color: #333;
 
139
                        padding: 3px 5px !important;
 
140
                        margin: 0 0  !important;
 
141
                        border-bottom: #CCC solid 1px;
 
142
                }
 
143
                
 
144
                .listView li.selected {
 
145
                        background: #eee;
 
146
                }
 
147
                
 
148
                        .listView li span {
 
149
                                color: #333;
 
150
                                height: 24px;
 
151
                                display: block;
 
152
                                line-height: 24px;
 
153
                                float: left;
 
154
                        }
 
155
                        
 
156
                        .listView li a.delete-item {
 
157
                                float: right;
 
158
                        }
 
159
 
 
160
#adjust-resizer { left: -5px; background: rgba(174, 167, 159, 0.5); }
 
161
#items-resizer { right: -5px; }
 
162
 
 
163
#item-props {
 
164
        background: #F2F1F0;
 
165
        right: 0;
 
166
        width: 270px;
 
167
}
 
168
 
 
169
        #item-props h2 { color: #333; font-size: 20px; } 
 
170
        
 
171
        #item-props li:nth-child(1) { margin-top: 10px; }
 
172
        
 
173
        #item-props ul li {
 
174
                margin-bottom: 14px;
 
175
                font-size: 14px;
 
176
                color: #FFF;
 
177
                padding: 0 10px;
 
178
        }
 
179
        
 
180
        #item-props label {
 
181
                width: 80px;
 
182
                display: inline-block;
 
183
                color: #333;
 
184
                font-size: 13px;
 
185
                font-family: 'Ubuntu', sans-serif;
 
186
        }
 
187
        
 
188
        #item-props input[type=text], #item-props input[type=number], #item-props textarea {
 
189
                border: 1px solid #999;
 
190
                border-radius: 2px;
 
191
                padding: 4px;
 
192
                width: 97%;
 
193
                font-size: 13px;
 
194
                background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
 
195
                outline: none;
 
196
        }
 
197
        
 
198
        #item-props select {
 
199
                border: 1px solid #999;
 
200
                border-radius: 2px;
 
201
                padding: 4px;
 
202
                width: 100%;
 
203
                font-size: 13px;
 
204
                background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
 
205
                outline: none;
 
206
        }
 
207
        
 
208
        #item-props input:focus, #item-props textarea:focus {
 
209
                border-color: #DD4814;
 
210
        }
 
211
        
 
212
        #item-props input:disabled {
 
213
                color: #aaa;
 
214
        }
 
215
        
 
216
        #item-props .prop-checkbox {
 
217
                color: #333;
 
218
                font-size: 13px;
 
219
        }
 
220
 
 
221
#items {
 
222
        background: -webkit-linear-gradient(#53514A, #3C3B37);
 
223
        left: 0;
 
224
        width: 170px;
 
225
}
 
226
        
 
227
        #items li {
 
228
                background: -webkit-linear-gradient(#53514A, #3C3B37);
 
229
                padding: 5px;
 
230
                height: 30px;
 
231
                line-height: 30px;
 
232
                color: #FFF;
 
233
                font-size: 14px;
 
234
                font-family: 'Ubuntu', sans-serif;
 
235
                cursor: move;
 
236
                text-align: center;
 
237
                position: relative;
 
238
                text-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
 
239
        }
 
240
        
 
241
                #items input[type=text], #items input[type=password], #items textarea { width: 100px; }
 
242
        
 
243
        #items li:hover {
 
244
                background: -webkit-linear-gradient(top, #ffa84c 0%,#ff7b0d 100%);
 
245
        }
 
246
        
 
247
        #items li#headings { padding: 0; margin: 0; width: 100%;  height: 40px; text-align: center; }
 
248
        
 
249
                #items li#headings ul { display: inline-block; }
 
250
        
 
251
        #items li#headings:hover { background: -webkit-linear-gradient(#53514A, #3C3B37); }
 
252
        
 
253
        
 
254
                #items li#headings ul li {
 
255
                        float: left;
 
256
                        padding: 0 5px;
 
257
                        height: 40px;
 
258
                        line-height: 40px;
 
259
                }
 
260
        
 
261
                #items li .overlay {
 
262
                        top: 0;
 
263
                        left: 0;
 
264
                        right: 0;
 
265
                        bottom: 0;
 
266
                        position: absolute;
 
267
                }
 
268
        
 
269
        #items .preview { display: none; }
 
270
        
 
271
#form-wrap {
 
272
        position: absolute;
 
273
        left: 175px;
 
274
        right: 275px;
 
275
        top: 0;
 
276
        bottom: 0;
 
277
        overflow: auto;
 
278
        background: #eee;
 
279
}
 
280
 
 
281
.form_space {
 
282
        background: #fafafa;
 
283
        margin: 10px auto;
 
284
        border: #34A6E3 dotted 1px;
 
285
        padding: 10px;
 
286
}
 
287
 
 
288
        .form_space h1, .form_space h2, .form_space h3, .form_space h4,
 
289
        .form_space h5, .form_space h6 {
 
290
                margin-bottom: 10px;
 
291
        }
 
292
 
 
293
.form_space .group {
 
294
        border: #E0771B dotted 1px;
 
295
        padding: 5px;
 
296
        width: auto;
 
297
        height: auto;
 
298
        margin-bottom: 5px;
 
299
}
 
300
 
 
301
.form_space .group.selected {
 
302
        border-width: 3px;
 
303
}
 
304
 
 
305
.form_space ul[data-type=radio], .form_space ul[data-type=checkbox] {
 
306
        min-height: 10px;
 
307
        border: #34A6E3 dotted 1px;
 
308
}
 
309
 
 
310
.form_space label {
 
311
        display: inline-block;
 
312
}
 
313
 
 
314
.form_space ul.selected {
 
315
        border-width: 3px;
 
316
}
 
317
 
 
318
.form_space fieldset {
 
319
        min-height: 50px;
 
320
        border: #CCC solid 1px;
 
321
}
 
322
 
 
323
.form_space textarea {
 
324
        display: block;
 
325
        resize: none;
 
326
}
 
327
 
 
328
.form_space .dropdown-wrap {
 
329
        position: relative;
 
330
        width: 60px;
 
331
        height: 20px;
 
332
        overflow: hidden;
 
333
}
 
334
 
 
335
        .form_space .dropdown-wrap select {
 
336
                position: absolute;
 
337
                width: 60px;
 
338
                height: 20px;
 
339
        }
 
340
 
 
341
                .form_space .dropdown-wrap .dropdown-cover {
 
342
                        width: 60px;
 
343
                        height: 20px;
 
344
                        position: absolute;
 
345
                        top: 0;
 
346
                        left: 0;
 
347
                }