Bohdan Triapitsyn
d29a0c5697
Agent @mentions in markdown use the primary accent instead of generic link color Mentions render without external URL favicons Markdown mode now matches plain text mention styling
1603 lines
41 KiB
CSS
1603 lines
41 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "./styles/design-system.css";
|
|
@import "./styles/typography.css";
|
|
@import "./styles/mobile.css";
|
|
@source "./**/*.{ts,tsx,css}";
|
|
|
|
/* KaTeX theme overrides for light/dark mode */
|
|
.katex {
|
|
color: var(--foreground);
|
|
}
|
|
.katex .mord,
|
|
.katex .mopen,
|
|
.katex .mclose,
|
|
.katex .mbin,
|
|
.katex .mrel,
|
|
.katex .mpunct,
|
|
.katex .mord,
|
|
.katex .mop,
|
|
.katex .minner {
|
|
color: inherit;
|
|
}
|
|
.katex-error {
|
|
color: var(--destructive);
|
|
}
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/* Buttons should never look selectable. */
|
|
button,
|
|
[role="button"] {
|
|
user-select: none !important;
|
|
-webkit-user-select: none !important;
|
|
}
|
|
|
|
:root.oc-theme-switching *,
|
|
:root.oc-theme-switching *::before,
|
|
:root.oc-theme-switching *::after {
|
|
transition: none !important;
|
|
animation: none !important;
|
|
}
|
|
|
|
[data-settings-search-highlight="true"] {
|
|
border-radius: 0.25rem;
|
|
background: color-mix(in srgb, var(--primary-base) 7%, transparent);
|
|
transition: background-color 180ms ease;
|
|
}
|
|
|
|
/* ── macOS vibrancy ───────────────────────────────────────────────────────
|
|
The window is created transparent with a native 'sidebar' NSVisualEffectView
|
|
behind it. We keep the whole app opaque (bg-background covers the window)
|
|
EXCEPT the left sidebar, which is the only translucent surface that lets the
|
|
native vibrancy show through. `data-oc-vibrancy` = vibrancy active;
|
|
`data-oc-vibrancy-ready` = native layer has settled (set from the main
|
|
process after show/restore) — until then the sidebar stays solid to avoid a
|
|
flash of raw transparency. */
|
|
html[data-oc-vibrancy] body,
|
|
html[data-oc-vibrancy] #root {
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
html[data-oc-vibrancy] .main-content-safe-area {
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Left sidebar: solid until the native layer is ready, then a translucent
|
|
overlay so the vibrancy frosts through. */
|
|
html[data-oc-vibrancy] .oc-vibrancy-surface {
|
|
background: var(--sidebar) !important;
|
|
}
|
|
|
|
html[data-oc-vibrancy][data-oc-vibrancy-ready] .oc-vibrancy-surface {
|
|
background: var(--sidebar-vibrancy-overlay) !important;
|
|
}
|
|
|
|
/* Inner bg-sidebar elements inside the vibrant surface must not re-paint an
|
|
opaque fill, or they'd cover the frosted effect. */
|
|
html[data-oc-vibrancy] .oc-vibrancy-surface .bg-sidebar {
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Project-actions pill over the open sidebar: drop its opaque surface so it
|
|
frosts to the exact same level as the sidebar (border keeps its outline). */
|
|
html[data-oc-vibrancy] .oc-vibrancy-pill {
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Accessibility: drop translucency when the OS asks for reduced transparency. */
|
|
@media (prefers-reduced-transparency: reduce) {
|
|
html[data-oc-vibrancy] body,
|
|
html[data-oc-vibrancy] #root,
|
|
html[data-oc-vibrancy] .main-content-safe-area {
|
|
background: var(--surface-background) !important;
|
|
}
|
|
|
|
html[data-oc-vibrancy] .oc-vibrancy-surface,
|
|
html[data-oc-vibrancy][data-oc-vibrancy-ready] .oc-vibrancy-surface {
|
|
background: var(--sidebar) !important;
|
|
}
|
|
}
|
|
|
|
/* Suppress WebKit-specific hover/focus adornments on the chat textarea */
|
|
textarea[data-chat-input="true"] {
|
|
-webkit-appearance: none;
|
|
background: transparent !important;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
textarea[data-chat-input="true"]:hover,
|
|
textarea[data-chat-input="true"]:focus,
|
|
textarea[data-chat-input="true"]:focus-visible {
|
|
outline: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Ensure interactive controls consistently show pointer cursor */
|
|
:where(
|
|
button,
|
|
[role="button"],
|
|
a[href]
|
|
):not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
:where(button, [role="button"]):disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
:root.light .message-content-text::selection,
|
|
:root.light .message-content-text ::selection {
|
|
background: color-mix(in srgb, var(--interactive-border-focus) 18%, transparent);
|
|
color: var(--surface-foreground);
|
|
}
|
|
|
|
.oc-cm-selected-line {
|
|
background: color-mix(in srgb, var(--primary-base) 22%, transparent);
|
|
}
|
|
|
|
.pierre-diff-wrapper {
|
|
--diffs-bg-selection-override: color-mix(in srgb, var(--primary-base) 22%, transparent);
|
|
--diffs-bg-selection-background-override: color-mix(in srgb, var(--primary-base) 14%, transparent);
|
|
--diffs-bg-selection-number-override: color-mix(in srgb, var(--primary-base) 28%, transparent);
|
|
--diffs-bg-selection-number-background-override: color-mix(in srgb, var(--primary-base) 18%, transparent);
|
|
--diffs-selection-color-override: var(--primary-base);
|
|
}
|
|
|
|
/* Codemirror syntax fallback for classHighlighter tokens */
|
|
.cm-editor .tok-comment,
|
|
.cm-editor .tok-docComment,
|
|
.cm-editor .tok-meta,
|
|
.cm-editor .tok-documentMeta {
|
|
color: var(--syntax-comment);
|
|
}
|
|
|
|
.cm-editor .tok-keyword,
|
|
.cm-editor .tok-controlKeyword,
|
|
.cm-editor .tok-definitionKeyword,
|
|
.cm-editor .tok-modifier,
|
|
.cm-editor .tok-moduleKeyword {
|
|
color: var(--syntax-keyword);
|
|
}
|
|
|
|
.cm-editor .tok-operator,
|
|
.cm-editor .tok-operatorKeyword,
|
|
.cm-editor .tok-derefOperator,
|
|
.cm-editor .tok-updateOperator,
|
|
.cm-editor .tok-definitionOperator,
|
|
.cm-editor .tok-typeOperator,
|
|
.cm-editor .tok-controlOperator,
|
|
.cm-editor .tok-logicOperator,
|
|
.cm-editor .tok-bitwiseOperator,
|
|
.cm-editor .tok-arithmeticOperator,
|
|
.cm-editor .tok-compareOperator {
|
|
color: var(--syntax-operator);
|
|
}
|
|
|
|
.cm-editor .tok-string,
|
|
.cm-editor .tok-special.tok-string,
|
|
.cm-editor .tok-escape,
|
|
.cm-editor .tok-regexp,
|
|
.cm-editor .tok-attributeValue,
|
|
.cm-editor .tok-monospace {
|
|
color: var(--syntax-string);
|
|
}
|
|
|
|
.cm-editor .tok-number,
|
|
.cm-editor .tok-bool,
|
|
.cm-editor .tok-atom,
|
|
.cm-editor .tok-null,
|
|
.cm-editor .tok-self {
|
|
color: var(--syntax-number);
|
|
}
|
|
|
|
.cm-editor .tok-function.tok-variableName,
|
|
.cm-editor .tok-function.tok-propertyName,
|
|
.cm-editor .tok-standard.tok-variableName,
|
|
.cm-editor .tok-special.tok-variableName {
|
|
color: var(--syntax-function);
|
|
}
|
|
|
|
.cm-editor .tok-variableName,
|
|
.cm-editor .tok-definition.tok-variableName,
|
|
.cm-editor .tok-local.tok-variableName,
|
|
.cm-editor .tok-constant.tok-variableName,
|
|
.cm-editor .tok-propertyName,
|
|
.cm-editor .tok-attributeName {
|
|
color: var(--syntax-variable);
|
|
}
|
|
|
|
.cm-editor .tok-className,
|
|
.cm-editor .tok-typeName,
|
|
.cm-editor .tok-namespace {
|
|
color: var(--syntax-type);
|
|
}
|
|
|
|
.cm-editor .tok-tagName,
|
|
.cm-editor .tok-labelName,
|
|
.cm-editor .tok-annotation,
|
|
.cm-editor .tok-macroName {
|
|
color: var(--syntax-keyword);
|
|
}
|
|
|
|
.cm-editor .tok-link {
|
|
color: var(--syntax-function);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.cm-editor .tok-punctuation,
|
|
.cm-editor .tok-separator,
|
|
.cm-editor .tok-bracket,
|
|
.cm-editor .tok-paren,
|
|
.cm-editor .tok-brace,
|
|
.cm-editor .tok-squareBracket,
|
|
.cm-editor .tok-angleBracket {
|
|
color: color-mix(in srgb, var(--syntax-comment) 85%, var(--syntax-foreground) 15%);
|
|
}
|
|
|
|
/* Codemirror syntax fallback for class-based HighlightStyle tokens */
|
|
.cm-editor .cm-comment,
|
|
.cm-editor .cm-meta {
|
|
color: var(--syntax-comment);
|
|
}
|
|
|
|
.cm-editor .cm-keyword,
|
|
.cm-editor .cm-tag {
|
|
color: var(--syntax-keyword);
|
|
}
|
|
|
|
.cm-editor .cm-operator {
|
|
color: var(--syntax-operator);
|
|
}
|
|
|
|
.cm-editor .cm-string,
|
|
.cm-editor .cm-string-2,
|
|
.cm-editor .cm-link {
|
|
color: var(--syntax-string);
|
|
}
|
|
|
|
.cm-editor .cm-number,
|
|
.cm-editor .cm-atom {
|
|
color: var(--syntax-number);
|
|
}
|
|
|
|
.cm-editor .cm-builtin,
|
|
.cm-editor .cm-def {
|
|
color: var(--syntax-function);
|
|
}
|
|
|
|
.cm-editor .cm-variable,
|
|
.cm-editor .cm-variable-2,
|
|
.cm-editor .cm-property,
|
|
.cm-editor .cm-attribute {
|
|
color: var(--syntax-variable);
|
|
}
|
|
|
|
.cm-editor .cm-variable-3 {
|
|
color: var(--syntax-type);
|
|
}
|
|
|
|
.cm-editor .cm-punctuation {
|
|
color: color-mix(in srgb, var(--syntax-comment) 85%, var(--syntax-foreground) 15%);
|
|
}
|
|
|
|
:root.vscode-runtime textarea[data-chat-input="true"]::placeholder {
|
|
color: color-mix(in srgb, var(--vscode-input-placeholderForeground, var(--muted-foreground)) 65%, transparent);
|
|
}
|
|
|
|
/* Match chat footer background to input in WebKit to avoid dual-tone hover/focus */
|
|
[data-chat-input="true"] + div[data-chat-input-footer="true"] {
|
|
background: transparent !important;
|
|
border: none;
|
|
box-shadow: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
/* Scroll shadow (HeroUI) fallback styling to ensure visible gradients without the Tailwind plugin */
|
|
[data-scroll-shadow="true"] {
|
|
--scroll-shadow-size: var(--scroll-shadow-size, 48px);
|
|
}
|
|
|
|
[data-scroll-shadow="true"][data-orientation="vertical"] {
|
|
mask-mode: alpha;
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
}
|
|
|
|
[data-scroll-shadow="true"][data-orientation="vertical"][data-top-bottom-scroll="true"] {
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
transparent 0%,
|
|
#000 var(--scroll-shadow-size),
|
|
#000 calc(100% - var(--scroll-shadow-size)),
|
|
transparent 100%
|
|
);
|
|
-webkit-mask-image: linear-gradient(
|
|
to bottom,
|
|
transparent 0%,
|
|
#000 var(--scroll-shadow-size),
|
|
#000 calc(100% - var(--scroll-shadow-size)),
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
[data-scroll-shadow="true"][data-orientation="vertical"][data-top-scroll="true"] {
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
transparent 0%,
|
|
#000 var(--scroll-shadow-size),
|
|
#000 100%
|
|
);
|
|
-webkit-mask-image: linear-gradient(
|
|
to bottom,
|
|
transparent 0%,
|
|
#000 var(--scroll-shadow-size),
|
|
#000 100%
|
|
);
|
|
}
|
|
|
|
[data-scroll-shadow="true"][data-orientation="vertical"][data-bottom-scroll="true"] {
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
#000 0%,
|
|
#000 calc(100% - var(--scroll-shadow-size)),
|
|
transparent 100%
|
|
);
|
|
-webkit-mask-image: linear-gradient(
|
|
to bottom,
|
|
#000 0%,
|
|
#000 calc(100% - var(--scroll-shadow-size)),
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
|
|
@keyframes spin-once {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes oc-migrate-up {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
|
|
@keyframes gradient-shimmer {
|
|
0% {
|
|
stop-color: currentColor;
|
|
}
|
|
50% {
|
|
stop-color: color-mix(in srgb, currentColor 60%, white 40%);
|
|
}
|
|
100% {
|
|
stop-color: currentColor;
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer-position {
|
|
0% {
|
|
x: -100%;
|
|
}
|
|
100% {
|
|
x: 100%;
|
|
}
|
|
}
|
|
|
|
@keyframes oc-file-mention-marquee {
|
|
0% {
|
|
transform: translateX(0%);
|
|
}
|
|
100% {
|
|
transform: translateX(calc(-100% + var(--file-mention-marquee-width, 360px)));
|
|
}
|
|
}
|
|
|
|
.file-mention-marquee-container {
|
|
--file-mention-marquee-width: 360px;
|
|
--file-mention-marquee-duration: 4s;
|
|
mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
|
|
-webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
|
|
}
|
|
|
|
.file-mention-marquee {
|
|
animation: oc-file-mention-marquee var(--file-mention-marquee-duration, 4s) linear 0.2s 1 both;
|
|
will-change: transform;
|
|
}
|
|
|
|
/* Safari/WebKit fixes for buttons and SVG icons */
|
|
/* Remixicon puts fill="currentColor" on root SVG which WebKit renders as background */
|
|
button svg.remixicon,
|
|
[role="button"] svg.remixicon,
|
|
button svg,
|
|
[role="button"] svg {
|
|
background: none !important;
|
|
background-color: transparent !important;
|
|
/* Override inline fill attribute on SVG root */
|
|
fill: none !important;
|
|
/* Ensure SVG uses CSS rendering, not native */
|
|
shape-rendering: geometricPrecision;
|
|
}
|
|
|
|
/* GPU acceleration for non-spinning SVGs */
|
|
button svg:not(.animate-spin),
|
|
[role="button"] svg:not(.animate-spin) {
|
|
transform: translateZ(0);
|
|
-webkit-transform: translateZ(0);
|
|
}
|
|
|
|
/* Fix SVG elements inside buttons - remove any rect/circle backgrounds */
|
|
button svg rect,
|
|
button svg circle,
|
|
[role="button"] svg rect,
|
|
[role="button"] svg circle {
|
|
fill: none !important;
|
|
}
|
|
|
|
/* Ensure SVG paths/shapes inherit color properly */
|
|
button svg.remixicon path,
|
|
button svg.remixicon circle[fill],
|
|
[role="button"] svg.remixicon path,
|
|
[role="button"] svg.remixicon circle[fill],
|
|
button svg path,
|
|
[role="button"] svg path {
|
|
fill: currentColor !important;
|
|
}
|
|
|
|
/* Safari/WebKit animation fixes - outside @layer for higher specificity */
|
|
.animate-spin {
|
|
animation: webkit-spin 1s linear infinite !important;
|
|
will-change: transform !important;
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Specific SVG spinner fixes for WebKit */
|
|
svg.animate-spin {
|
|
/* Use CSS box as transform reference for proper centering with scaled SVGs */
|
|
transform-box: fill-box !important;
|
|
transform-origin: 50% 50% !important;
|
|
background: none !important;
|
|
background-color: transparent !important;
|
|
overflow: visible !important;
|
|
/* Ensure SVG content is centered */
|
|
display: block !important;
|
|
}
|
|
|
|
@keyframes webkit-spin {
|
|
0% {
|
|
transform: translateZ(0) rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: translateZ(0) rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-opacity {
|
|
0%,
|
|
100% {
|
|
opacity: 0.4;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-opacity-dim {
|
|
0%,
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
.app-region-drag {
|
|
-webkit-app-region: drag;
|
|
}
|
|
|
|
.app-region-no-drag {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
.animate-spin-once {
|
|
animation: spin-once 0.5s linear forwards;
|
|
}
|
|
|
|
/* Custom scrollbar styles */
|
|
*::-webkit-scrollbar {
|
|
width: 10px !important;
|
|
height: 10px !important;
|
|
background: transparent;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background: var(--oc-scrollbar-thumb);
|
|
border-radius: 6px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: var(--oc-scrollbar-thumb-hover);
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.dark {
|
|
color-scheme: dark;
|
|
--oc-scrollbar-thumb: oklch(0.6 0.02 80 / 0.3);
|
|
--oc-scrollbar-thumb-hover: oklch(0.6 0.02 80 / 0.5);
|
|
}
|
|
|
|
[data-scrollbar="chat"]::-webkit-scrollbar-thumb {
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
*::-webkit-scrollbar-corner {
|
|
background: transparent;
|
|
}
|
|
|
|
[data-scrollbar="chat"].chat-scroll,
|
|
.chat-scroll {
|
|
scrollbar-gutter: stable both-edges;
|
|
}
|
|
|
|
html:not(.dark) .chat-scroll {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
[data-scrollbar="chat"]::-webkit-scrollbar {
|
|
width: 10px !important;
|
|
height: 10px !important;
|
|
background: transparent !important;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
[data-scrollbar="chat"].chat-scroll::-webkit-scrollbar,
|
|
.chat-scroll::-webkit-scrollbar {
|
|
width: 10px !important;
|
|
height: 10px !important;
|
|
}
|
|
|
|
[data-scrollbar="chat"]::-webkit-scrollbar-track {
|
|
background: transparent !important;
|
|
}
|
|
|
|
[data-scrollbar="chat"].chat-scroll::-webkit-scrollbar-track,
|
|
.chat-scroll::-webkit-scrollbar-track {
|
|
background: transparent !important;
|
|
}
|
|
|
|
[data-scrollbar="chat"]::-webkit-scrollbar-thumb {
|
|
background: var(--oc-scrollbar-thumb) !important;
|
|
border-radius: 6px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
[data-scrollbar="chat"].chat-scroll::-webkit-scrollbar-thumb,
|
|
.chat-scroll::-webkit-scrollbar-thumb {
|
|
background: var(--oc-scrollbar-thumb) !important;
|
|
border-radius: 6px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
[data-scrollbar="chat"]::-webkit-scrollbar-thumb:hover {
|
|
background: var(--oc-scrollbar-thumb-hover) !important;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
[data-scrollbar="chat"].chat-scroll::-webkit-scrollbar-thumb:hover,
|
|
.chat-scroll::-webkit-scrollbar-thumb:hover {
|
|
background: var(--oc-scrollbar-thumb-hover) !important;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
[data-scrollbar="chat"]::-webkit-scrollbar-corner {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Hide native scrollbars for overlay targets (all browsers) */
|
|
.overlay-scrollbar-target {
|
|
scrollbar-width: none !important;
|
|
-ms-overflow-style: none !important;
|
|
scrollbar-gutter: auto !important;
|
|
}
|
|
|
|
.overlay-scrollbar-target--no-gutter {
|
|
scrollbar-gutter: unset !important;
|
|
}
|
|
|
|
.overlay-scrollbar-target::-webkit-scrollbar {
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
display: none !important;
|
|
}
|
|
|
|
/* Firefox scrollbar support */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--oc-scrollbar-thumb) transparent;
|
|
}
|
|
|
|
.scrollbar-hidden {
|
|
scrollbar-width: none !important;
|
|
}
|
|
|
|
.scrollbar-hidden::-webkit-scrollbar {
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
|
|
.dark * {
|
|
scrollbar-color: oklch(0.6 0.02 80 / 0.3) transparent;
|
|
}
|
|
|
|
/* Overlay scrollbar styling (custom thumb) */
|
|
.overlay-scrollbar {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.2s ease;
|
|
z-index: 10;
|
|
}
|
|
|
|
.overlay-scrollbar--dense,
|
|
.overlay-scrollbar--bottom-right,
|
|
.overlay-scrollbar--zero,
|
|
.overlay-scrollbar--flush {
|
|
/* no-op: positioning handled inline */
|
|
}
|
|
|
|
.overlay-scrollbar__thumb {
|
|
pointer-events: auto;
|
|
position: absolute;
|
|
width: 6px;
|
|
background: var(--oc-scrollbar-thumb);
|
|
border-radius: 9999px;
|
|
opacity: 0.8;
|
|
transition: background-color 0.15s ease, opacity 0.15s ease;
|
|
will-change: transform, height;
|
|
}
|
|
|
|
.overlay-scrollbar__thumb:hover,
|
|
.overlay-scrollbar__thumb:active {
|
|
background: var(--oc-scrollbar-thumb-hover);
|
|
opacity: 1;
|
|
}
|
|
|
|
.overlay-scrollbar__thumb--horizontal {
|
|
height: 6px;
|
|
margin: 0;
|
|
}
|
|
|
|
.overlay-scrollbar__thumb--vertical {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Pierre diff viewer styling */
|
|
.pierre-diff-wrapper {
|
|
--diffs-font-family: var(--font-mono, 'IBM Plex Mono', monospace);
|
|
--diffs-font-size: var(--text-code);
|
|
--diffs-line-height: 24px;
|
|
--diffs-tab-size: 2;
|
|
--diffs-header-font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
|
|
--diffs-min-number-column-width: 4ch;
|
|
--diffs-gap-inline: 0;
|
|
--diffs-gap-block: 0;
|
|
|
|
/* Prevent browser scroll anchoring jumps during async highlight/virtualization */
|
|
overflow-anchor: none;
|
|
}
|
|
|
|
/* Prevent scroll anchoring in stacked diff scroll container */
|
|
[data-diff-virtual-root] {
|
|
overflow-anchor: none;
|
|
}
|
|
|
|
/* Desktop: slightly smaller diff code text */
|
|
|
|
|
|
.pierre-diff-wrapper diffs-container {
|
|
display: block;
|
|
}
|
|
|
|
/* Header tab responsiveness */
|
|
:root:not(.mobile-pointer):not(.vscode-runtime) .header-tab-label {
|
|
display: inline;
|
|
}
|
|
:root:not(.mobile-pointer):not(.vscode-runtime) .header-open-label {
|
|
display: inline;
|
|
}
|
|
|
|
@media (max-width: 940px) {
|
|
:root:not(.mobile-pointer):not(.vscode-runtime) .header-tab-label {
|
|
display: none;
|
|
}
|
|
:root:not(.mobile-pointer):not(.vscode-runtime) .header-open-label {
|
|
display: none;
|
|
}
|
|
:root:not(.mobile-pointer):not(.vscode-runtime) .header-tab-badge {
|
|
margin-left: -0.125rem;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
Streamdown Styles
|
|
Minimal overrides - fonts only, using Streamdown defaults
|
|
============================================ */
|
|
|
|
/* VS Code webviews can inject default pre/code/blockquote backgrounds; tool input/output should inherit the card surface. */
|
|
.tool-input-surface pre,
|
|
.tool-input-surface code,
|
|
.tool-input-surface blockquote,
|
|
.tool-input-text {
|
|
background: transparent !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* VSCode: tool cards should honor semantic code sizing, even when syntax themes inject sizes. */
|
|
:root.vscode-runtime .tool-input-surface,
|
|
:root.vscode-runtime .tool-output-surface {
|
|
font-size: var(--text-code) !important;
|
|
}
|
|
|
|
:root.vscode-runtime .tool-input-surface code,
|
|
:root.vscode-runtime .tool-input-surface pre,
|
|
:root.vscode-runtime .tool-output-surface code,
|
|
:root.vscode-runtime .tool-output-surface pre {
|
|
font-size: inherit !important;
|
|
}
|
|
|
|
/* Model/agent controls: progressively collapse labels to icon-only as the row narrows.
|
|
Hide priority (most aggressive first → most resilient last): agent, variant, model. */
|
|
|
|
/* Desktop (non-VSCode): pick thresholds that fire BEFORE the per-label `max-w-[Xpx]`
|
|
constraints would truncate text with an ellipsis. */
|
|
@container model-controls (max-width: 22rem) {
|
|
:root:not(.vscode-runtime) .model-controls__agent-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@container model-controls (max-width: 14rem) {
|
|
:root:not(.vscode-runtime) .model-controls__variant-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@container model-controls (max-width: 10rem) {
|
|
:root:not(.vscode-runtime) .model-controls__model-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* VS Code side panel: tighter thresholds since the panel is narrow and labels are smaller. */
|
|
@container model-controls (max-width: 11rem) {
|
|
:root.vscode-runtime .model-controls__agent-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@container model-controls (max-width: 9rem) {
|
|
:root.vscode-runtime .model-controls__variant-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@container model-controls (max-width: 10rem) {
|
|
:root.vscode-runtime .model-controls__model-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Commit actions: collapse labels when narrow. */
|
|
@container commit-actions (max-width: 21rem) {
|
|
.commit-actions__label--long {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@container commit-actions (max-width: 22rem) {
|
|
.commit-actions__label--push {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@container commit-actions (max-width: 19rem) {
|
|
.commit-actions__label {
|
|
display: none;
|
|
}
|
|
|
|
.commit-actions__btn {
|
|
padding-inline: 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* Utility: hide scrollbars without affecting layout */
|
|
.scrollbar-none {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
.scrollbar-none::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
display: none;
|
|
}
|
|
|
|
/* Git right-sidebar header/actions collapse to icon-only when narrow. */
|
|
@container git-header (max-width: 26rem) {
|
|
.git-header-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Status row: collapse optional text when narrow to keep both sides in one line. */
|
|
@container status-row (max-width: 30rem) {
|
|
.status-row__active-todo {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@container status-row (max-width: 24rem) {
|
|
.status-row__changed-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Assistant message footer: collapse text labels only on very narrow layouts. */
|
|
@container message-footer (max-width: 16rem) {
|
|
.message-footer__label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Animated tabs: collapse labels based on local container width. */
|
|
@container animated-tabs (max-width: 23rem) {
|
|
.animated-tabs__label {
|
|
display: none;
|
|
}
|
|
|
|
.animated-tabs__button {
|
|
padding-inline: 0.5rem;
|
|
gap: 0;
|
|
}
|
|
}
|
|
|
|
.pill-tabs__track {
|
|
padding-inline: 0.125rem;
|
|
}
|
|
|
|
@container pill-tabs (max-width: 23rem) {
|
|
.pill-tabs__track {
|
|
padding-inline: 1px;
|
|
}
|
|
|
|
.pill-tabs__button {
|
|
padding-inline: 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* Text font: IBM Plex Sans */
|
|
.markdown-content {
|
|
font-family: var(--font-sans);
|
|
font-size: var(--text-markdown);
|
|
line-height: inherit;
|
|
}
|
|
|
|
.markdown-content p,
|
|
.markdown-content li,
|
|
.markdown-content blockquote,
|
|
.markdown-content td,
|
|
.markdown-content th {
|
|
line-height: inherit;
|
|
}
|
|
|
|
/* Tool markdown should render at code size to match tool card typography. */
|
|
.markdown-content.markdown-tool {
|
|
font-size: var(--text-code) !important;
|
|
}
|
|
|
|
/* Reasoning markdown renders at meta size, dimmed. */
|
|
.markdown-content.markdown-reasoning {
|
|
font-size: var(--text-markdown);
|
|
color: var(--surface-muted-foreground);
|
|
--markdown-heading1: inherit;
|
|
--markdown-heading2: inherit;
|
|
--markdown-heading3: inherit;
|
|
--markdown-heading4: inherit;
|
|
--markdown-link: inherit;
|
|
--markdown-link-hover: var(--surface-foreground);
|
|
--markdown-blockquote: inherit;
|
|
--markdown-bold: inherit;
|
|
--markdown-italic: inherit;
|
|
--markdown-strikethrough: inherit;
|
|
}
|
|
|
|
.markdown-content.markdown-reasoning p,
|
|
.markdown-content.markdown-reasoning li,
|
|
.markdown-content.markdown-reasoning td,
|
|
.markdown-content.markdown-reasoning th,
|
|
.markdown-content.markdown-reasoning h1,
|
|
.markdown-content.markdown-reasoning h2,
|
|
.markdown-content.markdown-reasoning h3,
|
|
.markdown-content.markdown-reasoning h4,
|
|
.markdown-content.markdown-reasoning h5,
|
|
.markdown-content.markdown-reasoning h6,
|
|
.markdown-content.markdown-reasoning strong,
|
|
.markdown-content.markdown-reasoning b,
|
|
.markdown-content.markdown-reasoning em,
|
|
.markdown-content.markdown-reasoning del,
|
|
.markdown-content.markdown-reasoning [data-markdown="strong"],
|
|
.markdown-content.markdown-reasoning [data-markdown="bold"] {
|
|
color: var(--surface-muted-foreground) !important;
|
|
}
|
|
|
|
.markdown-content.markdown-reasoning a,
|
|
.markdown-content.markdown-reasoning [data-openchamber-file-link="true"] {
|
|
color: var(--surface-muted-foreground) !important;
|
|
}
|
|
|
|
.markdown-content.markdown-reasoning a:hover,
|
|
.markdown-content.markdown-reasoning [data-openchamber-file-link="true"]:hover {
|
|
color: var(--surface-foreground) !important;
|
|
}
|
|
|
|
.markdown-content.markdown-reasoning strong,
|
|
.markdown-content.markdown-reasoning b,
|
|
.markdown-content.markdown-reasoning [data-markdown="strong"],
|
|
.markdown-content.markdown-reasoning [data-markdown="bold"] {
|
|
font-weight: inherit !important;
|
|
color: inherit !important;
|
|
font-style: inherit !important;
|
|
}
|
|
|
|
.markdown-content.markdown-tool code,
|
|
.markdown-content.markdown-tool pre {
|
|
font-size: inherit !important;
|
|
}
|
|
|
|
/* Streamdown headers: keep proportional but not oversized */
|
|
.markdown-content h1 {
|
|
font-size: 1.125em;
|
|
font-weight: 600;
|
|
margin-top: 1em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.markdown-content h2 {
|
|
font-size: 1.0625em;
|
|
font-weight: 600;
|
|
margin-top: 0.875em;
|
|
margin-bottom: 0.375em;
|
|
}
|
|
|
|
.markdown-content h3 {
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
margin-top: 0.75em;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
.markdown-content h4,
|
|
.markdown-content h5,
|
|
.markdown-content h6 {
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
margin-top: 0.625em;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
/* Code font: IBM Plex Mono */
|
|
.markdown-content code,
|
|
.markdown-content pre {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-code);
|
|
}
|
|
|
|
/* Override Streamdown's hardcoded bg-muted for inline code - use theme colors instead */
|
|
.markdown-content code[data-markdown="inline-code"] {
|
|
background-color: var(--markdown-inline-code-bg, var(--surface-muted)) !important;
|
|
color: var(--markdown-inline-code, var(--foreground)) !important;
|
|
word-break: break-all;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* Markdown headings - use theme colors */
|
|
.markdown-content h1 {
|
|
color: var(--markdown-heading1, var(--primary));
|
|
}
|
|
|
|
.markdown-content h2 {
|
|
color: var(--markdown-heading2, var(--primary));
|
|
}
|
|
|
|
.markdown-content h3 {
|
|
color: var(--markdown-heading3, var(--primary));
|
|
}
|
|
|
|
.markdown-content h4,
|
|
.markdown-content h5,
|
|
.markdown-content h6 {
|
|
color: var(--markdown-heading4, var(--foreground));
|
|
}
|
|
|
|
/* Markdown links - use theme colors */
|
|
.markdown-content a {
|
|
color: var(--markdown-link, var(--primary));
|
|
}
|
|
|
|
.markdown-content a:hover {
|
|
color: var(--markdown-link-hover, var(--primary));
|
|
}
|
|
|
|
.markdown-content [data-openchamber-file-link="true"] {
|
|
color: var(--markdown-link, var(--primary));
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
user-select: text !important;
|
|
-webkit-user-select: text !important;
|
|
}
|
|
|
|
.markdown-content [data-openchamber-file-link="true"]:hover {
|
|
color: var(--markdown-link-hover, var(--primary));
|
|
}
|
|
|
|
/* Agent/skill mentions use the primary accent, not the markdown link color */
|
|
.markdown-content a[data-openchamber-agent-mention="true"],
|
|
.markdown-content a[data-skill-name] {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.markdown-content a[data-openchamber-agent-mention="true"]:hover,
|
|
.markdown-content a[data-skill-name]:hover {
|
|
color: var(--primary);
|
|
}
|
|
|
|
/* Markdown blockquote - use theme colors */
|
|
.markdown-content blockquote {
|
|
color: var(--markdown-blockquote, var(--muted-foreground));
|
|
border-left-color: var(--markdown-blockquote-border, var(--border));
|
|
}
|
|
|
|
/* Markdown horizontal rule - use theme colors */
|
|
.markdown-content hr {
|
|
border-color: var(--markdown-hr, var(--border));
|
|
}
|
|
|
|
/* Markdown bold/italic/strikethrough - use theme colors */
|
|
.markdown-content strong {
|
|
color: var(--markdown-bold, var(--foreground));
|
|
}
|
|
|
|
.markdown-content em {
|
|
color: var(--markdown-italic, var(--foreground));
|
|
}
|
|
|
|
.markdown-content del {
|
|
color: var(--markdown-strikethrough, var(--muted-foreground));
|
|
}
|
|
|
|
/* Streamdown code blocks: ensure light/dark Shiki vars work even when Tailwind doesn't scan Streamdown's internal class names. */
|
|
.markdown-content [data-markdown="code-block-body"] {
|
|
font-size: var(--text-code);
|
|
background-color: transparent;
|
|
color: var(--shiki-light, inherit);
|
|
}
|
|
|
|
.markdown-content [data-markdown="code-block-body"] span[style*="--sdm-c"] {
|
|
color: var(--sdm-c) !important;
|
|
}
|
|
|
|
.markdown-content [data-markdown="code-block-body"] span[style*="--sdm-tbg"] {
|
|
background-color: var(--sdm-tbg) !important;
|
|
}
|
|
|
|
.markdown-content [data-markdown="code-block-body"] span[style*="--shiki-light"] {
|
|
color: var(--shiki-light) !important;
|
|
}
|
|
|
|
.markdown-content [data-markdown="code-block-body"] span[style*="--shiki-light-bg"] {
|
|
background-color: var(--shiki-light-bg) !important;
|
|
}
|
|
|
|
.dark .markdown-content [data-markdown="code-block-body"] {
|
|
background-color: transparent;
|
|
color: var(--shiki-dark, var(--shiki-light, inherit));
|
|
}
|
|
|
|
.dark .markdown-content [data-markdown="code-block-body"] span[style*="--shiki-dark"] {
|
|
color: var(--shiki-dark) !important;
|
|
}
|
|
|
|
.dark .markdown-content [data-markdown="code-block-body"] span[style*="--shiki-dark-bg"] {
|
|
background-color: var(--shiki-dark-bg) !important;
|
|
}
|
|
|
|
/* Reduce code block header height */
|
|
[data-markdown="code-block-header"] {
|
|
margin: 0;
|
|
padding: 0.375rem 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding-right: 5.25rem;
|
|
border: 0;
|
|
border-bottom: 1px solid var(--interactive-border);
|
|
border-radius: 0;
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
/* Disable Streamdown's code block virtualization and keep block chrome fixed */
|
|
.markdown-content [data-markdown="code-block"] {
|
|
content-visibility: visible !important;
|
|
contain-intrinsic-size: none !important;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 !important;
|
|
box-sizing: border-box;
|
|
inline-size: 100%;
|
|
max-inline-size: 100%;
|
|
min-inline-size: 0;
|
|
overflow: hidden;
|
|
background: var(--surface-background);
|
|
border: 1px solid var(--interactive-border);
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
.markdown-content [data-markdown="code-block"] > div:not([data-markdown]) {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
margin-top: 0;
|
|
height: 2rem;
|
|
z-index: 6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Streamdown code block body: scroll text content within the card body */
|
|
.markdown-content [data-markdown="code-block-body"] {
|
|
display: block;
|
|
inline-size: 100%;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
box-sizing: border-box;
|
|
scrollbar-gutter: stable;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.markdown-content [data-markdown="code-block-body"] pre {
|
|
display: block;
|
|
width: 100%;
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
margin: 0 !important;
|
|
padding: 0.75rem !important;
|
|
border: 0 !important;
|
|
border-radius: 0 !important;
|
|
box-shadow: none !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.markdown-content [data-markdown="code-block-body"] > * {
|
|
border: 0 !important;
|
|
border-radius: 0 !important;
|
|
box-shadow: none !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.markdown-content [data-markdown="code-block-body"] code {
|
|
white-space: pre;
|
|
overflow-wrap: normal;
|
|
word-break: normal;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.markdown-content [data-markdown="code-block-actions"] {
|
|
pointer-events: auto;
|
|
transition: opacity 0.15s ease;
|
|
border: 0 !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
gap: 0.125rem;
|
|
}
|
|
|
|
.markdown-content [data-markdown="code-block-actions"] button {
|
|
border: 0 !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
padding: 0.25rem !important;
|
|
min-width: 1.5rem;
|
|
min-height: 1.5rem;
|
|
}
|
|
|
|
.markdown-content [data-markdown="code-block-actions"] button svg {
|
|
width: 0.875rem;
|
|
height: 0.875rem;
|
|
}
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.markdown-content [data-markdown="code-block"] [data-markdown="code-block-actions"] {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.markdown-content [data-markdown="code-block"]:hover [data-markdown="code-block-actions"],
|
|
.markdown-content [data-markdown="code-block"]:focus-within [data-markdown="code-block-actions"] {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
/* Mermaid block: position context for controls wrapper. */
|
|
[data-markdown="mermaid-block"] {
|
|
position: relative;
|
|
border-radius: 0.75rem;
|
|
border: 1px solid var(--interactive-border);
|
|
background: var(--surface-elevated);
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
[data-markdown="mermaid-block"] [data-markdown="mermaid-scroll"] {
|
|
overflow: auto;
|
|
}
|
|
|
|
[data-markdown="mermaid-block"] [data-markdown="mermaid"] {
|
|
width: max-content;
|
|
min-width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
[data-markdown="mermaid-block"] [data-markdown="mermaid-ascii"] {
|
|
margin: 0;
|
|
white-space: pre;
|
|
width: max-content;
|
|
min-width: 100%;
|
|
font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
color: var(--surface-foreground);
|
|
background: transparent;
|
|
}
|
|
|
|
[data-markdown="mermaid-block"] [data-markdown="mermaid"] svg {
|
|
width: auto !important;
|
|
min-width: 100%;
|
|
max-width: none !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
[data-markdown="mermaid-block"] svg {
|
|
display: block;
|
|
background: var(--surface-elevated);
|
|
}
|
|
|
|
/* Fullscreen Mermaid popup: scale diagrams to fill available viewport panel area. */
|
|
.markdown-mermaid-fullscreen {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.markdown-mermaid-fullscreen .markdown-content {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.markdown-mermaid-fullscreen [data-markdown="mermaid-block"] {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 100%;
|
|
padding: 0.75rem;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: var(--surface-elevated);
|
|
}
|
|
|
|
.markdown-mermaid-fullscreen [data-markdown="mermaid-block"] [data-markdown="mermaid-scroll"] {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.markdown-mermaid-fullscreen [data-markdown="mermaid-block"] [data-markdown="mermaid"] {
|
|
width: max-content;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.markdown-mermaid-fullscreen [data-markdown="mermaid-block"] [data-markdown="mermaid-ascii"] {
|
|
margin: 0;
|
|
white-space: pre;
|
|
width: max-content;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
color: var(--surface-foreground);
|
|
background: transparent;
|
|
}
|
|
|
|
.markdown-mermaid-fullscreen [data-markdown="mermaid-block"] svg {
|
|
width: auto !important;
|
|
height: auto !important;
|
|
max-width: none !important;
|
|
max-height: none !important;
|
|
min-width: 100%;
|
|
display: block;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Terminal touch input is portaled to document.body; keep it fully non-painting across engines. */
|
|
input[data-terminal-hidden-input="true"],
|
|
textarea[data-terminal-hidden-input="true"] {
|
|
caret-color: transparent !important;
|
|
color: transparent !important;
|
|
-webkit-text-fill-color: transparent !important;
|
|
background: transparent !important;
|
|
border: 0 !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
text-shadow: none !important;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
input[data-terminal-hidden-input="true"]::selection,
|
|
textarea[data-terminal-hidden-input="true"]::selection {
|
|
background: transparent;
|
|
color: transparent;
|
|
}
|
|
|
|
input[data-terminal-hidden-input="true"]::placeholder,
|
|
textarea[data-terminal-hidden-input="true"]::placeholder {
|
|
color: transparent !important;
|
|
}
|
|
|
|
/* Hide browser/system caret for Ghostty's own input surfaces.
|
|
Terminal cursor is rendered by the canvas renderer. */
|
|
.terminal-viewport-container [contenteditable="true"][aria-label="Terminal input"] {
|
|
caret-color: transparent !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
textarea[aria-label="Terminal input"],
|
|
input[aria-label="Terminal input"] {
|
|
caret-color: transparent !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
/* When touch terminal input uses the portaled overlay, keep Ghostty's
|
|
internal editable surfaces fully non-painting to avoid duplicate cursors. */
|
|
.terminal-viewport-container[data-hidden-input-overlay-active="true"] textarea:not([data-terminal-hidden-input="true"]),
|
|
.terminal-viewport-container[data-hidden-input-overlay-active="true"] input:not([data-terminal-hidden-input="true"]),
|
|
.terminal-viewport-container[data-hidden-input-overlay-active="true"] [contenteditable="true"] {
|
|
caret-color: transparent !important;
|
|
color: transparent !important;
|
|
-webkit-text-fill-color: transparent !important;
|
|
background: transparent !important;
|
|
border: 0 !important;
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
.terminal-viewport-container[data-hidden-input-overlay-active="true"] textarea:not([data-terminal-hidden-input="true"]),
|
|
.terminal-viewport-container[data-hidden-input-overlay-active="true"] input:not([data-terminal-hidden-input="true"]),
|
|
.terminal-viewport-container[data-hidden-input-overlay-active="true"] [contenteditable="true"] {
|
|
opacity: 0 !important;
|
|
font-size: 0 !important;
|
|
line-height: 0 !important;
|
|
pointer-events: none !important;
|
|
user-select: none !important;
|
|
-webkit-user-select: none !important;
|
|
}
|
|
|
|
/* Mobile Terminal Optimizations */
|
|
@media (max-width: 1024px) {
|
|
.terminal-viewport-container {
|
|
font-variant-ligatures: none;
|
|
font-feature-settings: "liga" 0, "calt" 0;
|
|
}
|
|
}
|
|
|
|
/* Font loading states */
|
|
.fonts-loading .terminal-viewport-container {
|
|
font-family: monospace;
|
|
}
|
|
|
|
.fonts-loaded .terminal-viewport-container {
|
|
font-family: "JetBrainsMono Nerd Font", "FiraCode Nerd Font", "Fira Code", "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
}
|
|
|
|
@keyframes oc-busy-pulse {
|
|
0%, 100% {
|
|
opacity: 0.2;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animate-busy-pulse {
|
|
animation: oc-busy-pulse 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes navrail-dot-wave {
|
|
0%, 100% {
|
|
transform: scale(0.72);
|
|
opacity: 0.52;
|
|
}
|
|
50% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animate-navrail-dot-wave {
|
|
animation: navrail-dot-wave 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes border-glow-pulse {
|
|
0%, 100% {
|
|
border-color: var(--interactive-border);
|
|
outline-color: transparent;
|
|
}
|
|
12.5% {
|
|
border-color: color-mix(in srgb, var(--primary) 22%, var(--interactive-border));
|
|
outline-color: color-mix(in srgb, var(--primary) 8%, transparent);
|
|
}
|
|
25% {
|
|
border-color: color-mix(in srgb, var(--primary) 40%, var(--interactive-border));
|
|
outline-color: color-mix(in srgb, var(--primary) 16%, transparent);
|
|
}
|
|
37.5% {
|
|
border-color: color-mix(in srgb, var(--primary) 62%, var(--interactive-border));
|
|
outline-color: color-mix(in srgb, var(--primary) 26%, transparent);
|
|
}
|
|
50% {
|
|
border-color: color-mix(in srgb, var(--primary) 78%, var(--interactive-border));
|
|
outline-color: color-mix(in srgb, var(--primary) 34%, transparent);
|
|
}
|
|
62.5% {
|
|
border-color: color-mix(in srgb, var(--primary) 62%, var(--interactive-border));
|
|
outline-color: color-mix(in srgb, var(--primary) 26%, transparent);
|
|
}
|
|
75% {
|
|
border-color: color-mix(in srgb, var(--primary) 40%, var(--interactive-border));
|
|
outline-color: color-mix(in srgb, var(--primary) 16%, transparent);
|
|
}
|
|
87.5% {
|
|
border-color: color-mix(in srgb, var(--primary) 22%, var(--interactive-border));
|
|
outline-color: color-mix(in srgb, var(--primary) 8%, transparent);
|
|
}
|
|
}
|
|
|
|
.animate-border-glow-pulse {
|
|
outline: 1px solid transparent;
|
|
outline-offset: 1px;
|
|
will-change: border-color, outline-color;
|
|
animation: border-glow-pulse 3.8s linear infinite;
|
|
}
|
|
|
|
@keyframes marquee-scroll {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-100%); }
|
|
}
|
|
|
|
@keyframes open-file-name-marquee-scroll {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-50%); }
|
|
}
|
|
|
|
.open-file-name-marquee-track {
|
|
display: inline-flex;
|
|
min-width: max-content;
|
|
animation: open-file-name-marquee-scroll var(--open-file-name-marquee-duration, 14s) linear infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
.open-file-name-marquee-item {
|
|
flex-shrink: 0;
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
.marquee-text {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.marquee-text--auto {
|
|
animation: marquee-scroll 6s linear infinite alternate;
|
|
will-change: transform;
|
|
}
|
|
|
|
.group:hover .marquee-text--active,
|
|
.marquee-text--active:hover {
|
|
animation: marquee-scroll 5s linear infinite alternate;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.marquee-text--auto,
|
|
.open-file-name-marquee-track,
|
|
.group:hover .marquee-text--active,
|
|
.marquee-text--active:hover {
|
|
animation: none;
|
|
}
|
|
|
|
.open-file-name-marquee-track {
|
|
display: block;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
will-change: auto;
|
|
}
|
|
|
|
.open-file-name-marquee-track .open-file-name-marquee-item {
|
|
display: inline;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.open-file-name-marquee-track .open-file-name-marquee-item[aria-hidden="true"] {
|
|
display: none;
|
|
}
|
|
|
|
.animate-busy-pulse {
|
|
animation: none;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
/* Settings dialog: hide the overlay scrollbar; wheel/keyboard scroll still works. */
|
|
[data-settings-view="true"] .overlay-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Desktop app shell (Electron/native window): native apps use the arrow cursor
|
|
for clickable controls, not the web's hand/pointer. Neutralize pointer
|
|
cursors under the desktop runtime only — web in a browser keeps them.
|
|
Resize/grab/text cursors are untouched. */
|
|
html.desktop-runtime
|
|
:where(button, [role="button"], a[href], summary, label[for]):not(:disabled):not([aria-disabled="true"]) {
|
|
cursor: default;
|
|
}
|
|
html.desktop-runtime [class*="cursor-pointer"] {
|
|
cursor: default !important;
|
|
}
|
|
html.desktop-runtime .markdown-content [data-openchamber-file-link="true"] {
|
|
cursor: default;
|
|
}
|