Style checkbox and more

5 files changed, 35 insertions, 11 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;
 }
diff --git a/html/account.html b/html/account.html
index 251d33e..0a4da65 100755
--- a/html/account.html
+++ b/html/account.html
@@ -16,7 +16,7 @@
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
 -->
 
-<div class="account">
+<div class="account-dropdown">
     <input class="toggle" type="checkbox" id="account">
     <label class="username" for="account">{{username}}</label>
     <div class="menu">
diff --git a/html/stylesheets.html b/html/stylesheets.html
index 8c97095..4727f0f 100755
--- a/html/stylesheets.html
+++ b/html/stylesheets.html
@@ -26,4 +26,4 @@
 <link rel="stylesheet" href="/css/{{device}}/input.css">
 <link rel="stylesheet" href="/css/{{device}}/login.css">
 <link rel="stylesheet" href="/css/{{device}}/navbar.css">
-<link rel="stylesheet" href="/css/{{device}}/dropdown.css">
+<link rel="stylesheet" href="/css/{{device}}/account-dropdown.css">