ZeroMe.css 4.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. body {
  2. background-color: #F6F7F8; font-family: Roboto, Helvetica, Arial; margin: 0px; padding: 0px;
  3. backface-visibility: hidden; height: 100%; position: absolute; width: 100%; overflow-x: hidden; height: 35000px
  4. }
  5. body.loaded { height: 100%; overflow: auto }
  6. p, h1, h2, h3, h4 { margin: 0px; padding-bottom: 0.6em; }
  7. input.text, textarea { border: 1px solid #EEE; padding: 15px 15px; transition: all 0.3s; width: 100%; box-sizing: border-box; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; line-height: 1.4em; }
  8. input.text:disabled, textarea:disabled { background-color: #FAFAFA; color: #9A9A9A }
  9. input.big { font-size: 20px; font-weight: 100; font-family: Roboto, Helvetica, Arial }
  10. input.search { border-radius: 50px; padding-left: 30px; margin-bottom: 30px }
  11. input.text:focus, textarea:focus { outline: none; border: 1px solid #c6caff }
  12. textarea.autosize { overflow: hidden; transition: border 0.3s, background-color 0.3s, color 0.3s }
  13. a { text-decoration: none; color: #5d68ff }
  14. a:hover { text-decoration: underline; }
  15. a:active { text-decoration: none }
  16. a.link:active { background-color: rgba(0,0,0,0.05); outline: 4px solid rgba(0,0,0,0.05); transition: none }
  17. h1 { font-size: 34px; line-height: 34px }
  18. h1, h2, h3 { font-weight: lighter }
  19. h2 a.link { font-size: 13px; margin-left: 10px; font-weight: normal; margin-top: 8px; }
  20. h2.sep { border-top: 1px solid #EEE; padding-top: 20px }
  21. h5 { font-weight: normal; color: rgba(0, 0, 0, 0.5) }
  22. .center { width: 960px; margin-left: auto; margin-right: auto; }
  23. /* Content */
  24. #Content { margin-top: 30px; margin-bottom: 50px }
  25. .content-signup { text-align: center }
  26. .content-signup .button-certselect { margin: 20px; display: inline-block; }
  27. /* Cols */
  28. .col-left, .col-center, .col-right { width: 66%; display: inline-block; vertical-align: top; box-sizing: border-box }
  29. .col-center { padding-left: 5px; }
  30. .col-left, .col-right { width: 33%; padding-left: 20px; margin-top: 90px; transition: all 0.3s }
  31. .col-left { padding-left: 0px; padding-right: 20px; margin-top: 0px; transition: all 0.3s }
  32. .col-left.faded { opacity: 0.3; filter: grayscale(1); }
  33. /* Card */
  34. .cards { margin-right: -20px }
  35. .card {
  36. border-radius: 4px; box-shadow: 0px 1px 11px #EAEAEA; background-color: white; width: 33%; width: calc(33% - 10px);
  37. box-sizing: border-box; margin-right: 10px; margin-bottom: 10px; min-width: 300px; display: inline-block;
  38. }
  39. /* Avatar */
  40. .avatar { width: 50px; height: 50px; background: #EEE; border-radius: 100px; display: inline-block; background-size: cover; background-position: center center; }
  41. .avatar.empty { vertical-align: top; font-size: 11px; line-height: 51px; text-align: center; text-decoration: none; color: #666; font-weight: bold; }
  42. /* More */
  43. .more { width: 100%; display: block; clear: both; text-align: center; padding: 20px; box-sizing: border-box; box-shadow: inset 0px 30px 25px -40px #5d68ff }
  44. .more.small { font-size: 14px; box-shadow: none; padding: 10px }
  45. /* Animate */
  46. .animate { transition: all 0.3s ease-out !important; }
  47. .animate-back { transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; }
  48. .animate-inout { transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1) !important; }
  49. .animate-inback { transition: all 0.6s cubic-bezier(0.6, -0.28, 0.735, 0.045) !important; }
  50. .animate-in { transition: all 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335) !important; }
  51. .animate-out { transition: all 0.6s ease-out !important; }
  52. @keyframes flash-in {
  53. 0% { transform: scale(1.5); opacity: 0 }
  54. 80% { transform: scale(1); opacity: 1 }
  55. 100% { transform: scale(1); opacity: 0 }
  56. }
  57. @keyframes flash-in-big {
  58. 0% { transform: scale(1.2); opacity: 0 }
  59. 80% { transform: scale(1); opacity: 1 }
  60. 100% { transform: scale(1); opacity: 0 }
  61. }
  62. @keyframes flash-out {
  63. 0% { transform: scale(1); opacity: 1 }
  64. 100% { transform: scale(1.5); opacity: 0 }
  65. }
  66. @keyframes flash-out-big {
  67. 0% { transform: scale(1); opacity: 1 }
  68. 100% { transform: scale(1.2); opacity: 0 }
  69. }
  70. @keyframes bounce {
  71. 0% { transform: translateY(0); opacity: 1 }
  72. 100% { transform: translateY(-3px); opacity: 0.7 }
  73. }