Files
cursor-byok/apps/desktop/src/components/metrics/HomeMetrics.module.scss
T

87 lines
1.5 KiB
SCSS

@use "../../styles/typography" as type;
.scroller {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.root {
width: 100%;
height: 130px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
overflow: hidden;
border: 1px solid var(--vscode-sideBar-border);
border-radius: var(--oa-overlay-radius);
font-family: var(--oa-metrics-font);
}
.metric {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 16px;
& + & {
border-left: 1px solid var(--vscode-sideBar-border);
}
}
.label {
display: flex;
align-items: center;
gap: 5px;
color: var(--vscode-descriptionForeground);
font-size: type.$font-size-xs;
line-height: 1;
}
.info {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
color: inherit;
background: transparent;
border: 0;
transition: color 150ms ease;
opacity: 0.5;
&:hover,
&:focus-visible {
color: var(--vscode-foreground);
}
}
.body {
min-width: 0;
}
.value {
overflow: hidden;
color: var(--vscode-foreground);
font-family: var(--oa-number-font);
font-size: type.$font-size-xxl;
line-height: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
.secondary {
margin-top: 12px;
overflow: hidden;
color: var(--vscode-descriptionForeground);
font-size: 12px;
line-height: 1.4;
text-overflow: ellipsis;
white-space: nowrap;
}
.tooltipText {
white-space: pre-wrap;
}