diff --git a/assets/style.css b/assets/style.css index cbfa3a7..b77d4bf 100644 --- a/assets/style.css +++ b/assets/style.css @@ -305,11 +305,15 @@ h1>input { bottom: 0; left: 0; + box-sizing: border-box; + + text-align: right; + box-shadow: 0px 5px 20px rgba(0,0,0, 0.2); background: var(--theme-main); color: var(--theme-text); - padding: 10px 20px; + padding: 10px 10px; transform: translate(0, 65px); transition: transform 100ms; @@ -321,13 +325,52 @@ h1>input { transition-timing-function: cubic-bezier(.17,.84,.44,1); } +.button { + box-shadow: 0px 2px 5px rgba(0,0,0, 0.2); + border-radius: 2px; + + display: inline-block; + width: 120px; + text-align: center; + border: none; + + cursor: pointer; + + font-family: -apple-system, BlinkMacSystemFont, + "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", + "Droid Sans", "Helvetica Neue", sans-serif; + font-size: 16px; + line-height: 20px; + + padding: 10px 0px; + margin-left: 10px; +} +.button:hover { + text-decoration: none; +} + +.button-cancel { + background: white; + color: var(--theme-main); +} +.button-cancel:hover { + background: #f0f0f0; +} + +.button-default { + background: var(--theme-main); + color: var(--theme-text); +} + @media (min-width: 630px) { .editor-controls { position: fixed; left: calc(50vw + 320px); - width: 120px; - top: calc(50vh - 40px); - height: 80px; + width: 160px; + top: calc(50vh - 65px); + height: 130px; + padding: 20px; transform: translate(20px, 0); opacity: 0; @@ -476,6 +519,11 @@ input[type="search"]::placeholder { .search.focus .live-results { max-height: 500px; } + + .button { + margin: 0; + margin-bottom: 10px; + } } .diff { diff --git a/templates/article.html b/templates/article.html index a1b050f..b511108 100644 --- a/templates/article.html +++ b/templates/article.html @@ -26,9 +26,9 @@