source: trunk/web-app/css/main.css @ 190

Last change on this file since 190 was 181, checked in by gav, 15 years ago

Change is* in Task to just 'active', 'scheduled' and 'approved'.
Regenerate non detailed controller and views.
Adjust detailed controller, views and services to suite.
Add support for task actions 'approve', 'complete', 'trash' and their counter parts.
Default task status to "not started" when creating a new task.

File size: 10.3 KB
RevLine 
[55]1html * {
2    margin: 0;
3    /*padding: 0; SELECT NOT DISPLAYED CORRECTLY IN FIREFOX */
[59]4
[55]5}
6
7/* GENERAL */
8
9.spinner {
10    padding: 5px;
11    position: absolute;
12    right: 0;
13}
14
15body {
[59]16    text-align: center; 
17    width: 980px
[55]18    background: #fff;
[106]19    color: #222;
[98]20    font: 14px verdana, arial, helvetica, sans-serif;
[59]21    background: transparent url("../images/brushed_metal.png") repeat fixed center;
[55]22}
23
[59]24#wrapper {
25  margin: 0 auto;
26  padding: 0;
27  width: 1024px;
28}
29
30#top {
31  background: url("../images/topBg.png") no-repeat scroll center;
32  width: 1020px;
33  height: 44px;
34}
35
36#content {
37  padding: 0px 20px 20px;
38  background: url("../images/Contentbg.png") repeat-y scroll center;
39  width: 980px;
[141]40  /*border: 1px solid #ccc;*/
[59]41}
42
43#Header {
44  background: transparent url("../images/logo.png") no-repeat scroll center;
45  width: 980px;
46  height: 160px;
[139]47  /*border: 1px solid;*/
[59]48}
[80]49#HeaderLink{
50  display: block;
51  width: 650px;
52  height: 160px;
53}
[59]54
[139]55/* Navigation plugin, top level. */
56#menu {
57    float: left;
[141]58    /*border: 1px solid #ccc;*/
[139]59}
60
[55]61a:link, a:visited, a:hover {
62    color: #666;
63    font-weight: bold;
64    text-decoration: none;
[59]65}
[55]66
[106]67img {
68    border: 0px;
69}
70
[55]71h1 {
72    color: #006dba;
73    font-weight: normal;
[98]74    font-size: 17px;
[59]75    margin: 0 0 .3em 0;
[55]76}
77
78ul {
[59]79    padding-left: 15px;
[55]80}
81
82input, select, textarea {
83    background-color: #fcfcfc;
84    border: 1px solid #ccc;
[98]85    font: 14px verdana, arial, helvetica, sans-serif;
[55]86    margin: 2px 0;
87    padding: 2px 4px;
88}
89select {
90   padding: 2px 2px 2px 0;
91}
92textarea {
[139]93    width: 450px;
94    height: 150px;
95    vertical-align: top;
[55]96}
97
98input:focus, select:focus, textarea:focus {
99    border: 1px solid #b2d1ff;
100}
101
102.body {
[110]103    padding: 20px 20px 20px 20px;
104    text-align: center;
[141]105    /*border: 1px solid #ccc;*/
[55]106}
107
[142]108/* Logout and Top Navigation Level */
[59]109
[142]110.appControl {
111    height: 2em;
112}
113
[141]114.logoutButton {
[139]115    float: right;
[142]116    padding: 0.3em 0px 0.3em 0;
[98]117    font-size: 14px;
[142]118    margin: 0 165px 0 0;
119    /*border: 1px solid #ccc;*/
[59]120}
121
[141]122.logoutButton:hover {
[139]123    color: red;
[142]124    padding: 0.5em 0px 0.1em 0;
[139]125}
[55]126
[139]127/* ORIGINAL NAVIGATION MENU */
128
[55]129.nav {
[59]130    text-align: centre;
131    background: url("../images/linkPanel_long.png") top no-repeat;
[139]132    padding: 10px 0px 0px 0px;
[59]133    width: 980px;
134    height: 40px;
[55]135}
136
137.menuButton {
[98]138    font-size: 14px;
[55]139    padding: 0 5px;
140}
141.menuButton a {
142    color: #333;
[59]143    padding: 14px 25px;
[55]144}
145.menuButton a.home {
[59]146    /*background: url(../images/skin/house.png) center left no-repeat;*/
[55]147    color: #333;
[59]148    /*padding: 25px;*/
[55]149}
150.menuButton a.list {
[59]151    /*background: url(../images/skin/database_table.png) center left no-repeat;*/
[55]152    color: #333;
[59]153    /*padding-left: 25px;*/
[55]154}
155.menuButton a.create {
[59]156    /*background: url(../images/skin/database_add.png) center left no-repeat;*/
[55]157    color: #333;
[59]158    /*padding-left: 25px;*/
[55]159}
160
161/* MESSAGES AND ERRORS */
162
163.message {
164    background: #f3f8fc url(../images/skin/information.png) 8px 50% no-repeat;
165    border: 1px solid #b2d1ff;
166    color: #006dba;
167    margin: 10px 0 5px 0;
[59]168    padding: 5px 5px 5px 0px
[55]169}
170
171div.errors {
172    background: #fff3f3;
173    border: 1px solid red;
174    color: #cc0000;
175    margin: 10px 0 5px 0;
176    padding: 5px 0 5px 0;
177}
178div.errors ul {
179    list-style: none;
[59]180    padding: 0;
[55]181}
182div.errors li {
183        background: url(../images/skin/exclamation.png) 8px 0% no-repeat;
184    line-height: 16px;
185    padding-left: 30px;
186}
187
188td.errors select {
189    border: 1px solid red;
190}
191td.errors input {
192    border: 1px solid red;
193}
[98]194td.errors textarea {
195    border: 1px solid red;
196}
[55]197
[134]198input.time {
[98]199    width:40px;
200}
[134]201input.time.errors {
[98]202    border: 1px solid red;
203}
[134]204input.description {
205    width:450px;
206}
[98]207
[55]208/* TABLES */
209
210table {
211    border: 1px solid #ccc;
212    width: 100%
213}
214tr {
215    border: 0;
216}
[59]217td, th {
[98]218    font: 14px verdana, arial, helvetica, sans-serif;
219    line-height: 17px;
[55]220    padding: 5px 6px;
221    text-align: left;
222    vertical-align: top;
223}
224th {
225    background: #fff url(../images/skin/shadow.jpg);
[106]226    color: #555;
[98]227    font-size: 14px;
[55]228    font-weight: bold;
229    line-height: 17px;
230    padding: 2px 6px;
231}
232th a:link, th a:visited, th a:hover {
233    color: #333;
234    display: block;
[98]235    font-size: 14px;
[55]236    text-decoration: none;
237    width: 100%;
238}
239th.asc a, th.desc a {
240    background-position: right;
241    background-repeat: no-repeat;
242}
243th.asc a {
244    background-image: url(../images/skin/sorted_asc.gif);
245}
246th.desc a {
247    background-image: url(../images/skin/sorted_desc.gif);
248}
249
250.odd {
251    background: #f7f7f7;
252}
253.even {
254    background: #fff;
255}
256
[124]257.clickableOdd {
258    background: #f7f7f7;
259    cursor: pointer;
260}
261.clickableEven {
262    background: #fff;
263    cursor: pointer;
264}
265
[55]266/* LIST */
267
268.list table {
269    border-collapse: collapse;
270}
271.list th, .list td {
272    border-left: 1px solid #ddd;
273}
274.list th:hover, .list tr:hover {
275    background: #b2d1ff;
276}
277
278/* PAGINATION */
279
280.paginateButtons {
[155]281    /*background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;*/
282   /*border: 1px solid #ccc;*/
[55]283    border-top: 0;
284    color: #666;
[98]285    font-size: 14px;
[55]286    overflow: hidden;
287    padding: 10px 3px;
288}
289.paginateButtons a {
290    background: #fff;
291    border: 1px solid #ccc;
292    border-color: #ccc #aaa #aaa #ccc;
293    color: #666;
294    margin: 0 3px;
295    padding: 2px 6px;
296}
297.paginateButtons span {
298    padding: 2px 3px;
299}
300
301/* DIALOG */
302
303.dialog table {
304    padding: 5px 0;
305}
306
307.prop {
308    padding: 5px;
309}
310.prop .name {
311    text-align: left;
312    width: 15%;
313    white-space: nowrap;
314}
315.prop .value {
316    text-align: left;
317    width: 85%;
318}
319
320/* ACTION BUTTONS */
321
322.buttons {
323    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
324    border: 1px solid #ccc;
325    color: #666;
[98]326    font-size: 14px;
[84]327    margin-top: -1px;
328    margin-bottom: 5px;
[55]329    overflow: hidden;
330    padding: 0;
331}
332
333.buttons input {
334    background: #fff;
335    border: 0;
336    color: #333;
337    cursor: pointer;
[98]338    font-size: 14px;
[55]339    font-weight: bold;
340    margin-left: 3px;
341    overflow: visible;
342    padding: 2px 6px;
343}
344.buttons input.delete {
345    background: transparent url(../images/skin/database_delete.png) 5px 50% no-repeat;
346    padding-left: 28px;
347}
[181]348.buttons input.trash {
349    background: transparent url(../images/skin/bin_closed.png) 5px 50% no-repeat;
350    padding-left: 28px;
351}
352.buttons input.restore {
353    background: transparent url(../images/skin/bin_empty.png) 5px 50% no-repeat;
354    padding-left: 28px;
355}
356.buttons input.cancel {
357    background: transparent url(../images/skin/cross.png) 5px 50% no-repeat;
358    padding-left: 28px;
359}
360.buttons input.complete {
361    background: transparent url(../images/skin/tick.png) 5px 50% no-repeat;
362    padding-left: 28px;
363}
364.buttons input.reopen {
365    background: transparent url(../images/skin/door_open.png) 5px 50% no-repeat;
366    padding-left: 28px;
367}
368.buttons input.approve {
369    background: transparent url(../images/skin/database_gear.png) 5px 50% no-repeat;
370    padding-left: 28px;
371}
372.buttons input.renegeApproval {
373    background: transparent url(../images/skin/cog_delete.png) 5px 50% no-repeat;
374    padding-left: 28px;
375}
[55]376.buttons input.edit {
377    background: transparent url(../images/skin/database_edit.png) 5px 50% no-repeat;
378    padding-left: 28px;
379}
380.buttons input.save {
381    background: transparent url(../images/skin/database_save.png) 5px 50% no-repeat;
382    padding-left: 28px;
383}
[106]384.buttons input.add {
385    background: transparent url(../images/skin/database_add.png) 5px 50% no-repeat;
386    padding-left: 28px;
387}
[134]388.buttons input.search {
389    background: transparent url(../images/skin/database_search.png) 5px 50% no-repeat;
390    padding-left: 28px;
391}
392.buttons input.link {
393    background: transparent url(../images/skin/database_link.png) 5px 50% no-repeat;
394    padding-left: 28px;
395}
396.buttons input.go {
397    background: transparent url(../images/skin/database_go.png) 5px 50% no-repeat;
398    padding-left: 28px;
399}
400.buttons input.table {
401    background: transparent url(../images/skin/database_table.png) 5px 50% no-repeat;
402    padding-left: 28px;
403}
[59]404
405#bottom {
406  background: url("../images/bottomBg.png") no-repeat scroll center;
407  width: 1020px;
408  height: 100px;
[139]409}
410
[155]411/* Overlay Pane and filterPane plugin*/
412div.overlayPane {
413    position: absolute;
414    width:70%;
415    left: 50%;
416    margin-left: -35%;
417    top: 50%;
418    margin-top: -15%;
419    border: 2px solid #666666;
420    background-color: white;
421    padding: 5px;
422    z-index: 1;
423}
424
425.overlayTable {
426    width: 100%;
427}
428
429a.remove img {
430    border:none;
431}
432
[139]433 /* Navigation Plugin Override */
434.navigation {
435    padding: 0px 0px 0px 165px;
436    list-style-type: none;
437    clear: both;
438    font-size: 14px;
[141]439    /*overflow: hidden;*/ /* Clearing floats */
[139]440}
441
442.navigation li {
443    float: left;
444    /*border: 0px*/
445    /* border: 1px solid #888; */
446     /*border-left-color: #bbb;*/  /* Highlight border-color */
447}
448
449.navigation li.navigation_first {
450     /*border-left-color: #888; */
451}
452
453.navigation li.navigation_active {
454     /*border-left-color: #555;*/  /* Highlight border-color of active item */
455}
456
457.navigation li a {
458    /* color: #fff; */
459    /* background-color: #aaa; */
[141]460    padding: 0.3em 0.75em 0;
[139]461    display: block;
462    text-decoration: none;
463}
464
465.navigation li a:hover {
466    color: red;
467    /* background-color: #999; */
468/*     font-weight: normal; */
469/*     font-size: 14px; */
[142]470    padding: 0.5em 0.75em;
[139]471    /*cursor: default;*/
472}
473
474.navigation li.navigation_active a {
475    /* background-color: #555; */
476/*    color: #fff;*/
477    color: #006dba;
478    /*color: black;*/
479    font-weight: bold;
480    font-size: 17px;
481    margin: 0 0 0 0;
482    /*cursor: default;*/
483}
484
485.navigation li.navigation_active a:hover {
486    color: #006dba;
487    font-weight: bold;
488    font-size: 17px;
[142]489    padding: 0.3em 0.75em;
[139]490    /*background-color: #555;*/
491}
492
493/* Sub navigation */
494.subnavigation {
495    /*padding: 0px 0px 0px 165px;*/
496    padding: 0px 0px 0px 220px;
497    list-style-type: none;
498    clear: both;
499    overflow: hidden; /* Clearing floats */
500}
501.subnavigation li {
502    float: left;
503    /* background-color: #555; */
504    padding: 0em 0.75em;
505    border-width: 0px 0;
506}
507.subnavigation li a {
508    color: #006dba;
509    font-weight: bold;
510    font-size: 17px;
511    display: block;
512    /*padding: 0px 0;*/
513    /* border-color: #555; */
514    border-style: solid;
515    border-width: 0px 0;
516    text-decoration: none;
517    /*margin: 0 0 0 0;*/
518    /*cursor: default;*/
519}
520
521.subnavigation li a:visited {
522    color: #006dba;
523}
524
525.subnavigation li a:hover {
526    /*color: red;*/
527    /*border-color: black;*/ 
528    border-width: 1px 0;
529}
530.subnavigation li.subnavigation_active a {
531    /*color: #e0e0e0; */
532    /*cursor: default;*/
533    /*border-color: #e0e0e0;*/
534    border-width: 1px 0;
535}
Note: See TracBrowser for help on using the repository browser.