mirror of
https://github.com/pacnpal/Roo-Code.git
synced 2025-12-20 04:11:10 -05:00
275 lines
7.3 KiB
CSS
275 lines
7.3 KiB
CSS
/* @import "tailwindcss"; */
|
|
|
|
@layer theme, base, components, utilities;
|
|
|
|
@import "tailwindcss/theme.css" layer(theme);
|
|
/* https://tailwindcss.com/docs/preflight */
|
|
/* @import "tailwindcss/preflight.css" layer(base); */
|
|
@import "tailwindcss/utilities.css" layer(utilities);
|
|
|
|
@plugin "tailwindcss-animate";
|
|
|
|
@theme {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-5: var(--chart-5);
|
|
--radius-lg: var(--radius);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: var(--vscode-editor-background);
|
|
--foreground: var(--vscode-editor-foreground);
|
|
--card: var(--vscode-editor-background);
|
|
--card-foreground: var(--vscode-editor-foreground);
|
|
--popover: var(--vscode-menu-background, var(--vscode-editor-background));
|
|
--popover-foreground: var(--vscode-menu-foreground, var(--vscode-editor-foreground));
|
|
--primary: var(--vscode-button-background);
|
|
--primary-foreground: var(--vscode-button-foreground);
|
|
--secondary: var(--vscode-button-secondaryBackground);
|
|
--secondary-foreground: var(--vscode-button-secondaryForeground);
|
|
--muted: var(--vscode-disabledForeground);
|
|
--muted-foreground: var(--vscode-descriptionForeground);
|
|
--accent: var(--vscode-input-border);
|
|
--accent-foreground: var(--vscode-button-foreground);
|
|
--destructive: var(--vscode-errorForeground);
|
|
--destructive-foreground: var(--vscode-button-foreground);
|
|
--border: var(--vscode-widget-border);
|
|
--input: var(--vscode-input-background);
|
|
--ring: var(--vscode-input-border);
|
|
--chart-1: var(--vscode-charts-red);
|
|
--chart-2: var(--vscode-charts-blue);
|
|
--chart-3: var(--vscode-charts-yellow);
|
|
--chart-4: var(--vscode-charts-orange);
|
|
--chart-5: var(--vscode-charts-green);
|
|
--radius: 0.5rem;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
/* Border Styles */
|
|
.border,
|
|
.border-r,
|
|
.border-l,
|
|
.border-t,
|
|
.border-b,
|
|
.border-x,
|
|
.border-y {
|
|
border-color: var(--border);
|
|
}
|
|
|
|
/* Code Block Styles */
|
|
pre,
|
|
code {
|
|
background-color: var(--vscode-textCodeBlock-background);
|
|
}
|
|
}
|
|
|
|
/* Form Element Focus States */
|
|
textarea:focus {
|
|
outline: 1.5px solid var(--vscode-focusBorder, #007fd4);
|
|
}
|
|
|
|
vscode-button::part(control):focus {
|
|
outline: none;
|
|
}
|
|
|
|
/**
|
|
* Use vscode native scrollbar styles
|
|
* https://github.com/gitkraken/vscode-gitlens/blob/b1d71d4844523e8b2ef16f9e007068e91f46fd88/src/webviews/apps/home/home.scss
|
|
*/
|
|
|
|
html {
|
|
height: 100%;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
body.scrollable,
|
|
.scrollable,
|
|
body.code-block-scrollable,
|
|
.code-block-scrollable {
|
|
border-color: transparent;
|
|
transition: border-color 0.7s linear;
|
|
}
|
|
|
|
body:hover.scrollable,
|
|
body:hover .scrollable,
|
|
body:focus-within.scrollable,
|
|
body:focus-within .scrollable,
|
|
body:hover.code-block-scrollable,
|
|
body:hover .code-block-scrollable,
|
|
body:focus-within.code-block-scrollable,
|
|
body:focus-within .code-block-scrollable {
|
|
border-color: var(--vscode-scrollbarSlider-background);
|
|
transition: none;
|
|
}
|
|
|
|
.scrollable::-webkit-scrollbar-corner {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.scrollable::-webkit-scrollbar-thumb {
|
|
background-color: transparent;
|
|
border-color: inherit;
|
|
border-right-style: inset;
|
|
border-right-width: calc(100vw + 100vh);
|
|
border-radius: unset !important;
|
|
}
|
|
|
|
.scrollable::-webkit-scrollbar-thumb:hover {
|
|
border-color: var(--vscode-scrollbarSlider-hoverBackground);
|
|
}
|
|
|
|
.scrollable::-webkit-scrollbar-thumb:active {
|
|
border-color: var(--vscode-scrollbarSlider-activeBackground);
|
|
}
|
|
|
|
/*
|
|
Fix VSCode ignoring webkit scrollbar modifiers
|
|
https://github.com/microsoft/vscode/issues/213045
|
|
*/
|
|
@supports selector(::-webkit-scrollbar) {
|
|
html {
|
|
scrollbar-color: unset;
|
|
}
|
|
}
|
|
|
|
/*
|
|
The above scrollbar styling uses some transparent background color magic to accomplish its animation. However this doesn't play nicely with SyntaxHighlighter, so we need to set a background color for the code blocks' horizontal scrollbar. This actually has the unintended consequence of always showing the scrollbar which I prefer since it makes it more obvious that there is more content to scroll to.
|
|
*/
|
|
|
|
.code-block-scrollable::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.code-block-scrollable::-webkit-scrollbar-thumb {
|
|
background-color: var(--vscode-scrollbarSlider-background);
|
|
border-radius: 5px;
|
|
border: 2px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
|
|
.code-block-scrollable::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--vscode-scrollbarSlider-hoverBackground);
|
|
}
|
|
|
|
.code-block-scrollable::-webkit-scrollbar-thumb:active {
|
|
background-color: var(--vscode-scrollbarSlider-activeBackground);
|
|
}
|
|
|
|
.code-block-scrollable::-webkit-scrollbar-corner {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/**
|
|
* Dropdown label
|
|
* https://github.com/microsoft/vscode-webview-ui-toolkit/tree/main/src/dropdown#with-label
|
|
*/
|
|
|
|
.dropdown-container {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.dropdown-container label {
|
|
display: block;
|
|
color: var(--vscode-foreground);
|
|
cursor: pointer;
|
|
font-size: var(--vscode-font-size);
|
|
line-height: normal;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
/* Fix dropdown double scrollbar overflow */
|
|
|
|
#api-provider > div > ul {
|
|
overflow: unset;
|
|
}
|
|
|
|
/* Fix scrollbar in dropdown */
|
|
|
|
vscode-dropdown::part(listbox) {
|
|
border-color: var(--vscode-scrollbarSlider-background);
|
|
transition: none;
|
|
scrollbar-color: var(--vscode-scrollbarSlider-background) transparent;
|
|
}
|
|
|
|
/* Faded icon buttons in textfields */
|
|
.input-icon-button {
|
|
cursor: pointer;
|
|
opacity: 0.65;
|
|
}
|
|
|
|
.input-icon-button:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.input-icon-button.disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.input-icon-button.disabled:hover {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/* Context mentions */
|
|
|
|
.mention-context-textarea-highlight {
|
|
background-color: color-mix(in srgb, var(--vscode-badge-foreground) 30%, transparent);
|
|
border-radius: 3px;
|
|
box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--vscode-badge-foreground) 30%, transparent);
|
|
color: transparent;
|
|
}
|
|
|
|
.mention-context-highlight {
|
|
background-color: color-mix(in srgb, var(--vscode-badge-foreground) 30%, transparent);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.mention-context-highlight-with-shadow {
|
|
background-color: color-mix(in srgb, var(--vscode-badge-foreground) 30%, transparent);
|
|
border-radius: 3px;
|
|
box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--vscode-badge-foreground) 30%, transparent);
|
|
}
|
|
|
|
/**
|
|
* vscrui Overrides / Hacks
|
|
*/
|
|
|
|
.vscrui-checkbox__listbox > ul {
|
|
max-height: unset !important;
|
|
}
|