mirror of
https://github.com/stack-auth/stack.git
synced 2026-07-03 21:02:05 +08:00
64b885fb70
- Added a new `ConfigAgentRun` model to track the state of configuration agent runs in the database. - Updated the Prisma schema to include new fields for the `ConfigAgentRun` model, allowing for detailed tracking of run status, timestamps, and associated metadata. - Introduced new API routes for starting, cancelling, and committing configuration agent runs, improving user interaction and feedback during updates. - Updated existing routes to utilize the new `run_id` for better tracking and management of agent runs. - Added a new dependency `diff` to facilitate change tracking in configuration files. These changes aim to improve the overall functionality and user experience of the configuration agent integration with GitHub.
503 lines
12 KiB
CSS
503 lines
12 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--data-grid-sticky-top: 3.5rem;
|
|
--background: 230 45% 86%;
|
|
--foreground: 240 10% 3.9%;
|
|
|
|
--card: 0 0% 100% / 0.5;
|
|
--card-foreground: 240 10% 3.9%;
|
|
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 240 10% 3.9%;
|
|
|
|
--primary: 240 5.9% 10%;
|
|
--primary-foreground: 0 0% 98%;
|
|
|
|
--secondary: 245 30% 90%;
|
|
--secondary-in-card: 240 4.8% 95.9%;
|
|
--secondary-foreground: 240 5.9% 10%;
|
|
|
|
--muted: 250 35% 92%;
|
|
--muted-in-card: 240 4.8% 95.9%;
|
|
--muted-foreground: 232 12% 38%;
|
|
|
|
--accent: 248 32% 91%;
|
|
--accent-in-card: 240 4.8% 95.9%;
|
|
--accent-foreground: 240 5.9% 10%;
|
|
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
|
|
--success: 120 40% 50%;
|
|
--success-foreground: 0 0% 98%;
|
|
|
|
--border: 230 25% 78%;
|
|
--border-in-card: 240 5.9% 90%;
|
|
--input: 230 20% 72%;
|
|
--input-in-card: 240 5.9% 80%;
|
|
--ring: 240 10% 3.9%;
|
|
|
|
--radius: 0.5rem;
|
|
|
|
--rainbow-beam-blur: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #f59e0b, #10b981, #3b82f6);
|
|
--rainbow-beam-sharp: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6, #fbbf24, #34d399, #60a5fa);
|
|
|
|
--page-ambient:
|
|
linear-gradient(145deg, hsl(232 42% 88%) 0%, hsl(228 48% 84%) 40%, hsl(244 38% 86%) 100%);
|
|
}
|
|
|
|
.dark {
|
|
--data-grid-sticky-top: 5rem;
|
|
--background: 240 10% 3.9%;
|
|
--foreground: 0 0% 98%;
|
|
|
|
--card: 240 10% 9.4% / 0.5;
|
|
--card-foreground: 0 0% 98%;
|
|
|
|
--popover: 240 10% 3.9%;
|
|
--popover-foreground: 0 0% 98%;
|
|
|
|
--primary: 0 0% 98%;
|
|
--primary-foreground: 240 5.9% 10%;
|
|
|
|
--secondary: 240 3.7% 15.9%;
|
|
--secondary-in-card: 240 3.7% 23.9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
|
|
--muted: 240 3.7% 15.9%;
|
|
--muted-in-card: 240 3.7% 23.9%;
|
|
--muted-foreground: 240 5% 64.9%;
|
|
|
|
--accent: 240 3.7% 15.9%;
|
|
--accent-in-card: 240 3.7% 23.9%;
|
|
--accent-foreground: 0 0% 98%;
|
|
|
|
--destructive: 0 62.8% 50%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
|
|
--success: 120 40% 50%;
|
|
--success-foreground: 0 0% 98%;
|
|
|
|
--border: 240 3.7% 35.9%;
|
|
--border-in-card: 240 3.7% 43.9%;
|
|
--input: 240 3.7% 25.9%;
|
|
--input-in-card: 240 3.7% 43.9%;
|
|
--ring: 240 4.9% 83.9%;
|
|
|
|
--page-ambient: none;
|
|
}
|
|
}
|
|
|
|
.stack-scope {
|
|
--background: inherit !important;
|
|
--foreground: inherit !important;
|
|
|
|
--card: inherit !important;
|
|
--card-foreground: inherit !important;
|
|
|
|
--popover: inherit !important;
|
|
--popover-foreground: inherit !important;
|
|
|
|
--primary: inherit !important;
|
|
--primary-foreground: inherit !important;
|
|
|
|
--secondary: inherit !important;
|
|
--secondary-in-card: inherit !important;
|
|
--secondary-foreground: inherit !important;
|
|
|
|
--muted: inherit !important;
|
|
--muted-in-card: inherit !important;
|
|
--muted-foreground: inherit !important;
|
|
|
|
--accent: inherit !important;
|
|
--accent-in-card: inherit !important;
|
|
--accent-foreground: inherit !important;
|
|
|
|
--destructive: inherit !important;
|
|
--destructive-foreground: inherit !important;
|
|
|
|
--success: inherit !important;
|
|
--success-foreground: inherit !important;
|
|
|
|
--border: inherit !important;
|
|
--border-in-card: inherit !important;
|
|
--input: inherit !important;
|
|
--input-in-card: inherit !important;
|
|
--ring: inherit !important;
|
|
|
|
--radius: inherit !important;
|
|
}
|
|
|
|
/* Embedded AuthPage preview in dashboard: neutral tokens so tabs/inputs match hosted
|
|
handler UX. Dashboard :root uses lavender --muted (250°); stack-scope inherits it. */
|
|
.auth-preview-host-theme {
|
|
--background: 0 0% 100%;
|
|
--foreground: 240 10% 3.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 240 10% 3.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 240 10% 3.9%;
|
|
--primary: 240 5.9% 10%;
|
|
--primary-foreground: 0 0% 98%;
|
|
--secondary: 240 4.8% 95.9%;
|
|
--secondary-in-card: 240 4.8% 95.9%;
|
|
--secondary-foreground: 240 5.9% 10%;
|
|
--muted: 240 4.8% 95.9%;
|
|
--muted-in-card: 240 4.8% 95.9%;
|
|
--muted-foreground: 240 3.8% 46.1%;
|
|
--accent: 240 4.8% 95.9%;
|
|
--accent-in-card: 240 4.8% 95.9%;
|
|
--accent-foreground: 240 5.9% 10%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 240 5.9% 90%;
|
|
--border-in-card: 240 5.9% 90%;
|
|
--input: 240 5.9% 90%;
|
|
--input-in-card: 240 5.9% 90%;
|
|
--ring: 240 10% 3.9%;
|
|
}
|
|
|
|
.dark .auth-preview-host-theme {
|
|
--background: 240 10% 3.9%;
|
|
--foreground: 0 0% 98%;
|
|
--card: 240 10% 3.9%;
|
|
--card-foreground: 0 0% 98%;
|
|
--popover: 240 10% 3.9%;
|
|
--popover-foreground: 0 0% 98%;
|
|
--primary: 0 0% 98%;
|
|
--primary-foreground: 240 5.9% 10%;
|
|
--secondary: 240 3.7% 15.9%;
|
|
--secondary-in-card: 240 3.7% 15.9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
--muted: 240 3.7% 15.9%;
|
|
--muted-in-card: 240 3.7% 15.9%;
|
|
--muted-foreground: 240 5% 64.9%;
|
|
--accent: 240 3.7% 15.9%;
|
|
--accent-in-card: 240 3.7% 15.9%;
|
|
--accent-foreground: 0 0% 98%;
|
|
--destructive: 0 62.8% 50%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 240 3.7% 35.9%;
|
|
--border-in-card: 240 3.7% 35.9%;
|
|
--input: 240 3.7% 25.9%;
|
|
--input-in-card: 240 3.7% 25.9%;
|
|
--ring: 240 4.9% 83.9%;
|
|
}
|
|
|
|
@keyframes onboarding-cascade-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(18px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.onboarding-cascade {
|
|
opacity: 0;
|
|
animation: onboarding-cascade-in 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
animation-delay: calc(var(--cascade-i, 0) * 80ms + 60ms);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.onboarding-cascade {
|
|
animation: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
|
|
scrollbar-width: thin;
|
|
scrollbar-color: hsl(var(--foreground) / 0.22) transparent;
|
|
}
|
|
|
|
.analytics-card-tooltip-escape .recharts-tooltip-wrapper {
|
|
z-index: 9999 !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.analytics-card-tooltip-escape .recharts-tooltip-wrapper > * {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background-color: hsl(var(--foreground) / 0.18);
|
|
border-radius: 9999px;
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background-color: hsl(var(--foreground) / 0.28);
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
background-image: var(--page-ambient);
|
|
background-blend-mode: normal, screen, screen, normal;
|
|
background-attachment: fixed;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
position: relative;
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
opacity: 0.75;
|
|
background-image: var(--page-ambient);
|
|
background-blend-mode: normal, screen, screen, normal;
|
|
mix-blend-mode: normal;
|
|
}
|
|
|
|
.dark body::before {
|
|
opacity: 0;
|
|
}
|
|
|
|
html:not(.dark) body:has([data-hexclave-handler-page]) {
|
|
background-color: white;
|
|
background-image: none;
|
|
}
|
|
|
|
html:not(.dark) body:has([data-hexclave-handler-page])::before {
|
|
opacity: 0;
|
|
background-image: none;
|
|
}
|
|
|
|
html:not(.dark) body:has([data-hexclave-purchase-page]) {
|
|
background-color: white;
|
|
background-image: none;
|
|
}
|
|
|
|
.dark body:has([data-hexclave-purchase-page]) {
|
|
background-color: hsl(240 10% 3.9%);
|
|
}
|
|
|
|
html:not(.dark) body:has([data-hexclave-purchase-page])::before,
|
|
.dark body:has([data-hexclave-purchase-page])::before {
|
|
opacity: 0;
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation: none;
|
|
mix-blend-mode: normal;
|
|
}
|
|
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
transform-origin: center center;
|
|
}
|
|
|
|
/* Applied during theme view-transitions so component-level CSS transitions
|
|
(transition-colors, transition-all, etc.) don't lag behind the swipe. */
|
|
.vt-disable-transitions,
|
|
.vt-disable-transitions *,
|
|
.vt-disable-transitions *::before,
|
|
.vt-disable-transitions *::after {
|
|
transition-duration: 0s !important;
|
|
}
|
|
|
|
.bg-card {
|
|
box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.02);
|
|
backdrop-filter: blur(12px);
|
|
background-image: radial-gradient(ellipse at top, #fdfdfd88, transparent), radial-gradient(ellipse at bottom, #ffffff88, transparent);
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.dark .bg-card {
|
|
box-shadow: none;
|
|
backdrop-filter: blur(12px);
|
|
background-image: radial-gradient(ellipse at top, #18182288, transparent), radial-gradient(ellipse at bottom, #19191988, transparent);
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.bg-card > * {
|
|
--secondary: var(--secondary-in-card);
|
|
--muted: var(--muted-in-card);
|
|
--accent: var(--accent-in-card);
|
|
--input: var(--input-in-card);
|
|
--border: var(--border-in-card);
|
|
}
|
|
|
|
.site-loading-indicator {
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 24px;
|
|
position: fixed;
|
|
background: transparent;
|
|
overflow: hidden;
|
|
z-index: 9999;
|
|
pointer-events: none;
|
|
touch-action: none;
|
|
user-select: none;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease-in-out;
|
|
}
|
|
body:has(.show-site-loading-indicator) .site-loading-indicator {
|
|
opacity: 1;
|
|
transition: none;
|
|
}
|
|
.site-loading-indicator > .site-loading-indicator-inner {
|
|
width: 40%;
|
|
height: 3px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
box-sizing: border-box;
|
|
animation: animsite-loading-indicator 1s linear infinite;
|
|
border-radius: 1.5px;
|
|
background-image: linear-gradient(90deg,
|
|
rgba(95, 174, 247, 0) 0%,
|
|
rgba(95, 174, 247, 1) 64.8%,
|
|
rgba(107, 93, 247, 1) 84%,
|
|
rgba(255, 255, 255, 1) 100%
|
|
);
|
|
}
|
|
.site-loading-indicator > .site-loading-indicator-inner > .site-loading-indicator-inner-glow {
|
|
position: absolute;
|
|
inset: -32px;
|
|
filter: blur(8px);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.site-loading-indicator > .site-loading-indicator-inner > .site-loading-indicator-inner-glow::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 28px;
|
|
background-image: linear-gradient(90deg,
|
|
rgba(95, 174, 247, 0) 0%,
|
|
rgba(95, 174, 247, 1) 64.8%,
|
|
rgba(107, 93, 247, 1) 84%,
|
|
rgba(255, 255, 255, 1) 100%
|
|
);
|
|
}
|
|
|
|
@media (min-width: 800px) {
|
|
.site-loading-indicator > .site-loading-indicator-inner {
|
|
width: 20%;
|
|
animation: animsite-loading-indicator 2s linear infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes animsite-loading-indicator {
|
|
0% {
|
|
left: 0;
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
@keyframes data-grid-export-progress-shimmer {
|
|
0% {
|
|
transform: translateX(-105%);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(245%);
|
|
}
|
|
}
|
|
|
|
.data-grid-export-progress-shimmer {
|
|
animation: data-grid-export-progress-shimmer 1.35s ease-in-out infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
@keyframes rainbow-beam {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.data-grid-export-progress-shimmer {
|
|
animation: none;
|
|
transform: translateX(75%);
|
|
}
|
|
}
|
|
|
|
|
|
/* Pacifica styles */
|
|
[data-pacifica-surface] {
|
|
backdrop-filter: contrast(40%) blur(24px);
|
|
background-color: hsl(var(--background), 0.2);
|
|
color: hsl(var(--card-foreground));
|
|
}
|
|
|
|
.dark [data-pacifica-surface] {
|
|
background-image: radial-gradient(circle at top, #ffffff0d, #ffffff04), radial-gradient(circle at top right, #ffffff04, transparent, transparent);
|
|
}
|
|
|
|
[data-pacifica-border] {
|
|
border: 2px solid rgba(127, 127, 127, 0.2);
|
|
box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
:where([data-pacifica-children-flex-grow] > *) {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
:where([data-pacifica-children-min-width-0] > *) {
|
|
min-width: 0;
|
|
}
|
|
|
|
|
|
/* Config-agent commit-preview diff (Pierre `@pierre/diffs`).
|
|
*
|
|
* Pierre renders into a shadow-DOM `diffs-container`. We can't reach inside with
|
|
* normal selectors, but CSS custom properties inherit through the shadow
|
|
* boundary, so setting Pierre's documented override hooks on the light-DOM
|
|
* wrapper recolors the diff chrome. Syntax-token colors still come from the
|
|
* shiki github-light/github-dark themes (chosen via `themeType`).
|
|
*
|
|
* We only set the *base* surface/accent/number colors and let Pierre derive the
|
|
* row tints, emphasis, gutters and separators from them (`color-mix` over the
|
|
* base). The project tokens already flip between light and dark via `.dark`, so
|
|
* both `light-dark()` branches are pointed at the same token. */
|
|
.config-agent-diff {
|
|
--diffs-light-bg: hsl(var(--background));
|
|
--diffs-dark-bg: hsl(var(--background));
|
|
--diffs-light: hsl(var(--foreground));
|
|
--diffs-dark: hsl(var(--foreground));
|
|
|
|
--diffs-fg-number-override: hsl(var(--muted-foreground));
|
|
|
|
--diffs-addition-color-override: hsl(var(--success));
|
|
--diffs-deletion-color-override: hsl(var(--destructive));
|
|
}
|