From 5efc6a557de193bdcac75144b3f768c3b58900d0 Mon Sep 17 00:00:00 2001
From: tolvitty <oelfkeluca12@proton.me>
Date: Fri, 13 Feb 2026 20:42:48 +0100
Subject: [PATCH] feat: add styles for conditional logic editor and preview
 badges

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 styles.css | 146 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 146 insertions(+)

diff --git a/styles.css b/styles.css
index eb4570c..fea725c 100644
--- a/styles.css
+++ b/styles.css
@@ -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;
+}