index.css 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. body {
  2. background: #fff;
  3. font-family: 'Raleway', sans-serif;
  4. font-size: 42px;
  5. font-weight: 300;
  6. }
  7. form {
  8. text-align: center;
  9. }
  10. #bar {
  11. width: 652px;
  12. margin: 0 auto;
  13. position: relative;
  14. }
  15. #url {
  16. font-family: 'Raleway', sans-serif;
  17. font-size: 32px;
  18. font-weight: 300;
  19. width: 600px;
  20. padding: 25px;
  21. color: #999;
  22. border-radius: 4px;
  23. border: 1px solid #ccc;
  24. outline: none;
  25. box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  26. }
  27. #url:focus {
  28. border: 1px solid #09f;
  29. }
  30. #url::-webkit-input-placeholder {
  31. color: #ddd;
  32. }
  33. #url::-moz-placeholder {
  34. color: #ddd;
  35. }
  36. #cmp {
  37. background-color: #eee;
  38. padding: 25px;
  39. width: 560px;
  40. margin: 0 auto;
  41. text-align: left;
  42. font-size: 21px;
  43. transition: transform 200ms ease-in-out;
  44. transform: scaleY(0);
  45. transform-origin: top center;
  46. border-bottom-left-radius: 4px;
  47. border-bottom-right-radius: 4px;
  48. border: 1px solid #ccc;
  49. }
  50. #cmp > a {
  51. color: #09f;
  52. text-decoration: none;
  53. }
  54. #cls {
  55. position: absolute;
  56. top: 0;
  57. right: 0;
  58. bottom: 0;
  59. width: 64px;
  60. background-image: url("/s/close.svg");
  61. background-position: center center;
  62. background-repeat: no-repeat;
  63. background-size: 48px 48px;
  64. cursor: pointer;
  65. opacity: 0.3;
  66. display: none;
  67. }
  68. #cls:hover {
  69. opacity: 0.6;
  70. }