nitrix/fete
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Projects Releases 13 Wiki Activity

Apply glass utility class to form fields and buttons

Browse Source 
Use .glass class on form fields and buttons on gradient backgrounds.
Buttons get gradient glow border via background-clip trick. Solid
white fallback preserved for BottomSheet context.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
nitrix
2026-03-09 18:47:57 +01:00
parent 019ead7be3
commit 64816558c1
3 changed files with 31 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/assets/main.css
View File

@@ -117,21 +117,24 @@ body::before {
/* Card-style form fields */
.form-field {
background: var(--color-card);
border: none;
border: 1px solid #e0e0e0;
border-radius: var(--radius-card);
padding: var(--spacing-md) var(--spacing-md);
box-shadow: var(--shadow-card);
width: 100%;
font-family: inherit;
font-size: 0.95rem;
font-weight: 400;
color: var(--color-text);
outline: none;
transition: box-shadow 0.2s ease;
transition: border-color 0.2s ease;
}
.form-field.glass {
color: var(--color-text-on-gradient);
}
.form-field:focus {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
border-color: var(--color-glass-border-hover);
}
.form-field::placeholder {
@@ -139,6 +142,10 @@ body::before {
font-weight: 400;
}
.form-field.glass::placeholder {
color: var(--color-text-muted);
}
textarea.form-field {
resize: vertical;
min-height: 5rem;
@@ -163,22 +170,29 @@ textarea.form-field {
display: block;
width: 100%;
padding: var(--spacing-md) var(--spacing-lg);
background: var(--color-accent);
background: var(--color-card);
color: var(--color-text);
border: none;
border: 1px solid #e0e0e0;
border-radius: var(--radius-button);
font-family: inherit;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
box-shadow: var(--shadow-button);
transition: opacity 0.2s ease, transform 0.1s ease;
transition: border-color 0.2s ease, transform 0.1s ease;
text-align: center;
text-decoration: none;
}
.btn-primary.glass {
color: var(--color-text-on-gradient);
border: 2px solid transparent;
background:
linear-gradient(var(--color-glass-inner), var(--color-glass-inner)) padding-box,
var(--gradient-glow) border-box;
}
.btn-primary:hover {
opacity: 0.92;
border-color: var(--color-glass-border-hover);
}
.btn-primary:active {
@@ -222,7 +236,7 @@ textarea.form-field {
-webkit-backdrop-filter: blur(16px);
}
.glass:hover {
.glass:hover:not(input):not(textarea):not(.btn-primary) {
background: var(--color-glass-hover);
border-color: var(--color-glass-border-hover);
}