diff --git a/webclient/src/Feed.js b/webclient/src/Feed.js index 4870eb9..94ffa47 100644 --- a/webclient/src/Feed.js +++ b/webclient/src/Feed.js @@ -123,7 +123,7 @@ function Feed({ updateCache }) {
- +
{error && diff --git a/webclient/src/Style-dark.css b/webclient/src/Style-dark.css index 40a4c3e..0ffaed8 100644 --- a/webclient/src/Style-dark.css +++ b/webclient/src/Style-dark.css @@ -62,3 +62,7 @@ .dark .comment.lined { border-left: 1px solid #444444; } + +.dark .checkbox:checked + label::after { + border-color: #ddd; +} diff --git a/webclient/src/Style-light.css b/webclient/src/Style-light.css index ae93b18..c93768d 100644 --- a/webclient/src/Style-light.css +++ b/webclient/src/Style-light.css @@ -312,5 +312,42 @@ button.comment { } .checkbox { - background: transparent; + -webkit-appearance: none; + appearance: none; + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; +} + +.checkbox + label { + position: relative; + cursor: pointer; + padding-left: 1.75rem; + user-select: none; +} + +.checkbox + label::before { + content: ''; + position: absolute; + left: 0; + top: 0.1em; + width: 1rem; + height: 1rem; + border: 1px solid #828282; + background-color: transparent; + border-radius: 3px; +} + +.checkbox:checked + label::after { + content: ""; + position: absolute; + left: 0.35rem; + top: 0.2em; + width: 0.3rem; + height: 0.6rem; + border: solid #000; + border-width: 0 2px 2px 0; + transform: rotate(45deg); }