web-app-theme 0.6.0 → 0.6.1

Sign up to get free protection for your applications and to get access to all the features.
data/README.md CHANGED
@@ -8,11 +8,11 @@ it wants to be an idea to start developing a complete web application layout.
8
8
  Installation
9
9
  ------------
10
10
 
11
- You can use web-app-theme >= 0.6.0 with Rails 3. If you want to use it with rails 2, use web-app-theme 0.5.3
11
+ You can use web-app-theme >= 0.6.1 with Rails 3. If you want to use it with rails 2, use web-app-theme 0.5.3
12
12
  Specify the web-app-theme gem in your Gemfile, only for :development and :test
13
13
 
14
14
  group :development, :test do
15
- gem 'web-app-theme', '>= 0.6.0'
15
+ gem 'web-app-theme', '>= 0.6.1'
16
16
  end
17
17
 
18
18
  Usage
data/VERSION CHANGED
@@ -1 +1 @@
1
- 0.6.0
1
+ 0.6.1
data/index.html CHANGED
@@ -344,7 +344,7 @@
344
344
  <h3>Switch Theme</h3>
345
345
  <ul class="navigation">
346
346
  <li><a href="#" onclick="Theme.activate('default'); return false;">Default</a></li>
347
- <li><a href="#" onclick="Theme.activate('activo'); return false;">Activo</a></li>
347
+ <li><a href="#" onclick="Theme.activate('red'); return false;">Red</a></li>
348
348
  <li><a href="#" onclick="Theme.activate('amro'); return false;">Amro</a></li>
349
349
  <li><a href="#" onclick="Theme.activate('bec'); return false;">Bec</a></li>
350
350
  <li><a href="#" onclick="Theme.activate('bec-green'); return false;">Bec-Green</a></li>
@@ -1,4 +1,4 @@
1
- <div class="block">
1
+ <div class="block notice">
2
2
  <h3>Simple Block</h3>
3
3
  <div class="content">
4
4
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
@@ -1,31 +1,68 @@
1
- .small { font-size:11px; }
2
- .gray { color:#999999; }
3
- .hightlight { background-color:#FFFFCC; }
1
+ /*
2
+ activo
3
+ by David Francisco (dmfrancisc[at]gmail.com)
4
+
5
+ based on "Drastic Dark" by Juan Maria Martinez Arce (juan[at]insignia4u.com)
6
+ */
7
+
8
+ .small {
9
+ font-size: 11px;
10
+ font-style: normal;
11
+ font-weight: normal;
12
+ text-transform: none;
13
+ letter-spacing: normal;
14
+ line-height: 1.4em;
15
+ }
16
+
17
+ .gray {
18
+ color:#999999;
19
+ font-family: Georgia, serif;
20
+ font-size: 13px;
21
+ font-style: italic;
22
+ font-weight: normal;
23
+ text-transform: none;
24
+ letter-spacing: normal;
25
+ line-height: 1.6em;
26
+ }
27
+
28
+ .hightlight {
29
+ background-color: #ffff88;
30
+ font-weight: bold;
31
+ color: #36393d;
32
+ }
4
33
 
5
- a:link, a:visited, a:hover, a:active, h1, h2, h3 { color: #7A1818; }
34
+ a:link, a:visited, a:hover, a:active, h1, h2, h3 { color: #111; }
6
35
  a { -moz-outline: none; }
7
36
 
8
37
  body {
9
- color: #222;
10
- background: #e5e5e5;
38
+ color: #111;
39
+ background: #E5E5E5;
11
40
  font-family: helvetica, arial, sans-serif;
12
41
  }
13
42
 
14
43
  hr {
15
- background: #f0f0ee;
16
- color: #f0f0ee;
44
+ background: #e2e2e2;
45
+ color: #e2e2e2;
17
46
  }
18
47
 
19
- #header {
20
- background: #7A1818;
48
+ #header {
49
+ background: #002134;
21
50
  }
22
51
 
23
52
  #header h1 {
24
53
  padding: 15px 0;
54
+ font-size: 32px;
55
+ font-style: normal;
56
+ font-weight: bold;
57
+ text-transform: none;
58
+ letter-spacing: -1px;
59
+ line-height: 1.2em;
60
+ color: #fff;
61
+ text-shadow: #000 1px 1px 2px;
25
62
  }
26
63
 
27
64
  #header h1 a:link, #header h1 a:active, #header h1 a:hover, #header h1 a:visited {
28
- color: #FFF;
65
+ color: #fff;
29
66
  }
30
67
 
31
68
  #user-navigation {
@@ -34,23 +71,61 @@ hr {
34
71
  right: 25px;
35
72
  }
36
73
 
74
+ #user-navigation a.logout {
75
+ background: #ccc;
76
+ padding: 1px 4px;
77
+ }
78
+
79
+ #main {
80
+ width: 71%;
81
+ }
82
+
83
+ #main .block {
84
+ padding-top: 0px;
85
+ background: #fff;
86
+
87
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
88
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
89
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
90
+ }
91
+
37
92
  #main .block .content {
38
- background: #FFF;
39
93
  padding-top: 1px;
40
94
  }
41
95
 
42
96
  #main .block .content h2 {
43
97
  margin-left: 15px;
98
+ font-size: 22px;
99
+ font-style: normal;
100
+ font-weight: bold;
101
+ text-transform: none;
102
+ letter-spacing: -1px;
103
+ line-height: 1.2em;
104
+ }
105
+
106
+ #main .block .content p {
107
+ font-size: 13px;
108
+ font-style: normal;
109
+ font-weight: normal;
110
+ text-transform: none;
111
+ letter-spacing: normal;
112
+ line-height: 1.45em;
113
+ }
114
+
115
+ #sidebar .block h4 {
116
+ font-weight: bold;
44
117
  }
45
118
 
46
- #sidebar .block {
47
- background: #FFF;
119
+ #sidebar .notice {
120
+ background: #fff;
121
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
122
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
123
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
48
124
  }
49
125
 
50
- #sidebar h3 {
51
- background: #7A1818;
52
- color: #FFF;
53
- border-bottom: 10px solid #262626;
126
+ #sidebar h3 {
127
+ color: #111;
128
+ border-bottom: 1px solid #c0c0c0;
54
129
  }
55
130
 
56
131
  #main-navigation ul li {
@@ -67,6 +142,7 @@ hr {
67
142
  }
68
143
 
69
144
  #main-navigation ul li.active {
145
+ background: #E5E5E5;
70
146
  margin-left: 15px;
71
147
  }
72
148
 
@@ -74,113 +150,156 @@ hr {
74
150
  padding: 8px 15px;
75
151
  }
76
152
 
77
- #sidebar ul li a:link, #sidebar ul li a:visited {
78
- background: #FFF;
79
- border-bottom: 1px solid #F0F0EE;
153
+ #sidebar ul li {
154
+ background-position: 15px 11px;
155
+ background-repeat: no-repeat;
156
+ background-image: url("images/arrow.png");
157
+ border-bottom: 1px solid #e2e2e2;
158
+ }
159
+
160
+ #sidebar ul li a {
80
161
  text-decoration: none;
162
+ margin-left: 20px;
81
163
  }
82
164
 
83
- #sidebar ul li a:hover, #sidebar ul li a:active {
84
- background: #470E0E;
85
- color: #FFF;
165
+ #sidebar ul li a:link, #sidebar ul li a:visited {
166
+ text-decoration: none;
86
167
  }
87
168
 
88
169
  #main-navigation {
89
- background: #262626;
170
+ background-color: #f4f4f4;
171
+ background-image: url("images/menubar-background.png");
172
+ background-repeat: repeat-x;
90
173
  }
91
174
 
92
175
  #main-navigation ul li {
93
- background: #262626;
94
176
  margin-right: 0;
177
+ padding-left: 15px;
178
+ padding-right: 5px;
95
179
  }
96
180
 
97
- #main-navigation ul li.active {
98
- background: #e5e5e5;
181
+ #main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active {
182
+ text-decoration: none;
183
+ color: #111;
99
184
  }
100
185
 
101
- #main-navigation ul li a:link, #main-navigation ul li a:visited, #main-navigation ul li a:hover, #main-navigation ul li a:active,
102
186
  .secondary-navigation ul li a:link, .secondary-navigation ul li a:visited, .secondary-navigation ul li a:hover, .secondary-navigation ul li a:active,
103
187
  #user-navigation ul li a:link, #user-navigation ul li a:visited, #user-navigation ul li a:hover, #user-navigation ul li a:active {
104
188
  text-decoration: none;
105
- color: #FFF;
106
- }
107
-
108
- #user-navigation a.logout {
109
- background: #cc0000;
110
- padding: 2px 6px;
111
- -moz-border-radius: 4px;
112
- -webkit-border-radius: 3px;
113
- }
114
-
115
- .secondary-navigation li a:hover {
116
- background: #470E0E;
117
- }
118
-
119
- #main-navigation ul li.active a:link, #main-navigation ul li.active a:visited, #main-navigation ul li.active a:hover, #main-navigation ul li.active a:active {
120
- color: #262626;
189
+ color: #111;
121
190
  }
122
191
 
123
192
  .secondary-navigation {
124
- background: #7A1818;
125
- border-bottom-color: #262626;
193
+ background-color: #f2f1ee;
194
+ border-bottom: none;
195
+ border-bottom-width: 5px;
196
+ background-image: url("images/boxbar-background.png");
126
197
  }
127
198
 
128
199
  .secondary-navigation ul li.active, .secondary-navigation ul li.active a:hover {
129
- background-color: #262626;
200
+ background-color: #fff;
130
201
  }
131
202
 
132
- #footer .block {
133
- color: #FFF;
134
- background: #262626;
203
+ #footer .block {
204
+ text-align: center;
205
+ color: #111;
206
+ background: #fff;
207
+
208
+ -webkit-box-shadow: none;
209
+ -moz-box-shadow: none;
210
+ box-shadow: none;
135
211
  }
136
212
 
137
- #footer .block p {
138
- margin: 0;
139
- padding: 10px;
213
+ #footer .block p {
214
+ margin: 0;
215
+ padding: 4px;
140
216
  }
141
217
 
142
218
  /* pagination */
143
219
 
220
+ .pagination a, .pagination span {
221
+ background-color: #f4f4f4;
222
+ background-image: url("images/button-background.png");
223
+ color: #111;
224
+ text-align: center;
225
+ min-width: 15px;
226
+ margin-right: 5px;
227
+ padding: 6px;
228
+ border: 1px solid #c3c4ba;
229
+ }
230
+
144
231
  .pagination em {
145
- background: #262626;
146
- color: #FFF;
147
- border-color: #262626;
232
+ background: #002134;
233
+ color: #fff;
234
+ border: 1px solid #002134;
148
235
  }
149
236
 
150
237
  .pagination a {
151
- color: #262626;
152
- border-color: #262626;
238
+ color: #1a1a1a;
153
239
  }
154
240
 
155
241
  .pagination a:hover {
156
- color: #FFF;
157
- background: #262626;
242
+ border: 1px solid #818171;
243
+ -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
244
+ -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
245
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
246
+ }
247
+
248
+ .pagination a:active {
249
+ background-image: url("images/button-background-active.png");
250
+ outline: none;
158
251
  }
159
252
 
160
253
  /* tables */
161
254
 
162
255
  .table th {
163
- background: #262626;
164
- color: #FFF;
256
+ background: #eaeaea;
257
+ color: #222;
258
+ font-weight: normal;
165
259
  }
166
260
 
167
261
  .table td {
168
- border-bottom:1px solid #F0F0EE;
262
+ border-bottom: 1px solid #eaeaea;
263
+ }
264
+
265
+ .table tr.even {
266
+ background: #f8f8f8;
169
267
  }
170
268
 
171
269
  /* forms */
172
270
 
271
+ .form label.label {
272
+ color: #666666;
273
+ }
274
+
173
275
  .form input.text_field, .form textarea.text_area {
174
276
  width: 100%;
175
- border: 1px solid #262626;
277
+ border: 1px solid #e2e2e2;
278
+ }
279
+
280
+ .form input:hover, .form textarea:hover {
281
+ -webkit-box-shadow: rgba(0,0,0,0.3) 0 0 3px;
282
+ -moz-box-shadow: rgba(0,0,0,0.3) 0 0 3px;
283
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
284
+ border: 1px solid #a2a294;
285
+ }
286
+
287
+ .form input:focus, .form textarea:focus {
288
+ border: 1px solid #a2a294;
176
289
  }
177
290
 
178
291
  .form input.button {
179
- background: #EEE;
180
- color: #262626;
292
+ background: #e2e2e2;
293
+ border: 1px solid #c1c1c1;
181
294
  padding: 2px 5px;
182
- border: 1px solid #262626;
183
295
  cursor: pointer;
296
+ color: #111;
297
+ font-weight: bold;
298
+ font-size: 11px;
299
+ }
300
+
301
+ .form input.button:hover {
302
+ border: 1px solid #666;
184
303
  }
185
304
 
186
305
  .form .description {
@@ -189,86 +308,155 @@ hr {
189
308
  font-size: .9em;
190
309
  }
191
310
 
311
+ .form .navform a {
312
+ color: #cc0000;
313
+ }
314
+
315
+ /* buttons */
316
+
317
+ a.button, button.button {
318
+ background-color: #f4f4f4;
319
+ background-image: url("images/button-background.png");
320
+ border: 1px solid #c3c4ba;
321
+ font-family: helvetica, arial, sans-serif;
322
+ font-weight: normal;
323
+ }
324
+
325
+ a.button:link, a.button:visited, a.button:hover, a.button:active, button.button:link, button.button:visited, button.button:hover, button.button:active {
326
+ font-weight: normal;
327
+ background-color: #f4f4f4;
328
+ }
329
+
330
+ a.button:hover, button.button:hover {
331
+ background-color: #eee;
332
+ border: 1px solid #818171;
333
+ -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
334
+ -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
335
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
336
+ }
337
+
338
+ a.button:active, button.button:active {
339
+ outline: none;
340
+ background-color: #ddd;
341
+ background-image: url("images/button-background-active.png");
342
+ }
343
+
192
344
  /* flash-messages */
193
345
  .flash .message {
194
- -moz-border-radius: 3px;
195
- -webkit-border-radius: 3px;
196
346
  text-align:center;
197
347
  margin: 0 auto 15px;
198
-
199
348
  }
200
349
 
201
350
  .flash .message p {
202
351
  margin:8px;
203
352
  }
204
353
  .flash .error {
205
- border: 1px solid #fbb;
206
- background-color: #fdd;
354
+ border: 1px solid #ffbbbb;
355
+ background-color: #ffdddd;
207
356
  }
208
357
  .flash .warning {
209
- border: 1px solid #fffaaa;
358
+ border: 1px solid #ffff88;
210
359
  background-color: #ffffcc;
211
360
  }
212
361
  .flash .notice {
213
- border: 1px solid #1FDF00;
214
- background-color: #BBFFB6;
362
+ border: 1px solid #1fdf00;
363
+ background-color: #bbffb6;
215
364
  }
216
365
 
217
366
  /* lists */
218
367
 
219
368
  ul.list li {
220
- border-bottom-color: #F0F0EE;
369
+ border-bottom-color: #e2e2e2;
221
370
  border-bottom-width: 1px;
222
371
  border-bottom-style: solid;
223
372
  }
224
373
 
225
374
  ul.list li .item .avatar {
226
- border-color: #F0F0EE;
375
+ border-color: #e2e2e2;
227
376
  border-width: 1px;
228
377
  border-style: solid;
229
- padding: 2px;
378
+ padding: 2px;
230
379
  }
231
380
 
232
381
  /* box */
233
382
 
234
383
  #box .block {
235
- background: #FFF;
384
+ background: #fff;
385
+
386
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
387
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
388
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
236
389
  }
237
390
 
238
391
  #box .block h2 {
239
- background: #7A1818;
240
- color: #FFF;
392
+ background: #002134;
393
+ color: #fff;
241
394
  }
242
395
 
243
396
 
244
397
  /* rounded borders */
245
398
 
246
- #main, #main-navigation, #main-navigation li, .secondary-navigation, #main .block, #sidebar .block, #sidebar h3, ul.list li,
399
+ #main, #main-navigation, #main-navigation li, .secondary-navigation, #main .block, #sidebar .block, #sidebar h3, ul.list li,
247
400
  #footer .block, .form input.button, #box .block, #box .block h2 {
248
- -moz-border-radius-topleft: 4px;
249
- -webkit-border-top-left-radius: 4px;
250
- -moz-border-radius-topright: 4px;
251
- -webkit-border-top-right-radius: 4px;
401
+ -moz-border-radius-topleft: 9px;
402
+ -webkit-border-top-left-radius: 9px;
403
+ -moz-border-radius-topright: 9px;
404
+ -webkit-border-top-right-radius: 9px;
252
405
  }
253
406
 
254
- .secondary-navigation li.first a, .secondary-navigation ul li.first, .table th.first, .table th.first {
255
- -moz-border-radius-topleft: 4px;
256
- -webkit-border-top-left-radius: 4px;
257
- }
258
-
259
- .table th.last {
260
- -moz-border-radius-topright: 4px;
261
- -webkit-border-top-right-radius: 4px;
407
+ .secondary-navigation li.first a, .secondary-navigation ul li.first {
408
+ -moz-border-radius-topleft: 9px;
409
+ -webkit-border-top-left-radius: 9px;
262
410
  }
263
411
 
264
412
  .secondary-navigation ul li.first {
265
- -moz-border-radius-topleft: 4px;
266
- -webkit-border-top-left-radius: 4px;
413
+ -moz-border-radius-topleft: 9px;
414
+ -webkit-border-top-left-radius: 9px;
267
415
  }
268
416
 
269
417
  #sidebar, #sidebar .block, #main .block, #sidebar ul.navigation, ul.list li, #footer .block, .form input.button, #box .block {
270
- -moz-border-radius-bottomleft: 4px;
271
- -webkit-border-bottom-left-radius: 4px;
272
- -moz-border-radius-bottomright: 4px;
273
- -webkit-border-bottom-right-radius: 4px;
274
- }
418
+ -moz-border-radius-bottomleft: 9px;
419
+ -webkit-border-bottom-left-radius: 9px;
420
+ -moz-border-radius-bottomright: 9px;
421
+ -webkit-border-bottom-right-radius: 9px;
422
+ }
423
+
424
+ #main .block {
425
+ -moz-border-radius: 9px;
426
+ -webkit-border-radius: 9px;
427
+ border-radius: 9px;
428
+ }
429
+
430
+ #main-navigation, .secondary-navigation {
431
+ -moz-border-radius-topleft: 9px;
432
+ -webkit-border-top-left-radius: 9px;
433
+ border-top-left-radius: 9px;
434
+
435
+ -moz-border-radius-topright: 9px;
436
+ -webkit-border-top-right-radius: 9px;
437
+ border-top-right-radius: 9px;
438
+ }
439
+
440
+ a.button, button.button, .pagination a, .pagination span {
441
+ -moz-border-radius: 2px;
442
+ -webkit-border-radius: 2px;
443
+ border-radius: 2px;
444
+ }
445
+
446
+ .flash .message {
447
+ -moz-border-radius: 6px;
448
+ -webkit-border-radius: 6px;
449
+ border-radius: 6px;
450
+ }
451
+
452
+ .form input.button {
453
+ -moz-border-radius: 5px;
454
+ -webkit-border-radius: 5px;
455
+ border-radius: 5px;
456
+ }
457
+
458
+ #user-navigation a.logout {
459
+ -moz-border-radius: 4px;
460
+ -webkit-border-radius: 4px;
461
+ border-radius: 4px;
462
+ }