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

12
frontend/src/views/EventCreateView.vue
View File

@@ -12,7 +12,7 @@
id="title"
v-model="form.title"
type="text"
class="form-field"
class="form-field glass"
required
maxlength="200"
placeholder="What's the event?"
@@ -27,7 +27,7 @@
<textarea
id="description"
v-model="form.description"
class="form-field"
class="form-field glass"
maxlength="2000"
placeholder="Tell people more about it…"
:aria-invalid="!!errors.description"
@@ -42,7 +42,7 @@
id="dateTime"
v-model="form.dateTime"
type="datetime-local"
class="form-field"
class="form-field glass"
required
:aria-invalid="!!errors.dateTime"
:aria-describedby="errors.dateTime ? 'dateTime-error' : undefined"
@@ -56,7 +56,7 @@
id="location"
v-model="form.location"
type="text"
class="form-field"
class="form-field glass"
maxlength="500"
placeholder="Where is it?"
:aria-invalid="!!errors.location"
@@ -71,7 +71,7 @@
id="expiryDate"
v-model="form.expiryDate"
type="date"
class="form-field"
class="form-field glass"
required
:min="tomorrow"
:aria-invalid="!!errors.expiryDate"
@@ -80,7 +80,7 @@
<span v-if="errors.expiryDate" id="expiryDate-error" class="field-error" role="alert">{{ errors.expiryDate }}</span>
</div>
<button type="submit" class="btn-primary" :disabled="submitting">
<button type="submit" class="btn-primary glass" :disabled="submitting">
{{ submitting ? 'Creating…' : 'Create Event' }}
</button>