diff --git a/static/style.css b/static/style.css index a498df4..11211e6 100644 --- a/static/style.css +++ b/static/style.css @@ -4,69 +4,76 @@ li, h1, p { margin: 0; - padding: 0; } + padding: 0; +} *, *::before, *::after { - box-sizing: border-box; } + box-sizing: border-box; +} body { - background: #fafafa; - color: #555; + background: #222; + color: #fafafa; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; - line-height: 1.4; } + line-height: 1.4; +} .container { margin: 0 auto; max-width: 450px; - padding: 15px; } + padding: 15px; +} .h1 { font-size: 24px; font-weight: 500; margin-top: 60px; - padding-left: 48px; } + padding-left: 48px; +} .todo-list { - background: white; - border: 1px solid #e6e6e6; + background: #555; + border: 1px solid transparent; border-radius: 6px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); - margin: 15px 0 150px; } + box-shadow: 0 1px 3px rgba(0,0,0,.1); + margin: 15px 0 150px; +} .todo-list-item { - display: -webkit-box; - display: -ms-flexbox; display: flex; font-size: 19px; padding: 18px; - width: 100%; } - .todo-list-item + .add-todo, - .todo-list-item + .todo-list-item { - border-top: 1px solid #e6e6e6; } + width: 100%; +} + +.todo-list-item + .addTodo, +.todo-list-item + .todo-list-item { + border-top: 1px solid rgba(0,0,0,.3); +} .addTodo label { display: none; } .button-complete { - background: #fff; - border: 3px solid #e6e6e6; + background: #555; + border: 3px solid rgba(0,0,0,.3); border-radius: 6px; cursor: pointer; - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; + flex: 0 0 auto; height: 18px; margin: 4px 12px 0 0; - width: 18px; } + width: 18px; +} .button-edit { color: #888; font-size: 15px; margin-left: auto; position: relative; - top: 4px; } + top: 4px; +} .input { background: none; @@ -74,26 +81,28 @@ body { color: inherit; line-height: inherit; outline: none; - padding-left: 48px; } + padding-left: 48px; +} .notification { - background: #fff; - border: 1px solid #e6e6e6; + background: #555; + border: 1px solid transparent; border-radius: 6px; border-width: 1px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); - color: #555; - display: -webkit-box; - display: -ms-flexbox; + box-shadow: 0 1px 3px rgba(0,0,0,.06); display: flex; - padding: 15px; } + padding: 15px; +} .emoji { font-size: 45px; - margin-right: 12px; } + margin-right: 12px; +} .weight-strong { - font-weight: 500; } + font-weight: 500; +} .small { - font-size: 13px; } + font-size: 13px; +}