snapshot: preserve dynamic form builder parity and presets
This commit is contained in:
Md Bayazid Bostame
@@ -1,72 +1,98 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background: #f4f7fb;
|
||||
color: #1f2937;
|
||||
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(0, 120, 255, 0.08), transparent 28%),
|
||||
linear-gradient(180deg, #eef4fb 0%, #f7f9fc 100%);
|
||||
color: #142033;
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(1280px, 94%);
|
||||
margin: 20px auto 28px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d8e2f0;
|
||||
border-radius: 14px;
|
||||
padding: 18px;
|
||||
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
|
||||
width: min(1320px, 94%);
|
||||
margin: 20px auto 32px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border: 1px solid rgba(191, 204, 222, 0.8);
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.topbar {
|
||||
.builder-hero,
|
||||
.builder-panel,
|
||||
.builder-stat-card,
|
||||
.section-rule-card,
|
||||
.field-card,
|
||||
.options-panel {
|
||||
animation: builderFadeIn 0.32s ease;
|
||||
}
|
||||
|
||||
.builder-hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
gap: 20px;
|
||||
padding: 8px 0 6px;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 190px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
.builder-hero-copy {
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
margin: 6px 0 0;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
margin-top: 14px;
|
||||
display: flex;
|
||||
.builder-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
padding: 6px 11px;
|
||||
border-radius: 999px;
|
||||
background: #e9f2ff;
|
||||
color: #174ea6;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.builder-hero h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(30px, 4vw, 40px);
|
||||
line-height: 1.02;
|
||||
}
|
||||
|
||||
.builder-hero-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.tab {
|
||||
border: 1px solid #cbd5e1;
|
||||
border: 1px solid #c6d1e1;
|
||||
border-radius: 999px;
|
||||
padding: 8px 14px;
|
||||
padding: 9px 15px;
|
||||
text-decoration: none;
|
||||
color: #1f2937;
|
||||
background: #f8fafc;
|
||||
font-weight: 600;
|
||||
color: #1c2a41;
|
||||
background: #f8fbff;
|
||||
font-weight: 700;
|
||||
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: #9db4d2;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background: #000078;
|
||||
background: linear-gradient(135deg, #0f3b7a 0%, #1759b8 100%);
|
||||
color: #ffffff;
|
||||
border-color: #000078;
|
||||
border-color: #1759b8;
|
||||
}
|
||||
|
||||
.status {
|
||||
min-height: 22px;
|
||||
margin: 10px 0 8px;
|
||||
margin: 14px 0 10px;
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -83,11 +109,401 @@ body {
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.builder-overview {
|
||||
margin-top: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.builder-stat-card,
|
||||
.builder-panel,
|
||||
.options-panel {
|
||||
border: 1px solid rgba(201, 212, 226, 0.95);
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.98));
|
||||
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
|
||||
}
|
||||
|
||||
.builder-stat-card {
|
||||
padding: 14px 16px;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.builder-stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(146, 170, 199, 0.95);
|
||||
box-shadow: 0 16px 28px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.builder-stat-label {
|
||||
display: block;
|
||||
color: #65758f;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.builder-stat-card strong {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
color: #101c30;
|
||||
}
|
||||
|
||||
.builder-panel-head h2,
|
||||
.options-head h2 {
|
||||
margin: 0;
|
||||
color: #142033;
|
||||
}
|
||||
|
||||
.mini {
|
||||
color: #61718a;
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.builder-quicknav {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.builder-quicknav a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 34px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #d1dbea;
|
||||
border-radius: 999px;
|
||||
background: #f7fbff;
|
||||
color: #304159;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.builder-quicknav a:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: #adc2dd;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.builder-preset-bar {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.builder-preset-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.builder-preset-label {
|
||||
color: #61718a;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.builder-preset-form select {
|
||||
min-height: 36px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid #cfdbeb;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, #ffffff, #f6faff);
|
||||
color: #24405f;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.builder-panel {
|
||||
margin-top: 14px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.builder-panel-head,
|
||||
.options-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.options-head-inline {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.builder-accordion {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nested-accordion {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nested-accordion-summary {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
padding: 14px 16px;
|
||||
transition: background-color 0.18s ease;
|
||||
}
|
||||
|
||||
.nested-accordion-summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nested-accordion-summary .options-head {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nested-accordion-summary:hover {
|
||||
background: rgba(242, 247, 255, 0.72);
|
||||
}
|
||||
|
||||
.nested-accordion[open] .nested-accordion-summary {
|
||||
border-bottom: 1px solid rgba(201, 212, 226, 0.8);
|
||||
}
|
||||
|
||||
.nested-accordion:not([open]) .builder-panel-toggle::after {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.nested-accordion[open] .builder-panel-toggle {
|
||||
color: #194ea7;
|
||||
}
|
||||
|
||||
.nested-accordion-body {
|
||||
padding: 14px 16px 16px;
|
||||
}
|
||||
|
||||
.nested-accordion[open] .nested-accordion-body {
|
||||
animation: builderReveal 0.24s ease;
|
||||
}
|
||||
|
||||
.builder-panel-summary {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
padding: 14px 16px;
|
||||
transition: background-color 0.18s ease;
|
||||
}
|
||||
|
||||
.builder-panel-summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.builder-panel-summary .builder-panel-head {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.builder-panel-summary:hover {
|
||||
background: rgba(242, 247, 255, 0.72);
|
||||
}
|
||||
|
||||
.builder-panel-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #5f7089;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.builder-panel-toggle::after {
|
||||
content: "▾";
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
transition: transform 0.18s ease;
|
||||
}
|
||||
|
||||
.builder-accordion:not([open]) .builder-panel-toggle::after {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.builder-accordion[open] .builder-panel-toggle {
|
||||
color: #194ea7;
|
||||
}
|
||||
|
||||
.builder-accordion[open] .builder-panel-toggle::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.builder-accordion[open] .builder-panel-summary {
|
||||
border-bottom: 1px solid rgba(201, 212, 226, 0.8);
|
||||
}
|
||||
|
||||
.builder-panel-body {
|
||||
padding: 14px 16px 16px;
|
||||
}
|
||||
|
||||
.builder-accordion[open] .builder-panel-body {
|
||||
animation: builderReveal 0.24s ease;
|
||||
}
|
||||
|
||||
.builder-rule-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.builder-stack-layout {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.preview-shell {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.preview-section {
|
||||
border: 1px solid #d7e0ec;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.preview-section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid #dfe7f1;
|
||||
background: #f2f7ff;
|
||||
}
|
||||
|
||||
.preview-section-head h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
color: #142033;
|
||||
}
|
||||
|
||||
.preview-chip-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.preview-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #d8e1ec;
|
||||
border-radius: 999px;
|
||||
background: #ffffff;
|
||||
color: #304159;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.preview-chip.is-locked {
|
||||
background: #eef2ff;
|
||||
border-color: #c7d2fe;
|
||||
color: #3730a3;
|
||||
}
|
||||
|
||||
.field-rule-groups {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.field-rule-group {
|
||||
border: 1px solid #d7e0ec;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.field-rule-group:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: #bfd0e4;
|
||||
box-shadow: 0 14px 26px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.field-rule-group-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid #dfe7f1;
|
||||
background: #f2f7ff;
|
||||
}
|
||||
|
||||
.field-rule-group-head h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
color: #142033;
|
||||
}
|
||||
|
||||
.field-rule-list {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.field-rule-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 1.4fr) 120px 160px 120px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 12px 14px;
|
||||
border-top: 1px solid #edf2f7;
|
||||
transition: background-color 0.18s ease;
|
||||
}
|
||||
|
||||
.field-rule-row:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.field-rule-row:hover {
|
||||
background: rgba(246, 250, 255, 0.92);
|
||||
}
|
||||
|
||||
.field-rule-main strong {
|
||||
display: block;
|
||||
color: #162133;
|
||||
}
|
||||
|
||||
.field-rule-control {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
color: #5f7089;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.field-rule-control input[type='checkbox'] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.field-rule-status {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.columns {
|
||||
margin-top: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(220px, 1fr));
|
||||
gap: 10px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.columns.single {
|
||||
@@ -95,28 +511,47 @@ body {
|
||||
}
|
||||
|
||||
.column {
|
||||
border: 1px solid #d4dce7;
|
||||
border-radius: 12px;
|
||||
background: #f9fbff;
|
||||
border: 1px solid #d7e0ec;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(180deg, #f7faff 0%, #fdfefe 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 460px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.column h2 {
|
||||
.column:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: #bfd0e4;
|
||||
box-shadow: 0 16px 28px rgba(15, 23, 42, 0.07);
|
||||
}
|
||||
|
||||
.column-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 13px 14px;
|
||||
border-bottom: 1px solid #deE7f1;
|
||||
background: linear-gradient(180deg, #eef5ff, #f7fbff);
|
||||
}
|
||||
|
||||
.column-head h3 {
|
||||
margin: 0;
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid #dbe3ee;
|
||||
font-size: 16px;
|
||||
color: #0f172a;
|
||||
background: #edf3fb;
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
|
||||
.column-count {
|
||||
color: #5c6d87;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
padding: 10px;
|
||||
padding: 12px;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
align-content: start;
|
||||
min-height: 140px;
|
||||
flex: 1;
|
||||
@@ -127,14 +562,22 @@ body {
|
||||
}
|
||||
|
||||
.field-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #d3dbe8;
|
||||
border-radius: 10px;
|
||||
padding: 9px 10px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border: 1px solid #d7dfeb;
|
||||
border-radius: 14px;
|
||||
padding: 11px 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
cursor: move;
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
|
||||
.field-card:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: #b9cadf;
|
||||
box-shadow: 0 12px 20px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.field-card.dragging {
|
||||
@@ -145,13 +588,20 @@ body {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: #0f172a;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.field-name {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
margin-top: 2px;
|
||||
margin-top: 3px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.field-main {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.badges {
|
||||
@@ -159,13 +609,15 @@ body {
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 11px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #d1d5db;
|
||||
padding: 2px 7px;
|
||||
padding: 3px 8px;
|
||||
background: #f8fafc;
|
||||
color: #334155;
|
||||
}
|
||||
@@ -189,24 +641,7 @@ body {
|
||||
}
|
||||
|
||||
.options-panel {
|
||||
margin-top: 16px;
|
||||
border: 1px solid #d4dce7;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.options-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.options-head h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.category-switch {
|
||||
@@ -215,23 +650,22 @@ body {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.category-switch select {
|
||||
.category-switch select,
|
||||
.option-table select,
|
||||
.add-option-form input,
|
||||
.option-table input[type='text'] {
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 8px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 10px;
|
||||
padding: 8px 10px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.add-option-form {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.add-option-form input {
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 8px;
|
||||
padding: 8px 9px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.option-table-wrap {
|
||||
@@ -246,21 +680,22 @@ body {
|
||||
.option-table th,
|
||||
.option-table td {
|
||||
border: 1px solid #e2e8f0;
|
||||
padding: 7px 8px;
|
||||
padding: 8px 9px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.option-table th {
|
||||
background: #f8fafc;
|
||||
background: #f8fbff;
|
||||
color: #3d4c63;
|
||||
}
|
||||
|
||||
.option-table input[type='text'] {
|
||||
width: 100%;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 7px;
|
||||
padding: 6px 8px;
|
||||
box-sizing: border-box;
|
||||
.option-table-group-row th {
|
||||
background: #eef5ff;
|
||||
color: #17335e;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.option-row {
|
||||
@@ -279,7 +714,7 @@ body {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
color: #475569;
|
||||
font-size: 14px;
|
||||
@@ -288,28 +723,146 @@ body {
|
||||
}
|
||||
|
||||
.options-actions {
|
||||
margin-top: 10px;
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
.section-rule-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.section-rule-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 13px 14px;
|
||||
border: 1px solid #d6e0ec;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(180deg, #f9fbff, #ffffff);
|
||||
}
|
||||
|
||||
.section-rule-card.is-locked {
|
||||
background: linear-gradient(180deg, #f4f7fb, #fafcff);
|
||||
}
|
||||
|
||||
.section-rule-copy {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.section-rule-copy strong {
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.section-rule-copy span,
|
||||
.mini {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.section-rule-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@keyframes builderFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes builderReveal {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.builder-hero,
|
||||
.builder-panel,
|
||||
.builder-stat-card,
|
||||
.section-rule-card,
|
||||
.field-card,
|
||||
.options-panel {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.field-card,
|
||||
.tab,
|
||||
.builder-stat-card,
|
||||
.builder-quicknav a,
|
||||
.builder-panel-summary,
|
||||
.field-rule-group,
|
||||
.field-rule-row,
|
||||
.column {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.builder-accordion[open] .builder-panel-body {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1220px) {
|
||||
.builder-overview {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.builder-rule-layout,
|
||||
.columns {
|
||||
grid-template-columns: repeat(2, minmax(220px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.builder-hero,
|
||||
.builder-panel-head,
|
||||
.options-head {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.builder-hero-actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.builder-rule-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.builder-overview,
|
||||
.columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.field-rule-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.field-rule-status {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.add-option-form {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.options-head {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@ body {
|
||||
.card { background: linear-gradient(180deg, #ffffff, #fbfcff); border: 1px solid #d9dcf3; border-radius: 14px; padding: 18px; margin-bottom: 14px; box-shadow: 0 10px 24px rgba(0, 0, 120, 0.08); }
|
||||
.wrap-body .card:last-child { margin-bottom: 0; }
|
||||
h1 { margin-top: 0; color: #000078; }
|
||||
h2 { margin: 0; color: #17335e; font-size: 18px; }
|
||||
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
.field { margin-bottom: 12px; }
|
||||
.field-full { grid-column: 1 / -1; }
|
||||
@@ -21,6 +22,11 @@ label { display: block; font-weight: 600; margin-bottom: 6px; }
|
||||
input, textarea { width: 100%; min-height: 44px; padding: 9px 11px; box-sizing: border-box; border: 1px solid #d4dbf7; border-radius: 10px; background: #fff; }
|
||||
textarea { min-height: 120px; resize: vertical; }
|
||||
.hint { color: #64748b; font-size: 12px; margin-top: 4px; }
|
||||
.offboarding-sections { display: grid; gap: 14px; margin-bottom: 14px; }
|
||||
.offboarding-section-card { border: 1px solid #dbe5f1; border-radius: 14px; background: linear-gradient(180deg, #f9fbff, #ffffff); overflow: hidden; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05); }
|
||||
.offboarding-section-head { padding: 14px 16px; border-bottom: 1px solid #e2e8f4; background: #f2f7ff; }
|
||||
.offboarding-section-head p { margin: 4px 0 0; color: #5f7089; font-size: 13px; }
|
||||
.offboarding-section-card .grid { padding: 16px; }
|
||||
.results a { display: inline-block; margin: 4px 8px 4px 0; padding: 6px 8px; border: 1px solid #d4dbf7; border-radius: 6px; text-decoration: none; color: #000078; background: #f7f8ff; }
|
||||
.errorlist { color: #b91c1c; margin: 4px 0; }
|
||||
.popup-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.38); display: none; align-items: center; justify-content: center; z-index: 1000; }
|
||||
|
||||
Reference in New Issue
Block a user