antigravity-xd
24fb28f70a
- Added top padding to all pages (Fix #4) - Implemented smooth accordion animations for navigation and messages (Fix #5, #9) - Fixed double selection highlight in navigation bar (Fix #6) - Enabled nested schedule routing for 'Session' view (Fix #7) - Softened switching animations for message types (Fix #8) - Reworked messages to use accordion expansion and removed history (Fix #9) - Moved Support section into Settings page (Fix #10) - Cleaned up unused imports and refined layouts Co-Authored-By: Claude <noreply@anthropic.com>
240 lines
7.0 KiB
CSS
240 lines
7.0 KiB
CSS
@import "tailwindcss";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
--color-background: var(--md-sys-color-background);
|
|
--color-foreground: var(--md-sys-color-on-background);
|
|
--font-sans: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
|
|
|
|
--color-card: var(--md-sys-color-surface-container);
|
|
--color-card-foreground: var(--md-sys-color-on-surface);
|
|
--color-popover: var(--md-sys-color-surface-container-high);
|
|
--color-popover-foreground: var(--md-sys-color-on-surface);
|
|
|
|
--color-primary: var(--md-sys-color-primary);
|
|
--color-primary-foreground: var(--md-sys-color-on-primary);
|
|
--color-secondary: var(--md-sys-color-secondary);
|
|
--color-secondary-foreground: var(--md-sys-color-on-secondary);
|
|
--color-muted: var(--md-sys-color-surface-container-high);
|
|
--color-muted-foreground: var(--md-sys-color-on-surface-variant);
|
|
--color-accent: var(--md-sys-color-primary-container);
|
|
--color-accent-foreground: var(--md-sys-color-on-primary-container);
|
|
|
|
--color-border: var(--md-sys-color-outline-variant);
|
|
--color-input: var(--md-sys-color-outline);
|
|
--color-ring: var(--md-sys-color-primary);
|
|
--color-destructive: var(--md-sys-color-error);
|
|
|
|
--color-sidebar: var(--md-sys-color-surface-container-low);
|
|
--color-sidebar-foreground: var(--md-sys-color-on-surface);
|
|
--color-sidebar-primary: var(--md-sys-color-primary-container);
|
|
--color-sidebar-primary-foreground: var(--md-sys-color-on-primary-container);
|
|
--color-sidebar-accent: var(--md-sys-color-surface-container-high);
|
|
--color-sidebar-accent-foreground: var(--md-sys-color-on-surface);
|
|
--color-sidebar-border: var(--md-sys-color-outline-variant);
|
|
--color-sidebar-ring: var(--md-sys-color-primary);
|
|
|
|
--color-brand: var(--md-sys-color-primary);
|
|
--color-brand-foreground: var(--md-sys-color-on-primary);
|
|
|
|
--radius-sm: calc(var(--radius) - 6px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 6px);
|
|
--radius-2xl: calc(var(--radius) + 12px);
|
|
--radius-3xl: calc(var(--radius) + 18px);
|
|
}
|
|
|
|
:root {
|
|
--radius: 1rem;
|
|
--nav-rail-width: 80px;
|
|
--nav-rail-expanded-width: 280px;
|
|
--nav-bar-height: 80px;
|
|
|
|
--md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.0);
|
|
--md-sys-motion-duration-medium: 200ms;
|
|
--md-sys-motion-duration-long: 400ms;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/45;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
@apply h-full overflow-x-hidden;
|
|
background-color: var(--md-sys-color-background);
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
background-image:
|
|
radial-gradient(
|
|
circle at 12% 14%,
|
|
color-mix(in oklab, var(--md-sys-color-primary-container) 65%, transparent),
|
|
transparent 48%
|
|
),
|
|
radial-gradient(
|
|
circle at 90% -2%,
|
|
color-mix(in oklab, var(--md-sys-color-surface-variant) 78%, transparent),
|
|
transparent 38%
|
|
),
|
|
linear-gradient(165deg, var(--md-sys-color-surface), var(--md-sys-color-surface-container-low));
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.dark body {
|
|
background-image:
|
|
radial-gradient(
|
|
circle at 10% 8%,
|
|
color-mix(in oklab, var(--md-sys-color-primary-container) 40%, transparent),
|
|
transparent 44%
|
|
),
|
|
radial-gradient(
|
|
circle at 90% 0%,
|
|
color-mix(in oklab, var(--md-sys-color-surface-variant) 56%, transparent),
|
|
transparent 36%
|
|
),
|
|
linear-gradient(170deg, var(--md-sys-color-surface), var(--md-sys-color-surface-container-low));
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.surface-card {
|
|
@apply bg-card/40 backdrop-blur-md border border-white/10 text-card-foreground rounded-3xl p-6 shadow-sm transition-all duration-200;
|
|
}
|
|
|
|
.surface-card-muted {
|
|
@apply bg-muted/50 rounded-2xl transition-all duration-200;
|
|
}
|
|
|
|
.surface-hero {
|
|
@apply bg-muted/60 backdrop-blur-xl border border-white/5 rounded-[2rem] shadow-sm;
|
|
}
|
|
|
|
.m3-badge {
|
|
@apply absolute -top-1 -right-1 bg-destructive text-white text-[10px] font-medium min-w-[16px] h-4 rounded-full flex items-center justify-center px-1;
|
|
}
|
|
|
|
.page-enter {
|
|
animation: fadeIn var(--md-sys-motion-duration-long) var(--md-sys-motion-easing-emphasized);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(12px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from { opacity: 0; transform: translateX(-10px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
/* Navigation System */
|
|
|
|
.navigation-bar {
|
|
@apply fixed left-0 right-0 bottom-0 h-[var(--nav-bar-height)] bg-background/80 backdrop-blur-xl flex justify-around items-center px-4 z-50 transition-transform duration-300 border-t border-white/5;
|
|
}
|
|
|
|
.navigation-bar.hidden {
|
|
@apply translate-y-full;
|
|
}
|
|
|
|
.navigation-rail {
|
|
@apply fixed left-0 top-0 bottom-0 w-[var(--nav-rail-width)] bg-sidebar/40 backdrop-blur-md flex flex-col py-4 border-r border-white/5 z-50 transition-all duration-300 ease-[var(--md-sys-motion-easing-emphasized)] overflow-hidden;
|
|
}
|
|
|
|
.navigation-rail.expanded {
|
|
@apply w-[var(--nav-rail-expanded-width)];
|
|
}
|
|
|
|
.nav-item {
|
|
@apply flex items-center no-underline text-muted-foreground h-14 px-3 relative transition-all duration-300 rounded-2xl mx-2;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
@apply bg-sidebar-accent/50 text-foreground;
|
|
}
|
|
|
|
.nav-item.active {
|
|
@apply bg-sidebar-primary text-sidebar-primary-foreground font-semibold;
|
|
}
|
|
|
|
.navigation-bar .nav-item {
|
|
@apply flex-col justify-center flex-1 gap-1 p-0 mx-1 h-16 bg-transparent;
|
|
}
|
|
|
|
.navigation-bar .nav-item.active {
|
|
@apply bg-transparent text-primary;
|
|
}
|
|
|
|
.nav-item-icon-wrapper {
|
|
@apply w-12 h-8 flex items-center justify-center rounded-2xl transition-all duration-300 relative;
|
|
}
|
|
|
|
.navigation-bar .nav-item.active .nav-item-icon-wrapper {
|
|
@apply bg-primary/10;
|
|
}
|
|
|
|
.nav-item-label {
|
|
@apply text-[11px] font-medium whitespace-nowrap transition-all duration-300;
|
|
}
|
|
|
|
.navigation-rail.expanded .nav-item {
|
|
@apply h-12 rounded-2xl mx-4 px-4;
|
|
}
|
|
|
|
.navigation-rail.expanded .nav-item-label {
|
|
@apply text-sm ml-3 flex-1 opacity-100;
|
|
}
|
|
|
|
/* Submenu */
|
|
|
|
.submenu {
|
|
@apply flex flex-col pl-14 pr-4 gap-1 mb-2 overflow-hidden transition-all duration-300;
|
|
}
|
|
|
|
.submenu-item {
|
|
@apply h-10 flex items-center no-underline text-muted-foreground text-sm rounded-xl px-4 transition-all duration-200;
|
|
}
|
|
|
|
.submenu-item:hover {
|
|
@apply bg-sidebar-accent/30 text-foreground;
|
|
}
|
|
|
|
.submenu-item.active {
|
|
@apply bg-primary/10 text-primary font-medium;
|
|
}
|
|
|
|
/* Main Content with Padding Fix #4 */
|
|
.main-content {
|
|
@apply flex-1 p-6 transition-all duration-300 ease-[var(--md-sys-motion-easing-emphasized)];
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
.navigation-bar { display: none; }
|
|
.main-content {
|
|
margin-left: var(--nav-rail-width);
|
|
padding-top: 3rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1240px) {
|
|
.main-content.with-expanded-rail {
|
|
margin-left: var(--nav-rail-expanded-width);
|
|
padding-top: 4rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 599px) {
|
|
.main-content {
|
|
padding-bottom: calc(var(--nav-bar-height) + 2rem);
|
|
padding-top: 2rem;
|
|
}
|
|
}
|