85453da49f
CodeQL / Analyze (javascript-typescript) (push) Waiting to run
Docs / Validate docs (push) Waiting to run
CodeQL / Analyze (actions) (push) Waiting to run
CodeQL / Analyze (python) (push) Waiting to run
Sync skills to ClawHub / Publish changed skills (push) Waiting to run
regression / regression-shards (style-16-prod style-9-prod style-17-prod iframe-render-compat variables-prod mp4-h265-sdr, shard-4) (push) Has been cancelled
regression / regression-shards (style-4-prod style-11-prod style-2-prod animejs-adapter typegpu-adapter parallel-capture-regression, shard-5) (push) Has been cancelled
regression / regression-shards (style-7-prod style-8-prod style-10-prod css-spinner-render-compat webm-transparency mp4-h264-sdr webm-vp9, shard-3) (push) Has been cancelled
regression / regression-shards (sub-composition-video style-18-prod raf-ball-render-compat font-variant-numeric sub-comp-t0 sub-comp-id-selector, shard-7) (push) Has been cancelled
Windows render verification / Detect changes (push) Has been cancelled
Windows render verification / Preflight (lint + format) (push) Has been cancelled
Windows render verification / Render on windows-latest (push) Has been cancelled
Windows render verification / Tests on windows-latest (push) Has been cancelled
CI / Detect changes (push) Has been cancelled
CI / Build (push) Has been cancelled
CI / Lint (push) Has been cancelled
CI / Fallow audit (push) Has been cancelled
CI / Format (push) Has been cancelled
CI / Typecheck (push) Has been cancelled
CI / Test (push) Has been cancelled
CI / Producer: integration tests (push) Has been cancelled
CI / Producer: unit tests (push) Has been cancelled
CI / File size check (push) Has been cancelled
CI / Test: skills (push) Has been cancelled
CI / Skills: manifest in sync (push) Has been cancelled
CI / CLI: npx shim (macos-latest) (push) Has been cancelled
CI / CLI: npx shim (ubuntu-latest) (push) Has been cancelled
CI / CLI: npx shim (windows-latest) (push) Has been cancelled
CI / SDK: unit + contract + smoke (push) Has been cancelled
CI / Test: runtime contract (push) Has been cancelled
CI / Studio: load smoke (push) Has been cancelled
CI / Smoke: global install (push) Has been cancelled
CI / CLI smoke (required) (push) Has been cancelled
CI / Semantic PR title (push) Has been cancelled
Player perf / Detect changes (push) Has been cancelled
Player perf / Preflight (lint + format) (push) Has been cancelled
Player perf / player-perf (push) Has been cancelled
Player perf / Perf: drift (push) Has been cancelled
Player perf / Perf: fps (push) Has been cancelled
Player perf / Perf: parity (push) Has been cancelled
Player perf / Perf: scrub (push) Has been cancelled
Player perf / Perf: load (push) Has been cancelled
preview-regression / Detect changes (push) Has been cancelled
preview-regression / Preflight (lint + format) (push) Has been cancelled
preview-regression / Preview parity (push) Has been cancelled
preview-regression / preview-regression (push) Has been cancelled
regression / regression (push) Has been cancelled
regression / Detect changes (push) Has been cancelled
regression / Preflight (lint + format) (push) Has been cancelled
regression / regression-shards (hdr-regression style-5-prod style-3-prod mov-prores, shard-1) (push) Has been cancelled
regression / regression-shards (overlay-montage-prod style-12-prod chat missing-host-comp-id png-sequence portrait-edge-bleed, shard-6) (push) Has been cancelled
regression / regression-shards (style-13-prod style-6-prod vignelli-stacking gsap-letters-render-compat audio-mux-parity, shard-8) (push) Has been cancelled
regression / regression-shards (style-15-prod hdr-hlg-regression style-1-prod many-cuts vfr-screen-recording render-symlinked-assets, shard-2) (push) Has been cancelled
484 lines
8.9 KiB
CSS
484 lines
8.9 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
background: #000000;
|
|
font-family:
|
|
Inter,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
"Segoe UI",
|
|
sans-serif;
|
|
}
|
|
|
|
.vscode-theme-scene {
|
|
--activity-bg: #181818;
|
|
--activity-fg: #d7d7d7;
|
|
--activity-muted: #868686;
|
|
--activity-active: #0078d4;
|
|
--sidebar-bg: #181818;
|
|
--sidebar-fg: #cccccc;
|
|
--sidebar-border: #2b2b2b;
|
|
--tab-bg: #181818;
|
|
--tab-active-bg: #1f1f1f;
|
|
--tab-active-fg: #ffffff;
|
|
--tab-inactive-fg: #9d9d9d;
|
|
--tab-border: #2b2b2b;
|
|
--editor-bg: #1f1f1f;
|
|
--editor-fg: #cccccc;
|
|
--editor-line: rgba(255, 255, 255, 0.04);
|
|
--gutter-fg: #6e7681;
|
|
--gutter-active-fg: #cccccc;
|
|
--panel-bg: #181818;
|
|
--panel-border: #2b2b2b;
|
|
--status-bg: #181818;
|
|
--status-fg: #cccccc;
|
|
--status-border: #2b2b2b;
|
|
--title-bg: #181818;
|
|
--title-fg: #cccccc;
|
|
--token-comment: #6a9955;
|
|
--token-keyword: #c586c0;
|
|
--token-function: #dcdcaa;
|
|
--token-string: #ce9178;
|
|
--token-number: #b5cea8;
|
|
--token-variable: #9cdcfe;
|
|
--token-parameter: #9cdcfe;
|
|
--token-operator: #d4d4d4;
|
|
--token-punctuation: #d4d4d4;
|
|
--token-class-name: #4ec9b0;
|
|
position: relative;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
background:
|
|
linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
|
|
url("../assets/background.jpeg") center / cover no-repeat;
|
|
color: var(--editor-fg);
|
|
}
|
|
|
|
.scene-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 54px 70px 92px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
perspective: 2200px;
|
|
perspective-origin: 56% 52%;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: space-between;
|
|
min-height: 66px;
|
|
text-shadow:
|
|
0 2px 12px rgba(0, 0, 0, 0.42),
|
|
0 14px 34px rgba(0, 0, 0, 0.32);
|
|
}
|
|
|
|
.kicker {
|
|
margin: 0 0 7px;
|
|
color: var(--gutter-fg);
|
|
font-size: 15px;
|
|
font-weight: 650;
|
|
text-transform: uppercase;
|
|
text-shadow:
|
|
0 2px 8px rgba(0, 0, 0, 0.48),
|
|
0 10px 26px rgba(0, 0, 0, 0.36);
|
|
}
|
|
|
|
.title {
|
|
margin: 0;
|
|
color: var(--editor-fg);
|
|
font-size: 44px;
|
|
line-height: 1;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.source-note {
|
|
width: 510px;
|
|
color: var(--gutter-fg);
|
|
font-size: 16px;
|
|
line-height: 1.35;
|
|
text-align: right;
|
|
text-shadow:
|
|
0 2px 10px rgba(0, 0, 0, 0.46),
|
|
0 12px 30px rgba(0, 0, 0, 0.34);
|
|
}
|
|
|
|
.workbench {
|
|
height: 824px;
|
|
display: grid;
|
|
grid-template-columns: 54px 290px 1fr;
|
|
grid-template-rows: 36px 1fr 26px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--sidebar-border);
|
|
border-radius: 8px;
|
|
background: var(--editor-bg);
|
|
box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
|
|
transform: translateZ(0);
|
|
transform-origin: 82% 50%;
|
|
transform-style: preserve-3d;
|
|
will-change: transform;
|
|
}
|
|
|
|
.titlebar {
|
|
grid-column: 1 / -1;
|
|
display: grid;
|
|
grid-template-columns: 120px 1fr 210px;
|
|
align-items: center;
|
|
background: var(--title-bg);
|
|
color: var(--title-fg);
|
|
border-bottom: 1px solid var(--tab-border);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.traffic {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding-left: 18px;
|
|
}
|
|
|
|
.traffic span {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.traffic span:nth-child(1) {
|
|
background: #ff5f57;
|
|
}
|
|
.traffic span:nth-child(2) {
|
|
background: #ffbd2e;
|
|
}
|
|
.traffic span:nth-child(3) {
|
|
background: #28c840;
|
|
}
|
|
|
|
.window-title {
|
|
justify-self: center;
|
|
opacity: 0.84;
|
|
}
|
|
|
|
.command-center {
|
|
justify-self: end;
|
|
width: 176px;
|
|
height: 22px;
|
|
margin-right: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
|
|
border-radius: 5px;
|
|
color: color-mix(in srgb, var(--title-fg), transparent 18%);
|
|
}
|
|
|
|
.activity {
|
|
grid-row: 2 / 3;
|
|
background: var(--activity-bg);
|
|
border-right: 1px solid var(--sidebar-border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
gap: 18px;
|
|
}
|
|
|
|
.activity-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
color: var(--activity-muted);
|
|
}
|
|
|
|
.activity-icon.active {
|
|
color: var(--activity-fg);
|
|
border-left: 2px solid var(--activity-active);
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.sidebar {
|
|
grid-row: 2 / 3;
|
|
background: var(--sidebar-bg);
|
|
color: var(--sidebar-fg);
|
|
border-right: 1px solid var(--sidebar-border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sidebar-title {
|
|
height: 38px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
color: var(--sidebar-fg);
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.section-title {
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0 14px;
|
|
background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
|
|
border-top: 1px solid var(--sidebar-border);
|
|
border-bottom: 1px solid var(--sidebar-border);
|
|
color: var(--sidebar-fg);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.tree {
|
|
padding: 8px 0;
|
|
font-size: 13px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.tree-row {
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 0 10px 0 18px;
|
|
color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tree-row.child {
|
|
padding-left: 34px;
|
|
}
|
|
|
|
.tree-row.selected {
|
|
background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
|
|
color: var(--sidebar-fg);
|
|
}
|
|
|
|
.editor-area {
|
|
grid-row: 2 / 3;
|
|
display: grid;
|
|
grid-template-rows: 36px 30px 1fr 138px;
|
|
min-width: 0;
|
|
background: var(--editor-bg);
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
background: var(--tab-bg);
|
|
border-bottom: 1px solid var(--tab-border);
|
|
}
|
|
|
|
.tab {
|
|
width: 205px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 13px;
|
|
border-right: 1px solid var(--tab-border);
|
|
background: var(--tab-active-bg);
|
|
color: var(--tab-active-fg);
|
|
border-top: 2px solid var(--activity-active);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.tab.inactive {
|
|
background: var(--tab-bg);
|
|
color: var(--tab-inactive-fg);
|
|
border-top-color: transparent;
|
|
}
|
|
|
|
.breadcrumbs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 0 18px;
|
|
color: var(--gutter-fg);
|
|
border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.editor {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: var(--editor-bg);
|
|
color: var(--editor-fg);
|
|
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
font-size: 18px;
|
|
line-height: 1.52;
|
|
}
|
|
|
|
.active-line {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
height: 28px;
|
|
background: var(--editor-line);
|
|
will-change: transform;
|
|
}
|
|
|
|
.code {
|
|
position: relative;
|
|
padding: 20px 36px 18px 0;
|
|
}
|
|
|
|
.line {
|
|
height: 28px;
|
|
display: grid;
|
|
grid-template-columns: 72px 1fr;
|
|
align-items: center;
|
|
}
|
|
|
|
.line-number {
|
|
padding-right: 18px;
|
|
color: var(--gutter-fg);
|
|
text-align: right;
|
|
user-select: none;
|
|
}
|
|
|
|
.line.is-active .line-number {
|
|
color: var(--gutter-active-fg);
|
|
}
|
|
|
|
.line-code {
|
|
white-space: pre;
|
|
}
|
|
|
|
.char {
|
|
opacity: 0;
|
|
}
|
|
|
|
.tok-comment {
|
|
color: var(--token-comment);
|
|
}
|
|
.tok-keyword {
|
|
color: var(--token-keyword);
|
|
}
|
|
.tok-function {
|
|
color: var(--token-function);
|
|
}
|
|
.tok-string {
|
|
color: var(--token-string);
|
|
}
|
|
.tok-number {
|
|
color: var(--token-number);
|
|
}
|
|
.tok-variable {
|
|
color: var(--token-variable);
|
|
}
|
|
.tok-parameter {
|
|
color: var(--token-parameter);
|
|
}
|
|
.tok-operator {
|
|
color: var(--token-operator);
|
|
}
|
|
.tok-punctuation {
|
|
color: var(--token-punctuation);
|
|
}
|
|
.tok-class-name {
|
|
color: var(--token-class-name);
|
|
}
|
|
|
|
.caret {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 3;
|
|
display: block;
|
|
width: 2px;
|
|
height: 22px;
|
|
background: var(--editor-fg);
|
|
pointer-events: none;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.terminal {
|
|
display: grid;
|
|
grid-template-rows: 32px 1fr;
|
|
background: var(--panel-bg);
|
|
border-top: 1px solid var(--panel-border);
|
|
color: var(--editor-fg);
|
|
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.panel-tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 22px;
|
|
padding: 0 18px;
|
|
border-bottom: 1px solid var(--panel-border);
|
|
color: var(--gutter-fg);
|
|
font-family:
|
|
Inter,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
"Segoe UI",
|
|
sans-serif;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.panel-tabs .active {
|
|
color: var(--editor-fg);
|
|
border-bottom: 1px solid var(--activity-active);
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.terminal-body {
|
|
padding: 12px 20px;
|
|
color: var(--editor-fg);
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.prompt {
|
|
color: var(--token-function);
|
|
}
|
|
|
|
.statusbar {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: var(--status-bg);
|
|
color: var(--status-fg);
|
|
border-top: 1px solid var(--status-border);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.status-left,
|
|
.status-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.remote {
|
|
align-self: stretch;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 12px;
|
|
margin-left: -12px;
|
|
background: var(--status-remote-bg, var(--activity-active));
|
|
color: var(--status-remote-fg, #ffffff);
|
|
}
|
|
|
|
svg {
|
|
display: block;
|
|
}
|