/* ============================================================================ design-oryzo.css — the ORYZO editorial design system, retrofitted. Source: the "Darkroom product editorial" system (its DESIGN.md is not in this repo — the LIVE authority for what is and isn't allowed is the RULES list on /admin → Design, backend/design-tokens.js; when this header and that page disagree, the page wins). Everything structural from that system is applied here; the palette and the typefaces are NOT — rendr keeps its own dark/purple scheme and keeps Alte Haas Grotesk + IBM Plex Mono. ORYZO's cream/walnut/ember colours and Halyard Display appear nowhere below. What the system actually mandates, minus colour and type family: 1. FLAT — no drop shadows. Depth is a two-step opaque surface stack plus hairline borders. ("The system rejects shadow-based elevation entirely.") 2. RADIUS — a three-value vocabulary and nothing else: 12px containers (and textareas) · 36px filled pill · 22.5px ghost, chips AND single-line inputs. Never below 12px on a container. (ORYZO's 0px input is retired — see --oz-input below.) 3. DIVIDERS — 1px dashed hairlines, never solid, never thicker than 2px. 4. TYPE — uppercase weight 500 is the default UI voice; mixed-case weight 400 is reserved for body copy. Display leading 0.9. No negative tracking at any size. 5. ALIGNMENT — headings and body copy are always left-aligned. LOAD LAST. This sheet is appended after /api/design-tokens.css in index.html. It leans on !important because the seven sheets below it carry 556 !important declarations and 991 ID-scoped selectors; a normal declaration here would lose to `#cpgRoot .cpg-send-btn` no matter what order it loads in. An !important normal-vs-important comparison ignores specificity, so one mechanism clears the ID selectors AND the ~318 JS-written inline styles at once. DELIBERATELY NOT TOUCHED — box-shadow is doing four unrelated jobs in this codebase, and only one of them is elevation: · :focus / :focus-visible rings (`inset 0 0 0 2px`) — every input in the creators, scene editor and admin panels is `border:none; outline:none` and the ring IS the focus indicator. Removing them is a WCAG 2.4.7 fail. · selection / .is-active / .is-current rings (`0 0 0 2px #B18CFF`) — state, not depth. Which frame, take, shot, style and camera angle is selected. · .is-dropping / .is-drop-target rings — drag-and-drop target feedback. · `inset 0 0 0 1px` hairlines standing in for borders on elements that were given `border:none` precisely because the shadow was carrying the edge. So there is no blanket box-shadow sweep here. Elevation is removed at the four TOKENS that carry it, and the handful of surfaces that relied on those tokens for their only edge get a real border below. Everything else survives. ========================================================================== */ /* --------------------------------------------------------------------------- 0 · TOKENS Own namespace (--oz-*) so nothing here collides with the admin-editable token sheet. The five radius tokens that DO come from /admin → Design are re-pointed on `body` rather than :root — a narrower selector, so it reads as a deliberate exception rather than silently shadowing the admin control. ------------------------------------------------------------------------- */ :root { --oz-card: 12px; /* containers, cards, panels, modals, menus, media */ /* Founder: "the search bar isn't rounded, and the voice selector isn't rounded either… it needs to be very cohesive." A 34px-tall square search well standing next to a 34px-tall Library/Studio/Tools pill was the most visible seam in the app. Single-line controls take the SAME radius as the buttons and chips they share a row with; only the tall boxes below opt out (a textarea is a container, and takes the container radius). */ --oz-input: var(--oz-ghost); /* inputs, selects, search wells */ --oz-pill: 36px; /* the filled CTA */ --oz-ghost: 22.5px; /* outlined / ghost / icon buttons */ --oz-hair: rgba(255, 255, 255, .12); /* hairline border — Cork Border's role */ --oz-hair-soft: rgba(255, 255, 255, .08); --oz-dash: rgba(255, 255, 255, .16); /* dashed section separator */ } body { --rail-radius: var(--oz-card); --toast-radius: var(--oz-card); --iconbtn-radius: var(--oz-ghost); --scrub-radius: var(--oz-card); --mention-radius: var(--oz-card); } /* =========================================================================== 1 · FLAT ELEVATION "Depth is achieved through a two-step surface stack. There are no blur, no offset, no opacity-based shadows — only a 1–2 value luminance step." Four tokens carry every ambient drop in the app. Neutralising them here removes elevation everywhere without touching a single rule, and without catching the focus / selection / drag / hairline shadows in the blast radius. Each is set to a no-op shadow rather than `none`, because several rules compose them into a list (`box-shadow: var(--glass-shadow), inset 0 1px 0 …`) and `none` inside a shadow list invalidates the whole declaration — which would delete the inset light edge too. ========================================================================= */ :root { /* Drop removed; the inset light edge each token also carried is preserved. */ --glass-shadow: 0 0 0 0 transparent; --glass-shadow-deep: inset 0 1px 0 rgba(255, 255, 255, .14); --btn-purple-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); /* --glass-inset is edge-only already — left alone. */ } /* The two-step surface stack replaces the translucent-over-blur depth model. Same hue, raised to opaque: at 40% over the body gradient these panels were tinting with whatever passed beneath them, and with the drop gone they had nothing left to separate them from the backdrop. Blur does not help — it blurs, it does not raise contrast. */ :root { --glass-bg: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)), linear-gradient(0deg, #131316, #131316); /* surface 1 */ --glass-bg-strong: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), linear-gradient(0deg, #1b1b1f, #1b1b1f); /* surface 2 */ } /* Surfaces whose ONLY outer edge was `box-shadow: var(--glass-shadow)`. With the drop gone they need the hairline the system calls for. */ .ss-shell-rail, html body .ss-shell-rail.ss-shell-rail--mini, .ss-shell-rail.ss-shell-rail--library, .ssd-docmain, body.ss-view-editor .ssd-shell--docs .ssd-margin, body.ss-center-element #ssdSceneModal .card-modal.ssd-scene-modal, body.ss-center-element .ssd-se-side { border: 1px solid var(--oz-hair-soft) !important; } /* Same, for the --glass-shadow-deep family (modals, popovers, the queue dock, toasts, home cards). The context menus and dropdowns in the glass layer are `border: 0 !important` with their entire boundary inside the shadow. */ .card-modal, .ss-shell-modal, .ssd-projset, .ss-shell-pop, .ss-credits-panel, #ssdQueueDock, .ss-toast, .ss-shell-pop.ss-shell-style-pop, .ss-shell-pop.ss-shell-ctx, .card-ctx-menu, .card-ctx-menu .ctx-submenu, .sidebar-ctx-menu, .am-ctx-menu, .prop-ctx-menu, .ssd-composer-dd-menu, .ssd-hotbar-menu, .ssd-vo-menu, .crx-dd-menu, #cpgChipMenu, #cpgListPop, #cpgVoiceMenu { border: 1px solid var(--oz-hair) !important; } /* Three panels float over the SOLID #161619 document sheet, where a backdrop blur returns the same flat colour it started with. Without their drop they composite to within ~1/255 of the sheet and genuinely disappear. They get the elevated step instead — which is what the surface stack is for. */ .ssd-fmt-zone--pinned .ssd-fmt-island { background: #1e1e22 !important; border-bottom: 1px solid var(--oz-hair-soft) !important; } body #ssToastHost .ss-toast, body.ss-view-editor #ssToastHost .ss-toast { background: #212125 !important; backdrop-filter: none !important; } #ssdQueueDock .ssd-qd-row, body.cpg-open #ssdQueueDock .ssd-qd-row { background: #1b1b1f !important; backdrop-filter: none !important; box-shadow: inset 0 0 0 1px var(--oz-hair) !important; } /* The script sheet's border was zeroed because --ssd-paper-shadow was carrying the page edge. Give it back. */ :root { --ssd-paper-border: rgba(255, 255, 255, .09); } :root { --ssd-paper-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); } /* The collaborator avatar stack's `0 0 0 2px` is a knockout mask for the -9px overlap, not elevation. Same pixels, as a border. */ .ssd-doc-av { box-shadow: none !important; border: 2px solid #14101c !important; box-sizing: border-box !important; } /* Outline-only pill — the shadow WAS the element. */ .ssd-scenes-count { box-shadow: none !important; border: 1px solid rgba(255, 255, 255, .18) !important; } .ssd-scenes-count:hover { border-color: rgba(255, 255, 255, .30) !important; } /* Topbar separator, declared twice (the second copy with !important). */ .ssd-doc-topbar { border-bottom: 1px dashed var(--oz-dash) !important; box-shadow: none !important; } /* Range thumbs lose their definition against the track without the shadow. (Still declared: the scrubber below opts out of the skin, and either sheet may load before slider.js has wrapped anything.) */ input[type=range]::-webkit-slider-thumb { border: 1px solid rgba(0, 0, 0, .35) !important; box-sizing: border-box !important; } input[type=range]::-moz-range-thumb { border: 1px solid rgba(0, 0, 0, .35) !important; box-sizing: border-box !important; } /* --- the slider skin (slider.js) ----------------------------------------- Founder: "make the circle the user drags a completely solid circle, and behind it some glass effect that makes it easy to see." The native input is still the control — it keeps the keyboard, the value and the a11y role — but it goes invisible and the three spans under it are what you see. --rgs-p (0..1) is the one thing that moves, and GSAP is what moves it. */ .rgs { --rgs-p: 0; --rgs-thumb: 16px; position: relative; display: inline-flex; align-items: center; width: 100%; height: 22px; vertical-align: middle; } .rgs > input[type=range] { position: relative; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: none; } .rgs-track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; } .rgs-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--rgs-p) * 100%); background: var(--accent, #B18CFF); border-radius: 999px; } /* Pinned by its centre, and the travel is inset by half a thumb at each end so a full or empty slider still shows a whole circle. */ .rgs-thumb { position: absolute; top: 50%; pointer-events: none; left: calc(var(--rgs-p) * (100% - var(--rgs-thumb)) + var(--rgs-thumb) / 2); width: var(--rgs-thumb); height: var(--rgs-thumb); margin: calc(var(--rgs-thumb) / -2) 0 0 calc(var(--rgs-thumb) / -2); border-radius: 50%; background: #fff; } /* The glass disc BEHIND the circle: bigger, blurred, and the reason a white dot stays legible over a light thumbnail or a bright fill. z-index on a child of a non-positioned-context element paints it under its own parent's box. */ .rgs-thumb::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(255, 255, 255, .10); -webkit-backdrop-filter: blur(8px) saturate(160%); backdrop-filter: blur(8px) saturate(160%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); } /* The native focus ring went out with the native thumb — this is it back. */ .rgs > input[type=range]:focus-visible ~ .rgs-thumb { box-shadow: 0 0 0 3px var(--accent, #B18CFF); } /* --- literal drop shadows ------------------------------------------------- The four tokens above cover 29 surfaces. Another 135 declarations write a drop by hand, and leaving those would make the app half-flat. They are NOT swept by selector pattern. Each was checked for a state sibling — a `.is-selected` / `.is-active` / `:hover` rule on the same element that also declares box-shadow. Where one exists, an !important base rule here would beat that more-specific state rule (important beats normal regardless of specificity) and silently delete the state. Those 14 elements are listed at the end and left alone: .ssd-doc-home, .ssd-docside-pill, .ssd-docside-comment-preview, .ssd-media-dl, .ssd-vo-bar, .ssd-gen-composer-launch, .ssd-detail-action-btn.brand, .ssd-dccard, .ss-shell-pop, .ssd-scene-modal .ssd-kf-card, .ssd-sef-card, .ssd-sb-frame, .cpg-toast. Also excluded: .ssd-edge-guide and .ssd-scene-handle, whose dark keylines keep white drag bars legible over unpredictable document text. */ /* Containers — flattened, and given the hairline that replaces the drop. */ .ssd-vh-modal, .ssd-ve-modal, .ssd-confirm-modal, .ss-picker, .ssd-detail, .ssd-popover, .ssd-detail-dropdown-menu, .ssd-frame-hotbar-menu, .ss-shot-dropdown, .mention-popup, .ssd-char-mention-popup, .ssd-catalog-pop, .ssd-scene-modal .ssd-catalog-pop, #ssdMentionPicker, .ssd-hotbar-menu, .ssd-vo-menu, .crx-dd-menu, .ssd-fmtpop, .cpg-topmenu, .ssd-find-panel, .ssd-dbg-panel, .ssd-tools, .ssd-selection-bar, .ssd-margin, .ssd-guide, .ssd-inspector, .ssd-docside-card, .ssd-usernote, .ssd-composer, .ssd-ef-box, .ssd-ef-box--composer, .ssd-dcdraft .ssd-dccard-draft, .reaction-hover-tools, .crx-modal, .crx-confirm, .card-modal.crx-panel, #ssdQueueDock .ssd-qd-head, #rdrConsole, .ss-shell-modal.rdr-pause, body.ss-center-element .ssd-scene-modal .ssd-stage-body > .ssd-composer, body.ss-center-element .ssd-scene-modal .ssd-scene-unassigned .ssd-composer { box-shadow: none !important; border: 1px solid var(--oz-hair-soft) !important; } /* …except inside the Composer, where neither of these is a card. The hairline above is the edge of a free-standing panel; in the Creator Page the PANE is the panel, and the document and the comment column are two regions inside it. Their four vertical hairlines landed beside .cpg-rail::before — the line the scene numbers ride — so the margin read as three or four rules where the design has one (founder: "too many lines in that right panel… there should just be one line only, the one with the numbers on it"). */ body.cpg-open #ssdDocMain, body.cpg-open .ssd-margin { border: 0 !important; } /* Small controls, marks and badges — flattened only. A hairline on a 20px round button or a pseudo-element tooltip reads as an outline, not an edge. */ .ssd-cref-x, .ssd-kf-remove, .ss-picker-card-check, .ssd-vo-play, .ssd-dccard-genbadge, .ssd-confirm-mark, .ss-lib-rowref, .ssd-se-animate, .ssd-sea-generate, .ssd-campick-thumb, .ssd-campick-pill, .ssd-media-promptbadge, .ssd-sb-swap, .crx-send, .crx-btn-white, .ss-mini-btn::after, .ssd-sef-info::after, body.ss-center-element .ssd-sb-actbar .ssd-sb-actbtn { box-shadow: none !important; } /* Kept out of the list above on purpose: an unrecognised vendor pseudo-element invalidates the ENTIRE selector list it appears in, so a single ::-moz-range-thumb would silently drop every selector beside it in Chrome. */ .ssd-vo-bar .ssd-vo-scrub::-moz-range-thumb { box-shadow: none !important; } /* Toasts. The danger/success variants carry their status colour in an inset ring bundled with the drop; a shadow value cannot be partly overridden, so the colour moves to the border and the whole shadow goes. */ body #ssToastHost .ss-toast, body.ss-view-editor #ssToastHost .ss-toast { box-shadow: none !important; } body #ssToastHost .ss-toast--danger { border: 1px solid rgba(255, 90, 90, .45) !important; } body #ssToastHost .ss-toast--success { border: 1px solid rgba(75, 224, 160, .45) !important; } /* Surfaces given a border or fill earlier in this section, which still carried a hand-written drop of their own. */ .card-ctx-menu, .card-ctx-menu .ctx-submenu, #ssdSceneModal .card-modal.ssd-scene-modal, .ssd-fmt-zone--pinned .ssd-fmt-island { box-shadow: none !important; } /* Two of the fourteen state-sibling elements are common enough to be worth doing properly: flatten the base, then re-assert each state ring at !important so the base rule cannot outrank it. The rings keep their own colours — only the elevation is removed. */ .ssd-dccard { box-shadow: none !important; } /* Founder: "comment outline and buttons should appear orange as well." The comment is the one thing in the editor deliberately NOT on the brand accent — its highlight in the script, its circle on the rail and its card all say orange, so the ring does too. The OPEN card had no ring in any colour: the flatten above removed it and only the hover state was ever re-asserted, so an opened comment lost its edge entirely and read as a floating slab of text. Both states, re-asserted. */ #cpgRoot .cpg-commenthost .ssd-dccard-item:hover .ssd-dccard { box-shadow: 0 0 0 2px var(--ssd-comment-orange, #F97316) !important; } #cpgRoot .cpg-commenthost .ssd-dccard-item.is-open .ssd-dccard, #cpgRoot .cpg-commenthost .ssd-cmtpop .ssd-dccard { box-shadow: 0 0 0 2px var(--ssd-comment-orange, #F97316), 0 28px 70px -22px rgba(0, 0, 0, .85) !important; } .ssd-dccard-scene.is-drop-target { box-shadow: 0 0 0 2px var(--coral) !important; } .ssd-dccard-scene.is-multiselected { box-shadow: 0 0 0 2px var(--coral) !important; } /* The Rendr Director is generating this scene's frame right now. A ring not re-asserted here does not exist — the flatten above outranks it. */ .ssd-dccard-scene.is-agentwork { box-shadow: inset 0 0 0 1.5px rgba(177, 140, 255, .5) !important; } .ssd-docside-pill, .ssd-docside-comment-preview { box-shadow: none !important; } .ssd-docside-item.is-expanded .ssd-docside-pill { border-color: rgba(189, 189, 189, .32) !important; } .ssd-docside-pill:focus-visible { box-shadow: 0 0 0 2px rgba(189, 189, 189, .24) !important; } /* =========================================================================== 2 · RADIUS VOCABULARY "12px for cards; 0px for inputs and inline links; 36px for the one filled CTA and 22.5px for outlined ghost buttons — these four values are the entire radius vocabulary." Plus: "Never use border-radius below 12px on containers." The app currently spends 1047 declarations across 40 distinct values, with ~370 of them at 4–9px. Everything below routes onto the four. Note on small controls: browsers clamp border-radius to half the box, so a 22.5px ghost radius renders as a full pill on anything under 45px — every icon button in the app. That is the intended read; the system describes its controls as pill-shaped. ========================================================================= */ /* --- 2a · containers: cards, panels, modals, sheets, menus, media ---------- */ .ssd-dccard, .ssd-dccard.ssd-dccard-scene, .ssd-docside-card, .ssd-dcdraft .ssd-dccard-draft, .ssd-campick-card, .ssd-detail-field-wrap, .ssd-detail-side-card, .ssd-detail-work-card, .ssd-detail-settings-card, .ssd-detail-comments-card, .ssd-detail-frame-preset-card, .ssd-sef-card, .ssd-kf-card, .ssd-scene-modal .ssd-kf-card, .ssd-el-tile, .ssd-gen-composer-tile, .ss-picker-card, .ss-update-card, .ss-lib-audiocard, .ss-lib-sceneprev-card, .ss-lib-studio-tile, .ss-lib-scenecard, .ss-char-voice-card, .crx-voice-card, .crx-var-card, .crx-slot, .crx-editbox, .crx-vp, #cpgRoot .gcard, #cpgRoot .cpg-panecard, #cpgRoot .cpg-stylecard, .dr-cmtcard, .dr-glass, .dr-glassbed, .dr-face, .dr-script, .dr-tree, .ssd-audio-panel, .ssd-audio-section, .ssd-queue-panel, .ssd-find-panel, .ssd-ef-box, .ssd-tools, .ssd-scene-settings, .ssd-workflow-step, .ssd-outline-row, .ssd-comment-thread, /* modals + dialogs */ .card-modal, #ssdSceneModal .card-modal.ssd-scene-modal, .crx-modal, .ssd-confirm-modal, .ssd-ve-modal, .ssd-vh-modal, #ssdVersionHistory .ssd-vh-modal, .crx-confirm, .ssd-detail, .ss-picker, .ssd-guide, /* popovers, dropdowns, context menus + their rows */ .ssd-popover, .ss-shell-pop, .ss-shell-pop.ss-shell-ctx, .ss-shell-pop.ss-shell-style-pop, .ss-shell-pop-row, .ss-shell-pop .ss-shell-btn, .ss-shell-modal .ss-shell-btn, .ssd-composer-dd-menu, .ssd-composer-dd-menu.is-fixed-popover, .ssd-composer-dd-opt, .ssd-composer-dd-edit, .ssd-detail-dropdown-menu, .ssd-detail-dropdown-item, .ssd-detail-dropdown-item-action, .ssd-doc-menu, .ssd-doc-menu-item, .ssd-hotbar-menu, .ssd-hotbar-menu-row, .ssd-frame-hotbar-menu, .ssd-vo-menu, .ssd-vo-menu-row, .ssd-catalog-pop, .ssd-scene-modal .ssd-catalog-pop, .ssd-fmtpop, .ssd-fmtpop-btn, .card-ctx-menu, .card-ctx-menu .ctx-submenu, .sidebar-ctx-menu, .am-ctx-menu, .card-ctx-menu button, .sidebar-ctx-menu button, .am-ctx-menu button, .dr-menu, .dr-menu button, .dr-ddgrid, .crx-dd-menu, .crx-dd-opt, .ss-shot-dropdown, .mention-popup, .ssd-char-mention-popup, #ssdMentionPicker, .ssa-modemenu, .ssa-modemenu-row, .cpg-topmenu, .cpg-topmenu-row, /* thumbnails, frames + media surfaces */ .ssd-dccard-thumb, .ssd-dccard-scene .ssd-dccard-thumb, .ssd-ref-thumb, .ssd-detail-ref-grid .ssd-ref-thumb, .ssd-catalog-thumb, .ssd-campick-thumb, .ssd-outline-thumb, .ssd-preved-thumb, .ssd-take-thumb, .ssd-hist-thumb, .ssd-files-thumb, .ssd-vsb-thumb, .ssd-sb-frame, #ssdQueueDock .ssd-qd-thumb, body.cpg-open #ssdQueueDock .ssd-qd-thumb, .ss-lib-thumb, .ss-lib-style-thumb, .ss-shell-style-thumb, .ss-preview-thumb, .ss-frame-img, .crx-thumb, .crx-refthumb, .crx-var-thumb, .crx-preview, .crx-adv-img, .crx-imgedit-vp, #cpgRoot .cpg-refthumb, #cpgRoot .cpg-asset-frame--main, #cpgRoot .cpg-asset-frame--angle, #cpgRoot .cpg-media-card, .am-fr-thumb, .rdr-di-thumb, .rdr-di-ref, .ssd-detail-frame, /* composers + rails */ .ssd-composer, .ssd-gen-composer, .ssd-gen-composer-main, .ss-lib-genflow .ssd-composer, .ssd-scene-modal .ssd-composer, .ss-lib-row, .ss-lib-item, .ssd-draw-toolbar, .ssd-media-hotbar, .ssd-selection-bar, .ssd-vo-bar, #ssdQueueDock, #ssdQueueDock .ssd-qd-head, #ssdQueueDock .ssd-qd-row, #cpgRoot .cpg-library-dock, .dr-dock, #cpgRoot .cpg-toolrow, #cpgRoot .cpg-annot-bar, /* toasts + tooltips */ .ss-toast, .cpg-toast, .dr-toast, .dr-tip::after, .ssd-detail-inline-tip, .ssd-media-action[data-tip]::after, .ssd-media-dl[data-tip]::after, .ssd-stage-hint, .ssd-scene-unassigned-hint, .ssd-se-esc-hint, .ss-mini-btn::after { border-radius: var(--oz-card) !important; } /* --- 2b · inputs: the same pill as the controls beside them ---------------- */ .crx-input, .crx-textarea, .crx-field textarea, .crx-loc-adv-angle textarea, .crx-adv-prompt, .crx-var-card input, .crx-imgedit-row input, .chat-input, .ssd-scene-modal .chat-input, .af-chat-input, .dm-chat-input, .ssd-detail-textarea, .ssd-detail-select, .ssd-detail-side-textarea, .ssd-detail-selected-text, .ssd-scenes-search, .dr-search, #cpgRoot .cpg-search, .ssd-inline-input, .ssd-inspector-controls select, .ssd-comment-input, .ssd-inspector-grid textarea, .ssd-docside-comment-shell .ssd-detail-comment-input, .ssd-dccard-draft .ssd-dcdraft-input, .ssd-dcdraft .ssd-dcdraft-input, .ssd-ef-input, .ssd-ve-prompt, .ssd-audio-durrow input, .ssd-audio-text, .ssd-genprompt-text, .ssd-preved-ta, .ssd-vdlg-text, .ssd-vsb-promptinput, .ssa-compose textarea, .am-select, .am-input, .am-textarea, .ss-char-mini-select, .crx-adv-body .ss-char-mini-select, .crx-adv-body select, .ssd-tools textarea, .ss-char-voice-yt input, .ss-char-voice-add input, .ss-debug-input, .ss-debug-ta, #cpgRoot .cpg-field-ctl, .dr-field-ctl, .ssd-fmtpop-field > input, .cpg-topmenu-add > input, input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], input[type=url], input:not([type]), textarea, select { border-radius: var(--oz-input) !important; } /* A textarea is a box you write a paragraph in, not a chip — it takes the container radius. Set as the VARIABLE rather than as a second border-radius rule: a rule that matches the element itself beats an inherited :root value whatever its specificity, so this needs no !important arms race with the class selectors above (.ssd-detail-textarea and friends are all textareas). */ textarea { --oz-input: var(--oz-card); } /* Excluded from the input rule above: appearance:none checkboxes and radios draw their tick from border-width, and #cpgRoot .cpg-annot-input carries the annotation's assigned colour in an inset ring. */ input[type=checkbox], input[type=radio] { border-radius: 3px !important; } #cpgRoot .cpg-annot-input { border-radius: var(--oz-input) !important; } /* --- 2c · the filled CTA: 36px pill --------------------------------------- */ /* "Never use more than one filled button per section." The purple gradient group is the app's single filled surface; it takes the pill. */ .ssd-feat-btn.is-primary, .ss-shell-btn.is-primary, .ss-shell-pop .ss-shell-btn.is-primary, .ss-shell-modal .ss-shell-btn.is-primary, .ssd-projset-save, .ssd-doc-home, .crx-btn-purple, .crx-send, .crx-imgedit-row .crx-send--labeled, .crx-confirm-btn.is-primary, #cpgRoot .cpg-send-btn, #cpgRoot .cpg-dock.has-kf .cpg-send-btn, #cpgRoot .cpg-cta, #cpgRoot .cpg-library-generate, .ssd-sea-generate, .ssd-ve-generate, .ssd-gen-composer-launch, .ssd-dcdraft-submit, .ss-update-go, .dr-btn-primary, .dr-btn-primary.l, .dr-btn-primary.s, .dr-send, .ssa-send-btn, .ss-debug-btn.is-go, .ssd-detail-action-btn.brand, .ss-char-fs-go, .ssd-scene-modal .ssd-composer-send, .ssd-composer-send { border-radius: var(--oz-pill) !important; } /* Deliberately NOT in the filled list, though their names suggest otherwise: · .crx-confirm-btn / .ssd-confirm-btn as bare classes — the bare class is the GHOST in both dialogs, and its .is-danger sibling is the destructive one. Filling all of them made Delete and Cancel the same button. · .ssd-detail-prompt-generate, .ssd-scene-desc-generate, .ss-picker-gen-btn — grey subtle-fill secondaries pinned in a textarea corner, not CTAs. · .ssd-composer-gen — not a button at all; it is the generating-state skeleton (storyboard.css:973), 120px of shimmer bars. · .crx-modal .crx-send.crx-send--icon — defined but never emitted. */ /* --- 2d · ghost / outlined / icon buttons: 22.5px ------------------------- */ .crx-btn-ghost, .crx-btn-white, .crx-btn-danger, .dr-btn-secondary, .dr-btn-secondary.s, .dr-btn-ghost, .dr-btn-danger, .ssd-dcdraft-cancel, .ssd-gen-cancel, .ssd-detail-add-prop, .ssd-detail-chip-btn, .ssd-detail-link-btn, .ssd-detail-action-btn, .ssd-inspector-head-actions button, .ssd-inspector-actions button, .ssd-comment-resolve, .ssd-docside-card-actions button, .ssd-margin-foot button, .rdr-con-filters button, .ssd-composer-dd-btn, .ssd-ref-add, /* icon-only utility buttons */ .ssd-selbar-btn, .ssd-fmt-btn, .ssd-feat-btn, .ssd-draw-btn, .ss-debug-btn, .ssd-scenes-iconbtn, .ssd-sb-actbtn, .ssd-sb-actbar--icons .ssd-sb-actbtn, .ssd-doc-menu-btn, .ssd-dccard-menu-btn, .ssd-dccard-link-btn, .ssd-dccard-del-btn, .ssd-dccard-scene .ssd-dccard-menu-btn, .ssd-dccard-scene .ssd-dccard-del-btn, .ssd-dccard-scene .ssd-dccard-link-btn, .ss-action-btn, .ssd-el-tile-btn, .ssd-detail-header-actions button, .ssd-detail-header-actions-v2 button, .ssd-detail-icon-btn, .ssd-detail-upload-btn, .ssd-ef-btn, .ssd-doc-quiet-btn, .dr-icobtn, .dr-icobox, .ssa-icobtn, .ss-shell-railbtn, .ss-mini-btn, .crx-refbtn, .crx-dd-btn, .crx-addref-btn, .crx-voice-ddbtn, #cpgRoot .cpg-iconbtn, #cpgRoot .cpg-annot-btn, #cpgRoot .fmtbtn, #cpgRoot .cpg-media-btn, /* the heart (and its gdel/gfolder siblings) sit IN these rows — a rounded square beside stadium circles read as a different control (founder: "heart icon container needs to match") */ #cpgRoot .gfav, /* the four controls left over at 8–10px once the inputs became pills: the Rendr Director button, the VOICE row's Preview, the document title field and the scene-name field. Nothing in a 34px row draws a different corner now. */ #cpgRoot .cpg-agent, #cpgRoot .cpg-field-play, #cpgRoot .cpg-doctitle, #cpgRoot .cpg-scenename, .am-btn, .ssd-dbg-head button, .rdr-dbg-btn, .ssd-frame-edit-close, .ssd-scene-ytmedia-remove, .ssd-vo-bar .ssd-vo-more, .ssd-vo-bar .ssd-vo-speed, /* segmented controls: track AND inner button, or the pill overflows the track */ .crx-seg, .crx-seg-btn, #cpgRoot .seg, #cpgRoot .cpg-btngroup, #cpgRoot .cpg-viewtog, #cpgRoot .cpg-viewtog button, #cpgRoot .cpg-viewswitch, #cpgRoot .cpg-navgroup, .ssd-sb-vmode-tab, .ssd-detail-resolution button, .ssd-gen-composer-resolution button, .ssd-se-tabs, .setab, .dr-tab, #cpgRoot .ctab, .ssd-detail-step-tab, /* chips, tags + badges — the pill family */ span.ssd-status-chip, .ssd-campick-pill, .ssd-take-pill, #ssdQueueDock .ssd-qd-pill, .ssd-vo-drop-pill, .ssd-doc-brand-pill, .ssd-docside-pill, .ssd-docside-pill-media, .ssd-docside-pill-badge, .ssd-docside-pill-num, .ssd-docside-group-scenechip, .ssd-dccard-genbadge, .ssd-draft-badge, .ssd-find-badge, .ssd-files-badge, .ssd-files-count, .ssd-queue-badge, .ssd-est-chip, .ssd-usage-chip, .ssd-ve-badge, .ssd-gen-composer-chip, .ssd-kf-tag, .ssd-yt-pill, .ss-picker-card-tag, .ss-char-refcount, .ss-credits-chip, .ss-shell-top .ss-shell-chip, .crx-chip, .crx-ex-chip, .crx-tier-chip, .crx-count, .crx-usetag, .crx-saved-pill, .crx-voice-pill, .ssa-chip, .ssa-status, #cpgRoot .cpg-chip, #cpgRoot .cpg-chip--new, #cpgRoot .cpg-mediatag, .dr-chip, .mention, .card-comment-text .mention { border-radius: var(--oz-ghost) !important; } /* Icon chips stay on the ghost radius with everything else — on their 36px square that clamps to a circle, which is the SAME stadium language as the pills beside them (founder: squares "do not match the rest of the buttons"). One radius token, one look, whatever the box's proportions. */ /* --- 2e · exemptions ------------------------------------------------------ Circles stay circles: avatars, status dots, spinners, slider thumbs and the round send button are geometry, not container language. Text-run decorations (.ssd-scene, .ssd-comment, .ssd-note) are inline spans inside the script — 12px on those bleeds across wrapped lines. Sub-12px-tall decorations (swatches, scrub heads and skeleton bars) cannot take 12px at all; a browser clamps it and the shape reads as an accident. These are listed to re-assert against the sweeps above, not to change them. */ .ss-shell-avatar, .ss-shell-access-av, .ssd-dccard-avatar, .ssd-sc-avatar, .ssd-cm-av, .ssd-doc-av, .dr-av, .crx-crumb-people .crx-crumb-av, #cpgRoot .cpg-topavatar, .mention-chip .mention-chip-pfp, #cpgRoot .cpg-peer, #cpgRoot .cpg-presence-a, .ssd-catalog-dot, .card-ctx-menu .ctx-col-dot, .cpg-topmenu-dot, #cpgRoot .cpg-voicedot, .crx-voice-dot, .dr-field-dot, .rdr-con-dot, .ssd-docside-item::before, .ssd-status-chip::before, .ssd-gen-spinner, .ss-btn-spin, .ssd-vo-bar .ssd-vo-scrub::-webkit-slider-thumb, .ssd-vo-bar .ssd-vo-scrub::-moz-range-thumb, .ssd-vo-bar .ssd-vo-play, .ssd-vo-play, .ssd-audio-voice-play, .ssd-sb-swap, .ssd-sef-info, .ssd-hist-ico, .ssd-vshot-num, .ssd-genbadge-cancel, .ssd-kf-remove, .ssd-cref-x, .ssd-ref-thumb button, .ss-lib-ref-x, .ss-lib-rowref-x, .ss-lib-rowref-dl, .ss-lib-studio-go, .ss-style-ref-x, .ss-attachment .ss-att-remove, .ss-picker-card-check, #cpgRoot .cpg-refthumb-x, #cpgRoot .cpg-kf-x, #cpgRoot .cpg-annot-sw, .ssd-vshot-x, #ssdQueueDock .ssd-qd-x { border-radius: 50% !important; } .ssd-scene, .ssd-scene-body, .ssd-comment, .ssd-note, .ssd-comment-inline-body, .ssd-comment-quote, .ssd-find-sub mark, .ssd-scene.is-dropping { border-radius: 2px !important; } .desc-tb-color-swatch, .crx-swatch, .ssd-fmtpop-sw, .dr-sw, .dr-sw > i, .dr-sp > i, .dr-tok, .dr-val, .dr-mv, .ss-loading-bar, .ss-loading-bar-inner, #cpgRoot .cpg-scrub-head, .dr-motion-track, .dr-skel, #cpgRoot .cpg-skel, .ssd-stage::-webkit-scrollbar-thumb, .ssd-composer-input::-webkit-scrollbar-thumb, .ssd-find-kbd, .ssd-popover .ssd-pop-kbd, body #ssToastHost .ss-toast-btn kbd, .cpg-toast kbd, .dr-toast kbd { border-radius: 4px !important; } /* The script sheet and page keep their own geometry — document, not chrome. */ .ssd-paper, body.ss-view-editor .ssd-paper, .ssd-page { border-radius: 3px !important; } /* =========================================================================== 3 · DASHED HAIRLINE DIVIDERS "Use 1px dashed lines for section dividers; avoid solid dividers and avoid any divider thicker than 2px." — "Used sparingly between content blocks, never as decoration, always carrying structural meaning." Only true section separators are converted. Excluded, because they are not dividers: tab rails (the track a 2px active indicator sits on — dashing it makes the indicator look misaligned), the tab active indicator itself, CSS-shape borders (triangles, chevrons), inline-link underlines, and .ssd-section-title, which lives inside the user's script document. ========================================================================= */ /* height:1px + background separators — need border-top instead, since a background cannot be dashed. */ .ssd-doc-menu-sep, .ssd-composer-dd-sep, .am-ctx-menu .ctx-separator, .card-ctx-menu .ctx-separator, .edit-ctx-menu .ctx-separator, .ss-shell-pop-div, .ss-shell-sum-divider, .ssd-se-divider { height: 0 !important; background: none !important; border-top: 1px dashed var(--oz-dash) !important; } .ss-lib-sec::before, .ss-lib-sec::after { height: 0 !important; background: none !important; border-top: 1px dashed var(--oz-dash) !important; } /* Vertical rules — same problem, border-left instead. Excludes the scene-modal hotbar separator, which is a flex spacer wearing a separator's class name. */ .ssd-feat-sep, .ssd-draw-sep, .desc-tb-sep, .ssd-sb-actsep, .cpg-annot-sep, .ssd-media-hotbar-sep { width: 0 !important; background: none !important; border-left: 1px dashed var(--oz-dash) !important; } .ssd-scene-modal .ssd-media-hotbar--v .ssd-media-hotbar-sep { width: auto !important; border-left: none !important; background: none !important; } /* border-top / border-bottom section separators. Each element is listed under the edge it ACTUALLY draws, and gets the full shorthand. Neither shortcut works here: `border-*-width: 1px` paints a line on the three edges that were never drawn, and `border-*-style: dashed` alone is no better — once the style stops being `none`, the width falls back to its initial `medium` and renders a 3px rule in currentColor. The dash colour is unified and one step brighter than the solid lines it replaces: dashes are ~50% ink by area, so matching the old rgba(…, .05–.10) exactly would have made most of these separators invisible. */ .ssd-ve-head, .ssd-detail-header-v2, .ssd-detail-side-section, .ssd-detail-optionsbar, .ssd-confirm-head, .ssd-margin-head, .ssd-hist-row, .card-comment, .ssa-head, .ss-credits-panel-head, .ssd-find-inputrow, .crx-refrow--strip, .rdr-con-head, .rdr-con-pause, .rdr-con-filters, .ss-shell-act-row, .ss-shell-mem-row, .dr-type-row { border-bottom: 1px dashed var(--oz-dash) !important; } .ssd-ve-right, .ssd-detail-footer, .ssd-detail-advanced, .ssd-detail-dropdown-create, .ssd-margin-foot, .ssd-catalog-search, .ssd-catalog-histsec, .af-chat-input-row, .ssa-foot, .ssd-take-info, .ssd-se-refs--compact, .ssd-sea-audiosec { border-top: 1px dashed var(--oz-dash) !important; } /* The `:last-child { border-bottom: none }` compensators these rules would have overridden. */ .ssd-detail-side-section:last-child, .ssd-hist-row:last-child, .card-comment:last-child, .dr-type-row:last-child, .ss-shell-act-row:last-child, .ss-shell-mem-row:last-child { border-bottom: 0 !important; } /* =========================================================================== 4 · TYPOGRAPHY "Set type in uppercase weight 500 across the entire interface; use weight 400 / mixed case only for the body copy that explains the product." "Line-height tightens with size: 0.9 at display." "No letter-spacing adjustment." Two deliberate departures, both because this is a dense working editor and not a product page: (a) ORYZO's "letter-spacing: normal at all sizes" targets DISPLAY type — the reference sets 41–51px headlines and says the geometry needs no tightening. This app's caps labels run 8–13px, where the existing positive tracking (.02–.18em) is doing legibility work, not decoration. Negative tracking is neutralised everywhere, per the system. Positive tracking on small caps is kept. The one place the app already sets caps at zero tracking (.ssd-doc-cover-kicker) is 14px, which is the size where it works. (b) The uppercase/weight-500 voice is applied to app chrome only. Text inside .ssd-doc is the user's script — their headings, their prose. The system's body-copy exception covers it: mixed case, weight 400. ========================================================================= */ /* Display + heading leading, and the weight drop from 800 to 500. */ h1, h2, h3, .ssd-doc-title, .ssd-se-title, .ssd-scenes-title, .ss-lib-paneltitle, .ss-shell-modal-title, .ss-credits-panel-head b, .ss-picker-title, .ssd-sea-htitle, .card-modal-title, .ssd-detail-title-v2, .ssd-confirm-title, .ssd-margin-title, .ssd-vh-title, #ssdVersionHistory .ssd-vh-title, .ssd-docside-card-title, .ssd-ve-title, .crx-panel-h1, .crx-confirm-title, /* .cpg-doctitle is deliberately NOT in this list. Founder: "let's make the document title font be the same as the font from the landing page (the same font the text 'rendr' uses in top left of landing page)". The landing mark is `font: 800 20px/1 var(--sans); letter-spacing: -.02em`, lowercase — the same family this app already uses, so the difference the founder was seeing was entirely this rule: weight 500, letter-spacing normal, ALL CAPS. On the blank slate that field IS the wordmark ("rendr"), and a wordmark set in the UI's label style is not the wordmark. creator-page.css already gives it 800/-.02em; exempting it here is what lets that through. */ #cpgRoot .cpg-tools-h, .crx-h1input, .crx-crumb-name, .ssd-files-root-name, .ssd-inspector h3, .ssd-guide h3, #ssdQueueDock .ssd-qd-title{ font-weight: 500 !important; letter-spacing: normal !important; /* kills every negative track */ text-transform: uppercase !important; text-align: left !important; } /* 0.9 leading is the system's signature, and it only works at display scale — "at 0.9 the uppercase letterforms overlap their line-height bounds, creating a sculptural block effect." Applied to the type that is actually large. */ .ssd-confirm-title, .card-modal-title, .ssd-detail-title-v2, .crx-panel-h1, .ss-picker-title { line-height: .9 !important; } /* UI labels: the museum-label voice. Weight 500, no negative tracking. Existing positive tracking on caps is left in place — see (a) above. */ .ss-lib-row, .setab, .dr-tab, #cpgRoot .ctab, .ssd-detail-step-tab, .card-modal-section-title, .ssd-margin-tab, .ss-tab, .ssd-docside-pill, .ssd-feat-btn, .ss-shell-btn, .crx-btn-purple, .crx-btn-ghost, .crx-btn-white, .crx-btn-danger, .dr-btn-primary, .dr-btn-secondary, .dr-btn-ghost, .ssd-sea-generate, .ssd-ve-generate, .crx-seg-btn, #cpgRoot .cpg-viewtog button, .ssd-detail-action-btn, .ssd-detail-chip-btn, span.ssd-status-chip, .ssd-est-chip, .ssd-usage-chip, .ss-credits-chip, .crx-chip, .crx-tier-chip, .ssa-chip, .ssa-status, #cpgRoot .cpg-chip, .dr-chip { font-weight: 500 !important; } /* Anything already set in caps keeps its tracking but drops to weight 500. */ [class*="-label"], [class*="-kicker"], [class*="-eyebrow"] { font-weight: 500 !important; } /* Bold inside the script stays — it is the writer's emphasis, not a UI label. */ .ssd-doc strong, .ssd-doc b { font-weight: 700 !important; } /* The body voice: mixed case, weight 400, left aligned. Untouched by the caps treatment above — this is the system's single conversational register. */ .ssd-doc, .ssd-doc p, .ssd-doc li, .ssd-doc blockquote { text-transform: none !important; text-align: left !important; } .ssd-doc p, .ssd-doc li { font-weight: 400 !important; } .ssd-doc h1, .ssd-doc h2, .ssd-doc h3, .ssd-doc h2.ssd-section-title, .ssd-section-title { text-transform: none !important; letter-spacing: normal !important; /* the system's no-negative-tracking rule */ } /* =========================================================================== 5 · ALIGNMENT "Never center-align body copy — headings and body text are always left-aligned, even when flanking a centered image." Centred text inside a button, chip or badge is not body copy and is left as is. ========================================================================= */ .ssd-ef-helper, .ssd-inspector-frame-empty, .ss-picker-empty, .ss-empty, .ssd-detail-frame-empty, .ssd-catalog-empty, .ssd-queue-empty, .ssd-media-gen-ph-info, .ssd-se-ph-hint{ text-align: left !important; } /* =========================================================================== 6 · SPECIFICITY COUNTER-RULES An !important declaration beats a normal one whatever the selector, so the sweeps above already clear the 991 ID-scoped rules and the ~318 inline styles the JS writes. What they do NOT automatically clear is another !important on a MORE specific selector — there, the cascade falls back to specificity. These are the only such collisions left on the properties this sheet owns. Each is matched at equal-or-greater specificity so the system wins. ========================================================================= */ /* creator-page.css:1826 — `body.cpg-open #ssdQueueDock .ssd-qd-row` at 9px. */ body.cpg-open #ssdQueueDock .ssd-qd-row { border-radius: var(--oz-card) !important; } /* creator-page.css:2787 — asset-sheet caps badge at 7px; it is a chip. */ #cpgRoot .cpg-asset-sheet--character .cpg-caps, #cpgRoot .cpg-asset-sheet--prop .cpg-caps { border-radius: var(--oz-ghost) !important; } /* index.html:202 — .comment-attach-btn at 8px; a ghost button by its own declaration (transparent fill, 1px border). */ .comment-attach-btn { border-radius: var(--oz-ghost) !important; } /* index.html:134-144 — the small-label/chip group, pinned at weight 600. */ .ssd-feat-btn span, .ssd-selbar-count, .card-modal-tab, .ssd-est-chip, .ssd-queue-badge, .ssd-doc-saved-inline, .ssd-pop-kbd, .ssd-doc-menu-shortcut { font-weight: 500 !important; } /* =========================================================================== 7 · THE FILLED CTA — one shape, one surface Requested: the filled buttons were not consistent with each other, and they read flat rather than as part of the liquid-glass system. Two causes. First, most filled CTAs are classed (`.cpg-cta`, `.crx-btn-purple`, `.ssd-sea-generate` …) but a few are inline-styled elements with no class at all — creator-page.js:1559 builds "Add Angle" as a bare `
`, so no selector in section 2c could reach it and it kept its 12px while its siblings became pills. `[data-hovbright]` is the app's own marker for "filled bright button" and covers all three inline cases, so the shape now follows the marker rather than the class list. Second, section 1 reduced --btn-purple-shadow to a bare top highlight, which is correct for ORYZO (it rejects shadow elevation outright) but strips the filled button of the light-catch that made it look like the rest of the glass. This is a deliberate departure from the reference on that one point: the CTA gets a real glass surface back — top light edge, bottom thickness, 1px rim, and a soft bloom in its own accent. It applies to every filled button at once so they cannot drift apart again. ========================================================================= */ /* Dark purple glass, after the Apple-lozenge reference: the body reads as a thick tinted pane rather than a flat fill. Four things do that work — a specular sweep down from the top edge, a luminous core rising from the base, a bright refracting rim, and a dark inner floor that gives the pane depth. The old treatment was a bright flat purple with a single white hairline on top, which is why it read as a sticker. */ :root { --oz-cta-fill: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.07) 14%, rgba(255,255,255,0) 38%), radial-gradient(130% 190% at 50% 118%, #a97dff 0%, #7b45e6 38%, #4a24a8 72%, #2e1668 100%); /* The BLOOM is its own knob (design rule: glow exists in exactly two places — this token and the pencil hover). --cta-bloom is admin-tunable through /api/design-tokens.css; zero it as `0 0 0 0 transparent` (never `none` — inside a shadow list that invalidates the declaration) and every filled CTA in the app runs flat at once. The structural insets — top edge, floor, rim, contact — are NOT glow and stay put. */ --cta-bloom: inset 0 0 22px -6px rgba(168, 120, 255, .50), /* inner bloom */ 0 10px 26px -14px rgba(90, 40, 200, .9); /* outer bloom */ --oz-glass-btn: inset 0 1px 0 rgba(255, 255, 255, .42), /* top light edge */ inset 0 -10px 18px -10px rgba(12, 4, 32, .85), /* dark floor, thickness */ inset 0 0 0 1px rgba(178, 140, 255, .42), /* refracting rim */ var(--cta-bloom), 0 2px 8px -3px rgba(0, 0, 0, .75); /* contact */ --oz-glass-btn-hover: inset 0 1px 0 rgba(255, 255, 255, .58), inset 0 -10px 18px -10px rgba(12, 4, 32, .8), inset 0 0 0 1px rgba(198, 168, 255, .58), inset 0 0 26px -4px rgba(184, 142, 255, .65), 0 14px 32px -14px rgba(110, 52, 235, 1), 0 2px 8px -3px rgba(0, 0, 0, .75); /* (The --btn-purple-shadow re-point that lived here is GONE. It forwarded the full CTA bloom to every legacy consumer of the old theme-glass token — including a TOAST button and the shell's secondary primaries — which is exactly how the glow spread beyond the CTAs. Those consumers now fall back to theme-glass's own definition, purple but bloomless.) */ } /* The inline-styled CTAs. `[data-hovbright]` is set on exactly the three filled buttons the creator page builds by hand, so this needs no class to exist. The height is normalised here too: "Add Angle" was built at 44px with 22px side padding against its siblings' 36px, which is what made it read thick once it became a pill. */ [data-hovbright] { border-radius: var(--oz-pill) !important; background: var(--oz-cta-fill) !important; box-shadow: var(--oz-glass-btn) !important; font-weight: 500 !important; height: 36px !important; padding: 0 18px !important; } /* The classed filled family — same surface, so a button's shape and depth no longer depend on which file happened to build it. */ .ssd-feat-btn.is-primary, .ss-shell-btn.is-primary, .ss-shell-pop .ss-shell-btn.is-primary, .ss-shell-modal .ss-shell-btn.is-primary, .ssd-projset-save, .ssd-doc-home, .crx-btn-purple, .crx-send, .crx-imgedit-row .crx-send--labeled, .crx-confirm-btn.is-primary, #cpgRoot .cpg-send-btn, #cpgRoot .cpg-dock.has-kf .cpg-send-btn, #cpgRoot .cpg-cta, #cpgRoot .cpg-library-generate, .ssd-sea-generate, .ssd-ve-generate, .ssd-gen-composer-launch, .ssd-dcdraft-submit, .ss-update-go, .dr-btn-primary, .dr-btn-primary.l, .dr-btn-primary.s, .dr-send, .ssa-send-btn, .ss-debug-btn.is-go, .ssd-detail-action-btn.brand, .ss-char-fs-go, .ssd-scene-modal .ssd-composer-send { background: var(--oz-cta-fill) !important; box-shadow: var(--oz-glass-btn) !important; font-weight: 500 !important; } /* EVERY member of the list above gets a white label, without exception. Nine of them were LIGHT buttons — .cpg-library-generate, .ssa-send-btn, .dr-send, .ss-update-go, .crx-send, .crx-confirm-btn.is-primary and the three --coral-filled ones — and a light button pairs with a near-black glyph. The fill is a normal declaration on those rules, so it lost to the accent fill above, but `color: #141417` is a separate declaration and survived it: black text on a dark purple pane, around 1.5:1. .ss-update-go is a whole word, not an icon. This single rule is what stops a colour override from silently turning a label invisible. */ .ssd-feat-btn.is-primary, .ss-shell-btn.is-primary, .ssd-projset-save, .ssd-doc-home, .crx-btn-purple, .crx-send, .crx-confirm-btn.is-primary, .crx-imgedit-row .crx-send--labeled, #cpgRoot .cpg-send-btn, #cpgRoot .cpg-cta, #cpgRoot .cpg-library-generate, .ssd-sea-generate, .ssd-ve-generate, .ssd-gen-composer-launch, .ssd-dcdraft-submit, .ss-update-go, .dr-btn-primary, .dr-send, .ssa-send-btn, .ss-char-fs-go, .ss-debug-btn.is-go, .ssd-detail-action-btn.brand, .ssd-scene-modal .ssd-composer-send, .ssd-feat-btn.is-primary svg, .crx-send svg, #cpgRoot .cpg-library-generate svg, .ssa-send-btn svg, .dr-send svg, .ss-debug-btn.is-go svg, .ssd-detail-action-btn.brand svg { color: #fff !important; } /* Two of them also carry a 1px grey border that drew a second edge just outside the new rim. */ .ss-debug-btn.is-go, .ssd-detail-action-btn.brand { border-color: transparent !important; } /* NOT the bare `.ssd-composer-send`. Its base is a WHITE circle with a dark glyph (storyboard.css:1360, and .is-wand pins color:#1F2023) — only the three scoped variants above are purple. Forcing the accent fill on the base turned the wand into a black icon on purple, and its own hover (`background: rgba(255,255,255,.82)`) flipped it back to white mid-gesture. */ .ssd-composer-send.is-wand, .ssd-composer-send.is-wand:hover { background: #ffffff !important; color: #1F2023 !important; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12), 0 2px 8px -3px rgba(0, 0, 0, .6) !important; } .ssd-composer-send.is-wand:hover { background: #f0edf7 !important; } .ssd-composer-send.is-wand svg { color: #1F2023 !important; } /* .cpg-cta sets `font: 800 13px var(--sans)` as a shorthand, which resets weight after any longhand that lost the cascade. Restate it. */ #cpgRoot .cpg-cta { font-weight: 500 !important; } /* Hover brightens the core and the rim — the pane lights up rather than moving, so nothing reflows. */ [data-hovbright]:hover, .crx-btn-purple:hover, #cpgRoot .cpg-cta:hover, #cpgRoot .cpg-send-btn:hover, #cpgRoot .cpg-library-generate:hover, .ssd-sea-generate:hover, .ssd-ve-generate:hover, .ssd-gen-composer-launch:hover, .ssd-detail-prompt-generate:hover, .crx-send:hover, .ssd-confirm-btn:hover, .dr-btn-primary:hover, .ssa-send-btn:hover, .ssd-doc-home:hover, .ss-shell-btn.is-primary:hover, .ssd-scene-modal .ssd-composer-send:hover { box-shadow: var(--oz-glass-btn-hover) !important; } /* Section 1 flattened these as plain containers before the CTA rules existed; they are filled buttons and belong to the surface above. .crx-btn-white is the one light-filled member — it keeps its own fill and gets a matching but inverted glass so it reads as the same material. */ .crx-send, .ssd-sea-generate { background: var(--oz-cta-fill) !important; box-shadow: var(--oz-glass-btn) !important; } .crx-btn-white { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(0, 0, 0, .08), 0 8px 20px -12px rgba(0, 0, 0, .6) !important; } /* =========================================================================== 8 · ADJUSTMENTS FROM REVIEW Two departures from the reference, both requested after seeing it in place. Kept together and named so they are easy to find and easy to reverse. ========================================================================= */ /* (a) Media surfaces are rounder than the 12px container step. The purple selection ring is a box-shadow, so it inherits whatever radius its element has — making the frame rounder is what makes the ring rounder. This is a fifth radius value, which the reference does not have; turn this one knob to change every ringed surface at once. */ :root { --oz-media: 18px; } .ssd-sb-frame, .ssd-sef-card, .ssd-kf-card, .ssd-scene-modal .ssd-kf-card, .ssd-vsb-row, .ssd-vsb-thumb, .ssd-campick-card, .ssd-campick-thumb, .ss-picker-card, .ssd-dccard-thumb, .ssd-dccard-scene .ssd-dccard-thumb, .ssd-take-thumb, .ssd-hist-thumb, .ssd-outline-thumb, .ssd-preved-thumb, .ssd-files-thumb, .ssd-catalog-thumb, .ssd-ref-thumb, .ssd-detail-ref-grid .ssd-ref-thumb, .ssd-detail-frame, .ss-lib-thumb, .ss-lib-style-thumb, .ss-shell-style-thumb, .ss-preview-thumb, .ss-frame-img, .crx-thumb, .crx-refthumb, .crx-var-thumb, .crx-preview, .crx-var-card, .crx-adv-img, #cpgRoot .cpg-refthumb, #cpgRoot .cpg-asset-frame--main, #cpgRoot .cpg-asset-frame--angle, #cpgRoot .cpg-media-card, #ssdQueueDock .ssd-qd-thumb, body.cpg-open #ssdQueueDock .ssd-qd-thumb, .ssd-el-tile, .ssd-gen-composer-tile, .ss-lib-scenecard, .ss-lib-studio-tile, #cpgRoot .cpg-kf-box, #cpgRoot .pickmedia, #cpgRoot .dthumb { border-radius: var(--oz-media) !important; } /* (b) Tabs carry the navigation, so they hold more weight than the museum-label 500 the system sets for the rest of the chrome. The active tab goes heavier still, since its underline is the only other thing marking it. */ #cpgRoot .ctab, #cpgRoot .cpg-tabstrip .ctab, #cpgRoot .ptab, .setab, .ssd-se-tabs .setab, .dr-tab, .ssd-detail-step-tab, .card-modal-tab, .ssd-detail-tabs-card .card-modal-tab, .ssd-margin-tab, .ss-tab { font-weight: 700 !important; } #cpgRoot .ctab.on, #cpgRoot .cpg-tabstrip .ctab.on, #cpgRoot .ptab.on, .setab.is-active, .setab.on, .dr-tab.is-active, .ssd-detail-step-tab.is-active, .card-modal-tab.active, .ssd-margin-tab.is-active, .ss-tab.active { font-weight: 800 !important; } /* …except Library / Studio / Tools, which left both lists above. Founder: "the Library Studio and Tools text is way too heavy and way too big — make it look the same as the buttons inside the prompt box." Those are .cpg-chip: 13px at the system's museum-label 500. Three words in a segmented track are a switch, not the document's tab bar, so they take the chip's type. ::after is the ghost that reserves the label's width (creator-page.css) — it has to move with the real label or it reserves a width nothing uses. */ #cpgRoot .cpg-navtab, #cpgRoot .cpg-navtab > i, #cpgRoot .cpg-navtab::after, #cpgRoot .cpg-navtab.on, #cpgRoot .cpg-navtab.on > i { font-size: 13px !important; font-weight: 500 !important; } /* =========================================================================== 9 · SECOND REVIEW PASS ========================================================================= */ /* (a) The travelling selection markers. Library/Studio/Tools and the monitor/folder/clock switch both draw their selected state as ONE element that slides between positions, and both were pinned at 7px — square against a 28-30px control. They are separate elements from the buttons they mark, so the button lists in section 2d never reached them. */ #cpgRoot .cpg-navind, #cpgRoot .cpg-navtab, #cpgRoot .cpg-navgroup, #cpgRoot .cpg-viewind, #cpgRoot .cpg-viewbtn, #cpgRoot .cpg-viewswitch, #cpgRoot .cpg-tabind, #cpgRoot .cpg-viewtog, #cpgRoot .cpg-viewtog button, .ssd-sb-switch { border-radius: var(--oz-ghost) !important; } /* (b) "Add variation" used to be a small grey chip and was pilled here. It is the Add Angle button now — one builder, one class (.cpg-addbtn) — and that button keeps its own 12px corner deliberately: the founder pointed at it as the thing to copy, so it is the reference, not a stray. */ /* (c) Hover was snapping rather than easing: most of these rules change background or box-shadow with no transition declared, and the new glass makes that jump obvious. One easing for every control the system restyles. `transform` is deliberately NOT transitioned — several hovers translate the button by 1px, which is the jitter, so those are cancelled below instead. */ [data-hovbright], .ssd-feat-btn, .ssd-feat-btn.is-primary, .ss-shell-btn, .ssd-projset-save, .ssd-doc-home, .crx-btn-purple, .crx-btn-ghost, .crx-btn-white, .crx-btn-danger, .crx-send, .crx-confirm-btn, .ssd-sea-generate, .ssd-ve-generate, .ssd-gen-composer-launch, .ssd-detail-prompt-generate, .ssd-scene-desc-generate, .ss-picker-gen-btn, .ssd-dcdraft-submit, .ssd-dcdraft-cancel, .ssd-confirm-btn, .ss-update-go, .ssd-gen-cancel, .dr-btn-primary, .dr-btn-secondary, .dr-btn-ghost, .dr-btn-danger, .dr-send, .dr-icobtn, .ssa-send-btn, .ssa-icobtn, .ssd-composer-send, .ssd-selbar-btn, .ssd-fmt-btn, .ssd-draw-btn, .ssd-scenes-iconbtn, .ssd-sb-actbtn, .ssd-doc-menu-btn, .ssd-dccard-menu-btn, .ssd-detail-icon-btn, .ssd-ef-btn, .ss-shell-railbtn, .ss-mini-btn, .ss-action-btn, .crx-refbtn, .crx-dd-btn, #cpgRoot .cpg-send-btn, #cpgRoot .cpg-cta, #cpgRoot .cpg-iconbtn, #cpgRoot .cpg-addbtn, #cpgRoot .cpg-library-generate, #cpgRoot .cpg-media-btn, #cpgRoot .fmtbtn, #cpgRoot .cpg-navtab, #cpgRoot .cpg-viewbtn, .setab, .dr-tab, .ctab { transition: box-shadow .22s cubic-bezier(.33, 1, .68, 1), background .22s cubic-bezier(.33, 1, .68, 1), border-color .22s cubic-bezier(.33, 1, .68, 1), color .16s ease-out, filter .22s ease-out !important; } /* The 1px lift. On a filled button whose hover now changes light instead of position, the translate reads as jitter — especially on the round send buttons, where it fights the bloom. */ .ssd-composer-send:hover, .ssd-doc-home:hover, .ssd-docside-pill:hover, .ssd-docside-comment-preview:hover, [data-hovbright]:hover { transform: none !important; } @media (prefers-reduced-motion: reduce) { [data-hovbright], .crx-btn-purple, #cpgRoot .cpg-cta, .ssd-composer-send { transition: none !important; } } /* =========================================================================== 10 · THIRD REVIEW PASS ========================================================================= */ /* (a) The generate button: white glyph, a glow, and two border beams that run the rim on hover (the magicui border-beam, done as one conic gradient rather than two absolutely-positioned children — the button has no wrapper to hang them off). Each beam is a comet: 70deg of tail fading up to a bright head, then a hard cut. Two of them, 180deg apart, rotated by an animated angle and masked to a 1px ring so only the edge lights up. @property makes the angle interpolatable — without it a custom property animates as a discrete step and the sweep would jump. ONE pass per hover, and the fade-out is inside the keyframes: hovering starts the run, the run finishes on its own and the rim goes dark again. It does not idle-loop while the pointer sits there. */ @property --oz-spin { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes oz-beam-run { 0% { --oz-spin: 0deg; opacity: 0; } 7% { opacity: 1; } 88% { opacity: 1; } 100% { --oz-spin: 360deg; opacity: 0; } } #cpgRoot .cpg-send-btn, .ssd-scene-modal .ssd-composer-send, .ssd-sea-generate, .ssd-ve-generate, .ssd-gen-composer-launch { position: relative !important; isolation: isolate; color: #fff !important; } #cpgRoot .cpg-send-btn svg, .ssd-scene-modal .ssd-composer-send svg, .ssd-sea-generate svg, .ssd-ve-generate svg, .ssd-gen-composer-launch svg { color: #fff !important; /* the glow reads on the glyph itself, so it survives the dark fill */ filter: drop-shadow(0 0 6px rgba(196, 166, 255, .85)) drop-shadow(0 0 14px rgba(140, 90, 255, .55)) !important; transition: filter .22s ease-out !important; } #cpgRoot .cpg-send-btn:hover svg, .ssd-scene-modal .ssd-composer-send:hover svg, .ssd-sea-generate:hover svg { filter: drop-shadow(0 0 8px rgba(226, 208, 255, 1)) drop-shadow(0 0 20px rgba(160, 110, 255, .8)) !important; } #cpgRoot .cpg-send-btn::after, .ssd-scene-modal .ssd-composer-send::after, .ssd-sea-generate::after, .ssd-ve-generate::after, .ssd-gen-composer-launch::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; /* the ring's thickness */ /* Each head sits at the clockwise end of its own trail — the direction the rotation carries it — so the tail streams out behind the light. */ background: conic-gradient(from var(--oz-spin), transparent 0deg 110deg, rgba(214,186,255,0) 110deg, rgba(214,186,255,.95) 180deg, transparent 181deg 290deg, rgba(255,255,255,0) 290deg, rgba(255,255,255,.95) 360deg); /* keep only the 1px band: fill minus content-box leaves the border ring */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .24s ease-out; pointer-events: none; z-index: 2; } #cpgRoot .cpg-send-btn:hover::after, .ssd-scene-modal .ssd-composer-send:hover::after, .ssd-sea-generate:hover::after, .ssd-ve-generate:hover::after, .ssd-gen-composer-launch:hover::after { /* forwards, so the last keyframe (opacity 0) is what's left standing */ animation: oz-beam-run 1.7s linear 1 forwards; } @media (prefers-reduced-motion: reduce) { #cpgRoot .cpg-send-btn:hover::after, .ssd-scene-modal .ssd-composer-send:hover::after, .ssd-sea-generate:hover::after, .ssd-ve-generate:hover::after, .ssd-gen-composer-launch:hover::after { animation: none; } } /* (b) The eye sat too far from its label. .cpg-cta declares gap:8px, and the pill padding added in section 7 widened the ends on top of it. */ #cpgRoot .cpg-cta { gap: 6px !important; padding: 0 14px !important; } #cpgRoot .cpg-cta > svg { margin-right: -1px !important; } /* (c) Picker tiles. The frame was 176x104 landscape with object-fit:cover, so a full-body character was cropped to whatever crossed the middle — the reason the character reads as a skirt and the props lose their tops. The frame is square now and the artwork is CONTAINed, so the whole asset is visible. */ #cpgRoot .pickitem .pickmedia img, #cpgRoot .pickitem .pickmedia video { object-fit: contain !important; background: rgba(255, 255, 255, .02); } /* …except a DOCUMENT tile, which is not an asset being inspected but a preview of a script. Founder: "make the tile previews for documents take up the full thing so there's no empty space. if the image is too small just expand it out." Containing a screenshot in a 196×116 frame is exactly the empty space they mean — cover fills it, and a small source is scaled up rather than floated in the middle of a dark box. Kept next to the rule it excepts, and more specific than it, so neither can be changed without seeing the other. */ #cpgRoot .pickitem.cpg-doctile .pickmedia img, #cpgRoot .pickitem.cpg-doctile .pickmedia canvas { object-fit: cover !important; width: 100% !important; height: 100% !important; background: none; } #cpgRoot .pickitem .pickmedia { border-radius: var(--oz-media) !important; } /* (d) The name is a sibling of the frame now (creator-page.js), so it sits under the tile and is always readable — no hover required. */ #cpgRoot .pickname { position: static !important; opacity: 1 !important; background: none !important; padding: 9px 4px 0 !important; display: block !important; color: var(--cpg-ink, #f3f3f6) !important; font: 500 12.5px/1.35 var(--sans) !important; text-align: center !important; white-space: normal !important; overflow-wrap: anywhere !important; } /* (e) The panel clipped hard at both ends. The existing mask only faded the top; the bottom now dissolves well before the tab strip, and long horizontal strips fade at their left and right edges the same way. Every picker scroller carries data-cpg-pickscroll — the reference picker's .pickpanel, the media chooser, styles, stages — so they all dissolve the same way rather than each clipping to its own inline padding. The fade band and the bottom padding are the same 150px on purpose: a grid scrolled to its end parks its last row exactly at the top of the band, so the row you scrolled to is fully readable and only rows still travelling past it dissolve. */ The mask is on .pickclip, NOT on the scroller: Chrome drops a mask on a composited scrolling element, so it survived only while the tiles' entrance animation was forcing main-thread repaints and vanished the moment that settled. .pickclip wraps the scroller, never scrolls itself, and just holds the gradient. */ #cpgRoot [data-cpg-pickscroll] { padding-bottom: 150px !important; -webkit-mask-image: none !important; mask-image: none !important; } #cpgRoot .pickclip { flex: 1; min-height: 0; display: flex; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 150px), transparent calc(100% - 20px)); mask-image: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 150px), transparent calc(100% - 20px)); } #cpgRoot .pickclip > * { flex: 1 1 auto; min-height: 0; width: 100%; } /* The variations strip DOES scroll sideways, so it keeps its edge fade. The prompt dock's chip row and the tab strip are OUT of it: neither scrolls, so the fade wasn't signalling "more this way" — it just dimmed the @ button, the credit count and the outermost tab labels for no reason (founder: "remove the weird fading on the left and right side of the prompt boxes"). The fade belongs on the two RULES in the tab row instead, which is where it reads as a line dissolving rather than as faded controls. */ /* …and the variation strip had caught the same fade, for the same bad reason: founder, again — "it gets faded off at the edge". A strip of TILES needs no edge signal invented for it; a half-visible tile at the boundary already says there is more that way, and dimming the first and last variation just made two real choices look unavailable. No mask. */ #cpgRoot .cpg-varstrip { -webkit-mask-image: none !important; mask-image: none !important; } /* The hairline under the whole strip and the active tab's 2px underline both fade out at BOTH ends — the strip-level mask used to catch only whichever tab sat within 28px of the panel edge, so the leftmost tab's underline was the one thing that faded. Masking the lines themselves leaves the labels at full strength. */ #cpgRoot .cpg-tabstrip::after { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); } #cpgRoot .cpg-tabind { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%, #000 70%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 30%, #000 70%, transparent 100%); } /* (f) Library grid hover icons keep off the artwork's middle. This block used to also set `min-height:260px` and `object-fit:contain` on EVERY .gcard. Both were meant for character/prop cutouts only, and creator-page.css already scopes those to .gcard--character/--prop. Applied to all cards they broke the gallery: 260px cards overflowed the grid's 192px rows and overlapped the row below, and contained art left every style thumbnail letterboxed inside a lighter box that read as a border. The grid row IS the card size, and the picture fills it. */ #cpgRoot .gcard .cpg-media-btn, #cpgRoot .gcard .gfav { top: 8px !important; transform: none !important; } /* =========================================================================== 11 · AUDIT CORRECTIONS A full inventory of the app's 664 button surfaces, cross-checked against this sheet, found that section 7's filled list had been assembled from selector NAMES rather than from what each button actually looks like at rest. The corrections are grouped by what went wrong. ========================================================================= */ /* (a) CONFIRM DIALOGS — the worst of it. Both confirm families use the bare class as their GHOST and a sibling modifier for the destructive action: .crx-confirm-btn is subtle with .is-primary / .is-danger beside it (creators.css:841-849), and .ssd-confirm-btn is a ghost with .ghost / .danger (storyboard.css:3246). Filling the bare class painted Cancel, Confirm and Delete the same purple — the red was the only thing telling Delete apart from Cancel, and the sheet's own "never more than one filled button per section" rule was broken in the one place where it matters most. */ .crx-confirm-btn, .crx-confirm-btn.is-ghost, .ssd-confirm-btn, .ssd-confirm-btn.ghost { border-radius: var(--oz-ghost) !important; background: rgba(255, 255, 255, .06) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10) !important; color: var(--ink-2, rgba(255,255,255,.66)) !important; } /* Destructive keeps its own colour. It is the only red in the system and it is carrying meaning, not decoration. */ .crx-confirm-btn.is-danger, .ssd-confirm-btn.danger, .crx-btn-danger, .dr-btn-danger { border-radius: var(--oz-ghost) !important; background: linear-gradient(180deg, #ff5f56, #d92d20) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 120, 110, .45), 0 8px 20px -12px rgba(217, 45, 32, .8) !important; color: #fff !important; } /* (b) Grey subtle-fill secondaries that the name-based list promoted to CTAs. All three are small controls pinned in the corner of a textarea; their grey label and 1px grey border are separate declarations that survived the fill, so they drew a second offset edge over the new rim. */ .ssd-detail-prompt-generate, .ssd-scene-desc-generate, .ss-picker-gen-btn { border-radius: var(--oz-ghost) !important; background: rgba(189, 189, 189, .1) !important; box-shadow: none !important; } /* (c) Hovers that still moved the box. The system changes light, not position, so a 1px lift under a glass pane reads as jitter. */ .ssd-confirm-btn:hover, .ssd-gen-composer-launch:hover, .ssd-margin-foot button:hover, .ssd-inspector-head-actions button:hover, .ssd-inspector-actions button:hover, .ssd-comment-resolve:hover, .ssd-docside-card-actions button:hover, .ssd-comment-jump:hover, .ssd-media-action:hover, .ssd-media-dl:hover { transform: none !important; } /* (d) Hovers that DARKEN. Both inherited `filter: brightness(.92)` from the white-button recipe they used to be — correct for a light fill, wrong now that the rest state is a dark pane the system brightens on hover. */ #cpgRoot .cpg-send-btn:hover, .ssa-send-btn:hover, #cpgRoot [data-hovbright]:hover { filter: none !important; } .ssa-send-btn:hover, .dr-send:hover, #cpgRoot .cpg-library-generate:hover, .ssd-detail-action-btn.brand:hover, .crx-confirm-btn.is-primary:hover { box-shadow: var(--oz-glass-btn-hover) !important; } /* (e) Hovers that flip to var(--coral). That family is no longer used anywhere else in the button system, so those flips now point at an orphan colour. Delete affordances go red; the rest pick up the accent. */ .ssd-dccard-del-btn:hover{ background: rgba(217, 45, 32, .9) !important; color: #fff !important; } .ssd-tools .ssd-tools-close:hover, .ss-filename button:hover { color: var(--ink-1, #f2f2f4) !important; } /* (f) Buttons no selector in this sheet reached — they kept whatever radius their own file gave them while everything around them was retagged. */ .ss-char-slot-regen, .ssd-fwd-row, .ssd-comment-jump, .ssd-media-dl, .ssd-media-action, .ssd-media-hotbar .ssd-media-action, .ssd-queue-cancel, .ssd-queue-head button, .ssd-debug-toggle, .ssd-docside-pill-delete, .ssd-cref-add, .ssd-vshot-add, .ssd-queued-banner button, .ssd-ef-close, .ssd-ve-close, .ssd-composer-opt-btn, .ssd-vdlg-speaker, .ssd-hist-restore, .ssd-vh-restore, .ssd-vh-close, .ss-picker-close, .ss-picker-card-edit, .ss-picker-card-regen, .ss-style-ref-add, .ssd-detail-blank-close, .ssd-detail-close, .ssd-detail-options-link, .ssd-dccard-close, .ssd-dccard-nav-prev, .ssd-dccard-nav-next, .ssd-tools .ssd-tools-close, .ss-filename button, .ss-toast-btn, .ssd-detail-endframe-preview, .ssd-detail-endframe-add, .ssd-vshot-dur { border-radius: var(--oz-ghost) !important; } .ssd-docside-card-close { border-radius: 50% !important; } .ssd-cm-item, .ssd-detail-dropdown-main, .ssd-detail-dropdown-icon, .ssd-detail-dropdown-item-main, .ssd-detail-dropdown-create-btn, .ssd-kf-empty, .ssd-kf-add, .ss-picker-add { border-radius: var(--oz-card) !important; } .ssd-char-mention-popup .ssd-cm-item { border-radius: 0 !important; } .ssd-cref-slot { border-radius: var(--oz-media) !important; } /* (g) The same easing, for the ones added above plus the ones the audit found changing colour with no transition declared at all. */ .ssd-comment-jump, .ssd-media-action, .ssd-media-dl, .ss-toast-btn, .dr-send, .ssd-tools .ssd-tools-close, .ss-filename button, .ss-update-go, .ssd-queue-cancel, .ssd-ve-close, .ssd-ef-close, .ssd-detail-close, .ssd-dccard-close, .ss-picker-close, .ssd-vh-close, .ss-debug-btn.is-go, .ssd-detail-action-btn.brand, .crx-confirm-btn, .ssd-confirm-btn { transition: box-shadow .22s cubic-bezier(.33, 1, .68, 1), background .22s cubic-bezier(.33, 1, .68, 1), border-color .22s cubic-bezier(.33, 1, .68, 1), color .16s ease-out, filter .22s ease-out !important; } /* (h) .crx-btn-white sits in the same footer row as .crx-btn-purple, so the two were rendering side by side at 22.5px and 36px. It is a filled button that happens to be light — same pill, its own inverted glass. */ .crx-btn-white { border-radius: var(--oz-pill) !important; } /* (i) The scene chips in the document rail read as pills, not frames. --oz-media (18px) is a radius for a 300px picture; the chip is 36px tall at rest, so 18px eats the corner entirely and a column of them is a strip of lozenges (founder: "make the scene cards more square"). 4px: not a raw corner, small enough that a 62px chip still reads as a frame. */ #cpgRoot .dscene .dthumb, #cpgRoot .dthumb { border-radius: 4px !important; } /* …and the chip stops drawing an outline at rest. The chip carried a 1px ring and the blank-scene placeholder inside it carried another, so a rail of unfilled scenes was a column of empty boxes — founder: "remove all the extra lines besides the line with the numbers on it". The rail line and its number nodes stay; so does the purple ring on the hovered / open chip, which is state, not decoration. */ #cpgRoot .dscene .dthumb { box-shadow: none !important; } #cpgRoot .dscene .dthumb-ph { box-shadow: none !important; } /* Founder: "when a scene card is activated, the purple outline should be the same exact width as the outline in the start and end frames." Both read the creator's edge token now — one purple weight, set in one place. */ #cpgRoot .dscene.is-active .dthumb, #cpgRoot .dscene:hover .dthumb { box-shadow: 0 0 0 var(--cpg-outline-width, 1px) var(--cpg-outline-color, #B18CFF) !important; } /* ═══ 12 · Credits: one scale, one shape ═══════════════════════════════════ Founder: "credit packs page is still insanely fucking retarded… current balance = 1 font, credit amount to the right is an entirely new font + font size. do you see the issue??? the entire pop up is a mess. padding is different everywhere." They are right, and the reason is that this modal was assembled from four different eras: a pixel-font HUD numeral, a 12.5px sub-line, --fs-h2 rate figures, --fs-small captions, and five card paddings between 12px and 16px. Every one of those was defensible on its own and the pile of them is not. So the whole modal is put on the scale here, in the last layer, where it cannot be re-broken by an earlier one: · body text, labels, numbers, buttons → --fs-body · the two figures that ARE the headline (the pack rate, the monthly total) → --fs-h2 · section kickers → --fs-micro mono, the house label · every card → the same 14px 16px The balance row is the founder's specific example: the label and the number are now the same size and the same face, differing only in weight — which is what makes it read as one row rather than two designs meeting. */ #ssShellTopUp .ss-shell-packs, #ssShellTopUp .ss-shell-packs *:not(.material-symbols-outlined) { font-family: var(--sans) !important; } #ssShellTopUp .ss-shell-packs .ss-shell-modal-sub, #ssShellTopUp .ss-shell-packs .ss-shell-bal > span:first-child, #ssShellTopUp .ss-shell-packs .ss-shell-bal-num, #ssShellTopUp .ss-shell-packs .ss-shell-packsel, #ssShellTopUp .ss-shell-packs .ss-shell-pack-renew, #ssShellTopUp .ss-shell-packs .ss-shell-pack-rate span, #ssShellTopUp .ss-shell-packs .ss-shell-sum-row, #ssShellTopUp .ss-shell-packs .ss-shell-allowance-meta, #ssShellTopUp .ss-shell-packs .ss-shell-btn, #ssShellTopUp .ss-shell-packs .ss-shell-proceed { font-size: var(--fs-body, 15px) !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-transform: none !important; } /* The balance number and the two headline figures. Weight and colour carry the emphasis; size is only allowed to change where the thing genuinely IS the headline of its card. */ #ssShellTopUp .ss-shell-packs .ss-shell-bal-num { font-weight: 700 !important; } #ssShellTopUp .ss-shell-packs .ss-shell-bal > span:first-child { font-weight: 500 !important; } #ssShellTopUp .ss-shell-packs .ss-shell-pack-rate strong, #ssShellTopUp .ss-shell-packs .ss-shell-sum-due strong { font-size: var(--fs-h2, 17px) !important; font-weight: 700 !important; letter-spacing: 0 !important; } #ssShellTopUp .ss-shell-packs .ss-shell-pack-kicker { font: 500 var(--fs-micro, 11px)/1 var(--mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; } /* One card padding, one card radius. Five values became one. */ #ssShellTopUp .ss-shell-packs .ss-shell-bal, #ssShellTopUp .ss-shell-packs .ss-shell-pack-rate, #ssShellTopUp .ss-shell-packs .ss-shell-pack-renew, #ssShellTopUp .ss-shell-packs .ss-shell-pack-summary { padding: 14px 16px !important; } #ssShellTopUp .ss-shell-packs .ss-shell-bal { margin-top: 14px !important; } #ssShellTopUp .ss-shell-packs .ss-shell-pack-rate, #ssShellTopUp .ss-shell-packs .ss-shell-pack-renew, #ssShellTopUp .ss-shell-packs .ss-shell-pack-summary { margin-top: 14px !important; } #ssShellTopUp .ss-shell-packs .ss-shell-pack-card .ss-shell-proceed, #ssShellTopUp .ss-shell-packs .ss-shell-btn { margin-top: 14px !important; } /* Founder: "manage credit packs and credit usage history are different shapes. match usage history to credit packs." They were: the filled one takes the pill from the filled-button family above, the outlined one kept the 9px radius it was born with. A pair of buttons doing the same kind of job in the same stack is one shape with two fills. */ .ss-shell-pop .ss-shell-btn, .ss-shell-modal .ss-shell-btn, #ssShellTopUp .ss-shell-packs .ss-shell-btn { height: 44px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center; justify-content: center; } /* Founder: "comment outline and buttons should appear orange as well." .ssd-dcdraft-submit rides in the filled-CTA family above, which paints every member with --oz-cta-fill — a purple glass pane. That is right for a Generate or a Send; it is wrong for the one control in the editor that is deliberately NOT the brand accent. A comment is orange all the way through: the highlight in the script, the circle on the rail, the card's outline, and these two. The MATERIAL is unchanged — same specular sweep, same rising core, same rim, so it is still an ORYZO filled button and the glass box-shadow above still fits it. Only the core's hue moves. */ :root { --oz-cta-fill-comment: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.07) 14%, rgba(255,255,255,0) 38%), radial-gradient(130% 190% at 50% 118%, #ffb066 0%, #f97316 38%, #c2540a 72%, #7a3204 100%); } .ssd-dcdraft-submit { background: var(--oz-cta-fill-comment) !important; } /* Disabled stays the flat grey it already was — an unfilled comment box must not look like a live button, whatever colour the live one is. */ .ssd-dcdraft-submit:disabled { background: var(--ssd-hover, rgba(255,255,255,.08)) !important; color: var(--muted) !important; box-shadow: none !important; } .ssd-dcdraft-cancel { color: var(--ssd-comment-orange, #F97316) !important; } /* Founder (2026-09-03): "the dropdown container + preview button should not be this round it needs to match the rest of the buttons." The VOICE row's select and its Preview leave the pill family for a 10px corner, the one the toast and the menus draw. Specificity, not order, wins here: the pill rule above is !important too, so the selector carries the row's own class. */ #cpgRoot .cpg-field .cpg-field-ctl, #cpgRoot .cpg-field .cpg-field-play { border-radius: 10px !important; }