mirror of
https://github.com/aaif-goose/goose.git
synced 2026-07-03 14:10:03 +02:00
Douwe Osinga
d2195289cf
Co-authored-by: Douwe Osinga <douwe@squareup.com> Co-authored-by: Jack Amadeo <jackamadeo@squareup.com> Co-authored-by: Jack Amadeo <jackamadeo@block.xyz>
770 lines
19 KiB
CSS
770 lines
19 KiB
CSS
@import 'tailwindcss';
|
|
@import 'tw-animate-css';
|
|
@plugin '@tailwindcss/typography';
|
|
|
|
@theme {
|
|
--breakpoint-md: 930px;
|
|
}
|
|
|
|
/* Cash Sans */
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme {
|
|
--shadow-*: initial;
|
|
|
|
--color-white: #ffffff;
|
|
--color-black: #000000;
|
|
|
|
--color-block-teal: #13bbaf;
|
|
--color-block-orange: #ff4f00;
|
|
|
|
--color-neutral-50: #f4f6f7;
|
|
--color-neutral-100: #e3e6ea;
|
|
--color-neutral-200: #cbd1d6;
|
|
--color-neutral-300: #a7b0b9;
|
|
--color-neutral-400: #878787;
|
|
--color-neutral-500: #606c7a;
|
|
--color-neutral-600: #525b68;
|
|
--color-neutral-700: #474e57;
|
|
--color-neutral-800: #3f434b;
|
|
--color-neutral-900: #32353b;
|
|
--color-neutral-950: #22252a;
|
|
|
|
--color-red-100: #ff6b6b;
|
|
--color-red-200: #f94b4b;
|
|
|
|
--color-blue-100: #7cacff;
|
|
--color-blue-200: #5c98f9;
|
|
|
|
--color-green-100: #a3d795;
|
|
--color-green-200: #91cb80;
|
|
|
|
--color-yellow-100: #ffd966;
|
|
--color-yellow-200: #fbcd44;
|
|
|
|
--color-accent: var(--color-neutral-900);
|
|
}
|
|
|
|
:root {
|
|
/* fonts */
|
|
--font-sans: 'Cash Sans', sans-serif;
|
|
--font-mono: 'Cash Sans Mono', monospace;
|
|
|
|
/* theming accents */
|
|
--background-accent: var(--color-accent);
|
|
--border-accent: var(--color-accent);
|
|
--text-accent: var(--color-accent);
|
|
--text-on-accent: var(--color-white);
|
|
|
|
/* Semantic */
|
|
--background-app: var(--color-white);
|
|
--background-default: var(--color-white);
|
|
--background-card: var(--color-white);
|
|
--background-muted: var(--color-neutral-50);
|
|
--background-medium: var(--color-neutral-100);
|
|
--background-strong: var(--color-neutral-300);
|
|
--background-inverse: var(--color-black);
|
|
--background-danger: var(--color-red-200);
|
|
--background-success: var(--color-green-200);
|
|
--background-info: var(--color-blue-200);
|
|
--background-warning: var(--color-yellow-200);
|
|
|
|
--border-default: var(--color-neutral-100);
|
|
--border-input: var(--color-neutral-100);
|
|
--border-strong: var(--color-neutral-100);
|
|
--border-danger: var(--color-red-200);
|
|
--border-success: var(--color-green-200);
|
|
--border-warning: var(--color-yellow-200);
|
|
--border-info: var(--color-blue-200);
|
|
|
|
--text-default: var(--color-neutral-800);
|
|
--text-muted: var(--color-neutral-400);
|
|
--text-inverse: var(--color-white);
|
|
--text-danger: var(--color-red-200);
|
|
--text-success: var(--color-green-200);
|
|
--text-warning: var(--color-yellow-200);
|
|
--text-info: var(--color-blue-200);
|
|
|
|
--ring: var(--border-strong);
|
|
|
|
--sidebar: var(--background-muted);
|
|
--sidebar-foreground: var(--text-default);
|
|
--sidebar-primary: var(--background-accent);
|
|
--sidebar-primary-foreground: var(--text-inverse);
|
|
--sidebar-accent: var(--background-muted);
|
|
--sidebar-accent-foreground: var(--text-default);
|
|
--sidebar-border: var(--border-default);
|
|
--sidebar-ring: var(--border-default);
|
|
|
|
/* custom shadow */
|
|
|
|
--shadow-default:
|
|
0px 12px 32px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px rgba(0, 0, 0, 0.02),
|
|
0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.dark {
|
|
/* theming accents */
|
|
--background-accent: var(--color-white);
|
|
--border-accent: var(--color-white);
|
|
--text-accent: var(--color-white);
|
|
--text-on-accent: var(--color-black);
|
|
|
|
/* semantic */
|
|
--background-app: var(--color-neutral-950);
|
|
--background-default: var(--color-neutral-950);
|
|
--background-card: var(--color-neutral-950);
|
|
--background-muted: var(--color-neutral-800);
|
|
--background-medium: var(--color-neutral-700);
|
|
--background-strong: var(--color-neutral-600);
|
|
--background-inverse: var(--color-neutral-200);
|
|
--background-danger: var(--color-red-100);
|
|
--background-success: var(--color-green-100);
|
|
--background-info: var(--color-blue-100);
|
|
--background-warning: var(--color-yellow-100);
|
|
|
|
--border-default: var(--color-neutral-900);
|
|
--border-input: var(--color-neutral-800);
|
|
--border-strong: var(--color-neutral-700);
|
|
--border-danger: var(--color-red-100);
|
|
--border-success: var(--color-green-100);
|
|
--border-warning: var(--color-yellow-100);
|
|
--border-info: var(--color-blue-100);
|
|
|
|
--text-default: var(--color-white);
|
|
--text-muted: var(--color-neutral-400);
|
|
--text-inverse: var(--color-black);
|
|
--text-danger: var(--color-red-100);
|
|
--text-success: var(--color-green-100);
|
|
--text-warning: var(--color-yellow-100);
|
|
--text-info: var(--color-blue-100);
|
|
|
|
--ring: var(--border-strong);
|
|
|
|
--sidebar: var(--background-muted);
|
|
--sidebar-foreground: var(--text-default);
|
|
--sidebar-primary: var(--background-accent);
|
|
--sidebar-primary-foreground: var(--text-inverse);
|
|
--sidebar-accent: var(--background-muted);
|
|
--sidebar-accent-foreground: var(--text-default);
|
|
--sidebar-border: var(--border-default);
|
|
--sidebar-ring: var(--border-default);
|
|
|
|
--shadow-default:
|
|
0px 12px 32px 0px rgba(0, 0, 0, 0.2), 0px 8px 16px 0px rgba(0, 0, 0, 0.15),
|
|
0px 2px 4px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
@theme inline {
|
|
--ease-g2: cubic-bezier(0.55, 0, 1, 0.45);
|
|
|
|
--color-background-default: var(--background-default);
|
|
--color-background-muted: var(--background-muted);
|
|
--color-background-medium: var(--background-medium);
|
|
--color-background-strong: var(--background-strong);
|
|
--color-background-inverse: var(--background-inverse);
|
|
--color-background-danger: var(--background-danger);
|
|
--color-background-success: var(--background-success);
|
|
--color-background-info: var(--background-info);
|
|
--color-background-warning: var(--background-warning);
|
|
--color-background-card: var(--background-card);
|
|
|
|
--color-background-accent: var(--background-accent);
|
|
--color-border-accent: var(--border-accent);
|
|
--color-text-accent: var(--text-accent);
|
|
--color-text-on-accent: var(--text-on-accent);
|
|
|
|
--color-border-default: var(--border-default);
|
|
--color-border-input: var(--border-input);
|
|
--color-border-strong: var(--border-strong);
|
|
--color-border-danger: var(--border-danger);
|
|
--color-border-success: var(--border-success);
|
|
--color-border-warning: var(--border-warning);
|
|
--color-border-info: var(--border-info);
|
|
|
|
--color-text-default: var(--text-default);
|
|
--color-text-muted: var(--text-muted);
|
|
--color-text-inverse: var(--text-inverse);
|
|
--color-text-danger: var(--text-danger);
|
|
--color-text-success: var(--text-success);
|
|
--color-text-warning: var(--text-warning);
|
|
--color-text-info: var(--text-info);
|
|
|
|
--font-sans: 'Cash Sans', sans-serif;
|
|
--font-mono: 'Cash Sans Mono', monospace;
|
|
--font-serif: serif;
|
|
|
|
--color-ring: var(--ring);
|
|
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
|
|
--shadow-default: var(--shadow-default);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border-default;
|
|
}
|
|
body {
|
|
@apply text-text-default;
|
|
}
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cash Sans';
|
|
src:
|
|
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Light.woff2)
|
|
format('woff2'),
|
|
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Light.woff) format('woff');
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cash Sans';
|
|
src:
|
|
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Regular.woff2)
|
|
format('woff2'),
|
|
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Regular.woff)
|
|
format('woff');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cash Sans';
|
|
src:
|
|
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Medium.woff2)
|
|
format('woff2'),
|
|
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Medium.woff) format('woff');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cash Sans';
|
|
src:
|
|
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Bold.woff2)
|
|
format('woff2'),
|
|
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Bold.woff) format('woff');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cash Sans Mono';
|
|
src:
|
|
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSansMono-Regular.woff2)
|
|
format('woff2'),
|
|
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSansMono-Regular.woff)
|
|
format('woff');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cash Sans Mono';
|
|
src:
|
|
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSansMono-Light.woff2)
|
|
format('woff2'),
|
|
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSansMono-Light.woff)
|
|
format('woff');
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
}
|
|
|
|
/* animations */
|
|
@keyframes appear {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fade-slide-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes sidebar-item-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes wind {
|
|
0% {
|
|
transform: translate(0, 0);
|
|
}
|
|
99.99% {
|
|
transform: translate(-100%, 100%);
|
|
}
|
|
100% {
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
|
|
/* Non-blocking sidebar animations */
|
|
.sidebar-item {
|
|
/* Start hidden and positioned to the right */
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
animation: sidebar-item-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
/* Use will-change sparingly and remove after animation */
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.sidebar-item:nth-child(1) {
|
|
animation-delay: 0.05s;
|
|
}
|
|
.sidebar-item:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
.sidebar-item:nth-child(3) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
.sidebar-item:nth-child(4) {
|
|
animation-delay: 0.45s;
|
|
}
|
|
.sidebar-item:nth-child(5) {
|
|
animation-delay: 0.5s;
|
|
}
|
|
.sidebar-item:nth-child(6) {
|
|
animation-delay: 0.25s;
|
|
}
|
|
.sidebar-item:nth-child(7) {
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
/* Remove will-change after animation completes */
|
|
.sidebar-item {
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.sidebar-item {
|
|
animation: none;
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
/* Toast close button styling */
|
|
.Toastify__close-button {
|
|
color: var(--text-prominent-inverse) !important;
|
|
opacity: 0.7;
|
|
align-self: flex-start;
|
|
margin-top: 4px;
|
|
margin-right: 4px;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
transition:
|
|
opacity 0.2s ease,
|
|
background-color 0.2s ease;
|
|
}
|
|
|
|
.Toastify__close-button:hover {
|
|
opacity: 1;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.Toastify__close-button:focus {
|
|
outline: 2px solid var(--color-block-teal);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Ensure close button is visible on all toast types */
|
|
.Toastify__toast--success .Toastify__close-button,
|
|
.Toastify__toast--error .Toastify__close-button,
|
|
.Toastify__toast--info .Toastify__close-button,
|
|
.Toastify__toast--warning .Toastify__close-button,
|
|
.Toastify__toast--default .Toastify__close-button {
|
|
color: var(--text-prominent-inverse) !important;
|
|
}
|
|
|
|
.animate-fade-slide-up {
|
|
animation: fade-slide-up 0.15s ease-out forwards;
|
|
}
|
|
|
|
/* Force scrollbars to be visible */
|
|
[data-radix-scroll-area-viewport] {
|
|
scrollbar-width: auto !important;
|
|
-ms-overflow-style: auto !important;
|
|
}
|
|
|
|
/* Override Radix UI ScrollArea styles */
|
|
[data-radix-scroll-area-viewport] > div {
|
|
display: block !important;
|
|
}
|
|
|
|
/* Native scrollbar styling */
|
|
* {
|
|
scrollbar-width: auto;
|
|
scrollbar-color: var(--color-neutral-200) transparent;
|
|
}
|
|
|
|
.dark * {
|
|
scrollbar-color: var(--color-neutral-400) transparent;
|
|
}
|
|
|
|
/* Webkit scrollbar styles */
|
|
::-webkit-scrollbar {
|
|
-webkit-appearance: none;
|
|
width: 12px; /* Increased from 8px */
|
|
height: 12px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
border-radius: 0;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--color-neutral-200);
|
|
border: 3px solid transparent; /* Creates padding effect */
|
|
border-radius: 8px;
|
|
background-clip: padding-box;
|
|
min-height: 40px; /* Minimum height of thumb */
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background-color: var(--color-neutral-400);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--color-neutral-300);
|
|
border: 2px solid transparent; /* Slightly less padding on hover */
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--color-neutral-500);
|
|
}
|
|
|
|
/* Ensure the thumb is more prominent when active */
|
|
::-webkit-scrollbar-thumb:active {
|
|
background-color: var(--color-neutral-400);
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb:active {
|
|
background-color: var(--color-neutral-500);
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-neutral-200);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background: var(--color-neutral-400);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-neutral-300);
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-neutral-500);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background-app);
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
.word-break {
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.titlebar-drag-region {
|
|
-webkit-app-region: drag;
|
|
height: 32px;
|
|
width: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 50;
|
|
}
|
|
|
|
.no-drag {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
.bg-inline-code {
|
|
border-radius: 4px;
|
|
color: var(--color-neutral-200);
|
|
font-family: 'Cash Sans Mono', monospace;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
.bg-inline-code:before {
|
|
content: '';
|
|
}
|
|
|
|
pre:has(> code.bg-inline-code) {
|
|
padding: 1em;
|
|
}
|
|
|
|
li > code.bg-inline-code,
|
|
p > code.bg-inline-code {
|
|
color: var(--color-block-orange);
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
.bg-inline-code:after {
|
|
content: '';
|
|
}
|
|
|
|
.user-message p {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.scrollbar-thin {
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.assistant:has(+ .user) .goose-message {
|
|
padding-bottom: 24px;
|
|
}
|
|
|
|
/* Virtualized list styles */
|
|
.virtualized-list {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--color-neutral-300) transparent;
|
|
}
|
|
|
|
.virtualized-list::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.virtualized-list::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.virtualized-list::-webkit-scrollbar-thumb {
|
|
background-color: var(--color-neutral-300);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.dark .virtualized-list::-webkit-scrollbar-thumb {
|
|
background-color: var(--color-neutral-400);
|
|
}
|
|
|
|
.virtualized-list::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--color-neutral-400);
|
|
}
|
|
|
|
.dark .virtualized-list::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--color-neutral-300);
|
|
}
|
|
|
|
/* Ensure virtualized items don't have margin/padding that could break layout */
|
|
.virtualized-list > div {
|
|
outline: none;
|
|
}
|
|
|
|
/* Optimize performance for virtualized rendering */
|
|
.virtualized-list * {
|
|
contain: layout style paint;
|
|
}
|
|
|
|
/* Goose icon animation to replace framer-motion */
|
|
@keyframes goose-icon-entrance {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.25) translate(-5px, 5px) rotate(-20deg);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1) translate(0, 0) rotate(0deg);
|
|
}
|
|
}
|
|
|
|
.goose-icon-animation {
|
|
animation: goose-icon-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
|
transform-origin: bottom left;
|
|
}
|
|
|
|
/* Session list optimizations */
|
|
.session-grid {
|
|
/* Use CSS Grid for better performance */
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 1rem;
|
|
/* Optimize for large lists */
|
|
contain: layout style paint;
|
|
}
|
|
|
|
.session-item {
|
|
/* Default state - visible and positioned */
|
|
opacity: 1;
|
|
transform: translateY(0) translateZ(0);
|
|
|
|
/* Optimize individual session cards */
|
|
contain: layout style;
|
|
/* Use hardware acceleration */
|
|
backface-visibility: hidden;
|
|
/* Ensure smooth interactions */
|
|
will-change: auto;
|
|
}
|
|
|
|
.session-item:hover {
|
|
/* Only use will-change during hover */
|
|
will-change: transform, box-shadow;
|
|
}
|
|
|
|
.session-item:not(:hover) {
|
|
will-change: auto;
|
|
}
|
|
|
|
/* Optimize session skeleton loading */
|
|
.session-skeleton {
|
|
contain: layout style paint;
|
|
/* Prevent layout thrashing during loading */
|
|
min-height: 140px;
|
|
}
|
|
|
|
/* Ensure navigation is always responsive */
|
|
[data-slot='sidebar-menu-button'] {
|
|
/* Ensure buttons are always clickable during transitions */
|
|
pointer-events: auto !important;
|
|
/* Optimize for interaction */
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
/* Ensure all navigation buttons are immediately responsive */
|
|
.sidebar-item button,
|
|
.sidebar-item a,
|
|
[data-slot='sidebar-menu-button'] {
|
|
pointer-events: auto !important;
|
|
/* Prevent any blocking during animations */
|
|
will-change: auto;
|
|
}
|
|
|
|
/* Override any blocking pointer events during animations */
|
|
.sidebar-item,
|
|
.sidebar-item * {
|
|
pointer-events: auto !important;
|
|
}
|
|
|
|
/* Optimize route transitions for better performance */
|
|
.route-container {
|
|
/* Use hardware acceleration for smoother transitions */
|
|
transform: translateZ(0);
|
|
backface-visibility: hidden;
|
|
/* Optimize for content changes */
|
|
contain: layout style paint;
|
|
}
|
|
|
|
/* Non-blocking page transitions */
|
|
@keyframes page-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.page-transition {
|
|
/* Start with proper initial state to prevent flicker */
|
|
opacity: 0;
|
|
animation: page-fade-in 0.08s ease-out forwards;
|
|
/* Don't block interactions during animation */
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Sidebar transition optimizations */
|
|
[data-slot='sidebar-container'] {
|
|
/* Promote to composite layer for smoother animations */
|
|
transform: translateZ(0);
|
|
backface-visibility: hidden;
|
|
/* Optimize for transform animations */
|
|
will-change: transform;
|
|
}
|
|
|
|
[data-slot='sidebar-gap'] {
|
|
/* Optimize for width animations */
|
|
will-change: width;
|
|
}
|
|
|
|
/* Remove will-change when not transitioning to save memory */
|
|
[data-state='expanded'] [data-slot='sidebar-container'],
|
|
[data-state='collapsed'] [data-slot='sidebar-container'] {
|
|
will-change: auto;
|
|
}
|
|
|
|
[data-state='expanded'] [data-slot='sidebar-gap'],
|
|
[data-state='collapsed'] [data-slot='sidebar-gap'] {
|
|
will-change: auto;
|
|
}
|
|
|
|
/* Ensure smooth transitions during state changes */
|
|
[data-state='expanded'] [data-slot='sidebar-container'],
|
|
[data-state='collapsed'] [data-slot='sidebar-container'] {
|
|
will-change: transform;
|
|
}
|
|
|
|
[data-state='expanded'] [data-slot='sidebar-gap'],
|
|
[data-state='collapsed'] [data-slot='sidebar-gap'] {
|
|
will-change: width;
|
|
}
|
|
|
|
/* Subtle back-and-forth shimmer animation for onboarding card */
|
|
@keyframes shimmer {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
20% {
|
|
opacity: 0.15;
|
|
}
|
|
50% {
|
|
transform: translateX(100%);
|
|
opacity: 0.05;
|
|
}
|
|
80% {
|
|
opacity: 0.15;
|
|
}
|
|
100% {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.animate-shimmer {
|
|
animation: shimmer 6s ease-in-out infinite;
|
|
}
|