mirror of
https://github.com/coder/coder.git
synced 2026-09-24 15:04:27 +08:00
548a648dcb
Adds the Session Thread page --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> Co-authored-by: Jake Howell <jacob@coder.com>
243 lines
6.9 KiB
CSS
243 lines
6.9 KiB
CSS
/*
|
||
To enable opacity in colors, please use the new HSL format.
|
||
Related issue: https://github.com/shadcn-ui/ui/issues/805#issuecomment-1616021820
|
||
*/
|
||
|
||
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
@font-face {
|
||
font-family: "seti";
|
||
src: url("/seti.woff") format("woff");
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@layer base {
|
||
:root,
|
||
.light {
|
||
--content-primary: 240 10% 4%;
|
||
--content-secondary: 240 5% 34%;
|
||
--content-link: 221 83% 53%;
|
||
--content-invert: 0 0% 98%;
|
||
--content-disabled: 240 5% 65%;
|
||
--content-success: 142 72% 29%;
|
||
--content-warning: 27 96% 61%;
|
||
--content-destructive: 0 84% 60%;
|
||
--surface-primary: 0 0% 100%;
|
||
--surface-secondary: 240 5% 96%;
|
||
--surface-tertiary: 240 6% 90%;
|
||
--surface-quaternary: 240 5% 84%;
|
||
--surface-invert-primary: 240 4% 16%;
|
||
--surface-invert-secondary: 240 5% 26%;
|
||
--surface-destructive: 0 93% 94%;
|
||
--surface-green: 141 79% 85%;
|
||
--surface-grey: 240 5% 96%;
|
||
--surface-orange: 34 100% 92%;
|
||
--surface-sky: 191, 67%, 89%;
|
||
--surface-red: 0 93% 94%;
|
||
--surface-purple: 259, 100%, 95%;
|
||
--surface-magenta: 289 100% 98%;
|
||
--border-purple: 255 92% 76%;
|
||
--border-default: 240 6% 90%;
|
||
--border-success: 142 76% 36%;
|
||
--border-sky: 203 90% 40%;
|
||
--border-green: 138 82% 82%;
|
||
--border-magenta: 295, 68%, 46%;
|
||
--border-warning: 30.66, 97.16%, 72.35%;
|
||
--border-destructive: 0 84% 60%;
|
||
--border-hover: 240 5% 34%;
|
||
--overlay-default: 240 5% 84% / 80%;
|
||
--radius: 0.5rem;
|
||
--highlight-purple: 271, 61%, 35%;
|
||
--highlight-green: 143 64% 24%;
|
||
--highlight-orange: 30 100% 32%;
|
||
--highlight-sky: 195, 61%, 22%;
|
||
--highlight-red: 0 74% 42%;
|
||
--highlight-magenta: 295, 68%, 40%;
|
||
--syntax-key: 211 95% 33%;
|
||
--syntax-string: 0 77% 36%;
|
||
--syntax-number: 158 88% 28%;
|
||
--syntax-boolean: 240 100% 50%;
|
||
--git-added: 142 72% 29%;
|
||
--git-deleted: 0 74% 42%;
|
||
--git-modified: 17 88% 40%;
|
||
--git-merged: 271 91% 65%;
|
||
--git-added-bright: 142 72% 29%;
|
||
--git-deleted-bright: 0 74% 42%;
|
||
--git-merged-bright: 272 72% 47%;
|
||
--surface-git-added: 141 84% 93%;
|
||
--surface-git-deleted: 0 93% 94%;
|
||
--surface-git-merged: 269 100% 95%;
|
||
--border: 240 5.9% 90%;
|
||
--input: 240 5.9% 90%;
|
||
--ring: 240 10% 3.9%;
|
||
/*
|
||
shadcn-compatible aliases consumed by streamdown and
|
||
internal components (e.g. shimmer). These names are
|
||
intentionally generic so they match shadcn conventions.
|
||
Do NOT rename without updating every consumer.
|
||
*/
|
||
--background: 0 0% 98%;
|
||
--foreground: 240 10% 4%;
|
||
--muted: 240 5% 96%;
|
||
--muted-foreground: 240 5% 34%;
|
||
--primary: 221 83% 53%;
|
||
--primary-foreground: 0 0% 98%;
|
||
--avatar-lg: 2.5rem;
|
||
--avatar-default: 2rem;
|
||
--avatar-sm: 1.5rem;
|
||
}
|
||
.dark {
|
||
--content-primary: 0 0% 100%;
|
||
--content-secondary: 240 5% 65%;
|
||
--content-link: 213 94% 68%;
|
||
--content-invert: 240 10% 4%;
|
||
--content-disabled: 240 5% 26%;
|
||
--content-success: 142 76% 36%;
|
||
--content-warning: 31 97% 72%;
|
||
--content-destructive: 0 91% 71%;
|
||
--surface-primary: 240 10% 4%;
|
||
--surface-secondary: 240 6% 10%;
|
||
--surface-tertiary: 240 4% 16%;
|
||
--surface-quaternary: 240 5% 26%;
|
||
--surface-invert-primary: 240 6% 90%;
|
||
--surface-invert-secondary: 240 5% 65%;
|
||
--surface-destructive: 0 75% 15%;
|
||
--surface-green: 145 80% 10%;
|
||
--surface-grey: 240 6% 10%;
|
||
--surface-orange: 13 81% 15%;
|
||
--surface-sky: 196, 67%, 12%;
|
||
--surface-red: 0 75% 15%;
|
||
--surface-purple: 268, 68%, 17%;
|
||
--surface-magenta: 291, 74%, 15%;
|
||
--border-purple: 255 92% 76%;
|
||
--border-default: 240 4% 16%;
|
||
--border-success: 142 76% 36%;
|
||
--border-magenta: 292, 100%, 78%;
|
||
--border-warning: 30.66, 97.16%, 72.35%;
|
||
--border-destructive: 0 91% 71%;
|
||
--border-sky: 194 90% 62%;
|
||
--border-green: 143 77% 87%;
|
||
--border-hover: 240, 5%, 34%;
|
||
--overlay-default: 240 10% 4% / 80%;
|
||
--highlight-purple: 269, 100%, 74%;
|
||
--highlight-green: 141 79% 85%;
|
||
--highlight-orange: 31 100% 70%;
|
||
--highlight-sky: 188, 75%, 80%;
|
||
--highlight-red: 0 91% 71%;
|
||
--highlight-magenta: 292, 100%, 78%;
|
||
--syntax-key: 201 98% 80%;
|
||
--syntax-string: 18 47% 64%;
|
||
--syntax-number: 100 28% 73%;
|
||
--syntax-boolean: 207 61% 59%;
|
||
--git-added: 142 77% 73%;
|
||
--git-deleted: 0 94% 82%;
|
||
--git-modified: 31 97% 72%;
|
||
--git-merged: 271 91% 65%;
|
||
--git-added-bright: 142 71% 45%;
|
||
--git-deleted-bright: 0 91% 71%;
|
||
--git-merged-bright: 270 95% 75%;
|
||
--surface-git-added: 145 80% 10%;
|
||
--surface-git-deleted: 0 75% 15%;
|
||
--surface-git-merged: 274 87% 21%;
|
||
--border: 240 3.7% 15.9%;
|
||
--input: 240 3.7% 15.9%;
|
||
--ring: 240 4.9% 83.9%;
|
||
/* shadcn-compatible aliases – see :root block for details. */
|
||
--background: 240 10% 4%;
|
||
--foreground: 0 0% 98%;
|
||
--muted: 240 6% 10%;
|
||
--muted-foreground: 240 5% 65%;
|
||
--primary: 213 94% 68%;
|
||
--primary-foreground: 240 10% 4%;
|
||
}
|
||
}
|
||
|
||
@layer base {
|
||
* {
|
||
@apply border-border;
|
||
}
|
||
|
||
html,
|
||
body,
|
||
#root,
|
||
#storybook-root {
|
||
@apply h-full;
|
||
}
|
||
|
||
button,
|
||
input {
|
||
@apply font-sans;
|
||
}
|
||
|
||
input:-webkit-autofill,
|
||
input:-webkit-autofill:hover,
|
||
input:-webkit-autofill:focus,
|
||
input:-webkit-autofill:active {
|
||
-webkit-box-shadow: 0 0 0 100px hsl(var(--surface-primary)) inset !important;
|
||
}
|
||
|
||
::placeholder {
|
||
@apply text-content-secondary;
|
||
}
|
||
|
||
fieldset {
|
||
@apply border-none p-0 m-0 w-full;
|
||
}
|
||
|
||
/* Prevent layout shift when modals open by maintaining scrollbar width.
|
||
scrollbar-gutter: stable reserves space for the scrollbar so Radix's
|
||
scroll-bar compensation (margin-right/padding-right) is unnecessary
|
||
and causes double spacing. We zero it out with !important to win
|
||
over Radix's injected !important styles. The @supports guard ensures
|
||
we only do this on browsers that actually support scrollbar-gutter.
|
||
|
||
There’s a related issue on GitHub: Radix UI Primitives Issue #3251
|
||
https://github.com/radix-ui/primitives/issues/3251
|
||
*/
|
||
@supports (scrollbar-gutter: stable) {
|
||
html {
|
||
scrollbar-gutter: stable;
|
||
}
|
||
|
||
html body[data-scroll-locked] {
|
||
--removed-body-scroll-bar-size: 0 !important;
|
||
margin-right: 0 !important;
|
||
overflow-y: scroll !important;
|
||
}
|
||
}
|
||
|
||
/*
|
||
This is a temporary fix for MUI Modals/Popovers until they are removed.
|
||
When html has scrollbar-gutter: stable, the browser reserves space for the scrollbar.
|
||
MUI Modals/Popovers, when locking body scroll, add `overflow: hidden` and `padding-right`
|
||
to the body to compensate for the scrollbar they are hiding. This added padding-right
|
||
conflicts with the already reserved gutter space, causing a layout shift.
|
||
This rule overrides MUI's added padding-right on the body specifically when MUI
|
||
is likely to have set both overflow:hidden and padding-right.
|
||
*/
|
||
body[style*="overflow: hidden"][style*="padding-right"] {
|
||
padding-right: 0px;
|
||
}
|
||
}
|
||
|
||
@layer utilities {
|
||
.text-xs-mono {
|
||
@apply text-xs font-mono font-medium;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
scroll-behavior: auto !important;
|
||
}
|
||
}
|