fv.css 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. html, body{ height:100%; }
  2. /* body min-width is 992px because it's 960px grid + extra 16px from each side of the header */
  3. body{ min-width:960px; color:#444; background-color:#F1F1F1; font-size:12px; line-height:1.5em; font-family:Arial, Helvetica, sans-serif; }
  4. html, body, div, span, object, iframe,
  5. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  6. abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
  7. small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
  8. fieldset, form, label, legend,
  9. table, caption, tbody, tfoot, thead, tr, th, td,
  10. article, aside, canvas, details, figcaption, figure,
  11. footer, header, hgroup, menu, nav, section, summary,
  12. time, mark, audio, video {
  13. margin:0;
  14. padding:0;
  15. border:0;
  16. vertical-align:baseline;
  17. }
  18. small{ font-size:0.9em; }
  19. article, aside, details, figcaption, figure,
  20. footer, header, hgroup, menu, nav, section {
  21. display:block;
  22. }
  23. h1{ font-size:2em; margin:0 0 50px 0; }
  24. button{ cursor:pointer; }
  25. p{ padding:5px 0; }
  26. a{ text-decoration:none; }
  27. .btn{ margin:5px; font-size:1.3em; font-weight:bold; border:2px solid rgba(0,0,0,0.2); display:inline-block; box-shadow:0 -30px 30px -15px #00329B inset, 0 1px 0 rgba(255,255,255,0.3) inset; background:#0088CC; background-repeat:repeat-x; color:#FFF; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25); border-radius:7px; padding:10px 20px; -webkit-transition:0.15s; transition:0.15s; }
  28. .btn:hover{ background:#0068BA; }
  29. .btn:active{ box-shadow:0 0 0 0 rgba(0, 0, 0, 0.3), 0 -30px 30px -15px #00329B inset, 0 0 6px #00243F inset; }
  30. .btn.github{ float:right; }
  31. #wrap{ padding:50px; width:860px; background-color:#FFF; margin:20px auto; border:1px dashed #AAA; position:relative; }
  32. .options{ position:absolute; top:-1px; right:-1px; background-color:#F1F1F1; padding:4px 0; border-left:1px dashed #AAA; border-bottom:1px dashed #AAA; }
  33. .options label{ cursor:pointer; margin:0 10px; }
  34. input, textarea{ border:1px solid #D1D1D1; }
  35. input, select{ font-size:inherit; margin:0; }
  36. input:focus, textarea:focus{ border-color:#AAA; }
  37. input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
  38. input[type=checkbox]{ width:auto; border:none; bottom:-1px; cursor:pointer; margin:2px 8px 0 0; position:relative; transform:scale(1.2); }
  39. button[type=submit]{ font-size:1.1em; padding:5px 25px; }
  40. /* Tooltips helpers */
  41. .item .tooltip{ float:left; top:2px; left:7px; position:relative; z-index:2; }
  42. .item .tooltip:hover{ z-index:3; }
  43. .item .tooltip > span{ display:inline-block; width:15px; height:15px; line-height:15px; font-size:0.9em; font-weight:bold; text-align:center; color:#FFF; cursor:help; background-color:#00AEEF; position:relative; border-radius:10px; }
  44. .item .tooltip .content{ opacity:0; width:200px; background-color:#333; color:#FFF; font-size:0.9em; position:absolute; top:0; left:20px; padding:8px; border-radius:6px; pointer-events:none; transition:0.2s cubic-bezier(0.1, 0.1, 0.25, 2); -webkit-transition:0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2); -moz-transition:0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2); }
  45. .item .tooltip p{ padding:0; }
  46. .item .tooltip.down .content{ left:auto; right:0; top:30px; }
  47. .item .tooltip:hover .content{ opacity:1; left:36px; }
  48. .item .tooltip .content b{ height:0; width:0; border-color:#333 #333 transparent transparent; border-style:solid; border-width:9px 7px; position:absolute; left:-14px; top:8px; }
  49. .item .tooltip.down .content b{ left:auto; right:6px; top:-10px; border-width:5px; border-color:transparent #333 #333 transparent; }
  50. /* alerts (when validation fails) */
  51. .item .alert{ float:left; margin:-2px 0 0 20px; padding:3px 10px; color:#FFF; border-radius:3px 4px 4px 3px; background-color:#CE5454; max-width:170px; white-space:pre; position:relative; left:-15px; opacity:0; z-index:1; transition:0.15s ease-out; }
  52. .item .alert::after{ content:''; display:block; height:0; width:0; border-color:transparent #CE5454 transparent transparent; border-style:solid; border-width:11px 7px; position:absolute; left:-13px; top:1px; }
  53. .item.bad .alert{ left:0; opacity:1; }
  54. @keyframes shake{
  55. 15%{ transform:translateX(-5px); }
  56. 30%{ transform:translateX(5px); }
  57. 45%{ transform:translateX(-3px); }
  58. 60%{ transform:translateX(3px); }
  59. 75%{ transform:translateX(2px); }
  60. 100%{ transform:none; }
  61. }
  62. @-webkit-keyframes shake{
  63. 25%{ -webkit-transform:translateX(-6px); }
  64. 75%{ -webkit-transform:translateX(6px); }
  65. }
  66. form fieldset{ clear:both; margin:0 0 10px 0; }
  67. form .item{ padding:5px 0; position:relative; height:2em; }
  68. form .item.items{ height:auto; }
  69. .item label, .item .label{ float:left; cursor:pointer; }
  70. .item label span, .item .label{ float:left; width:160px; text-transform:capitalize; line-height:2em; }
  71. .item input, .item textarea{ float:left; padding:3px 4px; width:210px; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s; }
  72. .item input[type=checkbox]{ width:auto; }
  73. .label ~ label{ vertical-align:middle; margin:0.3em 1.2em 0 0; }
  74. .item input.short{ width:90px; }
  75. .item input:focus:not([type="checkbox"]), .item textarea:focus{ box-shadow:0 0 4px #00AEEF; border:1px solid #00AEEF; }
  76. .item textarea{ }
  77. .item select{ float:left; width:220px; padding:2px 0; margin:0; border:1px solid #CCC; text-transform:capitalize; }
  78. .item select option{ padding:1px; }
  79. .item > .extra{ float:left; font-size:0.9em; color:#999; line-height:2em; margin-left:13px; }
  80. .item.multi .input{ float:left; }
  81. .item.multi input{ float:left; margin-right:5px; width:35px; text-align:center; }
  82. form .item.multi input:nth-last-child(-n+2){ margin:0; }
  83. .item.items input{ border-top:5px solid #E1E1E1; margin:0 0 0 160px; }
  84. .bad input,
  85. .bad select,
  86. .bad textarea{ border:1px solid #CE5454; box-shadow:0 0 4px -2px #CE5454; position:relative; left:0; -moz-animation:.7s 1 shake linear; -webkit-animation:0.7s 1 shake linear; }
  87. /* mode2 - where the label's text is above the field and not next to it
  88. --------------------------------------------------------------------------- */
  89. .mode2 .item{ float:left; clear:left; margin-bottom:30px; height:auto; padding:0; zoom:1; }
  90. .mode2 .item.bad{ margin-bottom:8px; }
  91. .mode2 .item::before, .mode2 .item::after{ content:''; display:table; }
  92. .mode2 .item::after{ clear:both; }
  93. .mode2 .item label{ }
  94. .mode2 .item label span{ float:none; display:block; line-height:inherit; }
  95. .mode2 .item input:not(type="checkbox"), .item textarea{ width:250px; margin:0; }
  96. .mode2 .item textarea{ width:350px; margin:0; }
  97. .mode2 .item select{ width:260px; float:none; }
  98. .mode2 .item.multi label{ float:none; }
  99. .mode2 .item.multi input{ float:left; margin-right:5px; width:35px; text-align:center; }
  100. .mode2 .item .tooltip{ left:auto; position:absolute; right:-22px; top:19px; }
  101. .mode2 .item .alert::after{ display:none; }
  102. .mode2 .item .alert{ float:none; clear:left; margin:0; padding:0 5px; border-radius:0 0 3px 3px; max-width:100%; height:22px; line-height:1.8em; }
  103. .mode2 .item > .extra{ position:absolute; right:0; }