300 lines
12 KiB
CSS
300 lines
12 KiB
CSS
|
/* Grok Bot 0.18 shell tokens (dark) + conversation/computer layout. */
|
||
|
|
:root {
|
||
|
|
color-scheme: dark;
|
||
|
|
--cursor-accent: #599CE7;
|
||
|
|
--cursor-base: #F0F0F0;
|
||
|
|
--cursor-chrome: #141414;
|
||
|
|
--cursor-editor: #181818;
|
||
|
|
--cursor-added: #70B489;
|
||
|
|
--cursor-danger: #fc6b83;
|
||
|
|
--cursor-bg-editor: var(--cursor-editor);
|
||
|
|
--cursor-bg-chrome: var(--cursor-chrome);
|
||
|
|
--cursor-bg-secondary: color-mix(in srgb, var(--cursor-base) 8%, transparent);
|
||
|
|
--cursor-bg-tertiary: color-mix(in srgb, var(--cursor-base) 10%, transparent);
|
||
|
|
--cursor-bg-quaternary: color-mix(in srgb, var(--cursor-base) 6%, transparent);
|
||
|
|
--cursor-bg-input-surface: var(--cursor-bg-quaternary);
|
||
|
|
--cursor-text-primary: var(--cursor-base);
|
||
|
|
--cursor-text-secondary: color-mix(in srgb, var(--cursor-base) 74%, transparent);
|
||
|
|
--cursor-text-tertiary: color-mix(in srgb, var(--cursor-base) 60%, transparent);
|
||
|
|
--cursor-text-quaternary: color-mix(in srgb, var(--cursor-base) 44%, transparent);
|
||
|
|
--cursor-input-placeholder-foreground: var(--cursor-text-quaternary);
|
||
|
|
--cursor-stroke-tertiary: color-mix(in srgb, var(--cursor-base) 12%, transparent);
|
||
|
|
--cursor-stroke-secondary: color-mix(in srgb, var(--cursor-base) 16%, transparent);
|
||
|
|
--cursor-stroke-focused: #a9c85d;
|
||
|
|
--cursor-radius-base: 6px;
|
||
|
|
--cursor-radius-lg: 8px;
|
||
|
|
--cursor-radius-full: 999px;
|
||
|
|
--cursor-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
|
|
--cursor-font-size-lg: 14px;
|
||
|
|
--cursor-font-size-base: 13px;
|
||
|
|
--cursor-font-size-xs: 11px;
|
||
|
|
--cursor-spacing-0-75: 6px;
|
||
|
|
--cursor-box-shadow-sm: 0 2px 8px #0006;
|
||
|
|
--sand-fill-primary: #d8fa78;
|
||
|
|
--sand-fill-secondary: color-mix(in srgb, var(--cursor-base) 12%, transparent);
|
||
|
|
--sand-fill-accent: #c7ec6b;
|
||
|
|
--sand-fill-success: #70B489;
|
||
|
|
--sand-fill-bubble-agent: #20231f;
|
||
|
|
--sand-fill-bubble-user: #2a2d27;
|
||
|
|
--sand-text-on-color: #171914;
|
||
|
|
--sand-border-weak: var(--cursor-stroke-tertiary);
|
||
|
|
--safe-top: env(safe-area-inset-top, 0px);
|
||
|
|
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
||
|
|
}
|
||
|
|
|
||
|
|
* { box-sizing: border-box; }
|
||
|
|
html, body, #root { width: 100%; height: 100%; margin: 0; overflow: hidden; }
|
||
|
|
button, textarea, input { font: inherit; color: inherit; }
|
||
|
|
button { cursor: pointer; }
|
||
|
|
textarea, input { font-size: 16px; }
|
||
|
|
.sand-shell {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 280px minmax(0, 1fr);
|
||
|
|
width: 100%;
|
||
|
|
height: 100dvh;
|
||
|
|
color: var(--cursor-text-primary);
|
||
|
|
background: var(--cursor-bg-editor);
|
||
|
|
font-family: var(--cursor-font-family-sans);
|
||
|
|
}
|
||
|
|
.sand-shell button:disabled { cursor: not-allowed; }
|
||
|
|
|
||
|
|
.sand-agents-sidebar {
|
||
|
|
position: relative;
|
||
|
|
z-index: 3;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
min-width: 0;
|
||
|
|
min-height: 0;
|
||
|
|
background: var(--cursor-bg-chrome);
|
||
|
|
border-right: 1px solid var(--cursor-stroke-tertiary);
|
||
|
|
padding-top: var(--safe-top);
|
||
|
|
}
|
||
|
|
.sand-agents-sidebar__header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
height: 50px;
|
||
|
|
padding: 0 12px 0 16px;
|
||
|
|
border-bottom: 1px solid var(--cursor-stroke-tertiary);
|
||
|
|
}
|
||
|
|
.sand-agents-sidebar__header strong { font-size: var(--cursor-font-size-lg); }
|
||
|
|
.sand-agents-sidebar__new {
|
||
|
|
width: 28px; height: 28px; padding: 0;
|
||
|
|
color: var(--cursor-text-secondary);
|
||
|
|
background: transparent; border: 0; border-radius: var(--cursor-radius-lg);
|
||
|
|
}
|
||
|
|
.sand-agents-sidebar__new:hover { background: var(--cursor-bg-secondary); }
|
||
|
|
.sand-agents-create {
|
||
|
|
display: flex; gap: 6px; padding: 8px 12px;
|
||
|
|
}
|
||
|
|
.sand-agents-create input {
|
||
|
|
flex: 1; min-width: 0; min-height: 32px; padding: 6px 8px;
|
||
|
|
color: var(--cursor-text-primary);
|
||
|
|
background: var(--cursor-bg-input-surface);
|
||
|
|
border: 1px solid var(--cursor-stroke-secondary);
|
||
|
|
border-radius: var(--cursor-radius-base);
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
.sand-agents-create button {
|
||
|
|
padding: 0 10px; min-height: 32px;
|
||
|
|
color: var(--sand-text-on-color);
|
||
|
|
background: var(--sand-fill-primary);
|
||
|
|
border: 0; border-radius: var(--cursor-radius-base);
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
.sand-agents-list {
|
||
|
|
display: grid;
|
||
|
|
flex: 1 1 auto;
|
||
|
|
gap: var(--cursor-spacing-0-75);
|
||
|
|
min-height: 0;
|
||
|
|
overflow: auto;
|
||
|
|
padding: 4px 12px 24px;
|
||
|
|
}
|
||
|
|
.sand-agents-section__empty {
|
||
|
|
display: flex; align-items: center; min-height: 30px; padding: 8px;
|
||
|
|
color: var(--cursor-text-tertiary); font-size: var(--cursor-font-size-xs);
|
||
|
|
}
|
||
|
|
.sand-agent-item {
|
||
|
|
position: relative;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 34px minmax(0, 1fr) auto;
|
||
|
|
gap: 9px;
|
||
|
|
align-items: center;
|
||
|
|
width: 100%;
|
||
|
|
min-height: 58px;
|
||
|
|
padding: 8px;
|
||
|
|
color: var(--cursor-text-primary);
|
||
|
|
text-align: left;
|
||
|
|
background: transparent;
|
||
|
|
border: 0;
|
||
|
|
border-radius: var(--cursor-radius-lg);
|
||
|
|
cursor: pointer;
|
||
|
|
touch-action: manipulation;
|
||
|
|
}
|
||
|
|
.sand-agent-item:hover, .sand-agent-item[aria-current="true"] { background: var(--cursor-bg-secondary); }
|
||
|
|
.sand-agent-item__avatar {
|
||
|
|
display: grid; place-items: center; width: 34px; height: 34px;
|
||
|
|
color: var(--sand-text-on-color); background: var(--sand-fill-accent);
|
||
|
|
border-radius: var(--cursor-radius-lg); font-weight: 700;
|
||
|
|
}
|
||
|
|
.sand-agent-item__body { display: grid; gap: 4px; min-width: 0; }
|
||
|
|
.sand-agent-item__name, .sand-agent-item__preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
|
|
.sand-agent-item__name { font-size: var(--cursor-font-size-base); }
|
||
|
|
.sand-agent-item__preview { color: var(--cursor-text-tertiary); font-size: var(--cursor-font-size-xs); font-weight: 400; }
|
||
|
|
.sand-kit-status-dot {
|
||
|
|
width: 8px; height: 8px; border-radius: var(--cursor-radius-full); background: #3a3a3a;
|
||
|
|
}
|
||
|
|
.sand-kit-status-dot[data-status="working"] { background: var(--sand-fill-success); }
|
||
|
|
.sand-agents-sidebar__footer {
|
||
|
|
display: flex; align-items: center; gap: 8px;
|
||
|
|
padding: 10px 12px calc(10px + var(--safe-bottom));
|
||
|
|
border-top: 1px solid var(--cursor-stroke-tertiary);
|
||
|
|
}
|
||
|
|
.sand-agents-sidebar__footer small { display: block; color: var(--cursor-text-tertiary); }
|
||
|
|
|
||
|
|
.sand-chat-stage {
|
||
|
|
position: relative; z-index: 1;
|
||
|
|
display: flex; flex: 1 1 0; flex-direction: column;
|
||
|
|
width: 100%; min-width: 0; min-height: 0; overflow: hidden;
|
||
|
|
background: var(--cursor-bg-editor);
|
||
|
|
}
|
||
|
|
.sand-chat-header {
|
||
|
|
display: flex; align-items: center; justify-content: space-between; gap: 8px;
|
||
|
|
min-width: 0; min-height: calc(51px + var(--safe-top));
|
||
|
|
padding: var(--safe-top) 16px 0;
|
||
|
|
border-bottom: 1px solid var(--cursor-stroke-tertiary);
|
||
|
|
}
|
||
|
|
.sand-chat-header__menu {
|
||
|
|
display: none; width: 32px; height: 32px; padding: 0;
|
||
|
|
color: var(--cursor-text-secondary); background: transparent; border: 0; border-radius: var(--cursor-radius-lg);
|
||
|
|
}
|
||
|
|
.sand-chat-header__identity { display: flex; align-items: center; gap: 9px; padding: 5px 7px; min-width: 0; }
|
||
|
|
.sand-chat-header__avatar {
|
||
|
|
display: grid; place-items: center; width: 28px; height: 28px;
|
||
|
|
color: var(--sand-text-on-color); background: var(--sand-fill-accent);
|
||
|
|
border-radius: var(--cursor-radius-lg); font-weight: 700;
|
||
|
|
}
|
||
|
|
.sand-chat-header__identity small { display: block; color: var(--cursor-text-tertiary); }
|
||
|
|
.sand-chat-header__controls { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
|
||
|
|
.sand-chat-header__controls button {
|
||
|
|
min-height: 32px; padding: 4px 8px;
|
||
|
|
color: var(--cursor-text-secondary); background: transparent;
|
||
|
|
border: 0; border-radius: var(--cursor-radius-lg);
|
||
|
|
}
|
||
|
|
.sand-chat-header__controls button:hover { background: var(--cursor-bg-secondary); }
|
||
|
|
.sand-chat-header__controls .danger { color: var(--cursor-danger); }
|
||
|
|
|
||
|
|
.sand-virtual-transcript {
|
||
|
|
flex: 1 1 0; min-height: 0; overflow: auto;
|
||
|
|
padding: 28px max(30px, calc((100% - 690px) / 2));
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
.sand-transcript-row { margin: 0 0 22px; }
|
||
|
|
.sand-transcript-row--user { display: flex; justify-content: flex-end; }
|
||
|
|
.sand-message {
|
||
|
|
box-sizing: border-box;
|
||
|
|
max-width: min(88%, 640px, calc(100% - 82px));
|
||
|
|
padding: 8px 12px;
|
||
|
|
overflow-wrap: anywhere;
|
||
|
|
color: var(--cursor-text-primary);
|
||
|
|
background: var(--sand-fill-bubble-agent);
|
||
|
|
border-radius: 18px;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
line-height: 1.45;
|
||
|
|
font-size: var(--cursor-font-size-base);
|
||
|
|
}
|
||
|
|
.sand-transcript-row--user .sand-message { background: var(--sand-fill-bubble-user); }
|
||
|
|
.sand-activity { margin: 0 0 10px; color: var(--cursor-text-tertiary); font-size: var(--cursor-font-size-xs); }
|
||
|
|
.sand-typing-indicator { display: flex; gap: 4px; width: max-content; padding: 10px 12px; background: #20231f; border-radius: 14px; }
|
||
|
|
.sand-typing-indicator span { width: 5px; height: 5px; background: #9ba392; border-radius: 50%; }
|
||
|
|
.sand-question {
|
||
|
|
margin: 0 max(30px, calc((100% - 690px) / 2)) 8px;
|
||
|
|
padding: 12px;
|
||
|
|
border: 1px solid var(--cursor-stroke-tertiary);
|
||
|
|
border-radius: 14px;
|
||
|
|
background: color-mix(in srgb, var(--sand-fill-accent) 8%, var(--cursor-bg-editor));
|
||
|
|
}
|
||
|
|
.sand-question p { margin: 0 0 8px; }
|
||
|
|
.sand-question__options { display: flex; flex-wrap: wrap; gap: 8px; }
|
||
|
|
.sand-question__options button {
|
||
|
|
min-height: 36px; padding: 6px 12px; border: 0; border-radius: 999px;
|
||
|
|
background: var(--sand-fill-primary); color: var(--sand-text-on-color); font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sand-chat-input-dock {
|
||
|
|
display: flex; flex: 0 0 auto; flex-direction: column;
|
||
|
|
width: 100%; min-width: 0;
|
||
|
|
padding: 8px max(24px, calc((100% - 700px) / 2)) calc(18px + var(--safe-bottom));
|
||
|
|
}
|
||
|
|
.sand-prompt-shell {
|
||
|
|
position: relative; padding: 9px;
|
||
|
|
background: var(--cursor-bg-input-surface);
|
||
|
|
border: 1px solid var(--cursor-stroke-secondary);
|
||
|
|
border-radius: 16px;
|
||
|
|
box-shadow: var(--cursor-box-shadow-sm);
|
||
|
|
}
|
||
|
|
.sand-prompt-field {
|
||
|
|
display: block; box-sizing: border-box; width: 100%; min-height: 48px; resize: none;
|
||
|
|
color: var(--cursor-text-primary); background: transparent; border: 0; outline: none; line-height: 1.4;
|
||
|
|
}
|
||
|
|
.sand-prompt-field::placeholder { color: var(--cursor-input-placeholder-foreground); }
|
||
|
|
.sand-prompt-actions-row { display: flex; align-items: center; justify-content: flex-end; }
|
||
|
|
.sand-prompt-send {
|
||
|
|
display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
|
||
|
|
color: var(--sand-text-on-color); background: var(--sand-fill-primary);
|
||
|
|
border: 0; border-radius: 50%;
|
||
|
|
}
|
||
|
|
.sand-prompt-send:disabled { cursor: not-allowed; opacity: .4; }
|
||
|
|
|
||
|
|
.sand-computer-pane {
|
||
|
|
position: fixed; inset: 0 0 0 auto; z-index: 20;
|
||
|
|
display: flex; flex-direction: column; width: min(52vw, 720px);
|
||
|
|
background: #0d0f0c; border-left: 1px solid var(--cursor-stroke-tertiary);
|
||
|
|
padding-top: var(--safe-top);
|
||
|
|
}
|
||
|
|
.sand-computer-pane[hidden] { display: none !important; }
|
||
|
|
.sand-computer-pane__top {
|
||
|
|
display: flex; align-items: center; justify-content: space-between;
|
||
|
|
min-height: 51px; padding: 0 12px;
|
||
|
|
background: var(--cursor-bg-chrome);
|
||
|
|
border-bottom: 1px solid var(--cursor-stroke-tertiary);
|
||
|
|
}
|
||
|
|
.sand-computer-pane iframe { flex: 1; width: 100%; border: 0; background: #111; }
|
||
|
|
.sand-computer-pane__status {
|
||
|
|
margin: 0; padding: 8px 12px calc(8px + var(--safe-bottom));
|
||
|
|
color: var(--cursor-text-tertiary); font-size: var(--cursor-font-size-xs);
|
||
|
|
background: var(--cursor-bg-chrome);
|
||
|
|
}
|
||
|
|
|
||
|
|
.sand-tabbar { display: none; }
|
||
|
|
.sand-backdrop { display: none; }
|
||
|
|
|
||
|
|
@media (max-width: 860px) {
|
||
|
|
.sand-shell { grid-template-columns: 1fr; }
|
||
|
|
.sand-agents-sidebar {
|
||
|
|
position: fixed; z-index: 9; inset: 0 auto 0 0; width: min(86vw, 320px);
|
||
|
|
transform: translateX(-105%);
|
||
|
|
transition: transform .22s cubic-bezier(.22, 1, .36, 1);
|
||
|
|
}
|
||
|
|
.sand-agents-sidebar.is-open { transform: none; }
|
||
|
|
.sand-chat-header__menu { display: inline-flex; }
|
||
|
|
.sand-computer-pane { inset: 0; width: 100%; }
|
||
|
|
.sand-tabbar {
|
||
|
|
display: grid; grid-template-columns: 1fr 1fr;
|
||
|
|
position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
|
||
|
|
padding: 6px 8px calc(6px + var(--safe-bottom));
|
||
|
|
background: color-mix(in srgb, var(--cursor-bg-chrome) 92%, transparent);
|
||
|
|
border-top: 1px solid var(--cursor-stroke-tertiary);
|
||
|
|
}
|
||
|
|
.sand-tabbar button {
|
||
|
|
min-height: 44px; border: 0; border-radius: 12px;
|
||
|
|
background: transparent; color: var(--cursor-text-tertiary); font-weight: 600;
|
||
|
|
}
|
||
|
|
.sand-tabbar button[aria-current="true"] { color: var(--cursor-text-primary); background: var(--cursor-bg-secondary); }
|
||
|
|
.sand-chat-input-dock { padding-bottom: calc(64px + var(--safe-bottom)); }
|
||
|
|
.sand-backdrop {
|
||
|
|
display: block; position: fixed; inset: 0; z-index: 8; background: #0008;
|
||
|
|
}
|
||
|
|
.sand-backdrop[hidden] { display: none !important; }
|
||
|
|
}
|