COLLAPSE .ss-collapse .ss-collapse__header .ss-collapse__body .ss-collapse--bordered .ss-collapse--rounded .ss-collapse--shadow ========================================================= 🎭 OVERLAYS ========================================================= MODAL: .ss-modal .ss-modal__dialog TOOLTIP: .ss-tooltip ========================================================= 🎬 MOTION ========================================================= ss-animate-fade-in ss-animate-slide-up ss-animate-scale-in ========================================================= 🎨 THEMES ========================================================= ========================================================= */ @layer ss-reset, ss-base, ss-layout, ss-utilities, ss-components, ss-overlays, ss-motion, ss-themes, ss-overrides; /* ========================================================= ss-reset ========================================================= */ @layer ss-reset { *, *::before, *::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; } body { margin:0; min-width:320px; font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:16px; line-height:1.5; background:var(--cn-bg-page); color:var(--cn-text); } img, svg, video, canvas { display:block; max-width:100%; height:auto; } button, input, select, textarea { font:inherit; color:inherit; } button { background:none; border:none; padding:0; cursor:pointer; } a { color:inherit; text-decoration:none; } ul, ol { margin:0; padding:0; } table { border-collapse:separate; border-spacing:0; } h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin:0; } [hidden] { display:none !important; } } /* ========================================================= ss-base : TOKENS ========================================================= */ @layer ss-base { :root { /* ===================================================== SPACE SCALE ===================================================== */ --cn-space-0:0; --cn-space-2xs:2px; --cn-space-xs:4px; --cn-space-sm:8px; --cn-space-md:12px; --cn-space-lg:16px; --cn-space-xl:20px; --cn-space-2xl:24px; --cn-space-3xl:32px; --cn-space-4xl:40px; --cn-space-5xl:48px; --cn-space-6xl:64px; /* ===================================================== RADIUS ===================================================== */ --cn-radius-0:0; --cn-radius-xs:4px; --cn-radius-sm:6px; --cn-radius-md:10px; --cn-radius-lg:14px; --cn-radius-xl:18px; --cn-radius-2xl:24px; --cn-radius-pill:999px; --cn-radius-circle:50%; /* ===================================================== INTERACTION SIZE ===================================================== */ --cn-touch-target:44px; /* ===================================================== BORDER WIDTH ===================================================== */ --cn-line-0:0; --cn-line-xs:1px; --cn-line-sm:2px; --cn-line-md:3px; --cn-line-lg:4px; /* ===================================================== SHADOW ===================================================== */ --cn-shadow-xs:0 1px 2px rgba(0,0,0,.05); --cn-shadow-sm:0 1px 3px rgba(0,0,0,.08); --cn-shadow-md:0 6px 18px rgba(0,0,0,.12); --cn-shadow-lg:0 14px 32px rgba(0,0,0,.16); --cn-shadow-xl:0 24px 48px rgba(0,0,0,.18); /* ===================================================== Z-INDEX SCALE ===================================================== */ --cn-z-base:1; --cn-z-dropdown:100; --cn-z-sticky:200; --cn-z-fixed:300; --cn-z-drawer:800; --cn-z-overlay:900; --cn-z-modal:1000; --cn-z-toast:1100; --cn-z-tooltip:1200; /* ===================================================== MOTION ===================================================== */ --cn-motion-fast:.15s; --cn-motion-base:.22s; --cn-motion-slow:.35s; --cn-ease-standard:cubic-bezier(.2,.8,.2,1); --cn-ease-soft:cubic-bezier(.25,.8,.25,1); /* ===================================================== FONT ===================================================== */ --cn-font-family: "Sarabun", "Noto Sans Thai", Arial, sans-serif; --cn-font-family-heading: "Prompt", "Sarabun", "Noto Sans Thai", Arial, sans-serif; /* ===================================================== TYPOGRAPHY ===================================================== */ --cn-font-size-xs:.75rem; --cn-font-size-sm:.875rem; --cn-font-size-md:1rem; --cn-font-size-lg:1.125rem; --cn-font-size-xl:1.25rem; --cn-font-size-2xl:1.5rem; --cn-font-size-3xl:1.875rem; --cn-font-size-4xl:2.25rem; --cn-line-height-tight:1.2; --cn-line-height-base:1.5; --cn-line-height-loose:1.8; /* ===================================================== BRAND ===================================================== */ /* --cn-primary:#2977b7; --cn-secondary:#7b61ff; --cn-success:#28a745; --cn-danger:#dc3545; --cn-warning:#ffc107; --cn-info:#17a2b8; */ --cn-primary:#7fb6e6; /* ฟ้า pastel */ --cn-secondary:#b7a6ff; /* ม่วง pastel */ --cn-success:#7fd19a; /* เขียว pastel */ --cn-danger:#f29aa3; /* แดง pastel */ --cn-warning:#ffe08a; /* เหลือง pastel */ --cn-info:#7fd4df; /* ฟ้าเขียว pastel */ /* ===================================================== NEUTRAL ===================================================== */ --cn-white:#ffffff; --cn-black:#000000; --cn-gray-50:#f8f9fa; --cn-gray-100:#f1f3f5; --cn-gray-200:#e9ecef; --cn-gray-300:#dee2e6; --cn-gray-400:#ced4da; --cn-gray-500:#adb5bd; --cn-gray-600:#6c757d; --cn-gray-700:#495057; --cn-gray-800:#343a40; --cn-gray-900:#212529; /* ===================================================== SEMANTIC TOKENS ===================================================== */ --cn-bg-page:#f4f6f9; --cn-bg-surface:#ffffff; --cn-bg-subtle:#f8f9fa; --cn-bg-elevated:#ffffff; --cn-text:#343a40; --cn-text-soft:#6c757d; --cn-text-strong:#212529; --cn-text-on-primary:#ffffff; --cn-text-on-danger:#ffffff; --cn-text-on-success:#ffffff; --cn-text-on-dark:#ffffff; --cn-text-link:var(--cn-primary); --cn-border-color:rgba(0,0,0,.12); --cn-border-strong:rgba(0,0,0,.2); --cn-border-soft:rgba(0,0,0,.08); --cn-focus-ring:0 0 0 3px rgba(41,119,183,.18); --cn-card-bg:var(--cn-bg-surface); --cn-card-border:var(--cn-border-color); --cn-card-header-bg:transparent; --cn-card-footer-bg:var(--cn-bg-subtle); --cn-input-bg:#ffffff; --cn-input-border:var(--cn-gray-300); --cn-input-text:var(--cn-text); --cn-input-placeholder:#9aa0a6; /* ===================================================== CONTROL CONTRACT ===================================================== */ --cn-control-height:40px; --cn-control-padding-y:8px; --cn-control-padding-x:12px; /* ===================================================== READONLY / DISABLED CONTRACT ===================================================== */ --cn-readonly-bg:var(--cn-bg-subtle); --cn-readonly-text:var(--cn-text-soft); --cn-disabled-bg:var(--cn-gray-100); --cn-disabled-border:var(--cn-gray-300); --cn-disabled-text:var(--cn-gray-500); /* ===================================================== NEUTRAL / ON-COLOR CONTRACT ===================================================== */ --cn-light:var(--cn-gray-100); --cn-dark:var(--cn-gray-900); --cn-text-muted:var(--cn-text-soft); --cn-text-on-secondary:#ffffff; --cn-text-on-info:#ffffff; --cn-info-text:#075985; --cn-warning-text:#5c3d00; --cn-table-head-bg:#eef3f8; --cn-table-stripe:#f8fbff; --cn-table-hover:#e8f1ff; --cn-table-selected:#d6e6ff; /* ===================================================== TABLE SUMMARY LEVELS ===================================================== */ --cn-table-summary-l1-bg:var(--cn-bg-subtle); --cn-table-summary-l1-text:var(--cn-text-soft); --cn-table-summary-l2-bg:color-mix(in srgb,var(--cn-bg-subtle) 76%,var(--cn-border-soft)); --cn-table-summary-l2-text:var(--cn-text); --cn-table-summary-l3-bg:color-mix(in srgb,var(--cn-bg-subtle) 58%,var(--cn-border-color)); --cn-table-summary-l3-text:var(--cn-text-strong); --cn-overlay-bg:rgba(0,0,0,.45); --cn-print-bg:#ffffff; --cn-print-text:#111111; /* ===================================================== PAGE / CONTENT ===================================================== */ --cn-page-max:1440px; --cn-content-max:1200px; --cn-form-max:960px; /* ===================================================== BREADCRUMB TOKENS ===================================================== */ --cn-breadcrumb-hue:34; --cn-breadcrumb-sat:70%; --cn-breadcrumb-light-start:28%; --cn-breadcrumb-light-step:7%; /* ===================================================== SAFE AREA / MOBILE WEBVIEW ===================================================== */ --cn-safe-top:env(safe-area-inset-top,0px); --cn-safe-right:env(safe-area-inset-right,0px); --cn-safe-bottom:env(safe-area-inset-bottom,0px); --cn-safe-left:env(safe-area-inset-left,0px); /* ===================================================== SIDEBAR ===================================================== */ --ss-sidebar-width:300px; --ss-sidebar-width-collapsed:76px; --ss-sidebar-bg:var(--cn-bg-surface); --ss-sidebar-border:var(--cn-border-soft); --ss-sidebar-shadow:var(--cn-shadow-lg); --ss-sidebar-header-bg:var(--cn-primary); --ss-sidebar-header-text:var(--cn-text-on-primary); --ss-sidebar-item-height:44px; --ss-sidebar-item-padding-y:var(--cn-space-sm); --ss-sidebar-item-padding-x:var(--cn-space-md); --ss-sidebar-item-gap:var(--cn-space-xs); --ss-sidebar-item-radius:var(--cn-radius-md); --ss-sidebar-item-text:var(--cn-text); --ss-sidebar-item-icon:var(--cn-text-soft); --ss-sidebar-hover-bg:var(--cn-bg-subtle); --ss-sidebar-hover-text:var(--cn-text-strong); --ss-sidebar-active-bg: color-mix( in srgb, var(--cn-primary) 14%, transparent ); --ss-sidebar-active-text: color-mix( in srgb, var(--cn-primary) 82%, black ); --ss-sidebar-disabled-bg:transparent; --ss-sidebar-disabled-text:var(--cn-disabled-text); --ss-sidebar-section-text:var(--cn-text-soft); --ss-sidebar-divider:var(--cn-border-soft); --ss-sidebar-indent-size:18px; --ss-sidebar-max-level:5; --ss-sidebar-overlay-bg:var(--cn-overlay-bg); --ss-sidebar-transition-duration:var(--cn-motion-base); --ss-sidebar-transition-timing:var(--cn-ease-standard); } html, body { font-family:var(--cn-font-family); } h1,h2,h3,h4,h5,h6 { margin:0; line-height:1.25; font-family:var(--cn-font-family-heading); } /* ================= H1 ================= */ h1 { font-size:var(--cn-font-size-3xl); font-weight:700; } /* ================= H2 ================= */ h2 { font-size:var(--cn-font-size-2xl); font-weight:700; } /* ================= H3 ================= */ h3 { font-size:var(--cn-font-size-xl); font-weight:600; } /* ================= H4 ================= */ h4 { font-size:var(--cn-font-size-lg); font-weight:600; } /* ================= H5 ================= */ h5 { font-size:var(--cn-font-size-md); font-weight:500; } /* ================= H6 ================= */ h6 { font-size:var(--cn-font-size-sm); font-weight:500; } } /* ========================================================= ss-layout ========================================================= */ @layer ss-layout { /* ======================================================= PAGE LAYOUT ======================================================= */ .ss-page { display:flex; flex-direction:column; min-height:100vh; } .ss-page__body { flex:1 1 auto; display:flex; flex-direction:column; } .ss-container { width:100%; position:relative; margin-inline:auto; padding-inline:var(--cn-space-lg); } .ss-container--fill { flex:1 1 auto; display:flex; flex-direction:column; } .ss-container--page { max-width:var(--cn-page-max); } .ss-container--content { max-width:var(--cn-content-max); } .ss-container--form { max-width:var(--cn-form-max); } .ss-stack { display:flex; flex-direction:column; gap:var(--cn-space-md); } .ss-stack--xs{ gap:var(--cn-space-xs); } .ss-stack--sm{ gap:var(--cn-space-sm); } .ss-stack--lg{ gap:var(--cn-space-lg); } .ss-stack--xl{ gap:var(--cn-space-xl); } .ss-stack--2xl{ gap:var(--cn-space-2xl); } .ss-stack--3xl{ gap:var(--cn-space-3xl); } /* ======================================================= CLUSTER (container behavior) ======================================================= */ /* ======================================================= HEADER ROW (auto layout when used) ======================================================= */ /* ======================================================= TITLE + ACTIONS ======================================================= */ .ss-cluster--reverse .ss-cluster--reverse /* ======================================================= ALIGN HELPERS (optional use) ======================================================= */ /* ======================================================= CLUSTER PURPOSE: - Horizontal wrapping group / toolbar - Use .ss-stack for vertical layouts ======================================================= */ .ss-cluster { display:flex; align-items:center; flex-wrap:wrap; gap:var(--cn-space-sm); min-width:0; } .ss-cluster__header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--cn-space-md); width:100%; min-width:0; } .ss-cluster__title { display:flex; align-items:center; flex-wrap:wrap; gap:var(--cn-space-sm); min-width:0; } .ss-cluster__actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--cn-space-sm); margin-left:auto; min-width:0; } .ss-cluster--reverse .ss-cluster__title { order:2; margin-left:auto; } .ss-cluster--reverse .ss-cluster__actions { order:1; margin-left:0; } .ss-cluster--start { justify-content:flex-start; } .ss-cluster--center { justify-content:center; } .ss-cluster--end { justify-content:flex-end; } .ss-cluster--between { justify-content:space-between; } .ss-cluster--align-start { align-items:flex-start; } .ss-cluster--align-center { align-items:center; } .ss-cluster--align-end { align-items:flex-end; } .ss-center { display:flex; align-items:center; justify-content:center; } .ss-center-x { display:flex; justify-content:center; } .ss-center-y { display:flex; align-items:center; } .ss-grid { display:grid; gap:var(--cn-space-lg); } .ss-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .ss-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .ss-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); } .ss-grid--auto-sm { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); } .ss-grid--auto-md { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .ss-grid--auto-lg { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); } .ss-grid--equal-height { align-items:stretch; } .ss-grid--equal-height > * { display:flex; min-width:0; } .ss-grid--equal-height > * > * { width:100%; height:100%; } .ss-sidebar-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:var(--cn-space-xl); } .ss-split { display:grid; grid-template-columns:1fr 1fr; gap:var(--cn-space-xl); } .ss-section { margin:0; padding:0; } .ss-section > * + * { margin-top:var(--cn-space-3xl); } } /* ========================================================= ss-utilities ========================================================= */ @layer ss-utilities { .ss-d-block{ display:block; } .ss-d-inline{ display:inline; } .ss-d-inline-block{ display:inline-block; } .ss-d-flex{ display:flex; } .ss-d-grid{ display:grid; } .ss-d-none{ display:none; } .ss-visible{ visibility:visible; } .ss-hidden{ visibility:hidden; } .ss-w-25{ width:25%; } .ss-w-50{ width:50%; } .ss-w-75{ width:75%; } .ss-w-100{ width:100%; } .ss-h-100{ height:100%; } .ss-m-0{ margin:0; } .ss-mt-0{ margin-top:0; } .ss-mr-0{ margin-right:0; } .ss-mb-0{ margin-bottom:0; } .ss-ml-0{ margin-left:0; } .ss-m-xs{ margin:var(--cn-space-xs); } .ss-m-sm{ margin:var(--cn-space-sm); } .ss-m-md{ margin:var(--cn-space-md); } .ss-m-lg{ margin:var(--cn-space-lg); } .ss-m-xl{ margin:var(--cn-space-xl); } .ss-mt-xs{ margin-top:var(--cn-space-xs); } .ss-mt-sm{ margin-top:var(--cn-space-sm); } .ss-mt-md{ margin-top:var(--cn-space-md); } .ss-mt-lg{ margin-top:var(--cn-space-lg); } .ss-mt-xl{ margin-top:var(--cn-space-xl); } .ss-mt-2xl{ margin-top:var(--cn-space-2xl); } .ss-mb-xs{ margin-bottom:var(--cn-space-xs); } .ss-mb-sm{ margin-bottom:var(--cn-space-sm); } .ss-mb-md{ margin-bottom:var(--cn-space-md); } .ss-mb-lg{ margin-bottom:var(--cn-space-lg); } .ss-mb-xl{ margin-bottom:var(--cn-space-xl); } .ss-mb-2xl{ margin-bottom:var(--cn-space-2xl); } .ss-ml-xs{ margin-left:var(--cn-space-xs); } .ss-ml-sm{ margin-left:var(--cn-space-sm); } .ss-ml-md{ margin-left:var(--cn-space-md); } .ss-ml-lg{ margin-left:var(--cn-space-lg); } .ss-mr-xs{ margin-right:var(--cn-space-xs); } .ss-mr-sm{ margin-right:var(--cn-space-sm); } .ss-mr-md{ margin-right:var(--cn-space-md); } .ss-mr-lg{ margin-right:var(--cn-space-lg); } .ss-mx-auto { margin-left:auto; margin-right:auto; } .ss-p-0{ padding:0; } .ss-p-xs{ padding:var(--cn-space-xs); } .ss-p-sm{ padding:var(--cn-space-sm); } .ss-p-md{ padding:var(--cn-space-md); } .ss-p-lg{ padding:var(--cn-space-lg); } .ss-p-xl{ padding:var(--cn-space-xl); } .ss-p-2xl{ padding:var(--cn-space-2xl); } .ss-px-0 { padding-left:0; padding-right:0; } .ss-px-sm { padding-left:var(--cn-space-sm); padding-right:var(--cn-space-sm); } .ss-px-md { padding-left:var(--cn-space-md); padding-right:var(--cn-space-md); } .ss-px-lg { padding-left:var(--cn-space-lg); padding-right:var(--cn-space-lg); } .ss-py-sm { padding-top:var(--cn-space-sm); padding-bottom:var(--cn-space-sm); } .ss-py-md { padding-top:var(--cn-space-md); padding-bottom:var(--cn-space-md); } .ss-py-lg { padding-top:var(--cn-space-lg); padding-bottom:var(--cn-space-lg); } .ss-indent-xs{ padding-left:var(--cn-space-xs); } .ss-indent-sm{ padding-left:var(--cn-space-sm); } .ss-indent-md{ padding-left:var(--cn-space-md); } .ss-indent-lg{ padding-left:var(--cn-space-lg); } .ss-indent-xl{ padding-left:var(--cn-space-xl); } .ss-border { border:1px solid var(--cn-border-color); } .ss-border-soft { border:1px solid var(--cn-border-soft); } .ss-border-strong { border:1px solid var(--cn-border-strong); } .ss-border-none{ border:none; } .ss-border-dashed{ border-style:dashed; } .ss-border-dotted{ border-style:dotted; } .ss-radius-0{ border-radius:var(--cn-radius-0); } .ss-radius-xs{ border-radius:var(--cn-radius-xs); } .ss-radius-sm{ border-radius:var(--cn-radius-sm); } .ss-radius-md{ border-radius:var(--cn-radius-md); } .ss-radius-lg{ border-radius:var(--cn-radius-lg); } .ss-radius-xl{ border-radius:var(--cn-radius-xl); } .ss-radius-2xl{ border-radius:var(--cn-radius-2xl); } .ss-radius-pill{ border-radius:var(--cn-radius-pill); } .ss-radius-circle{ border-radius:var(--cn-radius-circle); } .ss-shadow-xs{ box-shadow:var(--cn-shadow-xs); } .ss-shadow-sm{ box-shadow:var(--cn-shadow-sm); } .ss-shadow-md{ box-shadow:var(--cn-shadow-md); } .ss-shadow-lg{ box-shadow:var(--cn-shadow-lg); } .ss-shadow-xl{ box-shadow:var(--cn-shadow-xl); } .ss-shadow-none{ box-shadow:none; } .ss-fs-xs{ font-size:var(--cn-font-size-xs); } .ss-fs-sm{ font-size:var(--cn-font-size-sm); } .ss-fs-md{ font-size:var(--cn-font-size-md); } .ss-fs-lg{ font-size:var(--cn-font-size-lg); } .ss-fs-xl{ font-size:var(--cn-font-size-xl); } .ss-fs-2xl{ font-size:var(--cn-font-size-2xl); } .ss-fs-3xl{ font-size:var(--cn-font-size-3xl); } .ss-fs-4xl{ font-size:var(--cn-font-size-4xl); } .ss-align-left{ text-align:left; } .ss-align-center{ text-align:center; } .ss-align-right{ text-align:right; } .ss-align-justify { text-align:justify; text-justify:inter-word; } .ss-fw-normal{ font-weight:400; } .ss-fw-medium{ font-weight:500; } .ss-fw-semibold{ font-weight:600; } .ss-fw-bold{ font-weight:700; } .ss-lh-tight{ line-height:var(--cn-line-height-tight); } .ss-lh-base{ line-height:var(--cn-line-height-base); } .ss-lh-loose{ line-height:var(--cn-line-height-loose); } .ss-color-primary{ color:var(--cn-primary); } .ss-color-secondary{ color:var(--cn-secondary); } .ss-color-success{ color:var(--cn-success); } .ss-color-danger{ color:var(--cn-danger); } .ss-color-warning{ color:#8a5d00; } .ss-color-info{ color:var(--cn-info); } .ss-color-text{ color:var(--cn-text); } .ss-color-soft{ color:var(--cn-text-soft); } .ss-color-strong{ color:var(--cn-text-strong); } .ss-bg-primary { background:var(--cn-primary); color:var(--cn-text-on-primary); } .ss-bg-secondary { background:var(--cn-secondary); color:#ffffff; } .ss-bg-success { background:var(--cn-success); color:var(--cn-text-on-success); } .ss-bg-danger { background:var(--cn-danger); color:var(--cn-text-on-danger); } .ss-bg-warning { background:var(--cn-warning); color:#1f2937; } .ss-bg-info { background:var(--cn-info); color:#ffffff; } .ss-bg-surface { background:var(--cn-bg-surface); } .ss-bg-subtle { background:var(--cn-bg-subtle); } .ss-link { color:var(--cn-text-link); transition:color var(--cn-motion-fast) var(--cn-ease-standard); } .ss-link:hover { color:color-mix(in srgb, var(--cn-text-link) 82%, black); } .ss-justify{ display:flex; gap:var(--cn-space-sm); } .ss-justify-start{ justify-content:flex-start; } .ss-justify-center{ justify-content:center; } .ss-justify-end{ justify-content:flex-end; } .ss-justify-between{ justify-content:space-between; } /* ========================================================= DIVIDER ========================================================= */ .ss-divider { width:100%; height:1px; margin:var(--cn-space-md) 0; border:0; background:var(--cn-border-color); } /* --------------------------------------------------------- SOFT --------------------------------------------------------- */ .ss-divider--soft { background:var(--cn-border-soft); } /* --------------------------------------------------------- STRONG --------------------------------------------------------- */ .ss-divider--strong { height:2px; background:var(--cn-border-strong); } /* --------------------------------------------------------- DASHED --------------------------------------------------------- */ .ss-divider--dashed { height:0; border:0; border-top:1px dashed var(--cn-border-strong); background:transparent; } /* --------------------------------------------------------- DOTTED --------------------------------------------------------- */ .ss-divider--dotted { height:0; border:0; border-top:2px dotted var(--cn-border-strong); background:transparent; } /* --------------------------------------------------------- GRADIENT --------------------------------------------------------- */ .ss-divider--gradient { height:2px; background: linear-gradient( 90deg, transparent 0%, var(--cn-primary) 50%, transparent 100% ); } /* --------------------------------------------------------- FADE LEFT TO RIGHT --------------------------------------------------------- */ .ss-divider--fade { height:1px; background: linear-gradient( 90deg, var(--cn-primary) 0%, color-mix(in srgb,var(--cn-primary) 45%,transparent) 55%, transparent 100% ); } /* --------------------------------------------------------- ACCENT --------------------------------------------------------- */ .ss-divider--accent { position:relative; height:1px; background:var(--cn-border-soft); } .ss-divider--accent::before { content:""; position:absolute; inset-block-start:-1px; inset-inline-start:0; width:72px; height:3px; border-radius:var(--cn-radius-pill); background:var(--cn-primary); } /* --------------------------------------------------------- CENTER ACCENT --------------------------------------------------------- */ .ss-divider--accent-center { position:relative; height:1px; background:var(--cn-border-soft); } .ss-divider--accent-center::before { content:""; position:absolute; inset-block-start:-1px; inset-inline-start:50%; width:72px; height:3px; border-radius:var(--cn-radius-pill); background:var(--cn-primary); transform:translateX(-50%); } /* --------------------------------------------------------- SHADOW --------------------------------------------------------- */ .ss-divider--shadow { height:1px; background:var(--cn-border-soft); box-shadow: 0 2px 5px rgba(15,23,42,.12); } /* --------------------------------------------------------- GLOW --------------------------------------------------------- */ .ss-divider--glow { height:2px; background:var(--cn-primary); box-shadow: 0 0 8px color-mix(in srgb,var(--cn-primary) 55%,transparent); } /* --------------------------------------------------------- SHORT --------------------------------------------------------- */ .ss-divider--short { width:80px; } /* --------------------------------------------------------- CENTERED --------------------------------------------------------- */ .ss-divider--center { margin-inline:auto; } .ss-divider--fade-center { height:1px; border:0; background: linear-gradient( 90deg, transparent 0%, var(--cn-border-color) 25%, var(--cn-border-strong) 50%, var(--cn-border-color) 75%, transparent 100% ); } /* --------------------------------------------------------- SPACING --------------------------------------------------------- */ .ss-divider--sm { margin-block:var(--cn-space-sm); } .ss-divider--lg { margin-block:var(--cn-space-xl); } } /* ========================================================= ss-components ========================================================= */ @layer ss-components { .ss-page__title, .ss-card__title, .ss-modal__title { font-family:var(--cn-font-family-heading); } /* ===================================================== SIDEBAR : BASE ===================================================== */ .ss-sidebar { position:fixed; inset-block:0; inset-inline-start:0; z-index:var(--cn-z-drawer); display:flex; flex-direction:column; width:var(--ss-sidebar-width); max-width:calc(100vw - var(--cn-space-xl)); height:100dvh; overflow:hidden; background:var(--ss-sidebar-bg); border-inline-end:1px solid var(--ss-sidebar-border); box-shadow:var(--ss-sidebar-shadow); color:var(--ss-sidebar-item-text); transition: width var(--ss-sidebar-transition-duration) var(--ss-sidebar-transition-timing), transform var(--ss-sidebar-transition-duration) var(--ss-sidebar-transition-timing); } /* ===================================================== SIDEBAR : DRAWER ===================================================== */ .ss-sidebar--drawer { transform:translateX(-105%); visibility:hidden; pointer-events:none; transition: width var(--ss-sidebar-transition-duration) var(--ss-sidebar-transition-timing), transform var(--ss-sidebar-transition-duration) var(--ss-sidebar-transition-timing), visibility 0s linear var(--ss-sidebar-transition-duration); } .ss-sidebar--drawer.is-open { transform:translateX(0); visibility:visible; pointer-events:auto; transition-delay:0s; } /* ===================================================== SIDEBAR : OVERLAY ===================================================== */ .ss-sidebar-overlay { position:fixed; inset:0; z-index:calc(var(--cn-z-drawer) - 1); background:var(--ss-sidebar-overlay-bg); opacity:0; visibility:hidden; pointer-events:none; transition: opacity var(--ss-sidebar-transition-duration) var(--ss-sidebar-transition-timing), visibility 0s linear var(--ss-sidebar-transition-duration); } .ss-sidebar-overlay.is-open { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; } /* ===================================================== SIDEBAR : PAGE SCROLL LOCK ===================================================== */ body.ss-sidebar-open { overflow:hidden; } /* ===================================================== SIDEBAR : HEADER ===================================================== */ .ss-sidebar__header { display:flex; align-items:center; justify-content:space-between; gap:var(--cn-space-md); flex:0 0 auto; min-height:72px; padding: calc(var(--cn-space-md) + var(--cn-safe-top)) var(--cn-space-lg) var(--cn-space-md); background:var(--ss-sidebar-header-bg); color:var(--ss-sidebar-header-text); } /* ===================================================== SIDEBAR : BRAND ===================================================== */ .ss-sidebar__brand { display:flex; align-items:center; gap:var(--cn-space-md); min-width:0; } .ss-sidebar__brand-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 40px; width:40px; height:40px; border:1px solid rgba(255,255,255,.2); border-radius:var(--cn-radius-md); background:rgba(255,255,255,.14); color:inherit; font-size:var(--cn-font-size-lg); } .ss-sidebar__brand-content { min-width:0; } .ss-sidebar__title { overflow:hidden; font-family:var(--cn-font-family-heading); font-size:var(--cn-font-size-lg); font-weight:700; line-height:var(--cn-line-height-tight); text-overflow:ellipsis; white-space:nowrap; } .ss-sidebar__subtitle { margin-top:var(--cn-space-2xs); overflow:hidden; color: color-mix( in srgb, var(--ss-sidebar-header-text) 72%, transparent ); font-size:var(--cn-font-size-xs); line-height:var(--cn-line-height-tight); text-overflow:ellipsis; white-space:nowrap; } /* ===================================================== SIDEBAR : CLOSE BUTTON ===================================================== */ .ss-sidebar__close { display:inline-flex; align-items:center; justify-content:center; flex:0 0 var(--cn-touch-target); width:var(--cn-touch-target); height:var(--cn-touch-target); border-radius:var(--cn-radius-md); color:inherit; transition: background var(--cn-motion-fast) var(--cn-ease-standard), transform var(--cn-motion-fast) var(--cn-ease-standard); } .ss-sidebar__close:hover { background:rgba(255,255,255,.14); } .ss-sidebar__close:active { transform:scale(.96); } .ss-sidebar__close:focus-visible { outline:2px solid currentColor; outline-offset:2px; } /* ===================================================== SIDEBAR : BODY ===================================================== */ .ss-sidebar__body { flex:1 1 auto; min-height:0; padding:var(--cn-space-md); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color: var(--cn-gray-400) transparent; } .ss-sidebar__body::-webkit-scrollbar { width:5px; } .ss-sidebar__body::-webkit-scrollbar-track { background:transparent; } .ss-sidebar__body::-webkit-scrollbar-thumb { border-radius:var(--cn-radius-pill); background:var(--cn-gray-400); } /* ===================================================== SIDEBAR : FOOTER ===================================================== */ .ss-sidebar__footer { flex:0 0 auto; padding: var(--cn-space-md) var(--cn-space-md) calc(var(--cn-space-md) + var(--cn-safe-bottom)); background:var(--ss-sidebar-bg); border-block-start:1px solid var(--ss-sidebar-border); } /* ===================================================== BUTTON ===================================================== */ .ss-button { display:inline-flex; align-items:center; justify-content:center; gap:var(--cn-space-sm); min-height:38px; padding:8px 14px; border:1px solid transparent; border-radius:var(--cn-radius-sm); font-weight:500; line-height:1.2; white-space:nowrap; transition: background var(--cn-motion-base) var(--cn-ease-standard), border-color var(--cn-motion-base) var(--cn-ease-standard), color var(--cn-motion-base) var(--cn-ease-standard), box-shadow var(--cn-motion-base) var(--cn-ease-standard), transform var(--cn-motion-fast) var(--cn-ease-standard); } .ss-button:hover { transform:translateY(-1px); } .ss-button:focus-visible { outline:none; box-shadow:var(--cn-focus-ring); } .ss-button:disabled, .ss-button.is-disabled { opacity:.6; cursor:not-allowed; transform:none; } .ss-button.ss-primary { background:var(--cn-primary); color:var(--cn-text-on-primary); border-color:transparent; } .ss-button.ss-primary:hover { background:color-mix(in srgb, var(--cn-primary) 88%, black); } .ss-button.ss-secondary { background:var(--cn-secondary); color:#ffffff; } .ss-button.ss-secondary:hover { background:color-mix(in srgb, var(--cn-secondary) 88%, black); } .ss-button.ss-success { background:var(--cn-success); color:var(--cn-text-on-success); } .ss-button.ss-success:hover { background:color-mix(in srgb, var(--cn-success) 88%, black); } .ss-button.ss-danger { background:var(--cn-danger); color:var(--cn-text-on-danger); } .ss-button.ss-danger:hover { background:color-mix(in srgb, var(--cn-danger) 88%, black); } .ss-button.ss-light { background:var(--cn-bg-surface); color:var(--cn-text); border-color:var(--cn-border-color); } .ss-button.ss-light:hover { background:var(--cn-bg-subtle); } .ss-button.ss-outline-primary { background:transparent; color:var(--cn-primary); border-color:var(--cn-primary); } .ss-button.ss-outline-primary:hover { background:color-mix(in srgb, var(--cn-primary) 10%, transparent); } .ss-button.ss-ghost { background:transparent; color:var(--cn-text); border-color:transparent; } .ss-button.ss-ghost:hover { background:var(--cn-bg-subtle); } .ss-button--sm { min-height:32px; padding:6px 10px; font-size:var(--cn-font-size-sm); } .ss-button--lg { min-height:44px; padding:10px 18px; font-size:var(--cn-font-size-lg); } .ss-button--block { display:flex; width:100%; } /* ===================================================== BUTTON RESPONSIVE MODIFIERS ===================================================== */ .ss-button--responsive-block { /* Desktop / Tablet ยังคงขนาดตามเนื้อหา */ } .ss-button--icon { width:auto; min-width:var(--cn-touch-target,44px); min-height:var(--cn-touch-target,44px); padding-inline:var(--cn-space-sm); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; } .ss-button--icon.ss-button--sm { min-width:36px; min-height:36px; padding:6px; } .ss-highlight { background:rgba(255,230,0,.2); padding:4px 6px; border-radius:4px; } /* ===================================================== ICON BUTTON ===================================================== */ .ss-icon { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--cn-radius-circle); color:var(--cn-text-soft); transition: background var(--cn-motion-base) var(--cn-ease-standard), color var(--cn-motion-base) var(--cn-ease-standard), box-shadow var(--cn-motion-base) var(--cn-ease-standard); } .ss-icon:hover { background:var(--cn-bg-subtle); color:var(--cn-text); } .ss-icon:focus-visible { outline:none; box-shadow:var(--cn-focus-ring); } /* ===================================================== CARD ===================================================== */ .ss-card { background:var(--cn-card-bg); border:1px solid var(--cn-card-border); border-radius:var(--cn-radius-md); box-shadow:var(--cn-shadow-sm); overflow:hidden; } .ss-card--soft { box-shadow:none; } .ss-card--flat { box-shadow:none; border-color:var(--cn-border-soft); } .ss-card--borderless { border:none; } .ss-card--plain { border:none !important; box-shadow:none !important; } .ss-card--plain .ss-card__header { border:none !important; background:transparent !important; } .ss-card--plain .ss-card__footer { border:none !important; background:transparent !important; } .ss-card--transparent { background:transparent !important; } .ss-card__header { display:flex; align-items:center; justify-content:space-between; gap:var(--cn-space-md); padding:14px 18px 5px 18px; /*background:var(--cn-card-header-bg);*/ border-bottom:1px solid var(--cn-border-soft); flex-wrap:wrap; } /* =============================== CARD HEADER COLORS (FULL SET) =============================== */ .ss-card__header--primary{ background:var(--cn-primary); color:var(--cn-text-on-primary); } .ss-card__header--secondary{ background:var(--cn-secondary); color:#fff; } .ss-card__header--success{ background:var(--cn-success); color:var(--cn-text-on-success); } .ss-card__header--danger{ background:var(--cn-danger); color:var(--cn-text-on-danger); } .ss-card__header--warning{ background:var(--cn-warning); color:#000; } .ss-card__header--info{ background:var(--cn-info); color:#fff; } .ss-card__header--light{ background:var(--cn-gray-100); color:var(--cn-text); } /* =============================== CARD FOOTER COLORS =============================== */ .ss-card__footer--primary{ background:var(--cn-primary); color:var(--cn-text-on-primary); } .ss-card__footer--secondary{ background:var(--cn-secondary); color:#fff; } .ss-card__footer--success{ background:var(--cn-success); color:var(--cn-text-on-success); } .ss-card__footer--danger{ background:var(--cn-danger); color:var(--cn-text-on-danger); } .ss-card__footer--warning{ background:var(--cn-warning); color:#000; } .ss-card__footer--info{ background:var(--cn-info); color:#fff; } .ss-card__footer--light{ background:var(--cn-gray-100); color:var(--cn-text); } .ss-card__footer--dark{ background:var(--cn-gray-800); color:#fff; } .ss-card__header--no-border { border-bottom:none !important; } .ss-card__title { font-size:var(--cn-font-size-md); font-weight:600; line-height:var(--cn-line-height-tight); color:var(--cn-text-strong); } .ss-card__subtitle { font-size:var(--cn-font-size-sm); color:var(--cn-text-soft); margin-top:var(--cn-space-2xs); } .ss-card__actions { display:flex; align-items:center; gap:var(--cn-space-sm); flex-wrap:wrap; } .ss-card__body { padding:18px; color:var(--cn-text); } .ss-card__footer { padding:12px 18px; background:var(--cn-card-footer-bg); border-top:1px solid var(--cn-border-soft); } .ss-card__footer--no-border { border-top:none !important; } .ss-card__media { position:relative; overflow:hidden; } /* ===================================================== FIELD ===================================================== */ .ss-field { display:grid; grid-template-columns:220px minmax(0,1fr); gap:var(--cn-space-md); padding:10px 0; border-bottom:1px dashed var(--cn-border-color); } .ss-field:last-child { border-bottom:none; } .ss-field__label { font-weight:600; color:var(--cn-text-soft); } .ss-field__value { color:var(--cn-text); min-width:0; } .ss-field__hint { margin-top:var(--cn-space-xs); font-size:var(--cn-font-size-sm); color:var(--cn-text-soft); } .ss-field__action { margin-left:var(--cn-space-sm); } .ss-field--inline { grid-template-columns:150px minmax(0,1fr); } .ss-field--stack { grid-template-columns:1fr; } /* ===================================================== BOX : BASE ===================================================== */ .ss-box { background:var(--cn-bg-subtle); border:1px solid var(--cn-border-color); border-radius:var(--cn-radius-md); padding:12px 14px; } /* ===================================================== BOX : COLOR VARIANTS ===================================================== */ .ss-box--danger { background:color-mix(in srgb, var(--cn-danger) 8%, var(--cn-bg-surface)); border-color:color-mix(in srgb, var(--cn-danger) 24%, var(--cn-border-color)); } .ss-box--success { background:color-mix(in srgb, var(--cn-success) 8%, var(--cn-bg-surface)); border-color:color-mix(in srgb, var(--cn-success) 24%, var(--cn-border-color)); } .ss-box--warning { background:color-mix(in srgb, var(--cn-warning) 12%, var(--cn-bg-surface)); border-color:color-mix(in srgb, var(--cn-warning) 26%, var(--cn-border-color)); } .ss-box--info { background:color-mix(in srgb, var(--cn-info) 10%, var(--cn-bg-surface)); border-color:color-mix(in srgb, var(--cn-info) 26%, var(--cn-border-color)); } /* ===================================================== BOX : BORDER STYLE ===================================================== */ .ss-box--solid { border-style:solid; } .ss-box--dashed { border-style:dashed; } .ss-box--dotted { border-style:dotted; } .ss-box--double { border-style:double; } /* ===================================================== BOX : BORDER RADIUS ===================================================== */ .ss-box--radius-none { border-radius:0; } .ss-box--radius-sm { border-radius:6px; } .ss-box--radius-md { border-radius:12px; } .ss-box--radius-lg { border-radius:18px; } .ss-box--radius-xl { border-radius:24px; } .ss-box--radius-pill { border-radius:999px; } /* ===================================================== BOX : BORDER SIZE ===================================================== */ .ss-box--border-sm { border-width:1px; } .ss-box--border-md { border-width:2px; } .ss-box--border-lg { border-width:3px; } /* ===================================================== BOX : SHADOW ===================================================== */ .ss-box--shadow-none { box-shadow:none; } .ss-box--shadow-sm { box-shadow:0 1px 2px rgba(0,0,0,.05); } .ss-box--shadow-md { box-shadow:0 4px 10px rgba(0,0,0,.08); } .ss-box--shadow-lg { box-shadow:0 10px 25px rgba(0,0,0,.12); } .ss-box--shadow-xl { box-shadow:0 18px 40px rgba(0,0,0,.16); } /* ===================================================== BOX : SPECIAL STYLES ===================================================== */ .ss-box--glass { backdrop-filter:blur(10px); background:rgba(255,255,255,.6); } .ss-box--outline { background:transparent; } .ss-box--soft { border:none; background:var(--cn-bg-subtle); } .ss-box--gradient { background:linear-gradient( 135deg, var(--cn-primary), var(--cn-info) ); color:#fff; border:none; } /* ===================================================== CLUSTER (toolbar layout) ===================================================== */ /* ===================================================== COMMENT / ARTICLE TEXT ===================================================== */ .ss-comment { text-indent:4em; line-height:1.8; padding:10px 0; } .ss-prose { line-height:1.8; color:var(--cn-text); } .ss-prose > * + * { margin-top:var(--cn-space-md); } /* ===================================================== BADGE PURPOSE: - Label / Status / Category / State - สีพื้นฐานเป็น Semantic - สถานะเฉพาะระบบให้ Application Theme เป็นผู้กำหนด ===================================================== */ .ss-badge { --ss-badge-bg:var(--cn-bg-subtle); --ss-badge-color:var(--cn-text-soft); --ss-badge-border:transparent; display:inline-flex; align-items:center; justify-content:center; gap:var(--cn-space-xs); flex:0 0 auto; max-width:100%; padding:5px 10px; border:1px solid var(--ss-badge-border); border-radius:var(--cn-radius-md); background:var(--ss-badge-bg); color:var(--ss-badge-color); font-size:var(--cn-font-size-xs); font-weight:600; line-height:1.2; vertical-align:middle; white-space:nowrap; } /* ===================================================== BADGE SHAPE ===================================================== */ .ss-badge--pill { border-radius:var(--cn-radius-pill); } .ss-badge--square { border-radius:var(--cn-radius-sm); } .ss-badge--round { width:28px; height:28px; padding:0; border-radius:50%; } /* ===================================================== BADGE SIZE ===================================================== */ .ss-badge--sm { padding:3px 8px; font-size:11px; } .ss-badge--lg { padding:7px 13px; font-size:var(--cn-font-size-sm); } /* ===================================================== BADGE TEXT BEHAVIOR ===================================================== */ .ss-badge--wrap { white-space:normal; text-align:center; overflow-wrap:anywhere; } .ss-badge--truncate { display:inline-flex; max-width: var(--ss-badge-max-width,180px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ===================================================== SEMANTIC COLORS ===================================================== */ .ss-badge.ss-primary { --ss-badge-bg: color-mix( in srgb, var(--cn-primary) 14%, transparent ); --ss-badge-color:var(--cn-primary); } .ss-badge.ss-secondary { --ss-badge-bg: color-mix( in srgb, var(--cn-secondary) 14%, transparent ); --ss-badge-color:var(--cn-secondary); } .ss-badge.ss-success { --ss-badge-bg: color-mix( in srgb, var(--cn-success) 14%, transparent ); --ss-badge-color:var(--cn-success); } .ss-badge.ss-danger { --ss-badge-bg: color-mix( in srgb, var(--cn-danger) 14%, transparent ); --ss-badge-color:var(--cn-danger); } .ss-badge.ss-warning { --ss-badge-bg: color-mix( in srgb, var(--cn-warning) 20%, transparent ); --ss-badge-color: var(--cn-warning-text,#8a5d00); } .ss-badge.ss-info { --ss-badge-bg: color-mix( in srgb, var(--cn-info) 14%, transparent ); --ss-badge-color: var(--cn-info-text,var(--cn-info)); } .ss-badge.ss-muted { --ss-badge-bg:var(--cn-bg-subtle); --ss-badge-color:var(--cn-text-soft); } /* ===================================================== SOFT / OUTLINE VARIANTS ===================================================== */ .ss-badge--outline { --ss-badge-bg:transparent; --ss-badge-border: color-mix( in srgb, currentColor 35%, transparent ); } .ss-badge--solid.ss-primary { --ss-badge-bg:var(--cn-primary); --ss-badge-color:var(--cn-text-on-primary,#ffffff); } .ss-badge--solid.ss-secondary { --ss-badge-bg:var(--cn-secondary); --ss-badge-color:var(--cn-text-on-secondary,#ffffff); } .ss-badge--solid.ss-success { --ss-badge-bg:var(--cn-success); --ss-badge-color:#ffffff; } .ss-badge--solid.ss-danger { --ss-badge-bg:var(--cn-danger); --ss-badge-color:#ffffff; } .ss-badge--solid.ss-warning { --ss-badge-bg:var(--cn-warning); --ss-badge-color:var(--cn-warning-text,#5c3d00); } .ss-badge--solid.ss-info { --ss-badge-bg:var(--cn-info); --ss-badge-color:#ffffff; } /* ===================================================== STATUS DOT ===================================================== */ .ss-badge__dot { width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:currentColor; } .ss-badge__icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; line-height:1; } .ss-badge__text { min-width:0; overflow:hidden; text-overflow:ellipsis; } /* ===================================================== ALERT ===================================================== */ .ss-alert { display:flex; gap:var(--cn-space-md); padding:12px 14px; border:1px solid var(--cn-border-color); border-radius:var(--cn-radius-md); background:var(--cn-bg-subtle); } .ss-alert__icon { flex:0 0 auto; } .ss-alert__body { flex:1 1 auto; min-width:0; } .ss-alert__title { font-weight:600; margin-bottom:var(--cn-space-xs); } .ss-alert--success { background:color-mix(in srgb, var(--cn-success) 8%, var(--cn-bg-surface)); border-color:color-mix(in srgb, var(--cn-success) 20%, var(--cn-border-color)); } .ss-alert--danger { background:color-mix(in srgb, var(--cn-danger) 8%, var(--cn-bg-surface)); border-color:color-mix(in srgb, var(--cn-danger) 20%, var(--cn-border-color)); } .ss-alert--warning { background:color-mix(in srgb, var(--cn-warning) 16%, var(--cn-bg-surface)); border-color:color-mix(in srgb, var(--cn-warning) 24%, var(--cn-border-color)); } .ss-alert--info { background:color-mix(in srgb, var(--cn-info) 10%, var(--cn-bg-surface)); border-color:color-mix(in srgb, var(--cn-info) 22%, var(--cn-border-color)); } /* ===================================================== TOOLBAR ===================================================== */ .ss-app-toolbar { /* แถบเต็มความกว้าง */ width:100%; /* ติด Header ด้านบน และ Body ด้านล่าง */ margin:0; padding:0; /* สีเทาอมฟ้าอ่อน ใช้ร่วมกับทุก Theme */ background:#edf2f6; /* สีข้อความเทาเข้มอมน้ำเงิน */ color:#34495e; /* ไม่มีขอบ */ border:0; border-radius:0; box-shadow:none; } /* * Content ภายในอยู่ตามแนว Container ของระบบ */ .ss-toolbar__container { display:flex; flex-wrap:wrap; align-items:center; gap:var(--cn-space-md); width:100%; min-height:30px; margin:0 auto; padding-top:3px; padding-bottom:3px; color:inherit; } /* ===================================================== TOOLBAR AREAS ===================================================== */ .ss-toolbar__start, .ss-toolbar__center, .ss-toolbar__end { display:flex; flex-wrap:wrap; align-items:center; gap:var(--cn-space-sm); color:inherit; } .ss-toolbar__center { margin-left:auto; } .ss-toolbar__end { margin-left:auto; } /* ===================================================== BUTTON COLORS ===================================================== */ .ss-toolbar .ss-button, .ss-toolbar .ss-button:visited { color:#34495e; } .ss-toolbar .ss-button:hover, .ss-toolbar .ss-button:focus-visible { color:#243746; background:rgba(52, 73, 94, 0.08); } .ss-toolbar .ss-button:active { background:rgba(52, 73, 94, 0.14); } /* ชื่อผู้ใช้งาน */ .ss-toolbar__user { color:#526779; } /* Icon ใช้สีเดียวกับข้อความ */ .ss-toolbar i { color:inherit; } /* ===================================================== RESPONSIVE ===================================================== */ @media (max-width:767.98px) { .ss-toolbar__container { gap:var(--cn-space-sm); } .ss-toolbar__center { order:3; flex-basis:100%; margin-left:0; } .ss-toolbar__end { margin-left:auto; } } /* ===================================================== SS BAR Action / Button / Menu Bar ===================================================== */ .ss-bar { display:flex; align-items:center; gap:var(--cn-space-sm); padding:var(--cn-space-sm) var(--cn-space-md); width:100%; background:var(--cn-bg-surface); } /* ===================================================== POSITION ===================================================== */ .ss-bar--top { position:sticky; top:0; z-index:var(--cn-z-sticky); } .ss-bar--bottom { position:sticky; bottom:0; z-index:var(--cn-z-sticky); } /* ===================================================== ALIGNMENT ===================================================== */ .ss-bar--left { justify-content:flex-start; } .ss-bar--center { justify-content:center; } .ss-bar--right { justify-content:flex-end; } .ss-bar--between { justify-content:space-between; } .ss-bar--around { justify-content:space-around; } .ss-bar--spread { justify-content:space-evenly; } /* ===================================================== BORDER ===================================================== */ .ss-bar--border { border:var(--cn-line-xs) solid var(--cn-border-color); } .ss-bar--border-soft { border:var(--cn-line-xs) solid var(--cn-border-soft); } .ss-bar--border-strong { border:var(--cn-line-xs) solid var(--cn-border-strong); } /* ===================================================== BORDER POSITION ===================================================== */ .ss-bar--border-top { border-top:var(--cn-line-xs) solid var(--cn-border-color); } .ss-bar--border-bottom { border-bottom:var(--cn-line-xs) solid var(--cn-border-color); } /* ===================================================== RADIUS ===================================================== */ .ss-bar--radius-none { border-radius:0; } .ss-bar--radius-sm { border-radius:var(--cn-radius-sm); } .ss-bar--radius-md { border-radius:var(--cn-radius-md); } .ss-bar--radius-lg { border-radius:var(--cn-radius-lg); } .ss-bar--radius-pill { border-radius:999px; } /* ===================================================== SHADOW ===================================================== */ .ss-bar--shadow-xs { box-shadow:var(--cn-shadow-xs); } .ss-bar--shadow-sm { box-shadow:var(--cn-shadow-sm); } .ss-bar--shadow-md { box-shadow:var(--cn-shadow-md); } .ss-bar--shadow-lg { box-shadow:var(--cn-shadow-lg); } /* ===================================================== GLASS ===================================================== */ .ss-bar--glass { background:color-mix(in srgb, var(--cn-bg-surface) 70%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } /* ===================================================== FLOATING ===================================================== */ .ss-bar--floating { margin:var(--cn-space-sm); } /* ===================================================== FULL WIDTH CHILD ===================================================== */ .ss-bar--fill > * { flex:1 1 auto; } /* ===================================================== GROUP ===================================================== */ .ss-bar-group { display:flex; align-items:center; gap:var(--cn-space-xs); } /* ===================================================== RESPONSIVE ===================================================== */ @media (max-width:768px) { .ss-bar--responsive { flex-wrap:wrap; } .ss-bar--responsive > * { flex:1 1 auto; } } /* ===================================================== FORM CONTROLS ===================================================== */ .ss-label { display:inline-block; margin-bottom:var(--cn-space-xs); font-weight:600; color:var(--cn-text-strong); } .ss-help { display:block; margin-top:var(--cn-space-xs); font-size:var(--cn-font-size-sm); color:var(--cn-text-soft); } .ss-required::after { content:" *"; color:var(--cn-danger); } .ss-optional::after { content:" (ไม่บังคับ)"; color:var(--cn-text-soft); font-size:var(--cn-font-size-xs); font-weight:400; } .ss-form-field__required { color:var(--cn-danger); } .ss-input, .ss-select, .ss-textarea { display:block; width:100%; max-width:100%; min-height:var(--cn-control-height,40px); padding: var(--cn-control-padding-y,8px) var(--cn-control-padding-x,12px); border:1px solid var(--cn-input-border); border-radius:var(--cn-radius-sm); outline:none; background:var(--cn-input-bg); color:var(--cn-input-text); font:inherit; line-height:var(--cn-line-height-base); transition: border-color var(--cn-motion-base) var(--cn-ease-standard), box-shadow var(--cn-motion-base) var(--cn-ease-standard), background var(--cn-motion-base) var(--cn-ease-standard), color var(--cn-motion-base) var(--cn-ease-standard); } .ss-textarea { min-height:120px; resize:vertical; } .ss-textarea--sm { min-height:80px; } .ss-textarea--lg { min-height:180px; } .ss-textarea--fixed { resize:none; } /* ===================================================== INPUT GROUP Prefix / Input / Suffix / Button ===================================================== */ .ss-input-group { display:flex; align-items:stretch; width:100%; min-width:0; } .ss-input-group > .ss-input, .ss-input-group > .ss-select { min-width:0; flex:1 1 auto; } .ss-input-group > :not(:first-child) { margin-left:-1px; border-top-left-radius:0; border-bottom-left-radius:0; } .ss-input-group > :not(:last-child) { border-top-right-radius:0; border-bottom-right-radius:0; } .ss-input-group__addon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; min-height:var(--cn-control-height,40px); padding-inline:var(--cn-space-md); border:1px solid var(--cn-input-border); background:var(--cn-bg-subtle); color:var(--cn-text-soft); font-size:var(--cn-font-size-sm); white-space:nowrap; } .ss-input-group__button { position:relative; z-index:1; flex:0 0 auto; border-radius:0; } .ss-input-group:focus-within { position:relative; z-index:1; } .ss-input::placeholder, .ss-textarea::placeholder { color:var(--cn-input-placeholder); } .ss-input:focus, .ss-select:focus, .ss-textarea:focus { border-color:var(--cn-primary); box-shadow:var(--cn-focus-ring); } .ss-input:focus-visible, .ss-select:focus-visible, .ss-textarea:focus-visible { outline:none; } .ss-check, .ss-radio { accent-color:var(--cn-primary); } /* ===================================================== CONTROL WITH ICON ===================================================== */ .ss-control-icon { position:relative; min-width:0; } .ss-control-icon > .ss-input { padding-right: calc( var(--cn-touch-target,44px) + var(--cn-space-xs) ); } .ss-control-icon__action { position:absolute; top:50%; right:2px; width:var(--cn-touch-target,44px); height:calc(100% - 4px); display:inline-flex; align-items:center; justify-content:center; transform:translateY(-50%); border:0; border-radius:var(--cn-radius-sm); background:transparent; color:var(--cn-text-soft); cursor:pointer; } .ss-control-icon__action:hover { background:var(--cn-bg-subtle); color:var(--cn-text-strong); } .ss-control-icon__action:focus-visible { outline:none; box-shadow:var(--cn-focus-ring); } /* ===================================================== VALID STATE ===================================================== */ .ss-input.is-valid, .ss-select.is-valid, .ss-textarea.is-valid, .ss-form-field.is-valid .ss-input, .ss-form-field.is-valid .ss-select, .ss-form-field.is-valid .ss-textarea { border-color:var(--cn-success); box-shadow: 0 0 0 3px color-mix( in srgb, var(--cn-success) 12%, transparent ); } /* ===================================================== INVALID STATE ===================================================== */ .ss-input.is-invalid, .ss-select.is-invalid, .ss-textarea.is-invalid, .ss-form-field.is-invalid .ss-input, .ss-form-field.is-invalid .ss-select, .ss-form-field.is-invalid .ss-textarea { border-color:var(--cn-danger); box-shadow: 0 0 0 3px color-mix( in srgb, var(--cn-danger) 14%, transparent ); } .ss-input.is-invalid:focus, .ss-select.is-invalid:focus, .ss-textarea.is-invalid:focus, .ss-form-field.is-invalid .ss-input:focus, .ss-form-field.is-invalid .ss-select:focus, .ss-form-field.is-invalid .ss-textarea:focus { border-color:var(--cn-danger); box-shadow: 0 0 0 3px color-mix( in srgb, var(--cn-danger) 20%, transparent ); } /* ===================================================== READONLY STATE ===================================================== */ .ss-input[readonly], .ss-textarea[readonly], .ss-input.is-readonly, .ss-textarea.is-readonly { cursor:default; background:var(--cn-bg-subtle); color:var(--cn-text-strong); border-color:var(--cn-border-color); } .ss-input[readonly]:focus, .ss-textarea[readonly]:focus, .ss-input.is-readonly:focus, .ss-textarea.is-readonly:focus { border-color:var(--cn-border-color); box-shadow:none; } /* ===================================================== DISABLED STATE ===================================================== */ .ss-input:disabled, .ss-select:disabled, .ss-textarea:disabled, .ss-input.is-disabled, .ss-select.is-disabled, .ss-textarea.is-disabled { cursor:not-allowed; opacity:1; background:var(--cn-disabled-bg,var(--cn-bg-subtle)); color:var(--cn-disabled-text,var(--cn-text-soft)); border-color: var(--cn-disabled-border,var(--cn-border-soft)); } .ss-input:disabled::placeholder, .ss-textarea:disabled::placeholder { color:var(--cn-disabled-text,var(--cn-text-soft)); } /* ===================================================== CONTROL SIZE ===================================================== */ .ss-input--sm, .ss-select--sm, .ss-textarea--sm { min-height:34px; padding:6px 10px; font-size:var(--cn-font-size-sm); } .ss-input--lg, .ss-select--lg, .ss-textarea--lg { min-height:48px; padding:11px 14px; font-size:var(--cn-font-size-lg); } /* ===================================================== FORM DISPLAY Read-only content inside a form layout ===================================================== */ .ss-form-display { width:100%; min-height:var(--cn-control-height,40px); display:flex; align-items:center; padding: var(--cn-control-padding-y,8px) var(--cn-control-padding-x,12px); border:1px solid var(--cn-border-color); border-radius:var(--cn-radius-sm); background:var(--cn-bg-subtle); color:var(--cn-text-strong); overflow-wrap:anywhere; } .ss-form-display--multiline { min-height:96px; align-items:flex-start; white-space:pre-wrap; } /* ===================================================== FORM FIELD PURPOSE: - โครงสร้างกลางสำหรับ Label / Control / Hint / Error - แยกออกจาก .ss-field ซึ่งเป็น Legacy Read-only Field ===================================================== */ .ss-form-field { min-width:0; display:flex; flex-direction:column; align-items:stretch; } .ss-form-field__label { display:inline-flex; align-items:center; gap:var(--cn-space-xs); margin-bottom:var(--cn-space-xs); color:var(--cn-text-strong); font-size:var(--cn-font-size-sm); font-weight:600; line-height:var(--cn-line-height-base); } .ss-form-field.is-invalid .ss-form-field__label { color:var(--cn-danger); } .ss-form-field.is-valid .ss-form-field__label { color:var(--cn-success); } .ss-form-field.is-disabled .ss-form-field__label { color:var(--cn-text-soft); } .ss-form-field__control { position:relative; min-width:0; } .ss-form-field__hint { margin-top:var(--cn-space-xs); color:var(--cn-text-soft); font-size:var(--cn-font-size-sm); line-height:var(--cn-line-height-base); } .ss-form-field__error { margin-top:var(--cn-space-xs); color:var(--cn-danger); font-size:var(--cn-font-size-sm); font-weight:500; line-height:var(--cn-line-height-base); } .ss-form-field__success { margin-top:var(--cn-space-xs); color:var(--cn-success); font-size:var(--cn-font-size-sm); font-weight:500; line-height:var(--cn-line-height-base); } /* ===================================================== FORM GRID PURPOSE: - Standard 12-column grid สำหรับ Form / Detail / Content - รองรับการกำหนดขนาดแยกตาม Device - Base class ใช้กับ Desktop ===================================================== */ .ss-form-row, .ss-grid--12 { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--cn-space-lg); } /* ===================================================== BASE COLUMNS — DESKTOP / DEFAULT ===================================================== */ .ss-col-1 { grid-column:span 1; } .ss-col-2 { grid-column:span 2; } .ss-col-3 { grid-column:span 3; } .ss-col-4 { grid-column:span 4; } .ss-col-5 { grid-column:span 5; } .ss-col-6 { grid-column:span 6; } .ss-col-7 { grid-column:span 7; } .ss-col-8 { grid-column:span 8; } .ss-col-9 { grid-column:span 9; } .ss-col-10 { grid-column:span 10; } .ss-col-11 { grid-column:span 11; } .ss-col-12 { grid-column:span 12; } /* ===================================================== COLUMN POSITION ใช้เมื่อต้องการเริ่มคอลัมน์ที่ตำแหน่งเฉพาะ ===================================================== */ .ss-col-start-1 { grid-column-start:1; } .ss-col-start-2 { grid-column-start:2; } .ss-col-start-3 { grid-column-start:3; } .ss-col-start-4 { grid-column-start:4; } .ss-col-start-5 { grid-column-start:5; } .ss-col-start-6 { grid-column-start:6; } .ss-col-start-7 { grid-column-start:7; } .ss-col-start-8 { grid-column-start:8; } .ss-col-start-9 { grid-column-start:9; } .ss-col-start-10 { grid-column-start:10; } .ss-col-start-11 { grid-column-start:11; } .ss-col-start-12 { grid-column-start:12; } /* ===================================================== FULL ROW ===================================================== */ .ss-col-full { grid-column:1 / -1; } /* ===================================================== TABLE ===================================================== */ .ss-table-wrap { position:relative; width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; border-radius:var(--cn-radius-md); -webkit-overflow-scrolling:touch; scrollbar-width:thin; overscroll-behavior-inline:contain; } .ss-table-wrap:focus-visible { outline:none; box-shadow:var(--cn-focus-ring); } .ss-table { width:100%; max-width:100%; border-collapse:separate; border-spacing:0; font-size:inherit; color:var(--cn-text); background:var(--cn-bg-surface); } /* ===================================================== TABLE WIDTH ===================================================== */ .ss-table--scroll { width:max-content; min-width:100%; } .ss-table--min-640 { min-width:640px; } .ss-table--min-768 { min-width:768px; } .ss-table--min-960 { min-width:960px; } .ss-table--fixed { table-layout:fixed; } .ss-table th, .ss-table td { padding:8px 10px; vertical-align:top; } /* ===================================================== TABLE SIZE ===================================================== */ .ss-table--compact th, .ss-table--compact td { padding:6px 8px; font-size:var(--cn-font-size-sm); } .ss-table--comfortable th, .ss-table--comfortable td { padding:12px 14px; } .ss-table--relaxed th, .ss-table--relaxed td { padding:16px; } /* ===================================================== TABLE CELL BEHAVIOR ===================================================== */ .ss-table .ss-table__nowrap, .ss-table--nowrap th, .ss-table--nowrap td { white-space:nowrap; } .ss-table .ss-table__wrap { white-space:normal; overflow-wrap:anywhere; word-break:break-word; } .ss-table .ss-table__truncate { max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ss-table .ss-table__number { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } .ss-table .ss-table__center { text-align:center; } .ss-table .ss-table__actions { width:1%; text-align:right; white-space:nowrap; } .ss-table .ss-table__actions-group { display:inline-flex; align-items:center; justify-content:flex-end; gap:var(--cn-space-xs); } .ss-table thead th { background:var(--cn-table-head-bg); color:var(--cn-text-strong); font-weight:600; border-bottom:1px solid var(--cn-border-color); } .ss-table--sticky-header thead th { position:sticky; top:var(--ss-table-sticky-top,0); z-index:var(--cn-z-base); } .ss-table tbody td { border-bottom:1px solid var(--cn-border-soft); } .ss-table.striped tbody tr:nth-child(odd) { background:var(--cn-table-stripe); } .ss-table.hover tbody tr:hover { background:var(--cn-table-hover); } .ss-table.border { border:1px solid var(--cn-border-color); } .ss-table.border th, .ss-table.border td { border-right:1px solid var(--cn-border-soft); } .ss-table.border th:last-child, .ss-table.border td:last-child { border-right:none; } /* ===================================================== STICKY COLUMN ===================================================== */ .ss-table--sticky-first th:first-child, .ss-table--sticky-first td:first-child { position:sticky; left:0; z-index:1; background:var(--cn-bg-surface); } .ss-table--sticky-first thead th:first-child { z-index:calc(var(--cn-z-base) + 1); background:var(--cn-table-head-bg); } .ss-table--sticky-first.striped tbody tr:nth-child(odd) td:first-child { background:var(--cn-table-stripe); } .ss-table--sticky-first.hover tbody tr:hover td:first-child { background:var(--cn-table-hover); } /* ===================================================== TABLE EMPTY ===================================================== */ .ss-table__empty { padding:var(--cn-space-2xl) !important; text-align:center; white-space:normal; color:var(--cn-text-soft); background:var(--cn-bg-subtle); } .ss-table__empty-title { color:var(--cn-text-strong); font-weight:600; } .ss-table__empty-text { margin-top:var(--cn-space-xs); font-size:var(--cn-font-size-sm); } .ss-table.round { border:1px solid var(--cn-border-color); border-radius:var(--cn-radius-md); overflow:hidden; } .ss-table.grid th, .ss-table.grid td { border-right:1px solid var(--cn-border-soft); } .ss-table.grid th:last-child, .ss-table.grid td:last-child { border-right:none; } .ss-table td.ss-fill { border-bottom:1px dashed var(--cn-border-strong) !important; } .ss-table .is-selected td { background:var(--cn-table-selected); } /* ===================================== SUB SUMMARY LEVEL 1 (LIGHTEST) ===================================== */ .ss-table tbody tr.ss-summary--l1 th, .ss-table tbody tr.ss-summary--l1 td { background:var(--cn-table-summary-l1-bg); /* จางสุด */ color:var(--cn-table-summary-l1-text); /* เทากลาง */ font-weight: 500; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; } /* ===================================== SUB SUMMARY LEVEL 2 (MEDIUM) ===================================== */ .ss-table tbody tr.ss-summary--l2 th, .ss-table tbody tr.ss-summary--l2 td { background:var(--cn-table-summary-l2-bg); color:var(--cn-table-summary-l2-text); /* เข้มขึ้น */ font-weight: 600; border-top:1px solid var(--cn-border-color); border-bottom: 1px solid #e5e7eb; } /* ===================================== SUB SUMMARY LEVEL 3 (STRONG) ===================================== */ .ss-table tbody tr.ss-summary--l3 th, .ss-table tbody tr.ss-summary--l3 td { background:var(--cn-table-summary-l3-bg); color:var(--cn-table-summary-l3-text); /* เข้มชัด */ font-weight: 600; border-top: 1px solid #d1d5db; border-bottom: 1px solid #d1d5db; } /* ===================================== TFOOT (STRONGEST) ===================================== */ .ss-table tfoot th, .ss-table tfoot td { background:var(--cn-info); color:var(--cn-text-on-info); font-weight:700; border-top:2px solid var(--cn-border-strong); } /* ===================================== NUMBER ALIGN (ALL LEVELS) ===================================== */ .ss-table tr[class*="ss-summary"] td.ss-number, .ss-table tfoot td.ss-number { text-align:right; font-variant-numeric:tabular-nums; } /* ===================================== OPTIONAL INDENT (HIERARCHY FEEL) ===================================== */ .ss-table tbody tr.ss-summary--l1 td:first-child{ padding-left:16px; } .ss-table tbody tr.ss-summary--l2 td:first-child{ padding-left:28px; } .ss-table tbody tr.ss-summary--l3 td:first-child{ padding-left:40px; } /* ===================================== LAST ROW BORDER CONTROL ===================================== */ /* THEAD */ .ss-table--head-last-border thead tr:last-child th { border-bottom:1px solid var(--cn-border-color); } /* TBODY */ .ss-table--body-last-border tbody tr:last-child td { border-bottom:1px solid var(--cn-border-color); } /* TFOOT */ .ss-table--foot-last-border tfoot tr:last-child td { border-bottom:1px solid var(--cn-border-color); } /* ===================================================== BREADCRUMB ===================================================== */ .ss-breadcrumb { margin:0; min-height:30px; } .ss-breadcrumb ul { list-style:none; overflow:hidden; font-size:14px; margin:0 !important; padding:0 !important; } .ss-breadcrumb li a { display:block; position:relative; color:#ffffff !important; } .ss-breadcrumb.arrow li a, .ss-breadcrumb.slash li a, .ss-breadcrumb.backslash li a { padding:6px 0 7px 45px; float:left; } .ss-breadcrumb.convex li { float:left; position:relative; } .ss-breadcrumb.convex li + li { margin-left:-15px; } .ss-breadcrumb.convex li a { padding:6px 35px 7px 25px; border-radius:0 999px 999px 0; } .ss-breadcrumb.concave ul { display:flex; } .ss-breadcrumb.concave li { position:relative; z-index:0; } .ss-breadcrumb.concave li a { padding:6px 30px 7px 18px; } .ss-breadcrumb.arrow li a::before, .ss-breadcrumb.slash li a::before, .ss-breadcrumb.backslash li a::before { content:" "; display:block; width:0; height:0; border-top:50px solid transparent; border-bottom:50px solid transparent; position:absolute; margin-top:-50px; margin-left:1px; left:100%; border-left:30px solid #ffffff; z-index:1; } .ss-breadcrumb.arrow li a::after, .ss-breadcrumb.slash li a::after, .ss-breadcrumb.backslash li a::after { content:" "; display:block; width:0; height:0; border-top:50px solid transparent; border-bottom:50px solid transparent; position:absolute; margin-top:-50px; left:100%; border-left:30px solid hsla(var(--cn-breadcrumb-hue),85%,25%,1); z-index:2; } .ss-breadcrumb.arrow li a::before, .ss-breadcrumb.arrow li a::after { top:50%; } .ss-breadcrumb.slash li a::before, .ss-breadcrumb.slash li a::after { top:0%; } .ss-breadcrumb.backslash li a::before, .ss-breadcrumb.backslash li a::after { top:100%; } .ss-breadcrumb.convex li a::after { content:""; position:absolute; top:-1px; right:0; width:32px; height:32px; background:inherit; border-radius:0 999px 999px 0; border:1px solid #ffffff; border-left:0; z-index:2; box-sizing:border-box; pointer-events:none; } .ss-breadcrumb.concave li:not(:first-child) a::before { content:""; position:absolute; left:-15px; top:50%; transform:translateY(-50%); width:29px; height:29px; background:inherit; border-radius:50%; box-shadow:0 0 0 1px #ffffff; z-index:-1; pointer-events:none; } .ss-breadcrumb.arrow li:first-child a, .ss-breadcrumb.slash li:first-child a, .ss-breadcrumb.backslash li:first-child a { padding-left:15px; } .ss-breadcrumb li:nth-child(1) a{ background:hsla(var(--cn-breadcrumb-hue),85%,25%,1); } .ss-breadcrumb li:nth-child(2) a{ background:hsla(var(--cn-breadcrumb-hue),85%,32%,1); } .ss-breadcrumb li:nth-child(3) a{ background:hsla(var(--cn-breadcrumb-hue),85%,39%,1); } .ss-breadcrumb li:nth-child(4) a{ background:hsla(var(--cn-breadcrumb-hue),85%,46%,1); } .ss-breadcrumb li:nth-child(5) a{ background:hsla(var(--cn-breadcrumb-hue),85%,53%,1); } .ss-breadcrumb li:nth-child(6) a{ background:hsla(var(--cn-breadcrumb-hue),85%,60%,1); } .ss-breadcrumb li:nth-child(7) a{ background:hsla(var(--cn-breadcrumb-hue),85%,67%,1); } .ss-breadcrumb li:nth-child(8) a{ background:hsla(var(--cn-breadcrumb-hue),85%,74%,1); } .ss-breadcrumb li:nth-child(9) a{ background:hsla(var(--cn-breadcrumb-hue),85%,81%,1); } .ss-breadcrumb li:nth-child(10) a{ background:hsla(var(--cn-breadcrumb-hue),85%,88%,1); } .ss-breadcrumb.arrow li:nth-child(2) a:after, .ss-breadcrumb.slash li:nth-child(2) a:after, .ss-breadcrumb.backslash li:nth-child(2) a:after { border-left-color:hsla(var(--cn-breadcrumb-hue),85%,32%,1); } .ss-breadcrumb.arrow li:nth-child(3) a:after, .ss-breadcrumb.slash li:nth-child(3) a:after, .ss-breadcrumb.backslash li:nth-child(3) a:after { border-left-color:hsla(var(--cn-breadcrumb-hue),85%,39%,1); } .ss-breadcrumb.arrow li:nth-child(4) a:after, .ss-breadcrumb.slash li:nth-child(4) a:after, .ss-breadcrumb.backslash li:nth-child(4) a:after { border-left-color:hsla(var(--cn-breadcrumb-hue),85%,46%,1); } .ss-breadcrumb.arrow li:nth-child(5) a:after, .ss-breadcrumb.slash li:nth-child(5) a:after, .ss-breadcrumb.backslash li:nth-child(5) a:after { border-left-color:hsla(var(--cn-breadcrumb-hue),85%,53%,1); } .ss-breadcrumb.arrow li:nth-child(6) a:after, .ss-breadcrumb.slash li:nth-child(6) a:after, .ss-breadcrumb.backslash li:nth-child(6) a:after { border-left-color:hsla(var(--cn-breadcrumb-hue),85%,60%,1); } .ss-breadcrumb.arrow li:nth-child(7) a:after, .ss-breadcrumb.slash li:nth-child(7) a:after, .ss-breadcrumb.backslash li:nth-child(7) a:after { border-left-color:hsla(var(--cn-breadcrumb-hue),85%,67%,1); } .ss-breadcrumb.arrow li:nth-child(8) a:after, .ss-breadcrumb.slash li:nth-child(8) a:after, .ss-breadcrumb.backslash li:nth-child(8) a:after { border-left-color:hsla(var(--cn-breadcrumb-hue),85%,74%,1); } .ss-breadcrumb.arrow li:nth-child(9) a:after, .ss-breadcrumb.slash li:nth-child(9) a:after, .ss-breadcrumb.backslash li:nth-child(9) a:after { border-left-color:hsla(var(--cn-breadcrumb-hue),85%,81%,1); } .ss-breadcrumb.arrow li:nth-child(10) a:after, .ss-breadcrumb.slash li:nth-child(10) a:after, .ss-breadcrumb.backslash li:nth-child(10) a:after { border-left-color:hsla(var(--cn-breadcrumb-hue),85%,88%,1); } .ss-breadcrumb li:last-child a { background:#ffffff; color:#3f3f3f !important; pointer-events:none; cursor:default; } .ss-breadcrumb.arrow li:last-child a::before, .ss-breadcrumb.arrow li:last-child a::after, .ss-breadcrumb.slash li:last-child a::before, .ss-breadcrumb.slash li:last-child a::after, .ss-breadcrumb.backslash li:last-child a::before, .ss-breadcrumb.backslash li:last-child a::after { width:30px; height:30px; border:none; background:#ffffff; margin-top:0; top:0; } .ss-breadcrumb li a:hover { background:hsla(54,85%,45%,1); color:#000000 !important; } .ss-breadcrumb.arrow li a:hover:after, .ss-breadcrumb.slash li a:hover:after, .ss-breadcrumb.backslash li a:hover:after { border-left-color:hsla(54,85%,45%,1) !important; } .ss-breadcrumb.convex li:nth-child(1){ z-index:10; } .ss-breadcrumb.convex li:nth-child(2){ z-index:9; } .ss-breadcrumb.convex li:nth-child(3){ z-index:8; } .ss-breadcrumb.convex li:nth-child(4){ z-index:7; } .ss-breadcrumb.convex li:nth-child(5){ z-index:6; } .ss-breadcrumb.convex li:nth-child(6){ z-index:5; } .ss-breadcrumb.convex li:nth-child(7){ z-index:4; } .ss-breadcrumb.convex li:nth-child(8){ z-index:3; } .ss-breadcrumb.convex li:nth-child(9){ z-index:2; } .ss-breadcrumb.convex li:nth-child(10){ z-index:1; } /* ===================================================== COLLAPSE ===================================================== */ .ss-collapse{ width:100%; } .ss-collapse--spaced{ margin-bottom:var(--cn-space-sm); } /* ===== Header ===== */ .ss-collapse__header{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; padding:var(--cn-space-md) var(--cn-space-lg); user-select:none; } .ss-collapse__title{ display:flex; align-items:center; gap:var(--cn-space-sm); } .ss-collapse__arrow{ margin-left:auto; display:flex; align-items:center; justify-content:center; transition:transform var(--cn-motion-base) var(--cn-ease-standard); } .ss-collapse--open .ss-collapse__arrow{ transform:rotate(180deg); } /* ===== Body ===== */ .ss-collapse__body{ display:none; padding:var(--cn-space-lg); } .ss-collapse--open .ss-collapse__body{ display:block; } /* ===== Modifiers ===== */ .ss-collapse--bordered{ border:var(--cn-line-xs) solid var(--cn-border-color); } .ss-collapse--rounded{ border-radius:var(--cn-radius-md); overflow:hidden; } .ss-collapse--shadow{ box-shadow:var(--cn-shadow-sm); } .ss-collapse--disabled{ opacity:.5; pointer-events:none; } /* =============================== HEADER COLORS =============================== */ .ss-collapse__header--primary{ background:var(--cn-primary); color:#fff; } .ss-collapse__header--secondary{ background:var(--cn-secondary); color:#fff; } .ss-collapse__header--success{ background:var(--cn-success); color:#fff; } .ss-collapse__header--danger{ background:var(--cn-danger); color:#fff; } .ss-collapse__header--warning{ background:var(--cn-warning); color:#000; } .ss-collapse__header--info{ background:var(--cn-info); color:#fff; } .ss-collapse__header--light{ background:var(--cn-light); color:var(--cn-text); } .ss-collapse__header--dark{ background:var(--cn-dark); color:#fff; } /* =============================== FOOTER COLORS =============================== */ .ss-collapse__footer--primary{ background:var(--cn-primary); color:#fff; } .ss-collapse__footer--secondary{ background:var(--cn-secondary); color:#fff; } .ss-collapse__footer--success{ background:var(--cn-success); color:#fff; } .ss-collapse__footer--danger{ background:var(--cn-danger); color:#fff; } .ss-collapse__footer--warning{ background:var(--cn-warning); color:#000; } .ss-collapse__footer--info{ background:var(--cn-info); color:#fff; } .ss-collapse__footer--light{ background:var(--cn-light); color:var(--cn-text); } .ss-collapse__footer--dark{ background:var(--cn-dark); color:#fff; } } /* ========================================================= ss-overlays ========================================================= */ @layer ss-overlays { body.ss-modal-open { overflow:hidden; } /* ===================================================== LOADING ===================================================== */ .ss-loading { display:flex; align-items:center; justify-content:center; background:var(--cn-overlay-bg); color:var(--cn-text); } /* ===================================================== LOADING : FULLSCREEN ===================================================== */ .ss-loading--fullscreen { position:fixed; inset:0; z-index:var(--cn-z-modal); width:100%; height:100%; padding:var(--cn-space-lg); backdrop-filter:blur(2px); } /* ===================================================== LOADING : HIDDEN ===================================================== */ .ss-loading[hidden] { display:none !important; } /* ===================================================== LOADING : CONTENT ===================================================== */ .ss-loading__content { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--cn-space-md); min-width:180px; padding: var(--cn-space-xl) var(--cn-space-2xl); border:1px solid var(--cn-border-soft); border-radius:var(--cn-radius-lg); background:var(--cn-bg-surface); box-shadow:var(--cn-shadow-lg); text-align:center; } /* ===================================================== LOADING : SPINNER ===================================================== */ .ss-loading__spinner { display:block; width:42px; height:42px; border:4px solid var(--cn-gray-200); border-top-color:var(--cn-primary); border-radius:var(--cn-radius-circle); animation: ss-loading-spin .8s linear infinite; } /* ===================================================== LOADING : TEXT ===================================================== */ .ss-loading__text { color:var(--cn-text-strong); font-size:var(--cn-font-size-sm); font-weight:600; line-height:var(--cn-line-height-base); } /* ===================================================== LOADING : BODY STATE ===================================================== */ body.ss-loading-active { overflow:hidden; } /* ===================================================== LOADING : ANIMATION ===================================================== */ @keyframes ss-loading-spin { to { transform:rotate(360deg); } } .ss-modal { position:fixed; inset:0; z-index:var(--cn-z-modal); display:none; align-items:center; justify-content:center; padding: max(var(--cn-space-xl),var(--cn-safe-top,0px)) max(var(--cn-space-xl),var(--cn-safe-right,0px)) max(var(--cn-space-xl),var(--cn-safe-bottom,0px)) max(var(--cn-space-xl),var(--cn-safe-left,0px)); overflow-y:auto; background:var(--cn-overlay-bg); -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } .ss-modal.is-open { display:flex; } .ss-modal__dialog { --ss-modal-width:720px; --ss-modal-max-height: min( 90vh, 90dvh ); position:relative; display:flex; flex-direction:column; width:min(100%,var(--ss-modal-width)); max-height:var(--ss-modal-max-height); overflow:hidden; border:1px solid var(--cn-border-color); border-radius:var(--cn-radius-lg); background:var(--cn-bg-elevated); color:var(--cn-text); box-shadow:var(--cn-shadow-lg); } /* ===================================================== MODAL SIZE ===================================================== */ .ss-modal__dialog--xs { --ss-modal-width:360px; } .ss-modal__dialog--sm { --ss-modal-width:420px; } .ss-modal__dialog--lg { --ss-modal-width:960px; } .ss-modal__dialog--xl { --ss-modal-width:1200px; } .ss-modal__dialog--full { --ss-modal-width:100%; width:100%; height:100%; max-height:none; border-radius:0; } /* ========================= MODAL TYPES ========================= */ .ss-modal--primary .ss-modal__header{ background:var(--cn-primary); color:#fff; } .ss-modal--success .ss-modal__header{ background:var(--cn-success); color:#fff; } .ss-modal--danger .ss-modal__header{ background:var(--cn-danger); color:#fff; } .ss-modal--warning .ss-modal__header{ background:var(--cn-warning); color:#000; } .ss-modal--info .ss-modal__header{ background:var(--cn-info); color:#fff; } .ss-modal--neutral .ss-modal__header{ background:var(--cn-light); color:var(--cn-text); } .ss-modal__header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--cn-space-md); flex:0 0 auto; padding:14px 18px; border-bottom:1px solid var(--cn-border-soft); color:var(--cn-text-strong); } .ss-modal__heading { min-width:0; flex:1 1 auto; } .ss-modal__title { color:inherit; font-size:var(--cn-font-size-lg); font-weight:700; line-height:var(--cn-line-height-tight); overflow-wrap:anywhere; } .ss-modal__subtitle { margin-top:var(--cn-space-xs); color:var(--cn-text-soft); font-size:var(--cn-font-size-sm); line-height:var(--cn-line-height-base); } .ss-modal__close { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:var(--cn-touch-target,44px); height:var(--cn-touch-target,44px); margin:-8px -8px -8px 0; padding:0; border:0; border-radius:var(--cn-radius-md); background:transparent; color:inherit; cursor:pointer; } .ss-modal__close:hover { background: color-mix( in srgb, currentColor 10%, transparent ); } .ss-modal__close:focus-visible { outline:none; box-shadow:var(--cn-focus-ring); } .ss-modal__body { min-height:0; flex:1 1 auto; padding:18px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } .ss-modal__body--flush { padding:0; } .ss-modal__body--center { display:flex; align-items:center; justify-content:center; text-align:center; } .ss-modal__footer { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:var(--cn-space-sm); flex:0 0 auto; padding:12px 18px; border-top:1px solid var(--cn-border-soft); background:var(--cn-bg-subtle); } .ss-modal__footer--between { justify-content:space-between; } .ss-modal__footer--start { justify-content:flex-start; } .ss-modal__footer--center { justify-content:center; } .ss-modal__footer--fill > * { flex:1 1 0; min-width:0; } /* ===================================================== MODAL POSITION ===================================================== */ .ss-modal--top { align-items:flex-start; } .ss-modal--top .ss-modal__dialog { margin-top:var(--cn-space-xl); } .ss-modal--bottom { align-items:flex-end; padding-bottom:0; } .ss-modal--bottom .ss-modal__dialog { width:100%; max-width:none; border-bottom-right-radius:0; border-bottom-left-radius:0; } .ss-modal--scroll-page { align-items:flex-start; } .ss-modal--scroll-page .ss-modal__dialog { max-height:none; overflow:visible; } /* ===================================================== MODAL LOADING ===================================================== */ .ss-modal__loading { position:absolute; inset:0; z-index:2; display:none; align-items:center; justify-content:center; flex-direction:column; gap:var(--cn-space-md); padding:var(--cn-space-xl); background: color-mix( in srgb, var(--cn-bg-elevated) 88%, transparent ); backdrop-filter:blur(2px); } .ss-modal__dialog.is-loading .ss-modal__loading { display:flex; } .ss-modal__dialog.is-loading .ss-modal__header, .ss-modal__dialog.is-loading .ss-modal__body, .ss-modal__dialog.is-loading .ss-modal__footer { pointer-events:none; } .ss-tooltip { position:relative; display:inline-flex; align-items:center; } .ss-tooltip__text { position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); padding:6px 8px; border-radius:var(--cn-radius-xs); background:#111827; color:#ffffff; font-size:var(--cn-font-size-xs); white-space:nowrap; opacity:0; visibility:hidden; transition:opacity var(--cn-motion-fast) var(--cn-ease-standard); z-index:var(--cn-z-tooltip); } .ss-tooltip:hover .ss-tooltip__text { opacity:1; visibility:visible; } .ss-overlay { position:fixed; inset:0; background:var(--cn-overlay-bg); z-index:var(--cn-z-overlay); } /* ===================================================== RESPONSIVE MODAL ===================================================== */ @media (max-width:768px) { .ss-modal { padding: max(var(--cn-space-md),var(--cn-safe-top,0px)) max(var(--cn-space-md),var(--cn-safe-right,0px)) max(var(--cn-space-md),var(--cn-safe-bottom,0px)) max(var(--cn-space-md),var(--cn-safe-left,0px)); } .ss-modal__dialog { --ss-modal-max-height: calc( 100dvh - var(--cn-space-xl) - var(--cn-safe-top,0px) - var(--cn-safe-bottom,0px) ); } .ss-modal__header { padding:12px 14px; } .ss-modal__body { padding:14px; } .ss-modal__footer { padding:12px 14px; } } @media (max-width:576px) { /* ================================================= FULLSCREEN MOBILE ================================================= */ .ss-modal--fullscreen-mobile { padding:0; } .ss-modal--fullscreen-mobile .ss-modal__dialog { width:100%; height:100%; max-height:none; border:0; border-radius:0; } .ss-modal--fullscreen-mobile .ss-modal__header { padding-top: calc( 12px + var(--cn-safe-top,0px) ); padding-right: max(14px,var(--cn-safe-right,0px)); padding-left: max(14px,var(--cn-safe-left,0px)); } .ss-modal--fullscreen-mobile .ss-modal__body { padding-right: max(14px,var(--cn-safe-right,0px)); padding-left: max(14px,var(--cn-safe-left,0px)); } .ss-modal--fullscreen-mobile .ss-modal__footer { padding-right: max(14px,var(--cn-safe-right,0px)); padding-bottom: calc( 12px + var(--cn-safe-bottom,0px) ); padding-left: max(14px,var(--cn-safe-left,0px)); } /* ================================================= STACK FOOTER ACTIONS ================================================= */ .ss-modal__footer--stack-mobile { flex-direction:column; align-items:stretch; } .ss-modal__footer--stack-mobile > * { width:100%; } .ss-modal__footer--fill-mobile > * { flex:1 1 0; } /* ================================================= BOTTOM SHEET MOBILE ================================================= */ .ss-modal--bottom { padding: var(--cn-space-md) 0 0; } .ss-modal--bottom .ss-modal__dialog { max-height: calc( 92dvh - var(--cn-safe-top,0px) ); border-bottom:0; border-radius: var(--cn-radius-xl) var(--cn-radius-xl) 0 0; } .ss-modal--bottom .ss-modal__footer { padding-bottom: calc( 12px + var(--cn-safe-bottom,0px) ); } } @media (orientation:landscape) and (max-height:500px) { .ss-modal { align-items:flex-start; padding-top: max( var(--cn-space-sm), var(--cn-safe-top,0px) ); padding-bottom: max( var(--cn-space-sm), var(--cn-safe-bottom,0px) ); } .ss-modal__dialog { --ss-modal-max-height: calc( 100dvh - var(--cn-space-md) - var(--cn-safe-top,0px) - var(--cn-safe-bottom,0px) ); } } } /* ========================================================= ss-motion ========================================================= */ @layer ss-motion { @keyframes ss-fade-in { from { opacity:0; } to { opacity:1; } } @keyframes ss-slide-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } @keyframes ss-slide-down { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } } @keyframes ss-scale-in { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } } @keyframes ss-pulse { 0%,100% { opacity:1; } 50% { opacity:.55; } } @keyframes ss-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } .ss-animate-fade-in { animation:ss-fade-in var(--cn-motion-base) var(--cn-ease-standard); } .ss-animate-slide-up { animation:ss-slide-up var(--cn-motion-base) var(--cn-ease-standard); } .ss-animate-slide-down { animation:ss-slide-down var(--cn-motion-base) var(--cn-ease-standard); } .ss-animate-scale-in { animation:ss-scale-in var(--cn-motion-base) var(--cn-ease-standard); } .ss-animate-pulse { animation:ss-pulse 1.4s ease-in-out infinite; } .ss-animate-spin { animation:ss-spin .9s linear infinite; } @media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } } } /* ========================================================= ss-themes ========================================================= */ /* ========================================================= RESPONSIVE SYSTEM Mobile-first columns + opt-in mobile behaviors ========================================================= */ /* ========================================================= 1. RESPONSIVE COLUMNS — MOBILE FIRST Base columns: .ss-col-1 ... .ss-col-12 ต้องประกาศไว้นอก Responsive section อยู่แล้ว Breakpoints: sm >= 576px md >= 768px lg >= 992px xl >= 1200px ========================================================= */ /* --------------------------------------------------------- SMALL DEVICE COLUMNS — >= 576px --------------------------------------------------------- */ @media (min-width:576px) { .ss-col-sm-1 { grid-column:span 1; } .ss-col-sm-2 { grid-column:span 2; } .ss-col-sm-3 { grid-column:span 3; } .ss-col-sm-4 { grid-column:span 4; } .ss-col-sm-5 { grid-column:span 5; } .ss-col-sm-6 { grid-column:span 6; } .ss-col-sm-7 { grid-column:span 7; } .ss-col-sm-8 { grid-column:span 8; } .ss-col-sm-9 { grid-column:span 9; } .ss-col-sm-10 { grid-column:span 10; } .ss-col-sm-11 { grid-column:span 11; } .ss-col-sm-12 { grid-column:span 12; } .ss-col-sm-full { grid-column:1 / -1; } } /* --------------------------------------------------------- MEDIUM DEVICE COLUMNS — >= 768px --------------------------------------------------------- */ @media (min-width:768px) { .ss-col-md-1 { grid-column:span 1; } .ss-col-md-2 { grid-column:span 2; } .ss-col-md-3 { grid-column:span 3; } .ss-col-md-4 { grid-column:span 4; } .ss-col-md-5 { grid-column:span 5; } .ss-col-md-6 { grid-column:span 6; } .ss-col-md-7 { grid-column:span 7; } .ss-col-md-8 { grid-column:span 8; } .ss-col-md-9 { grid-column:span 9; } .ss-col-md-10 { grid-column:span 10; } .ss-col-md-11 { grid-column:span 11; } .ss-col-md-12 { grid-column:span 12; } .ss-col-md-full { grid-column:1 / -1; } } /* --------------------------------------------------------- LARGE DEVICE COLUMNS — >= 992px --------------------------------------------------------- */ @media (min-width:992px) { .ss-col-lg-1 { grid-column:span 1; } .ss-col-lg-2 { grid-column:span 2; } .ss-col-lg-3 { grid-column:span 3; } .ss-col-lg-4 { grid-column:span 4; } .ss-col-lg-5 { grid-column:span 5; } .ss-col-lg-6 { grid-column:span 6; } .ss-col-lg-7 { grid-column:span 7; } .ss-col-lg-8 { grid-column:span 8; } .ss-col-lg-9 { grid-column:span 9; } .ss-col-lg-10 { grid-column:span 10; } .ss-col-lg-11 { grid-column:span 11; } .ss-col-lg-12 { grid-column:span 12; } .ss-col-lg-full { grid-column:1 / -1; } } /* --------------------------------------------------------- EXTRA LARGE DEVICE COLUMNS — >= 1200px --------------------------------------------------------- */ @media (min-width:1200px) { .ss-col-xl-1 { grid-column:span 1; } .ss-col-xl-2 { grid-column:span 2; } .ss-col-xl-3 { grid-column:span 3; } .ss-col-xl-4 { grid-column:span 4; } .ss-col-xl-5 { grid-column:span 5; } .ss-col-xl-6 { grid-column:span 6; } .ss-col-xl-7 { grid-column:span 7; } .ss-col-xl-8 { grid-column:span 8; } .ss-col-xl-9 { grid-column:span 9; } .ss-col-xl-10 { grid-column:span 10; } .ss-col-xl-11 { grid-column:span 11; } .ss-col-xl-12 { grid-column:span 12; } .ss-col-xl-full { grid-column:1 / -1; } } /* ========================================================= 2. RESPONSIVE LAYOUT ADJUSTMENTS ========================================================= */ /* --------------------------------------------------------- LARGE AND BELOW — < 1200px --------------------------------------------------------- */ @media (max-width:1199.98px) { .ss-grid--4 { grid-template-columns: repeat(3,minmax(0,1fr)); } } /* --------------------------------------------------------- MEDIUM AND BELOW — < 992px --------------------------------------------------------- */ @media (max-width:991.98px) { .ss-grid--4, .ss-grid--3 { grid-template-columns: repeat(2,minmax(0,1fr)); } .ss-sidebar-layout, .ss-split { grid-template-columns:1fr; } } /* --------------------------------------------------------- SMALL AND BELOW — < 768px --------------------------------------------------------- */ @media (max-width:767.98px) { .ss-container { padding-inline:var(--cn-space-md); } .ss-grid--4, .ss-grid--3, .ss-grid--2 { grid-template-columns:1fr; } .ss-card__header { padding:12px 14px; } .ss-card__body { padding:14px; } .ss-card__footer { display:flex; flex-direction:column; gap:var(--cn-space-sm); padding:12px 14px; } .ss-card__footer--start { align-items:flex-start; } .ss-card__footer--center { align-items:center; } .ss-card__footer--end { align-items:flex-end; } .ss-card__footer--between { align-items:stretch; } .ss-field { grid-template-columns:1fr; gap:var(--cn-space-xs); } .ss-field__label { margin-bottom:2px; font-size:var(--cn-font-size-sm); } .ss-toolbar { flex-direction:column; align-items:stretch; } .ss-toolbar__start, .ss-toolbar__end { width:100%; } .ss-modal { padding:var(--cn-space-md); } } /* ========================================================= 3. MOBILE COMPONENT BEHAVIORS — < 576px ========================================================= */ @media (max-width:575.98px) { /* ----------------------------------------------------- FORM ROW ทุก Field เต็มแถวบนมือถือ ----------------------------------------------------- */ .ss-form-row > * { grid-column:1 / -1; } /* ----------------------------------------------------- STACKED TABLE ต้องกำหนด data-label ให้ทุก td ----------------------------------------------------- */ .ss-table--stack-mobile { border-collapse:separate; border-spacing:0 var(--cn-space-md); background:transparent; } .ss-table--stack-mobile thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; } .ss-table--stack-mobile tbody, .ss-table--stack-mobile tr, .ss-table--stack-mobile td { display:block; width:100%; } .ss-table--stack-mobile tbody tr { overflow:hidden; border:1px solid var(--cn-border-color); border-radius:var(--cn-radius-md); background:var(--cn-bg-surface); box-shadow:var(--cn-shadow-xs); } .ss-table--stack-mobile tbody td { display:grid; grid-template-columns: minmax(110px,40%) minmax(0,1fr); gap:var(--cn-space-md); padding:10px 12px; border-right:0; border-bottom:1px solid var(--cn-border-soft); text-align:left; white-space:normal; overflow-wrap:anywhere; } .ss-table--stack-mobile tbody td:last-child { border-bottom:0; } .ss-table--stack-mobile tbody td::before { content:attr(data-label); color:var(--cn-text-soft); font-size:var(--cn-font-size-sm); font-weight:600; } .ss-table--stack-mobile tbody td.ss-table__actions { display:block; width:100%; } .ss-table--stack-mobile .ss-table__actions::before { display:none; } .ss-table--stack-mobile .ss-table__actions-group { display:flex; width:100%; } .ss-table--stack-mobile .ss-table__actions-group > * { flex:1 1 0; min-width:0; } /* ----------------------------------------------------- INPUT GROUP ----------------------------------------------------- */ .ss-input-group--stack-mobile { flex-direction:column; } .ss-input-group--stack-mobile > * { width:100%; margin-left:0 !important; border-radius:var(--cn-radius-sm) !important; } .ss-input-group--stack-mobile > :not(:first-child) { margin-top:var(--cn-space-xs); } } /* ========================================================= 4. SMALL MOBILE BEHAVIORS — < 480px ใช้ Modifier เท่านั้น ไม่เปลี่ยน Component ทุกตัวทั่วทั้งระบบ ========================================================= */ @media (max-width:479.98px) { /* ----------------------------------------------------- RESPONSIVE CLUSTER ----------------------------------------------------- */ .ss-cluster--responsive { flex-direction:column; align-items:stretch; } /* ----------------------------------------------------- RESPONSIVE BLOCK BUTTON ----------------------------------------------------- */ .ss-button--responsive-block { width:100%; } /* ----------------------------------------------------- STACKED MOBILE ACTIONS ----------------------------------------------------- */ .ss-actions--stack-mobile, .ss-card__actions--stack-mobile { width:100%; flex-direction:column; align-items:stretch; } .ss-actions--stack-mobile > *, .ss-card__actions--stack-mobile > * { width:100%; flex:none; } /* ----------------------------------------------------- FILL MOBILE ACTIONS ----------------------------------------------------- */ .ss-actions--fill-mobile, .ss-card__actions--fill-mobile { width:100%; } .ss-actions--fill-mobile > *, .ss-card__actions--fill-mobile > * { flex:1 1 0; min-width:0; } /* ----------------------------------------------------- RESPONSIVE BADGE ----------------------------------------------------- */ .ss-badge--responsive { max-width:100%; white-space:normal; text-align:center; overflow-wrap:anywhere; } } /* ========================================================= PRINT ========================================================= */ .ss-print-only { display:none; } @media print { body { background:var(--cn-print-bg,#ffffff) !important; color:var(--cn-print-text,#000000) !important; } /* Utility control */ .ss-no-print { display:none !important; } .ss-print-only { display:block !important; } /* Optional helpers */ .ss-print-card { box-shadow:none !important; border:1px solid #cccccc !important; } .ss-modal, .ss-tooltip__text { display:none !important; } .ss-card { box-shadow:none !important; border:1px solid #cccccc !important; } } /* ===================================================== POPUP MENU - ใช้ร่วมกับ Popup ใต้ Element - ใช้ร่วมกับ Windows-style Context Menu - JavaScript กำหนด top / left แบบ inline ===================================================== */ .ss-popup-menu { position:fixed; top:0; left:0; z-index:var(--cn-z-tooltip); display:block; width:max-content; min-width:220px; max-width:calc(100vw - var(--cn-space-2xl)); max-height:calc(100vh - var(--cn-space-2xl)); margin:0; padding:var(--cn-space-xs); overflow-x:hidden; overflow-y:auto; border: var(--cn-line-xs) solid var(--cn-border-color); border-radius:var(--cn-radius-md); background:var(--cn-bg-elevated); color:var(--cn-text); box-shadow:var(--cn-shadow-lg); box-sizing:border-box; opacity:0; visibility:hidden; pointer-events:none; transform: translateY( calc(var(--cn-space-xs) * -1) ) scale(.99); transform-origin:top left; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color: var(--cn-gray-400) transparent; transition: opacity var(--cn-motion-fast) var(--cn-ease-standard), transform var(--cn-motion-fast) var(--cn-ease-standard), visibility 0s linear var(--cn-motion-fast); } /* ===================================================== OPEN STATE ===================================================== */ .ss-popup-menu.is-open { opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0) scale(1); transition: opacity var(--cn-motion-fast) var(--cn-ease-standard), transform var(--cn-motion-fast) var(--cn-ease-standard), visibility 0s; } /* ===================================================== PLACEMENT ===================================================== */ .ss-popup-menu[data-placement^="top"] { transform: translateY(var(--cn-space-xs)) scale(.99); transform-origin:bottom left; } .ss-popup-menu[data-placement^="top"].is-open { transform: translateY(0) scale(1); } .ss-popup-menu[data-placement$="end"] { transform-origin:top right; } .ss-popup-menu[data-placement^="top"][data-placement$="end"] { transform-origin:bottom right; } /* ===================================================== MENU ITEM ===================================================== */ .ss-popup-menu__item { display:grid; grid-template-columns: var(--cn-space-2xl) minmax(0, 1fr) auto; align-items:center; gap:var(--cn-space-sm); width:100%; min-width:0; min-height:var(--cn-touch-target); margin:0; padding: var(--cn-space-sm) var(--cn-space-md); border:0; border-radius:var(--cn-radius-sm); appearance:none; -webkit-appearance:none; background:transparent; color:var(--cn-text); font:inherit; font-size:var(--cn-font-size-sm); line-height:var(--cn-line-height-base); text-align:start; text-decoration:none; white-space:nowrap; box-sizing:border-box; cursor:default; user-select:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition: background var(--cn-motion-fast) var(--cn-ease-standard), color var(--cn-motion-fast) var(--cn-ease-standard); } .ss-popup-menu__item:hover, .ss-popup-menu__item:focus, .ss-popup-menu__item:focus-visible { outline:none; background:var(--cn-bg-subtle); color:var(--cn-text-strong); } .ss-popup-menu__item:focus-visible { box-shadow:var(--cn-focus-ring); } .ss-popup-menu__item:active { background: color-mix( in srgb, var(--cn-bg-subtle) 82%, var(--cn-border-color) ); } /* ===================================================== DISABLED ITEM ===================================================== */ .ss-popup-menu__item:disabled, .ss-popup-menu__item[aria-disabled="true"] { background:transparent; color:var(--cn-disabled-text); cursor:not-allowed; pointer-events:none; } /* ===================================================== ITEM CONTENT ===================================================== */ .ss-popup-menu__icon { display:inline-flex; align-items:center; justify-content:center; width:var(--cn-space-2xl); height:var(--cn-space-2xl); color:var(--cn-text-soft); line-height:1; flex:0 0 var(--cn-space-2xl); } .ss-popup-menu__label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:inherit; } .ss-popup-menu__shortcut { margin-inline-start:var(--cn-space-xl); color:var(--cn-text-soft); font-size:var(--cn-font-size-xs); line-height:var(--cn-line-height-tight); white-space:nowrap; } /* ===================================================== ACTIVE ITEM ===================================================== */ .ss-popup-menu__item.is-active, .ss-popup-menu__item[aria-current="true"], .ss-popup-menu__item[aria-current="page"], .ss-popup-menu__item[aria-selected="true"] { background:var(--cn-bg-subtle); color:var(--cn-text-strong); } /* ===================================================== DANGER ITEM ===================================================== */ .ss-popup-menu__item--danger { color:var(--cn-danger); } .ss-popup-menu__item--danger .ss-popup-menu__icon { color:inherit; } .ss-popup-menu__item--danger:hover, .ss-popup-menu__item--danger:focus, .ss-popup-menu__item--danger:focus-visible { background: color-mix( in srgb, var(--cn-danger) 12%, transparent ); color: color-mix( in srgb, var(--cn-danger) 82%, black ); } /* ===================================================== SEPARATOR ===================================================== */ .ss-popup-menu__separator { height:var(--cn-line-xs); margin: var(--cn-space-xs) var(--cn-space-sm); border:0; background:var(--cn-border-soft); pointer-events:none; } /* ===================================================== SIZE ===================================================== */ .ss-popup-menu--sm { min-width:180px; } .ss-popup-menu--lg { min-width:280px; } /* ===================================================== SCROLLBAR ===================================================== */ .ss-popup-menu::-webkit-scrollbar { width:var(--cn-space-sm); height:var(--cn-space-sm); } .ss-popup-menu::-webkit-scrollbar-thumb { border-radius:var(--cn-radius-pill); background:var(--cn-gray-400); } .ss-popup-menu::-webkit-scrollbar-track { background:transparent; } /* ===================================================== DYNAMIC VIEWPORT ===================================================== */ @supports (height:100dvh) { .ss-popup-menu { max-width: calc( 100dvw - var(--cn-space-2xl) ); max-height: calc( 100dvh - var(--cn-space-2xl) ); } } /* ===================================================== REDUCED MOTION ===================================================== */ @media (prefers-reduced-motion:reduce) { .ss-popup-menu, .ss-popup-menu__item { transition:none; } }