/* ========================================================================== ระบบส่งรูปเข้าระบบ — its own look, on purpose. This app shares a team with the OCR system but is NOT that system, and the people who use it mostly use only this one, from a phone, standing in a shop aisle. So nothing here is borrowed from the OCR app's stylesheet: different colour (deep teal against its rose), different shapes (large soft cards against its dense tables), different navigation (a thumb bar at the bottom of a phone against its sidebar). Someone who opens the wrong address should know within a second, without reading a word. Written mobile first: every rule below is the phone's, and the wider screens are the exceptions near the end. Contents 1 fonts and tokens 6 forms 2 the shell 7 stats, albums, photos 3 page header 8 tables 4 cards 9 accounts 5 buttons 10 sign-in · wide screens ========================================================================== */ /* ── 1. fonts and tokens ───────────────────────────────────────────────── */ @font-face { font-family: 'Prompt'; font-style: normal; font-weight: 400; src: url('/static/fonts/Prompt-400-thai.woff2') format('woff2'); font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: 'Prompt'; font-style: normal; font-weight: 400; src: url('/static/fonts/Prompt-400-latin.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Prompt'; font-style: normal; font-weight: 500; src: url('/static/fonts/Prompt-500-thai.woff2') format('woff2'); font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: 'Prompt'; font-style: normal; font-weight: 500; src: url('/static/fonts/Prompt-500-latin.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Prompt'; font-style: normal; font-weight: 600; src: url('/static/fonts/Prompt-600-thai.woff2') format('woff2'); font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: 'Prompt'; font-style: normal; font-weight: 600; src: url('/static/fonts/Prompt-600-latin.woff2') format('woff2'); font-display: swap; } @font-face { font-family: 'Prompt'; font-style: normal; font-weight: 700; src: url('/static/fonts/Prompt-700-thai.woff2') format('woff2'); font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: 'Prompt'; font-style: normal; font-weight: 700; src: url('/static/fonts/Prompt-700-latin.woff2') format('woff2'); font-display: swap; } :root { /* BeautyScout: Comets navy easing into aqua mint, in the few steps the app actually uses. --t-700 and darker are safe for text on white. */ --t-900: #173462; --t-800: #1E4B82; --t-700: #2861A0; --t-600: #2D7CB8; /* the app's one strong colour */ --t-500: #3FA3CC; --mint: #8FD7DF; /* the light end of gradients, never text */ --t-100: #D5ECF3; --t-50: #EDF7FA; --glow: rgba(45, 124, 184, .22); --amber: #E08700; /* only for "needs you" and highlights */ --amber-d: #8A5A00; --amber-l: #FDF2E0; --danger: #C4453B; --danger-d: #9B332B; --danger-l: #FBEDEC; --ink: #14304A; --ink-2: #4A6479; /* secondary text */ --ink-3: #7F95A6; /* labels, captions */ --bg: #EEF5F8; --card: #FFFFFF; --line: #DFEAF0; --line-2: #CADCE5; /* input borders: darker, they must read as edges */ --r-lg: 22px; --r: 16px; --r-sm: 11px; --pill: 999px; --sh-1: 0 1px 2px rgba(14, 38, 70, .05); --sh-2: 0 1px 2px rgba(14, 38, 70, .04), 0 10px 24px -16px rgba(14, 38, 70, .40); --sh-3: 0 18px 40px -22px rgba(14, 38, 70, .55); --sh-btn: 0 6px 16px -8px rgba(30, 75, 130, .85); --tap: 50px; /* nothing tappable is smaller than this */ --gutter: 14px; --bar-h: 62px; /* the thumb bar, without the safe area */ } * { box-sizing: border-box; } /* `.field { display: block }` would otherwise beat the hidden attribute's own UA style and show a field we asked to hide */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0 0 8px; letter-spacing: -.01em; } h1 { font-size: 1.36rem; font-weight: 700; } h2 { font-size: 1.06rem; font-weight: 700; } h3 { font-size: .94rem; font-weight: 700; } p { margin: 0 0 10px; } a { color: var(--t-800); text-underline-offset: 2px; } b, strong { font-weight: 700; } .hint { margin: 5px 0 0; font-size: .83rem; color: var(--ink-2); line-height: 1.5; } .hint-sm { font-size: .76rem; color: var(--ink-3); } .nowrap { white-space: nowrap; } .spacer { flex: 1 1 auto; } /* one focus treatment everywhere, including for keyboard users on desktop */ :where(a, button, input, select, textarea, summary, .photo):focus-visible { outline: 3px solid var(--glow); outline-offset: 2px; border-radius: var(--r-sm); } /* ── 2. the shell ──────────────────────────────────────────────────────── */ .appbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 var(--gutter); background: linear-gradient(118deg, var(--t-900), var(--t-600) 58%, var(--t-500) 88%, var(--mint)); color: #fff; box-shadow: 0 2px 14px -6px rgba(23, 52, 98, .7); } .appbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: #fff; text-decoration: none; font-weight: 700; font-size: 1rem; letter-spacing: -.01em; } .signin-tag { text-align: center; margin: -6px 0 6px; font-weight: 700; color: var(--t-700); font-size: .92rem; } .appbar-brand .brand-name { font-weight: 800; letter-spacing: .01em; } .appbar-brand .logo { display: block; width: 34px; height: 34px; flex: none; border-radius: 10px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .38), 0 4px 10px -4px rgba(12, 28, 54, .6); } .appbar-spacer { flex: 1 1 auto; } .usermenu { position: relative; } .usermenu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 5px; border-radius: var(--pill); background: rgba(255, 255, 255, .14); color: #fff; } .usermenu > summary::-webkit-details-marker { display: none; } .usermenu[open] > summary { background: rgba(255, 255, 255, .26); } .usermenu-avatar { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: #fff; color: var(--t-800); font-weight: 700; font-size: .9rem; } .usermenu-name { display: none; font-size: .85rem; font-weight: 600; padding-right: 6px; } .usermenu-drop { position: absolute; right: 0; top: calc(100% + 10px); min-width: 260px; z-index: 50; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-3); overflow: hidden; } .usermenu-drop a, .usermenu-drop button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 16px; border: none; background: none; cursor: pointer; font: inherit; font-size: .9rem; color: var(--ink); text-align: left; text-decoration: none; border-bottom: 1px solid var(--line); } .usermenu-drop a:last-child, .usermenu-drop button:last-child { border-bottom: none; } .usermenu-drop a:hover, .usermenu-drop button:hover { background: var(--t-50); } .usermenu-drop form { margin: 0; } .layout { min-height: calc(100dvh - 56px); } .page { padding: 18px var(--gutter) calc(var(--bar-h) + 34px + env(safe-area-inset-bottom)); max-width: 1200px; margin: 0 auto; } .sidenav { display: none; } /* The thumb bar. Five destinations at most, because a sixth makes every one of them too narrow to hit while holding a phone one-handed in a shop. */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px -16px rgba(14, 38, 70, .6); } .tabbar a { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--tap); padding: 4px 2px; border-radius: 14px; color: var(--ink-3); text-decoration: none; font-size: .68rem; font-weight: 600; } .tabbar a .ico { font-size: 1.3rem; line-height: 1; filter: grayscale(.45) opacity(.75); } .tabbar a.on { color: var(--t-800); background: var(--t-50); } .tabbar a.on .ico { filter: none; } /* ตั้งค่าระบบ (/admin): one page, a tab per job — a row of pills that scrolls sideways on a phone and stays in reach at the top while you work */ .admtabs { position: sticky; top: 56px; z-index: 5; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px 14px; padding: 8px 2px; background: var(--bg); -webkit-overflow-scrolling: touch; } .admtabs::-webkit-scrollbar { display: none; } .admtabs a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 15px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: var(--sh-1); } .admtabs a:hover { border-color: var(--t-600); color: var(--t-800); } .admtabs a.on { background: var(--t-600); border-color: var(--t-600); color: #fff; } .admtabs i { font-style: normal; font-size: .72rem; font-weight: 700; padding: 1px 7px; border-radius: var(--pill); background: var(--t-50); color: var(--ink-2); } .admtabs a.on i { background: rgba(255,255,255,.22); color: #fff; } .admtabs .badge { margin-left: 0; } .admtabs a.on .badge { background: #fff; color: var(--t-800); } .adm-hero { margin-bottom: 4px; } .adm-hero .kx-chips a:hover { background: rgba(255,255,255,.24); } .adm-intro { margin: 0 2px 12px; } .adm-none { margin: 4px 0 0; } /* a form that is needed now and then, folded under one line */ .adm-add > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: var(--pill); background: var(--t-50); color: var(--t-800); font-weight: 700; font-size: .9rem; } .adm-add > summary::-webkit-details-marker { display: none; } .adm-add[open] > summary { margin-bottom: 14px; } .adm-add h3 { margin: 12px 0 8px; } .adm-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 2px 12px; } .adm-jump a { padding: 5px 12px; border-radius: var(--pill); background: var(--card); border: 1px solid var(--line); color: var(--ink-2); font-size: .8rem; font-weight: 600; text-decoration: none; } .adm-jump a:hover { border-color: var(--t-600); color: var(--t-800); } .adm-pane .setbox, .adm-pane .card { scroll-margin-top: 120px; } .adm-bf { grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .adm-bf { grid-template-columns: minmax(0, 1fr) 200px auto; align-items: center; } } .adm-bf select { min-height: 44px; } .seg-sm { margin: 0 0 0 auto; padding: 3px; } .seg-sm a { min-height: 32px; padding: 0 12px; font-size: .8rem; } .adm-pane .req-card { padding: 12px 14px; margin-top: 12px; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-sm); } .adm-pane .req-card h3 { margin: 0; } .adm-pane .req-card { border-left-color: var(--amber); } .adm-pane .req-card.is-done { border-left-color: var(--line-2); } .adm-pane .req-card .card-head { margin-bottom: 8px; } /* ── 3. page header ────────────────────────────────────────────────────── */ /* The title of a page belongs to the page, not to a card — cards are for content. Keeping them apart is what gives every screen the same skeleton: where am I (header), then what is here (cards). */ .pagehead { display: flex; align-items: flex-start; gap: 12px; margin: 2px 2px 16px; } .pagehead-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); font-size: 1.3rem; } .pagehead-main { flex: 1 1 0; min-width: 0; } .pagehead h1 { margin: 0; } .pagehead .hint { margin-top: 3px; } .pagehead-acts { display: flex; gap: 8px; flex-wrap: wrap; } /* a status chip beside a long title has nowhere to go on a phone — give it its own line under the title instead of squeezing both */ @media (max-width: 719px) { .pagehead { flex-wrap: wrap; } .pagehead > .pill { order: 3; margin-left: 56px; } } /* the one page that leads with a greeting instead of a title */ .up-head { position: relative; overflow: hidden; margin-bottom: 16px; padding: 20px 18px; border-radius: var(--r-lg); color: #fff; box-shadow: var(--sh-2); background: linear-gradient(126deg, var(--t-900), var(--t-700) 55%, var(--t-500)); } .up-head::after { content: "📸"; position: absolute; right: -6px; bottom: -14px; font-size: 5.4rem; opacity: .16; transform: rotate(-12deg); pointer-events: none; } .up-head h1 { color: #fff; font-size: 1.3rem; position: relative; } .up-head p { margin: 4px 0 0; font-size: .87rem; color: rgba(255, 255, 255, .9); position: relative; max-width: 30ch; } /* ── 4. cards, banners, pills ──────────────────────────────────────────── */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 16px; margin-bottom: 14px; box-shadow: var(--sh-2); } .card > :last-child { margin-bottom: 0; } .card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .card-head h2, .card-head h1 { margin: 0; } .card-head .pill, .card-head .btn { margin-left: auto; } .banner { display: flex; gap: 9px; align-items: flex-start; padding: 12px 14px; margin-bottom: 14px; border-radius: var(--r); font-size: .88rem; font-weight: 500; border: 1px solid transparent; } .banner-ok { background: var(--t-50); border-color: var(--t-100); color: var(--t-800); } .banner-err { background: var(--danger-l); border-color: #F1D6D3; color: var(--danger-d); } .banner-warn { background: var(--amber-l); border-color: #F6E2C2; color: var(--amber-d); } .pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--pill); background: #EEF4F8; color: var(--ink-2); font-size: .76rem; font-weight: 600; white-space: nowrap; } .pill-ok { background: var(--t-100); color: var(--t-800); } .pill-wait { background: var(--amber-l); color: var(--amber-d); } .pill-bad { background: var(--danger-l); color: var(--danger-d); } .badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: auto; border-radius: var(--pill); background: var(--amber); color: #fff; font-size: .71rem; font-weight: 700; } .badge-dot { position: absolute; top: 2px; right: 22%; margin: 0; box-shadow: 0 0 0 2px rgba(255, 255, 255, .95); } .empty { text-align: center; padding: 38px 18px; color: var(--ink-3); } .empty .ico { font-size: 2.6rem; display: block; margin-bottom: 10px; opacity: .8; } .back { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; margin-bottom: 6px; font-size: .86rem; font-weight: 600; color: var(--ink-2); text-decoration: none; } .back:hover { color: var(--t-800); } /* segmented control — period switches, log tabs, anything with 2-4 choices */ .seg { display: flex; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: var(--pill); background: #E6EEF3; border: 1px solid var(--line); } .seg a, .seg button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px; border: none; border-radius: var(--pill); background: none; color: var(--ink-2); font: inherit; font-size: .86rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; } .seg a.on, .seg button.on { background: var(--card); color: var(--t-800); box-shadow: var(--sh-1); } /* a row of loose chips: pagination, step-through arrows, filters */ .chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .chips a, .chips button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; min-width: 38px; padding: 0 13px; border-radius: var(--pill); border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font: inherit; font-size: .85rem; font-weight: 600; text-decoration: none; cursor: pointer; } .chips a.on, .chips button.on { background: var(--t-600); border-color: var(--t-600); color: #fff; } .chips a:hover, .chips button:hover { border-color: var(--t-500); color: var(--t-800); } .chips .now { padding: 0 14px; font-weight: 700; color: var(--ink); } /* ── 5. buttons ────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--tap); padding: 0 22px; border: 1.5px solid transparent; border-radius: 14px; background: linear-gradient(180deg, var(--t-600), var(--t-700)); color: #fff; font: inherit; font-size: .94rem; font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: var(--sh-btn); transition: transform .08s ease, filter .12s ease; } .btn:hover { filter: brightness(1.06); } .btn:active { transform: translateY(1px); } .btn:disabled { background: #B6C8D3; box-shadow: none; cursor: default; filter: none; } .btn-block { width: 100%; } .btn-ghost { background: var(--card); color: var(--t-800); border-color: var(--line-2); box-shadow: var(--sh-1); } .btn-ghost:hover { background: var(--t-50); border-color: var(--t-500); filter: none; } .btn-danger { background: var(--card); color: var(--danger); border-color: #EFD4D1; box-shadow: var(--sh-1); } .btn-danger:hover { background: var(--danger-l); filter: none; } .btn-sm { min-height: 40px; padding: 0 15px; font-size: .85rem; border-radius: var(--r-sm); } /* the upload page's send bar: pinned above the thumb bar, always reachable */ .sendbar { position: fixed; left: 0; right: 0; z-index: 46; padding: 10px var(--gutter); bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); border-top: 1px solid var(--line); } .sendbar { display: flex; align-items: center; gap: 12px; } .sendbar .btn { flex: none; min-width: 170px; } .sendbar-note { flex: 1 1 auto; font-size: .78rem; color: var(--ink-3); text-align: left; } body.has-sendbar .page { padding-bottom: calc(var(--bar-h) + 96px + env(safe-area-inset-bottom)); } /* ── 6. forms ──────────────────────────────────────────────────────────── */ .field { display: block; margin-bottom: 15px; } .field > .label { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .field .req { color: var(--danger); font-weight: 700; } .field .hint { margin-top: 6px; } input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="search"], input[type="number"], input[type="url"], input[type="time"], select, textarea { width: 100%; min-height: var(--tap); padding: 11px 14px; border: 1.5px solid var(--line-2); border-radius: 13px; background: var(--card); font: inherit; font-size: 1rem; color: var(--ink); -webkit-appearance: none; appearance: none; transition: border-color .12s ease, box-shadow .12s ease; } input:hover, select:hover, textarea:hover { border-color: #B6CCD8; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--t-600); box-shadow: 0 0 0 4px var(--glow); } input:disabled, select:disabled { background: #F3F7FA; color: var(--ink-3); cursor: not-allowed; } input::placeholder { color: #A6BAC7; } select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%237E9891' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 38px; } .tick { width: 22px; height: 22px; min-height: 0; accent-color: var(--t-600); } /* one form laid out as a row of fields — it stacks on a phone by default */ .formrow { display: grid; gap: 12px; } .formrow .field { margin: 0; } .formrow .btn { justify-self: start; } .inline { display: inline; margin: 0; } .rowacts { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; } /* Branch and its code are two halves of one answer. On a phone they stay stacked — two selects sharing 375px are a cramped tap target — and only sit side by side where there is room for it. */ .pair { display: grid; gap: 0; } /* the numbered steps on the upload page */ .step { display: flex; gap: 13px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dashed var(--line); } .step:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .step-num { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: 1px; border-radius: 50%; background: var(--t-100); color: var(--t-800); font-weight: 700; font-size: .88rem; } .step-body { flex: 1 1 auto; min-width: 0; } .step-title { font-weight: 700; font-size: .98rem; margin-bottom: 10px; } .step .field:last-child { margin-bottom: 0; } /* the file picker: the biggest target on the page, because it is the point */ .drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 16px; text-align: center; cursor: pointer; border: 2px dashed var(--t-500); border-radius: var(--r); background: var(--t-50); } .drop:hover, .drop.on { background: var(--t-100); border-style: solid; } .drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .drop-ico { font-size: 2.2rem; line-height: 1; } .drop-main { font-weight: 700; color: var(--t-800); } .drop-sub { font-size: .81rem; color: var(--ink-2); } .shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 7px; margin-top: 12px; } .shots:empty { display: none; } .shots img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); } .shots .more { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: var(--t-100); color: var(--t-800); font-weight: 700; } /* "ask the admin for a branch": folded away until someone needs it */ details.reqbox { padding: 14px 16px; } details.reqbox > summary { cursor: pointer; list-style: none; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; min-height: 28px; } details.reqbox > summary::-webkit-details-marker { display: none; } details.reqbox > summary::before { content: "＋"; display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--t-100); color: var(--t-800); font-weight: 700; } details.reqbox[open] > summary::before { content: "−"; } details.reqbox > summary .hint { margin: 0; } .pw-toggle { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: .85rem; color: var(--ink-2); cursor: pointer; } /* ── 7. stats, albums, photos ──────────────────────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .stat { position: relative; overflow: hidden; padding: 13px 14px; border-radius: var(--r); background: var(--t-50); border: 1px solid var(--t-100); } .stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--t-600); } .stat b { display: block; font-size: 1.75rem; font-weight: 700; line-height: 1.15; color: var(--t-800); font-variant-numeric: tabular-nums; } .stat span { display: block; font-size: .76rem; color: var(--ink-2); line-height: 1.35; } .stat-amber { background: var(--amber-l); border-color: #F6E2C2; } .stat-amber::before { background: var(--amber); } .stat-amber b { color: var(--amber-d); } .albums { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; } .album { display: block; padding: 13px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); color: inherit; text-decoration: none; box-shadow: var(--sh-2); transition: transform .1s ease, border-color .12s ease; } .album:hover { border-color: var(--t-500); transform: translateY(-2px); } .album-top { display: flex; align-items: center; gap: 10px; } .album-when { font-weight: 700; font-size: .98rem; } .album-top .pill { margin-left: auto; } .album-where { font-size: .86rem; color: var(--ink-2); margin-top: 2px; } .album-strip { display: flex; gap: 5px; margin-top: 11px; } .album-strip img { width: 25%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--bg); } .album-meta { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); font-size: .77rem; color: var(--ink-3); } .photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 8px; } .photo { all: unset; cursor: zoom-in; aspect-ratio: 3 / 4; border-radius: var(--r-sm); overflow: hidden; background: var(--bg); } .photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; } .photo:hover img { transform: scale(1.04); } .lightbox { border: none; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; } .lightbox::backdrop { background: rgba(12, 28, 54, .84); backdrop-filter: blur(3px); } .lightbox img { max-width: 96vw; max-height: 96vh; border-radius: var(--r); display: block; } .grade { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; font-weight: 700; font-size: 1.04rem; background: #EEF4F8; color: var(--ink-3); } .grade-a { background: #D7F0E3; color: #0A7A55; } .grade-b { background: #E4F1DA; color: #4B7A16; } .grade-c { background: var(--amber-l); color: var(--amber-d); } .grade-d { background: var(--danger-l); color: var(--danger-d); } /* ── 8. tables ─────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; } .table { width: 100%; border-collapse: collapse; font-size: .88rem; } .table th { text-align: left; font-size: .73rem; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; padding: 0 10px 8px; border-bottom: 1.5px solid var(--line); white-space: nowrap; } .table td { padding: 11px 10px; border-bottom: 1px solid #F0F5F9; vertical-align: middle; } .table tr:last-child td { border-bottom: none; } .table tbody tr:hover { background: #FAFDFE; } .table .hint { display: block; margin: 0; font-size: .74rem; } .table input[type="text"], .table input[type="search"], .table select { min-height: 42px; padding: 8px 12px; font-size: .88rem; } .group-row td { background: var(--t-50); font-weight: 700; font-size: .78rem; color: var(--t-800); letter-spacing: .03em; text-transform: uppercase; } /* A table of records — KPI, logs, branches — turns into one card per row on a phone, where 6 columns can only ever be read by dragging sideways. Every carries its column name in data-label, and that becomes the row label. */ @media (max-width: 719px) { .dtable, .dtable tbody, .dtable tr, .dtable td { display: block; width: 100%; } .dtable thead { display: none; } .dtable tr { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: 12px 13px; margin-bottom: 10px; box-shadow: var(--sh-1); } .dtable tr:hover { background: var(--card); } .dtable td { padding: 4px 0; border: none; display: flex; align-items: center; gap: 10px; } .dtable td::before { content: attr(data-label); flex: none; width: 34%; font-size: .76rem; font-weight: 600; color: var(--ink-3); } .dtable td[data-label=""]::before, .dtable td:not([data-label])::before { display: none; } /* the lead cell reads as the card's title, full width and without a label */ .dtable td.lead { display: block; padding: 0 0 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); } .dtable td.lead::before { display: none; } .dtable .group-row td { display: block; padding: 8px 10px; } .table-wrap:has(.dtable) { overflow: visible; } } /* ── 9. accounts ───────────────────────────────────────────────────────── */ /* What the admin has to hand over after creating an account. Held apart from the form so it survives a glance: the temp password is the one thing on this page that cannot be looked up again later without resetting it. */ .ucred { border: 1.5px solid var(--t-500); border-radius: var(--r); background: var(--t-50); padding: 15px; margin-bottom: 18px; } .ucred-head { font-weight: 700; color: var(--t-800); } .ucred-grid { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; align-items: center; margin-bottom: 13px; } .ucred-label { font-size: .79rem; color: var(--ink-2); } .ucred-grid code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .92rem; font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--line-2); border-radius: 9px; padding: 6px 11px; word-break: break-all; } .user-list { display: grid; gap: 11px; } .user-card { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--sh-1); } .user-card-self { border-color: var(--t-500); background: var(--t-50); } .user-avatar { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--t-100); color: var(--t-800); font-weight: 700; } .user-main { min-width: 0; } .user-name { font-weight: 700; } .user-th { font-size: .83rem; font-weight: 400; color: var(--ink-2); } .user-sub { font-size: .78rem; color: var(--ink-3); word-break: break-word; } .user-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .user-acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; } .user-acts form { margin: 0; } .user-acts select { min-height: 40px; padding: 8px 12px; font-size: .85rem; width: auto; } details.uedit { margin-top: 10px; } details.uedit > summary { cursor: pointer; list-style: none; font-size: .83rem; font-weight: 600; color: var(--t-800); } details.uedit > summary::-webkit-details-marker { display: none; } details.uedit .field { margin-bottom: 12px; } /* a request waiting for a decision, on the admin's approval page */ .req-card { border-left: 4px solid var(--amber); } .req-card.is-done { border-left-color: var(--line-2); } /* ── 10. sign-in ───────────────────────────────────────────────────────── */ .signin { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 26px 18px; background: radial-gradient(1100px 560px at 50% -12%, var(--t-500) 0%, transparent 62%), radial-gradient(700px 420px at 100% 110%, rgba(143, 215, 223, .35) 0%, transparent 60%), var(--t-900); } .signin-card { width: 100%; max-width: 404px; margin: 0 auto; background: var(--card); border-radius: 26px; padding: 28px 22px; box-shadow: 0 34px 80px -34px rgba(0, 0, 0, .62); } .signin-logo { display: block; width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 22px; box-shadow: 0 16px 30px -14px rgba(30, 75, 130, .95); } div.signin-logo { display: grid; place-items: center; color: #fff; font-size: 2rem; background: linear-gradient(140deg, var(--t-900), var(--t-600) 60%, var(--t-500)); } .signin-card h1 { text-align: center; font-size: 1.6rem; font-weight: 800; color: var(--t-900); letter-spacing: -.01em; } .signin-card h1 span { color: var(--t-600); } .signin-card .lead { text-align: center; color: var(--ink-2); font-size: .87rem; margin: 0 0 22px; } .signin-foot { text-align: center; margin: 24px auto 0; max-width: 34ch; font-size: .77rem; color: rgba(255, 255, 255, .7); } /* ── odds and ends the pages ask for ───────────────────────────────────── */ .card.narrow { max-width: 470px; } .hint-link { margin-top: -6px; margin-bottom: 14px; } /* label/value pairs: album details, one request's particulars */ .meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 14px 0 0; font-size: .86rem; } .meta dt { color: var(--ink-3); font-size: .79rem; } .meta dd { margin: 0; color: var(--ink); } /* the album strip reads better above the text than below it: the photos are what someone is looking for, the words only confirm which set it is */ .album-strip-top { margin: -2px 0 11px; } .album-strip-top img { border-radius: 12px; } /* KPI's first cell: grade chip and the person, one unit */ .kpi-who { display: flex; align-items: center; gap: 11px; } .kpi-who .grade { flex: none; } /* the permission matrix keeps its columns at every width */ .matrix td, .matrix th { text-align: left; } .matrix .tickcell { text-align: center; } .matrix th:not(:first-child) { text-align: center; } .logbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; } .logbar .seg { margin: 0; } .logsearch { display: flex; gap: 8px; margin: 0; flex: 1 1 210px; } .logsearch input { min-height: 40px; } .signin-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .79rem; color: var(--ink-3); text-align: center; } @media (min-width: 900px) { .logsearch { flex: 0 1 320px; margin-left: auto; } } /* KPI's period controls: which kind of window on the left, which window on the right. They were two stacked rows before, and read as two unrelated things. */ .periodbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .periodbar .seg { margin: 0; } .stepper { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line-2); border-radius: var(--pill); background: var(--card); overflow: hidden; } .stepper a, .stepper .step-off { display: grid; place-items: center; width: 44px; min-height: 44px; color: var(--ink-2); text-decoration: none; font-size: 1rem; } .stepper a:hover { background: var(--t-50); color: var(--t-800); } .stepper .step-off { color: #C8D6DF; } .stepper .step-now { display: grid; place-items: center; padding: 0 14px; min-width: 168px; font-weight: 700; font-size: .92rem; text-align: center; border-left: 1.5px solid var(--line); border-right: 1.5px solid var(--line); } .stepper .step-now i { font-style: normal; font-weight: 600; font-size: .72rem; color: var(--t-700); } /* a long caption under a number, kept off the number's own line */ .stat span em { display: block; font-style: normal; font-size: .71rem; color: var(--ink-3); } @media (min-width: 720px) { .periodbar .stepper { margin-left: auto; } } @media (max-width: 719px) { .periodbar > .seg { width: 100%; } .periodbar .stepper { flex: 1 1 auto; } .stepper .step-now { flex: 1 1 auto; min-width: 0; } } /* ── the composer (sending photos) ─────────────────────────────────────── */ /* Shaped like writing a post, because that is the one form every person here already knows how to fill in: who you are, what you want to say, the photos, then when and where. */ .composer { padding: 14px; } .composer-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .composer-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: linear-gradient(140deg, var(--t-700), var(--t-500)); color: #fff; font-weight: 700; } .composer-who b { display: block; font-size: .96rem; } .composer-sub { display: block; font-size: .76rem; color: var(--ink-3); } .cap { width: 100%; min-height: 62px; padding: 10px 2px; border: none; resize: none; font: inherit; font-size: 1.04rem; color: var(--ink); background: none; } .cap:focus { outline: none; box-shadow: none; } .cap::placeholder { color: var(--ink-3); } .filepick { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .tray { margin-top: 4px; border-radius: var(--r); } .tray.on { outline: 2px dashed var(--t-500); outline-offset: 3px; } .tray-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 30px 16px; cursor: pointer; text-align: center; border: 2px dashed var(--t-500); border-radius: var(--r); background: var(--t-50); font: inherit; color: inherit; } .tray-empty:hover { background: var(--t-100); } .tray-ico { font-size: 2.2rem; line-height: 1; } .tray-main { font-weight: 700; color: var(--t-800); } .tray-sub { font-size: .81rem; color: var(--ink-2); } .tray-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; } .tray-item { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bg); } .tray-item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* removing one photo out of forty is the difference between fixing a mistake and picking the whole set again */ .tray-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; display: grid; place-items: center; border: none; border-radius: 50%; cursor: pointer; background: rgba(16, 36, 70, .66); color: #fff; font-size: .8rem; line-height: 1; } .tray-x:hover { background: var(--danger); } .tray-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; aspect-ratio: 1; cursor: pointer; border: 2px dashed var(--line-2); border-radius: 12px; background: var(--card); font: inherit; font-size: .78rem; font-weight: 600; color: var(--ink-2); } .tray-add span { font-size: 1.5rem; line-height: 1; color: var(--t-600); } .tray-add:hover { border-color: var(--t-500); background: var(--t-50); color: var(--t-800); } /* the two answers this system needs, each a row that opens when tapped */ .optrow { margin-top: 14px; border-top: 1px solid var(--line); } .opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap); padding: 10px 2px; border: none; border-bottom: 1px solid var(--line); background: none; font: inherit; text-align: left; cursor: pointer; } .opt-ico { font-size: 1.1rem; } .opt-label { font-weight: 600; font-size: .9rem; flex: none; } .opt-val { flex: 1 1 auto; min-width: 0; text-align: right; font-size: .86rem; color: var(--t-800); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .opt-val.empty { color: var(--ink-3); font-weight: 400; } .opt-caret { flex: none; color: var(--ink-3); font-size: .8rem; transition: transform .15s ease; } .opt.on .opt-caret { transform: rotate(180deg); } .optpanel { padding: 14px 2px 4px; border-bottom: 1px solid var(--line); } .optpanel .field:last-of-type { margin-bottom: 0; } .optpanel .hint { margin-top: 10px; } /* ใส่ข้อความในรูป: a switch, the label as it will read, the first photos with it on */ .sp { margin-top: 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card); overflow: hidden; } .sp-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 8px; cursor: pointer; margin: 0; } .sp-title { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sp-title b { font-size: .98rem; color: var(--ink); } .sp-title small { font-size: .8rem; color: var(--ink-3); line-height: 1.35; } .sp-switch { position: relative; flex: none; width: 44px; height: 26px; } .sp-switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .sp-switch i { position: absolute; inset: 0; border-radius: var(--pill); background: var(--line-2); transition: background .15s; pointer-events: none; } .sp-switch i:after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; } .sp-switch input:checked + i { background: var(--t-600); } .sp-switch input:checked + i:after { transform: translateX(18px); } .sp-pill { display: inline-flex; align-items: center; max-width: calc(100% - 28px); margin: 2px 14px 12px; padding: 6px 15px 6px 11px; border-radius: var(--pill); background: #fff; box-shadow: 0 2px 10px rgba(14,38,70,.16); font-family: 'Prompt', sans-serif; font-size: .9rem; white-space: nowrap; overflow: hidden; } .sp-pill i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #C7366F; margin-right: 8px; } .sp-pill .p0 { font-weight: 600; color: #16191D; } .sp-pill .p1 { font-weight: 500; color: #2B3036; overflow: hidden; text-overflow: ellipsis; } .sp-pill .pd { font-weight: 500; color: #6B7280; } .sp-pill u { flex: none; width: 1px; height: 13px; background: #D9DDE2; margin: 0 9px; text-decoration: none; } .sp-off { color: var(--ink-3); font-weight: 500; white-space: normal; } .sp.off .sp-pill { box-shadow: none; background: var(--bg); } .sp-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 14px; } .sp-ph { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; border-radius: var(--r-sm); background: var(--bg); display: block; } .sp-note { margin: 0; padding: 8px 14px 12px; font-size: .76rem; color: var(--ink-3); } .sp.off .sp-photos { opacity: .6; } .errline { margin: 14px 0 0; padding: 11px 13px; border-radius: var(--r-sm); background: var(--danger-l); color: var(--danger-d); font-size: .87rem; font-weight: 600; } .sendbar-note.ready { color: var(--t-800); font-weight: 600; } @media (min-width: 900px) { .composer { padding: 20px; } .tray-grid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); } } /* ── the album feed ────────────────────────────────────────────────────── */ /* Filters follow the feed down the page: the decision to narrow things usually arrives halfway through scrolling, not before it starts. */ .feedbar { position: sticky; top: 56px; z-index: 30; display: grid; gap: 10px; padding: 12px; margin-bottom: 12px; background: rgba(255, 255, 255, .93); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); } .feedbar-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .feedbar .chips { flex: 1 1 auto; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .findtoggle { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 1.5px solid var(--line-2); border-radius: 50%; background: var(--card); font-size: 1rem; cursor: pointer; } .findtoggle.on { background: var(--t-600); border-color: var(--t-600); } .feedbar .chips::-webkit-scrollbar { display: none; } .feedbar .chips a { flex: none; } .feedfind { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; } .feedfind .find { grid-column: 1 / -1; min-height: 44px; } .feedfind select { min-height: 44px; padding: 8px 12px; font-size: .88rem; } .feedfind .btn { grid-column: 1 / -1; } .feedsum { padding: 0 4px 12px; font-size: .84rem; color: var(--ink-2); } .feedsum b { color: var(--ink); font-variant-numeric: tabular-nums; } .feedsum-clear { margin-left: 8px; font-size: .8rem; font-weight: 600; } .feed { display: grid; gap: 12px; } /* one day's worth of posts, announced once */ .dayline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 4px 2px; } .dayline-name { font-weight: 700; font-size: .98rem; } .dayline-sub { font-size: .78rem; color: var(--ink-3); } .dayline:not(:first-child) { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 16px; } .post { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 14px 10px; color: inherit; text-decoration: none; box-shadow: var(--sh-2); transition: border-color .12s ease, transform .1s ease; } .post:hover { border-color: var(--t-500); transform: translateY(-1px); } .post-head { display: flex; align-items: center; gap: 10px; } .post-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--t-100); color: var(--t-800); font-weight: 700; } .post-who { display: block; min-width: 0; flex: 1 1 auto; } .post-who b { display: block; font-size: .94rem; } .post-when { display: block; font-size: .75rem; color: var(--ink-3); } .post-where { margin-top: 10px; font-size: .9rem; font-weight: 600; } .post-note { margin-top: 3px; font-size: .85rem; color: var(--ink-2); } .post-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--ink-3); } .post-open { margin-left: auto; font-weight: 600; color: var(--t-800); } /* the photo mosaic: one big, two side by side, three with a tall lead, four in a square — and the count of everything that did not fit on the last tile */ .pg { display: grid; gap: 4px; margin-top: 11px; border-radius: var(--r); overflow: hidden; } .pg-cell { position: relative; display: block; background: var(--bg); overflow: hidden; } .pg img { width: 100%; height: 100%; object-fit: cover; display: block; } .pg-1 { grid-template-columns: 1fr; } .pg-1 .pg-cell { aspect-ratio: 4 / 3; } .pg-2 { grid-template-columns: 1fr 1fr; } .pg-2 .pg-cell { aspect-ratio: 1; } .pg-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; } .pg-3 .pg-cell:first-child { grid-row: span 2; } .pg-3 .pg-cell { aspect-ratio: auto; min-height: 96px; } .pg-4 { grid-template-columns: 1fr 1fr; } .pg-4 .pg-cell { aspect-ratio: 1; } .pg-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(16, 36, 70, .62); color: #fff; font-size: 1.3rem; font-weight: 700; } .feedmore { display: grid; justify-items: center; padding: 18px 0 6px; } .feedend { font-size: .8rem; color: var(--ink-3); } @media (min-width: 720px) { .feedbar { padding: 12px 14px; } /* a grid here squeezed the two selects down to two letters wide — let them keep a readable width and wrap instead */ .feedfind { display: flex; flex-wrap: wrap; gap: 8px; } .feedfind .find { flex: 1 1 220px; min-width: 180px; } .feedfind select { flex: 0 1 170px; min-width: 140px; width: auto; } .feedfind .btn { flex: none; } .pg-3 .pg-cell { min-height: 120px; } } @media (min-width: 1100px) { /* two columns of posts, but the day divider always keeps a row to itself */ .feed { grid-template-columns: 1fr 1fr; align-items: start; } .dayline { grid-column: 1 / -1; } } /* ── wider screens: the thumb bar becomes a side rail ──────────────────── */ @media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } .pair { grid-template-columns: 1fr 1fr; gap: 14px; } .formrow { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: end; } .seg { display: inline-flex; } .seg a, .seg button { flex: 0 0 auto; padding: 0 20px; } } @media (min-width: 900px) { :root { --gutter: 24px; } .usermenu-name { display: block; } .tabbar { display: none; } .layout { display: flex; align-items: flex-start; } .sidenav { display: block; position: sticky; top: 56px; flex: none; width: 244px; height: calc(100dvh - 56px); padding: 20px 12px; background: var(--card); border-right: 1px solid var(--line); overflow-y: auto; } .sidenav-group { margin-bottom: 20px; } .sidenav-title { font-size: .69rem; font-weight: 700; color: var(--ink-3); letter-spacing: .09em; text-transform: uppercase; padding: 0 12px; margin-bottom: 7px; } .sidenav a { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; color: var(--ink-2); text-decoration: none; font-size: .92rem; font-weight: 600; margin-bottom: 2px; } .sidenav a:hover { background: #F5F9FC; color: var(--ink); } .sidenav a.on { background: var(--t-50); color: var(--t-800); } .sidenav a.on::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--t-600); } .sidenav .ico { font-size: 1.08rem; } .page { flex: 1 1 auto; padding: 26px var(--gutter) 48px; } .card { padding: 22px; } .pagehead { margin-bottom: 20px; } .pagehead-ico { width: 48px; height: 48px; font-size: 1.44rem; } .pagehead h1 { font-size: 1.5rem; } .albums { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); } .photos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } /* Unpinned on a wide screen, the button was left hanging on the page background between two cards. It belongs to the form above it, so it gets a surface of its own and sits at the end of the row, where the eye leaves the last field. */ .sendbar { position: static; display: flex; align-items: center; gap: 18px; padding: 14px 22px; margin-bottom: 14px; background: var(--card); border: 1px solid var(--line); border-top: none; border-radius: 0 0 var(--r-lg) var(--r-lg); backdrop-filter: none; box-shadow: var(--sh-2); margin-top: -15px; } .sendbar-note { display: block; margin-right: auto; font-size: .83rem; color: var(--ink-3); } .sendbar .btn { width: auto; min-width: 240px; } /* the card above it loses its rounded bottom so the two read as one panel */ #up-form .card { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } body.has-sendbar .page { padding-bottom: 48px; } .user-card { grid-template-columns: auto 1fr auto; align-items: start; } .user-avatar { grid-row: span 1; } .user-acts { grid-column: 3; grid-row: 1; margin-top: 0; justify-content: flex-end; max-width: 430px; } } @media (min-width: 1240px) { .up-head { padding: 26px 24px; } .up-head h1 { font-size: 1.5rem; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .album:hover { transform: none; } } /* ── repeated photos (app/photo_dup.py) ─────────────────────────────── */ .stat-red { background: var(--danger-l); border-color: #F1D6D3; } .stat-red b { color: var(--danger-d); } .repeat-banner { margin: 14px 0 0; text-decoration: none; } .repeat-count { font-weight: 700; color: var(--danger-d); } .rep-inline { color: var(--danger-d); font-weight: 600; } .photo { position: relative; } .photo-rep img { opacity: .55; } .photo-tag { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: var(--pill); background: var(--danger-d); color: #fff; font-size: .7rem; font-weight: 700; } .photo-tag-ok { background: var(--t-800); } .rep-row { display: flex; flex-wrap: wrap; gap: 12px 16px; padding: 12px 0; border-top: 1px solid var(--line, #eee); } .rep-row:first-of-type { border-top: 0; } .rep-pair { display: flex; gap: 8px; } .rep-pair figure { margin: 0; text-align: center; } .rep-pair img { width: 110px; height: 146px; object-fit: cover; border-radius: var(--r-sm); cursor: zoom-in; display: block; } .rep-pair figcaption { font-size: .72rem; color: var(--text-dim, #777); margin-top: 3px; } .rep-info { flex: 1 1 220px; display: flex; flex-direction: column; gap: 5px; font-size: .88rem; } .rep-info .hint { display: block; margin: 0; } .rep-where { color: var(--text-dim, #666); line-height: 1.45; } .rep-act { margin-top: 4px; } .rep-row-ok .rep-pair img { opacity: .8; } .rep-album { margin: 14px 0 2px; font-weight: 700; } .rep-filter { display: flex; flex-wrap: wrap; gap: 8px; } .rep-filter select { min-height: 40px; } /* ── folding side rail + settings in the user menu ─────────────────────── */ .navtoggle { display: none; width: 36px; height: 36px; flex: none; border: none; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.1rem; cursor: pointer; } .navtoggle:hover { background: rgba(255, 255, 255, .26); } .usermenu-avatar { position: relative; } .usermenu-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: #E5533D; box-shadow: 0 0 0 2px var(--t-600); } .usermenu-drop { max-height: calc(100dvh - 80px); overflow-y: auto; } .usermenu-title { padding: 10px 16px 4px; font-size: .69rem; font-weight: 700; color: var(--ink-3); letter-spacing: .09em; text-transform: uppercase; } .usermenu-drop a.on { background: var(--t-50); color: var(--t-800); font-weight: 600; } .usermenu-drop .badge { margin-left: auto; } .usermenu-sep { height: 6px; background: var(--bg, #F4F6F8); border-bottom: 1px solid var(--line); } @media (min-width: 900px) { .navtoggle { display: grid; place-items: center; } .sidenav { transition: width .18s ease, padding .18s ease; } .nav-collapsed .sidenav { width: 68px; padding: 20px 10px; } .nav-collapsed .sidenav .lbl, .nav-collapsed .sidenav-title { display: none; } .nav-collapsed .sidenav a { justify-content: center; padding: 11px 0; } .nav-collapsed .sidenav .ico { font-size: 1.25rem; } .nav-collapsed .sidenav-group { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .nav-collapsed .sidenav-group:last-child { border-bottom: none; } } @media (prefers-reduced-motion: reduce) { .sidenav { transition: none; } } /* ── upload page receipt · ผลงานของฉัน ─────────────────────────────────── */ .lastsent { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 11px 14px; border-radius: var(--r); background: var(--t-50); border: 1px solid var(--t-100); } .lastsent-main { display: flex; align-items: center; gap: 10px; flex: 1 1 240px; min-width: 0; color: var(--ink); text-decoration: none; } .lastsent-ico { font-size: 1.1rem; } .lastsent-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lastsent-text b { font-size: .88rem; color: var(--t-800); } .lastsent-text span { font-size: .8rem; color: var(--ink-2); } .lastsent-all { font-size: .84rem; font-weight: 700; color: var(--t-800); text-decoration: none; white-space: nowrap; } .mywork-pick { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .mywork-pick label { font-weight: 600; font-size: .88rem; } .mywork-pick select { flex: 1 1 auto; max-width: 320px; min-height: 42px; } .mywork-h { margin: 16px 0 8px; font-size: .9rem; color: var(--ink-2); } .mywork-listhead { margin: 6px 2px 10px; } @media (min-width: 720px) { .stats-4 { grid-template-columns: repeat(4, 1fr); } } /* ── ผลงานของฉัน: the month card ──────────────────────────────────────── */ .mw-hero { position: relative; overflow: hidden; padding: 16px 18px 18px; margin-bottom: 10px; border-radius: var(--r-lg); color: #fff; background: radial-gradient(120% 140% at 100% 0%, var(--t-500) 0%, var(--t-600) 38%, var(--t-800) 100%); box-shadow: 0 18px 36px -22px rgba(23, 52, 98, .9); } .mw-hero::before, .mw-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .07); } .mw-hero::before { width: 220px; height: 220px; right: -70px; top: -90px; } .mw-hero::after { width: 140px; height: 140px; left: -50px; bottom: -70px; } .mw-nav { position: relative; display: flex; align-items: center; gap: 10px; } .mw-month { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 8px; } .mw-month b { font-size: 1rem; letter-spacing: -.01em; } .mw-now { padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: .7rem; font-weight: 700; } .mw-step { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 12px; background: rgba(255, 255, 255, .14); color: #fff; text-decoration: none; font-size: 1.4rem; line-height: 1; transition: background .15s; } .mw-step:hover { background: rgba(255, 255, 255, .26); } .mw-step-off { opacity: .3; } .mw-big { position: relative; text-align: center; margin: 14px 0 16px; } .mw-big b { display: block; font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; text-shadow: 0 6px 22px rgba(0, 0, 0, .18); } .mw-big span { display: block; margin-top: 6px; font-size: .82rem; opacity: .85; } .mw-chips { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mw-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: rgba(255, 255, 255, .13); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); text-align: center; } .mw-chip i { font-style: normal; font-size: 1.05rem; } .mw-chip b { font-size: 1.35rem; font-weight: 800; line-height: 1.1; } .mw-chip span { font-size: .7rem; opacity: .85; line-height: 1.25; } .mw-chip-warn { background: linear-gradient(155deg, #FF9478, #E0533C); backdrop-filter: none; box-shadow: 0 8px 18px -10px rgba(120, 20, 0, .7), inset 0 0 0 1px rgba(255, 210, 196, .5); } .mw-chip-warn b { color: #FFF3EF; } .mw-total { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 2px 18px; padding: 10px 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); font-size: .84rem; color: var(--ink-2); } .mw-total b { color: var(--ink); font-size: .95rem; } .mw-total-lbl { font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; } .mw-total-warn b { color: var(--danger-d); } .mw-all { margin-left: 8px; font-size: .84rem; font-weight: 700; color: var(--t-800); } @media (min-width: 720px) { .mw-hero { padding: 20px 26px 24px; } .mw-big b { font-size: 4.2rem; } .mw-chips { max-width: 620px; margin: 0 auto; } } /* add-user form: the "change at first login" tick under the password */ .pw-must { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .82rem; color: var(--ink-2); cursor: pointer; } .pw-must input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--t-600); } /* ── "change your password?" popup ─────────────────────────────────────── */ .pwprompt { width: min(380px, calc(100vw - 32px)); padding: 26px 22px 18px; border: none; border-radius: var(--r-lg); box-shadow: 0 30px 70px -20px rgba(16, 36, 70, .55); text-align: center; } .pwprompt::backdrop { background: rgba(12, 28, 54, .45); backdrop-filter: blur(3px); } .pwprompt-ico { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 18px; font-size: 1.6rem; background: var(--t-50); box-shadow: inset 0 0 0 1px var(--t-100); } .pwprompt h2 { margin: 0 0 6px; font-size: 1.15rem; } .pwprompt p { margin: 0 0 18px; font-size: .88rem; color: var(--ink-2); line-height: 1.5; } .pwprompt-later { margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; } .pwprompt-never { border: none; background: none; padding: 8px; font: inherit; font-size: .8rem; color: var(--ink-3); text-decoration: underline; cursor: pointer; } /* ── คู่มือถ่ายรูป ───────────────────────────────────────────────────── */ .gd-link { display: inline-block; margin: 8px 0 0; font-size: .84rem; font-weight: 700; color: var(--t-800); } .gd-rule { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(135deg, #FFF6E6, #FFFDF7); border-color: #F6E2C2; } .gd-rule-ico { font-size: 1.8rem; line-height: 1; } .gd-rule b { color: #8A4B00; } .gd-rule p { margin: 6px 0 0; font-size: .88rem; color: var(--ink-2); line-height: 1.55; } .gd-tabs { margin: 4px 0 14px; } .gd-tabs button { font-size: .84rem; } .gd-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 6px; } .gd-shot { position: relative; margin: 0; padding: 10px; border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(180deg, #F7FAFC, #fff); } .gd-n { position: absolute; top: 8px; left: 8px; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--t-700, var(--t-800)); color: #fff; font-weight: 800; font-size: .85rem; box-shadow: 0 4px 10px -4px rgba(23, 52, 98, .6); } .gd-pic { border-radius: 12px; background: #EEF3F7; overflow: hidden; } .gd-svg { display: block; width: 100%; height: auto; font-family: inherit; } .gd-shot figcaption { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; } .gd-shot figcaption b { font-size: .92rem; } .gd-need { display: flex; flex-wrap: wrap; gap: 4px; } .gd-need i { font-style: normal; font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #FDE8E4; color: #B03A26; } .gd-note { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--t-50); font-size: .84rem; color: var(--ink-2); line-height: 1.55; } .gd-grid { display: grid; gap: 14px; } .gd-do h2, .gd-dont h2, .gd-check h2 { font-size: 1rem; margin: 0 0 8px; } .gd-do ul, .gd-dont ul { margin: 0; padding-left: 20px; font-size: .88rem; line-height: 1.7; color: var(--ink-2); } .gd-do { border-left: 4px solid #2E9E7A; } .gd-dont { border-left: 4px solid #E5533D; } .gd-checks { display: grid; gap: 6px; font-size: .88rem; color: var(--ink-2); } @media (min-width: 720px) { .gd-grid { grid-template-columns: 1fr 1fr; } } /* ── KPI: one person ─────────────────────────────────────────────────── */ .kp-nick { font-weight: 600; color: var(--ink-3); font-size: .8em; } .kp-funnel h2 { margin: 0 0 12px; } .kp-step { padding: 10px 0; border-top: 1px solid var(--line); } .kp-step:first-of-type { border-top: 0; } .kp-step-head { display: flex; align-items: center; gap: 10px; } .kp-num { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--t-50); color: var(--t-800); font-size: .78rem; font-weight: 800; } .kp-step-head b { flex: 1 1 auto; font-size: .92rem; } .kp-val { font-size: 1.35rem; font-weight: 800; color: var(--ink); } .kp-bar { height: 10px; margin: 8px 0 0 34px; border-radius: 999px; background: #EEF3F7; overflow: hidden; } .kp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--t-500), var(--t-700)); } .kp-prod .kp-bar i { background: linear-gradient(90deg, #F2B25C, #D98A1E); } .kp-used .kp-bar i { background: linear-gradient(90deg, #FF9478, #E0533C); } .kp-used .kp-val { color: #C2412C; } .kp-note { margin: 6px 0 0 34px; font-size: .78rem; color: var(--ink-3); } .kp-rates { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 16px; } .kp-rate { padding: 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); } .kp-rate b { display: block; font-size: 1.6rem; font-weight: 800; color: var(--t-800); line-height: 1.1; } .kp-rate span { display: block; font-size: .84rem; font-weight: 700; margin-top: 2px; } .kp-rate em { display: block; font-style: normal; font-size: .72rem; color: var(--ink-3); margin-top: 3px; } .kp-table td .hint { display: block; margin: 2px 0 0; } @media (min-width: 720px) { .kp-rates { grid-template-columns: repeat(4, 1fr); } } /* the guide's real examples */ .gd-real { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); } .gd-real-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; } .gd-real-head .hint { margin: 0; } .gd-real-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; } .gd-real-shot { margin: 0; } .gd-real-pic { all: unset; position: relative; display: block; cursor: zoom-in; border-radius: 12px; overflow: hidden; background: #EEF3F7; box-shadow: 0 6px 16px -10px rgba(16, 36, 70, .5); } .gd-real-pic img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .2s; } .gd-real-pic:hover img { transform: scale(1.03); } .gd-real-shot:last-child .gd-real-pic img { object-fit: contain; background: #fff; } .gd-real-shot figcaption { margin-top: 6px; font-size: .78rem; color: var(--ink-2); line-height: 1.4; } .gd-real-note { margin: 10px 0 0; font-size: .8rem; color: var(--ink-3); } .gd-marks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .gd-marks i { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: .7rem; font-weight: 600; padding: 2px 8px 2px 2px; border-radius: 999px; background: #FFF4CC; color: #6B4E00; } .gd-marks b { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #FFC400; color: #2A1E00; font-size: .66rem; } /* ══ KPI, redrawn ═══════════════════════════════════════════════════════ */ .kx-hero { position: relative; overflow: hidden; margin: 0 0 16px; padding: 20px 20px 18px; border-radius: var(--r-lg); color: #fff; background: radial-gradient(130% 150% at 100% 0%, var(--t-500) 0%, var(--t-600) 35%, var(--t-900) 100%); box-shadow: 0 22px 44px -26px rgba(23, 52, 98, .95); } .kx-hero::before, .kx-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255,255,255,.06); } .kx-hero::before { width: 300px; height: 300px; right: -90px; top: -140px; } .kx-hero::after { width: 180px; height: 180px; left: -60px; bottom: -110px; } .kx-top { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; } .kx-title { display: flex; align-items: center; gap: 12px; } .kx-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; font-size: 1.4rem; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); } .kx-hero h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; color: #fff; } .kx-hero h1 i { font-style: normal; font-weight: 600; opacity: .75; font-size: .8em; } .kx-hero p { margin: 2px 0 0; font-size: .82rem; opacity: .8; } .kx-period { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .kx-period-inline { position: relative; margin-top: 14px; } .kx-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.18); } .kx-seg a { padding: 6px 14px; border-radius: 999px; color: rgba(255,255,255,.8); text-decoration: none; font-size: .82rem; font-weight: 700; } .kx-seg a.on { background: #fff; color: var(--t-800); } .kx-step { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.14); } .kx-step a, .kx-step span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; text-decoration: none; font-size: 1.2rem; line-height: 1; } .kx-step a:hover { background: rgba(255,255,255,.2); } .kx-step span { opacity: .3; } .kx-step b { padding: 0 8px; font-size: .88rem; white-space: nowrap; } .kx-big { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; } .kx-stat { padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } .kx-stat b { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; } .kx-stat b small { font-size: .55em; opacity: .7; } .kx-stat span { display: block; margin-top: 3px; font-size: .76rem; opacity: .85; } .kx-stat-main { background: linear-gradient(150deg, #FFB547, #F07A2E); box-shadow: 0 12px 24px -14px rgba(120, 50, 0, .9); } .kx-chips { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .kx-chips span, .kx-chips a { padding: 5px 11px; border-radius: 999px; font-size: .76rem; font-weight: 600; background: rgba(255,255,255,.12); color: #fff; text-decoration: none; } .kx-chips .kx-chip-warn { background: rgba(255, 120, 95, .9); } .kx-podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; } .kx-pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 18px 12px 14px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); box-shadow: var(--sh-2); transition: transform .15s; } .kx-pod:hover { transform: translateY(-3px); } .kx-pod-1 { background: linear-gradient(180deg, #FFF6D8, #fff 60%); border-color: #F3D77A; } .kx-pod-2 { background: linear-gradient(180deg, #F1F4F7, #fff 60%); border-color: #CBD5DE; } .kx-pod-3 { background: linear-gradient(180deg, #FBEDE2, #fff 60%); border-color: #E6C3A6; } .kx-medal { position: absolute; top: 10px; left: 12px; font-size: 1.4rem; } .kx-pod .grade { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; font-size: .9rem; } .kx-av { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 50%; font-weight: 800; font-size: 1.3rem; color: #fff; background: linear-gradient(145deg, var(--t-500), var(--t-800)); box-shadow: 0 8px 16px -8px rgba(23, 52, 98,.7); } .kx-av-sm { width: 38px; height: 38px; font-size: .95rem; } .kx-av-xs { width: 24px; height: 24px; font-size: .7rem; box-shadow: none; } .kx-av-lg { width: 64px; height: 64px; font-size: 1.6rem; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); } .kx-pod-name { margin-top: 6px; font-size: .92rem; text-align: center; } .kx-pod-sub { font-size: .74rem; color: var(--ink-3); } .kx-pod-val { margin-top: 8px; font-size: 2rem; font-weight: 800; color: var(--t-800); line-height: 1; } .kx-pod-unit { font-size: .72rem; color: var(--ink-3); } .kx-board-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; } .kx-board-head h2 { margin: 0; } .kx-board-head .hint { margin: 0; } .kx-row { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); border-radius: 12px; } .kx-row:hover { background: var(--t-50); } .kx-rank { width: 26px; text-align: center; font-weight: 800; color: var(--ink-3); } .kx-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .kx-who b i { font-style: normal; font-weight: 600; color: var(--ink-3); } .kx-bar { height: 7px; border-radius: 999px; background: #EEF3F7; overflow: hidden; } .kx-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--t-500), var(--t-700)); } .kx-nums { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: .76rem; color: var(--ink-2); } .kx-nums .kx-used { color: #C2410C; font-weight: 700; } .kx-rep { color: var(--danger-d); font-style: normal; } .kx-last { color: var(--ink-3); } .kx-val b { font-size: 1.35rem; font-weight: 800; color: var(--t-800); } .kx-go { color: var(--ink-3); font-size: 1.4rem; } .kx-empty { color: var(--ink-3); font-size: .9rem; margin: 10px 0; } .kx-row-quiet { padding-top: 9px; padding-bottom: 9px; } .kx-row-quiet .kx-av { background: #B8C6D0; } .kx-row-quiet .kx-who b { color: var(--ink-2); font-weight: 600; } .kx-row-quiet .kx-val b { color: var(--ink-3); } .grade.grade-none { background: #F1F4F7; color: var(--ink-3); } .kx-hero-person { padding-top: 14px; } .kx-back { position: relative; display: inline-block; margin-bottom: 10px; color: rgba(255,255,255,.85); text-decoration: none; font-size: .84rem; font-weight: 700; } .kx-me { display: flex; align-items: center; gap: 14px; } .kx-grade-box { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 18px; background: rgba(255,255,255,.14); font-size: .86rem; } .grade-xl { width: 52px; height: 52px; border-radius: 16px; font-size: 1.5rem; } .kx-band { display: grid; grid-template-columns: 1fr; align-items: center; gap: 4px 16px; padding: 7px 0; } .kx-band-text { order: -1; } @media (min-width: 720px) { .kx-band { grid-template-columns: 190px 1fr; } } .kx-band-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 90px; height: 42px; padding: 0 14px 0 8px; border-radius: 12px; color: #fff; background: linear-gradient(90deg, var(--t-600), var(--t-500)); box-shadow: 0 8px 16px -12px rgba(23, 52, 98,.8); } .kx-band-bar span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.25); font-size: .75rem; font-weight: 800; } .kx-band-bar b { font-size: 1.2rem; font-weight: 800; } .kx-band-b .kx-band-bar { background: linear-gradient(90deg, #E08700, #F4B042); } .kx-band-c .kx-band-bar { background: linear-gradient(90deg, #E0533C, #FF9478); } .kx-band-text { display: flex; flex-direction: column; min-width: 150px; } .kx-band-text b { font-size: .9rem; } .kx-band-text em { font-style: normal; font-size: .76rem; color: var(--ink-3); } .kx-rings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 16px; } .kx-ring { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 16px 10px 14px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); } .kx-ring svg { width: 84px; height: 84px; } .kx-ring > b { position: absolute; top: 44px; left: 0; right: 0; font-size: 1.05rem; font-weight: 800; color: var(--ink); } .kx-ring-label { margin-top: 6px; font-size: .84rem; font-weight: 700; } .kx-ring em { font-style: normal; font-size: .72rem; color: var(--ink-3); } .kx-ring-big { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; font-size: 1.7rem; font-weight: 800; color: #5B3FD0; background: radial-gradient(circle, #EEEAFE 55%, #fff 56%); box-shadow: inset 0 0 0 7px #E4DEFC; } .kx-album { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); border-radius: 12px; } .kx-album:hover { background: var(--t-50); } .kx-album-date { display: grid; place-items: center; width: 48px; height: 52px; flex: none; border-radius: 14px; background: var(--t-50); color: var(--t-800); line-height: 1; } .kx-album-date b { font-size: 1.25rem; font-weight: 800; } .kx-album-date i { font-style: normal; font-size: .68rem; opacity: .75; } .kx-album-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .kx-album-main > b { font-size: .9rem; } .kx-legend { margin-top: 12px; } @media (min-width: 720px) { .kx-hero { padding: 24px 28px 22px; } .kx-big { grid-template-columns: 1.3fr 1fr 1fr 1fr; } .kx-stat b { font-size: 2.3rem; } .kx-rings { grid-template-columns: repeat(4, 1fr); } } /* ══ upload page + daily albums, in the KPI look ═══════════════════════ */ .up-hero { padding-bottom: 16px; } .up-guide { position: relative; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; text-decoration: none; font-size: .84rem; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); } .up-guide:hover { background: rgba(255,255,255,.26); } .up-mini { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; } .up-mini a { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 14px; background: rgba(255,255,255,.12); color: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } .up-mini b { font-size: 1.5rem; font-weight: 800; line-height: 1.1; } .up-mini span { font-size: .7rem; opacity: .85; text-align: center; } .up-mini .up-mini-hot { background: linear-gradient(150deg, #FFB547, #F07A2E); box-shadow: 0 10px 20px -12px rgba(120,50,0,.9); } .composer { padding: 18px; border-radius: var(--r-lg); } .up-step { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; } .up-step:first-child { margin-top: 0; } .up-step span { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: linear-gradient(145deg, var(--t-500), var(--t-800)); color: #fff; font-weight: 800; font-size: .85rem; box-shadow: 0 6px 12px -6px rgba(23, 52, 98,.7); } .up-step b { font-size: .98rem; } .up-step em { font-style: normal; font-size: .78rem; color: var(--ink-3); } .composer .tray-empty { min-height: 190px; border: 2px dashed #9ACFE2; border-radius: 20px; background: radial-gradient(120% 120% at 50% 0%, #F0F9FC, #E0F1F7); } .composer .tray-empty:hover { background: radial-gradient(120% 120% at 50% 0%, #E6F5FA, #D2EBF4); border-color: var(--t-500); } .composer .tray-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; font-size: 1.9rem; background: linear-gradient(145deg, var(--t-500), var(--t-800)); box-shadow: 0 12px 22px -12px rgba(23, 52, 98,.9); margin-bottom: 6px; } .composer .tray-item { border-radius: 14px; box-shadow: 0 6px 14px -10px rgba(0,0,0,.5); } .composer .tray-add { border-radius: 14px; } .composer .optrow { display: grid; gap: 10px; margin-top: 0; border-top: none; } .composer .opt { min-height: 58px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 16px; background: #FAFCFD; } .composer .opt:hover { border-color: var(--t-500); } .composer .opt.on { border-color: var(--t-600); background: var(--t-50); } .composer .opt-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: var(--t-50); font-size: 1rem; } .composer .optpanel { margin-top: -4px; padding: 14px; border: 1.5px solid var(--t-100); border-top: none; border-radius: 0 0 16px 16px; background: #FBFDFE; } .composer .cap { min-height: 56px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 16px; background: #FAFCFD; } .composer .cap:focus { border-color: var(--t-500); background: #fff; } .sendbar .btn { background: linear-gradient(135deg, var(--t-500), var(--t-800)); border: none; box-shadow: 0 12px 24px -12px rgba(23, 52, 98,.9); } .lastsent { border-radius: 18px; background: linear-gradient(135deg, #F0F9FC, #E0F2F7); } .feedbar { border-radius: 18px; } .feedbar .chips a { border-radius: 999px; } .feedbar .chips a.on { background: linear-gradient(135deg, var(--t-500), var(--t-800)); color: #fff; border-color: transparent; } .dayline { align-items: center; } .dayline-name { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--t-600), var(--t-800)); font-size: .88rem; box-shadow: 0 8px 16px -10px rgba(23, 52, 98,.8); } .dayline:not(:first-child) { border-top: none; } .post { border-radius: 22px; padding: 14px 14px 12px; box-shadow: 0 14px 30px -22px rgba(16, 36, 70,.55); } .post:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -22px rgba(16, 36, 70,.7); } .post-avatar { color: #fff; background: linear-gradient(145deg, var(--t-500), var(--t-800)); } .post-where { display: inline-flex; padding: 5px 11px; border-radius: 999px; background: var(--t-50); color: var(--t-800); font-size: .84rem; } .post .pg { border-radius: 16px; } .post-foot { gap: 14px; } @media (min-width: 720px) { .composer { padding: 24px; } .composer .optrow { grid-template-columns: 1fr 1fr; align-items: start; } .composer .optpanel { grid-column: 1 / -1; margin-top: 0; border-top: 1.5px solid var(--t-100); border-radius: 16px; } .up-mini b { font-size: 1.8rem; } } /* ".empty" is also the empty-state box's class; on a row's value it only greys the text */ .opt-val.empty { padding: 0; margin: 0; min-height: 0; display: block; background: none; border: 0; box-shadow: none; text-align: right; } /* ผลงานของฉัน in the KPI look */ .kx-chips .kx-chip-all { background: rgba(0,0,0,.18); } .my-listhead { margin: 4px 2px 12px; } .my-listhead > span { display: inline-flex; align-items: center; gap: 10px; } .my-feed .post-head .kx-album-date { width: 44px; height: 48px; } @media (min-width: 1100px) { .my-feed { grid-template-columns: 1fr 1fr; } } /* one album, in the KPI look */ .al-date { display: grid; place-items: center; width: 58px; height: 62px; flex: none; border-radius: 18px; line-height: 1; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); } .al-date b { font-size: 1.6rem; font-weight: 800; } .al-date i { font-style: normal; font-size: .68rem; opacity: .8; } .al-status { position: relative; padding: 8px 14px; border-radius: 999px; font-size: .84rem; font-weight: 700; background: rgba(255, 196, 0, .9); color: #3D2C00; } .al-status-ok { background: #fff; color: var(--t-800); } .al-del { position: relative; margin: 14px 0 0; } .al-del button { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.15); color: #fff; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; } .al-del button:hover { background: #C4453B; border-color: #C4453B; } .al-photos .photos { gap: 10px; } .al-photos .photo { border-radius: 16px; box-shadow: 0 10px 22px -16px rgba(16, 36, 70,.7); } .al-photos .photo img { border-radius: 16px; } /* the guide, in the KPI look */ .gd-hero .gd-rule { position: relative; display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 0; padding: 14px 16px; border-radius: 18px; border: 0; color: #3D2600; background: linear-gradient(135deg, #FFD27A, #FFB547); box-shadow: 0 14px 26px -16px rgba(120,60,0,.9); } .gd-hero .gd-rule b { color: #4A2E00; } .gd-hero .gd-rule p { margin: 5px 0 0; color: #5A3A05; opacity: 1; font-size: .86rem; line-height: 1.55; } .gd-hero .gd-rule-ico { font-size: 1.7rem; line-height: 1; } .gd-hero .gd-tabs { position: relative; margin: 16px 0 0; flex-wrap: wrap; } .kx-seg button { padding: 7px 14px; border: 0; border-radius: 999px; background: none; color: rgba(255,255,255,.85); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; } .kx-seg button.on { background: #fff; color: var(--t-800); } .kx-seg button:not(.on):hover { background: rgba(255,255,255,.14); } .gd-panel > .card { border-radius: 22px; } .gd-shot { border-radius: 18px; } .gd-pic { border-radius: 14px; } .gd-do, .gd-dont, .gd-check { border-radius: 22px; } /* guide · install tab */ .gd-lead { margin: 4px 0 14px; font-size: .9rem; color: var(--ink-2); line-height: 1.6; } .gd-inst-state { margin: 0 0 12px; padding: 11px 14px; border-radius: 14px; font-size: .88rem; line-height: 1.55; background: #DDF3E6; color: #17744A; } .gd-inst-warn { background: var(--amber-l); color: var(--amber-d); } .gd-link-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 18px; border-radius: 16px; background: linear-gradient(135deg, var(--t-50), #E0F2F7); border: 1px solid var(--t-100); } .gd-link-box > div { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .gd-link-box .hint { margin: 0; } .gd-link-box b { font-size: .92rem; color: var(--t-800); overflow-wrap: anywhere; } .gd-link-box .btn { flex: none; } .gd-os-list { display: flex; flex-direction: column; gap: 22px; } .gd-os h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1rem; } .gd-os.is-mine { order: -1; } .gd-mine { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--t-500), var(--t-800)); } .gd-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .gd-step { position: relative; margin: 0; padding: 10px; border-radius: 18px; border: 1px solid var(--line); background: #fff; } .gd-step .gd-pic { background: none; } .gd-phone { max-width: 150px; margin: 0 auto; } .gd-step figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; } .gd-step figcaption b { font-size: .88rem; } .gd-step figcaption span { font-size: .75rem; color: var(--ink-3); line-height: 1.45; } .gd-os.is-mine .gd-step { border-color: var(--t-100); box-shadow: 0 10px 22px -18px rgba(30, 75, 130, .9); } @keyframes gd-tap { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .gd-tap { animation: gd-tap 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .gd-tap { animation: none; } } .gd-panel .gd-note ul { margin: 6px 0 0; padding-left: 20px; line-height: 1.7; } @media (max-width: 420px) { .gd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } } /* photo guide checks (shown only, not graded) */ .kx-rings { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } @media (min-width: 900px) { .kx-rings { grid-template-columns: repeat(5, 1fr); } } .kx-miss-lead { margin: 0 0 10px; font-size: .88rem; color: var(--ink-2); } .kx-miss-list { display: grid; gap: 8px; margin-bottom: 10px; } .kx-miss-row { display: grid; grid-template-columns: 118px 1fr auto auto; align-items: center; gap: 10px; font-size: .86rem; } .kx-miss-name { font-weight: 700; } .kx-miss-bar { height: 9px; border-radius: 999px; background: #EEF3F7; overflow: hidden; } .kx-miss-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #F4B042, #E0533C); } .kx-miss-row b { font-weight: 800; color: var(--danger-d); } .kx-miss-row em { font-style: normal; font-size: .74rem; color: var(--ink-3); } .al-prods .al-prod { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); } .al-prod-pic { all: unset; flex: none; width: 64px; height: 80px; border-radius: 12px; overflow: hidden; background: #EEF3F7; cursor: zoom-in; } .al-prod-pic img { display: block; width: 100%; height: 100%; object-fit: cover; } .al-prod-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .al-prod-main > b { font-size: .92rem; overflow-wrap: anywhere; } .al-prod-meta { font-size: .78rem; color: var(--ink-2); } .al-prod-meta .al-full { color: #17744A; } .al-prod-meta .al-part { color: var(--amber-d); } .al-checks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .al-checks i { font-style: normal; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .al-checks i.ok { background: #DDF3E6; color: #17744A; } .al-checks i.no { background: var(--danger-l); color: var(--danger-d); } @media (max-width: 420px) { .kx-miss-row { grid-template-columns: 96px 1fr auto; } .kx-miss-row em { display: none; } } /* KPI board: three bars per person (photos → products → OCR) */ .kx-legend3 { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: -2px 0 8px; font-size: .74rem; color: var(--ink-3); } .kx-legend3 span { display: inline-flex; align-items: center; gap: 6px; } .kx-legend3 i { width: 18px; height: 7px; border-radius: 999px; } .kx-legend3 .l-ph, .kx-b-ph .kx-track i { background: linear-gradient(90deg, #8FD7DF, var(--t-500)); } .kx-legend3 .l-gr, .kx-b-gr .kx-track i { background: linear-gradient(90deg, #F4B042, #E08700); } .kx-legend3 .l-oc, .kx-b-oc .kx-track i { background: linear-gradient(90deg, #6FD3A5, #17A673); } .kx-bars { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 1px; } .kx-b { display: grid; grid-template-columns: 62px 1fr 64px; align-items: center; gap: 8px; } .kx-b em { font-style: normal; font-size: .72rem; color: var(--ink-3); white-space: nowrap; } .kx-b > b { font-size: .8rem; font-weight: 800; color: var(--ink-2); text-align: right; white-space: nowrap; } .kx-track { height: 7px; border-radius: 999px; background: #EEF3F7; overflow: hidden; } .kx-track i { display: block; height: 100%; border-radius: inherit; transition: width .3s; } .kx-b-gr .kx-track { height: 10px; } .kx-b-gr em, .kx-b-gr > b { color: var(--amber-d); font-weight: 800; } .kx-val { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; } .kx-val small { font-size: .66rem; font-weight: 700; color: var(--ink-3); } @media (max-width: 520px) { .kx-b { grid-template-columns: 50px 1fr 30px; gap: 6px; } .kx-b-gr > b { font-size: .92rem; } /* the product count is already on the orange bar; the room goes to the bars */ .kx-row:not(.kx-row-quiet) .kx-val { display: none; } .kx-row { gap: 9px; } } /* KPI: team picker */ .kx-teams { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; } .kx-teams-lbl { font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.8); margin-right: 2px; } .kx-teams a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; text-decoration: none; font-size: .82rem; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); } .kx-teams a:hover { background: rgba(255,255,255,.22); } .kx-teams a.on { background: #fff; color: var(--t-800); box-shadow: none; } .kx-teams a i { font-style: normal; font-size: .7rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.16); } .kx-teams a.on i { background: var(--t-50); color: var(--t-700); } .kx-team-now { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; font-size: .78rem; vertical-align: middle; background: rgba(255,255,255,.2); } /* feed posts: every card the same size — the photo block is one fixed 4:3 frame however many photos and whatever their shape, and cards side by side stretch to the taller one with the footer on the bottom line */ .feed { align-items: stretch; } .post { display: flex; flex-direction: column; } .post .post-foot { margin-top: auto; } .post .pg { aspect-ratio: 4 / 3; grid-auto-rows: 1fr; margin-bottom: 10px; } .post .pg .pg-cell { aspect-ratio: auto; min-height: 0; } .post .pg img { position: absolute; inset: 0; } .post .pg-2 { grid-template-rows: 1fr; } .post .pg-3, .post .pg-4 { grid-template-rows: 1fr 1fr; } /* the note line is kept on every card (empty when there is none) and held to one line, so a note never makes one card taller than its neighbours */ .post .post-note { min-height: 1.35em; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .al-checks i.unread { background: var(--amber-l); color: var(--amber-d); } /* a long branch name ("7-Eleven · ศรีนครินทร์ 42 (รหัส 19567)") must shrink inside its row — it made the whole page wider than a phone, which also pushed the fixed send bar off the right edge */ .optrow, .opt { min-width: 0; max-width: 100%; } .opt .opt-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sendbar { min-width: 0; max-width: 100%; } .sendbar-note { min-width: 0; } /* the send's progress: a thin line along the top of the send bar */ .sendbar-prog { position: absolute; left: 0; right: 0; top: -1px; height: 4px; background: var(--t-100); overflow: hidden; } .sendbar-prog[hidden] { display: none; } .sendbar-prog i { display: block; height: 100%; width: 0; background: var(--t-600); transition: width .3s ease; } @media (min-width: 720px) { .sendbar { position: relative; } } /* sub-teams (Sales → Team Sales 1…), team lead, employee id */ .user-ids { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .user-ids span { font-size: .78rem; color: var(--ink-2); background: var(--t-50); border: 1px solid var(--line); border-radius: var(--pill); padding: 2px 10px; } .user-ids b { color: var(--ink); } .user-ids .lead { background: var(--amber-l); color: var(--amber-d); border-color: transparent; font-weight: 600; } .kx-subteam { display: inline-block; margin-left: 6px; font-size: .72rem; font-weight: 600; color: var(--t-700); background: var(--t-50); border-radius: var(--pill); padding: 1px 8px; vertical-align: middle; } .kx-teams a.kx-team-sub { padding: 4px 10px; font-size: .8rem; opacity: .9; } /* admin: user list filter (templates/admin.html #uf) */ .uf-alert { display: block; width: 100%; text-align: left; margin: 0 0 12px; padding: 11px 14px; border: 1px solid #F1C9C5; border-radius: var(--r-sm); background: var(--danger-l); color: var(--danger-d); font: inherit; font-size: .88rem; cursor: pointer; } .uf-alert:hover { border-color: var(--danger); } .uf { display: grid; gap: 10px; margin-bottom: 14px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--t-50); } .uf-q { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font: inherit; background: var(--card); } .uf-q:focus { outline: none; border-color: var(--t-600); box-shadow: 0 0 0 3px var(--glow); } .uf-chips { display: flex; flex-wrap: wrap; gap: 7px; } .uf-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 13px; border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--card); color: var(--ink-2); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; } .uf-chip span { font-size: .74rem; font-weight: 700; padding: 1px 7px; border-radius: var(--pill); background: var(--t-50); color: var(--ink-2); } .uf-chip.on { background: var(--t-600); border-color: var(--t-600); color: #fff; } .uf-chip.on span { background: rgba(255,255,255,.25); color: #fff; } .uf-chip-bad span { background: var(--danger-l); color: var(--danger-d); } .uf-chip-bad.on { background: var(--danger); border-color: var(--danger); } .uf-selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px; } .uf-selects select { min-height: 40px; padding: 8px 10px; font-size: .85rem; width: 100%; } .uf-foot { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--ink-3); } .uf-clear { border: 0; background: none; color: var(--t-700); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; padding: 0; } .uf-empty { margin: 6px 0; text-align: center; color: var(--ink-3); font-size: .88rem; } .user-card[hidden] { display: none; } /* ══ 2026-10 · ผลงานของฉัน as the landing page, online products, customer news, the feed's filters, notification settings, weekly report ══════════ */ .devtag { margin-left: 8px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; background: #FFE4A8; color: #7A4B00; letter-spacing: .02em; white-space: nowrap; } /* who sent it, and for which team — on every post */ .post-team { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; vertical-align: 1px; background: var(--t-50); color: var(--t-800); font-size: .7rem; font-weight: 700; white-space: nowrap; } .post-nick { font-style: normal; font-weight: 600; color: var(--ink-3); } /* three-way tabs: upload kinds, my work, feed kinds */ .seg3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin: 0 0 14px; border-radius: 16px; background: #E1ECF2; } .seg3 a, .seg3 button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 8px; border: 0; border-radius: 12px; background: none; color: var(--ink-2); font: inherit; font-size: .88rem; font-weight: 700; text-decoration: none; cursor: pointer; text-align: center; } .seg3 a.on, .seg3 button.on { background: #fff; color: var(--t-800); box-shadow: 0 4px 12px -8px rgba(14, 38, 70, .6); } .seg3 i { font-style: normal; font-size: .72rem; padding: 1px 7px; border-radius: 999px; background: rgba(45,124,184,.12); color: var(--t-800); } .kx-hero .seg3 { position: relative; margin: 16px 0 0; background: rgba(0,0,0,.18); } .kx-hero .seg3 a { color: rgba(255,255,255,.85); } .kx-hero .seg3 a.on { background: #fff; color: var(--t-800); } .kx-hero .seg3 i { background: rgba(255,255,255,.2); color: inherit; } .kx-hero .seg3 a.on i { background: var(--t-50); } .uptabs a { flex-direction: column; gap: 2px; font-size: 1.15rem; line-height: 1.1; } .uptabs a span { font-size: .8rem; } @media (min-width: 720px) { .uptabs a { flex-direction: row; gap: 8px; } .uptabs a span { font-size: .9rem; } } /* ── ranks on ผลงานของฉัน ─────────────────────────────────────────────── */ .rk-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } @media (min-width: 900px) { .rk-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .rk { margin: 0; padding: 18px; min-width: 0; } .rk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .rk-head h2 { margin: 0; font-size: 1.05rem; } .rk-sub { font-size: .76rem; color: var(--ink-3); } .rk-place { text-align: right; line-height: 1; } .rk-num { display: block; font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; background: linear-gradient(150deg, #FFB547, #F07A2E); -webkit-background-clip: text; background-clip: text; color: transparent; } .rk-num i { font-style: normal; font-size: .5em; vertical-align: .55em; } .rk-of { font-size: .76rem; color: var(--ink-3); } .rk-say { margin: 10px 0 8px; padding: 10px 12px; border-radius: 12px; background: var(--amber-l); color: var(--amber-d); font-size: .88rem; } .rk-say b { font-size: 1.1em; } .rk-say-top { background: #E7F7EE; color: #166534; } .rk-say-mute { background: #F1F4F7; color: var(--ink-2); } .rk-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; } .rk-list li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 8px; border-radius: 12px; } .rk-list li.rk-me { background: linear-gradient(90deg, #FFF3DD, #FFF9EF); box-shadow: inset 0 0 0 1.5px #F6C870; } .rk-gap { justify-content: center; color: var(--ink-3); padding: 0 !important; line-height: 1; } .rk-pos { width: 28px; text-align: center; font-weight: 800; color: var(--ink-3); flex: none; } .rk-top .rk-pos { font-size: 1.15rem; } .rk-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .rk-name b { font-size: .88rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rk-name b i { font-style: normal; font-weight: 500; color: var(--ink-3); } .rk-name em { font-style: normal; font-size: .72rem; color: var(--ink-3); } .rk-score { font-weight: 800; font-size: 1.05rem; color: var(--t-800); white-space: nowrap; } .rk-score small { margin-left: 3px; font-size: .66rem; font-weight: 600; color: var(--ink-3); } .rk-note { margin: 8px 2px 18px; } .rk h2 { margin: 0; font-size: 1.05rem; } .rk-big { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 14px 0 6px; text-align: center; } .rk-big b { display: flex; align-items: baseline; gap: 8px; font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--t-800); } .rk-big b i { font-style: normal; font-size: .95rem; font-weight: 700; letter-spacing: 0; color: var(--ink-3); } .rk-big b em { font-style: normal; font-size: 2rem; } .rk-big-top b { color: #E07A1F; } .rk-big span { font-size: .84rem; color: var(--ink-2); } .rk-big-mute b { color: #B8C6D0; } .my-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 22px 2px 10px; } .my-section-title h2 { margin: 0; font-size: 1.1rem; } .my-section-title .hint { margin: 0; } /* product by product: what its photos lacked */ .kx-tip { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--t-50); color: var(--t-800); font-size: .86rem; } .kx-lack-list { display: grid; } .kx-lack-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; border-radius: 12px; } .kx-lack-row:hover { background: var(--t-50); } .kx-lack:not(.open) .kx-lack-more { display: none; } .kx-lack-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .kx-lack-main > b { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kx-lack-main > em { font-style: normal; font-size: .74rem; color: var(--ink-3); } .kx-lack-tags { display: flex; flex-wrap: wrap; gap: 4px; } .kx-lack-tags i { font-style: normal; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--danger-l); color: var(--danger-d); } .kx-lack-all { margin-top: 10px; } /* ── online product and news cards ───────────────────────────────────── */ .post.ent { cursor: default; } .post.ent:hover { transform: none; } .ent-body { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; } .ent-title { font-size: 1rem; } .ent-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .84rem; color: var(--ink-2); } .ent-price { font-weight: 800; color: #C2410C; } .ent-link { font-size: .8rem; color: var(--t-700); word-break: break-all; text-decoration: none; } .ent-link:hover { text-decoration: underline; } .ent-shots .pg-cell img { object-position: top; } .ent-tags { display: flex; flex-wrap: wrap; gap: 5px; } .tag { padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--t-50); color: var(--t-800); } .tag-src { background: #F1F4F7; color: var(--ink-2); } .pf { flex: none; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; white-space: nowrap; } .pf-tiktok { background: #111; color: #fff; } .pf-shopee { background: #FFE8DE; color: #C2410C; } .pf-lazada { background: #E5E9FF; color: #2A2FB3; } .pf-other { background: #F1F4F7; color: var(--ink-2); } .urg { flex: none; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; white-space: nowrap; } .urg-urgent { background: var(--danger); color: #fff; } .urg-important { background: var(--amber-l); color: var(--amber-d); } .post.news-urgent { border-left: 4px solid var(--danger); } .post.news-important { border-left: 4px solid var(--amber); } .news-text { font-size: .88rem; color: var(--ink-2); white-space: pre-line; line-height: 1.55; } .news-text.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .linkbtn { padding: 0; border: 0; background: none; color: var(--t-700); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; } .linkbtn:hover { text-decoration: underline; } .news-more { align-self: flex-start; } .post-foot form { margin: 0; } .ent-del { margin-left: auto; } .news-foot { flex-wrap: wrap; } .nf { font-size: .78rem; color: var(--ink-3); } .nf-ok { color: #15803D; font-weight: 700; } .nf-bad { color: var(--danger-d); font-weight: 700; } .nf-wait { color: var(--amber-d); font-weight: 700; } .nf-why { font-size: .72rem; color: var(--ink-3); } .ent-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .btn-xs { min-height: 32px; padding: 0 11px; font-size: .78rem; border-radius: 10px; } /* ── the online / news forms ─────────────────────────────────────────── */ .linkbox { display: flex; gap: 8px; align-items: flex-start; } .linkbox .cap { flex: 1 1 auto; min-height: 54px; padding: 10px 12px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); font-size: .9rem; word-break: break-all; } .linkbox .cap:focus { border-color: var(--t-600); } .pfpick, .catpick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .pfopt, .catopt { position: relative; cursor: pointer; } .pfopt input, .catopt input, .urgopt input { position: absolute; opacity: 0; pointer-events: none; } .pfopt span, .catopt span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; font-size: .86rem; font-weight: 600; color: var(--ink-2); } .pfopt input:checked + span, .catopt input:checked + span { border-color: var(--t-600); background: var(--t-600); color: #fff; } .pfopt input:focus-visible + span, .catopt input:focus-visible + span, .urgopt input:focus-visible + span { outline: 3px solid var(--glow); } .catopt span i { font-style: normal; } .urgpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; } .urgopt { cursor: pointer; } .urgopt span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px; border-radius: 14px; border: 1.5px solid var(--line-2); background: #fff; } .urgopt b { font-size: .92rem; } .urgopt em { font-style: normal; font-size: .72rem; color: var(--ink-3); line-height: 1.35; } .urgopt.urg-normal input:checked + span { border-color: var(--t-600); background: var(--t-50); } .urgopt.urg-important input:checked + span { border-color: var(--amber); background: var(--amber-l); } .urgopt.urg-urgent input:checked + span { border-color: var(--danger); background: var(--danger-l); } .urgopt.urg-urgent b { color: var(--danger-d); } .tray-tall .tray-item { aspect-ratio: 3 / 4; } .tray-tall .tray-item img { object-position: top; } .entry-form .field textarea.cap { border: 1.5px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 12px; } /* ── the feed's filters ──────────────────────────────────────────────── */ .chips-sep { flex: none; width: 1px; height: 22px; margin: 0 2px; background: var(--line-2); } .findtoggle { position: relative; } .findtoggle-n { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--amber); color: #fff; font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center; } /* the older .feedfind turns into a flex row on wide screens; this one stays a grid */ .feedfind.feedfind-x { display: grid; grid-template-columns: 1fr 1fr; align-items: end; } .feedfind-x .find { grid-column: 1 / -1; } .feedfind-x select { flex: none; width: 100%; min-width: 0; } .feedfind-x .btn { flex: 1; } .ff { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; } .ff > span { font-size: .72rem; font-weight: 700; color: var(--ink-3); } .ff select, .ff input { min-height: 42px; padding: 7px 10px; font-size: .86rem; width: 100%; } .ff-checks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .86rem; } .ff-checks label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .ff-actions { grid-column: 1 / -1; display: flex; gap: 8px; } .ff-actions .btn { flex: 1; } @media (min-width: 900px) { .feedfind.feedfind-x { grid-template-columns: repeat(4, 1fr); } .ff-actions { grid-column: auto / span 2; justify-content: flex-end; } .ff-actions .btn { flex: none; min-width: 120px; } } .fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; } .fchips a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 12px; border-radius: 999px; background: var(--t-600); color: #fff; font-size: .8rem; font-weight: 700; text-decoration: none; } .fchips a i { font-style: normal; opacity: .75; } .fchips a:hover { background: var(--t-800); } .fchips-sum { margin-left: auto; font-size: .8rem; color: var(--ink-2); } /* ── settings: แจ้งเตือน / รายงาน ────────────────────────────────────── */ .setbox { margin-bottom: 14px; } .setbox form { margin: 0; } .setbox .field select, .setbox .field input:not([type=checkbox]):not([type=radio]), .setbox .field textarea { width: 100%; } .ff-checks input[type=checkbox], .ff-checks input[type=radio], .seenlist input, .hint input[type=checkbox] { width: 18px; height: 18px; min-height: 0; flex: none; margin: 0; } .setbox textarea.cap { border: 1.5px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 12px; min-height: 70px; } .setbtns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; } .setbtns input { flex: 1 1 220px; min-height: 40px; } .howto { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--t-50); font-size: .85rem; color: var(--ink-2); } .howto summary { cursor: pointer; font-weight: 700; color: var(--t-800); } .howto ol, .howto ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; } .howto code, .seenlist code { padding: 1px 6px; border-radius: 6px; background: #fff; font-size: .8em; word-break: break-all; } .kx-chips .st-ok { background: rgba(80, 220, 150, .3); } .kx-chips .st-no { background: rgba(0,0,0,.18); } .seenlist { display: grid; gap: 6px; font-size: .84rem; } .seenlist label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .seenlist em { font-style: normal; color: var(--ink-3); font-size: .78rem; } .sw { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: .9rem; font-weight: 600; cursor: pointer; } .sw input { width: 20px; height: 20px; } .chipbtn { margin: 3px 4px 0 0; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font: inherit; font-size: .78rem; color: var(--t-800); cursor: pointer; } .chipbtn:hover { border-color: var(--t-500); background: var(--t-50); } .loglist { display: grid; gap: 4px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-2); } .mono { font-family: ui-monospace, Consolas, monospace; font-size: .82em; } .tablewrap { overflow-x: auto; } .tbl { width: 100%; border-collapse: collapse; font-size: .82rem; } .tbl th { text-align: left; padding: 6px 8px; font-size: .72rem; color: var(--ink-3); border-bottom: 1px solid var(--line); } .tbl td { padding: 7px 8px; border-bottom: 1px solid #F0F5F9; vertical-align: top; } /* ── the weekly report page ──────────────────────────────────────────── */ .wk-send { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 14px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.12); } .wk-send .hint { margin: 0; color: rgba(255,255,255,.85); } .wk-send .hint a { color: #fff; } .wk-body { margin-bottom: 30px; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* what the system read by itself (app/reader.py) */ .ai { align-self: flex-start; padding: 4px 10px; border-radius: 10px; font-size: .78rem; font-weight: 700; } .ai-wait { background: var(--t-50); color: var(--t-800); animation: aiPulse 1.6s ease-in-out infinite; } .ai-bad { background: var(--amber-l); color: var(--amber-d); } @keyframes aiPulse { 50% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .ai-wait { animation: none; } } .ent-brand { font-size: .74rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--t-700); } .ent-page { display: block; font-size: .74rem; font-weight: 500; color: var(--ink-3); } .news-sum { margin: 2px 0; padding: 9px 12px; border-radius: 12px; background: #F4F8FB; font-size: .9rem; color: var(--ink); line-height: 1.55; } .news-text-sub { font-size: .8rem; color: var(--ink-3); } .reread { display: inline-flex; } .reread label { cursor: pointer; } .urgent-sw { margin-top: 16px; padding: 10px 12px; border-radius: 12px; background: var(--danger-l); color: var(--danger-d); } #e-shotwhy.need { color: var(--danger-d); font-weight: 700; } .lp { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: .84rem; } .lp img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; flex: none; } .lp-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .lp-body em { font-style: normal; font-weight: 700; color: var(--ink); } .lp-body span { color: var(--ink-2); } .lp-wait { background: var(--t-50); color: var(--t-800); } .lp-ok { background: #E7F7EE; color: #166534; } .lp-warn { background: var(--amber-l); color: var(--amber-d); } /* ── my online finds: Excel and share pictures ───────────────────────── */ .sh-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; } .sh-bar span { flex: 1 1 auto; font-size: .86rem; color: var(--ink-2); } .sh-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; } @media (min-width: 720px) { .sh-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .sh-styles a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1.5px solid var(--line-2); text-decoration: none; color: var(--ink); } .sh-styles a span { font-size: .76rem; color: var(--ink-3); } .sh-styles a.on { border-color: var(--t-600); background: var(--t-50); } .sh-styles a.on b { color: var(--t-800); } .sh-pick { padding: 14px 16px; margin-bottom: 12px; } .sh-stage { position: relative; display: grid; place-items: center; padding: 16px; border-radius: var(--r-lg); background: #DCE7EE; } .sh-img { display: block; max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 12px 30px -16px rgba(14, 38, 70, .6); opacity: 0; transition: opacity .2s; } .sh-img.ready { opacity: 1; } .sh-a { width: 540px; } .sh-b { width: 420px; } .sh-c { width: 560px; } .sh-d { width: 480px; } .sh-wait { position: absolute; margin: 0; } .sh-pages { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0 0; font-size: .88rem; } .sh-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 6px; } /* ดูรูป — the app-wide photo viewer (static/photo_viewer.js, same as the OCR app's) */ html.pvw-open-page, html.pvw-open-page body { overflow: hidden; } .pvw { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; background: rgba(14, 12, 18, .97); color: #fff; } .pvw[hidden] { display: none; } .pvw-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; flex-wrap: wrap; } .pvw-title { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .pvw-title b { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pvw-title span { font-size: .78rem; color: rgba(255, 255, 255, .65); } .pvw-tools { display: flex; align-items: center; gap: 6px; } .pvw-tools button, .pvw-tools a { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: 1.05rem; line-height: 36px; text-align: center; text-decoration: none; cursor: pointer; margin: 0; box-sizing: border-box; } .pvw-tools button:hover, .pvw-tools a:hover { background: rgba(255, 255, 255, .2); } .pvw-tools .pvw-pct { font-size: .8rem; min-width: 58px; } .pvw-tools .pvw-x { background: rgba(255, 255, 255, .16); } .pvw-tools a[hidden] { display: none; } .pvw-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: none; cursor: zoom-out; } .pvw-img { position: absolute; left: 50%; top: 50%; max-width: none; max-height: none; user-select: none; -webkit-user-drag: none; transform-origin: center center; cursor: zoom-in; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); background: #222; } .pvw-img.pvw-zoomed { cursor: grab; } .pvw-img.pvw-grab { cursor: grabbing; } .pvw-wait { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: .9rem; color: rgba(255, 255, 255, .7); pointer-events: none; } .pvw-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 72px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; margin: 0; padding: 0; } .pvw-nav:hover { background: rgba(255, 255, 255, .24); } .pvw-nav[hidden] { display: none; } .pvw-prev { left: 12px; } .pvw-next { right: 12px; } .pvw-strip { display: flex; gap: 6px; padding: 8px 14px 4px; overflow-x: auto; flex: none; } .pvw-strip[hidden] { display: none; } .pvw-strip button { flex: none; width: 64px; height: 64px; padding: 0; margin: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #333; cursor: pointer; opacity: .6; } .pvw-strip button.on { border-color: #fff; opacity: 1; } .pvw-strip img { width: 100%; height: 100%; object-fit: cover; display: block; } .pvw-hint { text-align: center; font-size: .72rem; color: rgba(255, 255, 255, .45); padding: 2px 0 8px; flex: none; } @media (max-width: 640px) { .pvw-nav { width: 38px; height: 56px; font-size: 1.7rem; } .pvw-tools button, .pvw-tools a { min-width: 34px; height: 34px; line-height: 32px; padding: 0 8px; } .pvw-hint { display: none; } } /* photos that open the viewer say so */ .photos .photo img, .al-prod-pic img, .ent-shots img, .sh-img { cursor: zoom-in; } /* the hint shows on phones too here: the swipe is the main way through an album */ @media (max-width: 640px) { .pvw-hint { display: block; padding-bottom: calc(8px + env(safe-area-inset-bottom)); } } /* downloading one's photos with their label */ .dl-opt { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ink-2); cursor: pointer; } .dl-opt input { width: 16px; height: 16px; min-height: 0; margin: 0; } .al-dl { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* the theme switch in the user menu (normal / festival look, this browser) */ .usermenu-drop .themesw { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); } .themesw-lbl { font-size: .9rem; color: var(--ink); white-space: nowrap; } .themesw-seg { display: flex; gap: 3px; margin-left: auto; padding: 3px; border-radius: var(--pill); background: var(--t-50); } .usermenu-drop .themesw-seg button { width: auto; min-height: 34px; padding: 0 12px; border: none; border-radius: var(--pill); background: none; color: var(--ink-2); font-size: .8rem; font-weight: 600; white-space: nowrap; } .usermenu-drop .themesw-seg button:hover { background: var(--t-100); } .usermenu-drop .themesw-seg button.on { background: var(--t-600); color: #fff; } /* /admin › ธีมเทศกาล: one choice per row */ .theme-opts { display: grid; gap: 8px; margin-bottom: 14px; } .theme-opt { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r); cursor: pointer; } .theme-opt:has(input:checked) { border-color: var(--t-600); background: var(--t-50); } .theme-opt input { margin-top: 4px; accent-color: var(--t-600); } .theme-opt b { display: block; font-size: .92rem; } .theme-opt small { display: block; color: var(--ink-2); font-size: .8rem; line-height: 1.5; } /* /admin › แบรนด์: brand profiles and the Instagram connection */ .ig-run { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--t-50); font-size: .85rem; color: var(--ink-2); line-height: 1.6; } .brand-list { display: grid; gap: 10px; } .brand-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); scroll-margin-top: 120px; } .brand-row:target { border-color: var(--t-600); box-shadow: 0 0 0 3px var(--glow); } .brand-row.is-off { opacity: .6; } .brand-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 5px; } .brand-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 1rem; } .brand-name .pill { margin: 0; } .brand-accts { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .84rem; } .brand-accts a { color: var(--t-800); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; } .brand-accts a:hover { text-decoration: underline; } .brand-ig .st { display: inline-block; font-size: .8rem; padding: 3px 10px; border-radius: 999px; background: #F1F4F7; color: var(--ink-2); } .brand-ig .st-ok { background: #E6F6EE; color: #1B6B45; } .brand-ig .st-bad { background: var(--danger-l); color: var(--danger-d); } .brand-ig .st-off { background: #F1F4F7; color: var(--ink-3); } .brand-news { justify-self: start; font-size: .84rem; font-weight: 600; color: var(--t-700); text-decoration: none; } .brand-news:hover { text-decoration: underline; } .brand-acts { display: flex; flex-direction: column; gap: 6px; flex: none; } .brand-acts form { margin: 0; } .brand-acts .btn { width: 100%; } @media (max-width: 560px) { .brand-row { flex-direction: column; } .brand-acts { flex-direction: row; width: 100%; } .brand-acts form { flex: 1 1 0; } } .brand-form .field input { width: 100%; } /* news the system took in from a brand's own account */ .post-avatar.post-avatar-bot { background: linear-gradient(145deg, #8E4FD8, #3A1666); font-size: 1.15rem; } .tag-auto { background: #EFE7FB; color: #52208E; } .tag-brand { background: #FFF0E3; color: #8A3A00; text-decoration: none; } .tag-brand:hover { text-decoration: underline; } .news-cust { display: block; margin: 2px 0 4px; font-size: .8rem; font-weight: 600; color: #8A3A00; } .disc-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; } .disc-stats span { padding: 5px 12px; border-radius: 999px; background: #F1F4F7; font-size: .82rem; color: var(--ink-2); } .disc-stats .d-found { background: #E6F6EE; color: #1B6B45; } .disc-stats .d-maybe { background: #FFF4CC; color: #7A5A00; } .disc-stats .d-none { background: var(--danger-l); color: var(--danger-d); } .guess { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0; padding: 7px 10px; border-radius: var(--r-sm); background: #FFF4CC; font-size: .82rem; } .guess.guess-found { background: #E6F6EE; } .guess span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; } .adm-bf:has(#br-st) { grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .adm-bf:has(#br-st) { grid-template-columns: minmax(0, 1fr) 200px 160px; align-items: center; } } .guess-list { display: grid; gap: 6px; } .guess-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 6px; border-top: 1px dashed rgba(122, 90, 0, .25); } .guess-alt span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }