/*
* theme-sisaket.css
* ============================================================================
* ชั้นธีมของโปรเจกต์ ทับ Sneat "theme-default" (สีม่วง #696cff ที่มากับเทมเพลต)
* ด้วยพาเลตที่ดึงมาจากโปสเตอร์หลัก static/assets/img/logos/shirt_244.jpg
*
* ต้องโหลด **หลัง** core.css, theme-default.css และ demo.css เสมอ
* (ดู ของ templates/base.html และ templates/login.html — login.html
* มี เป็นสำเนาของตัวเอง จึงต้องแก้ทั้งสองที่)
*
* ห้ามแก้ไฟล์ใน static/assets/vendor/ — ทุกอย่างที่ต้องเปลี่ยนสีอยู่ในไฟล์นี้
*
* กลไกที่ใช้ (สำคัญต่อการแก้ไขในอนาคต)
* ----------------------------------------------------------------------------
* Sneat v1.0 สร้างบน Bootstrap 5.0/5.1 ซึ่งแบ่งเป็นสองพฤติกรรม:
*
* 1. utility อย่าง .bg-primary / .text-success อ่านผ่าน var(--bs-*-rgb)
* → แค่นิยาม :root ใหม่ในไฟล์นี้ก็เปลี่ยนสีครบ (~140 จุดใน 6 เทมเพลต)
* 2. คอมโพเนนต์อย่าง .btn-primary / .alert-primary / .table-primary /
* .form-control:focus ฝัง hex #696cff ไว้ตรงๆ ใน theme-default.css
* → var() ไม่ช่วย ต้องเขียนกฎทับทีละตัว (ส่วน "Component overrides")
*
* ถ้าเพิ่มคอมโพเนนต์ Sneat ตัวใหม่เข้ามาในเทมเพลตแล้วเห็นสีม่วงโผล่
* แปลว่ามันอยู่ในกลุ่มที่ 2 และยังไม่มีกฎทับในไฟล์นี้
* ============================================================================
*/
/* ==========================================================================
1. Design tokens — ดึงจาก color profile ของโปสเตอร์
ค่า contrast ในคอมเมนต์คำนวณด้วยสูตร relative luminance ของ WCAG 2.x
========================================================================== */
:root {
/* --- Brand: ชมพูปะการังจากตัวเสื้อ -------------------------------------
สีเสื้อจริงคือ tint สว่าง chroma ต่ำ (H 5°, S 36%, V 84%) ตัวอักษรขาว
ทับได้แค่ 2.6:1 จึงใช้เป็น "พื้นผิว/แบรนด์" เท่านั้น ห้ามใช้เป็นสีปุ่ม
สี action ใช้ terracotta ที่ hue เดียวกัน (H 2°) แต่เข้มพอผ่าน AA */
--ss-brand: #d68e88; /* สีเสื้อจริง — swatch, ขอบตกแต่ง */
--ss-rose-25: #fce3e1; /* พื้น tint อ่อนสุด */
--ss-rose-50: #f9d3d0; /* พื้น hover, table stripe */
--ss-rose-100: #f1c4c1; /* เส้นขอบ tint */
--ss-rose-200: #e0aca7;
--ss-primary: #9c3f3a; /* ขาวทับ 6.59:1 — AAA */
--ss-primary-hover: #8c3a35; /* ขาวทับ 7.58:1 */
--ss-primary-active: #802320; /* ขาวทับ 9.64:1 */
--ss-primary-on-tint: #8c3a35; /* บน --ss-rose-25 = 6.21:1 */
--ss-primary-rgb: 156, 63, 58;
/* --- Accent: ทองจากป้ายราคา 198.- (#C2911D) ---------------------------- */
--ss-gold: #c2911d; /* สีทองจริง — เส้นคั่น/ไอคอน ห้ามใส่ตัวอักษรขาวทับ */
--ss-gold-600: #856009; /* ขาวทับ 5.72:1 — ตัวเลขราคา, CTA รอง */
--ss-gold-700: #6b4d07; /* บน --ss-gold-tint = 6.87:1 */
--ss-gold-tint: #fcefd7;
--ss-gold-rgb: 133, 96, 9;
/* --- Deep: น้ำเงินจากแถบธนาคารกรุงเทพ (#3D58A6) ------------------------ */
--ss-navy: #35509e; /* ขาวทับ 7.52:1 */
--ss-navy-700: #21346b; /* บน --ss-navy-tint = 9.42:1 */
--ss-navy-tint: #dde5fa;
--ss-navy-rgb: 53, 80, 158;
/* --- Neutrals: เทา "อุ่น" hue 353° ดึงจากพื้นโปสเตอร์ #F0E7E8 -----------
Sneat ใช้เทาเย็น (#f5f5f9 / #697a8d / #a1acb8) ซึ่งชนกับโทนอุ่นของภาพ */
--ss-surface: #ffffff; /* พื้น card */
--ss-surface-alt: #fbf7f6; /* พื้นรอง ในการ์ด */
--ss-bg: #fbf7f6; /* พื้นหน้าเว็บ (แทน #f5f5f9) */
--ss-bg-subtle: #f6ebec;
--ss-border: #ede2e4;
--ss-border-strong: #ded4d5;
--ss-text: #3d2a28; /* หัวข้อ — 13.46:1 บนขาว */
--ss-text-body: #544c4d; /* เนื้อความ — 8.34:1 */
--ss-text-muted: #6e6364; /* ข้อความรอง — 5.78:1 (Sneat ให้ 2.2:1 ตก AA) */
--ss-text-rgb: 61, 42, 40;
/* --- Semantic: warm-shift ให้เข้าโทนภาพ ทุกตัวขาวทับผ่าน AA ------------ */
--ss-success: #17694a; /* 6.65:1 */
--ss-success-deep: #0f4a34; /* บน tint = 8.44:1 */
--ss-success-tint: #d9eee4;
--ss-success-rgb: 23, 105, 74;
--ss-info: #1f6f8b; /* 5.67:1 */
--ss-info-deep: #17566b; /* บน tint = 6.78:1 */
--ss-info-tint: #ddedf3;
--ss-info-rgb: 31, 111, 139;
--ss-warning: #856009; /* 5.72:1 — ทองเข้ม เป็นตัวเดียวกับ gold-600 */
--ss-warning-deep: #6b4d07;
--ss-warning-tint: #fcefd7;
--ss-warning-rgb: 133, 96, 9;
--ss-danger: #a32217; /* 7.50:1 */
--ss-danger-deep: #7a1a12; /* บน tint = 8.47:1 */
--ss-danger-tint: #fbe0dd;
--ss-danger-rgb: 163, 34, 23;
--ss-secondary: #6e6364; /* 5.78:1 — เทาอุ่น */
--ss-secondary-tint: #ede2e4;
--ss-secondary-rgb: 110, 99, 100;
/* --- Shape: โปสเตอร์ใช้รูปทรงมน ไม่มีมุมคม --------------------------- */
--ss-radius-sm: 0.375rem;
--ss-radius-md: 0.5rem;
--ss-radius-lg: 0.75rem;
--ss-radius-xl: 1rem;
/* --- Elevation: เงาอุ่น ผสมจาก --ss-text ไม่ใช่เทาเย็นของ Sneat ------- */
--ss-shadow-sm: 0 1px 3px rgba(61, 42, 40, 0.06);
--ss-shadow-md: 0 2px 8px rgba(61, 42, 40, 0.08);
--ss-shadow-lg: 0 8px 24px rgba(61, 42, 40, 0.1);
/* --- Focus ring (WCAG 2.4.11) ----------------------------------------- */
--ss-focus-ring: 0 0 0 3px rgba(156, 63, 58, 0.35);
/* --- Touch target ขั้นต่ำ (WCAG 2.5.8 / iOS HIG) ---------------------- */
--ss-tap-min: 44px;
}
/* ==========================================================================
2. Map token → ตัวแปร Bootstrap ที่ยังทำงานอยู่
ครอบคลุม utility .bg-* / .text-* ทั้งหมดในคราวเดียว
========================================================================== */
:root {
--bs-font-sans-serif: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
--bs-primary: var(--ss-primary);
--bs-secondary: var(--ss-secondary);
--bs-success: var(--ss-success);
--bs-info: var(--ss-info);
--bs-warning: var(--ss-warning);
--bs-danger: var(--ss-danger);
--bs-light: var(--ss-bg-subtle);
--bs-dark: var(--ss-text);
--bs-purple: var(--ss-primary);
--bs-primary-rgb: var(--ss-primary-rgb);
--bs-secondary-rgb: var(--ss-secondary-rgb);
--bs-success-rgb: var(--ss-success-rgb);
--bs-info-rgb: var(--ss-info-rgb);
--bs-warning-rgb: var(--ss-warning-rgb);
--bs-danger-rgb: var(--ss-danger-rgb);
--bs-light-rgb: 246, 235, 236;
--bs-dark-rgb: var(--ss-text-rgb);
--bs-black-rgb: var(--ss-text-rgb);
--bs-body-color: var(--ss-text-body);
--bs-body-color-rgb: 84, 76, 77;
--bs-body-bg: var(--ss-bg);
--bs-body-bg-rgb: 251, 247, 246;
/* ภาษาไทยต้องการ line-height สูงกว่าค่า 1.53 ของ Sneat — สระบน/ล่าง
(ไม้เอก-โท, สระอุ-อู) ชนกันระหว่างบรรทัดที่ค่าเดิม */
--bs-body-font-size: 1rem;
--bs-body-line-height: 1.75;
}
/* ==========================================================================
3. Base — typography, พื้นหลัง, สเกลหัวข้อ
========================================================================== */
body {
font-family: var(--bs-font-sans-serif);
color: var(--ss-text-body);
background-color: var(--ss-bg);
line-height: 1.75;
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: var(--ss-text);
font-weight: 600;
}
h1,
.h1 {
font-size: 1.75rem;
line-height: 1.35;
}
h2,
.h2 {
font-size: 1.5rem;
line-height: 1.4;
}
h3,
.h3 {
font-size: 1.25rem;
line-height: 1.45;
}
h4,
.h4 {
font-size: 1.125rem;
line-height: 1.6;
font-weight: 500;
}
h5,
.h5 {
font-size: 1.0625rem;
line-height: 1.6;
font-weight: 500;
}
h6,
.h6 {
font-size: 1rem;
line-height: 1.6;
font-weight: 500;
}
/* Headings inside a coloured panel (.card.bg-success.text-white and friends)
must follow the panel, not the global heading colour — the rule above is a
direct match on the heading and would otherwise beat the inherited white. */
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white .h1,
.text-white .h2,
.text-white .h3,
.text-white .h4,
.text-white .h5,
.text-white .h6 {
color: inherit;
}
small,
.small {
line-height: 1.7;
}
/* Bootstrap 5 draws
as a 1px box filled with `background-color:
currentColor` and no border at all, so a border-* override does nothing. */
hr {
color: var(--ss-border-strong);
background-color: currentColor;
border: 0;
opacity: 1;
}
/* ตัวเลขที่อัปเดตเองต้องไม่ขยับความกว้าง — สถิติหน้าแรก poll ทุก 30 วินาที
ส่วนราคา/เลขบัญชีอ่านง่ายขึ้นเมื่อหลักตรงกัน */
.ss-price,
#total-shirts,
#total-orders,
.table td,
.table th {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum';
}
.ss-price {
color: var(--ss-gold-600);
font-weight: 600;
}
/* Sneat ให้ .text-muted = #a1acb8 → 2.2:1 บนพื้นขาว ตก WCAG 1.4.3
ถูกใช้ 56 จุดในเทมเพลต จึงเป็นข้อความที่อ่านยากที่สุดของเว็บก่อนแก้ */
.text-muted {
color: var(--ss-text-muted) !important;
}
.text-muted[href]:hover,
.text-muted[href]:focus {
color: var(--ss-text-body) !important;
}
.text-body {
color: var(--ss-text-body) !important;
}
/* ==========================================================================
4. Component overrides — กฎที่ฝัง #696cff ไว้ตรงๆ ใน vendor CSS
========================================================================== */
/* --- Links ---------------------------------------------------------------- */
a {
color: var(--ss-primary);
}
a:hover {
color: var(--ss-primary-hover);
}
.text-primary {
color: var(--ss-primary) !important;
}
.text-body[href]:hover {
color: var(--ss-primary) !important;
}
.fill-primary {
fill: var(--ss-primary);
}
/* --- Buttons -------------------------------------------------------------- */
.btn {
border-radius: var(--ss-radius-md);
font-weight: 500;
}
/* WCAG 2.5.8 Target Size — ปุ่มขนาดปกติของ Sneat สูง ~38px
ยกเว้น .btn-sm / .btn-icon ที่ตั้งใจให้เล็กและมีพื้นที่กดรอบตัวอยู่แล้ว */
.btn:not(.btn-sm):not(.btn-icon):not(.btn-xs) {
min-height: var(--ss-tap-min);
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-primary {
color: #fff;
background-color: var(--ss-primary);
border-color: var(--ss-primary);
box-shadow: 0 0.125rem 0.25rem 0 rgba(156, 63, 58, 0.3);
}
.btn-primary:hover {
color: #fff;
background-color: var(--ss-primary-hover);
border-color: var(--ss-primary-hover);
}
.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-primary.focus {
color: #fff;
background-color: var(--ss-primary-hover);
border-color: var(--ss-primary-hover);
}
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
color: #fff;
background-color: var(--ss-primary-active);
border-color: var(--ss-primary-active);
}
.btn-primary.disabled,
.btn-primary:disabled {
background-color: var(--ss-primary);
border-color: var(--ss-primary);
}
.btn-outline-primary {
color: var(--ss-primary);
border-color: var(--ss-primary);
background: transparent;
}
.btn-outline-primary:hover,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
color: #fff;
background-color: var(--ss-primary);
border-color: var(--ss-primary);
}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
color: var(--ss-primary);
border-color: var(--ss-primary);
}
.btn-outline-primary .badge,
.show > .btn-outline-primary.dropdown-toggle .badge {
background-color: var(--ss-primary);
border-color: var(--ss-primary);
color: #fff;
}
/* semantic buttons — core.css ฝัง hex ของพาเลตเดิมไว้เช่นกัน */
.btn-secondary {
color: #fff;
background-color: var(--ss-secondary);
border-color: var(--ss-secondary);
box-shadow: 0 0.125rem 0.25rem 0 rgba(110, 99, 100, 0.3);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
color: #fff;
background-color: #5b5152;
border-color: #5b5152;
}
.btn-success {
color: #fff;
background-color: var(--ss-success);
border-color: var(--ss-success);
box-shadow: 0 0.125rem 0.25rem 0 rgba(23, 105, 74, 0.3);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
color: #fff;
background-color: var(--ss-success-deep);
border-color: var(--ss-success-deep);
}
.btn-info {
color: #fff;
background-color: var(--ss-info);
border-color: var(--ss-info);
box-shadow: 0 0.125rem 0.25rem 0 rgba(31, 111, 139, 0.3);
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
color: #fff;
background-color: var(--ss-info-deep);
border-color: var(--ss-info-deep);
}
.btn-warning {
color: #fff;
background-color: var(--ss-warning);
border-color: var(--ss-warning);
box-shadow: 0 0.125rem 0.25rem 0 rgba(133, 96, 9, 0.3);
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
color: #fff;
background-color: var(--ss-warning-deep);
border-color: var(--ss-warning-deep);
}
.btn-danger {
color: #fff;
background-color: var(--ss-danger);
border-color: var(--ss-danger);
box-shadow: 0 0.125rem 0.25rem 0 rgba(163, 34, 23, 0.3);
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
color: #fff;
background-color: var(--ss-danger-deep);
border-color: var(--ss-danger-deep);
}
.btn-outline-secondary {
color: var(--ss-secondary);
border-color: var(--ss-secondary);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:active {
color: #fff;
background-color: var(--ss-secondary);
border-color: var(--ss-secondary);
}
.btn-outline-danger {
color: var(--ss-danger);
border-color: var(--ss-danger);
}
.btn-outline-danger:hover,
.btn-outline-danger:active {
color: #fff;
background-color: var(--ss-danger);
border-color: var(--ss-danger);
}
/* --- Backgrounds / borders ------------------------------------------------
.bg-primary is the one utility Sneat re-declares with a literal hex on top of
Bootstrap's var()-based rule, so it needs an explicit override; the other
.bg-* utilities follow --bs-*-rgb and are already handled above. */
.bg-primary {
background-color: var(--ss-primary) !important;
}
a.bg-primary:hover,
a.bg-primary:focus {
background-color: var(--ss-primary-hover) !important;
}
.bg-gradient-primary {
background: linear-gradient(
180deg,
var(--ss-primary) 0%,
var(--ss-primary-hover) 100%
) !important;
}
.text-bg-primary {
color: #fff !important;
background-color: var(--ss-primary) !important;
}
/* The .border-* utilities are literal hexes in core.css, not var()-based like
.bg-* and .text-*, so each one needs restating. */
.border-primary {
border-color: var(--ss-primary) !important;
}
.border-secondary {
border-color: var(--ss-secondary) !important;
}
.border-success {
border-color: var(--ss-success) !important;
}
.border-info {
border-color: var(--ss-info) !important;
}
.border-warning {
border-color: var(--ss-warning) !important;
}
.border-danger {
border-color: var(--ss-danger) !important;
}
.border-light {
border-color: var(--ss-border) !important;
}
.border-dark {
border-color: var(--ss-text) !important;
}
/* Sneat's neutral border is a cool blue-grey (#d9dee3) that reads out of place
next to the warm surfaces. These are the reachable users of it. */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
border-color: var(--ss-border) !important;
}
.dropdown-divider,
.modal-header,
.modal-footer,
.list-group-item {
border-color: var(--ss-border);
}
.bg-label-primary {
background-color: var(--ss-rose-25) !important;
color: var(--ss-primary-on-tint) !important;
}
.border-label-primary {
border: 3px solid var(--ss-rose-100) !important;
}
.border-light-primary {
border: 3px solid rgba(156, 63, 58, 0.08);
}
/* --- Cards / surfaces ----------------------------------------------------- */
.card {
background-color: var(--ss-surface);
border: 1px solid var(--ss-border);
border-radius: var(--ss-radius-lg);
box-shadow: var(--ss-shadow-sm);
}
.card-header {
border-bottom-color: var(--ss-border);
}
.card-footer {
border-top-color: var(--ss-border);
}
.navbar-detached {
box-shadow: var(--ss-shadow-sm);
border: 1px solid var(--ss-border);
}
.layout-navbar-fixed .layout-page:before {
background: rgba(251, 247, 246, 0.6);
}
.bg-navbar-theme {
background-color: var(--ss-surface) !important;
}
.bg-footer-theme {
background-color: var(--ss-bg-subtle) !important;
color: var(--ss-text-muted);
}
.bg-footer-theme .footer-link,
.bg-footer-theme .footer-text {
color: var(--ss-text-body);
}
.bg-footer-theme .footer-link:hover,
.bg-footer-theme .footer-link:focus {
color: var(--ss-primary);
}
.bg-footer-theme hr {
color: var(--ss-border-strong);
}
/* --- Forms ---------------------------------------------------------------- */
.form-control,
.form-select {
border-radius: var(--ss-radius-md);
border-color: var(--ss-border-strong);
color: var(--ss-text-body);
min-height: var(--ss-tap-min);
}
.form-control::placeholder {
color: var(--ss-text-muted);
opacity: 1;
}
.form-control:focus,
.form-select:focus {
border-color: var(--ss-primary);
box-shadow: var(--ss-focus-ring);
}
.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text {
border-color: var(--ss-primary);
}
.input-group-text {
background-color: var(--ss-bg-subtle);
border-color: var(--ss-border-strong);
color: var(--ss-text-body);
}
.form-label {
color: var(--ss-text);
font-weight: 500;
}
.form-control:focus ~ .form-label {
border-color: var(--ss-primary);
}
.form-check-input {
border-color: var(--ss-border-strong);
}
.form-check-input:checked,
.form-check-input[type='checkbox']:indeterminate,
.form-switch .form-check-input:checked {
background-color: var(--ss-primary);
border-color: var(--ss-primary);
}
.form-check-input:focus,
.form-switch .form-check-input:focus {
border-color: var(--ss-primary);
box-shadow: var(--ss-focus-ring);
}
.form-control.is-invalid,
.was-validated .form-control:invalid {
border-color: var(--ss-danger);
}
.invalid-feedback {
color: var(--ss-danger);
}
/* --- Tables --------------------------------------------------------------- */
.table {
--bs-table-color: var(--ss-text-body);
border-color: var(--ss-border);
}
.table > thead {
color: var(--ss-text);
}
.table-primary {
--bs-table-bg: var(--ss-rose-25);
--bs-table-striped-bg: #f8dcda;
--bs-table-striped-color: var(--ss-text);
--bs-table-active-bg: var(--ss-rose-50);
--bs-table-active-color: var(--ss-text);
--bs-table-hover-bg: var(--ss-rose-50);
--bs-table-hover-color: var(--ss-text);
color: var(--ss-text);
border-color: var(--ss-rose-100);
}
.table-primary .btn-icon {
color: var(--ss-text);
}
.table-light {
--bs-table-bg: var(--ss-bg-subtle);
--bs-table-color: var(--ss-text-body);
}
/* --- Alerts --------------------------------------------------------------- */
.alert {
border-radius: var(--ss-radius-md);
}
.alert-primary {
background-color: var(--ss-rose-25);
border-color: var(--ss-rose-100);
color: var(--ss-primary-on-tint);
}
.alert-info {
background-color: var(--ss-info-tint);
border-color: #c4e0ea;
color: var(--ss-info-deep);
}
.alert-success {
background-color: var(--ss-success-tint);
border-color: #bfe2d3;
color: var(--ss-success-deep);
}
.alert-warning {
background-color: var(--ss-warning-tint);
border-color: #f0dcb2;
color: var(--ss-warning-deep);
}
.alert-danger {
background-color: var(--ss-danger-tint);
border-color: #f3c8c3;
color: var(--ss-danger-deep);
}
.alert-heading {
color: inherit;
}
/* --- Navigation / pagination / progress ----------------------------------- */
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus {
background-color: var(--ss-primary);
color: #fff;
box-shadow: 0 2px 4px 0 rgba(156, 63, 58, 0.3);
}
.nav .nav-link:hover,
.nav .nav-link:focus {
color: var(--ss-primary);
}
.page-item.active .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus,
.pagination li.active > a:not(.page-link),
.pagination li.active > a:not(.page-link):hover,
.pagination li.active > a:not(.page-link):focus {
border-color: var(--ss-primary);
background-color: var(--ss-primary);
color: #fff;
box-shadow: 0 0.125rem 0.25rem rgba(156, 63, 58, 0.3);
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
border-color: var(--ss-primary);
background-color: var(--ss-primary);
color: #fff;
}
.list-group-item-primary {
background-color: var(--ss-rose-25);
color: var(--ss-primary-on-tint);
}
.dropdown-item:not(.disabled):active,
.dropdown-menu > li.active:not(.disabled) > a:not(.dropdown-item) {
background-color: var(--ss-rose-25);
color: var(--ss-primary-on-tint);
}
.progress-bar {
background-color: var(--ss-primary);
color: #fff;
box-shadow: 0 2px 4px 0 rgba(156, 63, 58, 0.3);
}
/* --- Menu (ยังไม่ถูกใช้ในเลย์เอาต์นี้ แต่กันไว้ถ้าเปิดเมนูข้างในอนาคต) ----- */
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
color: var(--ss-primary);
}
.bg-menu-theme .menu-inner > .menu-item.active:before {
background: var(--ss-primary);
}
/* ==========================================================================
5. ระบบ badge สถานะออร์เดอร์ — ชุดเดียวใช้ร่วมทุกหน้า
ใช้แทน `badge bg-*` ที่เคยกระจายอยู่ 4 ที่และให้สีขัดกันเอง
(order_history.html เดสก์ท็อป/มือถือ/ขอบการ์ด และ Vue dashboard)
รูปแบบ soft badge: พื้น tint + ตัวอักษรเข้ม — ผ่าน AA ได้สูงกว่า solid
และเข้ากับ mood high-key ของโปสเตอร์
ไอคอนไม่ใช่ของประดับ: WCAG 1.4.1 ห้ามสื่อความหมายด้วยสีอย่างเดียว
========================================================================== */
.ss-status {
display: inline-flex;
align-items: center;
gap: 0.35em;
padding: 0.35em 0.75em;
border-radius: 999px;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
border: 1px solid transparent;
}
.ss-status .bx {
font-size: 1.1em;
line-height: 1;
}
.ss-status--pending {
background-color: var(--ss-warning-tint);
color: var(--ss-warning-deep);
border-color: #f0dcb2;
}
.ss-status--notified {
background-color: var(--ss-info-tint);
color: var(--ss-info-deep);
border-color: #c4e0ea;
}
.ss-status--paid {
background-color: var(--ss-success-tint);
color: var(--ss-success-deep);
border-color: #bfe2d3;
}
.ss-status--shipped {
background-color: var(--ss-navy-tint);
color: var(--ss-navy-700);
border-color: #c2d1f5;
}
.ss-status--cancelled {
background-color: var(--ss-danger-tint);
color: var(--ss-danger-deep);
border-color: #f3c8c3;
}
.ss-status--unknown {
background-color: var(--ss-secondary-tint);
color: var(--ss-text-body);
border-color: var(--ss-border-strong);
}
/* เส้นสีซ้ายของการ์ด/สถิติ ใช้สีเข้ม (solid) ของสถานะเดียวกัน
ก่อนหน้านี้ order_history ใช้ hex ของ Bootstrap แท้ ส่วน dashboard ใช้ของ
SB Admin 2 ทำให้ขอบการ์ดกับ badge ที่อยู่ข้างกันคนละสี */
.ss-accent-left {
border-left: 4px solid var(--ss-border-strong) !important;
}
.ss-accent-left--pending {
border-left-color: var(--ss-warning) !important;
}
.ss-accent-left--notified {
border-left-color: var(--ss-info) !important;
}
.ss-accent-left--paid {
border-left-color: var(--ss-success) !important;
}
.ss-accent-left--shipped {
border-left-color: var(--ss-navy) !important;
}
.ss-accent-left--cancelled {
border-left-color: var(--ss-danger) !important;
}
/* ==========================================================================
6. Focus, motion, และ utility ของโปรเจกต์
========================================================================== */
/* Sneat ให้ focus เป็นเงาม่วงจางมากจนแทบมองไม่เห็นเมื่อไล่ด้วย Tab
:focus-visible จึงยิงเฉพาะตอนใช้คีย์บอร์ด ไม่รบกวนการคลิกเมาส์
(WCAG 2.4.7 Focus Visible, 2.4.11 Focus Not Obscured) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role='button']:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex='-1']):focus-visible {
outline: 2px solid var(--ss-primary);
outline-offset: 2px;
box-shadow: var(--ss-focus-ring);
}
/* WCAG 2.3.3 Animation from Interactions */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* --- พื้นหลังเน้นตามโทนโปสเตอร์ ------------------------------------------- */
.ss-surface-subtle {
background-color: var(--ss-bg-subtle);
}
/* โปสเตอร์เป็นภาพ high-key (69% ของพิกเซลอยู่ในช่วงสว่าง, ไม่มีดำสนิทเลย)
บนการ์ดสีขาวมันจึง "ละลาย" หายไปกับพื้น — ใส่พื้น tint + ขอบให้เห็นกรอบภาพ */
.ss-poster {
display: block; /* is inline by default, which drops the padding */
background-color: var(--ss-rose-25);
border: 1px solid var(--ss-rose-100);
border-radius: var(--ss-radius-xl);
padding: 0.75rem;
box-shadow: var(--ss-shadow-md);
}
.ss-poster img {
border-radius: var(--ss-radius-lg);
display: block;
}
/* เส้นคั่นสีทองจากป้ายราคาในโปสเตอร์ ใช้เน้นหัวข้อสำคัญ
ต้องตั้ง height เอง เพราะ hr:not([size]) ของ Bootstrap ล็อกไว้ที่ 1px */
hr.ss-rule-gold {
color: var(--ss-gold);
background-color: currentColor;
border: 0;
height: 2px;
opacity: 1;
}
/* การ์ดสถิติหน้าแรก */
.ss-stat-card {
background-color: var(--ss-surface);
border: 1px solid var(--ss-border);
border-top: 3px solid var(--ss-primary);
border-radius: var(--ss-radius-lg);
}
.ss-stat-card--navy {
border-top-color: var(--ss-navy);
}
.ss-stat-card .ss-stat-value {
color: var(--ss-text);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* --- หน้า login (page-auth.css) -------------------------------------------
ลายจุดมุมบน-ล่างของ Sneat เป็น data-URI SVG ที่ฝังสีม่วง #696cff ไว้ในตัว
จึงย้อมด้วย CSS ไม่ได้ — เป็นของประดับล้วน ตัดออกแล้วใช้พื้นอุ่นแทน */
.authentication-wrapper.authentication-basic .authentication-inner:before,
.authentication-wrapper.authentication-basic .authentication-inner:after,
.light-style
.authentication-wrapper.authentication-basic
.authentication-inner:after {
content: none;
background-image: none;
}
.authentication-wrapper {
background-color: var(--ss-bg);
}
.authentication-wrapper .card {
border-top: 3px solid var(--ss-primary);
box-shadow: var(--ss-shadow-lg);
}
/* --- ตัวเลือกไซส์ในฟอร์มสั่งซื้อ ------------------------------------------
ตารางไซส์มี 15 ช่อง การ์ดที่ถูกเลือกต้องมองออกทันทีโดยไม่ต้องอ่านตัวเลข */
.ss-size-card {
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ss-size-card--active {
border-color: var(--ss-primary);
background-color: var(--ss-rose-25);
}
.ss-size-card--active h6 {
color: var(--ss-primary-on-tint);
}
/* ปุ่ม +/- เดิมเป็น .btn-sm สูงราว 31px ต่ำกว่าเกณฑ์ 44px ของ WCAG 2.5.8 */
.ss-stepper-btn {
min-width: var(--ss-tap-min);
min-height: var(--ss-tap-min);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
/* ชิปไซส์เสื้อ — ใช้ทั้งฟอร์มสั่งซื้อและรายการสถิติหน้าแรก */
.ss-chip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35em;
min-height: var(--ss-tap-min);
padding: 0.4rem 0.85rem;
border-radius: var(--ss-radius-md);
background-color: var(--ss-rose-25);
border: 1px solid var(--ss-rose-100);
color: var(--ss-primary-on-tint);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.ss-chip.active {
background-color: var(--ss-primary);
border-color: var(--ss-primary);
color: #fff;
}
/* ==========================================================================
Social login — /login/
ปุ่ม LINE ตามไกด์ไลน์ LINE Login แบบพื้นขาว-ขอบเขียว (variant ที่ LINE
อนุญาต) ไม่ใช้แบบพื้นเขียวทึบ เพราะตัวอักษรขาวบน #06C755 ได้ contrast
แค่ 2.2:1 ตกเกณฑ์ WCAG AA — แบบนี้ตัวอักษรใช้ --ss-text ได้ 13.46:1
และเข้าชุดกับปุ่ม Google ที่เป็น .btn-outline-primary อยู่แล้ว
========================================================================== */
:root {
--ss-line: #06c755; /* สีแบรนด์ LINE — ใช้กับโลโก้/ขอบเท่านั้น */
--ss-line-press: #04a64b; /* เฉดตอนกด ตามไกด์ไลน์ LINE */
}
/* ปุ่ม social ทั้งสองปุ่มสูงเท่ากันและกดง่ายบนมือถือ (WCAG 2.5.8) */
.ss-btn-social {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
min-height: var(--ss-tap-min);
border-radius: var(--ss-radius-md);
font-weight: 500;
}
.ss-btn-social img {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.ss-btn-line {
background-color: var(--ss-surface);
border: 1px solid var(--ss-line);
color: var(--ss-text);
}
.ss-btn-line:hover,
.ss-btn-line:focus-visible {
background-color: #f0fbf4; /* เขียวจางมาก ให้รู้ว่า hover โดยไม่กลบตัวอักษร */
border-color: var(--ss-line-press);
color: var(--ss-text);
}
.ss-btn-line:active {
border-color: var(--ss-line-press);
color: var(--ss-text);
}
/* โฟกัสริงของปุ่มนี้ต้องเป็นเขียว ไม่ใช่ --ss-focus-ring สีแดงอิฐของธีม
เพราะขอบปุ่มเป็นเขียว วงแดงทับจะอ่านเป็นสถานะ error */
.ss-btn-line:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(6, 199, 85, 0.35);
}