/* OneSync — style2.css: Modern enterprise form components Scope: wrap target area with
to activate. All component classes are scoped under .s2 to avoid Bootstrap conflicts. CSS design tokens live in :root (no conflict with Bootstrap's --bs-* namespace). */ /* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=IBM+Plex+Sans+Thai:wght@400;500;600&display=swap"); */ /* ===== Design Tokens ===== */ :root { --ink: oklch(22% 0.02 240); --ink-2: oklch(40% 0.02 240); --ink-3: oklch(55% 0.02 240); --ink-4: oklch(70% 0.01 240); --line: oklch(92% 0.005 240); --line-strong: oklch(85% 0.008 240); /* ค่านี้ตรงกับสีที่ .card-head ใช้จริงมาก่อน (#fafaf9) — ตั้งให้ตรงกันเพื่อให้ โหมด light หน้าตาไม่เปลี่ยนหลังเปลี่ยนมาใช้ token */ --cardheader: #fafaf9; --cardheader-2: oklch(97.186% 0.01181 240.188); /* --cardheader: #ffffff; --cardheader-2: oklch(98% 0.005 240); */ --surface: #ffffff; --surface-2: oklch(98% 0.005 240); --surface-3: oklch(96% 0.005 240); --accent: oklch(62% 0.11 210); /* --secondary: #c9c9df; */ --secondary: #c8c8ff; --accent-strong: oklch(54% 0.12 215); --accent-soft: oklch(95% 0.03 210); --accent-ink: oklch(32% 0.08 220); --bg-tint: oklch(98.5% 0.008 220); /* --brand-gradient: linear-gradient( 135deg, oklch(62% 0.11 210), oklch(48.788% 0.10283 234.52) ); */ --brand-gradient: linear-gradient( 135deg, oklch(68.014% 0.12438 228.937), oklch(57.81% 0.13865 246.211) ); --ok: oklch(58% 0.14 150); --warn: oklch(68% 0.16 65); --danger: oklch(58% 0.2 25); --info: oklch(60% 0.13 240); --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.04); --shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.05), 0 16px 40px rgba(15, 23, 42, 0.08); --row-h: 40px; /* token ที่เดิมถูกใช้แบบ fallback ในไฟล์นี้ (var(--label, #344054) ฯลฯ) แต่ไม่เคยถูกประกาศจริง — ประกาศไว้ที่นี่เพื่อให้สลับธีมได้ */ --label: oklch(35% 0.03 250); --link: #1d4ed8; --card-accent: oklch(85% 0.008 240); } /* ===== Dark theme tokens ===== สลับด้วย (ตั้งค่าโดยสคริปต์กัน flash ใน _Layout.cshtml) token ที่เป็นสีแบรนด์/สถานะ (--accent, --ok, --warn, --danger, --info, --brand-gradient) จงใจไม่ override เพราะใช้ร่วมกันได้ทั้งสองธีม */ [data-theme="dark"] { --ink: oklch(93% 0.01 240); --ink-2: oklch(80% 0.015 240); --ink-3: oklch(65% 0.015 240); --ink-4: oklch(50% 0.01 240); --line: oklch(30% 0.01 240); --line-strong: oklch(38% 0.012 240); --cardheader: oklch(23% 0.014 240); --cardheader-2: oklch(26% 0.012 240); --surface: oklch(20% 0.012 240); --surface-2: oklch(24% 0.012 240); --surface-3: oklch(28% 0.012 240); --accent-soft: oklch(30% 0.04 210); --accent-ink: oklch(85% 0.06 220); --bg-tint: oklch(18% 0.01 220); --label: oklch(78% 0.02 250); --link: oklch(75% 0.13 255); --card-accent: oklch(38% 0.012 240); /* เงาบนพื้นมืดต้องเข้มกว่าเดิมมาก ไม่งั้นมองไม่เห็นเลย */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.35); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.5); } .fld-input.datepicker { max-width: 170px; } .s2 .total-amount-label { font-size: 1.15rem !important; color: var(--link) !important; letter-spacing: 0.02em !important; } .s2 .total-amount-box { font-size: 1.5rem !important; font-weight: 600 !important; color: var(--link) !important; text-align: right !important; padding-right: 0.5rem !important; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.18) !important; letter-spacing: 0.02em !important; } .s2 .total-amount-box:focus { outline: none !important; /* box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3) !important; */ } /* ===== Product Summary Section (ราคารวม / ส่วนลด / VAT / ราคารวม VAT) ===== */ .s2 .product-summary-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; } .s2 .product-summary-table td { vertical-align: middle; padding: 0; } .s2 .product-summary-table td.label { text-align: right; padding-right: 12px; font-weight: 500; color: var(--label); white-space: nowrap; width: 1%; } .s2 .product-summary-table td.value .fld-input { margin: 0; } .s2 .product-summary-table td.value input.mono { text-align: right; padding-right: 0.5rem; } .s2 .product-summary-table tr.summary-grand td.label, .s2 .product-summary-table tr.summary-grand td.value input.mono { font-weight: 600; color: var(--link); } .s2 .product-summary-table tr.summary-grand td.value input.mono { font-size: 1.1rem; } /* ===== Base ===== */ .s2 *, .s2 *::before, .s2 *::after { box-sizing: border-box; } .s2 { font-family: "Inter", /* "IBM Plex Sans Thai", */ "Sarabun", -apple-system, "Segoe UI", sans-serif; font-feature-settings: "cv11", "ss01"; color: var(--ink); -webkit-font-smoothing: antialiased; padding-bottom: 48px; } .s2 .mono { /* font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; */ /* font-feature-settings: "zero"; */ /* letter-spacing: -0.01em; */ font-family: "Inter", /* "IBM Plex Sans Thai", */ "Sarabun", -apple-system, "Segoe UI", sans-serif; } /* ===== Form Container ===== */ .s2 .co-form { display: flex; flex-direction: column; gap: 20px; } /* ===== Page Header ===== */ .s2 .co-page-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 8px 2px 14px; gap: 20px; flex-wrap: wrap; } .s2 .co-page-head-left { display: flex; gap: 14px; align-items: center; } .s2 .co-page-icon { width: 52px; height: 52px; border-radius: 12px; background: var(--brand-gradient); color: white; display: grid; place-items: center; box-shadow: var(--shadow); flex-shrink: 0; } .s2 .co-eyebrow { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 500; } .s2 .co-page-head-left h1 { margin: 3px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); } .s2 .co-page-head-right { display: flex; align-items: center; gap: 12px; } .s2 .co-sep { width: 1px; height: 18px; background: var(--line-strong); flex-shrink: 0; } .s2 .co-meta { font-size: 14px; color: var(--ink-2); /* font-family: "JetBrains Mono", monospace; */ font-family: "Inter", /* "IBM Plex Sans Thai", */ "Sarabun", "Segoe UI", sans-serif; font-feature-settings: "cv11", "ss01"; } /* ===== Cards ===== */ .s2 .card { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-lg) !important; overflow: visible !important; box-shadow: var(--shadow-xs) !important; } .s2 .card-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line); /* background: linear-gradient(180deg, var(--cardheader), var(--cardheader-2)); */ background: var(--cardheader); /* border-radius: var(--radius-lg) var(--radius-lg) 0 0; */ border-radius: 12px 12px 0 0; } .s2 .card-head-left { display: flex; gap: 12px; align-items: center; } .s2 .card-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; flex-shrink: 0; } .s2 .card-head h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .s2 .card-head p { margin: 2px 0 0; font-size: 14px; color: var(--ink-3); } .s2 .card-actions { display: flex; gap: 8px; } .s2 .card-body { padding: 20px 22px 22px !important; display: flex !important; flex-direction: column !important; gap: 16px !important; background: var(--surface); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* ===== Grids ===== */ .s2 .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .s2 .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .s2 .grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; } .s2 .col-span-2 { grid-column: span 2; } /* Optional: For larger grids (e.g., 12-column), you can define more span classes */ .s2 .grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; } .s2 .grid-12 .col-span-1 { grid-column: span 1; } .s2 .grid-12 .col-span-2 { grid-column: span 2; } .s2 .grid-12 .col-span-3 { grid-column: span 3; } .s2 .grid-12 .col-span-4 { grid-column: span 4; } .s2 .grid-12 .col-span-5 { grid-column: span 5; } .s2 .grid-12 .col-span-6 { grid-column: span 6; } .s2 .grid-12 .col-span-7 { grid-column: span 7; } .s2 .grid-12 .col-span-8 { grid-column: span 8; } .s2 .grid-12 .col-span-9 { grid-column: span 9; } .s2 .grid-12 .col-span-10 { grid-column: span 10; } .s2 .grid-12 .col-span-11 { grid-column: span 11; } .s2 .grid-12 .col-span-12 { grid-column: span 12; } @media (max-width: 1100px) { .s2 .grid-4 { grid-template-columns: 1fr 1fr; } .s2 .grid-3 { grid-template-columns: 1fr 1fr; } .s2 .col-span-2 { grid-column: span 2; } .s2 .grid-12 .col-md-1 { grid-column: span 1; } .s2 .grid-12 .col-md-2 { grid-column: span 2; } .s2 .grid-12 .col-md-3 { grid-column: span 3; } .s2 .grid-12 .col-md-4 { grid-column: span 4; } .s2 .grid-12 .col-md-5 { grid-column: span 5; } .s2 .grid-12 .col-md-6 { grid-column: span 6; } .s2 .grid-12 .col-md-7 { grid-column: span 7; } .s2 .grid-12 .col-md-8 { grid-column: span 8; } .s2 .grid-12 .col-md-9 { grid-column: span 9; } .s2 .grid-12 .col-md-10 { grid-column: span 10; } .s2 .grid-12 .col-md-11 { grid-column: span 11; } .s2 .grid-12 .col-md-12 { grid-column: span 12; } } @media (max-width: 780px) { .s2 .grid-4, .s2 .grid-3, .s2 .grid-2 { grid-template-columns: 1fr; } .s2 .col-span-2 { grid-column: span 1; } .s2 .grid-12 { grid-template-columns: 1fr; } .s2 .grid-12 [class*="col-span-"], .s2 .grid-12 [class*="col-md-"] { grid-column: span 1; } } /* ===== Fields ===== */ .s2 .fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; } .s2 .fld-label { display: flex; justify-content: space-between; align-items: baseline; /* font-size: 14px; */ font-weight: 600; color: var(--ink-2); letter-spacing: -0.005em; margin-bottom: 0; font-size: 16px; } .s2 .fld-label .req { color: var(--danger); font-style: normal; margin-left: 2px; } .s2 .fld-hint { font-size: 13px; color: var(--ink-4); font-weight: 400; } .s2 .fld-input { display: flex; align-items: center; gap: 8px; min-height: var(--row-h); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0 10px; transition: border-color 120ms, box-shadow 120ms; } .s2 .datepicker { max-height: 40px; } .s2 .fld-input:hover { border-color: oklch(78% 0.012 240); } .s2 .fld-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); } .s2 .fld-input.is-readonly { background: var(--surface-2); } .s2 .fld-input.is-invalid { border-color: #dc3545; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15); } .s2 .fld-input.is-disabled { opacity: 0.55; pointer-events: none; } .s2 .fld-input input, .s2 .fld-input textarea { flex: 1; border: 0 !important; outline: 0 !important; background: transparent !important; font: inherit; font-size: 15px; color: var(--ink); padding: 8px 0; min-width: 0; box-shadow: none !important; } .s2 .fld-input input.mono { /* font-family: "JetBrains Mono", monospace; */ font-family: "Inter", /* "IBM Plex Sans Thai", */ "Sarabun", -apple-system, "Segoe UI", sans-serif; font-feature-settings: "cv11", "ss01"; font-size: 15px; } .s2 .fld-input input::placeholder, .s2 .fld-input textarea::placeholder { color: var(--ink-4); } .s2 .fld-textarea { align-items: flex-start; min-height: auto; padding: 8px 12px; } .s2 .fld-textarea textarea { resize: vertical; padding: 2px 0; line-height: 1.55; min-height: 64px; } .s2 .fld-leading { color: var(--ink-3); display: grid; place-items: center; flex-shrink: 0; } /* File input inside fld-input */ .s2 .fld-input input[type="file"] { font-size: 13px; padding: 6px 0; cursor: pointer; } /* Amount field */ .s2 .amount-input { /* background: var(--surface-2); */ border: 2px solid var(--accent-strong) !important; } .s2 .amt-ccy { font-size: 14px; color: var(--ink-3); background: var(--surface); padding: 3px 8px; border-radius: 5px; border: 1px solid var(--line); font-weight: 600; letter-spacing: 0.05em; /* font-family: "JetBrains Mono", monospace; */ font-family: "Inter", /* "IBM Plex Sans Thai", */ "Sarabun", -apple-system, "Segoe UI", sans-serif; font-feature-settings: "cv11", "ss01"; flex-shrink: 0; } .s2 .amt-val { font-size: 15px !important; font-weight: 600; text-align: right; } /* ===== Bootstrap Select (Selectpicker) Overrides ===== */ .s2 .bootstrap-select { width: 100% !important; } .s2 .bootstrap-select > .dropdown-toggle { width: 100% !important; display: flex !important; align-items: center !important; min-height: var(--row-h) !important; background: var(--surface) !important; border: 1px solid var(--line-strong) !important; border-radius: var(--radius) !important; padding: 0 10px !important; transition: border-color 120ms, box-shadow 120ms !important; font-family: "Inter", "Sarabun", sans-serif !important; font-size: 16px !important; color: var(--ink) !important; outline: 0 !important; box-shadow: none !important; text-align: left !important; } .s2 .bootstrap-select > .dropdown-toggle:hover { border-color: oklch(78% 0.012 240) !important; background: var(--surface) !important; } .s2 .bootstrap-select.show > .dropdown-toggle, .s2 .bootstrap-select.open > .dropdown-toggle { border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent) !important; background: var(--surface) !important; } .s2 .bootstrap-select.is-invalid > .dropdown-toggle { border-color: #dc3545 !important; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important; } .s2 .bootstrap-select > .dropdown-toggle::after { display: inline-block !important; content: "" !important; width: 7px !important; height: 7px !important; border-right: 1.75px solid var(--ink-3) !important; border-bottom: 1.75px solid var(--ink-3) !important; border-top: none !important; border-left: none !important; transform: rotate(45deg) translateY(-2px) !important; margin-left: auto !important; flex-shrink: 0 !important; transition: transform 150ms !important; margin-right: 4px; } .s2 .bootstrap-select.show > .dropdown-toggle::after, .s2 .bootstrap-select.open > .dropdown-toggle::after { transform: rotate(-135deg) translateY(3px) !important; } .s2 .bootstrap-select .filter-option { display: flex; align-items: center; flex: 1; } .s2 .bootstrap-select .filter-option-inner-inner { font-size: 15px !important; color: var(--ink); } .s2 .bootstrap-select .dropdown-menu { border-radius: var(--radius) !important; border: 1px solid var(--line-strong) !important; box-shadow: var(--shadow-lg) !important; padding: 4px !important; z-index: 1060 !important; } .s2 .bootstrap-select .dropdown-menu li > a, .s2 .bootstrap-select .dropdown-menu li > a:hover { border-radius: 6px !important; font-size: 15px !important; color: var(--ink) !important; padding: 8px 10px !important; background: transparent !important; } .s2 .bootstrap-select .dropdown-menu li > a:hover { background: var(--surface-2) !important; } .s2 .bootstrap-select .dropdown-menu li.selected > a, .s2 .bootstrap-select .dropdown-menu li.active > a { background: var(--accent-soft) !important; color: var(--accent-ink) !important; font-weight: 500 !important; font-size: 15px !important; } .s2 .bootstrap-select .dropdown-menu li.active:not(.selected) > a { background: var(--accent-soft) !important; color: var(--accent-ink) !important; /* font-weight: 500 !important; */ color: var(--accent-ink) !important; } .s2 .bootstrap-select .dropdown-menu.inner li.active:not(.selected) > a { background: var(--accent-soft) !important; color: var(--accent-ink) !important; /* font-weight: 500 !important; */ color: var(--accent-ink) !important; } .s2 .bootstrap-select .bs-searchbox .form-control { border-radius: var(--radius-sm) !important; border-color: var(--line-strong) !important; font-size: 15px !important; } /* ===== Customer Type Toggle (radio as segmented) ===== */ .s2 .customer-toggle { display: flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 3px; gap: 2px; min-height: var(--row-h); } .s2 .customer-toggle .btn-check { display: none; } .s2 .customer-toggle label.seg-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border-radius: 7px; font-size: 16px; color: var(--ink-2); cursor: pointer; font-weight: 500; transition: all 120ms; margin: 0; white-space: nowrap; border: 0; background: transparent; user-select: none; } .s2 .customer-toggle label.seg-btn:hover { color: var(--ink); } .s2 .customer-toggle .btn-check:checked + label.seg-btn { background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow-xs); font-size: 16px; border-width: 2px; border-color: rgb(99, 176, 231); border-style: solid; } /* ===== Badge ===== */ .s2 .s2-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 999px; font-weight: 500; border: 1px solid transparent; } .s2 .s2-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .s2 .s2-badge.tone-neutral { background: var(--surface-3); color: var(--ink-2); border-color: var(--line); } .s2 .s2-badge.tone-info { background: color-mix(in oklch, var(--info) 10%, var(--surface)); color: var(--info); border-color: color-mix(in oklch, var(--info) 25%, var(--surface)); } .s2 .s2-badge.tone-ok { background: color-mix(in oklch, var(--ok) 12%, var(--surface)); color: var(--ok); border-color: color-mix(in oklch, var(--ok) 25%, var(--surface)); } .s2 .s2-badge.tone-warn { background: color-mix(in oklch, var(--warn) 15%, var(--surface)); color: oklch(45% 0.13 65); border-color: color-mix(in oklch, var(--warn) 30%, var(--surface)); } .s2 .s2-badge.tone-danger { background: color-mix(in oklch, var(--danger) 12%, var(--surface)); color: var(--danger); border-color: color-mix(in oklch, var(--danger) 25%, var(--surface)); } .s2 .s2-badge.tone-accent { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in oklch, var(--accent) 25%, var(--surface)); } /* dark: สีสถานะ (--ok/--warn/--danger/--info) ถูกเลือกมาให้อ่านบนพื้น "ขาว" พอพื้นกลายเป็นมืด ตัวอักษรจะทึบจนอ่านยาก โดยเฉพาะ tone-warn ที่ฮาร์ดโค้ด oklch(45%) ไว้ — จึงเพิ่มความสว่างเฉพาะตอนใช้เป็น "ตัวอักษร" ของ badge (ไม่แตะ token ต้นทาง เพราะมันถูกใช้เป็นพื้นหลังของปุ่มด้วย) */ [data-theme="dark"] .s2 .s2-badge.tone-info { color: oklch(80% 0.1 240); } [data-theme="dark"] .s2 .s2-badge.tone-ok { color: oklch(80% 0.12 150); } [data-theme="dark"] .s2 .s2-badge.tone-warn { color: oklch(84% 0.13 65); } [data-theme="dark"] .s2 .s2-badge.tone-danger { color: oklch(76% 0.15 25); } /* ===== Buttons ===== */ .s2 .s2-btn { display: inline-flex; align-items: center; gap: 7px; padding: 12px 18px; font-family: inherit; font-size: 16px; font-weight: 500; border-radius: 9px; cursor: pointer; border: 1px solid transparent; transition: all 120ms; line-height: 1; text-decoration: none; white-space: nowrap; flex-shrink: 0; /* box-shadow: 0 6px 16px rgba(8, 48, 71, 0.22); */ box-shadow: 0 3px 3px rgba(8, 48, 71, 0.22); transform: translateY(-1px); } .s2 .s2-btn-primary { background: var(--accent); color: white !important; border-color: var(--accent-strong); /* box-shadow: var(--shadow-xs); */ font-size: 16px; border-radius: 32px; margin-left: 8px; margin-right: 8px; } .s2 .s2-btn-primary:hover { background: var(--accent-strong); color: white !important; text-decoration: none; border-radius: 32px; margin-left: 8px; margin-right: 8px; } .s2 .s2-btn-secondary { background: var(--secondary); color: rgb(0, 0, 0) !important; border-color: var(--secondary); /* box-shadow: var(--shadow-xs); */ font-size: 16px; border-radius: 32px; margin-left: 8px; margin-right: 8px; } .s2 .s2-btn-secondary:hover { background: var(--secondary-strong); color: rgb(0, 0, 0) !important; text-decoration: none; border-radius: 32px; margin-left: 8px; margin-right: 8px; } .s2 .s2-btn-outline { background: var(--surface); color: var(--ink) !important; border-color: var(--line-strong); font-size: 16px; border-radius: 32px; margin-left: 8px; margin-right: 8px; } .s2 .s2-btn-outline:hover { background: var(--surface-2); color: var(--ink) !important; text-decoration: none; border-radius: 32px; margin-left: 8px; margin-right: 8px; } .s2 .s2-btn-ghost { background: transparent; color: var(--ink-2) !important; border-color: transparent; font-size: 16px; border-radius: 32px; margin-left: 8px; margin-right: 8px; } .s2 .s2-btn-ghost:hover { background: var(--surface-2); color: var(--ink) !important; text-decoration: none; border-radius: 32px; margin-left: 8px; margin-right: 8px; } .s2 .s2-btn-danger { background: color-mix(in oklch, var(--danger) 10%, var(--surface)); color: var(--danger) !important; border-color: color-mix(in oklch, var(--danger) 22%, var(--surface)); border-width: 2px; font-size: 16px; border-radius: 32px; margin-left: 8px; margin-right: 8px; } .s2 .s2-btn-danger:hover { background: var(--danger); color: white !important; text-decoration: none; } /* Read button next to file input */ .s2 .file-row { display: flex; gap: 8px; align-items: flex-start; } .s2 .file-row .fld-input { flex: 1; min-width: 0; } /* ===== Footer Actions ===== */ .s2 .co-footer { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 16px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); flex-wrap: wrap; } /* ===== Responsive ===== */ @media (max-width: 600px) { .s2 .card-body { padding: 16px !important; } .s2 .card-head { padding: 14px 16px; } .s2 .co-footer { gap: 8px; } .s2 .s2-btn { padding: 8px 14px; font-size: 12.5px; } } /* ===== Dropzone ===== */ .s2 .dropzone { border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-2); padding: 16px 18px; cursor: pointer; transition: all 150ms; user-select: none; } .s2 .dropzone:hover { border-color: var(--accent); background: var(--accent-soft); } .s2 .dropzone.is-drag { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.005); } .s2 .dropzone:has(input[type="file"]:disabled) { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .s2 .dz-inner { display: flex; align-items: center; gap: 12px; } .s2 .dz-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent-strong); flex-shrink: 0; } .s2 .dz-text { display: flex; flex-direction: column; gap: 2px; } .s2 .dz-text strong { font-size: 13px; font-weight: 600; color: var(--ink); } .s2 .dz-text span { font-size: 11.5px; color: var(--ink-3); } .btn-read-ai { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px !important; background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%) !important; /* background: linear-gradient( 135deg, #14b8a6 0%, #0891b2 50%, #0e7490 100% ) !important; */ color: #ffffff; border: none; border-radius: 16px !important; font-size: 1rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(8, 145, 178, 0.5), 0 0 20px rgba(6, 182, 212, 0.3) !important; transition: all 0.3s ease; overflow: hidden; } [data-ai-create]:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none !important; transform: none !important; } .btn-read-ai[data-ai-create] { flex-wrap: wrap; justify-content: center; } .btn-read-ai[data-ai-create]:disabled .icon, .btn-read-ai[data-ai-create]:disabled::before { animation: none; } .btn-read-ai:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(8, 145, 178, 0.6), 0 0 30px rgba(6, 182, 212, 0.4) !important; background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%); } .btn-read-ai:active { transform: translateY(0); } .btn-read-ai .icon { width: 20px; height: 20px; animation: pulse 2s ease-in-out infinite; } /* Shimmer effect */ .btn-read-ai::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.3), transparent ); transition: left 0.5s; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .btn-read-ai:hover::before { left: 100%; } /* ปุ่ม "Read by AI" ขนาดเล็ก — ใช้ตอนต้องวางเข้าแถบปุ่ม DataTables (btn-sm) ร่วมกับ Copy/Excel (เช่นปุ่ม "เพิ่มด้วย AI" ใน FollowList/Index) ลดแค่ padding/border-radius/ขนาดตัวอักษร/ไอคอน ให้สูงใกล้เคียงปุ่มข้างๆ ส่วน gradient + glow + shimmer ยังใช้กฎของ .btn-read-ai ฐานเดิมทั้งหมด (ไม่แตะการใช้งาน .btn-read-ai เดิมที่ไม่มี .btn-sm — เจาะจงด้วย combinator เท่านั้น) */ /* padding/font-size ตรงกับ .btn-sm จริงของ Metronic (style.bundle.css บรรทัด ~4208: 0.55rem 0.75rem, font-size 0.925rem) เพื่อให้สูงเท่าปุ่ม Copy/Excel/เพิ่มข้อมูล ข้างๆ เป๊ะ ไม่ใช่เลขที่เดาเอง */ .btn-read-ai.btn-sm { padding: 0.55rem 0.75rem !important; border: 1px solid transparent !important; /* .btn-read-ai ฐานเดิมตั้ง border:none — ต่างจากปุ่มข้างๆ 2px พอดี */ border-radius: 32px !important; gap: 6px; font-size: 0.925rem; line-height: 1.35; } /* svg.icon เดียวกับปุ่มไซส์ปกติ (pulse มากับ .btn-read-ai .icon ฐานเดิมอยู่แล้ว) ย่อขนาดลงมาเท่า .btn-sm i ปุ่มอื่นในแถบเดียวกัน (16x16, ดูกฎ .btn.btn-sm .svg-icon svg) */ .btn-read-ai.btn-sm .icon { width: 16px; height: 16px; } /* Summary Card — border & shadow tinted by --card-accent injected via JS */ .summary-card { border: 1px solid var(--card-accent, #ddd) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 4px 14px color-mix(in srgb, var(--card-accent) 22%, transparent) !important; transition: box-shadow 0.2s ease, transform 0.2s ease; border-radius: 10px !important; } .summary-card:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.09), 0 6px 20px color-mix(in srgb, var(--card-accent) 32%, transparent) !important; transform: translateY(-2px); }