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

feat: add styles for conditional logic editor and preview badges

Browse source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Luca Oelfke 2026-02-13 20:42:48 +01:00
parent 6e78497cbb
commit 5efc6a557d
1 changed files with 146 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

146
styles.css
View file

@ -836,3 +836,149 @@
.ff-field-control .checkbox-container {
flex-shrink: 0;
}
/* ==========================================================================
Conditional Logic
========================================================================== */
/* --- Conditions editor in builder --- */
.ff-builder-conditions {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed var(--background-modifier-border);
}
.ff-builder-conditions-empty {
font-size: 0.8rem;
color: var(--text-faint);
font-style: italic;
padding: 4px 0;
}
.ff-builder-conditions-header {
margin-bottom: 6px;
}
.ff-builder-conditions-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border: 1px solid var(--background-modifier-border);
border-radius: 4px;
background: transparent;
color: var(--text-muted);
font-size: 0.8rem;
cursor: pointer;
transition: all 0.15s ease;
}
.ff-builder-conditions-toggle:hover {
border-color: var(--interactive-accent);
color: var(--text-normal);
}
.ff-builder-conditions-toggle.ff-has-conditions {
border-color: var(--interactive-accent);
color: var(--interactive-accent);
background: color-mix(in srgb, var(--interactive-accent) 8%, transparent);
}
.ff-builder-conditions-toggle.ff-conditions-open {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.ff-builder-conditions-body {
padding: 8px;
border: 1px solid var(--background-modifier-border);
border-top: none;
border-radius: 0 0 4px 4px;
background: color-mix(in srgb, var(--background-primary) 50%, var(--background-secondary));
}
/* --- Rule rows --- */
.ff-builder-rules {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 8px;
}
.ff-builder-rule {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.ff-rule-field {
flex: 1 1 120px;
min-width: 100px;
}
.ff-rule-operator {
flex: 1 1 130px;
min-width: 110px;
}
.ff-rule-value {
flex: 1 1 100px;
min-width: 80px;
}
.ff-rule-delete {
flex-shrink: 0;
}
.ff-builder-add-rule-btn {
display: block;
width: 100%;
padding: 6px;
border: 1px dashed var(--background-modifier-border);
border-radius: 4px;
background: transparent;
color: var(--text-muted);
font-size: 0.8rem;
cursor: pointer;
text-align: center;
transition: all 0.15s ease;
}
.ff-builder-add-rule-btn:hover {
border-color: var(--interactive-accent);
color: var(--interactive-accent);
}
/* --- Conditional badge in preview --- */
.ff-preview-field-wrapper {
position: relative;
}
.ff-preview-conditional {
opacity: 0.5;
transition: opacity 0.2s ease;
}
.ff-preview-conditional:hover {
opacity: 0.8;
}
.ff-preview-conditional-badge {
font-size: 0.7rem;
color: var(--interactive-accent);
font-weight: 600;
letter-spacing: 0.02em;
margin-bottom: 2px;
}
/* --- Show/hide transition in form modal --- */
.ff-field-wrapper {
transition: opacity 0.2s ease, max-height 0.2s ease;
overflow: hidden;
}