Querulantenkind/obsidian-formfire
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add styles for slider and color picker fields

Browse source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Luca Oelfke 2026-02-13 14:58:37 +01:00
parent ca3fd5c9b7
commit 8e5116befc
1 changed files with 91 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
styles.css
View file

@ -301,6 +301,97 @@
}
/* ==========================================================================
Slider
========================================================================== */
.ff-slider-wrapper {
display: flex;
align-items: center;
gap: 12px;
}
.ff-slider {
flex: 1;
height: 6px;
-webkit-appearance: none;
appearance: none;
background: var(--background-modifier-border);
border-radius: 3px;
outline: none;
cursor: pointer;
}
.ff-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--interactive-accent);
cursor: pointer;
transition: box-shadow 0.15s ease;
}
.ff-slider::-webkit-slider-thumb:hover {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--interactive-accent) 20%, transparent);
}
.ff-slider::-moz-range-thumb {
width: 18px;
height: 18px;
border: none;
border-radius: 50%;
background: var(--interactive-accent);
cursor: pointer;
}
.ff-slider-value {
min-width: 36px;
text-align: right;
font-size: 0.85rem;
font-weight: 500;
color: var(--text-normal);
font-variant-numeric: tabular-nums;
}
/* ==========================================================================
Color Picker
========================================================================== */
.ff-color-wrapper {
display: flex;
align-items: center;
gap: 10px;
}
.ff-color-input {
width: 40px;
height: 32px;
padding: 2px;
border: 1px solid var(--background-modifier-border);
border-radius: 4px;
background: var(--background-primary);
cursor: pointer;
}
.ff-color-input::-webkit-color-swatch-wrapper {
padding: 2px;
}
.ff-color-input::-webkit-color-swatch {
border: none;
border-radius: 2px;
}
.ff-color-hex {
font-size: 0.85rem;
font-family: var(--font-monospace);
color: var(--text-muted);
letter-spacing: 0.03em;
}
/* ==========================================================================
Form Modal
========================================================================== */