Style checkbox and more

3 files changed, 33 insertions, 9 deletions

diff --git a/css/desktop/dropdown.css b/css/desktop/account-dropdown.css
index 4b9f526..f4d827f 100755
--- a/css/desktop/dropdown.css
+++ b/css/desktop/account-dropdown.css
@@ -16,20 +16,20 @@
  *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-.account .toggle {
+.account-dropdown .toggle {
     display: none;
 }
 
-.account .username {
+.account-dropdown .username {
     margin: 3px;
     cursor: pointer;
 }
 
-.account .username:hover {
+.account-dropdown .username:hover {
     text-decoration: underline;
 }
 
-.account .menu {
+.account-dropdown .menu {
     display: none;
     position: absolute;
     top: 100%;
@@ -40,11 +40,11 @@
     border-radius: 0 0 3px 3px;
 }
 
-.account .toggle:checked ~ .menu {
+.account-dropdown .toggle:checked ~ .menu {
     display: block;
 }
 
-.account .menu a {
+.account-dropdown .menu a {
     display: block;
     margin: 0;
     padding: 1px 3px 1px 3px;
diff --git a/css/desktop/checkbox.css b/css/desktop/checkbox.css
index 5de1d8c..5ad0cbb 100755
--- a/css/desktop/checkbox.css
+++ b/css/desktop/checkbox.css
@@ -17,6 +17,30 @@
  */
 
 .checkbox {
+    appearance: none;
+    -webkit-appearance: none;
     margin: 0;
-    accent-color: #12A3EB;
+    padding: 0;
+    width: 14px;
+    height: 14px;
+    font-size: 12px;
+    line-height: 12px;
+    text-align: center;
+    color: white;
+    background-color: white;
+    border: 1px solid #98A5B0;
+    border-radius: 3px;
+}
+
+.checkbox:focus {
+    outline: none;
+    border: 1px solid #98A5B0;
+}
+
+.checkbox:checked {
+    background-color: #12A3EB;
+}
+
+.checkbox:checked::before {
+    content: "\2713";
 }
diff --git a/css/desktop/login.css b/css/desktop/login.css
index 46eda9e..0d63aa4 100755
--- a/css/desktop/login.css
+++ b/css/desktop/login.css
@@ -33,7 +33,7 @@
     text-align: right;
 }
 
-.login .group input {
+.login .group .input {
     grid-column: 2;
     width: 100%;
 }
@@ -44,6 +44,6 @@
 }
 
 .login .group .checkbox {
-    width: auto;
+    grid-column: 2;
     justify-self: start;
 }