/web-app/css/main.css
CSS | 613 lines | 493 code | 106 blank | 14 comment | 0 complexity | b929aa1fc2adaeea3f5432368ee42dd1 MD5 | raw file
1/* FONT STACK */ 2body, 3input, select, textarea { 4 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 5} 6 7/* BASE LAYOUT */ 8 9html { 10 background-color: #ddd; 11 background-image: -moz-linear-gradient(center top, #aaa, #ddd); 12 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(1, #ddd)); 13 background-image: linear-gradient(top, #aaa, #ddd); 14 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = '#aaa', EndColorStr = '#ddd'); 15 background-repeat: no-repeat; 16 height: 100%; 17 /* change the box model to exclude the padding from the calculation of 100% height (IE8+) */ 18 -webkit-box-sizing: border-box; 19 -moz-box-sizing: border-box; 20 box-sizing: border-box; 21} 22 23html.no-cssgradients { 24 background-color: #aaa; 25} 26 27.ie6 html { 28 height: 100%; 29} 30 31html * { 32 margin: 0; 33} 34 35body { 36 background: #ffffff; 37 color: #333333; 38 margin: 0 auto; 39 overflow-x: hidden; /* prevents box-shadow causing a horizontal scrollbar in firefox when viewport < 960px wide */ 40 -moz-box-shadow: 0 0 0.3em #255b17; 41 -webkit-box-shadow: 0 0 0.3em #255b17; 42 box-shadow: 0 0 0.3em #255b17; 43} 44 45#grailsLogo { 46 background-color: #abbf78; 47} 48 49.encabezado a { 50 margin: 0 !important; 51 color: #FFFFFF !important; 52 text-decoration: none; 53} 54 55.encabezado a:hover, a:active { 56 outline: none; /* prevents outline in webkit on active links but retains it for tab focus */ 57 text-decoration: underline; 58} 59 60#logo { 61 float: left; 62} 63 64.encabezado { 65 height: 80px; 66 margin-right: 5px; 67 margin-top: 5px; 68 text-align: right; 69} 70 71/* replace with .no-boxshadow body if you have modernizr available */ 72.ie6 body, 73.ie7 body, 74.ie8 body { 75 border-color: #255b17; 76 border-style: solid; 77 border-width: 0 1px; 78} 79 80.ie6 body { 81 height: 100%; 82} 83 84a:link, a:visited, a:hover { 85 color: #48802c; 86} 87 88a:hover, a:active { 89 outline: none; /* prevents outline in webkit on active links but retains it for tab focus */ 90} 91 92h1 { 93 color: #48802c; 94 font-weight: normal; 95 font-size: 1.25em; 96 margin: 0.8em 0 0.3em 0; 97} 98 99h2 { 100 color: #48802c; 101 font-weight: normal; 102 font-size: 1em; 103 margin: 0.8em 0 0.3em 0; 104 padding: 0 0.6em; 105} 106 107ul { 108 padding: 0; 109} 110 111img { 112 border: 0; 113} 114 115/* GENERAL */ 116 117#grailsLogo a { 118 display: inline-block; 119 margin: 10px; 120} 121 122.content { 123} 124 125.content h1 { 126 border-bottom: 1px solid #CCCCCC; 127 margin: 0.8em 1em 0.3em; 128 padding: 0 0.25em; 129} 130 131.scaffold-list h1 { 132 border: none; 133} 134 135.footer { 136 background: #abbf78; 137 color: #000; 138 clear: both; 139 font-size: 0.8em; 140 padding: 1em; 141 min-height: 1em; 142} 143 144.footer a { 145 color: #255b17; 146} 147 148.spinner { 149 background: url(../images/spinner.gif) 50% 50% no-repeat transparent; 150 height: 16px; 151 width: 16px; 152 padding: 0.5em; 153 position: absolute; 154 right: 0; 155 top: 0; 156 text-indent: -9999px; 157} 158 159/* NAVIGATION MENU */ 160 161.nav { 162 background-color: #efefef; 163 padding: 0.5em 0.75em; 164 -moz-box-shadow: 0 0 3px 1px #aaaaaa; 165 -webkit-box-shadow: 0 0 3px 1px #aaaaaa; 166 box-shadow: 0 0 3px 1px #aaaaaa; 167 zoom: 1; 168} 169 170.nav ul { 171 overflow: hidden; 172 padding-left: 0; 173 zoom: 1; 174} 175 176.nav li { 177 display: block; 178 float: left; 179 list-style-type: none; 180 margin-right: 0.5em; 181 padding: 0; 182} 183 184.nav a { 185 color: #666666; 186 display: block; 187 padding: 0.25em 0.7em; 188 text-decoration: none; 189 -moz-border-radius: 0.3em; 190 -webkit-border-radius: 0.3em; 191 border-radius: 0.3em; 192} 193 194.nav a:active, .nav a:visited { 195 color: #666666; 196} 197 198.nav a:focus, .nav a:hover { 199 background-color: #999999; 200 color: #ffffff; 201 outline: none; 202 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); 203} 204 205.no-borderradius .nav a:focus, .no-borderradius .nav a:hover { 206 background-color: transparent; 207 color: #444444; 208 text-decoration: underline; 209} 210 211.nav a.home, .nav a.list, .nav a.create { 212 background-position: 0.7em center; 213 background-repeat: no-repeat; 214 text-indent: 25px; 215} 216 217.nav a.home { 218 background-image: url(../images/skin/house.png); 219} 220 221.nav a.list { 222 background-image: url(../images/skin/database_table.png); 223} 224 225.nav a.create { 226 background-image: url(../images/skin/database_add.png); 227} 228 229/* CREATE/EDIT FORMS AND SHOW PAGES */ 230 231fieldset, 232.property-list { 233 margin: 0.6em 1.25em 0 1.25em; 234 padding: 0.3em 1.8em 1.25em; 235 position: relative; 236 zoom: 1; 237 border: none; 238} 239 240.property-list .fieldcontain { 241 list-style: none; 242 overflow: hidden; 243 zoom: 1; 244} 245 246.fieldcontain { 247 margin-top: 1em; 248} 249 250.fieldcontain label, 251.fieldcontain .property-label { 252 color: #666666; 253 text-align: right; 254 width: 25%; 255} 256 257.fieldcontain .property-label { 258 float: left; 259} 260 261.fieldcontain .property-value { 262 display: block; 263 margin-left: 27%; 264} 265 266label { 267 cursor: pointer; 268 display: inline-block; 269 margin: 0 0.25em 0 0; 270} 271 272input, select, textarea { 273 background-color: #fcfcfc; 274 border: 1px solid #cccccc; 275 font-size: 1em; 276 padding: 0.2em 0.4em; 277} 278 279select { 280 padding: 0.2em 0.2em 0.2em 0; 281} 282 283select[multiple] { 284 vertical-align: top; 285} 286 287textarea { 288 width: 250px; 289 height: 150px; 290 overflow: auto; /* IE always renders vertical scrollbar without this */ 291 vertical-align: top; 292} 293 294input[type=checkbox], input[type=radio] { 295 background-color: transparent; 296 border: 0; 297 padding: 0; 298} 299 300input:focus, select:focus, textarea:focus { 301 background-color: #ffffff; 302 border: 1px solid #eeeeee; 303 outline: 0; 304 -moz-box-shadow: 0 0 0.5em #ffffff; 305 -webkit-box-shadow: 0 0 0.5em #ffffff; 306 box-shadow: 0 0 0.5em #ffffff; 307} 308 309.required-indicator { 310 color: #48802C; 311 display: inline-block; 312 font-weight: bold; 313 margin-left: 0.3em; 314 position: relative; 315 top: 0.1em; 316} 317 318ul.one-to-many { 319 display: inline-block; 320 list-style-position: inside; 321 vertical-align: top; 322} 323 324.ie6 ul.one-to-many, .ie7 ul.one-to-many { 325 display: inline; 326 zoom: 1; 327} 328 329ul.one-to-many li.add { 330 list-style-type: none; 331} 332 333/* EMBEDDED PROPERTIES */ 334 335fieldset.embedded { 336 background-color: transparent; 337 border: 1px solid #CCCCCC; 338 padding-left: 0; 339 padding-right: 0; 340 -moz-box-shadow: none; 341 -webkit-box-shadow: none; 342 box-shadow: none; 343} 344 345fieldset.embedded legend { 346 margin: 0 1em; 347} 348 349/* MESSAGES AND ERRORS */ 350 351.errors, 352.message { 353 font-size: 0.8em; 354 line-height: 2; 355 margin: 1em 2em; 356 padding: 0.5em; 357} 358 359.message { 360 background: #f3f3ff; 361 border: 1px solid #b2d1ff; 362 color: #006dba; 363 -moz-box-shadow: 0 0 0.25em #b2d1ff; 364 -webkit-box-shadow: 0 0 0.25em #b2d1ff; 365 box-shadow: 0 0 0.25em #b2d1ff; 366} 367 368.errors { 369 background: #fff3f3; 370 border: 1px solid #ffaaaa; 371 color: #cc0000; 372 -moz-box-shadow: 0 0 0.25em #ff8888; 373 -webkit-box-shadow: 0 0 0.25em #ff8888; 374 box-shadow: 0 0 0.25em #ff8888; 375} 376 377.errors ul, 378.message { 379 padding: 0; 380} 381 382.errors li { 383 list-style: none; 384 background: transparent url(../images/skin/exclamation.png) 0 50% no-repeat; 385 text-indent: 22px; 386} 387 388.message { 389 background: transparent url(../images/skin/information.png) 0 50% no-repeat; 390 text-indent: 22px; 391} 392 393/* form fields with errors */ 394 395.error input, .error select, .error textarea { 396 background: #fff3f3; 397 border-color: #ffaaaa; 398 color: #cc0000; 399} 400 401.error input:focus, .error select:focus, .error textarea:focus { 402 -moz-box-shadow: 0 0 0.5em #ffaaaa; 403 -webkit-box-shadow: 0 0 0.5em #ffaaaa; 404 box-shadow: 0 0 0.5em #ffaaaa; 405} 406 407/* same effects for browsers that support HTML5 client-side validation (these have to be specified separately or IE will ignore the entire rule) */ 408 409input:invalid, select:invalid, textarea:invalid { 410 background: #fff3f3; 411 border-color: #ffaaaa; 412 color: #cc0000; 413} 414 415input:invalid:focus, select:invalid:focus, textarea:invalid:focus { 416 -moz-box-shadow: 0 0 0.5em #ffaaaa; 417 -webkit-box-shadow: 0 0 0.5em #ffaaaa; 418 box-shadow: 0 0 0.5em #ffaaaa; 419} 420 421/* TABLES */ 422 423table { 424 border-top: 1px solid #DFDFDF; 425 border-collapse: collapse; 426 width: 100%; 427 margin-bottom: 1em; 428} 429 430tr { 431 border: 0; 432} 433 434tr>td:first-child, tr>th:first-child { 435 padding-left: 1.25em; 436} 437 438tr>td:last-child, tr>th:last-child { 439 padding-right: 1.25em; 440} 441 442td, th { 443 line-height: 1.5em; 444 padding: 0.5em 0.6em; 445 text-align: left; 446 vertical-align: top; 447} 448 449th { 450 background-color: #efefef; 451 background-image: -moz-linear-gradient(top, #ffffff, #eaeaea); 452 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #eaeaea)); 453 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = '#ffffff', EndColorStr = '#eaeaea'); 454 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eaeaea')"; 455 color: #666666; 456 font-weight: bold; 457 line-height: 1.7em; 458 padding: 0.2em 0.6em; 459} 460 461thead th { 462 white-space: nowrap; 463} 464 465th a { 466 display: block; 467 text-decoration: none; 468} 469 470th a:link, th a:visited { 471 color: #666666; 472} 473 474th a:hover, th a:focus { 475 color: #333333; 476} 477 478th.sortable a { 479 background-position: right; 480 background-repeat: no-repeat; 481 padding-right: 1.1em; 482} 483 484th.asc a { 485 background-image: url(../images/skin/sorted_asc.gif); 486} 487 488th.desc a { 489 background-image: url(../images/skin/sorted_desc.gif); 490} 491 492.odd { 493 background: #f7f7f7; 494} 495 496.even { 497 background: #ffffff; 498} 499 500th:hover, tr:hover { 501 background: #E1F2B6; 502} 503 504/* PAGINATION */ 505 506.pagination { 507 border-top: 0; 508 margin: 0; 509 padding: 0.3em 0.2em; 510 text-align: center; 511 -moz-box-shadow: 0 0 3px 1px #AAAAAA; 512 -webkit-box-shadow: 0 0 3px 1px #AAAAAA; 513 box-shadow: 0 0 3px 1px #AAAAAA; 514 background-color: #EFEFEF; 515} 516 517.pagination a, 518.pagination .currentStep { 519 color: #666666; 520 display: inline-block; 521 margin: 0 0.1em; 522 padding: 0.25em 0.7em; 523 text-decoration: none; 524 -moz-border-radius: 0.3em; 525 -webkit-border-radius: 0.3em; 526 border-radius: 0.3em; 527} 528 529.pagination a:hover, .pagination a:focus, 530.pagination .currentStep { 531 background-color: #999999; 532 color: #ffffff; 533 outline: none; 534 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); 535} 536 537.no-borderradius .pagination a:hover, .no-borderradius .pagination a:focus, 538.no-borderradius .pagination .currentStep { 539 background-color: transparent; 540 color: #444444; 541 text-decoration: underline; 542} 543 544/* ACTION BUTTONS */ 545 546.buttons { 547 background-color: #efefef; 548 overflow: hidden; 549 padding: 0.3em; 550 -moz-box-shadow: 0 0 3px 1px #aaaaaa; 551 -webkit-box-shadow: 0 0 3px 1px #aaaaaa; 552 box-shadow: 0 0 3px 1px #aaaaaa; 553 margin: 0.1em 0 0 0; 554 border: none; 555} 556 557.buttons input, 558.buttons a { 559 background-color: transparent; 560 border: 0; 561 color: #666666; 562 cursor: pointer; 563 display: inline-block; 564 margin: 0 0.25em 0; 565 overflow: visible; 566 padding: 0.25em 0.7em; 567 text-decoration: none; 568 569 -moz-border-radius: 0.3em; 570 -webkit-border-radius: 0.3em; 571 border-radius: 0.3em; 572} 573 574.buttons input:hover, .buttons input:focus, 575.buttons a:hover, .buttons a:focus { 576 background-color: #999999; 577 color: #ffffff; 578 outline: none; 579 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); 580 -moz-box-shadow: none; 581 -webkit-box-shadow: none; 582 box-shadow: none; 583} 584 585.no-borderradius .buttons input:hover, .no-borderradius .buttons input:focus, 586.no-borderradius .buttons a:hover, .no-borderradius .buttons a:focus { 587 background-color: transparent; 588 color: #444444; 589 text-decoration: underline; 590} 591 592.buttons .delete, .buttons .edit, .buttons .save { 593 background-position: 0.7em center; 594 background-repeat: no-repeat; 595 text-indent: 25px; 596} 597 598.buttons .delete { 599 background-image: url(../images/skin/database_delete.png); 600} 601 602.buttons .edit { 603 background-image: url(../images/skin/database_edit.png); 604} 605 606.buttons .save { 607 background-image: url(../images/skin/database_save.png); 608} 609 610a.skip { 611 position: absolute; 612 left: -9999px; 613}