/* Ebru Studio's interface: a UI layer over the engine's page. build_studio.py marks the page and injects this file and ui.js; the engine's own controls (.studio) stay in the page, hidden, and are reused where they fit. */ html[data-ui] .studio { display: none !important; } html[data-ui] body { overflow-x: hidden; } /* the engine's mute button stays in the page for Actions → Sound to press; the pill itself isn't shown */ html[data-ui] #mute { display: none !important; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } :root { --p-ease: cubic-bezier(0.23, 1, 0.32, 1); --p-sheet-ease: cubic-bezier(0.32, 0.72, 0, 1); --p-col: min(92vw, 720px); } /* ---------- frame ---------- */ .p-app { min-height: 100dvh; display: grid; justify-items: center; align-content: start; gap: 16px; padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); } .p-top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .p-round { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(236, 236, 236, 0.03); color: var(--text); cursor: pointer; touch-action: manipulation; transition: transform 150ms var(--p-ease), background-color 150ms ease; -webkit-tap-highlight-color: transparent; } .p-round:active { transform: scale(0.95); } .p-round svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) and (pointer: fine) { .p-round:hover { background: var(--raise); } } .p-main { width: var(--p-col); display: grid; gap: 14px; } .p-main #trayWrap { width: 100%; max-width: min(100%, calc(100dvh - 380px)); min-width: min(100%, 300px); justify-self: center; } .p-main #rail { min-height: 28px; } /* ---------- brushes and colours ---------- */ .p-toolset { display: flex; gap: 6px; flex: none; } .p-tool { position: relative; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform 150ms var(--p-ease), background-color 150ms ease, color 150ms ease; } .p-tool svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .p-tool:active { transform: scale(0.95); } .p-tool[aria-pressed="true"] { background: var(--raise); border-color: var(--line-strong); color: var(--text); } @media (hover: hover) and (pointer: fine) { .p-tool:not([aria-pressed="true"]):hover { color: var(--text); } } .p-tool.sponge { margin-left: 6px; } .p-colours { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; } .p-colours::-webkit-scrollbar { display: none; } .p-dot { flex: none; width: 34px; height: 34px; border-radius: 999px; border: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset; transition: transform 150ms var(--p-ease), box-shadow 150ms ease; } .p-dot:active { transform: scale(0.94); } .p-dot[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--text); } .p-dot.is-ground { border-radius: 10px; } /* palettes as strips */ .p-pals { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 8px; scroll-snap-type: x proximity; } .p-pals::-webkit-scrollbar { display: none; } .p-pal { flex: none; display: grid; gap: 6px; width: 104px; padding: 0; border: 0; background: none; color: var(--muted); text-align: left; cursor: pointer; scroll-snap-align: start; touch-action: manipulation; transition: transform 150ms var(--p-ease); } .p-pal:active { transform: scale(0.97); } .p-pal .sw { display: grid; grid-auto-flow: column; height: 40px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset; } .p-pal .nm { font-size: 11.5px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .p-pal[aria-checked="true"] .sw { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--text); } .p-pal[aria-checked="true"] .nm { color: var(--text); } .p-pal.surprise .sw { place-items: center; background: conic-gradient(from 0deg, #b8402f, #d9b56a, #6f8a4e, #2f5f8a, #6b3fa0, #b8402f); color: #fff; font-size: 18px; } /* ---------- the question ---------- */ .p-ask { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 18px; border: 1px solid var(--line-strong); background: rgba(236, 236, 236, 0.035); transition: border-color 150ms ease; } .p-ask:focus-within { border-color: var(--accent); } .p-ask input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; color: var(--text); font: inherit; font-size: 17px; outline: none; } .p-ask input::placeholder { color: var(--faint); } .p-mic[hidden] { display: none; } .p-mic[data-listening] { color: #fff4ee; background: #b8402f; border-color: #b8402f; } .p-mic[data-listening]::before { content: ''; position: absolute; inset: -4px; border-radius: 999px; border: 2px solid #b8402f; animation: p-pulse 1.2s ease-out infinite; } @keyframes p-pulse { from { opacity: 0.8; transform: scale(0.94); } to { opacity: 0; transform: scale(1.2); } } .p-paint { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 14px; border-radius: 14px; border: 0; background: var(--text); color: var(--ground); font: 500 15px/1 var(--sans); cursor: pointer; touch-action: manipulation; white-space: nowrap; transition: transform 150ms var(--p-ease), background-color 150ms ease; } .p-paint:active { transform: scale(0.97); } .p-paint svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) and (pointer: fine) { .p-paint:hover { background: #ffffff; } } .p-paint[data-mode="stop"] { background: transparent; color: var(--text); box-shadow: 0 0 0 1px var(--text) inset; } .p-under { display: flex; align-items: center; gap: 10px; min-height: 28px; flex-wrap: wrap; } .p-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font-size: 12.5px; cursor: pointer; touch-action: manipulation; transition: transform 150ms var(--p-ease); } .p-chip:active { transform: scale(0.97); } .p-chip svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .p-status { margin: 0; font-size: 12.5px; color: var(--muted); } .p-status:empty { display: none; } /* ---------- pictures ---------- */ .p-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; } .p-tiles::-webkit-scrollbar { display: none; } .p-tile { display: grid; gap: 6px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; text-align: center; scroll-snap-align: start; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 150ms var(--p-ease); } .p-tile:active { transform: scale(0.96); } .p-tile img { width: 92px; height: 92px; border-radius: 16px; display: block; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,0.4); } .p-tile span { font-size: 12px; line-height: 1.2; } @media (hover: hover) and (pointer: fine) { .p-tile:hover span { color: var(--text); } } /* the Atelier: the covers off */ .p-atelier { display: grid; gap: 22px; align-content: start; } .p-atelier > section, .p-atelier > .opts, .p-atelier > details { margin: 0; } .p-atelier .label { margin-bottom: 8px; } .p-atelier #tools { display: flex; flex-wrap: wrap; gap: 4px; } .p-atelier #tools .tool { width: auto; height: 36px; display: inline-flex; flex-direction: row; align-items: center; padding: 0 10px; gap: 6px; } .p-atelier #tools .tool span { position: static; width: auto; height: auto; clip-path: none; font-size: 12.5px; } .p-atelier #tools .tool svg { width: 18px; height: 18px; } .p-atelier #sizeBox { display: flex !important; align-items: center; gap: 10px; } html[data-ui] .p-atelier { position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(380px, 100vw); overflow-y: auto; overscroll-behavior: contain; padding: max(20px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); background: #1b1b1b; border-left: 1px solid var(--line-strong); box-shadow: -30px 0 60px -30px rgba(0,0,0,0.8); transition: transform 260ms var(--p-sheet-ease); } html[data-ui] .p-atelier[data-off] { transform: translateX(104%); visibility: hidden; transition: transform 200ms var(--p-ease), visibility 0s 200ms; } .p-atelier-head { display: flex; align-items: center; justify-content: space-between; } .p-atelier-head h2 { margin: 0; font: 600 18px/1 var(--serif); } .p-dockbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } /* ---------- the canvas fills the window; the question floats at the thumb ---------- */ .p-float { display: none !important; } html[data-ui] .p-app { display: block; padding: 0; min-height: 100dvh; } html[data-ui] .p-main { display: contents; } /* one gutter everywhere; the top bar's items sit on a 42px centreline */ /* the canvas starts at twice the centreline, so every item in the bar has equal space above and below it */ html[data-ui] { --g: 12px; --bar-c: 42px; --btn: 40px; --ask-row: 0px; --canvas-top: calc(var(--bar-c) * 2 + var(--ask-row)); } html[data-ui] .p-top { position: fixed; z-index: 6; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: var(--canvas-top); padding: 0 var(--g); pointer-events: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: calc(var(--bar-c) * 2); grid-template-areas: "left ask right"; align-items: center; row-gap: 0; column-gap: 16px; } html[data-ui] .cv-left { grid-area: left; } html[data-ui] .cv-right { grid-area: right; justify-self: end; } /* the question, in the bar: the most used control gets the middle of the most visible strip */ html[data-ui] .p-top > .cv-mid { grid-area: ask; justify-self: center; align-self: center; width: min(100%, 720px); display: flex; align-items: center; gap: 8px; min-width: 0; } html[data-ui] .cv-mid > .p-ask { flex: 1 1 auto; min-width: 0; margin: 0; box-sizing: border-box; } @media (max-width: 1179px) { /* two rows, one 12px rhythm: 12 above the icons, 12 from icons to the question, 12 from the question to the tray */ html[data-ui] { --bar-c: 28px; --ask-row: 60px; } html[data-ui] .p-top { grid-template-rows: calc(var(--bar-c) * 2) var(--ask-row); grid-template-areas: "left . right" "ask ask ask"; column-gap: 0; } html[data-ui] .p-top > .cv-mid { width: 100%; align-self: start; } } /* with the Atelier open the bar has 384px less: go to two rows while it would be under 1179px wide */ @media (min-width: 1100px) and (max-width: 1562px) { html[data-ui][data-atelier] { --bar-c: 28px; --ask-row: 60px; } html[data-ui][data-atelier] .p-top { grid-template-rows: calc(var(--bar-c) * 2) var(--ask-row); grid-template-areas: "left . right" "ask ask ask"; column-gap: 0; } html[data-ui][data-atelier] .p-top > .cv-mid { width: 100%; align-self: start; } } html[data-ui] .p-top > * { pointer-events: auto; } html[data-ui] .p-top .p-round { width: var(--btn); height: var(--btn); border-color: transparent; background: transparent; color: var(--muted); } html[data-ui] .p-top .p-round[aria-expanded="true"] { background: var(--raise); color: var(--text); } @media (hover: hover) and (pointer: fine) { html[data-ui] .p-top .p-round:hover { background: var(--raise); color: var(--text); } } html[data-ui] .p-main #trayWrap { position: fixed; z-index: 0; top: calc(var(--canvas-top) + env(safe-area-inset-top, 0px)); left: var(--g); right: var(--g); bottom: var(--g); width: auto; max-width: none; min-width: 0; aspect-ratio: auto; justify-self: stretch; align-self: stretch; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.5); } @media (min-width: 1100px) { html[data-ui][data-atelier] .p-main #trayWrap { right: 396px; } html[data-ui][data-atelier] .p-top { right: 384px; width: auto; } } /* the bar makes room too, or the Atelier covers Paint and the brushes */ html[data-ui] .p-float { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 10px; position: fixed; z-index: 5; left: 50%; bottom: calc(var(--g) * 2 + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: max-content; max-width: calc(100vw - var(--g) * 4); padding: 6px 10px; border-radius: 20px; background: rgba(22, 22, 22, 0.76); -webkit-backdrop-filter: blur(20px) saturate(1); backdrop-filter: blur(20px) saturate(1); border: 1px solid rgba(236, 236, 236, 0.10); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.75); } @media (min-width: 1100px) { html[data-ui][data-atelier] .p-float { left: calc(50% - 194px); } } html[data-ui] .p-top .p-ask { border-color: transparent; background: rgba(236, 236, 236, 0.07); border-radius: 14px; padding: 3px 3px 3px 14px; gap: 4px; } html[data-ui] .p-top .p-ask input { height: 40px; font-size: 16px; } html[data-ui] .p-top .p-ask .p-round { width: 40px; height: 40px; } html[data-ui] .p-top .p-paint { height: 40px; border-radius: 11px; } html[data-ui] .p-top .p-ask:focus-within { border-color: var(--accent); } html[data-ui] .p-float .p-under:not(:has(:not([hidden]):not(:empty))) { display: none; } html[data-ui] .p-float .p-dockbar { gap: 8px; } html[data-ui] .p-mic, html[data-ui] .p-ask .p-round { border-color: transparent; } html[data-ui] .p-ask .p-round[aria-expanded="true"] { background: var(--raise); } /* captions float just above the panel, on their own glass so they read on light paper */ html[data-ui] .p-main #rail { position: fixed; z-index: 4; left: 50%; transform: translateX(-50%); bottom: calc(var(--float-h, 180px) + 10px); width: min(640px, calc(100vw - 48px)); min-height: 0; pointer-events: none; } html[data-ui] #rail .caption, html[data-ui] #rail .tray-state { justify-self: center; padding: 6px 14px; border-radius: 999px; background: rgba(22, 22, 22, 0.66); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } html[data-ui] #rail .caption { display: block; -webkit-line-clamp: unset; overflow: visible; border-radius: 16px; font-size: 16px; line-height: 1.35; padding: 7px 14px; } html[data-ui] .p-float .p-under[data-empty] { display: none; } @media (max-width: 560px) { html[data-ui] { --g: 8px; --btn: 36px; } html[data-ui] .p-top .p-ask { padding: 3px 3px 3px 12px; gap: 2px; } html[data-ui] .p-top .p-paint { padding: 0 10px; gap: 6px; } } html[data-ui] .p-main #rail { height: auto; overflow: visible; } .p-custom { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 12px 8px; color: var(--muted); } .p-custom input { width: 56px; height: 34px; padding: 0 8px; font: inherit; font-size: 16px; color: var(--text); background: rgba(236,236,236,0.05); border: 1px solid var(--line-strong); border-radius: 8px; } /* a framed shape: the tray reads as a sheet on the dark ground, not the whole window */ html[data-ui] .p-main #trayWrap[style*="width"] { border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 30px 80px -20px rgba(0,0,0,0.7); } /* the Atelier holds only what the surface doesn't: no second set of brushes, switches or tray buttons */ html[data-ui] .p-atelier #tools :is([data-tool="drop"], [data-tool="sprinkle"], [data-tool="stylus"], [data-tool="swirl"]), html[data-ui] .p-atelier .opts, html[data-ui] .p-atelier section[aria-labelledby="trayLabel"] { display: none !important; } .p-menu { position: fixed; z-index: 45; min-width: 190px; padding: 6px; border-radius: 14px; background: #212121; border: 1px solid var(--line-strong); box-shadow: 0 20px 50px -12px rgba(0,0,0,0.7); display: grid; transform-origin: top right; transition: opacity 150ms ease, transform 180ms var(--p-ease); } .p-menu[data-off] { opacity: 0; transform: scale(0.96); pointer-events: none; } .p-menu > button { height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; } .p-menu > button[hidden] { display: none; } @media (hover: hover) and (pointer: fine) { .p-menu > button:hover { background: var(--raise); } } /* ---------- account sheet ---------- */ .p-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(8, 8, 8, 0.55); transition: opacity 200ms ease; } .p-scrim[data-off] { opacity: 0; pointer-events: none; } .p-acct { position: fixed; z-index: 51; top: max(68px, calc(env(safe-area-inset-top) + 60px)); right: 16px; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; padding: 18px; border-radius: 18px; background: #1e1e1e; border: 1px solid var(--line-strong); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.85); transform-origin: top right; display: grid; gap: 18px; transition: opacity 180ms ease, transform 220ms var(--p-ease); } .p-acct[data-off] { opacity: 0; transform: scale(0.96); pointer-events: none; } .p-acct h2 { margin: 0; font: 600 18px/1.1 var(--serif); } .p-acct #signinPanel, .p-acct #signinPanel[hidden] { display: grid !important; border: 0; padding: 0; } .p-acct #signinPanel > .btn { min-height: 48px; font-size: 15px; } /* Sign in with Google, as Google specifies it (dark theme): #131314 fill, #8E918F 1px outline, #E3E3E3 Roboto Medium 14/20, the four-colour G at 20px with 10px before the label, 12px side padding, pill shape. 44px tall here for touch. */ .gsi-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 12px; box-sizing: border-box; border: 1px solid #8e918f; border-radius: 12px; /* the studio's own corners (Google's guidelines leave the shape to us) */ background: #131314; color: #e3e3e3; font: 500 14px/20px Roboto, system-ui, -apple-system, sans-serif; letter-spacing: 0.25px; text-decoration: none; white-space: nowrap; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: background-color 150ms ease, transform 150ms var(--p-ease); } .gsi-btn[hidden] { display: none; } .gsi-g { width: 20px; height: 20px; flex: none; } @media (hover: hover) and (pointer: fine) { .gsi-btn:hover { background: #2a2a2b; } } /* Google's 8% light state layer */ .gsi-btn:active { transform: scale(0.97); } .gsi-btn:focus-visible { outline: 2px solid #e3e3e3; outline-offset: 2px; } .gsi-btn[data-busy] { opacity: 0.7; } .p-acct #recent[hidden] { display: none !important; } html .p-acct[data-signed] #signinPanel { display: none !important; } .p-acct #account { display: grid; gap: 10px; } .p-acct .p-gift { margin: 0; font-size: 14px; color: var(--muted); } @media (prefers-reduced-motion: reduce) { .p-acct, html[data-ui] .p-atelier { transition: opacity 150ms ease !important; transform: none !important; } .p-mic[data-listening]::before { animation: none; } } @media (max-width: 560px) { .p-ask input { font-size: 16px; } .p-paint { padding: 0 12px; } .p-acct { top: auto; bottom: 0; right: 0; left: 0; width: 100%; max-height: 86dvh; border-radius: 22px 22px 0 0; transform-origin: bottom center; padding-bottom: max(24px, env(safe-area-inset-bottom)); } .p-acct[data-off] { transform: translateY(24px); } } /* ---------- the top bar and sidebar, arranged the way Procreate's are ---------- */ .cv-left, .cv-right, .cv-side, .cv-bubble, .cv-toast, .cv-restore { display: none; } html[data-ui] .cv-left, html[data-ui] .cv-right { display: flex; align-items: center; gap: 2px; pointer-events: auto; } html[data-ui] .cv-right .p-toolset { gap: 2px; } html[data-ui] .cv-right .p-tool { width: 40px; height: 40px; border-radius: 12px; border-color: transparent; } html[data-ui] .cv-right .p-tool[aria-pressed="true"] { background: var(--raise); } html[data-ui] .cv-right .p-tool[aria-pressed="true"]::after { display: none; } html[data-ui] .cv-right .p-tool svg { width: 22px; height: 22px; } .cv-text { height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--text); font: 500 15px/1 var(--sans); cursor: pointer; touch-action: manipulation; transition: transform 150ms var(--p-ease), background-color 150ms ease; } .cv-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; background: none; color: var(--muted); cursor: pointer; touch-action: manipulation; transition: transform 150ms var(--p-ease), background-color 150ms ease, color 150ms ease; } .cv-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .cv-text:active, .cv-icon:active, .cv-disc:active, .cv-modify:active { transform: scale(0.95); } .cv-icon[aria-expanded="true"] { background: var(--raise); color: var(--text); } @media (hover: hover) and (pointer: fine) { .cv-text:hover, .cv-icon:hover { background: var(--raise); color: var(--text); } } /* the colour disc: a ring in the current colour, like Procreate's */ .cv-disc { width: 40px; height: 40px; margin-left: 6px; border: 0; border-radius: 999px; cursor: pointer; background: var(--c, #2d3b5c); touch-action: manipulation; box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px rgba(236, 236, 236, 0.75); transition: transform 150ms var(--p-ease); } .cv-colours { width: min(340px, calc(100vw - 24px)); padding: 12px; gap: 12px; transform-origin: top right; } .cv-colours .p-colours { flex-wrap: wrap; overflow: visible; } .cv-colours .p-pals { max-width: 100%; padding: 6px 6px 8px; margin: -6px -6px 0; } .cv-actions { transform-origin: top left; } /* the sidebar, on the canvas edge */ html[data-ui] .cv-side { display: flex; flex-direction: column; align-items: center; gap: 8px; position: fixed; z-index: 7; left: var(--g); top: 50%; transform: translateY(-50%); padding: 10px 6px; border-radius: 18px; background: rgba(22, 22, 22, 0.72); -webkit-backdrop-filter: blur(16px) saturate(1); backdrop-filter: blur(16px) saturate(1); border: 1px solid rgba(236, 236, 236, 0.10); box-shadow: 0 16px 40px -18px rgba(0,0,0,0.7); } html[data-ui][data-lefty] .cv-side { left: auto; right: var(--g); } .cv-slider { position: relative; width: 28px; height: 180px; border-radius: 999px; background: rgba(236, 236, 236, 0.10); cursor: ns-resize; touch-action: none; outline: none; } /* the thumb spans the track; the fill ends at the thumb's centre, so its rounded end is always hidden under the thumb */ .cv-slider { --thumb: 20px; } .cv-slider::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--v, 0.35) * (100% - var(--thumb)) + var(--thumb) / 2); border-radius: 999px; background: rgba(236, 236, 236, 0.22); } .cv-slider i { position: absolute; left: 0; right: 0; bottom: calc(var(--v, 0.35) * (100% - var(--thumb))); height: var(--thumb); border-radius: 999px; background: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.35); } .cv-slider:focus-visible { box-shadow: 0 0 0 2px var(--accent); } /* pressed: the tray is waiting for a tap to pick its colour */ .cv-modify[aria-pressed="true"] { background: var(--raise); color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent) inset; } html[data-picking] #tray { cursor: cell; } html[data-ui] .cv-side .cv-icon { width: 36px; height: 36px; } /* the size preview beside the slider while dragging */ html[data-ui] .cv-bubble { display: grid; place-items: center; position: fixed; z-index: 7; left: calc(var(--g) + 72px); top: 50%; width: 84px; height: 84px; margin-top: -42px; border-radius: 16px; background: var(--paper, #f0f0f0); box-shadow: 0 12px 30px -12px rgba(0,0,0,0.6); transition: opacity 120ms ease, transform 160ms var(--p-ease); } html[data-ui][data-lefty] .cv-bubble { left: auto; right: calc(var(--g) + 72px); } .cv-bubble i { display: block; border-radius: 50%; } .cv-bubble[data-off] { opacity: 0; transform: scale(0.96); pointer-events: none; } /* what just happened, briefly, under the top bar */ /* a toast: short text, one line where it fits. Corners are a card's (16px, concentric with the 12px button inside a 4px inset), not a pill's: a pill only suits one line, and a message that wraps ran into its round ends */ html[data-ui] .cv-toast { display: block; position: fixed; z-index: 8; top: calc(var(--canvas-top, 84px) + 12px); left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 16px; width: max-content; max-width: min(420px, calc(100vw - 32px)); box-sizing: border-box; line-height: 1.35; text-wrap: pretty; background: rgba(22, 22, 22, 0.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--text); font-size: 13px; pointer-events: none; transition: opacity 160ms ease, transform 200ms var(--p-ease); } html[data-ui] .cv-toast[data-off] { opacity: 0; transform: translate(-50%, -4px); } html[data-ui] .cv-toast[data-action] { display: flex; align-items: center; gap: 12px; padding: 4px 4px 4px 14px; pointer-events: auto; } html[data-ui] .cv-toast[data-action] .cv-toast-msg { flex: 1 1 auto; min-width: 0; padding-block: 5px; } html[data-ui] .cv-toast[data-action][data-off] { pointer-events: none; } .cv-toast-act { flex: none; white-space: nowrap; height: 32px; padding: 0 12px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.14); color: var(--text); font: 500 13px/1 var(--sans); cursor: pointer; touch-action: manipulation; transition: background-color 150ms ease, transform 150ms var(--p-ease); } .cv-toast-act::before { content: ''; position: absolute; inset: -8px; } /* a 46px target around a 30px button */ .cv-toast-act { position: relative; } @media (hover: hover) and (pointer: fine) { .cv-toast-act:hover { background: rgba(255, 255, 255, 0.22); } } .cv-toast-act:active { transform: scale(0.97); } /* the capsule at the bottom is smaller here: brushes and colours live at the top */ html[data-ui] .p-float[hidden] { display: none !important; } /* full screen: only the tray (and captions) */ html[data-bare] .p-top, html[data-bare] .cv-side, html[data-bare] .p-float { opacity: 0; pointer-events: none; transition: opacity 200ms ease; } /* watching (ui.js): while a picture plays and nobody moves, the controls drift a few px toward their edge and fade; the words (the title card and captions) stay. They leave slowly and come back fast, the moment a hand moves. */ html[data-ui] :is(.cv-left, .cv-mid, .cv-right, .cv-side, .pcard-acts) { transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1), translate 160ms cubic-bezier(0.23, 1, 0.32, 1); } html[data-ui][data-watch] :is(.cv-left, .cv-mid, .cv-right, .cv-side, .pcard-acts) { opacity: 0; pointer-events: none; transition-duration: 700ms; transition-timing-function: ease; } html[data-ui][data-watch] :is(.cv-left, .cv-mid, .cv-right) { translate: 0 -6px; } html[data-ui][data-watch]:not([data-lefty]) .cv-side { translate: -6px 0; } html[data-ui][data-watch][data-lefty] .cv-side { translate: 6px 0; } html[data-ui][data-watch] .cv-hint { opacity: 0; pointer-events: none; } html[data-ui][data-watch] .pcard-row { position: relative; } html[data-ui][data-watch] .pcard-acts { position: absolute; right: 0; } /* out of the row while away, so the caption gets its space */ @media (max-width: 480px) { html[data-ui][data-watch] .cv-right { translate: 0 6px; } } /* the phone's tool dock sits at the bottom */ @media (prefers-reduced-motion: reduce) { html[data-ui][data-watch] :is(.cv-left, .cv-mid, .cv-right, .cv-side) { translate: none; } } html[data-ui] .cv-restore:not([hidden]) { display: grid; place-items: center; position: fixed; z-index: 9; top: calc(var(--g) + 4px); left: calc(var(--g) + 4px); width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(22, 22, 22, 0.6); color: var(--text); cursor: pointer; } .cv-restore svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } @media (prefers-reduced-motion: reduce) { .cv-toast, .cv-bubble { transition: opacity 150ms ease !important; transform: none !important; } } @media (max-width: 560px) { html[data-ui] .cv-text { padding: 0 6px; font-size: 13px; } html[data-ui] .cv-icon, html[data-ui] .cv-right .p-tool { width: 34px; height: 34px; } html[data-ui] .cv-right .p-tool svg, html[data-ui] .cv-icon svg { width: 19px; height: 19px; } html[data-ui] .cv-disc { width: 30px; height: 30px; margin-left: 4px; } html[data-ui] .cv-slider { height: 140px; } } /* ---------- the painting's name, Actions tabs, the gallery, first-run tips ---------- */ .cv-name { max-width: min(36vw, 280px); height: 40px; padding: 0 10px; border: 0; border-radius: 12px; background: none; color: var(--muted); cursor: text; font: 500 16px/1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; touch-action: manipulation; } @media (hover: hover) and (pointer: fine) { .cv-name:hover { background: var(--raise); color: var(--text); } } .cv-rename { box-sizing: border-box; min-width: 0; margin: 0; padding: 0 10px; border: 0; border-radius: 12px; background: var(--raise); color: var(--text); font: 500 16px/1 var(--sans); outline: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); caret-color: currentColor; } .cv-rename::selection { background: rgba(255, 255, 255, 0.2); color: inherit; } .cv-actions { box-sizing: border-box; width: min(340px, calc(100vw - 24px)); max-width: calc(100vw - 24px); padding: 8px; gap: 8px; grid-template-columns: minmax(0, 1fr); overflow-x: hidden; } .cv-actions > * { min-width: 0; } .cv-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 3px; border-radius: 12px; background: rgba(236, 236, 236, 0.06); } .cv-tabs button { min-width: 0; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 32px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 500 12.5px/1 var(--sans); cursor: pointer; } .cv-tabs button[aria-selected="true"] { background: var(--raise); color: var(--text); } .cv-panel { display: grid; gap: 2px; min-height: 120px; align-content: start; } .cv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; } @media (hover: hover) and (pointer: fine) { .cv-row:hover { background: var(--raise); } } .cv-toggle i { position: relative; flex: none; width: 36px; height: 22px; border-radius: 999px; background: rgba(236, 236, 236, 0.18); transition: background-color 160ms ease; } .cv-toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text); transition: transform 180ms var(--p-ease); } .cv-toggle[aria-checked="true"] i { background: var(--accent); } .cv-toggle[aria-checked="true"] i::after { transform: translateX(14px); } .cv-label { margin: 8px 13px 4px; font: 500 13px/1 var(--sans); color: var(--faint); } .cv-help { margin: 0; padding: 6px 12px; font-size: 13.5px; color: var(--muted); } .cv-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0 8px 6px; padding: 3px; border-radius: 12px; background: rgba(236, 236, 236, 0.06); } .cv-seg button { height: 32px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; } .cv-seg button[aria-checked="true"] { background: var(--raise); color: var(--text); } .cv-shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 4px; padding: 2px; } .cv-shapes button { display: grid; justify-items: center; align-content: center; gap: 6px; height: 64px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; } .cv-shapes button[aria-checked="true"] { background: var(--raise); color: var(--text); box-shadow: 0 0 0 1.5px var(--accent) inset; } .cv-shapes .g { display: block; width: 22px; height: 22px; border: 1.5px solid currentColor; border-radius: 3px; } .cv-shapes .g.full { width: 26px; height: 18px; border-style: dashed; } .p-menu > button.danger { color: #f0b8ae; } /* the gallery: the home screen */ .gl { position: fixed; inset: 0; z-index: 45; overflow-y: auto; overscroll-behavior: contain; background: var(--ground); padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); transition: opacity 200ms ease, transform 220ms var(--p-ease); } .gl[data-off] { opacity: 0; transform: scale(0.985); pointer-events: none; visibility: hidden; transition: opacity 150ms ease, transform 150ms ease, visibility 0s 150ms; } .gl-head { position: sticky; top: calc(-1 * max(16px, env(safe-area-inset-top))); z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 14px; background: linear-gradient(var(--ground) 80%, transparent); } .gl-head h1 { margin: 0; font: 600 24.5px/1 var(--serif); letter-spacing: -0.01em; } .gl-acts { display: flex; gap: 8px; align-items: center; } .gl-new { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 10px; border: 0; border-radius: 12px; background: var(--text); color: var(--ground); font: 500 14px/1 var(--sans); cursor: pointer; transition: transform 150ms var(--p-ease); } .gl-new svg, .gl-me svg, .gl-more svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .gl-me { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--text); cursor: pointer; transition: transform 150ms var(--p-ease); } .gl-new:active, .gl-me:active, .gl-open:active { transform: scale(0.97); } .gl-note { margin: 0 0 14px; color: var(--muted); font-size: 13px; } .gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 230px), 1fr)); gap: 22px 18px; } .gl-card { display: grid; gap: 8px; min-width: 0; } /* the picture keeps its own shape, sitting on the ground like an artwork in Procreate's gallery */ /* the picture keeps its own shape inside a 4:3 box, sitting on the box's bottom edge (absolutely placed, so a tall painting's height limit resolves against the box instead of stretching it) */ .gl-open { display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: none; cursor: pointer; transition: transform 150ms var(--p-ease); } .gl-open img { position: absolute; inset: 0; margin: auto auto 0; display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px rgba(236, 236, 236, 0.06), 0 16px 30px -18px rgba(0,0,0,0.8); transition: box-shadow 150ms ease; } .gl-card[data-current] .gl-open img { box-shadow: 0 0 0 2px var(--accent), 0 16px 30px -18px rgba(0,0,0,0.8); } .gl-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4px; } .gl-name { justify-self: start; max-width: 100%; padding: 2px 4px; margin-left: -4px; border: 0; border-radius: 6px; background: none; color: var(--text); font: 500 13px/1.25 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; text-align: left; } .gl-date { grid-column: 1; font-size: 12px; color: var(--faint); } .gl-more { grid-row: 1 / span 2; grid-column: 2; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; } @media (hover: hover) and (pointer: fine) { .gl-more:hover, .gl-name:hover { background: var(--raise); } .gl-card:not([data-current]) .gl-open:hover img { box-shadow: 0 0 0 1px rgba(236, 236, 236, 0.22), 0 16px 30px -18px rgba(0,0,0,0.8); } } .gl-newpop { width: min(380px, calc(100vw - 24px)); max-height: calc(100dvh - 90px); overflow-y: auto; padding: 10px; gap: 10px; z-index: 46; transform-origin: top right; } .p-menu > .gl-blank { justify-content: center; background: var(--text); color: var(--ground); font-weight: 500; } @media (hover: hover) and (pointer: fine) { .p-menu > .gl-blank:hover { background: #ffffff; } } .gl-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; } .gl-pics .p-tile img { width: 100%; height: auto; aspect-ratio: 1; } html[data-gallery] .cv-side, html[data-gallery] .p-float { visibility: hidden; } /* first run: the gestures */ .cv-tips { position: fixed; z-index: 52; left: 50%; top: 50%; width: min(380px, calc(100vw - 32px)); padding: 22px; border-radius: 20px; background: #1e1e1e; border: 1px solid var(--line-strong); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.85); transform: translate(-50%, -50%); transition: opacity 180ms ease, transform 220ms var(--p-ease); } .cv-tips[data-off] { opacity: 0; transform: translate(-50%, -48%) scale(0.97); pointer-events: none; } .cv-tips h2 { margin: 0 0 14px; font: 600 19.5px/1.1 var(--serif); } .cv-tips ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; } .cv-tips li { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 12px; font-size: 14.5px; color: var(--muted); } .cv-fingers { display: flex; gap: 4px; } .cv-fingers i { width: 9px; height: 13px; border-radius: 50% 50% 45% 45%; background: var(--text); opacity: 0.85; } .cv-got { width: 100%; justify-content: center; } @media (prefers-reduced-motion: reduce) { .gl, .gl[data-off], .cv-tips, .cv-tips[data-off] { transform: none !important; } } @media (max-width: 560px) { .cv-name { max-width: 30vw; font-size: 15px; padding: 0 6px; } .gl-head h1 { font-size: 26px; } } /* ---------- the top bar's sound switch and the pictures drawer ---------- */ .cv-icon[aria-pressed="false"] { color: var(--muted); } /* phones: the name lives in the Gallery, and the bar's buttons tighten so Gallery, Actions, pictures, sound, five tools and the colour all fit a 375px screen */ @media (max-width: 480px) { /* the painting's name fills the room between share and demos, trailing off when long */ html[data-ui] .cv-name { flex: 0 1 auto; min-width: 0; max-width: none; padding: 0 6px; font-size: 15px; } html[data-ui] .cv-icon, html[data-ui] .cv-right .p-tool { width: 32px; height: 32px; } html[data-ui] .cv-right .p-tool.sponge { margin-left: 2px; } html[data-ui] .cv-text { padding: 0 4px; } html[data-ui] .cv-disc { margin-left: 2px; } html[data-ui] .cv-side .cv-icon { width: 36px; height: 36px; } } @media (max-width: 380px) { html[data-ui] .cv-left .cv-icon, html[data-ui] .cv-right .p-tool { width: 30px; height: 30px; } html[data-ui] .cv-disc { margin-left: 0; } } .cv-dscrim { position: fixed; inset: 0; z-index: 52; background: rgba(8, 8, 8, 0.5); transition: opacity 250ms ease; } .cv-dscrim[data-off] { opacity: 0; pointer-events: none; } .cv-drawer { position: fixed; z-index: 53; left: 50%; bottom: 0; width: min(760px, 100vw); max-height: min(72dvh, 640px); display: grid; grid-template-rows: auto auto minmax(0, 1fr); padding: 0 0 max(12px, env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: #1b1b1b; border: 1px solid var(--line-strong); border-bottom: 0; box-shadow: 0 -24px 60px -24px rgba(0, 0, 0, 0.8); transform: translate(-50%, 0); touch-action: none; transition: transform 500ms cubic-bezier(0.32, 0.72, 0, 1); } .cv-drawer[data-off] { transform: translate(-50%, 105%); visibility: hidden; transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 300ms; } .cv-handle { width: 40px; height: 5px; margin: 10px auto 2px; border-radius: 999px; background: var(--line-strong); } .cv-drawer h2 { margin: 0; padding: 8px 20px 12px; font: 600 16.5px/1 var(--serif); color: var(--text); } .cv-drawer-body { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 0 16px 8px; } /* demos: a row per kind, a title with back/next arrows over a strip of cards that swipes and snaps */ .p-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-bottom: 6px; } .p-row { min-width: 0; } /* or each strip grows to its full length and never scrolls */ .p-row-head { display: flex; align-items: center; gap: 4px; margin: 0 0 8px; } .p-row-head h3 { flex: 1; margin: 0; font: 600 15px/1.2 var(--sans); color: var(--text); } .p-row-head[data-fits] .p-row-arrow { visibility: hidden; } /* everything already shows */ .p-row-arrow { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 0; border-radius: 999px; background: rgba(236, 236, 236, 0.08); color: var(--text); cursor: pointer; touch-action: manipulation; position: relative; transition: transform 150ms var(--p-ease), background-color 150ms ease, opacity 150ms ease; } .p-row-arrow::before { content: ''; position: absolute; inset: -4px; } /* a 44px target */ .p-row-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .p-row-arrow:active:not(:disabled) { transform: scale(0.97); } .p-row-arrow:disabled { opacity: 0.3; cursor: default; } .p-row-arrow:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { .p-row-arrow:not(:disabled):hover { background: rgba(236, 236, 236, 0.16); } } .cv-drawer .p-tiles { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 6px; margin: 0 -16px; padding-inline: 16px; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cv-drawer .p-tiles::-webkit-scrollbar { display: none; } .cv-drawer .p-tile { flex: 0 0 auto; width: 116px; scroll-snap-align: start; } @media (max-width: 480px) { .cv-drawer .p-tile { width: 104px; } } .cv-drawer .p-tile img { width: 100%; height: auto; aspect-ratio: 1; } @media (prefers-reduced-motion: reduce) { .cv-drawer, .cv-drawer[data-off] { transition: opacity 200ms ease, visibility 0s linear 200ms; transform: translate(-50%, 0) !important; } .cv-drawer:not([data-off]) { transition: opacity 200ms ease; } .cv-drawer[data-off] { opacity: 0; } } /* ---------- sharing ---------- */ .cv-share { display: grid; gap: 8px; padding: 4px 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); } .cv-share .cv-help { margin: 0; padding: 0 12px; } .cv-share-go { justify-content: center; margin: 0 4px; } .cv-share .cv-linkrow { margin: 0 4px; } .cv-share-go[disabled] { opacity: 0.6; cursor: default; } .cv-danger { color: #e3907f !important; } .cv-linkrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; } .cv-linkrow input { min-width: 0; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(236, 236, 236, 0.05); color: var(--text); font: inherit; font-size: 14px; } .cv-linkrow .p-paint { padding: 0 14px; font-size: 14px; } .gl-open { position: relative; } .gl-shared { position: absolute; z-index: 1; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px; background: rgba(20, 20, 20, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text); font: 500 12px/1 var(--sans); } .gl-shared svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .cv-links { display: grid; gap: 6px; } .cv-links .label { margin: 0 0 4px; } .cv-linkitem { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; } .cv-linkitem a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font: 500 14px/1.2 var(--serif); } /* someone's shared painting: shown, not edited */ .cv-home, .cv-sharebar { display: none; } html[data-share] .cv-home { display: inline-flex; align-items: center; text-decoration: none; font: 600 15.5px/1 var(--serif); } /* a shared painting keeps only the logo, its name and sound: no AI, no demos, no tools */ html[data-share] :is(.cv-side, .cv-right, .p-float, .p-top > .cv-mid, .cv-bubble, .cv-left > button:not(.cv-name):not(.cv-sound)) { display: none !important; } html[data-share] .cv-name { display: inline-flex !important; align-items: center; cursor: default; color: var(--text); max-width: 46vw; } html[data-share] #trayWrap { pointer-events: none; } html[data-share] .cv-sharebar { display: flex; align-items: center; gap: 10px; position: fixed; z-index: 6; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 8px; border-radius: 20px; background: rgba(22, 22, 22, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px var(--line-strong), 0 20px 50px -16px rgba(0, 0, 0, 0.7); } html[data-share] .cv-own { white-space: nowrap; height: 44px; padding: 0 16px; font-size: 15px; text-decoration: none; color: var(--text); } /* credits: a drop and the count, beside Paint */ .p-credits { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 0; border-radius: 11px; background: none; color: var(--text); font: 500 15px/1 var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation; transition: transform 150ms var(--p-ease), background-color 150ms ease; } .p-credits:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .p-credits:hover { background: var(--raise); } } .p-credits[data-empty] { color: var(--muted); } /* open: the coins menu is showing (like the other toolbar buttons) */ .p-credits[aria-expanded="true"], html[data-ui] .p-ask button[aria-expanded="true"] { background: var(--raise); color: var(--text); } /* a coin: gold face, a struck inner ring; empty, just its outline */ .p-credits svg { width: 16px; height: 16px; flex: none; } .p-credits .face { fill: var(--accent); stroke: color-mix(in srgb, var(--accent), black 25%); stroke-width: 1; } .p-credits .rim { fill: none; stroke: color-mix(in srgb, var(--accent), black 32%); stroke-width: 1.1; } .p-credits[data-empty] .face { fill: none; stroke: currentColor; } .p-credits[data-empty] .rim { stroke: currentColor; opacity: 0.5; } @media (max-width: 480px) { .p-credits { padding: 0 6px; gap: 4px; } } /* the end of a replay: the last frame fades into the exact shared painting */ .cv-settle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity 600ms ease, filter 600ms ease; } .cv-settle[data-out] { opacity: 0; filter: blur(2px); } @media (prefers-reduced-motion: reduce) { .cv-settle { transition: opacity 300ms ease; } .cv-settle[data-out] { filter: none; } } /* Share: the same popover without the tabs */ .cv-tabs[hidden] { display: none; } .cv-actions:has(.cv-tabs[hidden]) .cv-share { border-top: 0; } /* Gallery: the word, or its icon on phones */ .cv-gallery svg { display: none; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 480px) { html[data-ui] .cv-gallery { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; } html[data-ui] .cv-gallery span { display: none; } html[data-ui] .cv-gallery svg { display: block; } } @media (max-width: 380px) { html[data-ui] .cv-gallery { width: 30px; height: 30px; } html[data-ui] .cv-left, html[data-ui] .cv-right, html[data-ui] .cv-right .p-toolset { gap: 0; } html[data-ui] .cv-right .p-tool.sponge { margin-left: 0; } } /* the Gallery holds everything that's yours: paintings, then shared links, then the AI's performances */ .gl-sec { margin-top: 40px; display: grid; gap: 6px; } .gl-sec-title { margin: 0 0 6px; font: 500 13px/1 var(--sans); color: var(--faint); } .gl-sec .cv-linkitem { padding: 4px 0; border-bottom: 1px solid var(--line); } .gl-perfs { list-style: none; margin: 0; padding: 0; display: grid; } .gl-perf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .gl-perf-sw { display: flex; align-items: center; gap: 3px; height: 30px; padding: 0 8px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset; } .gl-perf-sw i { width: 8px; height: 8px; border-radius: 50%; } .gl-perf-text { display: grid; gap: 3px; min-width: 0; } .gl-perf-title { font: 500 14px/1.2 var(--serif); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gl-perf-meta { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 480px) { .gl-perf { grid-template-columns: minmax(0, 1fr) auto auto; } .gl-perf-sw { display: none; } } .cv-coins { display: flex; align-items: center; gap: 8px; color: var(--text) !important; } .cv-coins svg { width: 18px; height: 18px; } .cv-coins .face { fill: var(--accent); stroke: color-mix(in srgb, var(--accent), black 25%); stroke-width: 1; } .cv-coins .rim { fill: none; stroke: color-mix(in srgb, var(--accent), black 32%); stroke-width: 1.1; } .cv-togallery { justify-self: start; padding-left: 0 !important; color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .gl-perf .gl-more { grid-row: auto; grid-column: auto; } .p-acct #accountLabel { display: none; } /* the sheet is titled Account already */ /* phones: Paint keeps its brush and loses its word, so the question still has room beside Demos */ @media (max-width: 480px) { html[data-ui] .p-top .p-paint .p-paint-label { display: none; } html[data-ui] .p-top .p-paint { padding: 0 12px; } } html[data-ui] .p-top .p-ask input { text-overflow: ellipsis; } /* a long question (or placeholder) trails off, never cut mid-letter */ /* Demos: a pocket of pictures beside the AI bar. Three thumbnails stand fanned out of a dark pocket; on hover they lift and spread a little (an occasional action, so it can have a moment), and they stay up while the drawer is open. */ .cv-demos { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px 0 8px; border: 0; border-radius: 14px; background: rgba(236, 236, 236, 0.07); color: var(--text); cursor: pointer; touch-action: manipulation; transition: transform 150ms var(--p-ease), background-color 150ms ease; } .cv-demos:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .cv-demos:hover { background: rgba(236, 236, 236, 0.11); } } .cv-demos[aria-expanded="true"] { box-shadow: 0 0 0 1.5px var(--accent) inset; } .cv-pocket { position: relative; width: 40px; height: 36px; flex: none; } .cv-pocket img { position: absolute; left: 50%; bottom: 7px; width: 20px; height: 20px; margin-left: -10px; border-radius: 5px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 6px -2px rgba(0, 0, 0, 0.6); transform-origin: 50% 100%; transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1); } .cv-pocket img:nth-child(1) { transform: translate(-8px, 0) rotate(-14deg); } .cv-pocket img:nth-child(2) { transform: translate(0, -3px); z-index: 1; } .cv-pocket img:nth-child(3) { transform: translate(8px, 0) rotate(14deg); } .cv-pocket i { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; z-index: 2; border-radius: 4px 4px 7px 7px; background: #2c2c2c; box-shadow: inset 0 1px 0 rgba(236, 236, 236, 0.16), 0 -1px 3px rgba(0, 0, 0, 0.35); } @media (hover: hover) and (pointer: fine) { .cv-demos:hover .cv-pocket img:nth-child(1) { transform: translate(-11px, -3px) rotate(-20deg); } .cv-demos:hover .cv-pocket img:nth-child(2) { transform: translate(0, -7px); } .cv-demos:hover .cv-pocket img:nth-child(3) { transform: translate(11px, -3px) rotate(20deg); } } .cv-demos[aria-expanded="true"] .cv-pocket img:nth-child(1) { transform: translate(-11px, -3px) rotate(-20deg); } .cv-demos[aria-expanded="true"] .cv-pocket img:nth-child(2) { transform: translate(0, -7px); } .cv-demos[aria-expanded="true"] .cv-pocket img:nth-child(3) { transform: translate(11px, -3px) rotate(20deg); } @media (prefers-reduced-motion: reduce) { .cv-pocket img { transition: none; } } .cv-demos-text { display: grid; gap: 3px; text-align: left; } .cv-demos-text b { font: 500 14.5px/1 var(--sans); } .cv-demos-text small { font: 500 11px/1 var(--sans); color: var(--muted); letter-spacing: 0.02em; } /* phones: the pocket speaks for itself */ @media (max-width: 480px) { .cv-demos { padding: 0 6px; gap: 0; } .cv-demos-text { display: none; } } /* example prompts for the AI, under the question while it's empty */ .cv-ideas { position: fixed; z-index: 44; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px; box-sizing: border-box; border-radius: 16px; background: #212121; border: 1px solid var(--line-strong); box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.7); transform-origin: top center; transition: opacity 150ms ease, transform 180ms var(--p-ease); } .cv-ideas[data-off] { opacity: 0; transform: translateY(-4px) scale(0.98); pointer-events: none; } .cv-ideas-label { font: 500 13px/1 var(--sans); color: var(--faint); padding: 0 6px 0 4px; } .cv-idea { height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; transition: transform 150ms var(--p-ease), background-color 150ms ease; } .cv-idea:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .cv-idea:hover { background: var(--raise); } } /* ---------- FigJam-style: the tray fills the window and every group of controls floats over it ---------- */ /* one material for everything that floats (the sidebar's): translucent, blurred, a hairline edge, a soft shadow */ html[data-ui] { --bar-c: 36px; } html[data-ui] .p-main #trayWrap:not([style*="width"]) { top: 0; left: 0; right: 0; bottom: 0; border-radius: 0; box-shadow: none; } html[data-ui] :is(.cv-left, .cv-right, .cv-demos, .p-top .p-ask) { background: rgba(22, 22, 22, 0.72); -webkit-backdrop-filter: blur(16px) saturate(1); backdrop-filter: blur(16px) saturate(1); border: 1px solid rgba(236, 236, 236, 0.10); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.7); box-sizing: border-box; } html[data-ui] :is(.cv-left, .cv-right) { height: 48px; padding: 0 4px; border-radius: 16px; } html[data-ui] .p-top .p-ask { height: 48px; border-radius: 16px; padding: 3px 3px 3px 14px; } html[data-ui] .p-top .p-ask:focus-within { border-color: var(--accent); } html[data-ui] .cv-demos { height: 48px; border-radius: 16px; } @media (hover: hover) and (pointer: fine) { html[data-ui] .cv-demos:hover { background: rgba(36, 36, 36, 0.82); } } @media (prefers-reduced-transparency: reduce) { html[data-ui] :is(.cv-left, .cv-right, .cv-demos, .p-top .p-ask, .cv-side) { background: #1d1d1d; -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (max-width: 1179px) { html[data-ui] { --ask-row: 60px; } html[data-ui] .p-top > .cv-mid { align-self: start; } } @media (max-width: 480px) { html[data-ui] { --bar-c: 28px; } html[data-ui] :is(.cv-left, .cv-right) { height: 40px; padding: 0 3px; border-radius: 13px; } html[data-ui] .cv-right .cv-disc { width: 28px; height: 28px; } html[data-ui] .p-top .p-ask, html[data-ui] .cv-demos { height: 46px; border-radius: 14px; } } /* inside a floating toolbar, "selected" is a lighter wash of the same material, not a solid dark block, and the colour disc fits the bar (concentric: 48px bar, 4px inset, 36px disc with a thin ring) */ html[data-ui] :is(.cv-left, .cv-right) :is(.p-tool[aria-pressed="true"], .cv-icon[aria-expanded="true"]) { background: rgba(236, 236, 236, 0.14); border-color: transparent; color: var(--text); } html[data-ui] .cv-right .cv-disc { width: 36px; height: 36px; margin: 0 2px 0 6px; box-shadow: 0 0 0 2px rgba(236, 236, 236, 0.85), inset 0 0 0 1px rgba(0, 0, 0, 0.3); } html[data-ui] .cv-right .p-tool.sponge { position: relative; margin-left: 9px; } html[data-ui] .cv-right .p-tool.sponge::before { content: ''; position: absolute; left: -6px; top: 10px; bottom: 10px; width: 1px; background: rgba(236, 236, 236, 0.14); } @media (max-width: 480px) { html[data-ui] .cv-right .cv-disc { width: 28px; height: 28px; margin: 0 2px 0 3px; box-shadow: 0 0 0 1.5px rgba(236, 236, 236, 0.85); } html[data-ui] .cv-right .p-tool.sponge { margin-left: 5px; } html[data-ui] .cv-right .p-tool.sponge::before { left: -3px; top: 8px; bottom: 8px; } } /* the replay control on a shared link: fills up as the painting is made, then offers it again */ .cv-watch { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; isolation: isolate; } .cv-watch svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .cv-watch::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(236, 236, 236, 0.14); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 100ms linear; } /* the colour is a swatch like the other buttons: a rounded square, its corners concentric with the bar (16 − 6 = 10) */ html[data-ui] .cv-right .cv-disc { border-radius: 10px; } @media (max-width: 480px) { html[data-ui] .cv-right .cv-disc { border-radius: 9px; } } /* the lab's embedded trays: just the water */ html[data-lab] :is(.p-top, .cv-side, .p-float, .cv-tips, .p-scrim, .cv-bubble, .cv-toast) { display: none !important; } /* hover and selected brighten what they're on, never darken it: a light wash, over the floating glass and the popovers alike */ html[data-ui] { --raise: rgba(236, 236, 236, 0.11); } /* ---------- the wordmark, and the Gallery as a popover under it ---------- */ .cv-logo { display: inline-flex; align-items: center; justify-content: center; } .cv-logo-mark { display: block; height: 18px; width: auto; } html[data-ui] .cv-logo { padding: 0 12px; } html[data-ui] .cv-logo[aria-expanded="true"] { background: var(--raise); } @media (max-width: 480px) { html[data-ui] .cv-logo { width: auto; padding: 0 6px; } .cv-logo-mark { height: 14px; } } html[data-share] .cv-home .cv-logo-mark { height: 19px; } /* the Gallery: the popover material (like Actions), growing from the wordmark; nothing else is hidden while it's open */ .gl { inset: auto; position: fixed; z-index: 44; overflow-y: auto; overscroll-behavior: contain; border-radius: 18px; background: #1c1c1c; border: 1px solid var(--line-strong); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85); padding: 6px 16px 18px; box-sizing: border-box; transition: opacity 180ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1); } .gl[data-off] { opacity: 0; transform: scale(0.96); pointer-events: none; visibility: hidden; transition: opacity 120ms ease, transform 120ms ease, visibility 0s 120ms; } .gl-head { top: -6px; padding: 12px 0 12px; background: linear-gradient(#1c1c1c 82%, transparent); } .gl-head h1 { font-size: 22px; } .gl-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 14px; } .gl-sec { margin-top: 26px; } html[data-gallery] .cv-side, html[data-gallery] .p-float { visibility: visible; } @media (prefers-reduced-motion: reduce) { .gl, .gl[data-off] { transform: none !important; } } /* phones: the wordmark takes a little room, so the icons on either side step down to keep a gap between the two bars */ @media (max-width: 480px) { html[data-ui] .cv-left .cv-icon { width: 30px; height: 30px; } } @media (max-width: 380px) { html[data-ui] .cv-right .p-tool { width: 28px; height: 28px; } html[data-ui] .cv-left .cv-icon { width: 28px; height: 28px; } } /* ---------- neutral accents: over the frosted toolbars the painting holds all the colour; the UI stays cream ---------- Only the coin keeps its gold: it's a coin. */ html[data-ui] { --accent: rgba(236, 236, 236, 0.82); --gold: #cda65a; } html[data-ui] .cv-toggle[aria-checked="true"] i { background: var(--text); } html[data-ui] .cv-toggle[aria-checked="true"] i::after { background: #1c1c1c; } html[data-ui] :is(.p-credits, .cv-coins) .face { fill: var(--gold); stroke: color-mix(in srgb, var(--gold), black 25%); } html[data-ui] :is(.p-credits, .cv-coins) .rim { stroke: color-mix(in srgb, var(--gold), black 32%); } html[data-ui] .p-top .p-ask:focus-within { border-color: rgba(236, 236, 236, 0.45); } html[data-ui] .gl-card[data-current] .gl-open img { box-shadow: 0 0 0 2px var(--text), 0 16px 30px -18px rgba(0, 0, 0, 0.8); } /* ---------- neutral palette: greys and near-white; only the paper, the ink and meaningful signals carry colour ---------- */ html[data-ui] { --ground: #131313; --panel: #1b1b1b; --text: #ececec; --muted: #a9a9a9; --faint: #878787; --line: rgba(236, 236, 236, 0.1); --line-strong: rgba(236, 236, 236, 0.2); --raise: rgba(236, 236, 236, 0.11); --accent: rgba(236, 236, 236, 0.82); } /* the glass: denser and without a saturation boost, so the cream paper behind it doesn't tint the toolbars warm */ html[data-ui] :is(.cv-left, .cv-right, .cv-demos, .p-top .p-ask, .cv-side) { background: rgba(24, 24, 24, 0.78); } /* colours are swatches like the colour button that opens them: rounded squares, not circles. The paper stands apart with a hairline before it and an inner edge, since the shape no longer tells it from the inks. */ html[data-ui] .p-dot { border-radius: 10px; } html[data-ui] .p-dot.is-ground { margin-left: 9px; position: relative; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 0 4px rgba(255, 255, 255, 0.35); } html[data-ui] .p-dot.is-ground::before { content: ''; position: absolute; left: -9px; top: 6px; bottom: 6px; width: 1px; background: var(--line-strong); } html[data-ui] .p-dot.is-ground[aria-checked="true"] { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.35), 0 0 0 2px var(--ground), 0 0 0 4px var(--text); } /* the colour popover: both rows share one left edge and leave room for the 4px selection ring (the rows scroll sideways, so anything past their padding is clipped) */ html[data-ui] .cv-colours .p-colours, html[data-ui] .cv-colours .p-pals { padding: 6px; margin: -6px -6px 0; } html[data-ui] .cv-colours .p-pals { scroll-padding-inline: 6px; } /* snapping would otherwise pull the first strip flush to the edge */ /* ---------- you: the avatar next to the wordmark opens who you are and everything that's yours ---------- */ html[data-ui] .cv-logo { height: 40px; padding: 0 10px 0 12px; border: 0; border-radius: 12px; background: none; color: inherit; cursor: pointer; touch-action: manipulation; transition: transform 150ms var(--p-ease), background-color 150ms ease; } html[data-ui] .cv-logo:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { html[data-ui] .cv-logo:hover { background: var(--raise); } } /* about: what ebru is, who made this */ .cv-about { width: min(340px, calc(100vw - 24px)); padding: 16px 18px 14px; gap: 0; transform-origin: top left; } .cv-about h2 { margin: 0 0 8px; font: 600 19.5px/1.1 var(--serif); color: var(--text); } .cv-about p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; } .cv-about .cv-about-by { margin: 4px 0 10px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); } /* the studio's Instagram: a link pill like the maker's links, with the glyph, under the part about the studio */ .cv-about .cv-about-ig { display: inline-flex; align-self: flex-start; width: fit-content; align-items: center; gap: 7px; height: 30px; margin: 2px 0 12px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text); font-size: 13px; text-decoration: none; touch-action: manipulation; transition: transform 150ms var(--p-ease), background-color 150ms ease; } .cv-about .cv-about-ig svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; } .cv-about .cv-about-ig .dot { fill: currentColor; stroke: none; } .cv-about .cv-about-ig:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .cv-about .cv-about-ig:hover { background: var(--raise); } } @media (pointer: coarse) { html[data-ui] .cv-about .cv-about-ig { min-height: 44px; } } .cv-about .cv-about-by b { color: var(--text); font-weight: 500; } .p-menu.cv-about > a.cv-about-more { display: inline; height: auto; padding: 0; border-radius: 0; justify-self: start; margin: -4px 0 12px; font-size: 13px; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: text-decoration-color 150ms ease; } @media (hover: hover) and (pointer: fine) { .p-menu.cv-about > a.cv-about-more:hover { background: none; text-decoration-color: currentColor; } } .cv-about-links { display: flex; flex-wrap: wrap; gap: 6px; } .cv-about-links a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text); font-size: 13px; text-decoration: none; transition: transform 150ms var(--p-ease), background-color 150ms ease; } .cv-about-links a:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .cv-about-links a:hover { background: var(--raise); } } html[data-ui] .cv-avatar[data-signed] .cv-face { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--text); color: #1c1c1c; } html[data-ui] .cv-avatar[data-signed] .cv-face svg { width: 16px; height: 16px; stroke-width: 2; } .gl-who { padding-bottom: 6px !important; } .gl-who h1 { font-size: 20px !important; } .gl-account { display: grid; gap: 12px; padding: 4px 0 18px; border-bottom: 1px solid var(--line); } /* signed out, the sign-in is the whole sheet: nothing below it to divide off */ .gl[data-anon] .gl-account { border-bottom: 0; padding-bottom: 4px; } .gl-account #signinPanel, .gl-account #signinPanel[hidden] { display: grid !important; border: 0; padding: 0; } .gl-account #signinPanel > .btn { min-height: 46px; font-size: 15px; } .gl-account[data-signed] #signinPanel { display: none !important; } .gl-account #account { display: grid; gap: 10px; } .gl-account #accountLabel { display: none; } .gl-account .p-gift { margin: 0; font-size: 14px; color: var(--muted); } .gl-subhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 12px; } .gl-subhead .gl-sec-title { margin: 0; } .gl-subhead .gl-new { height: 34px; padding: 0 12px 0 8px; font-size: 13.5px; } /* ---------- popovers wear the toolbars' glass ---------- */ html[data-ui] :is(.p-menu, .gl, .cv-drawer, .cv-ideas, .p-atelier, .p-acct, .cv-tips) { background: rgba(24, 24, 24, 0.84); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-color: rgba(236, 236, 236, 0.12); } html[data-ui] .gl-head { background: linear-gradient(rgba(28, 28, 28, 0.96) 80%, transparent); } @media (prefers-reduced-transparency: reduce) { html[data-ui] :is(.p-menu, .gl, .cv-drawer, .cv-ideas, .p-atelier, .p-acct, .cv-tips) { background: #1c1c1c; -webkit-backdrop-filter: none; backdrop-filter: none; } } html[data-ui] .gl-head { position: static; background: none; } .gl-account #accountWith { display: none; } /* the heading already says who you're signed in as */ .gl-devnote { margin: -6px 0 14px; font-size: 13px; color: var(--muted); } .gl[data-anon] :is(.gl-grid, .gl-acts, .gl-sec, .gl-subhead) { display: none !important; } .gl[data-anon] .gl-devnote { margin: 14px 0 4px; } html[data-ui] .cv-avatar img.cv-face { display: block; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(236, 236, 236, 0.7); } .gl-who { display: flex !important; align-items: center; justify-content: flex-start !important; gap: 12px; } .gl-marble { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(236, 236, 236, 0.5); flex: none; } .gl-marble[hidden] { display: none; } .gl-whobox { display: grid; gap: 3px; min-width: 0; } .gl-whobox h1 { margin: 0; } .gl-whoami { margin: 0; font: 500 14px/1.2 var(--sans); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gl-whoami[hidden] { display: none; } /* the account's own buttons live in the popover's top right; the engine's account block stays in the page, hidden */ .gl-account #account { display: none !important; } .gl-whoacts { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: none; } .gl-whoacts[hidden] { display: none; } .gl-out { height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: none; color: var(--text); font: 500 13.5px/1 var(--sans); cursor: pointer; transition: transform 150ms var(--p-ease), background-color 150ms ease; } .gl-out:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .gl-out:hover { background: var(--raise); } } .gl-whoacts .gl-more { grid-row: auto; grid-column: auto; } .p-menu > a { display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 9px; color: var(--text); font-size: 14px; text-decoration: none; } @media (hover: hover) and (pointer: fine) { .p-menu > a:hover { background: var(--raise); } } /* the round buttons inside the question bar match the bar's other controls: rounded squares, concentric with it */ html[data-ui] .p-top .p-ask .p-round { border-radius: 11px; } /* tooltips: a name and, when there is one, its key */ .cv-tip { position: fixed; z-index: 80; display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 10px; border-radius: 9px; pointer-events: none; background: rgba(22, 22, 22, 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.28); color: #ececec; font: 500 12.5px/1.2 var(--sans, system-ui, sans-serif); white-space: nowrap; transition: opacity 125ms cubic-bezier(0.23, 1, 0.32, 1), transform 125ms cubic-bezier(0.23, 1, 0.32, 1); } .cv-tip:not(:has(.cv-keys)) { padding-right: 10px; } .cv-tip[data-from="top"] { transform-origin: top center; } .cv-tip[data-from="bottom"] { transform-origin: bottom center; } .cv-tip[data-from="left"] { transform-origin: left center; } .cv-tip[data-from="right"] { transform-origin: right center; } .cv-tip[data-off] { opacity: 0; transform: scale(0.97); } .cv-tip[data-instant] { transition-duration: 0ms; } .cv-keys { display: inline-flex; gap: 3px; } .cv-tip kbd { min-width: 18px; height: 18px; padding: 0 4px; display: inline-grid; place-items: center; border-radius: 5px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06); color: rgba(236, 236, 236, 0.82); font: 500 11px/1 var(--sans, system-ui, sans-serif); } @media (prefers-reduced-motion: reduce) { .cv-tip[data-off] { transform: none; } } /* recording: the pill in the top bar */ html[data-ui] .cv-rec { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 2px 0 10px; } html[data-ui] .cv-rec[hidden] { display: none; } .cv-rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; animation: cv-rec-pulse 1.4s ease-in-out infinite; } @keyframes cv-rec-pulse { 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .cv-rec-dot { animation: none; } } .cv-rec-t { min-width: 3.2ch; font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--text); } .cv-rec-save { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border: 0; border-radius: 9px; background: var(--text); color: #1b1b1b; font: 500 13px/1 var(--sans); cursor: pointer; transition: transform 150ms var(--p-ease); } .cv-rec-save:active { transform: scale(0.97); } .cv-rec-save svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; } html[data-ui] .cv-rec .cv-rec-x { width: 30px; height: 30px; border-radius: 9px; } .cv-rec-x svg { width: 15px; height: 15px; } .cv-row .cv-keys { display: inline-flex; gap: 3px; } .cv-row kbd { min-width: 18px; height: 18px; padding: 0 4px; display: inline-grid; place-items: center; border-radius: 5px; background: rgba(255, 255, 255, 0.08); color: var(--muted); font: 500 11px/1 var(--sans); } /* ---------- kinds of painting (the 2x2) and coins ---------- */ .p-coin { width: 14px; height: 14px; flex: none; } .p-coin .face { fill: var(--gold, #c9a14a); stroke: color-mix(in srgb, var(--gold, #c9a14a), black 25%); stroke-width: 1; } .p-coin .rim { fill: none; stroke: color-mix(in srgb, var(--gold, #c9a14a), black 32%); stroke-width: 1.1; } .p-cell { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 500 13px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: transform 150ms var(--p-ease), background-color 150ms ease, color 150ms ease; } .p-cell[hidden] { display: none; } .p-cell:active { transform: scale(0.97); } .p-cell[aria-expanded="true"] { background: var(--raise); color: var(--text); } @media (hover: hover) and (pointer: fine) { .p-cell:hover { background: var(--raise); color: var(--text); } } .p-cell-c { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; } @media (max-width: 560px) { .p-cell .p-cell-n { display: none; } .p-cell { padding: 0 8px; } } .cv-cells, .cv-wallet { width: min(360px, calc(100vw - 24px)); padding: 14px; gap: 10px; transform-origin: top right; } .cv-cells h2, .cv-wallet h2 { font-variant-numeric: lining-nums tabular-nums; display: flex; align-items: center; gap: 8px; margin: 0; font: 600 16.5px/1.2 var(--serif); color: var(--text); } .cv-wallet h2 .p-coin { width: 18px; height: 18px; } .cv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: stretch; } .cv-col { font: 500 13px/1 var(--sans); color: var(--faint, var(--muted)); padding: 2px 4px; } .cv-cell { display: grid; gap: 4px; align-content: start; text-align: left; min-height: 92px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: none; color: var(--text); cursor: pointer; font: inherit; transition: transform 150ms var(--p-ease), background-color 150ms ease, border-color 150ms ease; } .cv-cell:active { transform: scale(0.97); } .cv-cell[aria-checked="true"] { border-color: var(--text); background: var(--raise); } .cv-cell:disabled { opacity: 0.45; cursor: default; } @media (hover: hover) and (pointer: fine) { .cv-cell:not(:disabled):hover { background: var(--raise); } } .cv-cell-n { font: 500 14px/1.2 var(--sans); } .cv-cell-d { font-size: 12px; line-height: 1.35; color: var(--muted); } .cv-cell-c { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; } .cv-cells-coins { display: inline-flex; align-items: center; gap: 6px; justify-self: start; height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 13px/1 var(--sans); cursor: pointer; } @media (hover: hover) and (pointer: fine) { .cv-cells-coins:hover { background: var(--raise); color: var(--text); } } .cv-wallet p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); } .cv-wallet .cv-need { color: var(--text); } .cv-packs { display: grid; gap: 6px; } .cv-pack { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 12px; } .cv-pack-n { display: inline-flex; align-items: center; gap: 6px; font: 500 15px/1 var(--sans); color: var(--text); font-variant-numeric: tabular-nums; } .cv-pack-p { font: 14px/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; } .p-menu .cv-buy { height: 34px; padding: 0 16px; border-radius: 10px; } .p-menu .cv-buy-signin { height: 40px; justify-content: center; } .cv-wallet .cv-fine { font-size: 12px; color: var(--faint, var(--muted)); } /* ================= phones (≤480px: every phone held upright, Pro Max included): one bar each, nothing off the edge, 44px targets ================= The top row is yours (logo, you, actions, share) with Demos on the right; the question gets the whole second row; the brushes and the colour move to a bar at the bottom, where the thumb is and where they're used most. Sound is in Actions on phones. */ @media (max-width: 480px) { html[data-ui] { --bar-c: 32px; --ask-row: 0px; --dock-h: 72px; } /* one bar across the top; the question hangs under it, over the tray, only while open (no reflow of the tray) */ html[data-ui] .p-top { grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(var(--bar-c) * 2) 0px; grid-template-areas: "left" "ask"; column-gap: 0; } html[data-ui] .p-top > .cv-mid { display: contents; } html[data-ui] .p-top .p-ask { grid-area: ask; align-self: start; height: 52px; margin-top: 4px; padding: 3px 3px 3px 14px; border-radius: 16px; opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none; transition: opacity 180ms var(--p-ease), transform 180ms var(--p-ease), visibility 0s linear 180ms; } html[data-ui][data-ask] .p-top .p-ask { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity 180ms var(--p-ease), transform 180ms var(--p-ease); } html[data-ui] :is(.cv-left) { justify-self: stretch; height: 52px; padding: 0 3px; border-radius: 16px; gap: 4px; } /* the same 4px between buttons as around them */ /* 4px from the outer edge on every side: 52 tall − 44 button = 8, and the 1px border counts */ /* room between buttons: highlights never touch */ /* the demos pocket and the AI toggle sit at the end of the bar */ html[data-ui] .cv-left .cv-demos { margin-left: auto; height: 44px; padding: 0 4px; background: none; position: relative; } html[data-ui] .cv-left :is(.cv-demos, .cv-aitoggle, .cv-icon) { flex: none; } /* only the name gives way */ html[data-ui] .cv-left .cv-aitoggle { width: 44px; } html[data-ui] .cv-left .cv-aitoggle[aria-expanded="true"] { background: rgba(236, 236, 236, 0.14); color: var(--text); } html[data-ui] .cv-left .cv-aitoggle[data-busy] { color: var(--accent, #d9b36a); } html[data-ui] .cv-left .cv-icon { width: 44px; height: 44px; } html[data-ui] .cv-left .cv-sound { display: none; } html[data-ui] .cv-text { padding: 0 8px; } /* the question: a cost chip, the mic, coins, and Paint as an icon */ html[data-ui] .p-top .p-paint { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 12px; } html[data-ui] .p-top .p-paint .p-paint-label { display: none; } html[data-ui] .p-top .p-ask .p-round { width: 40px; height: 44px; } /* the brushes and the colour: a floating bar at the bottom */ html[data-ui] .cv-right { position: fixed; z-index: 6; left: 50%; right: auto; top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); height: 60px; padding: 0 8px; border-radius: 20px; gap: 2px; } html[data-ui] .cv-right .p-toolset { gap: 2px; } html[data-ui] .cv-right .p-tool { width: 44px; height: 44px; } html[data-ui] .cv-right .p-tool.sponge { margin-left: 9px; } html[data-ui] .cv-right .p-tool.sponge::before { left: -6px; top: 12px; bottom: 12px; } html[data-ui] .cv-right .cv-disc { width: 40px; height: 40px; margin: 0 2px 0 8px; box-shadow: 0 0 0 2px rgba(236, 236, 236, 0.85), inset 0 0 0 1px rgba(0, 0, 0, 0.3); } /* playback and captions sit above that bar */ html[data-ui] .p-float { bottom: calc(var(--dock-h) + 10px + env(safe-area-inset-bottom, 0px)); } html[data-ui] .p-cell .p-cell-n { display: none; } html[data-ui] .p-top .p-cell { height: 44px; min-width: 44px; justify-content: center; } } /* popovers that open upward from the bottom bar grow from below */ .p-menu[data-up] { transform-origin: bottom center; } @media (max-width: 380px) { html[data-ui] .cv-left .cv-icon { width: 42px; height: 44px; } html[data-ui] .cv-right .p-tool { width: 42px; } html[data-ui] .cv-demos .cv-demos-text { display: none; } } /* landscape phones: the rail starts under the top bar instead of centring over it */ @media (max-height: 500px) and (orientation: landscape) { html[data-ui] .cv-side { top: calc(var(--canvas-top) + env(safe-area-inset-top, 0px) + 8px); transform: none; } html[data-ui] .cv-side .cv-slider { height: 96px; } } /* the notch and the rounded corners, on the sides too (landscape) */ html[data-ui] .p-top { padding-left: max(var(--g), env(safe-area-inset-left, 0px)); padding-right: max(var(--g), env(safe-area-inset-right, 0px)); } html[data-ui]:not([data-lefty]) .cv-side { left: max(var(--g), env(safe-area-inset-left, 0px)); } /* lined up with the top bar's edge */ html[data-ui][data-lefty] .cv-side { right: max(var(--g), env(safe-area-inset-right, 0px)); } /* a short window (a landscape tablet under Safari's toolbars, ~345px tall): the rail ran past the bottom, cutting off the 3D toggle. Tighter here, and never taller than the room under the top bar (it scrolls rather than clips) */ @media (max-height: 420px) { html[data-ui] .cv-side { gap: 2px; padding: 6px 4px; max-height: calc(100dvh - 76px); overflow-y: auto; scrollbar-width: none; } html[data-ui] .cv-side .cv-slider { height: 64px; } html[data-ui] .cv-side .cv-icon, html[data-ui] .cv-side #rl-tray.in-rail { width: 32px; height: 32px; } } /* the big popovers share one edge on small screens (they still grow from their button) */ @media (max-width: 560px) { html[data-ui] :is(.cv-about, .cv-colours, .cv-cells, .cv-wallet, .cv-actions, .cv-ideas) { left: max(8px, env(safe-area-inset-left, 0px)) !important; right: max(8px, env(safe-area-inset-right, 0px)) !important; width: auto !important; } } /* touch: 44px targets inside popovers, and no keyboard shortcuts on screens without a keyboard */ @media (pointer: coarse) { html[data-ui] :is(.cv-tabs button, .cv-seg button, .cv-idea, .cv-about-links a, .p-float .p-chip) { min-height: 44px; } html[data-ui] .p-menu.cv-about > a.cv-about-more { padding-block: 12px; margin-block: -12px 0; } html[data-ui] .p-float .p-chip { border: 0; padding: 0 16px; font-size: 15px; } } @media not (pointer: fine) { .cv-row .cv-keys { display: none; } } /* the gallery grows from the avatar that opens it */ html[data-ui] .gl { transform-origin: top left; } /* the kind of painting: a glyph, not a coin (the coin means your balance) */ .p-kind { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } .p-kind .p-kind-star { fill: var(--gold, #cda65a); stroke: none; } .p-paint { position: relative; } .p-paint-cost { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: var(--gold, #cda65a); color: #1b1814; font: 600 11px/1 var(--sans); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px rgba(22, 22, 22, 0.9); } /* recent prompts at the top of the ideas list */ .cv-ideas-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cv-ideas-clear { height: 28px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--faint, var(--muted)); font: 12.5px/1 var(--sans); cursor: pointer; } @media (hover: hover) and (pointer: fine) { .cv-ideas-clear:hover { color: var(--text); background: var(--raise); } } @media (pointer: coarse) { .cv-ideas-clear { height: 44px; padding: 0 12px; } } .cv-idea.cv-recent { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; } .cv-idea.cv-recent svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; } .cv-idea.cv-recent span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the one line under the question when coins run out */ .cv-needbar { position: fixed; z-index: 44; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 12px; box-sizing: border-box; background: rgba(22, 22, 22, 0.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 1px rgba(236, 236, 236, 0.1); color: var(--muted); font: 13.5px/1.2 var(--sans); transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1); } .cv-needbar[data-off] { opacity: 0; transform: translateY(-4px); pointer-events: none; transition-duration: 120ms; } .cv-needbar button { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--raise); color: var(--text); font: 500 13.5px/1 var(--sans); cursor: pointer; transition: transform 150ms cubic-bezier(0.23, 1, 0.32, 1), background-color 150ms ease; } .cv-needbar button:active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { .cv-needbar button:hover { background: rgba(236, 236, 236, 0.16); } } @media (pointer: coarse) { .cv-needbar button { height: 36px; } } @media (prefers-reduced-motion: reduce) { .cv-needbar[data-off] { transform: none; } } .cv-ideas-head { flex-basis: 100%; } .cv-ideas > .cv-ideas-label { flex-basis: 100%; } .cv-recent + .cv-ideas-label { margin-top: 8px; } /* ---------- waiting on the AI: ripples crossing the water from the middle of the tray ---------- A quiet state indication while the model thinks (with the seconds in the pill). Fades in only after 0.6 s, so a quick answer never flashes it; each ring eases out as it spreads, like a real ripple; transform and opacity only. Difference blending keeps the rings visible on light and dark grounds. Reduced motion: no rings. */ .tray-wait { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity 300ms ease; mix-blend-mode: difference; } .tray-wait[data-on] { opacity: 1; transition-delay: 600ms; } .tray-wait i { grid-area: 1 / 1; width: min(22vmin, 180px); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.55); transform: scale(0.35); opacity: 0; } .tray-wait[data-on] i { animation: tray-ripple 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite; } .tray-wait[data-on] i:nth-child(2) { animation-delay: 0.8s; animation-duration: 2.7s; } .tray-wait[data-on] i:nth-child(3) { animation-delay: 1.55s; animation-duration: 2.2s; } /* rings on water aren't perfect circles: a fixed turbulence warps each one, and it grows with the ring */ .tray-wait i { filter: url(#tray-wobble); } .tray-wait i:nth-child(2) { rotate: 71deg; } .tray-wait i:nth-child(3) { rotate: 143deg; } /* the tray look ripples its real water instead */ html[data-look-real] .tray-wait { display: none; } @keyframes tray-ripple { 0% { transform: scale(0.35); opacity: 0; } 12% { opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .tray-wait { display: none; } } /* the wake of a moving pin (studio.src.html wakeFrame): difference so a white line shows on any ground */ .tray-wake { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: difference; } /* the desktop version of the first-run sheet: shortcuts instead of finger gestures */ .cv-tips .cv-keyrow { display: flex; align-items: center; gap: 12px; } .cv-tips .cv-keyrow .cv-keys { min-width: 64px; display: inline-flex; gap: 4px; align-items: center; color: var(--faint); } .cv-tips kbd { min-width: 20px; height: 20px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 5px; background: rgba(255, 255, 255, 0.1); color: var(--text); font: 500 12px/1 var(--sans); } /* purchases in the account: date, coins, price, and the Stripe receipt */ .cv-buy-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cv-buy-what { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; } .cv-buy-row a.p-chip { text-decoration: none; flex: none; } .cv-buys-note { margin: 4px 0 0; font-size: 13px; color: var(--muted); } .cv-aitoggle { display: none; } @media (max-width: 480px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) { html[data-ui] .cv-aitoggle { display: inline-grid; place-items: center; } } @media (prefers-reduced-motion: reduce) { html[data-ui] .p-top .p-ask { transform: none !important; } } /* the painting's name: when it doesn't fit, it fades at the edges and glides across (ui.js fitName) */ .cv-name { text-overflow: clip; } .cv-name-t { display: inline-block; white-space: nowrap; } .cv-name[data-cramped] .cv-name-t { visibility: hidden; } /* the slot keeps its room (it flexes), so the next measure can bring it back */ .cv-name[data-over] { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent 100%); } .cv-name[data-over] .cv-name-t { animation: cv-name-glide var(--glide, 8s) linear infinite; } @keyframes cv-name-glide { 0%, 20% { transform: translateX(0); } 50%, 70% { transform: translateX(var(--over)); } 100% { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .cv-name[data-over] .cv-name-t { animation: none; } } /* the send button, before anything is typed: the same shape, quiet, so it doesn't look like it's waiting to be pressed */ .p-paint[data-empty] { background: rgba(236, 236, 236, 0.1); color: var(--muted); box-shadow: none; } @media (hover: hover) and (pointer: fine) { .p-paint[data-empty]:hover { background: rgba(236, 236, 236, 0.16); } } .p-paint { transition: background-color 150ms ease, color 150ms ease, transform 150ms var(--p-ease); } html[data-ui] .p-float #rail .caption { font-size: 16px; line-height: 1.35; color: var(--text); } html[data-ui] .p-float:has(#rail > [data-state="in"]) { width: min(560px, calc(100vw - var(--g) * 2)); } /* the painting on its way into the profile button (ui.js tuckAway) */ .cv-tuck { position: fixed; z-index: 60; pointer-events: none; object-fit: cover; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.55); transform-origin: 50% 50%; will-change: transform, opacity; } /* concentric corners on phones: a button 4px inside a 16px-radius bar gets a 12px radius */ @media (max-width: 480px) { html[data-ui] .cv-left :is(.cv-icon, .cv-aitoggle, .cv-demos) { border-radius: 12px; } html[data-ui] .p-top .p-paint { border-radius: 12px; } } /* ---------- phones: everything on one grid. The bars at the top, the card and the brush bar at the bottom all span the same width (8px from the screen's edges), with 16px corners and a 4px inset, so their edges and corners line up ---------- */ @media (max-width: 480px) { html[data-ui] .cv-right { left: max(var(--g), env(safe-area-inset-left, 0px)) !important; right: max(var(--g), env(safe-area-inset-right, 0px)) !important; transform: none !important; width: auto !important; justify-self: stretch !important; /* a fixed box in a grid still obeys justify-self: end shrank it */ height: 60px; padding: 0 7px; border-radius: 16px; justify-content: space-between; } html[data-ui] .p-float { left: max(var(--g), env(safe-area-inset-left, 0px)); right: max(var(--g), env(safe-area-inset-right, 0px)); transform: none; width: auto !important; max-width: none; padding: 3px; border-radius: 16px; } html[data-ui] .cv-right .p-toolset { flex: 1; justify-content: space-between; } html[data-ui] .p-float .p-chip { height: 44px; min-height: 44px; border-radius: 12px; background: rgba(236, 236, 236, 0.08); } /* one Stop: the card's. The question bar's button doesn't turn into a second one */ html[data-ui] .p-top .p-paint[data-mode="stop"] { display: none; } } /* ---------- the performance card (ui.js): one row with what's happening and its buttons, the caption below ---------- */ html[data-ui] .p-float #rail { display: none; } /* its pill and caption are read into the card */ .pcard { display: grid; gap: 0; min-width: 0; } .pcard[hidden] { display: none; } .pcard-row { display: flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; } .pcard-lead { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding-left: 10px; font: 500 14px/1.3 var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pcard-lead:empty { display: none; } .pcard-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } /* while the apprentice thinks, the dot sends out the same rings the tray does (same period and spacing: .tray-wait) */ .pcard-dot { position: relative; } .pcard-dot[data-wait]::before, .pcard-dot[data-wait]::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--muted); animation: pcard-dot-ring 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite; opacity: 0; } .pcard-dot[data-wait]::before { animation-delay: 0.8s; } .pcard-dot[data-wait]::after { animation-delay: 1.6s; } @keyframes pcard-dot-ring { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(3.4); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pcard-dot[data-wait]::before, .pcard-dot[data-wait]::after { animation: none; } } .pcard-dot[hidden] { display: none; } .pcard-lead span { overflow: hidden; text-overflow: ellipsis; } .pcard-acts { flex: none; display: flex; gap: 6px; margin-left: auto; } .pcard-acts:not(:has(> :not([hidden]))) { display: none; } .pcard-acts .p-chip { height: 44px; border-radius: 12px; border: 0; background: rgba(236, 236, 236, 0.08); padding: 0 14px; } @media (hover: hover) and (pointer: fine) { .pcard-acts .p-chip:hover { background: rgba(236, 236, 236, 0.14); } } .pcard-cap { margin: 0; padding: 4px 10px 8px; font: 500 16px/1.35 var(--sans); color: var(--text); text-wrap: pretty; } .pcard-cap[hidden] { display: none; } html[data-ui] .p-float { width: min(560px, calc(100vw - var(--g) * 2)); padding: 4px; border-radius: 18px; } /* a card with only buttons in it shrinks around them, centred, instead of an empty stretch on the left */ html[data-ui] .p-float:has(.pcard-tick:empty) { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: max-content !important; } .pcard-lead:has(> .pcard-tick:empty) { display: none; } @media (max-width: 480px) { /* the brush bar on the same rhythm: 4px round the edge, buttons spread evenly, no extra margins on the wipe or the colour */ html[data-ui] .cv-right { padding: 0 7px !important; height: 52px !important; } html[data-ui] .cv-right .p-tool.sponge { margin-left: 0 !important; } html[data-ui] .cv-right .p-tool.sponge::before { display: none; } html[data-ui] .cv-right .cv-disc { margin: 0 !important; width: 40px; height: 40px; border-radius: 12px; } html[data-ui] .cv-right .p-toolset { display: contents; } /* brushes, wipe and colour share one even spacing */ html[data-ui] .cv-right { gap: 0; justify-content: space-between; padding: 0 4px !important; } html[data-ui] .p-float { bottom: calc(52px + 8px + 8px + env(safe-area-inset-bottom, 0px)) !important; } } @media (max-width: 480px) { /* the name takes the spare room, so every gap in the top bar is the same 4px */ html[data-ui] .cv-left .cv-name { flex: 1 1 auto; text-align: left; } html[data-ui] .cv-left .cv-demos { margin-left: 0; } } @media (max-width: 480px) { /* every gap 4px like the top bar: the brushes share the width instead of spacing out */ html[data-ui] .cv-right { gap: 4px !important; padding: 0 3px !important; } html[data-ui] .cv-right :is(.p-tool, .cv-disc) { flex: 1 1 0; width: auto !important; height: 44px !important; border-radius: 12px; } html[data-ui] .cv-right .cv-disc { flex: 0 0 44px; } } /* the account header: just who you are, a size down */ .gl-who h1 { font-size: 17px !important; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* account tabs: Paintings / AI / Links / Purchases, one section at a time */ .gl-tabs { display: flex; gap: 4px; padding: 3px; margin: 14px 0 10px; border-radius: 12px; background: rgba(236, 236, 236, 0.06); overflow-x: auto; scrollbar-width: none; } .gl-tabs[hidden] { display: none; } .gl-tab { flex: 1 0 auto; height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 500 14px/1 var(--sans); cursor: pointer; transition: background-color 150ms ease, color 150ms ease; touch-action: manipulation; } .gl-tab[hidden] { display: none; } .gl-tab[aria-selected="true"] { background: rgba(236, 236, 236, 0.14); color: var(--text); } @media (hover: hover) and (pointer: fine) { .gl-tab:not([aria-selected="true"]):hover { color: var(--text); } } .gl[data-tab]:not([data-tab="paint"]) :is(.gl-subhead, .gl-grid, .gl-note, .gl-devnote) { display: none !important; } .gl[data-tab]:not([data-tab="ai"]) .gl-perf-sec, .gl[data-tab]:not([data-tab="links"]) .cv-links:not(.cv-buys), .gl[data-tab]:not([data-tab="buys"]) .cv-buys { display: none !important; } .gl[data-tab] :is(.cv-links, .cv-buys, .gl-perf-sec) { margin-top: 0; } .gl[data-tab] :is(.cv-links, .cv-buys, .gl-perf-sec) > .gl-sec-title { display: none; } /* the tab says it */ /* phones, one rhythm: every bar and card 8px from the screen's edges and 8px apart; 4px inside (3px padding + 1px border); 16px corners outside, 12px inside */ @media (max-width: 480px) { html[data-ui] .p-float { gap: 0 !important; padding: 3px !important; border-radius: 16px !important; bottom: calc(8px + 52px + 8px + env(safe-area-inset-bottom, 0px)) !important; } html[data-ui] .p-float .p-dockbar:not(:has(> :not(.p-under):not([hidden]))):has(> .p-under[data-empty]) { display: none; } html[data-ui] .cv-right { bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; } .pcard-cap { padding: 4px 8px 6px; } .pcard-lead { padding-left: 8px; } } /* every width: the card is 4px inside (3px padding + 1px border), 16px corners, no empty rows under its content */ html[data-ui] .p-float { gap: 0 !important; padding: 3px !important; border-radius: 16px !important; } html[data-ui] .p-float .p-dockbar:not(:has(> :not(.p-under):not([hidden]))):has(> .p-under[data-empty]) { display: none; } /* the painting kind is an icon at every width (its name is in the tooltip and the picker) */ html[data-ui] .p-cell .p-cell-n { display: none; } html[data-ui] .p-top .p-cell { width: 40px; min-width: 40px; padding: 0; justify-content: center; } /* the Terms link in the coins fine print: same quiet grey, underlined */ .cv-wallet .cv-fine a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .cv-wallet .cv-fine a:hover { color: var(--text, #e9dfc8); } } /* the kind picker: coins on the left, the measured wait before the first stroke on the right, one quiet line */ .cv-cell-c { justify-content: space-between; align-self: stretch; } .cv-cell-coins { display: inline-flex; align-items: center; gap: 4px; } .cv-cell-t { font: 400 12px/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .cv-cell { grid-template-rows: auto auto 1fr; } .cv-cell-c { align-self: end; } .cv-cell-t { display: inline-flex; align-items: center; gap: 4px; } .cv-cell-t svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* recording: one light button in the bar, a red square and the running time; the separate Recording badge is gone */ html[data-ui] #recDot { display: none !important; } html[data-ui] .cv-rec { padding: 0; } html[data-ui] .cv-rec-save { gap: 7px; width: 64px; min-width: 64px; padding: 0; justify-content: center; } .cv-rec-sq { flex: none; width: 9px; height: 9px; border-radius: 2.5px; background: #e5484d; animation: cv-rec-pulse 1.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .cv-rec-sq { animation: none; } } .cv-rec-save .cv-rec-t { min-width: 0; color: inherit; font-size: 14px; } .cv-rec-save:disabled { opacity: 0.55; cursor: default; transition: opacity 200ms ease; } .cv-rec-save:disabled .cv-rec-sq { animation: none; opacity: 0.5; } /* the stop-and-save pill is one of the bar's buttons: the same height and corners as its neighbours (40px in the wide bar, 44px in the phone bars), not a smaller chip, nor one stretched by the touch minimum; on touch an invisible band above and below brings its target to 44px in the wide bar too */ html[data-ui] :is(.cv-rec, .cv-rec-save) { height: 40px; } html[data-ui] .cv-rec-save { border-radius: 12px; position: relative; } @media (pointer: coarse) { html[data-ui] .cv-rec-save::before { content: ''; position: absolute; inset: -2px 0; } } @media (max-width: 480px) { html[data-ui] :is(.cv-rec, .cv-rec-save) { height: 44px; } } @media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) { html[data-ui] :is(.cv-rec, .cv-rec-save) { height: 44px; } } /* the performance card, one line forever: the caption rolls in where the status was (the lab's "One line") */ .pcard-lead { overflow: visible; } .pcard-tick { position: relative; flex: 1 1 auto; min-width: 0; height: 44px; overflow: hidden; } .pcard-tick[data-over] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .pcard-tick > span { position: absolute; left: 0; top: 0; height: 44px; display: flex; align-items: center; white-space: nowrap; will-change: transform; } .pcard-tick .tick-run { white-space: pre; } .pcard-tick > span[data-cap] { color: var(--text); font-size: 16px; } .pcard-tick > .tick-in { animation: pcard-tick-in 260ms var(--p-ease); } .pcard-tick > .tick-out { animation: pcard-tick-out 180ms ease forwards; } /* a counter in the line: only its digits roll, the words stay put */ .pcard-tick .tick-run { line-height: 1.3; } /* the digits' boxes sit at the top of the line with the line's own height, so their text lands on the same baseline as the words (WebKit took the rolling box's baseline from the wrong line and lifted the number, as on iPhone) */ .pcard-tick .tick-num { display: inline-block; position: relative; vertical-align: top; line-height: inherit; font-variant-numeric: tabular-nums; } .pcard-tick .tick-num > span { display: inline-block; vertical-align: top; line-height: inherit; } .pcard-tick .tick-num > .n-in { animation: pcard-num-in 220ms var(--p-ease); } .pcard-tick .tick-num > .n-out { position: absolute; left: 0; top: 0; animation: pcard-num-out 160ms ease forwards; } @keyframes pcard-num-in { from { opacity: 0; transform: translateY(0.55em); filter: blur(1.5px); } } @keyframes pcard-num-out { to { opacity: 0; transform: translateY(-0.55em); filter: blur(1.5px); } } @keyframes pcard-tick-in { from { opacity: 0; transform: translateY(14px); filter: blur(2px); } } @keyframes pcard-tick-out { to { opacity: 0; transform: translateY(-14px); filter: blur(2px); } } html[data-ui] .p-float:has(.pcard-tick:empty) .pcard-lead { display: none; } /* Stop, Again and New painting share one width, so swapping them never resizes the card */ .pcard-acts .p-chip { min-width: 104px; justify-content: center; } .pcard-cap { display: none !important; } .pcard-tick[data-moving] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 28px), transparent); } /* invite a friend, under the coin packs: a quiet block, one button */ .cv-invite { display: grid; gap: 4px; margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; } .cv-invite-t { margin: 0; font: 500 14px/1.3 var(--sans); color: var(--text); } .cv-invite-d { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); } .cv-invite-b { margin-top: 6px; justify-self: start; height: 40px; border: 0; border-radius: 10px; background: rgba(236, 236, 236, 0.10); padding: 0 14px; } @media (hover: hover) and (pointer: fine) { .cv-invite-b:hover { background: rgba(236, 236, 236, 0.16); } } .cv-invite-n { margin: 2px 0 0; font-size: 12px; color: var(--muted); } /* the shared painting's bar, in the studio's own rhythm: 3px inside + 1px border, 16px corners outside, 12px inside, 44px targets. Skip / watch again is an icon; the replay's progress is a hairline along the bar's foot */ html[data-share] .cv-sharebar { gap: 6px; padding: 3px; border-radius: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 0 0 1px var(--line-strong), 0 24px 60px -24px rgba(0, 0, 0, 0.75); overflow: hidden; } html[data-share] .cv-sharebar :is(.cv-own, .cv-watch) { height: 44px; border-radius: 12px; border: 0; display: inline-flex; align-items: center; justify-content: center; font: 500 15px/1 var(--sans); white-space: nowrap; text-decoration: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; } html[data-share] .cv-sharebar .p-chip.cv-own { padding: 0 16px; background: rgba(236, 236, 236, 0.08); color: var(--text); } html[data-share] .cv-sharebar .p-paint.cv-own { padding: 0 18px; background: var(--text); color: var(--ground); } html[data-share] .cv-sharebar .cv-watch { width: 44px; padding: 0; background: rgba(236, 236, 236, 0.08); color: var(--text); gap: 0; } html[data-share] .cv-sharebar .cv-watch::before { display: none; } html[data-share] .cv-sharebar :is(.cv-own, .cv-watch):active { transform: scale(0.97); } @media (hover: hover) and (pointer: fine) { html[data-share] .cv-sharebar :is(.p-chip.cv-own, .cv-watch):hover { background: rgba(236, 236, 236, 0.14); } } .cv-sharebar-prog { position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px; background: rgba(236, 236, 236, 0.5); transform: scaleX(0); transform-origin: left center; transition: transform 100ms linear, opacity 200ms ease; opacity: 0; pointer-events: none; } .cv-sharebar[data-playing] .cv-sharebar-prog { opacity: 1; } /* phones: one bar edge to edge, 8px from the screen, the two actions sharing the width */ @media (max-width: 480px) { html[data-share] .cv-sharebar { left: 8px; right: 8px; transform: none; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); } html[data-share] .cv-sharebar .cv-own { flex: 1 1 0; min-width: 0; padding: 0 10px !important; } } /* credits in the About popover: a row that opens a short list. The height eases open (grid rows 0fr to 1fr) with a strong ease-out; it's opened rarely, so it gets a real (short) motion, and the arrow turns with it */ .cv-cred { margin: 14px 0 0; border-top: 1px solid var(--line); } /* the card's last row, under the maker's links */ .cv-cred-t { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; padding: 0; border: 0; background: none; color: var(--text); font: 500 14px/1 var(--sans); cursor: pointer; touch-action: manipulation; } .cv-cred-t svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); transition: transform 220ms var(--p-ease); } .cv-cred[data-open] .cv-cred-t svg { transform: rotate(90deg); } .cv-cred-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms var(--p-ease); } .cv-cred-b > div { overflow: hidden; min-height: 0; opacity: 0; transition: opacity 160ms ease; } .cv-cred[data-open] .cv-cred-b { grid-template-rows: 1fr; } .cv-cred[data-open] .cv-cred-b > div { opacity: 1; transition: opacity 200ms ease 60ms; } .cv-cred ul { margin: 2px 0 8px; padding-left: 1.1em; } .cv-cred li { margin: 0 0 6px; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; } .cv-cred li::marker { color: var(--faint); } .cv-cred-b a { display: inline-block; margin: 0 0 12px; font-size: 13px; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .cv-cred-b a:hover { text-decoration-color: currentColor; } } /* a tall About (credits open, a short phone) scrolls inside itself instead of running off the screen */ .cv-about { max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain; } @media (prefers-reduced-motion: reduce) { .cv-cred-b, .cv-cred-b > div, .cv-cred-t svg { transition: none; } } /* Google's button in its Neutral theme (one of the three its guidelines allow: fill #F2F2F2, no stroke, text #1F1F1F): light like the studio's other lead buttons, rather than a black slab in a grey panel */ .gsi-btn { background: #f2f2f2; border-color: transparent; color: #1f1f1f; transition: transform 150ms var(--p-ease), background-color 150ms ease; } @media (hover: hover) and (pointer: fine) { .gsi-btn:hover { background: #e4e4e4; } } /* Google's 8% state layer of #1F1F1F */ .gsi-btn:focus-visible { outline-color: #f2f2f2; } /* wide screens: the name has a fixed slot (up to the longest it shows before it fades and glides), so renaming never pushes Demos and the question sideways; a short name just leaves the rest of its slot empty */ @media (min-width: 1180px) { html[data-ui] .cv-left .cv-name { flex: 0 1 auto; width: auto; max-width: min(20vw, 240px); justify-content: flex-start; text-align: left; } } /* very narrow screens (a phone with Display Zoom or a large text size, where Chrome zooms the page): below 360px nothing has a fixed width to spare, so the bars' items share the room instead of running off the edge. The name steps aside (it's in the gallery, and renaming is there too) */ @media (max-width: 359px) { html[data-ui] .cv-left .cv-name { display: none !important; } html[data-ui] .cv-left { gap: 0; min-width: 0; } html[data-ui] .cv-left > * { flex-shrink: 1; min-width: 0; } html[data-ui] .cv-left :is(.cv-icon, .cv-aitoggle) { width: min(30px, 9vw) !important; } html[data-ui] .cv-left .cv-demos { padding: 0 4px !important; } html[data-ui] .cv-left .cv-pocket { transform: scale(0.84); transform-origin: center; } html[data-ui] .cv-right { min-width: 0; } html[data-ui] .cv-right .p-toolset { flex: 1 1 auto; min-width: 0; } html[data-ui] .cv-right .p-tool { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; } html[data-ui] .cv-right .cv-disc { flex: none; width: min(36px, 11vw) !important; height: min(36px, 11vw) !important; } } /* the first-visit note under Demos: a light pill (it has to be seen against the dark bar) with a small arrow at the button's centre (--ax). Enters from its arrow: a touch smaller and higher, 220 ms strong ease-out; leaves in 150 ms */ .cv-hint { position: fixed; z-index: 45; top: 0; left: 0; display: block; padding: 0; border: 0; background: none; cursor: pointer; color: #1c1b19; font: 600 14px/1 var(--sans); -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; transform-origin: var(--ax, 50%) 0; transition: opacity 220ms cubic-bezier(0.23, 1, 0.32, 1), transform 220ms cubic-bezier(0.23, 1, 0.32, 1); } .cv-hint span { position: relative; display: block; padding: 11px 15px; border-radius: 12px; background: #f1ede3; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.2); white-space: nowrap; } .cv-hint span::before { content: ""; position: absolute; top: -5px; left: calc(var(--ax, 50%) - 6px); width: 12px; height: 12px; border-radius: 2px; background: #f1ede3; transform: rotate(45deg); } .cv-hint::after { content: ""; position: absolute; inset: -6px; } /* a bigger tap target than the pill */ .cv-hint:active span { transform: scale(0.97); } .cv-hint span { transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); } .cv-hint[data-off] { opacity: 0; transform: translateY(-4px) scale(0.96); pointer-events: none; transition-duration: 150ms; } .cv-demos[data-hint] .cv-pocket img:nth-child(1) { transform: translate(-11px, -3px) rotate(-20deg); } .cv-demos[data-hint] .cv-pocket img:nth-child(2) { transform: translate(0, -7px); } .cv-demos[data-hint] .cv-pocket img:nth-child(3) { transform: translate(11px, -3px) rotate(20deg); } @media (prefers-reduced-motion: reduce) { .cv-hint, .cv-hint[data-off] { transform: none; } } html[data-lab] .cv-hint { display: none !important; } /* phones held sideways: height is what's short (two rows of bars took a third of it). One row: you, Demos and the AI toggle on the left, the brushes on the right; the question drops down under it only when asked for, as upright phones do. The tray gets the rest */ @media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) { html[data-ui] { --bar-c: 30px; --ask-row: 0px; } html[data-ui] .p-top { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: calc(var(--bar-c) * 2) 0px; grid-template-areas: "left right" "ask ask"; column-gap: 8px; } html[data-ui] .p-top > .cv-mid { display: contents; } html[data-ui] .p-top .p-ask { grid-area: ask; align-self: start; justify-self: center; width: min(100%, 640px); height: 52px; margin-top: 4px; padding: 3px 3px 3px 14px; border-radius: 16px; opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none; transition: opacity 180ms var(--p-ease), transform 180ms var(--p-ease), visibility 0s linear 180ms; } html[data-ui][data-ask] .p-top .p-ask { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity 180ms var(--p-ease), transform 180ms var(--p-ease); } html[data-ui] .cv-left { height: 52px; padding: 0 3px; border-radius: 16px; gap: 4px; min-width: 0; } html[data-ui] .cv-right { height: 52px; } html[data-ui] .cv-left .cv-demos { margin-left: auto; height: 44px; padding: 0 4px; background: none; } html[data-ui] .cv-left .cv-demos .cv-demos-text { display: none; } html[data-ui] .cv-left :is(.cv-demos, .cv-aitoggle, .cv-icon) { flex: none; } html[data-ui] .cv-left :is(.cv-aitoggle, .cv-icon) { width: 44px; height: 44px; } html[data-ui] .cv-left .cv-aitoggle[aria-expanded="true"] { background: rgba(236, 236, 236, 0.14); color: var(--text); } html[data-ui] .cv-left .cv-sound { display: none; } } /* Settings: the look slider, flat to realistic */ .cv-row.cv-look { display: grid; grid-template-columns: 1fr; justify-items: stretch; gap: 8px; padding: 10px 12px; height: auto; cursor: default; } .cv-look-ends { width: 100%; } .cv-look-t { color: var(--text); font-size: 14px; } .cv-look-ends { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; } .cv-look-ends small { color: var(--muted); font-size: 12.5px; } .cv-look input[type=range] { width: 100%; accent-color: var(--text); height: 28px; margin: 0; touch-action: pan-y; cursor: pointer; } /* the palette strip shows a thin scrollbar where there's a mouse (Windows, desktops): it can be seen and grabbed */ @media (hover: hover) and (pointer: fine) { .p-pals { scrollbar-width: thin; scrollbar-color: rgba(236,236,236,0.25) transparent; } .p-pals::-webkit-scrollbar { display: block; height: 6px; } .p-pals::-webkit-scrollbar-thumb { background: rgba(236,236,236,0.25); border-radius: 3px; } } .p-row[data-review] h3 { color: var(--accent, #d9b36a); } /* ui.js fitBar measures the bar: "1" one row, "c" one compact row, "2" the question on its own row. Phones keep their own layout (no data-bar). These win over the width breakpoints above. */ html[data-ui]:is([data-bar="1"], [data-bar="c"]) { --ask-row: 0px; } html[data-ui]:is([data-bar="1"], [data-bar="c"]) .p-top { grid-template-rows: calc(var(--bar-c) * 2); grid-template-areas: "left ask right"; column-gap: 16px; } html[data-ui]:is([data-bar="1"], [data-bar="c"]) .p-top > .cv-mid { width: min(100%, 720px); align-self: center; } html[data-ui][data-bar="c"] .p-top { column-gap: 12px; } html[data-ui][data-bar="c"] .p-top > .cv-mid { gap: 6px; } html[data-ui][data-bar="c"] .p-top .p-ask { padding-left: 12px; } html[data-ui][data-bar="c"] .cv-mid .cv-demos { padding: 0 6px; gap: 0; } html[data-ui][data-bar="c"] .cv-mid .cv-demos .cv-demos-text { display: none; } html[data-ui][data-bar="c"] .p-top .p-paint .p-paint-label { display: none; } html[data-ui][data-bar="c"] .p-top .p-paint { padding: 0 12px; } html[data-ui][data-bar="2"] { --ask-row: 60px; } html[data-ui][data-bar="2"] .p-top { grid-template-rows: calc(var(--bar-c) * 2) var(--ask-row); grid-template-areas: "left . right" "ask ask ask"; column-gap: 0; } html[data-ui][data-bar="2"] .p-top > .cv-mid { width: 100%; align-self: start; } /* tablets (ui.js placeBar/fitBar, data-tablet): Demos and a "Paint with AI" toggle in the middle of the bar; the ask row drops down under the bar only while it's open (data-ask), over the tray, so the tray never reflows. t1: one row with the toggle's label; tc: one row, Demos as its thumbnails and the toggle as its icon; t2: the two buttons get a row of their own under the bar. */ html[data-ui][data-tablet] { --ask-row: 0px; } html[data-ui][data-tablet] .p-top { grid-template-rows: calc(var(--bar-c) * 2) 0px; grid-template-areas: "left mid right" "drop drop drop"; column-gap: 16px; } html[data-ui][data-tablet] .p-top > .cv-mid { grid-area: mid; justify-self: center; align-self: center; width: auto; gap: 8px; } html[data-ui][data-tablet][data-bar="t2"] { --ask-row: 60px; } html[data-ui][data-tablet][data-bar="t2"] .p-top { grid-template-rows: calc(var(--bar-c) * 2) var(--ask-row) 0px; grid-template-areas: "left . right" "mid mid mid" "drop drop drop"; column-gap: 0; } html[data-ui][data-tablet][data-bar="t2"] .p-top > .cv-mid { align-self: start; } html[data-ui][data-tablet] .cv-aitoggle { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 16px; box-sizing: border-box; background: rgba(22, 22, 22, 0.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(236, 236, 236, 0.10); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.7); color: var(--text); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease; } html[data-ui][data-tablet] .cv-aitoggle svg { width: 22px; height: 22px; } html[data-ui][data-tablet] .cv-aitoggle:active { transform: scale(0.97); } html[data-ui][data-tablet] .cv-aitoggle[aria-expanded="true"] { background: rgba(62, 62, 62, 0.92); border-color: rgba(236, 236, 236, 0.22); } html[data-ui][data-tablet] .cv-aitoggle[data-busy] { color: var(--accent, #d9b36a); } /* tight (tc): Demos as its thumbnails, the sound button left to the Actions menu (its Music switch), closer gaps */ html[data-ui][data-tablet][data-bar="tc"] .p-top { column-gap: 10px; } html[data-ui][data-tablet][data-bar="tc"] .p-top > .cv-mid { gap: 6px; } html[data-ui][data-tablet][data-bar="tc"] .p-toolset .p-sep { margin: 0 2px; } html[data-ui][data-tablet][data-bar="tc"] .cv-left .cv-sound { display: none; } html[data-ui][data-tablet][data-bar="tc"] .cv-mid .cv-demos { padding: 0 6px; gap: 0; } html[data-ui][data-tablet][data-bar="tc"] .cv-mid .cv-demos .cv-demos-text { display: none; } /* the ask row: hangs under the bar, eases in from 6px above (ease-out, 180ms), leaves faster; reduced motion: fade only */ html[data-ui][data-tablet] .p-top > .p-ask { grid-area: drop; align-self: start; justify-self: center; width: min(100%, 720px); margin-top: 4px; opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none; transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms; } html[data-ui][data-tablet][data-ask] .p-top > .p-ask { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity 180ms cubic-bezier(0.23, 1, 0.32, 1), transform 180ms cubic-bezier(0.23, 1, 0.32, 1); } @media (prefers-reduced-motion: reduce) { html[data-ui][data-tablet] .p-top > .p-ask { transform: none !important; } } /* the colour menu is open (or just closed): the ask box takes no taps (ui.js colourGuard) */ html[data-colours] .p-ask { pointer-events: none !important; } /* the brushes in groups (ui.js): drop, sprinkle and their colour | stylus, comb, swirl | sponge. The line between the first two groups matches the sponge's */ html[data-ui] .p-toolset .p-sep { flex: none; align-self: center; width: 1px; height: 20px; margin: 0 5px; background: rgba(236, 236, 236, 0.14); } html[data-ui] .p-toolset .cv-disc { flex: none; margin: 0 2px 0 4px; } html[data-ui] .cv-right .p-tool.sponge { margin-left: 0 !important; } html[data-ui] .cv-right .p-tool.sponge::before { display: none; } @media (max-width: 480px) { html[data-ui] .p-toolset .p-sep { height: 24px; margin: 0; } html[data-ui] .cv-right .p-toolset .cv-disc { flex: none; width: 40px !important; height: 40px; margin: 0 !important; } }