PageRenderTime 36ms CodeModel.GetById 16ms RepoModel.GetById 0ms app.codeStats 0ms

/web-app/css/main.css

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