/* v1.12.1 studio theme over the plugin's app.css (loaded after it, studio only - the WordPress plugin keeps its own look). v1.33 (หน้าตาใหม่, the canvas the owner approved 20 Oct 09:19): flat and calm in KaoRank green - a white menu on the left with the studio's own logo, a light grey-green ground, white cards with a thin edge, one deep green for actions; on a phone / tablet a top bar with a menu button (the pages in a drawer). The old glass tokens (--g-*) now draw plain surfaces, so every older rule that uses them follows. */ /* ---------------------------------------------------------------- font: Noto Sans Thai (variable 100-900, OFL - FONT-LICENSE.txt) */ @font-face { font-family: "Studio Sans"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/studio/web/font-thai.woff2) format("woff2-variations"), url(/studio/web/font-thai.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: "Studio Sans"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/studio/web/font-latin-ext.woff2) format("woff2-variations"), url(/studio/web/font-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Studio Sans"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/studio/web/font-latin.woff2) format("woff2-variations"), url(/studio/web/font-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------------------------------------------------------------- tokens v1.43.9 the dark look (the design system the owner approved 27-28 Oct, DesignSystem board): a deep emerald ground, light words, thin mint edges, mint for what is chosen, gold for the main action. The colours of every older rule below were turned once by worker/tools/build_dark.py (the same rules made app-dark.css from app.css). */ body.aivs-studio { --st-ink: #f1f8fd; --st-ink2: #d6eee7; --st-muted: #aabac6; --st-faint: #80909c; --st-green: #3ee6b4; --st-green2: #1f9d77; --st-green-ink: #7ff0ce; --st-green-deep: #5ff0c5; --st-forest: #01131d; --st-tint: rgba(63, 230, 180, .14); --st-tint2: rgba(63, 230, 180, .22); --st-ground: rgba(63, 230, 180, .07); --st-soft: rgba(20, 42, 60, .55); --st-line: rgba(140, 195, 230, .182); --st-line2: rgba(140, 195, 230, .39); --st-edge: rgba(140, 195, 230, .26); --st-card: linear-gradient(180deg, rgba(22, 48, 70, .7), rgba(11, 30, 46, .75)); --st-input: rgba(20, 42, 60, .65); --st-menu: #01131d; --st-gold: linear-gradient(180deg, #f6e5a5, #eaca6c 50%, #d7b04e); --st-gold-ink: #2b1d03; --st-gold-line: #eaca6c; --g-fill: rgba(15, 36, 54, .78); --g-solid: #0d2030; --g-edge: rgba(140, 195, 230, .26); --g-blur: none; --g-shadow: 0 1px 2px rgba(0, 0, 0, .25); --g-shadow-lg: 0 18px 44px rgba(0, 0, 0, .5), 0 0 0 1px rgba(120, 230, 197, .12); --st-side: 248px; color-scheme: dark; background: #031824; color: var(--st-ink); font-family: "Studio Sans", "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", "Leelawadee UI", "Thonburi", Tahoma, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.aivs-studio::before { content: none; } /* v1.42.2 (owner 25 Oct 15:36 "ดูไม่ออกว่าคลุมไปขาดไหน"): a selection you can see - gold with dark words, on white and on green */ body.aivs-studio ::selection { background: #f3d469; color: #13261c; } body.aivs-studio .aivs-ai__msg--me ::selection, body.aivs-studio .aivs-dir__msg--me ::selection { background: #f7e298; color: #0e1f16; } body.aivs-studio.aivs-noscroll { overflow: hidden; } .aivs--studio { --aivs-ink: #f1f8fd; --aivs-muted: #aabac6; --aivs-line: rgba(140, 195, 230, .26); --aivs-paper: #0d2030; --aivs-canvas: #031824; --aivs-primary: #1f9d77; --aivs-primary-ink: #7ff0ce; --aivs-mat: #01131d; --aivs-mat-line: rgba(140, 195, 230, .26); --aivs-work: #60a5fa; --aivs-wait: #eaca6c; --aivs-done: #5ff0c5; --aivs-fail: #f87171; --aivs-idle: #8b9399; --aivs-radius: 16px; font-size: 15px; line-height: 1.6; color: var(--aivs-ink); } .aivs--studio a { color: var(--st-green-ink); text-underline-offset: 3px; } .aivs--studio a:hover { color: #c8ffee; } .aivs--studio :focus-visible { outline: 2px solid #5ff0c5; outline-offset: 2px; } .aivs--studio input[type=checkbox], .aivs--studio input[type=radio], .aivs--studio input[type=range] { accent-color: #3ee6b4; } .aivs--studio h1, .aivs--studio h2, .aivs--studio h3, .aivs--studio h4 { color: var(--st-ink); letter-spacing: -.005em; } .aivs--studio .aivs-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* the size queries of app.css ask the content column, not the whole page (the menu sits beside it) */ .aivs--studio { container-type: normal; } .aivs--studio > .aivs-main { container-type: inline-size; container-name: aivs; } /* ---------------------------------------------------------------- the frame: menu + content */ body.aivs-studio #aivs-app.aivs--studio { max-width: none; margin: 0; padding: 28px 32px 72px calc(var(--st-side) + 32px); } .aivs--studio > :not(.aivs-head):not(.aivs-scrim) { max-width: 1240px; margin-left: auto; margin-right: auto; } /* the menu: white, the whole height, on the left edge */ .aivs--studio > .aivs-head { position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: var(--st-side); box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 4px; margin: 0; padding: 20px 14px 14px; border: 0; border-right: 1px solid var(--st-edge); border-radius: 0; background: #0d2030; overflow-y: auto; } .aivs--studio > .aivs-head::before { content: none; } .aivs--studio .aivs-menubtn, .aivs--studio .aivs-drawer__top, .aivs--studio > .aivs-scrim { display: none; } .aivs--studio .aivs-drawer { display: contents; } .aivs--studio .aivs-brand { margin: 0 0 14px; padding: 0 8px; font-size: 16px; font-weight: 700; line-height: 1.25; } .aivs--studio .aivs-brand__link { display: flex; align-items: center; gap: 10px; color: var(--st-ink); text-decoration: none; border-radius: 12px; padding: 4px; margin: -4px; } .aivs--studio .aivs-brand__link:hover { color: var(--st-green-deep); } .aivs--studio .aivs-brand__mark { width: 44px; height: 44px; flex: none; object-fit: contain; border-radius: 12px; } .aivs--studio .aivs-brand__mark.is-custom { border-radius: 0; } .aivs--studio .aivs-brand__text { min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; } .aivs--studio .aivs-brand--two .aivs-brand__text { letter-spacing: .06em; } .aivs--studio .aivs-brand__sub { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--st-muted); line-height: 1.35; } .aivs--studio .aivs-head .aivs-tabs { order: 0; width: auto; display: flex; flex-direction: column; gap: 4px; overflow: visible; padding: 0; -webkit-mask-image: none; mask-image: none; } .aivs--studio .aivs-tabs a { display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 0 12px; margin: 0; border: 0; border-radius: 10px; color: var(--st-ink2); font-weight: 500; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; } .aivs--studio .aivs-tabs a .aivs-ico { width: 18px; height: 18px; color: currentColor; stroke-width: 2; } .aivs--studio .aivs-tabs a:hover { background: var(--st-ground); color: var(--st-ink); } .aivs--studio .aivs-tabs a.is-current { color: var(--st-green-deep); font-weight: 600; background: var(--st-tint); box-shadow: none; } .aivs--studio .aivs-tabs a.is-current .aivs-ico { color: var(--st-green-deep); } .aivs--studio .aivs-tabs__short { display: none; } /* who is logged in: a card at the foot of the menu (the owner sees this month's spend), the menu opens over it */ .aivs--studio .aivs-usermenu { position: relative; margin: auto 0 0; padding: 12px 0 0; display: block; font-size: 14px; color: var(--st-ink); } .aivs--studio .aivs-usermenu__btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: var(--st-ground); box-shadow: none; color: var(--st-ink); font: inherit; text-align: left; cursor: pointer; } .aivs--studio .aivs-usermenu__btn:hover, .aivs--studio .aivs-usermenu.is-open .aivs-usermenu__btn { background: var(--st-tint); } .aivs--studio .aivs-usermenu__btn > .aivs-ico { width: 18px; height: 18px; color: var(--st-muted); margin-left: auto; } .aivs--studio .aivs-usermenu__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; } .aivs--studio .aivs-usermenu__name { max-width: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aivs--studio .aivs-usermenu__role { font-size: 12px; color: var(--st-green-ink); font-weight: 600; } .aivs--studio .aivs-usermenu__spend { font-size: 12px; color: var(--st-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aivs--studio .aivs-usermenu__spend--pop { display: none; margin-top: 4px; } .aivs--studio .aivs-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 600; font-size: 14px; color: #fff; background: var(--st-green2); box-shadow: none; } .aivs--studio .aivs-avatar--lg { width: 44px; height: 44px; font-size: 18px; } .aivs--studio .aivs-usermenu__pop { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 5; padding: 8px; border-radius: 16px; background: #0d2030; border: 1px solid var(--st-edge); box-shadow: var(--g-shadow-lg); animation: st-pop .16s ease-out; } .aivs--studio .aivs-usermenu__pop[hidden] { display: none; } @keyframes st-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } } .aivs--studio .aivs-usermenu__card { display: flex; gap: 12px; align-items: center; padding: 8px 8px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--st-line); } .aivs--studio .aivs-usermenu__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.35; } .aivs--studio .aivs-usermenu__id strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aivs--studio .aivs-usermenu__id small { color: var(--st-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aivs--studio .aivs-rolechip { align-self: flex-start; margin-top: 3px; font-size: 11.5px; font-weight: 600; padding: 1px 9px; border-radius: 999px; color: var(--st-green-deep); background: var(--st-tint); } .aivs--studio .aivs-usermenu__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--st-ink); font: inherit; font-size: 14.5px; text-decoration: none; text-align: left; cursor: pointer; } .aivs--studio .aivs-usermenu__item .aivs-ico { color: var(--st-muted); } .aivs--studio a.aivs-usermenu__item { color: var(--st-ink); } .aivs--studio .aivs-usermenu__item:hover, .aivs--studio .aivs-usermenu__item:focus-visible { background: var(--st-tint); outline: none; } .aivs--studio .aivs-usermenu__item--phone { display: none; } .aivs--studio .aivs-usermenu__logout:hover, .aivs--studio .aivs-usermenu__logout:focus-visible { background: rgba(192, 43, 43, .08); color: #f6d0d0; } .aivs--studio .aivs-usermenu__logout:hover .aivs-ico { color: #f6d0d0; } /* the page's name above the content; "คู่มือหน้านี้" (and on งานของฉัน "สร้างวิดีโอใหม่") at its right */ .aivs--studio .aivs-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 0; margin-bottom: 20px; } .aivs--studio .aivs-pagehead__title { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; } .aivs--studio .aivs-pagehead__sub { margin: 4px 0 0; color: var(--st-muted); font-size: 15px; max-width: 72ch; } .aivs--studio .aivs-pagehead__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .aivs--studio .aivs-pagehead .aivs-helplink { font-size: 14px; font-weight: 500; color: var(--st-ink2); text-decoration: none; } .aivs--studio .aivs-pagehead .aivs-helplink .aivs-ico { width: 16px; height: 16px; stroke-width: 2; } .aivs--studio .aivs-pagehead__cta .aivs-ico { width: 18px; height: 18px; stroke-width: 2.2; } /* ---------------------------------------------------------------- notices */ .aivs--studio .aivs-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; margin-bottom: 18px; border-radius: 12px; color: var(--st-ink2); font-size: 14px; background: rgba(105, 211, 150, .14); border: 1px solid rgba(140, 195, 230, .326); box-shadow: none; } .aivs--studio .aivs-banner::before { content: "i"; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 Georgia, serif; font-style: italic; color: #fff; background: var(--st-green2); } .aivs--studio .aivs-banner--warn { background: rgba(230, 198, 101, .14); border-color: #efe0b3; } .aivs--studio .aivs-banner--warn::before { content: "!"; font-style: normal; font-family: inherit; background: #b26a00; } .aivs--studio .aivs-error { border-radius: 12px; background: rgba(240, 76, 76, .14); border-color: rgba(220, 38, 38, .25); } .aivs--studio .aivs-empty { border-radius: 16px; border: 1.5px dashed rgba(140, 195, 230, .395); background: #0d2030; padding: 56px 16px; } /* ---------------------------------------------------------------- buttons */ .aivs--studio .aivs-btn { min-height: 44px; padding: 7px 16px; gap: 7px; border-radius: 10px; border: 1px solid var(--st-line2); background: #0d2030; color: var(--st-ink2); font-weight: 600; box-shadow: none; text-shadow: none; transition: background .15s, border-color .15s, color .15s, transform .1s; } .aivs--studio .aivs-btn:hover { border-color: var(--st-green2); color: var(--st-green-deep); background: var(--st-soft); box-shadow: none; } .aivs--studio .aivs-btn:active:not([disabled]) { transform: scale(.98); } .aivs--studio .aivs-btn--primary, .aivs--studio .aivs-btn--primary:hover { color: #fff; border-color: var(--st-green2); text-shadow: none; background: var(--st-green2); box-shadow: none; } .aivs--studio .aivs-btn--primary:hover { background: #09446f; border-color: #92edd2; } .aivs--studio .aivs-btn--soft { background: var(--st-tint); border-color: transparent; color: var(--st-green-deep); } .aivs--studio .aivs-btn--soft:hover { background: var(--st-tint2); border-color: transparent; } .aivs--studio .aivs-btn--quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--st-muted); } .aivs--studio .aivs-btn--quiet:hover { background: rgba(192, 43, 43, .07); border-color: transparent; color: var(--aivs-fail); box-shadow: none; } .aivs--studio .aivs-btn--small { min-height: 36px; padding: 4px 12px; font-size: 14px; border-radius: 8px; } .aivs--studio .aivs-btn--wide { min-height: 52px; font-size: 16px; border-radius: 12px; } .aivs--studio .aivs-btn[disabled], .aivs--studio .aivs-btn.is-disabled { opacity: .5; box-shadow: none; } .aivs--studio .aivs-play.is-playing { background: var(--st-green-ink); border-color: var(--st-green-ink); color: #fff; } .aivs--studio .aivs-link-btn { color: var(--st-green-ink); } /* ---------------------------------------------------------------- form */ @container aivs (min-width: 1001px) { .aivs--studio .aivs-new { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; } } .aivs--studio .aivs-label { font-weight: 650; color: var(--st-ink); } .aivs--studio textarea, .aivs--studio .aivs-input, .aivs--studio select { border-radius: 12px; border: 1px solid var(--st-line2); background-color: rgba(13, 32, 48, .86); box-shadow: inset 0 1px 2px rgba(13, 39, 58, .05); color: var(--st-ink); transition: border-color .15s, box-shadow .15s; } .aivs--studio select { min-height: 42px; padding: 8px 12px; } .aivs--studio textarea:hover, .aivs--studio .aivs-input:hover, .aivs--studio select:hover { border-color: rgba(44, 221, 168, .35); } .aivs--studio textarea:focus, .aivs--studio .aivs-input:focus, .aivs--studio select:focus { border-color: var(--st-green2); box-shadow: 0 0 0 4px rgba(37, 194, 147, .18); outline: none; background-color: #0d2030; } .aivs--studio #aivs-idea { border-radius: 14px; padding: 16px 18px; min-height: 150px; font-size: 16.5px; background: #0d2030; box-shadow: 0 1px 2px rgba(0, 0, 0, .17); } /* v1.33 flat */ .aivs--studio #aivs-idea:focus { box-shadow: 0 0 0 3px rgba(13, 87, 140, .16); } .aivs--studio input[type=file] { color: var(--st-muted); } .aivs--studio input[type=file]::file-selector-button { margin-right: 12px; padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(140, 195, 230, .182); cursor: pointer; background: #0d2030; color: var(--st-green-deep); font: inherit; font-weight: 600; box-shadow: none; } /* v1.33 flat */ .aivs--studio input[type=file]::file-selector-button:hover { border-color: rgba(44, 221, 168, .4); } .aivs--studio .aivs-chip { padding: 4px 13px; border-radius: 999px; border: 1px solid var(--st-line2); background: rgba(13, 32, 48, .7); color: var(--st-ink2); } /* v1.57.0 หนังสั้น — เลือกเร็ว: two rows of chips (the length, the look) and a line under them */ .aivs--studio .aivs-filmbar { display: grid; gap: 8px; } .aivs--studio .aivs-filmbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .aivs--studio .aivs-filmbar__k { min-width: 58px; color: var(--st-muted); font-size: 13px; } .aivs--studio .aivs-filmbar__chip { min-height: 36px; } .aivs--studio .aivs-filmbar__note { color: var(--st-muted); } .aivs--studio .aivs-chip:hover { border-color: rgba(44, 221, 168, .4); color: var(--st-green-deep); background: #0d2030; } .aivs--studio .aivs-format { padding: 16px; border-radius: 18px; border: 1px solid var(--g-edge); background: var(--g-solid); box-shadow: var(--g-shadow); transition: box-shadow .15s, background .15s; } .aivs--studio .aivs-format:hover { background: rgba(13, 32, 48, .92); } .aivs--studio .aivs-format.is-on { border-color: transparent; background: rgba(105, 211, 153, .14); box-shadow: inset 0 0 0 2px var(--st-green2); } /* v1.33 flat */ .aivs--studio .aivs-format.is-on .aivs-ratio { color: var(--st-green2); background: rgba(37, 194, 147, .14); } .aivs--studio .aivs-ratio { border-radius: 5px; } .aivs--studio .aivs-seg { gap: 6px; } .aivs--studio .aivs-seg button { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--st-line2); background: rgba(13, 32, 48, .72); color: var(--st-ink2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); transition: background .15s, border-color .15s, color .15s; } .aivs--studio .aivs-seg button:hover { border-color: rgba(44, 221, 168, .4); color: var(--st-ink); background: #0d2030; } .aivs--studio .aivs-seg button.is-on { background: var(--st-green2); border-color: var(--st-green2); color: #fff; font-weight: 600; box-shadow: none; } /* v1.33: the chosen chip in the one action green */ .aivs--studio .aivs-seg button.is-on:hover { background: var(--st-green-deep); border-color: var(--st-green-deep); color: #fff; } .aivs--studio .aivs-summary { top: 28px; padding: 20px; border-radius: 16px; border: 1px solid var(--st-edge); background: #0d2030; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--g-shadow); } /* v1.33 the create page: the form on one white card beside the summary card (the canvas: "สร้างวิดีโอใหม่") */ .aivs--studio .aivs-new > .aivs-form { background: #0d2030; border: 1px solid var(--st-edge); border-radius: 16px; padding: 22px 24px 24px; box-shadow: var(--g-shadow); min-width: 0; } @container aivs (max-width: 700px) { .aivs--studio .aivs-new > .aivs-form { padding: 16px 14px 18px; border-radius: 14px; } } /* the start button: its price on a line of its own when the label is long (it broke into two columns) */ .aivs--studio .aivs-summary .aivs-btn--wide { flex-wrap: wrap; row-gap: 0; column-gap: 4px; justify-content: center; text-align: center; line-height: 1.35; padding-top: 10px; padding-bottom: 10px; } .aivs--studio .aivs-summary .aivs-btn--wide .aivs-btn__price { font-size: 13px; font-weight: 500; } .aivs--studio .aivs-summary h2 { font-size: 16px; } .aivs--studio .aivs-summary .aivs-cost, .aivs--studio .aivs-costbox .aivs-cost { color: var(--st-ink); } .aivs--studio .aivs-more summary, .aivs--studio .aivs-costlines summary, .aivs--studio .aivs-shot__more summary, .aivs--studio .aivs-issues__more > summary { color: var(--st-green-ink); } .aivs--studio .aivs-more--settings { border-radius: 20px; border: 1px solid var(--g-edge); background: var(--g-solid); box-shadow: var(--g-shadow); padding: 14px 18px; } .aivs--studio .aivs-more__title { color: var(--st-green-ink); } .aivs--studio .aivs-ideatool, .aivs--studio .aivs-attach__group { border-radius: 18px; border: 1px solid var(--g-edge); background: rgba(13, 32, 48, .6); box-shadow: var(--g-shadow); } .aivs--studio .aivs-idea { border-radius: 16px; background: rgba(13, 32, 48, .85); border-color: var(--st-line); } .aivs--studio .aivs-idea:hover, .aivs--studio .aivs-idea:focus-visible { border-color: var(--st-green2); box-shadow: 0 0 0 1px var(--st-green2), 0 10px 24px -14px rgba(16, 87, 137, .55); } .aivs--studio .aivs-idea__use { color: var(--st-green-ink); } .aivs--studio .aivs-idea__text { color: var(--st-ink2); } .aivs--studio .aivs-flowopts { border-radius: 18px; background: rgba(240, 167, 76, .101); border: 1px solid rgba(234, 88, 12, .14); padding: 14px 16px; } .aivs--studio .aivs-flowbox { border-radius: 20px; background: rgba(240, 167, 76, .105); border-color: rgba(234, 88, 12, .4); } .aivs--studio .aivs-ref, .aivs--studio .aivs-clip { border-radius: 14px; border-color: var(--st-line); background: rgba(13, 32, 48, .7); } .aivs--studio .aivs-ref > img, .aivs--studio .aivs-clip__icon { border-radius: 10px; } .aivs--studio .aivs-libchip { border-radius: 16px; border-color: var(--g-edge); background: var(--g-solid); box-shadow: var(--g-shadow); padding: 7px 12px 7px 7px; } .aivs--studio .aivs-libchip.is-on { box-shadow: inset 0 0 0 2px var(--st-green), 0 10px 22px -14px rgba(16, 87, 137, .6); background: rgba(80, 237, 190, .126); } .aivs--studio .aivs-libchip img { border-radius: 10px; } .aivs--studio .aivs-rights { border-radius: 14px; } /* ---------------------------------------------------------------- glass cards (no blur: a page can hold dozens) */ .aivs--studio .aivs-panel, .aivs--studio .aivs-status, .aivs--studio .aivs-fold, .aivs--studio .aivs-social, .aivs--studio .aivs-overlays, .aivs--studio .aivs-attachview, .aivs--studio .aivs-decision, .aivs--studio .aivs-review, .aivs--studio .aivs-conflicts, .aivs--studio .aivs-sync, .aivs--studio .aivs-split, .aivs--studio .aivs-tile, .aivs--studio .aivs-libcard, .aivs--studio .aivs-take, .aivs--studio .aivs-dshot { border: 1px solid var(--g-edge); background: var(--g-solid); box-shadow: var(--g-shadow); } .aivs--studio .aivs-panel { border-radius: 22px; padding: 20px 22px; } .aivs--studio .aivs-panel > h2 { font-size: 18px; font-weight: 700; margin-bottom: 12px; } .aivs--studio .aivs-status { border-radius: 20px; padding: 16px 18px; } .aivs--studio .aivs-fold { border-radius: 20px; } .aivs--studio .aivs-fold > summary { padding: 14px 18px; border-radius: 20px; } .aivs--studio .aivs-fold > summary:hover { background: rgba(13, 32, 48, .5); } .aivs--studio .aivs-fold[open] > summary { border-bottom-color: var(--st-line); border-radius: 20px 20px 0 0; } .aivs--studio .aivs-social, .aivs--studio .aivs-overlays, .aivs--studio .aivs-attachview, .aivs--studio .aivs-decision, .aivs--studio .aivs-review, .aivs--studio .aivs-conflicts, .aivs--studio .aivs-sync { border-radius: 20px; } .aivs--studio .aivs-decision { background: rgba(109, 76, 240, .14); border-color: rgba(109, 74, 224, .22); } /* v1.33 flat: plain tints */ .aivs--studio .aivs-conflicts.is-open { background: rgba(230, 193, 101, .14); border-color: rgba(217, 119, 6, .3); } .aivs--studio .aivs-approve { border-radius: 16px; border-color: rgba(109, 74, 224, .22); background: rgba(109, 76, 240, .14); box-shadow: none; } /* v1.57.0 the short film's plan on the review page */ .aivs--studio .aivs-craft { display: grid; gap: 8px; margin: 0 0 16px; padding: 14px 18px; border-radius: 16px; } .aivs--studio .aivs-craft__h { margin: 0; font-size: 15px; } .aivs--studio .aivs-craft__dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; } .aivs--studio .aivs-craft__dl dt { color: var(--st-muted); } .aivs--studio .aivs-craft__dl dd { margin: 0; overflow-wrap: anywhere; } .aivs--studio .aivs-lipwarn { display: grid; gap: 6px; margin: 0 0 16px; } /* v1.57.0 the lips will not follow our voices */ .aivs--studio .aivs-lipwarn p { margin: 0; } .aivs--studio .aivs-lipwarn .aivs-btn { justify-self: start; } @media (max-width: 600px) { .aivs--studio .aivs-craft__dl { grid-template-columns: minmax(0, 1fr); } .aivs--studio .aivs-craft__dl dd { margin-bottom: 6px; } } .aivs--studio .aivs-costs tfoot th, .aivs--studio .aivs-costs tfoot td { border-top-color: rgba(109, 74, 224, .25); } .aivs--studio .aivs-split { border-radius: 18px; } .aivs--studio .aivs-split.is-on { border-left: 1px solid var(--g-edge); box-shadow: inset 4px 0 0 var(--st-green2), var(--g-shadow); } .aivs--studio .aivs-take.is-used { box-shadow: inset 0 0 0 2px rgba(37, 194, 147, .55), var(--g-shadow); } .aivs--studio .aivs-dshot { border-radius: 18px; } .aivs--studio .aivs-dreamina { border-color: rgba(39, 220, 166, .3); background: rgba(84, 232, 188, .105); } .aivs--studio .aivs-tag { border-radius: 999px; padding: 1px 10px; border-color: var(--st-line2); background: rgba(13, 32, 48, .7); color: var(--st-ink2); } .aivs--studio .aivs-tag--ok { background: rgba(76, 240, 133, .126); color: #92e7b2; border-color: rgba(22, 163, 74, .28); } .aivs--studio .aivs-tag--warn { background: rgba(230, 187, 101, .126); color: #f5cec1; border-color: rgba(234, 88, 12, .28); } .aivs--studio .aivs-textinfo .aivs-tag--ov { color: var(--st-green-ink); border-color: rgba(20, 154, 114, .3); background: rgba(80, 237, 190, .126); } .aivs--studio .aivs-flag--edit { background: rgba(80, 237, 190, .133); color: var(--st-green-ink); } .aivs--studio .aivs-try { border-radius: 16px; border-color: rgba(20, 154, 114, .45); background: rgba(80, 237, 190, .098); } .aivs--studio .aivs-linkbox { border-radius: 16px; border-color: rgba(20, 154, 114, .3); background: rgba(80, 237, 190, .105); } .aivs--studio .aivs-libedit { border-radius: 20px; border-color: rgba(20, 154, 114, .45); background: rgba(84, 232, 152, .119); box-shadow: var(--g-shadow); } .aivs--studio .aivs-lockbox, .aivs--studio .aivs-lipbox { border-radius: 16px; } .aivs--studio .aivs-regen, .aivs--studio .aivs-line { border-radius: 12px; } .aivs--studio .aivs-pre { border-radius: 12px; background: rgba(13, 32, 48, .85); } /* status: a soft coloured capsule */ .aivs--studio .aivs-pill { padding: 3px 11px 3px 9px; border-radius: 999px; background: rgba(138, 152, 143, .14); font-weight: 650; } .aivs--studio .aivs-pill.aivs-tone-done { background: rgba(22, 163, 74, .12); } .aivs--studio .aivs-pill.aivs-tone-work { background: rgba(217, 119, 6, .12); } .aivs--studio .aivs-pill.aivs-tone-wait { background: rgba(109, 74, 224, .11); } .aivs--studio .aivs-pill.aivs-tone-fail { background: rgba(220, 38, 38, .1); } .aivs--studio .aivs-bar { background: rgba(13, 39, 58, .08); box-shadow: inset 0 1px 2px rgba(13, 39, 58, .08); } .aivs--studio .aivs-bar span { background: #1a9a74; } .aivs--studio .aivs-bar.is-live span { background-image: linear-gradient(90deg, #149a72, #5eeac0, #149a72); } /* ---------------------------------------------------------------- my jobs */ .aivs--studio .aivs-grid { grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 18px; } .aivs--studio .aivs-card { padding: 8px; border-radius: 22px; border: 1px solid var(--g-edge); background: var(--g-solid); box-shadow: var(--g-shadow); transition: transform .18s ease, box-shadow .18s ease, background .18s; } .aivs--studio .aivs-card:hover { transform: translateY(-3px); background: rgba(13, 32, 48, .92); border-color: var(--g-edge); box-shadow: 0 0 0 1px rgba(20, 154, 114, .22), 0 24px 44px -22px rgba(13, 39, 58, .45), inset 0 1px 0 rgba(255, 255, 255, .12); } .aivs--studio .aivs-card__media { border-radius: 15px; background: linear-gradient(160deg, #16364d, #0d1f2c); } .aivs--studio .aivs-media__empty { color: rgba(255, 255, 255, .5); } .aivs--studio .aivs-card__body { padding: 10px 6px 4px; gap: 7px; } .aivs--studio .aivs-card__title { font-weight: 650; line-height: 1.4; } .aivs--studio .aivs-card .aivs-pill { justify-self: start; } .aivs--studio .aivs-jobs__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .aivs--studio .aivs-jobs__groups { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 22px; max-width: 100%; background: rgba(13, 32, 48, .5); box-shadow: inset 0 0 0 1px rgba(13, 39, 58, .07), inset 0 1px 2px rgba(13, 39, 58, .06); } .aivs--studio .aivs-jobs__group { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--st-ink2); font: inherit; font-size: 14px; font-weight: 550; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; } .aivs--studio .aivs-jobs__group:hover { background: rgba(13, 32, 48, .75); color: var(--st-ink); } .aivs--studio .aivs-jobs__group[aria-pressed=true] { background: #0d2030; color: var(--st-green-deep); font-weight: 650; box-shadow: 0 4px 14px -6px rgba(13, 39, 58, .35), inset 0 0 0 1px rgba(20, 154, 114, .2); } .aivs--studio .aivs-jobs__group[hidden] { display: none; } .aivs--studio .aivs-jobs__count { min-width: 24px; padding: 0 7px; border-radius: 999px; background: rgba(13, 39, 58, .07); color: var(--st-muted); font-size: 12px; font-weight: 650; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; } .aivs--studio .aivs-jobs__group[aria-pressed=true] .aivs-jobs__count { background: var(--st-tint2); color: var(--st-green-deep); } .aivs--studio .aivs-jobs__search { width: 280px; max-width: 100%; min-height: 42px; border-radius: 999px; padding: 9px 16px 9px 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6c64' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 15px 50%; background-size: 17px; } .aivs--studio .aivs-result__side { padding: 20px 22px; border-radius: 22px; border: 1px solid var(--g-edge); background: var(--g-solid); box-shadow: var(--g-shadow); } /* ---------------------------------------------------------------- a job */ .aivs--studio .aivs-back { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px 5px 10px; border-radius: 999px; background: rgba(13, 32, 48, .6); box-shadow: inset 0 0 0 1px rgba(13, 39, 58, .08); text-decoration: none; font-weight: 600; font-size: 14px; } .aivs--studio .aivs-back:hover { background: #0d2030; } .aivs--studio .aivs-jobhead h2 { font-size: 28px; font-weight: 700; letter-spacing: -.015em; } .aivs--studio .aivs-result video, .aivs--studio .aivs-cmp__item video, .aivs--studio .aivs-testclip video { border-radius: 20px; box-shadow: 0 24px 50px -26px rgba(13, 39, 58, .7); } .aivs--studio .aivs-timeline { background: var(--aivs-mat); border-radius: 12px; padding: 4px; gap: 3px; height: 32px; } .aivs--studio .aivs-tl { border-radius: 8px; } .aivs--studio .aivs-tl--done { background: #1a9a74; } .aivs--studio .aivs-shot { border-radius: 18px; border: 1px solid var(--g-edge); background: var(--g-solid); box-shadow: var(--g-shadow); } .aivs--studio .aivs-shot__wear .aivs-tag { border-radius: 14px; } /* a tag that wraps keeps a soft corner, not a pill */ .aivs--studio .aivs-shot.has-error { box-shadow: inset 0 0 0 2px var(--aivs-fail), var(--g-shadow); } .aivs--studio .aivs-shot--mini:hover, .aivs--studio .aivs-shot--mini:focus-visible { border-color: var(--g-edge); box-shadow: 0 0 0 2px rgba(37, 194, 147, .55), 0 18px 36px -20px rgba(13, 39, 58, .5); } .aivs--studio .aivs-shot--mini.has-warn { box-shadow: inset 0 0 0 1.5px rgba(234, 88, 12, .5), var(--g-shadow); } .aivs--studio .aivs-sheet--compact .aivs-shot.is-open { border-color: var(--g-edge); box-shadow: 0 0 0 2px rgba(37, 194, 147, .6), var(--g-shadow); } .aivs--studio .aivs-frame { border-bottom: 0; background: var(--aivs-mat); } .aivs--studio .aivs-frame__no, .aivs--studio .aivs-frame__tc { border-radius: 999px; padding: 1px 9px; background: rgba(11, 25, 35, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .022); } .aivs--studio .aivs-mini__open { color: var(--st-green-ink); } .aivs--studio .aivs-person img, .aivs--studio .aivs-person__ph { border-radius: 14px; } .aivs--studio .aivs-refcard img, .aivs--studio .aivs-social__cover img { border-radius: 14px; } .aivs--studio .aivs-log li { border-bottom-color: var(--st-line); } /* ---------------------------------------------------------------- characters & memory */ .aivs--studio .aivs-libcard { border-radius: 20px; padding: 10px; } .aivs--studio .aivs-libcard img, .aivs--studio .aivs-libcard__noimg { border-radius: 14px; background: rgba(20, 42, 60, .558); } /* v1.14: AI drawing box, requests to the owner, other people's characters, usage per member */ .aivs--studio .aivs-libedit__img > a img { border-radius: 14px; } .aivs--studio .aivs-libdraw { border-radius: 16px; border-color: rgba(20, 154, 114, .45); background: rgba(13, 32, 48, .85); } .aivs--studio .aivs-libdraw__wait .aivs-gen__spin { width: 14px; height: 14px; border-width: 2px; border-color: rgba(20, 154, 114, .22); border-top-color: var(--st-green-ink); } .aivs--studio .aivs-libdraw__ref img { border-radius: 10px; } .aivs--studio .aivs-libfill { border-radius: 14px; border-color: rgba(20, 154, 114, .35); background: rgba(13, 32, 48, .75); } .aivs--studio .aivs-libcard.is-shared { border-style: dashed; border-color: rgba(20, 154, 114, .45); } .aivs--studio .aivs-libcard__owner { color: var(--st-green-ink); } .aivs--studio .aivs-libreq { border-radius: 16px; border-color: rgba(234, 88, 12, .35); background: rgba(240, 167, 76, .129); } .aivs--studio .aivs-libothers li { border-radius: 14px; border-color: var(--st-line); background: rgba(13, 32, 48, .8); } .aivs--studio .aivs-libchip-s { border-color: var(--st-line2); background: rgba(80, 237, 190, .126); } @container aivs (max-width: 640px) { .aivs--studio .aivs-libedit { grid-template-columns: 1fr; } .aivs--studio .aivs-libedit__row { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- settings */ .aivs--studio .aivs-subtabs { display: inline-flex; flex-wrap: wrap; align-self: flex-start; max-width: 100%; gap: 4px; padding: 5px; border-radius: 22px; background: rgba(13, 32, 48, .5); box-shadow: inset 0 0 0 1px rgba(13, 39, 58, .07), inset 0 1px 2px rgba(13, 39, 58, .06); } .aivs--studio .aivs-subtabs a { padding: 7px 15px; border: 0; border-radius: 999px; background: transparent; color: var(--st-ink2); font-weight: 550; transition: background .15s, color .15s; } .aivs--studio .aivs-subtabs a:hover { background: rgba(13, 32, 48, .7); color: var(--st-ink); } .aivs--studio .aivs-subtabs a.is-current { background: #0d2030; color: var(--st-green-deep); font-weight: 650; box-shadow: 0 4px 14px -6px rgba(13, 39, 58, .35), inset 0 0 0 1px rgba(20, 154, 114, .2); } .aivs--studio .aivs-tiles { gap: 14px; } .aivs--studio .aivs-tile { border-radius: 18px; border-left-width: 1px; padding: 16px 18px; transition: transform .15s, box-shadow .15s; } .aivs--studio .aivs-tile.is-ok { box-shadow: inset 4px 0 0 #22a35a, var(--g-shadow); } .aivs--studio .aivs-tile.is-warn { box-shadow: inset 4px 0 0 #d97706, var(--g-shadow); } .aivs--studio .aivs-tile.is-work { box-shadow: inset 4px 0 0 var(--aivs-wait), var(--g-shadow); } .aivs--studio .aivs-tile.is-bad { box-shadow: inset 4px 0 0 var(--aivs-fail), var(--g-shadow); background: rgba(240, 76, 76, .126); } .aivs--studio a.aivs-tile:hover { transform: translateY(-2px); } .aivs--studio .aivs-tile__value { font-weight: 700; color: var(--st-ink); } .aivs--studio .aivs-tile__bar { background: rgba(13, 39, 58, .08); } .aivs--studio .aivs-tile__bar > span { background: #1a9a74; } .aivs--studio .aivs-tile__bar > span.is-warn { background: #d97706; } .aivs--studio .aivs-tile__bar > span.is-bad { background: var(--aivs-fail); } .aivs--studio .aivs-tile__bar > span.is-idle { background: var(--aivs-idle); } .aivs--studio .aivs-kv th, .aivs--studio .aivs-kv td { border-bottom-color: var(--st-line); } .aivs--studio .aivs-kv--grid th { background: rgba(20, 42, 60, .434); } .aivs--studio .aivs-stagebar li { background: rgba(13, 39, 58, .06); } .aivs--studio .aivs-stagebar li.is-done { background: rgba(22, 163, 74, .12); } .aivs--studio .aivs-stagebar li.is-now { background: var(--st-green-ink); } /* ---------------------------------------------------------------- pop-up message */ .aivs-toast { border-radius: 16px; background: rgba(13, 39, 58, .9); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 18px 44px -14px rgba(13, 39, 58, .6), inset 0 1px 0 rgba(255, 255, 255, .017); font-family: inherit; } .aivs-toast--err { background: rgba(127, 29, 29, .92); } /* ---------------------------------------------------------------- the edit page: dark, in the studio's green */ .aivs--studio .aivs-ed { --ed-bg: #0d161d; --ed-panel: #111f29; --ed-panel2: #172936; --ed-line: #213a4d; --ed-ink: #e8f1ec; --ed-muted: #909aa2; --ed-accent: #2ecc9d; --ed-accent-ink: #d3f8ed; border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(13, 39, 58, .8); } .aivs--studio .aivs-ed.is-full { border-radius: 0; box-shadow: none; } .aivs--studio .aivs-ed .aivs-btn { min-height: 36px; padding: 6px 14px; border-radius: 10px; background: var(--ed-panel2); border: 1px solid var(--ed-line); color: var(--ed-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .006); text-shadow: none; } .aivs--studio .aivs-ed .aivs-btn:hover { border-color: var(--ed-muted); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .007); } .aivs--studio .aivs-ed .aivs-btn--primary, .aivs--studio .aivs-ed .aivs-btn--primary:hover { background: linear-gradient(180deg, #3ad9a9, #22b388); border-color: #22b388; color: var(--ed-accent-ink); box-shadow: 0 8px 20px -10px rgba(46, 204, 157, .7), inset 0 1px 0 rgba(255, 255, 255, .042); } .aivs--studio .aivs-ed .aivs-btn--quiet { background: transparent; border-color: transparent; color: var(--ed-muted); box-shadow: none; } .aivs--studio .aivs-ed .aivs-btn--quiet:hover { color: var(--ed-ink); background: rgba(13, 32, 48, .05); } .aivs--studio .aivs-ed .aivs-btn--small { min-height: 30px; padding: 4px 10px; } .aivs--studio .aivs-ed a { color: var(--ed-accent); } .aivs--studio .aivs-ed__ib, .aivs--studio .aivs-ed__play { border-radius: 10px; } .aivs--studio .aivs-ed__play { border-radius: 12px; } .aivs--studio .aivs-ed__shot { border-radius: 12px; } .aivs--studio .aivs-ed .aivs-btn--primary:hover { background: linear-gradient(180deg, #4ae3b5, #2ecc9d); } .aivs--studio .aivs-ed__selbox { background: rgba(46, 204, 157, .1); } .aivs--studio .aivs-ed__sel { background: rgba(46, 204, 157, .22); } .aivs--studio .aivs-ed__vrow.is-focus { background: rgba(46, 204, 157, .08); } .aivs--studio .aivs-ed__bar { background: #1c8a69; } .aivs--studio .aivs-ed__bar.is-sel { background: var(--ed-accent); } .aivs--studio .aivs-ed__bar.is-over { background: var(--ed-warn); } .aivs--studio .aivs-ed__bar.is-silent { background: #44514a; } .aivs--studio .aivs-ed textarea, .aivs--studio .aivs-ed .aivs-input, .aivs--studio .aivs-ed select { border-radius: 8px; box-shadow: none; } .aivs--studio .aivs-ed textarea:focus, .aivs--studio .aivs-ed .aivs-input:focus, .aivs--studio .aivs-ed select:focus { background-color: var(--ed-panel2); box-shadow: 0 0 0 3px rgba(46, 204, 157, .25); } /* ---------------------------------------------------------------- tablet: the menu becomes a bar at the top */ @media (max-width: 1100px) { body.aivs-studio #aivs-app.aivs--studio { padding: 12px 20px 64px; } .aivs--studio > .aivs-head { position: sticky; top: 10px; bottom: auto; left: auto; width: auto; flex-direction: row; align-items: center; gap: 10px; margin: 0 0 22px; padding: 8px 8px 8px 12px; border: 1px solid var(--st-edge); border-radius: 24px; box-shadow: 0 1px 2px rgba(0, 0, 0, .17); overflow: visible; } /* v1.33: the name's menu opens below the bar (the side menu's own scroll would hide it and scroll the bar) */ .aivs--studio .aivs-brand { padding: 0; font-size: 16px; margin: 0; } .aivs--studio .aivs-brand__mark { width: 36px; height: 36px; border-radius: 11px; } .aivs--studio .aivs-head .aivs-tabs { flex: 1 1 auto; flex-direction: row; justify-content: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .aivs--studio .aivs-head .aivs-tabs::-webkit-scrollbar { display: none; } /* v1.33: centred while it fits, starts at สร้าง when it does not (a centred row that overflows cuts its first pages off) */ .aivs--studio .aivs-head .aivs-tabs { justify-content: flex-start; } .aivs--studio .aivs-head .aivs-tabs > a:first-child { margin-left: auto; } .aivs--studio .aivs-head .aivs-tabs > a:last-child { margin-right: auto; } .aivs--studio .aivs-tabs a { padding: 8px 9px; gap: 5px; border-radius: 999px; font-size: 14.5px; } .aivs--studio .aivs-tabs a .aivs-ico { width: 18px; height: 18px; } .aivs--studio .aivs-tabs__label { display: none; } .aivs--studio .aivs-tabs__short { display: inline; } .aivs--studio .aivs-usermenu { margin: 0 0 0 auto; flex: none; } .aivs--studio .aivs-usermenu__btn { width: auto; padding: 4px 10px 4px 4px; border-radius: 999px; } .aivs--studio .aivs-usermenu__who { max-width: 150px; } /* v1.33: one line on the bar (the name); the role and this month's spend are on the menu's card */ .aivs--studio .aivs-usermenu__who .aivs-usermenu__role, .aivs--studio .aivs-usermenu__who .aivs-usermenu__spend { display: none; } .aivs--studio .aivs-usermenu__spend--pop { display: block; } .aivs--studio .aivs-usermenu__pop { left: auto; right: 0; bottom: auto; top: calc(100% + 10px); width: 290px; } .aivs--studio .aivs-summary { top: 86px; } } @media (max-width: 1100px) { /* v1.33 (was 900px): the circle only, so all nine pages fit the bar; the name, role and spend are on the menu's card */ .aivs--studio .aivs-usermenu__who, .aivs--studio .aivs-usermenu__btn > .aivs-ico { display: none; } .aivs--studio .aivs-usermenu__btn { padding: 3px; } } @media (min-width: 761px) and (max-width: 1100px) { /* v1.33: when the short words do not fit (app.js fitTabs), the other pages show their icon; the name is the tooltip */ .aivs--studio .aivs-head .aivs-tabs.is-tight a:not(.is-current) .aivs-tabs__short { display: none; } .aivs--studio .aivs-head .aivs-tabs.is-tight a:not(.is-current) { padding: 9px 11px; } } @media (min-width: 761px) and (max-width: 860px) { /* a narrow tablet keeps the logo only */ .aivs--studio .aivs-brand__text { display: none; } } /* ---------------------------------------------------------------- phone: name + avatar on top, the pages in a floating bar at the bottom */ @media (max-width: 760px) { body.aivs-studio #aivs-app.aivs--studio { padding: 10px max(14px, env(safe-area-inset-right)) calc(112px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); } .aivs--studio > .aivs-head { top: 8px; margin-bottom: 18px; padding: 6px 6px 6px 10px; border-radius: 22px; } .aivs--studio .aivs-brand { font-size: 16px; } .aivs--studio .aivs-brand__mark { width: 34px; height: 34px; } .aivs--studio .aivs-head .aivs-tabs { position: fixed; z-index: 70; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); flex-direction: row; justify-content: space-around; gap: 2px; padding: 6px; overflow: visible; border-radius: 26px; background: #0d2030; -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); border: 1px solid var(--g-edge); box-shadow: var(--g-shadow-lg); } /* v1.33: solid (no blur in the flat look) */ .aivs--studio .aivs-head .aivs-tabs > a:first-child, .aivs--studio .aivs-head .aivs-tabs > a:last-child { margin: 0; } .aivs--studio .aivs-tabs a { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px; padding: 7px 4px 6px; border-radius: 20px; font-size: 11.5px; font-weight: 600; line-height: 1.2; } .aivs--studio .aivs-tabs a .aivs-ico { width: 23px; height: 23px; } .aivs--studio .aivs-tabs a.is-current { box-shadow: inset 0 0 0 1px rgba(20, 154, 114, .22), inset 0 1px 0 rgba(255, 255, 255, .096); } .aivs--studio .aivs-tabs__short { overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* v1.13: five pages in the bar at most (each ~69 px wide); ตั้งค่า moves to the name's menu */ .aivs--studio .aivs-head .aivs-tabs a[href="#settings"] { display: none; } .aivs--studio .aivs-usermenu__item--phone { display: flex; } .aivs-root--edit.aivs--studio .aivs-head .aivs-tabs { display: none; } .aivs--studio .aivs-usermenu__pop { width: min(300px, calc(100vw - 28px)); } .aivs--studio .aivs-pagehead { margin-bottom: 16px; } .aivs--studio .aivs-pagehead__title { font-size: 24px; } .aivs--studio .aivs-pagehead__sub { font-size: 14px; } .aivs--studio .aivs-pagehead__cta { display: none; } .aivs--studio .aivs-panel { padding: 16px 14px; border-radius: 20px; } .aivs--studio .aivs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .aivs--studio .aivs-card { padding: 6px; border-radius: 18px; } .aivs--studio .aivs-card__media { border-radius: 13px; } .aivs--studio .aivs-card__body { padding: 8px 4px 2px; font-size: 14px; } .aivs--studio .aivs-jobhead h2 { font-size: 23px; } .aivs--studio .aivs-subtabs, .aivs--studio .aivs-jobs__groups { display: flex; flex-wrap: nowrap; overflow-x: auto; border-radius: 999px; scrollbar-width: none; } .aivs--studio .aivs-subtabs::-webkit-scrollbar, .aivs--studio .aivs-jobs__groups::-webkit-scrollbar { display: none; } .aivs--studio .aivs-jobs__bar { gap: 10px; } .aivs--studio .aivs-jobs__search { width: 100%; } .aivs--studio .aivs-result__side { padding: 16px; } .aivs-toast { bottom: calc(96px + env(safe-area-inset-bottom)); } .aivs--studio .aivs-ed { border-radius: 0; } } @media (max-width: 380px) { .aivs--studio .aivs-brand__text { font-size: 15px; } .aivs--studio .aivs-grid { gap: 10px; } } /* ---------------------------------------------------------------- log in / set a password (shell.js) */ body.aivs-studio .st-wrap { background: transparent; padding: 32px 16px; } /* v1.33 (หน้าตาใหม่): the flat look - a white card with a thin edge, a solid green button (the same as the studio's own buttons) */ body.aivs-studio .st-card { max-width: 410px; padding: 32px 28px 28px; border-radius: 20px; border: 1px solid var(--st-edge); background: #0d2030; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .17), 0 12px 32px -18px rgba(0, 0, 0, .6); } body.aivs-studio .st-brand { gap: 12px; font-size: 20px; color: var(--st-ink); } body.aivs-studio .st-brand img { width: 44px; height: 44px; border-radius: 12px; box-shadow: none; } body.aivs-studio .st-brand--logo img { width: auto; height: auto; max-width: min(280px, 100%); max-height: 64px; border-radius: 0; object-fit: contain; } /* v1.33.1: the studio's whole logo */ body.aivs-studio .st-title { font-size: 22px; font-weight: 700; margin: 26px 0 4px; letter-spacing: -.01em; } body.aivs-studio .st-sub { color: var(--st-muted); font-size: 14.5px; } body.aivs-studio .st-field { font-size: 14px; color: var(--st-ink2); } body.aivs-studio .st-field small { color: var(--st-muted); } body.aivs-studio .st-field input { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--st-line2); background: #0d2030; box-shadow: none; transition: border-color .15s, box-shadow .15s; } body.aivs-studio .st-field input:focus { outline: none; border-color: var(--st-green2); box-shadow: 0 0 0 3px rgba(13, 87, 140, .16); background: #0d2030; } body.aivs-studio .st-pw__eye { color: var(--st-green2); } /* v1.43.1 show / hide the password */ body.aivs-studio .st-pw__eye:hover { background: rgba(13, 87, 140, .08); } body.aivs-studio .st-pw__eye:focus-visible { outline-color: var(--st-green2); } body.aivs-studio .st-btn { min-height: 46px; padding: 12px; border-radius: 10px; font-weight: 650; text-shadow: none; background: var(--st-green2); box-shadow: none; transition: background .15s, transform .1s; } body.aivs-studio .st-btn:hover { background: #09446f; } body.aivs-studio .st-btn:active:not([disabled]) { transform: scale(.985); } body.aivs-studio .st-err { border-radius: 10px; } body.aivs-studio .st-warn { border-radius: 10px; } body.aivs-studio .st-code { background: #0e2535; border-radius: 12px; } body.aivs-studio .st-role { background: var(--st-tint2); color: var(--st-green-deep); } body.aivs-studio .st-link { color: var(--st-green-ink); font-weight: 600; } body.aivs-studio .st-note { color: var(--st-muted); } /* ---------------------------------------------------------------- v1.13 templates (#templates, #templates/) */ .aivs--studio .aivs-req { color: #f0bdbd; } .aivs--studio .aivs-fine { color: var(--st-muted); font-size: 13px; line-height: 1.5; } .aivs--studio .aivs-tplcats { margin-bottom: 18px; } .aivs--studio .aivs-tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; } .aivs--studio .aivs-tpl { display: flex; flex-direction: column; padding: 7px; border-radius: 24px; text-decoration: none; color: var(--st-ink); border: 1px solid var(--g-edge); background: var(--g-solid); box-shadow: var(--g-shadow); transition: transform .18s, box-shadow .18s; } .aivs--studio .aivs-tpl:hover { transform: translateY(-3px); box-shadow: var(--g-shadow-lg); } .aivs--studio .aivs-tpl:active { transform: translateY(-1px) scale(.99); } .aivs--studio .aivs-tpl__cover { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .042), inset 0 -40px 60px -30px rgba(0, 0, 0, .6); } .aivs--studio .aivs-tpl__cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 25% 15%, rgba(13, 32, 48, .38), transparent 70%), radial-gradient(50% 40% at 90% 100%, rgba(0, 0, 0, .18), transparent 70%); } .aivs--studio .aivs-tpl__icon { font-size: 58px; line-height: 1; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .28)); transform: translateY(-6px); } .aivs--studio .aivs-tpl__badges { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 5px; } .aivs--studio .aivs-tpl__badges span { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; line-height: 1.6; color: #fff; background: rgba(0, 0, 0, .26); border: 1px solid rgba(140, 195, 230, .044); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .aivs--studio .aivs-tpl__body { display: flex; flex-direction: column; gap: 2px; padding: 11px 9px 7px; } .aivs--studio .aivs-tpl__title { font-size: 16px; font-weight: 700; line-height: 1.35; } .aivs--studio .aivs-tpl__tag { color: var(--st-muted); font-size: 13.5px; line-height: 1.45; } .aivs--studio .aivs-tplpage .aivs-back { margin-bottom: 14px; } .aivs--studio .aivs-tplpage__grid { display: grid; gap: 22px; align-items: start; } .aivs--studio .aivs-tpl__cover--big { aspect-ratio: 16 / 9; border-radius: 24px; place-items: center; align-content: center; gap: 4px; } .aivs--studio .aivs-tpl__cover--big .aivs-tpl__icon { font-size: 72px; transform: none; } .aivs--studio .aivs-tpl__covertitle { position: relative; z-index: 1; font-size: 22px; font-weight: 750; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); margin-bottom: 26px; } .aivs--studio .aivs-tplpage__desc { margin: 16px 2px 6px; color: var(--st-ink2); } .aivs--studio .aivs-tplpage__h { font-size: 14px; font-weight: 700; margin: 18px 2px 8px; color: var(--st-muted); } .aivs--studio .aivs-tplfacts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; padding: 14px 16px; border-radius: 18px; background: rgba(13, 32, 48, .55); border: 1px solid var(--g-edge); font-size: 14px; } .aivs--studio .aivs-tplfacts dt { color: var(--st-muted); } .aivs--studio .aivs-tplfacts dd { margin: 0; font-weight: 550; } .aivs--studio .aivs-tplpage__title { font-size: 21px; font-weight: 750; margin: 0; } .aivs--studio .aivs-tplpage__tag { margin: 2px 0 14px; } .aivs--studio .aivs-tplslots { display: grid; gap: 14px; } .aivs--studio .aivs-tplslots .aivs-field, .aivs--studio .aivs-tplpage__form > .aivs-field, .aivs--studio .aivs-quick__form .aivs-field { display: grid; gap: 6px; margin: 0; } .aivs--studio .aivs-tplpage__form > .aivs-field { margin-top: 14px; } .aivs--studio .aivs-tplpage__form { scroll-margin-top: 88px; } /* v1.56.1 the assistant filled a template: the page scrolls to its fields, clear of the top bar */ .aivs--studio .aivs-tplpic { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border-radius: 16px; border: 1.5px dashed rgba(44, 221, 168, .3); background: rgba(13, 32, 48, .55); } .aivs--studio .aivs-tplpic.has-pic { border-style: solid; border-color: var(--g-edge); } .aivs--studio .aivs-tplpic img { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; box-shadow: 0 6px 16px -8px rgba(13, 39, 58, .5); } .aivs--studio .aivs-tplpic__ph { display: inline-flex; align-items: center; gap: 8px; color: var(--st-muted); font-size: 14px; flex: 1 1 140px; } .aivs--studio .aivs-tplpic__pct { position: absolute; left: 10px; top: 10px; width: 84px; height: 84px; display: grid; place-items: center; border-radius: 12px; background: rgba(13, 39, 58, .55); color: #fff; font-weight: 700; } .aivs--studio .aivs-tplpic__err { flex-basis: 100%; color: #f0bdbd; font-size: 13px; } .aivs--studio .aivs-tplrights, .aivs--studio .aivs-tplrun { padding: 12px 14px; border-radius: 16px; background: rgba(13, 32, 48, .55); border: 1px solid var(--g-edge); } .aivs--studio .aivs-tplrun { margin-top: 14px; } .aivs--studio .aivs-check small { display: block; color: var(--st-muted); font-size: 13px; line-height: 1.45; } .aivs--studio .aivs-tplidea { margin-top: 14px; font-size: 14px; } .aivs--studio .aivs-tplidea summary { cursor: pointer; color: var(--st-green-ink); font-weight: 600; } .aivs--studio .aivs-tplidea__text { margin: 8px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(13, 39, 58, .04); color: var(--st-ink2); white-space: pre-wrap; } .aivs--studio .aivs-tplbuy, .aivs--studio .aivs-quickbuy { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--st-line); } .aivs--studio .aivs-tplbuy__price, .aivs--studio .aivs-quickbuy__price { display: grid; gap: 2px; font-size: 14px; } .aivs--studio .aivs-tplbuy__price strong, .aivs--studio .aivs-quickbuy__price strong { font-size: 17px; color: var(--st-green-deep); } .aivs--studio .aivs-tplbuy__price small, .aivs--studio .aivs-quickbuy__price small { color: var(--st-muted); font-size: 13px; line-height: 1.45; } .aivs--studio .aivs-tplbuy .aivs-btn--primary, .aivs--studio .aivs-quickbuy .aivs-btn--primary { padding-top: 13px; padding-bottom: 13px; font-size: 16px; } @container aivs (min-width: 900px) { .aivs--studio .aivs-tplpage__grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 28px; } .aivs--studio .aivs-tplpage__form { position: sticky; top: 92px; } } /* ---------------------------------------------------------------- v1.13 quick create (#quick) */ .aivs--studio .aivs-quick { display: grid; gap: 22px; align-items: start; } .aivs--studio .aivs-quick__form { display: grid; gap: 14px; } .aivs--studio .aivs-quickmodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 18px; background: rgba(13, 39, 58, .06); } .aivs--studio .aivs-quickmode { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 6px; border: 0; border-radius: 14px; background: transparent; color: var(--st-ink2); font: inherit; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; } .aivs--studio .aivs-quickmode:hover { background: rgba(13, 32, 48, .6); } .aivs--studio .aivs-quickmode.is-on { background: #0d2030; color: var(--st-green-deep); box-shadow: 0 4px 14px -6px rgba(13, 39, 58, .35), inset 0 0 0 1px rgba(20, 154, 114, .2); } .aivs--studio .aivs-quickcount { margin-top: -8px; text-align: right; } .aivs--studio .aivs-quickcount.is-over { color: var(--aivs-fail); font-weight: 600; } /* v1.57.2 longer than the model takes */ .aivs--studio .aivs-quickrefs, .aivs--studio .aivs-quickframes { display: flex; flex-wrap: wrap; gap: 8px; } .aivs--studio .aivs-quickref { position: relative; width: 68px; height: 68px; margin: 0; border-radius: 14px; overflow: hidden; background: rgba(13, 32, 48, .6); border: 1px solid var(--g-edge); } .aivs--studio .aivs-quickref img { width: 100%; height: 100%; object-fit: cover; } .aivs--studio .aivs-quickref.has-error { outline: 2px solid #c02b2b; } .aivs--studio .aivs-quickref__pct { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(13, 39, 58, .5); color: #fff; font-weight: 700; } .aivs--studio .aivs-quickref__x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(13, 39, 58, .7); color: #fff; font-size: 15px; line-height: 22px; } .aivs--studio .aivs-quickref--add { display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer; border: 1.5px dashed rgba(44, 221, 168, .35); color: var(--st-green-ink); font: inherit; font-size: 12px; font-weight: 600; } .aivs--studio .aivs-quicklib, .aivs--studio .aivs-quickmine { margin-top: 4px; } /* v1.57.2 + the own pictures as references */ .aivs--studio .aivs-quickframe { display: grid; justify-items: center; align-content: center; gap: 4px; width: 92px; min-height: 92px; padding: 6px; border-radius: 16px; cursor: pointer; border: 1px solid var(--st-line2); background: rgba(13, 32, 48, .7); color: var(--st-ink2); font: inherit; font-size: 12px; line-height: 1.3; text-align: center; } .aivs--studio .aivs-quickframe img { width: 100%; height: 56px; object-fit: cover; border-radius: 10px; } .aivs--studio .aivs-quickframe:hover { border-color: rgba(44, 221, 168, .4); background: #0d2030; } .aivs--studio .aivs-quickframe.is-on { border-color: transparent; box-shadow: inset 0 0 0 2px var(--st-green), 0 8px 18px -12px rgba(16, 87, 137, .7); background: rgba(80, 237, 190, .126); color: var(--st-green-deep); font-weight: 600; } .aivs--studio .aivs-quick__ghead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .aivs--studio .aivs-quick__ghead h2 { margin: 0; font-size: 18px; font-weight: 700; } .aivs--studio .aivs-gengrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; } .aivs--studio .aivs-gen { display: flex; flex-direction: column; padding: 6px; border-radius: 20px; border: 1px solid var(--g-edge); background: var(--g-solid); box-shadow: var(--g-shadow); } .aivs--studio .aivs-gen.is-failed { box-shadow: var(--g-shadow), inset 0 0 0 1px rgba(192, 43, 43, .25); } .aivs--studio .aivs-gen__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 15px; overflow: hidden; background: #0e2535; color: rgba(255, 255, 255, .8); } /* 1.13.1: the picture / clip fills the frame exactly (a grid item's height:100% resolved to its own height, so a 9:16 clip ran out of the 4:5 frame and its play bar was cut off) */ .aivs--studio .aivs-gen__media img, .aivs--studio .aivs-gen__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } .aivs--studio .aivs-gen__media--16x9, .aivs--studio .aivs-gen__media--4x3 { aspect-ratio: 4 / 3; } .aivs--studio .aivs-gen__media--1x1 { aspect-ratio: 1; } .aivs--studio .aivs-gen__media--voice { aspect-ratio: auto; min-height: 120px; gap: 10px; padding: 18px 10px; align-content: center; background: linear-gradient(150deg, #1aa47b, #0d4872); color: #fff; } .aivs--studio .aivs-gen__media--voice .aivs-ico { width: 30px; height: 30px; } .aivs--studio .aivs-gen__media--voice audio { width: 100%; height: 38px; } .aivs--studio .aivs-gen__media--wait { align-content: center; gap: 10px; padding: 12px; text-align: center; font-size: 13px; background: linear-gradient(150deg, #264459, #0e2535); } .aivs--studio .aivs-gen.is-failed .aivs-gen__media--wait { background: linear-gradient(150deg, #5b2a2a, #2a1414); } .aivs--studio .aivs-gen__spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(140, 195, 230, .034); border-top-color: #4ade80; animation: aivs-spin 1s linear infinite; } @keyframes aivs-spin { to { transform: rotate(360deg); } } .aivs--studio .aivs-gen__body { display: grid; gap: 6px; padding: 10px 6px 4px; } .aivs--studio .aivs-gen__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .aivs--studio .aivs-gen__kind { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--st-green-deep); } .aivs--studio .aivs-gen__kind .aivs-ico { width: 16px; height: 16px; } .aivs--studio .aivs-gen__top small { font-size: 12px; text-align: right; } .aivs--studio .aivs-gen__text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--st-ink2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .aivs--studio .aivs-gen__err { margin: 0; font-size: 13px; color: #f0bdbd; } .aivs--studio .aivs-gen__acts { display: flex; flex-wrap: wrap; gap: 6px; } @container aivs (min-width: 1001px) { .aivs--studio .aivs-quick { grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); gap: 28px; } .aivs--studio .aivs-quick__form { position: sticky; top: 92px; } } /* v1.34.1 (owner 22 Oct 04:17 "หน้าจะเลื่อนหาปุ่มสร้างได้นานกว่าจะเจอ จนกว่าจะเลื่อนฝั่งขวาเสร็จ"): the form beside the gallery stays in place, so when it is taller than the window its lower part (the price and สร้าง) showed only once the right side ended - now the form scrolls inside itself and its price + button bar stays at its bottom, always in view (the template page too) */ @container aivs (min-width: 1001px) { .aivs--studio .aivs-quick__form { max-height: calc(100vh - 108px); max-height: calc(100dvh - 108px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(96, 150, 190, .35) transparent; } .aivs--studio .aivs-quick__form > .aivs-quickbuy { position: sticky; bottom: 0; z-index: 3; margin: 4px -22px -20px; padding: 14px 22px 18px; background: #0d2030; border-top: 1px solid var(--st-line); border-radius: 0 0 22px 22px; box-shadow: 0 -12px 22px -16px rgba(0, 0, 0, .6); } } @container aivs (min-width: 900px) { .aivs--studio .aivs-tplpage__form { max-height: calc(100vh - 108px); max-height: calc(100dvh - 108px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(96, 150, 190, .35) transparent; } .aivs--studio .aivs-tplpage__form > .aivs-tplbuy { position: sticky; bottom: 0; z-index: 3; margin: 18px -22px -20px; padding: 14px 22px 18px; background: #0d2030; border-top: 1px solid var(--st-line); border-radius: 0 0 22px 22px; box-shadow: 0 -12px 22px -16px rgba(0, 0, 0, .6); } } @media (max-width: 760px) { .aivs--studio .aivs-tplgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .aivs--studio .aivs-tpl { padding: 5px; border-radius: 20px; } .aivs--studio .aivs-tpl__cover { border-radius: 15px; } .aivs--studio .aivs-tpl__icon { font-size: 44px; } .aivs--studio .aivs-tpl__badges span:nth-child(3) { display: none; } .aivs--studio .aivs-tpl__title { font-size: 14.5px; } .aivs--studio .aivs-tpl__tag { font-size: 12.5px; } .aivs--studio .aivs-gengrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .aivs--studio .aivs-quickmode { flex-direction: column; gap: 2px; padding: 8px 4px; font-size: 13.5px; line-height: 1.3; } .aivs--studio .aivs-gen__acts .aivs-btn { flex: 1 1 auto; } } @media (prefers-reduced-motion: reduce) { .aivs--studio .aivs-tpl { transition: none; } .aivs--studio .aivs-tpl:hover { transform: none; } .aivs--studio .aivs-gen__spin { animation-duration: 3s; } } /* ---------------------------------------------------------------- see-through off (system setting) or no blur in the browser: plain white */ @media (prefers-reduced-transparency: reduce) { .aivs--studio > .aivs-head::before, .aivs--studio .aivs-summary { background: #0d2030; -webkit-backdrop-filter: none; backdrop-filter: none; } /* v1.33: the name's menu and the log-in card are plain white already */ .aivs--studio .aivs-head .aivs-tabs { -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-reduced-transparency: reduce) and (max-width: 760px) { .aivs--studio .aivs-head .aivs-tabs { background: #0d2030; } } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .aivs--studio > .aivs-head::before, .aivs--studio .aivs-summary { background: rgba(13, 32, 48, .97); } } @media (max-width: 760px) { @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .aivs--studio .aivs-head .aivs-tabs { background: rgba(13, 32, 48, .97); } } } @media (prefers-reduced-motion: reduce) { .aivs--studio .aivs-card, .aivs--studio .aivs-btn, .aivs--studio .aivs-tile, .aivs--studio .aivs-usermenu__pop { transition: none; animation: none; transform: none; } } .aivs-root--edit.aivs--studio > .aivs-main { max-width: none; } /* ---------------------------------------------------------------- v1.15 series + the AI director (#series) */ .aivs--studio .aivs-series-list { display: grid; gap: 18px; } .aivs--studio .aivs-seriesnew { display: grid; gap: 10px; padding: 16px; border-radius: 20px; } .aivs--studio .aivs-seriesnew h3, .aivs--studio .aivs-panel h3 { margin: 0; font-size: 16px; } .aivs--studio .aivs-seriesnew__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .aivs--studio .aivs-seriesnew .aivs-btn--primary { justify-self: start; } .aivs--studio .aivs-seriesgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .aivs--studio .aivs-seriescard { position: relative; display: grid; gap: 6px; padding: 16px; border-radius: 20px; text-decoration: none; color: var(--st-ink); background: linear-gradient(160deg, rgba(13, 39, 58, .92), rgba(16, 87, 137, .88)); box-shadow: var(--g-shadow); min-height: 150px; align-content: start; } .aivs--studio .aivs-seriescard, .aivs--studio .aivs-seriescard small { color: #eafff4; } .aivs--studio .aivs-seriescard__title { font-size: 18px; line-height: 1.3; padding-right: 44px; } .aivs--studio .aivs-seriescard__fmt { position: absolute; top: 14px; right: 14px; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(13, 32, 48, .18); } .aivs--studio .aivs-seriescard__bar { height: 6px; border-radius: 999px; background: rgba(13, 32, 48, .2); overflow: hidden; margin-top: 6px; } .aivs--studio .aivs-seriescard__bar span { display: block; height: 100%; background: #4ade80; } .aivs--studio .aivs-seriescard__owner { font-weight: 600; } .aivs--studio .aivs-seriescard:hover, .aivs--studio .aivs-seriescard:focus-visible { transform: translateY(-2px); } .aivs--studio .aivs-series-empty { padding: 18px; border: 1px dashed var(--st-line2); border-radius: 16px; } .aivs--studio .aivs-serieshead { display: grid; gap: 6px; margin-bottom: 12px; } .aivs--studio .aivs-serieshead__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; } .aivs--studio .aivs-serieshead__title { margin: 0; font-size: 24px; } .aivs--studio .aivs-serieshead .aivs-fine { margin: 2px 0 0; } .aivs--studio .aivs-seriestabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(13, 32, 48, .6); border: 1px solid var(--st-line); } .aivs--studio .aivs-seriestab { padding: 7px 14px; border-radius: 999px; text-decoration: none; color: var(--st-ink2); font-size: 14px; font-weight: 500; } .aivs--studio .aivs-seriestab.is-on { background: #0d2030; color: var(--st-green-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .29); } .aivs--studio .aivs-serieslayout { display: grid; gap: 16px; } .aivs--studio .aivs-serieslayout > .aivs-director { display: none; } .aivs--studio .aivs-serieslayout.is-chat > .aivs-director { display: flex; } .aivs--studio .aivs-serieslayout.is-chat > .aivs-seriesbody { display: none; } @container aivs (min-width: 1000px) { .aivs--studio .aivs-serieslayout { grid-template-columns: 360px minmax(0, 1fr); align-items: start; } .aivs--studio .aivs-serieslayout > .aivs-director, .aivs--studio .aivs-serieslayout.is-chat > .aivs-director { display: flex; position: sticky; top: 16px; max-height: calc(100vh - 32px); } .aivs--studio .aivs-serieslayout.is-chat > .aivs-seriesbody { display: block; } .aivs--studio .aivs-seriestab--chat { display: none; } } .aivs--studio .aivs-seriestab-body { display: grid; gap: 14px; } .aivs--studio .aivs-seriestab-body .aivs-panel { display: grid; gap: 10px; padding: 16px; border-radius: 20px; } .aivs--studio .aivs-seriesread { border-color: rgba(20, 154, 114, .45); background: rgba(84, 232, 152, .119); } .aivs--studio .aivs-seriesread h4 { margin: 4px 0 0; font-size: 14px; } .aivs--studio .aivs-seriesread__syn { display: block; margin-top: 2px; } .aivs--studio .aivs-seriesread__chars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .aivs--studio .aivs-seriesread__chars li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(13, 32, 48, .8); border: 1px solid var(--st-line); } .aivs--studio .aivs-seriesread__chars li > span:first-child { flex: 1 1 260px; display: grid; } .aivs--studio .aivs-seriesread__look { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aivs--studio .aivs-seriesdanger summary { cursor: pointer; color: var(--st-ink2); font-size: 13px; } .aivs--studio .aivs-seriesplaces { display: grid; gap: 8px; } .aivs--studio .aivs-seriesplace { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto; gap: 8px; align-items: center; } /* v1.57.4 a place with its picture (ฉากของฉัน) */ .aivs--studio .aivs-seriesplace--pic { grid-template-columns: 56px minmax(110px, 180px) minmax(0, 1fr) minmax(120px, 180px) auto; } .aivs--studio .aivs-seriesplace__pic { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; border: 1px solid var(--aivs-line); } .aivs--studio .aivs-seriesplace__pic--none { display: grid; place-items: center; font-size: 11px; color: var(--aivs-muted); background: rgba(255, 255, 255, .04); } /* v1.58.5 อุปกรณ์ประจำ: name, English words, holder, hand, first episode, remove - the look on its own line */ .aivs--studio .aivs-seriesprops__list { display: grid; gap: 10px; } .aivs--studio .aivs-seriesprop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(100px, 130px) minmax(110px, 150px) auto; gap: 8px; align-items: end; padding-bottom: 10px; border-bottom: 1px solid var(--aivs-line); } .aivs--studio .aivs-seriesprop__look { grid-column: 1 / -1; order: 10; } .aivs--studio .aivs-seriesprop .aivs-mini { display: grid; gap: 4px; font-size: 12px; color: var(--st-ink2); } .aivs--studio .aivs-seriesprop__when { grid-column: 1 / span 3; order: 11; } /* v1.58.13 its first moment, its picture */ .aivs--studio .aivs-seriesprop__pic { grid-column: 4 / -1; order: 12; display: flex; gap: 8px; align-items: center; min-width: 0; } .aivs--studio .aivs-seriesprop__pic img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; flex: none; } .aivs--studio .aivs-seriesprop__pic select { flex: 1; min-width: 0; } .aivs--studio .aivs-seriesimport summary { cursor: pointer; font-weight: 600; } .aivs--studio .aivs-seriesimport[open] { display: grid; gap: 10px; } .aivs--studio .aivs-seriesimport__text { font-size: 14px; min-height: 160px; } .aivs--studio .aivs-seriesimport__opts { display: flex; flex-wrap: wrap; gap: 6px 18px; } .aivs--studio .aivs-seriesepbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .aivs--studio .aivs-seriesepbar h3 { margin: 0; font-size: 16px; } .aivs--studio .aivs-serieseps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .aivs--studio .aivs-seriesep { display: grid; gap: 6px; padding: 14px; border-radius: 18px; background: rgba(13, 32, 48, .82); border: 1px solid var(--st-line); } .aivs--studio .aivs-seriesep.is-editing { padding: 0; background: none; border: 0; } .aivs--studio .aivs-seriesep__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .aivs--studio .aivs-seriesep__n { font-size: 12px; font-weight: 700; color: var(--st-green-ink); background: rgba(80, 237, 190, .133); border-radius: 999px; padding: 2px 10px; } .aivs--studio .aivs-seriesep__head strong { flex: 1 1 auto; } .aivs--studio .aivs-seriesep__syn { margin: 0; font-size: 14px; color: var(--st-ink2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .aivs--studio .aivs-seriesep .aivs-actions { margin: 2px 0 0; } .aivs--studio .aivs-seriesepedit__n { max-width: 120px; } .aivs--studio .aivs-seriesepedit__script { font-size: 14px; min-height: 220px; } .aivs--studio .aivs-seriesepedit__del { margin-left: auto; } .aivs--studio .aivs-seriesmake { display: grid; gap: 8px; margin-top: 6px; padding: 12px; border-radius: 14px; border: 1px solid rgba(20, 154, 114, .45); background: rgba(84, 232, 152, .126); } .aivs--studio .aivs-seriesmake .aivs-tplbuy__price { display: grid; gap: 2px; } /* v1.58.19 ซีรีส์แบบดราม่า: the episode's parts, the whole episode joined */ .aivs--studio .aivs-epparts { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--st-line); background: rgba(255, 255, 255, .04); } .aivs--studio .aivs-epparts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .aivs--studio .aivs-epparts__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .aivs--studio .aivs-epparts__row.is-on { font-weight: 600; } .aivs--studio .aivs-epparts__full { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 2px 0 0; } .aivs--studio .aivs-dramamake__script pre { white-space: pre-wrap; max-height: 240px; overflow: auto; font-size: 13px; margin: 6px 0 0; } .aivs--studio .aivs-seriesstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .aivs--studio .aivs-seriesstats > div { display: grid; gap: 2px; padding: 14px; border-radius: 16px; background: rgba(13, 32, 48, .82); border: 1px solid var(--st-line); } .aivs--studio .aivs-seriesstats strong { font-size: 22px; } .aivs--studio .aivs-seriestimeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .aivs--studio .aivs-seriestimeline__item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--st-line); } .aivs--studio .aivs-seriestimeline__item > div { display: grid; } .aivs--studio .aivs-seriestimeline__n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: rgba(0, 0, 0, .06); color: var(--st-ink2); } .aivs--studio .aivs-seriestimeline__item.is-done .aivs-seriestimeline__n { background: var(--st-green2); color: #fff; } .aivs--studio .aivs-seriestimeline__item.is-work .aivs-seriestimeline__n, .aivs--studio .aivs-seriestimeline__item.is-wait .aivs-seriestimeline__n { background: rgba(109, 74, 224, .15); color: #d9d2f1; } .aivs--studio .aivs-seriestimeline__item.is-fail .aivs-seriestimeline__n { background: rgba(220, 38, 38, .12); color: #f5c4c4; } .aivs--studio .aivs-director { flex-direction: column; gap: 10px; padding: 14px; border-radius: 22px; background: rgba(13, 32, 48, .72); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(140, 195, 230, .109); box-shadow: var(--g-shadow); min-height: 420px; } .aivs--studio .aivs-director__head { display: grid; gap: 2px; } .aivs--studio .aivs-director__head strong { font-size: 16px; } .aivs--studio .aivs-director__list { flex: 1 1 auto; min-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; } .aivs--studio .aivs-director__hello { padding: 12px; border-radius: 14px; background: rgba(80, 237, 190, .126); } .aivs--studio .aivs-director__hello p { margin: 0 0 6px; } .aivs--studio .aivs-director__msg { display: grid; gap: 6px; max-width: 92%; padding: 10px 12px; border-radius: 16px; font-size: 14px; line-height: 1.55; } .aivs--studio .aivs-director__msg.is-me { align-self: flex-end; background: var(--st-green2); color: #fff; border-bottom-right-radius: 6px; } .aivs--studio .aivs-director__msg.is-ai { align-self: flex-start; background: rgba(13, 32, 48, .95); border: 1px solid var(--st-line); border-bottom-left-radius: 6px; } .aivs--studio .aivs-director__msg.is-undone { opacity: .55; } .aivs--studio .aivs-director__msg.is-busy { display: flex; align-items: center; gap: 8px; color: var(--st-ink2); } .aivs--studio .aivs-director__msg .aivs-gen__spin { width: 14px; height: 14px; border-width: 2px; border-color: rgba(20, 154, 114, .22); border-top-color: var(--st-green-ink); } .aivs--studio .aivs-director__text { white-space: pre-wrap; overflow-wrap: anywhere; } .aivs--studio .aivs-director__acts { margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--st-green-ink); } .aivs--studio .aivs-director__card { display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: rgba(84, 232, 152, .133); border: 1px solid rgba(20, 154, 114, .35); } .aivs--studio .aivs-director__card .aivs-btn { justify-self: start; } .aivs--studio .aivs-director__undo { justify-self: start; } .aivs--studio .aivs-director__quick { display: flex; flex-wrap: wrap; gap: 6px; } .aivs--studio .aivs-director__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; } .aivs--studio .aivs-director__input { min-height: 64px; resize: vertical; font-size: 14px; } /* v1.56.0 📒 สมุดเรื่อง (the story ledger) + แนวซีรีส์สำเร็จรูป */ .aivs--studio .aivs-ledger__chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; } .aivs--studio .aivs-ledger__char { display: grid; align-content: start; gap: 6px; padding: 12px; border-radius: 14px; background: rgba(13, 32, 48, .6); border: 1px solid var(--st-line); min-width: 0; } .aivs--studio .aivs-ledger__char dl { display: grid; align-content: start; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 13px; } .aivs--studio .aivs-ledger__char dt { color: var(--st-ink2); } .aivs--studio .aivs-ledger__char dd { margin: 0; overflow-wrap: anywhere; } .aivs--studio .aivs-ledger__events h4 { margin: 4px 0; font-size: 14px; } .aivs--studio .aivs-ledger__events ul, .aivs--studio .aivs-ledger__evlist { margin: 0; padding-left: 20px; display: grid; gap: 3px; font-size: 14px; } .aivs--studio .aivs-ledger__ended { margin: 0; font-size: 14px; overflow-wrap: anywhere; } .aivs--studio .aivs-ledger__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; margin: 0; padding: 10px; border: 1px dashed var(--st-line); border-radius: 12px; min-width: 0; } .aivs--studio .aivs-ledger__row legend { padding: 0 6px; font-size: 12px; color: var(--st-ink2); } .aivs--studio .aivs-ledger__row > .aivs-btn { align-self: end; justify-self: start; } .aivs--studio .aivs-seriesep__ledger { font-size: 13px; color: var(--st-green-ink); text-decoration: none; } .aivs--studio .aivs-seriesep__ledger:hover { text-decoration: underline; } .aivs--studio .aivs-seriespreset { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .aivs--studio .aivs-seriespreset select { flex: 1 1 240px; min-width: 0; } .aivs--studio .aivs-seriesnew__presetnote { margin: -4px 0 0; } @media (max-width: 760px) { .aivs--studio .aivs-head .aivs-tabs a[href="#series"] { display: none; } .aivs--studio .aivs-seriesplace { grid-template-columns: 1fr; } .aivs--studio .aivs-seriesplace--pic { grid-template-columns: 56px minmax(0, 1fr); } .aivs--studio .aivs-seriesplace--pic > :nth-child(n+3) { grid-column: 1 / -1; } .aivs--studio .aivs-seriesprop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .aivs--studio .aivs-seriesprop__when, .aivs--studio .aivs-seriesprop__pic { grid-column: 1 / -1; } .aivs--studio .aivs-director { min-height: 60vh; } .aivs--studio .aivs-seriestabs { width: 100%; justify-content: space-between; } .aivs--studio .aivs-seriestab { padding: 7px 10px; font-size: 13px; } } @media (prefers-reduced-transparency: reduce) { .aivs--studio .aivs-director { background: #0d2030; -webkit-backdrop-filter: none; backdrop-filter: none; } } /* v1.17 "✨ ปรับพรอมต์" */ .aivs--studio .aivs-enh { display: grid; gap: 8px; margin-top: 6px; min-width: 0; } .aivs--studio .aivs-enh__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; } .aivs--studio .aivs-enh__profile { width: auto; max-width: 100%; flex: 0 1 260px; min-width: 0; font-size: 13px; padding: 6px 10px; } .aivs--studio .aivs-enh__out { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: rgba(84, 232, 152, .129); border: 1px solid rgba(20, 154, 114, .35); min-width: 0; } .aivs--studio .aivs-enh__out[hidden] { display: none; } .aivs--studio .aivs-enh__text { font-family: inherit; font-size: 13px; line-height: 1.5; min-height: 96px; resize: vertical; } @media (prefers-reduced-transparency: reduce) { .aivs--studio .aivs-enh__out { background: rgba(84, 232, 152, .14); } } /* v1.17 Character Bible */ .aivs--studio .aivs-bible { display: grid; gap: 8px; padding: 12px; border-radius: 14px; border: 1px dashed rgba(20, 154, 114, .45); background: rgba(13, 32, 48, .7); min-width: 0; } .aivs--studio .aivs-bible__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .aivs--studio .aivs-bible__pic { margin: 0; display: grid; gap: 4px; min-width: 0; } .aivs--studio .aivs-bible__pic img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; border: 1px solid var(--st-line); background: rgba(20, 42, 60, .62); } .aivs--studio .aivs-bible__pic figcaption { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 12px; color: var(--st-ink2); } /* v1.42.2: a new product's photos waiting to be saved with it */ .aivs--studio .aivs-bible__pic--wait figcaption .aivs-bible__label { min-width: 0; flex: 1 1 auto; padding: 4px 6px; font-size: 12px; } .aivs--studio .aivs-bible__pic--wait .aivs-bible__main { justify-self: start; font-size: 12px; padding: 2px 8px; } .aivs--studio .aivs-bible__add, .aivs--studio .aivs-bible__voicerow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; } .aivs--studio .aivs-bible__label { width: auto; flex: 0 1 160px; min-width: 0; } .aivs--studio .aivs-bible__voice { display: grid; gap: 6px; } .aivs--studio .aivs-bible__voicerow audio { height: 36px; max-width: 100%; } .aivs--studio .aivs-libcard__bible { color: var(--st-green-ink); } /* v1.17 Canvas */ .aivs--studio .aivs-canvasswitch { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 999px; background: rgba(13, 32, 48, .75); border: 1px solid var(--st-line); max-width: 100%; } .aivs--studio .aivs-canvasswitch a { padding: 7px 14px; border-radius: 999px; color: var(--st-ink2); text-decoration: none; font-size: 14px; white-space: nowrap; } .aivs--studio .aivs-canvasswitch a.is-on { background: var(--st-green-ink); color: #fff; } .aivs--studio .aivs-canvaspage { display: grid; gap: 14px; } .aivs--studio .aivs-canvasnew { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .aivs--studio .aivs-canvasnew .aivs-input { flex: 1 1 260px; min-width: 0; } .aivs--studio .aivs-canvaslist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .aivs--studio .aivs-canvascard { display: grid; gap: 4px; padding: 14px; border-radius: 14px; background: rgba(13, 32, 48, .85); border: 1px solid var(--st-line); color: inherit; text-decoration: none; } .aivs--studio .aivs-canvascard:hover { border-color: rgba(20, 154, 114, .5); } .aivs--studio .aivs-canvas { display: grid; gap: 10px; min-width: 0; } .aivs--studio .aivs-canvas__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-width: 0; } .aivs--studio .aivs-canvas__title { flex: 1 1 220px; min-width: 0; font-weight: 600; } .aivs--studio .aivs-canvas__status { color: var(--st-ink2); } .aivs--studio .aivs-canvas__add { display: flex; flex-wrap: wrap; gap: 6px; } .aivs--studio .aivs-board { position: relative; height: min(72vh, 760px); overflow: auto; border-radius: 16px; border: 1px solid var(--st-line); background-color: rgba(20, 42, 60, .62); background-image: radial-gradient(rgba(25, 53, 74, .14) 1px, transparent 1px); background-size: 22px 22px; touch-action: pan-x pan-y; } .aivs--studio .aivs-board__inner { position: relative; width: 2600px; height: 1800px; } .aivs--studio .aivs-board__lines { position: absolute; inset: 0; width: 2600px; height: 1800px; overflow: visible; } .aivs--studio .aivs-board__line { fill: none; stroke: var(--st-green-ink); stroke-width: 2.5; opacity: .75; pointer-events: none; } .aivs--studio .aivs-board__hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; pointer-events: stroke; } .aivs--studio .aivs-board__hit:hover { stroke: rgba(238, 158, 158, .25); } .aivs--studio .aivs-node { position: absolute; display: grid; border-radius: 14px; background: rgba(13, 32, 48, .97); border: 1px solid var(--st-line); box-shadow: 0 6px 18px rgba(0, 0, 0, .29); } .aivs--studio .aivs-node__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; cursor: grab; touch-action: none; border-bottom: 1px solid var(--st-line); border-radius: 14px 14px 0 0; background: rgba(84, 232, 152, .126); user-select: none; } .aivs--studio .aivs-node--note .aivs-node__head { background: rgba(230, 203, 101, .14); } .aivs--studio .aivs-node--image .aivs-node__head, .aivs--studio .aivs-node--clip .aivs-node__head, .aivs--studio .aivs-node--voice .aivs-node__head { background: rgba(76, 167, 240, .133); } .aivs--studio .aivs-node__x { border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: var(--st-ink2); padding: 2px 6px; } .aivs--studio .aivs-node__body { display: grid; gap: 6px; padding: 10px; min-width: 0; } .aivs--studio .aivs-node__text { font-size: 13px; min-height: 64px; resize: vertical; } .aivs--studio .aivs-node__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .aivs--studio .aivs-node__sel { font-size: 13px; padding: 6px 8px; min-width: 0; } .aivs--studio .aivs-node__res img, .aivs--studio .aivs-node__res video { width: 100%; max-height: 260px; object-fit: contain; border-radius: 10px; background: rgba(20, 42, 60, .62); display: block; } .aivs--studio .aivs-node__res audio { width: 100%; } .aivs--studio .aivs-node__busy { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--st-ink2); } .aivs--studio .aivs-node__err { color: #f5c6c2; } .aivs--studio .aivs-port { position: absolute; top: 14px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(140, 195, 230, .156); background: var(--st-green-ink); box-shadow: 0 0 0 1px var(--st-green-ink); cursor: crosshair; padding: 0; } .aivs--studio .aivs-port--in { left: -10px; background: #0d2030; } .aivs--studio .aivs-port--out { right: -10px; } .aivs--studio .aivs-board.is-connecting .aivs-port--in { background: var(--st-green-ink); box-shadow: 0 0 0 4px rgba(20, 154, 114, .3); } @media (max-width: 760px) { .aivs--studio .aivs-board { height: 64vh; } .aivs--studio .aivs-canvasswitch a { padding: 7px 10px; font-size: 13px; } } /* v1.18 voice-first */ .aivs--studio .aivs-vbanner { border-radius: 14px; border-color: rgba(22, 163, 74, .25); background: rgba(105, 211, 153, .14); } .aivs--studio .aivs-vbanner.is-warn { border-color: rgba(217, 119, 6, .3); background: rgba(230, 193, 101, .14); } .aivs--studio .aivs-fitbox { border-radius: 14px; border-color: rgba(234, 88, 12, .28); background: rgba(230, 187, 101, .098); } .aivs--studio .aivs-vplan__lines { color: inherit; } /* ---------------------------------------------------------------- v1.19 tools (#tools) */ .aivs--studio .aivs-tools { display: grid; gap: 22px; align-items: start; } .aivs--studio .aivs-tools__form { display: grid; gap: 14px; min-width: 0; } .aivs--studio .aivs-toolgroups { display: grid; gap: 10px; } .aivs--studio .aivs-toolgroup__t { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; color: var(--st-muted); letter-spacing: .02em; } .aivs--studio .aivs-toolgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; } .aivs--studio .aivs-tool { display: grid; gap: 2px; align-content: start; min-height: 58px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--st-line2); background: rgba(13, 32, 48, .72); color: var(--st-ink2); font: inherit; text-align: left; cursor: pointer; transition: background .15s, box-shadow .15s; } .aivs--studio .aivs-tool strong { font-size: 13.5px; line-height: 1.3; } .aivs--studio .aivs-tool small { font-size: 11.5px; line-height: 1.35; color: var(--st-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aivs--studio .aivs-tool:hover:not(:disabled) { background: #0d2030; border-color: rgba(44, 221, 168, .35); } .aivs--studio .aivs-tool.is-on { border-color: transparent; background: rgba(80, 237, 190, .133); box-shadow: inset 0 0 0 2px var(--st-green), 0 8px 18px -12px rgba(16, 87, 137, .7); color: var(--st-green-deep); } .aivs--studio .aivs-tool--ai small { color: #e6ce95; font-weight: 600; } .aivs--studio .aivs-tool:disabled { opacity: .5; cursor: not-allowed; } .aivs--studio .aivs-tools__hint { margin: 0; font-size: 14px; color: var(--st-ink2); } .aivs--studio .aivs-tools__picktabs { margin: 6px 0 8px; } .aivs--studio .aivs-toolsrcs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .aivs--studio .aivs-toolsrc { position: relative; display: grid; width: 92px; margin: 0; border-radius: 14px; overflow: hidden; background: #0e2535; border: 1px solid var(--g-edge); } .aivs--studio .aivs-toolsrc img { width: 100%; height: 64px; object-fit: cover; display: block; } .aivs--studio .aivs-toolsrc figcaption { padding: 4px 6px; font-size: 11.5px; line-height: 1.3; color: #fff; background: rgba(13, 39, 58, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aivs--studio .aivs-toolsrc.has-error { outline: 2px solid #c02b2b; } .aivs--studio .aivs-toolsrc__ico { display: grid; place-items: center; height: 64px; color: rgba(255, 255, 255, .85); } .aivs--studio .aivs-toolsrc__ico .aivs-ico { width: 26px; height: 26px; } .aivs--studio .aivs-toolsrc__n { position: absolute; top: 4px; left: 4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--st-green-ink); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; } .aivs--studio .aivs-toolsrc__pct { position: absolute; inset: 0 0 auto; height: 64px; display: grid; place-items: center; background: rgba(13, 39, 58, .55); color: #fff; font-weight: 700; } .aivs--studio .aivs-toolsrc__x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(13, 39, 58, .7); color: #fff; font-size: 15px; line-height: 22px; } .aivs--studio .aivs-toolpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding: 2px; } .aivs--studio .aivs-toolpick__item { display: grid; align-content: start; gap: 3px; padding: 5px; border-radius: 14px; border: 1px solid var(--st-line2); background: rgba(13, 32, 48, .75); color: var(--st-ink2); font: inherit; font-size: 11.5px; line-height: 1.3; text-align: center; cursor: pointer; min-width: 0; } .aivs--studio .aivs-toolpick__item img { width: 100%; height: 58px; object-fit: cover; border-radius: 10px; background: #0e2535; } .aivs--studio .aivs-toolpick__item > span:not(.aivs-toolsrc__ico) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aivs--studio .aivs-toolpick__item .aivs-toolsrc__ico { height: 58px; border-radius: 10px; background: linear-gradient(150deg, #1aa47b, #0d4872); } .aivs--studio .aivs-toolpick__item small { color: var(--st-muted); font-size: 11px; } .aivs--studio .aivs-toolpick__item.is-on { border-color: transparent; box-shadow: inset 0 0 0 2px var(--st-green); background: rgba(80, 237, 190, .133); color: var(--st-green-deep); font-weight: 600; } .aivs--studio .aivs-toolpick__up .aivs-toolsrc__ico { background: rgba(16, 87, 137, .08); color: var(--st-green-ink); border: 1.5px dashed rgba(44, 221, 168, .35); } .aivs--studio .aivs-toolprev { display: grid; gap: 6px; } .aivs--studio .aivs-toolprev__media { position: relative; display: grid; place-items: center; max-height: 380px; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #0e2535; } .aivs--studio .aivs-toolprev__media img, .aivs--studio .aivs-toolprev__media video { width: 100%; height: 100%; max-height: 380px; object-fit: contain; display: block; } .aivs--studio .aivs-toolprev--voice .aivs-toolprev__media { aspect-ratio: auto; padding: 18px 12px; background: linear-gradient(150deg, #1aa47b, #0d4872); } .aivs--studio .aivs-toolprev--voice audio { width: 100%; height: 40px; } .aivs--studio .aivs-toolprev__mark { position: absolute; max-width: 60%; color: #fff; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); pointer-events: none; white-space: nowrap; } .aivs--studio .aivs-toolprev__mark img { width: 100%; display: block; } .aivs--studio .aivs-toolprev__mark--tl { top: 0; left: 0; } .aivs--studio .aivs-toolprev__mark--tr { top: 0; right: 0; } .aivs--studio .aivs-toolprev__mark--bl { bottom: 0; left: 0; } .aivs--studio .aivs-toolprev__mark--br { bottom: 0; right: 0; } .aivs--studio .aivs-toolprev__mark--c { top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0 !important; } .aivs--studio .aivs-tools__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; } .aivs--studio .aivs-tools__row > div { display: grid; gap: 6px; } .aivs--studio .aivs-tools__num input { max-width: 160px; } /* v1.52.0 ปากตรงเสียงใหม่: the clip's frame with each face found - tap who speaks (numbered in the order they first speak) */ .aivs--studio .aivs-lipfaces { display: grid; gap: 6px; } .aivs--studio .aivs-lipfaces__wrap { display: flex; justify-content: center; padding: 6px; border-radius: 16px; background: #0e2535; } .aivs--studio .aivs-lipfaces__stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; } .aivs--studio .aivs-lipfaces__stage img { display: block; max-width: 100%; max-height: 380px; width: auto; height: auto; border-radius: 10px; } .aivs--studio .aivs-lipface { position: absolute; min-width: 28px; min-height: 28px; padding: 0; border: 2px dashed rgba(255, 255, 255, .9); border-radius: 10px; background: rgba(13, 39, 58, .18); cursor: pointer; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); transition: background .15s, border-color .15s; } .aivs--studio .aivs-lipface:hover:not(:disabled) { background: rgba(80, 237, 190, .18); } .aivs--studio .aivs-lipface.is-on { border-style: solid; border-color: var(--st-green); background: rgba(80, 237, 190, .12); } .aivs--studio .aivs-lipface:disabled { cursor: default; opacity: 1; border-style: solid; border-color: var(--st-green); } .aivs--studio .aivs-lipface span { position: absolute; top: -11px; left: -11px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--st-green-ink); color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; } .aivs--studio .aivs-lipface:not(.is-on):not(:disabled) span { background: rgba(13, 39, 58, .85); } .aivs--studio .aivs-lipfaces__ask { color: #e6ce95; font-weight: 600; } .aivs--studio .aivs-lipmodels button:disabled { opacity: .45; cursor: not-allowed; } .aivs--studio .aivs-lipcq { container-type: inline-size; } .aivs--studio .aivs-lipmodels, .aivs--studio .aivs-lipfits .aivs-seg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; } .aivs--studio .aivs-lipmodels button, .aivs--studio .aivs-lipfits .aivs-seg button { width: 100%; white-space: normal; text-align: center; } @container (min-width: 600px) { .aivs--studio .aivs-lipmodels { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container (min-width: 520px) { .aivs--studio .aivs-lipfits .aivs-seg { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; } } /* v1.52.0 (owner 30 Oct 20:43, the phone: "มันหลุดกรอบ" - 29 shots ran the shot-number bar off the screen and the page zoomed out): the bar is never wider than its box - when the shots do not fit it scrolls sideways inside itself; the total time is in the heading above */ .aivs--studio .aivs-timeline { max-width: 100%; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .aivs--studio .aivs-timeline .aivs-tl { flex-shrink: 0; min-width: 24px; } .aivs--studio .aivs-timeline__total { display: none; } /* v1.52.0 ตัวจับเวลา: the job's timer line (how long, when it last moved, maybe stuck) and every count-up beside a wait */ .aivs--studio .aivs-jobtimer { display: grid; gap: 6px; margin: 8px 0 0; font-size: 13px; color: var(--st-muted); } .aivs--studio .aivs-jobtimer__t, .aivs--studio .aivs-elapsed { font-variant-numeric: tabular-nums; } .aivs--studio .aivs-jobtimer__note { margin: 0; padding: 8px 10px; border-left: 3px solid #e6ce95; border-radius: 8px; background: rgba(230, 198, 101, .1); color: #f1f8fd; overflow-wrap: anywhere; } .aivs--studio .aivs-jobtimer__note.is-stuck { border-left-color: #f08a8a; background: rgba(240, 110, 110, .12); } .aivs--studio .aivs-jobtimer__note.is-wait { border-left-color: rgba(140, 195, 230, .7); background: rgba(80, 150, 220, .12); } .aivs--studio .aivs-elapsed { display: block; margin-top: 2px; font-size: 11.5px; color: var(--st-muted); } .aivs--studio .aivs-libdraw__wait .aivs-elapsed, .aivs--studio .aivs-libfill .aivs-elapsed { display: inline; margin: 0 0 0 4px; } .aivs--studio .aivs-btn .aivs-elapsed { display: inline; margin: 0; font-size: inherit; color: inherit; opacity: .85; } /* the save button's seconds */ /* v1.52.0 สร้างใหม่หลายช็อต: the quick picks, a tick on every card, the bar that stays at the bottom while picking */ .aivs--studio .aivs-shots__pickbtn { margin-left: auto; } .aivs--studio .aivs-pickchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; } .aivs--studio .aivs-pickchips__t { font-size: 13px; color: var(--st-ink2); margin-right: 4px; } .aivs--studio .aivs-shot.is-pickable { position: relative; } .aivs--studio .aivs-shot.is-picked { box-shadow: inset 0 0 0 2px var(--st-green), 0 8px 18px -12px rgba(16, 87, 137, .7); } .aivs--studio .aivs-shotpick { position: absolute; top: 6px; left: 6px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(9, 24, 36, .82); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); } .aivs--studio .aivs-shotpick input { width: 18px; height: 18px; margin: 0; accent-color: var(--st-green2); cursor: pointer; } .aivs--studio .aivs-shot.is-picked .aivs-shotpick { background: var(--st-green2); } .aivs--studio .aivs-pickbar { position: sticky; bottom: 0; z-index: 6; display: grid; gap: 8px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(80, 237, 190, .35); background: rgba(9, 24, 36, .96); box-shadow: 0 -10px 24px -14px rgba(0, 0, 0, .7); } .aivs--studio .aivs-pickbar__n { margin: 0; overflow-wrap: anywhere; } .aivs--studio .aivs-pickbar__opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .aivs--studio .aivs-pickbar .aivs-fine { margin: 0; } .aivs--studio .aivs-pickbar__go { justify-self: start; } @media (max-width: 1100px) { .aivs--studio .aivs-pickbar { bottom: calc(78px + env(safe-area-inset-bottom)); } } @media (max-width: 600px) { /* the phone: the bar short (the words below it in the confirm box), the two ways side by side */ .aivs--studio .aivs-pickbar { gap: 6px; padding: 10px 12px; } .aivs--studio .aivs-pickbar > .aivs-fine { display: none; } .aivs--studio .aivs-pickbar .aivs-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; } .aivs--studio .aivs-pickbar .aivs-seg button { padding: 7px 8px; font-size: 13px; white-space: normal; } .aivs--studio .aivs-pickbar__fix span { font-size: 13px; } .aivs--studio .aivs-pickbar__go { justify-self: stretch; } } /* v1.54.1 ทำด้วยอะไร: the ? on a creation's card, a video's card and its page - its box sits on the page (fixed, beside the ?) */ .aivs--studio .aivs-madewith { position: relative; z-index: 2; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--g-edge); background: rgba(140, 195, 230, .1); color: inherit; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; } .aivs--studio .aivs-madewith:hover, .aivs--studio .aivs-madewith[aria-expanded="true"] { background: rgba(63, 230, 180, .16); border-color: rgba(95, 240, 197, .6); } .aivs--studio .aivs-madewith:focus-visible { outline: 2px solid rgba(95, 240, 197, .9); outline-offset: 2px; } .aivs--studio .aivs-madewith__q { font-weight: 700; } .aivs--studio .aivs-madewith--label { height: 30px; padding: 0 12px; } .aivs--studio .aivs-gen__top .aivs-madewith { margin-left: auto; min-width: 26px; height: 26px; } .aivs--studio .aivs-cardwrap { position: relative; display: flex; min-width: 0; } .aivs--studio .aivs-cardwrap > .aivs-card { flex: 1 1 auto; min-width: 0; } .aivs--studio .aivs-cardwrap > .aivs-madewith { position: absolute; top: 16px; right: 16px; background: rgba(9, 24, 36, .82); transition: transform .2s ease; } .aivs--studio .aivs-cardwrap:hover > .aivs-card, .aivs--studio .aivs-cardwrap:hover > .aivs-madewith { transform: translateY(-3px); } body.aivs-studio .aivs-madewith__pop { position: fixed; z-index: 1000; box-sizing: border-box; max-height: min(70vh, 520px); overflow: auto; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(140, 195, 230, .35); background: #0a1c2a; color: var(--st-ink, #f1f8fd); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7); font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; } body.aivs-studio .aivs-madewith__t { display: block; font-size: 14.5px; } body.aivs-studio .aivs-madewith__h { margin: 8px 0 2px; font-size: 12px; color: var(--st-muted, #aabac6); } body.aivs-studio .aivs-madewith__list { margin: 0; padding-left: 18px; } body.aivs-studio .aivs-madewith__list li { margin: 2px 0; } body.aivs-studio .aivs-madewith__note { margin: 8px 0 0; font-size: 12px; color: #e6ce95; } body.aivs-studio .aivs-madewith__pop .aivs-muted { color: var(--st-muted, #aabac6); } @media (prefers-reduced-motion: reduce) { .aivs--studio .aivs-cardwrap:hover > .aivs-card, .aivs--studio .aivs-cardwrap:hover > .aivs-madewith { transform: none; } .aivs--studio .aivs-cardwrap > .aivs-madewith { transition: none; } } .aivs--studio .aivs-tools__slider .aivs-label { display: flex; justify-content: space-between; gap: 8px; } .aivs--studio .aivs-tools__slider input[type=range] { width: 100%; accent-color: var(--st-green-ink); } .aivs--studio .aivs-tools__val { font-weight: 600; color: var(--st-green-deep); font-variant-numeric: tabular-nums; } .aivs--studio .aivs-tools__err { color: #f5c6c2; font-size: 13px; line-height: 1.45; } .aivs--studio .aivs-gen--png .aivs-gen__media { background: repeating-conic-gradient(rgba(20, 42, 60, .62) 0 25%, rgba(20, 42, 60, .62) 0 50%) 0 0 / 18px 18px; } @container aivs (min-width: 1001px) { .aivs--studio .aivs-tools { grid-template-columns: minmax(380px, 470px) minmax(0, 1fr); gap: 28px; } } @media (max-width: 760px) { .aivs--studio .aivs-toolgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aivs--studio .aivs-toolpick { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 260px; } } /* v1.20 voice design ("ออกแบบเสียงด้วย AI") in the character editor + Seed Audio voices in quick create */ .aivs--studio .aivs-vdesign { display: grid; gap: 8px; padding: 12px; border-radius: 14px; border: 1px dashed rgba(20, 154, 114, .45); background: rgba(105, 211, 179, .105); min-width: 0; } .aivs--studio .aivs-vdesign .aivs-seg { justify-self: start; } .aivs--studio .aivs-vdesign__go { justify-self: start; } .aivs--studio .aivs-vdesign__list { display: grid; gap: 8px; } .aivs--studio .aivs-vdesign__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; border: 1px solid var(--st-line); background: #0d2030; min-width: 0; } .aivs--studio .aivs-vdesign__item audio { width: 100%; min-width: 0; height: 36px; } .aivs--studio .aivs-seedvoices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } @media (max-width: 640px) { .aivs--studio .aivs-vdesign__item { grid-template-columns: minmax(0, 1fr) auto; } .aivs--studio .aivs-vdesign__item > span { grid-column: 1 / -1; } .aivs--studio .aivs-seedvoices { grid-template-columns: minmax(0, 1fr); } } /* ---------------------------------------------------------------- v1.23 podcasts (#podcast) */ .aivs--studio .aivs-podcard { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border-radius: 20px; text-decoration: none; color: var(--aivs-ink); background: var(--aivs-paper); border: 1px solid var(--aivs-line); box-shadow: var(--g-shadow); } .aivs--studio .aivs-podcard:hover, .aivs--studio .aivs-podcard:focus-visible { transform: translateY(-2px); } .aivs--studio .aivs-podcard__cover { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; background: var(--aivs-mat); display: block; } .aivs--studio .aivs-podcard__text { display: grid; gap: 2px; min-width: 0; } .aivs--studio .aivs-podcard__text strong { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; } .aivs--studio .aivs-podcard__text small { color: var(--aivs-muted); } .aivs--studio .aivs-podcard__live { color: var(--aivs-done) !important; font-weight: 600; } .aivs--studio .aivs-podhead { align-items: center; } .aivs--studio .aivs-podhead__id { display: flex; gap: 12px; align-items: center; min-width: 0; } .aivs--studio .aivs-podhead__cover { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; } .aivs--studio .aivs-pod-busy { display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin: 10px 0; border-radius: 16px; background: rgba(84, 232, 152, .133); border: 1px solid rgba(20, 154, 114, .3); } .aivs--studio .aivs-pod-busy > div { display: grid; gap: 4px; flex: 1; min-width: 0; } .aivs--studio .aivs-pod-busy small { color: var(--aivs-muted); } .aivs--studio .aivs-pod-bar { display: block; height: 6px; border-radius: 999px; background: rgba(13, 39, 58, .1); overflow: hidden; } .aivs--studio .aivs-pod-bar > span { display: block; height: 100%; background: var(--aivs-primary); transition: width .4s; } .aivs--studio .aivs-pod-ask { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(230, 202, 101, .14); border: 1px solid rgba(180, 83, 9, .35); } .aivs--studio .aivs-pod-ask p { margin: 2px 0 0; } .aivs--studio .aivs-pod-ask__cost { font-weight: 600; color: var(--aivs-work); } .aivs--studio .aivs-pod-warn { color: var(--aivs-work); } .aivs--studio .aivs-pod-err { color: var(--aivs-fail) !important; } .aivs--studio .aivs-podeps { display: grid; gap: 8px; } .aivs--studio .aivs-podep { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: baseline; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: var(--aivs-ink); background: var(--aivs-paper); border: 1px solid var(--aivs-line); } .aivs--studio .aivs-podep small { grid-column: 2; color: var(--aivs-muted); } .aivs--studio .aivs-podep.is-busy { box-shadow: inset 4px 0 0 var(--aivs-wait); } .aivs--studio .aivs-podep__n { font-size: 12px; font-weight: 700; color: var(--aivs-primary-ink); white-space: nowrap; } .aivs--studio .aivs-pod-hosts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .aivs--studio .aivs-pod-host { display: grid; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--aivs-line); background: rgba(13, 32, 48, .6); } .aivs--studio .aivs-pod-art__row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; } .aivs--studio .aivs-pod-art__cover { width: min(280px, 100%); aspect-ratio: 1; border-radius: 16px; object-fit: cover; background: var(--aivs-mat); box-shadow: var(--g-shadow); } .aivs--studio .aivs-pod-art__acts { display: grid; gap: 8px; align-content: start; justify-items: start; flex: 1; min-width: 220px; } .aivs--studio .aivs-pod-musics { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 8px 0; } .aivs--studio .aivs-pod-music { display: grid; gap: 6px; padding: 12px; border-radius: 14px; border: 1px solid var(--aivs-line); background: rgba(13, 32, 48, .6); } .aivs--studio .aivs-pod-music audio, .aivs--studio .aivs-pod-final audio, .aivs--studio .aivs-podch__audio { width: 100%; } .aivs--studio .aivs-pod-feedurl { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; margin: 10px 0; } .aivs--studio .aivs-pod-steps { margin: 8px 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; } .aivs--studio .aivs-pod-publist { margin: 0; padding-left: 18px; } .aivs--studio .aivs-podep-page { display: grid; gap: 14px; } .aivs--studio .aivs-podstep { display: grid; gap: 10px; padding: 16px; border-radius: 20px; } .aivs--studio .aivs-podstep > h3 { display: flex; gap: 10px; align-items: center; } .aivs--studio .aivs-podstep__n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--aivs-primary); color: #fff; font-size: 13px; flex: none; } .aivs--studio .aivs-podchs { display: grid; gap: 10px; } .aivs--studio .aivs-podch { display: grid; gap: 6px; padding: 10px; border-radius: 14px; border: 1px solid var(--aivs-line); background: rgba(13, 32, 48, .6); } .aivs--studio .aivs-podch__head { display: grid; grid-template-columns: auto minmax(0, 1fr) 72px auto auto auto; gap: 6px; align-items: center; } .aivs--studio .aivs-podch__n { font-weight: 700; color: var(--aivs-primary-ink); min-width: 18px; text-align: center; } .aivs--studio .aivs-podcards { display: grid; gap: 12px; } .aivs--studio .aivs-podcard2 { display: grid; gap: 8px; padding: 12px; border-radius: 16px; border: 1px solid var(--aivs-line); background: rgba(13, 32, 48, .7); } .aivs--studio .aivs-podcard2__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .aivs--studio .aivs-podchip { font-size: 12px; padding: 2px 10px; border-radius: 999px; font-weight: 600; background: rgba(138, 152, 143, .15); color: var(--aivs-idle); } .aivs--studio .aivs-podchip--done { background: rgba(21, 128, 61, .12); color: var(--aivs-done); } .aivs--studio .aivs-podchip--work { background: rgba(180, 83, 9, .12); color: var(--aivs-work); } .aivs--studio .aivs-podchip--wait { background: rgba(109, 74, 224, .12); color: var(--aivs-wait); } .aivs--studio .aivs-podlines > summary { cursor: pointer; font-weight: 600; margin-bottom: 6px; } .aivs--studio .aivs-podline { display: grid; grid-template-columns: 110px minmax(0, 1fr) 150px auto; gap: 6px; align-items: start; padding: 6px 0; border-top: 1px solid var(--aivs-line); } .aivs--studio .aivs-podline--h2 .aivs-podline__text { background: rgba(76, 142, 240, .126); } .aivs--studio .aivs-podline__host { font-weight: 600; font-size: 13px; } .aivs--studio .aivs-podline__text { min-height: 40px; resize: vertical; line-height: 1.5; } .aivs--studio .aivs-podline__style { font-size: 13px; } .aivs--studio .aivs-podline__acts { display: flex; gap: 4px; flex-wrap: wrap; } .aivs--studio .aivs-pod-final { display: grid; gap: 8px; } .aivs--studio .aivs-pod-chaps { margin: 0; padding-left: 20px; font-size: 14px; } .aivs--studio .aivs-pod-chaps code { font-size: 12px; color: var(--aivs-muted); } .aivs--studio .aivs-pod-videos { display: grid; gap: 12px; border-top: 1px solid var(--aivs-line); padding-top: 12px; } .aivs--studio .aivs-pod-videos h4 { margin: 0; } .aivs--studio .aivs-pod-video { display: grid; gap: 8px; } .aivs--studio .aivs-pod-video video { width: min(640px, 100%); border-radius: 12px; background: #000; } .aivs--studio .aivs-pod-shorts { display: flex; flex-wrap: wrap; gap: 12px; } .aivs--studio .aivs-pod-short { display: grid; gap: 4px; width: 180px; } .aivs--studio .aivs-pod-short video { width: 180px; aspect-ratio: 9 / 16; border-radius: 12px; background: #000; } /* v1.27 hosts' pictures and colours, the publish kit */ .aivs--studio .aivs-pod-hostpic { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--aivs-line); } .aivs--studio .aivs-pod-hostpic__row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .aivs--studio .aivs-pod-hostpic__ring { width: 76px; height: 76px; border-radius: 50%; padding: 4px; box-sizing: border-box; flex: none; display: block; } .aivs--studio .aivs-pod-hostpic__ring img, .aivs--studio .aivs-pod-hostpic__ph { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #14242f; color: #fff; font-size: 26px; font-weight: 700; } .aivs--studio .aivs-pod-hostpic__acts { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; } .aivs--studio .aivs-pod-hostpic__look { font-size: 13px; } .aivs--studio .aivs-pod-hostpic__pick { display: flex; flex-wrap: wrap; gap: 8px; max-height: 220px; overflow: auto; padding: 4px; } .aivs--studio .aivs-pod-hostpic__char { display: grid; gap: 4px; justify-items: center; width: 84px; padding: 6px; border-radius: 12px; border: 1px solid var(--aivs-line); background: #0d2030; cursor: pointer; font: inherit; font-size: 12px; min-height: 44px; } .aivs--studio .aivs-pod-hostpic__char img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; } .aivs--studio .aivs-pod-hostpic__char:hover, .aivs--studio .aivs-pod-hostpic__char:focus-visible { border-color: var(--aivs-primary); } .aivs--studio .aivs-pod-colors { display: flex; flex-wrap: wrap; gap: 8px; } .aivs--studio .aivs-pod-color { width: 32px; height: 32px; min-height: 32px; border-radius: 50%; border: 3px solid rgba(140, 195, 230, .156); box-shadow: 0 0 0 1px var(--aivs-line); cursor: pointer; padding: 0; } .aivs--studio .aivs-pod-color.is-on { box-shadow: 0 0 0 3px var(--aivs-primary-ink); } .aivs--studio .aivs-pod-links { align-items: end; } .aivs--studio .aivs-pubkit { display: grid; gap: 12px; } .aivs--studio .aivs-pubkit__tabs { display: flex; flex-wrap: wrap; gap: 8px; } .aivs--studio .aivs-pubkit__tab { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--aivs-line); background: #0d2030; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; color: var(--aivs-ink, #e5ecf1); } .aivs--studio .aivs-pubkit__tab.is-on { background: var(--aivs-primary); border-color: var(--aivs-primary); color: #fff; } .aivs--studio .aivs-pubkit__dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 999px; background: rgba(230, 194, 101, .14); color: #f0cda5; font-size: 11px; padding: 0 4px; } .aivs--studio .aivs-pubkit__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; } .aivs--studio .aivs-pubkit__main { display: grid; gap: 12px; min-width: 0; } .aivs--studio .aivs-pubkit__field { display: grid; gap: 6px; } .aivs--studio .aivs-pubkit__field textarea { line-height: 1.55; resize: vertical; } .aivs--studio .aivs-pubkit__fhead { display: flex; gap: 8px; align-items: center; } .aivs--studio .aivs-pubkit__fhead strong { flex: 1; font-size: 14px; } .aivs--studio .aivs-pubkit__count { color: var(--aivs-muted); font-variant-numeric: tabular-nums; } .aivs--studio .aivs-pubkit__count.is-over { color: var(--aivs-fail); font-weight: 700; } .aivs--studio .aivs-pubkit__side { display: grid; gap: 12px; } .aivs--studio .aivs-pubkit__box { display: grid; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--aivs-line); background: rgba(13, 32, 48, .7); } .aivs--studio .aivs-pubkit__checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; } .aivs--studio .aivs-pubkit__check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; line-height: 1.45; } .aivs--studio .aivs-pubkit__check > span:first-child { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; background: rgba(104, 212, 180, .14); color: #86ebcd; } .aivs--studio .aivs-pubkit__check.is-warn > span:first-child { background: rgba(230, 194, 101, .14); color: #f0cda5; } .aivs--studio .aivs-pubkit__check.is-bad > span:first-child { background: rgba(240, 76, 76, .14); color: #f7d1dc; } .aivs--studio .aivs-pubkit__thumb { width: 100%; border-radius: 10px; display: block; background: #0e1921; } .aivs--studio .aivs-pubkit__thumb.is-tall { width: 60%; justify-self: center; } @media (max-width: 860px) { .aivs--studio .aivs-pubkit__grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .aivs--studio .aivs-head .aivs-tabs a[href="#podcast"] { display: none; } .aivs--studio .aivs-podline { grid-template-columns: minmax(0, 1fr) auto; } .aivs--studio .aivs-podline__text { grid-column: 1 / -1; grid-row: 2; } .aivs--studio .aivs-podline__style { grid-column: 1 / -1; grid-row: 3; } .aivs--studio .aivs-podch__head { grid-template-columns: auto minmax(0, 1fr) 60px auto; } .aivs--studio .aivs-podch__head > .aivs-fine { display: none; } .aivs--studio .aivs-pod-feedurl { grid-template-columns: 1fr 1fr; } .aivs--studio .aivs-pod-feedurl input { grid-column: 1 / -1; } } /* ---------------------------------------------------------------- v1.28 a podcast's sound (the show's choice, the episode's sounds, a line's effect) */ .aivs--studio .aivs-pod-sound { display: flex; flex-direction: column; gap: 10px; } .aivs--studio .aivs-pod-sound--ep { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--st-line2); background: rgba(13, 32, 48, .6); margin-bottom: 12px; } .aivs--studio .aivs-pod-sound__tip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(230, 195, 101, .14); color: #f5dcbf; font-size: 14px; } .aivs--studio .aivs-pod-sound__modes { align-self: flex-start; } .aivs--studio .aivs-pod-sound__row { display: flex; gap: 8px; align-items: center; } .aivs--studio .aivs-pod-sound__row .aivs-input { flex: 1; min-width: 0; } .aivs--studio .aivs-pod-sound__item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; } .aivs--studio .aivs-pod-sound audio { height: 36px; max-width: 100%; } .aivs--studio .aivs-pod-sound__fx { display: flex; flex-direction: column; gap: 6px; font-size: 14px; } .aivs--studio .aivs-pod-sound__fx ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; } .aivs--studio .aivs-pod-sound__fx li > span { margin-right: 10px; color: var(--st-ink2); } .aivs--studio .aivs-pod-sound__again { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 2px; vertical-align: middle; } .aivs--studio .aivs-pod-sound__fx li > .aivs-pod-sound__again { margin-right: 0; } .aivs--studio .aivs-pod-res { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; } .aivs--studio .aivs-pod-res .aivs-fine { flex-basis: 100%; margin: 0; } .aivs--studio .aivs-pod-video > strong .aivs-tag { margin-left: 8px; vertical-align: middle; } .aivs--studio .aivs-podline__sfx { grid-column: 2 / 4; font-size: 13.5px; color: var(--st-ink2); background: rgba(13, 32, 48, .5); } .aivs--studio .aivs-podline__sfx.has-sfx { background: rgba(230, 195, 101, .14); border-color: #f0dba3; color: #f5dcbf; } @media (max-width: 760px) { .aivs--studio .aivs-podline__sfx { grid-column: 1 / -1; grid-row: 4; } .aivs--studio .aivs-pod-sound__row { flex-wrap: wrap; } } /* ---------------------------------------------------------------- v1.28 ผู้กำกับพาทำ: the spotlight, the guide's card (a sheet on a phone), its button, the first page */ body.aivs-studio .aivs-gspot { position: fixed; z-index: 100003; pointer-events: none; box-sizing: border-box; border-radius: 14px; border: 3px solid #e5ad2a; box-shadow: 0 0 0 6px rgba(229, 173, 42, .25), 0 0 0 200vmax rgba(0, 0, 0, .05); transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease, box-shadow .5s ease; } body.aivs-studio .aivs-gspot.is-dim { box-shadow: 0 0 0 6px rgba(229, 173, 42, .25), 0 0 0 200vmax rgba(0, 0, 0, .6); } body.aivs-studio .aivs-gspot[hidden] { display: none; } body.aivs-studio .aivs-gspot__tip { position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%); width: max-content; max-width: min(300px, 80vw); padding: 8px 12px; border-radius: 12px; background: #ecc142; color: #14242f; font-size: 14px; font-weight: 650; line-height: 1.4; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .59); } body.aivs-studio .aivs-gspot__tip::before { content: ""; position: absolute; left: 50%; top: -8px; margin-left: -8px; border: 8px solid transparent; border-top: 0; border-bottom-color: #ecc142; } body.aivs-studio .aivs-gspot__tip.is-above { top: auto; bottom: calc(100% + 12px); } body.aivs-studio .aivs-gspot__tip.is-above::before { top: auto; bottom: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #ecc142; } body.aivs-studio .aivs-guide { position: fixed; z-index: 100004; right: 20px; bottom: 20px; width: 360px; max-height: calc(100vh - 40px); overflow: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 16px; border-radius: 20px; display: flex; flex-direction: column; gap: 12px; background: rgba(13, 32, 48, .97); border: 1px solid var(--g-edge); box-shadow: var(--g-shadow-lg); color: var(--st-ink); font-size: 15px; line-height: 1.55; } body.aivs-studio .aivs-guide[hidden] { display: none; } body.aivs-studio .aivs-guide.is-min { width: auto; max-width: min(440px, calc(100vw - 40px)); padding: 0; border-radius: 999px; overflow: hidden; } body.aivs-studio .aivs-guide__bar { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 0 18px 0 8px; border: 0; border-radius: 999px; background: #14242f; color: #fff; font: inherit; font-size: 14px; text-align: left; cursor: pointer; } body.aivs-studio .aivs-guide__bartext { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.aivs-studio .aivs-guide__barmore { font-weight: 650; color: #a7f3dc; } body.aivs-studio .aivs-guide__head { display: flex; align-items: center; gap: 10px; } body.aivs-studio .aivs-guide__ico, body.aivs-studio .aivs-gwelcome__ico { width: 38px; height: 38px; flex: none; border-radius: 999px; background: var(--st-green-ink); color: #fff; display: flex; align-items: center; justify-content: center; } body.aivs-studio .aivs-guide__ico .aivs-ico, body.aivs-studio .aivs-gwelcome__ico .aivs-ico { width: 21px; height: 21px; } body.aivs-studio .aivs-guide__title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } body.aivs-studio .aivs-guide__title small { color: var(--st-muted); font-size: 13px; } body.aivs-studio .aivs-guide__x { width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid var(--st-line2); background: #0d2030; color: var(--st-muted); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; } body.aivs-studio .aivs-guide__x:hover { color: var(--st-ink); border-color: var(--st-green2); } body.aivs-studio .aivs-guide__prog { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; font-weight: 700; } body.aivs-studio .aivs-guide__track { flex-basis: 100%; height: 6px; border-radius: 999px; background: rgba(20, 42, 60, .62); overflow: hidden; } body.aivs-studio .aivs-guide__track > span { display: block; height: 100%; border-radius: inherit; background: var(--st-green2); transition: width .3s ease; } body.aivs-studio .aivs-gtag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.6; white-space: nowrap; } body.aivs-studio .aivs-gtag--free { background: rgba(104, 212, 180, .14); color: #86ebcd; } body.aivs-studio .aivs-gtag--paid { background: rgba(230, 194, 101, .14); color: #f0cda5; } body.aivs-studio .aivs-gtag--google { background: rgba(85, 140, 231, .14); color: #d6def8; } body.aivs-studio .aivs-guide__msg { padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: rgba(20, 42, 60, .62); font-size: 15px; line-height: 1.6; } body.aivs-studio .aivs-guide__here { margin: 0; font-size: 14px; color: var(--st-ink2); } body.aivs-studio .aivs-guide__warn { margin: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid #f0dba3; background: rgba(230, 195, 101, .14); color: #f3d6b6; font-size: 14px; } body.aivs-studio .aivs-guide__acts { display: flex; flex-direction: column; gap: 8px; } body.aivs-studio .aivs-guide__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px; } body.aivs-studio .aivs-guide__confirm { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; border: 1px solid #f0dba3; background: rgba(230, 195, 101, .14); } body.aivs-studio .aivs-guide__confirm p { margin: 0; font-size: 14px; } body.aivs-studio .aivs-guide__row { display: flex; gap: 8px; } body.aivs-studio .aivs-guide__row .aivs-gbtn { flex: 1 1 0; } body.aivs-studio .aivs-guide__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } body.aivs-studio .aivs-guide__list li { display: flex; align-items: center; gap: 8px; } body.aivs-studio .aivs-guide__list li button { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--st-ink2); font: inherit; font-size: 14px; text-align: left; cursor: pointer; } body.aivs-studio .aivs-guide__list li button:hover { background: rgba(37, 194, 147, .08); } body.aivs-studio .aivs-guide__list li.is-now button { background: rgba(105, 211, 147, .14); color: var(--st-ink); font-weight: 700; } body.aivs-studio .aivs-guide__n { width: 24px; height: 24px; flex: none; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(20, 42, 60, .62); color: var(--st-ink2); font-size: 12px; font-weight: 700; } body.aivs-studio .aivs-guide__list li.is-done .aivs-guide__n { background: var(--st-green-ink); color: #fff; } body.aivs-studio .aivs-guide__list li.is-now .aivs-guide__n { background: #14242f; color: #fff; } body.aivs-studio .aivs-guide__ask { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--st-line); } body.aivs-studio .aivs-guide__askrow { display: flex; gap: 8px; } body.aivs-studio .aivs-guide__askin { flex: 1; min-width: 0; min-height: 48px; } body.aivs-studio .aivs-guide__qa { display: flex; flex-direction: column; gap: 6px; } body.aivs-studio .aivs-guide__q { align-self: flex-end; max-width: 90%; margin: 0; padding: 8px 12px; border-radius: 16px 16px 4px 16px; background: #14242f; color: #fff; font-size: 14px; } body.aivs-studio .aivs-guide__a { max-width: 95%; margin: 0; padding: 8px 12px; border-radius: 4px 16px 16px 16px; background: rgba(20, 42, 60, .62); font-size: 14px; } body.aivs-studio .aivs-guide__a.is-busy { color: var(--st-muted); } body.aivs-studio .aivs-guide__stop { align-self: center; } body.aivs-studio .aivs-guide .aivs-fine { margin: 0; color: var(--st-muted); font-size: 13px; } /* the guide's own buttons follow the button rules: 48 px, one green main button, a paid one says its price */ body.aivs-studio .aivs-gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; min-height: 48px; padding: 0 16px; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 650; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; } body.aivs-studio .aivs-gbtn--pri { border: 0; background: var(--st-green-ink); color: #fff; box-shadow: 0 8px 18px -10px rgba(12, 71, 114, .9); } body.aivs-studio .aivs-gbtn--pri:hover { background: var(--st-green-deep); } body.aivs-studio .aivs-gbtn--sec { border: 1px solid var(--st-green-ink); background: #0d2030; color: var(--st-green-ink); } body.aivs-studio .aivs-gbtn--sec:hover { background: rgba(20, 42, 60, .62); } body.aivs-studio .aivs-gbtn--quiet { min-height: 44px; border: 0; background: transparent; color: var(--st-muted); font-weight: 500; } body.aivs-studio .aivs-gbtn--link { min-height: 44px; padding: 0 6px; border: 0; background: transparent; color: var(--st-ink2); font-size: 14px; font-weight: 500; } body.aivs-studio .aivs-gbtn--link:hover, body.aivs-studio .aivs-gbtn--quiet:hover { color: var(--st-green-deep); } body.aivs-studio .aivs-gbtn[disabled] { opacity: .45; cursor: default; } body.aivs-studio .aivs-gbtn:focus-visible, body.aivs-studio .aivs-guide__x:focus-visible, body.aivs-studio .aivs-gfab:focus-visible, body.aivs-studio .aivs-guide__bar:focus-visible, body.aivs-studio .aivs-guide__list button:focus-visible { outline: 2px solid var(--st-green2); outline-offset: 2px; } body.aivs-studio .aivs-gfab { position: fixed; z-index: 100004; right: 24px; bottom: 24px; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 20px 0 7px; border: 0; border-radius: 999px; background: #14242f; color: #fff; font: inherit; font-size: 15px; font-weight: 650; box-shadow: 0 8px 24px rgba(0, 0, 0, .6); cursor: pointer; } body.aivs-studio .aivs-gfab[hidden] { display: none; } body.aivs-studio .aivs-gfab__ico { width: 38px; height: 38px; border-radius: 999px; background: var(--st-green-ink); display: flex; align-items: center; justify-content: center; } body.aivs-studio .aivs-gfab__ico .aivs-ico { width: 21px; height: 21px; } body.aivs-studio .aivs-gfab:hover { background: #1b3547; } /* a wide screen keeps the page beside the guide's card; a narrower one has the card low on the right, the page scrolls above it */ @media (min-width: 1280px) { body.aivs-studio.aivs-guide-on #aivs-app.aivs--studio { padding-right: 400px; } } @media (min-width: 761px) and (max-width: 1279px) { body.aivs-studio .aivs-guide { width: 400px; max-height: 46vh; } body.aivs-studio.aivs-guide-on #aivs-app.aivs--studio { padding-bottom: 52vh; } } /* the first visit to the new-video page */ .aivs--studio .aivs-gwelcome { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin: 0 0 18px; padding: 12px 14px; border-radius: 20px; background: #14242f; color: #fff; } .aivs--studio .aivs-gwelcome__text { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; } .aivs--studio .aivs-gwelcome__text small { color: #cfe2d6; font-size: 13.5px; } .aivs--studio .aivs-gwelcome__acts { display: flex; flex-wrap: wrap; gap: 8px; } body.aivs-studio .aivs-gwelcome .aivs-gbtn--pri { background: var(--st-green); color: #d1f7ec; } body.aivs-studio .aivs-gwelcome .aivs-gbtn--sec { background: transparent; border-color: rgba(140, 195, 230, .078); color: #fff; } body.aivs-studio .aivs-gwelcome .aivs-gbtn--quiet { color: #cfe2d6; } /* #start: "วันนี้อยากทำอะไรดีครับ?" */ .aivs--studio .aivs-start { display: flex; flex-direction: column; gap: 18px; } .aivs--studio .aivs-start__hello { display: flex; flex-direction: column; gap: 14px; } .aivs--studio .aivs-start__who { display: flex; align-items: center; gap: 14px; } .aivs--studio .aivs-start__who h2 { margin: 0; font-size: 24px; } .aivs--studio .aivs-start__who .aivs-fine { margin: 2px 0 0; } .aivs--studio .aivs-start__face { width: 54px; height: 54px; flex: none; border-radius: 999px; background: var(--st-green-ink); color: #fff; display: flex; align-items: center; justify-content: center; } .aivs--studio .aivs-start__face .aivs-ico { width: 28px; height: 28px; } .aivs--studio .aivs-start__ask { display: flex; gap: 10px; } .aivs--studio .aivs-start__in { flex: 1; min-width: 0; min-height: 52px; font-size: 16px; } .aivs--studio .aivs-start__ask .aivs-btn { min-height: 52px; } .aivs--studio .aivs-start__answer { margin: 0; padding: 12px 14px; border-radius: 16px; background: rgba(20, 42, 60, .62); display: flex; flex-direction: column; gap: 10px; } .aivs--studio .aivs-start__answer p { margin: 0; } .aivs--studio .aivs-start__answer.is-busy { color: var(--st-muted); } .aivs--studio .aivs-start__h { margin: 4px 0 0; font-size: 18px; } .aivs--studio .aivs-start__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .aivs--studio .aivs-start__card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 20px; background: var(--g-fill); border: 1px solid var(--g-edge); box-shadow: var(--g-shadow); } .aivs--studio .aivs-start__ico { width: 44px; height: 44px; border-radius: 14px; background: var(--st-tint2); color: var(--st-green-deep); display: flex; align-items: center; justify-content: center; } .aivs--studio .aivs-start__name { font-size: 17px; } .aivs--studio .aivs-start__blurb { flex: 1; margin: 0; font-size: 14px; color: var(--st-ink2); } .aivs--studio .aivs-start__meta { font-size: 13px; color: var(--st-muted); } .aivs--studio .aivs-start__go { margin-top: 6px; } .aivs--studio .aivs-start__card--unsure { background: rgba(13, 32, 48, .5); border-style: dashed; border-color: rgba(140, 195, 230, .26); } .aivs--studio .aivs-start__cont { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .aivs--studio .aivs-start__cont .aivs-fine { margin: 2px 0 0; } .aivs--studio .aivs-start__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .aivs--studio .aivs-start__list a { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 16px; background: var(--g-solid); border: 1px solid var(--st-line); color: inherit; text-decoration: none; } .aivs--studio .aivs-start__list a:hover { border-color: rgba(44, 221, 168, .4); } /* the button rules on every page (v1.28; the sizes are in .aivs-btn above): 44 px or more (48 on a phone), 14 px text or more, a paid button says its price, deleting is red and behind "ลบ…" */ .aivs--studio .aivs-btn__price { font-weight: 600; white-space: nowrap; opacity: .92; } .aivs--studio .aivs-seriesdanger summary { color: var(--aivs-fail); font-size: 14px; } .aivs--studio .aivs-seriesdanger .aivs-btn--quiet { color: var(--aivs-fail); } @media (max-width: 760px) { body.aivs-studio .aivs-guide { left: 0; right: 0; bottom: 0; width: auto; max-height: 56vh; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; gap: 10px; } body.aivs-studio .aivs-guide.is-min { left: 12px; right: 12px; bottom: calc(88px + env(safe-area-inset-bottom)); max-width: none; border-radius: 999px; } body.aivs-studio.aivs-guide-on #aivs-app.aivs--studio { padding-bottom: 60vh; } body.aivs-studio .aivs-gfab { right: 14px; bottom: calc(92px + env(safe-area-inset-bottom)); padding: 0 7px; min-height: 52px; } body.aivs-studio .aivs-gfab__label { display: none; } body.aivs-studio .aivs-guide__msg { font-size: 15px; padding: 10px 12px; } .aivs--studio .aivs-btn { min-height: 48px; } .aivs--studio .aivs-btn--small { min-height: 40px; } .aivs--studio .aivs-btn--wide { min-height: 52px; } .aivs--studio .aivs-start__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .aivs--studio .aivs-start__card { padding: 12px; border-radius: 18px; } .aivs--studio .aivs-start__blurb { font-size: 13.5px; } .aivs--studio .aivs-start__ask { flex-direction: column; } .aivs--studio .aivs-start__who h2 { font-size: 21px; } } @media (max-width: 380px) { .aivs--studio .aivs-start__grid { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { body.aivs-studio .aivs-gspot, body.aivs-studio .aivs-guide__track > span { transition: none; } } /* v1.29: the remake panel like the decision box */ .aivs--studio .aivs-remake { background: rgba(109, 76, 240, .14); border-color: rgba(109, 74, 224, .22); border-radius: 16px; } /* v1.29.1 🎚 ปรับเวลาคำบรรยาย */ .aivs--studio .aivs-tune { display: grid; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid rgba(37, 215, 162, .28); background: rgba(105, 211, 179, .119); outline: none; } .aivs--studio .aivs-tune:focus-visible { box-shadow: 0 0 0 3px rgba(22, 86, 131, .25); } .aivs--studio .aivs-tune__head .aivs-fine { display: inline; } .aivs--studio .aivs-tune__ctl { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; position: sticky; top: 0; z-index: 2; padding: 6px 0; background: rgba(105, 211, 179, .134); } .aivs--studio .aivs-tune__audio { flex: 1 1 260px; min-width: 0; height: 40px; } .aivs--studio .aivs-tune__list { display: grid; gap: 2px; max-height: 460px; overflow-y: auto; padding-right: 4px; } .aivs--studio .aivs-tune__row { display: grid; grid-template-columns: 30px 70px minmax(0, 1fr) 64px auto; gap: 6px; align-items: center; padding: 4px 6px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; } .aivs--studio .aivs-tune__row--h2 { background: rgba(76, 142, 240, .098); } .aivs--studio .aivs-tune__row.is-sel { border-color: rgba(37, 215, 162, .55); } .aivs--studio .aivs-tune__row.is-now { background: rgba(230, 204, 101, .14); } .aivs--studio .aivs-tune__n { font-size: 12px; color: var(--aivs-muted); text-align: right; } .aivs--studio .aivs-tune__who { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aivs--studio .aivs-tune__text { font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; } .aivs--studio .aivs-tune__time { font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; } .aivs--studio .aivs-tune__row.is-moved .aivs-tune__time { color: #ecb388; font-weight: 600; } .aivs--studio .aivs-tune__ai { margin: 0; padding: 6px 10px; border-radius: 10px; background: rgba(22, 86, 131, .08); color: #b3edca; } /* v1.30.1 */ .aivs--studio .aivs-listen { border-color: rgba(37, 215, 162, .45); } .aivs--studio .aivs-tune__acts { display: flex; gap: 2px; flex-wrap: nowrap; } .aivs--studio .aivs-tune__acts .aivs-btn--small { min-width: 40px; padding-left: 6px; padding-right: 6px; } @media (max-width: 760px) { .aivs--studio .aivs-tune__row { grid-template-columns: 24px minmax(0, 1fr) 60px; } .aivs--studio .aivs-tune__who { display: none; } .aivs--studio .aivs-tune__acts { grid-column: 1 / -1; flex-wrap: wrap; } } /* v1.30 Short ภาพสมจริง */ .aivs--studio .aivs-tag--short { background: rgba(105, 211, 144, .14); color: #8eedd0; } .aivs--studio .aivs-shortpanel { margin: 14px 0; padding: 14px 16px; border-radius: 14px; background: rgba(13, 32, 48, .72); border: 1px solid rgba(140, 195, 230, .182); } .aivs--studio .aivs-shortpanel h3 { margin: 0 0 6px; font-size: 1.02rem; } .aivs--studio .aivs-shortlines ol { margin: 8px 0 0; padding-left: 22px; max-height: 320px; overflow: auto; } .aivs--studio .aivs-shortlines li { margin: 2px 0; overflow-wrap: anywhere; } .aivs--studio .aivs-shortshot { margin: 6px 0 8px; padding: 8px 10px; border-radius: 10px; background: rgba(105, 211, 150, .14); } .aivs--studio .aivs-shortshot p { margin: 2px 0; overflow-wrap: anywhere; } .aivs--studio .aivs-shortvoice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .aivs--studio .aivs-warnline { color: #e6ce95; background: rgba(230, 198, 101, .14); border-radius: 8px; padding: 6px 10px; } .aivs--studio .aivs-brandbox__img { display: block; max-width: 240px; max-height: 160px; margin: 6px 0 10px; padding: 10px; border-radius: 12px; background: repeating-conic-gradient(rgba(20, 42, 60, .62) 0 25%, #0d2030 0 50%) 0 0 / 16px 16px; } /* v1.31 คลิปคำคม: the AI writer, the reading voice's style, the music, the job page's sound box, the manual */ .aivs--studio .aivs-quote { padding: 14px; border-radius: 14px; background: rgba(22, 86, 131, .05); border: 1px solid rgba(140, 195, 230, .182); } .aivs--studio .aivs-quote .aivs-actions { flex-wrap: wrap; align-items: stretch; } .aivs--studio .aivs-quote__mood { flex: 0 1 220px; } .aivs--studio .aivs-quote__note { flex: 1 1 240px; min-width: 0; } .aivs--studio .aivs-quote__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; } .aivs--studio .aivs-quote__opt { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: #0d2030; border: 1px solid rgba(140, 195, 230, .208); min-width: 0; } .aivs--studio .aivs-quote__opt h4 { margin: 0; font-size: 1rem; } .aivs--studio .aivs-quote__lines { padding: 10px 12px; border-radius: 10px; background: #152531; color: #fff; line-height: 1.7; } .aivs--studio .aivs-quote__lines p { margin: 0; overflow-wrap: anywhere; } .aivs--studio .aivs-quote__key { color: #ebc65b; } .aivs--studio .aivs-quote__tag { font-size: .8em; color: #aab7c1; } .aivs--studio .aivs-quote__facts { margin: 0; padding-left: 18px; font-size: .86rem; color: #cdd5db; overflow-wrap: anywhere; } .aivs--studio .aivs-quote__use { align-self: flex-start; } .aivs--studio .aivs-voicestyle { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .aivs--studio .aivs-voicestyle__try { align-self: flex-start; } .aivs--studio .aivs-shortmusic { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; } .aivs--studio .aivs-sndbox { margin: 14px 0; padding: 12px 16px; border-radius: 14px; background: rgba(13, 32, 48, .72); border: 1px solid rgba(140, 195, 230, .182); } .aivs--studio .aivs-sndbox summary { cursor: pointer; font-weight: 600; min-height: 32px; } .aivs--studio .aivs-sndbox__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 8px 0; } .aivs--studio .aivs-sndbox__grid label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; min-width: 0; } .aivs--studio .aivs-manual { display: flex; flex-direction: column; gap: 14px; } .aivs--studio .aivs-manual__search { max-width: 520px; } .aivs--studio .aivs-manual__toc { display: flex; flex-wrap: wrap; gap: 8px; } .aivs--studio .aivs-manual__sec { padding: 16px 18px; border-radius: 14px; background: rgba(13, 32, 48, .8); border: 1px solid rgba(140, 195, 230, .182); scroll-margin-top: 16px; } .aivs--studio .aivs-manual__sec h2 { margin: 0 0 4px; font-size: 1.2rem; } .aivs--studio .aivs-manual__topic { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(140, 195, 230, .234); } .aivs--studio .aivs-manual__topic h3 { margin: 0 0 4px; font-size: 1.02rem; } .aivs--studio .aivs-manual__topic ol { margin: 6px 0; padding-left: 22px; } .aivs--studio .aivs-manual__topic li { margin: 3px 0; overflow-wrap: anywhere; } .aivs--studio .aivs-manual__cost { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: rgba(230, 198, 101, .14); color: #ecdaaf; font-size: .85rem; } .aivs--studio .aivs-manual__new { padding: 14px 18px; border-radius: 14px; background: #152531; color: #fff; } .aivs--studio .aivs-manual__new h2 { margin: 0 0 6px; font-size: 1.1rem; color: #fff; } .aivs--studio .aivs-manual__new li { margin: 3px 0; } .aivs--studio .aivs-manual mark { background: rgba(230, 197, 101, .14); color: inherit; border-radius: 3px; } .aivs--studio .aivs-helplink { display: inline-flex; align-items: center; gap: 4px; font-size: .88rem; } @media (max-width: 760px) { .aivs--studio .aivs-head .aivs-tabs a[href="#manual"] { display: none; } /* v1.31: in the name's menu on a phone */ } .aivs--studio .aivs-shortlogo__img { display: block; max-width: 140px; max-height: 90px; object-fit: contain; margin: 6px 0; padding: 6px; border-radius: 10px; background-color: #0d2030; background-image: linear-gradient(45deg, rgba(20, 42, 60, .62) 25%, transparent 25%, transparent 75%, rgba(20, 42, 60, .62) 75%), linear-gradient(45deg, rgba(20, 42, 60, .62) 25%, transparent 25%, transparent 75%, rgba(20, 42, 60, .62) 75%); background-size: 14px 14px; background-position: 0 0, 7px 7px; border: 1px solid rgba(140, 195, 230, .182); } .aivs--studio .aivs-brandbox__members { margin-top: 10px; } /* v1.32 สารคดีแบบผสม: the new-job form's steps, the job's own page (script review, narration, Flow, clips, the cut) */ .aivs--studio .aivs-docsteps { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 6px; padding: 0; list-style: none; counter-reset: none; } .aivs--studio ol.aivs-docsteps.aivs-fine { display: block; padding-left: 20px; list-style: decimal; } .aivs--studio ol.aivs-docsteps.aivs-fine li { margin: 3px 0; } .aivs--studio .aivs-doc > .aivs-docsteps li { display: inline-flex; align-items: center; gap: 6px; color: var(--st-muted); font-size: .92rem; } .aivs--studio .aivs-docsteps__n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(13, 39, 58, .08); font-size: .8rem; font-weight: 600; } .aivs--studio .aivs-doc > .aivs-docsteps li.is-now { color: var(--st-ink); font-weight: 600; } .aivs--studio .aivs-doc > .aivs-docsteps li.is-now .aivs-docsteps__n { background: var(--st-green2); color: #fff; } .aivs--studio .aivs-doc > .aivs-docsteps li.is-done .aivs-docsteps__n { background: var(--st-tint2); color: var(--st-green-ink); } .aivs--studio .aivs-docbox { margin: 14px 0; padding: 14px 16px; border-radius: 14px; background: rgba(13, 32, 48, .76); border: 1px solid rgba(140, 195, 230, .182); } .aivs--studio .aivs-docbox h3 { margin: 0 0 8px; font-size: 1.05rem; } .aivs--studio .aivs-docbox > summary { cursor: pointer; font-weight: 600; min-height: 32px; } .aivs--studio .aivs-docgrid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 8px 0; } .aivs--studio .aivs-docgrid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 6px 0; } .aivs--studio .aivs-docfield { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .aivs--studio .aivs-docprobs { margin: 8px 0; border-radius: 10px; } .aivs--studio .aivs-docprobs ul { margin: 6px 0 2px; padding-left: 20px; } .aivs--studio .aivs-docprobs li { overflow-wrap: anywhere; } .aivs--studio .aivs-docsec { margin: 14px 0 6px; padding-top: 10px; border-top: 1px dashed rgba(140, 195, 230, .26); } .aivs--studio .aivs-docsec__head { display: grid; grid-template-columns: auto 160px minmax(0, 1fr); gap: 8px; align-items: center; } .aivs--studio .aivs-doclines { margin: 8px 0 0; padding-left: 0; list-style: none; display: grid; gap: 8px; } .aivs--studio .aivs-docline { padding: 10px 12px; border-radius: 12px; background: #0d2030; border: 1px solid rgba(140, 195, 230, .156); display: grid; gap: 6px; min-width: 0; } .aivs--studio .aivs-docline--map { border-left: 4px solid #2f86c9; } .aivs--studio .aivs-docline--graphic { border-left: 4px solid #d8ab31; } .aivs--studio .aivs-docline__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .aivs--studio .aivs-docline__src { color: var(--st-green-ink); } .aivs--studio .aivs-docline__text { font-size: 1rem; line-height: 1.6; } .aivs--studio .aivs-dockeys { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .aivs--studio .aivs-dockey { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px; background: rgba(13, 39, 58, .06); font-size: .85rem; } .aivs--studio .aivs-dockey--place { background: rgba(86, 167, 230, .14); } .aivs--studio .aivs-dockey--number { background: rgba(230, 198, 101, .14); } .aivs--studio .aivs-dockey__x { border: 0; background: transparent; cursor: pointer; color: var(--st-muted); font-size: 1rem; line-height: 1; min-width: 24px; min-height: 24px; } .aivs--studio .aivs-docnums { display: grid; gap: 6px; } .aivs--studio .aivs-docnum { display: grid; grid-template-columns: minmax(80px, auto) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; } .aivs--studio .aivs-docnum.is-missing input:first-of-type { border-color: #d8ab31; background: rgba(230, 194, 101, .14); } .aivs--studio .aivs-docgen { margin: 0 0 14px; padding: 12px 16px; border-radius: 16px; background: rgba(105, 211, 150, .14); border: 1px solid rgba(20, 154, 114, .22); } /* v1.32.1 B-roll made here */ .aivs--studio .aivs-docgen > summary { cursor: pointer; font-weight: 650; color: #8eedd0; } .aivs--studio .aivs-docgen__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; margin: 10px 0 6px; } .aivs--studio .aivs-docclip__gen { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } @media (max-width: 640px) { .aivs--studio .aivs-docgen__row { grid-template-columns: 1fr; } } .aivs--studio .aivs-docfix { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 12px; } /* v1.32.1 ให้ AI หาที่มา */ .aivs--studio .aivs-docfixrep { margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: rgba(84, 232, 152, .14); border: 1px solid rgba(20, 154, 114, .25); font-size: 13.5px; } .aivs--studio .aivs-docfixrep summary { cursor: pointer; font-weight: 600; color: #8eedd0; } .aivs--studio .aivs-docheld { margin: 4px 0 2px; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; color: #ecdaaf; background: rgba(230, 198, 101, .14); border: 1px solid #efe0b3; } /* v1.32.1 a card held until its numbers have a source */ .aivs--studio .aivs-docjson summary { cursor: pointer; font-size: .88rem; color: var(--st-muted); } .aivs--studio .aivs-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; } .aivs--studio textarea.is-bad, .aivs--studio .aivs-input.is-bad { border-color: #c23b3b; background: rgba(240, 76, 76, .14); } .aivs--studio .aivs-docsources ul { margin: 6px 0; padding-left: 20px; } .aivs--studio .aivs-docsources li { overflow-wrap: anywhere; margin: 2px 0; } .aivs--studio .aivs-docrewrite { margin-top: 12px; } .aivs--studio .aivs-docrewrite summary { cursor: pointer; color: var(--st-muted); } .aivs--studio .aivs-docrewrite textarea { margin: 8px 0; } .aivs--studio .aivs-docread { margin: 8px 0 0; padding-left: 26px; max-height: 360px; overflow: auto; } .aivs--studio .aivs-docread li { margin: 3px 0; overflow-wrap: anywhere; } .aivs--studio .aivs-docaudio { width: 100%; max-width: 560px; margin: 6px 0; } .aivs--studio .aivs-docbatch { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: rgba(105, 211, 179, .14); border: 1px solid rgba(140, 195, 230, .156); } .aivs--studio .aivs-docbatch__head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; } .aivs--studio .aivs-docdrop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px; margin: 8px 0; border: 2px dashed rgba(140, 195, 230, .39); border-radius: 14px; background: rgba(37, 194, 147, .05); cursor: pointer; text-align: center; } .aivs--studio .aivs-docdrop.is-drop { background: var(--st-tint2); border-color: var(--st-green2); } .aivs--studio .aivs-docdrop.is-disabled { opacity: .55; cursor: not-allowed; } .aivs--studio .aivs-docqueue { margin: 6px 0; padding-left: 20px; font-size: .9rem; } .aivs--studio .aivs-docclips { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 10px 0; padding: 0; list-style: none; } .aivs--studio .aivs-docclip { position: relative; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #0d2030; border: 1px solid rgba(140, 195, 230, .156); min-width: 0; } .aivs--studio .aivs-docclip.is-bad { border-color: #d8ab31; } .aivs--studio .aivs-docclip__pic { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; background: #101c25; color: #fff; cursor: pointer; object-fit: cover; } .aivs--studio .aivs-docclip__pic img { display: block; width: 100%; height: 100%; object-fit: cover; } .aivs--studio .aivs-docclip__info { display: grid; gap: 2px; padding: 8px 10px 10px; min-width: 0; } .aivs--studio .aivs-docclip__info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; } .aivs--studio .aivs-docclip__info small { margin: 0; overflow-wrap: anywhere; } .aivs--studio .aivs-docclip > .aivs-btn { position: absolute; top: 6px; right: 6px; background: rgba(13, 32, 48, .88); min-width: 32px; min-height: 32px; } .aivs--studio .aivs-docpost summary, .aivs--studio .aivs-doccards > summary { cursor: pointer; font-weight: 600; min-height: 32px; margin-top: 10px; } .aivs--studio .aivs-docpost__row { margin: 8px 0; } .aivs--studio .aivs-docpost__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .aivs--studio .aivs-docpost__text { margin: 4px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(105, 211, 179, .14); white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .9rem; max-height: 260px; overflow: auto; } .aivs--studio .aivs-doccardlist { margin: 8px 0; padding: 0; list-style: none; display: grid; gap: 8px; } .aivs--studio .aivs-doccard { padding: 8px 10px; border-radius: 12px; background: #0d2030; border: 1px solid rgba(140, 195, 230, .156); } .aivs--studio .aivs-doccard.is-hidden { opacity: .55; } .aivs--studio .aivs-doccard__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .aivs--studio .aivs-doccard__head .aivs-check { margin: 0 0 0 auto; } @media (max-width: 760px) { .aivs--studio .aivs-docsec__head { grid-template-columns: 1fr; } .aivs--studio .aivs-docnum { grid-template-columns: 1fr; } .aivs--studio .aivs-docclips { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } } /* v1.33.0 รายการอัปเดต (settings → อัปเดต & สำรอง) */ .aivs-linkbtn { background: none; border: 0; padding: 0 0 0 4px; color: var(--st-green-ink); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; } .aivs-linkbtn:hover { color: var(--st-green-deep); } .aivs-wn__current { border: 1px solid var(--st-edge); border-radius: 16px; background: var(--st-soft); padding: 16px 18px; } .aivs-wn__current h3 { margin: 4px 0 2px; font-size: 17px; line-height: 1.45; } .aivs-wn__badge { display: inline-block; margin: 0 0 4px; padding: 2px 10px; border-radius: 999px; background: var(--st-green2); color: #fff; font-size: 13px; font-weight: 600; } .aivs-wn__items { margin: 8px 0 0; padding-left: 20px; line-height: 1.6; } .aivs-wn__items li { margin: 0 0 6px; } .aivs-wn__items li span { color: var(--st-ink2); } .aivs-wn__search { margin: 18px 0 6px; max-width: 420px; } .aivs-wn__ver { border-top: 1px solid var(--st-line); padding: 10px 2px; } .aivs-wn__ver > summary { cursor: pointer; line-height: 1.5; } .aivs-wn__ver[open] > summary { margin-bottom: 4px; } .aivs-wn__pkg { margin: 8px 0; padding: 10px 14px; border-radius: 12px; background: var(--st-soft); border: 1px solid var(--st-edge); } /* v1.33.0 หน้าเว็บสาธารณะ (settings → หน้าเว็บ) */ .aivs-site { display: grid; gap: 16px; } .aivs-site h3 { margin: 18px 0 6px; font-size: 16px; } .aivs-site__status { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 16px 18px; border: 1px solid var(--st-edge); border-radius: 16px; background: var(--st-soft); } .aivs-site__status.is-on { background: var(--st-tint); border-color: var(--st-tint2); } .aivs-site__state { margin: 0; font-weight: 650; } .aivs-site__status.is-on .aivs-site__state { color: var(--st-green-deep); } .aivs-site__warns { flex-basis: 100%; margin: 0; } .aivs-site__nav { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--st-line); padding-bottom: 10px; } .aivs-site__nav button { border: 1px solid var(--st-edge); background: #0d2030; color: var(--st-ink2); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; } .aivs-site__nav button:hover { background: var(--st-soft); } .aivs-site__nav button.is-current { background: var(--st-green2); border-color: var(--st-green2); color: #fff; } .aivs-site__withcount { position: relative; } .aivs-site__count { display: block; text-align: right; font-size: 12px; color: var(--st-faint); margin-top: 2px; } .aivs-site__count.is-off { color: #ecb388; font-weight: 600; } .aivs-site__serp { border: 1px dashed var(--st-line2); border-radius: 12px; padding: 4px 14px 2px; background: #0d2030; } .aivs-site__list { display: grid; gap: 10px; justify-items: start; } .aivs-site__item { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; border: 1px solid var(--st-line); border-radius: 12px; padding: 8px 10px 4px; background: #0d2030; } .aivs-site__itembtns { display: flex; gap: 4px; padding-top: 4px; } .aivs-site__full { grid-column: 1 / -1; } .aivs-site__mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Studio Sans", monospace; font-size: 14px; line-height: 1.6; } .aivs-site__savebar { position: sticky; bottom: 0; z-index: 3; display: flex; gap: 10px; flex-wrap: wrap; padding: 12px 0; background: linear-gradient(180deg, rgba(13, 32, 48, 0), #0d2030 30%); } .aivs-site__add { border: 1px solid var(--st-edge); border-radius: 16px; padding: 4px 16px 14px; background: var(--st-soft); } .aivs-site__works { display: grid; gap: 10px; } .aivs-site__card { border: 1px solid var(--st-edge); border-radius: 14px; background: #0d2030; padding: 10px; } .aivs-site__card.is-open { border-color: var(--st-green2); } .aivs-site__work { display: grid; grid-template-columns: 136px 1fr; gap: 14px; align-items: start; } .aivs-site__work img, .aivs-site__noimg { width: 136px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: #101c24; } .aivs-site__noimg { display: grid; place-items: center; color: #cfe3d8; font-size: 12px; text-align: center; padding: 6px; } .aivs-site__workinfo { display: grid; gap: 2px; min-width: 0; } .aivs-site__workinfo small { overflow-wrap: anywhere; } .aivs-site__edit { border-top: 1px solid var(--st-line); margin-top: 10px; padding-top: 6px; } .aivs-site__postrow { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; } .aivs-site__postrow > div:first-child { display: grid; gap: 2px; min-width: 0; } .aivs-site__cover { max-width: 320px; border-radius: 10px; margin: 4px 0 8px; } .aivs-site__tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; } .aivs-site__tools label.aivs-btn { cursor: pointer; } .aivs-site__insertwork { width: auto; max-width: 260px; } .aivs-site__checks { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; } .aivs-site__checks li { border-radius: 10px; padding: 8px 12px; background: var(--st-soft); border: 1px solid var(--st-line); overflow-wrap: anywhere; } .aivs-site__checks li.is-warn { background: rgba(240, 167, 76, .14); border-color: rgba(240, 164, 76, .45); } .aivs-site__checks li.is-warn strong { color: #ecb388; } .aivs-site__bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding: 6px; border: 1px solid var(--st-line); border-radius: 12px; background: #0d2030; } .aivs-site__bar { flex: 1; min-width: 4px; background: var(--st-green); border-radius: 3px 3px 0 0; } @media (max-width: 600px) { .aivs-site__work { grid-template-columns: 96px 1fr; } .aivs-site__work img, .aivs-site__noimg { width: 96px; } .aivs-site__item { grid-template-columns: 1fr; } } .aivs-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } @media (max-width: 700px) { .aivs-grid2 { grid-template-columns: 1fr; } } /* v1.33.0 ภาพถ่ายจริง (documentary job page) */ .aivs-docphotos { border: 1px solid var(--st-edge); border-radius: 14px; padding: 10px 14px; margin: 10px 0; background: #0d2030; } .aivs-docphotos > summary { cursor: pointer; font-weight: 650; } .aivs-docphotolist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; } .aivs-docphoto { display: grid; grid-template-columns: 128px 1fr; gap: 12px; align-items: start; border: 1px solid var(--st-line); border-radius: 12px; padding: 10px; } .aivs-docphoto.is-done { border-color: var(--st-tint2); background: var(--st-soft); } .aivs-docphoto__pic { width: 128px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #101c24; } .aivs-docphoto__pic.is-empty { display: grid; place-items: center; color: #cfe3d8; font-weight: 700; } .aivs-docphoto__info { display: grid; gap: 4px; min-width: 0; } .aivs-docphoto__links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; } .aivs-docphoto__up { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: center; } .aivs-docphoto__add { margin-top: 10px; } @media (max-width: 700px) { .aivs-docphoto { grid-template-columns: 1fr; } .aivs-docphoto__up { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- v1.33.1 ผู้ช่วย AI: the chat on the right of every page (the canvas the owner approved 20 Oct; 21 Oct "ออกแบบให้ทันสมัย ดูสากล ปลอดภัยนะ"): a white column on a computer that folds to a rail; on a tablet the rail opens the chat over the page; a bar at the bottom of a phone opens it full screen. Targets are 44 px (chips 36 px), the text keeps a 4.5:1 contrast, motion stops for "reduce motion". */ body.aivs-studio { --st-aiw: 380px; } @media (min-width: 1680px) { body.aivs-studio { --st-aiw: 420px; } } body.aivs-studio.aivs-ai-col #aivs-app.aivs--studio { padding-right: calc(var(--st-aiw) + 32px); } body.aivs-studio.aivs-ai-col .aivs-toast { right: calc(var(--st-aiw) + 20px); } /* (v1.58.20: the folded rail is not drawn - the page keeps its own side space; was: the toast 84 px and the page 96 px from the right) */ body.aivs-studio .aivs--studio > .aivs-ai { position: fixed; z-index: 58; top: 0; right: 0; bottom: 0; width: var(--st-aiw); max-width: none; margin: 0; box-sizing: border-box; display: flex; flex-direction: column; background: #0d2030; border-left: 1px solid var(--st-edge); color: var(--st-ink); font-size: 14px; } body.aivs-studio .aivs--studio > .aivs-ai[hidden] { display: none; } .aivs-ai__rail { display: none; } body.aivs-studio .aivs--studio > .aivs-ai.is-rail { width: 64px; } .aivs-ai.is-rail > :not(.aivs-ai__rail) { display: none !important; } .aivs-ai.is-rail .aivs-ai__rail { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 18px 6px; border: 0; background: none; color: var(--st-green-deep); font: inherit; font-size: 12px; font-weight: 600; line-height: 1.3; text-align: center; cursor: pointer; } .aivs-ai.is-rail .aivs-ai__rail .aivs-ico { width: 44px; height: 44px; padding: 11px; box-sizing: border-box; border-radius: 12px; background: var(--st-tint); } .aivs-ai.is-rail .aivs-ai__rail:hover .aivs-ico { background: var(--st-tint2); } .aivs-ai__dot { position: absolute; top: 14px; right: 12px; width: 10px; height: 10px; border-radius: 50%; background: #e2ae1c; box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); } .aivs-ai__dot[hidden] { display: none; } .aivs-ai__head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 16px 16px 12px; border-bottom: 1px solid var(--st-line); } .aivs-ai__who { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .aivs-ai__title { font-size: 16px; font-weight: 700; color: var(--st-ink); } .aivs-ai__ctx { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--st-green-deep); background: var(--st-tint); border-radius: 999px; padding: 2px 10px; } .aivs-ai__ctx[hidden] { display: none; } .aivs-ai__tools { display: flex; gap: 6px; flex: none; } .aivs-ai__ib { flex: none; width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--st-edge); border-radius: 10px; background: #0d2030; color: var(--st-ink2); cursor: pointer; font: inherit; } .aivs-ai__ib:hover:not(:disabled) { border-color: var(--st-line2); background: var(--st-soft); } .aivs-ai__ib:disabled { opacity: .45; cursor: not-allowed; } .aivs-ai__ib[hidden] { display: none; } .aivs-ai__ib .aivs-ico { width: 18px; height: 18px; stroke-width: 2; } .aivs-ai__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .aivs-ai__log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: rgba(20, 42, 60, .62); } .aivs-ai__wait { margin: 0; color: var(--st-muted); } .aivs-ai__msg { max-width: 92%; padding: 10px 12px; font-size: 14px; line-height: 1.6; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; } .aivs-ai__msg--ai { align-self: flex-start; background: #0d2030; border: 1px solid rgba(140, 195, 230, .282); border-radius: 14px 14px 14px 4px; color: var(--st-ink); } .aivs-ai__msg--me { align-self: flex-end; max-width: 88%; background: var(--st-green2); color: #fff; border-radius: 14px 14px 4px 14px; gap: 4px; } .aivs-ai__msg.is-undone { opacity: .55; } .aivs-ai__text { white-space: pre-wrap; overflow-wrap: anywhere; } .aivs-ai__msg--ai .aivs-ai__text b { font-weight: 700; color: var(--st-ink); } .aivs-ai__att { font-size: 12px; opacity: .85; } /* v1.42.2: the pictures of a sent message; one press copies an answer */ .aivs-ai__sentimgs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .aivs-ai__sentimgs a { display: block; line-height: 0; } .aivs-ai__sentimgs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(140, 195, 230, .086); background: rgba(13, 32, 48, .2); } .aivs-ai__foot2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; } .aivs-ai__copy { border: 1px solid rgba(140, 195, 230, .335); background: rgba(20, 42, 60, .62); color: var(--st-ink2, #e3e7ea); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; } .aivs-ai__copy:hover { background: rgba(20, 42, 60, .62); } .aivs-ai__copytmp { position: fixed; left: -9999px; top: 0; opacity: 0; } .aivs-ai__pname { display: block; font-size: 14px; margin: 2px 0 4px; } .aivs-ai__fine, .aivs-ai__usd { font-size: 12px; color: var(--st-muted); } .aivs-ai__ok { font-size: 12px; color: var(--st-green-deep); font-weight: 600; } .aivs-ai__err { color: #f5c6c2; font-size: 13.5px; overflow-wrap: anywhere; } .aivs-ai__warn { margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(230, 195, 101, .14); border: 1px solid #eedbaf; color: #f0e2c0; font-size: 13px; } .aivs-ai__acts { margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--st-green-deep); } .aivs-ai__script { background: var(--st-forest); color: #fff; border-radius: 10px; padding: 12px 14px; line-height: 1.8; overflow-wrap: anywhere; } .aivs-ai__script b { color: #ebc65b; font-weight: 700; } .aivs-ai__idea { padding: 10px 12px; border-radius: 10px; background: var(--st-soft); border: 1px solid var(--st-line); white-space: pre-wrap; overflow-wrap: anywhere; } .aivs-ai__card { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--st-edge); border-radius: 12px; background: #0d2030; } .aivs-ai__card p { margin: 0; } .aivs-ai__card--paid { border-color: #ebd39e; } .aivs-ai__cardhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--st-ink2); } .aivs-ai__kind { font-size: 12px; font-weight: 600; color: var(--st-green-deep); background: var(--st-tint); border-radius: 999px; padding: 1px 9px; } .aivs-ai__facts { margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--st-ink2); display: grid; gap: 2px; } .aivs-ai__cardbtns { display: flex; flex-wrap: wrap; gap: 8px; } .aivs-ai__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--st-line2); border-radius: 10px; background: #0d2030; color: var(--st-ink2); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; } .aivs-ai__btn:hover:not(:disabled) { border-color: var(--st-green2); color: var(--st-green-deep); } .aivs-ai__btn:disabled { opacity: .5; cursor: not-allowed; } .aivs-ai__btn--pri, a.aivs-ai__btn--pri { border-color: var(--st-green2); background: var(--st-green2); color: #fff; font-weight: 600; } .aivs-ai__btn--pri:hover:not(:disabled), a.aivs-ai__btn--pri:hover { background: #0b4f80; border-color: #6fe8c4; color: #fff; } .aivs-ai__btn--quiet { border-color: transparent; background: transparent; align-self: flex-start; } .aivs-ai__btn .aivs-ico { width: 18px; height: 18px; } .aivs-ai__guidebtn { align-self: flex-start; } .aivs-ai__thinking { flex-direction: row; align-items: center; gap: 10px; color: var(--st-ink2); } .aivs-ai__dots { display: inline-flex; gap: 4px; } .aivs-ai__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--st-green2); animation: aivs-ai-dot 1.2s infinite ease-in-out; } .aivs-ai__dots i:nth-child(2) { animation-delay: .15s; } .aivs-ai__dots i:nth-child(3) { animation-delay: .3s; } @keyframes aivs-ai-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } .aivs-ai__foot { flex: none; padding: 12px 16px 16px; border-top: 1px solid var(--st-line); display: flex; flex-direction: column; gap: 10px; background: #0d2030; } .aivs-ai__chips, .aivs-ai__thumbs { display: flex; flex-wrap: wrap; gap: 8px; } .aivs-ai__chips[hidden], .aivs-ai__thumbs[hidden], .aivs-ai__modeslot[hidden] { display: none; } .aivs-ai__chip { min-height: 36px; padding: 0 12px; border: 1px solid var(--st-line2); border-radius: 999px; background: #0d2030; color: var(--st-ink2); font: inherit; font-size: 13px; cursor: pointer; text-align: left; } .aivs-ai__chip:hover:not(:disabled) { border-color: var(--st-green2); color: var(--st-green-deep); } .aivs-ai__chip:disabled { opacity: .5; cursor: not-allowed; } .aivs-ai__modes { display: inline-flex; border: 1px solid var(--st-line2); border-radius: 999px; overflow: hidden; } .aivs-ai__modes button { min-height: 32px; padding: 0 14px; border: 0; background: #0d2030; color: var(--st-ink2); font: inherit; font-size: 13px; cursor: pointer; } .aivs-ai__modes button.is-on { background: var(--st-green2); color: #fff; font-weight: 600; } .aivs-ai__thumb { position: relative; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; border: 1px solid var(--st-line); } .aivs-ai__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .aivs-ai__thumbx { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(21, 37, 49, .78); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; } .aivs-ai__box { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 12px; border: 1.5px solid var(--st-green2); border-radius: 14px; background: #0d2030; transition: box-shadow .15s; } .aivs-ai__box:focus-within { box-shadow: 0 0 0 3px rgba(13, 87, 140, .16); } .aivs-ai__box.is-off { border-color: var(--st-line2); background: var(--st-soft); } .aivs-ai__body.is-drop .aivs-ai__box { border-style: dashed; background: rgba(105, 211, 150, .14); } body.aivs-studio .aivs-ai .aivs-ai__in, body.aivs-studio .aivs-ai .aivs-ai__in:hover, body.aivs-studio .aivs-ai .aivs-ai__in:focus { flex: 1 1 auto; width: auto; min-width: 0; min-height: 44px; max-height: 150px; margin: 0; padding: 10px 0; border: 0; border-radius: 0; box-shadow: none; outline: none; background: transparent; color: var(--st-ink); font: inherit; font-size: 14px; line-height: 1.5; resize: none; } .aivs-ai__in::placeholder { color: #a6acb1; } .aivs-ai__attach { border: 0; background: var(--st-ground); } .aivs-ai__sendslot { display: contents; } .aivs-ai__send { flex: none; width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: var(--st-green2); color: #fff; cursor: pointer; } .aivs-ai__send:hover:not(:disabled) { background: #0b4f80; } .aivs-ai__send:disabled { background: rgba(20, 42, 60, .62); cursor: not-allowed; } .aivs-ai__send .aivs-ico { width: 18px; height: 18px; stroke-width: 2.2; } .aivs-ai__stop { background: var(--st-forest); } .aivs-ai__stop:hover:not(:disabled) { background: #213b4e; } .aivs-ai__note { margin: 0; font-size: 12px; color: var(--st-muted); line-height: 1.5; } .aivs-ai__box input[type=file] { display: none; } /* a page's own director in the panel (the storyboard's director, the series' director) */ .aivs-ai__body.is-dock { background: #0d2030; } .aivs-ai__dock { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .aivs-ai__dockph { padding: 24px 16px; display: grid; gap: 10px; justify-items: start; color: var(--st-ink2); } .aivs-ai__dockph p { margin: 0; } body.aivs-studio .aivs-ai .aivs-dir.is-docked { position: static; inset: auto; z-index: auto; flex: 1 1 auto; width: auto; max-width: none; height: auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none; --ed-accent: var(--st-green2); --ed-line: var(--st-line); } body.aivs-studio .aivs-ai .aivs-dir.is-docked .aivs-dir__head > strong, body.aivs-studio .aivs-ai .aivs-dir.is-docked .aivs-dir__close { display: none; } body.aivs-studio .aivs-ai .aivs-dir.is-docked .aivs-dir__head { justify-content: flex-start; padding: 10px 16px; } body.aivs-studio .aivs-ai .aivs-dir.is-docked .aivs-dir__log { background: rgba(20, 42, 60, .62); padding: 16px; gap: 12px; } body.aivs-studio .aivs-ai .aivs-dir.is-docked .aivs-dir__msg--me { border-radius: 14px 14px 4px 14px; padding: 10px 12px; } body.aivs-studio .aivs-ai .aivs-dir.is-docked .aivs-dir__msg--ai { background: #0d2030; border-color: rgba(140, 195, 230, .282); border-radius: 14px 14px 14px 4px; padding: 10px 12px; } body.aivs-studio .aivs-ai .aivs-dir.is-docked .aivs-dir__foot { padding: 12px 16px 16px; } body.aivs-studio .aivs-ai .aivs-dir.is-docked .aivs-dir__in { min-height: 44px; border: 1.5px solid var(--st-green2); border-radius: 12px; background: #0d2030; } body.aivs-studio .aivs-ai .aivs-director.is-docked { display: flex; position: static; flex: 1 1 auto; min-height: 0; max-height: none; padding: 12px 16px 16px; border: 0; border-radius: 0; background: #0d2030; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } body.aivs-studio .aivs-ai .aivs-director.is-docked .aivs-director__head strong { display: none; } .aivs--studio .aivs-serieslayout:not(:has(> .aivs-director)) { grid-template-columns: minmax(0, 1fr); } .aivs--studio .aivs-serieslayout.is-chat:not(:has(> .aivs-director)) > .aivs-seriesbody { display: block; } body.aivs-ai-col .aivs--studio .aivs-seriestab--chat { display: none; } /* a tablet: the rail at the edge opens the chat over the page */ body.aivs-studio .aivs--studio > .aivs-aiscrim { position: fixed; inset: 0; z-index: 99999; max-width: none; margin: 0; background: rgba(21, 37, 49, .32); } body.aivs-studio .aivs--studio > .aivs-aiscrim[hidden] { display: none; } body.aivs-studio .aivs--studio > .aivs-ai.is-sheet { z-index: 100000; top: 12px; right: 12px; bottom: 12px; width: min(420px, calc(100vw - 24px)); border: 1px solid var(--st-edge); border-radius: 18px; overflow: hidden; box-shadow: var(--g-shadow-lg); animation: aivs-ai-in .18s ease-out; } @keyframes aivs-ai-in { from { opacity: 0; transform: translateX(16px); } } /* a phone: the bar at the bottom ("ถามหรือสั่ง AI ได้เลย…"); the chat opens full screen */ body.aivs-studio .aivs--studio > .aivs-aibar { position: fixed; z-index: 100000; left: 0; right: 0; bottom: 0; max-width: none; margin: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 10px max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: #0d2030; border-top: 1px solid var(--st-edge); box-shadow: 0 -6px 20px rgba(0, 0, 0, .29); } body.aivs-studio .aivs--studio > .aivs-aibar[hidden] { display: none; } .aivs-aibar__say { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: var(--st-ink2); font: inherit; font-size: 13px; line-height: 1.55; text-align: left; cursor: pointer; } .aivs-aibar__ico { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--st-tint); color: var(--st-green2); } .aivs-aibar__ico .aivs-ico { width: 15px; height: 15px; } .aivs-aibar__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 28px; padding-top: 3px; } .aivs-aibar__row { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 12px; border: 1.5px solid var(--st-green2); border-radius: 14px; background: #0d2030; } body.aivs-studio .aivs-aibar .aivs-aibar__in, body.aivs-studio .aivs-aibar .aivs-aibar__in:focus { flex: 1 1 auto; width: auto; min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; outline: none; background: transparent; color: var(--st-ink); font: inherit; font-size: 16px; } .aivs-aibar__in::placeholder { color: #a6acb1; } @media (max-width: 760px) { body.aivs-studio.aivs-ai-bar #aivs-app.aivs--studio { padding-bottom: calc(150px + env(safe-area-inset-bottom)); } body.aivs-studio.aivs-ai-bar .aivs-toast { bottom: calc(140px + env(safe-area-inset-bottom)); } body.aivs-studio .aivs--studio > .aivs-ai.is-sheet { inset: 0; width: auto; border: 0; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); } body.aivs-studio .aivs-ai .aivs-ai__in, body.aivs-studio .aivs-ai .aivs-ai__in:focus { font-size: 16px; } /* no zoom on focus (iOS) */ .aivs-ai__msg { font-size: 15px; } /* v1.33.1 (the canvas "มือถือ: ช่องแชทติดล่าง"): the pages move to the ☰ drawer - the bottom is the AI's bar */ .aivs--studio .aivs-menubtn { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--st-edge); border-radius: 10px; background: #0d2030; color: var(--st-ink2); cursor: pointer; } .aivs--studio .aivs-menubtn .aivs-ico { width: 20px; height: 20px; stroke-width: 2; } .aivs--studio > .aivs-head { gap: 8px; } .aivs--studio .aivs-drawer { display: flex; flex-direction: column; gap: 6px; position: fixed; z-index: 100008; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); box-sizing: border-box; padding: max(14px, env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: #0d2030; border-right: 1px solid var(--st-edge); box-shadow: var(--g-shadow-lg); overflow-y: auto; overscroll-behavior: contain; transform: translateX(-104%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; } .aivs--studio.aivs-nav-open .aivs-drawer { transform: none; visibility: visible; transition: transform .2s ease; } .aivs--studio .aivs-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 10px 6px; border-bottom: 1px solid var(--st-line); margin-bottom: 4px; } .aivs--studio .aivs-drawer__title { font-weight: 700; font-size: 16px; } .aivs--studio .aivs-drawer__close { width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--st-edge); border-radius: 10px; background: #0d2030; color: var(--st-ink2); cursor: pointer; } .aivs--studio > .aivs-scrim { display: block; position: fixed; inset: 0; z-index: 100007; max-width: none; margin: 0; background: rgba(21, 37, 49, .32); opacity: 0; pointer-events: none; transition: opacity .2s; } .aivs--studio.aivs-nav-open > .aivs-scrim { opacity: 1; pointer-events: auto; } .aivs--studio .aivs-head .aivs-tabs { position: static; z-index: auto; flex-direction: column; justify-content: flex-start; gap: 4px; padding: 0; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .aivs--studio .aivs-tabs a { flex: none; flex-direction: row; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 500; } .aivs--studio .aivs-tabs a.is-current { box-shadow: none; font-weight: 600; } .aivs--studio .aivs-tabs a .aivs-ico { width: 20px; height: 20px; } .aivs--studio .aivs-tabs__label { display: inline; } .aivs--studio .aivs-tabs__short { display: none; } .aivs--studio .aivs-head .aivs-tabs a[href="#settings"], .aivs--studio .aivs-head .aivs-tabs a[href="#series"], .aivs--studio .aivs-head .aivs-tabs a[href="#podcast"], .aivs--studio .aivs-head .aivs-tabs a[href="#manual"] { display: flex; } .aivs--studio.aivs-nav-open > .aivs-head { z-index: 100008; } /* the drawer lives in the bar: over the scrim and the AI's bar */ .aivs--studio .aivs-usermenu__item--phone { display: none; } /* the drawer has every page again */ .aivs--studio .aivs-mix__bar { bottom: calc(8px + env(safe-area-inset-bottom)); } } @media (prefers-reduced-motion: reduce) { body.aivs-studio .aivs--studio > .aivs-ai.is-sheet { animation: none; } .aivs-ai__dots i { animation: none; opacity: .7; } .aivs--studio .aivs-drawer, .aivs--studio > .aivs-scrim { transition: none; } } @media print { body.aivs-studio .aivs--studio > .aivs-ai, body.aivs-studio .aivs--studio > .aivs-aibar { display: none; } } /* ---------------------------------------------------------------- v1.35.1 คู่มือหน้านี้ beside the page (owner 22 Oct 12:17 "โอเค" to the design): over the ผู้ช่วย AI's column on a computer (one panel, two tabs), a 400 px drawer where that column is not open (the page moves over from 1100 px), a sheet from the bottom on a phone (75 %); it slides in 220 ms (none for "reduce motion"); the head stays while the topics scroll; targets 44 px; "ชี้ให้ดู" lights the field in gold for a moment. */ body.aivs-studio .aivs--studio > .aivs-pm { position: fixed; z-index: 70; top: 0; right: 0; bottom: 0; width: min(400px, calc(100vw - 24px)); max-width: none; margin: 0; box-sizing: border-box; display: flex; flex-direction: column; background: #0d2030; border-left: 1px solid var(--st-edge); color: var(--st-ink); font-size: 14px; box-shadow: -14px 0 36px rgba(0, 0, 0, .41); animation: aivs-pm-in .22s cubic-bezier(.2, .8, .2, 1); } body.aivs-studio .aivs--studio > .aivs-pm[hidden] { display: none; } body.aivs-studio .aivs--studio > .aivs-pm.is-over { z-index: 59; width: var(--st-aiw); box-shadow: none; animation: aivs-pm-fade .2s ease-out; } body.aivs-studio .aivs--studio > .aivs-pm.is-closing { animation: aivs-pm-out .2s ease-in forwards; } @keyframes aivs-pm-in { from { transform: translateX(100%); } } @keyframes aivs-pm-out { to { transform: translateX(100%); } } @keyframes aivs-pm-fade { from { opacity: 0; } } body.aivs-studio.aivs-pm-push #aivs-app.aivs--studio { padding-right: 432px; } body.aivs-studio.aivs-pm-push .aivs-toast { right: 420px; } .aivs-pm__head { position: sticky; top: 0; z-index: 1; flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 14px; background: #0d2030; border-bottom: 1px solid var(--st-line); } .aivs-pm__grab { display: none; } .aivs-pm__tabs, .aivs-ai__tabs { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; padding: 4px; border-radius: 12px; background: rgba(20, 42, 60, .62); } .aivs-ai__tabs { flex: none; margin: 12px 16px 0; } .aivs-ai__tabs[hidden] { display: none; } .aivs-pm__tab { flex: 1 1 0; min-width: 0; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--st-ink2); font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; } .aivs-pm__tab[hidden] { display: none; } .aivs-pm__tab span { overflow: hidden; text-overflow: ellipsis; } .aivs-pm__tab .aivs-ico { flex: none; width: 16px; height: 16px; stroke-width: 2; } .aivs-pm__tab:hover:not(.is-on) { background: rgba(13, 32, 48, .7); color: var(--st-green-deep); } .aivs-pm__tab.is-on { background: #0d2030; color: var(--st-green-deep); box-shadow: 0 1px 3px rgba(0, 0, 0, .47); cursor: default; } .aivs-pm__tab:focus-visible, .aivs-pm__step:focus-visible, .aivs-pm__topic > summary:focus-visible { outline: 3px solid rgba(52, 222, 171, .45); outline-offset: 2px; } .aivs-pm__close { flex: none; } .aivs-pm__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 28px; display: flex; flex-direction: column; gap: 10px; } .aivs-pm__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--st-ink); outline: none; } .aivs-pm__lead { margin: 0 0 4px; color: var(--st-muted); font-size: 13.5px; line-height: 1.6; } .aivs-pm__sub { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: var(--st-green-deep); } .aivs-pm__topic { border: 1px solid var(--st-line); border-radius: 12px; background: #0d2030; } .aivs-pm__topic[open] { border-color: var(--st-line2); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); } .aivs-pm__topic > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 14px; box-sizing: border-box; font-weight: 600; font-size: 14.5px; line-height: 1.45; color: var(--st-ink); cursor: pointer; list-style: none; border-radius: 12px; } .aivs-pm__topic > summary::-webkit-details-marker { display: none; } .aivs-pm__topic > summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--st-muted); border-bottom: 2px solid var(--st-muted); transform: rotate(45deg) translateY(-2px); transition: transform .15s; } .aivs-pm__topic[open] > summary::after { transform: rotate(-135deg) translateY(-2px); } .aivs-pm__topicbody { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; font-size: 13.5px; line-height: 1.65; color: var(--st-ink2); } .aivs-pm__topicbody p { margin: 0; } .aivs-pm__steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; } .aivs-pm__steps li.has-target { list-style-position: outside; } .aivs-pm__step { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 7px 8px 7px 10px; box-sizing: border-box; border: 1px solid rgba(140, 195, 230, .316); border-radius: 10px; background: rgba(105, 211, 147, .14); color: var(--st-ink2); font: inherit; font-size: 13.5px; line-height: 1.55; text-align: left; cursor: pointer; } .aivs-pm__step:hover { border-color: var(--st-green2); background: rgba(105, 211, 147, .14); } .aivs-pm__go { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--st-green2); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; } .aivs-pm__miss { display: block; margin-top: 4px; color: #e6ce95; font-size: 12.5px; } .aivs-pm__cost { color: var(--st-ink2); font-size: 13px; } .aivs-pm__tips { margin: 0; padding-left: 18px; color: var(--st-muted); font-size: 12.5px; } .aivs-pm__ask { align-self: flex-start; gap: 6px; } .aivs-pm__ask .aivs-ico { width: 15px; height: 15px; } .aivs-pm__all { align-self: flex-start; margin-top: 6px; color: var(--st-green-deep); font-weight: 600; text-decoration: none; } .aivs-pm__all:hover { text-decoration: underline; } .aivs-pm__live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* "ชี้ให้ดู": the page's own field, lit in gold for a moment */ .aivs--studio .aivs-pmhit { outline: 3px solid #d7b04e !important; outline-offset: 4px; border-radius: 10px; animation: aivs-pmhit .9s ease-in-out 3; } @keyframes aivs-pmhit { 0% { box-shadow: 0 0 0 0 rgba(215, 176, 78, .55); } 100% { box-shadow: 0 0 0 14px rgba(215, 176, 78, 0); } } .aivs--studio .aivs-pagehead .aivs-helplink[aria-expanded="true"] { background: var(--st-tint); border-color: var(--st-green2); color: var(--st-green-deep); } /* the update box: the jobs an install waits for (v1.35.1) */ .aivs--studio .aivs-updwait { border-color: #eedbaf; background: rgba(230, 194, 101, .14); } .aivs--studio .aivs-updwait p { margin: 0 0 6px; } .aivs--studio .aivs-updwait__list { margin: 4px 0 8px; padding-left: 20px; display: grid; gap: 4px; } /* the page head's button: the first visit's hint (it glows a few times, never opens by itself) */ .aivs--studio .aivs-pagehead__actions { position: relative; } .aivs--studio .aivs-helplink.is-hint { position: relative; border-color: #d7b04e; box-shadow: 0 0 0 0 rgba(215, 176, 78, .5); animation: aivs-pmglow 1.6s ease-out 4; } .aivs--studio .aivs-helplink.is-hint::after { content: ""; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: #d7b04e; box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); } @keyframes aivs-pmglow { 0% { box-shadow: 0 0 0 0 rgba(215, 176, 78, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(215, 176, 78, 0); } } .aivs--studio .aivs-pmhint { position: absolute; z-index: 40; top: calc(100% + 10px); right: 0; width: max-content; max-width: 260px; display: flex; align-items: flex-start; gap: 8px; padding: 10px 6px 10px 12px; border-radius: 12px; background: var(--st-forest); color: #fff; font-size: 13px; line-height: 1.5; box-shadow: var(--g-shadow-lg); } .aivs--studio .aivs-pmhint::before { content: ""; position: absolute; top: -6px; right: 22px; width: 12px; height: 12px; background: var(--st-forest); transform: rotate(45deg); } .aivs--studio .aivs-pmhint__x { flex: none; width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; } .aivs--studio .aivs-pmhint__x:hover { background: rgba(13, 32, 48, .14); } .aivs--studio .aivs-pmhint__x .aivs-ico { width: 14px; height: 14px; stroke-width: 2.2; } /* a phone: a sheet from the bottom (75 %), a tap outside closes it; "ชี้ให้ดู" steps it aside, "กลับไปที่คู่มือ" brings it back */ body.aivs-studio .aivs--studio > .aivs-pmscrim { position: fixed; inset: 0; z-index: 100005; max-width: none; margin: 0; background: rgba(21, 37, 49, .32); } body.aivs-studio .aivs--studio > .aivs-pmscrim[hidden], body.aivs-studio .aivs--studio > .aivs-pmpill[hidden] { display: none; } body.aivs-studio .aivs--studio > .aivs-pmpill { position: fixed; z-index: 100004; left: 50%; bottom: calc(158px + env(safe-area-inset-bottom)); max-width: none; margin: 0; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--st-forest); color: #fff; font: inherit; font-size: 14px; font-weight: 600; box-shadow: var(--g-shadow-lg); cursor: pointer; } body.aivs-studio .aivs--studio > .aivs-pmpill .aivs-ico { width: 16px; height: 16px; } body.aivs-studio.aivs-pm-lock { overflow: hidden; } @media (max-width: 760px) { body.aivs-studio .aivs--studio > .aivs-pm.is-sheet { z-index: 100006; top: auto; left: 0; right: 0; width: auto; height: 75vh; height: 75dvh; border-left: 0; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -12px 36px rgba(0, 0, 0, .59); animation: aivs-pm-up .24s cubic-bezier(.2, .8, .2, 1); } body.aivs-studio .aivs--studio > .aivs-pm.is-sheet.is-closing { animation: aivs-pm-down .2s ease-in forwards; } .aivs-pm.is-sheet .aivs-pm__head { padding-top: 20px; border-radius: 18px 18px 0 0; } .aivs-pm.is-sheet .aivs-pm__grab { display: block; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(20, 42, 60, .62); } .aivs-pm__step, .aivs-pm__topicbody { font-size: 14.5px; } .aivs--studio .aivs-pmhint { right: auto; left: 0; } .aivs--studio .aivs-pmhint::before { right: auto; left: 22px; } } @keyframes aivs-pm-up { from { transform: translateY(100%); } } @keyframes aivs-pm-down { to { transform: translateY(100%); } } @media (prefers-reduced-motion: reduce) { body.aivs-studio .aivs--studio > .aivs-pm, body.aivs-studio .aivs--studio > .aivs-pm.is-sheet, .aivs--studio .aivs-pmhit, .aivs--studio .aivs-helplink.is-hint { animation: none; } .aivs-pm__topic > summary::after { transition: none; } } @media print { body.aivs-studio .aivs--studio > .aivs-pm, body.aivs-studio .aivs--studio > .aivs-pmpill { display: none; } } /* ---------------------------------------------------------------- v1.33.1 the new-video form: the summary is a dark bar at its foot (the canvas "สร้างวิดีโอใหม่ พร้อมแชท AI"): the length, the whole job's AI cost, what the button pays now, the button; every line of the summary opens under "รายละเอียดและที่มาของราคา" */ .aivs--studio .aivs-new:has(> .aivs-summary--bar) { grid-template-columns: minmax(0, 1fr); gap: 16px; } body.aivs-studio .aivs--studio .aivs-summary.aivs-summary--bar { position: sticky; top: auto; bottom: 16px; z-index: 30; padding: 14px 16px 14px 20px; border: 0; border-radius: 16px; background: var(--st-forest); color: #fff; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .6); -webkit-backdrop-filter: none; backdrop-filter: none; } .aivs-sumbar__row { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; } .aivs-sumbar__facts { display: flex; flex-wrap: wrap; gap: 6px 24px; min-width: 0; font-size: 14px; } .aivs-sumbar__fact { min-width: 0; } .aivs-sumbar__fact small { display: block; color: #aab7c1; font-size: 12px; line-height: 1.4; } .aivs-sumbar__fact strong { display: block; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } body.aivs-studio .aivs--studio .aivs-summary--bar .aivs-sumbar__row > .aivs-btn { width: auto; flex: 0 1 auto; margin: 0 0 0 auto; min-height: 48px; padding: 6px 20px; border: 0; border-radius: 12px; background: #35c27a; color: #0a2334; font-weight: 700; box-shadow: none; text-shadow: none; } body.aivs-studio .aivs--studio .aivs-summary--bar .aivs-sumbar__row > .aivs-btn:hover:not(:disabled) { background: #4ad18b; color: #0a2334; } body.aivs-studio .aivs--studio .aivs-summary--bar .aivs-sumbar__row > .aivs-btn:disabled { background: #6c7982; color: #e8f1ec; opacity: 1; } body.aivs-studio .aivs--studio .aivs-summary--bar .aivs-sumbar__row > .aivs-btn:focus-visible { outline: 2px solid rgba(140, 195, 230, .156); outline-offset: 2px; } .aivs-sumbar__more > summary { display: inline-flex; align-items: center; min-height: 32px; margin-top: 6px; color: #cfe3d8; font-size: 13px; cursor: pointer; } .aivs-sumbar__more > summary:hover { color: #fff; } .aivs-sumbar__more > summary:focus-visible { outline: 2px solid rgba(140, 195, 230, .156); outline-offset: 2px; border-radius: 6px; } .aivs-sumbar__panel { margin-top: 8px; padding: 14px 16px; border-radius: 12px; background: #0d2030; color: var(--st-ink); max-height: min(50vh, 440px); overflow-y: auto; } .aivs-sumbar__panel h2 { font-size: 15px; margin: 0 0 8px; } @media (max-width: 760px) { body.aivs-studio .aivs--studio .aivs-summary.aivs-summary--bar { position: static; padding: 14px; } body.aivs-studio .aivs--studio .aivs-summary--bar .aivs-sumbar__row > .aivs-btn { width: 100%; margin: 0; } .aivs-sumbar__facts { gap: 4px 18px; } } /* ---------------------------------------------------------------- v1.33.1 the job page (the canvas "หน้างาน"): a finished vertical video on the left with its buttons (in sight while the page scrolls), the job's cards on the right; one column on a narrow page */ .aivs--studio .aivs-jobgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } .aivs--studio .aivs-jobgrid__main { display: flex; flex-direction: column; gap: 0; min-width: 0; } .aivs--studio .aivs-jobgrid__main > :first-child { margin-top: 0; } @container aivs (min-width: 720px) { .aivs--studio .aivs-jobgrid { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 24px; align-items: start; } .aivs--studio .aivs-jobgrid__media { position: sticky; top: 16px; } .aivs--studio .aivs-jobgrid__media .aivs-result { display: flex; flex-direction: column; gap: 12px; margin: 0; } .aivs--studio .aivs-jobgrid__media .aivs-result > * { width: 100%; max-width: none; } .aivs--studio .aivs-jobgrid__media .aivs-result video { width: 100%; height: auto; max-height: calc(100vh - 220px); object-fit: contain; } .aivs--studio .aivs-jobgrid__media .aivs-result__side { padding: 16px; } } /* ---------------------------------------------------------------- v1.33.1 the studio's logo card (ตั้งค่า → ค่าเริ่มต้น; the canvas "โลโก้ของสตูดิโอ"). 1.33.0 shipped this card without its styles - the logo showed at its full size (the owner's screenshot, 21 Oct 12:34) */ .aivs--studio .aivs-slogo { display: grid; gap: 16px; } .aivs--studio .aivs-slogo__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; } .aivs--studio .aivs-slogo__preview, .aivs--studio .aivs-acct__preview { flex: none; width: 134px; height: 134px; box-sizing: border-box; display: grid; place-items: center; padding: 12px; overflow: hidden; border: 1px solid var(--st-edge); border-radius: 14px; background: repeating-conic-gradient(rgba(20, 42, 60, .62) 0% 25%, #0d2030 0% 50%) 0 0 / 16px 16px; } .aivs--studio .aivs-slogo__preview img, .aivs--studio .aivs-acct__preview img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .aivs--studio .aivs-acct__preview.is-empty span { font-size: 12.5px; color: var(--st-muted); text-align: center; } .aivs--studio .aivs-slogo__btns { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: min(220px, 100%); } .aivs--studio .aivs-slogo__btns .aivs-btn { justify-content: center; } .aivs--studio .aivs-slogo__btns .aivs-btn--soft { background: var(--st-tint); border-color: transparent; color: var(--st-green-deep); font-weight: 600; } .aivs--studio .aivs-slogo__names { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; } @container aivs (max-width: 640px) { .aivs--studio .aivs-slogo__names { grid-template-columns: minmax(0, 1fr); } } .aivs--studio .aivs-slogo__icons { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px; padding: 16px 18px; border: 1px solid var(--st-edge); border-radius: 14px; background: #0d2030; } .aivs--studio .aivs-slogo__icons figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; } .aivs--studio .aivs-slogo__icons img { display: block; object-fit: contain; border-radius: 3px; box-shadow: 0 0 0 1px var(--st-line); } .aivs--studio .aivs-slogo__icons img.aivs-slogo__home { border-radius: 14px; box-shadow: none; } .aivs--studio .aivs-slogo__icons figcaption { font-size: 12px; color: var(--st-muted); } .aivs--studio .aivs-slogo__framer { display: grid; gap: 10px; justify-items: start; } .aivs--studio .aivs-slogo__framer > .aivs-fine { margin: 0; } .aivs--studio .aivs-slogo__stage { position: relative; width: min(320px, 100%); max-height: 320px; overflow: hidden; border: 1px solid var(--st-edge); border-radius: 12px; background: repeating-conic-gradient(rgba(20, 42, 60, .62) 0% 25%, #0d2030 0% 50%) 0 0 / 16px 16px; } .aivs--studio .aivs-slogo__frameimg { display: block; width: 100%; height: 100%; object-fit: contain; } .aivs--studio .aivs-slogo__square { position: absolute; box-sizing: border-box; border: 2px solid var(--st-green2); border-radius: 4px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .6); } .aivs--studio .aivs-slogo__sliders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; width: min(520px, 100%); } .aivs--studio .aivs-slogo__slider { display: grid; gap: 4px; font-size: 13px; color: var(--st-ink2); } @container aivs (max-width: 520px) { .aivs--studio .aivs-slogo__sliders { grid-template-columns: minmax(0, 1fr); } } /* the owner's switch "ให้คลิปของสมาชิกใช้โลโก้นี้ด้วย" drawn as a switch (still a checkbox for the keyboard and screen readers) */ .aivs--studio .aivs-brandbox__members { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--st-line); } .aivs--studio .aivs-brandbox__members input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 52px; height: 30px; margin: 0; border-radius: 999px; background: var(--st-line2); cursor: pointer; transition: background .15s; } .aivs--studio .aivs-brandbox__members input[type=checkbox]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #0d2030; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); transition: transform .15s; } .aivs--studio .aivs-brandbox__members input[type=checkbox]:checked { background: var(--st-green2); } .aivs--studio .aivs-brandbox__members input[type=checkbox]:checked::before { transform: translateX(22px); } .aivs--studio .aivs-brandbox__members input[type=checkbox]:focus-visible { outline: 2px solid var(--st-green2); outline-offset: 2px; } .aivs--studio .aivs-brandbox__members input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { .aivs--studio .aivs-brandbox__members input[type=checkbox], .aivs--studio .aivs-brandbox__members input[type=checkbox]::before { transition: none; } } /* ---------------------------------------------------------------- v1.33.1 บัญชีของฉัน (a member's own page) */ .aivs--studio .aivs-acct { display: grid; gap: 16px; } .aivs--studio .aivs-acct__panel h2 { font-size: 17px; } .aivs--studio .aivs-acct__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .aivs--studio .aivs-acct__row .aivs-input { flex: 1 1 260px; min-width: 0; max-width: 460px; } .aivs--studio .aivs-acct__logo { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; } .aivs--studio .aivs-acct__logobtns { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; flex: 1 1 240px; } .aivs--studio .aivs-acct__used { margin: 0; font-weight: 600; color: var(--st-ink2); } .aivs--studio .aivs-acct__now { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .aivs--studio .aivs-aifilled { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 10px 12px; border-radius: 12px; background: var(--st-tint); color: var(--st-green-deep); font-size: 13.5px; line-height: 1.55; } .aivs--studio .aivs-aifilled > .aivs-ico { flex: none; width: 18px; height: 18px; margin-top: 2px; } .aivs--studio .aivs-aifilled > span { flex: 1 1 auto; min-width: 0; } .aivs--studio .aivs-aifilled__x { flex: none; width: 32px; height: 32px; margin: -4px -4px -4px 0; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--st-green-deep); cursor: pointer; } .aivs--studio .aivs-aifilled__x:hover { background: rgba(13, 72, 114, .1); } .aivs--studio .aivs-aifilled__x .aivs-ico { width: 16px; height: 16px; } .aivs-ai__price { font-weight: 500; opacity: .9; } /* ---------------------------------------------------------------- v1.33.1 ใครใช้อะไร (ตั้งค่า → เงิน): who used which tool, the popular tools first */ .aivs--studio .aivs-ut { display: grid; gap: 14px; } .aivs--studio .aivs-ut__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .aivs--studio .aivs-ut__seg { margin: 0; } .aivs--studio .aivs-ut__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .aivs--studio .aivs-ut__tiles > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--st-soft); border: 1px solid var(--st-line); min-width: 0; } .aivs--studio .aivs-ut__tiles small { color: var(--st-muted); font-size: 12.5px; } .aivs--studio .aivs-ut__tiles strong { font-size: 18px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .aivs--studio .aivs-ut__tiles .aivs-ut__top { font-size: 15px; line-height: 1.4; } .aivs--studio .aivs-ut__table td, .aivs--studio .aivs-ut__table th { vertical-align: top; } .aivs--studio .aivs-ut__table td:nth-child(n+2) { font-variant-numeric: tabular-nums; } .aivs--studio .aivs-ut__rank { width: 32px; color: var(--st-muted); font-weight: 600; } .aivs--studio .aivs-ut__meter { display: block; height: 4px; margin-top: 6px; border-radius: 999px; background: var(--st-line); overflow: hidden; max-width: 240px; } .aivs--studio .aivs-ut__meter > span { display: block; height: 100%; border-radius: inherit; background: var(--st-green2); } .aivs--studio .aivs-ut__group { display: inline-block; font-size: 11.5px; font-weight: 600; line-height: 1.6; padding: 0 8px; border-radius: 999px; background: var(--st-tint); color: var(--st-green-deep); } .aivs--studio .aivs-ut__group--claude { background: rgba(105, 76, 240, .14); color: #dedbf2; } .aivs--studio .aivs-ut__group--video { background: rgba(77, 146, 239, .14); color: #cbddf5; } .aivs--studio .aivs-ut__group--image { background: rgba(240, 166, 76, .14); color: #f0cda4; } .aivs--studio .aivs-ut__group--voice, .aivs--studio .aivs-ut__group--listen { background: rgba(105, 211, 151, .14); color: #8decd0; } .aivs--studio .aivs-ut__group--music, .aivs--studio .aivs-ut__group--sound { background: rgba(235, 82, 133, .14); color: #f6d5e2; } .aivs--studio .aivs-ut__h { margin: 8px 0 0; font-size: 15px; } .aivs--studio .aivs-ut__person { border: 1px solid var(--st-line); border-radius: 14px; padding: 8px 12px; background: #0d2030; } .aivs--studio .aivs-ut__person > summary { cursor: pointer; min-height: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .aivs--studio .aivs-ut__person[open] > summary { margin-bottom: 8px; } body.aivs-studio .aivs-ai .aivs-director.is-docked .aivs-director__input { border: 1.5px solid var(--st-green2); border-radius: 12px; background: #0d2030; } body.aivs-studio .aivs-ai .aivs-director.is-docked .aivs-director__msg.is-ai { border-radius: 14px 14px 14px 4px; border-color: rgba(140, 195, 230, .282); } body.aivs-studio .aivs-ai .aivs-director.is-docked .aivs-director__msg.is-me { border-radius: 14px 14px 4px 14px; } body.aivs-studio .aivs-ai .aivs-director.is-docked .aivs-director__list { background: rgba(20, 42, 60, .62); margin: 0 -16px; padding: 12px 16px; } /* ---------------------------------------------------------------- v1.33.1 the logo apart from the icon (owner 21 Oct 14:38 "โลโก้ อยากแยกกับไอคอนมือถือ") the menu shows the whole logo when the owner picks it (ตั้งค่า → ค่าเริ่มต้น → โลโก้ของสตูดิโอ); the icon is for the tab and the home screen */ .aivs--studio .aivs-brand--logo .aivs-brand__link { justify-content: flex-start; } .aivs--studio .aivs-brand__logo { display: block; flex: none; width: auto; height: auto; max-width: 100%; max-height: 64px; object-fit: contain; } @media (max-width: 1100px) { .aivs--studio .aivs-brand__logo { max-width: 180px; max-height: 38px; } } @media (max-width: 760px) { .aivs--studio .aivs-brand--logo { min-width: 0; flex: 0 1 auto; } .aivs--studio .aivs-brand__logo { max-width: min(46vw, 180px); max-height: 32px; } } .aivs--studio .aivs-slogo__show { justify-self: start; } .aivs--studio .aivs-slogo__iconbox { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid var(--st-edge); border-radius: 14px; background: #0d2030; } .aivs--studio .aivs-slogo__iconbox > .aivs-fine { margin: 0; } .aivs--studio .aivs-slogo__iconbox .aivs-slogo__icons { padding: 0; border: 0; border-radius: 0; } .aivs--studio .aivs-slogo__iconhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; } .aivs--studio .aivs-slogo__iconhead > div:first-child { display: grid; gap: 2px; min-width: 0; } .aivs--studio .aivs-slogo__iconhead small { font-size: 13px; color: var(--st-muted); } .aivs--studio .aivs-slogo__iconbtns { display: flex; flex-wrap: wrap; gap: 8px; } /* v1.33.1: a phone has no tab bar at the bottom any more (the pages are in ☰; the AI's bar steps aside while a guide runs) - the guide put away and its round button sit at the bottom of the screen instead of 88-92 px above it */ @media (max-width: 760px) { body.aivs-studio .aivs-guide.is-min { bottom: calc(12px + env(safe-area-inset-bottom)); } body.aivs-studio .aivs-gfab { bottom: calc(16px + env(safe-area-inset-bottom)); } } /* v1.33.1: a tablet with the AI's rail on the right has 64 px less for the top bar - the studio's name gives way (its icon stays, the whole logo shrinks) so the pages keep their short names (1024 px: all nine with names, as in 1.33.0) */ @media (min-width: 761px) and (max-width: 1100px) { body.aivs-studio.aivs-ai-rail .aivs--studio .aivs-brand__text { display: none; } body.aivs-studio.aivs-ai-rail .aivs--studio .aivs-brand__logo { max-width: 120px; max-height: 34px; } } /* ---------------------------------------------------------------- v1.33.2 the trial box: the warning when a model that takes no mask meets several clear faces stands out from the fine print around it */ .aivs--studio .aivs-try__warn { color: #f0cda4; font-weight: 600; } /* ---------------------------------------------------------------- v1.33.3 ชมสตูดิโอ: a visitor (not logged in) opens every page a member sees (owner 21 Oct 19:30); the bar says so, the menu's corner is "เข้าสู่ระบบ", a pressed button that needs an account opens a box */ .aivs--studio .aivs-guestbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid rgba(105, 211, 152, .45); border-radius: 16px; background: var(--st-tint); color: var(--st-ink); font-size: 14.5px; line-height: 1.5; } .aivs--studio .aivs-guestbar__ico { display: inline-flex; width: 32px; height: 32px; flex: none; align-items: center; justify-content: center; border-radius: 10px; background: #0d2030; color: var(--st-green-ink); } .aivs--studio .aivs-guestbar__ico .aivs-ico { width: 18px; height: 18px; } .aivs--studio .aivs-guestbar__text { flex: 1 1 280px; min-width: 0; } .aivs--studio .aivs-guestbar .aivs-btn { min-height: 40px; } .aivs--studio .aivs-guestmenu { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; box-sizing: border-box; margin-top: auto; padding: 12px; border-radius: 14px; background: var(--st-ground); } .aivs--studio .aivs-guestmenu__text { display: flex; flex-direction: column; line-height: 1.35; padding: 0 2px; text-align: left; } .aivs--studio .aivs-guestmenu__text small { color: var(--st-muted); font-size: 12.5px; } .aivs--studio .aivs-guestmenu .aivs-btn { justify-content: center; min-height: 44px; } @media (max-width: 1100px) { .aivs--studio .aivs-guestmenu { flex-direction: row; align-items: center; width: auto; margin: 0 0 0 auto; padding: 0; gap: 8px; background: none; } .aivs--studio .aivs-guestmenu__text { display: none; } .aivs--studio .aivs-guestmenu .aivs-btn { min-height: 40px; padding: 0 14px; } } body.aivs-studio .aivs.aivs-guestbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; max-width: none; margin: 0; padding: 16px; background: rgba(21, 37, 49, .42); } .aivs-guestbox__card { width: min(440px, 100%); padding: 24px 22px 18px; border-radius: 20px; background: #0d2030; color: #e8edf1; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); font-family: inherit; } .aivs-guestbox__ico { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 14px; background: rgba(105, 211, 151, .14); color: #34deab; } .aivs-guestbox__ico .aivs-ico { width: 24px; height: 24px; } .aivs-guestbox h2 { margin: 12px 0 6px; font-size: 20px; line-height: 1.35; } .aivs-guestbox p { margin: 0 0 14px; color: #d8dfe4; font-size: 15px; line-height: 1.6; } .aivs-guestbox__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; } .aivs-guestbox__btns .aivs-btn { min-width: 120px; min-height: 44px; justify-content: center; } .aivs-guestbox .aivs-fine { margin: 6px 0 0; font-size: 13.5px; } .aivs--studio .aivs-guestempty { display: flex; flex-direction: column; align-items: center; gap: 12px; } .aivs--studio .aivs-ai__guest a { font-weight: 600; } /* ================================================================ v1.33.3 liquid glass in the logo's colours (owner 21 Oct 19:49-19:57: "ของเราจืดชืด", "อยากได้สีให้เข้ากับโลโก้ … ให้โลโก้เด่น", "แถบต่างๆ ให้มีดี สวยงาม มองออก แต่ให้ออกสไตล์ liquid glass"). + 21 Oct 20:06 "แต่สีให้เข้ากับ Ai ด้วยนะ": an aqua aurora light (the colour of AI tools) in the ground, the menu and the bars, a faint dot grid, and the AI's own parts (the chat, its box, the send button) edged with the emerald - aqua - gold line. Emerald + gold from the KAORANK logo. A deep emerald glass menu, so a gold / green logo stands out on it; light glass cards on a soft emerald-and-gold ground; the chosen item of every bar is a glossy emerald pill with a thin gold edge (seen at a glance); gold is kept for the one action that starts the work (the start button, log in). Blur only where the page scrolls under a surface (the bars on a phone / tablet, the summary bar, menus): over the fixed ground a see-through card looks the same without it, and stays light on a phone. */ body.aivs-studio { --kr-900: #031827; --kr-850: #052236; --kr-800: #062d48; --kr-700: #0a4168; --kr-600: #0e5587; --kr-500: #13916b; --kr-400: #2fb88f; --kr-300: #4cd881; --kr-gold-700: #7a5a12; --kr-gold-600: #ba9544; --kr-gold-500: #d7b04e; --kr-gold-400: #e6c567; --kr-gold-300: #f1d478; --kr-gold-100: rgba(230, 199, 101, .14); --kr-aqua: #2dd4a2; --kr-aqua-600: #0d946c; --kr-cyan: #22d3ee; --kr-ai: linear-gradient(115deg, #13916b 0%, #14b887 38%, #22d3ee 62%, #e6c567 100%); --st-ink: #daf4ec; --st-ink2: #d7e1e8; --st-muted: #c4ccd2; --st-green2: #0e5587; --st-green-ink: #6ee7c3; --st-green-deep: #0a4168; --st-tint: rgba(19, 145, 107, .12); --st-tint2: rgba(19, 145, 107, .2); --st-ground: rgba(13, 32, 48, .55); --st-soft: rgba(13, 32, 48, .7); --st-edge: rgba(140, 195, 230, .156); --st-line: rgba(140, 195, 230, .13); --st-line2: rgba(140, 195, 230, .26); --g-fill: rgba(13, 32, 48, .58); --g-solid: rgba(13, 32, 48, .64); --g-edge: rgba(140, 195, 230, .117); --g-shadow: inset 0 1px 0 rgba(255, 255, 255, .114), 0 1px 2px rgba(5, 34, 54, .06), 0 14px 34px -18px rgba(5, 34, 54, .3); --g-shadow-lg: 0 26px 60px -22px rgba(5, 34, 54, .38), 0 0 0 1px rgba(255, 255, 255, .072); --kr-pill: linear-gradient(180deg, #27b087 0%, #105789 55%, #0d5181 100%); --kr-pill-hover: linear-gradient(180deg, #2fbd92 0%, #128a66 55%, #0e578b 100%); --kr-pill-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 -1px 0 rgba(0, 0, 0, .47), 0 0 0 1px rgba(215, 176, 78, .7), 0 6px 14px -6px rgba(12, 79, 127, .7), 0 0 18px -6px rgba(45, 212, 162, .55); --kr-gold: linear-gradient(180deg, #f6e5a5 0%, #eaca6c 40%, #d7b04e 74%, #c69d3e 100%); --kr-gold-hover: linear-gradient(180deg, #feeea6 0%, #eed27d 40%, #deb958 74%, #caa449 100%); --kr-gold-shadow: inset 0 1px 0 rgba(255, 255, 255, .084), inset 0 -1px 0 rgba(122, 90, 18, .35), 0 10px 22px -12px rgba(186, 149, 68, .95); --kr-dark-glass: linear-gradient(180deg, rgba(11, 70, 111, .9) 0%, rgba(6, 45, 72, .93) 48%, rgba(3, 25, 40, .96) 100%); --kr-aurora: radial-gradient(70% 90% at 100% 100%, rgba(45, 212, 162, .22), transparent 70%); --kr-track: rgba(13, 32, 48, .5); --kr-track-shadow: inset 0 1px 2px rgba(5, 34, 54, .1), inset 0 0 0 1px rgba(15, 59, 90, .09), 0 1px 0 rgba(255, 255, 255, .108); background: rgba(20, 42, 60, .62); } /* the ground: soft emerald and gold light behind the glass (fixed: it does not move or repaint as the page scrolls) */ body.aivs-studio::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(62vmax 46vmax at 8% 0%, rgba(19, 145, 107, .34), transparent 62%), radial-gradient(52vmax 40vmax at 100% 0%, rgba(230, 197, 103, .38), transparent 60%), radial-gradient(44vmax 30vmax at 62% 38%, rgba(45, 212, 162, .22), transparent 66%), radial-gradient(36vmax 26vmax at 30% 62%, rgba(34, 211, 238, .1), transparent 66%), radial-gradient(56vmax 46vmax at 88% 100%, rgba(14, 85, 135, .28), transparent 62%), radial-gradient(46vmax 36vmax at 18% 100%, rgba(241, 212, 120, .26), transparent 60%), linear-gradient(165deg, rgba(105, 211, 145, .14) 0%, rgba(20, 42, 60, .62) 48%, rgba(209, 187, 123, .14) 100%); } body.aivs-studio::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(10, 65, 104, .2) 1px, transparent 1.5px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(80% 70% at 60% 30%, #000 0%, transparent 75%); mask-image: radial-gradient(80% 70% at 60% 30%, #000 0%, transparent 75%); } .aivs--studio { --aivs-line: rgba(140, 195, 230, .182); --aivs-primary: #0e5587; --aivs-primary-ink: #9befd6; } .aivs--studio a { color: var(--st-green-ink); } .aivs--studio a:hover { color: var(--kr-700); } .aivs--studio .aivs-pagehead__title { color: #cbf7ea; } /* ---- the menu: deep emerald glass, the logo on top with a little gold light behind it */ .aivs--studio > .aivs-head { color: #e6f4ec; border-right: 0; background: radial-gradient(130% 34% at 50% 0%, rgba(241, 212, 120, .2), transparent 72%), radial-gradient(150% 40% at 30% 100%, rgba(45, 212, 162, .34), transparent 72%), var(--kr-dark-glass); box-shadow: inset -1px 0 0 rgba(241, 212, 120, .3), inset 0 1px 0 rgba(255, 255, 255, .01), 14px 0 44px -24px rgba(3, 25, 40, .6); } .aivs--studio .aivs-head :focus-visible { outline-color: var(--kr-gold-300); } .aivs--studio .aivs-brand { margin: 0 0 14px; padding: 2px 4px 16px; border-bottom: 1px solid rgba(241, 212, 120, .22); } .aivs--studio .aivs-brand__link, .aivs--studio .aivs-brand__link:hover { color: #f6f8fa; } .aivs--studio .aivs-brand--logo .aivs-brand__link { justify-content: center; } .aivs--studio .aivs-brand__logo { max-height: min(150px, 18vh); } .aivs--studio .aivs-brand__sub { color: rgba(230, 244, 236, .72); } .aivs--studio .aivs-tabs a { position: relative; color: rgba(232, 245, 238, .82); } .aivs--studio .aivs-tabs a .aivs-ico { color: rgba(176, 224, 199, .85); } .aivs--studio .aivs-tabs a:hover { background: rgba(13, 32, 48, .09); color: #fff; } .aivs--studio .aivs-tabs a:hover .aivs-ico { color: var(--kr-gold-300); } .aivs--studio .aivs-tabs a.is-current { color: #fff; font-weight: 600; background: linear-gradient(180deg, rgba(13, 32, 48, .2), rgba(13, 32, 48, .07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .036), inset 0 0 0 1px rgba(241, 212, 120, .6), 0 10px 22px -12px rgba(0, 0, 0, .6); } .aivs--studio .aivs-tabs a.is-current .aivs-ico { color: var(--kr-gold-300); } @media (min-width: 1101px) { .aivs--studio .aivs-tabs a.is-current::before { content: ""; position: absolute; left: -14px; top: 11px; bottom: 11px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--kr-gold-300), var(--kr-gold-500)); box-shadow: 0 0 10px rgba(241, 212, 120, .7); } } /* who is logged in (the foot of the menu) */ .aivs--studio .aivs-usermenu__btn { background: rgba(13, 32, 48, .08); color: #f1faf5; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .013), inset 0 1px 0 rgba(255, 255, 255, .017); } .aivs--studio .aivs-usermenu__btn:hover, .aivs--studio .aivs-usermenu.is-open .aivs-usermenu__btn { background: rgba(13, 32, 48, .14); } .aivs--studio .aivs-usermenu__btn > .aivs-ico { color: rgba(230, 244, 236, .72); } .aivs--studio .aivs-usermenu__btn .aivs-usermenu__role { color: var(--kr-gold-300); } .aivs--studio .aivs-usermenu__btn .aivs-usermenu__spend { color: rgba(230, 244, 236, .74); } .aivs--studio .aivs-avatar { background: linear-gradient(135deg, #f6e5a5, #d7b04e 60%, #ba9544); color: #f9eedb; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .072); } .aivs--studio .aivs-usermenu__pop { background: rgba(13, 32, 48, .9); border-color: rgba(140, 195, 230, .125); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); } .aivs--studio .aivs-rolechip { color: var(--kr-gold-700); background: var(--kr-gold-100); } /* a visitor (ชมสตูดิโอ): the log-in card at the foot of the menu */ .aivs--studio .aivs-guestmenu { background: rgba(13, 32, 48, .08); color: #f1faf5; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .013), inset 0 1px 0 rgba(255, 255, 255, .017); } .aivs--studio .aivs-guestmenu__text small { color: rgba(230, 244, 236, .74); } /* ---- buttons: glass; the main action a glossy emerald; the start / log-in action gold like the logo */ .aivs--studio .aivs-btn { background: rgba(13, 32, 48, .72); border-color: rgba(140, 195, 230, .208); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .114), 0 1px 2px rgba(5, 34, 54, .06); } .aivs--studio .aivs-btn:hover { background: rgba(13, 32, 48, .94); border-color: rgba(140, 195, 230, .585); color: var(--kr-700); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 16px -10px rgba(5, 34, 54, .4); } .aivs--studio .aivs-btn--primary, .aivs--studio .aivs-btn--primary:hover { color: #fff; border-color: transparent; background: var(--kr-pill); box-shadow: var(--kr-pill-shadow); } .aivs--studio .aivs-btn--primary:hover { background: var(--kr-pill-hover); } .aivs--studio .aivs-btn--soft { background: rgba(19, 145, 107, .12); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .072); color: var(--kr-700); } .aivs--studio .aivs-btn--soft:hover { background: rgba(19, 145, 107, .2); border-color: transparent; } .aivs--studio .aivs-btn--quiet, .aivs--studio .aivs-btn--quiet:hover { background: transparent; box-shadow: none; } .aivs--studio .aivs-head .aivs-btn--primary, .aivs--studio .aivs-guestbar .aivs-btn--primary, .aivs-guestbox .aivs-btn--primary, body.aivs-studio .aivs--studio .aivs-summary--bar .aivs-sumbar__row > .aivs-btn { color: #2b1d03; border-color: transparent; background: var(--kr-gold); box-shadow: var(--kr-gold-shadow); text-shadow: 0 1px 0 rgba(255, 255, 255, .042); } .aivs--studio .aivs-head .aivs-btn--primary:hover, .aivs--studio .aivs-guestbar .aivs-btn--primary:hover, .aivs-guestbox .aivs-btn--primary:hover, body.aivs-studio .aivs--studio .aivs-summary--bar .aivs-sumbar__row > .aivs-btn:hover:not(:disabled) { color: #2b1d03; background: var(--kr-gold-hover); } body.aivs-studio .aivs--studio .aivs-summary--bar .aivs-sumbar__row > .aivs-btn:disabled { background: rgba(13, 32, 48, .16); color: rgba(241, 246, 249, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .022); text-shadow: none; } /* ---- every bar of choices: a glass track; the chosen one a glossy emerald pill with a gold edge */ /* a choice row that wraps (ประเภทงาน …): each choice its own glass pill; one row of page tabs: a glass track */ .aivs--studio .aivs-seg { gap: 8px; } .aivs--studio .aivs-seg button { padding: 8px 16px; border: 1px solid rgba(140, 195, 230, .182); background: rgba(13, 32, 48, .66); color: var(--st-ink2); font-weight: 550; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .114), 0 1px 2px rgba(5, 34, 54, .06); } .aivs--studio .aivs-seg button:hover { border-color: rgba(140, 195, 230, .52); background: rgba(13, 32, 48, .95); color: var(--st-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 14px -8px rgba(5, 34, 54, .35); } .aivs--studio .aivs-seg button.is-on { border-color: transparent; } .aivs--studio .aivs-seg button.is-on, .aivs--studio .aivs-seg button.is-on:hover, .aivs--studio .aivs-subtabs a.is-current, .aivs--studio .aivs-jobs__group[aria-pressed=true], .aivs--studio .aivs-quickmode.is-on, .aivs--studio .aivs-seriestab.is-on, .aivs-ai__modes button.is-on { color: #fff; font-weight: 650; background: var(--kr-pill); box-shadow: var(--kr-pill-shadow); } .aivs--studio .aivs-seg button.is-on:hover, .aivs--studio .aivs-subtabs a.is-current:hover, .aivs--studio .aivs-jobs__group[aria-pressed=true]:hover, .aivs--studio .aivs-quickmode.is-on:hover, .aivs--studio .aivs-seriestab.is-on:hover { color: #fff; background: var(--kr-pill-hover); } .aivs--studio .aivs-subtabs, .aivs--studio .aivs-jobs__groups, .aivs--studio .aivs-quickmodes, .aivs--studio .aivs-seriestabs { border: 0; background: var(--kr-track); box-shadow: var(--kr-track-shadow); } .aivs--studio .aivs-jobs__group[aria-pressed=true] .aivs-jobs__count { background: rgba(13, 32, 48, .24); color: #fff; } .aivs-ai__modes { border: 0; padding: 3px; gap: 2px; background: var(--kr-track); box-shadow: var(--kr-track-shadow); } .aivs-ai__modes button { border-radius: 999px; background: transparent; } .aivs--studio .aivs-format.is-on { background: rgba(102, 215, 150, .123); box-shadow: inset 0 0 0 2px var(--kr-500), 0 0 0 3px rgba(230, 197, 103, .4), 0 10px 24px -14px rgba(12, 79, 127, .55); } .aivs--studio .aivs-format.is-on .aivs-ratio { color: var(--kr-600); background: rgba(19, 145, 107, .16); } .aivs--studio .aivs-chip, .aivs-ai__chip { background: rgba(13, 32, 48, .62); border-color: rgba(140, 195, 230, .195); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .108); } .aivs--studio .aivs-chip:hover, .aivs-ai__chip:hover:not(:disabled) { background: rgba(13, 32, 48, .95); border-color: rgba(140, 195, 230, .585); color: var(--kr-700); } /* ---- cards and fields: light glass */ .aivs--studio .aivs-new > .aivs-form, .aivs--studio .aivs-summary:not(.aivs-summary--bar), .aivs--studio .aivs-empty { background: var(--g-solid); border: 1px solid var(--g-edge); box-shadow: var(--g-shadow); } .aivs--studio .aivs-empty { border: 1.5px dashed rgba(140, 195, 230, .286); } .aivs--studio textarea, .aivs--studio .aivs-input, .aivs--studio select { background-color: rgba(13, 32, 48, .8); border-color: rgba(140, 195, 230, .221); box-shadow: inset 0 1px 2px rgba(5, 34, 54, .06); } .aivs--studio #aivs-idea { background: rgba(13, 32, 48, .84); box-shadow: inset 0 1px 2px rgba(5, 34, 54, .06), 0 1px 0 rgba(255, 255, 255, .108); } .aivs--studio textarea:focus, .aivs--studio .aivs-input:focus, .aivs--studio select:focus, .aivs--studio #aivs-idea:focus { border-color: var(--kr-500); background-color: #0d2030; box-shadow: 0 0 0 4px rgba(19, 145, 107, .16), 0 0 0 1px rgba(230, 197, 103, .35); } .aivs--studio .aivs-banner { background: rgba(13, 32, 48, .6); border-color: rgba(140, 195, 230, .125); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .108), 0 8px 22px -16px rgba(5, 34, 54, .35); } .aivs--studio .aivs-banner--warn { background: rgba(230, 200, 101, .109); border-color: rgba(239, 224, 179, .9); } /* ---- the dark bars (the summary at the form's foot, "ใช้ครั้งแรก?"): emerald glass */ body.aivs-studio .aivs--studio .aivs-summary.aivs-summary--bar { background: var(--kr-aurora), var(--kr-dark-glass); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .019), inset 0 0 0 1px rgba(241, 212, 120, .32), 0 22px 46px -20px rgba(3, 25, 40, .7); } .aivs-sumbar__fact small { color: rgba(205, 233, 218, .82); } .aivs-sumbar__more > summary { color: rgba(220, 240, 229, .9); } .aivs-sumbar__panel { background: rgba(13, 32, 48, .95); } .aivs--studio .aivs-gwelcome { background: radial-gradient(80% 140% at 0% 0%, rgba(241, 212, 120, .16), transparent 60%), var(--kr-aurora), var(--kr-dark-glass); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .017), inset 0 0 0 1px rgba(241, 212, 120, .3), 0 16px 34px -20px rgba(3, 25, 40, .7); } body.aivs-studio .aivs-gwelcome__ico { background: rgba(241, 212, 120, .16); color: var(--kr-gold-300); box-shadow: inset 0 0 0 1px rgba(241, 212, 120, .4); } body.aivs-studio .aivs-gwelcome .aivs-gbtn--pri { background: linear-gradient(180deg, #6ee39d 0%, #3cc77f 55%, #2bb06c 100%); color: #041c2d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .066), 0 8px 18px -10px rgba(47, 184, 143, .9); } body.aivs-studio .aivs-gwelcome .aivs-gbtn--sec { background: rgba(13, 32, 48, .08); border-color: rgba(140, 195, 230, .055); } body.aivs-studio .aivs-gbtn--pri { background: var(--kr-pill); box-shadow: var(--kr-pill-shadow); } body.aivs-studio .aivs-gbtn--pri:hover { background: var(--kr-pill-hover); } /* ---- ชมสตูดิโอ: the bar on top of each page; the log-in box */ .aivs--studio .aivs-guestbar { border: 1px solid rgba(140, 195, 230, .125); background: linear-gradient(115deg, rgba(13, 32, 48, .74), rgba(230, 199, 101, .087)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .114), 0 12px 28px -18px rgba(5, 34, 54, .35); } .aivs--studio .aivs-guestbar__ico { background: linear-gradient(135deg, #f6e5a5, #d7b04e); color: #3a2a05; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .072); } body.aivs-studio .aivs.aivs-guestbox { background: rgba(3, 25, 40, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .aivs-guestbox__card { background: rgba(13, 32, 48, .9); border: 1px solid rgba(140, 195, 230, .125); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 70px -20px rgba(3, 25, 40, .55); } .aivs-guestbox__ico { background: linear-gradient(135deg, #f6e5a5, #d7b04e); color: #3a2a05; } /* ---- the AI column (desktop) and the AI bar (phone) */ body.aivs-studio .aivs--studio > .aivs-ai { background: rgba(13, 32, 48, .6); border-left: 1px solid rgba(140, 195, 230, .125); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .084), -16px 0 44px -28px rgba(5, 34, 54, .4); } body.aivs-studio .aivs--studio > .aivs-ai.is-sheet { background: rgba(13, 32, 48, .92); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); } .aivs-ai__foot { background: rgba(13, 32, 48, .45); } .aivs-ai__log { background: transparent; } /* the chat shows the glass (it was a solid near-white) */ body.aivs-studio .aivs--studio > .aivs-ai:not(.is-rail)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--kr-ai); pointer-events: none; } .aivs-ai__title { background: linear-gradient(100deg, #9befd6 10%, #0d946c 70%, #77d0e9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .aivs-ai__ctx { background: rgba(45, 212, 162, .14); color: #81eacb; box-shadow: inset 0 0 0 1px rgba(13, 148, 108, .2); } .aivs-ai__box, .aivs-aibar__row { border: 1.5px solid transparent; box-shadow: 0 10px 24px -16px rgba(13, 148, 108, .7); background: linear-gradient(rgba(13, 32, 48, .95), rgba(13, 32, 48, .95)) padding-box, var(--kr-ai) border-box; } .aivs-ai__box:focus-within, .aivs-aibar__row:focus-within { box-shadow: 0 0 0 4px rgba(45, 212, 162, .18), 0 10px 26px -14px rgba(13, 148, 108, .7); } .aivs-ai__box.is-off { background: linear-gradient(rgba(20, 42, 60, .589), rgba(20, 42, 60, .589)) padding-box, linear-gradient(var(--st-line2), var(--st-line2)) border-box; } .aivs-ai__send { background: linear-gradient(135deg, #16a077 0%, #0f8f69 55%, #0e7490 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .042), 0 6px 16px -8px rgba(13, 148, 108, .8); } .aivs-ai__send:hover:not(:disabled) { background: linear-gradient(135deg, #1bb083 0%, #11a075 55%, #0f84a3 100%); } .aivs-ai__send:disabled { background: rgba(20, 42, 60, .62); box-shadow: none; } .aivs-ai.is-rail .aivs-ai__rail .aivs-ico, .aivs-aibar__ico { background: linear-gradient(135deg, rgba(19, 145, 107, .16), rgba(34, 211, 238, .2)); color: #5ce4bb; box-shadow: inset 0 0 0 1px rgba(13, 148, 108, .22); } .aivs-ai__msg--ai { background: rgba(13, 32, 48, .85); border-color: rgba(140, 195, 230, .14); box-shadow: 0 6px 16px -12px rgba(5, 34, 54, .35); } .aivs-ai.is-rail .aivs-ai__rail .aivs-ico { background: rgba(19, 145, 107, .14); } body.aivs-studio .aivs--studio > .aivs-aibar { background: rgba(13, 32, 48, .8); border-top: 1px solid rgba(140, 195, 230, .133); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: 0 -12px 32px -16px rgba(5, 34, 54, .35); } /* ---- log in / set a password: a glass card; the logo on a deep emerald strip at its top (a silver / gold logo fades on white) */ body.aivs-studio .st-card { overflow: hidden; background: rgba(13, 32, 48, .74); border: 1px solid rgba(140, 195, 230, .133); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 4px rgba(5, 34, 54, .05), 0 34px 70px -30px rgba(3, 25, 40, .55); } body.aivs-studio .st-card > .st-brand:first-child { justify-content: center; margin: -32px -28px 0; padding: 26px 24px 22px; color: #f6f8fa; background: radial-gradient(70% 120% at 50% 0%, rgba(241, 212, 120, .22), transparent 70%), var(--kr-aurora), var(--kr-dark-glass); box-shadow: inset 0 -1px 0 rgba(241, 212, 120, .4); } body.aivs-studio .st-card > .st-brand--logo:first-child img { max-height: 76px; } body.aivs-studio .st-field input { background: rgba(13, 32, 48, .85); } body.aivs-studio .st-field input:focus { border-color: var(--kr-500); box-shadow: 0 0 0 4px rgba(19, 145, 107, .16), 0 0 0 1px rgba(45, 212, 162, .35); } body.aivs-studio .st-btn { color: #2b1d03; background: var(--kr-gold); box-shadow: var(--kr-gold-shadow); text-shadow: 0 1px 0 rgba(255, 255, 255, .042); } body.aivs-studio .st-btn:hover { color: #2b1d03; background: var(--kr-gold-hover); } body.aivs-studio .st-code { background: linear-gradient(180deg, #082940, #031827); } /* the dark boxes elsewhere (มีอะไรใหม่ in the manual, a script, the quote's lines): the same deep emerald */ .aivs--studio .aivs-manual__new, .aivs--studio .aivs-quote__lines, .aivs-ai__script { background: var(--kr-aurora), linear-gradient(180deg, #0a4168, #041d2f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .014), inset 0 0 0 1px rgba(241, 212, 120, .25); } .aivs--studio .aivs-brand { border-image: linear-gradient(90deg, transparent, rgba(140, 195, 230, .13), rgba(241, 212, 120, .5), rgba(140, 195, 230, .13), transparent) 1; } /* ---- tablet / phone: the menu is a bar on top - the same emerald glass, blurred (the page scrolls under it). The glass is drawn on ::before, not on the bar: a blur on the bar itself would hold the phone's ☰ drawer (fixed) inside the bar */ @media (max-width: 1100px) { .aivs--studio > .aivs-head { background: none; border: 0; isolation: isolate; box-shadow: 0 18px 40px -20px rgba(3, 25, 40, .6); } .aivs--studio > .aivs-head::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient(60% 120% at 0% 0%, rgba(241, 212, 120, .16), transparent 70%), var(--kr-aurora), var(--kr-dark-glass); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .019), inset 0 0 0 1px rgba(241, 212, 120, .32); } .aivs--studio .aivs-brand { margin: 0; padding: 0; border: 0; } .aivs--studio .aivs-brand__logo { max-height: 44px; } .aivs--studio .aivs-guestmenu { background: none; box-shadow: none; } } @media (max-width: 760px) { .aivs--studio .aivs-menubtn, .aivs--studio .aivs-drawer__close { background: rgba(13, 32, 48, .1); border-color: rgba(140, 195, 230, .031); color: #f1faf5; } .aivs--studio .aivs-drawer { color: #e6f4ec; border-right: 1px solid rgba(241, 212, 120, .3); background: radial-gradient(120% 30% at 0% 0%, rgba(241, 212, 120, .16), transparent 70%), radial-gradient(140% 30% at 30% 100%, rgba(45, 212, 162, .22), transparent 72%), linear-gradient(180deg, rgba(11, 70, 111, .96), rgba(3, 25, 40, .98)); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); } .aivs--studio .aivs-drawer__top { border-bottom-color: rgba(241, 212, 120, .24); } .aivs--studio .aivs-drawer__title { color: #fff; } .aivs--studio > .aivs-scrim { background: rgba(3, 25, 40, .4); } } /* see-through off (a system setting) or no blur in the browser: the same colours, solid */ @media (prefers-reduced-transparency: reduce) { body.aivs-studio { --g-fill: #0d2030; --g-solid: #0d2030; --kr-dark-glass: linear-gradient(180deg, #0a4168, #041d2f); --kr-track: rgba(20, 42, 60, .62); } .aivs--studio > .aivs-head::before, body.aivs-studio .aivs--studio .aivs-summary.aivs-summary--bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--kr-dark-glass); } .aivs--studio .aivs-usermenu__pop, .aivs-guestbox__card, body.aivs-studio .aivs--studio > .aivs-ai, body.aivs-studio .aivs--studio > .aivs-aibar { background: #0d2030; -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-reduced-transparency: reduce) and (max-width: 760px) { .aivs--studio .aivs-head .aivs-tabs { background: none; } } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .aivs--studio > .aivs-head::before, body.aivs-studio .aivs--studio .aivs-summary.aivs-summary--bar { background: linear-gradient(180deg, #0a4168, #041d2f); } .aivs--studio .aivs-usermenu__pop, .aivs-guestbox__card { background: rgba(13, 32, 48, .98); } } @media (max-width: 760px) { @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .aivs--studio .aivs-head .aivs-tabs { background: none; } } } /* ---------------------------------------------------------------- v1.33.4 a visitor's menu (ชมสตูดิโอ) keeps the website's pages under the studio's, after a silver-gold line as on the website (owner 21 Oct 23:20 "พอกดลิงค์แล้วหายไปไหน"); a tablet's top bar has no room - the logo and the log-in box lead back there */ .aivs--studio .aivs-tabs__sep { display: block; flex: none; height: 1px; margin: 10px 8px; border: 0; background: linear-gradient(90deg, transparent, rgba(226, 229, 232, .4), rgba(241, 212, 120, .5), rgba(226, 229, 232, .4), transparent); } @media (min-width: 761px) and (max-width: 1100px) { .aivs--studio .aivs-head .aivs-tabs > .aivs-tabs__sep, .aivs--studio .aivs-head .aivs-tabs > .aivs-tabs__site { display: none; } } /* v1.34 เครดิตและราคา (owner 22 Oct 23:23-23:50): a member's balance, the price page, the owner's price settings and grants */ .aivs--studio .aivs-usermenu__credit b { color: var(--kr-gold-300); font-weight: 700; } .aivs--studio .aivs-usermenu__pop .aivs-usermenu__credit b { color: var(--kr-gold-700); } .aivs--studio .aivs-members__credit strong { display: block; font-size: 1.05rem; } .aivs--studio .aivs-members__credit small { display: block; margin-bottom: 4px; color: var(--st-muted); } .aivs--studio .aivs-creditcfg__calc { margin: 10px 0; padding: 10px 14px; border-radius: 14px; background: rgba(19, 145, 107, .08); box-shadow: inset 0 0 0 1px rgba(19, 145, 107, .18); font-weight: 600; color: var(--kr-700); } .aivs--studio .aivs-creditcfg__calc.is-low { background: rgba(220, 38, 38, .08); box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .3); color: #f5cecd; } /* v1.35.0 the real costs + the net profit */ .aivs--studio .aivs-creditcfg__h { margin: 18px 0 6px; font-size: 1rem; } .aivs--studio .aivs-creditcfg .aivs-field small { display: block; margin-top: 3px; line-height: 1.4; } .aivs--studio .aivs-creditcfg__calc { display: grid; gap: 4px; } .aivs--studio .aivs-creditcfg__calc.is-thin { background: rgba(217, 119, 6, .08); box-shadow: inset 0 0 0 1px rgba(217, 119, 6, .3); color: #f0cda6; } .aivs--studio .aivs-creditcfg__thin { font-weight: 500; } .aivs--studio .aivs-creditcfg .aivs-row { align-items: start; } .aivs--studio .aivs-creditcfg__fx { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; padding: 8px 12px; border-radius: 12px; background: var(--st-soft); box-shadow: inset 0 0 0 1px var(--st-line); font-size: .92rem; } .aivs--studio .aivs-creditcfg__fx.is-warn { background: rgba(217, 119, 6, .1); box-shadow: inset 0 0 0 1px rgba(217, 119, 6, .35); color: #f0cda6; font-weight: 600; } .aivs--studio .aivs-creditcfg__prev { margin: 4px 0 12px; } .aivs--studio .aivs-creditcfg__table td:not(:first-child), .aivs--studio .aivs-creditcfg__table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .aivs--studio .aivs-creditcfg__table td.is-new { color: var(--kr-600); font-weight: 700; } .aivs--studio .aivs-creditrep { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 4px 0 14px; } .aivs--studio .aivs-creditrep > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: rgba(13, 32, 48, .62); box-shadow: inset 0 0 0 1px rgba(15, 59, 90, .1); } .aivs--studio .aivs-creditrep strong { font-size: 1.35rem; } .aivs--studio .aivs-creditrep small { color: var(--st-muted); } .aivs--studio .aivs-creditrep .is-ok strong { color: var(--kr-600); } .aivs--studio .aivs-creditrep .is-low { box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .4); } .aivs--studio .aivs-creditrep .is-low strong { color: #f5c6c2; } .aivs-crdlg .aivs-crdlg__card { max-width: 640px; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; text-align: left; } .aivs-crdlg .aivs-crdlg__bal { font-size: 1.2rem; color: var(--kr-700, #9befd6); } .aivs-crdlg h3 { margin: 18px 0 6px; font-size: 1rem; } .aivs--studio .aivs-crhist td { vertical-align: top; } .aivs--studio .aivs-crhist__plus { color: var(--kr-600); font-weight: 700; white-space: nowrap; } .aivs--studio .aivs-crhist__minus { color: #f5cec1; font-weight: 600; white-space: nowrap; } .aivs--studio .aivs-mycredits__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .aivs--studio .aivs-mycredits__bal { display: flex; flex-direction: column; padding: 12px 18px; border-radius: 18px; background: var(--kr-dark-glass); color: #f2fbf6; box-shadow: 0 0 0 1px rgba(215, 176, 78, .45), 0 10px 26px -14px rgba(3, 25, 40, .8); } .aivs--studio .aivs-mycredits__bal strong { font-size: 1.9rem; line-height: 1.15; color: var(--kr-gold-300); } .aivs--studio .aivs-mycredits__bal small { color: rgba(230, 244, 236, .78); } .aivs--studio .aivs-pricing { max-width: 1100px; } .aivs--studio .aivs-pricing h2 { margin: 26px 0 10px; font-size: 1.2rem; } .aivs--studio .aivs-pricing__mine { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; padding: 12px 16px; border-radius: 16px; background: rgba(13, 32, 48, .62); box-shadow: inset 0 0 0 1px rgba(215, 176, 78, .45); } .aivs--studio .aivs-pricing__mine strong { font-size: 1.3rem; color: var(--kr-700); } .aivs--studio .aivs-pricing__ex { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .aivs--studio .aivs-pricing__card { display: flex; flex-direction: column; padding: 16px 18px; border-radius: 20px; background: rgba(13, 32, 48, .7); box-shadow: inset 0 0 0 1px rgba(15, 59, 90, .1), 0 12px 28px -18px rgba(5, 34, 54, .35); } .aivs--studio .aivs-pricing__card h3 { margin: 0 0 4px; font-size: 1rem; } .aivs--studio .aivs-pricing__card .aivs-fine { margin: 0; } .aivs--studio .aivs-pricing__num { margin: auto 0 0; padding-top: 12px; } .aivs--studio .aivs-pricing__num strong { font-size: 1.9rem; background: linear-gradient(90deg, #8decd0, #0d946c); -webkit-background-clip: text; background-clip: text; color: transparent; } .aivs--studio .aivs-pricing__two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; } .aivs--studio .aivs-pricing__table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 16px; background: rgba(13, 32, 48, .72); box-shadow: inset 0 0 0 1px rgba(15, 59, 90, .1); font-size: 14.5px; } .aivs--studio .aivs-pricing__table th, .aivs--studio .aivs-pricing__table td { padding: 9px 14px; border-bottom: 1px solid rgba(140, 195, 230, .104); text-align: left; } .aivs--studio .aivs-pricing__table thead th { background: rgba(19, 145, 107, .08); font-size: 13px; font-weight: 650; color: var(--kr-700); } .aivs--studio .aivs-pricing__table tbody th { font-weight: 600; } .aivs--studio .aivs-pricing__table tbody tr:last-child > * { border-bottom: 0; } .aivs--studio .aivs-pricing__table td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .aivs--studio .aivs-pricing__table.has-unit td:last-child { text-align: left; color: var(--st-muted); } .aivs--studio .aivs-pricing__table thead th:not(:first-child) { text-align: right; } .aivs--studio .aivs-pricing__rules { margin: 0; padding-left: 1.2em; } .aivs--studio .aivs-pricing__rules li { margin: 6px 0; } @media (max-width: 900px) { .aivs--studio .aivs-pricing__two { grid-template-columns: 1fr; } } @media (min-width: 761px) and (max-width: 1100px) { /* the tablet's top bar: ราคา lives in the name's menu and the account page */ .aivs--studio .aivs-head .aivs-tabs > a[href="#pricing"] { display: none; } } /* ================================================================ v1.34.2 colour - the look "A" (owner 22 Oct 04:23 "ทำให้หน้าเว็บ มีสีสัน" → 04:27 "ลองออกแบบให้ดูก่อน" → 05:40 "A ดีกว่าไหม" → 05:48 "เอาด้วย"): the same light glass, every page its own colour - the menu's icons are colour tiles, the page's title sits on a band of its colour, the chosen filter / tab takes it, cards carry a thin colour line on top; the main action stays a glossy green-to-aqua, the start / log-in action stays gold. app.js sets data-pc. The page colours are dark enough for white text (4.5:1) where they fill a pill. */ .aivs--studio { --pc: #0b558a; --pc2: #34d3a3; --pc-ink: #a7f1db; --pc-soft: rgba(52, 211, 163, .24); --pc-pill: linear-gradient(180deg, var(--pc) 0%, var(--pc-ink) 100%); } .aivs--studio[data-pc="templates"] { --pc: #b45309; --pc2: #ecc142; --pc-ink: #f6daca; --pc-soft: rgba(236, 193, 66, .26); } .aivs--studio[data-pc="quick"] { --pc: #0e7490; --pc2: #22d3ee; --pc-ink: #c4e5f2; --pc-soft: rgba(34, 211, 238, .24); } .aivs--studio[data-pc="jobs"] { --pc: #2563eb; --pc2: #60a5fa; --pc-ink: #dde4f8; --pc-soft: rgba(96, 165, 250, .26); } .aivs--studio[data-pc="series"] { --pc: #7c3aed; --pc2: #a78bfa; --pc-ink: #ebe2f9; --pc-soft: rgba(167, 139, 250, .26); } .aivs--studio[data-pc="podcast"] { --pc: #e11d48; --pc2: #fb7185; --pc-ink: #f9dae3; --pc-soft: rgba(251, 113, 133, .24); } .aivs--studio[data-pc="library"] { --pc: #be185d; --pc2: #f472b6; --pc-ink: #f8dae6; --pc-soft: rgba(244, 114, 182, .24); } .aivs--studio[data-pc="products"] { --pc: #4d7c0f; --pc2: #a3e635; --pc-ink: #c9e9a3; --pc-soft: rgba(163, 230, 53, .26); } /* v1.42.1 สินค้าของฉัน */ .aivs--studio[data-pc="pricing"], .aivs--studio[data-pc="account"] { --pc: #a16207; --pc2: #f0d068; --pc-ink: #f5d9c0; --pc-soft: rgba(240, 208, 104, .3); } .aivs--studio[data-pc="manual"] { --pc: #115688; --pc2: #2dd4a2; --pc-ink: #b2ecdb; --pc-soft: rgba(45, 212, 162, .24); } .aivs--studio[data-pc="settings"] { --pc: #475569; --pc2: rgba(20, 42, 60, .62); --pc-ink: #eaedf4; --pc-soft: rgba(20, 42, 60, .174); } /* a little more colour in the ground */ body.aivs-studio::before { background: radial-gradient(58vmax 44vmax at 6% -4%, rgba(19, 145, 107, .46), transparent 62%), radial-gradient(50vmax 40vmax at 102% -2%, rgba(230, 197, 103, .5), transparent 60%), radial-gradient(46vmax 32vmax at 64% 36%, rgba(45, 212, 162, .32), transparent 66%), radial-gradient(40vmax 30vmax at 28% 64%, rgba(139, 92, 246, .12), transparent 66%), radial-gradient(56vmax 46vmax at 90% 102%, rgba(14, 165, 233, .22), transparent 62%), radial-gradient(46vmax 36vmax at 14% 104%, rgba(236, 193, 66, .3), transparent 60%), linear-gradient(160deg, #ecf8f1 0%, #e0f2ed 46%, #f6edd5 100%); } /* the menu: each page's icon on a tile of its colour (the same colours as the pages) */ .aivs--studio .aivs-tabs a .aivs-ico { box-sizing: content-box; padding: 6px; border-radius: 10px; color: #fff; background: var(--tab, linear-gradient(135deg, #34d3a3, #0b558a)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .042), 0 4px 10px -4px rgba(0, 0, 0, .6); } .aivs--studio .aivs-tabs a[href="#templates"] { --tab: linear-gradient(135deg, #ecc142, #b45309); } .aivs--studio .aivs-tabs a[href="#quick"] { --tab: linear-gradient(135deg, #22d3ee, #0e7490); } .aivs--studio .aivs-tabs a[href="#jobs"] { --tab: linear-gradient(135deg, #60a5fa, #2563eb); } .aivs--studio .aivs-tabs a[href="#series"] { --tab: linear-gradient(135deg, #a78bfa, #7c3aed); } .aivs--studio .aivs-tabs a[href="#podcast"] { --tab: linear-gradient(135deg, #fb7185, #e11d48); } .aivs--studio .aivs-tabs a[href="#library"] { --tab: linear-gradient(135deg, #f472b6, #be185d); } .aivs--studio .aivs-tabs a[href="#products"] { --tab: linear-gradient(135deg, #a3e635, #4d7c0f); } .aivs--studio .aivs-tabs a[href="#pricing"], .aivs--studio .aivs-tabs a[href="/pricing"] { --tab: linear-gradient(135deg, #f0d068, #a16207); } .aivs--studio .aivs-tabs a[href="#manual"], .aivs--studio .aivs-tabs a[href="/blog/"] { --tab: linear-gradient(135deg, #2dd4a2, #115688); } .aivs--studio .aivs-tabs a[href="#settings"], .aivs--studio .aivs-tabs a[href="/about"] { --tab: linear-gradient(135deg, rgba(20, 42, 60, .62), #475569); } .aivs--studio .aivs-tabs a[href="/works/"] { --tab: linear-gradient(135deg, #60a5fa, #2563eb); } .aivs--studio .aivs-tabs a.is-current .aivs-ico { color: #fff; box-shadow: 0 0 0 2px #f1d478, 0 6px 16px -4px rgba(0, 0, 0, .6); } @media (min-width: 761px) and (max-width: 1100px) { /* the tablet's top bar: a smaller tile in the icon's old room - a 16 px icon on a 22 px tile (4 px more than the bare 18 px icon) and 2 px less on each side of the page's pill, so the nine pages take the same width as before the tiles and their short names still fit (app.js fitTabs) */ .aivs--studio .aivs-tabs a .aivs-ico { width: 16px; height: 16px; padding: 3px; border-radius: 7px; } .aivs--studio .aivs-head .aivs-tabs a { padding-left: 7px; padding-right: 7px; } .aivs--studio .aivs-head .aivs-tabs.is-tight a:not(.is-current) { padding: 7px 9px; } /* v1.42.1: one page more (สินค้าของฉัน) - 1 px less on each side and 14 px words, so the ten pages' short names still fit at 1100 */ .aivs--studio .aivs-head .aivs-tabs a { padding-left: 6px; padding-right: 6px; font-size: 14px; } } @media (max-width: 760px) { /* the phone's bottom bar: the tile is the icon's ground */ .aivs--studio .aivs-head .aivs-tabs a .aivs-ico { width: 19px; height: 19px; padding: 5px; border-radius: 9px; } .aivs--studio .aivs-drawer .aivs-tabs a .aivs-ico { width: 18px; height: 18px; padding: 5px; } } /* the page's title on a band of its colour */ .aivs--studio .aivs-pagehead { padding: 14px 20px; border-radius: 18px; border-left: 6px solid var(--pc); background: linear-gradient(100deg, var(--pc-soft) 0%, rgba(13, 32, 48, .45) 78%); box-shadow: 0 10px 26px -20px var(--pc); } .aivs--studio .aivs-pagehead__title { width: fit-content; max-width: 100%; color: var(--pc-ink); background: linear-gradient(100deg, #a7f1db 0%, var(--pc) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @media (max-width: 760px) { .aivs--studio .aivs-pagehead { padding: 12px 14px; border-left-width: 5px; } } /* the chosen filter / tab / mode: a glossy pill of the page's colour (the gold edge kept) */ .aivs--studio .aivs-seg button.is-on, .aivs--studio .aivs-seg button.is-on:hover, .aivs--studio .aivs-subtabs a.is-current, .aivs--studio .aivs-jobs__group[aria-pressed=true], .aivs--studio .aivs-quickmode.is-on, .aivs--studio .aivs-seriestab.is-on, .aivs--studio .aivs-seg button.is-on:hover, .aivs--studio .aivs-subtabs a.is-current:hover, .aivs--studio .aivs-jobs__group[aria-pressed=true]:hover, .aivs--studio .aivs-quickmode.is-on:hover, .aivs--studio .aivs-seriestab.is-on:hover { background: var(--pc-pill); } /* the main action: glossy green to aqua (the start / log-in action stays gold - the rules above for the head and the summary bar) */ .aivs--studio .aivs-btn--primary, .aivs--studio .aivs-btn--primary:hover { background: linear-gradient(120deg, #10b986 0%, #0d946c 50%, #0891b2 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .046), 0 0 0 1px rgba(241, 212, 120, .75), 0 10px 22px -12px rgba(8, 145, 178, .9); } .aivs--studio .aivs-btn--primary:hover { background: linear-gradient(120deg, #14c590 0%, #0fa578 50%, #0a9ec4 100%); } .aivs--studio .aivs-head .aivs-btn--primary, .aivs--studio .aivs-guestbar .aivs-btn--primary, .aivs-guestbox .aivs-btn--primary, body.aivs-studio .aivs--studio .aivs-summary--bar .aivs-sumbar__row > .aivs-btn, .aivs--studio .aivs-quickbuy .aivs-btn--primary, .aivs--studio .aivs-tplbuy__go { color: #2b1d03; background: var(--kr-gold); box-shadow: var(--kr-gold-shadow); text-shadow: 0 1px 0 rgba(255, 255, 255, .042); } .aivs--studio .aivs-head .aivs-btn--primary:hover, .aivs--studio .aivs-guestbar .aivs-btn--primary:hover, .aivs-guestbox .aivs-btn--primary:hover, .aivs--studio .aivs-quickbuy .aivs-btn--primary:hover:not(:disabled), .aivs--studio .aivs-tplbuy__go:hover:not(:disabled) { color: #2b1d03; background: var(--kr-gold-hover); } body.aivs-studio .aivs--studio .aivs-summary--bar .aivs-sumbar__row > .aivs-btn:disabled { background: rgba(13, 32, 48, .16); color: rgba(241, 246, 249, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .022); text-shadow: none; } /* cards: a thin colour line on top (green · aqua · gold, the logo's colours) */ .aivs--studio .aivs-panel, .aivs--studio .aivs-card, .aivs--studio .aivs-gen, .aivs--studio .aivs-libcard { background: linear-gradient(90deg, #10b986, #14b887 35%, #22d3ee 60%, #e5ad2a) top / 100% 3px no-repeat, var(--g-solid); } .aivs--studio .aivs-panel h2, .aivs--studio .aivs-panel > h3 { color: #8aeccf; } @media (prefers-reduced-transparency: reduce) { .aivs--studio .aivs-pagehead { background: #0d2030; } } /* ---- v1.34.2 the house rules: each person's own; a member sees the studio's rules for everyone (read only) */ .aivs--studio .aivs-librules__who { margin: 4px 0 10px; padding: 10px 14px; border-radius: 14px; background: var(--pc-soft); color: var(--pc-ink); font-size: 14.5px; } .aivs--studio .aivs-librules__h { margin: 14px 0 6px; font-size: 15.5px; } .aivs--studio .aivs-librules__studio { margin-top: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(13, 32, 48, .6); box-shadow: inset 0 0 0 1px rgba(15, 59, 90, .1); } .aivs--studio .aivs-librules__studio ul { margin: 0 0 6px; padding-left: 1.2em; } .aivs--studio .aivs-librules__studio li { margin: 4px 0; } /* ---- v1.34.2 one member's credit usage (ตั้งค่า → สมาชิก → ดูการใช้; บัญชีของฉัน) */ .aivs-cudlg .aivs-cudlg__card { width: min(860px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; } .aivs-cudlg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .aivs-cudlg__head h2 { margin: 0; } .aivs--studio .aivs-cu { display: grid; gap: 12px; margin-top: 8px; } .aivs--studio .aivs-cu__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; } .aivs--studio .aivs-cu__tiles > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: rgba(13, 32, 48, .75); box-shadow: inset 0 0 0 1px rgba(15, 59, 90, .1); } .aivs--studio .aivs-cu__tiles strong { font-size: 1.45rem; color: #8aeccf; font-variant-numeric: tabular-nums; } .aivs--studio .aivs-cu__tiles small { color: var(--st-muted); } .aivs--studio .aivs-cu__seg { justify-self: start; } .aivs--studio .aivs-cu__h { margin: 6px 0 0; font-size: 15.5px; } .aivs--studio .aivs-cu__table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .aivs--studio .aivs-cu__table th, .aivs--studio .aivs-cu__table td { padding: 8px 10px; border-bottom: 1px solid rgba(140, 195, 230, .104); text-align: left; vertical-align: top; } .aivs--studio .aivs-cu__table td:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .aivs--studio .aivs-cu__grp summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; } .aivs--studio .aivs-cu__grp summary::-webkit-details-marker { display: none; } .aivs--studio .aivs-cu__grp summary::after { content: "▾"; color: var(--st-muted); font-size: 12px; } .aivs--studio .aivs-cu__grp[open] summary::after { content: "▴"; } .aivs--studio .aivs-cu__grp .aivs-ut__meter { flex: 1 1 80px; margin-top: 0; } .aivs--studio .aivs-cu__tools { margin: 8px 0 2px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; } .aivs--studio .aivs-cu__tools li, .aivs--studio .aivs-cu__works li { display: flex; justify-content: space-between; gap: 12px; } .aivs--studio .aivs-cu__works { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14.5px; } .aivs--studio .aivs-cu__works li { padding: 8px 12px; border-radius: 12px; background: rgba(13, 32, 48, .6); } .aivs--studio .aivs-cu__kind { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--pc-soft); color: var(--pc-ink); font-size: 12px; } .aivs--studio .aivs-cu__mine { margin: 12px 0; } .aivs--studio .aivs-cu__mine > summary { cursor: pointer; font-weight: 650; } .aivs--studio .aivs-members__use-btn { margin-left: 4px; } @media (max-width: 760px) { .aivs--studio .aivs-cu__tools li, .aivs--studio .aivs-cu__works li { flex-direction: column; gap: 2px; } } /* ---- v1.34.2 the manual: one tab per page (+ มีอะไรใหม่), a picture of the page, the topics as cards (owner 22 Oct 03:46) */ .aivs--studio .aivs-manual__tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 18px; background: var(--kr-track, rgba(13, 32, 48, .5)); box-shadow: var(--kr-track-shadow, inset 0 0 0 1px rgba(15, 59, 90, .1)); } .aivs--studio .aivs-manual__tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; color: var(--st-ink2); text-decoration: none; font-weight: 550; font-size: 14.5px; } .aivs--studio .aivs-manual__tabs a:hover { background: rgba(13, 32, 48, .85); color: var(--st-ink); } .aivs--studio .aivs-manual__tabs a small { min-width: 20px; padding: 0 6px; border-radius: 999px; background: rgba(15, 59, 90, .1); font-size: 12px; text-align: center; } .aivs--studio .aivs-manual__tabs a.is-current { color: #fff; font-weight: 650; background: var(--pc-pill); box-shadow: var(--kr-pill-shadow); } .aivs--studio .aivs-manual__tabs a.is-current small { background: rgba(13, 32, 48, .25); color: #fff; } .aivs--studio .aivs-manual__newbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 14px; background: linear-gradient(100deg, rgba(241, 212, 120, .35), rgba(13, 32, 48, .5)); color: #eedfb8; font-weight: 600; text-decoration: none; } .aivs--studio .aivs-manual__sec--tab { padding: 0; background: none; border: 0; box-shadow: none; } .aivs--studio .aivs-manual__lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; align-items: center; padding: 18px 20px; border-radius: 20px; background: linear-gradient(100deg, var(--pc-soft), rgba(13, 32, 48, .6) 70%); box-shadow: inset 0 0 0 1px rgba(15, 59, 90, .08); } .aivs--studio .aivs-manual__leadtext h2 { margin: 0 0 6px; font-size: 1.35rem; color: var(--pc-ink); } .aivs--studio .aivs-manual__leadtext p { margin: 0 0 12px; color: var(--st-ink2); } .aivs--studio .aivs-manual__pic { display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 32px -18px rgba(5, 34, 54, .6), 0 0 0 1px rgba(15, 59, 90, .12); } .aivs--studio .aivs-manual__pic img { display: block; width: 100%; height: auto; } .aivs--studio .aivs-manual__topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 14px; } .aivs--studio .aivs-manual__topics .aivs-manual__topic { margin: 0; padding: 16px 18px; border: 0; border-radius: 18px; background: linear-gradient(90deg, var(--pc), var(--pc2)) top / 100% 3px no-repeat, rgba(13, 32, 48, .78); box-shadow: inset 0 0 0 1px rgba(15, 59, 90, .1); } .aivs--studio .aivs-manual__go { margin-left: 8px; font-size: 14px; font-weight: 500; } .aivs--studio .aivs-manual__tips { margin: 8px 0 0; padding-left: 0; list-style: none; } .aivs--studio .aivs-manual h2[tabindex="-1"]:focus { outline: none; } @media (max-width: 900px) { .aivs--studio .aivs-manual__lead { grid-template-columns: 1fr; } } @media (max-width: 760px) { .aivs--studio .aivs-manual__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .aivs--studio .aivs-manual__tabs a { flex: none; } .aivs--studio .aivs-manual__topics { grid-template-columns: 1fr; } } /* ================================================================ v1.35.0 คลัง Prompt: ตั้งค่า → หน้าเว็บ → คลัง Prompt (the owner's list, the editor, the example pictures) and the quick page's reference that came from a prompt's page */ .aivs--studio .aivs-pl [hidden] { display: none !important; } .aivs--studio .aivs-pl__stats { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 4px 0 14px; font-size: 14.5px; color: var(--st-ink2, #d8dfe4); } .aivs--studio .aivs-pl__stats strong { font-size: 18px; color: var(--st-ink, #e8edf1); } .aivs--studio .aivs-pl__stats .is-busy { color: #ecb388; font-weight: 600; } .aivs--studio .aivs-pl__start, .aivs--studio .aivs-pl__batch { display: grid; gap: 6px; margin-bottom: 12px; } .aivs--studio .aivs-pl__start p, .aivs--studio .aivs-pl__batch p { margin: 0; } .aivs--studio .aivs-pl__filter { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 14px 0 10px; } .aivs--studio .aivs-pl__filter .aivs-input { width: auto; min-width: 160px; flex: 0 1 auto; } .aivs--studio .aivs-pl__filter input[type=search] { flex: 1 1 220px; } .aivs--studio .aivs-pl__list { display: grid; gap: 8px; } .aivs--studio .aivs-pl__row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: rgba(13, 32, 48, .78); border: 1px solid rgba(140, 195, 230, .13); } .aivs--studio .aivs-pl__row.is-hidden { opacity: .72; } .aivs--studio .aivs-pl__info { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; } .aivs--studio .aivs-pl__info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aivs--studio .aivs-pl__info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aivs--studio .aivs-pl__tag { margin-left: 8px; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 0 7px; background: rgba(20, 42, 60, .62); color: #dfe5ec; } .aivs--studio .aivs-pl__thumb { width: 46px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; background: linear-gradient(155deg, #115688, #17415f); } .aivs--studio .aivs-pl__thumb--people { background: linear-gradient(155deg, #c2410c, #7c2d12); } .aivs--studio .aivs-pl__thumb--viral { background: linear-gradient(155deg, #7c3aed, #1e1b4b); } .aivs--studio .aivs-pl__thumb--design { background: linear-gradient(155deg, #2563eb, #1e3a8a); } .aivs--studio .aivs-pl__thumb--festival { background: linear-gradient(155deg, #b91c1c, #14532d); } .aivs--studio .aivs-pl__checks { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 10px; } .aivs--studio .aivs-pl__ex { margin-top: 18px; display: grid; gap: 10px; } .aivs--studio .aivs-pl__ex h3 { margin: 0; } .aivs--studio .aivs-pl__exs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .aivs--studio .aivs-pl__exfig { margin: 0; display: grid; gap: 6px; padding: 6px; border-radius: 12px; background: rgba(13, 32, 48, .8); border: 1px solid rgba(140, 195, 230, .13); } .aivs--studio .aivs-pl__exfig.is-main { box-shadow: 0 0 0 3px #f1d478; } .aivs--studio .aivs-pl__exfig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; display: block; } .aivs--studio .aivs-pl__exfig figcaption { font-size: 12.5px; color: var(--st-ink2, #d8dfe4); } .aivs--studio .aivs-pl__busy { color: #ecb388; font-weight: 600; margin: 0; } .aivs--studio .aivs-pl__count { width: auto; } .aivs--studio .aivs-pl__up { display: grid; gap: 6px; max-width: 520px; } .aivs--studio .aivs-quickref.is-example { box-shadow: 0 0 0 2px #f1d478; } .aivs--studio .aivs-quickref__tag { position: absolute; left: 4px; bottom: 4px; font-size: 11px; font-weight: 700; color: #2b1d03; background: #f6e3a1; border-radius: 6px; padding: 0 5px; } /* ---------------------------------------------------------------- v1.36 podcast video styles (owner 22 Oct 04:17 "คน 10 คนทำก้เหมือนกันหมด" -> 18:51 "ต่อเลย"): the four styles as cards with a small drawing each, the show's colours, the chapters' pictures for ภาพเล่าเรื่อง, a frame to look at before making the video. */ .aivs--studio .aivs-pstyles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; margin: 6px 0 4px; } .aivs--studio .aivs-pstyle { display: grid; gap: 4px; align-content: start; text-align: left; padding: 10px; min-height: 44px; border-radius: 14px; border: 1.5px solid var(--st-line2); background: rgba(13, 32, 48, .78); color: var(--st-ink); font: inherit; cursor: pointer; } .aivs--studio .aivs-pstyle:hover:not(:disabled):not(.is-on) { border-color: var(--st-green2); } .aivs--studio .aivs-pstyle.is-on { border-color: var(--st-green2); box-shadow: 0 0 0 3px rgba(13, 87, 140, .2); background: #0d2030; } .aivs--studio .aivs-pstyle:focus-visible { outline: 3px solid rgba(52, 222, 171, .45); outline-offset: 2px; } .aivs--studio .aivs-pstyle:disabled { opacity: .55; cursor: default; } .aivs--studio .aivs-pstyle strong { font-size: 15px; } .aivs--studio .aivs-pstyle small { font-size: 12.5px; line-height: 1.45; color: var(--st-muted); } .aivs--studio .aivs-pstyle__mini { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; margin-bottom: 4px; } .aivs--studio .aivs-pstyle__mini i, .aivs--studio .aivs-pstyle__mini b, .aivs--studio .aivs-pstyle__mini em { position: absolute; display: block; font-style: normal; } .aivs--studio .aivs-pstyle__mini--studio { background: radial-gradient(70% 90% at 35% 45%, #254459, #0e1921 72%); } .aivs--studio .aivs-pstyle__mini--studio i { top: 26%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: rgba(105, 211, 153, .14); box-shadow: 0 0 0 3px #34d3a3, 0 0 12px rgba(52, 211, 163, .55); left: 20%; } .aivs--studio .aivs-pstyle__mini--studio i + i { left: 58%; top: 32%; width: 22%; background: rgba(20, 42, 60, .62); opacity: .45; box-shadow: none; } .aivs--studio .aivs-pstyle__mini--story { background: linear-gradient(180deg, #f1d6a0, #f3a76a 50%, #5f8f6b 72%, #2d5069); } .aivs--studio .aivs-pstyle__mini--story i { right: 16%; top: 16%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: rgba(20, 42, 60, .62); } .aivs--studio .aivs-pstyle__mini--story b { left: 14%; right: 14%; bottom: 14%; height: 9%; border-radius: 4px; background: #0d2030; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); } .aivs--studio .aivs-pstyle__mini--editorial { background: linear-gradient(90deg, rgba(20, 42, 60, .62) 32%, rgba(207, 182, 124, .14) 32%); } .aivs--studio .aivs-pstyle__mini--editorial i { left: 40%; right: 10%; top: 40%; height: 8%; border-radius: 3px; background: #3b2a1d; box-shadow: 0 14px 0 rgba(0, 0, 0, .6); } .aivs--studio .aivs-pstyle__mini--editorial b { left: 6%; top: 8%; font-size: 22px; line-height: 1; font-weight: 800; color: #e7baa3; } .aivs--studio .aivs-pstyle__mini--editorial em { left: 40%; top: 18%; width: 10%; height: 9%; background: #a5552c; border-radius: 2px; transform: skewX(-12deg); } .aivs--studio .aivs-pstyle__mini--wave { background: radial-gradient(80% 100% at 50% 40%, #4a2b1a, #1c120c 75%); display: flex; align-items: center; justify-content: center; gap: 5%; } .aivs--studio .aivs-pstyle__mini--wave i { position: static; width: 4%; border-radius: 2px; background: #f0b26b; height: 30%; } .aivs--studio .aivs-pstyle__mini--wave i:nth-child(2n) { height: 52%; } .aivs--studio .aivs-pstyle__mini--wave i:nth-child(3n) { height: 18%; } .aivs--studio .aivs-pstyle__mini--wave i:nth-child(n + 6) { opacity: .4; } .aivs--studio .aivs-pod-vstyle { display: flex; flex-direction: column; gap: 10px; } .aivs--studio .aivs-pod-vcolor { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .aivs--studio .aivs-pod-vcolor__pick { width: 48px; height: 44px; padding: 2px; border: 1.5px solid var(--st-line2); border-radius: 10px; background: #0d2030; cursor: pointer; } .aivs--studio .aivs-pod-epstyle { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--st-line2); background: rgba(13, 32, 48, .6); margin-bottom: 12px; } .aivs--studio .aivs-pod-previews { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; } .aivs--studio .aivs-pod-preview { margin: 0; display: grid; gap: 4px; } .aivs--studio .aivs-pod-preview img { display: block; border-radius: 12px; background: #000; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .6); } .aivs--studio .aivs-pod-preview--full img { width: min(480px, 100%); aspect-ratio: 16 / 9; } .aivs--studio .aivs-pod-preview--short img { width: 150px; aspect-ratio: 9 / 16; } .aivs--studio .aivs-pod-preview figcaption { font-size: 12.5px; color: var(--st-muted); } .aivs--studio .aivs-pod-scenes { display: flex; flex-direction: column; gap: 8px; } .aivs--studio .aivs-pod-scenes__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .aivs--studio .aivs-pod-scene { display: flex; gap: 12px; align-items: flex-start; } .aivs--studio .aivs-pod-scene__img, .aivs--studio .aivs-pod-scene__ph { flex: none; width: 160px; aspect-ratio: 16 / 9; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: linear-gradient(135deg, rgba(20, 42, 60, .62), rgba(20, 42, 60, .62)); color: var(--st-muted); font-size: 12px; text-align: center; padding: 0 8px; box-sizing: border-box; } .aivs--studio .aivs-pod-scene__body { display: grid; gap: 4px; min-width: 0; } .aivs--studio .aivs-pod-scene__body .aivs-actions { margin: 2px 0 0; } @media (max-width: 760px) { .aivs--studio .aivs-pstyles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aivs--studio .aivs-pod-scene { flex-direction: column; } .aivs--studio .aivs-pod-scene__img, .aivs--studio .aivs-pod-scene__ph { width: min(100%, 320px); } } /* ---------------------------------------------------------------- v1.37 the jobs' tools and เก็บงานกี่วัน (owner 22 Oct 19:49 "หน้านี้ทำให้รู้ได้ไหม สร้างจากเครื่องมือหน้าไหน และให้เก็บข้อมูลไว้ แค่ 3 เดือน" -> 19:54 "เอาตามที่คุณว่าก่อนเลย") */ .aivs--studio .aivs-card__tool { display: block; font-size: 12.5px; line-height: 1.35; color: var(--st-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aivs--studio .aivs-card__marks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .aivs--studio .aivs-keepbadge { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.3; } .aivs--studio .aivs-keepbadge.is-keep { background: var(--st-tint); color: var(--st-green-deep); } .aivs--studio .aivs-keepbadge.is-soon { background: rgba(230, 193, 101, .14); color: #eedeb9; } .aivs--studio .aivs-keepbadge.is-gone { background: rgba(20, 42, 60, .62); color: #d6dcdf; } .aivs--studio .aivs-keepbadge.is-work { background: rgba(105, 152, 211, .14); color: #d6dde7; } .aivs--studio .aivs-jobs__tool { width: auto; min-height: 42px; border-radius: 999px; padding: 8px 14px; max-width: 260px; } .aivs--studio .aivs-jobs__tool[hidden] { display: none; } .aivs--studio .aivs-jobs__keep { margin: -8px 0 14px; } .aivs--studio .aivs-keepbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--st-line2); background: #0d2030; font-size: 14px; line-height: 1.5; } .aivs--studio .aivs-keepbar.is-soon { background: rgba(230, 197, 101, .14); border-color: #e8cd81; color: #f5e1c0; } .aivs--studio .aivs-keepbar.is-keep { background: var(--st-tint); border-color: rgba(105, 211, 154, .45); color: var(--st-green-deep); } .aivs--studio .aivs-keepbar.is-gone, .aivs--studio .aivs-keepbar.is-work { background: rgba(20, 42, 60, .62); border-color: rgba(140, 195, 230, .363); color: #dfe5e9; } .aivs--studio .aivs-keepbar.is-quiet { border-style: dashed; color: var(--st-muted); font-size: 13px; padding: 6px 12px; } .aivs--studio .aivs-tag--tool { background: var(--st-tint); border-color: rgba(105, 211, 154, .45); color: var(--st-green-deep); font-weight: 600; } .aivs--studio .aivs-purged { display: flex; flex-direction: column; gap: 14px; } .aivs--studio .aivs-purged__thumb { display: block; max-width: min(320px, 100%); border-radius: 14px; opacity: .8; filter: grayscale(.4); object-fit: cover; } .aivs--studio .aivs-purged__thumb.aivs-media--film { max-width: min(480px, 100%); aspect-ratio: 16 / 9; } .aivs--studio .aivs-purged__thumb.aivs-media--short { aspect-ratio: 9 / 16; max-width: min(220px, 100%); } .aivs--studio .aivs-purged__card { background: var(--g-fill); border: 1px solid var(--g-edge); box-shadow: var(--g-shadow); backdrop-filter: var(--g-blur); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; } .aivs--studio .aivs-purged__kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 14px; } .aivs--studio .aivs-purged__kv dt { color: var(--st-muted); font-weight: 600; } .aivs--studio .aivs-purged__kv dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .aivs--studio .aivs-purged .aivs-log { margin: 0; } .aivs--studio .aivs-retention { display: flex; flex-direction: column; gap: 12px; } .aivs--studio .aivs-retention__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .aivs--studio .aivs-retention__field { display: grid; gap: 4px; margin: 0; align-content: start; } .aivs--studio .aivs-retention__log ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; } @media (max-width: 760px) { .aivs--studio .aivs-jobs__tool { flex: 1 1 100%; max-width: none; } .aivs--studio .aivs-keepbar { padding: 10px 12px; } } /* v1.39 ตัวฉัน (a character from the user's own face) + สินค้าของฉัน (the product card) */ .aivs--studio .aivs-me { display: flex; flex-direction: column; gap: 12px; } .aivs--studio .aivs-me__have { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; font-size: 14px; } .aivs--studio .aivs-me__steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; font-size: 13.5px; color: var(--st-muted); } .aivs--studio .aivs-me__steps li { display: inline-flex; align-items: center; gap: 6px; } .aivs--studio .aivs-me__n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--st-line2); background: #0d2030; font-size: 12px; font-weight: 700; color: var(--st-muted); } .aivs--studio .aivs-me__steps li.is-on { color: var(--st-ink); font-weight: 700; } .aivs--studio .aivs-me__steps li.is-on .aivs-me__n { background: var(--st-green2); border-color: var(--st-green2); color: #fff; } .aivs--studio .aivs-me__steps li.is-done .aivs-me__n { background: var(--st-tint); border-color: rgba(105, 211, 154, .45); color: var(--st-green-deep); } .aivs--studio .aivs-me__panel { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; border: 1px solid var(--st-line2); background: rgba(13, 32, 48, .85); min-width: 0; } .aivs--studio .aivs-me__panel h3 { margin: 0; font-size: 16px; } .aivs--studio .aivs-me__consent { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; line-height: 1.55; color: var(--st-ink2); } .aivs--studio .aivs-me__photos { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .aivs--studio .aivs-me__photo { margin: 0; display: grid; gap: 4px; width: 120px; } .aivs--studio .aivs-me__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; border: 1px solid var(--st-line); background: rgba(20, 42, 60, .62); } .aivs--studio .aivs-me__photo figcaption { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--st-ink2); } .aivs--studio .aivs-me__photos--small img { width: 64px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; border: 1px solid var(--st-line); } .aivs--studio .aivs-me__add { width: 120px; aspect-ratio: 3 / 4; border-radius: 12px; border: 1px dashed var(--st-line2); background: var(--st-soft); color: var(--st-green-ink); font-weight: 600; cursor: pointer; } .aivs--studio .aivs-me__video, .aivs--studio .aivs-me__shot { width: min(420px, 100%); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; background: #101c24; border: 1px solid var(--st-line2); } .aivs--studio .aivs-me__video { transform: scaleX(-1); } /* a mirror, as a phone's selfie camera shows it */ .aivs--studio .aivs-me__gesture { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(230, 197, 101, .14); border: 1px solid #e8cd81; color: #f5e1c0; font-size: 15px; } .aivs--studio .aivs-me__check ul { margin: 6px 0; padding-left: 0; list-style: none; display: grid; gap: 3px; font-size: 14px; } .aivs--studio .aivs-me__check li.is-ok { color: var(--st-green-ink); } .aivs--studio .aivs-me__check li.is-bad { color: #f5cdc7; font-weight: 600; } .aivs--studio .aivs-me__styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .aivs--studio .aivs-me__style { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--st-line2); background: #0d2030; cursor: pointer; font: inherit; color: var(--st-ink); } .aivs--studio .aivs-me__style small { color: var(--st-muted); line-height: 1.45; } .aivs--studio .aivs-me__style.is-on { border-color: var(--st-green2); box-shadow: 0 0 0 2px rgba(13, 87, 140, .18); background: var(--st-tint); } .aivs--studio .aivs-me__sheet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .aivs--studio .aivs-me__view { margin: 0; display: grid; gap: 4px; min-width: 0; } .aivs--studio .aivs-me__view img, .aivs--studio .aivs-me__ph { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; border: 1px solid var(--st-line); background: rgba(20, 42, 60, .62); display: grid; place-items: center; color: var(--st-faint); } .aivs--studio .aivs-me__view.is-bad img { border-color: #e0a399; box-shadow: 0 0 0 2px rgba(161, 45, 28, .15); } .aivs--studio .aivs-me__view figcaption { display: grid; gap: 2px; font-size: 13px; } .aivs--studio .aivs-me__wait { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--st-ink2); } .aivs--studio .aivs-me__accept, .aivs--studio .aivs-me__fix { display: flex; flex-direction: column; gap: 8px; } .aivs--studio .aivs-me__fix { padding-top: 8px; border-top: 1px dashed var(--st-line2); } .aivs--studio .aivs-me__fix > .aivs-btn, .aivs--studio .aivs-me__panel > .aivs-btn { align-self: flex-start; } .aivs--studio .aivs-me__lock { display: block; padding: 8px 10px; border-radius: 10px; background: var(--st-tint); color: var(--st-green-deep); } .aivs--studio .aivs-libcard__me { display: flex; flex-wrap: wrap; gap: 4px; } .aivs--studio .aivs-tag--me { background: var(--st-tint); border-color: rgba(105, 211, 154, .45); color: var(--st-green-deep); font-weight: 600; } .aivs--studio .aivs-tag--face { background: rgba(230, 197, 101, .14); border-color: #e8cd81; color: #f5e1c0; } .aivs--studio .aivs-libcard__pcard { color: var(--st-green-ink); } .aivs--studio .aivs-pcard { display: grid; gap: 8px; padding: 12px; border-radius: 14px; border: 1px dashed rgba(20, 154, 114, .45); background: rgba(13, 32, 48, .7); min-width: 0; } @media (max-width: 760px) { .aivs--studio .aivs-me__sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aivs--studio .aivs-me__panel { padding: 12px; } .aivs--studio .aivs-me__photo, .aivs--studio .aivs-me__add { width: calc(50% - 5px); } } /* v1.40 เชื่อมต่อ Claude (MCP): the address to copy, the steps, the connections */ .aivs--studio .aivs-mcp { display: grid; gap: 12px; } .aivs--studio .aivs-mcp p { margin: 0; } .aivs--studio .aivs-mcp__urlrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .aivs--studio .aivs-mcp__url { flex: 1 1 280px; min-width: 0; max-width: 520px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; } .aivs--studio .aivs-mcp__steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; } .aivs--studio .aivs-mcp__steps li { padding-left: 2px; overflow-wrap: anywhere; } .aivs--studio .aivs-mcp__h { margin: 6px 0 0; font-size: 15px; } .aivs--studio .aivs-mcp code { font-size: 12.5px; overflow-wrap: anywhere; } .aivs--studio .aivs-mcp__list td small { display: block; } .aivs--studio .aivs-mcp__list th, .aivs--studio .aivs-mcp__list td { text-align: left; vertical-align: top; } .aivs--studio .aivs-mcp .aivs-check span { overflow-wrap: anywhere; } /* v1.40.3 the job page (review 23 Oct): one plain line for everybody, the owner's states and money folded under "รายละเอียด", ดาวน์โหลดรายงาน / ลบงาน in the ⋯ menu, and on a phone the main action in a bar at the bottom */ .aivs--studio .aivs-plainline { margin: 10px 0 0; font-size: 14px; color: var(--st-ink2); } .aivs--studio .aivs-statusmore { margin-top: 8px; font-size: 13px; } .aivs--studio .aivs-statusmore > summary { width: max-content; max-width: 100%; cursor: pointer; color: var(--st-green-ink); font-size: 13px; } .aivs--studio .aivs-statusmore[open] > summary { margin-bottom: 6px; } .aivs--studio .aivs-statusmore .aivs-statuschips { margin: 0 0 6px; } .aivs--studio .aivs-jobmore { position: relative; flex: none; } .aivs--studio .aivs-jobmore > summary { list-style: none; display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; font-size: 20px; line-height: 1; letter-spacing: 1px; } .aivs--studio .aivs-jobmore > summary::-webkit-details-marker { display: none; } .aivs--studio .aivs-jobmore__pop { position: absolute; z-index: 60; right: 0; top: calc(100% + 6px); display: flex; flex-direction: column; gap: 4px; min-width: 230px; padding: 8px; border: 1px solid var(--st-edge); border-radius: 14px; background: #0d2030; box-shadow: var(--g-shadow-lg); } .aivs--studio .aivs-jobmore__pop .aivs-btn { width: 100%; justify-content: flex-start; text-align: left; } .aivs--studio .aivs-jobmore__pop .aivs-jobmore__del { color: #f5cdc7; } .aivs-mainbar { display: none; } @media (max-width: 760px) { body.aivs-studio .aivs--studio > .aivs-mainbar { display: flex; flex-direction: column; gap: 4px; position: fixed; z-index: 99990; left: 0; right: 0; bottom: 0; max-width: none; margin: 0; box-sizing: border-box; padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: rgba(13, 32, 48, .97); border-top: 1px solid var(--st-edge); box-shadow: 0 -6px 20px rgba(0, 0, 0, .35); transition: transform .18s ease, visibility 0s; } body.aivs-studio .aivs--studio > .aivs-mainbar.is-off { transform: translateY(110%); visibility: hidden; transition: transform .18s ease, visibility 0s linear .18s; } body.aivs-studio .aivs--studio > .aivs-mainbar .aivs-btn { width: 100%; min-height: 48px; justify-content: center; } body.aivs-studio .aivs--studio > .aivs-mainbar .aivs-mainbar__why { color: var(--st-muted); font-size: 12px; text-align: center; } body.aivs-studio.aivs-ai-bar .aivs--studio > .aivs-mainbar { bottom: calc(132px + env(safe-area-inset-bottom)); } .aivs--studio .has-mainbar { padding-bottom: 84px; } body.aivs-studio.aivs-mainbar-on .aivs-gfab { bottom: calc(88px + env(safe-area-inset-bottom)); } .aivs--studio .aivs-jobmore__pop { min-width: min(260px, calc(100vw - 48px)); } /* the job's tags in one line that slides sideways (they took three lines above the status) */ .aivs--studio .aivs-jobhead > .aivs-chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 2px; -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); } .aivs--studio .aivs-jobhead > .aivs-chips::-webkit-scrollbar { display: none; } .aivs--studio .aivs-jobhead > .aivs-chips > * { flex: none; } } @media (prefers-reduced-motion: reduce) { body.aivs-studio .aivs--studio > .aivs-mainbar { transition: none; } } @media print { body.aivs-studio .aivs--studio > .aivs-mainbar { display: none; } } /* ===================================================================== v1.41 สมาชิกใช้ Google Flow ของตัวเอง */ .aivs--studio .aivs-flowx { display: grid; gap: 12px; } .aivs--studio .aivs-flowx p { margin: 0; } .aivs--studio .aivs-flowx__h { margin: 6px 0 0; font-size: 15px; } .aivs--studio .aivs-flowx__steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; } .aivs--studio .aivs-flowx__steps li { padding-left: 2px; overflow-wrap: anywhere; } .aivs--studio .aivs-flowx code { font-size: 12.5px; overflow-wrap: anywhere; } .aivs--studio .aivs-flowx__status { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--st-edge); background: rgba(20, 42, 60, .62); overflow-wrap: anywhere; } .aivs--studio .aivs-flowx__status--ok { border-color: rgba(140, 195, 230, .506); background: rgba(105, 211, 140, .14); } .aivs--studio .aivs-flowx__status--missing, .aivs--studio .aivs-flowx__status--unlinked { border-color: #e4d1a1; background: rgba(230, 194, 101, .14); } .aivs--studio .aivs-flowx__terms { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid #e4d1a1; background: rgba(230, 194, 101, .14); } .aivs--studio .aivs-flowx__terms ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; } .aivs--studio .aivs-flowx__code .aivs-input { flex: 1 1 260px; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; } .aivs--studio .aivs-flowx__code .aivs-actions { flex-wrap: wrap; } .aivs--studio .aivs-flowx__list th, .aivs--studio .aivs-flowx__list td { text-align: left; vertical-align: top; } .aivs--studio .aivs-flowx .aivs-check span { overflow-wrap: anywhere; } .aivs--studio .aivs-flowx__note { margin: 6px 0 0; overflow-wrap: anywhere; } .aivs--studio .aivs-flowx__note--missing, .aivs--studio .aivs-flowx__note--unlinked { color: #e6ce95; } .aivs--studio .aivs-flowx__note--ok { color: #86e1a8; } .aivs--studio .aivs-flowx__tip { margin: 6px 0 0; } .aivs--studio .aivs-flowx__card { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; border-color: rgba(140, 195, 230, .506); background: rgba(105, 211, 135, .14); } .aivs--studio .aivs-flowx__card p { margin: 4px 0 0; } @media (max-width: 760px) { .aivs--studio .aivs-flowx__card .aivs-actions { width: 100%; } .aivs--studio .aivs-flowx__card .aivs-actions .aivs-btn { flex: 1 1 auto; justify-content: center; } } /* ===================================================================== v1.42 โหมดรีวิวสินค้า */ .aivs--studio .aivs-rvpick { display: flex; flex-wrap: wrap; gap: 8px; } .aivs--studio .aivs-rvpick .aivs-libchip { font: inherit; text-align: left; color: var(--st-ink); cursor: pointer; } .aivs--studio .aivs-rvpick .aivs-libchip:focus-visible, .aivs--studio .aivs-rvcard:focus-visible { outline: 3px solid rgba(53, 194, 122, .45); outline-offset: 2px; } .aivs--studio .aivs-rvnote { margin: 6px 0 0; color: #e6ce95; } .aivs--studio .aivs-rvcards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } .aivs--studio .aivs-rvcards--tier { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .aivs--studio .aivs-rvcard { display: grid; gap: 4px; align-content: start; text-align: left; padding: 12px 14px; border-radius: 14px; font: inherit; border: 1px solid var(--st-line2); background: var(--g-solid); color: var(--st-ink); cursor: pointer; box-shadow: var(--g-shadow); min-width: 0; } .aivs--studio .aivs-rvcard strong { font-size: 15px; } .aivs--studio .aivs-rvcard small { color: var(--st-muted); line-height: 1.4; overflow-wrap: anywhere; } .aivs--studio .aivs-rvcard.is-on { box-shadow: inset 0 0 0 2px var(--st-green), 0 10px 22px -14px rgba(16, 87, 137, .6); background: rgba(80, 237, 190, .126); } .aivs--studio .aivs-rvcard.is-off { opacity: .55; cursor: not-allowed; background: rgba(20, 42, 60, .62); } .aivs--studio .aivs-rvcard__ico { font-size: 22px; line-height: 1; } .aivs--studio .aivs-rvtier__price { font-weight: 650; color: var(--st-green-deep); } .aivs--studio .aivs-rvrow { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; } .aivs--studio .aivs-rvrow > * { display: grid; gap: 6px; min-width: 0; } .aivs--studio .aivs-tag--review { background: rgba(240, 148, 76, .14); color: #f5cec1; } .aivs--studio .aivs-rvbox { display: grid; gap: 12px; padding: 16px 18px; margin-bottom: 16px; border-radius: 16px; border: 1px solid var(--st-edge); background: var(--g-solid); box-shadow: var(--g-shadow); } .aivs--studio .aivs-rvbox h3 { margin: 0; font-size: 17px; } .aivs--studio .aivs-rvbox p { margin: 0; } .aivs--studio .aivs-rvhooks { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; } .aivs--studio .aivs-rvhooks legend { font-weight: 650; padding: 0; margin-bottom: 4px; } .aivs--studio .aivs-rvhook { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--st-line2); background: rgba(13, 32, 48, .8); cursor: pointer; overflow-wrap: anywhere; } .aivs--studio .aivs-rvhook.is-on { box-shadow: inset 0 0 0 2px var(--st-green); background: rgba(80, 237, 190, .126); } .aivs--studio .aivs-rvhook input { margin-top: 3px; flex: none; } .aivs--studio .aivs-rvcheck { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid; overflow-wrap: anywhere; } .aivs--studio .aivs-rvcheck.is-ok { border-color: rgba(140, 195, 230, .506); background: rgba(105, 211, 140, .14); } .aivs--studio .aivs-rvcheck.is-warn { border-color: #e4d1a1; background: rgba(230, 194, 101, .14); } .aivs--studio .aivs-rvcheck.is-block { border-color: #f0a8a0; background: rgba(240, 96, 76, .14); } .aivs--studio .aivs-rvcheck ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .aivs--studio .aivs-rvcheck li { line-height: 1.5; } .aivs--studio .aivs-rvcheck .aivs-btn--small { margin-left: 4px; } .aivs--studio .aivs-tag--err { background: rgba(240, 76, 76, .133); color: #f7d4d4; border-color: rgba(220, 38, 38, .3); } @media (max-width: 760px) { .aivs--studio .aivs-rvcards, .aivs--studio .aivs-rvcards--tier { grid-template-columns: 1fr 1fr; } .aivs--studio .aivs-rvcards--tier { grid-template-columns: 1fr; } .aivs--studio .aivs-rvpick .aivs-libchip { flex: 1 1 140px; } .aivs--studio .aivs-rvbox { padding: 14px; } } /* ================================================================ v1.42.1 สินค้าของฉัน (owner 25 Oct 10:58 "สินค้า แยกจากตัวละคร ดีกว่าไหม จะได้ไม่งง"): the products' own page - the same cards and form as the characters', a product's form without the person's fields; the quiet button that moves an old entry to the other page sits at the end of the form's buttons */ .aivs--studio .aivs-libedit__move { margin-left: auto; } @media (max-width: 760px) { .aivs--studio .aivs-libedit__move { margin-left: 0; } } /* a member's own logo as their picture in the menu (the logo is often wide: whole, on white) */ .aivs--studio .aivs-avatar.aivs-avatar--logo { background: #0d2030; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .41); } .aivs--studio .aivs-avatar.aivs-avatar--logo img { width: 100%; height: 100%; object-fit: contain; } /* a product's angles worth having: the ones there ticked */ .aivs--studio .aivs-bible__want { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--st-ink2, #cdd7d2); } .aivs--studio .aivs-bible__want li.is-have { color: #92e7b2; font-weight: 600; } /* ===================================================================== v1.43.0 รีวิวสินค้า (its own page) */ .aivs--studio .aivs-rvtabs { margin: 0 0 18px; } .aivs--studio .aivs-rvtabs a { display: inline-flex; align-items: center; gap: 6px; } .aivs--studio .aivs-rvtabs .aivs-ico { width: 16px; height: 16px; } .aivs--studio .aivs-rvmoved { display: flex; align-items: center; gap: 12px; margin: -4px 0 18px; padding: 12px 14px; border-radius: 14px; border: 1px dashed rgba(20, 154, 114, .45); background: rgba(80, 237, 190, .105); color: var(--st-ink); text-decoration: none; } .aivs--studio .aivs-rvmoved:hover { background: rgba(97, 219, 156, .133); } .aivs--studio .aivs-rvmoved > span:not(.aivs-rvmoved__go) { display: grid; gap: 2px; min-width: 0; flex: 1; } .aivs--studio .aivs-rvmoved small { color: var(--st-muted); } .aivs--studio .aivs-rvmoved__go { font-size: 20px; color: var(--st-green-deep); flex: none; } .aivs--studio .aivs-rvnew { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; } .aivs--studio .aivs-rvnew small { flex-basis: 100%; } .aivs--studio .aivs-rvback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: rgba(230, 194, 101, .14); border: 1px solid #e4d1a1; } .aivs--studio .aivs-rvback > span { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; } .aivs--studio .aivs-libcard__review { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 2px; } .aivs--studio .aivs-rvclips__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0 0 14px; } .aivs--studio .aivs-rvclips__bar label { display: grid; gap: 6px; min-width: 220px; } .aivs--studio .aivs-rvclip .aivs-card__body { display: grid; gap: 4px; } .aivs--studio .aivs-rvclip .aivs-card__title { color: var(--st-ink); text-decoration: none; font-weight: 650; overflow-wrap: anywhere; } .aivs--studio .aivs-rvclip__product { color: var(--st-green-deep); font-weight: 600; overflow-wrap: anywhere; } .aivs--studio .aivs-rvclip .aivs-actions { margin-top: 4px; flex-wrap: wrap; } .aivs--studio .aivs-rvhands__ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; font-size: 22px; background: rgba(80, 237, 190, .126); border: 1px dashed rgba(20, 154, 114, .45); } .aivs--studio .aivs-rvlogo .aivs-check { display: flex; align-items: center; gap: 8px; } .aivs--studio .aivs-shot__refclip { margin: 4px 0; } .aivs--studio .aivs-tabs a[href="#review"], .aivs--studio .aivs-tabs a[href="#review/products"] { --tab: linear-gradient(135deg, #a3e635, #4d7c0f); } .aivs--studio .aivs-rvtier__rec { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: 2px; background: var(--st-green-deep, #115688); color: #fff; } /* v1.43.1: show / hide a password (บัญชีของฉัน); the review's words-in-the-clip switches */ .aivs--studio .aivs-pwbox__eye { color: var(--st-green2); min-height: 38px; } .aivs--studio .aivs-pwbox__eye:hover { background: rgba(13, 87, 140, .08); } .aivs--studio .aivs-pwbox__eye:focus-visible { outline-color: var(--st-green2); } .aivs--studio .aivs-rvtext .aivs-check { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; } .aivs--studio .aivs-rvtext .aivs-check input { margin-top: 3px; } /* v1.43.3 ไม่เห็นหน้า: how much of the person, whose body; ฉากของฉัน (the scene picker on the form, its own tab) */ .aivs--studio .aivs-rvface { display: grid; gap: 8px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--st-line2); background: rgba(13, 32, 48, .6); } .aivs--studio .aivs-rvcards--view { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .aivs--studio .aivs-rvoutfit { display: grid; gap: 6px; } .aivs--studio .aivs-rvscenechip img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; } .aivs--studio .aivs-scenes__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; } .aivs--studio .aivs-scenes__head p { margin: 0; flex: 1 1 320px; } .aivs--studio .aivs-sceneedit { display: grid; gap: 12px; padding: 16px 18px; margin: 0 0 18px; } .aivs--studio .aivs-sceneedit h3 { margin: 0; font-size: 17px; } .aivs--studio .aivs-sceneedit__grid { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 16px; align-items: start; } .aivs--studio .aivs-sceneedit__img img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; background: rgba(20, 42, 60, .62); } .aivs--studio .aivs-sceneedit__img .aivs-libcard__noimg { aspect-ratio: 9 / 16; } .aivs--studio .aivs-sceneedit__body { display: grid; gap: 12px; min-width: 0; } .aivs--studio .aivs-sceneedit__ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .aivs--studio .aivs-sceneway { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--st-line2); background: rgba(13, 32, 48, .7); } .aivs--studio .aivs-sceneway .aivs-btn { justify-self: start; } .aivs--studio .aivs-scenecard__media img { aspect-ratio: 9 / 16; object-fit: cover; } .aivs--studio .aivs-scenecard .aivs-card__body { display: grid; gap: 4px; } .aivs--studio .aivs-scenecard__desc { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .aivs--studio .aivs-scenecard .aivs-actions { margin-top: 4px; flex-wrap: wrap; } @media (max-width: 760px) { .aivs--studio .aivs-sceneedit__grid { grid-template-columns: 1fr; } .aivs--studio .aivs-sceneedit__img { max-width: 220px; } .aivs--studio .aivs-rvcards--view { grid-template-columns: 1fr 1fr 1fr; } } .aivs--studio .aivs-textsw .aivs-check { display: flex; align-items: flex-start; gap: 8px; margin: 0; } .aivs--studio .aivs-textsw .aivs-check input { margin-top: 3px; } .aivs--studio .aivs-textsw .aivs-check small { display: block; color: var(--st-muted); } /* v1.58.15 the subtitles' place, size and speaker names */ .aivs--studio .aivs-textsw__look { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 12px; margin: 8px 0; align-items: end; } .aivs--studio .aivs-textsw__pick { display: grid; gap: 4px; font-size: 13px; color: var(--st-muted); } .aivs--studio .aivs-textsw__pick select { width: 100%; min-width: 0; } .aivs--studio .aivs-textsw__look .aivs-fine { grid-column: 1 / -1; } /* v1.43.5 the article's hub, tags, questions, sources and its SEO readiness; หมวดหมู่ แท็ก และผู้เขียน */ .aivs-site__tagpick { gap: 6px; } .aivs .aivs-site__tagpick .aivs-chip, .aivs-site__tagpick .aivs-chip { min-height: 34px; padding: 4px 12px; } .aivs-site__tagpick .aivs-chip.is-on { background: var(--st-green); border-color: var(--st-green); color: #fff; } .aivs-site__ready { margin: 6px 0 12px; } .aivs-site__ready > summary { cursor: pointer; font-weight: 600; padding: 6px 0; } .aivs-site__checks li.is-ok { color: var(--st-muted, #bfc6cb); } .aivs-site__checks li.is-ok strong { color: #57e4ba; } .aivs-site__blogset { margin: 10px 0 14px; } .aivs-site__blogset > summary { cursor: pointer; padding: 4px 0; } .aivs-site__blogset .aivs-label { margin-top: 12px; display: block; } .aivs-site__fields { display: grid; gap: 6px; min-width: 0; } /* ================================================================ v1.43.9 the design system - every page of the studio and the website in one dark look (the canvas's DesignSystem board, owner 27-28 Oct 23:15 "ออกแบบทุกหน้ามาเลยให้ดีก่อนเริ่มทำ", 23:27 "อยากให้เหมือนกันทั้งเว็บ"). (v1.43.10: these colours are now the reference picture's navy-teal - see the block at the end.) A deep emerald ground (#041510), the menu darker still (#03120e), cards a soft emerald gradient with a thin mint edge, light words, mint (#5ff0b7) for what is chosen, gold for the main action on every page (the price on a paid one), headings in Kanit. It comes last: it sets the frame and the shared parts over the older looks above (v1.33 flat, v1.33.3 glass, v1.34.2 colours). */ @font-face { font-family: "Studio Display"; font-style: normal; font-display: swap; font-weight: 700; src: url(/studio/web/font-display-thai.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: "Studio Display"; font-style: normal; font-display: swap; font-weight: 700; src: url(/studio/web/font-display-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } body.aivs-studio { --ds-ground: #031824; --ds-menu: #01131d; --ds-card: linear-gradient(180deg, rgba(22, 48, 70, .7), rgba(11, 30, 46, .75)); --ds-card-solid: #0e2132; --ds-raise: rgba(16, 40, 60, .7); --ds-raise2: rgba(24, 54, 78, .85); --ds-input: rgba(20, 42, 60, .65); --ds-edge: rgba(140, 195, 230, .234); --ds-edge2: rgba(140, 195, 230, .364); --ds-edge3: rgba(140, 195, 230, .6); --ds-hair: rgba(120, 230, 197, .12); --ds-text: #f1f8fd; --ds-strong: #f4f9fd; --ds-soft: #d6eee7; --ds-muted: #aabac6; --ds-faint: #80909c; --ds-mint: #5ff0c5; --ds-link: #7ff0ce; --ds-chosen: linear-gradient(90deg, rgba(63, 230, 180, .3), rgba(63, 230, 180, .12)); --ds-chosen-ring: inset 0 0 0 1px rgba(95, 240, 197, .6); --ds-gold: linear-gradient(180deg, #f6e5a5, #eaca6c 50%, #d7b04e); --ds-gold-hover: linear-gradient(180deg, #feeea6, #eed27d 50%, #deb958); --ds-gold-ink: #2b1d03; --ds-gold-glow: 0 6px 18px -8px rgba(234, 202, 108, .8); --ds-done: #5ff0c5; --ds-run: #60a5fa; --ds-wait: #eaca6c; --ds-flow: #c4a5ff; --ds-fail: #f87171; --ds-off: #8b9399; --ds-display: "Studio Display", "Studio Sans", "Noto Sans Thai", sans-serif; /* the older looks' tokens, now in the design system */ --st-ink: #f1f8fd; --st-ink2: #d6eee7; --st-muted: #aabac6; --st-faint: #80909c; --st-green: #3ee6b4; --st-green2: #145685; --st-green-ink: #7ff0ce; --st-green-deep: #5ff0c5; --st-forest: #01131d; --st-tint: rgba(63, 230, 180, .14); --st-tint2: rgba(63, 230, 180, .22); --st-ground: rgba(63, 230, 180, .07); --st-soft: rgba(20, 42, 60, .55); --st-line: rgba(140, 195, 230, .156); --st-line2: rgba(140, 195, 230, .364); --st-edge: rgba(140, 195, 230, .234); --g-fill: rgba(15, 36, 54, .78); --g-solid: #0e2132; --g-edge: rgba(140, 195, 230, .234); --g-shadow: none; --g-shadow-lg: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 1px rgba(120, 230, 197, .14); --kr-pill: var(--ds-chosen); --kr-pill-hover: linear-gradient(90deg, rgba(63, 230, 180, .38), rgba(63, 230, 180, .16)); --kr-pill-shadow: var(--ds-chosen-ring); --kr-gold: var(--ds-gold); --kr-gold-hover: var(--ds-gold-hover); --kr-gold-shadow: var(--ds-gold-glow); --kr-dark-glass: linear-gradient(180deg, rgba(13, 40, 60, .97), rgba(1, 19, 29, .98)); --kr-aurora: radial-gradient(70% 90% at 100% 100%, rgba(63, 230, 180, .1), transparent 70%); --kr-track: rgba(20, 42, 60, .65); --kr-track-shadow: inset 0 0 0 1px rgba(120, 230, 197, .16); --kr-ai: linear-gradient(90deg, #5ff0c5, #7ff0ce 50%, #eaca6c); --kr-700: #7ff0ce; --kr-600: #5ff0c5; --kr-500: #3ee6b4; --kr-gold-700: #efd993; --kr-gold-100: rgba(234, 202, 108, .16); background: var(--ds-ground); color: var(--ds-text); color-scheme: dark; } body.aivs-studio::before { background: radial-gradient(60% 40% at 55% 0%, rgba(40, 150, 117, .22), transparent 60%), #031824; } body.aivs-studio::after { content: none; } .aivs--studio { --aivs-ink: #f1f8fd; --aivs-muted: #aabac6; --aivs-line: rgba(140, 195, 230, .234); --aivs-paper: #0e2132; --aivs-primary: #145685; --aivs-primary-ink: #7ff0ce; --aivs-work: #60a5fa; --aivs-wait: #eaca6c; --aivs-done: #5ff0c5; --aivs-fail: #f87171; --aivs-idle: #8b9399; color: var(--ds-text); } .aivs--studio[data-pc] { --pc: #1f9d77; --pc2: #5ff0c5; --pc-ink: #5ff0c5; --pc-soft: rgba(63, 230, 180, .14); --pc-pill: var(--ds-chosen); } .aivs--studio a { color: var(--ds-link); } .aivs--studio a:hover { color: #c8ffee; } .aivs--studio h1, .aivs--studio h2, .aivs--studio h3, .aivs--studio h4 { color: #fff; } .aivs--studio h1, .aivs--studio h2 { font-family: var(--ds-display); font-weight: 700; letter-spacing: 0; } .aivs--studio .aivs-muted, .aivs--studio .aivs-fine, .aivs--studio .aivs-hint { color: var(--ds-muted); } /* a line in the muted text's class with its own colour (a warning, a tick, a note) keeps that colour */ .aivs--studio :is(.aivs-muted, .aivs-fine, .aivs-hint):is(.aivs-try__warn, .aivs-warn) { color: #f0cda4; } .aivs--studio :is(.aivs-muted, .aivs-fine, .aivs-hint):is(.aivs-rvnote) { color: #e6ce95; } .aivs--studio :is(.aivs-muted, .aivs-fine, .aivs-hint):is(.aivs-ed__overnote) { color: #efb49c; } .aivs--studio :is(.aivs-muted, .aivs-fine, .aivs-hint):is(.aivs-flowhint) { color: #efbe9e; } .aivs--studio :is(.aivs-muted, .aivs-fine, .aivs-hint):is(.aivs-pod-sound__tip) { color: #f5dcbf; } .aivs--studio :is(.aivs-muted, .aivs-fine, .aivs-hint):is(.aivs-check-ok) { color: #47d971; } .aivs--studio :is(.aivs-muted, .aivs-fine, .aivs-hint):is(.aivs-ed__ownnote) { color: #bbf7d0; } .aivs--studio :is(.aivs-muted, .aivs-fine, .aivs-hint):is(.aivs-tune__ai) { color: #b3edca; } .aivs--studio :is(.aivs-muted, .aivs-fine, .aivs-hint):is(.aivs-docline__src) { color: var(--st-green-ink); } .aivs--studio :is(.aivs-muted, .aivs-fine, .aivs-hint):is(.aivs-me__lock) { color: var(--st-green-deep); } .aivs--studio :is(.aivs-muted, .aivs-fine, .aivs-hint):is(.aivs-pod-warn) { color: var(--aivs-work); } .aivs--studio :is(.aivs-muted, .aivs-fine, .aivs-hint):is(.aivs-rvmoved) { color: var(--st-ink); } body.aivs-studio ::selection { background: #eaca6c; color: #2b1d03; } /* ---- the menu (computer): a dark column, plain icons, the chosen page a mint bar on its left */ .aivs--studio > .aivs-head { background: var(--ds-menu); border-right: 1px solid var(--ds-hair); box-shadow: none; color: #cfe9e1; } .aivs--studio .aivs-brand { border-bottom: 0; border-image: none; padding-bottom: 10px; } .aivs--studio .aivs-brand__link, .aivs--studio .aivs-brand__link:hover { color: #fff; } .aivs--studio .aivs-brand__sub { color: var(--ds-muted); } .aivs--studio .aivs-tabs a { gap: 12px; border-radius: 12px; color: #cfe9e1; font-weight: 500; } .aivs--studio .aivs-tabs a .aivs-ico, .aivs--studio .aivs-tabs a.is-current .aivs-ico { box-sizing: border-box; width: 20px; height: 20px; padding: 0; border-radius: 0; background: none; box-shadow: none; color: currentColor; } .aivs--studio .aivs-tabs a:hover { background: rgba(63, 230, 180, .08); color: #fff; } .aivs--studio .aivs-tabs a:hover .aivs-ico { color: #fff; } .aivs--studio .aivs-tabs a.is-current { color: #fff; font-weight: 600; background: linear-gradient(90deg, rgba(63, 230, 180, .28), rgba(63, 230, 180, .06)); box-shadow: inset 3px 0 0 var(--ds-mint); } .aivs--studio .aivs-tabs a.is-current .aivs-ico { color: var(--ds-mint); } .aivs--studio .aivs-tabs a.is-current::before { content: none; } .aivs--studio .aivs-tabs__sep { background: var(--ds-hair); } .aivs--studio .aivs-usermenu__btn, .aivs--studio .aivs-guestmenu { background: var(--ds-card); color: var(--ds-text); box-shadow: inset 0 0 0 1px var(--ds-edge); } .aivs--studio .aivs-usermenu__btn:hover, .aivs--studio .aivs-usermenu.is-open .aivs-usermenu__btn { background: rgba(24, 54, 78, .9); } .aivs--studio .aivs-usermenu__btn .aivs-usermenu__role { color: var(--ds-link); } .aivs--studio .aivs-usermenu__btn .aivs-usermenu__spend { color: var(--ds-muted); } .aivs--studio .aivs-avatar { background: linear-gradient(180deg, #2a7f66, #194463); color: #fff; box-shadow: 0 0 0 2px #eaca6c; } .aivs--studio .aivs-usermenu__pop { background: var(--ds-card-solid); border: 1px solid var(--ds-edge2); box-shadow: var(--g-shadow-lg); } .aivs--studio .aivs-usermenu__item, .aivs--studio a.aivs-usermenu__item { color: var(--ds-soft); } .aivs--studio .aivs-usermenu__item .aivs-ico { color: var(--ds-muted); } .aivs--studio .aivs-usermenu__item:hover, .aivs--studio .aivs-usermenu__item:focus-visible { background: rgba(63, 230, 180, .1); color: #fff; } .aivs--studio .aivs-usermenu__logout:hover, .aivs--studio .aivs-usermenu__logout:focus-visible { background: rgba(248, 113, 113, .12); color: #fecaca; } .aivs--studio .aivs-rolechip { color: var(--ds-link); background: rgba(63, 230, 180, .14); } /* ---- the page's title: no band - a big Kanit heading, the lead under it in a softer colour */ .aivs--studio .aivs-pagehead { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } .aivs--studio .aivs-pagehead__title { font-family: var(--ds-display); font-size: 30px; font-weight: 700; line-height: 1.2; color: #fff; background: none; -webkit-text-fill-color: currentColor; } .aivs--studio .aivs-pagehead__sub { color: var(--ds-muted); font-size: 14.5px; } .aivs--studio .aivs-pagehead .aivs-helplink { color: var(--ds-soft); } @media (max-width: 760px) { .aivs--studio .aivs-pagehead { padding: 0; } .aivs--studio .aivs-pagehead__title { font-size: 26px; } } /* ---- buttons: a dark raised button with a mint edge; the main action gold with dark words (a paid one carries its price) */ .aivs--studio .aivs-btn { border-radius: 12px; border: 1px solid var(--ds-edge2); background: var(--ds-raise); color: var(--ds-soft); font-weight: 500; box-shadow: none; text-shadow: none; } .aivs--studio .aivs-btn:hover { background: var(--ds-raise2); border-color: rgba(140, 195, 230, .6); color: #fff; box-shadow: none; } .aivs--studio .aivs-btn--small { border-radius: 10px; } body.aivs-studio .aivs--studio .aivs-btn--primary, body.aivs-studio .aivs--studio .aivs-btn--primary:hover, body.aivs-studio .aivs--studio .aivs-summary--bar .aivs-sumbar__row > .aivs-btn, body.aivs-studio .aivs--studio .aivs-tplbuy__go, body.aivs-studio .aivs-guestbox .aivs-btn--primary, body.aivs-studio .aivs-gbtn--pri { border: 0; background: var(--ds-gold); color: var(--ds-gold-ink); font-weight: 700; text-shadow: none; box-shadow: var(--ds-gold-glow); } body.aivs-studio .aivs--studio .aivs-btn--primary:hover:not(:disabled), body.aivs-studio .aivs--studio .aivs-summary--bar .aivs-sumbar__row > .aivs-btn:hover:not(:disabled), body.aivs-studio .aivs--studio .aivs-tplbuy__go:hover:not(:disabled), body.aivs-studio .aivs-guestbox .aivs-btn--primary:hover, body.aivs-studio .aivs-gbtn--pri:hover { background: var(--ds-gold-hover); color: var(--ds-gold-ink); } body.aivs-studio .aivs--studio .aivs-btn--primary:disabled, body.aivs-studio .aivs--studio .aivs-summary--bar .aivs-sumbar__row > .aivs-btn:disabled { background: rgba(234, 202, 108, .22); color: rgba(255, 243, 200, .75); box-shadow: none; } .aivs--studio .aivs-btn__price { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: rgba(43, 29, 3, .16); color: inherit; font-size: 12.5px; font-weight: 700; } .aivs--studio .aivs-btn--soft { background: rgba(63, 230, 180, .12); border-color: rgba(140, 195, 230, .455); color: #a7f7df; box-shadow: none; } .aivs--studio .aivs-btn--soft:hover { background: rgba(63, 230, 180, .2); border-color: var(--ds-edge3); color: #fff; } .aivs--studio .aivs-btn--quiet { background: transparent; border-color: transparent; color: var(--ds-muted); } .aivs--studio .aivs-btn--quiet:hover { background: rgba(248, 113, 113, .12); border-color: transparent; color: #fecaca; } .aivs--studio .aivs-btn--danger, .aivs--studio .aivs-btn.is-danger { background: transparent; border-color: rgba(248, 113, 113, .7); color: #fecaca; } .aivs--studio .aivs-btn--danger:hover, .aivs--studio .aivs-btn.is-danger:hover { background: rgba(248, 113, 113, .14); color: #fff; } /* ---- choices: a dark pill each, the chosen one mint (no more a colour per page) */ .aivs--studio .aivs-seg button { border: 1px solid var(--ds-edge); background: rgba(16, 40, 60, .6); color: #cfe9e1; font-weight: 500; box-shadow: none; } .aivs--studio .aivs-seg button:hover { border-color: var(--ds-edge3); background: var(--ds-raise2); color: #fff; box-shadow: none; } body.aivs-studio .aivs--studio .aivs-seg button.is-on, body.aivs-studio .aivs--studio .aivs-seg button.is-on:hover, body.aivs-studio .aivs--studio .aivs-subtabs a.is-current, body.aivs-studio .aivs--studio .aivs-jobs__group[aria-pressed=true], body.aivs-studio .aivs--studio .aivs-quickmode.is-on, body.aivs-studio .aivs--studio .aivs-seriestab.is-on, body.aivs-studio .aivs-ai__modes button.is-on, body.aivs-studio .aivs--studio .aivs-subtabs a.is-current:hover, body.aivs-studio .aivs--studio .aivs-jobs__group[aria-pressed=true]:hover, body.aivs-studio .aivs--studio .aivs-quickmode.is-on:hover, body.aivs-studio .aivs--studio .aivs-seriestab.is-on:hover { border-color: transparent; background: var(--ds-chosen); color: #fff; font-weight: 600; box-shadow: var(--ds-chosen-ring); } .aivs--studio .aivs-subtabs, .aivs--studio .aivs-jobs__groups, .aivs--studio .aivs-quickmodes, .aivs--studio .aivs-seriestabs, .aivs-ai__modes { background: var(--ds-input); box-shadow: inset 0 0 0 1px rgba(120, 230, 197, .16); } .aivs--studio .aivs-subtabs a, .aivs--studio .aivs-jobs__group, .aivs--studio .aivs-quickmode, .aivs--studio .aivs-seriestab { color: #cfe9e1; } .aivs--studio .aivs-jobs__count, .aivs--studio .aivs-jobs__group[aria-pressed=true] .aivs-jobs__count { background: rgba(95, 240, 197, .16); color: #8ff5d6; } .aivs--studio .aivs-chip, .aivs-ai__chip { border: 1px solid var(--ds-edge2); background: rgba(16, 40, 60, .6); color: var(--ds-soft); box-shadow: none; } .aivs--studio .aivs-chip:hover, .aivs-ai__chip:hover:not(:disabled) { border-color: var(--ds-edge3); background: var(--ds-raise2); color: #fff; } .aivs--studio .aivs-chip.is-on, .aivs--studio .aivs-chip[aria-pressed=true] { border-color: var(--ds-mint); background: rgba(63, 230, 180, .16); color: #fff; } .aivs--studio .aivs-format { border: 1px solid var(--ds-edge); background: rgba(16, 40, 60, .6); color: var(--ds-text); box-shadow: none; } .aivs--studio .aivs-format:hover { border-color: var(--ds-edge3); } body.aivs-studio .aivs--studio .aivs-format.is-on { border-color: var(--ds-mint); background: rgba(63, 230, 180, .12); box-shadow: inset 0 0 0 1px var(--ds-mint); } .aivs--studio .aivs-format small { color: var(--ds-muted); } .aivs--studio .aivs-format.is-on .aivs-ratio { color: var(--ds-mint); background: rgba(63, 230, 180, .16); } /* ---- cards: the soft emerald gradient, a thin mint edge (no colour line on top) */ body.aivs-studio .aivs--studio .aivs-panel, body.aivs-studio .aivs--studio .aivs-card, body.aivs-studio .aivs--studio .aivs-gen, body.aivs-studio .aivs--studio .aivs-libcard, body.aivs-studio .aivs--studio .aivs-status, body.aivs-studio .aivs--studio .aivs-fold, body.aivs-studio .aivs--studio .aivs-new > .aivs-form, body.aivs-studio .aivs--studio .aivs-summary:not(.aivs-summary--bar) { background: var(--ds-card); border: 1px solid var(--ds-edge); box-shadow: none; } body.aivs-studio .aivs--studio .aivs-card:hover { border-color: var(--ds-edge3); } .aivs--studio .aivs-panel h2, .aivs--studio .aivs-panel > h3 { color: #fff; } .aivs--studio .aivs-empty { background: rgba(16, 40, 60, .45); border: 1.5px dashed var(--ds-edge2); color: var(--ds-muted); } /* ---- fields */ .aivs--studio textarea, .aivs--studio .aivs-input, .aivs--studio select, .aivs--studio #aivs-idea, body.aivs-studio .st-field input { background-color: var(--ds-input); border: 1px solid rgba(140, 195, 230, .312); color: var(--ds-strong); box-shadow: none; } .aivs--studio textarea::placeholder, .aivs--studio .aivs-input::placeholder, .aivs--studio #aivs-idea::placeholder { color: var(--ds-faint); } .aivs--studio textarea:focus, .aivs--studio .aivs-input:focus, .aivs--studio select:focus, .aivs--studio #aivs-idea:focus, body.aivs-studio .st-field input:focus { border-color: var(--ds-mint); background-color: rgba(20, 42, 60, .85); box-shadow: 0 0 0 3px rgba(95, 240, 197, .18); outline: none; } .aivs--studio select option { background: #081c2a; color: var(--ds-strong); } .aivs--studio label, .aivs--studio .aivs-label { color: #e8f0f5; } /* ---- notices: info blue, done mint, warning gold, error red - a tinted box with an edge of its colour */ .aivs--studio .aivs-banner { background: rgba(96, 165, 250, .1); border: 1px solid rgba(96, 165, 250, .45); color: var(--ds-soft); box-shadow: none; } .aivs--studio .aivs-banner::before { background: #60a5fa; color: #031824; } .aivs--studio .aivs-banner--warn { background: rgba(234, 202, 108, .1); border-color: rgba(234, 202, 108, .5); } .aivs--studio .aivs-banner--warn::before { background: #eaca6c; color: #2b1d03; } .aivs--studio .aivs-error, .aivs-error { background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .55); color: #fecaca; } /* ---- status: a soft capsule of its colour */ .aivs--studio .aivs-pill { background: rgba(139, 147, 153, .2); color: #d2d7da; } .aivs--studio .aivs-pill.aivs-tone-done { background: rgba(95, 240, 197, .2); color: #a7f7df; } .aivs--studio .aivs-pill.aivs-tone-work { background: rgba(96, 165, 250, .2); color: #b4d2ff; } .aivs--studio .aivs-pill.aivs-tone-wait { background: rgba(234, 202, 108, .2); color: #f6e6b4; } .aivs--studio .aivs-pill.aivs-tone-fail { background: rgba(248, 113, 113, .2); color: #fecaca; } /* ---- the summary bar at the form's foot, the welcome box: the menu's dark with a mint edge */ body.aivs-studio .aivs--studio .aivs-summary.aivs-summary--bar, body.aivs-studio .aivs--studio .aivs-gwelcome { background: linear-gradient(180deg, rgba(13, 40, 60, .97), rgba(1, 19, 29, .98)); box-shadow: inset 0 0 0 1px rgba(120, 230, 197, .22), 0 -10px 30px -12px rgba(0, 0, 0, .6); } .aivs-sumbar__fact small, .aivs-sumbar__more > summary { color: var(--ds-muted); } .aivs-sumbar__panel { background: var(--ds-card-solid); } /* ---- the AI column / bar: the menu's dark, a mint line, the AI's words on a raised card */ body.aivs-studio .aivs--studio > .aivs-ai { background: var(--ds-menu); border-left: 1px solid var(--ds-hair); box-shadow: none; } body.aivs-studio .aivs--studio > .aivs-ai.is-sheet { background: rgba(1, 19, 29, .97); } body.aivs-studio .aivs--studio > .aivs-ai:not(.is-rail)::before { background: linear-gradient(90deg, #5ff0c5, rgba(95, 240, 197, .2) 60%, #eaca6c); height: 2px; } .aivs-ai__title { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; font-family: var(--ds-display); } .aivs-ai__ctx { background: rgba(63, 230, 180, .12); color: #8ff5d6; box-shadow: none; } .aivs-ai__foot { background: transparent; } .aivs-ai__box, .aivs-aibar__row { border: 1px solid rgba(140, 195, 230, .39); background: var(--ds-input); box-shadow: none; } .aivs-ai__box:focus-within, .aivs-aibar__row:focus-within { border-color: var(--ds-mint); box-shadow: 0 0 0 3px rgba(95, 240, 197, .18); } .aivs-ai__send, .aivs-ai__send:hover:not(:disabled) { background: var(--ds-gold); color: var(--ds-gold-ink); box-shadow: var(--ds-gold-glow); } .aivs-ai__send:disabled { background: rgba(120, 230, 197, .12); color: var(--ds-faint); box-shadow: none; } .aivs-ai__msg--ai { background: var(--ds-raise); border: 1px solid var(--ds-edge); color: var(--ds-text); box-shadow: none; } .aivs-ai__msg--me { background: rgba(63, 230, 180, .18); color: #fff; } .aivs-ai.is-rail .aivs-ai__rail .aivs-ico, .aivs-aibar__ico { background: rgba(63, 230, 180, .14); color: var(--ds-mint); box-shadow: none; } body.aivs-studio .aivs--studio > .aivs-aibar { background: rgba(1, 19, 29, .95); border-top: 1px solid var(--ds-hair); box-shadow: 0 -12px 32px -16px rgba(0, 0, 0, .6); } /* ---- the dark boxes (มีอะไรใหม่ in the manual, a script, the quote's lines) */ .aivs--studio .aivs-manual__new, .aivs--studio .aivs-quote__lines, .aivs-ai__script { background: var(--ds-input); box-shadow: inset 0 0 0 1px var(--ds-edge); } /* ---- a tablet / phone: the bar on top the menu's dark */ @media (max-width: 1100px) { .aivs--studio > .aivs-head { background: var(--ds-menu); box-shadow: 0 1px 0 var(--ds-hair); } .aivs--studio > .aivs-head::before { background: var(--ds-menu); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .aivs--studio .aivs-tabs a.is-current { box-shadow: inset 0 -2px 0 var(--ds-mint); background: rgba(63, 230, 180, .14); } } @media (max-width: 760px) { .aivs--studio .aivs-drawer { background: var(--ds-menu); border-right: 1px solid var(--ds-hair); } .aivs--studio .aivs-drawer__top { border-bottom-color: var(--ds-hair); } .aivs--studio .aivs-menubtn, .aivs--studio .aivs-drawer__close { background: var(--ds-raise); border-color: var(--ds-edge2); color: #fff; } .aivs--studio > .aivs-scrim { background: rgba(0, 0, 0, .55); } } /* ---- log in / set a password (shell.js): the same card, the gold button */ body.aivs-studio .st-wrap { background: radial-gradient(60% 40% at 55% 0%, rgba(40, 150, 117, .22), transparent 60%), #031824; } body.aivs-studio .st-card { background: var(--ds-card); border: 1px solid var(--ds-edge); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7); } body.aivs-studio .st-card > .st-brand:first-child { background: var(--ds-menu); box-shadow: inset 0 -1px 0 var(--ds-hair); } body.aivs-studio .st-btn, body.aivs-studio .st-btn:hover { background: var(--ds-gold); color: var(--ds-gold-ink); box-shadow: var(--ds-gold-glow); text-shadow: none; } body.aivs-studio .st-sub, body.aivs-studio .st-note, body.aivs-studio .st-field small { color: var(--ds-muted); } body.aivs-studio .st-link, body.aivs-studio .st-pw__eye { color: var(--ds-link); } @media (prefers-reduced-transparency: reduce) { body.aivs-studio { --ds-card: #0e2132; --g-fill: #0e2132; } } /* ================================================================ v1.43.9 the frame: the menu (+ the credits card), the top bar, a phone / tablet's bar at the bottom, the search box */ .aivs--studio .aivs-tabs__line { display: block; height: 1px; margin: 8px 6px; background: var(--ds-hair); } .aivs--studio .aivs-sidecards { display: flex; flex-direction: column; gap: 10px; margin: auto 0 0; padding-top: 14px; } .aivs--studio .aivs-sidecard { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--ds-edge); background: var(--ds-card); color: var(--ds-text); text-decoration: none; } .aivs--studio a.aivs-sidecard:hover { border-color: var(--ds-edge3); color: var(--ds-text); } .aivs--studio .aivs-sidecard__k { font-size: 12.5px; color: var(--ds-muted); display: flex; align-items: center; gap: 6px; } .aivs--studio .aivs-sidecard__v { font-family: var(--ds-display); font-size: 24px; line-height: 1.15; color: #fff; } .aivs--studio .aivs-sidecard__s { font-size: 12.5px; color: var(--ds-link); } .aivs--studio .aivs-sidecard__plan { font-size: 15px; color: #fff; } .aivs--studio .aivs-sidecard__bar { display: block; height: 6px; margin-top: 4px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; } .aivs--studio .aivs-sidecard__bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5ff0c5, #eaca6c); } .aivs--studio .aivs-soon { display: inline-block; padding: 0 7px; border-radius: 999px; background: rgba(234, 202, 108, .16); border: 1px solid rgba(234, 202, 108, .45); color: #efd993; font-size: 11px; font-weight: 600; line-height: 1.7; white-space: nowrap; } .aivs--studio .aivs-sidecards .aivs-guestmenu { margin: 0; } /* the top bar: sticky over the page (the ground behind it, a little blur) */ body.aivs-studio #aivs-app.aivs--studio { padding-top: 0; } .aivs--studio > .aivs-topbar { position: sticky; top: 0; z-index: 55; display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 14px 0 12px; background: linear-gradient(180deg, rgba(3, 24, 36, .96) 70%, rgba(3, 24, 36, .82)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .aivs--studio .aivs-topbar__find { flex: 1 1 320px; max-width: 560px; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 14px; box-sizing: border-box; border-radius: 12px; border: 1px solid rgba(140, 195, 230, .234); background: var(--ds-input); color: var(--ds-faint); font: inherit; font-size: 14px; text-align: left; cursor: pointer; } .aivs--studio .aivs-topbar__find:hover { border-color: var(--ds-edge3); color: var(--ds-muted); } .aivs--studio .aivs-topbar__find > .aivs-ico { width: 18px; height: 18px; color: var(--ds-link); } .aivs--studio .aivs-topbar__ph { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aivs--studio .aivs-topbar__kbd { flex: none; font: inherit; font-size: 11.5px; color: var(--ds-muted); border: 1px solid rgba(140, 195, 230, .325); border-radius: 6px; padding: 1px 6px; } .aivs--studio .aivs-topbar__end { margin-left: auto; display: flex; align-items: center; gap: 10px; } .aivs--studio .aivs-topbar__ai .aivs-ico { color: #eaca6c; width: 18px; height: 18px; } .aivs--studio .aivs-topbar__bell { position: relative; padding: 0 10px; gap: 6px; } .aivs--studio .aivs-topbar__bell[disabled] { opacity: 1; cursor: default; color: var(--ds-faint); } .aivs--studio .aivs-topbar__bell .aivs-ico { width: 19px; height: 19px; } /* who is logged in: the avatar with a gold ring, the name and the role; the menu opens below */ .aivs--studio .aivs-topbar .aivs-usermenu { margin: 0; padding: 0; } .aivs--studio .aivs-topbar .aivs-usermenu__btn { width: auto; padding: 4px 10px 4px 4px; gap: 10px; border-radius: 999px; background: transparent; box-shadow: none; } .aivs--studio .aivs-topbar .aivs-usermenu__btn:hover, .aivs--studio .aivs-topbar .aivs-usermenu.is-open .aivs-usermenu__btn { background: rgba(63, 230, 180, .08); } .aivs--studio .aivs-topbar .aivs-avatar { width: 40px; height: 40px; } .aivs--studio .aivs-topbar .aivs-usermenu__who { max-width: 190px; } .aivs--studio .aivs-topbar .aivs-usermenu__name { font-size: 14px; } .aivs--studio .aivs-topbar .aivs-usermenu__pop { left: auto; right: 0; bottom: auto; top: calc(100% + 8px); width: 300px; } .aivs--studio .aivs-topbar .aivs-usermenu__spend--pop { display: block; } .aivs--studio .aivs-topbar .aivs-usermenu__who .aivs-usermenu__spend { display: none; } .aivs--studio .aivs-topbar__login { min-height: 40px; } /* the bar at the bottom: a phone / tablet only */ .aivs--studio > .aivs-tabbar { display: none; } /* the search box */ .aivs-find { position: fixed; inset: 0; z-index: 100020; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; box-sizing: border-box; background: rgba(0, 0, 0, .55); } .aivs-find__card { width: min(620px, 100%); max-height: 76vh; display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--ds-edge2); background: #0e2132; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); overflow: hidden; color: var(--ds-text); font-family: "Studio Sans", "Noto Sans Thai", sans-serif; } .aivs-find__row { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--ds-hair); } .aivs-find__row > .aivs-ico { width: 20px; height: 20px; flex: none; color: var(--ds-link); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } body.aivs-studio .aivs-find .aivs-find__in, body.aivs-studio .aivs-find .aivs-find__in:focus { flex: 1; min-width: 0; height: 44px; margin: 0; padding: 0 4px; border: 0; background: transparent; box-shadow: none; outline: none; color: var(--ds-strong); font: inherit; font-size: 16px; } .aivs-find__list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; } .aivs-find__it { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border-radius: 10px; cursor: pointer; } .aivs-find__it .aivs-ico { width: 18px; height: 18px; flex: none; color: var(--ds-muted); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .aivs-find__it.is-on { background: var(--ds-chosen); box-shadow: var(--ds-chosen-ring); } .aivs-find__it.is-on .aivs-ico { color: var(--ds-mint); } .aivs-find__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; } .aivs-find__k { flex: none; font-size: 12px; color: var(--ds-muted); } .aivs-find__none { padding: 18px 12px; color: var(--ds-muted); font-size: 14px; } .aivs-find__hint { margin: 0; padding: 8px 16px 10px; border-top: 1px solid var(--ds-hair); color: var(--ds-faint); font-size: 12.5px; } .aivs--studio .aivs-find__close { flex: none; } .aivs-find .aivs-find__close { min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ds-edge2); background: var(--ds-raise); color: var(--ds-soft); font: inherit; font-size: 14px; cursor: pointer; } /* ---- a tablet / phone (1100 px and less): a slim bar on top (the logo; search, AI, bell, you), every page in the drawer (เมนู), five in the bar at the bottom with สร้างวิดีโอ gold in the middle */ @media (max-width: 1100px) { body.aivs-studio #aivs-app.aivs--studio { padding: 72px max(16px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); } .aivs--studio > .aivs-head { position: fixed; z-index: 60; top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 60px; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 0; padding: 0 14px; border: 0; border-bottom: 1px solid var(--ds-hair); border-radius: 0; background: var(--ds-menu); box-shadow: none; overflow: visible; } .aivs--studio > .aivs-head::before { content: none; } .aivs--studio .aivs-brand { margin: 0; padding: 0; border: 0; min-width: 0; } .aivs--studio .aivs-brand__mark { width: 34px; height: 34px; } .aivs--studio .aivs-brand__logo { max-height: 38px; max-width: 46vw; } /* every page in the drawer */ .aivs--studio .aivs-drawer { display: flex; flex-direction: column; gap: 6px; position: fixed; z-index: 100008; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); box-sizing: border-box; padding: max(14px, env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: var(--ds-menu); border-right: 1px solid var(--ds-hair); box-shadow: var(--g-shadow-lg); overflow-y: auto; overscroll-behavior: contain; transform: translateX(-104%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; } .aivs--studio.aivs-nav-open .aivs-drawer { transform: none; visibility: visible; transition: transform .2s ease; } .aivs--studio .aivs-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 10px 6px; border-bottom: 1px solid var(--ds-hair); margin-bottom: 4px; } .aivs--studio .aivs-drawer__title { font-weight: 700; font-size: 16px; color: #fff; } .aivs--studio .aivs-drawer__close { width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--ds-edge2); border-radius: 10px; background: var(--ds-raise); color: #fff; cursor: pointer; } .aivs--studio > .aivs-scrim { display: block; position: fixed; inset: 0; z-index: 100007; max-width: none; margin: 0; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .2s; } .aivs--studio.aivs-nav-open > .aivs-scrim { opacity: 1; pointer-events: auto; } .aivs--studio.aivs-nav-open > .aivs-head { z-index: 100008; } .aivs--studio .aivs-head .aivs-tabs { position: static; z-index: auto; flex: none; flex-direction: column; justify-content: flex-start; gap: 4px; padding: 0; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .aivs--studio .aivs-head .aivs-tabs > a:first-child, .aivs--studio .aivs-head .aivs-tabs > a:last-child { margin: 0; } .aivs--studio .aivs-tabs a, .aivs--studio .aivs-head .aivs-tabs.is-tight a:not(.is-current) { flex: none; flex-direction: row; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 12px; font-size: 15px; font-weight: 500; } .aivs--studio .aivs-tabs a.is-current { font-weight: 600; background: linear-gradient(90deg, rgba(63, 230, 180, .28), rgba(63, 230, 180, .06)); box-shadow: inset 3px 0 0 var(--ds-mint); } .aivs--studio .aivs-tabs__label, .aivs--studio .aivs-head .aivs-tabs.is-tight a:not(.is-current) .aivs-tabs__label { display: inline; } .aivs--studio .aivs-tabs__short, .aivs--studio .aivs-head .aivs-tabs.is-tight a:not(.is-current) .aivs-tabs__short { display: none; } .aivs--studio .aivs-head .aivs-tabs a[href="#settings"], .aivs--studio .aivs-head .aivs-tabs a[href="#series"], .aivs--studio .aivs-head .aivs-tabs a[href="#podcast"], .aivs--studio .aivs-head .aivs-tabs a[href="#manual"], .aivs--studio .aivs-head .aivs-tabs > a[href="#pricing"], .aivs--studio .aivs-head .aivs-tabs .aivs-tabs__sep, .aivs--studio .aivs-head .aivs-tabs .aivs-tabs__site { display: flex; } .aivs--studio .aivs-head .aivs-tabs .aivs-tabs__sep { display: block; } .aivs--studio .aivs-usermenu__item--phone { display: none; } /* the top bar: fixed at the right of the logo's bar - the icons only */ .aivs--studio > .aivs-topbar { position: fixed; z-index: 61; top: 0; right: max(10px, env(safe-area-inset-right)); left: auto; height: 60px; max-width: none; margin: 0; padding: 0; gap: 6px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .aivs--studio .aivs-topbar__find { flex: none; width: 44px; padding: 0; justify-content: center; } .aivs--studio .aivs-topbar__ph, .aivs--studio .aivs-topbar__kbd, .aivs--studio .aivs-topbar__label, .aivs--studio .aivs-topbar__soon { display: none; } .aivs--studio .aivs-topbar__end { gap: 6px; } .aivs--studio .aivs-topbar__ai, .aivs--studio .aivs-topbar__bell { width: 44px; min-height: 44px; padding: 0; justify-content: center; } .aivs--studio .aivs-topbar .aivs-usermenu__who, .aivs--studio .aivs-topbar .aivs-usermenu__btn > .aivs-ico { display: none; } .aivs--studio .aivs-topbar .aivs-usermenu__btn { padding: 2px; } .aivs--studio .aivs-topbar .aivs-avatar { width: 38px; height: 38px; } .aivs--studio .aivs-topbar .aivs-usermenu__pop { width: min(300px, calc(100vw - 28px)); } .aivs--studio .aivs-topbar__login { min-height: 40px; padding: 0 12px; } /* the bar at the bottom */ .aivs--studio > .aivs-tabbar { position: fixed; z-index: 62; left: 0; right: 0; bottom: 0; max-width: none; margin: 0; display: flex; align-items: flex-end; justify-content: space-around; box-sizing: border-box; height: calc(70px + env(safe-area-inset-bottom)); padding: 6px max(6px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); background: var(--ds-menu); border-top: 1px solid rgba(140, 195, 230, .234); } .aivs--studio .aivs-tabbar__a { flex: 1 1 0; min-width: 0; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px 0; border: 0; background: none; color: var(--ds-muted); font: inherit; font-size: 11.5px; line-height: 1.2; text-decoration: none; cursor: pointer; } .aivs--studio .aivs-tabbar__a .aivs-ico { width: 23px; height: 23px; } .aivs--studio .aivs-tabbar__a.is-current, .aivs--studio .aivs-tabbar__a[aria-expanded="true"] { color: var(--ds-mint); font-weight: 600; } .aivs--studio .aivs-tabbar__a:hover { color: #fff; } .aivs--studio .aivs-tabbar__t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aivs--studio .aivs-tabbar__make { color: #efd993; font-weight: 600; } .aivs--studio .aivs-tabbar__make .aivs-tabbar__ico { display: grid; place-items: center; width: 56px; height: 56px; margin-top: -28px; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #fff3b8, #eaca6c 45%, #c69d3e); border: 3px solid #0d2a40; box-shadow: 0 0 0 2px rgba(234, 202, 108, .6), 0 8px 24px -6px rgba(234, 202, 108, .8); } .aivs--studio .aivs-tabbar__make .aivs-ico { width: 26px; height: 26px; color: #2b1d03; stroke-width: 2; } .aivs--studio .aivs-tabbar__make.is-current { color: #efd993; } .aivs-root--edit.aivs--studio > .aivs-tabbar { display: none; } /* the AI: the top bar's button opens the chat over the page - no bar of its own at the bottom any more */ body.aivs-studio .aivs--studio > .aivs-aibar { display: none; } body.aivs-studio.aivs-ai-bar #aivs-app.aivs--studio { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } body.aivs-studio .aivs--studio > .aivs-ai.is-rail { top: 60px; } /* what sat at the bottom of the screen steps above the bar */ .aivs-toast, body.aivs-studio.aivs-ai-bar .aivs-toast { bottom: calc(84px + env(safe-area-inset-bottom)); } body.aivs-studio .aivs--studio > .aivs-mainbar, body.aivs-studio.aivs-ai-bar .aivs--studio > .aivs-mainbar { bottom: calc(78px + env(safe-area-inset-bottom)); } body.aivs-studio .aivs-guide.is-min { bottom: calc(82px + env(safe-area-inset-bottom)); } body.aivs-studio .aivs-gfab { bottom: calc(86px + env(safe-area-inset-bottom)); } .aivs--studio .aivs-summary { top: 72px; } } @media (max-width: 760px) { /* a film waiting for review: the guide's round button above the approve bar, itself above the bottom bar */ body.aivs-studio.aivs-mainbar-on .aivs-gfab { bottom: calc(166px + env(safe-area-inset-bottom)); } } @media (max-width: 420px) { .aivs--studio .aivs-topbar__bell { display: none; } } /* ================================================================ v1.43.10 หน้าหลัก as the owner's reference picture (owner 28 Oct 08:01-08:19 "มีตรงไหน ไม่เหมือน" · "ตรวจ ระยะห่างระหว่างปุ่มหรือตัวหนังสือด้วยนะ" · "จัดตำแหน่งดีๆ"): the picture behind the greeting and the idea box, the idea box glowing, the templates in one row, the kinds a picture each with its name on it, six in a row, the latest jobs five in a row, ten tools, the right column a fixed width with three panels */ .aivs--studio .aivs-home { display: grid; grid-template-columns: minmax(0, 1fr) clamp(272px, 23%, 336px); gap: 28px 24px; align-items: start; } .aivs--studio .aivs-home > :not(.aivs-home__side) { grid-column: 1; min-width: 0; } .aivs--studio .aivs-home__side { grid-column: 2; grid-row: 1 / span 6; display: flex; flex-direction: column; gap: 18px; min-width: 0; } @container aivs (max-width: 900px) { .aivs--studio .aivs-home { grid-template-columns: minmax(0, 1fr); } .aivs--studio .aivs-home__side { grid-column: 1; grid-row: auto; } } .aivs--studio .aivs-home [hidden] { display: none !important; } .aivs--studio .aivs-home__sec { display: flex; flex-direction: column; gap: 14px; container-type: inline-size; container-name: homesec; } /* the greeting + the idea box (the owner's picture behind both, faded on the left and at the foot) */ .aivs--studio .aivs-home__hero { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 20px; padding-top: 6px; } .aivs--studio .aivs-home__hero::before { content: ""; position: absolute; z-index: -2; inset: -24px 0 30% 30%; pointer-events: none; background: radial-gradient(55% 70% at 70% 30%, rgba(56, 189, 248, .16), transparent 70%), radial-gradient(40% 60% at 98% 70%, rgba(72, 194, 202, .14), transparent 72%); } .aivs--studio .aivs-home__hero.has-img::before { content: none; } .aivs--studio .aivs-home__heroimg { position: absolute; z-index: -1; top: -18px; right: 0; width: 80%; height: min(100%, 320px); min-height: 220px; object-fit: cover; object-position: 65% 35%; border-radius: 0 22px 0 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 24%, #000 50%, #000 94%, rgba(0, 0, 0, .7)), linear-gradient(180deg, #000 52%, transparent 97%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 24%, #000 50%, #000 94%, rgba(0, 0, 0, .7)), linear-gradient(180deg, #000 52%, transparent 97%); mask-composite: intersect; } .aivs--studio .aivs-home__herotext { display: flex; flex-direction: column; gap: 10px; max-width: 620px; } .aivs--studio .aivs-home__hero.has-img .aivs-home__herotext { padding-top: 22px; } .aivs--studio .aivs-home__title { margin: 0; font-family: var(--ds-display); font-size: clamp(34px, 1.6vw + 18px, 50px); line-height: 1.14; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); } .aivs--studio .aivs-home__line { display: block; } .aivs--studio .aivs-home__hello { margin: 0 0 -2px; font-size: 16px; font-weight: 600; color: #e8f1f7; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); } .aivs--studio .aivs-gold { background: linear-gradient(180deg, #fff6c2, #f0d77f 45%, #d8b95f); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .aivs--studio .aivs-home__lead { margin: 0; font-size: 16.5px; line-height: 1.55; color: #e8f1f7; text-shadow: 0 1px 12px rgba(0, 0, 0, .75); } .aivs--studio .aivs-home__form { position: relative; border-radius: 18px; padding: 16px 16px 14px; background: linear-gradient(180deg, rgba(14, 36, 54, .86), rgba(8, 24, 38, .9)); border: 1px solid rgba(80, 210, 215, .78); box-shadow: 0 0 0 1px rgba(80, 210, 215, .16), 0 0 28px -2px rgba(64, 200, 205, .42), inset 0 0 26px rgba(64, 200, 205, .06); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .aivs--studio .aivs-home__ideabox { display: flex; align-items: flex-start; gap: 12px; padding: 10px 16px; border-radius: 12px; background: rgba(24, 48, 68, .66); border: 1px solid rgba(140, 195, 230, .16); } .aivs--studio .aivs-home__ideabox > .aivs-ico { flex: none; width: 22px; height: 22px; margin-top: 10px; color: #f0d77f; } body.aivs-studio .aivs--studio .aivs-home__idea, body.aivs-studio .aivs--studio .aivs-home__idea:focus { flex: 1; min-width: 0; min-height: 30px; margin: 0; padding: 8px 0; border: 0; background: transparent; box-shadow: none; outline: none; color: var(--ds-strong); font: inherit; font-size: 16.5px; line-height: 1.55; resize: none; overflow-y: auto; } .aivs--studio .aivs-home__idea::placeholder { color: #8fabc3; } .aivs--studio .aivs-home__formrow { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; } .aivs--studio .aivs-home__formtools, .aivs--studio .aivs-home__formgo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .aivs--studio .aivs-home__formgo { margin-left: auto; } .aivs--studio .aivs-home__formtools .aivs-btn { min-height: 40px; padding: 0 14px; gap: 8px; border-radius: 10px; font-size: 14.5px; } .aivs--studio .aivs-home__formrow .aivs-ico { width: 17px; height: 17px; } .aivs--studio .aivs-home__mic.is-on { border-color: rgba(248, 113, 113, .8); background: rgba(248, 113, 113, .14); color: #fecaca; } .aivs--studio .aivs-home__mic.is-on .aivs-ico { color: #f87171; animation: aivs-pulse 1.2s ease-in-out infinite; } .aivs--studio .aivs-home__plan { min-height: 46px; padding: 0 18px; gap: 8px; border-radius: 12px; border-color: rgba(96, 228, 186, .6); background: rgba(6, 44, 56, .62); color: #e8fdff; font-size: 15px; } .aivs--studio .aivs-home__plan .aivs-ico { color: #f0d77f; } .aivs--studio .aivs-home__plan:hover { border-color: rgba(96, 228, 186, .95); background: rgba(8, 62, 76, .7); } body.aivs-studio .aivs--studio .aivs-home__go { min-height: 48px; min-width: 168px; padding: 0 26px; gap: 10px; justify-content: center; border-radius: 12px; font-size: 16.5px; } .aivs--studio .aivs-home__more { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ds-hair); display: flex; flex-direction: column; gap: 10px; } .aivs--studio .aivs-home__morerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .aivs--studio .aivs-home__morek { flex: none; min-width: 64px; font-size: 13.5px; font-weight: 600; color: var(--ds-muted); } .aivs--studio .aivs-home__more .aivs-seg { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; background: none; box-shadow: none; } .aivs--studio .aivs-home__more .aivs-seg button { min-height: 34px; padding: 0 13px; border-radius: 999px; font-size: 13.5px; } .aivs--studio .aivs-home__moreall { align-self: flex-start; font-size: 13.5px; } /* the templates: one row that slides */ .aivs--studio .aivs-home__chips { display: flex; align-items: center; gap: 12px; min-width: 0; } .aivs--studio .aivs-home__chipk { flex: none; font-size: 14px; font-weight: 600; color: #e6eef4; } .aivs--studio .aivs-home__chiptrack { flex: 1 1 auto; min-width: 0; display: flex; gap: 10px; padding: 2px 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; } .aivs--studio .aivs-home__chiptrack::-webkit-scrollbar { display: none; } .aivs--studio .aivs-home__chiptrack.has-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); } .aivs--studio .aivs-home__chips .aivs-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: 999px; font-size: 14px; white-space: nowrap; text-decoration: none; } .aivs--studio .aivs-home__chips .aivs-chip .aivs-ico { width: 16px; height: 16px; color: var(--ds-link); } .aivs--studio .aivs-home__chips .aivs-chip--more { color: var(--ds-link); } .aivs--studio .aivs-home__chipnext { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 999px; border: 1px solid var(--ds-edge2); background: var(--ds-raise); color: #fff; cursor: pointer; } .aivs--studio .aivs-home__chipnext:hover { border-color: rgba(96, 228, 186, .9); } .aivs--studio .aivs-home__chipnext .aivs-ico { width: 18px; height: 18px; } /* the sections' heads */ .aivs--studio .aivs-home__sechead { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .aivs--studio .aivs-home__sechead h2 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 23px; line-height: 1.25; } .aivs--studio .aivs-home__sechead h2 small { font-family: "Studio Sans", "Noto Sans Thai", sans-serif; font-size: 13.5px; font-weight: 400; color: var(--ds-muted); } .aivs--studio .aivs-home__secic { display: inline-grid; place-items: center; color: #f4cf5d; } .aivs--studio .aivs-home__secic .aivs-ico { width: 24px; height: 24px; } .aivs--studio .aivs-home__all { flex: none; font-size: 14.5px; font-weight: 500; color: var(--ds-link); white-space: nowrap; text-decoration: none; } .aivs--studio .aivs-home__all:hover { text-decoration: underline; } /* the kinds: a picture each, the name on it; six (or as many as there are) in one row, three on a narrower page */ .aivs--studio .aivs-home__kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } @container homesec (min-width: 820px) { .aivs--studio .aivs-home__kinds--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .aivs--studio .aivs-home__kinds--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .aivs--studio .aivs-home__kinds--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .aivs--studio .aivs-home__kind { position: relative; isolation: isolate; display: block; min-width: 0; aspect-ratio: 5 / 5.6; border-radius: 16px; overflow: hidden; border: 1px solid rgba(140, 195, 230, .3); background: #0b1d2d; color: #fff; text-decoration: none; transition: transform .15s, border-color .15s, box-shadow .15s; } .aivs--studio .aivs-home__kind:hover, .aivs--studio .aivs-home__kind:focus-visible { transform: translateY(-3px); border-color: rgba(96, 228, 186, .85); color: #fff; box-shadow: 0 0 0 1px rgba(96, 228, 186, .3), 0 16px 30px -16px rgba(62, 214, 170, .7); } .aivs--studio .aivs-home__kind::after { content: ""; position: absolute; z-index: -1; inset: 34% 0 0; background: linear-gradient(180deg, transparent, rgba(2, 14, 24, .62) 45%, rgba(2, 14, 24, .92)); } .aivs--studio .aivs-home__media { position: absolute; z-index: -2; inset: 0; display: block; } .aivs--studio .aivs-home__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .aivs--studio .aivs-home__kind:hover .aivs-home__media img { transform: scale(1.04); } .aivs--studio .aivs-home__art { display: grid; place-items: start center; width: 100%; height: 100%; padding-top: 24%; box-sizing: border-box; } .aivs--studio .aivs-home__art .aivs-ico { width: 46px; height: 46px; stroke-width: 1.5; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .35)); } .aivs--studio .aivs-home__art--film { background: radial-gradient(90% 80% at 30% 15%, rgba(96, 165, 250, .5), transparent 70%), linear-gradient(160deg, #173f63, #0a1d2c); color: #cfe2ff; } .aivs--studio .aivs-home__art--review { background: radial-gradient(90% 80% at 30% 15%, rgba(245, 138, 192, .5), transparent 70%), linear-gradient(160deg, #4a1a3c, #0a1d2c); color: #fbd5ea; } .aivs--studio .aivs-home__art--shorts { background: radial-gradient(90% 80% at 30% 15%, rgba(56, 220, 171, .5), transparent 70%), linear-gradient(160deg, #0f4a5c, #0a1d2c); color: #b6faf3; } .aivs--studio .aivs-home__art--doc { background: radial-gradient(90% 80% at 30% 15%, rgba(240, 215, 127, .5), transparent 70%), linear-gradient(160deg, #4a3a10, #0a1d2c); color: #faebbd; } .aivs--studio .aivs-home__art--podcast { background: radial-gradient(90% 80% at 30% 15%, rgba(196, 165, 255, .5), transparent 70%), linear-gradient(160deg, #33245c, #0a1d2c); color: #e6dbff; } .aivs--studio .aivs-home__art--quick { background: radial-gradient(90% 80% at 30% 15%, rgba(34, 211, 238, .5), transparent 70%), linear-gradient(160deg, #0d3f58, #0a1d2c); color: #b3f2fb; } .aivs--studio .aivs-home__kbody { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 13px 13px; } .aivs--studio .aivs-home__kic { display: block; margin-bottom: 6px; } .aivs--studio .aivs-home__kic .aivs-ico { width: 26px; height: 26px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); } .aivs--studio .aivs-home__kind:not(.has-img) .aivs-home__kic { display: none; } .aivs--studio .aivs-home__kind--film .aivs-home__kic, .aivs--studio .aivs-home__kind--review .aivs-home__kic, .aivs--studio .aivs-home__kind--podcast .aivs-home__kic { color: #f4cf5d; } .aivs--studio .aivs-home__kind--shorts .aivs-home__kic, .aivs--studio .aivs-home__kind--doc .aivs-home__kic, .aivs--studio .aivs-home__kind--quick .aivs-home__kic { color: #4fe6bf; } .aivs--studio .aivs-home__kbody strong { font-size: 15px; line-height: 1.3; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aivs--studio .aivs-home__kbody small { padding-right: 30px; font-size: 12.5px; line-height: 1.4; color: #d6e3ec; } .aivs--studio .aivs-home__kgo { position: absolute; right: 9px; bottom: 13px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .55); background: rgba(2, 14, 24, .35); color: #fff; } .aivs--studio .aivs-home__kgo .aivs-ico { width: 14px; height: 14px; } /* v1.58.20: six across in a narrow row (the main column 820-939 px - without the AI's rail a 1440 screen gives cards of ~125 px): a smaller gap, padding and name so the name is not cut */ @container homesec (min-width: 820px) and (max-width: 939px) { .aivs--studio .aivs-home__kinds--6 { gap: 10px; } .aivs--studio .aivs-home__kinds--6 .aivs-home__kbody { padding: 10px 9px 11px 10px; } .aivs--studio .aivs-home__kinds--6 .aivs-home__kbody strong { font-size: 14px; } .aivs--studio .aivs-home__kinds--6 .aivs-home__kbody small { padding-right: 26px; font-size: 12px; } .aivs--studio .aivs-home__kinds--6 .aivs-home__kgo { right: 7px; bottom: 11px; width: 24px; height: 24px; } } /* your latest jobs: the picture (its kind, its length), the name and ⋯, when it last moved, its state (a bar with % while it works) */ .aivs--studio .aivs-home__recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; } @container homesec (min-width: 860px) { .aivs--studio .aivs-home__recent { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .aivs--studio .aivs-home__job { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 14px; border: 1px solid var(--ds-edge); background: linear-gradient(180deg, rgba(18, 40, 60, .92), rgba(10, 26, 40, .92)); color: var(--ds-text); transition: border-color .15s, box-shadow .15s; } .aivs--studio .aivs-home__job:hover { border-color: rgba(96, 228, 186, .75); box-shadow: 0 12px 26px -16px rgba(62, 214, 170, .6); } .aivs--studio .aivs-home__jlink { position: absolute; z-index: 1; inset: 0; border-radius: inherit; } .aivs--studio .aivs-home__jlink:focus-visible { outline: 2px solid var(--ds-link); outline-offset: 2px; } .aivs--studio .aivs-home__jmedia { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 13px 13px 0 0; overflow: hidden; background: linear-gradient(135deg, #123a56, #0a1c2a); } .aivs--studio .aivs-home__jmedia img { display: block; width: 100%; height: 100%; object-fit: cover; } .aivs--studio .aivs-home__jmedia .aivs-media__empty { display: grid; place-items: center; height: 100%; color: var(--ds-faint); font-size: 12px; } .aivs--studio .aivs-home__jkind { position: absolute; left: 8px; bottom: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(2, 14, 24, .74); color: #fff; } .aivs--studio .aivs-home__jkind .aivs-ico { width: 15px; height: 15px; } .aivs--studio .aivs-home__jdur { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(2, 14, 24, .8); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.5; } .aivs--studio .aivs-home__jbody { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 10px 12px 12px; } .aivs--studio .aivs-home__jtop { display: flex; align-items: center; gap: 4px; min-width: 0; } .aivs--studio .aivs-home__jtop strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; color: #f4f9fd; } .aivs--studio .aivs-home__jbody > small { font-size: 12.5px; } .aivs--studio .aivs-home__jmore { position: relative; z-index: 2; flex: none; } .aivs--studio .aivs-home__jmore > summary { list-style: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--ds-muted); cursor: pointer; } .aivs--studio .aivs-home__jmore > summary::-webkit-details-marker { display: none; } .aivs--studio .aivs-home__jmore > summary:hover, .aivs--studio .aivs-home__jmore[open] > summary { background: rgba(255, 255, 255, .08); color: #fff; } .aivs--studio .aivs-home__jmore > summary .aivs-ico { width: 20px; height: 20px; stroke-width: 3.4; } .aivs--studio .aivs-home__jmenu { position: absolute; z-index: 5; right: 0; top: calc(100% + 4px); display: flex; flex-direction: column; min-width: 176px; padding: 6px; border-radius: 12px; border: 1px solid var(--ds-edge2); background: #0e2132; box-shadow: var(--g-shadow-lg); } .aivs--studio .aivs-home__jmenu a, .aivs--studio .aivs-home__jmenu button { display: block; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--ds-soft); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; } .aivs--studio .aivs-home__jmenu a:hover, .aivs--studio .aivs-home__jmenu button:hover { background: rgba(62, 214, 170, .12); color: #fff; } .aivs--studio .aivs-home__jst { display: flex; align-items: center; gap: 8px; min-width: 0; } .aivs--studio .aivs-home__jst .aivs-pill { max-width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .aivs--studio .aivs-prog { position: relative; flex: 1 1 auto; min-width: 0; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; } .aivs--studio .aivs-prog__fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #3b82f6, #7cb4ff); transition: width .4s; } .aivs--studio .aivs-prog__t { position: relative; display: block; padding: 0 10px 0 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; line-height: 22px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); } .aivs--studio .aivs-prog__t::before { content: ""; position: absolute; left: 9px; top: 7px; width: 8px; height: 8px; border-radius: 999px; border: 2px solid #fff; box-sizing: border-box; } .aivs--studio .aivs-home__pct { flex: none; font-size: 12.5px; font-weight: 700; color: #e6eef4; font-variant-numeric: tabular-nums; } .aivs--studio .aivs-home__why { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.4; color: #f6d27a; } .aivs--studio .aivs-home__none { grid-column: 1 / -1; padding: 22px 16px; text-align: center; } .aivs--studio .aivs-home__none p { margin: 0; } /* the tools: ten in a row (five on a narrower page), a coloured mark each */ .aivs--studio .aivs-home__tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } @container homesec (min-width: 500px) { .aivs--studio .aivs-home__tools { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @container homesec (min-width: 780px) { /* every tool in one row */ .aivs--studio .aivs-home__tools--10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .aivs--studio .aivs-home__tools--9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .aivs--studio .aivs-home__tools--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .aivs--studio .aivs-home__tools--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .aivs--studio .aivs-home__tools--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .aivs--studio .aivs-home__tool { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 14px 6px 12px; border-radius: 14px; border: 1px solid var(--ds-edge); background: linear-gradient(180deg, rgba(22, 46, 68, .82), rgba(12, 30, 46, .82)); color: var(--ds-text); text-align: center; text-decoration: none; transition: border-color .15s, transform .15s; } .aivs--studio .aivs-home__tool:hover { border-color: rgba(96, 228, 186, .8); color: var(--ds-text); transform: translateY(-2px); } .aivs--studio .aivs-home__tic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 4px; border-radius: 12px; } .aivs--studio .aivs-home__tic .aivs-ico { width: 24px; height: 24px; } .aivs--studio .aivs-home__tool--violet .aivs-home__tic { background: rgba(167, 139, 250, .18); color: #c9b8ff; } .aivs--studio .aivs-home__tool--blue .aivs-home__tic { background: rgba(96, 165, 250, .18); color: #9cc8ff; } .aivs--studio .aivs-home__tool--teal .aivs-home__tic { background: rgba(52, 211, 153, .18); color: #7cf2b8; } .aivs--studio .aivs-home__tool--white .aivs-home__tic { background: rgba(255, 255, 255, .12); color: #fff; } .aivs--studio .aivs-home__tool--cyan .aivs-home__tic { background: rgba(34, 211, 238, .18); color: #7eebfb; } .aivs--studio .aivs-home__tool--pink .aivs-home__tic { background: rgba(244, 114, 182, .18); color: #fbb2d8; } .aivs--studio .aivs-home__tool strong { font-size: 13px; font-weight: 600; line-height: 1.3; color: #f4f9fd; } .aivs--studio .aivs-home__tool small { font-size: 11.5px; line-height: 1.35; color: var(--ds-muted); } /* the right column: the director, the studio's works to look at, the jobs at work */ .aivs--studio .aivs-home__side .aivs-panel { margin: 0; padding: 18px; display: flex; flex-direction: column; gap: 12px; border-radius: 18px; } .aivs--studio .aivs-home__panelhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .aivs--studio .aivs-home__panelhead h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 19px; line-height: 1.3; } .aivs--studio .aivs-home__panelhead h2 .aivs-ico { width: 20px; height: 20px; color: #f4cf5d; } .aivs--studio .aivs-home__panelhead .aivs-home__all { font-size: 13.5px; } .aivs--studio .aivs-home__side p { margin: 0; font-size: 14px; line-height: 1.5; } .aivs--studio .aivs-home__online { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #d7f7ee; white-space: nowrap; } .aivs--studio .aivs-home__online::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: #22e3b0; box-shadow: 0 0 10px rgba(34, 227, 176, .8); } .aivs--studio .aivs-home__dirtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--ds-hair); background: rgba(2, 14, 24, .45); } .aivs--studio .aivs-home__dirtabs button { min-height: 36px; padding: 0 8px; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--ds-muted); font: inherit; font-size: 14px; cursor: pointer; } .aivs--studio .aivs-home__dirtabs button:hover { color: #fff; } .aivs--studio .aivs-home__dirtabs button.is-on { border-color: rgba(96, 228, 186, .6); background: linear-gradient(180deg, rgba(3, 123, 106, .62), rgba(0, 78, 68, .5)); color: #fff; font-weight: 600; box-shadow: 0 0 16px -4px rgba(62, 214, 170, .6); } .aivs--studio .aivs-home__dirpane { display: flex; flex-direction: column; gap: 10px; } .aivs--studio .aivs-home__bubble { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 42px 14px 12px; border-radius: 14px; border: 1px solid var(--ds-edge); background: rgba(22, 46, 68, .68); color: var(--ds-text); text-decoration: none; } .aivs--studio .aivs-home__bubble:hover { border-color: rgba(96, 228, 186, .7); color: var(--ds-text); } .aivs--studio .aivs-home__bav { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; overflow: hidden; background: #071a28; box-shadow: 0 0 0 2px rgba(240, 215, 127, .75); color: #f0d77f; } .aivs--studio .aivs-home__bav img { width: 100%; height: 100%; object-fit: contain; } .aivs--studio .aivs-home__bav .aivs-ico { width: 22px; height: 22px; } .aivs--studio .aivs-home__btext { font-size: 13.5px; line-height: 1.55; } .aivs--studio .aivs-home__bgo { position: absolute; right: 9px; bottom: 9px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--ds-edge2); } .aivs--studio .aivs-home__bgo .aivs-ico { width: 14px; height: 14px; } .aivs--studio .aivs-home__dirgo { justify-content: center; min-height: 42px; gap: 8px; } .aivs--studio .aivs-home__dirgo .aivs-ico { width: 18px; height: 18px; } .aivs--studio .aivs-home__exlist, .aivs--studio .aivs-home__running { display: flex; flex-direction: column; gap: 10px; } .aivs--studio .aivs-home__exrow, .aivs--studio .aivs-home__run { display: flex; align-items: center; gap: 12px; min-width: 0; margin: -6px; padding: 6px; border-radius: 12px; color: var(--ds-text); text-decoration: none; } .aivs--studio .aivs-home__exrow:hover, .aivs--studio .aivs-home__run:hover { background: rgba(255, 255, 255, .05); color: var(--ds-text); } .aivs--studio .aivs-home__exthumb, .aivs--studio .aivs-home__rthumb { flex: none; display: grid; place-items: center; width: 96px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0b2032; color: var(--ds-muted); } .aivs--studio .aivs-home__exthumb img, .aivs--studio .aivs-home__rthumb img { width: 100%; height: 100%; object-fit: cover; } .aivs--studio .aivs-home__rthumb .aivs-ico { width: 22px; height: 22px; } .aivs--studio .aivs-home__ext, .aivs--studio .aivs-home__rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .aivs--studio .aivs-home__ext strong, .aivs--studio .aivs-home__rt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .aivs--studio .aivs-home__ext small, .aivs--studio .aivs-home__rt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ds-muted); } .aivs--studio .aivs-home__rbar { display: flex; align-items: center; gap: 8px; } .aivs--studio .aivs-home__rbar .aivs-bar { flex: 1; margin: 0; } .aivs--studio .aivs-home__rbar .aivs-bar > span { background: linear-gradient(90deg, #3b82f6, #4fe6bf); } .aivs--studio .aivs-home__rbar small { flex: none; font-size: 12px; font-weight: 700; color: #e6eef4; } .aivs--studio .aivs-home__nonote { font-size: 13.5px; } /* a phone */ @media (max-width: 760px) { .aivs--studio .aivs-home { gap: 22px; } .aivs--studio .aivs-home__hero { margin: -8px -16px 0; padding: 6px 16px 0; gap: 18px; } .aivs--studio .aivs-home__heroimg { top: 0; width: 100%; height: 230px; min-height: 0; border-radius: 0; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), #000 40%, transparent 98%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), #000 40%, transparent 98%); } .aivs--studio .aivs-home__hero.has-img .aivs-home__herotext { padding-top: 70px; } .aivs--studio .aivs-home__title { font-size: 30px; } .aivs--studio .aivs-home__lead { font-size: 15px; } .aivs--studio .aivs-home__form { padding: 12px; } .aivs--studio .aivs-home__formgo { width: 100%; } .aivs--studio .aivs-home__plan { flex: 1 1 auto; justify-content: center; } body.aivs-studio .aivs--studio .aivs-home__go { flex: 1 1 auto; min-width: 0; } .aivs--studio .aivs-home__chipk { display: none; } .aivs--studio .aivs-home__chipnext { display: none; } .aivs--studio .aivs-home__kinds, .aivs--studio .aivs-home__recent { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 4px; scrollbar-width: none; scroll-snap-type: x mandatory; } .aivs--studio .aivs-home__kinds::-webkit-scrollbar, .aivs--studio .aivs-home__recent::-webkit-scrollbar { display: none; } .aivs--studio .aivs-home__kind { flex: none; width: 136px; scroll-snap-align: start; } .aivs--studio .aivs-home__job { flex: none; width: 196px; scroll-snap-align: start; } .aivs--studio .aivs-home__tools { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .aivs--studio .aivs-home__tool { padding: 12px 4px 10px; } .aivs--studio .aivs-home__tool small { display: none; } .aivs--studio .aivs-home__sechead h2 { font-size: 20px; } .aivs--studio .aivs-home__sechead h2 small { display: none; } } @media (max-width: 400px) { .aivs--studio .aivs-home__tools { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ================================================================ v1.43.9 เครื่องมือ: one page for every tool (the canvas "เครื่องมือ") */ .aivs--studio .aivs-hub { display: flex; flex-direction: column; gap: 22px; margin-bottom: 18px; } .aivs--studio .aivs-hub h2 { margin: 0 0 12px; font-size: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .aivs--studio .aivs-hub h2 small { font-family: "Studio Sans", "Noto Sans Thai", sans-serif; font-size: 13px; font-weight: 400; color: var(--ds-muted); } .aivs--studio .aivs-hub__edit { margin-bottom: 0 !important; } .aivs--studio .aivs-hub__makes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .aivs--studio .aivs-hub__make { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 16px; border: 1px solid var(--ds-edge); background: var(--ds-card); color: var(--ds-text); text-decoration: none; } .aivs--studio .aivs-hub__make:hover { border-color: var(--ds-edge3); color: var(--ds-text); } .aivs--studio .aivs-hub__make strong { font-size: 16px; color: #fff; } .aivs--studio .aivs-hub__make small { font-size: 13.5px; color: var(--ds-muted); line-height: 1.5; } .aivs--studio .aivs-hub__price { font-size: 13.5px; font-weight: 700; color: #efd993; } .aivs--studio .aivs-hub__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(20, 42, 60, .6); } .aivs--studio .aivs-hub__ic .aivs-ico { width: 26px; height: 26px; } .aivs--studio .aivs-hub__ic--image { color: #60a5fa; } .aivs--studio .aivs-hub__ic--voice { color: #f58ac0; } .aivs--studio .aivs-hub__ic--clip { color: #5fe3bb; } .aivs--studio .aivs-hub__helps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .aivs--studio .aivs-hub__help { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--ds-edge); background: var(--ds-card); color: var(--ds-text); text-decoration: none; } .aivs--studio .aivs-hub__help:hover { border-color: var(--ds-edge3); color: var(--ds-text); } .aivs--studio .aivs-hub__hic .aivs-ico { width: 26px; height: 26px; color: #eaca6c; } .aivs--studio .aivs-hub__help:nth-child(2) .aivs-hub__hic .aivs-ico { color: #7ff0ce; } .aivs--studio .aivs-hub__help:nth-child(3) .aivs-hub__hic .aivs-ico { color: #c4a5ff; } .aivs--studio .aivs-hub__ht { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .aivs--studio .aivs-hub__ht small { font-size: 12.5px; color: var(--ds-muted); line-height: 1.45; } /* the quick / canvas / tools switch: the chosen one mint (it was white on light mint) */ .aivs--studio .aivs-canvasswitch { background: var(--ds-input); box-shadow: inset 0 0 0 1px rgba(120, 230, 197, .16); border: 0; } .aivs--studio .aivs-canvasswitch a { color: #cfe9e1; } body.aivs-studio .aivs--studio .aivs-canvasswitch a.is-on { background: var(--ds-chosen); color: #fff; box-shadow: var(--ds-chosen-ring); } /* the tab bar's เมนู is the old menu button (its look) */ @media (max-width: 1100px) { .aivs--studio .aivs-tabbar .aivs-tabbar__menu { width: auto; height: auto; display: flex; padding: 4px 2px 0; border: 0; border-radius: 0; background: none; color: var(--ds-muted); } .aivs--studio .aivs-tabbar .aivs-tabbar__menu .aivs-ico { width: 23px; height: 23px; stroke-width: 1.8; } .aivs--studio .aivs-home__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .aivs--studio .aivs-home__chips::-webkit-scrollbar { display: none; } .aivs--studio .aivs-home__chips > * { flex: none; } } @media (max-width: 1100px) { .aivs--studio .aivs-head .aivs-tabs a .aivs-ico, .aivs--studio .aivs-drawer .aivs-tabs a .aivs-ico, .aivs--studio .aivs-head .aivs-tabs a.is-current .aivs-ico { box-sizing: border-box; width: 20px; height: 20px; padding: 0; border-radius: 0; background: none; box-shadow: none; } } /* ---- words on a light strong colour stay dark; a number in mint */ .aivs--studio .aivs-pricing__num strong { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ds-mint); -webkit-text-fill-color: currentColor; } .aivs--studio .aivs-ed__play, .aivs--studio .aivs-ed__seg .is-on, .aivs--studio .aivs-ed__seg button.is-on { color: #041d2f; } .aivs--studio .aivs-rvtier__rec, .aivs--studio .aivs-start__face { color: #031824; } .aivs--studio .aivs-pwbox__eye { color: var(--ds-link); } .aivs--studio .aivs-tplchips__row { display: flex; flex-wrap: wrap; gap: 8px; } .aivs--studio .aivs-tplchips .aivs-chip { border-radius: 999px; padding: 6px 12px; font-size: 13.5px; text-decoration: none; } .aivs--studio .aivs-tplchips .aivs-chip--more { color: var(--ds-link); } .aivs--studio .aivs-tplchips .aivs-label small { font-weight: 400; } @media (max-width: 760px) { .aivs--studio .aivs-tplchips__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .aivs--studio .aivs-tplchips__row::-webkit-scrollbar { display: none; } .aivs--studio .aivs-tplchips__row > * { flex: none; } } /* ================================================================ v1.43.10 the colours of the owner's reference picture (28 Oct 08:07 "สีก็ไม่เหมือน ของเขามีความสว่างกว่านะ ลองแกะสีดู"): the colours above were turned once by worker/tools/build_dark.py --navy (navy-teal ground #031824, slate-navy cards, pale blue edges, teal-cyan for what is chosen); here the few the picture shows exactly: cyan links (#0ecefd), the chosen page in the menu teal glass with a gold bar, the softer champagne gold, solid state pills (ฟ้า กำลังทำ · เขียว เสร็จ · เหลือง รอ), and the top bar from the menu to the AI's column ("จัดตำแหน่งดีๆ" - it stopped short) */ body.aivs-studio { --ds-link: #3fd4fb; --ds-hair: rgba(140, 195, 230, .12); --ds-done: #51f79d; --ds-gold: linear-gradient(180deg, #fbf1a6, #e7d07d 48%, #d5ba66); --ds-gold-hover: linear-gradient(180deg, #fff6c0, #efd98e 48%, #dcc274); --ds-gold-glow: 0 8px 22px -10px rgba(231, 208, 125, .85); --st-gold: var(--ds-gold); --kr-gold: var(--ds-gold); --kr-gold-hover: var(--ds-gold-hover); } .aivs--studio { --aivs-done: #51f79d; } .aivs--studio a:hover { color: #a5ecff; } .aivs--studio .aivs-tabs a.is-current { background: linear-gradient(90deg, rgba(15, 120, 96, .62), rgba(0, 66, 74, .3)); box-shadow: inset 0 0 0 1px rgba(72, 214, 174, .5), inset 3px 0 0 #f1d97c, 0 0 22px -8px rgba(72, 214, 174, .75); } .aivs--studio .aivs-tabs a.is-current .aivs-ico { color: #8ff7d4; } .aivs--studio .aivs-tabs a:hover:not(.is-current) { background: rgba(72, 214, 174, .1); } .aivs--studio .aivs-pill { gap: 6px; padding: 3px 11px 3px 8px; } .aivs--studio .aivs-pill .aivs-dot { background: currentColor; opacity: .8; } .aivs--studio .aivs-pill.aivs-tone-done { background: #51f79d; color: #062a17; } .aivs--studio .aivs-pill.aivs-tone-work { background: #7cb4ff; color: #071d3d; } .aivs--studio .aivs-pill.aivs-tone-wait { background: #fdcc66; color: #2e1f02; } .aivs--studio .aivs-pill.aivs-tone-fail { background: #fb8a8a; color: #2e0808; } .aivs--studio .aivs-pill.aivs-tone-idle { background: rgba(203, 213, 225, .16); color: #d6dee6; } .aivs--studio .aivs-bar > span { background: linear-gradient(90deg, #3b82f6, #4fe6bf); } /* the pages a little wider (1240 → 1480 px, the picture fills the screen); the top bar from the menu to the AI's column, its search box and buttons over the page's own edges */ .aivs--studio > :not(.aivs-head):not(.aivs-scrim) { max-width: 1480px; } @media (min-width: 1101px) { body.aivs-studio #aivs-app.aivs--studio > .aivs-topbar { max-width: none; margin-left: -32px; margin-right: -32px; padding-left: calc(32px + max(0px, (100% - 1480px) / 2)); padding-right: calc(32px + max(0px, (100% - 1480px) / 2)); border-bottom: 1px solid rgba(140, 195, 230, .08); background: linear-gradient(180deg, rgba(3, 24, 36, .95) 70%, rgba(3, 24, 36, .85)); } } /* the AI's column: its two tabs in a band as tall as the top bar, so both lines meet ("จัดตำแหน่งดีๆ") */ @media (min-width: 1101px) { body.aivs-studio .aivs-ai:not(.is-sheet) .aivs-ai__tabs { margin: 15px 16px 16px; } } /* หน้าหลัก: the right column's headings on one line; a phone's idea-box buttons three in a row */ .aivs--studio .aivs-home__panelhead h2 { font-size: 17.5px; white-space: nowrap; } .aivs--studio .aivs-home__panelhead h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 760px) { .aivs--studio .aivs-home__formtools { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; } .aivs--studio .aivs-home__formtools .aivs-btn { justify-content: center; padding: 0 6px; gap: 6px; font-size: 13.5px; white-space: nowrap; } } /* the AI's chat: the page's own line when a job moved on (finished, stopped, waits for you) */ .aivs-ai__sys { display: flex; align-items: flex-start; gap: 8px; margin: 2px 4px; padding: 9px 12px; border-radius: 12px; border: 1px dashed rgba(140, 195, 230, .35); background: rgba(20, 42, 60, .5); color: #dbe8f1; font-size: 13.5px; line-height: 1.5; } .aivs-ai__sys .aivs-ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #f4cf5d; } .aivs-ai__sys--done { border-color: rgba(81, 247, 157, .5); } .aivs-ai__sys--done .aivs-ico { color: #51f79d; } .aivs-ai__sys--fail, .aivs-ai__sys--wait { border-color: rgba(253, 204, 102, .5); } .aivs--studio .aivs-card__why { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.4; color: #f6d27a; } /* v1.43.11 every width from a tablet up (the owner 28 Oct 12:28 "ไอแพดแนวตั้งลงตัวไหม เช็คดีๆ"): the card choices fill their rows whatever room the page gives them (an iPad upright or on its side, a laptop with the AI column open) - wrapping rows whose cards grow into a row's gap: รีวิวสินค้า's five ways all in a row or three then two wide ones, its four tiers and ราคา's four examples in a row or two by two (never three and one alone), a tool group three across (two left = two wide ones), เครื่องมือ's helpers in a row */ @media (min-width: 761px) { .aivs--studio .aivs-rvcards--style, .aivs--studio .aivs-rvcards--tier, .aivs--studio .aivs-pricing__ex, .aivs--studio .aivs-toolgrid, .aivs--studio .aivs-hub__helps { display: flex; flex-wrap: wrap; } .aivs--studio :is(.aivs-rvcards--style, .aivs-rvcards--tier, .aivs-pricing__ex, .aivs-toolgrid, .aivs-hub__helps) > * { min-width: 0; } .aivs--studio .aivs-rvcards--style > * { flex: 1 1 max(calc(20% - 8px), min(calc(33.333% - 7px), calc((880px - 100%) * 999))); } .aivs--studio .aivs-rvcards--tier > * { flex: 1 1 max(calc(25% - 8px), min(calc(50% - 5px), calc((860px - 100%) * 999))); } .aivs--studio .aivs-pricing__ex > * { flex: 1 1 max(calc(25% - 11px), min(calc(50% - 7px), calc((900px - 100%) * 999))); } .aivs--studio .aivs-toolgrid > * { flex: 1 1 calc(33.333% - 4px); } .aivs--studio .aivs-hub__helps > * { flex: 1 1 max(calc(33.333% - 10px), min(100%, calc((620px - 100%) * 999))); } } .aivs--studio .aivs-toolpick > p { grid-column: 1 / -1; } /* ไฟล์ต้นฉบับ's "nothing yet" line across the picker, not in one 86 px cell */ /* ================================================================ v1.43.11 the mockups' green (owner 28 Oct 11:28 "สีความเขียวไม่เหลือเลย ให้มีความ เขียวตาม มอกอัพได้ไหม"): every colour 1.43.10 turned to its cyan accent (177°) moved once to the mockups' green teal (162°, the same lightness - build_dark.py --green); in the 1.43.10 blocks above, by hand: the menu's chosen page a green-teal glass (its gold bar kept), the director's chosen tab, the hovers of หน้าหลัก's cards and buttons, the teal tool's mark green. หน้าหลัก's idea box keeps its cyan edge, the links their cyan, the edges their pale blue - as the mockups draw them */ /* ================================================================ v1.43.12 one AI place on หน้าหลัก (owner 28 Oct 14:45 "Ai 2 ตัวนี้ ปกติ หรือบัค", then "รวมเหลือที่เดียว"): with the AI column open (a computer) the director's card leaves หน้าหลัก and its free walk-through and the jobs waiting for you sit at the top of the column (app.js aiDirSync); folded to the rail, on a tablet or a phone the card stays on the page */ .aivs-ai__dirstrip { display: none; } body.aivs-ai-col .aivs-ai:not(.is-sheet) .aivs-ai__dirstrip:not([hidden]) { display: flex; flex: none; align-items: stretch; gap: 8px; margin: 12px 16px 0; } body.aivs-ai-col .aivs--studio .aivs-home__dir { display: none; } body.aivs-ai-col .aivs-ai:not(.is-sheet) .aivs-ai__dirstrip:not([hidden]) ~ .aivs-ai__body .aivs-ai__guidebtn { display: none; } /* (the empty chat's own button: the strip above has it) */ .aivs-ai__dirgo { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; text-decoration: none; color: #fff; background: linear-gradient(90deg, rgba(15, 120, 96, .62), rgba(0, 66, 74, .3)); box-shadow: inset 0 0 0 1px rgba(72, 214, 174, .45); } /* (the menu's chosen glass) */ .aivs-ai__dirgo:hover, .aivs-ai__dirgo:focus-visible { box-shadow: inset 0 0 0 1px rgba(96, 228, 186, .85), 0 0 18px -8px rgba(72, 214, 174, .8); } .aivs-ai__dirgo > .aivs-ico { flex: none; width: 20px; height: 20px; color: #8ff7d4; } .aivs-ai__dirgo > .aivs-ico:last-child { width: 16px; height: 16px; margin-left: auto; color: #b4f7d6; } .aivs-ai__dirgo > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .aivs-ai__dirgo strong { font-size: 14px; color: #fff; } .aivs-ai__dirgo small { font-size: 12px; color: #b4f7d6; } .aivs-ai__dirwait { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 66px; padding: 6px 10px; border-radius: 12px; text-decoration: none; color: #fde3a6; background: rgba(253, 204, 102, .1); box-shadow: inset 0 0 0 1px rgba(253, 204, 102, .45); } .aivs-ai__dirwait:hover, .aivs-ai__dirwait:focus-visible { background: rgba(253, 204, 102, .18); } .aivs-ai__dirwait small { font-size: 12px; line-height: 1.2; } .aivs-ai__dirwait b { font-size: 17px; line-height: 1.15; color: #fdcc66; } /* v1.44.0 สมัคร / เข้าสู่ระบบด้วย Google และ LINE: ตั้งค่า → สมาชิก (the keys, the callback addresses, open / approve / the day's cap), the members' badges and รออนุมัติ, บัญชีของฉัน → เชื่อม Google / LINE */ .aivs--studio .aivs-signup__keys, .aivs--studio .aivs-authbox__list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .aivs--studio .aivs-signup__key, .aivs--studio .aivs-authbox__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--st-line); } .aivs--studio .aivs-signup__key.is-on, .aivs--studio .aivs-authbox__row.is-on { box-shadow: inset 0 0 0 1px rgba(72, 214, 174, .45); } .aivs--studio .aivs-signup__name, .aivs--studio .aivs-authbox__name { display: flex; flex-direction: column; min-width: 120px; } .aivs--studio .aivs-signup__name small, .aivs--studio .aivs-authbox__name small { color: var(--st-muted); } .aivs--studio .aivs-signup__key.is-on .aivs-signup__name small, .aivs--studio .aivs-authbox__row.is-on .aivs-authbox__name small { color: #8ff7d4; } .aivs--studio .aivs-authbox__name { flex: 1; } .aivs--studio .aivs-signup__cb { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .aivs--studio .aivs-signup__cb small { color: var(--st-muted); } .aivs--studio .aivs-signup__cb code { overflow-wrap: anywhere; font-size: 12.5px; } .aivs--studio .aivs-signup__daily { display: inline-flex; align-items: center; gap: 8px; } .aivs--studio .aivs-signup__daily input { width: 90px; } .aivs--studio .aivs-members__via { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; vertical-align: 1px; color: #e6edf2; background: rgba(255, 255, 255, .08); } .aivs--studio .aivs-members__via--line { color: #d9f2e3; background: rgba(6, 199, 85, .2); } .aivs--studio .aivs-members tr.is-wait td { background: rgba(253, 204, 102, .06); } .aivs--studio .aivs-members__wait { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fde3a6; background: rgba(253, 204, 102, .12); box-shadow: inset 0 0 0 1px rgba(253, 204, 102, .45); } /* หน้าหลัก with the AI column open on a wide screen (owner 28 Oct 17:44, a 2000 px screen: "ตรงนี้ว่างไว้คืออะไร" - 1.43.12 moved the director's card into the column and left the right column empty under งานที่กำลังทำ): with the column open the page is one column at every width (as it already was below 900 px of page), the greeting, the kinds and the jobs use the whole width, and the panels that were on the right sit side by side at the foot; folded to the rail, the director's card comes back with its right column as before */ body.aivs-ai-col .aivs--studio .aivs-home { grid-template-columns: minmax(0, 1fr); } body.aivs-ai-col .aivs--studio .aivs-home__side { grid-column: 1; grid-row: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; gap: 18px; } body.aivs-ai-col .aivs--studio .aivs-home__work .aivs-home__running { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } /* หน้าหลัก on a narrower page (the AI column open on a 1280-1500 px screen, a tablet; not a phone - its rows scroll sideways): no short last row - five latest jobs 3 + 2 and four 2 + 2 (four in a row from 640 px), each row the whole width, the pictures one height; nine tools 5 + 4 and seven 4 + 3 filling the width, eight 4 + 4, six 3 + 3 */ @media (min-width: 761px) { @container homesec (max-width: 859px) { .aivs--studio .aivs-home__recent--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .aivs--studio .aivs-home__recent--5 > * { grid-column: span 2; } .aivs--studio .aivs-home__recent--5 > :nth-child(n+4) { grid-column: span 3; } .aivs--studio .aivs-home__recent--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aivs--studio .aivs-home__recent--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .aivs--studio .aivs-home__recent--5 .aivs-home__jmedia, .aivs--studio .aivs-home__recent--4 .aivs-home__jmedia { aspect-ratio: auto; height: 132px; } } @container homesec (min-width: 640px) and (max-width: 859px) { .aivs--studio .aivs-home__recent--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @container homesec (min-width: 500px) and (max-width: 779px) { .aivs--studio .aivs-home__tools--9 { grid-template-columns: repeat(20, minmax(0, 1fr)); } .aivs--studio .aivs-home__tools--9 > * { grid-column: span 4; } .aivs--studio .aivs-home__tools--9 > :nth-child(n+6) { grid-column: span 5; } .aivs--studio .aivs-home__tools--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .aivs--studio .aivs-home__tools--7 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .aivs--studio .aivs-home__tools--7 > * { grid-column: span 3; } .aivs--studio .aivs-home__tools--7 > :nth-child(n+5) { grid-column: span 4; } .aivs--studio .aivs-home__tools--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } } /* the AI column folded for a visitor / a new member (owner 28 Oct 17:59): its icon lit until it is opened once (still for reduced motion) */ .aivs-ai.is-rail.has-hint .aivs-ai__rail .aivs-ico { box-shadow: 0 0 0 2px rgba(72, 214, 174, .55), 0 0 18px -2px rgba(72, 214, 174, .7); animation: aivs-ai-hint 2.4s ease-in-out infinite; } @keyframes aivs-ai-hint { 50% { box-shadow: 0 0 0 4px rgba(72, 214, 174, .25), 0 0 26px 2px rgba(72, 214, 174, .45); } } @media (prefers-reduced-motion: reduce) { .aivs-ai.is-rail.has-hint .aivs-ai__rail .aivs-ico { animation: none; } } /* ---- v1.58.20 (the owner 5 Nov 19:58 "เหลือจุดเดียวพอเอาที่ที่ที่คนเห็น"): one way to the AI - the top bar's ผู้ช่วย AI on every page and every screen. The folded rail at the right edge is not drawn (the panel opens from the top bar; an answer waiting puts a dot on that button); the floating ผู้กำกับพาทำ button is gone (its panel keeps ให้ผู้กำกับพาทำ). On a phone the button is gold, so it is seen. */ body.aivs-studio .aivs--studio > .aivs-ai.is-rail { display: none !important; } .aivs--studio .aivs-topbar__ai { position: relative; } .aivs--studio .aivs-topbar__ai.has-dot::after { content: ""; position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: #eaca6c; box-shadow: 0 0 0 2px #0d2030; } @media (max-width: 1100px) { .aivs--studio .aivs-topbar__ai { background: linear-gradient(135deg, rgba(234, 202, 108, .22), rgba(234, 202, 108, .08)); border-color: rgba(234, 202, 108, .55); } } /* a visitor / a new member: the button lit until the chat is opened once (was the folded rail's icon, owner 28 Oct 17:59); still for reduced motion */ .aivs--studio .aivs-topbar__ai.has-hint { box-shadow: 0 0 0 2px rgba(72, 214, 174, .55), 0 0 18px -2px rgba(72, 214, 174, .7); animation: aivs-ai-hint 2.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .aivs--studio .aivs-topbar__ai.has-hint { animation: none; } } .aivs--studio .aivs-home__waitcard .aivs-home__running { margin-top: 4px; } /* (the 5 Nov audit) a pop-up hung from its button's right edge, when that button sits on the left: hung from the left edge (app.js fitPop) */ .aivs--studio .aivs-jobmore__pop.is-left { right: auto; left: 0; } .aivs--studio .aivs-pmhint.is-left { right: auto; left: 0; } .aivs--studio .aivs-pmhint.is-left::before { right: auto; left: 22px; } /* (the 5 Nov audit) a phone zooms the page in when a box under 16px is tapped (25 of 37 pages): on a touch screen every box, list and text area is 16px (here, not in the WordPress plugin's app.css - its admin pages keep their look) */ @media (pointer: coarse) { .aivs input.aivs-input, .aivs select, .aivs textarea, .aivs input[type="text"], .aivs input[type="search"], .aivs input[type="email"], .aivs input[type="password"], .aivs input[type="number"], .aivs input[type="url"], .aivs input[type="tel"] { font-size: 16px !important; } .aivs select { max-width: 100%; } /* a list sized to its words never pushes the page wider than a small phone */ } @media (max-width: 760px) { .aivs input.aivs-input, .aivs textarea.aivs-input, .aivs select.aivs-input { max-width: 100%; box-sizing: border-box; } } /* (the 5 Nov audit) a 320-px phone: the website's settings and the price page no longer wider than the screen */ .aivs--studio .aivs-site { grid-template-columns: minmax(0, 1fr); } .aivs--studio .aivs-site__status { overflow-wrap: anywhere; } .aivs--studio .aivs-pricing__two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } @media (max-width: 900px) { .aivs--studio .aivs-pricing__two { grid-template-columns: minmax(0, 1fr); } } /* (the 5 Nov audit) Thai under 12px is hard to read: a card's small lines at least 12px */ .aivs--studio figcaption small { font-size: max(12px, .85em); } /* (the 5 Nov audit) the manual button's new-hint dot stood 4 px past the button - with the rail gone the button may touch the screen's right edge (an iPad): the dot sits on the corner, inside */ .aivs--studio .aivs-helplink.is-hint::after { right: 2px; } /* ---- v1.58.20 (the owner 5 Nov 22:17 "ทำให้กระชับหน่อยได้ไหม … และในมือถือ เมื่อกดบันทึก … มันจะเด้งเลื่อนขึ้นบนสุด"): the character / product library compact - a card as tall as its own words (not the row's tallest), the description two lines, the outfit one, the picture-check note one line that opens; a phone: a list (the picture at the left); a card being edited opens its form in its own place (app.js); the form tighter, its บันทึก bar kept in view on a smaller screen */ .aivs--studio .aivs-libgrid { align-items: start; gap: 12px; } .aivs--studio .aivs-libcard { gap: 6px; } .aivs--studio .aivs-libcard img, .aivs--studio .aivs-libcard > .aivs-libcard__noimg { aspect-ratio: 16 / 10; } .aivs--studio .aivs-libcard figcaption { gap: 2px; line-height: 1.45; } .aivs--studio .aivs-libcard__desc { -webkit-line-clamp: 2; } .aivs--studio .aivs-libcard__outfit { -webkit-line-clamp: 1; } .aivs--studio .aivs-libcard__nooutfit { font-size: 12px; } .aivs--studio .aivs-libcard .aivs-actions { margin-top: 4px; gap: 6px; } .aivs--studio .aivs-libcard__warn--fold { margin-top: 2px; padding: 0; border: 0; background: none; font-size: 12px; } .aivs--studio .aivs-libcard__warn--fold > summary { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; box-sizing: border-box; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(234, 202, 108, .5); background: rgba(234, 202, 108, .12); color: #f0d896; font-weight: 600; cursor: pointer; list-style: none; } .aivs--studio .aivs-libcard__warn--fold > summary::-webkit-details-marker { display: none; } .aivs--studio .aivs-libcard__warn--fold > summary::after { content: "›"; transition: transform .15s; } .aivs--studio .aivs-libcard__warn--fold[open] > summary::after { transform: rotate(90deg); } .aivs--studio .aivs-libcard__warn--fold[open] { padding: 0 0 6px; } .aivs--studio .aivs-libcard__warn--fold ul { margin: 6px 0 4px; padding-left: 16px; color: var(--st-ink2); } .aivs--studio .aivs-libcard__warn--fold small { color: var(--st-muted); } .aivs--studio .aivs-libcard.is-saved { box-shadow: 0 0 0 2px rgba(96, 228, 186, .85), 0 0 24px -6px rgba(72, 214, 174, .8); transition: box-shadow .3s; } .aivs--studio .aivs-libgrid__edit { grid-column: 1 / -1; min-width: 0; scroll-margin-top: 84px; } .aivs--studio .aivs-libgrid__edit > .aivs-libedit { margin-top: 0; } .aivs--studio .aivs-libdraw-fold { width: 100%; } .aivs--studio .aivs-libdraw-fold > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px dashed rgba(20, 154, 114, .55); background: rgba(13, 32, 48, .6); color: var(--st-green-ink); font-weight: 600; font-size: 13.5px; cursor: pointer; list-style: none; } .aivs--studio .aivs-libdraw-fold > summary::-webkit-details-marker { display: none; } .aivs--studio .aivs-libdraw-fold[open] > summary { margin-bottom: 6px; } .aivs--studio .aivs-libedit { gap: 14px; padding: 14px; } .aivs--studio .aivs-libedit__body { gap: 8px; } .aivs--studio .aivs-libedit .aivs-vdesign, .aivs--studio .aivs-libedit .aivs-bible { padding: 10px; gap: 6px; } .aivs--studio .aivs-libedit__body > .aivs-libedit__move { justify-self: end; margin-left: 0; } @media (max-width: 1100px) { /* the form's บันทึก / ยกเลิก stay at the bottom of the screen (above the pages' bar) while the form is long */ .aivs--studio .aivs-libedit__body > .aivs-actions { position: sticky; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 4; margin: 4px -8px 0; padding: 10px 8px; border-radius: 14px; background: rgba(8, 26, 36, .94); border: 1px solid rgba(140, 195, 230, .18); } } @media (max-width: 560px) { .aivs--studio .aivs-libgrid { grid-template-columns: minmax(0, 1fr); gap: 8px; } .aivs--studio .aivs-libcard { grid-template-columns: 104px minmax(0, 1fr); align-items: start; column-gap: 10px; padding: 8px; border-radius: 16px; } .aivs--studio .aivs-libcard img, .aivs--studio .aivs-libcard > .aivs-libcard__noimg { aspect-ratio: 1 / 1; border-radius: 12px; } .aivs--studio .aivs-libcard figcaption { font-size: 12.5px; } .aivs--studio .aivs-libcard figcaption > strong { font-size: 14px; } .aivs--studio .aivs-libcard .aivs-actions .aivs-btn--small { min-height: 36px; padding: 0 12px; } .aivs--studio .aivs-libedit { padding: 12px; gap: 10px; } .aivs--studio .aivs-libedit__img { grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 6px 10px; } .aivs--studio .aivs-libedit__img > a, .aivs--studio .aivs-libedit__img > .aivs-libcard__noimg { grid-row: span 2; } .aivs--studio .aivs-libedit__img > a img, .aivs--studio .aivs-libedit__img .aivs-libcard__noimg { width: 112px; max-height: 150px; } .aivs--studio .aivs-libedit__img > .aivs-libdraw, .aivs--studio .aivs-libedit__img > .aivs-libdraw-fold, .aivs--studio .aivs-libedit__img > .aivs-me__lock { grid-column: 1 / -1; } .aivs--studio .aivs-libedit__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .aivs--studio .aivs-libedit__body > .aivs-actions { margin: 4px -6px 0; padding: 8px 6px; } .aivs--studio .aivs-libedit__body > .aivs-libedit__move { justify-self: start; } } /* v1.58.22 เครื่องปรับเสียง: the feelings (12 chips with a colour dot), the sounds put in the words, the ready-made styles, what the voice gets; the drama's lines (บทพูด — อารมณ์ทีละบรรทัด) */ .aivs--studio .aivs-vsemo { display: flex; flex-wrap: wrap; gap: 6px; } .aivs--studio .aivs-vsemo__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--st-line2); background: rgba(13, 32, 48, .72); color: var(--st-ink2); font: inherit; font-size: .93em; cursor: pointer; } .aivs--studio .aivs-vsemo__chip:hover { border-color: rgba(44, 221, 168, .4); color: var(--st-ink); } .aivs--studio .aivs-vsemo__chip.is-on { border-color: var(--st-green2); background: var(--st-tint2); color: var(--st-ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--st-green2); } .aivs--studio .aivs-vsemo__dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; flex: none; } .aivs--studio .aivs-vstags, .aivs--studio .aivs-vspresets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 6px; } .aivs--studio .aivs-vstag { min-height: 32px; padding: 4px 10px; border-radius: 10px; border: 1px dashed var(--st-line2); background: transparent; color: var(--st-ink2); font: inherit; font-size: .9em; cursor: pointer; } .aivs--studio .aivs-vstag:hover { border-style: solid; border-color: rgba(44, 221, 168, .5); color: var(--st-ink); } .aivs--studio .aivs-vsstyle { min-height: 72px; } .aivs--studio .aivs-vssent { margin: 6px 0 4px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--st-line2); background: var(--st-ground); font-size: .92em; overflow-wrap: anywhere; } .aivs--studio .aivs-vssent p { margin: 4px 0 0; } .aivs--studio .aivs-dlines { margin: 14px 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--st-line); background: var(--g-fill); } .aivs--studio .aivs-dlines > summary { cursor: pointer; font-weight: 600; } .aivs--studio .aivs-dlines__cast { display: grid; gap: 6px; margin: 10px 0; } .aivs--studio .aivs-dlines__who { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 8px 10px; border-radius: 10px; background: var(--st-ground); } .aivs--studio .aivs-dlines__list { display: grid; gap: 8px; margin: 10px 0; } .aivs--studio .aivs-dlines__row { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--st-line); background: rgba(13, 32, 48, .5); } .aivs--studio .aivs-dlines__row.is-open { border-color: var(--st-green2); } .aivs--studio .aivs-dlines__row.is-edited { box-shadow: inset 3px 0 0 var(--st-green2); } .aivs--studio .aivs-dlines__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .aivs--studio .aivs-dlines__n { width: 24px; color: var(--st-faint); font-size: .88em; } .aivs--studio .aivs-dlines__name { min-width: 64px; } .aivs--studio .aivs-dlines__emo { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--st-line2); background: var(--st-input); color: var(--st-ink); font: inherit; font-size: .92em; cursor: pointer; } .aivs--studio .aivs-dlines__style { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aivs--studio .aivs-dlines__text { margin: 6px 0 0 34px; line-height: 1.6; } .aivs--studio .aivs-dlines__edit { margin: 8px 0 0 34px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--st-line); background: var(--st-ground); } @media (max-width: 560px) { .aivs--studio .aivs-dlines__text, .aivs--studio .aivs-dlines__edit { margin-left: 0; } .aivs--studio .aivs-dlines__style { flex-basis: 100%; white-space: normal; } } /* v1.58.23 ขยายคลิป / แก้คลิป: the dialog (the clip, the model, what to make, the seconds, the words sent, the price) */ .aivs-copdlg .aivs-copdlg__card { display: flex; flex-direction: column; gap: 10px; } .aivs-copdlg .aivs-copdlg__card h2 { margin: 0; } .aivs-copdlg__src { width: 100%; max-height: 38vh; border-radius: 12px; background: #000; object-fit: contain; } .aivs-copdlg__ops { flex-wrap: wrap; } .aivs-copdlg__words { font-size: 13px; line-height: 1.45; } .aivs-copdlg__words[readonly] { opacity: .8; } .aivs-copdlg__more summary { cursor: pointer; font-weight: 600; margin-bottom: 6px; } .aivs-copdlg__lines { margin: 0; padding-left: 18px; font-size: 13px; } .aivs--studio .aivs-shot__clipops { flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; } /* v1.58.23 บทความ: ประวัติการแก้ไข (each kept version, ย้อนกลับเป็นฉบับนี้) and the box inserter */ .aivs--studio .aivs-site__history { margin: 10px 0; } .aivs--studio .aivs-site__history summary { cursor: pointer; font-weight: 600; } .aivs--studio .aivs-site__verlist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; } .aivs--studio .aivs-site__verlist li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(140, 195, 230, .07); font-size: 13.5px; } .aivs--studio .aivs-site__insertbox { width: auto; min-width: 160px; } /* v1.58.23 ซีรีส์ใหม่: what a ready-made style fills, and the fields that pull two ways */ .aivs--studio .aivs-seriesnew__fills { margin: 6px 0 10px; font-size: 13.5px; } .aivs--studio .aivs-seriesnew__fills summary { cursor: pointer; font-weight: 600; } .aivs--studio .aivs-seriesnew__fills ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; } .aivs--studio .aivs-serieswarn__row { margin: 6px 0; font-size: 13.5px; } /* v1.58.23 (the owner's phone 7 Nov 07:48 "เว้นด้านข้างไว้ทำไม"): สร้างเร็ว's pictures and characters fill the row - the first-frame tiles and the character / picture chips share the width (as many as fit, stretched), no empty strip on the right */ .aivs--studio .aivs-quickframes { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); } .aivs--studio .aivs-quickframes .aivs-quickframe { width: auto; min-width: 0; } .aivs--studio .aivs-quickframes .aivs-quickframe img { height: auto; aspect-ratio: 4 / 3; } .aivs--studio .aivs-quicklib, .aivs--studio .aivs-quickmine { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .aivs--studio .aivs-quicklib .aivs-libchip, .aivs--studio .aivs-quickmine .aivs-libchip { min-width: 0; } .aivs--studio .aivs-quicklib .aivs-libchip span, .aivs--studio .aivs-quickmine .aivs-libchip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* v1.58.24 ภาพจบ / รูปกลางทาง: a fold under the first frame - the pictures in order (each with what happens on the way to it), the end picture last, a picker of the person's own pictures; the row fills the width on a phone as the first-frame tiles do */ .aivs--studio .aivs-pins { margin: 4px 0 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--st-line2); background: rgba(13, 32, 48, .45); } .aivs--studio .aivs-pins > summary { cursor: pointer; font-weight: 600; } .aivs--studio .aivs-pins__how { margin: 6px 0 8px; } .aivs--studio .aivs-pins__warn { margin: 6px 0; font-size: 13px; } .aivs--studio .aivs-pins__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; } .aivs--studio .aivs-pin { display: grid; gap: 6px; margin: 0; min-width: 0; } .aivs--studio .aivs-pin__pic { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: rgba(13, 32, 48, .6); border: 1px solid var(--g-edge); } .aivs--studio .aivs-pin__pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .aivs--studio .aivs-pin.has-error .aivs-pin__pic { outline: 2px solid #c02b2b; } .aivs--studio .aivs-pin__no { position: absolute; left: 6px; bottom: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(13, 39, 58, .78); color: #fff; font-size: 12px; font-weight: 700; } .aivs--studio .aivs-pin__left { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(13, 39, 58, .7); color: #fff; font-size: 16px; line-height: 20px; } .aivs--studio .aivs-pin__what { min-width: 0; padding: 6px 8px; font-size: 12.5px; } .aivs--studio .aivs-pin--add { display: grid; place-items: center; align-content: center; gap: 4px; min-height: 84px; padding: 8px; border-radius: 14px; cursor: pointer; border: 1.5px dashed rgba(44, 221, 168, .35); background: transparent; color: var(--st-green-ink); font: inherit; font-size: 12.5px; font-weight: 600; text-align: center; } .aivs--studio .aivs-pin--add.is-on { border-style: solid; background: rgba(44, 221, 168, .08); } .aivs--studio .aivs-pins__pick { margin-top: 10px; } /* v1.58.24 หลายช็อตในคลิปเดียว (Kling 4.0): a fold like the pictures' - one row a shot (what happens, its seconds) */ .aivs--studio .aivs-shots { margin: 4px 0 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--st-line2); background: rgba(13, 32, 48, .45); } .aivs--studio .aivs-shots > summary { cursor: pointer; font-weight: 600; } .aivs--studio .aivs-shots__list { margin: 8px 0; padding-left: 22px; display: grid; gap: 8px; } .aivs--studio .aivs-shots__row { display: grid; grid-template-columns: minmax(0, 1fr) 84px auto; gap: 6px; align-items: center; } .aivs--studio .aivs-shots__what { min-width: 0; } .aivs--studio .aivs-quickrefs__how--grok { margin-top: 4px; } /* v1.58.24 โมเดลใหม่ (ตั้งค่า → อัปเดต & สำรอง): one row a model, its id and where it was listed, รับทราบ on the right */ .aivs--studio .aivs-mw__list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; } .aivs--studio .aivs-mw__row { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--st-line2); background: rgba(13, 32, 48, .45); } .aivs--studio .aivs-mw__row > div { min-width: 0; overflow-wrap: anywhere; } .aivs--studio .aivs-mw__acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .aivs--studio .aivs-mw__err { margin: 6px 0; font-size: 13px; } /* v1.58.25: a what's-new item cut at ~170 letters opens whole on a tap; the quick page's button for an old clip of theirs */ .aivs-wn__more { background: none; border: 0; padding: 0 2px; margin: 0; color: var(--st-green-ink); font: inherit; font-size: .92em; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .aivs-wn__more:focus-visible { outline: 2px solid var(--st-green-ink); outline-offset: 2px; border-radius: 4px; } .aivs-quickup { margin: 0 0 10px; } .aivs-copdlg__send input { max-width: 220px; } /* v1.58.25: แก้เฉพาะจุด - boxes dragged over the first picture (GPT Image through OpenAI) */ .aivs-markdlg__card { max-width: min(720px, 96vw); } .aivs-markdlg__stage { position: relative; display: inline-block; max-width: 100%; margin: 6px 0 8px; touch-action: none; user-select: none; } .aivs-markdlg__img { display: block; max-width: 100%; max-height: 62vh; border-radius: 10px; } .aivs-markdlg__layer { position: absolute; inset: 0; cursor: crosshair; } .aivs-markdlg__box { position: absolute; border: 3px solid #ff4d4d; background: rgba(255, 77, 77, .18); border-radius: 4px; box-sizing: border-box; } .aivs-markdlg__box.is-live { border-style: dashed; } .aivs-markdlg__x { position: absolute; top: -12px; right: -12px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #ff4d4d; color: #fff; font-size: 16px; line-height: 24px; padding: 0; cursor: pointer; } .aivs-quickmarks .aivs-actions { margin-top: 4px; } /* v1.58.25: แก้เฉพาะช่วง in the edit dialog (two seconds side by side) · ✨ ปรับพรอมต์: the style's line, the length, too long */ .aivs-copdlg__part { display: grid; gap: 6px; margin: 4px 0 2px; min-width: 0; } .aivs-copdlg__range { display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); gap: 10px; } .aivs-copdlg__range .aivs-field { margin: 0; } .aivs-copdlg__part .aivs-actions { margin: 0; } .aivs-copdlg__est { display: contents; } /* v1.58.26 ความถนัดของฉัน: ชุดที่ใช้บ่อย / แบบครั้งก่อน / ค่าเริ่มต้นของฉัน (one row, wraps) · the rule question */ .aivs--studio .aivs-habits { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 10px; min-width: 0; } .aivs--studio .aivs-habits__t { font-size: 13px; color: var(--st-muted); margin-right: 2px; } .aivs--studio .aivs-habit { display: inline-flex; align-items: stretch; border: 1px solid var(--st-line2); border-radius: 10px; overflow: hidden; max-width: 100%; } .aivs--studio .aivs-habit.is-on { border-color: var(--st-green2); box-shadow: inset 0 0 0 1px var(--st-green2); } .aivs--studio .aivs-habit__use { min-height: 32px; padding: 4px 10px; border: 0; background: transparent; color: var(--st-ink2); font: inherit; font-size: .9em; cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .aivs--studio .aivs-habit__use small { color: var(--st-muted); } .aivs--studio .aivs-habit--last, .aivs--studio .aivs-habit--def { border: 1px dashed var(--st-line2); border-radius: 10px; } .aivs--studio .aivs-habit__x { min-width: 32px; border: 0; border-left: 1px solid var(--st-line); background: transparent; color: var(--st-muted); font-size: 16px; cursor: pointer; } .aivs--studio .aivs-habit__x:hover, .aivs--studio .aivs-habit__use:hover { color: var(--st-ink); } .aivs--studio .aivs-habit__setdef { font-size: 13px; } .aivs--studio .aivs-habitask { margin: 4px 0 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(44, 221, 168, .45); background: var(--st-tint2); } .aivs--studio .aivs-habitask p { margin: 0 0 8px; } .aivs--studio .aivs-habitask .aivs-actions { margin: 0; } .aivs--studio .aivs-enh__desc { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--st-muted, #aabac6); overflow-wrap: anywhere; } .aivs--studio .aivs-enh__len { font-size: 12px; color: var(--st-muted, #aabac6); } .aivs--studio .aivs-enh__len.is-over { color: #ff9b8f; font-weight: 600; } /* v1.58.25: พับรายการยาว (one row - the picked first - + ดูทั้งหมด / ย่อ, a name search past 12) · การ์ดกระชับ (a smaller picture, the main action + ⋯, a long error in three lines, ดูเพิ่ม) */ .aivs--studio .aivs-pfold { display: grid; gap: 8px; min-width: 0; } .aivs--studio .aivs-pfold .is-folded, .aivs--studio .aivs-pfold .is-nomatch { display: none !important; } .aivs--studio .aivs-pfold__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; } .aivs--studio .aivs-pfold__n { font-size: 12.5px; color: var(--st-muted); } .aivs--studio .aivs-pfold__q { flex: 1 1 150px; max-width: 260px; min-width: 0; padding: 6px 10px; font-size: 13px; } .aivs--studio .aivs-pfold__t { margin-left: auto; } .aivs--studio .aivs-pfold__none { margin: 0; } .aivs--studio .aivs-gengrid .aivs-gen__media:not(.aivs-gen__media--voice) { aspect-ratio: 16 / 11; } .aivs--studio .aivs-gengrid .aivs-gen__text { -webkit-line-clamp: 2; } .aivs--studio .aivs-gen__errbox { display: grid; gap: 2px; justify-items: start; min-width: 0; } .aivs--studio .aivs-gen__err.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .aivs--studio .aivs-gen__errmore { background: none; border: 0; padding: 0; color: var(--st-green-ink); font: inherit; font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .aivs--studio .aivs-gen__more { position: relative; } .aivs--studio .aivs-gen__more > summary { list-style: none; min-width: 40px; justify-content: center; font-size: 18px; line-height: 1; } .aivs--studio .aivs-gen__more > summary::-webkit-details-marker { display: none; } .aivs--studio .aivs-gen__menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30; display: grid; gap: 2px; min-width: 168px; max-width: calc(100vw - 32px); padding: 6px; border-radius: 12px; border: 1px solid var(--g-edge); background: #0e2132; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); } .aivs--studio .aivs-gen__menu .aivs-btn { width: 100%; justify-content: flex-start; text-align: left; border-color: transparent; background: transparent; white-space: normal; } .aivs--studio .aivs-gen__menu .aivs-btn:hover { background: rgba(255, 255, 255, .06); } .aivs--studio .aivs-gen__menu .aivs-gen__del { color: #f87171; } .aivs--studio .aivs-gen__morebar { justify-content: center; margin-top: 12px; } /* the voice: สไตล์การพูด + แบบสำเร็จรูป under ปรับเพิ่ม */ .aivs--studio .aivs-vsmore { border: 1px solid var(--g-edge); border-radius: 12px; padding: 8px 12px; min-width: 0; } .aivs--studio .aivs-vsmore > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--st-ink2); } .aivs--studio .aivs-vsmore[open] > summary { margin-bottom: 8px; } .aivs--studio .aivs-vsmore > summary:focus-visible { outline: 2px solid var(--st-green-ink); outline-offset: 2px; border-radius: 6px; } /* settings: a long panel folds to its heading (˅ / ˃ next to it) */ .aivs--studio .aivs-panel--fold > h2 { display: flex; align-items: center; gap: 8px; } .aivs--studio .aivs-panel__fold { margin-left: auto; flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 10px; border: 1px solid var(--g-edge); background: transparent; color: var(--st-ink2); cursor: pointer; } .aivs--studio .aivs-panel__fold:focus-visible { outline: 2px solid var(--st-green-ink); outline-offset: 2px; } .aivs--studio .aivs-panel__fold .aivs-ico { width: 18px; height: 18px; transform: rotate(90deg); transition: transform .15s; } .aivs--studio .aivs-panel--fold.is-closed .aivs-panel__fold .aivs-ico { transform: rotate(0deg); } .aivs--studio .aivs-panel--fold.is-closed > :not(h2) { display: none !important; } .aivs--studio .aivs-panel--fold.is-closed > h2 { margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .aivs--studio .aivs-panel__fold .aivs-ico { transition: none; } } /* the library past 6 cards: a name search and แบบย่อ (the picture, the name, the kind and the buttons) */ .aivs--studio .aivs-libtools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0 2px; min-width: 0; } .aivs--studio .aivs-libwrap .is-nomatch { display: none !important; } .aivs--studio .aivs-libgrid--compact .aivs-libcard__desc, .aivs--studio .aivs-libgrid--compact .aivs-libcard__outfit, .aivs--studio .aivs-libgrid--compact .aivs-libcard__nooutfit, .aivs--studio .aivs-libgrid--compact .aivs-libcard__bible, .aivs--studio .aivs-libgrid--compact .aivs-libcard__pcard, .aivs--studio .aivs-libgrid--compact .aivs-libcard__shared, .aivs--studio .aivs-libgrid--compact .aivs-check-ok { display: none; } .aivs--studio .aivs-libgrid--compact { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } .aivs--studio .aivs-libgrid--compact .aivs-libcard img, .aivs--studio .aivs-libgrid--compact .aivs-libcard > .aivs-libcard__noimg { aspect-ratio: 16 / 9; } @media (max-width: 640px) { .aivs--studio .aivs-libgrid--compact { grid-template-columns: minmax(0, 1fr); } .aivs--studio .aivs-libgrid--compact .aivs-libcard { grid-template-columns: 64px minmax(0, 1fr); } .aivs--studio .aivs-libgrid--compact .aivs-libcard img, .aivs--studio .aivs-libgrid--compact .aivs-libcard > .aivs-libcard__noimg { aspect-ratio: 1 / 1; } } /* v1.58.26 สร้างเร็ว กระชับ (the owner 8 Nov 08:28 "อันนี้ไม่ทับให้กระชับเหรอ"): สัดส่วน / ความยาว / ความละเอียด - the label beside its buttons, smaller buttons; มีเสียงในคลิป closer; ✨ ปรับพรอมต์'s choice and its button on one line (the choice gives way first) */ .aivs--studio .aivs-quick__form .aivs-qrow { grid-template-columns: 72px minmax(0, 1fr); align-items: center; column-gap: 8px; row-gap: 4px; } .aivs--studio .aivs-quick__form .aivs-qrow + .aivs-qrow { margin-top: -6px; } .aivs--studio .aivs-quick__form .aivs-qrow > .aivs-label { margin: 0; font-size: 13px; line-height: 1.3; } .aivs--studio .aivs-quick__form .aivs-qrow .aivs-seg { gap: 4px; flex-wrap: wrap; min-width: 0; } .aivs--studio .aivs-quick__form .aivs-qrow .aivs-seg button { padding: 4px 9px; font-size: 13px; line-height: 1.35; } .aivs--studio .aivs-quick__form .aivs-qcheck { margin-top: -4px; } .aivs--studio .aivs-quick__form .aivs-qcheck small { font-size: 12px; } .aivs--studio .aivs-enh__profile { flex: 1 1 150px; } .aivs--studio .aivs-enh__go { flex: 0 0 auto; white-space: nowrap; } /* v1.58.27 ฉากละคลิปหลายมุม: the scene clips' model under its switch; an angle's line on the job page */ .aivs--studio .aivs-scenefield .aivs-scenemodel { margin-top: 8px; flex-wrap: wrap; } .aivs--studio .aivs-scenefield .aivs-scenemodel button:disabled { opacity: .5; cursor: not-allowed; } .aivs--studio .aivs-drama__scene { margin-top: 2px; } /* v1.58.28 เครื่องมือ in two steps (owner 8 Nov 18:53 "เครื่องมือดูยากไปไหม ดูแล้วงงไหม" -> 18:59 "เริ่ม"): the page of all the tools - a word to look for, ใช้บ่อย, 4 groups by job with big cards (the tool's mark, its name, ฟรี / its AI price, one line of what it does, nothing cut), every row full; one tool's own page - ‹ เครื่องมือทั้งหมด, the tool's name and price, the other tools in a slim row, the files and settings beside the picture, the results below. สร้างทีละชิ้น / ตัวช่วย above in one slim row. */ .aivs--studio .aivs-hub[hidden], .aivs--studio .aivs-tool[hidden], .aivs--studio .aivs-toolgroup[hidden], .aivs--studio .aivs-toolfav[hidden], .aivs--studio .aivs-toolfind__none[hidden] { display: none !important; } .aivs--studio .aivs-hub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 16px; } .aivs--studio .aivs-hub__sec { display: grid; gap: 8px; align-content: start; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--ds-edge); background: rgba(13, 32, 48, .5); } .aivs--studio .aivs-hub .aivs-hub__sec h2 { margin: 0; font-size: 14.5px; } .aivs--studio .aivs-hub .aivs-hub__sec h2 small { font-size: 12.5px; } .aivs--studio .aivs-hub__makes, .aivs--studio .aivs-hub__helps { display: flex; flex-wrap: wrap; gap: 8px; } .aivs--studio .aivs-hub__makes > *, .aivs--studio .aivs-hub__helps > * { flex: 1 1 130px; min-width: 0; } .aivs--studio .aivs-hub__make, .aivs--studio .aivs-hub__help { flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; } .aivs--studio .aivs-hub__make small, .aivs--studio .aivs-hub__make .aivs-hub__price, .aivs--studio .aivs-hub__ht small { display: none; } .aivs--studio .aivs-hub__make strong, .aivs--studio .aivs-hub__ht strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aivs--studio .aivs-hub__ic { flex: none; width: 30px; height: 30px; border-radius: 9px; } .aivs--studio .aivs-hub__ic .aivs-ico, .aivs--studio .aivs-hub__hic .aivs-ico { width: 18px; height: 18px; } .aivs--studio .aivs-hub .aivs-hub__edit { margin: 8px 0 0 !important; font-size: 21px; } @container aivs (min-width: 900px) { .aivs--studio .aivs-hub { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .aivs--studio .aivs-hub .aivs-hub__edit { grid-column: 1 / -1; } } .aivs--studio .aivs-tools.aivs-tools--v28 { grid-template-columns: minmax(0, 1fr); gap: 22px; } .aivs--studio .aivs-tools__form.aivs-toolcat { gap: 18px; } .aivs--studio .aivs-toolcat__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; } .aivs--studio .aivs-toolfind { flex: 1 1 300px; max-width: 540px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--ds-edge2); background: var(--ds-input); } .aivs--studio .aivs-toolfind:focus-within { border-color: rgba(95, 240, 197, .7); } .aivs--studio .aivs-toolfind > .aivs-ico { flex: none; width: 18px; height: 18px; color: var(--ds-muted); } .aivs--studio .aivs-toolfind .aivs-input { flex: 1; min-width: 0; padding: 11px 0; border: 0; background: transparent; box-shadow: none; outline: 0; } .aivs--studio .aivs-toolcat__key { color: var(--ds-muted); font-size: 12.5px; line-height: 1.6; } .aivs--studio .aivs-toolmark { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: rgba(95, 240, 197, .14); color: #7ff0ce; } .aivs--studio .aivs-toolmark.is-ai { background: rgba(234, 202, 108, .15); color: #efd993; } .aivs--studio .aivs-toolfav { display: grid; gap: 8px; } .aivs--studio .aivs-toolfav__t { font-size: 15px; font-weight: 700; color: var(--ds-text); } .aivs--studio .aivs-toolfav__row { display: flex; flex-wrap: wrap; gap: 10px; } .aivs--studio .aivs-toolfav__it { flex: 1 1 150px; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--ds-edge2); background: rgba(63, 230, 180, .07); color: var(--ds-text); font: inherit; text-align: left; cursor: pointer; } .aivs--studio .aivs-toolfav__it strong { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; } .aivs--studio .aivs-toolfav__it small { flex: none; color: var(--ds-muted); font-size: 12px; } .aivs--studio .aivs-toolfav__it:hover:not(:disabled) { border-color: rgba(44, 221, 168, .55); background: rgba(63, 230, 180, .12); } .aivs--studio .aivs-toolfav__it:disabled { opacity: .5; cursor: not-allowed; } .aivs--studio .aivs-tool__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(63, 230, 180, .12); color: #7ff0ce; } .aivs--studio .aivs-tool--ai .aivs-tool__ic { background: rgba(234, 202, 108, .13); color: #efd993; } .aivs--studio .aivs-tool__ic .aivs-ico { width: 22px; height: 22px; } .aivs--studio .aivs-toolfav__it .aivs-tool__ic { flex: none; width: 32px; height: 32px; border-radius: 10px; } .aivs--studio .aivs-toolfav__it .aivs-tool__ic .aivs-ico { width: 18px; height: 18px; } .aivs--studio .aivs-toolgroups.aivs-toolgroups--all { display: grid; gap: 22px; } .aivs--studio .aivs-toolgroup__head { display: flex; align-items: baseline; gap: 8px; width: 100%; margin: 0 0 10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .aivs--studio .aivs-toolgroups--all .aivs-toolgroup__t { display: inline; margin: 0; font-size: 16px; font-weight: 700; letter-spacing: 0; color: var(--ds-text); } .aivs--studio .aivs-toolgroup__head small { color: var(--ds-muted); font-size: 12.5px; } .aivs--studio .aivs-toolgroup__head .aivs-ico { flex: none; align-self: center; width: 16px; height: 16px; margin-left: auto; color: var(--ds-muted); transform: rotate(90deg); transition: transform .15s; } .aivs--studio .aivs-toolgroup.is-shut .aivs-toolgroup__head .aivs-ico { transform: none; } .aivs--studio .aivs-toolgroups--all .aivs-toolgroup.is-shut .aivs-toolgrid { display: none; } .aivs--studio .aivs-toolgroups--all .aivs-toolgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .aivs--studio .aivs-toolgroups--all.is-find .aivs-toolgrid, .aivs--studio .aivs-toolgroups--all.is-find .aivs-toolgroup.is-shut .aivs-toolgrid { display: flex; flex-wrap: wrap; } .aivs--studio .aivs-toolgroups--all.is-find .aivs-toolgrid > * { flex: 1 1 240px; min-width: 0; } .aivs--studio .aivs-toolgroups--all .aivs-tool { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ic name" "ic price" "ic desc"; align-items: start; column-gap: 12px; row-gap: 3px; min-height: 0; padding: 14px; border-radius: 16px; } .aivs--studio .aivs-toolgroups--all .aivs-tool .aivs-tool__ic { grid-area: ic; } .aivs--studio .aivs-toolgroups--all .aivs-tool strong { grid-area: name; font-size: 15px; line-height: 1.35; } .aivs--studio .aivs-toolgroups--all .aivs-tool small.aivs-tool__price { grid-area: price; justify-self: start; display: inline-block; overflow: visible; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.6; background: rgba(95, 240, 197, .14); color: #7ff0ce; } .aivs--studio .aivs-toolgroups--all .aivs-tool--ai small.aivs-tool__price { background: rgba(234, 202, 108, .15); color: #efd993; } .aivs--studio .aivs-toolgroups--all .aivs-tool--ai small.aivs-tool__price::before { content: "AI · "; } .aivs--studio .aivs-tool__d { grid-area: desc; font-size: 13px; line-height: 1.5; color: var(--ds-muted); } .aivs--studio .aivs-toolgroups--all .aivs-tool:hover:not(:disabled) { border-color: rgba(44, 221, 168, .55); } .aivs--studio .aivs-toolfind__none { margin: 0; padding: 18px; text-align: center; } @container aivs (min-width: 440px) { .aivs--studio .aivs-toolgroups--all .aivs-toolgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container aivs (min-width: 720px) { .aivs--studio .aivs-toolgroups--all .aivs-toolgrid--n6, .aivs--studio .aivs-toolgroups--all .aivs-toolgrid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container aivs (min-width: 900px) { .aivs--studio .aivs-toolgroups.aivs-toolgroups--all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; } .aivs--studio .aivs-toolgroups--all > [data-sec=cut], .aivs--studio .aivs-toolgroups--all > [data-sec=look] { grid-column: 1 / -1; } .aivs--studio .aivs-toolgroups--all .aivs-toolgrid--n8, .aivs--studio .aivs-toolgroups--all .aivs-toolgrid--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .aivs--studio .aivs-toolgroups.aivs-toolgroups--strip { position: relative; display: flex; gap: 6px 16px; overflow-x: auto; padding: 2px 28px 8px 2px; scrollbar-width: thin; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); } .aivs--studio .aivs-toolgroups--strip .aivs-toolgroup { flex: none; display: flex; align-items: center; gap: 6px; } .aivs--studio .aivs-toolgroups--strip .aivs-toolgroup__t { margin: 0; font-size: 11.5px; white-space: nowrap; color: var(--ds-faint); } .aivs--studio .aivs-toolgroups--strip .aivs-toolgrid { display: flex; flex-wrap: nowrap; gap: 6px; } .aivs--studio .aivs-toolgroups--strip .aivs-toolgrid > * { flex: none; } .aivs--studio .aivs-toolgroups--strip .aivs-tool { display: flex; align-items: center; gap: 6px; min-height: 0; padding: 6px 11px; border-radius: 999px; white-space: nowrap; } .aivs--studio .aivs-toolgroups--strip .aivs-tool small, .aivs--studio .aivs-toolgroups--strip .aivs-tool__d { display: none; } .aivs--studio .aivs-toolgroups--strip .aivs-tool .aivs-tool__ic { width: auto; height: auto; background: none; } .aivs--studio .aivs-toolgroups--strip .aivs-tool .aivs-tool__ic .aivs-ico { width: 16px; height: 16px; } .aivs--studio .aivs-toolgroups--strip .aivs-tool strong { font-size: 13px; font-weight: 600; } .aivs--studio .aivs-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .aivs--studio .aivs-toolback { flex: none; display: inline-flex; align-items: center; gap: 4px; } .aivs--studio .aivs-toolback .aivs-ico { width: 16px; height: 16px; } .aivs--studio .aivs-toolbar__main { flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: 12px; } .aivs--studio .aivs-toolbar__ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(63, 230, 180, .12); color: #7ff0ce; } .aivs--studio .aivs-toolbar__ic .aivs-ico { width: 24px; height: 24px; } .aivs--studio .aivs-toolbar__t { flex: 1; min-width: 0; display: grid; gap: 2px; } .aivs--studio .aivs-toolbar__t h2 { margin: 0; font-size: 20px; line-height: 1.3; } .aivs--studio .aivs-toolbar__t small { color: var(--ds-muted); font-size: 13.5px; line-height: 1.45; } .aivs--studio .aivs-toolbar__price { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(95, 240, 197, .14); color: #7ff0ce; } .aivs--studio .aivs-toolbar__price.is-ai { background: rgba(234, 202, 108, .15); color: #efd993; } .aivs--studio .aivs-toolwork { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "src" "view" "set" "buy"; } .aivs--studio .aivs-toolwork__src { grid-area: src; min-width: 0; } .aivs--studio .aivs-toolwork__view { grid-area: view; min-width: 0; display: grid; gap: 10px; align-content: start; align-self: start; } .aivs--studio .aivs-toolwork__set { grid-area: set; min-width: 0; display: grid; gap: 14px; align-content: start; } .aivs--studio .aivs-toolwork__buy { grid-area: buy; min-width: 0; display: grid; gap: 10px; align-content: start; } .aivs--studio .aivs-toolwork__h { font-size: 13px; font-weight: 700; color: var(--ds-muted); } .aivs--studio .aivs-toolwork__empty { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 220px; padding: 20px; border-radius: 16px; border: 1.5px dashed var(--ds-edge2); color: var(--ds-muted); text-align: center; } .aivs--studio .aivs-toolwork__empty .aivs-ico { width: 34px; height: 34px; color: var(--ds-faint); } .aivs--studio .aivs-toolwork__empty p { margin: 0; font-size: 14px; } @container aivs (min-width: 900px) { .aivs--studio .aivs-toolwork { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "src view" "set view" "buy view"; grid-template-rows: auto auto 1fr; column-gap: 26px; } .aivs--studio .aivs-toolwork.is-noview { grid-template-columns: minmax(0, 1fr); grid-template-areas: "src" "set" "buy"; grid-template-rows: none; } .aivs--studio .aivs-toolwork__view { position: sticky; top: 76px; } .aivs--studio .aivs-toolwork .aivs-toolprev__media, .aivs--studio .aivs-toolwork .aivs-toolprev__media img, .aivs--studio .aivs-toolwork .aivs-toolprev__media video { max-height: 460px; } } .aivs--studio .aivs-toollast:empty { display: none; } .aivs--studio .aivs-toollast__it { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--ds-edge); background: rgba(13, 32, 48, .6); color: var(--ds-text); font: inherit; text-align: left; cursor: pointer; } .aivs--studio .aivs-toollast__it img, .aivs--studio .aivs-toollast__ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: #0e2535; } .aivs--studio .aivs-toollast__ic .aivs-ico { width: 22px; height: 22px; color: var(--ds-muted); } .aivs--studio .aivs-toollast__t { flex: 1; min-width: 0; display: grid; gap: 1px; } .aivs--studio .aivs-toollast__t strong { font-size: 13px; } .aivs--studio .aivs-toollast__t small { color: var(--ds-muted); font-size: 12px; } .aivs--studio .aivs-toollast__it.is-failed .aivs-toollast__t small { color: #f5c6c2; } .aivs--studio .aivs-toollast__go { flex: none; color: var(--ds-link); font-size: 12.5px; } /* v1.58.29 ขยายคลิป / แก้คลิป on the page of all the tools (owner 9 Nov 09:41 "จะขยายคลิปกดปุ่มไหนเนี่ย"): a row of its own above the groups - two cards like the tools' (gold: AI, its price asked first) - and the box that picks one of the person's own clips first */ .aivs--studio .aivs-toolops[hidden], .aivs--studio .aivs-toolop[hidden] { display: none !important; } .aivs--studio .aivs-toolops { display: grid; gap: 8px; } .aivs--studio .aivs-toolops__t { font-size: 15px; font-weight: 700; color: var(--ds-text); } .aivs--studio .aivs-toolops__row { display: flex; flex-wrap: wrap; gap: 10px; } .aivs--studio .aivs-toolop { flex: 1 1 260px; min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "ic name" "ic price" "ic desc"; align-items: start; column-gap: 12px; row-gap: 3px; padding: 14px; border-radius: 16px; border: 1px solid var(--st-line2); background: rgba(13, 32, 48, .72); color: var(--ds-text); font: inherit; text-align: left; cursor: pointer; } .aivs--studio .aivs-toolop .aivs-tool__ic { grid-area: ic; background: rgba(234, 202, 108, .13); color: #efd993; } .aivs--studio .aivs-toolop strong { grid-area: name; font-size: 15px; line-height: 1.35; } .aivs--studio .aivs-toolop small.aivs-tool__price { grid-area: price; justify-self: start; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.6; background: rgba(234, 202, 108, .15); color: #efd993; } .aivs--studio .aivs-toolop:hover:not(:disabled) { background: #0d2030; border-color: rgba(234, 202, 108, .5); } .aivs--studio .aivs-toolop:disabled { opacity: .5; cursor: not-allowed; } .aivs--studio .aivs-toolops__note { margin: 0; font-size: 13px; color: var(--ds-muted); } .aivs--studio .aivs-toolops__note a { color: var(--ds-link); } .aivs-cpick .aivs-cpick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; max-height: min(56vh, 520px); overflow-y: auto; padding: 2px; } .aivs-cpick .aivs-cpick__grid .aivs-toolpick__item { min-width: 0; } /* v1.58.30 ขยายคลิป without words (owner 9 Nov 22:00 "ให้ Ai ออกแบบ"): ✨ ให้ AI คิดต่อให้ and "เว้นว่าง = AI ต่อเรื่องเอง" under the box; a card that Google did not make says why in plain words (the Gemini API's balance in AI Studio used up) above Google's own text */ .aivs-copdlg__idea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -4px 0 4px; } .aivs-copdlg__idea .aivs-copdlg__empty { flex: 1 1 200px; min-width: 0; } .aivs--studio .aivs-gen__why { margin: 0; font-size: 13px; line-height: 1.5; color: #efd993; overflow-wrap: anywhere; } /* v1.58.31 แคนวาสชุดเต็ม (owner 10 Nov 09:48-10:24): the new boxes (ไฟล์ของฉัน, ผู้ช่วยแตกช็อต, ขยาย / แก้คลิป, ต่อคลิปเป็นเรื่อง), several pictures a press, กระดานสำเร็จรูป on the list; a long error (a provider's request id) wraps inside its box instead of running out of it */ .aivs--studio .aivs-node__err, .aivs--studio .aivs-node__why, .aivs--studio .aivs-node__res { overflow-wrap: anywhere; min-width: 0; } .aivs--studio .aivs-node__why { font-size: 12px; color: var(--st-ink2); } .aivs--studio .aivs-node__why:empty { display: none; } .aivs--studio .aivs-node--upload .aivs-node__head { background: rgba(140, 195, 230, .14); } .aivs--studio .aivs-node--assist .aivs-node__head { background: rgba(230, 203, 101, .2); } .aivs--studio .aivs-node--clipop .aivs-node__head, .aivs--studio .aivs-node--join .aivs-node__head { background: rgba(76, 167, 240, .133); } .aivs--studio .aivs-node__assistbox, .aivs--studio .aivs-node__cop, .aivs--studio .aivs-node__up { display: grid; gap: 6px; } .aivs--studio .aivs-node__check { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--st-ink2); } .aivs--studio .aivs-node__alts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .aivs--studio .aivs-node__alt { position: relative; padding: 0; border: 2px solid transparent; border-radius: 8px; background: rgba(20, 42, 60, .62); cursor: pointer; aspect-ratio: 3 / 4; overflow: hidden; color: var(--st-ink2); } .aivs--studio .aivs-node__alt img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; } .aivs--studio .aivs-node__alt small { position: absolute; left: 3px; top: 2px; font-size: 11px; background: rgba(0, 0, 0, .55); color: #fff; border-radius: 6px; padding: 0 4px; } .aivs--studio .aivs-node__alt.is-on { border-color: var(--st-green-ink); } .aivs--studio .aivs-node__alt:disabled { cursor: default; opacity: .7; } .aivs--studio .aivs-node__joinlist { display: grid; gap: 4px; } .aivs--studio .aivs-node__joinrow { display: grid; grid-template-columns: 1fr auto auto auto; gap: 4px; align-items: center; font-size: 13px; } .aivs--studio .aivs-node__joinrow small { color: var(--st-ink2); font-size: 11px; } .aivs--studio .aivs-node__mv { border: 1px solid var(--st-line); background: none; color: var(--st-ink); border-radius: 6px; padding: 0 7px; cursor: pointer; } .aivs--studio .aivs-node__mv:disabled { opacity: .35; cursor: default; } .aivs--studio .aivs-canvastpls { display: grid; gap: 6px; margin: 4px 0 12px; } .aivs--studio .aivs-canvastpls__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .aivs--studio .aivs-canvastpl { display: grid; gap: 4px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--st-line); background: rgba(13, 32, 48, .9); color: var(--st-ink); cursor: pointer; } .aivs--studio .aivs-canvastpl small { color: var(--st-ink2); font-size: 12px; line-height: 1.45; } .aivs--studio .aivs-canvastpl:hover { border-color: var(--st-green-ink); } .aivs--studio .aivs-canvastpl:disabled { opacity: .6; cursor: progress; } /* v1.58.36 สูตรผู้กำกับ (owner 13 Nov 08:06 "ลองทำมาดูซิ"): a row of recipe cards that slides sideways inside the form (never wider than the phone), the chosen card lit; the chosen recipe's line and three points under the row */ .aivs--studio .aivs-direction { display: grid; gap: 8px; min-width: 0; } .aivs--studio .aivs-direction__row { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 2px 6px; margin: 0 -2px; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .aivs--studio .aivs-dircard { flex: 0 0 auto; width: 132px; min-height: 96px; display: grid; align-content: start; gap: 3px; text-align: left; padding: 10px 11px; border-radius: 12px; border: 1px solid var(--st-line); background: rgba(13, 32, 48, .9); color: var(--st-ink); cursor: pointer; } .aivs--studio .aivs-dircard:hover { border-color: var(--st-green-ink); } .aivs--studio .aivs-dircard:focus-visible { outline: 2px solid var(--st-green-ink); outline-offset: 2px; } .aivs--studio .aivs-dircard.is-on { border-color: var(--st-green-ink); background: rgba(31, 92, 74, .55); box-shadow: inset 0 0 0 1px var(--st-green-ink); } .aivs--studio .aivs-dircard__icon { font-size: 20px; line-height: 1.1; } .aivs--studio .aivs-dircard__name { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; } .aivs--studio .aivs-dircard__fit { font-size: 11.5px; line-height: 1.4; color: var(--st-ink2); overflow-wrap: anywhere; } .aivs--studio .aivs-direction__about { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--st-line); background: rgba(13, 32, 48, .6); min-width: 0; } .aivs--studio .aivs-direction__tag { margin: 0 0 6px; font-weight: 600; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; } .aivs--studio .aivs-direction__points { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13px; line-height: 1.5; color: var(--st-ink2); } .aivs--studio .aivs-seriesdir { display: grid; gap: 4px; } .aivs--studio .aivs-seriesdir select { max-width: 100%; } @media (max-width: 480px) { .aivs--studio .aivs-dircard { width: 118px; min-height: 92px; padding: 9px 10px; } } /* v1.58.38 ภาพหลายมุมด้วย AI: the panel under a character's extra pictures, the run's views, the mark on each AI picture */ .aivs--studio .aivs-angles { display: grid; gap: 8px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--st-line); min-width: 0; } .aivs--studio .aivs-angles__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; } .aivs--studio .aivs-angles__head .aivs-fine { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; } .aivs--studio .aivs-angles__panel { display: grid; gap: 8px; min-width: 0; } .aivs--studio .aivs-angles__pick { margin: 0; padding: 0; border: 0; min-width: 0; } .aivs--studio .aivs-angles__opts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; } .aivs--studio .aivs-angles__opt { margin: 0; } .aivs--studio .aivs-angles__note { width: 100%; max-width: 100%; box-sizing: border-box; } .aivs--studio .aivs-angles__lines { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: 13px; line-height: 1.5; color: var(--st-ink2); overflow-wrap: anywhere; } .aivs--studio .aivs-angles__go { justify-self: start; max-width: 100%; white-space: normal; text-align: left; } .aivs--studio .aivs-angles__run { display: grid; gap: 4px; min-width: 0; } .aivs--studio .aivs-angles__wait { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; } .aivs--studio .aivs-angles__title { font-size: 13.5px; } .aivs--studio .aivs-angles__views { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px; line-height: 1.5; color: var(--st-ink2); overflow-wrap: anywhere; } .aivs--studio .aivs-angles__v.is-done, .aivs--studio .aivs-angles__v.is-drawn { color: #92e7b2; } .aivs--studio .aivs-angles__v.is-warn { color: #ffd479; } .aivs--studio .aivs-angles__v.is-failed { color: #ff9a8a; } .aivs--studio .aivs-bible__aimark { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; font-size: 11.5px; line-height: 1.35; color: #92e7b2; } .aivs--studio .aivs-bible__aimark small { min-width: 0; overflow-wrap: anywhere; } .aivs--studio .aivs-bible__aimark.is-warn { color: #ffd479; } .aivs--studio .aivs-bible__redo { font-size: 12px; padding: 2px 8px; } /* v1.58.39 แก้ภาพด้วยคำพูด: the shot's box - before / after, the takes (wrap on a phone) */ .aivs--studio .aivs-fedit { display: grid; gap: 8px; margin: 6px 0; min-width: 0; } .aivs--studio .aivs-fedit__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; } .aivs--studio .aivs-fedit__newer { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; } .aivs--studio .aivs-fedit__panel { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--st-line); min-width: 0; } .aivs--studio .aivs-fedit__what { width: 100%; max-width: 100%; box-sizing: border-box; } .aivs--studio .aivs-fedit__go { justify-self: start; max-width: 100%; white-space: normal; } .aivs--studio .aivs-fedit__ba { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); gap: 8px; } .aivs--studio .aivs-fedit__ba figure { margin: 0; min-width: 0; } .aivs--studio .aivs-fedit__ba img { width: 100%; height: auto; display: block; border-radius: 8px; } .aivs--studio .aivs-fedit__ba figcaption { font-size: 12px; color: var(--st-ink2); overflow-wrap: anywhere; margin-top: 2px; } .aivs--studio .aivs-fedit__takes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .aivs--studio .aivs-fedit__take { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-start; min-width: 0; } .aivs--studio .aivs-fedit__pic { display: block; flex: 0 0 96px; max-width: 100%; } .aivs--studio .aivs-fedit__pic img { width: 100%; height: auto; display: block; border-radius: 6px; } .aivs--studio .aivs-fedit__pic--wait { height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px dashed var(--st-line); } .aivs--studio .aivs-fedit__meta { display: grid; gap: 3px; flex: 1 1 150px; min-width: 0; font-size: 13px; overflow-wrap: anywhere; } .aivs--studio .aivs-fedit__take.is-used .aivs-fedit__meta strong { color: #92e7b2; } .aivs--studio .aivs-fedit__take.is-failed .aivs-fedit__meta strong { color: #ff9a8a; } .aivs--studio .aivs-fedit__btns { display: flex; flex-wrap: wrap; gap: 6px; } .aivs--studio .aivs-fedit__btns .aivs-btn, .aivs--studio .aivs-fedit__go, .aivs--studio .aivs-fedit__head .aivs-btn { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; max-width: 100%; } /* v1.58.43 แต่งภาพและคลิป holds 9 tools (+ ขยายภาพคลิปเป็นสัดส่วนใหม่): 3 a row from 720px; between 440 and 720px (2 a row) the ninth takes the whole row - no card left alone */ @container aivs (min-width: 440px) and (max-width: 719.98px) { .aivs--studio .aivs-toolgroups--all .aivs-toolgrid--n9 > :last-child { grid-column: 1 / -1; } } @container aivs (min-width: 720px) { .aivs--studio .aivs-toolgroups--all .aivs-toolgrid--n9 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* v1.58.44 ร่าง 480p ก่อนทั้งเรื่อง: the box apart from the Seedance hint above it; the job page's banner button on its own line */ #aivs-app .aivs-filmdraft { margin-top: 10px; } #aivs-app .aivs-fdraft__go { margin-top: 10px; max-width: 100%; white-space: normal; } /* v1.58.45 ตั้งค่า → หน้าเว็บ → หน้าโมเดล: a row per model (its name, state, price, what it misses, the buttons) - the buttons wrap under the words on a phone; the editor's questions; ตรวจทุกหน้า's card under the check of before */ #aivs-app .aivs-mp__ghead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 18px 0 8px; } #aivs-app .aivs-mp__ghead h4 { margin: 0; } #aivs-app .aivs-mp__list { display: grid; gap: 8px; } #aivs-app .aivs-mp__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(140, 195, 230, .16); background: rgba(13, 32, 48, .42); min-width: 0; } #aivs-app .aivs-mp__row.is-on { border-color: rgba(95, 240, 197, .38); } #aivs-app .aivs-mp__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; } #aivs-app .aivs-mp__name { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; overflow-wrap: anywhere; } #aivs-app .aivs-mp__state { font-size: 13px; color: var(--st-ink2, #d8dfe4); } #aivs-app .aivs-mp__row.is-on .aivs-mp__state { color: #5ff0c5; } #aivs-app .aivs-mp__miss { color: #ecb388; } #aivs-app .aivs-mp__warn { color: #ff9a8a; } #aivs-app .aivs-mp__btns { display: flex; flex-wrap: wrap; gap: 6px; } #aivs-app .aivs-mp__qa { display: grid; gap: 6px; flex: 1 1 auto; min-width: 0; } #aivs-app .aivs-mp__faq { display: grid; gap: 8px; } #aivs-app .aivs-mp__works { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } #aivs-app .aivs-mp--edit h4 { margin: 12px 0 2px; overflow-wrap: anywhere; } #aivs-app .aivs-sa { margin-top: 16px; } #aivs-app .aivs-sa .aivs-site__checks code, #aivs-app .aivs-site__checks code { overflow-wrap: anywhere; word-break: break-word; } /* v1.58.48 คลิปไวรัลกดทีเดียว: the templates' cards, a template's page (the roles' pictures, the lines, the price) */ .aivs--studio .aivs-viral__head { margin-bottom: 12px; } .aivs--studio .aivs-viral__head h2 { margin: 0 0 4px; font-size: 22px; } .aivs--studio .aivs-viral__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-top: 12px; } .aivs--studio .aivs-viral__card { display: flex; flex-direction: column; padding: 6px; border-radius: 22px; text-decoration: none; color: var(--st-ink); border: 1px solid var(--g-edge); background: var(--g-solid); box-shadow: var(--g-shadow); transition: transform .18s, box-shadow .18s; min-width: 0; } .aivs--studio .aivs-viral__card:hover { transform: translateY(-3px); box-shadow: var(--g-shadow-lg); } .aivs--studio .aivs-viral__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 17px; overflow: hidden; color: #fff; background: #121a24; } .aivs--studio .aivs-viral__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .aivs--studio .aivs-viral__icon { font-size: 60px; line-height: 1; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3)); } .aivs--studio .aivs-viral__badges { position: absolute; z-index: 1; left: 9px; right: 9px; bottom: 9px; display: flex; flex-wrap: wrap; gap: 5px; } .aivs--studio .aivs-viral__badges span, .aivs--studio .aivs-viral__flag { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; line-height: 1.6; color: #fff; background: rgba(0, 0, 0, .34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .aivs--studio .aivs-viral__flag { position: absolute; z-index: 1; top: 9px; right: 9px; background: rgba(160, 110, 10, .7); } .aivs--studio .aivs-viral__body { display: flex; flex-direction: column; gap: 3px; padding: 10px 8px 6px; min-width: 0; } .aivs--studio .aivs-viral__body strong { font-size: 15.5px; line-height: 1.35; } .aivs--studio .aivs-viral__body small { color: var(--st-muted); font-size: 13px; line-height: 1.45; } .aivs--studio .aivs-viral__roles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .aivs--studio .aivs-viral__roles span { padding: 1px 8px; border-radius: 999px; font-size: 11.5px; color: var(--st-ink2); border: 1px solid var(--st-line); } .aivs--studio .aivs-viral--one .aivs-back { display: inline-block; margin-bottom: 12px; } .aivs--studio .aivs-viral__layout { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: start; } .aivs--studio .aivs-viral__side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .aivs--studio .aivs-viral__side .aivs-viral__media { aspect-ratio: 9 / 14; } .aivs--studio .aivs-viral__side h2 { margin: 8px 0 0; font-size: 20px; } .aivs--studio .aivs-viral__video { width: 100%; aspect-ratio: 9 / 16; max-height: 70vh; border-radius: 18px; background: #000; object-fit: contain; } .aivs--studio .aivs-viral__form { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .aivs--studio .aivs-viral__sec { padding: 14px 16px; border-radius: 18px; border: 1px solid var(--g-edge); background: var(--g-solid); min-width: 0; } .aivs--studio .aivs-viral__sec h3 { margin: 0 0 10px; font-size: 16px; } .aivs--studio .aivs-viral__roleslots { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .aivs--studio .aivs-viral__slot { display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 14px; border: 1px dashed var(--st-line2); min-width: 0; } .aivs--studio .aivs-viral__slot.has-pic { border-style: solid; border-color: var(--st-green2); } .aivs--studio .aivs-viral__pic { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--st-tint); } .aivs--studio .aivs-viral__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .aivs--studio .aivs-viral__rlabel { font-size: 14.5px; line-height: 1.35; } .aivs--studio .aivs-viral__sbtns { display: flex; flex-wrap: wrap; gap: 6px; } .aivs--studio .aivs-viral__choose { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid var(--st-line); } .aivs--studio .aivs-viral__chead { font-size: 12.5px; color: var(--st-muted); } .aivs--studio .aivs-viral__chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 210px; overflow-y: auto; } .aivs--studio .aivs-viral__chip { display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 9px 3px 3px; border-radius: 999px; font: inherit; font-size: 12.5px; color: var(--st-ink); border: 1px solid var(--st-line); background: transparent; cursor: pointer; } .aivs--studio .aivs-viral__chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; } .aivs--studio .aivs-viral__chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aivs--studio .aivs-viral__fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .aivs--studio .aivs-viral__lines { display: flex; flex-direction: column; gap: 8px; } .aivs--studio .aivs-viral__line { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) auto; gap: 8px; align-items: center; } .aivs--studio .aivs-viral__fill { grid-column: 2 / -1; color: var(--st-muted); font-size: 12.5px; } .aivs--studio .aivs-viral__fill:empty { display: none; } .aivs--studio .aivs-viral__lbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .aivs--studio .aivs-viral__meter { color: var(--st-green-ink); font-size: 13px; } .aivs--studio .aivs-viral__meter.is-warn { color: #d9a43b; } .aivs--studio .aivs-viral__meter.is-bad { color: #ef6b6b; } .aivs--studio .aivs-viral__owner { padding: 10px 14px; border-radius: 14px; border: 1px dashed var(--st-line2); } .aivs--studio .aivs-viral__owner summary { cursor: pointer; font-weight: 650; } .aivs--studio .aivs-viral__orow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; } .aivs--studio .aivs-viral__orow select { flex: 1 1 220px; min-width: 0; } .aivs--studio .aivs-viral--edit { display: flex; flex-direction: column; gap: 10px; max-width: 760px; } .aivs--studio .aivs-viral__eroles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .aivs--studio .aivs-viral__erole { border: 1px solid var(--st-line); border-radius: 14px; padding: 10px; min-width: 0; } @media (max-width: 900px) { .aivs--studio .aivs-viral__layout { grid-template-columns: minmax(0, 1fr); } .aivs--studio .aivs-viral__side { position: static; } .aivs--studio .aivs-viral__side .aivs-viral__media, .aivs--studio .aivs-viral__video { max-width: 320px; } } @media (max-width: 600px) { .aivs--studio .aivs-viral__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .aivs--studio .aivs-viral__card { padding: 4px; border-radius: 18px; } .aivs--studio .aivs-viral__icon { font-size: 44px; } .aivs--studio .aivs-viral__side .aivs-viral__media { aspect-ratio: 16 / 9; max-width: none; } .aivs--studio .aivs-viral__video { max-height: 58vh; } .aivs--studio .aivs-viral__roles { display: none; } .aivs--studio .aivs-viral__sec { padding: 12px; } .aivs--studio .aivs-viral__roleslots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .aivs--studio .aivs-viral__line { grid-template-columns: minmax(0, 1fr) auto; } .aivs--studio .aivs-viral__who { grid-column: 1 / -1; } .aivs--studio .aivs-viral__text { grid-column: 1 / 2; } .aivs--studio .aivs-viral__fill { grid-column: 1 / -1; } } /* v1.58.49 หน้าใช้โมเดล: โมเดล AI's cards (a model line each), a line's own page (its versions, every shape and size, its switches) */ .aivs--studio .aivs-models__head { margin-bottom: 12px; } .aivs--studio .aivs-models__head h2 { margin: 0 0 4px; font-size: 22px; } .aivs--studio .aivs-models__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 12px; } .aivs--studio .aivs-models__card { display: flex; flex-direction: column; gap: 8px; padding: 6px 6px 10px; border-radius: 20px; min-width: 0; border: 1px solid var(--g-edge); background: var(--g-solid); box-shadow: var(--g-shadow); transition: transform .18s, box-shadow .18s; } .aivs--studio .aivs-models__card:hover { transform: translateY(-3px); box-shadow: var(--g-shadow-lg); } .aivs--studio .aivs-models__card.is-hidden { opacity: .62; } .aivs--studio .aivs-models__link { display: flex; flex-direction: column; gap: 7px; padding: 12px 12px 4px; color: var(--st-ink); text-decoration: none; min-width: 0; } .aivs--studio .aivs-models__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .aivs--studio .aivs-models__top strong { font-size: 18px; line-height: 1.3; } .aivs--studio .aivs-models__top small, .aivs--studio .aivs-play__title small { color: var(--st-muted); font-size: 12.5px; } .aivs--studio .aivs-models__line { color: var(--st-ink2); font-size: 13.5px; line-height: 1.5; } .aivs--studio .aivs-models__vers { display: flex; flex-wrap: wrap; gap: 4px; } .aivs--studio .aivs-models__vers span { padding: 1px 9px; border-radius: 999px; font-size: 12px; color: var(--st-ink2); border: 1px solid var(--st-line); } .aivs--studio .aivs-models__from { font-size: 13px; font-weight: 650; color: var(--st-green-deep); } .aivs--studio .aivs-models__card.is-talk .aivs-models__from { color: var(--st-muted); font-weight: 500; } .aivs--studio .aivs-models__note { margin: 0 12px; color: #e3b341; font-size: 12px; } .aivs--studio .aivs-models__hide { align-self: flex-start; margin: 0 10px; } .aivs--studio .aivs-play__head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; min-width: 0; } .aivs--studio .aivs-play__head .aivs-back { align-self: flex-start; margin-bottom: 4px; } .aivs--studio .aivs-play__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .aivs--studio .aivs-play__title h2 { margin: 0; font-size: 24px; } .aivs--studio .aivs-play__hidden { padding: 1px 9px; border-radius: 999px; font-size: 12px; color: #e3b341; border: 1px solid rgba(227, 179, 65, .45); } .aivs--studio .aivs-play__vers .aivs-seg button { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25; } .aivs--studio .aivs-play__vprice { font-size: 10.5px; font-weight: 500; opacity: .8; } .aivs--studio .aivs-play__shape { display: inline-block; margin-right: 5px; vertical-align: -2px; border: 1.5px solid currentColor; border-radius: 2px; box-sizing: border-box; } .aivs--studio .aivs-play__adv { padding: 10px 12px; border-radius: 14px; border: 1px solid var(--st-line); min-width: 0; } .aivs--studio .aivs-play__adv > summary { cursor: pointer; font-weight: 650; } .aivs--studio .aivs-play__adv[open] > summary { margin-bottom: 10px; } .aivs--studio .aivs-play__adv .aivs-qcheck { margin-top: 8px; } .aivs--studio .aivs-play__seed { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .aivs--studio .aivs-play__seedrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; } .aivs--studio .aivs-play__seedrow .aivs-input { flex: 1 1 140px; max-width: 220px; min-width: 0; } @media (max-width: 600px) { .aivs--studio .aivs-models__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } .aivs--studio .aivs-play__title h2 { font-size: 21px; } } /* v1.58.50 Seedream 5.5 ทำได้สูงสุด: a shape of its own, แยกเลเยอร์ (how many, the text read), the layers on a checkerboard, a price's reason */ .aivs--studio .aivs-play__ratio { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .aivs--studio .aivs-play__ratio .aivs-input.is-bad { border-color: #e5534b; } .aivs--studio .aivs-play__layers { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .aivs--studio .aivs-play__layrow { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-width: 0; } .aivs--studio .aivs-play__laynum { flex: 0 0 96px; width: 96px; min-width: 0; } .aivs--studio .aivs-play__layrow small { flex: 1 1 180px; min-width: 0; } .aivs--studio .aivs-play__layhow { margin: 2px 0 0; } .aivs--studio .aivs-quickbuy__why { display: block; color: #f0b8b3; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; } .aivs-layers .aivs-layers__card { max-width: min(860px, calc(100vw - 32px)); width: min(860px, calc(100vw - 32px)); } .aivs--studio .aivs-layers__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 12px 0; min-width: 0; } .aivs--studio .aivs-layers__item { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; } .aivs--studio .aivs-layers__pic { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--st-line); background: repeating-conic-gradient(#7d848e 0 25%, #a3a9b1 0 50%) 0 0 / 16px 16px; } /* (a mid-grey checkerboard: no light surface in the dark studio) */ .aivs--studio .aivs-layers__item.is-base .aivs-layers__pic { border-color: var(--st-green-deep); } .aivs--studio .aivs-layers__pic img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .aivs--studio .aivs-layers__item figcaption { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; font-size: 12.5px; line-height: 1.4; min-width: 0; } .aivs--studio .aivs-layers__item figcaption strong { overflow-wrap: anywhere; } .aivs--studio .aivs-layers__text { color: var(--st-ink2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 6.5em; overflow: auto; } @media (max-width: 600px) { .aivs--studio .aivs-layers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } } /* v1.58.51 ย้ายไปที่อยู่ใหม่: the check's rows, the old addresses, the owner's to-do (each line to copy) - long names wrap on a phone */ .aivs-sitemove { margin: 14px 0 18px; padding: 14px; border-radius: 12px; border: 1px solid var(--st-line); background: var(--st-soft); min-width: 0; } .aivs-sitemove h3 { margin-top: 0; } .aivs-sitemove h4 { margin: 14px 0 6px; font-size: 15px; } .aivs-sitemove__now, .aivs-sitemove__old { overflow-wrap: anywhere; margin: 6px 0; } .aivs-sitemove__old { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } .aivs-sitemove__oldrow { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; } .aivs-sitemove__steps { margin: 8px 0 10px; padding-left: 20px; } .aivs-sitemove__steps li { margin: 2px 0; overflow-wrap: anywhere; } .aivs-sitemove__ask { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .aivs-sitemove__ask .aivs-input { flex: 1 1 200px; min-width: 0; max-width: 100%; } .aivs-sitemove__rows { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; } .aivs-sitemove__rows li { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--st-line); overflow-wrap: anywhere; } .aivs-sitemove__rows li.is-optional { opacity: .85; } .aivs-sitemove__mark { display: inline-block; min-width: 1.2em; font-weight: 700; } .aivs-sitemove__mark.is-ok { color: #6fd39b; } .aivs-sitemove__mark.is-no { color: #f0a46c; } .aivs-sitemove__note { margin: 12px 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(240, 164, 76, .45); background: rgba(240, 167, 76, .12); } .aivs-sitemove__note p { margin: 0 0 8px; overflow-wrap: anywhere; } .aivs-sitemove__todo ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .aivs-sitemove__todo li { display: grid; gap: 4px; min-width: 0; } .aivs-sitemove__copy { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; } .aivs-sitemove__copy code, .aivs-sitemove__old code { overflow-wrap: anywhere; word-break: break-all; max-width: 100%; } .aivs-sitemove > .aivs-btn--primary { margin: 6px 0; white-space: normal; max-width: 100%; text-align: left; } /* v1.45.0: fal's empty balance - the warning in the price box, and a short line of it on the form's price bar */ .aivs--studio .aivs-costbox .aivs-costbox__fal { margin: 10px 0 0; padding: 8px 12px; gap: 8px; font-size: 13px; line-height: 1.5; } body.aivs-studio .aivs--studio .aivs-summary--bar .aivs-sumbar__warn { margin: 8px 0 0; padding: 6px 12px; gap: 8px; font-size: 13px; line-height: 1.45; } .aivs--studio .aivs-costbox__fal::before, .aivs--studio .aivs-sumbar__warn::before { width: 18px; height: 18px; font-size: 12px; } /* v1.45.2: the shots to fix and the owner's fal balance banner (dark studio) */ .aivs--studio .aivs-fixshots { background: rgba(230, 198, 101, .1); border-left-color: #e6ce95; color: #f1f8fd; } .aivs--studio .aivs-falbar { background: rgba(230, 198, 101, .12); border-color: rgba(230, 198, 101, .45); color: #f3e6bf; } .aivs--studio .aivs-falbar--ok { background: rgba(63, 230, 180, .1); border-color: rgba(95, 240, 197, .45); color: #d6f7ec; } .aivs--studio .aivs-falbar a:not(.aivs-btn) { color: #f6e5a5; } /* v1.47.0 ตรวจคลิปอัตโนมัติ: the job's box (counts + the shots to look at) and each shot's verdict (kept before the drama block) */ .aivs--studio .aivs-qcbox { display: grid; gap: 6px; padding: 10px 12px; border-left: 3px solid #e6ce95; border-radius: 6px; background: rgba(230, 198, 101, .1); color: #f1f8fd; } .aivs--studio .aivs-qcbox--ok { border-left-color: rgba(95, 240, 197, .7); background: rgba(63, 230, 180, .08); } .aivs--studio .aivs-qcbox--bad { border-left-color: #f08a8a; background: rgba(240, 110, 110, .1); } .aivs--studio .aivs-qcbox p { margin: 0; overflow-wrap: anywhere; } .aivs--studio .aivs-qcbox .aivs-actions { flex-wrap: wrap; } .aivs--studio .aivs-soundqc__why { margin: 0; padding-left: 18px; display: grid; gap: 2px; overflow-wrap: anywhere; } /* v1.58.14 ตรวจเสียงอัตโนมัติ */ .aivs--studio .aivs-shot__qc { display: grid; gap: 4px; margin: 8px 0; padding: 8px 10px; border-left: 3px solid #e6ce95; border-radius: 6px; background: rgba(230, 198, 101, .08); overflow-wrap: anywhere; } .aivs--studio .aivs-shot__qc--ok { border-left-color: rgba(95, 240, 197, .7); background: rgba(63, 230, 180, .06); } .aivs--studio .aivs-shot__qc--bad { border-left-color: #f08a8a; background: rgba(240, 110, 110, .08); } .aivs--studio .aivs-shot__qc ul { margin: 0; padding-left: 18px; } /* v1.54.0 ภาพสินค้าจริง (a shot from the product's own photo) · ลองชุด (the presenter wearing the product) - kept before the drama block */ .aivs--studio .aivs-prodshot { display: grid; gap: 6px; margin: 8px 0; padding: 8px 10px; border-left: 3px solid rgba(140, 195, 230, .5); border-radius: 6px; background: rgba(140, 195, 230, .06); overflow-wrap: anywhere; } .aivs--studio .aivs-prodshot.is-on { border-left-color: rgba(95, 240, 197, .7); background: rgba(63, 230, 180, .07); } .aivs--studio .aivs-prodshot.is-flag { border-left-color: #e6ce95; background: rgba(230, 198, 101, .1); } .aivs--studio .aivs-prodshot p { margin: 0; } .aivs--studio .aivs-prodshot .aivs-actions { flex-wrap: wrap; gap: 6px; } .aivs--studio .aivs-prodshot__photos .aivs-btn.is-on { border-color: rgba(95, 240, 197, .8); } .aivs--studio .aivs-rvtryon { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--st-edge); background: rgba(140, 195, 230, .05); } .aivs--studio .aivs-rvtryon h4 { margin: 0; font-size: 15px; } .aivs--studio .aivs-rvtryon__pics { display: flex; flex-wrap: wrap; gap: 10px; } .aivs--studio .aivs-rvtryon__pics figure { margin: 0; display: grid; gap: 4px; width: min(160px, 44%); } .aivs--studio .aivs-rvtryon__pics img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; border: 1px solid var(--st-edge); } .aivs--studio .aivs-rvtryon__pics figcaption { font-size: 12px; color: var(--st-muted); } .aivs--studio .aivs-rvtryon .aivs-actions { flex-wrap: wrap; gap: 6px; } .aivs--studio .aivs-rvprod .aivs-check.is-off { opacity: .6; } /* v1.46.0 ดราม่าสั้นแบบหนัง: the writer's spoken lines (the speaker's name in gold), the script's hint, the job page's checks */ .aivs--studio .aivs-drama__talk b { color: #f5c76a; font-weight: 600; } .aivs--studio .aivs-drama__hint { display: block; margin-top: 4px; color: var(--st-muted); } .aivs--studio .aivs-drama__checks p { margin: 6px 0; } .aivs--studio .aivs-shortshot--drama p { margin: 4px 0; }