From 81cabf40f9063f72f04df9b720d7f0e25a185741 Mon Sep 17 00:00:00 2001 From: Connor Thomson Date: Sun, 20 Sep 2026 20:38:03 -0700 Subject: Style checkbox and more --- css/desktop/account-dropdown.css | 52 ++++++++++++++++++++++++++++++++++++++++ css/desktop/checkbox.css | 26 +++++++++++++++++++- css/desktop/dropdown.css | 52 ---------------------------------------- css/desktop/login.css | 4 ++-- html/account.html | 2 +- html/stylesheets.html | 2 +- 6 files changed, 81 insertions(+), 57 deletions(-) create mode 100755 css/desktop/account-dropdown.css delete mode 100755 css/desktop/dropdown.css diff --git a/css/desktop/account-dropdown.css b/css/desktop/account-dropdown.css new file mode 100755 index 0000000..f4d827f --- /dev/null +++ b/css/desktop/account-dropdown.css @@ -0,0 +1,52 @@ +/* + * GNUfault.org - GNUfault's website + * Copyright (C) 2026 Connor Thomson + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +.account-dropdown .toggle { + display: none; +} + +.account-dropdown .username { + margin: 3px; + cursor: pointer; +} + +.account-dropdown .username:hover { + text-decoration: underline; +} + +.account-dropdown .menu { + display: none; + position: absolute; + top: 100%; + right: 5px; + padding: 3px; + background-color: white; + border: 1px solid #98A5B0; + border-radius: 0 0 3px 3px; +} + +.account-dropdown .toggle:checked ~ .menu { + display: block; +} + +.account-dropdown .menu a { + display: block; + margin: 0; + padding: 1px 3px 1px 3px; + white-space: nowrap; +} 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/dropdown.css b/css/desktop/dropdown.css deleted file mode 100755 index 4b9f526..0000000 --- a/css/desktop/dropdown.css +++ /dev/null @@ -1,52 +0,0 @@ -/* - * GNUfault.org - GNUfault's website - * Copyright (C) 2026 Connor Thomson - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - */ - -.account .toggle { - display: none; -} - -.account .username { - margin: 3px; - cursor: pointer; -} - -.account .username:hover { - text-decoration: underline; -} - -.account .menu { - display: none; - position: absolute; - top: 100%; - right: 5px; - padding: 3px; - background-color: white; - border: 1px solid #98A5B0; - border-radius: 0 0 3px 3px; -} - -.account .toggle:checked ~ .menu { - display: block; -} - -.account .menu a { - display: block; - margin: 0; - padding: 1px 3px 1px 3px; - white-space: nowrap; -} 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 . --> -