fix: fix label styling

fix: handle primary color not being there
This commit is contained in:
Andy Burke 2025-09-16 20:11:42 -07:00
parent f03ca66a07
commit e1bb07a138
3 changed files with 9 additions and 9 deletions

View file

@ -216,7 +216,7 @@ form div {
margin-bottom: 1.5em;
}
form label {
form label.placeholder {
position: absolute;
top: 0;
font-size: large;
@ -230,8 +230,8 @@ form label {
font-size 0.2s ease-in-out;
}
form input:focus ~ label,
form input:valid ~ label {
form input:focus ~ label.placeholder,
form input:valid ~ label.placeholder {
top: -1.6rem;
font-size: small;
border: 1px solid rgba(128, 128, 128, 0.2);

View file

@ -199,7 +199,7 @@
user_bound_element[target] = value ?? default_value;
}
const primary_color_setting = user.meta.primary_color;
const primary_color_setting = user?.meta?.primary_color;
if (primary_color_setting) {
const root = document.querySelector(":root");
root.style.setProperty("--base-color", primary_color_setting);
@ -376,7 +376,7 @@
data-user-field-target="value"
data-user-field-default=""
/>
<label for="user-color-setting-primary">Primary Color</label>
<label class="placeholder" for="user-color-setting-primary">Primary Color</label>
</div>
</details>
</form>

View file

@ -67,11 +67,11 @@
</script>
<div>
<input id="login-username" type="text" name="username" required />
<label for="login-username">username</label>
<label class="placeholder" for="login-username">username</label>
</div>
<div>
<input id="login-password" type="password" name="password" required />
<label for="login-password">password</label>
<label class="placeholder" for="login-password">password</label>
</div>
<div>
<button id="login-submit" type="submit" class="primary">Log In</button>
@ -107,11 +107,11 @@
</script>
<div>
<input id="signup-username" type="text" name="username" required />
<label for="signup-username">username</label>
<label class="placeholder" for="signup-username">username</label>
</div>
<div>
<input id="signup-password" type="password" name="password" required />
<label for="signup-password">password</label>
<label class="placeholder" for="signup-password">password</label>
</div>
<button id="signup-submit" type="submit" class="primary">Sign Up</button>
</form>