maxandClaude Fable 5.1
23d9ba1fc9
Info hue for read, warning hue for write, both as tints. Read no longer looks disabled next to write's alert box. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0169iPWwKHZoBTNN9qwXiwqk
458 lines
10 KiB
CSS
458 lines
10 KiB
CSS
/* Colored References — webview results panel */
|
|
|
|
:root {
|
|
--row-height: 22px;
|
|
--header-height: 24px;
|
|
--grid: var(--cr-grid, 36% 18% 48px 56px 14% 20%);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
color: var(--vscode-foreground);
|
|
background: var(--vscode-editor-background);
|
|
font-family: var(--vscode-font-family);
|
|
font-size: var(--vscode-font-size);
|
|
}
|
|
|
|
#app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
/* --- toolbar ------------------------------------------------------------ */
|
|
|
|
#toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 8px;
|
|
border-bottom: 1px solid var(--vscode-panel-border, transparent);
|
|
flex: 0 0 auto;
|
|
/* Solid: rows scroll underneath, and a see-through bar over code is unreadable. */
|
|
background: var(--vscode-editor-background);
|
|
}
|
|
|
|
#summary {
|
|
color: var(--vscode-descriptionForeground);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-right: auto;
|
|
}
|
|
|
|
#summary b {
|
|
color: var(--vscode-foreground);
|
|
}
|
|
|
|
#filter {
|
|
width: 200px;
|
|
padding: 2px 6px;
|
|
color: var(--vscode-input-foreground);
|
|
background: var(--vscode-input-background);
|
|
border: 1px solid var(--vscode-input-border, transparent);
|
|
border-radius: 2px;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
#filter:focus {
|
|
outline: 1px solid var(--vscode-focusBorder);
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
#filter::placeholder {
|
|
color: var(--vscode-input-placeholderForeground);
|
|
}
|
|
|
|
.toolbar-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 8px;
|
|
color: var(--vscode-button-secondaryForeground, var(--vscode-foreground));
|
|
background: var(--vscode-button-secondaryBackground, transparent);
|
|
border: 1px solid var(--vscode-contrastBorder, transparent);
|
|
border-radius: 2px;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.toolbar-button:hover {
|
|
background: var(--vscode-button-secondaryHoverBackground, var(--vscode-toolbar-hoverBackground));
|
|
}
|
|
|
|
.toolbar-button[aria-pressed='true'] {
|
|
color: var(--vscode-button-foreground);
|
|
background: var(--vscode-button-background);
|
|
}
|
|
|
|
.toolbar-button:focus-visible {
|
|
outline: 1px solid var(--vscode-focusBorder);
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
/* --- table -------------------------------------------------------------- */
|
|
|
|
#head {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 3;
|
|
display: grid;
|
|
grid-template-columns: var(--grid);
|
|
height: var(--header-height);
|
|
/* The theme's header colour is usually a translucent tint, so it is painted over the
|
|
solid editor background; otherwise rows scrolling underneath show through it. */
|
|
background-color: var(--vscode-editor-background);
|
|
background-image: linear-gradient(
|
|
var(--vscode-keybindingTable-headerBackground, transparent),
|
|
var(--vscode-keybindingTable-headerBackground, transparent));
|
|
border-bottom: 1px solid var(--vscode-panel-border, var(--vscode-editorWidget-border));
|
|
user-select: none;
|
|
}
|
|
|
|
#head .th {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 0 8px;
|
|
overflow: hidden;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#head .th:hover {
|
|
background: var(--vscode-toolbar-hoverBackground);
|
|
}
|
|
|
|
#head .th .label {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#head .th .arrow {
|
|
flex: 0 0 auto;
|
|
opacity: 0;
|
|
font-size: 9px;
|
|
}
|
|
|
|
#head .th[data-sorted] .arrow {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
#head .th:focus-visible {
|
|
outline: 1px solid var(--vscode-focusBorder);
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
/* Column resize grip: sits on the right edge of every header cell. */
|
|
#head .grip {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -3px;
|
|
width: 7px;
|
|
height: 100%;
|
|
cursor: col-resize;
|
|
z-index: 2;
|
|
}
|
|
|
|
#head .grip:hover,
|
|
body.resizing #head .grip {
|
|
background: var(--vscode-sash-hoverBorder);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
body.resizing {
|
|
cursor: col-resize;
|
|
user-select: none;
|
|
}
|
|
|
|
#table {
|
|
flex: 1 1 auto;
|
|
overflow: auto;
|
|
}
|
|
|
|
#body {
|
|
outline: none;
|
|
}
|
|
|
|
.row {
|
|
display: grid;
|
|
grid-template-columns: var(--grid);
|
|
height: var(--row-height);
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.row:hover {
|
|
background: var(--vscode-list-hoverBackground);
|
|
}
|
|
|
|
.row.selected {
|
|
color: var(--vscode-list-inactiveSelectionForeground);
|
|
background: var(--vscode-list-inactiveSelectionBackground);
|
|
}
|
|
|
|
#body:focus-within .row.selected,
|
|
#body:focus .row.selected {
|
|
color: var(--vscode-list-activeSelectionForeground);
|
|
background: var(--vscode-list-activeSelectionBackground);
|
|
}
|
|
|
|
.row .td {
|
|
padding: 0 8px;
|
|
overflow: hidden;
|
|
white-space: pre;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.td.code {
|
|
font-family: var(--vscode-editor-font-family);
|
|
font-size: var(--vscode-editor-font-size);
|
|
color: var(--cr-fg-default);
|
|
}
|
|
|
|
.td.line {
|
|
text-align: right;
|
|
color: var(--vscode-editorLineNumber-foreground);
|
|
font-family: var(--vscode-editor-font-family);
|
|
}
|
|
|
|
.td.file,
|
|
.td.project,
|
|
.td.member {
|
|
color: var(--vscode-descriptionForeground);
|
|
}
|
|
|
|
.td.file .name {
|
|
color: var(--vscode-foreground);
|
|
}
|
|
|
|
/* --- group headers ------------------------------------------------------ */
|
|
|
|
.group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
height: var(--row-height);
|
|
padding: 0 8px;
|
|
font-weight: 600;
|
|
background: var(--vscode-sideBarSectionHeader-background);
|
|
border-top: 1px solid var(--vscode-sideBarSectionHeader-border, transparent);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.group .twisty {
|
|
flex: 0 0 auto;
|
|
width: 10px;
|
|
text-align: center;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.group .count,
|
|
.group .project {
|
|
font-weight: normal;
|
|
color: var(--vscode-descriptionForeground);
|
|
}
|
|
|
|
|
|
/* --- code tokens -------------------------------------------------------- */
|
|
|
|
.tok-comment { color: var(--cr-comment); font-style: italic; }
|
|
.tok-string { color: var(--cr-string); }
|
|
.tok-keyword { color: var(--cr-keyword); }
|
|
.tok-control { color: var(--cr-control); }
|
|
.tok-number { color: var(--cr-number); }
|
|
.tok-type { color: var(--cr-type); }
|
|
.tok-call { color: var(--cr-call); }
|
|
.tok-punct { color: var(--cr-fg-default); }
|
|
.tok-variable{ color: var(--cr-variable); }
|
|
|
|
.hit {
|
|
background: var(--vscode-editor-findMatchHighlightBackground);
|
|
border: 1px solid var(--vscode-editor-findMatchHighlightBorder, transparent);
|
|
border-radius: 2px;
|
|
margin: 0 -1px;
|
|
}
|
|
|
|
|
|
/* --- empty state -------------------------------------------------------- */
|
|
|
|
#empty {
|
|
padding: 16px;
|
|
color: var(--vscode-descriptionForeground);
|
|
}
|
|
|
|
#empty[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
/* --- read / write ------------------------------------------------------- */
|
|
|
|
.segmented {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.segmented .segment {
|
|
border-radius: 0;
|
|
border-right-width: 0;
|
|
}
|
|
|
|
.segmented .segment:first-child {
|
|
border-radius: 2px 0 0 2px;
|
|
}
|
|
|
|
.segmented .segment:last-child {
|
|
border-radius: 0 2px 2px 0;
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
.td.kind {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.kind-badge {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
padding: 0 5px;
|
|
border: 1px solid transparent;
|
|
border-radius: 3px;
|
|
font-size: 0.9em;
|
|
line-height: 1.5;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Read and write are a pair, so they get the same treatment: the theme's info and
|
|
warning hues, tinted for the background and border so both stay readable on any
|
|
theme. Before, write was an alert box and read a greyed-out label, which made read
|
|
look disabled rather than merely "not a write". */
|
|
.kind-read {
|
|
--kind-hue: var(--vscode-editorInfo-foreground, var(--vscode-textLink-foreground));
|
|
}
|
|
|
|
.kind-write {
|
|
--kind-hue: var(--vscode-editorWarning-foreground, var(--vscode-charts-orange));
|
|
}
|
|
|
|
.kind-read,
|
|
.kind-write {
|
|
color: var(--kind-hue);
|
|
background: color-mix(in srgb, var(--kind-hue) 16%, transparent);
|
|
border-color: color-mix(in srgb, var(--kind-hue) 45%, transparent);
|
|
}
|
|
|
|
/* --- filters popover ---------------------------------------------------- */
|
|
|
|
.popover-host {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.popover {
|
|
position: absolute;
|
|
top: calc(100% + 4px);
|
|
right: 0;
|
|
z-index: 10;
|
|
min-width: 200px;
|
|
max-width: 320px;
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
padding: 4px;
|
|
color: var(--vscode-menu-foreground, var(--vscode-foreground));
|
|
background: var(--vscode-menu-background, var(--vscode-editorWidget-background));
|
|
border: 1px solid var(--vscode-menu-border, var(--vscode-editorWidget-border));
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 8px var(--vscode-widget-shadow, rgba(0, 0, 0, 0.36));
|
|
}
|
|
|
|
.popover[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.popover-heading {
|
|
padding: 6px 6px 2px;
|
|
color: var(--vscode-descriptionForeground);
|
|
font-size: 0.9em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.popover-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 3px 6px;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.popover-row:hover {
|
|
background: var(--vscode-list-hoverBackground);
|
|
}
|
|
|
|
.popover-row.disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.popover-row input {
|
|
flex: 0 0 auto;
|
|
margin: 0;
|
|
accent-color: var(--vscode-checkbox-background, var(--vscode-button-background));
|
|
}
|
|
|
|
.popover-label {
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.popover-count {
|
|
flex: 0 0 auto;
|
|
color: var(--vscode-descriptionForeground);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.popover-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding: 4px 6px 2px;
|
|
border-top: 1px solid var(--vscode-menu-separatorBackground, var(--vscode-panel-border));
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.link-button {
|
|
padding: 0;
|
|
color: var(--vscode-textLink-foreground);
|
|
background: none;
|
|
border: none;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.link-button:hover {
|
|
color: var(--vscode-textLink-activeForeground);
|
|
text-decoration: underline;
|
|
}
|