/* SILK ROAD AI — shared theme for all four programs (TikTok, Shopee, Facebook, YouTube). * * Master copy: Google Drive "3) SILK ROAD MCN\SILK ROAD AI\shared\theme\silkroad.css". * Owner: the central chat. Programs copy it, they never edit their copy. * * Use in a program: * 1. copy this file to the program's static folder as static/silkroad.css * 2. in , before the program's own CSS: * * * * * 3. build the header with .sr-topbar (see shared/theme/preview.html) and keep the * segmented control:
*/ .sr-tabs{display:flex;gap:var(--sr-s1);border-bottom:1px solid var(--sr-line);margin-bottom:var(--sr-s5);overflow-x:auto;scrollbar-width:none} .sr-tabs::-webkit-scrollbar{display:none} .sr-tabs>a,.sr-tabs>button{position:relative;display:inline-flex;align-items:center;gap:var(--sr-s2);height:42px;padding:0 var(--sr-s3);border:0;background:none;color:var(--sr-muted);font:500 var(--sr-fs-md)/1 var(--sr-font-body);white-space:nowrap;cursor:pointer;text-decoration:none} .sr-tabs>a:hover,.sr-tabs>button:hover{color:var(--sr-ink);text-decoration:none} .sr-tabs>.on,.sr-tabs>[aria-selected="true"],.sr-tabs>[aria-current="page"]{color:var(--sr-ink);font-weight:600} .sr-tabs>.on::after,.sr-tabs>[aria-selected="true"]::after,.sr-tabs>[aria-current="page"]::after{content:"";position:absolute;left:var(--sr-s2);right:var(--sr-s2);bottom:-1px;height:2px;background:var(--sr-blue)} .sr-tabs .sr-count{font:500 var(--sr-fs-xs)/1 var(--sr-font-body);padding:3px 6px;border-radius:var(--sr-r-xs);background:var(--sr-bg-2);color:var(--sr-text-2)} .sr-seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--sr-r);background:var(--sr-bg-2)} .sr-seg>button{height:30px;padding:0 var(--sr-s3);border:0;border-radius:var(--sr-r-sm);background:none;color:var(--sr-text-2);font:500 var(--sr-fs-sm)/1 var(--sr-font-body);cursor:pointer} .sr-seg>button.on,.sr-seg>button[aria-pressed="true"]{background:var(--sr-surface);color:var(--sr-ink);box-shadow:0 0 0 1px var(--sr-line)} /* ---------------------------------------------------------------- notices
ยังไม่ได้เชื่อมเพจ เชื่อมก่อนจึงจะโพสต์ได้
· ok | warn | err | info */ .sr-notice{padding:var(--sr-s3) var(--sr-s4);margin:0 0 var(--sr-s4);border:1px solid var(--sr-line);border-left-width:3px;border-radius:var(--sr-r-sm);background:var(--sr-surface);font-size:var(--sr-fs-md);color:var(--sr-text)} .sr-notice b{color:var(--sr-ink);font-weight:600} .sr-notice.ok {background:var(--sr-ok-soft); border-color:var(--sr-ok-line); border-left-color:var(--sr-ok)} .sr-notice.warn{background:var(--sr-warn-soft);border-color:var(--sr-warn-line);border-left-color:var(--sr-warn)} .sr-notice.err {background:var(--sr-err-soft); border-color:var(--sr-err-line); border-left-color:var(--sr-err)} .sr-notice.info{background:var(--sr-blue-soft);border-color:var(--sr-blue-line);border-left-color:var(--sr-blue)} /* ---------------------------------------------------------------- numbers on the dashboard
คลิปวันนี้12จากโควตา 20
*/ .sr-stat{display:flex;flex-direction:column;gap:2px} .sr-stat-label{font-size:var(--sr-fs-sm);color:var(--sr-muted)} .sr-stat-value{font:600 var(--sr-fs-stat)/1.2 var(--sr-font-head);color:var(--sr-ink);font-variant-numeric:tabular-nums} .sr-stat-note{font-size:var(--sr-fs-sm);color:var(--sr-text-2)} .sr-meter{height:6px;border-radius:6px;background:var(--sr-bg-2);overflow:hidden;margin-top:var(--sr-s2)} .sr-meter>i{display:block;height:100%;background:var(--sr-blue)} .sr-meter.full>i{background:var(--sr-warn)} /* ---------------------------------------------------------------- empty state
…

ยังไม่มีคลิป

…

*/ .sr-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sr-s2);padding:var(--sr-s12) var(--sr-s5);color:var(--sr-muted)} .sr-empty h3{margin:var(--sr-s2) 0 0;color:var(--sr-ink)} .sr-empty p{margin:0 0 var(--sr-s3);max-width:420px} .sr-empty .sr-icon{color:var(--sr-blue)} /* ---------------------------------------------------------------- modal, toast, dock (floating layers)
*/ .sr-modal-bg{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:var(--sr-s4);background:var(--sr-overlay)} .sr-modal{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--sr-surface);border-radius:var(--sr-r-lg);box-shadow:var(--sr-shadow-float);padding:var(--sr-s6)} .sr-modal-head{display:flex;align-items:center;gap:var(--sr-s3);margin-bottom:var(--sr-s4)} .sr-modal-head h2{margin:0;font-size:var(--sr-fs-h2)} .sr-modal-head>button{margin-left:auto} .sr-modal-foot{display:flex;justify-content:flex-end;gap:var(--sr-s2);margin-top:var(--sr-s6)} .sr-toast{position:fixed;left:50%;bottom:var(--sr-s5);z-index:70;transform:translateX(-50%);max-width:min(480px,calc(100vw - 32px));padding:var(--sr-s3) var(--sr-s4);border-radius:var(--sr-r);background:var(--sr-ink);color:#fff;font-size:var(--sr-fs-md);box-shadow:var(--sr-shadow-float)} .sr-toast.err{background:var(--sr-err)} .sr-dock{position:fixed;left:50%;bottom:var(--sr-s5);z-index:40;transform:translateX(-50%);width:min(780px,calc(100% - 32px));display:flex;align-items:center;gap:var(--sr-s3);padding:var(--sr-s2) var(--sr-s2) var(--sr-s2) var(--sr-s4);border-radius:var(--sr-r-lg);background:var(--sr-ink);color:#fff;box-shadow:var(--sr-shadow-float)} .sr-dock .sr-muted{color:rgba(255,255,255,.7)} .sr-log{background:var(--sr-ink);color:#e6e9f2;font:12px/1.7 var(--sr-font-mono);padding:var(--sr-s3);border-radius:var(--sr-r-sm);max-height:320px;overflow:auto;white-space:pre-wrap} /* ---------------------------------------------------------------- icons Single-stroke SVG, 24-unit viewBox, currentColor. Never emoji. */ .sr-icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px} .sr-icon.md{width:20px;height:20px} .sr-icon.lg{width:32px;height:32px;stroke-width:1.5} .sr-spin{animation:sr-spin .8s linear infinite} @keyframes sr-spin{to{transform:rotate(360deg)}} /* ---------------------------------------------------------------- footer */ .sr-footer{border-top:1px solid var(--sr-line);background:var(--sr-surface);padding:var(--sr-s5) 0;font-size:var(--sr-fs-sm);color:var(--sr-muted)} .sr-footer a{color:var(--sr-text-2)} @media (prefers-reduced-motion:reduce){ .sr-btn,.sr-switch span,.sr-switch span::after,.sr-input{transition:none} .sr-spin{animation-duration:2s} }