simple-todos-react.css 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. /* CSS declarations go here */
  2. body {
  3. font-family: sans-serif;
  4. background-color: #315481;
  5. background-image: linear-gradient(to bottom, #315481, #918e82 100%);
  6. background-attachment: fixed;
  7. position: absolute;
  8. top: 0;
  9. bottom: 0;
  10. left: 0;
  11. right: 0;
  12. padding: 0;
  13. margin: 0;
  14. font-size: 14px;
  15. }
  16. .container {
  17. max-width: 600px;
  18. margin: 0 auto;
  19. min-height: 100%;
  20. background: white;
  21. }
  22. header {
  23. background: #d2edf4;
  24. background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
  25. padding: 20px 15px 15px 15px;
  26. position: relative;
  27. }
  28. #login-buttons {
  29. display: block;
  30. }
  31. h1 {
  32. font-size: 1.5em;
  33. margin: 0;
  34. margin-bottom: 10px;
  35. display: inline-block;
  36. margin-right: 1em;
  37. }
  38. form {
  39. margin-top: 10px;
  40. margin-bottom: -10px;
  41. position: relative;
  42. }
  43. .new-task input {
  44. box-sizing: border-box;
  45. padding: 10px 0;
  46. background: transparent;
  47. border: none;
  48. width: 100%;
  49. padding-right: 80px;
  50. font-size: 1em;
  51. }
  52. .new-task input:focus{
  53. outline: 0;
  54. }
  55. ul {
  56. margin: 0;
  57. padding: 0;
  58. background: white;
  59. }
  60. .delete {
  61. float: right;
  62. font-weight: bold;
  63. background: none;
  64. font-size: 1em;
  65. border: none;
  66. position: relative;
  67. }
  68. li {
  69. position: relative;
  70. list-style: none;
  71. padding: 15px;
  72. border-bottom: #eee solid 1px;
  73. }
  74. li .text {
  75. margin-left: 10px;
  76. }
  77. li.checked {
  78. color: #888;
  79. }
  80. li.checked .text {
  81. text-decoration: line-through;
  82. }
  83. li.private {
  84. background: #eee;
  85. border-color: #ddd;
  86. }
  87. header .hide-completed {
  88. float: right;
  89. }
  90. .toggle-private {
  91. margin-left: 5px;
  92. }
  93. @media (max-width: 600px) {
  94. li {
  95. padding: 12px 15px;
  96. }
  97. .search {
  98. width: 150px;
  99. clear: both;
  100. }
  101. .new-task input {
  102. padding-bottom: 5px;
  103. }
  104. }